/* 31-desktop-rail-foot.css — Desktop Studio · left-rail PROFILE footer (handoff 1:1)
   ─────────────────────────────────────────────────────────────────────
   Founder (2026-06-16): the bottom-left was "Settings · v312"; the mock has a
   profile footer there (handoff .rail-l-foot): avatar + name + plan sub +
   ••• account button. Reproduce it 1:1, wired to the existing user state
   (_stanzaiUser.displayName, same source as the top-bar chip). "Free beta" is
   a static plan label (no tier field on the user yet). The old v312 version
   tag is dropped (not in the mock).

   Signed-out → no avatar / no plan / no •••; the name reads "Sign in" in gold
   and the row opens the auth card. Signed-in → avatar initial + name + FREE
   BETA + ••• → profile.

   Scope: >=1024 + body.session-active (the rail footer is session-gated).
   Linked LAST so it wins the 12-desktop .rail-footer rules.
   Plain static CSS — no prompts/schemas/model-facing content. */

@media (min-width: 1024px) {
  /* Rail height fix — without this the profile footer renders OFF-SCREEN.
     The rail is fixed at top:64px (pushed below the 64px top bar in
     12-desktop.css:2494) but still inherits height:100vh from its base
     desktop rule (10-library-songbrain-rails.css:437). top + height (height
     wins over bottom) → the rail is a full 100vh tall STARTING at 64px, so
     it overflows the viewport bottom by 64px and the bottom-anchored footer
     lands below the fold. Constrain the height to the space under the top
     bar so the footer sits on-screen. (Rail only shows on desktop in-session.) */
  .tabbar { height: calc(100vh - 64px); }

  /* Reset the old mono-uppercase space-between footer → handoff .rail-l-foot row */
  body.session-active .tabbar .rail-footer {
    justify-content: flex-start; gap: 10px;
    padding: 10px 12px;
    font-family: 'Outfit', sans-serif; font-size: inherit; letter-spacing: normal; text-transform: none;
  }

  body.session-active .rail-foot-profile {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
    background: transparent; border: none; cursor: pointer; text-align: left;
    padding: 4px; margin: -4px; border-radius: 8px;
    transition: background var(--state-dur) var(--easing-standard);
  }
  body.session-active .rail-foot-profile:hover { background: rgba(var(--ivory-rgb),0.03); }

  body.session-active .rf-av {
    width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
    background: linear-gradient(135deg, #8C6A2E, var(--gold)); color: #1a1200;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600;
  }
  body.session-active .rf-meta { display: flex; flex-direction: column; min-width: 0; }
  body.session-active .rf-name {
    font-family: 'Outfit', sans-serif; font-size: 13.5px; font-weight: 500; color: var(--t1); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.session-active .rf-sub {
    font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--t3); margin-top: 2px;
  }

  body.session-active .rail-foot-more {
    margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--t3); cursor: pointer;
    transition: color var(--state-dur) var(--easing-standard), background var(--state-dur) var(--easing-standard);
  }
  body.session-active .rail-foot-more svg { width: 16px; height: 16px; }
  body.session-active .rail-foot-more:hover { color: var(--t1); background: var(--dt-float); }

  /* Signed-out — avatar / plan / ••• hidden; "Sign in" reads as the name in gold */
  body.session-active .rail-footer.signed-out .rf-av,
  body.session-active .rail-footer.signed-out .rf-sub,
  body.session-active .rail-footer.signed-out .rail-foot-more { display: none; }
  body.session-active .rail-footer.signed-out .rf-name { color: var(--stz-gold-hi, #e8c070); }
  body.session-active .rail-footer.signed-out .rail-foot-profile { padding-left: 6px; }

  /* ── Account menu (signed-in) — opens UPWARD from the footer in place, so a
     footer tap no longer jumps into the full Profile page mid-session. Mirrors
     the desktop .dt-nav-menu dropdown idiom (12-desktop.css). Preferences ·
     Sign out. Hidden until JS adds .open (see _toggleRailAcctMenu in nav.js). */
  body.session-active .rail-footer { position: relative; }
  .rail-foot-menu {
    position: absolute; bottom: calc(100% + 8px); left: 12px; right: 12px;
    background: var(--s1); border: 1px solid var(--b2); border-radius: 12px;
    box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.03) inset;
    padding: 6px; z-index: 600;
    opacity: 0; pointer-events: none; transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4,0,0.2,1);
  }
  .rail-foot-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .rfm-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px; background: transparent; border: none; border-radius: 8px;
    cursor: pointer; color: var(--t2);
    font-family: 'Outfit', sans-serif; font-size: 13.5px; letter-spacing: 0; text-transform: none;
    transition: background var(--state-dur) var(--easing-standard), color var(--state-dur) var(--easing-standard);
    -webkit-tap-highlight-color: transparent;
  }
  .rfm-item:hover { background: rgba(255,255,255,0.035); color: var(--t1); }
  .rfm-item:active { background: rgba(var(--gold-rgb), 0.06); }
}