@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@500;700;800;900&display=swap');

  :root{
    --bg: #0D0F17;
    --surface: #171A26;
    --surface-2: #1F2333;
    --line: #2A2E42;
    --text: #EDEFF7;
    --text-dim: #8B90A8;
    --mint: #7CFFB2;
    --mint-dim: #4FBF87;
    --amber: #FFB86B;
    --red: #FF5470;
    --font-display: 'Space Grotesk', sans-serif;
    --font-futuristic: 'Orbitron', 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Today's Frequency — set by JS from real activity (see applyAtmosphere), never
       from a timer or a random pick. These defaults are the "steady" tier so the app
       looks right even before that computation ever runs. */
    --brand-gradient: linear-gradient(90deg, #7CFFB2, #00E5FF, #7C4DFF, #7CFFB2);
    --brand-shimmer-duration: 5s;
    /* Broadcast/Signal "living room" energy palette (visual refresh only —
       same brand-gradient family used by the wordmark, extended with the
       magenta accent, applied to Signals + Toga only, kept subtle per the
       "no overdesign" brief: cinematic, not a neon dashboard). */
    --naluno-cyan: #00E5FF;
    --naluno-purple: #7C4DFF;
    --naluno-magenta: #FF3DA6;
    --signal-gradient: conic-gradient(from 0deg, #7CFFB2, #00E5FF, #7C4DFF, #FF3DA6, #7CFFB2);
    --atmosphere-tint: radial-gradient(120% 60% at 50% 0%, rgba(124,255,178,.08), transparent 70%);
  }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent; }
  html,body{ height:100%; }
  body{
    background:#05060A; color:var(--text); font-family:var(--font-body);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .app{
    position:relative; width:100%; max-width:460px; height:100vh; max-height:940px;
    background: radial-gradient(120% 100% at 50% 0%, #141728 0%, #0D0F17 60%);
    border-radius:28px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.55);
    display:flex; flex-direction:column;
  }
  @media (max-width:480px){ .app{ border-radius:0; max-width:100%; max-height:100%; } }
  /* FIX ("the app is static and vertical, make it sensitive to orientation"):
     manifest.json used to hard-lock orientation to portrait — the app never
     actually rotated at all regardless of how the phone was held. With that
     lock removed, this is the other half: without it, a real phone rotated
     to landscape would hit neither media query above (its width in
     landscape, e.g. ~900px on a large phone, is well past 480px) and fall
     back to the DESKTOP "phone mockup" sizing — a fixed 460px-wide,
     up-to-940px-tall card, which in landscape has far less real height
     available than that cap assumes, leaving a squashed, badly-proportioned
     box centered in a lot of unused space on either side. This scales the
     shell to the SMALLER of the two real dimensions instead, keeping it
     phone-proportioned and fully on-screen — actually responsive to
     orientation, not just unlocked and left to render badly. */
  @media (orientation:landscape) and (max-height:600px){
    .app{
      width:auto; height:100dvh; max-height:100dvh;
      max-width:min(460px, calc(100dvh * 0.52));
      border-radius:0;
    }
  }
  body.naluno-landscape .navbar{ padding-top:6px; padding-bottom:6px; }
  body.naluno-landscape .navbtn span:not([id]){ display:none; }
  button, input, textarea{ font-family:inherit; }

  /* ---------- shared ---------- */
  .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
  .eyebrow.live{ color:var(--mint); }
  .eyebrow.live::before{ content:''; display:inline-block; width:6px;height:6px;border-radius:50%; background:var(--mint); margin-right:7px; box-shadow:0 0 0 0 rgba(124,255,178,.6); animation:pulse-dot 1.6s infinite; }
  @keyframes pulse-dot{ 0%{box-shadow:0 0 0 0 rgba(124,255,178,.55);} 70%{box-shadow:0 0 0 8px rgba(124,255,178,0);} 100%{box-shadow:0 0 0 0 rgba(124,255,178,0);} }
  .toast{ position:absolute; top:16px; left:50%; transform:translateX(-50%) translateY(-10px); background:var(--surface-2); border:1px solid var(--line); padding:9px 16px; border-radius:999px; font-size:12px; font-family:var(--font-mono); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:60; white-space:nowrap; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  svg{ display:block; }
  .avatar{ border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; flex-shrink:0; color:#0D0F17; position:relative; overflow:hidden; isolation:isolate; transform:translateZ(0); -webkit-mask-image:radial-gradient(#000 99%, transparent 100%); mask-image:radial-gradient(#000 99%, transparent 100%); }
  .avatar img.avatar-pic, img.avatar-pic{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; border-radius:inherit; display:block;
    pointer-events:none; z-index:1; transform-origin:center center;
  }

  /* ---------- app header (logo) ---------- */
  .brand-row{ display:flex; align-items:center; gap:9px; }
  .brand-mark{ width:22px; height:22px; }
  .brand-word{
    font-family: var(--font-futuristic);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .16em;
    background: var(--brand-gradient);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 7px rgba(124,255,178,.4));
    animation: brandShimmer var(--brand-shimmer-duration) linear infinite, brandBreathe 3.4s ease-in-out infinite;
    display: inline-block;
    transition: filter .8s ease;
  }
  @keyframes brandShimmer{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 300% 50%; }
  }
  @keyframes brandBreathe{
    0%,100%{ letter-spacing:.16em; transform:scale(1); }
    50%{ letter-spacing:.24em; transform:scale(1.035); }
  }

  /* ---------- entry gate logo (auth splash only) ---------- */
  .naluno-entry-logo{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:16px;
  }
  .naluno-entry-mark-wrap{
    position:relative; width:92px; height:92px;
    display:flex; align-items:center; justify-content:center;
  }
  .naluno-entry-mark{
    width:68px; height:68px;
    overflow:visible;
    filter: drop-shadow(0 0 12px rgba(124,255,178,.55));
    opacity:0; visibility:hidden;
  }
  #authGate.naluno-entry-play .naluno-entry-mark{
    visibility:visible;
    animation: entryMarkIn .85s cubic-bezier(.2,.85,.2,1) both;
  }
  .naluno-entry-mark .em-core,
  .naluno-entry-mark .em-stem,
  .naluno-entry-mark .em-arc{
    fill:none;
    transform-box:fill-box;
    transform-origin:center;
  }
  .naluno-entry-mark .em-core{
    stroke-dasharray:38;
    stroke-dashoffset:38;
  }
  #authGate.naluno-entry-play .naluno-entry-mark .em-core{
    animation: entryDraw .9s ease forwards .12s, entryCoreGlow 2.4s ease-in-out 1.1s infinite;
  }
  .naluno-entry-mark .em-stem{
    stroke-dasharray:8;
    stroke-dashoffset:8;
  }
  #authGate.naluno-entry-play .naluno-entry-mark .em-stem{
    animation: entryDraw .45s ease forwards .42s;
  }
  .naluno-entry-mark .em-arc-1,
  .naluno-entry-mark .em-arc-2{ opacity:0; }
  #authGate.naluno-entry-play .naluno-entry-mark .em-arc-1{
    animation: entryArcPulse 1.9s ease-out .55s infinite;
  }
  #authGate.naluno-entry-play .naluno-entry-mark .em-arc-2{
    animation: entryArcPulse 1.9s ease-out .9s infinite;
  }
  .naluno-entry-ping{
    position:absolute; inset:10px; border-radius:50%;
    border:1.5px solid rgba(124,255,178,.55);
    pointer-events:none;
    opacity:0; visibility:hidden;
  }
  #authGate.naluno-entry-play .naluno-entry-ping{
    visibility:visible;
    animation: entryPing 2.2s ease-out infinite;
  }
  .naluno-entry-ping.delay{ animation-delay:.7s; border-color:rgba(0,229,255,.4); }
  .naluno-entry-word{
    font-size:26px;
    letter-spacing:.28em;
    opacity:0; visibility:hidden;
  }
  #authGate.naluno-entry-play .naluno-entry-word{
    visibility:visible;
    animation: entryWordIn .75s ease both .48s, brandShimmer var(--brand-shimmer-duration) linear infinite, brandBreathe 3.4s ease-in-out infinite;
  }
  #authGate.naluno-entry-play .greenroom-pill{
    visibility:visible; opacity:1; transition:opacity .45s ease .7s;
  }
  #authGate.naluno-entry-out{
    opacity:0; pointer-events:none; transition:opacity .45s ease;
  }
  #authGate.naluno-entry-play .naluno-entry-logo.settled .naluno-entry-mark{
    animation:none; opacity:1; visibility:visible;
  }
  #authGate.naluno-entry-play .naluno-entry-logo.settled .em-core,
  #authGate.naluno-entry-play .naluno-entry-logo.settled .em-stem{
    stroke-dashoffset:0;
  }
  #authGate.naluno-entry-play .naluno-entry-logo.settled .naluno-entry-word{
    opacity:1; visibility:visible;
    animation: brandShimmer var(--brand-shimmer-duration) linear infinite, brandBreathe 3.4s ease-in-out infinite;
  }
  @keyframes entryMarkIn{
    from{ transform:scale(.55); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }
  @keyframes entryDraw{
    to{ stroke-dashoffset:0; }
  }
  @keyframes entryCoreGlow{
    0%,100%{ filter:drop-shadow(0 0 2px rgba(124,255,178,.4)); }
    50%{ filter:drop-shadow(0 0 8px rgba(124,255,178,.95)); }
  }
  @keyframes entryArcPulse{
    0%{ opacity:.1; }
    35%{ opacity:.95; }
    100%{ opacity:.18; }
  }
  @keyframes entryPing{
    0%{ transform:scale(.55); opacity:.7; }
    100%{ transform:scale(1.55); opacity:0; }
  }
  @keyframes entryWordIn{
    from{ opacity:0; transform:translateY(12px) scale(.94); letter-spacing:.42em; }
    to{ opacity:1; transform:none; }
  }
  @media (prefers-reduced-motion: reduce){
    #authGate.naluno-entry-play .naluno-entry-mark,
    #authGate.naluno-entry-play .naluno-entry-mark .em-core,
    #authGate.naluno-entry-play .naluno-entry-mark .em-stem,
    #authGate.naluno-entry-play .naluno-entry-mark .em-arc-1,
    #authGate.naluno-entry-play .naluno-entry-mark .em-arc-2,
    #authGate.naluno-entry-play .naluno-entry-word{
      animation:none; opacity:1; visibility:visible; stroke-dashoffset:0; transform:none;
    }
    #authGate.naluno-entry-play .naluno-entry-ping{ animation:none; visibility:visible; opacity:.45; transform:scale(1.08); }
    #authGate.naluno-entry-play .naluno-entry-ping.on{ opacity:.85; border-color:rgba(0,229,255,.8); }
  }

  /* ---------- bottom nav ---------- */
  .navbar{
    display:flex; border-top:1px solid rgba(124,255,178,.14);
    background:rgba(13,15,23,.82); backdrop-filter:blur(18px);
    padding: 6px 4px calc(env(safe-area-inset-bottom,0px) + 8px);
    position:absolute; left:0; right:0; bottom:0; z-index:80;
  }
  .navbar::before{
    content:''; position:absolute; left:8%; right:8%; top:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(124,255,178,.55), rgba(0,229,255,.4), transparent);
    background-size:220% 100%;
    animation: headerScan 7s linear infinite;
  }
  .navbtn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
    background:none; border:none; color:var(--text-dim); cursor:pointer; border-radius:12px;
    transition: color .25s, background .25s, box-shadow .25s, opacity .25s;
  }
  .navbtn.active{
    color:var(--mint);
    background:rgba(124,255,178,.08);
    box-shadow: inset 0 0 0 1px rgba(124,255,178,.16), 0 0 18px -8px rgba(124,255,178,.55);
  }
  .navbtn.active svg{ filter: drop-shadow(0 0 5px rgba(124,255,178,.55)); }
  .navbtn span{ font-size:9.5px; font-family:var(--font-mono); letter-spacing:.02em; }
  .navbtn.inactive{ opacity:.48; }
  .navbtn.inactive.active{ opacity:.85; color:var(--text-dim);
    background:rgba(139,144,168,.08);
    box-shadow: inset 0 0 0 1px rgba(139,144,168,.2);
  }
  .navbtn.inactive.active svg{ filter:none; }
  .nav-off-dot{
    display:none; position:absolute; top:4px; right:calc(50% - 14px);
    width:6px; height:6px; border-radius:50%;
    background:var(--text-dim); border:1.5px solid var(--bg);
  }
  .navbtn.inactive .nav-off-dot{ display:block; }
  /* Support is Broadcast-only. If an old cached shell still has the nav tab, hide it. */
  .navbtn[data-tab="support"],
  #supportNavBtn,
  #tab-support{ display:none !important; }

  /* ---------- tab screens ---------- */
  .tabscreen{ position:absolute; inset:0; bottom:66px; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s; }
  .tabscreen.active{ opacity:1; pointer-events:auto; }
  .tab-header{
    padding:22px 22px 14px; display:flex; align-items:center; justify-content:space-between;
    background:var(--atmosphere-tint); background-repeat:no-repeat; transition:background 1.2s ease;
    position:relative;
  }
  .tab-header::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(124,255,178,.4), rgba(0,229,255,.35), transparent);
    background-size:220% 100%;
    animation: headerScan 8s linear infinite;
  }
  .tab-title{ font-family:var(--font-futuristic); font-weight:700; font-size:22px; letter-spacing:.03em; }
  .tab-scroll{ flex:1; overflow-y:auto; padding: 0 14px 20px; }
  .tab-scroll::-webkit-scrollbar{ width:0; }
  .ghost-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .ghost-btn:hover{ border-color:var(--mint-dim); color:var(--mint); }
  /* FIX ("connect magnifying glass hard to spot/understand"): a bare 36px
     circular icon with only a hover-only title attribute was easy to miss
     and easy to misread — a search icon alone doesn't say what it searches
     FOR. Scoped to this one button only (by id, not the shared .ghost-btn
     class) so every other icon-only ghost-btn elsewhere is unaffected. */
  #findPeopleBtn{ width:auto; border-radius:999px; padding:0 14px 0 12px; gap:6px; }
  .ghost-btn-label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; white-space:nowrap; }

  /* ---------- FREQUENCIES (contacts) ---------- */
  .search-pill{ margin:0 8px 14px; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 14px; color:var(--text-dim); }
  .search-pill input{ background:none; border:none; outline:none; color:var(--text); font-size:14px; flex:1; }
  .section-label{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); letter-spacing:.1em; text-transform:uppercase; padding:6px 10px 8px; }
  .contact-row{
    display:flex; align-items:center; gap:13px; padding:10px; border-radius:16px; cursor:pointer;
    transition:background .2s, box-shadow .2s, border-color .2s;
    border:1px solid transparent;
  }
  .contact-row:hover, .contact-row:active{
    background:rgba(124,255,178,.05);
    border-color:rgba(124,255,178,.14);
    box-shadow: 0 0 20px -12px rgba(124,255,178,.45);
  }
  .contact-row .avatar{ width:46px; height:46px; font-size:15px; position:relative; }
  .signal-bars{ position:absolute; right:-4px; bottom:-4px; display:flex; align-items:flex-end; gap:1.5px; background:rgba(13,15,23,.9); padding:3px 3px 2px; border-radius:6px; border:1.5px solid var(--bg); }
  .signal-bars span{ width:2.5px; border-radius:1px; background:var(--line); display:block; }
  .signal-bars span:nth-child(1){ height:3px; }
  .signal-bars span:nth-child(2){ height:5px; }
  .signal-bars span:nth-child(3){ height:7px; }
  .signal-bars span:nth-child(4){ height:9px; }
  .signal-bars span.on{ background: var(--bar-color, var(--mint)); animation: sigPulse 1.8s ease-in-out infinite; }
  .signal-bars span.on:nth-child(2){ animation-delay:.15s; }
  .signal-bars span.on:nth-child(3){ animation-delay:.3s; }
  .signal-bars span.on:nth-child(4){ animation-delay:.45s; }
  @keyframes sigPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
  .contact-meta{ flex:1; min-width:0; }
  .contact-name{ font-weight:600; font-size:15px; }
  .contact-sub{ font-size:12.5px; color:var(--text-dim); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .call-icon-btn{ width:38px; height:38px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--mint); cursor:pointer; }
  .call-icon-btn:hover{ background:var(--mint); color:#0D0F17; }

  /* ---------- BROADCAST (status) ---------- */
  .bcast-strip{ display:flex; gap:14px; padding:12px 10px 22px; overflow-x:auto; }
  .bcast-strip::-webkit-scrollbar{ display:none; }
  .bcast-item{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; flex-shrink:0; }
  .ring{ width:60px; height:60px; border-radius:50%; padding:2.5px; background: conic-gradient(var(--mint), var(--mint-dim), var(--amber), var(--mint)); }
  .ring.seen{ background:var(--line); }
  .ring .avatar{ width:100%; height:100%; border:2.5px solid var(--bg); font-size:14px; }
  .bcast-item > span{ font-size:11px; color:var(--text-dim); max-width:64px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bcast-list-row{ display:flex; align-items:center; gap:13px; padding:11px 10px; border-radius:16px; }
  .bcast-list-row .avatar{ width:44px; height:44px; font-size:14px; }
  .bcast-time{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); }

  /* ---------- CALLSIGN (profile) ---------- */
  .profile-hero{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 20px 26px; }
  .profile-avatar-wrap{ position:relative; }
  .profile-avatar{ width:96px; height:96px; font-size:32px; }
  .avatar-edit{ position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%; background:var(--mint); color:#0D0F17; display:flex; align-items:center; justify-content:center; border:3px solid var(--bg); cursor:pointer; }
  .field{ padding: 0 20px 16px; }
  .field label{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; }
  .field input, .field textarea{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:13px 14px; color:var(--text); font-size:14.5px; outline:none; resize:none; }
  .field input:focus, .field textarea:focus{ border-color:var(--mint-dim); }
  .swatch-row{ display:flex; gap:10px; padding:0 6px; }
  .swatch{ width:32px; height:32px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; }
  .swatch.selected{ border-color:var(--text); }
  .save-btn{ margin:8px 20px 0; padding:15px; border-radius:14px; background:var(--mint); color:#0D0F17; font-family:var(--font-futuristic); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; border:none; cursor:pointer; }
  .save-btn:hover{ background:#8FFFC0; }

  .greenroom-setting{ margin:22px 20px 0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; }
  .greenroom-setting-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
  .greenroom-setting-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); }
  .greenroom-setting-title{ font-weight:600; font-size:14px; }
  .greenroom-setting-sub{ font-size:12.5px; color:var(--text-dim); line-height:1.5; }
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
  .switch{ width:42px; height:24px; border-radius:99px; background:var(--line); position:relative; cursor:pointer; transition:background .2s; }
  .switch.on{ background:var(--mint); }
  .switch::after{ content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transition:left .2s; }
  .switch.on::after{ left:21px; }

  /* ================= CALL OVERLAY (shared for lobby / ringing / incoming / incall) ================= */
  .call-overlay{
    position:absolute; inset:0; z-index:50; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .3s ease;
    background:
      repeating-linear-gradient(0deg, rgba(124,255,178,.045) 0px, rgba(124,255,178,.045) 1px, transparent 1px, transparent 3px),
      var(--bg);
    background-size: 100% 4px, auto;
    animation: scanlineDrift 5s linear infinite;
  }
  @keyframes scanlineDrift{
    from{ background-position: 0 0, 0 0; }
    to{ background-position: 0 60px, 0 0; }
  }
  .call-overlay.active{ opacity:1; pointer-events:auto; z-index:120 !important; }
  /* Incoming/outgoing call must cover Wireline thread (also .call-overlay) */
  #callOverlay.active{ z-index: 300 !important; }
  #wirelineThread.active{ z-index: 220 !important; }
  #wireBackupScreen.active, #wireHistoryScreen.active{ z-index: 226 !important; }
  #wirelineThread, #bandRoom, #bspace, #findNalunoPanel, #sparkPage, #wireBackupScreen, #wireHistoryScreen{
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  #bspace.active{ z-index: 100 !important; }
  #bandRoom.active{ z-index: 100 !important; }
  .callscreen{ position:absolute; inset:0; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .callscreen.active{ opacity:1; pointer-events:auto; }

  .topbar{ padding:20px 22px 0; display:flex; align-items:center; justify-content:space-between; z-index:5; }
  .back-btn{ width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; }

  /* --- lobby / camera stage with Greenroom --- */
  #lobby{ justify-content:flex-start; }
  .lobby-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 26px; gap:18px; }
  .cam-stage{ position:relative; width:100%; aspect-ratio:3/4; max-height:44vh; border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid var(--line); transition:aspect-ratio .3s ease, max-height .3s ease; }
  .cam-stage.expanded{ aspect-ratio:3/8; max-height:80vh; }
  .cam-expand-btn{ position:absolute; right:12px; top:12px; width:30px; height:30px; border-radius:50%; background:rgba(13,15,23,.72); backdrop-filter:blur(8px); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; z-index:4; transition:transform .3s ease; }
  .cam-expand-btn.expanded{ transform:rotate(180deg); }
  .cam-blur, .cam-sharp{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  .cam-blur{ filter: blur(26px) saturate(1.15) brightness(.9); transform: scaleX(-1) scale(1.2); }
  .cam-sharp{
    -webkit-mask-image: radial-gradient(ellipse 36% 46% at 50% 44%, black 85%, transparent 97%);
    mask-image: radial-gradient(ellipse 36% 46% at 50% 44%, black 85%, transparent 97%);
  }
  .cam-empty-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--text-dim); font-family:var(--font-mono); font-size:11.5px; text-align:center; padding:0 26px; }
  /* Signature Glow — a soft ring of your Callsign color around your video, sitting just
     behind the masked cutout so it shows through the mask's own soft edge and spills a
     little beyond it. Pulse rhythm follows your live signal tier: brisk when strong,
     slow and dim when fading, nearly still when off the grid. Nothing about your face
     changes — only the frame around it, and only using a color you already chose.
     Uses box-shadow, not mix-blend-mode — blend modes wash out to nearly invisible
     against a bright background (a white wall, for instance), which is exactly what
     made this disappear before. box-shadow draws real color regardless of what's
     behind it. */
  .signature-glow{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; border-radius:inherit; transition:box-shadow .8s ease; }
  .signature-glow.tier-strong{ animation: sigGlowStrong 2.2s ease-in-out infinite; }
  .signature-glow.tier-fading{ animation: sigGlowFading 4.2s ease-in-out infinite; }
  .signature-glow.tier-off{ animation: sigGlowOff 6s ease-in-out infinite; }
  /* The animated "Live Background" pattern and the real camera feed are now composited
     together directly in Canvas2D (see drawStage in the script) — the pattern is drawn
     first across the whole canvas, then the camera is drawn on top clipped to a smaller
     inset rectangle, which is what leaves a border of the pattern visible around the
     edge. Plain rect+clip, supported everywhere, nothing that depends on how well a
     given browser implements newer CSS mask compositing. */
  @keyframes sigGlowStrong{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
  @keyframes sigGlowFading{ 0%,100%{ opacity:.22; } 50%{ opacity:.5; } }
  @keyframes sigGlowOff{ 0%,100%{ opacity:.06; } 100%{ opacity:.06; } }
  .enable-cam-btn{ margin-top:6px; padding:9px 16px; border-radius:999px; background:var(--mint); color:#0D0F17; border:none; font-family:var(--font-body); font-weight:600; font-size:12.5px; cursor:pointer; }

  .greenroom-pill{ position:absolute; left:12px; top:12px; display:flex; align-items:center; gap:7px; background:rgba(13,15,23,.72); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 8px; font-family:var(--font-mono); font-size:10.5px; cursor:pointer; z-index:3; }
  .greenroom-pill .swirl{ width:14px; height:14px; border-radius:50%; border:2px solid var(--mint); border-top-color:transparent; animation:spin .8s linear infinite; }
  .greenroom-pill.ready .swirl{ animation:none; border:none; background:var(--mint); }
  @keyframes spin{ to{ transform:rotate(360deg);} }
  .self-chip{ position:absolute; left:14px; bottom:14px; background:rgba(13,15,23,.7); backdrop-filter:blur(6px); padding:6px 12px; border-radius:999px; font-family:var(--font-mono); font-size:11px; border:1px solid var(--line); z-index:3; }

  .lobby-title{ font-family:var(--font-futuristic); font-weight:600; font-size:19px; letter-spacing:.02em; text-align:center; }
  .lobby-sub{ color:var(--text-dim); font-size:13.5px; text-align:center; max-width:290px; }
  .precheck-row{ display:flex; gap:10px; width:100%; }
  .precheck{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 10px; font-size:13px; font-weight:500; cursor:pointer; }
  .precheck.off{ color:var(--text-dim); }
  .precheck.off svg{ opacity:.5; }
  .join-btn{ width:100%; padding:16px; border-radius:16px; background:var(--mint); color:#0D0F17; font-family:var(--font-futuristic); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; border:none; cursor:pointer; }
  .join-btn:hover{ background:#8FFFC0; }
  .lobby-footer{ padding:20px 26px 28px; }

  /* --- ringing / incoming --- */
  .ring-center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .ring-wrap{ position:relative; width:180px; height:180px; display:flex; align-items:center; justify-content:center; margin-bottom:30px; }
  .ring-avatar{ width:108px; height:108px; font-size:32px; z-index:2; border:1px solid var(--line); }
  .ripple{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--mint-dim); opacity:0; animation:ripple 2.4s ease-out infinite; }
  .ripple.r2{ animation-delay:.8s; } .ripple.r3{ animation-delay:1.6s; }
  @keyframes ripple{ 0%{transform:scale(.6);opacity:.55;} 100%{transform:scale(1.35);opacity:0;} }
  .ring-name{
    font-family: var(--font-futuristic);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    position: relative;
    animation: nameGlitch 4.5s infinite;
  }
  @keyframes nameGlitch{
    0%, 92%, 100% { text-shadow:none; transform:translate(0,0); }
    93% { text-shadow:-2px 0 #FF5470, 2px 0 #00E5FF; transform:translate(-1px,0); }
    95% { text-shadow:2px 0 #FF5470, -2px 0 #00E5FF; transform:translate(1px,0); }
    97% { text-shadow:none; transform:translate(0,0); }
  }
  .ring-status{ color:var(--text-dim); font-size:13.5px; font-family:var(--font-mono); margin-top:4px; }
  .scene-ready-note{ margin-top:16px; display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; color:var(--mint); background:rgba(124,255,178,.08); border:1px solid rgba(124,255,178,.25); padding:7px 13px; border-radius:999px; }
  .ring-actions{ display:flex; gap:44px; padding-bottom:40px; justify-content:center; }
  .round-btn{ width:60px; height:60px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .round-btn.decline{ background:var(--red); }
  .round-btn.accept{ background:var(--mint); }
  .incoming-self{ position:absolute; right:18px; top:64px; width:64px; height:88px; border-radius:14px; overflow:hidden; border:1.5px solid rgba(237,239,247,.15); z-index:4; }
  .incoming-self video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  .incoming-self .tag{ position:absolute; left:0; right:0; bottom:0; background:rgba(13,15,23,.75); font-family:var(--font-mono); font-size:8px; text-align:center; padding:2px 0; color:var(--mint); }

  /* --- in call --- */
  #incall{ background:#000; }
  .remote-stage{ position:absolute; inset:0; background: radial-gradient(60% 50% at 30% 20%, #22263A 0%, transparent 60%), radial-gradient(50% 40% at 80% 70%, #1B2E2A 0%, transparent 60%), #0B0D14; display:flex; align-items:center; justify-content:center; }
  .remote-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--text-dim); position:absolute; inset:0; z-index:1; }
  .remote-placeholder .remote-avatar, .remote-placeholder #remoteAvatar{ width:96px; height:96px; font-size:32px; border-radius:50%; }
  /* remote-placeholder-avatar-size */
  .remote-avatar{ width:96px; height:96px; font-size:28px; border:1px solid var(--line); }
  .incall-top{ position:relative; z-index:4; padding:20px 20px 0; display:flex; justify-content:space-between; align-items:flex-start; }
  .call-info-pill{ background:rgba(13,15,23,.55); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:999px; padding:8px 14px; display:flex; align-items:center; gap:8px; }
  .timer{ font-family:var(--font-futuristic); font-size:13px; letter-spacing:.08em; color:var(--mint); text-shadow:0 0 6px rgba(124,255,178,.55); }
  .icon-btn{ width:40px; height:40px; border-radius:50%; background:rgba(13,15,23,.55); backdrop-filter:blur(10px); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); }
  .local-pip{ position:absolute; right:18px; bottom:150px; width:104px; height:142px; border-radius:18px; overflow:hidden; background:var(--surface); border:1.5px solid rgba(237,239,247,.15); z-index:6; box-shadow:0 10px 30px rgba(0,0,0,.4); cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; will-change:left,top; transition:width .25s ease, height .25s ease, border-radius .25s ease; }
  .local-pip.large{ width:min(48vw, 200px); height:min(66vw, 274px); right:18px; bottom:150px; left:auto; top:auto; }
  .local-pip .mute-badge{ position:absolute; left:6px; bottom:6px; width:20px; height:20px; border-radius:50%; background:var(--red); display:none; align-items:center; justify-content:center; z-index:4; }
  .local-pip.muted .mute-badge{ display:flex; }
  /* Swap layout: local becomes the main stage, remote becomes the small PiP */
  #incall.swap-focus .remote-stage{ z-index:5; inset:auto; right:18px; bottom:150px; left:auto; top:auto; width:104px; height:142px; border-radius:18px; overflow:hidden; border:1.5px solid rgba(237,239,247,.15); box-shadow:0 10px 30px rgba(0,0,0,.4); }
  #incall.swap-focus .remote-stage video{ border-radius:18px; }
  #incall.swap-focus .remote-placeholder{ transform:scale(.55); }
  #incall.swap-focus .local-pip{ left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; width:100% !important; height:100% !important; border-radius:0; border:none; box-shadow:none; z-index:1; }
  .controls-bar{ position:relative; z-index:6; padding:0 22px 32px; margin-top:auto; display:flex; align-items:center; justify-content:center; gap:16px; }
  .ctrl{ width:56px; height:56px; border-radius:50%; border:1px solid var(--line); background:rgba(31,35,51,.85); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); position:relative; }
  .ctrl.active{ background:var(--text); color:#0D0F17; }
  .ctrl.end{ background:var(--red); border-color:var(--red); width:64px; }
  .waveform{ position:absolute; bottom:104px; left:0; right:0; height:22px; display:flex; align-items:flex-end; justify-content:center; gap:3px; z-index:5; opacity:.85; }
  .waveform span{ width:3px; border-radius:2px; background:var(--mint); animation:wave 1.1s ease-in-out infinite; }
  @keyframes wave{ 0%,100%{height:4px;opacity:.5;} 50%{height:20px;opacity:1;} }

  /* --- broadcast composer --- */
  .type-chip-row{ display:flex; gap:8px; margin-bottom:16px; }
  .type-chip{ flex:1; padding:10px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; }
  .type-chip.active{ background:var(--mint); color:#0D0F17; border-color:var(--mint); }
  .upload-drop{ position:relative; overflow:hidden; border:1.5px dashed var(--line); border-radius:18px; padding:34px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text-dim); cursor:pointer; text-align:center; font-size:13px; margin-bottom:14px; }
  .upload-drop > svg, .upload-drop > span{ pointer-events:none; }
  .upload-drop input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0.01; font-size:18px; cursor:pointer; z-index:8; }
  .upload-drop:hover{ border-color:var(--mint-dim); color:var(--mint); }
  .upload-preview{ position:relative; border-radius:18px; overflow:hidden; background:#000; margin-bottom:10px; aspect-ratio:3/4; max-height:340px; }
  .upload-preview img, .upload-preview video{ position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; display:block; }
  .filter-chip-row{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 14px; }
  .filter-chip-row::-webkit-scrollbar{ display:none; }
  .filter-chip{ flex-shrink:0; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); font-size:12px; cursor:pointer; }
  .filter-chip.active{ border-color:var(--mint); color:var(--mint); background:rgba(124,255,178,.08); }
  .composer-caption{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:12px 14px; color:var(--text); font-size:14px; resize:none; outline:none; }
  .composer-caption:focus{ border-color:var(--mint-dim); }
  .text-compose-preview{ border-radius:20px; min-height:220px; display:flex; align-items:center; justify-content:center; padding:20px; }
  .text-compose-preview textarea{ width:100%; height:100%; min-height:180px; background:transparent; border:none; outline:none; resize:none; color:#fff; font-family:var(--font-display); font-weight:600; font-size:22px; text-align:center; line-height:1.3; }
  .text-compose-preview textarea::placeholder{ color:rgba(255,255,255,.7); }
  .mysignal-thumb{ width:100%; height:100%; object-fit:cover; }
  .bviewer-text-card{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:36px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:24px; color:#fff; line-height:1.35; }

  /* --- filmstrip (multi-select) --- */
  .filmstrip{ display:flex; gap:10px; overflow-x:auto; padding:2px 0 14px; }
  .filmstrip::-webkit-scrollbar{ display:none; }
  .filmstrip-item{ position:relative; flex-shrink:0; width:60px; height:60px; border-radius:12px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:#000; }
  .filmstrip-item.active{ border-color:var(--mint); }
  .filmstrip-item img, .filmstrip-item video{ position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; }
  .filmstrip-item .fs-remove{ position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:rgba(13,15,23,.85); display:flex; align-items:center; justify-content:center; color:#fff; }
  .filmstrip-item .fs-badge{ position:absolute; left:3px; bottom:3px; font-family:var(--font-mono); font-size:8px; background:rgba(13,15,23,.75); padding:1px 4px; border-radius:4px; color:var(--mint); }
  .filmstrip-add{ position:relative; overflow:hidden; flex-shrink:0; width:60px; height:60px; border-radius:12px; border:1.5px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--text-dim); cursor:pointer; }
  .filmstrip-add > svg{ pointer-events:none; }
  .filmstrip-add input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0.01; font-size:16px; cursor:pointer; z-index:2; }
  .filmstrip-add:hover{ border-color:var(--mint-dim); color:var(--mint); }

  .preview-actions{ position:absolute; top:10px; right:10px; display:flex; gap:8px; z-index:2; }

  /* --- transitions --- */
  .transition-chip-row{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 14px; }
  .transition-chip-row::-webkit-scrollbar{ display:none; }
  .transition-chip{ flex-shrink:0; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); font-size:12px; cursor:pointer; }
  .transition-chip.active{ border-color:var(--mint); color:var(--mint); background:rgba(124,255,178,.08); }

  /* --- adjust (crop/pan/zoom) --- */
  .adjust-stage{ position:relative; width:100%; aspect-ratio:3/4; max-height:50vh; border-radius:20px; overflow:hidden; background:#000; touch-action:none; isolation:isolate; transform:translateZ(0); contain:paint; -webkit-clip-path:inset(0 round 20px); clip-path:inset(0 round 20px); }
  .adjust-stage img, .adjust-stage video{ position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; will-change:transform; backface-visibility:hidden; }
  .adjust-stage.avatar-adjust{
    aspect-ratio:1/1; max-height:min(56vw, 360px); width:min(86%, 360px); margin:0 auto;
    border-radius:50%;
    -webkit-clip-path:circle(50% at 50% 50%);
    clip-path:circle(50% at 50% 50%);
    -webkit-mask-image:radial-gradient(#000 99%, transparent 100%);
    mask-image:radial-gradient(#000 99%, transparent 100%);
  }
  .adjust-controls{ padding:18px 4px; }
  .adjust-zoom-row{ display:flex; align-items:center; gap:10px; margin-top:6px; }
  .adjust-zoom-row input[type=range]{ flex:1; accent-color:var(--mint); }
  .adjust-actions{ display:flex; gap:10px; margin-top:20px; }
  .adjust-actions button{ flex:1; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-weight:600; cursor:pointer; font-family:var(--font-body); font-size:13.5px; }
  .adjust-actions button.primary{ background:var(--mint); color:#0D0F17; border-color:var(--mint); }

  /* --- story viewer tap zones + segment transitions --- */
  .bviewer-tap-zone{ position:absolute; top:60px; bottom:0; width:35%; z-index:4; }
  .bviewer-tap-zone.left{ left:0; }
  .bviewer-tap-zone.right{ right:0; }
  .seg-fade{ animation: segFade .35s ease; }
  @keyframes segFade{ from{opacity:0;} to{opacity:1;} }
  .seg-slide-fwd{ animation: segSlideFwd .38s cubic-bezier(.22,.68,0,1); }
  @keyframes segSlideFwd{ from{ transform:var(--ct, none) translateX(64px); opacity:0; } to{ transform:var(--ct, none) translateX(0); opacity:1; } }
  .seg-slide-back{ animation: segSlideBack .38s cubic-bezier(.22,.68,0,1); }
  @keyframes segSlideBack{ from{ transform:var(--ct, none) translateX(-64px); opacity:0; } to{ transform:var(--ct, none) translateX(0); opacity:1; } }
  .seg-zoom-fwd{ animation: segZoomFwd .38s cubic-bezier(.22,.68,0,1); }
  @keyframes segZoomFwd{ from{ transform:var(--ct, none) scale(1.28); opacity:0; } to{ transform:var(--ct, none) scale(1); opacity:1; } }
  .seg-zoom-back{ animation: segZoomBack .38s cubic-bezier(.22,.68,0,1); }
  @keyframes segZoomBack{ from{ transform:var(--ct, none) scale(0.78); opacity:0; } to{ transform:var(--ct, none) scale(1); opacity:1; } }

  /* --- broadcast viewer --- */
  #bviewer{ background:#000; z-index:70; }
  .bviewer-bars{ display:flex; gap:5px; padding:14px 14px 0; }
  .bviewer-bars .bar{ flex:1; height:3px; background:rgba(255,255,255,.25); border-radius:2px; overflow:hidden; }
  .bviewer-bars .bar i{ display:block; height:100%; width:0%; background:#fff; }
  .bviewer-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; }
  #bviewerRemove{
    display:none; align-items:center; justify-content:center;
    height:32px; min-width:72px; padding:0 14px; margin:0;
    border-radius:999px; border:1px solid rgba(255,84,112,.45);
    background:rgba(255,84,112,.18); color:#ff8a9a;
    font-family:var(--font-mono); font-size:11px; font-weight:600;
    line-height:1; letter-spacing:.02em; white-space:nowrap;
    cursor:pointer; z-index:20; box-sizing:border-box;
  }
  .bviewer-body{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
  .bviewer-close{ margin-left:auto; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; }

  /* --- wireline (direct messages) --- */
  #wirelineThread{ background:var(--bg); }
  .msg-row{ display:flex; flex-direction:column; max-width:100%; }
  .msg-row.me{ align-items:flex-end; }
  .msg-row.them{ align-items:flex-start; }
  .msg-bubble{ max-width:76%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.42; word-wrap:break-word; }
  .msg-row.me .msg-bubble{ background:var(--mint); color:#0D0F17; border-bottom-right-radius:5px; }
  .msg-row.them .msg-bubble{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-bottom-left-radius:5px; }
  .msg-time{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-dim); margin-top:4px; padding:0 3px; }
  .msg-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-dim); text-align:center; padding:0 30px; }
  .band-card{ position:relative; border-radius:20px; padding:16px; margin-bottom:12px; overflow:hidden; cursor:pointer; border:1px solid var(--line); background:var(--surface); }
  .band-card-bg{ position:absolute; inset:0; opacity:.4; }
  .band-card-inner{ position:relative; z-index:1; }
  .band-name{ font-family:var(--font-futuristic); font-weight:700; font-size:16px; letter-spacing:.02em; }
  .band-live-row{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  .band-avatar-stack{ display:flex; }
  .band-avatar-stack .avatar{ width:28px; height:28px; font-size:10px; border:2px solid var(--bg); margin-left:-8px; position:relative; overflow:hidden; isolation:isolate; }
  .band-avatar-stack .avatar:first-child{ margin-left:0; }
  .band-avatar-stack .avatar img.avatar-pic{ z-index:2; -webkit-transform:translateZ(0); transform:translateZ(0); }
  .band-live-text{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); }
  .voice-bubble{ display:flex; align-items:center; gap:9px; min-width:180px; }
  .voice-play-btn{ width:30px; height:30px; border-radius:50%; border:none; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .msg-row.me .voice-play-btn{ background:#0D0F17; color:var(--mint); }
  .msg-row.them .voice-play-btn{ background:var(--mint); color:#0D0F17; }
  .voice-wave{ display:flex; align-items:center; gap:2px; height:22px; flex:1; }
  .voice-wave span{ width:2.5px; border-radius:1px; background:currentColor; flex-shrink:0; }
  .msg-row.me .voice-wave{ color:#0D0F17; opacity:.75; }
  .msg-row.them .voice-wave{ color:var(--text); opacity:.7; }
  .voice-duration{ font-family:var(--font-mono); font-size:10.5px; flex-shrink:0; opacity:.8; }
  .receipt-tick{ display:inline-flex; vertical-align:-2px; margin-left:3px; }
  .msg-delete-btn{ display:inline-flex; vertical-align:-2px; margin-left:6px; color:var(--text-dim); cursor:pointer; opacity:.6; }
  .msg-delete-btn:hover{ opacity:1; color:var(--red); }
  .recording-dot{ width:9px; height:9px; border-radius:50%; background:var(--red); flex-shrink:0; animation:pulse-dot 1.2s infinite; }
  .recording-timer{ font-family:var(--font-mono); font-size:13px; color:var(--text); flex-shrink:0; }
  .mood-bubble-wrap{ background:none !important; border:none !important; padding:0 !important; }
  .mood-orb{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    transform-style:preserve-3d;
    perspective:420px;
    box-shadow:
      0 12px 28px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -22px 28px rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.1);
    flex-shrink:0;
    cursor:pointer;
  }
  .mood-orb-bubble{
    width:168px;
    height:100px;
    cursor:default;
  }
  .mood-orb-pick{
    width:92px;
    height:68px;
  }
  .mood-orb canvas{
    display:block;
    width:100%;
    height:100%;
    transform:translateZ(16px) rotateX(10deg);
    filter:saturate(1.18) contrast(1.06);
  }
  .mood-orb-label{
    position:absolute;
    left:8px;
    right:8px;
    bottom:6px;
    font-family:var(--font-mono);
    font-size:9.5px;
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 4px rgba(0,0,0,.75);
    transform:translateZ(28px);
    pointer-events:none;
  }
  .mood-orb-pick .mood-orb-label{ font-size:7.5px; left:5px; bottom:4px; }
  .mood-orb[data-mood="exhausted"]{ animation: moodSwayHeavy 5.4s ease-in-out infinite; }
  .mood-orb[data-mood="calm"]{ animation: moodFloatCalm 7.2s ease-in-out infinite; }
  .mood-orb[data-mood="warm"]{ animation: moodPulseWarm 1.7s ease-in-out infinite; }
  .mood-orb[data-mood="wonder"]{ animation: moodDriftWonder 8s ease-in-out infinite; }
  .mood-orb[data-mood="peaceful"]{ animation: moodBreathePeace 6.4s ease-in-out infinite; }
  .mood-orb[data-mood="longing"]{ animation: moodSwayLong 7.6s ease-in-out infinite; }
  .mood-orb[data-mood="overwhelmed"]{ animation: moodRushOver 2.2s ease-in-out infinite; }
  @keyframes moodSwayHeavy{
    0%,100%{ transform:rotateX(6deg) rotateY(-8deg) translateY(2px); }
    50%{ transform:rotateX(10deg) rotateY(6deg) translateY(6px); }
  }
  @keyframes moodFloatCalm{
    0%,100%{ transform:rotateX(4deg) rotateY(-4deg) translateY(0); }
    50%{ transform:rotateX(8deg) rotateY(4deg) translateY(-5px); }
  }
  @keyframes moodPulseWarm{
    0%,100%{ transform:rotateX(6deg) scale(1); }
    50%{ transform:rotateX(10deg) scale(1.035); }
  }
  @keyframes moodDriftWonder{
    0%,100%{ transform:rotateX(12deg) rotateY(-10deg); }
    50%{ transform:rotateX(4deg) rotateY(10deg); }
  }
  @keyframes moodBreathePeace{
    0%,100%{ transform:rotateX(5deg) translateY(0) scale(1); }
    50%{ transform:rotateX(8deg) translateY(-4px) scale(1.02); }
  }
  @keyframes moodSwayLong{
    0%,100%{ transform:rotateY(-12deg) rotateX(6deg); }
    50%{ transform:rotateY(10deg) rotateX(10deg); }
  }
  @keyframes moodRushOver{
    0%,100%{ transform:rotateX(14deg) scale(1); }
    50%{ transform:rotateX(6deg) scale(1.04); }
  }
  @media (prefers-reduced-motion: reduce){
    .mood-orb{ animation:none !important; }
    .mood-orb canvas{ transform:none; }
  }
  .emotion-wheel-backdrop{ position:fixed; inset:0; background:rgba(5,6,10,.6); backdrop-filter:blur(6px); z-index:90; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .18s ease; }
  .emotion-wheel-backdrop.active{ opacity:1; pointer-events:auto; }
  .emotion-wheel{ position:relative; width:220px; height:220px; }
  .emotion-wheel-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; color:var(--text-dim); text-align:center; padding:6px; line-height:1.3; }
  .emotion-option{ position:absolute; width:64px; height:64px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-family:var(--font-mono); font-size:9px; color:#fff; cursor:pointer; background:var(--surface); border:1.5px solid var(--line); transition:transform .12s ease; }
  .emotion-option:active{ transform:scale(1.15); }
  .emotion-option .dot{ width:11px; height:11px; border-radius:50%; }


/* ================= BROADCAST SPACE (living community, not a player) ================= */
.bspace{ position:fixed; inset:0; z-index:80; background:#0a0c12; display:none; flex-direction:column; overflow:hidden; }
.bspace.active{ display:flex; }
.bspace-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px); }
.bspace-hero{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0 auto;
  background:#000;
  aspect-ratio:9/16;
  max-height:min(78vh,720px);
  flex-shrink:0;
  overflow:hidden;
}
.bspace-hero.expanded{ max-height:min(92vh,900px); max-width:100%; }
.bspace-expand-btn{ display:none !important;
  position:absolute; right:12px; bottom:12px; z-index:5;
  width:34px; height:34px; border-radius:50%;
  background:rgba(13,15,23,.75); border:1px solid rgba(255,255,255,.2);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.bspace-hero video, .bspace-hero img{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.bspace-hero-text{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font-size:18px; font-weight:600; line-height:1.35; }
.bspace-topbar{ position:absolute; top:0; left:0; right:0; padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px; display:flex; align-items:center; gap:10px; background:linear-gradient(to bottom, rgba(5,6,10,.75), transparent); z-index:2; }
.bspace-body{ padding:16px 18px 8px; position:relative; z-index:1; background:#0a0c12; }
.bspace-title{ font-family:var(--font-futuristic); font-size:18px; font-weight:700; letter-spacing:.02em; margin:0 0 6px; }
.bspace-desc{ font-size:13.5px; color:var(--text-dim); line-height:1.5; margin:0 0 12px; }
.bspace-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.bspace-tag{ font-family:var(--font-mono); font-size:10.5px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--mint); background:rgba(124,255,178,.06); }
.bspace-join{ width:100%; padding:13px 16px; border:none; border-radius:14px; background:var(--mint); color:#0D0F17; font-family:var(--font-futuristic); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; margin-bottom:18px; }
.bspace-join.joined{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
.bspace-section{ margin:0 0 22px; }
.bspace-section h3{ font-family:var(--font-futuristic); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mint); margin:0 0 10px; }
.bspace-section .hint{ font-size:12px; color:var(--text-dim); margin:0 0 10px; line-height:1.45; }
.bspace-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:8px; }
.bspace-card .who{ font-size:11px; font-family:var(--font-mono); color:var(--text-dim); margin-bottom:4px; }
.bspace-card .body{ font-size:13.5px; line-height:1.45; }
.bspace-composer{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.bspace-composer input, .bspace-composer textarea{ flex:1; min-width:140px; background:rgba(23,26,38,.9); border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:var(--text); font-size:13px; font-family:inherit; outline:none; }
.bspace-mini{ padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(13,15,23,.6); color:var(--text); font-family:var(--font-mono); font-size:11px; cursor:pointer; }
.bspace-mini.primary{ background:var(--mint); color:#0D0F17; border-color:var(--mint); }
.bspace-journey{ border-left:2px solid rgba(124,255,178,.35); padding-left:12px; margin-left:4px; }
.bspace-journey .evt{ font-size:12.5px; color:var(--text-dim); margin:0 0 10px; line-height:1.4; }
.bspace-journey .evt strong{ color:var(--text); font-weight:600; }
.bspace-tabs{ display:flex; gap:6px; overflow-x:auto; padding:0 0 12px; touch-action:pan-x; -webkit-overflow-scrolling:touch; }
.bspace-tab{ flex-shrink:0; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text-dim); font-family:var(--font-mono); font-size:11px; cursor:pointer; }
.bspace-tab.on{ background:rgba(124,255,178,.12); color:var(--mint); border-color:rgba(124,255,178,.35); }

/* Band: draggable live self-cam */
.band-live-float{ position:absolute; width:120px; height:160px; border-radius:16px; overflow:hidden; border:1px solid rgba(124,255,178,.4); background:#0a0c14; z-index:12; box-shadow:0 8px 24px rgba(0,0,0,.45); touch-action:none; }
.band-live-float video{ width:100%; height:100%; object-fit:cover; }
.band-live-float .grip{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:28px; height:4px; border-radius:2px; background:rgba(255,255,255,.35); }
.band-live-float .live-tag{ position:absolute; left:6px; bottom:6px; font-family:var(--font-mono); font-size:9px; background:rgba(13,15,23,.8); color:var(--mint); padding:2px 6px; border-radius:999px; }

/* ---- Signal strip vs Broadcast plates ---- */
.bcast-sticky{
  position:relative; z-index:40; flex-shrink:0;
  display:flex; flex-direction:column; align-items:stretch;
  width:100%; max-width:100%; box-sizing:border-box;
  margin:0; padding:8px 14px 0;
  background:linear-gradient(180deg, #0D0F17 78%, rgba(13,15,23,.88));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.bcast-view-tabs{
  display:flex; align-items:flex-end; gap:18px;
  margin:0; border-bottom:1px solid var(--line);
  width:100%; flex:none; min-width:0; position:relative; z-index:2;
}
.bcast-view-tab{
  background:none; border:none; color:var(--text-dim); font-family:var(--font-futuristic);
  font-size:14px; padding:0 0 10px; cursor:pointer; position:relative; letter-spacing:.01em;
}
.bcast-view-tab.active{ color:var(--mint); }
#bcastPlateGrid.bcast-view-in-left{
  animation: bcastViewInLeft .32s cubic-bezier(.2,.85,.2,1);
}
#bcastPlateGrid.bcast-view-in-right{
  animation: bcastViewInRight .32s cubic-bezier(.2,.85,.2,1);
}
@keyframes bcastViewInLeft{
  from{ transform:translateX(22%); opacity:.35; }
  to{ transform:none; opacity:1; }
}
@keyframes bcastViewInRight{
  from{ transform:translateX(-22%); opacity:.35; }
  to{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  #bcastPlateGrid.bcast-view-in-left,
  #bcastPlateGrid.bcast-view-in-right{ animation:none; }
}
.bcast-view-tab.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--brand-gradient); background-size:300% 100%;
  animation: brandShimmer 6s linear infinite; border-radius:2px;
}
.bcast-search-tab{
  margin-left:auto; background:none; border:none; cursor:pointer;
  font-family:var(--font-futuristic); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); padding:0 0 10px; position:relative;
  flex-shrink:0; z-index:2;
}
.bcast-search-tab[aria-expanded="true"],
.bcast-search-tab.open{ color:var(--mint); }
.bcast-search-tab[aria-expanded="true"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--mint); border-radius:2px;
}
@media (prefers-reduced-motion: reduce){ .bcast-view-tab.active::after{ animation:none; } }
.bcast-search-row{ margin:0; padding:10px 0 12px; width:100%; flex:none; min-width:0; }
.bcast-search-row[hidden]{ display:none !important; }
.bcast-search-row input{
  width:100%; max-width:100%; box-sizing:border-box;
  padding:12px 14px; border-radius:14px; border:1px solid var(--line);
  background:rgba(23,26,38,.85); color:var(--text); font-size:16px; font-family:inherit; outline:none;
  -webkit-appearance:none; appearance:none;
}
.bcast-search-row input:focus{ border-color:rgba(124,255,178,.45); }
#bcastSearchResults{
  max-height:min(52vh, 420px); overflow-y:auto; padding:0 0 12px;
  width:100%; flex:none; min-width:0;
}
#bcastSearchResults .bcast-plate-grid{
  min-height:0; height:auto; overflow:visible;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  scroll-snap-type:none;
}
#bcastSearchResults .bcast-plate{
  height:auto; min-height:0; scroll-snap-align:unset;
  border-radius:14px; border:1px solid rgba(124,255,178,.18);
}
#bcastSearchResults .bcast-plate-frame{
  position:relative; aspect-ratio:4/5; inset:auto;
}
.ttl-chip{
  padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--text-dim); font-family:var(--font-mono); font-size:11px; cursor:pointer;
}
.ttl-chip.on{ background:rgba(124,255,178,.12); color:var(--mint); border-color:rgba(124,255,178,.4); }

#tab-broadcast.tabscreen{
  display:flex; flex-direction:column;
  bottom:0;
}
body.naluno-bcast-watch .navbar{
  transform:translateY(110%);
  pointer-events:none;
}
body.naluno-bcast-mine .bcast-sticky,
body.naluno-strand-open .bcast-sticky{
  display:flex; flex-direction:column; align-items:stretch; flex-shrink:0; width:100%;
}
#broadcastTabScroll.bcast-feed{
  flex:1; min-height:0;
  display:block;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  perspective: 1400px;
  touch-action: pan-x pan-y;
}
.bcast-feed-head{
  min-height: var(--bcast-stage-h, 100svh);
  padding: 8px 14px calc(24px + 66px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}
body.naluno-bcast-mine #bcastForYouHome{ display:none !important; }
body.naluno-bcast-mine .bcast-feed-head{
  min-height:0;
  height:auto;
  padding:0;
  scroll-snap-align:none;
  scroll-snap-stop:normal;
}
body.naluno-strand-open #bcastForYouHome,
body.naluno-strand-open .bcast-feed-head{
  display:none !important;
  min-height:0 !important;
  height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  scroll-snap-align:none;
}
body.naluno-strand-open #bcastViewTabs,
body.naluno-strand-open #bcastSearchRow,
body.naluno-strand-open #bcastSearchResults{
  display:none !important;
}
.bcast-scroll-cue{
  width:100%; margin:8px 0 0; padding:12px 10px 4px;
  border:none; background:transparent; color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer;
}
.bcast-scroll-cue-kicker{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint);
}
.bcast-scroll-cue-copy{
  font-size:13px; color:var(--text-dim);
}
.bcast-scroll-cue-chevron{
  font-size:22px; color:var(--mint); line-height:1;
  animation: cueBounce 1.6s ease-in-out infinite;
}
@keyframes cueBounce{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(6px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .bcast-scroll-cue-chevron{ animation:none; }
}
#broadcastTabScroll.bcast-feed .bcast-strand-bar{
  margin:0 14px 8px;
  scroll-snap-align: start;
}
.bcast-plate-grid{
  display:block;
  overflow:visible;
  padding:0;
}
.bcast-plate{
  cursor:pointer;
  position:relative;
  height: var(--bcast-stage-h, 100svh);
  min-height: var(--bcast-stage-h, 100svh);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius:0;
  overflow:hidden;
  background:#07080c;
  border:none;
  box-shadow:none;
  opacity:1;
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  will-change: transform;
}
.bcast-plate.in-view{ opacity:1; }
.bcast-plate:has(.bcast-plate-live){
  border-color:rgba(255,84,112,.42);
  box-shadow:0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,84,112,.18);
}
.bcast-plate-frame{
  position:absolute; inset:0; aspect-ratio:auto; background:#07080c; overflow:hidden;
}
.bcast-plate-media{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05); }
.bcast-plate-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-futuristic); font-size:42px; color:var(--mint);
  background:radial-gradient(circle at 30% 20%, rgba(124,255,178,.2), transparent 55%), #0d1018;
}
.bcast-plate-scan{
  pointer-events:none; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(124,255,178,.11) 50%, transparent 68%);
  background-size:220% 100%;
  background-position:120% 0;
  mix-blend-mode:screen;
  opacity:0;
}
.bcast-plate.in-view .bcast-plate-scan{
  opacity:1;
  animation: plateScan 7.2s ease-in-out infinite;
}
@keyframes plateScan{
  0%{ background-position:130% 0; }
  100%{ background-position:-30% 0; }
}
.bcast-plate.in-view img.bcast-plate-media{
  animation: plateDrift 16s ease-in-out infinite alternate;
}
@keyframes plateDrift{
  from{ transform:scale(1); }
  to{ transform:scale(1.045); }
}
.bcast-plate video.bcast-plate-media,
.bcast-plate video.strand-preview{
  animation:none !important;
}
.bcast-plate-live{
  position:absolute; top:8px; left:8px; z-index:2;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em;
  background:var(--red); color:#fff; padding:3px 8px; border-radius:999px;
}
.bcast-plate-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:48px 16px 18px;
  background:linear-gradient(180deg, transparent, rgba(7,8,12,.88) 55%);
}
.bcast-plate-title{
  font-size:13px; font-weight:600; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bcast-plate-sub{ margin-top:4px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim); }

/* Strand unique entry — one-column social plate, first-episode preview + rail */
.bcast-folder.bcast-strand-entry{
  border-color:rgba(124,255,178,.32);
  background:linear-gradient(165deg, rgba(124,255,178,.07), rgba(13,15,23,.98) 42%);
}
.bcast-strand-stage{
  display:block; background:#07080c; height:100%;
}
.strand-hero{
  position:absolute; inset:0;
  background:#07080c;
}
.bcast-strand-entry.has-rail .strand-hero{ flex:none; }
.strand-hero .strand-poster,
.strand-hero .strand-preview,
.strand-hero .bcast-plate-media,
.strand-hero .bcast-plate-fallback,
.bcast-plate-frame > .strand-poster,
.bcast-plate-frame > .strand-preview{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.strand-preview{ z-index:2; background:transparent; }
.strand-poster{ z-index:1; }
.strand-rail{
  position:absolute; right:10px; top:78px; bottom:96px;
  width:54px; z-index:4;
  display:flex; flex-direction:column; gap:4px;
  padding:0; background:transparent;
}
.strand-rail-tile{
  position:relative; flex:1; min-height:0; overflow:hidden; border-radius:6px;
  background:#0a0c12;
  border:1px solid rgba(124,255,178,.42);
  box-shadow:0 0 10px rgba(124,255,178,.28), inset 0 0 0 1px rgba(0,229,255,.18);
  animation: railGlow 2.2s ease-in-out infinite;
}
.strand-rail-tile::after{
  content:''; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(124,255,178,.55);
}
.strand-rail-tile.on,
.strand-rail-tile:nth-child(2){
  animation-delay:.4s;
}
@keyframes railGlow{
  0%,100%{ box-shadow:0 0 6px rgba(124,255,178,.22), inset 0 0 0 1px rgba(124,255,178,.2); }
  50%{ box-shadow:0 0 16px rgba(0,229,255,.55), inset 0 0 0 1px rgba(0,229,255,.45); }
}
@media (prefers-reduced-motion: reduce){
  .strand-rail-tile{ animation:none; }
}
.strand-rail-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.strand-rail-tile span{
  position:absolute; left:4px; bottom:4px;
  font-family:var(--font-mono); font-size:8px; letter-spacing:.04em;
  color:#0D0F17; background:rgba(124,255,178,.88); border-radius:4px; padding:1px 4px;
}
.strand-rail-fallback{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-futuristic); font-size:16px; color:var(--mint);
}
.strand-kicker{
  position:absolute; top:10px; left:10px; z-index:4;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#0D0F17; background:var(--mint); border-radius:999px; padding:4px 8px;
}
.strand-playhint{
  position:absolute; left:50%; top:50%; z-index:3;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(13,15,23,.55); border:1px solid rgba(124,255,178,.45);
  color:var(--mint); font-size:16px; pointer-events:none;
}
.bcast-strand-entry.in-view .strand-playhint{ opacity:0; transition:opacity .35s ease; }
.bcast-folder-tab, .bcast-folder-body, .bcast-folder-mosaic, .bcast-folder-count{ display:none; }
.bcast-strand-bar{
  display:none; align-items:center; gap:10px;
  width:100%; flex:none; min-width:0; box-sizing:border-box;
  margin:8px 0 10px; padding:10px 12px; border-radius:14px;
  border:1px solid rgba(124,255,178,.28);
  background:linear-gradient(180deg, rgba(124,255,178,.08), rgba(13,15,23,.92));
}
body.naluno-strand-open .bcast-strand-bar[style*="flex"]{
  display:flex !important;
}
.bcast-strand-back{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.bcast-strand-title{
  font-family:var(--font-futuristic); font-weight:700; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bcast-strand-sub{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-top:2px; }

/* 1:1 signal preview — fullscreen reveals native aspect */
.bviewer-body.square-preview{ aspect-ratio:1/1; max-height:70vh; margin:auto; width:min(100%,70vh); }
.bviewer-body.native-preview{
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: min(82vh, 780px);
  width: 100%;
  margin: auto;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
.bviewer-body.native-preview video{
  object-fit: cover;
  background: #000;
  width: 100%;
  height: 100%;
  display: block;
}
/* Soft liveliness — nav active glow, msg bubble polish */
.navbar .navbtn.active svg{ filter:drop-shadow(0 0 6px rgba(124,255,178,.45)); }
.msg-row.them .msg-bubble{ box-shadow:0 1px 0 rgba(255,255,255,.03); }
.msg-row.me .msg-bubble{ box-shadow:0 4px 14px rgba(124,255,178,.12); }
.bspace-hero{ transition:aspect-ratio .28s ease, max-height .28s ease; }
#bspaceFitToggle{ backdrop-filter:blur(8px); }


/* Compact Band voice notes — keep mint shell, smaller footprint */
.band-voice-bubble{
  min-width: 132px !important;
  max-width: 168px !important;
  padding: 8px 10px !important;
}
.band-voice-label{
  font-family: var(--font-mono);
  font-size: 9px;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.band-audio-player{
  width: 100% !important;
  max-width: 148px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(13,15,23,.35) !important;
  display: block;
}
.msg-row.me .band-audio-player{
  background: rgba(13,15,23,.2) !important;
}
.naluno-clip-play{
  position:absolute; left:50%; top:58%; transform:translate(-50%,-50%);
  z-index:3; width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(124,255,178,.92); color:#0D0F17; font-size:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.4); cursor:pointer;
}
.band-voice-bubble, .spark-bubble{ position:relative; }


/* Broadcast media + chapters — never overlap title */
.bspace-media-frame{ margin-bottom: 10px; }
.bspace-chapter-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 2px 12px;
  position: relative;
  z-index: 1;
}
.bspace-chapter-bar button{
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
#bspaceTitle, .bspace-title{
  position: relative;
  z-index: 2;
  clear: both;
  margin-top: 8px;
}


/* Band recording in progress — unmistakable */
#bandRecordBar.recording-active,
.band-record-bar.recording-active{
  display: flex !important;
  background: rgba(255, 70, 90, .12);
  border: 1px solid rgba(255, 70, 90, .45);
  animation: bandRecPulse 1.2s ease-in-out infinite;
}
@keyframes bandRecPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,70,90,.35); }
  50%{ box-shadow: 0 0 0 6px rgba(255,70,90,0); }
}
#bandRecordLabel{ font-weight: 600; color: #ff6b7a; }


/* Broadcast: media boxed separately from title — no overlay text collision */
.bspace-media-frame{
  position: relative;
  width: 100%;
  margin: 0 0 12px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.bspace-media-frame video{
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
  background: #000;
  vertical-align: top;
}
.bspace-chapter-bar{
  margin: 0 0 14px !important;
  padding: 4px 0 8px !important;
}
#bspaceTitle, .bspace-title{
  margin-top: 4px !important;
  position: relative;
  z-index: 1;
  background: transparent;
}

.bspace-hero #bspaceMedia{ position:absolute; inset:0; width:100%; height:100%; }
.bspace-hero #bspaceMedia > .bspace-media-frame{ min-height:0 !important; }


/* Broadcast seek scrubber — always outside the cover frame so it stays draggable */
.bspace-seek input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 28px;
}
.bspace-seek input[type=range]::-webkit-slider-runnable-track{
  height: 4px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.bspace-seek input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--mint, #7CFFB2);
  border: 2px solid rgba(13,15,23,.9);
  box-shadow: 0 0 0 3px rgba(124,255,178,.25);
  cursor: pointer;
}
.bspace-seek input[type=range]::-moz-range-track{
  height: 4px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.bspace-seek input[type=range]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mint, #7CFFB2);
  border: 2px solid rgba(13,15,23,.9);
  cursor: pointer;
}
.bspace-media-frame video{
  /* keep native controls available as fallback; seek bar is primary on mobile */
}


/* Seek controls live BELOW the 9:16 hero, never inside the cover frame */
.bspace-seek-dock{
  position: relative;
  z-index: 5;
  margin: 8px 12px 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(13,15,23,.92);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 10px;
}




/* Call remote: kill native big-play overlay (Chrome / Samsung WebView) */
#remoteVideo {
  background: #0a0a0a;
}
#remoteVideo::-webkit-media-controls,
#remoteVideo::-webkit-media-controls-enclosure,
#remoteVideo::-webkit-media-controls-start-playback-button,
#remoteVideo::-webkit-media-controls-overlay-play-button,
#remoteVideo::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  width: 0 !important;
  height: 0 !important;
}
#incall .remote-stage video {
  object-fit: cover;
}


/* Remote media: avatar is the only fallback; never native play chrome */
#incall .remote-stage #remoteVideo:not([data-has-frames="1"]) {
  /* JS toggles display; this is a safety net if left visible without frames */
}
#incall .remote-placeholder {
  z-index: 2;
}
#incall .remote-placeholder #remoteAvatar {
  width: 96px !important;
  height: 96px !important;
  font-size: 32px !important;
  border-radius: 50% !important;
}

/* Wireline slips — photo/video that play in the thread */
.slip-frame{ width:min(220px,70vw); aspect-ratio:1/1; border-radius:16px; overflow:hidden; position:relative; background:#0a0c12; }
.slip-frame img, .slip-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.slip-keep{ position:absolute; right:8px; bottom:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:#0D0F17; background:rgba(124,255,178,.92); border:none; border-radius:999px; padding:5px 9px; cursor:pointer; text-decoration:none; }
.msg-row.me .slip-keep{ background:rgba(13,15,23,.82); color:var(--mint); }
.slip-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.slip-play span{ width:42px; height:42px; border-radius:50%; background:rgba(13,15,23,.55); border:1px solid rgba(124,255,178,.45); color:var(--mint); display:flex; align-items:center; justify-content:center; font-size:14px; }

.slip-frame.playing .slip-play{ display:none; }


#threadSlipBtn, #threadDocBtn{ position:relative; z-index:1; overflow:hidden; }

#findNalunoOverlay.active{ z-index: 230 !important; }

body.naluno-gated .navbar,
body.naluno-gated .tabscreen{
  visibility:hidden !important;
  pointer-events:none !important;
}
#authGate, #authGate.active{ z-index:500 !important; }
#findNalunoPanel{ flex-shrink:0; }

body:has(.call-overlay.active) .navbar,
body.naluno-overlay .navbar{
  display:none !important;
}
.call-overlay.active{ z-index:240; }
#composer.active{ z-index:280 !important; }
#bcomposer.active{ z-index:280 !important; }
#composer .tab-scroll{ padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

.signal-window{
  width:68px; height:68px; border-radius:20px; padding:2px; flex-shrink:0;
  position:relative;
  overflow:hidden;
  background:#141728; /* fallback while the rotating ring layer loads/if animation is disabled */
  box-shadow: 0 0 0 1px rgba(124,255,178,.18), 0 0 16px -4px rgba(124,255,178,.4);
  animation: signalBreathe 3.6s ease-in-out infinite;
}
/* "Signals feel alive": a slowly ROTATING gradient ring, not a static conic
   gradient. Standard, broadly-supported technique — a pseudo-element larger
   than the box, centered, rotating via transform (no @property / animatable
   custom-property angle needed, so this works everywhere transform does). */
.signal-window::before{
  content:''; position:absolute; inset:-40%;
  background:var(--signal-gradient);
  animation: signalRingSpin 7s linear infinite;
}
.signal-window.signal-new::before{ animation-duration:4.2s; } /* a touch livelier the moment it's genuinely new */
@keyframes signalRingSpin{ to{ transform:rotate(360deg); } }
@keyframes signalBreathe{
  0%,100%{ box-shadow: 0 0 0 1px rgba(124,255,178,.16), 0 0 10px -2px rgba(124,255,178,.28); }
  50%{ box-shadow: 0 0 0 2px rgba(0,229,255,.45), 0 0 18px 1px rgba(124,255,178,.38); }
}
/* Camera-style edge: a thin inset ring that expands outward. Lives on
   ::after so overflow on the inner thumb cannot clip it. */
.signal-window::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  box-shadow: inset 0 0 0 1.5px rgba(124,255,178,.28), 0 0 0 0 rgba(124,255,178,0);
  animation: signalEdgePulse 3.2s ease-in-out infinite;
}
@keyframes signalEdgePulse{
  0%,100%{ box-shadow: inset 0 0 0 1.5px rgba(124,255,178,.22), 0 0 0 0 rgba(124,255,178,0); }
  50%{ box-shadow: inset 0 0 0 1.5px rgba(0,229,255,.6), 0 0 12px 1px rgba(124,255,178,.28); }
}
.signal-window.signal-create::after{
  animation-duration:2.05s;
}
.signal-window.signal-create{
  animation-duration:2.05s;
}
/* Presentation-layer only — see signal-ui.js renderBroadcastTab(): this just
   marks freshly-appeared items so they settle into place instead of
   snapping in, and fades out items that are about to leave. Ordering and
   what counts as "new" both still come entirely from the existing ranking
   logic; this never reorders or filters anything itself. */
.bcast-item.bcast-item-enter{ animation: bcastItemEnter 480ms cubic-bezier(.2,.8,.2,1) both; }
.bcast-item.bcast-item-leave{ animation: bcastItemLeave 360ms ease-in both; pointer-events:none; }
@keyframes bcastItemEnter{
  0%{ opacity:0; transform:translateY(10px) scale(.9); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes bcastItemLeave{
  0%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.85); }
}
@media (prefers-reduced-motion: reduce){
  .signal-window, .signal-window::before, .signal-window::after,
  .signal-create-mark span, .bcast-item-enter, .bcast-item-leave,
  .bcast-plate-scan, .bcast-plate-media{ animation:none !important; }
  .bcast-plate{ opacity:1; transform:none; }
  /* Keep the Signal edge visible on One UI "Remove animations" (S23).
     CSS keyframes are what the OS kills — a standing mint ring must remain. */
  .signal-edge{
    animation:none !important;
    border-color:rgba(124,255,178,.85);
    box-shadow: inset 0 0 0 1px rgba(0,229,255,.28);
  }
  .signal-window.signal-create .signal-edge{
    border-color:rgba(0,229,255,.95);
  }
}
.signal-window > .signal-window-in{
  width:100%; height:100%; border-radius:18px; overflow:hidden;
  background:#141728; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.signal-window > .signal-window-in img,
.signal-window > .signal-window-in video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.signal-window .signal-play{
  position:absolute; width:22px; height:22px; border-radius:50%;
  background:rgba(13,15,23,.72); color:#7CFFB2; display:flex; align-items:center; justify-content:center;
  font-size:10px;
}
.bcast-item .signal-window + span{ max-width:72px; }

/* ---- Broadcast living-room refresh (visual only, 20260828a) ---- */
#tab-broadcast > .topbar{ display:none; }
.signal-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px; padding:2px 4px 8px;
}
.signal-head-label{
  padding:6px 4px 4px; letter-spacing:.12em;
  color:var(--mint);
}
.signal-head-label::before{
  content:''; display:inline-block; width:10px; height:10px; margin-right:7px;
  background:
    linear-gradient(currentColor,currentColor) 0 6px / 2px 4px no-repeat,
    linear-gradient(currentColor,currentColor) 4px 3px / 2px 7px no-repeat,
    linear-gradient(currentColor,currentColor) 8px 5px / 2px 5px no-repeat;
  vertical-align:middle;
}
.signal-head-label span{
  font-weight:400; color:var(--text-dim); text-transform:none; letter-spacing:0;
  margin-left:8px;
}
.signal-see-all{
  flex-shrink:0; border:1px solid var(--line); background:rgba(23,26,38,.8);
  color:var(--text-dim); border-radius:999px; padding:6px 11px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; cursor:pointer;
}
.signal-see-all:active{ border-color:var(--mint); color:var(--mint); }
.signal-create-legacy{ display:none !important; }

.bcast-strip{
  gap:10px; padding:12px 8px 20px;
  /* Swipe resistance, matching the Toga names strip: pan-x tells the browser
     this strip owns horizontal gestures (so a slightly-diagonal swipe scrolls
     the strip instead of being stolen by the page or the For You / My
     Broadcasts view swipe), overscroll-behavior-x stops a fling past the end
     from chaining out to that view switch, and snap gives it the same
     settled feel. */
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.bcast-strip > .bcast-item{ scroll-snap-align:start; }
.bcast-item.signal-tile{ gap:0; align-items:stretch; }
.signal-tile .signal-window{
  width:108px; height:148px; border-radius:22px; padding:3px;
}
.signal-edge{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5;
  border:2px solid rgba(124,255,178,.55);
  box-shadow: inset 0 0 0 1px rgba(0,229,255,.15);
  animation: signalEdgeDraw 2.8s ease-in-out infinite;
}
.signal-window.signal-create .signal-edge{
  border-width:2.5px;
  animation-duration:1.75s;
}
@keyframes signalEdgeDraw{
  0%,100%{ border-color:rgba(124,255,178,.4); box-shadow: inset 0 0 0 1px rgba(0,229,255,.08), 0 0 0 0 rgba(124,255,178,0); }
  50%{ border-color:rgba(0,229,255,.95); box-shadow: inset 0 0 0 1px rgba(124,255,178,.35), 0 0 10px 0 rgba(124,255,178,.28); }
}
html.naluno-reduce-motion .signal-edge.on{
  border-color:rgba(0,229,255,.95);
}
.signal-tile .signal-window > .signal-window-in{
  border-radius:20px; align-items:stretch; justify-content:flex-end;
}
.signal-tile .signal-window > .signal-window-in img,
.signal-tile .signal-window > .signal-window-in video,
.signal-tile .signal-window > .signal-window-in .avatar,
.signal-tile .signal-window > .signal-window-in .mysignal-thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.signal-age{
  position:absolute; top:8px; left:8px; z-index:2;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em;
  color:#fff; background:rgba(13,15,23,.62); border-radius:999px; padding:3px 7px;
}
.signal-tile .signal-play{
  right:8px; bottom:36px; width:24px; height:24px;
  background:rgba(13,15,23,.78); color:var(--mint);
  border:1px solid rgba(124,255,178,.45);
}
.signal-tile-cap{
  position:relative; z-index:2; width:100%; padding:8px 8px 9px;
  background:linear-gradient(180deg, transparent, rgba(7,8,12,.88) 38%);
  display:flex; flex-direction:column; gap:1px;
}
.signal-tile-cap strong{
  display:block; font-size:11.5px; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.signal-tile-cap em{
  font-style:normal; font-family:var(--font-mono); font-size:9.5px; color:rgba(237,239,247,.7);
}
.signal-window.signal-create{
  background:#10131c;
}
.signal-window.signal-create::before{ opacity:.85; }
.signal-create-mark{
  position:absolute; inset:0 0 44px; display:flex; align-items:center; justify-content:center;
}
.signal-create-mark span{
  width:42px; height:42px; border-radius:50%;
  border:1.5px dashed rgba(124,255,178,.7);
  color:var(--mint); font-size:22px; line-height:40px; text-align:center;
  box-shadow:0 0 16px -6px rgba(124,255,178,.55);
  animation: signalPlusBreathe 2.05s ease-in-out infinite;
}
@keyframes signalPlusBreathe{
  0%,100%{ transform:scale(1); border-color:rgba(124,255,178,.55); box-shadow:0 0 10px -6px rgba(124,255,178,.35); }
  50%{ transform:scale(1.08); border-color:rgba(0,229,255,.95); box-shadow:0 0 18px -2px rgba(124,255,178,.75); }
}
.signal-tile-create .signal-tile-cap{ background:linear-gradient(180deg, transparent, rgba(7,8,12,.7) 40%); }

.toga-panel.toga-banner{
  margin:4px 0 8px;
  padding:8px 10px;
  background:linear-gradient(90deg, rgba(124,255,178,.08), rgba(124,77,255,.10) 55%, rgba(255,61,166,.08));
  border-color:rgba(124,255,178,.22);
}
.toga-panel.toga-banner .toga-expand{ min-height:44px; padding:4px 2px; gap:8px; }
.toga-faces{ display:flex; align-items:center; flex-shrink:0; padding-right:6px; }
.toga-face{
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-futuristic); font-size:11px; font-weight:700; color:#0D0F17;
  border:2px solid #0D0F17; margin-left:-8px;
  overflow:hidden; position:relative; flex-shrink:0;
}
.toga-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.toga-name-row .toga-face{ width:36px; height:36px; margin-left:0; border-width:1px; font-size:13px; }
.toga-faces .toga-face:first-child{ margin-left:0; }
.toga-face-empty{ background:var(--mint); }
.toga-wof{
  /* Matches the "Toga" pill's typeface — this read as a different brand
     next to it because it was using --font-display while the pill uses
     --font-futuristic (Naluno's own face). */
  font-family:var(--font-futuristic); font-size:12px; font-weight:700;
  letter-spacing:.06em; color:#fff; text-transform:uppercase;
  background:linear-gradient(90deg, #ff4d6d, #ff7a8a);
  padding:3px 9px; border-radius:4px; line-height:1.3;
}
.toga-pill{
  margin-left:auto; flex-shrink:0;
  background:var(--mint); color:#0D0F17;
  font-family:var(--font-futuristic); font-size:11px; letter-spacing:.04em;
  padding:6px 12px; border-radius:999px;
  box-shadow:0 0 16px -4px rgba(124,255,178,.7);
}
.toga-panel.toga-banner .toga-expand-hint{ margin-left:0; font-size:10px; }
.toga-panel.toga-banner .toga-head-wrap{ gap:4px; }

#sparkPage{ z-index:230; }
#sparkPage.active{ z-index:230 !important; }
body:has(#sparkPage.active) .navbar{ display:none !important; }
.spark-bridge{ height:3px; margin:4px 22px 8px; border-radius:99px; background:linear-gradient(90deg, transparent, #7CFFB2, #5B8CFF, #7CFFB2, transparent); opacity:.85; }
.spark-bridge span{ display:block; height:3px; width:28%; border-radius:99px; background:#fff; animation:sparkPulse 1.8s ease-in-out infinite; }
@keyframes sparkPulse{ 0%{ margin-left:0; opacity:.2 } 50%{ margin-left:72%; opacity:1 } 100%{ margin-left:0; opacity:.2 } }
.spark-ice-row{ display:flex; gap:8px; overflow-x:auto; padding:0 16px 8px; }
.spark-ice{ flex-shrink:0; border:1px solid var(--line); background:rgba(124,255,178,.08); color:var(--text); border-radius:999px; padding:6px 10px; font-size:11px; }
.spark-msgs{ flex:1; overflow-y:auto; padding:8px 16px 12px; display:flex; flex-direction:column; gap:10px; }
.spark-empty{ color:var(--text-dim); font-size:13px; line-height:1.45; padding:24px 8px; text-align:center; }
.spark-row{ display:flex; }
.spark-row.me{ justify-content:flex-end; }
.spark-bubble{ max-width:82%; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px 12px; }
.spark-row.me .spark-bubble{ background:rgba(124,255,178,.12); border-color:rgba(124,255,178,.28); }
.spark-main{ font-size:15px; line-height:1.4; }
.spark-orig{ margin-top:6px; font-size:11px; color:var(--text-dim); }
.spark-hear{ margin-top:8px; border:none; background:transparent; color:var(--mint); font-size:11px; padding:0; }
.spark-compose{ display:flex; gap:8px; align-items:flex-end; padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); }
.spark-compose textarea{ flex:1; resize:none; min-height:40px; max-height:100px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px 12px; color:var(--text); font:inherit; }
.spark-talk{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:#FF5470; font-size:14px; }
.spark-talk.hot{ background:#FF5470; color:#fff; }
.spark-send{ border:none; background:var(--mint); color:#0D0F17; border-radius:14px; padding:10px 14px; font-weight:700; }

#sparkLgBook{
  display:none; position:absolute; inset:auto 0 0 0; max-height:62%;
  background:rgba(13,15,23,.97); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px); z-index:5;
}
#sparkLgBook.open{ display:block; }
.spark-lg-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px 8px; }
#sparkLgList{ overflow-y:auto; max-height:36vh; padding:0 14px 16px; }
.spark-lg-row{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.spark-lg-row span{ color:var(--mint); text-align:right; }
/* Community / Circle members sheet — opened only when the Community cell in
   the Impact dashboard is tapped (see openCircleMembers in circle.js). */
/* Wireline document bubble — a document is not media, so it gets a real
   file row (icon, name, size, Open) rather than being forced into an
   image/video frame. */
/* Delete control on anything you posted into a Broadcast (comment, voice
   note, photo, question, result, resource). Deliberately quiet — it sits in
   the byline, not competing with the content, and only becomes prominent on
   press. Destructive, so it reads red rather than mint. */
.bspace-del{
  float:right; margin-left:8px;
  background:transparent; border:1px solid rgba(255,84,112,.35); border-radius:999px;
  color:#ff8a9a; font-family:var(--font-mono); font-size:9.5px;
  padding:2px 9px; cursor:pointer; line-height:1.5;
}
.bspace-del:active{ background:rgba(255,84,112,.16); border-color:rgba(255,84,112,.7); }
.doc-bubble{ padding:0 !important; background:transparent !important; border:none !important; }
.doc-frame{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:10px 12px; min-width:190px; max-width:260px;
}
.doc-frame:active{ border-color:var(--mint); }
.doc-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,255,178,.12); color:var(--mint);
}
.doc-meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.doc-name{
  font-size:13px; color:var(--text); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.doc-sub{ font-family:var(--font-mono); font-size:10px; color:var(--text-dim); }
.doc-pending{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-dim); }
.doc-get{
  font-family:var(--font-mono); font-size:10.5px; color:var(--mint);
  border:1px solid rgba(124,255,178,.4); border-radius:999px; padding:4px 10px; flex-shrink:0;
}
.circle-members-sheet{
  display:none; position:fixed; inset:0; z-index:600;
  background:rgba(5,6,10,.82); align-items:flex-end; justify-content:center;
}
.circle-members-sheet.active{ display:flex; }
.circle-members-panel{
  width:100%; max-width:460px; max-height:72vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px 20px 0 0; padding-bottom:14px;
}
.circle-members-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 8px;
}
.circle-members-list{ padding:0 14px; display:flex; flex-direction:column; gap:8px; }
.circle-member-row{
  width:100%; display:flex; align-items:center; gap:10px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  padding:10px 12px; color:inherit; text-align:left; cursor:pointer;
}
.circle-member-row:active{ border-color:var(--mint); }
.circle-member-face{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.circle-member-initial{
  font-family:var(--font-futuristic); font-size:14px; color:#fff;
}
.circle-member-name{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.circle-member-go{ color:var(--text-dim); font-size:18px; flex-shrink:0; }
.bspace-stat-tappable{ cursor:pointer; border-color:rgba(124,255,178,.35) !important; }
.bspace-stat-tappable:active{ border-color:var(--mint) !important; }
.spark-lg-suggestion{
  display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:6px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:12.5px;
}
.spark-lg-suggestion span:first-child{ flex:1; color:var(--text); font-weight:600; }
.spark-lg-suggestion-src{ font-family:var(--font-mono); font-size:10px; color:var(--text-dim); white-space:nowrap; }
.spark-lg-use-btn{
  padding:6px 12px; border-radius:999px; border:1px solid rgba(124,255,178,.4);
  background:transparent; color:var(--mint); font-family:var(--font-mono); font-size:11px; cursor:pointer; flex-shrink:0;
}
.spark-lg-wiki-link{ display:block; font-size:11.5px; color:var(--text-dim); text-decoration:underline; margin-top:4px; }

#weatherStrip{
  display:none; position:absolute; top:0; left:0; right:0; height:28px;
  z-index:90; overflow:hidden; background:rgba(13,15,23,.92);
  border-bottom:1px solid var(--line); align-items:center;
}
#weatherStrip.on{ display:flex; }
.weather-track{
  display:flex; white-space:nowrap; animation:weatherScroll 28s linear infinite;
  font-family:var(--font-mono); font-size:11px; color:var(--mint); letter-spacing:.04em;
  padding-right:36px;
}
#weatherStripDismiss{
  position:absolute; right:6px; top:2px; width:24px; height:24px;
  border:none; background:transparent; color:var(--text-dim); font-size:16px; cursor:pointer;
}
@keyframes weatherScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
body.weather-on .tabscreen{ top:28px; }
body.naluno-gated #weatherStrip{ display:none !important; }
body:has(.call-overlay.active) #weatherStrip{ display:none !important; }

/* ---------- liveliness ---------- */
.bcast-plate{ position:relative; transition: transform .2s ease, box-shadow .2s ease; }
.bcast-plate:active{ transform:scale(.98); }
.bcast-plate-live{
  animation: livePulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,84,112,.45);
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(255,84,112,.5); }
  70%{ box-shadow:0 0 0 10px rgba(255,84,112,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,84,112,0); }
}
.nav-item.active svg, .navbar .active svg{ filter: drop-shadow(0 0 6px rgba(124,255,178,.55)); }
.upload-drop{
  animation: dropBreathe 4.2s ease-in-out infinite;
}
@keyframes dropBreathe{
  0%,100%{ border-color: var(--line); }
  50%{ border-color: rgba(124,255,178,.45); }
}
#offlineBadge{ animation: pulse-dot 2s infinite; }
.spark-empty, .bspace-card .body{
  text-wrap: pretty;
}
.presence-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 rgba(124,255,178,.55); animation:pulse-dot 1.6s infinite; margin-right:6px;
}



/* ---- Landscape media: 16:9 / landscape clip claims the phone screen ---- */
body.naluno-landscape-media .app{
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
}
body.naluno-landscape-media .navbar,
body.naluno-landscape-media .brand-row,
body.naluno-landscape-media #weatherStrip{
  display: none !important;
}
body.naluno-landscape-media #bviewer,
body.naluno-landscape-media #bspace{
  position: fixed !important;
  inset: 0 !important;
  z-index: 90 !important;
  background: #000 !important;
}
body.naluno-landscape-media .bviewer-body.native-preview,
body.naluno-landscape-media #bspaceHero{
  max-height: 100dvh !important;
  height: 100dvh !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
}
body.naluno-landscape-media #bspace .bspace-body{
  display:none !important;
}
body.naluno-landscape-media #bspaceHero video,
body.naluno-landscape-media #bspaceHero img,
body.naluno-feed-landscape .bcast-plate.is-landscaped .strand-preview,
body.naluno-feed-landscape .bcast-plate.is-landscaped .bcast-plate-media{
  width:100% !important; height:100% !important;
  background:#000;
}
body.naluno-fit-contain #bspaceHero video,
body.naluno-fit-contain #bspaceHero img,
body.naluno-fit-contain .bcast-plate.is-landscaped video{
  object-fit:contain !important;
}
body.naluno-fit-cover #bspaceHero video,
body.naluno-fit-cover #bspaceHero img,
body.naluno-fit-cover .bcast-plate.is-landscaped video{
  object-fit:cover !important;
}
.bspace-topbar{ z-index:24 !important; pointer-events:auto; }
body.naluno-landscape-media .bspace-topbar{ z-index:30 !important; }
body.naluno-landscape-media #bspaceSeekDock{
  position:fixed; left:12px; right:12px; bottom:18px; z-index:26;
  transition:opacity .25s ease;
}
body.naluno-landscape-media.naluno-bspace-idle .bspace-topbar,
body.naluno-landscape-media.naluno-bspace-idle #bspaceSeekDock,
body.naluno-landscape-media.naluno-bspace-idle #bspaceFitToggle,
body.naluno-landscape-media.naluno-bspace-idle #bspaceOrientToggle,
body.naluno-landscape-media.naluno-bspace-idle #bspaceLiveBadge,
body.naluno-landscape-media.naluno-bspace-idle #bspacePlayKick{
  opacity:0 !important;
  pointer-events:none !important;
}
.feed-orient-btn{
  position:absolute; right:14px; top:14px; z-index:8;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(124,255,178,.45);
  background:rgba(13,15,23,.62);
  color:var(--mint); display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(8px);
}
.feed-orient-btn[hidden]{ display:none !important; }
.feed-orient-btn.on{ background:var(--mint); color:#0D0F17; }
body.naluno-feed-landscape .bcast-plate.is-landscaped{
  position:relative;
}
body.naluno-feed-landscape .navbar{ display:none !important; }
body.naluno-feed-landscape #tab-broadcast.tabscreen{ bottom:0; }

/* Signal video stage — 9:16 phone default. Landscape clips re-adapt in JS. */
.bviewer-body.native-preview{
  position: relative;
  aspect-ratio: 9 / 16;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: min(82vh, 780px);
}
.bviewer-body.native-preview video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}


/* Toga — public views standing for opted-in Circles */
.toga-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px 14px; margin:0 0 16px; position:relative; z-index:2;
  overflow:hidden;
}
/* "Toga should feel special — a Wall of Fame, not another ordinary card":
   a slow, low-intensity light sweep across the top edge only, reusing the
   app's existing brand-gradient/shimmer language rather than inventing a
   new one. Deliberately subtle — a corner glow, not a neon frame. */
.toga-panel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--brand-gradient); background-size:300% 100%;
  animation: brandShimmer 8s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .toga-panel::before{ animation:none; } }
.toga-expand{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  border:none;
  color:inherit;
  padding:8px 2px;
  min-height:48px;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color: transparent;
  pointer-events:auto;
}
.toga-expand.open .toga-chevron{ transform:rotate(180deg); }
.toga-head-wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.toga-expand-hint{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim); margin-left:auto; }
.toga-month{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--mint); text-transform:uppercase; }
.toga-chevron{ color:var(--mint); font-size:14px; line-height:1; transition:transform .2s ease; flex-shrink:0; }
.toga-head{ font-family:var(--font-futuristic); font-size:15px; margin-bottom:0; }
.toga-tog{ min-height:40px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text-dim); font-family:var(--font-mono); font-size:11px; cursor:pointer; }
.toga-tog.on{ background:var(--mint); color:#0D0F17; border-color:var(--mint); }
.toga-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); padding:4px 0; }
.toga-n{ color:var(--mint); }
.toga-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.toga-strip-hint{
  font-family:var(--font-mono); font-size:10px; color:var(--text-dim);
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px;
}
.toga-list{
  list-style:none; margin:0; padding:0 2px 8px;
  display:flex; flex-direction:row; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.toga-list::-webkit-scrollbar{ display:none; }
.toga-list li{ flex:0 0 auto; scroll-snap-align:start; }
.toga-name-row{
  width:248px;
  min-height:92px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.toga-name-row:active{ border-color:var(--mint); }
/* Top ranks get a touch more visual weight — recognition, not a leaderboard
   grind. Kept subtle: a warmer border tint and a slightly bolder rank
   number, nothing that competes with the actual name/content. */
.toga-name-row.toga-rank-1{ border-color:rgba(124,255,178,.45); background:linear-gradient(135deg, rgba(124,255,178,.10), var(--surface-2) 60%); }
.toga-name-row.toga-rank-2{ border-color:rgba(0,229,255,.35); background:linear-gradient(135deg, rgba(0,229,255,.07), var(--surface-2) 60%); }
.toga-name-row.toga-rank-3{ border-color:rgba(124,77,255,.35); background:linear-gradient(135deg, rgba(124,77,255,.07), var(--surface-2) 60%); }
.toga-name-row.toga-rank-1 .toga-rank,
.toga-name-row.toga-rank-2 .toga-rank,
.toga-name-row.toga-rank-3 .toga-rank{ font-size:17px; }
.toga-delta{
  display:inline-block; font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  padding:2px 6px; border-radius:999px; margin-left:8px; letter-spacing:.03em; vertical-align:middle;
}
.toga-delta-up{ background:rgba(124,255,178,.14); color:var(--mint); }
.toga-delta-down{ background:rgba(255,84,112,.14); color:#ff8a9a; }
.toga-delta-new{ background:rgba(124,77,255,.18); color:#c9a8ff; }
.toga-delta-same{ background:transparent; color:var(--text-dim); padding-left:0; padding-right:0; }
.toga-period-note{
  font-family:var(--font-mono); font-size:10px; color:var(--text-dim);
  text-align:center; margin-top:12px; letter-spacing:.03em;
}
.toga-rank{
  font-family:var(--font-futuristic);
  font-size:15px;
  color:var(--mint);
  min-width:32px;
  text-align:left;
  flex-shrink:0;
}
/* FIX: alignment looked inconsistent across devices (buttons/spans can pick
   up a browser's own default text-align, e.g. centered, if nothing here
   says otherwise). Made explicit end to end: rank + name + stats align left
   in the flexible middle space, the score aligns right in its own fixed
   space — proportional to what each piece actually occupies, not left
   depending on inheritance to happen to work out the same way everywhere. */
.toga-name-block{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; overflow:hidden; }
.toga-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:14px; min-height:88px; text-align:left; color:inherit; width:100%; cursor:pointer; }
.toga-card-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--text-dim); text-align:left; }
.toga-card-name{
  font-family:var(--font-futuristic); font-size:15px; margin:0; text-align:left;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.toga-card-v{
  font-family:var(--font-futuristic); font-size:12px; color:var(--mint);
  text-align:left; min-width:0; line-height:1.2;
}
.toga-card-h{ font-family:var(--font-mono); font-size:10px; color:var(--text-dim); margin-top:0; text-align:left; }
.bspace-view-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  margin:0 0 14px;
}
.bspace-stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.bspace-stat-card--mine{
  border-color:rgba(124,255,178,.35);
  background:linear-gradient(160deg, rgba(124,255,178,.08), var(--surface));
}
.bspace-stat-k{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.bspace-stat-v{
  font-family:var(--font-futuristic);
  font-size:22px;
  font-weight:700;
  color:var(--mint);
  line-height:1.1;
}
.bspace-stat-h{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-dim);
  line-height:1.35;
}
#bspaceFitToggle{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:6;
  min-height:34px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(13,15,23,.72);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
#bspaceFitToggle:active{ transform:scale(.97); }

.nearby-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 10px;
  scroll-snap-type:x mandatory;
}
.nearby-tile{
  flex:0 0 108px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  scroll-snap-align:start;
}
.nearby-frame{
  position:relative;
  width:108px;
  height:154px;
  border-radius:14px;
  overflow:hidden;
  background:#12141c;
  border:1px solid rgba(124,255,178,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.nearby-frame img, .nearby-fallback{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nearby-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-futuristic);
  font-size:28px;
  color:var(--mint);
  background:radial-gradient(circle at 30% 20%, rgba(124,255,178,.22), transparent 55%), #12141c;
}
.nearby-title{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:18px 8px 8px;
  background:linear-gradient(to top, rgba(7,8,14,.92), transparent);
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:1.25;
  text-align:left;
}

/* ---- Living shell (visual only — no architecture) ---- */
.naluno-aurora{
  pointer-events:none;
  position:absolute; inset:-18% -8% -8%;
  z-index:0;
  background:
    radial-gradient(42% 32% at 18% 8%, rgba(124,255,178,.18), transparent 62%),
    radial-gradient(36% 28% at 82% 4%, rgba(0,229,255,.14), transparent 58%),
    radial-gradient(48% 36% at 72% 92%, rgba(124,77,255,.12), transparent 62%);
  animation: auroraDrift 22s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
html[data-atmosphere="quiet"] .naluno-aurora{
  background:
    radial-gradient(42% 32% at 18% 8%, rgba(122,129,149,.12), transparent 62%),
    radial-gradient(36% 28% at 82% 4%, rgba(90,97,120,.08), transparent 58%);
}
html[data-atmosphere="lively"] .naluno-aurora{
  background:
    radial-gradient(42% 32% at 18% 8%, rgba(255,184,107,.16), transparent 62%),
    radial-gradient(36% 28% at 82% 4%, rgba(124,255,178,.12), transparent 58%),
    radial-gradient(48% 36% at 72% 92%, rgba(0,229,255,.10), transparent 62%);
}
html[data-atmosphere="buzzing"] .naluno-aurora{
  background:
    radial-gradient(42% 32% at 18% 8%, rgba(255,84,112,.16), transparent 62%),
    radial-gradient(36% 28% at 82% 4%, rgba(255,184,107,.12), transparent 58%),
    radial-gradient(48% 36% at 72% 92%, rgba(124,77,255,.14), transparent 62%);
}
@keyframes auroraDrift{
  from{ transform:translate3d(-3%,-2%,0) scale(1); }
  to{ transform:translate3d(4%,3%,0) scale(1.06); }
}
@keyframes headerScan{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
#atmosphereLabel{
  border-color:rgba(124,255,178,.28) !important;
  box-shadow:0 0 18px -8px rgba(124,255,178,.5);
}
.search-pill{
  background:rgba(23,26,38,.72);
  box-shadow: inset 0 0 0 1px rgba(124,255,178,.08);
}
.ghost-btn{ transition: border-color .2s, color .2s, box-shadow .2s; }
.ghost-btn:hover, .ghost-btn:active{
  box-shadow:0 0 16px -8px rgba(124,255,178,.55);
}
@media (prefers-reduced-motion: reduce){
  .naluno-aurora, .navbar::before, .tab-header::after{ animation:none !important; }
}

/* ---------- First-run welcome + tour + legal ---------- */
#authGate.naluno-entry-play{
  flex-direction: column;
}
.naluno-onboard{
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 28px calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  background: #0D0F17;
}
.naluno-onboard[hidden]{ display: none !important; }
.naluno-onboard.on{ display: flex; }
.onboard-stage{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
}
.onboard-hero{
  width: 220px;
  height: 168px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-hero-svg{ width: 220px; height: 168px; }
.tour-hero{
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
}
.onboard-step-svg{ width: 80px; height: 80px; }
.onboard-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 12px;
}
.onboard-legal{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 320px;
  margin: 0;
}
.welcome-inline{
  background: none;
  border: none;
  padding: 0;
  color: var(--mint);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.welcome-inline:active{ opacity: .7; }
.welcome-lang-wrap{
  position: relative;
  margin-top: 28px;
}
.welcome-lang{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  min-height: 44px;
  cursor: pointer;
}
.welcome-lang-menu{
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 8px);
  min-width: 160px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  z-index: 3;
}
.welcome-lang-menu.on{ display: block; }
.welcome-lang-menu button{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
}
.welcome-lang-menu button:active{ background: var(--surface); }
.onboard-foot{ width: 100%; padding-top: 18px; }
.onboard-agree{
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 15px;
  font-family: var(--font-display);
}
.tour-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
}
.tour-text-btn{
  background: none;
  border: none;
  color: var(--mint);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 4px;
  min-height: 44px;
  cursor: pointer;
}
.tour-dots{
  display: flex;
  gap: 6px;
  margin-top: 28px;
  justify-content: center;
}
.tour-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.tour-dot.on{ background: var(--mint); width: 16px; border-radius: 99px; }
.welcome-legal-line{
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
#nalunoLegal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 520;
  align-items: stretch;
  justify-content: center;
  background: rgba(5,6,10,.72);
}
#nalunoLegal.on{ display: flex; }
.naluno-legal-sheet{
  width: 100%;
  max-width: 460px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text);
}
.naluno-legal-bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 8px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.naluno-legal-heading{
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.naluno-legal-body{
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.naluno-legal-body h3{
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 650;
  margin: 22px 0 8px;
  color: var(--text);
}
.naluno-legal-body p{ margin: 0 0 12px; color: var(--text-dim); }
.naluno-legal-body ul{ margin: 0 0 12px 18px; color: var(--text-dim); }
.naluno-legal-body li{ margin: 0 0 6px; }
.naluno-legal-body .legal-kicker{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mint);
  margin-bottom: 16px;
}

/* ---------- Creator Support (inside Broadcast, below Circle) ---------- */
.support-flag-chip{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.support-flag-chip.on{
  color: var(--mint);
  border-color: rgba(124,255,178,.4);
  background: rgba(124,255,178,.08);
}
.support-banner{
  border: 1px solid rgba(255,184,107,.35);
  background: rgba(255,184,107,.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  margin: 4px 0 8px;
}
.support-banner.on{
  border-color: rgba(124,255,178,.32);
  background: rgba(124,255,178,.07);
}
.support-banner strong{ color: var(--mint); font-weight: 600; }
.support-banner:not(.on) strong{ color: var(--amber); }
.support-empty{
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 8px 4px 16px;
}
.support-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px;
  margin: 0 0 8px;
  color: var(--text);
  cursor: pointer;
}
.support-row.off{ opacity: .55; }
.support-row-av{
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,255,178,.14); color: var(--mint);
  font-family: var(--font-futuristic); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.support-row-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.support-row-name{ font-weight: 600; font-size: 14px; }
.support-row-name em{ font-style: normal; color: var(--red); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
.support-row-meta{ font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.support-row-cta{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--mint); border: 1px solid rgba(124,255,178,.35);
  border-radius: 999px; padding: 6px 10px; flex-shrink: 0;
}
.support-row.off .support-row-cta{ color: var(--text-dim); border-color: var(--line); }
.support-hist{
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--text-dim);
  padding: 8px 4px; border-bottom: 1px solid var(--line);
}
.support-amt-row{ display: flex; gap: 8px; }
.support-amt{
  flex: 1; min-height: 48px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px;
  font-family: var(--font-futuristic); font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.support-amt.on{
  color: #0D0F17; background: var(--mint);
  border-color: var(--mint);
}
.bspace-support-slot{ margin: -8px 0 18px; }
.bspace-support-panel{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 12px 10px;
}
.bspace-support-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.bspace-support-kicker{
  font-family: var(--font-futuristic); font-weight: 700;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text);
}
.bspace-support-btn{
  width: 100%; padding: 12px 16px;
  border-radius: 14px; border: 1px solid rgba(124,255,178,.35);
  background: transparent; color: var(--mint);
  font-family: var(--font-futuristic); font-weight: 700;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.bspace-support-btn.off{
  color: var(--text-dim); border-color: var(--line); opacity: .7;
}
.bspace-support-panel .support-banner{ margin: 0 0 10px; }
.bspace-support-panel #supportMine{ margin-top: 8px; }
.naluno-ad-sound{
  position:absolute; right:14px; top:14px; z-index:3;
  padding:8px 12px; border-radius:999px;
  background:rgba(13,15,23,.78); border:1px solid rgba(124,255,178,.45);
  color:#7CFFB2; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.naluno-ad-sound.muted{ color:#E8ECF5; border-color:rgba(232,236,245,.35); }

/* ---------- Wireline kebab + Chat backup / Chat history ---------- */
.wire-menu-wrap{ position:relative; }
.wire-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:248px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:6px;
  z-index:40;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.wire-menu-row{
  display:flex; align-items:center; gap:16px;
  width:100%; min-height:52px;
  padding:8px 12px;
  border:none; background:transparent;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  text-align:left;
  border-radius:12px;
  cursor:pointer;
}
.wire-menu-row:hover, .wire-menu-row:active{ background:rgba(124,255,178,.06); }
.wire-menu-ico{ width:24px; height:24px; color:var(--text-dim); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.wire-set-scroll{
  flex:1; overflow-y:auto; padding:8px 18px calc(28px + env(safe-area-inset-bottom,0px));
  -webkit-overflow-scrolling:touch;
}
.wire-set-card{
  display:flex; gap:16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  margin:12px 0 16px;
}
.wire-set-stat{ flex:1; min-width:0; }
.wire-set-stat-val{
  font-family:var(--font-display);
  font-size:15.5px; font-weight:600;
  margin-top:4px; word-break:break-word;
}
.wire-set-copy{
  color:var(--text-dim);
  font-size:13.5px; line-height:1.55;
  margin:0 2px 16px;
}
.wire-set-copy-dim{ font-size:12.5px; }
.wire-set-primary{
  width:100%; padding:14px;
  border-radius:14px; border:none;
  background:var(--mint); color:#0D0F17;
  font-family:var(--font-display);
  font-weight:650; font-size:15px;
  cursor:pointer; margin-bottom:10px;
}
.wire-set-secondary{
  width:100%; padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  font-family:var(--font-display);
  font-weight:600; font-size:15px;
  cursor:pointer; margin-bottom:18px;
}
.wire-set-danger{
  margin-top:24px; padding-top:8px;
  border-top:1px solid var(--line);
}
.wire-set-danger-btn{
  width:100%; padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,84,112,.4);
  background:rgba(255,84,112,.08);
  color:var(--red);
  font-family:var(--font-display);
  font-weight:650; font-size:14.5px;
  cursor:pointer;
}
.wire-hist-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 4px; min-height:56px;
  border-bottom:1px solid rgba(42,46,66,.6);
}
.wire-hist-meta{ flex:1; min-width:0; }
.wire-hist-name{
  font-weight:600; font-size:14.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wire-hist-sub{
  font-size:12px; color:var(--text-dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wire-hist-clear{
  flex-shrink:0;
  min-height:36px; padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:11px;
  cursor:pointer;
}
@media (prefers-reduced-motion:reduce){
  .wire-menu{ transition:none; }
}