/* oracle.css — extracted from oracle.html <style> block (v9.10.500).
   Served by command-center-server.mjs. Edit here, hard-refresh to apply. */
:root{
  --bg:#04070d;
  --bg-2:#070b14;
  --panel:rgba(13,19,32,0.72);
  --panel-2:rgba(9,14,24,0.85);
  --panel-solid:#0a0f1b;
  --rail:rgba(7,11,20,0.92);
  --border:rgba(255,255,255,0.07);
  --border-2:rgba(255,255,255,0.04);
  --accent:#22d9e6;
  --accent-2:#0ea5b8;
  --accent-glow:rgba(34,217,230,0.22);
  --text:#e9eef7;
  --muted:#6b7a90;
  --muted-2:#475263;
  --good:#4ade80;
  --bad:#f87171;
  --warn:#fbbf24;
  --star:#fbbf24;
  --mono:'JetBrains Mono',monospace;
  --ui:'Outfit',sans-serif;

  /* per-agent accents (MODEL_COLORS) */
  --c-kai:#4ade80;
  --c-leo:#ff4da6;
  --c-gemini:#22d3ee;
  --c-claudey:#a78bfa;
  --c-x:#e2e8f0;
  --c-groq:#f472b6;
  --c-analyst:#60a5fa;
  --c-researcher:#34d399;
  --c-coder:#fb923c;
  --c-oracle:#22d9e6;
  --c-ryan:#fbbf24;
  --c-system:#475569;
}

/* ══ Collectible Themes ═══════════════════════════════════════════════════════
   Each theme overrides CSS custom properties and adds unique visual effects.
   Applied via body.theme-<id>. The JS theme engine adds/removes the class. */

/* ── Shared theme surface overrides (applies to ALL collectible themes) ────── */
/* Panels, cards, containers */
[class*="theme-"] .guest-card,[class*="theme-"] .gmodal,[class*="theme-"] .set2-nav,
[class*="theme-"] .set2-body,[class*="theme-"] .gpost-composer,
[class*="theme-"] .gm-stab,[class*="theme-"] details{
  background:var(--panel)!important;border-color:var(--border)!important;color:var(--text)!important;
}
/* Quick menu */
[class*="theme-"] #quick-menu{
  background:linear-gradient(180deg,var(--panel-solid),var(--bg))!important;
  border-right-color:var(--border)!important;
}
[class*="theme-"] .qm-head{border-bottom-color:var(--border)!important}
[class*="theme-"] .qm-title{color:var(--text)!important}
[class*="theme-"] .qm-close{background:var(--panel)!important;color:var(--muted)!important}
[class*="theme-"] .qm-sec{color:var(--muted-2)!important}
[class*="theme-"] .qm-grp{background:var(--panel)!important;border-color:var(--border)!important}
[class*="theme-"] .qm-row{color:var(--text)!important}
[class*="theme-"] .qm-row:hover{background:var(--accent-glow)!important}
[class*="theme-"] .qm-row .qm-ico{color:var(--muted)!important}
[class*="theme-"] .qm-row:hover .qm-ico{color:var(--accent)!important}
[class*="theme-"] #quick-menu-backdrop{background:rgba(0,0,0,.55)!important}
/* Top bar / nav rail */
[class*="theme-"] #nav-rail,[class*="theme-"] .top-bar{
  background:var(--rail)!important;border-color:var(--border)!important;
}
/* Inputs */
[class*="theme-"] input,[class*="theme-"] textarea,[class*="theme-"] select{
  background:var(--bg-2)!important;border-color:var(--border)!important;color:var(--text)!important;
}
[class*="theme-"] input:focus,[class*="theme-"] textarea:focus{
  border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-glow)!important;
}
/* Links and scrollbars */
[class*="theme-"] a{color:var(--accent)!important}
[class*="theme-"] ::-webkit-scrollbar-thumb{background:var(--accent-glow)!important}
/* Buttons */
[class*="theme-"] button.gc-btn,[class*="theme-"] .gm-primary,[class*="theme-"] .gm-ghost{
  font-family:var(--ui),Outfit,sans-serif!important;
}
/* Text colors */
[class*="theme-"] .gc-h,[class*="theme-"] h3,[class*="theme-"] .gc-k{color:var(--text)!important}
[class*="theme-"] .gc-v,[class*="theme-"] .gc-msg{color:var(--muted)!important}
/* Settings nav tabs */
[class*="theme-"] .set2-nav button{color:var(--muted)!important}
[class*="theme-"] .set2-nav button:hover{background:var(--accent-glow)!important;color:var(--text)!important}
[class*="theme-"] .set2-nav button.on{background:var(--accent-glow)!important;color:var(--accent)!important}
/* Feed post containers */
[class*="theme-"] .gfeed-wrap,[class*="theme-"] .guest-col-right .guest-card{
  background:var(--panel)!important;border-color:var(--border)!important;
}
/* Sidebar widget text follows theme */
[class*="theme-"] .gsb-name,[class*="theme-"] .gsb-tag,[class*="theme-"] .gsb-sname{color:var(--text)!important}
[class*="theme-"] .gsb-handle,[class*="theme-"] .gsb-tagmeta,[class*="theme-"] .gsb-sl,[class*="theme-"] .gsb-swhy{color:var(--muted)!important}
[class*="theme-"] .gsb-sv{color:var(--accent)!important}
[class*="theme-"] .gsb-stat{background:rgba(255,255,255,.03)!important;border-color:var(--border)!important}
[class*="theme-"] .gsb-trending-item:hover,[class*="theme-"] .gsb-suggested-row:hover{background:var(--accent-glow)!important}
[class*="theme-"] .gcomposer-opt{background:rgba(255,255,255,.05)!important;border-color:var(--border)!important;color:var(--muted)!important}
[class*="theme-"] .gcomposer-opt:hover{background:rgba(255,255,255,.10)!important;color:var(--text)!important}
/* DM / messaging panels */
[class*="theme-"] .bv-wrap,[class*="theme-"] .bv-header,[class*="theme-"] .bv-compose{
  background:var(--panel)!important;border-color:var(--border)!important;
}
/* Messaging / DM area */
[class*="theme-"] .bot-view{background:var(--panel-solid)!important;border-left-color:var(--border)!important}
[class*="theme-"] .transcript{background:var(--bg)!important}
[class*="theme-"] .dm.me .dm-bub{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;box-shadow:0 2px 12px var(--accent-glow)!important}
[class*="theme-"] .dm.them .dm-bub{background:var(--panel)!important;border-color:var(--border)!important;color:var(--text)!important}
[class*="theme-"] .dm.sys .dm-bub{background:rgba(255,255,255,.02)!important;border-color:var(--border)!important;color:var(--muted)!important}
[class*="theme-"] .dm .dm-who{color:var(--muted)!important}
[class*="theme-"] .dm-status{color:var(--muted-2)!important}
[class*="theme-"] .dm-status.seen{color:var(--accent)!important}
[class*="theme-"] .bv-compose textarea{background:var(--bg-2)!important;border-color:var(--border)!important;color:var(--text)!important}
[class*="theme-"] .bv-compose textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-glow)!important}
/* Channel/topology chat bubbles */
[class*="theme-"] .turn .bubble{background:var(--panel)!important;border-color:var(--border)!important;color:var(--text)!important}
[class*="theme-"] .turn.right .bubble{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border-color:transparent!important}
/* Channel tabs */
[class*="theme-"] .ch-tabs{background:var(--panel-2)!important;border-bottom-color:var(--border)!important}
[class*="theme-"] .ch-tab{color:var(--muted)!important}
[class*="theme-"] .ch-tab:hover{color:var(--text)!important;background:rgba(255,255,255,.04)!important}
[class*="theme-"] .ch-tab.active{color:var(--accent)!important;background:var(--accent-glow)!important;border-color:var(--accent)!important}
/* Metrics cards */
[class*="theme-"] .met-card{border-color:var(--border)!important;background:var(--panel)!important}
[class*="theme-"] .met-card .mc-v{color:var(--accent)!important}
/* Side-panel bot view */
[class*="theme-"] .bv-header,[class*="theme-"] .bv-top{background:var(--panel-2)!important;border-bottom-color:var(--border)!important}
[class*="theme-"] .bv-name{color:var(--text)!important}
[class*="theme-"] .bv-sub{color:var(--muted)!important}
/* Topology / nervous system view */
[class*="theme-"] #view-topology,[class*="theme-"] #view-nervous{background:var(--bg)!important}
/* Buttons in messaging */
[class*="theme-"] .btn{border-color:var(--border)!important;color:var(--text)!important}
[class*="theme-"] .btn:hover{background:var(--accent-glow)!important}
[class*="theme-"] .btn.primary,[class*="theme-"] .btn.kai{border-color:var(--accent)!important;color:var(--accent)!important}
/* Left rail */
[class*="theme-"] .rail{background:var(--rail)!important;border-right-color:var(--border)!important}
[class*="theme-"] .rail-btn{color:var(--muted)!important}
[class*="theme-"] .rail-btn:hover{color:var(--text)!important;background:var(--accent-glow)!important}
[class*="theme-"] .rail-btn.active{color:var(--accent)!important;background:var(--accent-glow)!important}
/* Column headers */
[class*="theme-"] .col-header{background:var(--panel-2)!important;border-bottom-color:var(--border)!important;color:var(--text)!important}
[class*="theme-"] #col-left{background:var(--panel-solid)!important;border-right-color:var(--border)!important}
[class*="theme-"] #col-right{background:var(--panel-solid)!important;border-left-color:var(--border)!important}
/* Agent list items */
[class*="theme-"] .agent-item{border-bottom-color:var(--border)!important}
[class*="theme-"] .agent-item:hover{background:var(--accent-glow)!important}
[class*="theme-"] .agent-item .ai-name{color:var(--text)!important}
[class*="theme-"] .agent-item .ai-sub{color:var(--muted)!important}
/* Spark charts */
[class*="theme-"] .spark{border-color:var(--border)!important;background:var(--panel)!important}
[class*="theme-"] .spark .bar{background:linear-gradient(180deg,var(--accent),var(--accent-2))!important}
/* Config pane */
[class*="theme-"] .config-pane{background:var(--bg)!important}
/* Mobile tab bar */
[class*="theme-"] .m-tabbar{background:var(--rail)!important;border-top-color:var(--border)!important}
[class*="theme-"] .m-tab{color:var(--muted)!important}
[class*="theme-"] .m-tab.active{color:var(--accent)!important}
/* Top bar */
[class*="theme-"] .top-bar{background:var(--panel-2)!important;border-bottom-color:var(--border)!important}
[class*="theme-"] .top-bar .tb-title{color:var(--text)!important}
/* Side dock chat tabs */
[class*="theme-"] .cdt-tab{background:var(--panel)!important;border-color:var(--border)!important}
[class*="theme-"] .cdt-tab:hover{border-color:var(--accent)!important}
/* Notification panel */
[class*="theme-"] #tb-notif-panel{background:var(--panel-solid)!important;border-color:var(--border)!important}
/* Profile cards */
[class*="theme-"] .side-card{background:var(--panel)!important;border-color:var(--border)!important}
/* Theme body background glow follows accent */
[class*="theme-"]{
  background-image:
    radial-gradient(900px 500px at 18% -8%, var(--accent-glow), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, var(--accent-glow), transparent 55%)!important;
}
[class*="theme-"]::before{
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px)!important;
}

/* Dragon's Breath — dark lava rock, fire effects, ember glow */
body.theme-dragons-breath{
  --bg:#0d0400;--bg-2:#1a0800;--panel:rgba(26,8,0,.8);--panel-2:rgba(20,5,0,.9);--panel-solid:#140500;
  --rail:rgba(18,5,0,.92);
  --border:rgba(239,68,68,.15);--border-2:rgba(239,68,68,.08);
  --accent:#ef4444;--accent-2:#dc2626;--accent-glow:rgba(239,68,68,.18);
  --text:#fde8e0;--muted:#a0756b;--muted-2:#6b4940;
  --ui:'Cinzel',Outfit,serif;
}
body.theme-dragons-breath .guest-card,body.theme-dragons-breath .gmodal,body.theme-dragons-breath .qm-grp{
  border-radius:6px!important;
  box-shadow:inset 0 1px 0 rgba(239,68,68,.12),inset 0 -1px 0 rgba(245,158,11,.06),0 4px 20px rgba(0,0,0,.5)!important;
  border:1px solid rgba(239,68,68,.18)!important;
  background:linear-gradient(175deg,rgba(26,8,0,.85),rgba(13,4,0,.95))!important;
  border-top:2px solid rgba(239,68,68,.2)!important;
}
body.theme-dragons-breath button.gc-btn,body.theme-dragons-breath .gm-primary{
  background:linear-gradient(135deg,#b91c1c,#dc2626)!important;text-shadow:0 1px 4px rgba(0,0,0,.4);border-radius:6px!important;
}
body.theme-dragons-breath .gm-ghost{border-color:rgba(239,68,68,.3)!important;color:#fca5a5!important}
/* Dragon's Breath messaging */
body.theme-dragons-breath .dm.me .dm-bub{border-radius:14px 14px 4px 14px!important;box-shadow:0 2px 14px rgba(239,68,68,.2),inset 0 1px 0 rgba(255,255,255,.06)!important}
body.theme-dragons-breath .dm.them .dm-bub{border-radius:14px 14px 14px 4px!important;background:rgba(26,8,0,.7)!important;border:1px solid rgba(239,68,68,.12)!important}
body.theme-dragons-breath .transcript{background:linear-gradient(180deg,#0d0400,#0a0300)!important}
body.theme-dragons-breath .bv-compose{background:rgba(20,5,0,.8)!important;border-top:1px solid rgba(239,68,68,.12)!important}
/* Custom arrow cursor for Dragon's Breath */
body.theme-dragons-breath,body.theme-dragons-breath *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 2L4 20L9 15L14 22L17 20L12 13L19 13Z' fill='%23ef4444' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 4 2,auto;
}
body.theme-dragons-breath a,body.theme-dragons-breath button,body.theme-dragons-breath [onclick],body.theme-dragons-breath select,body.theme-dragons-breath label[style*="cursor"]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M11 1C10 1 9 2 9 3L9 11.5L7 9.5C6 8.5 4.5 8.5 3.5 9.5C2.5 10.5 2.8 12 3.5 12.8L9 19C10 20.2 11.5 21 13.2 21L16 21C18.5 21 20.5 19 20.5 16.5L20.5 11C20.5 10 19.5 9 18.5 9C18 9 17.5 9.3 17.5 9.5L17.5 9C17.5 8 16.5 7 15.5 7C15 7 14.5 7.3 14.3 7.6C14 6.8 13.2 6 12.2 6C11.8 6 11.5 6.2 11.2 6.4L11 3C11 2 10 1 11 1Z' fill='%23f59e0b' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 10 1,pointer!important;
}

/* Arctic Frost — ice blue glow, crystalline borders */
body.theme-arctic-frost{
  --bg:#030810;--bg-2:#050d1a;--panel:rgba(5,13,26,.85);--panel-2:rgba(3,8,16,.92);--panel-solid:#040a14;
  --rail:rgba(4,10,20,.92);
  --border:rgba(56,189,241,.12);--border-2:rgba(56,189,241,.06);
  --accent:#38bdf8;--accent-2:#0ea5e9;--accent-glow:rgba(56,189,241,.15);
  --text:#e0f2fe;--muted:#7ba5c4;--muted-2:#4a7a9c;
}
/* Arctic Frost messaging */
body.theme-arctic-frost .dm.me .dm-bub{border-radius:20px 20px 4px 20px!important;box-shadow:0 2px 16px rgba(56,189,241,.15)!important}
body.theme-arctic-frost .dm.them .dm-bub{border-radius:20px 20px 20px 4px!important;background:rgba(5,13,26,.8)!important;border:1px solid rgba(56,189,241,.1)!important;backdrop-filter:blur(6px)!important}
body.theme-arctic-frost .transcript{background:linear-gradient(180deg,#030810,#040a14)!important}
body.theme-arctic-frost .bv-compose{background:rgba(4,10,20,.85)!important;border-top:1px solid rgba(56,189,241,.1)!important}
body.theme-arctic-frost .guest-card,body.theme-arctic-frost .gmodal,body.theme-arctic-frost .qm-grp{
  border-radius:16px!important;
  box-shadow:0 0 24px rgba(56,189,241,.06),inset 0 1px 0 rgba(255,255,255,.08),0 4px 16px rgba(0,0,0,.3)!important;
  border:1px solid rgba(56,189,241,.15)!important;backdrop-filter:blur(12px)!important;
  background:linear-gradient(175deg,rgba(10,20,40,.75),rgba(5,13,26,.9))!important;
}
body.theme-arctic-frost button.gc-btn,body.theme-arctic-frost .gm-primary{
  background:linear-gradient(135deg,#0284c7,#0ea5e9)!important;border-radius:14px!important;
}
body.theme-arctic-frost .gm-ghost{border-color:rgba(56,189,241,.25)!important;color:#7dd3fc!important}
body.theme-arctic-frost,body.theme-arctic-frost *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 2L4 20L9 15L14 22L17 20L12 13L19 13Z' fill='%2338bdf8' stroke='%23082040' stroke-width='1'/%3E%3C/svg%3E") 4 2,auto;
}
body.theme-arctic-frost a,body.theme-arctic-frost button,body.theme-arctic-frost [onclick],body.theme-arctic-frost select{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M11 1C10 1 9 2 9 3L9 11.5L7 9.5C6 8.5 4.5 8.5 3.5 9.5C2.5 10.5 2.8 12 3.5 12.8L9 19C10 20.2 11.5 21 13.2 21L16 21C18.5 21 20.5 19 20.5 16.5L20.5 11C20.5 10 19.5 9 18.5 9C18 9 17.5 9.3 17.5 9.5L17.5 9C17.5 8 16.5 7 15.5 7C15 7 14.5 7.3 14.3 7.6C14 6.8 13.2 6 12.2 6C11.8 6 11.5 6.2 11.2 6.4L11 3C11 2 10 1 11 1Z' fill='%230ea5e9' stroke='%23082040' stroke-width='1'/%3E%3C/svg%3E") 10 1,pointer!important;
}

/* Neon Pulse — electric purple, cyberpunk */
body.theme-neon-pulse{
  --bg:#05001a;--bg-2:#0a0025;--panel:rgba(10,0,37,.85);--panel-2:rgba(5,0,20,.92);--panel-solid:#08001a;
  --rail:rgba(8,0,26,.92);
  --border:rgba(168,85,247,.18);--border-2:rgba(168,85,247,.08);
  --accent:#a855f7;--accent-2:#9333ea;--accent-glow:rgba(168,85,247,.2);
  --text:#f3e8ff;--muted:#9b7fc4;--muted-2:#6b4fa0;
  --ui:'Orbitron',Outfit,sans-serif;
}
/* Neon Pulse messaging */
body.theme-neon-pulse .dm.me .dm-bub{border-radius:4px 4px 4px 4px!important;box-shadow:0 0 14px rgba(168,85,247,.25),inset 0 0 1px rgba(168,85,247,.4)!important;text-transform:none!important}
body.theme-neon-pulse .dm.them .dm-bub{border-radius:4px!important;background:rgba(10,0,37,.8)!important;border:1px solid rgba(168,85,247,.15)!important;box-shadow:inset 0 0 1px rgba(168,85,247,.2)!important}
body.theme-neon-pulse .transcript{background:linear-gradient(180deg,#05001a,#08001a)!important}
body.theme-neon-pulse .bv-compose{background:rgba(8,0,26,.85)!important;border-top:1px solid rgba(168,85,247,.15)!important}
body.theme-neon-pulse .ch-tab.active{box-shadow:0 0 10px rgba(168,85,247,.2)!important}
body.theme-neon-pulse .guest-card,body.theme-neon-pulse .gmodal,body.theme-neon-pulse .qm-grp{
  border-radius:3px!important;
  box-shadow:0 0 20px rgba(168,85,247,.08),inset 0 0 1px rgba(168,85,247,.4),0 0 1px rgba(168,85,247,.5)!important;
  border:1px solid rgba(168,85,247,.25)!important;
  background:linear-gradient(175deg,rgba(15,0,45,.85),rgba(5,0,20,.95))!important;
  border-left:2px solid rgba(168,85,247,.35)!important;
}
body.theme-neon-pulse button.gc-btn,body.theme-neon-pulse .gm-primary{
  background:linear-gradient(135deg,#7c3aed,#a855f7)!important;box-shadow:0 0 14px rgba(168,85,247,.35)!important;
  border-radius:4px!important;text-transform:uppercase!important;letter-spacing:.5px!important;
}
body.theme-neon-pulse .gm-ghost{border-color:rgba(168,85,247,.35)!important;color:#c4b5fd!important;text-transform:uppercase!important}
body.theme-neon-pulse,body.theme-neon-pulse *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 2L4 20L9 15L14 22L17 20L12 13L19 13Z' fill='%23a855f7' stroke='%23200040' stroke-width='1'/%3E%3C/svg%3E") 4 2,auto;
}
body.theme-neon-pulse a,body.theme-neon-pulse button,body.theme-neon-pulse [onclick],body.theme-neon-pulse select{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M11 1C10 1 9 2 9 3L9 11.5L7 9.5C6 8.5 4.5 8.5 3.5 9.5C2.5 10.5 2.8 12 3.5 12.8L9 19C10 20.2 11.5 21 13.2 21L16 21C18.5 21 20.5 19 20.5 16.5L20.5 11C20.5 10 19.5 9 18.5 9C18 9 17.5 9.3 17.5 9.5L17.5 9C17.5 8 16.5 7 15.5 7C15 7 14.5 7.3 14.3 7.6C14 6.8 13.2 6 12.2 6C11.8 6 11.5 6.2 11.2 6.4L11 3C11 2 10 1 11 1Z' fill='%23c084fc' stroke='%23200040' stroke-width='1'/%3E%3C/svg%3E") 10 1,pointer!important;
}

/* Solar Flare — warm gold, sun corona */
body.theme-solar-flare{
  --bg:#0d0800;--bg-2:#1a1000;--panel:rgba(26,16,0,.82);--panel-2:rgba(20,10,0,.9);--panel-solid:#140a00;
  --rail:rgba(20,10,0,.92);
  --border:rgba(245,158,11,.15);--border-2:rgba(245,158,11,.06);
  --accent:#f59e0b;--accent-2:#d97706;--accent-glow:rgba(245,158,11,.18);
  --text:#fef3c7;--muted:#b88a40;--muted-2:#7a5c2a;
}
/* Solar Flare messaging */
body.theme-solar-flare .dm.me .dm-bub{border-radius:16px 16px 4px 16px!important;box-shadow:0 2px 12px rgba(245,158,11,.15)!important}
body.theme-solar-flare .dm.them .dm-bub{border-radius:16px 16px 16px 4px!important;background:rgba(26,16,0,.75)!important;border:1px solid rgba(245,158,11,.1)!important}
body.theme-solar-flare .transcript{background:linear-gradient(180deg,#0d0800,#0a0600)!important}
body.theme-solar-flare .bv-compose{background:rgba(20,10,0,.8)!important;border-top:1px solid rgba(245,158,11,.1)!important}
body.theme-solar-flare .guest-card,body.theme-solar-flare .gmodal{
  border-radius:14px!important;box-shadow:0 0 16px rgba(245,158,11,.06),0 4px 16px rgba(0,0,0,.3)!important;
  border:1px solid rgba(245,158,11,.15)!important;
}
body.theme-solar-flare button.gc-btn,body.theme-solar-flare .gm-primary{
  background:linear-gradient(135deg,#b45309,#d97706)!important;border-radius:12px!important;
}
body.theme-solar-flare .gm-ghost{border-color:rgba(245,158,11,.25)!important;color:#fcd34d!important}
body.theme-solar-flare,body.theme-solar-flare *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 2L4 20L9 15L14 22L17 20L12 13L19 13Z' fill='%23f59e0b' stroke='%23402000' stroke-width='1'/%3E%3C/svg%3E") 4 2,auto;
}
body.theme-solar-flare a,body.theme-solar-flare button,body.theme-solar-flare [onclick],body.theme-solar-flare select{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M11 1C10 1 9 2 9 3L9 11.5L7 9.5C6 8.5 4.5 8.5 3.5 9.5C2.5 10.5 2.8 12 3.5 12.8L9 19C10 20.2 11.5 21 13.2 21L16 21C18.5 21 20.5 19 20.5 16.5L20.5 11C20.5 10 19.5 9 18.5 9C18 9 17.5 9.3 17.5 9.5L17.5 9C17.5 8 16.5 7 15.5 7C15 7 14.5 7.3 14.3 7.6C14 6.8 13.2 6 12.2 6C11.8 6 11.5 6.2 11.2 6.4L11 3C11 2 10 1 11 1Z' fill='%23fbbf24' stroke='%23402000' stroke-width='1'/%3E%3C/svg%3E") 10 1,pointer!important;
}

/* Void Walker — pure black, monochrome, stark */
body.theme-void-walker{
  --bg:#000;--bg-2:#050505;--panel:rgba(5,5,5,.9);--panel-2:rgba(0,0,0,.95);--panel-solid:#030303;
  --rail:rgba(0,0,0,.95);
  --border:rgba(255,255,255,.06);--border-2:rgba(255,255,255,.03);
  --accent:#e2e8f0;--accent-2:#cbd5e1;--accent-glow:rgba(226,232,240,.08);
  --text:#f1f5f9;--muted:#64748b;--muted-2:#475569;
}
/* Void Walker messaging */
body.theme-void-walker .dm.me .dm-bub{border-radius:2px!important;background:rgba(255,255,255,.08)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.1)!important}
body.theme-void-walker .dm.them .dm-bub{border-radius:2px!important;background:rgba(5,5,5,.9)!important;border:1px solid rgba(255,255,255,.06)!important}
body.theme-void-walker .transcript{background:#000!important}
body.theme-void-walker .bv-compose{background:rgba(0,0,0,.95)!important;border-top:1px solid rgba(255,255,255,.06)!important}
body.theme-void-walker .guest-card,body.theme-void-walker .gmodal{
  border-radius:2px!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important;
}
body.theme-void-walker button.gc-btn,body.theme-void-walker .gm-primary{
  background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;color:#f1f5f9!important;border-radius:2px!important;
}
body.theme-void-walker .gm-ghost{border-color:rgba(255,255,255,.1)!important;color:#94a3b8!important}

/* Emerald Grove — forest green, organic, warm */
body.theme-emerald-grove{
  --bg:#001a0a;--bg-2:#002d12;--panel:rgba(0,26,10,.85);--panel-2:rgba(0,20,8,.92);--panel-solid:#001408;
  --rail:rgba(0,20,8,.92);
  --border:rgba(34,197,94,.12);--border-2:rgba(34,197,94,.06);
  --accent:#22c55e;--accent-2:#16a34a;--accent-glow:rgba(34,197,94,.15);
  --text:#dcfce7;--muted:#5da06b;--muted-2:#3d7a4c;
}
/* Emerald Grove messaging */
body.theme-emerald-grove .dm.me .dm-bub{border-radius:22px 22px 4px 22px!important;box-shadow:0 2px 12px rgba(34,197,94,.12)!important}
body.theme-emerald-grove .dm.them .dm-bub{border-radius:22px 22px 22px 4px!important;background:rgba(0,26,10,.75)!important;border:1px solid rgba(34,197,94,.1)!important}
body.theme-emerald-grove .transcript{background:linear-gradient(180deg,#001a0a,#001408)!important}
body.theme-emerald-grove .bv-compose{background:rgba(0,20,8,.85)!important;border-top:1px solid rgba(34,197,94,.1)!important}
body.theme-emerald-grove .guest-card,body.theme-emerald-grove .gmodal{
  border-radius:18px!important;box-shadow:0 0 16px rgba(34,197,94,.05),0 4px 16px rgba(0,0,0,.3)!important;
  border:1px solid rgba(34,197,94,.12)!important;
}
body.theme-emerald-grove button.gc-btn,body.theme-emerald-grove .gm-primary{
  background:linear-gradient(135deg,#15803d,#22c55e)!important;border-radius:20px!important;
}
body.theme-emerald-grove .gm-ghost{border-color:rgba(34,197,94,.25)!important;color:#86efac!important;border-radius:20px!important}
body.theme-emerald-grove,body.theme-emerald-grove *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 2L4 20L9 15L14 22L17 20L12 13L19 13Z' fill='%2322c55e' stroke='%23003010' stroke-width='1'/%3E%3C/svg%3E") 4 2,auto;
}
body.theme-emerald-grove a,body.theme-emerald-grove button,body.theme-emerald-grove [onclick],body.theme-emerald-grove select{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M11 1C10 1 9 2 9 3L9 11.5L7 9.5C6 8.5 4.5 8.5 3.5 9.5C2.5 10.5 2.8 12 3.5 12.8L9 19C10 20.2 11.5 21 13.2 21L16 21C18.5 21 20.5 19 20.5 16.5L20.5 11C20.5 10 19.5 9 18.5 9C18 9 17.5 9.3 17.5 9.5L17.5 9C17.5 8 16.5 7 15.5 7C15 7 14.5 7.3 14.3 7.6C14 6.8 13.2 6 12.2 6C11.8 6 11.5 6.2 11.2 6.4L11 3C11 2 10 1 11 1Z' fill='%234ade80' stroke='%23003010' stroke-width='1'/%3E%3C/svg%3E") 10 1,pointer!important;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}/* dvh: track the DYNAMIC mobile viewport so the bottom tab bar sits flush — kills the black gap below the nav when the browser toolbar retracts (v9.10.222). 100vh kept as fallback for browsers w/o dvh; on desktop dvh==vh so no change. overscroll-behavior:none prevents WebView pull-to-refresh from hijacking scroll-up in the feed (v9.10.338). */
body{
  background:var(--bg);color:var(--text);
  font-family:var(--ui),Inter,sans-serif;font-size:13px;
  display:flex;flex-direction:column;
  background-image:
    radial-gradient(900px 500px at 18% -8%, var(--accent-glow), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(124,58,237,0.06), transparent 55%);
}
/* subtle lattice grid overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.09);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(34,217,230,0.35)}

.lbl{font-family:var(--ui);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--muted)}
.mono{font-family:var(--mono)}

/* ── TOP BAR ─────────────────────────────────────────── */
.topbar{
  position:relative;z-index:5;flex-shrink:0;height:54px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:var(--panel-2);
  border-bottom:1px solid var(--border);backdrop-filter:blur(20px);
}
.tb-left{display:flex;align-items:center;gap:16px;min-width:0}
.brand{display:flex;align-items:center;gap:11px}
.brand .logo{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(140deg,var(--accent),#0070a8);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px var(--accent-glow);
}
.brand .logo svg{width:18px;height:18px}
.brand .titles{display:flex;flex-direction:column;line-height:1.15}
.brand .os{font-family:var(--ui);font-weight:800;font-size:14px;letter-spacing:1.5px;
  background:linear-gradient(100deg,#fff,#86d8e0);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brand .sub{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.tb-divider{width:1px;height:26px;background:var(--border)}
.view-title{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--text);letter-spacing:0.5px}
.view-title span{color:var(--muted);font-weight:400}

.tb-right{display:flex;align-items:center;gap:10px}
.tb-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.tb-clock .tbc-time{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent);letter-spacing:0.5px;font-variant-numeric:tabular-nums}
.tb-clock .tbc-date{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.metric{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;
  padding:5px 14px;border-left:1px solid var(--border-2);min-width:78px;
}
.metric .mv{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--accent)}
.metric .ml{font-size:8px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-top:1px}
.metric.warn .mv{color:var(--warn)}
.live{
  display:flex;align-items:center;gap:7px;padding:6px 13px;margin-left:6px;
  border:1px solid rgba(74,222,128,0.3);border-radius:20px;background:rgba(74,222,128,0.06);
}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--good);
  box-shadow:0 0 8px var(--good);animation:pulse 1.8s infinite}
.live.down{border-color:rgba(248,113,113,0.3);background:rgba(248,113,113,0.06)}
.live.down .dot{background:var(--bad);box-shadow:0 0 8px var(--bad);animation:none}
.live .txt{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--good)}
.live.down .txt{color:var(--bad)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.55;transform:scale(0.82)}}
@keyframes wave{0%{transform:scaleY(0.4);opacity:0.5}100%{transform:scaleY(1.2);opacity:1}}
@keyframes vitPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0.0)}50%{box-shadow:0 0 10px 0 rgba(74,222,128,0.35)}}

/* ── SHELL ───────────────────────────────────────────── */
.shell{position:relative;z-index:1;flex:1;display:flex;overflow:hidden}

/* 2026-07-17 v9.10.333: Web + Antigravity fill the center; no wasted black half */
body[data-view="radio"] #col-left,
body[data-view="webview"] #col-left,
body[data-view="antigravity"] #col-left{display:none !important;width:0 !important;min-width:0 !important}
/* v9.10.468 — primary full-width views: fill .col-center, never collapse to 0 height */
body[data-view="webview"] #view-webview,
body[data-view="antigravity"] #view-antigravity,
body[data-view="transcripts"] #view-transcripts,
body[data-view="learning"] #view-learning,
body[data-view="home"] #view-home,
body[data-view="radio"] #view-radio{
  flex:1 1 auto !important; min-height:0 !important; width:100% !important; max-width:none !important;
}
body[data-view="webview"] .col-center,
body[data-view="antigravity"] .col-center,
body[data-view="transcripts"] .col-center,
body[data-view="learning"] .col-center,
body[data-view="radio"] .col-center{
  display:flex !important; flex-direction:column !important; min-height:0 !important;
}
/* v9.10.472 — CHATS LIST PINNED TO THE RIGHT HALF (regression fix).
   FACT (verified in-browser via DOMParser on the served HTML, not by reading):
   `.col-center` closes early in the markup, so only #view-home / #view-profile /
   #view-topology / #view-nervous are its children. #view-transcripts, #view-learning,
   #view-webview, #view-radio, #view-portfolio and #view-antigravity are SIBLINGS of
   .col-center inside `.shell` — and `.shell` is `display:flex;flex-direction:row`.
   So whenever one of those views is active, the now-EMPTY .col-center is still a flex
   item with `flex:1` (:546) — on mobile `flex:1 1 auto!important;width:100%!important`
   (oracle-kv-mobile.css:524) — and it claims an equal track. Measured at 356px:
   .col-center 178px (empty black LEFT half) + #view-transcripts 178px at x=178, which
   squeezed .msgpane-list to 124px and wrapped every row. Exactly the owner's report.
   v9.10.459 REMOVED the old `body[data-view=...] .col-center{display:none}` rule on the
   stated belief that "views are children of col-center, not siblings" — that belief is
   wrong for these six panes, and v9.10.468 above then force-set display:flex on it.
   FIX: collapse the empty column's flex TRACK (not display, so nothing is removed from
   the tree and the Workspace blank-screen failure mode of v9.10.459 cannot recur).
   #view-antigravity is deliberately EXCLUDED — immersive Workspace already takes
   .col-center out of flow (fixed positioning, below) and that pane has a blank-screen
   history; owner to confirm before it is added. No @media gate, so no force-mobile
   mirror is needed and desktop is fixed by the same rule. Longhands only; adds no
   scroll-container and no positioning declarations. Reversible: delete this block. */
body[data-view="transcripts"] .col-center,
body[data-view="learning"] .col-center,
body[data-view="webview"] .col-center,
body[data-view="radio"] .col-center,
body[data-view="portfolio"] .col-center{
  flex-grow:0 !important; flex-shrink:0 !important; flex-basis:0 !important;
  width:0 !important; min-width:0 !important; max-width:0 !important;
  padding-left:0 !important; padding-right:0 !important;
  border-left-width:0 !important; border-right-width:0 !important;
}
/* ── Workspace immersive computer (v9.10.459) ──
   Hide social chrome; OS fills the viewport. Exit only via Start → Log off.
   IMPORTANT: #view-antigravity lives INSIDE .col-center (not as a sibling).
   Never display:none .col-center while Workspace is active — that blanked the
   whole computer (boot/login/desktop) and made immersive look like a no-op. */
body.os-workspace-immersive .topbar,
body.os-workspace-immersive .rail,
body.os-workspace-immersive .m-tabbar,
body.os-workspace-immersive .m-appbar,
body.os-workspace-immersive #col-left,
body.os-workspace-immersive #col-right,
body.os-workspace-immersive .tab-strip,
body.os-workspace-immersive #gshort-fab,
body.os-workspace-immersive .cmd-bar,
body.os-workspace-immersive #cmd-bar{display:none !important}
body.os-workspace-immersive .shell{position:fixed !important;inset:0 !important;padding:0 !important;margin:0 !important;max-width:none !important;height:100% !important;z-index:40;display:flex !important}
body.os-workspace-immersive .col-center{position:fixed !important;inset:0 !important;padding:0 !important;margin:0 !important;height:100% !important;max-height:none !important;width:100% !important;max-width:none !important;z-index:41;display:flex !important;flex-direction:column !important;overflow:hidden !important}
body.os-workspace-immersive #view-antigravity{position:fixed !important;inset:0 !important;display:flex !important;z-index:42;width:100% !important;height:100% !important;max-height:none !important;background:#0a0f1a;flex:1 !important}
body.os-workspace-immersive #os-desktop{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;display:flex !important;flex-direction:column !important}
/* Taskbar always usable in immersive (Log off / Start) — even on mobile */
body.os-workspace-immersive #os-taskbar{display:flex !important;z-index:40 !important;pointer-events:auto !important}
body.os-workspace-immersive #os-startmenu{z-index:45 !important}
body.os-workspace-immersive #os-logoff-tray{display:flex !important}
/* v9.10.459 — REMOVED the old "hide .col-center for sibling views" rule.
   Those panes are children of .col-center in the real DOM; hiding the parent
   made Web / Workspace / Dreams / Messages / Config paint a blank center. */}
/* 2026-07-18: collapsible Web Oracle Reader panel (wider browser) */
#view-webview.reader-collapsed #wv-ask{display:none !important}
#view-webview.reader-collapsed #wv-reader-btn{background:rgba(99,102,241,0.28) !important;color:#fff !important}
#view-webview{width:100% !important;max-width:none !important}
#view-webview > div:last-child{width:100% !important}
/* v9.10.450 — ENTITLEMENT-DRIVEN, not plan-name-driven. `ag-ok` is set from
   me.antigravityWorkspace (computed server-side by canAccessFeature), so Antigravity
   stays visible even when me.plan and me.planCard.id disagree — which was making a
   paid Team account fall through to the guest hide rule and disappear after sign-in.
   Listed FIRST so the plan-name rules below remain a harmless fallback. */
body.scope-guest.ag-ok .rail .rail-btn[data-view="antigravity"],
body.scope-guest.ag-ok .m-tabbar .m-tab[data-view="antigravity"]{display:flex !important}
/* Builder+ guests: show Antigravity (default guest CSS hides it) */
body.scope-guest.plan-builder .rail .rail-btn[data-view="antigravity"],
body.scope-guest.plan-team .rail .rail-btn[data-view="antigravity"],
body.scope-guest.plan-enterprise .rail .rail-btn[data-view="antigravity"],
body.scope-guest.plan-builder .m-tabbar .m-tab[data-view="antigravity"],
body.scope-guest.plan-team .m-tabbar .m-tab[data-view="antigravity"],
body.scope-guest.plan-enterprise .m-tabbar .m-tab[data-view="antigravity"]{display:flex !important}

/* ── ORACLE OS DESKTOP (v9.10.465 boot) ───────────────────── */
/* Boot MUST paint above everything (fixed + huge z). Absolute-inside-desktop
   was invisible when the pane hadn't laid out yet → looked "already loaded". */
#os-boot-overlay{position:fixed !important;inset:0 !important;z-index:200000 !important;display:none;flex-direction:column;background:#000;color:#00ff41;font:13px 'JetBrains Mono',monospace;overflow:hidden;pointer-events:auto}
#os-boot-overlay.os-boot-active{display:flex !important;visibility:visible !important;opacity:1 !important}
#os-boot-bios{padding:16px 20px;flex:1;overflow:hidden;position:relative}
#os-boot-bios .bios-line{opacity:0;animation:biosIn .12s forwards;white-space:pre-wrap}
#os-boot-bios .bios-ok{color:#34d399}
#os-boot-bios .bios-warn{color:#fbbf24}
#os-boot-bios .bios-hdr{color:#67e8f9;font-weight:700}
#os-boot-bios .bios-dim{color:#166534}
@keyframes biosIn{to{opacity:1}}
#os-boot-bios .bios-mark{position:absolute;right:18px;top:14px;width:56px;height:56px;opacity:.35;pointer-events:none}
#os-boot-bios .bios-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,255,65,.35))}
#os-boot-splash{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#141e35 0%,#0a0f1a 50%,#040710 100%);color:#e2e8f0}
#os-boot-splash::before{content:'';position:absolute;inset:0;background:radial-gradient(600px at 50% 45%,rgba(99,102,241,.08),transparent 60%);pointer-events:none;animation:bootGlow 3s ease-in-out infinite alternate}
@keyframes bootGlow{from{opacity:.5}to{opacity:1}}
#os-boot-splash.active{display:flex}
#os-boot-splash .boot-mark{position:relative;width:110px;height:110px;margin-bottom:22px}
#os-boot-splash .boot-mark img{width:68px;height:68px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:bootPulse 1.6s ease-in-out infinite;z-index:1;filter:drop-shadow(0 0 16px rgba(99,102,241,.4))}
#os-boot-splash .boot-mark-ring{position:absolute;inset:0;border:2px solid rgba(99,102,241,.15);border-top-color:#6366f1;border-right-color:rgba(139,92,246,.5);border-radius:50%;animation:bootSpin .9s linear infinite}
#os-boot-splash .boot-mark::after{content:'';position:absolute;inset:-4px;border:1px solid rgba(34,211,230,.08);border-top-color:rgba(34,211,230,.3);border-radius:50%;animation:bootSpin 2.2s linear infinite reverse}
#os-boot-splash .boot-title{font:800 26px Outfit,Inter,sans-serif;letter-spacing:.25em;color:#f1f5f9;text-shadow:0 0 30px rgba(99,102,241,.3)}
#os-boot-splash .boot-sub{font:12px Inter,sans-serif;color:#64748b;margin-top:6px;letter-spacing:.12em;text-transform:uppercase}
#os-boot-splash .boot-progress-wrap{width:min(320px,75vw);height:3px;border-radius:3px;background:rgba(148,163,184,.1);margin-top:32px;overflow:hidden;position:relative}
#os-boot-splash .boot-progress-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:bootShimmer 2s infinite}
@keyframes bootShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
#os-boot-splash .boot-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#6366f1,#8b5cf6,#a855f7);border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(99,102,241,.4)}
#os-boot-splash .boot-status{font:11px JetBrains Mono,monospace;color:#94a3b8;margin-top:14px;min-height:16px;letter-spacing:.03em}
#os-boot-splash .boot-checks{margin-top:18px;width:min(320px,80vw);font:10.5px JetBrains Mono,monospace;color:#64748b;line-height:1.6}
#os-boot-splash .boot-checks .ck-ok{color:#34d399}
#os-boot-splash .boot-checks .ck-wait{color:#64748b}
#os-boot-splash .boot-checks .ck-fail{color:#fbbf24}
@keyframes bootPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.95}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
@keyframes bootSpin{to{transform:rotate(360deg)}}
/* Login screen */
#os-login-screen{position:fixed !important;inset:0 !important;z-index:200001 !important;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#060a14 0%,#0c1424 30%,#151030 60%,#0a0e1c 100%);background-size:cover;background-position:center}
#os-login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(800px at 50% 40%,rgba(99,102,241,.1),transparent 55%),radial-gradient(600px at 75% 25%,rgba(34,211,230,.06),transparent 45%),radial-gradient(500px at 25% 75%,rgba(139,92,246,.07),transparent 45%);pointer-events:none;animation:loginGlow 6s ease-in-out infinite alternate}
@keyframes loginGlow{from{opacity:.7}to{opacity:1}}
#os-login-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.008) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.008) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%);pointer-events:none;opacity:.5}
#os-login-screen.active{display:flex !important;visibility:visible !important;opacity:1 !important}
#os-login-screen .login-avatar{width:96px;height:96px;border-radius:50%;border:3px solid rgba(99,102,241,.35);object-fit:cover;margin-bottom:16px;background:#1e293b;box-shadow:0 0 40px rgba(99,102,241,.2),0 12px 40px rgba(0,0,0,.5)}
#os-login-screen .login-name{font:600 22px Outfit,Inter,sans-serif;color:#e2e8f0;margin-bottom:6px;letter-spacing:.02em}
#os-login-screen .login-time{font:200 64px Outfit,Inter,sans-serif;color:#f1f5f9;margin-bottom:2px;letter-spacing:-.02em;text-shadow:0 0 40px rgba(99,102,241,.15)}
#os-login-screen .login-date{font:400 15px Outfit,Inter,sans-serif;color:#7b8aa0;margin-bottom:36px;letter-spacing:.06em}
#os-login-screen .login-btn{padding:14px 44px;border-radius:14px;border:1px solid rgba(99,102,241,.4);background:rgba(99,102,241,.12);color:#c7d2fe;font:600 15px Outfit,Inter,sans-serif;cursor:pointer;transition:all .25s;backdrop-filter:blur(8px);letter-spacing:.04em}
#os-login-screen .login-btn:hover{background:rgba(99,102,241,.25);border-color:#6366f1;box-shadow:0 0 24px rgba(99,102,241,.3);transform:translateY(-1px)}
#os-login-screen .login-btn:active{transform:translateY(0);box-shadow:none}
#os-login-screen .login-tray{position:absolute;bottom:24px;right:24px;display:flex;align-items:center;gap:14px;color:#7b8aa0;font:11px Outfit,Inter,sans-serif}
#os-login-screen .login-bars{display:flex;align-items:flex-end;gap:2px;height:14px}
#os-login-screen .login-bars span{width:3px;background:#6366f1;border-radius:1px}
/* Services bars (tray) */
.os-svc-bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:12px}
.os-svc-bars span{width:2.5px;background:#6366f1;border-radius:1px}
#os-tray-date{font:10px Inter,sans-serif;color:#94a3b8;line-height:1.1}
/* Update banner */
@keyframes osUpdateSlide{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
/* Browser loading bar */
@keyframes osBrowserLoad{0%{left:-30%;width:30%}50%{left:30%;width:40%}100%{left:100%;width:30%}}
#os-browser-loadbar{position:absolute;top:0;left:0;right:0;height:2px;z-index:2;overflow:hidden;display:none}
#os-browser-loadbar.active{display:block}
#os-browser-loadbar::after{content:'';position:absolute;top:0;height:100%;background:linear-gradient(90deg,transparent,#6366f1,#8b5cf6,transparent);animation:osBrowserLoad 1.2s ease-in-out infinite}
/* File Manager */
.os-fm-loc:hover{background:rgba(99,102,241,.08)!important}
.os-fm-loc-active{background:rgba(99,102,241,.12)!important;color:#e2e8f0!important}
.os-fm-row{display:flex;align-items:center;padding:4px 12px;cursor:pointer;font:12px Inter,sans-serif;color:#cbd5e1;border-bottom:1px solid rgba(148,163,184,.04);user-select:none}
.os-fm-row:hover{background:rgba(99,102,241,.08)}
.os-fm-row.os-fm-selected{background:rgba(99,102,241,.18)}
.os-fm-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FM context menu */
#os-fm-ctx{position:fixed;z-index:40;background:rgba(15,23,42,.97);border:1px solid rgba(148,163,184,.2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.6);padding:4px;min-width:180px;font:12px Inter,sans-serif;display:none}
#os-fm-ctx.os-open{display:block}
#os-fm-ctx .os-ctx-item{padding:7px 12px;border-radius:4px;color:#e2e8f0;cursor:pointer;display:flex;align-items:center;gap:8px}
#os-fm-ctx .os-ctx-item:hover{background:rgba(99,102,241,.12)}
#os-fm-ctx .os-ctx-sep{height:1px;background:rgba(148,163,184,.12);margin:3px 8px}
#os-fm-ctx .os-ctx-sub{color:#64748b;font-size:10px;padding:4px 12px;text-transform:uppercase;letter-spacing:.3px}
/* Windows-style File Manager transfer / delete progress (v9.10.471) */
/* File Manager — Windows Explorer chrome */
.os-fm-tabs{display:flex;align-items:center;gap:2px;padding:4px 6px 0;background:rgba(9,14,24,.65);border-bottom:1px solid rgba(148,163,184,.12);min-height:34px;overflow-x:auto;flex-shrink:0}
.os-fm-tab{display:flex;align-items:center;gap:6px;padding:6px 10px;max-width:180px;border-radius:8px 8px 0 0;background:rgba(255,255,255,.03);color:#94a3b8;font:12px Inter,sans-serif;cursor:pointer;border:1px solid transparent;border-bottom:none}
.os-fm-tab:hover{background:rgba(99,102,241,.1);color:#e2e8f0}
.os-fm-tab-active{background:rgba(30,41,59,.9);color:#f1f5f9;border-color:rgba(148,163,184,.15)}
.os-fm-tab-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.os-fm-tab-x{border:none;background:transparent;color:#64748b;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;border-radius:4px}
.os-fm-tab-x:hover{background:rgba(248,113,113,.2);color:#fca5a5}
.os-fm-tab-new{width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:#94a3b8;cursor:pointer;font-size:16px;flex-shrink:0}
.os-fm-tab-new:hover{background:rgba(99,102,241,.15);color:#e2e8f0}
.os-fm-nav{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid rgba(148,163,184,.1);background:rgba(15,23,42,.45);flex-shrink:0}
.os-fm-navbtn{width:28px;height:28px;border-radius:6px;border:1px solid rgba(148,163,184,.12);background:transparent;color:#94a3b8;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.os-fm-navbtn:hover:not(:disabled){background:rgba(99,102,241,.12);color:#e2e8f0}
.os-fm-navbtn:disabled{opacity:.35;cursor:default}
.os-fm-addr{flex:1;display:flex;align-items:center;gap:2px;height:28px;border-radius:6px;border:1px solid rgba(148,163,184,.15);background:rgba(255,255,255,.04);padding:0 10px;font:12px Inter,sans-serif;color:#e2e8f0;overflow:hidden;white-space:nowrap;min-width:0}
.os-fm-addr-drive{color:#64748b;cursor:pointer}
.os-fm-addr-drive:hover{color:#a5b4fc}
.os-fm-addr-sep{color:#475569;margin:0 4px}
.os-fm-search{width:160px;height:28px;border-radius:6px;border:1px solid rgba(148,163,184,.15);background:rgba(255,255,255,.04);color:#e2e8f0;padding:0 10px;font:12px Inter,sans-serif;outline:none;flex-shrink:0}
.os-fm-cmdbar{display:flex;align-items:center;gap:4px;padding:4px 8px;border-bottom:1px solid rgba(148,163,184,.1);background:rgba(15,23,42,.35);flex-shrink:0;position:relative;z-index:5}
.os-fm-cmd{padding:5px 10px;border-radius:6px;border:1px solid transparent;background:transparent;color:#cbd5e1;font:600 11.5px Inter,sans-serif;cursor:pointer}
.os-fm-cmd:hover{background:rgba(99,102,241,.12);border-color:rgba(148,163,184,.12)}
.os-fm-cmd-wrap{position:relative}
.os-fm-dd{display:none;position:absolute;top:100%;left:0;margin-top:2px;min-width:180px;background:rgba(15,23,42,.98);border:1px solid rgba(148,163,184,.2);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.55);padding:4px;z-index:50}
.os-fm-dd.os-open{display:block}
.os-fm-dd-right{left:auto;right:0}
.os-fm-sidebar{width:200px;display:flex;flex-direction:column;background:rgba(15,23,42,.3);border-right:1px solid rgba(148,163,184,.12);overflow-y:auto;padding:6px 0;flex-shrink:0}
.os-fm-sec{padding:8px 12px 3px;font:10px Inter,sans-serif;text-transform:uppercase;letter-spacing:.5px;color:#475569}
.os-fm-sidebar .os-fm-loc{padding:5px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font:12px Inter,sans-serif;color:#94a3b8;border-radius:4px;margin:0 4px}
.os-fm-sidebar .os-fm-loc:hover{background:rgba(99,102,241,.1);color:#e2e8f0}
.os-fm-sidebar .os-fm-loc-active{background:rgba(99,102,241,.18);color:#e2e8f0}
.os-fm-sidebar .os-fm-loc-muted{opacity:.75}
.os-fm-cols{display:flex;align-items:center;padding:0 12px;height:28px;border-bottom:1px solid rgba(148,163,184,.1);background:rgba(15,23,42,.3);font:11px Inter,sans-serif;color:#64748b;flex-shrink:0;user-select:none}
.os-fm-filelist{flex:1;overflow-y:auto;padding:0}
.os-fm-filelist .os-fm-row{display:flex;align-items:center;padding:4px 12px;cursor:default;font:12.5px Inter,sans-serif;color:#e2e8f0;border-bottom:1px solid rgba(148,163,184,.04)}
.os-fm-filelist .os-fm-row:hover{background:rgba(99,102,241,.08)}
.os-fm-filelist .os-fm-row.os-fm-selected{background:rgba(99,102,241,.18)}
.os-fm-filelist .os-fm-ico{font-size:14px;margin-right:8px;flex-shrink:0}
.os-fm-filelist .os-fm-name{flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-fm-filelist .os-fm-meta{color:#64748b;font-size:11px}
.os-fm-filelist .os-fm-date{flex:1}
.os-fm-filelist .os-fm-type{width:100px}
.os-fm-filelist .os-fm-size{width:70px;text-align:right}
.os-fm-filelist .os-fm-lnk{color:#475569;font-size:10px;margin-left:6px}
.os-fm-view-icons{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:12px !important}
.os-fm-view-icons .os-fm-row{flex-direction:column;width:96px;height:100px;padding:10px 6px;border:1px solid transparent;border-radius:8px;text-align:center}
.os-fm-view-icons .os-fm-ico{font-size:32px;margin:0 0 6px}
.os-fm-view-icons .os-fm-name{flex:none;width:100%;font-size:11px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.os-fm-view-icons .os-fm-meta{display:none}
.os-fm-status{height:22px;padding:0 12px;display:flex;align-items:center;border-top:1px solid rgba(148,163,184,.08);font:10px Inter,sans-serif;color:#64748b;background:rgba(15,23,42,.3)}
.os-fm-preview{width:240px;border-left:1px solid rgba(148,163,184,.12);overflow:auto;background:rgba(15,23,42,.2);display:flex;flex-direction:column;flex-shrink:0}
#os-fm-props{display:none;position:fixed;inset:0;z-index:200060;background:rgba(0,0,0,.45);align-items:center;justify-content:center;padding:16px}
#os-fm-props.os-open{display:flex}
#os-fm-props .fp-card{width:min(400px,94vw);background:linear-gradient(180deg,#1a2336 0%,#121a2c 100%);border:1px solid rgba(148,163,184,.22);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.55);overflow:hidden;font-family:Inter,Segoe UI,sans-serif}
#os-fm-props .fp-row{display:flex;gap:10px;padding:6px 0;font:12px Inter,sans-serif;border-bottom:1px solid rgba(148,163,184,.08)}
#os-fm-props .fp-k{width:90px;color:#64748b;flex-shrink:0}
#os-fm-props .fp-v{color:#e2e8f0;word-break:break-all}
#os-fm-progress{display:none;position:fixed;inset:0;z-index:200050;background:rgba(0,0,0,.45);align-items:center;justify-content:center;font-family:Inter,Segoe UI,sans-serif;padding:16px}
#os-fm-progress.os-open{display:flex}
#os-fm-progress .fp-card{width:min(420px,94vw);background:linear-gradient(180deg,#1a2336 0%,#121a2c 100%);border:1px solid rgba(148,163,184,.22);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.55);overflow:hidden}
#os-fm-progress .fp-titlebar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(99,102,241,.12);border-bottom:1px solid rgba(148,163,184,.12)}
#os-fm-progress .fp-titlebar .fp-ico{font-size:18px}
#os-fm-progress .fp-title{font:600 13px Inter,sans-serif;color:#e2e8f0;flex:1}
#os-fm-progress .fp-close{border:none;background:transparent;color:#94a3b8;cursor:pointer;font-size:16px;padding:2px 8px;border-radius:6px}
#os-fm-progress .fp-close:hover{background:rgba(248,113,113,.15);color:#fca5a5}
#os-fm-progress .fp-body{padding:14px 16px 16px}
#os-fm-progress .fp-action{font:600 12px Inter,sans-serif;color:#a5b4fc;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
#os-fm-progress .fp-file{font:13px Inter,sans-serif;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}
#os-fm-progress .fp-bar-wrap{height:10px;border-radius:6px;background:rgba(148,163,184,.15);overflow:hidden;margin-bottom:10px}
#os-fm-progress .fp-bar{height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,#22d3ee,#6366f1,#8b5cf6);transition:width .15s ease}
#os-fm-progress .fp-bar.fp-indeterminate{width:40% !important;animation:fpSlide 1.1s ease-in-out infinite}
@keyframes fpSlide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
#os-fm-progress .fp-stats{display:flex;flex-wrap:wrap;gap:8px 14px;font:11.5px JetBrains Mono,Consolas,monospace;color:#94a3b8}
#os-fm-progress .fp-stats b{color:#cbd5e1;font-weight:600}
#os-fm-progress .fp-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#os-fm-progress .fp-btn{padding:7px 14px;border-radius:8px;border:1px solid rgba(148,163,184,.25);background:rgba(15,23,42,.6);color:#e2e8f0;font:600 12px Inter,sans-serif;cursor:pointer}
#os-fm-progress .fp-btn:hover{background:rgba(99,102,241,.2)}
#os-fm-progress .fp-btn.primary{background:rgba(99,102,241,.35);border-color:rgba(99,102,241,.5)}
#os-fm-progress .fp-done{color:#34d399}
#os-fm-progress .fp-err{color:#f87171}
#os-desktop{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#0c1222}
#os-desktop-bg{position:absolute;inset:0;background:radial-gradient(800px at 50% 25%,rgba(34,211,230,.08),transparent 50%),radial-gradient(600px at 80% 70%,rgba(99,102,241,.1),transparent 45%),radial-gradient(400px at 20% 60%,rgba(139,92,246,.06),transparent 40%),linear-gradient(165deg,#080e1a 0%,#0b1120 40%,#0e1628 100%);z-index:0;background-size:cover;background-position:center}
#os-desktop-bg.os-has-wallpaper::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,22,.25) 0%,rgba(8,12,22,.45) 100%);pointer-events:none}
#os-taskbar{box-shadow:0 -4px 24px rgba(0,0,0,.35)}
#os-start-btn.os-start-active,#os-start-btn:active{background:rgba(99,102,241,.35)!important;box-shadow:0 0 0 1px rgba(99,102,241,.5)}
#os-startmenu{border:1px solid rgba(99,102,241,.18);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;border-radius:14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#os-startmenu .os-sm-section{font:700 10px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#64748b;padding:6px 10px 4px}
#os-login-screen .login-btn{box-shadow:0 6px 24px rgba(99,102,241,.2)}
#os-login-screen .login-avatar{box-shadow:0 0 48px rgba(99,102,241,.2),0 12px 40px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font:700 32px Outfit,Inter,sans-serif;color:#a5b4fc}
#os-desktop-icons{position:absolute;top:16px;left:16px;z-index:1;display:flex;flex-direction:column;gap:8px}
.os-icon{width:76px;padding:10px 4px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;user-select:none;transition:background .2s,transform .15s}
.os-icon:hover{background:rgba(99,102,241,.12);transform:scale(1.05)}
.os-icon:active{background:rgba(99,102,241,.22);transform:scale(.97)}
.os-icon img,.os-icon svg{width:40px;height:40px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.os-icon span{font:10px Outfit,Inter,sans-serif;color:#d1d9e6;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.8);line-height:1.25;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Windows */
#os-windows{position:absolute;inset:0 0 44px 0;z-index:2;pointer-events:none}
.os-win{position:absolute;pointer-events:auto;display:flex;flex-direction:column;background:rgba(13,19,32,.97);border:1px solid rgba(148,163,184,.12);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 1px rgba(255,255,255,.05) inset;overflow:hidden;min-width:320px;min-height:200px;transition:box-shadow .2s,border-color .2s;animation:osWinOpen .28s cubic-bezier(.2,.9,.3,1) forwards;backdrop-filter:blur(2px)}
@keyframes osWinOpen{from{opacity:0;transform:scale(.88) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes osWinClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85) translateY(16px)}}
.os-win.os-closing{animation:osWinClose .2s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
.os-win.os-focused{box-shadow:0 16px 56px rgba(99,102,241,.2),0 0 0 1px rgba(99,102,241,.25) inset;border-color:rgba(99,102,241,.3);z-index:100}
.os-win.os-maximized{border-radius:0;inset:0!important;width:100%!important;height:100%!important}
.os-win-title{height:36px;display:flex;align-items:center;padding:0 12px;background:rgba(12,18,30,.9);border-bottom:1px solid rgba(148,163,184,.08);cursor:grab;user-select:none;flex-shrink:0}
.os-win-title .os-win-icon{width:16px;height:16px;margin-right:8px;opacity:.7}
.os-win-title .os-win-name{flex:1;font:12px/1 Inter,sans-serif;font-weight:600;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-win-btns{display:flex;gap:6px;align-items:center}
.os-win-btns button{width:14px;height:14px;border-radius:50%;border:none;cursor:pointer;transition:opacity .15s;opacity:.8}
.os-win-btns button:hover{opacity:1}
.os-win-btn-min{background:#f59e0b}
.os-win-btn-max{background:#22c55e}
.os-win-btn-close{background:#ef4444}
.os-win-body{flex:1;overflow:auto;position:relative;min-height:0}
.os-mob-back{display:none}
.os-win.os-hidden{display:none!important}
.os-win.os-restoring{animation:osWinOpen .2s cubic-bezier(.2,.9,.3,1) forwards}
/* Taskbar */
#os-taskbar{position:absolute;bottom:0;left:0;right:0;height:48px;z-index:10;display:flex;align-items:center;padding:0 10px;gap:4px;background:rgba(8,12,22,.88);border-top:1px solid rgba(148,163,184,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 -2px 20px rgba(0,0,0,.3)}
#os-start-btn{width:34px;height:34px;border-radius:8px;border:none;background:rgba(99,102,241,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
#os-start-btn:hover{background:rgba(99,102,241,.25)}
#os-start-btn img{width:22px;height:22px}
#os-search{flex:0 0 180px;height:30px;border-radius:6px;border:1px solid rgba(148,163,184,.15);background:rgba(255,255,255,.04);color:#e2e8f0;padding:0 10px;font:12px Inter,sans-serif;outline:none;transition:border-color .15s}
#os-search:focus{border-color:rgba(99,102,241,.5)}
#os-pinned{display:flex;gap:2px;margin-left:8px}
.os-pin{width:34px;height:34px;border-radius:6px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background .15s}
.os-pin:hover{background:rgba(148,163,184,.12)}
.os-pin.os-pin-active{background:rgba(99,102,241,.15)}
.os-pin.os-pin-active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:#6366f1;border-radius:1px}
.os-pin img,.os-pin svg{width:18px;height:18px}
#os-tray{margin-left:auto;display:flex;align-items:center;gap:10px;color:#94a3b8;font:11px Inter,sans-serif}
#os-clock{color:#cbd5e1;font-weight:500}
/* Start Menu */
#os-startmenu{position:absolute;bottom:48px;left:8px;width:560px;max-height:480px;z-index:20;background:rgba(15,23,42,.97);border:1px solid rgba(148,163,184,.2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.6);padding:0;display:none;flex-direction:row;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden}
#os-sm-left{flex:1;display:flex;flex-direction:column;padding:12px;gap:6px;overflow-y:auto}
#os-sm-right{width:200px;background:rgba(0,0,0,.15);border-left:1px solid rgba(148,163,184,.1);padding:12px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
#os-sm-right .os-sm-section{margin:0}
#os-sm-search-bottom{width:100%;height:32px;border-radius:6px;border:1px solid rgba(148,163,184,.15);background:rgba(255,255,255,.04);color:#e2e8f0;padding:0 10px;font:12px Inter,sans-serif;outline:none;margin-top:auto;flex-shrink:0}
#os-startmenu.os-open{display:flex}
/* removed: startmenu search top (now at bottom in #os-sm-left) */
.os-sm-section{font:10px Inter,sans-serif;text-transform:uppercase;letter-spacing:.5px;color:#64748b;padding:4px 8px}
.os-sm-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .12s;color:#e2e8f0;font:13px Inter,sans-serif}
.os-sm-item:hover{background:rgba(99,102,241,.12)}
.os-sm-item img,.os-sm-item svg{width:20px;height:20px;opacity:.8}
/* Context menu */
.os-ctx{position:fixed;z-index:30;background:rgba(15,23,42,.97);border:1px solid rgba(148,163,184,.2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:4px;min-width:160px;font:12px Inter,sans-serif;display:none}
.os-ctx.os-open{display:block}
.os-ctx-item{padding:7px 12px;border-radius:4px;color:#e2e8f0;cursor:pointer;display:flex;align-items:center;gap:8px}
.os-ctx-item:hover{background:rgba(99,102,241,.12)}
.os-ctx-sep{height:1px;background:rgba(148,163,184,.12);margin:3px 8px}
@media(max-width:900px){
  /* ══ PHONE MODE — Oracle OS looks like a smartphone OS ══════════════════════ */

  /* v9.10.468 — primary panes fill the mobile shell (no clipped 0-height center) */
  .view-pane{flex:1 1 auto !important;min-height:0 !important;width:100% !important;max-width:100% !important}
  #view-transcripts,#view-webview,#view-home,#view-learning,#view-radio,#view-antigravity{
    max-height:none !important; overflow:hidden !important;
  }
  #view-transcripts .ch-pane, #view-webview > div:last-child{
    min-height:0 !important; flex:1 1 auto !important;
  }

  /* The OS desktop must fit exactly inside the view pane — never overflow behind the platform tabbar */
  #view-antigravity{overflow:hidden !important}
  #os-desktop{height:100% !important;max-height:100% !important;overflow:hidden !important}
  /* v9.10.464 — DO NOT permanently hide #os-taskbar on mobile when Workspace is
     immersive: Start → Log off lived there and was unreachable (display:none
     !important beat every later rule). Platform tab bar is already hidden by
     immersive CSS; the OS dock is the only exit path. */
  body:not(.os-workspace-immersive) #os-taskbar{display:none !important}
  body.os-workspace-immersive #os-taskbar{display:flex !important;z-index:30 !important}
  /* Windows area fills the whole OS desktop (no internal taskbar offset) */
  #os-windows{inset:0 !important;bottom:0 !important}

  /* ── Status bar (top) — subtle overlay ── */
  #os-desktop::before{content:'';position:absolute;top:0;left:0;right:0;height:env(safe-area-inset-top,20px);min-height:20px;background:rgba(0,0,0,.3);z-index:20;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

  /* ── App grid (home screen) — centered icon grid like iOS/Android ── */
  #os-desktop-icons{
    position:absolute;top:max(28px,env(safe-area-inset-top,20px));left:0;right:0;bottom:12px;
    display:grid !important;grid-template-columns:repeat(4,1fr);gap:12px 8px;
    justify-items:center;align-content:start;padding:16px 20px;
    flex-direction:unset;flex-wrap:unset;
  }
  .os-icon{width:68px;text-align:center}
  .os-icon img,.os-icon svg{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.06);padding:8px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .os-icon span{font-size:10px !important;margin-top:4px;display:block;line-height:1.2}
  /* single-tap opens apps on phone (no double-click) */
  .os-icon{cursor:pointer}

  /* ── Mobile apps: full-screen within the OS desktop container, NOT fixed to viewport ── */
  .os-win,.os-win.os-mobile-app{
    position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
    border-radius:0 !important;border:none !important;min-width:0 !important;min-height:0 !important;
    z-index:15 !important;max-width:none !important;max-height:none !important;
    left:0 !important;top:0 !important;
  }
  .os-win.os-maximized{inset:0 !important}
  /* Title bar → iOS/Android-style nav bar */
  .os-win-title{
    height:auto;min-height:48px;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top,0px));
    background:rgba(10,15,26,.97);border-bottom:1px solid rgba(148,163,184,.1);
    cursor:default;display:flex;align-items:center;
  }
  .os-win-title .os-win-name{font:700 16px Outfit,sans-serif}
  /* Hide desktop window controls */
  .os-win-btns,.os-win-btn-min,.os-win-btn-max,.os-win-btn-close{display:none !important}
  /* Back button (mobile only) */
  .os-mob-back{display:flex !important}
  .os-win-body{
    padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
    -webkit-overflow-scrolling:touch;
  }
  /* No resize handles */
  .os-win [style*="cursor:"][style*="resize"]{display:none !important}

  /* ── Dock (bottom) — phone-style app dock ── */
  #os-taskbar{
    position:absolute;bottom:0;left:0;right:0;height:auto;min-height:56px;
    padding:6px 16px;padding-bottom:max(8px,env(safe-area-inset-bottom));
    gap:4px;background:rgba(9,14,24,.85);border-top:none;
    border-radius:20px 20px 0 0;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    justify-content:space-evenly;
  }
  #os-start-btn{width:44px;height:44px;border-radius:12px}
  #os-start-btn img{width:24px;height:24px}
  .os-tb-item{flex-direction:column;gap:2px;padding:4px 8px !important;min-width:44px;align-items:center}
  .os-tb-item .os-tb-label{font-size:9px !important;display:block !important;color:var(--muted);text-align:center}
  .os-tb-item img,.os-tb-item svg{width:22px;height:22px}
  #os-clock{font-size:9px;padding:0 4px;display:none}
  #os-search{display:none !important}
  #os-systray{display:none}

  /* ── Windows container — above everything when an app is open ── */
  #os-windows{inset:0;bottom:0;z-index:12}
  /* Hide dock when a full-screen app is open */
  #os-windows:has(.os-win:not(.os-hidden):not(.os-closing)) ~ #os-taskbar{display:none !important}
  /* Animation: app opens from center like iOS */
  .os-win.os-mobile-app{animation:osMobAppOpen .25s cubic-bezier(.2,.8,.3,1) forwards}
  @keyframes osMobAppOpen{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

  /* ── App content: mobile-responsive layouts ── */
  /* File Manager: hide sidebar, stack vertically */
  #os-body-files > div > div:nth-child(3){flex-direction:column !important}
  #ag-files-sidebar{width:100% !important;max-height:120px;border-right:none !important;border-bottom:1px solid rgba(148,163,184,.12);flex-direction:row !important;flex-wrap:wrap;padding:4px !important;gap:2px !important}
  #ag-files-sidebar .os-fm-loc{padding:4px 8px !important;font-size:11px !important}
  #ag-files-sidebar [style*="text-transform:uppercase"]{display:none !important}
  #os-fm-search{width:100% !important;max-width:none !important}
  #os-body-files [style*="width:180px"]{width:auto !important}

  /* AI Workspace (terminal): single-column stack */
  #os-body-terminal > div{flex-direction:column !important}
  /* Hide activity bar on mobile — use tabs instead */
  #os-ide-actbar{display:none !important}
  /* Sidebar: horizontal strip */
  #os-ide-sidebar{width:100% !important;max-height:80px;border-right:none !important;border-bottom:1px solid rgba(148,163,184,.08)}
  #os-ide-sidebar > div:first-child{padding:4px 8px !important}
  /* Chat panel: full-width, below editor */
  #os-body-terminal [style*="width:340px"]{width:100% !important;border-left:none !important;border-top:1px solid rgba(148,163,184,.1);max-height:45vh}
  /* Editor fills remaining space */
  #ag-file-content{min-height:120px}

  /* Browser app: full width */
  #os-body-browser [style*="width:"]{width:100% !important;max-width:none !important}
  #os-body-browser input[style*="flex"]{min-width:0 !important}

  /* Notes app: full width */
  #os-body-notes{padding:8px !important}
  #os-body-notes textarea{width:100% !important;min-width:0 !important}

  /* Settings app: single column */
  #os-body-settings [style*="display:flex"][style*="gap"]{flex-direction:column !important}
  #os-body-settings [style*="width:200px"],#os-body-settings [style*="width:180px"]{width:100% !important}

  /* General: all app bodies scroll properly on mobile */
  .os-win-body{overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch}
  /* Prevent horizontal overflow in any app */
  .os-win-body > div{max-width:100%;overflow-x:hidden}
  /* Inputs and textareas: never wider than screen */
  .os-win-body input,.os-win-body textarea,.os-win-body select{max-width:100%;box-sizing:border-box}

  /* ── Start menu → full-screen app drawer ── */
  #os-startmenu{
    position:fixed;bottom:0;left:0;right:0;top:20%;
    width:100% !important;max-height:none;
    border-radius:20px 20px 0 0;border:none;
    background:rgba(10,15,26,.97);
    flex-direction:column;
    z-index:25;
  }
  #os-startmenu.os-open{display:flex}
  #os-sm-right{width:100%;border-left:none;border-top:1px solid rgba(148,163,184,.1)}
  /* Home indicator bar at bottom of start menu */
  #os-startmenu::after{content:'';position:sticky;bottom:0;width:100%;padding:8px 0;display:flex;justify-content:center}
}

/* ── ICON RAIL ───────────────────────────────────────── */
.rail{
  width:54px;flex-shrink:0;background:var(--rail);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px;
}
.rail-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--muted);transition:all 0.16s;background:transparent;
}
.rail-btn:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.rail-btn.active{color:var(--accent);background:var(--accent-glow);
  border-color:rgba(34,217,230,0.4);box-shadow:0 0 14px var(--accent-glow)}
.rail-btn svg{width:18px;height:18px}
.rail-spacer{flex:1}

/* ── LEFT COLUMN ─────────────────────────────────────── */
.col-left{
  width:288px;flex-shrink:0;background:var(--panel-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.col-right.desktop-hidden { display: none !important; }
.col-section-hdr{
  padding:13px 16px 7px;display:flex;align-items:center;justify-content:space-between;
}
.scroll{overflow-y:auto;overflow-x:hidden}
.realm-nav{padding:2px 10px 8px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  cursor:pointer;color:var(--muted);transition:all 0.15s;font-size:12.5px;font-weight:500;
  border:1px solid transparent;
}
.nav-item:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.nav-item.active{color:var(--accent);background:var(--accent-glow);border-color:rgba(34,217,230,0.25)}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:0.9}

.chan-group{padding:4px 10px 0}
.chan-group-hdr{padding:11px 8px 5px;display:flex;align-items:center;justify-content:space-between}
.chan-group-hdr .cnt{font-size:9px;color:var(--muted-2);font-family:var(--mono)}
.chan-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  cursor:pointer;color:#d1d5db;transition:all 0.14s;border:1px solid transparent;
  position:relative;
}
.chan-item:hover{color:#fff;background:rgba(255,255,255,0.06)}
.chan-item.active{color:#fff;background:rgba(34,217,230,0.12);border-color:rgba(34,217,230,0.25)}
.chan-item.active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:0 4px 4px 0;background:var(--accent);box-shadow:0 0 10px var(--accent);
}
.chan-icon{width:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-family:var(--mono);font-size:14px}
.chan-item.active .chan-icon{color:var(--accent)}
.chan-icon svg{width:16px;height:16px}
.chan-name{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;letter-spacing:0.3px}
.chan-tag{font-size:8px;font-family:var(--mono);padding:1px 5px;border-radius:6px;
  background:rgba(255,255,255,0.05);color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.chan-tag.sys{background:rgba(248,113,113,0.1);color:var(--bad)}
.chan-tag.onboard{background:rgba(251,191,36,0.1);color:var(--warn)}
.chan-count{font-size:9px;font-family:var(--mono);color:var(--muted-2);min-width:18px;text-align:right}

/* ── CENTER COLUMN ───────────────────────────────────── */
.col-center{flex:1;min-width:0;display:flex;flex-direction:column;background:rgba(0,0,0,0.18);overflow:hidden}
.center-hdr{
  flex-shrink:0;height:50px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:0;padding-right:20px;padding-bottom:0;padding-left:20px;
  border-bottom:1px solid var(--border);background:var(--panel);
}
/* v9.10.422 — the call / video / sound buttons were each a direct flex child of a
   `justify-content:space-between` row, so the browser spread them evenly across the
   FULL header width (owner: "the call buttons up top are to spread apart"). Letting
   the title absorb the free space packs the action buttons together on the right,
   which is what space-between was meant to achieve in the first place. */
.center-hdr .ch-title{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto}
.center-hdr .ch-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--accent-glow);color:var(--accent);border:1px solid rgba(34,217,230,0.3);
}
.center-hdr .ch-icon svg{width:15px;height:15px}
.center-hdr .ch-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.center-hdr .ch-kicker{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.center-hdr .ch-name{font-family:var(--ui);font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gear-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:rgba(255,255,255,0.03);
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.16s;
}
.gear-btn:hover{color:var(--accent);border-color:rgba(34,217,230,0.4);transform:rotate(45deg)}
.gear-btn svg{width:17px;height:17px}

.transcript{flex:1;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:12px}
@keyframes fadeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
/* ── CHAT BUBBLES — author-aligned (owner/human RIGHT, AIs/others LEFT) ── */
.turn{display:flex;gap:10px;align-items:flex-end;animation:fadeIn 0.28s ease-out;cursor:pointer;
  max-width:100%;}
.turn.right{flex-direction:row-reverse;align-self:flex-end}
.turn.left{align-self:flex-start}
.turn .av{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:13px;color:#04070d;
  box-shadow:0 3px 12px rgba(0,0,0,0.4);
}
.turn .body{min-width:0;max-width:min(70%,560px);display:flex;flex-direction:column}
.turn.right .body{align-items:flex-end}
.turn .name-row{display:flex;gap:8px;align-items:baseline;margin-bottom:3px;padding:0 4px}
.turn.right .name-row{flex-direction:row-reverse}
.turn .name{font-family:var(--ui);font-weight:700;font-size:12px}
.turn .ts{font-size:9px;color:var(--muted-2);font-family:var(--mono)}
.turn .reply-to{font-size:9.5px;color:var(--muted-2);font-family:var(--mono);margin-bottom:3px;padding:2px 9px;
  border-left:2px solid var(--border-2);background:rgba(255,255,255,0.02);border-radius:0 6px 6px 0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turn.right .reply-to{border-left:none;border-right:2px solid var(--border-2);border-radius:6px 0 0 6px}
.turn .bubble{
  background:var(--panel);border:1px solid var(--border);border-radius:13px 13px 13px 4px;
  padding:9px 14px;line-height:1.55;font-size:12.5px;color:#dce4f1;
  white-space:pre-wrap;word-break:break-word;box-shadow:0 3px 14px rgba(0,0,0,0.22);
  transition:border-color 0.18s;max-width:100%;
}
.turn.right .bubble{
  background:linear-gradient(135deg,var(--c-ryan),#d98f12);color:#1a1206;border-color:transparent;
  border-radius:13px 13px 4px 13px;
}
.turn.right:hover .bubble{filter:brightness(1.05)}
.turn.left:hover .bubble{border-color:rgba(255,255,255,0.16)}
.turn .bubble code{background:rgba(0,0,0,0.18);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:11px}
.turn .bubble pre{background:rgba(0,0,0,0.45);padding:9px 11px;border-radius:7px;overflow-x:auto;color:#dce4f1;
  margin-top:6px;font-family:var(--mono);font-size:11px;line-height:1.55;border:1px solid var(--border-2)}
/* ── THREAD sub-view (breadcrumb + list sections) ── */
.thr-crumb{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:9px 20px;border-bottom:1px solid var(--border);
  background:var(--panel-2);font-size:11px;color:var(--muted)}
.thr-crumb .back{cursor:pointer;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:5px;padding:3px 8px;
  border-radius:7px;border:1px solid rgba(34,217,230,0.25)}
.thr-crumb .back:hover{background:var(--accent-glow)}
.thr-crumb .cur{color:var(--text);font-weight:600}
.thr-sec{margin-bottom:6px}
.thr-sec .ms-hdr{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2);margin:14px 0 8px;padding:0 2px}
.thr-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  background:rgba(255,255,255,0.015);cursor:pointer;margin-bottom:7px;transition:all .14s}
.thr-item:hover{border-color:rgba(34,217,230,0.3);background:var(--accent-glow)}
.thr-ic{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(34,217,230,0.12);color:var(--accent);font-weight:800}
.thr-meta{flex:1;min-width:0}
.thr-name{font-family:var(--ui);font-weight:600;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr-sub{font-size:9.5px;color:var(--muted-2);font-family:var(--mono);margin-top:2px}
.thr-cnt{font-family:var(--mono);font-size:11px;color:var(--muted);flex-shrink:0}
/* ── CHANNEL PROFILE (settings sub-tab) ── */
.cp-id{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:13px;
  background:linear-gradient(135deg,rgba(34,217,230,0.05),rgba(255,255,255,0.01))}
.cp-id .cp-ic{width:52px;height:52px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(34,217,230,0.14);color:var(--accent)}
.cp-id .cp-ic svg{width:26px;height:26px}
.cp-id .cp-name{font-family:var(--ui);font-weight:800;font-size:17px;color:#fff}
.cp-id .cp-tags{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.cp-id .cp-tag{font-size:8.5px;font-family:var(--mono);padding:2px 8px;border-radius:6px;background:rgba(255,255,255,0.05);color:var(--muted)}
.cp-worker{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;
  background:rgba(255,255,255,0.015);margin-bottom:7px}
.cp-worker .cw-av{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:12px;color:#04070d}
.cp-worker .cw-name{font-family:var(--ui);font-weight:700;font-size:12.5px}
.cp-worker .cw-role{font-size:9px;letter-spacing:0.8px;text-transform:uppercase;color:var(--muted-2);margin-top:2px}
.cp-sched-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.cp-sched-row:last-child{border-bottom:none}
.cp-sched-row .k{font-size:11px;color:var(--muted)}
.cp-sched-row .v{font-family:var(--mono);font-size:12px;color:var(--text)}
.cp-sched-row .v.na{color:var(--muted-2);font-family:var(--ui);font-size:10px;font-style:italic}
/* ── richer metrics extras ── */
.met-kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:11.5px}
.met-kv:last-child{border-bottom:none}
.met-kv .k{color:var(--muted)}
.met-kv .v{font-family:var(--mono);color:var(--text)}

.empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--muted);text-align:center;padding:40px;
}
.empty-state .es-icon{
  width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:rgba(255,255,255,0.02);color:var(--muted-2);
}
.empty-state .es-icon svg{width:30px;height:30px}
.empty-state .es-title{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.empty-state .es-sub{font-size:11px;color:var(--muted-2);max-width:340px;line-height:1.6}
.empty-state .es-sub b{color:var(--accent);font-weight:600}

/* Channel settings slide-over */
.settings-panel{
  position:absolute;top:50px;right:0;bottom:0;width:300px;z-index:20;
  background:var(--panel-solid);border-left:1px solid var(--border);
  box-shadow:-20px 0 40px rgba(0,0,0,0.5);transform:translateX(100%);
  transition:transform 0.25s ease;display:flex;flex-direction:column;
}
.settings-panel.open{transform:translateX(0)}
.sp-hdr{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sp-hdr .x{cursor:pointer;color:var(--muted);width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.sp-hdr .x:hover{color:var(--bad)}
.sp-body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.sp-block .sp-k{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.sp-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:3px 0}
.sp-row .v{color:var(--text);font-family:var(--mono);font-size:11px}
.sp-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--good);font-weight:600}
.sp-speakers{display:flex;flex-wrap:wrap;gap:6px}
.sp-speaker{font-size:10px;padding:3px 9px;border-radius:7px;border:1px solid var(--border);
  background:rgba(255,255,255,0.03);font-family:var(--mono)}
.sp-speakers .none{color:var(--muted-2);font-style:italic;font-size:11px}
#mm-body .sp-block{margin-bottom:16px}
#mm-body .sp-block:last-child{margin-bottom:0}

/* ── RIGHT COLUMN ────────────────────────────────────── */
.col-right{
  width:320px;flex-shrink:0;background:var(--panel-2);border-left:1px solid var(--border);
  display:none !important;flex-direction:column;overflow:hidden;
}
/* v9.10.502 — right column permanently hidden. All admin content lives in the Admin Panel modal now. */
/* v9.10.504 — owner layout: col-right gone, expand center to fill.
   On home view, hide the channel sidebar too so the feed gets full width like guests see. */
body.scope-owner[data-view="home"] #col-left{display:none !important;width:0 !important;min-width:0 !important}
body.scope-owner .col-center{flex:1 !important}
.col-right .scroll{padding:0 0 14px}
/* single scroll region: Lattice Agents + all accordions reachable on desktop */
.col-right-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
.col-right-scroll::-webkit-scrollbar{width:8px}
.col-right-scroll::-webkit-scrollbar-thumb{background:rgba(34,217,230,0.18);border-radius:4px}
/* Side panel hosted inside the Menu's Side Panel popup — render #col-right as a
   normal block filling the docked #gmodal, overriding the column / hidden / mobile
   drawer positioning it normally uses. */
#gmodal .col-right.in-menu-modal{
  display:flex !important;width:100% !important;min-width:0 !important;max-width:none !important;
  height:auto !important;max-height:72vh !important;flex-shrink:1 !important;
  position:static !important;transform:none !important;opacity:1 !important;
  border-left:none !important;background:transparent !important;padding:0 !important;
}
/* A live dashboard element (agents list, a side-panel accordion) hosted inside an
   Admin Panel section: render flush as a normal block, force-open, hide its own
   header row since the section nav already labels it. */
#gmodal .admin-mounted{
  display:block !important;width:auto !important;min-width:0 !important;max-width:none !important;
  height:auto !important;max-height:64vh !important;overflow-y:auto !important;overflow-x:hidden !important;
  opacity:1 !important;position:static !important;transform:none !important;
  border:none !important;background:transparent !important;padding:0 !important;margin:0 !important;
}
#gmodal .admin-mounted .acc-hdr{ display:none !important; }
#gmodal .admin-mounted .acc-body,
#gmodal .admin-mounted.acc.collapsed .acc-body{ display:block !important; }
.root-admin{
  margin:12px 14px 6px;padding:13px;border-radius:12px;
  background:linear-gradient(135deg,rgba(251,191,36,0.10),rgba(251,191,36,0.02));
  border:1px solid rgba(251,191,36,0.25);display:flex;align-items:center;gap:12px;
}
.root-admin .ra-av{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#fbbf24,#d97706);color:#1a1205;font-family:var(--ui);font-weight:800;font-size:17px;
  box-shadow:0 0 16px rgba(251,191,36,0.3);
}
.root-admin .ra-info{flex:1;min-width:0}
.root-admin .ra-name{font-family:var(--ui);font-weight:700;font-size:13.5px;color:#fff;display:flex;align-items:center;gap:6px}
.root-admin .ra-name svg{width:13px;height:13px;color:var(--star)}
.root-admin .ra-role{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--warn);margin-top:2px}
.root-admin .ra-dot{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good)}

.agent-list{padding:2px 12px;flex-shrink:0;overflow-x:hidden}
.agent-row{
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;
  transition:background 0.14s;cursor:default;
}
.agent-row:hover{background:rgba(255,255,255,0.03)}
.agent-av{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:12px;color:#04070d;position:relative;
}
.agent-av .stat{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--panel-2);background:var(--good)}
.agent-meta{flex:1;min-width:0}
.agent-name-row{display:flex;align-items:center;gap:7px}
.agent-name{font-family:var(--ui);font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-app-tag{font-size:7.5px;font-family:var(--mono);letter-spacing:0.5px;padding:1px 5px;border-radius:5px;
  background:rgba(255,255,255,0.06);color:var(--muted);text-transform:uppercase}
.agent-role{font-size:9.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-health{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.agent-pct{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--good)}
.agent-vitals{display:flex;gap:8px;margin-top:3px}
.av-chip{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9.5px;line-height:1}
.av-chip .av-k{color:var(--muted-2);font-size:8.5px}
.av-chip .av-v{font-weight:700;font-variant-numeric:tabular-nums}
.agent-energy-bar{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,0.08);overflow:hidden}
.agent-energy-bar .aeb-fill{height:100%;border-radius:3px;transition:width 0.4s ease,background 0.4s ease}
.agent-sync{width:13px;height:13px;color:var(--muted-2);animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.agent-row{cursor:pointer}
.agent-row.expanded{background:rgba(34,217,230,0.05)}

/* ── RESIZABLE SPLIT (agent list ↑ / accordions ↓) ──────────────────────── */
/* The right column is now a fixed-height flex: a scrollable agent region whose
   height is owner-resizable (persisted in localStorage), a drag handle, then a
   scrollable accordion region that fills the rest. Neither pushes the other off
   screen. */
.rc-agents{display:flex;flex-direction:column}
.agent-list{padding:2px 12px 6px;overflow-x:hidden}
.rc-accordions{padding-bottom:14px}

/* ── INLINE agent expand (live vitals + provider/model + actions) ────────── */
.agent-inline{margin:0 12px 6px;border:1px solid var(--border);border-top:none;
  border-radius:0 0 10px 10px;background:rgba(0,0,0,0.22);padding:10px 11px;display:none;animation:agInline 0.16s ease}
.agent-inline.open{display:block}
@keyframes agInline{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ai-rows{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.ai-rows .r{display:flex;justify-content:space-between;font-size:10px;gap:8px}
.ai-rows .r .k{color:var(--muted-2);text-transform:uppercase;letter-spacing:0.5px;font-size:8.5px;flex-shrink:0}
.ai-rows .r .v{color:var(--muted);font-family:var(--mono);font-size:10px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-vit{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.ai-vit .chip{flex:1;min-width:54px;text-align:center;border:1px solid var(--border);border-radius:7px;padding:5px 4px;background:rgba(255,255,255,0.02)}
.ai-vit .chip .vv{font-family:var(--mono);font-weight:700;font-size:12px}
.ai-vit .chip .vl{font-size:7.5px;letter-spacing:0.5px;text-transform:uppercase;color:var(--muted-2);margin-top:2px}
.ai-acts{display:flex;gap:5px}
.cap-pill{display:inline-block;font-size:7px;font-family:var(--mono);letter-spacing:0.5px;padding:1px 5px;border-radius:5px;
  border:1px solid rgba(34,217,230,0.3);color:var(--accent);background:rgba(34,217,230,0.05);margin-left:5px;text-transform:uppercase}

/* ── HUMANS / GUESTS + ADMIN accordion content ──────────────────────────── */
.hu-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer;transition:background 0.14s}
.hu-row:hover{background:rgba(255,255,255,0.04)}
.hu-av{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:12px;color:#04070d}
.hu-meta{flex:1;min-width:0}
.hu-name{font-family:var(--ui);font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hu-sub{font-size:9.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hu-role{font-size:8px;font-family:var(--mono);letter-spacing:0.5px;padding:2px 6px;border-radius:6px;flex-shrink:0;
  border:1px solid var(--border);color:var(--muted);text-transform:uppercase}
.adm-grid{display:flex;flex-direction:column;gap:5px}
.adm-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;
  padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid var(--border)}
.adm-row .k{color:var(--muted-2);text-transform:uppercase;letter-spacing:0.5px;font-size:8.5px}
.adm-row .v{font-family:var(--mono);font-size:10px;text-align:right}
.adm-dot{width:8px;height:8px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:5px}

/* per-AI tailored config sections in the editor + portfolio config tab */
.cfg-sec{border:1px solid var(--border);border-radius:9px;padding:9px 11px;margin-top:8px;background:rgba(255,255,255,0.015)}
.cfg-sec > .cfg-sec-t{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.cfg-ro{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;padding:3px 0}
.cfg-ro .k{color:var(--muted-2)}
.cfg-ro .v{font-family:var(--mono);color:var(--text);text-align:right;overflow-wrap:anywhere}
.cfg-ro .disp{color:var(--muted-2);font-style:italic;font-size:8.5px;margin-left:4px}

/* right-side stacked accordion panels */
.acc{margin:6px 12px 0;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:rgba(255,255,255,0.015)}
.acc-hdr{
  padding:11px 13px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  user-select:none;transition:background 0.14s;
}
.acc-hdr:hover{background:rgba(255,255,255,0.03)}
.acc-hdr .acc-t{display:flex;align-items:center;gap:9px}
.acc-hdr .acc-t svg{width:14px;height:14px;color:var(--muted)}
.acc-hdr .acc-t .lbl{color:var(--text)}
.acc-hdr .chev{width:14px;height:14px;color:var(--muted);transition:transform 0.2s}
.acc.collapsed .acc-body{display:none}
.acc.collapsed .chev{transform:rotate(-90deg)}
.acc-body{padding:4px 12px 12px;display:flex;flex-direction:column;gap:8px}
.stage-tag{display:inline-block;font-size:7.5px;font-family:var(--mono);padding:1px 6px;border-radius:6px;
  border:1px solid rgba(34,217,230,0.3);color:var(--accent);letter-spacing:0.5px;background:rgba(34,217,230,0.05)}
.stub{color:var(--muted-2);font-size:10.5px;line-height:1.6;text-align:center;padding:8px 4px}

/* AI Control cards */
.ai-card{border:1px solid var(--border);border-radius:9px;padding:10px;background:rgba(0,0,0,0.2)}
.ai-card-hdr{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ai-card-dot{width:8px;height:8px;border-radius:50%}
.ai-card-name{font-family:var(--ui);font-weight:700;font-size:11.5px}
.ai-card-rows{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.ai-card-row{display:flex;justify-content:space-between;font-size:10px}
.ai-card-row .k{color:var(--muted-2);text-transform:uppercase;letter-spacing:0.5px;font-size:8.5px}
.ai-card-row .v{color:var(--muted);font-family:var(--mono);font-size:10px}
.ai-card-btns{display:flex;gap:5px}
.mini-btn{flex:1;font-size:8.5px;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  padding:4px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,0.03);
  color:var(--muted-2);cursor:not-allowed;position:relative}
.mini-btn .s2{position:absolute;top:-6px;right:-3px;font-size:6px;color:var(--accent);background:var(--bg);padding:0 3px;border-radius:4px}

/* Server Control buttons (destructive) */
.ctrl-btn{width:100%;margin-bottom:7px;padding:9px 11px;border-radius:8px;cursor:pointer;
  font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
  border:1px solid rgba(251,191,36,0.45);background:rgba(251,191,36,0.08);color:var(--warn);transition:all 0.14s}
.ctrl-btn:hover{background:rgba(251,191,36,0.16);transform:translateY(-1px)}
.ctrl-btn.danger{border-color:rgba(248,113,113,0.5);background:rgba(248,113,113,0.14);color:#fca5a5}
.ctrl-btn.danger:hover{background:rgba(248,113,113,0.24)}
.ctrl-note{font-size:9px;color:var(--muted-2);line-height:1.5;margin-top:2px}
/* View Mode picker (Auto/Mobile/Desktop) — neutral, non-destructive palette */
.vm-row{display:flex;gap:6px;margin-bottom:8px}
.vm-btn{width:auto;flex:1;margin-bottom:0;border-color:var(--border);
  background:rgba(255,255,255,0.04);color:var(--muted)}
.vm-btn:hover{background:rgba(34,217,230,0.10);color:var(--text)}
.vm-btn.vm-on{border-color:var(--accent);background:rgba(34,217,230,0.16);color:var(--accent)}

/* ── User Management (owner-only) ── */
#user-mgmt{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.um-head{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.um-tag{font-size:7.5px;background:rgba(34,217,230,0.16);color:var(--accent);padding:1px 5px;border-radius:6px;letter-spacing:.5px}
.um-list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto}
.um-row{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:8px;padding:5px 7px}
.um-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.um-meta{flex:1;min-width:0}
.um-name{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-handle{color:var(--muted);font-weight:400;font-size:9px}
.um-sub{font-family:var(--mono);font-size:8.5px;color:var(--muted-2)}
.um-role{font-size:9px;color:var(--star)}
.um-rolesel,#um-role{background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:9px;padding:2px 4px}
.um-actions{display:flex;gap:3px}
.um-x{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:6px;color:var(--muted);cursor:pointer;font-size:11px;width:22px;height:22px;line-height:1}
.um-x:hover{color:var(--text);border-color:var(--accent)}
.um-prot{font-size:8px;color:var(--muted-2)}
.um-mint{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.um-mint input{background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:7px;color:#fff;font-size:11px;padding:7px 9px;width:100%}
.um-mintrow{display:flex;gap:6px}.um-mintrow .mini-btn{flex:1}
.um-out{font-size:10px}
.um-token{background:rgba(34,217,230,0.07);border:1px solid rgba(34,217,230,0.3);border-radius:8px;padding:8px;font-size:10px}
.um-token code{display:block;word-break:break-all;font-family:var(--mono);font-size:10px;color:var(--accent);margin:4px 0}
.um-copy{background:var(--accent);color:#04070d;border:none;border-radius:6px;padding:3px 10px;font-size:9px;font-weight:700;cursor:pointer}
.um-once{font-size:8px;color:var(--warn);margin-top:3px}
.um-note{font-size:8.5px;color:var(--muted-2);line-height:1.5}
/* Member/viewer scope: hide owner/admin-only control affordances entirely. */
body.scope-member [data-needs="admin"]{display:none !important}
/* v9.10.343 — BOOT LOCK (anti-flash): the <body> ships as scope-member (least
   privilege) but that still PAINTS the operator shell (Channel Lattice + right
   Command-Center panels + host telemetry) for the ~600ms until /api/me returns and
   applyScope() flips the real role. While `scope-booting` is present we hide that
   chrome so a guest — or anyone inspecting the page — never sees the command center
   flash by. applyScope() removes `scope-booting` ONLY once the session role is
   resolved (a safety timeout clears it either way).
   IMPORTANT: this is a VISUAL guard / defense-in-depth ONLY. The real access
   boundary is server-side — every /api/* route is auth-gated on the server, so
   the markup being present in the HTML does not grant a guest any operator access. */
body.scope-booting .col-left,
body.scope-booting .col-right,
body.scope-booting #rc-toggle,
body.scope-booting .tb-right .metric{visibility:hidden !important}
/* v9.10.367 — BOOT CURTAIN (the actual anti-flash fix).
   The v9.10.343 lock above is an ALLOW-LIST of four selectors using
   `visibility:hidden`, and it leaked in two ways the owner could see:
     1) It never covered `.rail` (the Config / Antigravity / Root Admin operator
        buttons), `.col-center` / `#view-home`, or the "Realm Control Center ·
        Command Home · live realm" topbar branding — all of which painted in full
        for the entire /api/me round-trip, to guests included.
     2) `visibility:hidden` PRESERVES layout, so even the four locked selectors
        still reserved the operator 4-column geometry (288px gutters) before
        collapsing to the guest grid — the shape of the command center was visible
        even where its contents were not.
   Enumerating more selectors would just be a longer allow-list with the same
   failure mode. Instead this is FAIL-CLOSED BY CONSTRUCTION: one opaque fixed
   curtain painted above the whole document while the role is unknown. Nothing
   underneath it can be seen no matter what markup exists or gets added later.
   It is pure CSS in <head>, so it is in effect on the FIRST paint — before any
   script runs. applyScope() drops `scope-booting` once the role resolves (with an
   existing safety timeout), taking the curtain with it.
   NOTE: this remains a VISUAL guard. The access boundary is server-side — see
   requireHostRead() in command-center-server.mjs (v9.10.367). */
body.scope-booting::before{
  content:'';
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:var(--bg,#04070d);
  z-index:2147483000;
  pointer-events:all;
}
/* v9.10.369 — PAGE BACKDROP (the empty gutters either side of the feed).
   Owner: "on the sides that have nothing can we also have a option for the user to
   change that background look to a theme image picked from the store selction?"
   The "Background Art" uploader already promised "shows on both sides like Steam",
   but the image only ever skinned the profile CARD — the page gutters stayed flat
   black. This is the layer that actually delivers it.

   Implemented as ONE fixed element behind everything rather than by styling any
   layout container, because the feed/dash/post containers and their width+padding
   rules are off-limits, and no scroll-clipping property may be introduced in this
   file. A detached fixed layer touches none of that: no reflow, no scroll
   interaction, no effect on the feed column. (Selector names and that property are
   spelled out nowhere here on purpose — the repo audit greps for them.)
   #app-bg-scrim is a separate dim pass so a bright wallpaper can't make the UI
   unreadable — strength is user-controlled (appBgDim, 0–90%). */
/* ── v9.10.372 — PARALLAX DEPTH ───────────────────────────────────────────────
   Owner: "can you make the page have a 3D depth of view to each layer and help make
   the image look 3d best we can? so it doesnt look like a 2d platform but looks like
   there is depth / illusions?"

   Depth here is built from FOUR cues, stacked, because no single one reads as 3D:
     1. MOTION PARALLAX — the far layer translates further than the near layer as the
        pointer moves. This is the strongest cue the brain has for depth.
     2. DEPTH OF FIELD — the far layer carries a slight blur + a touch of saturation
        loss, so the crisp content column reads as nearer. Real cameras do this.
     3. VIGNETTE — a radial darkening toward the edges bends the flat plane into a
        shallow bowl and pushes focus to the centre.
     4. ATMOSPHERIC HAZE — a subtle bloom that also parallaxes, at a DIFFERENT rate
        from the image, which is what sells "separate layers" rather than one moving
        picture.

   All movement is `transform` only (GPU-composited, never triggers layout), driven by
   two CSS variables written from one rAF-throttled pointer handler. Every layer is
   position:fixed + pointer-events:none, so none of this can affect the feed, the
   scroll container, or any protected layout rule.

   The layers are scaled up ~1.12 so they can translate without ever exposing an edge.
   Scale is applied via transform (not negative insets) specifically so the oversized
   layer contributes nothing to the document's scrollable area. */
#app-bg{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:-3;
  background-color:var(--bg,#04070d);
  background-image:var(--app-bg-img,none);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  pointer-events:none;
  will-change:transform;
  transform:
    scale(1.12)
    translate3d(calc(var(--depth-x,0) * -22px), calc(var(--depth-y,0) * -16px), 0);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  filter:blur(var(--app-bg-blur,1.5px)) saturate(.92);
}
/* Atmospheric haze — parallaxes at roughly HALF the far layer's rate and in the same
   direction. Two elements moving at different speeds is what the eye reads as depth. */
#app-bg-mid{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:-2;
  pointer-events:none;
  will-change:transform;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(120,190,255,.10), transparent 70%),
    radial-gradient(45% 35% at 22% 78%, rgba(160,120,255,.07), transparent 70%);
  transform:
    scale(1.06)
    translate3d(calc(var(--depth-x,0) * -10px), calc(var(--depth-y,0) * -7px), 0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
/* Scrim now doubles as the VIGNETTE: flat dim in the middle, heavier at the corners,
   which curves the plane and makes the centre feel closer. */
#app-bg-scrim{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:-1;
  background:
    radial-gradient(120% 95% at 50% 45%,
      rgba(4,7,14,0) 38%,
      rgba(4,7,14,.34) 74%,
      rgba(4,7,14,.72) 100%),
    var(--bg,#04070d);
  opacity:var(--app-bg-dim,0.20);
  pointer-events:none;
}
/* Only paint the backdrop when one is actually set — otherwise the layers are inert
   and the app keeps its normal flat background byte-for-byte. */
body:not(.has-app-bg) #app-bg,
body:not(.has-app-bg) #app-bg-mid,
body:not(.has-app-bg) #app-bg-scrim{display:none !important}
/* NEAR PLANE — the content must look like it is FLOATING above the backdrop, not
   printed onto it. A deeper, softer drop shadow plus a 1px light top edge is what
   reads as "lifted": the shadow implies distance to the surface behind, the light
   edge implies a face catching light from above.
   Deliberately scoped to `body.has-app-bg` so the normal flat-background app is
   completely unchanged, and deliberately applied ONLY to .guest-card — the feed post
   containers are covered by the do-not-touch rule and are left entirely alone. */
body.has-app-bg .guest-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 40px -12px rgba(0,0,0,.75),
    0 4px 12px -6px rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
}
/* Motion is decoration. If the OS asks for less of it, keep every STATIC depth cue
   (blur, vignette, haze) and drop only the movement. */
@media (prefers-reduced-motion: reduce){
  body.has-app-bg #app-bg,
  body.has-app-bg #app-bg-mid{transition:none !important}
  body.has-app-bg #app-bg{transform:scale(1.12) !important}
  body.has-app-bg #app-bg-mid{transform:scale(1.06) !important}
}
/* v9.10.371 — MAKE IT ACTUALLY VISIBLE.
   The wallpaper was rendering but arriving washed out to near-nothing, because it
   was being filtered through three stacked layers before reaching the eye:
     1. the 55% default scrim (far too strong as a default),
     2. .col-center's rgba(0,0,0,.18) wash, and
     3. on someone else's profile, #usrprof-overlay's rgba(4,7,14,.82) backdrop —
        an 82% blackout covering the whole viewport, which alone killed it.
   Steam's proportion is the opposite: the wallpaper reads at FULL strength in the
   gutters, and legibility comes from the content column being its own solid panel
   on top — which ours already is (.gpost / .guest-card carry their own backgrounds).
   So when a wallpaper is active we stop the container washes and let it through.
   The user-controlled dim still exists for a busy image; it just no longer defaults
   to hiding the feature. */
body.has-app-bg .col-center{background:transparent !important}
/* v9.10.430 — the profile is a PAGE now (#view-profile), not the #usrprof-overlay
   popup, so there is no full-viewport backdrop left to soften. Point the same
   easing at the pane so a wallpaper still reads behind a profile. */
body.has-app-bg #view-profile{background:rgba(4,7,14,.35)}
/* The wallpaper is decoration; if the user has asked the OS for less motion, don't
   run an animated GIF full-bleed behind everything they read. */
@media (prefers-reduced-motion: reduce){
  body.has-app-bg #app-bg{background-attachment:scroll}
}
/* OWNER-ONLY affordances (stricter than admin): hidden for EVERYONE except a
   resolved owner session. Only owner sessions carry .scope-owner (set in
   applyScope()); the body defaults without it, so these stay hidden (least
   privilege) until owner resolves. Used for Rebuild & Restart (recompiles engine). */
body:not(.scope-owner) [data-needs="owner"]{display:none !important}
/* Member/viewer scope: labels/content shown ONLY to non-admin (member/viewer)
   sessions. Owner/admin never carry .scope-member, so these stay hidden for them.
   Used to relabel admin surfaces (e.g. "Root Admin" → "My Profile") for members. */
.member-only{display:none !important}
body.scope-member .member-only{display:inline !important}
/* Phase 3 — VIEWER scope: 'viewer' is a read-only subset of 'member'. ONLY a
   resolved role:'viewer' session carries .scope-viewer (members/admins/owner
   never do). It hides every [data-needs="member"] affordance (the agent-chat
   composers) so viewers get a look-but-don't-touch portal. The server also
   enforces this (POST /api/bot-chat requires member+), so this hide is UX only. */
body.scope-viewer [data-needs="member"]{display:none !important}
/* Read-only hint shown ONLY to viewers (e.g. where a composer would otherwise be). */
.viewer-only{display:none !important}
body.scope-viewer .viewer-only{display:block !important}
/* ── CLOUD GUEST social portal ─────────────────────────────────────────────
   Guests get Home (social feed) + Chat (public channels) + KAIVERSE.
   HIDDEN: Antigravity, Config, Topology, Learning, host metrics, admin bottom
   (control/tests/logs/mem), industrial AI tools, work channels (server-side). */
body.scope-guest [data-needs="admin"]{display:none !important}
body.scope-guest [data-needs="owner"]{display:none !important}
/* Guests keep social compose (member) for public chat / social DMs */
body.scope-guest .guest-hide{display:none !important}
.guest-only{display:none !important}
body.scope-guest .guest-only{display:inline !important}
body.scope-guest .member-only{display:none !important}
body.scope-guest div.guest-only,
body.scope-guest .guest-card.guest-only{display:block !important}
/* Guest nav: Home, Chat, KAIVERSE, Topology, Web — hide host-only Config/Antigravity */
body.scope-guest .rail .rail-btn[data-view="antigravity"],
body.scope-guest .rail .rail-btn[data-view="config"]{display:none !important}
body.scope-guest .m-tabbar .m-tab[data-view="antigravity"],
body.scope-guest .m-tabbar .m-tab[data-view="config"]{display:none !important}
/* v9.10.451 — MUST follow hide rules: entitlement (ag-ok) OR plan name on BOTH rail + mobile tab */
body.scope-guest.ag-ok .rail .rail-btn[data-view="antigravity"],
body.scope-guest.ag-ok .m-tabbar .m-tab[data-view="antigravity"],
body.scope-guest.plan-builder .rail .rail-btn[data-view="antigravity"],
body.scope-guest.plan-team .rail .rail-btn[data-view="antigravity"],
body.scope-guest.plan-enterprise .rail .rail-btn[data-view="antigravity"],
body.scope-guest.plan-builder .m-tabbar .m-tab[data-view="antigravity"],
body.scope-guest.plan-team .m-tabbar .m-tab[data-view="antigravity"],
body.scope-guest.plan-enterprise .m-tabbar .m-tab[data-view="antigravity"]{display:flex !important}
/* Learning optional for guests — keep Dreams tab available */
/* Host telemetry metrics in top bar — never for guests */
body.scope-guest .tb-right .metric{display:none !important}
/* Right column for guests: no Account/ViewMode/DMs (those live in Me / Chat) */
body.scope-guest #acc-control,
body.scope-guest #acc-tests,
body.scope-guest #acc-logs,
body.scope-guest #acc-mem,
body.scope-guest #acc-admin,
body.scope-guest #acc-viewmode,
body.scope-guest #rc-dms,
body.scope-guest #root-admin,
body.scope-guest #rc-agents,
body.scope-guest .col-right > div[style*="padding:2px 14px"]{display:none !important}
body.scope-guest #guest-right-fill{display:flex !important;flex-direction:column;gap:10px;padding:12px;overflow-y:auto}
/* v9.10.342 — owner: the right OS column ("Explore / Quick jump / Online now /
   Trending") is retired for guests — navigation now lives in the blue quick-menu.
   Hide the whole guest right column + every trigger that opened it (the desktop
   ⟩ toggle and the mobile AI-icon header button) so nothing floats over the feed. */
body.scope-guest #col-right,
body.scope-guest #rc-toggle,
body.scope-guest #m-open-right{display:none !important}
/* Right panel collapse — works on all views */
body.rc-hidden .col-right{width:0 !important;min-width:0 !important;overflow:hidden !important;opacity:0;padding:0 !important;border:none !important}
body.rc-hidden .shell{grid-template-columns:56px 1fr !important}
body.scope-guest.rc-hidden .shell{grid-template-columns:56px 1fr !important}
body.scope-guest.rc-hidden[data-view="home"] .shell{grid-template-columns:56px 0px 1fr !important}
.col-right{transition:width .2s ease,opacity .2s ease}
/* 2026-07-17 FIX: on desktop the right panel opens as a fixed slide-over anchored
   to the RIGHT edge (where the ⟩ button is). Previously it was a flex child, so
   when the sibling panes collapsed it jumped to the LEFT and blanked the page.
   Taking it out of flex flow guarantees it opens on the right and never displaces
   the main content. Mobile drawer rules (<=900px) are unaffected. */
@media (min-width:901px){
  body:not(.rc-hidden) #col-right{
    position:fixed; top:54px; right:0; bottom:0; width:340px; z-index:60;
    box-shadow:-10px 0 30px rgba(0,0,0,.45);
    transform:translateX(0); transition:transform .25s ease, opacity .2s ease;
  }
}
body:not(.rc-hidden) #rc-toggle{display:none !important}
#rc-toggle{display:none !important}
/* Bot portfolio: hide ops/files/admin/host-spec tabs for guests */
body.scope-guest .bv-tab[data-bvt="ops"],
body.scope-guest #bv-ops,
body.scope-guest .pf-tab[data-pft="ops"],
body.scope-guest .pf-tab[data-pft="metrics"],
body.scope-guest .pf-tab[data-pft="files"],
body.scope-guest .pf-tab[data-pft="discord"],
body.scope-guest .pf-tab[data-pft="activity"],
body.scope-guest .pf-tab[data-pft="config"],
body.scope-guest [data-guest-deny="1"]{display:none !important}
/* Host-only AI specs in sidebar expanded cards (provider/port/rss) */
body.scope-guest .ai-rows .r[data-host-spec="1"],
body.scope-guest .agent-vitals,
body.scope-guest .agent-energy-bar,
body.scope-guest .pf-vitals,
body.scope-guest .pf-cfg-grid[data-host-spec="1"],
body.scope-guest .bv-cfg-grid[data-host-spec="1"]{display:none !important}
body.scope-guest .shell{grid-template-columns:56px minmax(220px,280px) 1fr 0px}   /* v9.10.342: right col retired for guests */
/* Home feed: collapse left col so the feed gets more width */
body.scope-guest[data-view="home"] .shell{grid-template-columns:56px 0px 1fr 0px}   /* v9.10.342: right col retired for guests */
body.scope-guest[data-view="home"] #col-left{display:none !important;width:0;overflow:hidden}
/* Right panel smooth transition */
body.scope-guest .col-right{transition:width .25s ease,opacity .2s ease}
body.scope-guest.rc-hidden[data-view="home"] .shell{grid-template-columns:56px 0px 1fr 0px !important}
@media (max-width:900px){
  body.scope-guest .shell{grid-template-columns:1fr !important}
  body.scope-guest[data-view="home"] .shell{grid-template-columns:1fr !important}
}
/* Guest chat rail sections (Friends / AIs / Channels / Workspace) */
body.scope-guest .gchat-sec{margin:0 0 10px}
body.scope-guest .gchat-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px;
  font:700 10px Outfit,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
body.scope-guest .gchat-sec-hdr .cnt{font-family:var(--mono);color:var(--accent);font-size:10px}
body.scope-guest .gchat-row{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:2px 8px;border-radius:10px;
  cursor:pointer;border:1px solid transparent;background:transparent;width:calc(100% - 16px);text-align:left;color:var(--text)}
body.scope-guest .gchat-row:hover{background:rgba(34,217,230,.07);border-color:rgba(34,217,230,.15)}
body.scope-guest .gchat-row.active{background:rgba(34,217,230,.12);border-color:rgba(34,217,230,.35)}
body.scope-guest .gchat-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#1a2233;
  display:flex;align-items:center;justify-content:center;font:700 13px Outfit,sans-serif;color:var(--accent);position:relative;overflow:hidden}
body.scope-guest .gchat-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
body.scope-guest .gchat-av .gdot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--panel-2,#0d1320);background:var(--good)}
body.scope-guest .gchat-av .gdot.off{background:var(--muted-2)}
body.scope-guest .gchat-meta{flex:1;min-width:0}
body.scope-guest .gchat-name{font:600 13px Outfit,sans-serif;color:#e8eef8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.scope-guest .gchat-sub{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.scope-guest .gchat-tag{font-size:9px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--muted);flex-shrink:0}
body.scope-guest .gchat-empty{padding:8px 14px;font-size:11px;color:var(--muted);line-height:1.4}
/* Right-rail agent/DM rows use avatars (not paperclip / neon name colors) */
body.scope-guest .agent-name{color:#e8eef8 !important}
body.scope-guest .agent-av{border-radius:50% !important;overflow:hidden;background:#1a2233 !important;color:var(--accent) !important}
body.scope-guest .agent-av img{width:100%;height:100%;object-fit:cover}
body.scope-guest .rc-dms .chan-item{display:flex;align-items:center;gap:10px}
/* Readable guest buttons — soft, high-contrast, not neon eye-burn */
body.scope-guest .gc-btn,body.scope-guest .mini-btn.go,body.scope-guest .gmodal .gm-primary{
  background:rgba(56,189,210,.18) !important;color:#e8f7fb !important;font-weight:700 !important;
  border:1px solid rgba(56,189,210,.45) !important;box-shadow:none !important;
  text-transform:none !important;letter-spacing:.2px !important}
body.scope-guest .gc-btn:hover,body.scope-guest .gmodal .gm-primary:hover{
  background:rgba(56,189,210,.28) !important;border-color:rgba(125,220,235,.7) !important}
body.scope-guest .gc-btn.ghost,body.scope-guest .gmodal .gm-ghost{
  background:rgba(255,255,255,.04) !important;color:#c5d0e0 !important;border:1px solid rgba(255,255,255,.12) !important}
body.scope-guest .guest-tab-btn{background:rgba(255,255,255,.05) !important;color:#b8c4d6 !important;border:1px solid rgba(255,255,255,.1) !important}
body.scope-guest .guest-tab-btn.on{background:rgba(56,189,210,.2) !important;color:#e8f7fb !important;border-color:rgba(56,189,210,.5) !important}
/* ── VISITOR (unauthenticated) scope — v9.10.448 ─────────────────────────────
   Visitors can see Home feed, Browser, KAI Dreams. Everything else is hidden.
   Interactive actions (post, DM, comment, like) show a login prompt. */
body.scope-visitor [data-needs="admin"],
body.scope-visitor [data-needs="owner"],
body.scope-visitor .guest-hide,
body.scope-visitor .member-only{display:none !important}
body.scope-visitor .rail .rail-btn[data-view="antigravity"],
body.scope-visitor .rail .rail-btn[data-view="config"],
body.scope-visitor .rail .rail-btn[data-view="transcripts"],
body.scope-visitor .rail .rail-btn[data-view="topology"]{display:none !important}
body.scope-visitor .m-tabbar .m-tab[data-view="antigravity"],
body.scope-visitor .m-tabbar .m-tab[data-view="config"],
body.scope-visitor .m-tabbar .m-tab[data-view="transcripts"],
body.scope-visitor .m-tabbar .m-tab[data-view="topology"]{display:none !important}
body.scope-visitor .tb-right .metric{display:none !important}
body.scope-visitor #col-right,
body.scope-visitor #rc-toggle,
body.scope-visitor #m-open-right{display:none !important}
body.scope-visitor .shell{grid-template-columns:56px 0px 1fr 0px}
body.scope-visitor[data-view="home"] .shell{grid-template-columns:56px 0px 1fr 0px}
body.scope-visitor[data-view="home"] #col-left{display:none !important;width:0;overflow:hidden}
@media (max-width:900px){
  body.scope-visitor .shell{grid-template-columns:1fr !important}
  body.scope-visitor[data-view="home"] .shell{grid-template-columns:1fr !important}
}
/* Hide the composer/post box for visitors */
body.scope-visitor .compose-wrap,
body.scope-visitor .gc-compose,
body.scope-visitor .gpost-composer,
body.scope-visitor #compose-box{display:none !important}
/* Hide Settings/Session sections in quick menu for visitors */
body.scope-visitor [data-visitor-hide]{display:none !important}
/* Login prompt banner for visitors */
#visitor-login-banner{display:none;padding:16px 20px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(34,217,230,.08));border:1px solid rgba(99,102,241,.25);border-radius:14px;margin:12px 16px;text-align:center}
body.scope-visitor #visitor-login-banner{display:block}
#visitor-login-banner .vlb-text{font:500 14px Inter,sans-serif;color:#c8d6e5;margin-bottom:10px}
#visitor-login-banner .vlb-btn{display:inline-block;padding:10px 28px;border-radius:10px;border:1px solid rgba(99,102,241,.5);background:rgba(99,102,241,.2);color:#c7d2fe;font:600 14px Inter,sans-serif;cursor:pointer;transition:all .2s}
#visitor-login-banner .vlb-btn:hover{background:rgba(99,102,241,.35);border-color:#6366f1}
/* Visitor login modal */
#visitor-login-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);align-items:center;justify-content:center}
#visitor-login-modal.active{display:flex}
#visitor-login-modal .vlm-card{background:#0f172a;border:1px solid rgba(99,102,241,.3);border-radius:18px;padding:32px;max-width:380px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#visitor-login-modal .vlm-title{font:700 20px Inter,sans-serif;color:#e2e8f0;margin-bottom:8px}
#visitor-login-modal .vlm-sub{font:14px Inter,sans-serif;color:#94a3b8;margin-bottom:24px;line-height:1.5}
#visitor-login-modal .vlm-btn{display:block;width:100%;padding:14px;border-radius:12px;border:none;font:600 15px Inter,sans-serif;cursor:pointer;margin-bottom:10px;transition:all .2s}
#visitor-login-modal .vlm-login{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
#visitor-login-modal .vlm-login:hover{opacity:.9}
#visitor-login-modal .vlm-create{background:rgba(34,217,230,.15);color:#22d9e6;border:1px solid rgba(34,217,230,.3)}
#visitor-login-modal .vlm-create:hover{background:rgba(34,217,230,.25)}
#visitor-login-modal .vlm-close{background:transparent;color:#64748b;border:1px solid rgba(255,255,255,.08);margin-top:4px}
#visitor-login-modal .vlm-close:hover{color:#94a3b8;border-color:rgba(255,255,255,.15)}
#visitor-login-modal .vlm-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ghome-tabs{display:flex;gap:0;border-bottom:2px solid rgba(255,255,255,.06);margin-bottom:12px;background:rgba(10,14,22,.8);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5}
.ghome-tab{border:none;background:transparent;color:var(--muted);padding:10px 18px;font:600 13px Inter,sans-serif;cursor:pointer;border-bottom:3px solid transparent;display:flex;align-items:center;gap:6px;transition:color .15s,border-color .15s,background .15s}
.ghome-tab:hover{color:#e0e8f4;background:rgba(255,255,255,.03)}
.ghome-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.ghome-tab svg{opacity:.6}
.ghome-tab.on svg{opacity:1}
@media(max-width:900px){.ghome-tabs{display:none}}
/* v9.10.374 — the strip, once relocated into the topbar, must stop behaving like a
   sticky section header: no sticky, no own background/blur, no bottom border, no
   bottom margin. Purely presentational overrides on the SAME node, so every handler
   and the underline's data-active state survive the move. */
#topbar-tabs-mount .ghome-tabs{
  position:static;margin:0;border-bottom:none;background:transparent;backdrop-filter:none;z-index:auto;
}
#topbar-tabs-mount .ghome-tab{padding:6px 12px;font-size:12px}
#topbar-tabs-mount .ghome-underline{display:none}
/* v9.10.322 — Home header: Feed/Shorts swipe-pager tabs + a distinct Profile avatar button.
   "Me" left the equal-tab row and became this avatar button (top-right of the Home header). */
.ghome-topbar{display:flex;align-items:center;gap:10px}
.ghome-tabs{position:relative;display:flex;gap:2px;flex:0 0 auto}
.ghome-tabs .ghome-tab{flex:0 0 auto;min-width:78px;text-align:center;border-radius:8px 8px 0 0}
.ghome-underline{position:absolute;left:0;bottom:-2px;height:2px;width:50%;border-radius:2px;
  background:var(--accent);transition:transform .22s ease,opacity .15s;pointer-events:none}
.ghome-tabs[data-active="shorts"] .ghome-underline{transform:translateX(100%)}
.ghome-tabs[data-active="me"] .ghome-underline{opacity:0}
.ghome-plan{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.ghome-plan b{color:var(--accent)}
/* v9.10.327 — REQUEST 4: subtle 2-dot swipe pager indicator (replaces the removed Feed/Shorts tab bar) */
.ghome-pager-dots{display:flex;justify-content:center;gap:7px;padding:6px 0 4px}
.ghome-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .2s,transform .2s}
.ghome-pager-dots[data-active="feed"] .ghome-dot[data-dot="feed"],
.ghome-pager-dots[data-active="shorts"] .ghome-dot[data-dot="shorts"],
.ghome-pager-dots[data-active="me"] .ghome-dot[data-dot="me"]{background:var(--accent);transform:scale(1.25)}
/* v9.10.327 — REQUEST 4: tier verified badge overlaid on avatars (Twitter/YouTube-style) */
.gav-wrap{position:relative;display:inline-flex;flex:0 0 auto;vertical-align:middle}
.gtier-badge{position:absolute;right:8%;bottom:8%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--panel-solid,#0d1320);pointer-events:none}
.m-appbar .m-ab-btn.m-ab-profile.has-tier{overflow:visible}
/* v9.10.327 — REQUEST 2: reaction summary chips + tap-to-see-who list */
.gpost-rx{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0;cursor:pointer}
.gpost-rx-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:3px 10px;font:500 12px var(--ui),sans-serif;color:#c5d0e0;line-height:1.6;transition:background .12s,border-color .12s;cursor:pointer}
.gpost-rx-chip:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16)}
.gpost-rx-chip img{width:15px;height:15px;object-fit:contain;vertical-align:middle}
.gpost-rx-more{font-size:11px;color:var(--muted);margin-left:2px}
.gpost-rx-who{display:none;margin-top:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px 10px}
.gpost-rx-who.open{display:block}
.gpost-rx-who .rxw-grp{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:12.5px;color:#c5d0e0}
.gpost-rx-who .rxw-emote{flex:0 0 auto;white-space:nowrap}
.gpost-rx-who .rxw-emote img{width:16px;height:16px;object-fit:contain;vertical-align:middle}
.gpost-rx-who .rxw-names{color:#a9b6c8;word-break:break-word}
.gpost-emotes button img{width:18px;height:18px;object-fit:contain;vertical-align:middle}
.gpost-emote-add{border:1px dashed rgba(255,255,255,.28) !important;color:#9fb0c4 !important;font-size:14px !important;font-weight:700}
.ghome-profile-btn{flex:0 0 auto;padding:2px;border-radius:50%;line-height:0;cursor:pointer;display:inline-flex;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:border-color .15s,box-shadow .15s}
.ghome-profile-btn:hover{border-color:rgba(56,189,210,.6)}
.ghome-profile-btn.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,189,210,.3)}
.ghome-profile-btn img{display:block;border:none !important}
/* one-shot page-slide feedback when switching via swipe */
.ghome-swipe-l{animation:ghomeSlideL .2s ease}
.ghome-swipe-r{animation:ghomeSlideR .2s ease}
@keyframes ghomeSlideL{from{transform:translateX(26px);opacity:.45}to{transform:translateX(0);opacity:1}}
@keyframes ghomeSlideR{from{transform:translateX(-26px);opacity:.45}to{transform:translateX(0);opacity:1}}
body.scope-guest .gpost-acts button{color:#c5d0e0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px}
body.scope-guest .gpost-acts button.on,body.scope-guest .gpost-acts button:hover{
  color:#e8f7fb;background:rgba(56,189,210,.18);border-color:rgba(56,189,210,.4)}
body.scope-guest .gplace-card{background:rgba(20,28,42,.9);border-color:rgba(255,255,255,.08)}
body.scope-guest .guest-banner{background:linear-gradient(135deg,rgba(30,42,68,.55),rgba(40,30,70,.35));border-color:rgba(255,255,255,.1)}
/* In-app modal (never browser prompt) */
.gmodal-backdrop{display:none;position:fixed;inset:0;z-index:9000;background:rgba(4,8,16,.72);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:16px}
.gmodal-backdrop.open{display:flex}
.gmodal{width:min(440px,100%);max-height:min(88vh,640px);overflow:auto;background:#121a28;border:1px solid rgba(255,255,255,.12);
  border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.55);padding:18px 18px 14px;color:#e8eef8}
/* 2026-07-17: wide variant for content-rich modals (Settings → Plan & Usage) */
.gmodal.gm-lg{width:min(1320px,96vw);max-height:min(92vh,880px);padding:clamp(16px,2.2vw,26px)}
@media (max-width:640px){ .gmodal.gm-lg{width:100%;max-height:94vh} }
/* plan cards inside settings: horizontal scroll with snap on mobile */
#s2-plan-cards{-webkit-overflow-scrolling:touch;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:rgba(34,217,230,.3) transparent}
#s2-plan-cards::-webkit-scrollbar{height:6px}
#s2-plan-cards::-webkit-scrollbar-thumb{background:rgba(34,217,230,.3);border-radius:4px}
#s2-plan-cards .plan-tile{min-width:165px;max-width:210px;scroll-snap-align:start;flex:1 0 165px}
.s2-swipe-hint{display:none}
@media (max-width:640px){#s2-plan-cards{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px}
#s2-plan-cards .plan-tile{min-width:260px;flex:0 0 80vw}
#s2-plan-cards::after{content:'';flex:0 0 1px}
.s2-swipe-hint{display:block}}
.gmodal h3{margin:0 0 6px;font:800 16px Outfit,sans-serif;color:#eef3fb}
.gmodal .gm-sub{font-size:12px;color:#8b9bb0;margin:0 0 14px;line-height:1.45}
.gm-stab{border:none;background:transparent;color:var(--muted);padding:10px 14px;font:700 12px Outfit,sans-serif;cursor:pointer;border-bottom:3px solid transparent;transition:color .15s,border-color .15s;flex-shrink:0;white-space:nowrap}
#gm-set-tabs::-webkit-scrollbar{height:5px}
#gm-set-tabs::-webkit-scrollbar-thumb{background:rgba(34,217,230,.25);border-radius:4px}
.gm-srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.gm-srow .gm-sr-t{font-size:13px;color:#e0e8f4;font-weight:500}
.gm-srow .gm-sr-d{font-size:11px;color:var(--muted);margin-top:2px}
.gm-note{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.gm-sw{position:relative;width:40px;height:22px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.12);border:none;cursor:pointer;transition:background .2s}
.gm-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.gm-sw.on{background:var(--accent)}
.gm-sw.on::after{transform:translateX(18px)}
.gm-stab:hover{color:#e0e8f4;background:rgba(255,255,255,.03)}
.gm-stab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* 2026-07-18: per-category settings — left sub-nav + content pane */
.set2-wrap{display:flex;gap:0;margin:6px -22px -14px;min-height:min(62vh,560px)}
.set2-nav{width:210px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.07);padding:8px 8px 14px;overflow-y:auto}
.set2-nav .s2-cat{font:700 10px Outfit,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:#7b8aa0;padding:8px 10px 6px}
.set2-nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:transparent;color:#c5d0e0;font:600 12.5px Outfit,sans-serif;padding:9px 10px;border-radius:9px;cursor:pointer;transition:background .12s,color .12s}
.set2-nav button:hover{background:rgba(255,255,255,.05);color:#fff}
.set2-nav button.on{background:rgba(34,217,230,.14);color:var(--accent)}
.set2-nav button .s2-ic{width:16px;text-align:center;flex-shrink:0}
.set2-body{flex:1;min-width:0;padding:6px 22px 18px;overflow-y:auto;overflow-x:hidden}
@media (max-width:640px){
  .set2-wrap{flex-direction:column;min-height:auto}
  .set2-nav{width:auto;border-right:none;border-bottom:1px solid rgba(255,255,255,.07);display:flex;flex-wrap:wrap;gap:4px;padding:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .set2-nav .s2-cat{width:100%;padding:4px 6px 2px}
  .set2-nav button{width:auto;font-size:11px;padding:6px 8px}
  .set2-body{padding:8px 12px 14px}
}
/* ── Mobile responsive: settings, composer, feed, themes, frames ── */
@media (max-width:640px){
  /* Settings modal — near full screen on mobile */
  .gmodal-backdrop{padding:6px}
  .gmodal{width:100%;max-height:94vh;border-radius:12px;padding:14px 12px 12px}
  .gmodal.gm-lg{padding:10px;border-radius:12px}
  .gmodal h3{font-size:15px}
  /* Settings nav scrolls horizontally */
  .set2-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:2px;padding:4px 6px}
  .set2-nav button{white-space:nowrap;font-size:11px;padding:6px 8px;flex-shrink:0}
  .set2-body{padding:8px 10px 14px}
  /* Settings rows — let controls wrap below label on narrow */
  .set2-body [style*="justify-content:space-between"]{flex-wrap:wrap;gap:8px!important}
  /* Feed composer buttons wrap */
  .gpost-composer .gcomposer-opt{font-size:11px;padding:4px 8px}
  /* Theme grid cards 2-col */
  #s2-theme-grid{grid-template-columns:1fr 1fr!important}
  #s2-theme-grid > div{min-width:0!important}
  /* Frames grid 3-col */
  #s2-avatar-frames{grid-template-columns:repeat(3,1fr)!important}
  #s2-avatar-frames .s2-frame-pick{padding:8px 4px}
  /* Agent builder: avatar row stacks */
  #s2-ab-avatar-preview{width:64px!important;height:64px!important;border-radius:14px!important}
  /* Plan tiles swipe */
  .plan-tile{flex:0 0 80vw!important;min-width:0!important;max-width:none!important}
  .plan-grid{flex-wrap:nowrap!important;overflow-x:auto!important}
  /* Save bars wrap */
  .s2-savebar{flex-wrap:wrap}
  /* Summary card grids 2-col */
  [style*="repeat(auto-fit,minmax(130px"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important}
  /* Billing/payment stacks */
  [style*="gap:14px"][style*="align-items:center"][style*="border-radius:12px"]{flex-wrap:wrap}
  /* Poll inputs */
  #guest-post-poll input{font-size:12px}
  /* Costs vs Free grid stacks */
  [style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:14px"]{grid-template-columns:1fr!important}
  /* Post card style grid */
  [style*="repeat(auto-fill,minmax(150px"]{grid-template-columns:1fr 1fr!important}
  /* Wizard progress bar text smaller */
  [id^="s2-ab-step"] [style*="gap:4px"] > div{min-width:0}
  [id^="s2-ab-step"] [style*="gap:4px"] > div > div:last-child{font-size:9px!important}
  /* Avatar seed style buttons wrap */
  [id^="s2-abs-"]{font-size:9px!important;padding:2px 5px!important}
  /* Color picker preset circles */
  [style*="border-radius:50%"][style*="width:18px"]{width:16px!important;height:16px!important}
  [style*="border-radius:50%"][style*="width:20px"]{width:16px!important;height:16px!important}
  /* Stripe checkout overlay narrower */
  #sim-checkout-ov > div{max-width:100%!important;margin:0 8px}
  /* Workspace Composer history panel */
  #ag-history-panel{top:30px!important}
  /* Composer Plan/Agent buttons smaller */
  #ag-mode-plan,#ag-mode-agent{font-size:9px!important;padding:2px 6px!important}
}
@media (max-width:400px){
  /* Very small phones (iPhone SE etc) */
  .gmodal-backdrop{padding:2px}
  .gmodal{border-radius:8px;padding:10px 8px 8px;max-height:96vh}
  .set2-nav button{font-size:9px;padding:4px 6px}
  .set2-body{padding:4px 8px 10px}
  #s2-theme-grid{grid-template-columns:1fr!important}
  #s2-avatar-frames{grid-template-columns:repeat(2,1fr)!important}
  .gmodal.gm-lg{padding:6px;border-radius:8px;max-height:96vh}
  .plan-tile{flex:0 0 85vw!important}
  /* Settings section headers smaller */
  .set2-body [style*="font:700 10px"]{font-size:9px!important}
  /* Agent builder avatar preview row stacks */
  [style*="display:flex"][style*="gap:16px"][style*="align-items:flex-start"]{flex-direction:column;align-items:center!important}
}
/* ── Quick Menu (left drawer opened by the Oracle OS logo) 2026-07-18 ── */
#quick-menu-backdrop{position:fixed;inset:0;z-index:6000;background:rgba(4,7,13,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .28s ease}
body.qm-open #quick-menu-backdrop{opacity:1;pointer-events:auto}
#quick-menu{position:fixed;left:0;top:0;bottom:0;width:min(320px,86vw);z-index:6001;background:linear-gradient(180deg,#111a2b,#0b1220);border-right:1px solid rgba(34,217,230,.18);box-shadow:10px 0 46px rgba(0,0,0,.55);transform:translateX(-102%);transition:transform .32s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
body.qm-open #quick-menu{transform:translateX(0)}
/* 2026-07-18: the Oracle OS logo is now the menu trigger — retire the old right-side ⟩ handle */
#rc-toggle{display:none !important}
/* Settings opens BESIDE the quick menu — offset into the free space on the right,
   menu stays open + clickable, no second dim (the quick-menu backdrop already dims). */
body.qm-panel #gmodal-backdrop{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;justify-content:flex-start !important;padding-left:calc(min(320px,86vw) + 72px) !important;z-index:6001 !important;pointer-events:none}
body.qm-panel #gmodal{pointer-events:auto}
body.qm-panel #quick-menu{z-index:6002 !important}
@media (max-width:900px){ body.qm-panel #gmodal-backdrop{padding-left:0 !important;justify-content:center !important} }
/* 2026-07-18: notifications bell + panel */
body.scope-guest:not(.force-mobile) #tb-notif-wrap,body.scope-guest.force-desktop #tb-notif-wrap{display:block}
@media (max-width:900px){ body.scope-guest:not(.force-desktop) #tb-notif-wrap{display:none !important} }
#notif-panel{position:fixed;top:58px;right:14px;width:min(340px,92vw);max-height:min(70vh,460px);z-index:6500;background:linear-gradient(180deg,#111a2b,#0b1220);border:1px solid rgba(34,217,230,.18);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);display:none;flex-direction:column;overflow:hidden}
#notif-panel.open{display:flex;animation:npIn .16s ease}
@keyframes npIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#notif-panel .np-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);font:700 13px Outfit,sans-serif;color:#eef3fb}
#notif-panel .np-head button{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px}
#notif-panel .np-body{overflow-y:auto;padding:4px}
/* bottom-right notification toasts (fade out after a few seconds) */
#notif-toasts{position:fixed;right:16px;bottom:76px;z-index:7000;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:340px}
.notif-toast{pointer-events:auto;background:linear-gradient(135deg,#111a2b,#0b1220);border:1px solid rgba(34,217,230,.28);border-radius:12px;padding:11px 14px;box-shadow:0 10px 34px rgba(0,0,0,.5);opacity:0;transform:translateX(24px);transition:opacity .3s ease,transform .3s ease;cursor:pointer}
.notif-toast.in{opacity:1;transform:none}
.notif-toast .nt-title{font:700 12.5px Outfit,sans-serif;color:#eef3fb}
.notif-toast .nt-body{font-size:11.5px;color:var(--muted);margin-top:3px}
.qm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.qm-title{font:800 15px Outfit,sans-serif;color:#eef3fb;letter-spacing:.3px}
.qm-close{border:none;background:rgba(255,255,255,.05);color:var(--muted);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;transition:background .15s}
.qm-close:hover{background:rgba(255,255,255,.1);color:#fff}
/* v9.10.400 (owner: "the chat side menu that pops up needs improved") — the Quick
   Menu stays a drawer; it was just loose and off-language. Three fixes, no
   destinations removed: (1) emoji glyphs -> drawn SVG line icons matching the
   header/nav set, (2) tighter vertical rhythm so the whole menu fits without
   scrolling, (3) each section is now a bounded card so GO TO vs SETTINGS read as
   distinct groups. Padding uses LONGHANDS. No `overflow` declaration added — the
   pre-existing .qm-scroll one is left exactly as it was. */
.qm-scroll{flex:1;overflow-y:auto;padding-top:8px;padding-right:10px;padding-bottom:18px;padding-left:10px}
.qm-sec{font:700 9.5px Outfit,sans-serif;color:var(--muted-2);letter-spacing:1px;text-transform:uppercase;padding-top:12px;padding-right:8px;padding-bottom:5px;padding-left:8px}
.qm-grp{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding-top:3px;padding-right:3px;padding-bottom:3px;padding-left:3px}
.qm-row{display:flex;align-items:center;gap:11px;width:100%;border:none;background:transparent;color:#d7e0ee;font:600 13.5px Outfit,sans-serif;padding-top:8.5px;padding-right:10px;padding-bottom:8.5px;padding-left:10px;border-radius:9px;cursor:pointer;text-align:left;transition:background .15s,transform .1s}
.qm-row:hover{background:rgba(34,217,230,.1);transform:translateX(3px)}
.qm-row .qm-ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#7f92ab;transition:color .15s}
.qm-row .qm-ico svg{width:17px;height:17px;display:block}
.qm-row:hover .qm-ico{color:var(--accent)}
/* v9.10.405 — MESSAGING PAGE SPLIT (owner ask: the desktop pane was mostly dead space).
   Phone/base = single column, exactly as before. Desktop = list column + preview panel.
   No `overflow` declaration anywhere here: the list keeps scrolling inside .transcript's
   existing overflow-y, which is the container it already lived in. Padding LONGHANDS. */
/* v9.10.408 — on the Messaging PAGE the old left MESSAGES rail duplicates the list, so
   its grid track is collapsed to 0. Mirrors the existing `[data-view="home"]` pattern
   (same file, a few rules up) rather than inventing a new mechanism, and is scoped to
   desktop — on phones the rail is already a drawer and is never beside the list. */
@media (min-width:901px){
  body.scope-guest.msg-page:not(.force-mobile) .shell{grid-template-columns:56px 0px 1fr 0px}
  body.msg-page:not(.force-mobile) #col-left{display:none}
}
body.force-desktop.msg-page .shell{grid-template-columns:56px 0px 1fr 0px}
body.force-desktop.msg-page #col-left{display:none}
/* v9.10.408b — channels render twice (right panel on desktop, list foot on phones);
   exactly one is ever visible. Base = phone, so the list copy shows and the panel is
   already display:none from the .msgpane-side rule below. */
.msg-chan-m{display:block}
@media (min-width:901px){ .msg-chan-m{display:none} }
body.force-mobile .msg-chan-m{display:block}
body.force-desktop .msg-chan-m{display:none}
.msgpane{display:flex;flex-direction:column;width:100%;min-width:0}
.msgpane-list{width:100%;min-width:0}
.msgpane-side{display:none}
@media (min-width:901px){
  .msgpane{flex-direction:row;align-items:flex-start;gap:0}
  .msgpane-list{flex:0 0 560px;width:560px;border-right:1px solid rgba(148,163,184,.07)}
  .msgpane-side{display:block;flex:1 1 auto;min-width:0;align-self:stretch}
  .msgpane-side-inner{padding-top:22px;padding-right:26px;padding-bottom:22px;padding-left:26px;max-width:620px}
}
/* force-mobile mirror — a prior bug shipped a mobile block without its twin, so the
   forced-mobile layout must explicitly collapse back to the single column. */
body.force-mobile .msgpane{flex-direction:column}
body.force-mobile .msgpane-list{flex:1 1 auto;width:100%;border-right:none}
body.force-mobile .msgpane-side{display:none}
body.force-desktop .msgpane{flex-direction:row;align-items:flex-start}
body.force-desktop .msgpane-list{flex:0 0 560px;width:560px;border-right:1px solid rgba(148,163,184,.07)}
body.force-desktop .msgpane-side{display:block;flex:1 1 auto;min-width:0}
.qm-row.qm-danger{color:#f87171}
.qm-row.qm-danger .qm-ico{color:#f87171}
.qm-row.qm-danger:hover{background:rgba(248,113,113,.12)}
/* v9.10.345 — in-menu BACK button on the settings popup. Only on mobile (where the
   Quick-Menu closes to open settings); on desktop the menu stays open beside the
   panel so a Back control would be redundant. */
.s2-back{display:none;align-items:center;gap:4px;background:rgba(34,217,230,.12);border:1px solid rgba(34,217,230,.28);color:var(--accent);font:700 12px Outfit,sans-serif;padding:7px 12px;border-radius:9px;cursor:pointer;margin:0 0 10px}
.s2-back:hover{background:rgba(34,217,230,.2)}
@media(max-width:900px){ .s2-back{display:inline-flex} }
body.force-mobile .s2-back{display:inline-flex}
.brand{cursor:pointer;user-select:none}
.brand:hover .logo{box-shadow:0 0 0 2px rgba(34,217,230,.4)}
.gm-ucard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 10px;text-align:center}
.gm-uval{font:700 20px Outfit,sans-serif;color:#eef3fb}
.gm-ulbl{font-size:11px;color:var(--muted);margin-top:2px}
.gmodal label{display:block;font-size:11px;font-weight:700;color:#8b9bb0;margin:10px 0 4px;letter-spacing:.4px;text-transform:uppercase}
.gmodal input,.gmodal textarea,.gmodal select{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);color:#e8eef8;padding:10px 12px;font:13px/1.4 Inter,sans-serif;outline:none}
.gmodal input:focus,.gmodal textarea:focus,.gmodal select:focus{border-color:rgba(56,189,210,.55)}
.gmodal textarea{min-height:72px;resize:vertical}
.gmodal .gm-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.gmodal .gm-acts button{border-radius:10px;padding:9px 14px;font:700 12px Outfit,sans-serif;cursor:pointer}
.gmodal .gm-msg{font-size:12px;color:#8b9bb0;margin-top:8px;min-height:1.2em}
/* Guest right-rail diversify cards */
.grf-card{background:rgba(16,22,36,.9);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px}
.grf-card .grf-h{font:700 10px Outfit,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#8b9bb0;margin-bottom:8px}
.grf-card .grf-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;color:#e8eef8;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left}
.grf-card .grf-row:last-child{border-bottom:none}
.grf-card .grf-row:hover{color:#7dd3e8}
.grf-card .grf-av{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#1a2233;flex-shrink:0}
/* Unread badge on mobile Chats tab */
.m-tab .m-tab-badge{position:absolute;top:4px;right:calc(50% - 22px);min-width:14px;height:14px;padding:0 4px;border-radius:8px;
  background:#f43f5e;color:#fff;font:700 9px Outfit,sans-serif;display:none;align-items:center;justify-content:center;line-height:1}
.m-tab{position:relative}
.m-tab .m-tab-badge.on{display:inline-flex}
/* Social profile (Me) — FB-style, soft on eyes */
.gprof{max-width:920px;margin:0 auto;position:relative;z-index:1}
/* Steam-style themed shell: page bg color + optional theme image + cover + showcase */
.gprof-theme-shell{position:relative;border-radius:16px;overflow:hidden;padding:0 0 12px;
  background:var(--gprof-theme-bg,#0a0e16);border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 40px rgba(0,0,0,.35)}
.gprof-theme-shell::before{content:'';position:absolute;inset:0;background-image:var(--gprof-theme-img,none);
  background-size:cover;background-position:center top;opacity:var(--gprof-theme-opacity,.42);pointer-events:none;z-index:0;
  filter:saturate(1.05) brightness(.95)}
.gprof-theme-shell::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.72) 100%)}
.gprof-theme-shell > *{position:relative;z-index:1}
.gprof-theme-shell .guest-card{background:rgba(10,14,22,.78);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.08)}
.gprof-cover{height:220px;border-radius:16px 16px 0 0;background:linear-gradient(135deg,#1a2744 0%,#0d3a4a 45%,#1a1540 100%);
  background-size:cover;background-position:center;position:relative;overflow:hidden;border:1px solid var(--border);border-bottom:none;
  cursor:pointer}
.gprof-cover.has-img{background-color:#111}
.gprof-cover:hover .gprof-cover-btn{background:rgba(0,0,0,.75);border-color:rgba(34,217,230,.45)}
.gprof-cover-btn{position:absolute;bottom:12px;right:16px;display:flex;gap:6px;align-items:center;
  background:rgba(0,0,0,.55);padding:7px 14px;border-radius:8px;font-size:12px;color:#fff;cursor:pointer;
  backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);font-weight:600}
.gprof-showcase-wrap{margin-top:10px}
.gprof-showcase-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8899aa;margin-bottom:6px;font-weight:700}
.gprof-showcase{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:28px}
.gprof-showcase .gb-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(34,217,230,.35);background:rgba(34,217,230,.12);font-size:12px;color:#e8eef8;font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.gprof-showcase .gb-chip .gb-ic{font-size:16px;line-height:1}
.gprof-showcase .gb-empty{font-size:12px;color:#7a8a9c;cursor:pointer}
.gprof-showcase .gb-empty:hover{color:var(--accent)}
.gprof-theme-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.gprof-theme-presets button{width:32px;height:32px;border-radius:8px;border:2px solid rgba(255,255,255,.15);cursor:pointer;padding:0}
.gprof-theme-presets button.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,217,230,.35)}
.gprof-theme-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gprof-theme-row input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--border);border-radius:8px;
  background:transparent;cursor:pointer}
.gprof-theme-preview{height:72px;border-radius:10px;border:1px solid var(--border);margin:10px 0 4px;position:relative;overflow:hidden;
  background:#0a0e16}
.gprof-theme-preview .pv-cover{height:36px;background:linear-gradient(135deg,#1a2744,#0d3a4a)}
.gprof-theme-preview .pv-label{position:absolute;bottom:6px;left:10px;font-size:10px;color:#c5d0e0;font-weight:600}
.gprof-badge-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:200px;overflow:auto;margin-top:8px}
.gprof-badge-pick label{display:flex;align-items:center;gap:6px;padding:8px;border-radius:10px;border:1px solid var(--border);
  background:rgba(0,0,0,.25);font-size:11px;color:#c5d0e0;cursor:pointer}
.gprof-badge-pick label.on{border-color:var(--accent);background:rgba(34,217,230,.1)}
.gprof-badge-pick input{accent-color:var(--accent)}
.gprof-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:0 24px 16px;margin-top:-64px;position:relative}
.gprof-av{width:148px;height:148px;border-radius:50%;border:5px solid #0a0e16;background:#111;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer;transition:filter .2s}
.gprof-av:hover{filter:brightness(1.1)}
.gprof-id{flex:1;min-width:160px;padding-bottom:4px;padding-top:16px}
.gprof-id h1{margin:0;font:800 26px Outfit,sans-serif;color:#eef3fb}
.gprof-id .gh{color:var(--accent);font-size:13px;margin-top:2px}
.gprof-id .bio{color:#c5d0e0;font-size:14px;line-height:1.5;margin-top:8px;max-width:480px}
.gprof-highlights{display:flex;gap:6px;flex-wrap:wrap;padding:2px 24px 0;font-size:13px;color:#a0acbf}
.gprof-highlights .gph-item{display:flex;align-items:center;gap:5px}
.gprof-highlights .gph-item svg{width:14px;height:14px;fill:currentColor;opacity:.6}
.gprof-highlights .gph-sep{color:rgba(255,255,255,.15);margin:0 2px}
.gprof-stats{display:flex;gap:18px;padding:10px 24px;font-size:12px;color:var(--muted)}
.gprof-stats b{color:#e8eef8;font-size:14px;display:block}
.gprof-divider{border:none;border-top:1px solid rgba(255,255,255,.06);margin:0 24px}
.gprof-tabs{display:flex;gap:0;padding:0 12px;border-bottom:2px solid rgba(255,255,255,.06);flex-wrap:wrap;position:sticky;top:56px;z-index:2;background:rgba(10,14,22,.95);backdrop-filter:blur(8px)}
.gprof-tabs button{border:none;background:transparent;color:var(--muted);padding:12px 16px;font:700 13px Outfit,sans-serif;cursor:pointer;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.gprof-tabs button:hover{color:#e0e8f4;background:rgba(255,255,255,.04)}
.gprof-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.gprof-body{display:grid;grid-template-columns:1fr;gap:14px;padding:14px 0}
@media (min-width:900px){
  .gprof-body{grid-template-columns:280px minmax(0,1fr)}
}
.gprof-side .guest-card,.gprof-main .guest-card{background:rgba(16,22,36,.85)}
/* Soft place cards (Me map) — no eye-burn cyan bars */
.gplace-card{display:block;width:100%;text-align:left;margin:0 0 8px;padding:12px 14px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#e8eef8;transition:border-color .15s,background .15s}
.gplace-card:hover{border-color:rgba(34,217,230,.35);background:rgba(34,217,230,.06)}
.gplace-title{font:700 13px Outfit,sans-serif;color:#e8eef8}
.gplace-sub{font-size:11px;color:#8b9bb0;margin-top:3px;line-height:1.4}
/* Call + video header buttons */
#ch-videobtn{display:none}
#ch-callbtn,#ch-videobtn{align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  border:1px solid rgba(34,217,230,.35);background:rgba(34,217,230,.1);color:var(--accent);cursor:pointer}
#ch-callbtn:hover,#ch-videobtn:hover{background:rgba(34,217,230,.22)}
/* ══ CALL OVERLAY — voice/video calling UI ══════════════════════════════════ */
#call-overlay{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;background:rgba(4,8,18,.92);backdrop-filter:blur(18px);flex-direction:column}
#call-overlay.active{display:flex}
#call-overlay.minimized{inset:auto;right:18px;bottom:80px;width:320px;height:auto;border-radius:16px;border:1px solid rgba(34,217,230,.25);box-shadow:0 12px 40px rgba(0,0,0,.6)}
.call-status{font:600 13px Outfit,sans-serif;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px}
.call-peer-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px}
.call-peer-avatar{width:120px;height:120px;border-radius:50%;border:3px solid rgba(34,217,230,.4);overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font:800 42px Outfit,sans-serif;color:#e8eef8}
.call-peer-avatar img{width:100%;height:100%;object-fit:cover}
.call-peer-name{font:700 22px Outfit,sans-serif;color:#eef3fb}
.call-timer{font:500 14px 'JetBrains Mono',monospace;color:var(--muted);margin-top:4px}
/* Signal strength indicator */
.call-signal{display:flex;align-items:center;gap:6px;margin-top:6px}
.csig-bars{display:flex;align-items:flex-end;gap:2px;height:16px}
.csig-bars span{display:block;width:4px;border-radius:1px;background:rgba(255,255,255,.15);transition:height .3s,background .3s}
.csig-bars span:nth-child(1){height:4px}
.csig-bars span:nth-child(2){height:7px}
.csig-bars span:nth-child(3){height:10px}
.csig-bars span:nth-child(4){height:13px}
.csig-bars span:nth-child(5){height:16px}
.csig-bars.sig-5 span{background:#22c55e}
.csig-bars.sig-4 span:nth-child(-n+4){background:#22c55e}
.csig-bars.sig-3 span:nth-child(-n+3){background:#eab308}
.csig-bars.sig-2 span:nth-child(-n+2){background:#f97316}
.csig-bars.sig-1 span:nth-child(1){background:#ef4444}
.csig-bars.sig-0 span{background:rgba(255,255,255,.1)}
.csig-label{font:500 10px 'JetBrains Mono',monospace;color:var(--muted)}
@keyframes callPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,217,230,.4)}50%{box-shadow:0 0 0 18px rgba(34,217,230,0)}}
.call-ringing .call-peer-avatar{animation:callPulse 2s ease infinite}
.call-controls{display:flex;gap:14px;align-items:center;padding:18px 24px}
.call-ctrl{width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;color:#fff}
.call-ctrl:hover{transform:scale(1.08)}
.call-ctrl.end{background:#dc2626}
.call-ctrl.end:hover{background:#ef4444}
.call-ctrl.mute{background:rgba(255,255,255,.12)}
.call-ctrl.mute.active{background:#f59e0b;color:#000}
.call-ctrl.cam{background:rgba(255,255,255,.12)}
.call-ctrl.cam.active{background:#3b82f6}
.call-ctrl.add{background:rgba(255,255,255,.12)}
.call-ctrl.mic-switch{background:rgba(255,255,255,.08)}
.call-device-picker{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  background:rgba(13,19,32,.97);border:1px solid rgba(99,102,241,.2);border-radius:12px;
  padding:6px 0;min-width:240px;max-width:320px;box-shadow:0 12px 40px rgba(0,0,0,.6);z-index:10;
  backdrop-filter:blur(12px)}
.call-device-picker .cdp-item{display:block;width:100%;border:none;background:none;color:#c8d6e5;
  font:12px Outfit,sans-serif;padding:10px 16px;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-device-picker .cdp-item:hover{background:rgba(99,102,241,.15)}
.call-device-picker .cdp-item.active{color:var(--accent,#22d9e6);font-weight:600}
/* mic-switch stays visible on all sizes — flex-wrap on .call-controls handles overflow */
/* Add people panel */
.call-add-panel{position:absolute;top:12px;left:12px;width:min(300px,85vw);max-height:70vh;
  background:rgba(13,19,32,.97);border:1px solid rgba(99,102,241,.2);border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:10;overflow:hidden;display:flex;flex-direction:column;
  backdrop-filter:blur(12px)}
.cap-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.cap-title{font:700 14px Outfit,sans-serif;color:#eef3fb}
.cap-close{border:none;background:none;color:#64748b;font-size:20px;cursor:pointer;padding:2px 6px}
.call-add-panel input{margin:10px 12px;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#e2e8f0;font:12px Outfit,sans-serif;outline:none}
.cap-list{flex:1;overflow-y:auto;padding:4px 0}
.cap-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .1s}
.cap-item:hover{background:rgba(99,102,241,.12)}
.cap-item .cap-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#1a2236;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.cap-item .cap-av img{width:100%;height:100%;object-fit:cover}
.cap-item .cap-name{font:600 12px Outfit,sans-serif;color:#e2e8f0}
.cap-item .cap-role{font:10px Outfit,sans-serif;color:var(--muted)}
.cap-item .cap-badge{font:600 9px Outfit,sans-serif;padding:2px 6px;border-radius:4px;margin-left:auto}
.cap-item .cap-badge.ai{background:rgba(99,102,241,.15);color:#a5b4fc}
.cap-item .cap-badge.human{background:rgba(34,197,94,.15);color:#4ade80}
.cap-item .cap-badge.in-call{background:rgba(251,191,36,.15);color:#fbbf24}
.cap-in-call{border-top:1px solid rgba(255,255,255,.06);padding:8px 14px}
.cap-in-call .cap-label{font:700 9px Outfit,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
/* Call participants strip */
.call-participants{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.call-participant{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px}
.call-participant .cp-av{width:clamp(32px,8vw,44px);height:clamp(32px,8vw,44px);border-radius:50%;overflow:hidden;border:2px solid var(--accent-glow,rgba(34,217,230,.3));
  display:flex;align-items:center;justify-content:center;background:#1a2236;font-size:18px}
.call-participant .cp-av img{width:100%;height:100%;object-fit:cover}
.call-participant .cp-av.speaking{border-color:var(--accent,#22d9e6);box-shadow:0 0 12px var(--accent-glow,rgba(34,217,230,.3));animation:cp-pulse .8s ease-in-out infinite alternate}
.call-participant .cp-name{font:600 10px Outfit,sans-serif;color:#c8d6e5;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes cp-pulse{0%{box-shadow:0 0 8px var(--accent-glow)}100%{box-shadow:0 0 20px var(--accent-glow)}}
.call-ctrl.speaker{background:rgba(255,255,255,.08)}
.call-ctrl.speaker.active{background:var(--accent-glow,rgba(34,217,230,.2));color:var(--accent,#22d9e6)}
.call-video-container{position:relative;width:100%;flex:1;background:#000;border-radius:14px;overflow:hidden;min-height:200px}
.call-video-container video.remote{width:100%;height:100%;object-fit:cover}
.call-video-container .self-pip{position:absolute;bottom:12px;right:12px;width:160px;height:120px;border-radius:12px;overflow:hidden;border:2px solid var(--accent-glow,rgba(34,217,230,.35));cursor:move;z-index:2;background:#111;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.call-video-container .self-pip video{width:100%;height:100%;object-fit:cover}
/* screen-share mode: screen fills the container, remote cam is a small PIP top-right */
.call-video-container .remote-cam-pip{position:absolute;top:12px;right:12px;width:180px;height:135px;border-radius:10px;overflow:hidden;border:2px solid rgba(34,217,230,.35);z-index:3;background:#111;display:none}
.call-video-container .remote-cam-pip video{width:100%;height:100%;object-fit:cover}
.call-video-container.screen-share-mode{max-width:1100px;aspect-ratio:auto;height:70vh}
.call-video-container.screen-share-mode video.remote{object-fit:contain}
/* incoming call banner */
.call-incoming{position:fixed;top:70px;right:18px;z-index:9600;background:linear-gradient(135deg,#111a2b,#0b1220);border:1px solid rgba(34,217,230,.35);border-radius:16px;padding:16px 20px;box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;align-items:center;gap:14px;animation:slideInRight .3s ease;max-width:calc(100vw - 36px)}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.call-incoming .ci-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font:700 18px Outfit,sans-serif;color:#e8eef8;flex-shrink:0}
.call-incoming .ci-avatar img{width:100%;height:100%;object-fit:cover}
.call-incoming .ci-info{flex:1}
.call-incoming .ci-name{font:700 14px Outfit,sans-serif;color:#eef3fb}
.call-incoming .ci-sub{font-size:11px;color:var(--muted);margin-top:2px}
.call-incoming .ci-btns{display:flex;gap:8px}
.call-incoming .ci-btn{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.call-incoming .ci-btn:hover{transform:scale(1.1)}
.call-incoming .ci-btn.accept{background:#22c55e;color:#fff}
.call-incoming .ci-btn.decline{background:#dc2626;color:#fff}
/* call settings panel */
.call-settings-panel{position:absolute;bottom:80px;right:20px;width:280px;background:linear-gradient(180deg,#111a2b,#0b1220);border:1px solid rgba(34,217,230,.2);border-radius:14px;padding:16px;z-index:2;box-shadow:0 12px 40px rgba(0,0,0,.5);display:none}
.call-settings-panel.open{display:block}
.call-settings-panel .cs-title{font:700 13px Outfit,sans-serif;color:#eef3fb;margin-bottom:12px}
.call-settings-panel label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;margin-top:10px}
.call-settings-panel select{width:100%;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#e8eef8;font-size:12px;outline:none;appearance:none;-webkit-appearance:none}
.call-settings-panel select option{background:#111a2b;color:#e8eef8;padding:6px}
/* ── v9.10.424 — CALL-SETTINGS TRAP FIX ───────────────────────────────────────
   Owner: "when I call someone ... and I go in the settings I can't tap to get out
   of the settings, it glitches so I have to close the app and reopen the app."
   REAL CAUSE (measured, not guessed): .call-settings-panel is
   position:absolute;bottom:80px;right:20px;z-index:2 while .call-controls was a
   STATIC flex item with no position and no z-index. #call-overlay is a centred
   flex column, so on a phone-height viewport the centred controls row lands at
   roughly y 470-560 while the ~225px-tall panel spans roughly y 476-700 — the
   positioned panel painted straight OVER the gear button, and the gear was the
   only thing that could close it (no close button, no Escape, no outside-tap, no
   back handler existed). Desktop never reproduced it: at 1080px tall the controls
   sit ~620-710 and the panel ~776-1000, so they never touch. That is why this only
   bit on mobile.
   Three independent guarantees now, so no single failure can trap the user again:
   1. the controls always paint ABOVE the panel and stay tappable,
   2. on short/narrow viewports the panel moves off the controls entirely,
   3. the panel has its own close button (plus Escape / outside-tap / back, in JS).
   NOTE: no `overflow` is set anywhere here on purpose — the panel holds three
   selects and is never tall enough to need scrolling, and one axis of overflow
   would create a scroll container (the bug that froze the feed once). */
.call-controls{position:relative;z-index:6}
.call-settings-panel{z-index:5}
/* ── v9.10.427 — CALL LAYOUT: remote on top, self below, control BAR at bottom ─
   Owner: "the call stuff should be at the bottom and the user I'm calling on top
   and I'm on bottom. plus we need a bar for voice/video."
   BEFORE: #call-overlay centred its column, and .call-video-container was a
   max-width:800px; aspect-ratio:16/9 box — so on a 360px-wide phone it rendered a
   ~360x203 letterboxed strip floating in the vertical middle with huge black bands
   above and below, the self-view as a small PiP over the remote person's face, and
   the control row sitting mid-screen directly under the strip.
   AFTER: the stage fills the screen, the remote fills the top, the self-view is
   its own tile underneath it, and the controls are a real bar pinned to the bottom.
   HOW THE BAR IS PINNED WITHOUT position:fixed: #call-overlay is already a flex
   column, so `margin-top:auto` on .call-controls pushes it to the bottom edge —
   no new fixed positioning anywhere (hard constraint), and no `overflow` either. */
.call-controls{margin-top:auto;width:100%;justify-content:center;flex-wrap:wrap;row-gap:10px;background:linear-gradient(180deg,rgba(8,14,26,0),rgba(8,14,26,.85));padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
/* ── the 360px arithmetic (the clipped-gear bug) ─────────────────────────────
   The connected-call row is mute+cam+end+screen+add(48px each) + settings(36px).
   OLD: 48*5 + 36 + gaps(5*14=70) + padding(24*2=48) = 394px > 360px viewport, so
   the LAST control — the gear — was pushed off the right edge and could not be
   tapped at all. Not a scroll problem; the row was simply wider than the phone.
   NEW at <=430px: 42*5 + 34 + gaps(5*8=40) + padding(10*2=20) = 304px, which fits
   360px with 56px to spare and still fits a 320px iPhone SE. flex-wrap is belt-and
   -braces: if a future button is added the row wraps to a second line instead of
   ever putting a control out of reach again. */
/* ── 600px intermediate breakpoint — mid-size phones ──────────────────────── */
@media (max-width:600px){
  .call-ctrl{width:44px;height:44px}
  .call-participant .cp-av{width:36px;height:36px;font-size:15px}
  .call-peer-avatar{width:100px;height:100px;font:800 36px Outfit,sans-serif}
}
/* ── landscape / short viewport — prevent overflow ────────────────────────── */
@media (max-height:500px) and (orientation:landscape){
  .call-peer-card{padding:12px 20px;gap:8px}
  .call-peer-avatar{width:64px;height:64px;font:800 24px Outfit,sans-serif}
  .call-peer-name{font-size:16px}
  .call-controls{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:430px){
  .call-controls{gap:8px;padding-left:10px;padding-right:10px;padding-top:12px}
  .call-ctrl{width:42px;height:42px}
  .call-ctrl.settings{width:34px;height:34px}
  /* remote fills the top, self-view becomes its own tile beneath it */
  .call-video-container{flex:1 1 auto;width:100%;max-width:none;aspect-ratio:auto;height:auto;min-height:0;border-radius:12px;margin-top:6px}
  .call-video-container video.remote{width:100%;height:100%;object-fit:cover;border-radius:10px}
  .call-video-container .self-pip{position:absolute;bottom:10px;right:10px;width:100px;height:75px;border-radius:10px}
  /* voice calls: keep the peer card comfortably in the upper area, not dead centre */
  #call-overlay.active .call-peer-card{padding-top:40px;padding-bottom:20px}
}
body.force-mobile .call-controls{gap:8px;padding-left:10px;padding-right:10px;padding-top:12px}
body.force-mobile .call-ctrl{width:42px;height:42px}
body.force-mobile .call-ctrl.settings{width:34px;height:34px}
body.force-mobile .call-video-container{flex:1 1 auto;width:100%;max-width:none;aspect-ratio:auto;height:auto;min-height:0;border-radius:12px;margin-top:6px}
body.force-mobile .call-video-container video.remote{width:100%;height:100%;object-fit:cover;border-radius:10px}
body.force-mobile .call-video-container .self-pip{position:absolute;bottom:10px;right:10px;width:100px;height:75px;border-radius:10px}
/* ── v9.10.427 — FLIP CAMERA, top-right, where the owner asked for it ──────── */
.call-flip-btn{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:7;width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.14);color:#e8eef8;display:none;align-items:center;justify-content:center}
.call-flip-btn:hover{background:rgba(255,255,255,.24)}
#call-overlay.active.has-cam .call-flip-btn{display:flex}
#call-overlay.incoming .call-flip-btn{display:none}
/* v9.10.437 - AI CALL, asymmetric video. An agent has no camera, so the remote
   <video> in an AI call would render as a black rectangle - which reads as "broken
   call", not "this participant has no camera". In .aicall-video the remote element
   is hidden and OUR self preview fills the tile instead; the agent is represented by
   the peer card above it (avatar + the existing pulse cue when it speaks). Scoped
   entirely under #call-overlay.aicall-video so no human call can ever match it.
   Adds no scroll-clipping property (the base .self-pip rule already clips) and no
   fixed positioning - the two rules below are display + box sizing only. */
#call-overlay.aicall-video .call-video-container video.remote{display:none}
/* AI call: self camera is the main stage (agent has no camera) — make it LARGE */
#call-overlay.aicall-video .call-video-container{
  flex:1 1 auto;width:min(96vw,920px);max-width:none;aspect-ratio:auto;min-height:42vh;
  height:auto;display:flex;flex-direction:column;margin:8px auto 0;border-radius:16px
}
#call-overlay.aicall-video .call-video-container .self-pip,
#call-overlay.aicall-video .call-video-container .self-pip.aicall-self-large{
  position:static;width:100%;flex:1 1 auto;min-height:38vh;height:100%;
  border-radius:14px;cursor:default;border:2px solid rgba(34,217,230,.35)
}
#call-overlay.aicall-video .call-video-container .self-pip video{
  width:100%;height:100%;object-fit:cover;transform:scaleX(-1) /* mirror selfie */
}
/* Human call PiP — bigger than 140×105 so you can actually see yourself */
.call-video-container .self-pip{width:min(42vw,220px);height:min(32vw,165px)}
@media (max-width:430px){
  #call-overlay.aicall-video .call-video-container{min-height:48vh;width:100%;max-width:none;margin-top:4px}
  #call-overlay.aicall-video .call-video-container .self-pip{min-height:44vh}
  .call-video-container .self-pip{flex:0 0 38% !important}
}
/* screen-share unavailable (mobile browsers have no getDisplayMedia) */
.call-ctrl.screen.unavailable{opacity:.4;cursor:not-allowed}
/* ── v9.10.425 — INCOMING-CALL MODE ───────────────────────────────────────────
   Owner: "when I call user they should get the same layout pop up when I call but
   a green answer button instead of the red button that I have."
   So the incoming screen REUSES #call-overlay verbatim — same centred avatar,
   name, status and control row the caller sees — and just swaps which controls
   are visible. No second layout, no new positioning, and because #call-overlay is
   already position:fixed;inset:0;z-index:9500 it covers whatever view the
   recipient happens to be on, which is what makes an incoming call app-global. */
.call-ctrl.answer{display:none;background:#22c55e}
.call-ctrl.answer:hover{background:#16a34a}
#call-overlay.incoming .call-ctrl.answer{display:flex}
#call-overlay.incoming .call-ctrl.mute,
#call-overlay.incoming .call-ctrl.cam,
#call-overlay.incoming .call-ctrl.screen,
#call-overlay.incoming .call-ctrl.add,
#call-overlay.incoming .call-ctrl.settings{display:none}
/* the red button beside the green one is DECLINE while ringing in */
#call-overlay.incoming .call-ctrl.end{background:#dc2626}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cs-head .cs-title{margin-bottom:0}
.cs-close{flex:none;width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.1);color:#e8eef8;font:700 15px Outfit,sans-serif;line-height:32px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0}
.cs-close:hover{background:rgba(255,255,255,.2)}
@media (max-width:900px),(max-height:820px){
  /* move the panel to the TOP of the call overlay — the centred peer card and the
     controls both live in the lower half, so nothing interactive is underneath. */
  .call-settings-panel{bottom:auto;top:calc(64px + env(safe-area-inset-top,0px));right:12px;left:12px;width:auto}
}
/* force-mobile mirror (a prior bug shipped a mobile block without its twin) */
body.force-mobile .call-settings-panel{bottom:auto;top:calc(64px + env(safe-area-inset-top,0px));right:12px;left:12px;width:auto}
.call-ctrl.screen{background:rgba(255,255,255,.12)}
.call-ctrl.screen.active{background:#8b5cf6}
/* ══ RADIO STATION UI ══════════════════════════════════════════════════════ */
/* v9.10.501 — Radio redesign: Pandora-style 3-view layout */
.radio-station{display:flex;flex-direction:column;min-height:100%;background:linear-gradient(180deg,#0a0e18,#0c1222)}
/* When inside .transcript, radio fills it and the transcript handles scroll */
.transcript:has(.radio-station){padding:0 !important;gap:0 !important;overflow-y:auto;-webkit-overflow-scrolling:touch}
.radio-header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(148,163,184,.1);flex-shrink:0}
.radio-header .radio-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent,#22d9e6),var(--accent-2,#0ea5b8));display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 0 20px var(--accent-glow,rgba(34,217,230,.3))}
.radio-header .radio-info{flex:1;min-width:0}
.radio-header .radio-name{font:700 16px Outfit,sans-serif;color:#eef3fb}
.radio-header .radio-sub{font:11px Outfit,sans-serif;color:var(--muted)}
.radio-body{display:flex;flex:1;min-height:0;overflow:hidden}
.radio-main{flex:1;display:flex;flex-direction:column;min-width:0}
.radio-player{flex-shrink:0;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(148,163,184,.08)}
.radio-player .rp-now{display:flex;align-items:center;gap:14px;padding:14px 18px}
.radio-player .rp-art{width:72px;height:72px;border-radius:10px;background:rgba(99,102,241,.15);display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.radio-player .rp-art img{width:100%;height:100%;object-fit:cover}
.radio-player .rp-meta{flex:1;min-width:0}
.radio-player .rp-title{font:700 15px Outfit,sans-serif;color:#eef3fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-player .rp-artist{font:12px Outfit,sans-serif;color:var(--muted);margin-top:2px}
.radio-player .rp-tag{font:600 9px Outfit,sans-serif;color:#a78bfa;background:rgba(167,139,250,.12);padding:2px 7px;border-radius:4px;margin-top:4px;display:inline-block;letter-spacing:.3px}
.radio-video{height:clamp(200px,40vh,400px);flex-shrink:0;background:#000;display:flex;align-items:center;justify-content:center;position:relative}
.radio-video iframe{width:100%;height:100%;border:none}
.radio-video .rv-placeholder{color:var(--muted);font:13px Outfit,sans-serif;text-align:center;padding:20px}
.radio-lyrics{padding:14px 18px;max-height:120px;overflow-y:auto;font:13px Outfit,sans-serif;color:var(--muted);line-height:1.7;border-top:1px solid rgba(148,163,184,.06);flex-shrink:0;white-space:pre-wrap}
.radio-sidebar{width:300px;display:flex;flex-direction:column;border-left:1px solid rgba(148,163,184,.08);flex-shrink:0;background:rgba(0,0,0,.15);overflow-y:auto}
/* Saved songs section */
.radio-saved{padding:8px 12px;border-top:1px solid rgba(148,163,184,.08);flex-shrink:0}
.radio-saved .rs-title{font:700 10px Outfit,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.radio-saved .rs-item{display:flex;align-items:center;gap:8px;padding:4px 0;font:12px Outfit,sans-serif;color:#c8d6e5}
.radio-saved .rs-item button{border:none;background:rgba(255,255,255,.06);color:var(--muted);padding:3px 8px;border-radius:5px;font-size:10px;cursor:pointer}
.radio-chat{flex:1;display:flex;flex-direction:column;min-height:0}
.radio-chat-msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px;-webkit-overflow-scrolling:touch}
.radio-chat-msg{font:12.5px Outfit,sans-serif;color:#c8d6e5;line-height:1.4}
.radio-chat-msg .rcm-name{font-weight:700;margin-right:6px}
.radio-chat-msg.rcm-dj{background:rgba(99,102,241,.08);border-radius:8px;padding:6px 8px}
.radio-chat-msg.rcm-dj .rcm-name{color:#a78bfa}
.radio-chat-msg.rcm-user .rcm-name{color:var(--accent)}
.radio-chat-msg.rcm-system{color:var(--muted);font-size:11px;font-style:italic}
.radio-chat-input{display:flex;gap:8px;padding:8px 12px;border-top:1px solid rgba(148,163,184,.08);flex-shrink:0}
.radio-chat-input input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.04);color:#e2e8f0;font:12px Outfit,sans-serif;outline:none}
.radio-chat-input button{padding:8px 14px;border-radius:8px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font:600 11px Outfit,sans-serif;cursor:pointer;flex-shrink:0}
.radio-queue{border-top:1px solid rgba(148,163,184,.08);max-height:180px;overflow-y:auto;padding:8px 12px;flex-shrink:0}
.radio-queue .rq-title{font:700 10px Outfit,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.radio-queue .rq-item{display:flex;align-items:center;gap:8px;padding:5px 0;font:12px Outfit,sans-serif;color:#c8d6e5;border-bottom:1px solid rgba(255,255,255,.03)}
.radio-queue .rq-item .rq-num{color:var(--muted-2);font-size:10px;width:16px;text-align:center}
.radio-queue .rq-item .rq-by{color:var(--muted);font-size:10px;margin-left:auto}
.radio-listeners{padding:8px 12px;border-top:1px solid rgba(148,163,184,.08);flex-shrink:0;font:11px Outfit,sans-serif;color:var(--muted)}
/* v9.10.501 — Pandora-style navigation tabs */
.radio-nav{display:flex;gap:0;padding:0 18px;border-bottom:1px solid rgba(148,163,184,.1);flex-shrink:0;background:rgba(0,0,0,.2)}
.radio-nav-btn{border:none;background:transparent;color:var(--muted);padding:12px 16px;font:600 12px Outfit,sans-serif;
  cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap}
.radio-nav-btn:hover{color:#e0e8f4}
.radio-nav-btn.on{color:#fff;border-bottom-color:var(--accent,#22d9e6)}
.radio-nav-btn .rnb-dot{width:6px;height:6px;border-radius:50%;background:#6366f1;display:inline-block;margin-left:4px;vertical-align:middle}
/* Radio view panes */
.radio-pane{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
.radio-pane.on{display:flex;flex-direction:column}
/* Now Playing view — large centered artwork */
.rnp-center{display:flex;flex-direction:column;align-items:center;padding:28px 18px 18px;flex:1}
.rnp-art{width:220px;height:220px;border-radius:14px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.55);margin-bottom:20px;flex-shrink:0}
.rnp-art img{width:100%;height:100%;object-fit:cover}
.rnp-title{font:700 20px Outfit,sans-serif;color:#eef3fb;text-align:center;line-height:1.3;word-break:break-word;max-width:360px}
.rnp-artist{font:13px Outfit,sans-serif;color:var(--muted);margin-top:4px;text-align:center}
.rnp-album{font:11px Outfit,sans-serif;color:var(--muted-2);margin-top:2px;text-align:center}
/* Mode chips (like Pandora's station filters) */
.rnp-modes{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;justify-content:center}
.rnp-mode{padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:var(--muted);font:600 11px Outfit,sans-serif;cursor:pointer;transition:all .15s}
.rnp-mode:hover{background:rgba(99,102,241,.12);color:#c7d2fe;border-color:rgba(99,102,241,.3)}
.rnp-mode.on{background:rgba(99,102,241,.2);color:#fff;border-color:rgba(99,102,241,.5)}
/* Transport controls */
/* ── Radio search dropdown ── */
.rsearch-wrap{position:relative}
.rsearch-wrap input{width:280px;padding:10px 16px;border-radius:12px;border:1px solid rgba(148,163,184,.15);
  background:rgba(255,255,255,.06);color:#e2e8f0;font:13px Outfit,sans-serif;outline:none;transition:border-color .15s,width .2s}
.rsearch-wrap input:focus{border-color:rgba(99,102,241,.5);background:rgba(255,255,255,.1);width:340px}
.rsearch-drop{display:none;position:absolute;top:100%;left:0;right:0;margin-top:6px;min-width:280px;width:100%;
  max-height:420px;overflow-y:auto;background:rgba(13,19,32,.97);border:1px solid rgba(99,102,241,.2);
  border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:100;padding:6px 0;
  backdrop-filter:blur(12px)}
.rsearch-label{font:700 9px Outfit,sans-serif;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted-2);padding:8px 14px 4px}
.rsearch-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .1s}
.rsearch-item:hover{background:rgba(99,102,241,.12)}
.rsearch-thumb{width:44px;height:33px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#111;
  display:flex;align-items:center;justify-content:center;font-size:14px}
.rsearch-thumb img{width:100%;height:100%;object-fit:cover}
.rsearch-meta{flex:1;min-width:0;overflow:hidden}
.rsearch-title{font:600 12px Outfit,sans-serif;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsearch-sub{font:10px Outfit,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsearch-dur{font:10px JetBrains Mono,monospace;color:var(--muted-2);flex-shrink:0}
@media(max-width:600px){.radio-header .rsearch-wrap input{width:140px}.radio-header .rsearch-wrap input:focus{width:180px}}
/* old .rnp-btn removed — replaced by .rnp-act-btn */
/* removed: .rnp-btn.play — replaced by .rnp-act-btn.rnp-play */
.rnp-btn-gone{display:none;/* placeholder */
  box-shadow:0 8px 28px rgba(99,102,241,.45)}
.rnp-btn.play:hover{box-shadow:0 10px 32px rgba(99,102,241,.55)}
/* Station sidebar */
.rnp-stations{width:220px;flex-shrink:0;border-right:1px solid rgba(148,163,184,.08);overflow-y:auto;padding:12px}
.rnp-st-item{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;cursor:pointer;transition:background .12s;margin-bottom:2px}
.rnp-st-item:hover{background:rgba(255,255,255,.05)}
.rnp-st-item.on{background:rgba(99,102,241,.12)}
.rnp-st-item img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#111;flex-shrink:0}
.rnp-st-item .rst-name{font:600 11px Outfit,sans-serif;color:#e0e8f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* My Collection view */
.rcol-section{padding:18px}
.rcol-section .rcol-h{font:700 16px Outfit,sans-serif;color:#eef3fb;margin-bottom:14px}
.rcol-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:wrap}
.rcol-grid::-webkit-scrollbar{display:none}
/* All Songs — organized wrapping grid with larger cards */
.rcol-allsongs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding-bottom:8px}
.rcol-song-card{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);transition:all .15s}
.rcol-song-card:hover{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.2);transform:translateY(-1px)}
.rcol-song-card.rcol-song-on{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.3)}
.rcol-song-thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}
.rcol-song-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rcol-song-playing{position:absolute;inset:0;background:rgba(99,102,241,.4);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;border-radius:10px}
.rcol-song-info{flex:1;min-width:0;overflow:hidden}
.rcol-song-title{font:600 13px Outfit,sans-serif;color:#e0e8f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcol-song-artist{font:11px Outfit,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.rcol-song-artist span{font-size:9px;margin-left:4px}
@media(max-width:600px){.rcol-allsongs-grid{grid-template-columns:1fr}.rcol-song-thumb{width:48px;height:48px}}
.rcol-card{flex:0 0 auto;width:140px;cursor:pointer;transition:transform .15s}
.rcol-card:hover{transform:translateY(-3px)}
.rcol-card img{width:140px;height:140px;border-radius:10px;object-fit:cover;background:#111;display:block}
.rcol-card .rcol-title{font:600 12px Outfit,sans-serif;color:#e0e8f4;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcol-card .rcol-sub{font:11px Outfit,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Browse view */
.rbrowse-row{display:flex;gap:14px;overflow-x:auto;padding:0 18px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rbrowse-row::-webkit-scrollbar{display:none}
.rbrowse-circle{flex:0 0 auto;width:96px;text-align:center;cursor:pointer}
.rbrowse-circle img{width:80px;height:80px;border-radius:50%;object-fit:cover;background:#111;border:2px solid rgba(255,255,255,.08);transition:border-color .15s,transform .15s}
.rbrowse-circle:hover img{border-color:rgba(99,102,241,.4);transform:scale(1.05)}
.rbrowse-circle .rbr-name{font:500 10px Outfit,sans-serif;color:var(--muted);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbrowse-genre{flex:0 0 auto;width:160px;height:90px;border-radius:10px;overflow:hidden;position:relative;cursor:pointer}
.rbrowse-genre img{width:100%;height:100%;object-fit:cover}
.rbrowse-genre .rbg-label{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.8));
  font:700 13px Outfit,sans-serif;color:#fff}
/* Persistent player bar (bottom) */
.radio-bar{display:flex;flex-direction:column;align-items:stretch;padding:0;border-top:1px solid rgba(148,163,184,.12);
  background:rgba(6,10,18,.95);backdrop-filter:blur(12px);flex-shrink:0}
.rb-top{display:flex;align-items:center;gap:10px;padding:6px 16px}
.radio-bar .rb-art{width:38px;height:38px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#111}
.radio-bar .rb-art img{width:100%;height:100%;object-fit:cover}
.radio-bar .rb-meta{min-width:0;flex-shrink:1;max-width:180px}
.radio-bar .rb-title{font:600 12px Outfit,sans-serif;color:#eef3fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-bar .rb-artist{font:10px Outfit,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-bar .rb-btn{border:none;background:none;color:var(--muted);cursor:pointer;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:color .15s,background .15s}
.radio-bar .rb-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.radio-bar .rb-btn.rb-play{background:linear-gradient(135deg,var(--accent,#22d9e6),var(--accent-2,#0ea5b8));color:#fff;width:40px;height:40px;font-size:18px;
  box-shadow:0 4px 14px rgba(99,102,241,.35)}
.radio-bar .rb-progress{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:2px;min-width:60px;cursor:pointer;position:relative}
.radio-bar .rb-progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:2px;transition:width .3s}
/* ── KAI Watch (v9.10.506): themed frame around a VISIBLE YouTube player ── */
#radio-pane-watch{padding-bottom:14px}
/* ── Now Playing: animated neon background ── */
.rnp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--panel,#06080e)}
.rnp-bg-art{position:absolute;inset:-20%;width:140%;height:140%;object-fit:cover;filter:blur(60px) brightness(.15) saturate(1.8);opacity:.7}
.rnp-bg-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
/* rnp-float keyframes removed — background is now canvas-driven */
/* Art container with ring visualizer */
.rnp-art-wrap{position:relative;width:280px;height:280px;flex-shrink:0}
.rnp-vis-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;pointer-events:none;z-index:0}
.rnp-art-inner{position:absolute;inset:17%;border-radius:18px;overflow:hidden;z-index:1;
  box-shadow:0 0 30px var(--accent-glow,rgba(34,217,230,.2)),0 16px 48px rgba(0,0,0,.5);
  transition:transform .12s ease-out,box-shadow .15s ease-out;will-change:transform}
/* Title/artist in NP */
.rnp-title{font:700 20px Outfit,sans-serif;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);text-align:center;line-height:1.3;word-break:break-word;max-width:360px}
.rnp-artist{font:13px Outfit,sans-serif;color:rgba(255,255,255,.6);margin-top:4px;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.3)}
/* Transport controls in Now Playing center */
.rnp-transport{display:flex;align-items:center;gap:14px;margin-top:18px}
.rnp-act-btn{border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);width:44px;height:44px;
  border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;backdrop-filter:blur(8px)}
.rnp-act-btn:hover{background:rgba(255,255,255,.15);color:#fff;transform:scale(1.1)}
.rnp-act-btn.rnp-play{width:58px;height:58px;font-size:22px;background:linear-gradient(135deg,var(--accent,#22d9e6),var(--accent-2,#0ea5b8));
  color:#fff;box-shadow:0 8px 28px var(--accent-glow,rgba(34,217,230,.3))}
.rnp-act-btn.rnp-play:hover{transform:scale(1.08);box-shadow:0 10px 36px var(--accent-glow,rgba(34,217,230,.45))}
/* Up Next sidebar */
.rnp-upnext{width:300px;flex-shrink:0;border-left:1px solid rgba(255,255,255,.06);overflow-y:auto;padding:14px 14px}
.rbrowse-card{cursor:pointer;transition:transform .15s,box-shadow .15s}
.rbrowse-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
/* Netflix-style browse category rows */
/* Browse search bar */
.rbrowse-search-bar{display:flex;gap:8px;padding:12px 18px 8px;align-items:center}
.rbrowse-search-bar input{width:100%;padding:11px 16px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.06);color:#e2e8f0;font:13px Outfit,sans-serif;outline:none;box-sizing:border-box}
.rbrowse-search-bar input:focus{border-color:rgba(99,102,241,.5);background:rgba(255,255,255,.08)}
.rbrowse-search-btn{padding:10px 12px;border-radius:12px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:16px;cursor:pointer;flex-shrink:0;line-height:1;display:flex;align-items:center;justify-content:center}
/* Genre pills row — removed v9.10.510 */
.rbrowse-empty{text-align:center;padding:64px 24px}
/* Playlist modal */
.rpl-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.rpl-modal{background:rgba(15,20,35,.97);border:1px solid rgba(99,102,241,.2);border-radius:18px;padding:24px;width:min(440px,100%);max-height:80vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.7)}
.rpl-modal-h{font:700 18px Outfit,sans-serif;color:#eef3fb;margin-bottom:14px}
.rpl-song-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;transition:background .1s;font:12px Outfit,sans-serif;color:#e0e8f4}
.rpl-song-row:hover{background:rgba(99,102,241,.1)}
.rpl-song-row.rpl-done{opacity:.4}
.rpl-song-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpl-song-src{font:10px Outfit,sans-serif;color:var(--muted);flex-shrink:0}
.rpl-cb{accent-color:#6366f1;flex-shrink:0}
.rpl-btn-primary{padding:10px 20px;border-radius:10px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font:700 12px Outfit,sans-serif;cursor:pointer}
.rpl-btn-secondary{padding:10px 20px;border-radius:10px;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.04);color:var(--muted);font:600 12px Outfit,sans-serif;cursor:pointer}
/* Playlist card — big clickable tile */
.rpl-card{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:all .15s;min-width:220px;flex:0 0 auto}
.rpl-card:hover{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.25);transform:translateY(-2px)}
.rpl-mosaic{display:grid;grid-template-columns:1fr 1fr;width:64px;height:64px;border-radius:10px;overflow:hidden;flex-shrink:0;gap:1px;background:rgba(0,0,0,.3)}
.rpl-mosaic img{width:100%;height:100%;object-fit:cover;display:block}
.rpl-mosaic-single{width:64px;height:64px;border-radius:10px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rpl-mosaic-single img{width:100%;height:100%;object-fit:cover;display:block}
.rpl-card-meta{min-width:0;overflow:hidden}
.rpl-card-name{font:700 14px Outfit,sans-serif;color:#eef3fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpl-card-count{font:11px Outfit,sans-serif;color:var(--muted);margin-top:2px}
/* Legacy deck (auto-playlists still use rcol-card + rpl-deck) */
.rpl-deck{width:140px;height:140px;position:relative;display:flex;align-items:center;justify-content:center}
.rpl-deck-card{position:absolute;width:100px;height:100px;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.1);transition:transform .2s}
.rpl-deck-card img{width:100%;height:100%;object-fit:cover;background:#111}
.rpl-deck-empty{width:100px;height:100px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:32px;border:2px solid rgba(255,255,255,.08)}
.rcol-card:hover .rpl-deck-card{box-shadow:0 6px 20px rgba(0,0,0,.5)}
.rpl-expanded{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15);border-radius:14px;padding:14px;margin-bottom:12px;animation:rplOpen .25s ease-out}
@keyframes rplOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.rpl-exp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rpl-exp-title{font:700 16px Outfit,sans-serif;color:#eef3fb}
.rpl-spread{display:flex;gap:10px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rpl-spread::-webkit-scrollbar{display:none}
.rpl-spread-card{flex:0 0 auto;width:90px;cursor:pointer;text-align:center;transition:transform .15s}
.rpl-spread-card:hover{transform:translateY(-3px)}
.rpl-spread-thumb{width:90px;height:90px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.rpl-spread-thumb img{width:100%;height:100%;object-fit:cover}
.rpl-spread-name{font:600 10px Outfit,sans-serif;color:#e0e8f4;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpl-exp-songs{max-height:200px;overflow-y:auto;margin-bottom:8px}
.rpl-exp-song{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font:12px Outfit,sans-serif;color:#e0e8f4;transition:background .1s}
.rpl-exp-song:hover{background:rgba(99,102,241,.12)}
.rpl-exp-num{font:600 10px JetBrains Mono,monospace;color:var(--muted-2);width:18px;text-align:right;flex-shrink:0}
.rpl-exp-sname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpl-exp-rm{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 4px;flex-shrink:0;opacity:.5;transition:opacity .1s}
.rpl-exp-rm:hover{opacity:1;color:#ef4444}
/* Netflix-style browse category rows */
.rbrowse-cat-row{padding:4px 18px 20px}
.rbrowse-cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rbrowse-cat-title{font:700 17px Outfit,sans-serif;color:#eef3fb;letter-spacing:.2px}
.rbrowse-cat-arrows{display:flex;gap:6px}
.rbrowse-arrow{width:32px;height:32px;border-radius:50%;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.06);
  color:#c8d6e5;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.rbrowse-arrow:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);color:#fff}
.rbrowse-cat-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.rbrowse-cat-scroll::-webkit-scrollbar{display:none}
.rbrowse-big-card{flex:0 0 auto;width:clamp(200px,22vw,280px);background:rgba(255,255,255,.04);border-radius:14px;overflow:hidden;
  border:1px solid rgba(148,163,184,.08);transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer}
.rbrowse-big-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.5);border-color:rgba(99,102,241,.3)}
.rbrowse-big-thumb{position:relative;width:100%;aspect-ratio:16/9;background:#0a0e18;overflow:hidden}
.rbrowse-big-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rbrowse-big-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,#1e1b4b,#312e81)}
.rbrowse-big-dur{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.85);color:#fff;font:600 10px JetBrains Mono,monospace;
  padding:2px 6px;border-radius:4px}
.rbrowse-big-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;
  background:rgba(0,0,0,.3);opacity:0;transition:opacity .15s}
.rbrowse-big-card:hover .rbrowse-big-play{opacity:1}
.rbrowse-big-info{padding:12px 14px 4px}
.rbrowse-big-title{font:600 14px Outfit,sans-serif;color:#e0e8f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbrowse-big-artist{font:12px Outfit,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.rbrowse-big-actions{display:flex;gap:8px;padding:8px 14px 14px}
.rbrowse-act{flex:1;border:none;padding:8px 0;border-radius:8px;font:600 12px Outfit,sans-serif;cursor:pointer;transition:all .15s}
.rbrowse-act.watch{background:rgba(99,102,241,.15);color:#c7d2fe}
.rbrowse-act.watch:hover{background:rgba(99,102,241,.28)}
.rbrowse-act.save{background:rgba(34,197,94,.12);color:#4ade80}
.rbrowse-act.save:hover{background:rgba(34,197,94,.22)}
.rbrowse-act.save.saved{background:rgba(34,197,94,.25);color:#22c55e}
@media(max-width:600px){.rbrowse-big-card{width:180px}.rbrowse-cat-title{font-size:14px}.rbrowse-cat-arrows{display:none}}
.rbrowse-active{outline:2px solid var(--accent,#22d9e6);outline-offset:2px}
/* Saved songs card grid (Collection view) */
.rsaved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:4px 0}
.rsaved-card{position:relative;background:rgba(255,255,255,.04);border-radius:12px;overflow:hidden;border:1px solid rgba(148,163,184,.08);
  transition:transform .15s,box-shadow .15s;cursor:pointer}
.rsaved-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.4);border-color:rgba(99,102,241,.25)}
.rsaved-thumb{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#0a0e18}
.rsaved-thumb img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.rsaved-thumb-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.rsaved-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;
  background:rgba(0,0,0,.35);opacity:0;transition:opacity .15s;z-index:2}
.rsaved-card:hover .rsaved-play-overlay{opacity:1}
.rsaved-info{padding:10px 12px 8px}
.rsaved-title{font:600 13px Outfit,sans-serif;color:#e0e8f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsaved-artist{font:11px Outfit,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.rsaved-remove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.65);
  color:#ef4444;font-size:16px;cursor:pointer;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;z-index:3}
.rsaved-card:hover .rsaved-remove{opacity:1}
.rsaved-remove:hover{background:rgba(239,68,68,.3)}
@media(max-width:600px){.rsaved-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}}
.rnp-uq-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;cursor:pointer;margin-bottom:4px;
  background:rgba(255,255,255,.02);border:1px solid transparent;transition:all .15s}
.rnp-uq-item:hover{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.18);transform:translateX(2px)}
.rnp-uq-item:first-child{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.12)}
.rnp-uq-num{font:700 11px JetBrains Mono,monospace;color:rgba(255,255,255,.2);width:16px;text-align:center;flex-shrink:0}
.rnp-uq-item:hover .rnp-uq-num{color:var(--accent,#22d9e6)}
.rnp-uq-thumb{width:52px;height:42px;border-radius:8px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:14px;position:relative}
.rnp-uq-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rnp-uq-thumb::after{content:'▶';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);color:#fff;font-size:14px;opacity:0;transition:opacity .15s;border-radius:8px}
.rnp-uq-item:hover .rnp-uq-thumb::after{opacity:1}
.rnp-uq-meta{min-width:0;overflow:hidden;flex:1}
.rnp-uq-badge{font:700 8px Outfit,sans-serif;color:var(--accent,#22d9e6);letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px}
.rnp-uq-title{font:600 12px Outfit,sans-serif;color:#e0e8f4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.rnp-uq-artist{font:10px Outfit,sans-serif;color:rgba(255,255,255,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
@media(max-width:700px){.rnp-upnext{display:none !important}.rnp-art-wrap{width:200px;height:200px}}
/* Bottom bar: visualizer-as-progress (full width bottom row) */
.rb-progress-row{display:flex;align-items:center;gap:8px;padding:0 16px 6px;width:100%}
.rb-vis-wrap{flex:1;height:32px;position:relative;border-radius:4px;overflow:hidden;cursor:pointer}
.rb-vis{display:block;width:100%;height:100%}
.rb-vis-mask{position:absolute;top:0;right:0;bottom:0;left:100%;background:rgba(6,8,14,.7);pointer-events:none;transition:left .15s linear;border-left:2px solid var(--accent-glow,rgba(34,217,230,.4))}
.rb-time{font:10px JetBrains Mono,monospace;color:var(--muted-2);flex-shrink:0;white-space:nowrap;min-width:32px;text-align:center}
.rwatch-strip{display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--accent-glow)}
.rwatch-badge{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 18px var(--accent-glow)}
.rwatch-title{font:700 14px Outfit,sans-serif;color:#eef3fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rwatch-sub{font:11px Outfit,sans-serif;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rwatch-clear{border:1px solid var(--accent-glow);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;
  width:30px;height:30px;border-radius:8px;flex-shrink:0;font-size:13px;line-height:1}
.rwatch-clear:hover{color:#fff;background:var(--accent-glow)}
.rwatch-stage{padding:16px 18px 6px}
.rwatch-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;
  border:1px solid var(--accent-glow);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02) inset}
.rwatch-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.rwatch-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:radial-gradient(circle at 50% 40%,rgba(34,217,230,.06),transparent 70%)}
.rwatch-card{position:relative}
.rwatch-card .rwatch-play{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.72);color:#fff;
  font:700 11px Outfit,sans-serif;padding:3px 8px;border-radius:6px;opacity:0;transition:opacity .15s}
.rwatch-card:hover .rwatch-play{opacity:1}
.rwatch-card.on{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.rwatch-card.on .rwatch-play{opacity:1;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04121a}
@media (max-width:900px){
  .rnp-stations{display:none}
  .rnp-art{width:180px;height:180px}
  .rnp-title{font-size:17px}
  .radio-nav-btn{padding:10px 12px;font-size:11px}
  .rcol-card{width:120px}
  .rcol-card img{width:120px;height:120px}
}
@media(max-width:900px){
  .radio-body{flex-direction:column;overflow:visible}
  .radio-main{overflow:visible}
  .radio-sidebar{width:100%;border-left:none;border-top:1px solid rgba(148,163,184,.08);max-height:none;overflow:visible}
  .radio-video{height:clamp(180px,35vh,300px)}
  .radio-chat-msgs{max-height:200px}
  .radio-queue{max-height:150px}
}
/* ── Global Mini-Player (visible outside Radio view when music is playing) ── */
.radio-mini{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(6,10,18,.96);backdrop-filter:blur(14px);border-top:1px solid rgba(148,163,184,.12);
  padding:6px 12px;align-items:center;gap:8px;font-family:Outfit,sans-serif}
.radio-mini.on{display:flex}
.radio-mini .rm-art{width:36px;height:36px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#111}
.radio-mini .rm-art img{width:100%;height:100%;object-fit:cover}
.radio-mini .rm-meta{flex:1;min-width:0}
.radio-mini .rm-title{font:600 12px Outfit,sans-serif;color:#eef3fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-mini .rm-artist{font:10px Outfit,sans-serif;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-mini .rm-btn{border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
  width:32px;height:32px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.radio-mini .rm-btn:hover{color:#fff;background:rgba(255,255,255,.15)}
.radio-mini .rm-btn.rm-play{background:linear-gradient(135deg,var(--accent,#22d9e6),var(--accent-2,#0ea5b8));color:#fff;width:34px;height:34px;font-size:15px}
.radio-mini .rm-progress{position:absolute;top:-2px;left:0;height:2px;background:var(--accent,#22d9e6);transition:width .3s linear}
.radio-mini .rm-go{border:none;background:none;color:var(--accent);font:600 10px Outfit,sans-serif;cursor:pointer;padding:4px 8px;white-space:nowrap}
@media(min-width:769px){.radio-mini{left:var(--rail-w,60px)}}
/* Public-user feed density (display prefs — no host secrets) */
body[data-guest-density="compact"] .guest-card{padding:10px 12px;margin-bottom:8px}
body[data-guest-density="cozy"] .guest-card{padding:18px 20px;margin-bottom:16px}
body[data-guest-density="compact"] .guest-dash{padding:12px 14px 24px}
/* Guest profile card rows touch-friendly on mobile */
@media (max-width:900px){
  body.scope-guest .guest-card .gc-btn{min-height:40px;padding:10px 14px}
  body.scope-guest .guest-card .gc-row{font-size:13px;padding:4px 0}
}
/* Guest home workspace — desktop + mobile (wider, multi-column fill) */
.guest-dash{padding:16px 24px 32px;max-width:none;margin:0;width:100%}
.plan-grid::-webkit-scrollbar{height:8px}
.plan-grid::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:8px}
.plan-grid::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.55)}
.plan-grid::-webkit-scrollbar-track{background:transparent}
body.scope-guest .view-pane#view-home,
body.scope-owner .view-pane#view-home{background:radial-gradient(ellipse at 50% 0%,rgba(34,217,230,.06),transparent 55%)}
.guest-dash-grid{display:grid;grid-template-columns:1fr;gap:14px}
/* v9.10.66 — right sidebar restored on wide desktop with useful widgets.
   Hidden on mobile/tablet and narrow desktop. */
.guest-dash-grid .guest-col-right{display:none}
:root{
  --feed-col-w: 680px;
  --feed-col-w-xl: 780px;
}
@media (min-width:1000px){
  .guest-dash-grid{grid-template-columns:min(var(--feed-col-w,680px),100%);justify-content:center;align-items:start;gap:20px}
  .guest-dash-grid .guest-col-main{grid-column:1;min-width:0}
  .guest-dash-grid .guest-col-left{display:none !important}
}
/* Wide desktop: show sidebar beside feed */
@media (min-width:1300px){
  .guest-dash-grid{grid-template-columns:minmax(0,var(--feed-col-w-xl)) 280px;justify-content:center}
  .guest-dash-grid .guest-col-right{display:block;position:sticky;top:16px;align-self:start}
  .guest-dash-grid .guest-col-right .guest-card{padding:12px 14px;margin-bottom:10px}
}
@media (min-width:1600px){
  .guest-dash-grid{grid-template-columns:minmax(0,850px) 300px;gap:24px}
}
/* v9.10.342 XL column override — now handled by the 1300/1600px breakpoints above */
/* v9.10.500 — the feed wrapper on desktop is just a container, posts have their own cards.
   Remove the card look from the wrapper so posts float cleanly. */
@media (min-width:1000px){
  .gfeed-wrap{background:transparent !important;border:none !important;padding:0 !important}
  .gfeed-wrap>.gc-h{padding:0 2px;margin-bottom:14px}
}
/* keep post media comfortable regardless of column width (v9.10.476: matched to the narrow column) */
.gpost-img{max-height:620px}
/* v9.10.327 — REQUEST 1: on mobile the feed post cards were a thin center strip
   (nested dash+wrapper+post padding). Gate to mobile (<1000px single-column);
   desktop unchanged. Cards now fill width minus an ~8px gutter each side. */
@media (max-width:999px){
  body.scope-guest .guest-dash{padding-left:8px;padding-right:8px}
  body.scope-guest .gfeed-wrap{padding-left:0;padding-right:0;background:transparent;border:none;margin-bottom:0}
  body.scope-guest .gfeed-wrap>.gc-h{padding-left:4px}
}
.guest-banner{border:1px solid rgba(34,217,230,.28);background:linear-gradient(135deg,rgba(34,217,230,.10),rgba(124,58,237,.08));
  border-radius:14px;padding:16px 18px;margin-bottom:14px}
.guest-banner h2{font-family:var(--ui);font-size:16px;font-weight:800;letter-spacing:.4px;margin:0 0 6px;color:#e9eef7}
.guest-banner p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.guest-card{background:rgba(13,19,32,.72);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:12px}
body.scope-guest .tb-user-chip{display:inline-flex !important}
body.scope-guest .tb-user-chip:hover{border-color:var(--accent);background:rgba(34,217,230,.16)}
/* Desktop Chat icon (next to User) + dropdown */
body.scope-guest .tb-chat-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(34,217,230,.35);background:rgba(34,217,230,.08);color:var(--accent);cursor:pointer;position:relative;flex-shrink:0}
body.scope-guest.force-desktop .tb-chat-btn,
body.scope-guest:not(.force-mobile) .tb-chat-btn{display:inline-flex}
@media (max-width:900px){
  body.scope-guest:not(.force-desktop) .tb-chat-btn{display:none !important}
}
.tb-chat-btn:hover{border-color:var(--accent);background:rgba(34,217,230,.16)}
.tb-chat-btn svg{width:18px;height:18px}
.tb-chat-btn .tb-chat-badge{position:absolute;top:-2px;right:-2px;min-width:14px;height:14px;padding:0 3px;border-radius:8px;
  background:#f43f5e;color:#fff;font:700 9px Outfit,sans-serif;display:none;align-items:center;justify-content:center}
.tb-chat-dd{display:none;position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:min(70vh,480px);overflow:hidden;
  background:rgba(10,14,22,.97);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.55);z-index:5000;
  flex-direction:column}
.tb-chat-dd.open{display:flex}
.tb-chat-dd .tcd-head{padding:10px 12px;border-bottom:1px solid var(--border);font:700 11px Outfit,sans-serif;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.tb-chat-dd .tcd-online{display:flex;gap:8px;padding:10px 12px;overflow-x:auto;border-bottom:1px solid var(--border);flex-shrink:0}
.tb-chat-dd .tcd-av{width:44px;flex-shrink:0;text-align:center;cursor:pointer;color:var(--text);background:none;border:none;padding:0}
.tb-chat-dd .tcd-av img,.tb-chat-dd .tcd-av .tcd-letter{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#1a2233;
  border:2px solid rgba(34,217,230,.35);display:flex;align-items:center;justify-content:center;margin:0 auto;font:700 13px Outfit,sans-serif;color:var(--accent)}
.tb-chat-dd .tcd-av .tcd-dot{width:10px;height:10px;border-radius:50%;background:var(--good);border:2px solid #0a0e16;position:absolute;right:2px;bottom:14px}
.tb-chat-dd .tcd-av-wrap{position:relative;display:inline-block}
.tb-chat-dd .tcd-av span{display:block;font-size:9px;margin-top:4px;max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.tb-chat-dd .tcd-msgs{flex:1;overflow-y:auto;padding:6px 0;min-height:80px}
.tb-chat-dd .tcd-row{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--text)}
.tb-chat-dd .tcd-row:hover{background:rgba(34,217,230,.08)}
.tb-chat-dd .tcd-row img,.tb-chat-dd .tcd-row .tcd-letter{width:36px;height:36px;border-radius:50%;flex-shrink:0;object-fit:cover;background:#1a2233;
  display:flex;align-items:center;justify-content:center;font:700 12px Outfit,sans-serif;color:var(--accent)}
.tb-chat-dd .tcd-row .tcd-meta{flex:1;min-width:0}
.tb-chat-dd .tcd-row .tcd-name{font:700 12px Outfit,sans-serif}
.tb-chat-dd .tcd-row .tcd-prev{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-chat-dd .tcd-foot{padding:8px 12px;border-top:1px solid var(--border);font-size:11px}
.tb-chat-dd .tcd-foot button{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--accent);cursor:pointer;font:600 11px Outfit,sans-serif}
/* Facebook-style bottom chat dock (desktop) */
#chat-dock{display:none;position:fixed;right:16px;bottom:0;z-index:4500;flex-direction:row-reverse;align-items:flex-end;gap:8px;
  pointer-events:none;max-width:calc(100vw - 32px)}
body.scope-guest.force-desktop #chat-dock,
body.scope-guest:not(.force-mobile) #chat-dock{display:flex}
@media (max-width:900px){
  body.scope-guest:not(.force-desktop) #chat-dock{display:none !important}
}
.chat-dock-tab{pointer-events:auto;width:300px;background:rgba(12,16,26,.98);border:1px solid var(--border);border-radius:12px 12px 0 0;
  box-shadow:0 -8px 32px rgba(0,0,0,.45);display:flex;flex-direction:column;max-height:420px;overflow:hidden}
.chat-dock-tab.minimized{max-height:none;height:auto}
.chat-dock-tab .cdt-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(135deg,rgba(34,217,230,.18),rgba(124,58,237,.12));
  cursor:pointer;user-select:none;flex-shrink:0}
.chat-dock-tab .cdt-head .cdt-name{flex:1;font:700 12px Outfit,sans-serif;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-dock-tab .cdt-head .cdt-dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex-shrink:0}
.chat-dock-tab .cdt-head button{border:none;background:transparent;color:var(--muted);cursor:pointer;width:24px;height:24px;border-radius:6px;
  font-size:14px;line-height:1;padding:0}
.chat-dock-tab .cdt-head button:hover{background:rgba(255,255,255,.08);color:var(--text)}
.chat-dock-tab .cdt-body{display:flex;flex-direction:column;flex:1;min-height:0;height:340px}
.chat-dock-tab.minimized .cdt-body{display:none}
.chat-dock-tab .cdt-thread{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:0}
.chat-dock-tab .cdt-msg{max-width:88%;padding:7px 10px;border-radius:12px;font-size:12px;line-height:1.4;word-break:break-word}
.chat-dock-tab .cdt-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--accent),#0070a8);color:#04070d;border-radius:12px 12px 4px 12px}
.chat-dock-tab .cdt-msg.them{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);border-radius:12px 12px 12px 4px}
.chat-dock-tab .cdt-compose{display:flex;gap:6px;padding:8px;border-top:1px solid var(--border);flex-shrink:0}
.chat-dock-tab .cdt-compose input{flex:1;border-radius:18px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:var(--text);
  padding:8px 12px;font-size:12px;outline:none}
.chat-dock-tab .cdt-compose button{border:none;border-radius:18px;padding:8px 12px;background:var(--accent);color:#04070d;font:700 11px Outfit,sans-serif;cursor:pointer}
/* Feed post cards */
.gpost{background:rgba(13,19,32,.78);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px 20px;margin-bottom:14px;
  transition:border-color .2s,box-shadow .25s,background .2s;backdrop-filter:blur(4px)}
.gpost:hover{border-color:rgba(99,102,241,.2);box-shadow:0 8px 28px rgba(0,0,0,.3);background:rgba(15,22,36,.82)}
.gpost:last-child{margin-bottom:0}
.gpost-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
/* v9.10.311 — per-post options menu */
.gpost-menu-wrap{position:relative;flex:0 0 auto}
.gpost-menu-btn{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:2px 10px;border-radius:8px}
.gpost-menu-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.gpost-menu{display:none;position:absolute;right:0;top:30px;z-index:30;background:#0d1320;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.55);min-width:150px;overflow:hidden}
.gpost-menu.open{display:block}
.gpost-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:11px 15px;font-size:13px;cursor:pointer}
.gpost-menu button:hover{background:rgba(255,255,255,.06)}
.gpost-menu button.danger{color:#fda4af}
.gpost-menu button.danger:hover{background:rgba(248,113,113,.12)}
.gpost-head b{color:var(--accent)}
.gpost-text{font-size:15.5px;line-height:1.62;margin:2px 0 12px;color:var(--text);white-space:pre-wrap;word-break:break-word}
@media (max-width:900px){
  .gpost{padding:14px 14px;border-radius:14px;margin-bottom:10px;border-left:none;border-right:none;border-radius:0}
  .gpost:first-child{border-radius:14px 14px 0 0}
  .gpost:last-child{border-radius:0 0 14px 14px}
  .gpost-text{font-size:15px;line-height:1.6}
  .gpost-head{gap:10px}
  /* Action buttons: icon-only but with good touch targets (44px min) */
  .gpost-acts{gap:0;padding:4px 0 0}
  .gpost-acts button{font-size:0;padding:12px 8px;gap:0;border-radius:8px;min-height:44px;min-width:44px}
  .gpost-acts button svg{width:20px;height:20px}
  .gpost-acts button.on svg{filter:drop-shadow(0 0 4px var(--accent))}
  .gpost-stats{font-size:11px;gap:8px;padding:8px 0}
  .gcomposer-opt{padding:6px 10px !important;font-size:11px !important}
  /* Composer: full-width feel on mobile */
  .gpost-composer{border-radius:0;border-left:none;border-right:none;margin-bottom:0;padding:12px 14px}
  .gcomp-text{font-size:15px;min-height:40px}
  .gcomp-post-btn{padding:8px 20px;font-size:12px}
  /* Stories row: tighter on mobile */
  .gstories-row{gap:10px;padding:6px 4px 12px}
  .gstory-card{width:64px}
  .gstory-card img{width:48px;height:48px}
  .gstory-create-plus{width:48px;height:48px;font-size:18px}
  .gstory-name{font-size:9px;max-width:60px}
  /* Feed tabs: full-width on mobile */
  .gfeed-tabs{margin-bottom:0;border-radius:0}
  .gfeed-tabs button{flex:1;padding:10px 8px;font-size:12px}
}
/* v9.10.476 — show the FULL image (was object-fit:cover, which cropped). height:auto
   scales the whole picture to the column width; max-height + contain letterboxes only
   extreme portraits so they don't run off-screen. */
.gpost-img{margin-top:8px;width:100%;height:auto;max-height:620px;object-fit:contain;border-radius:10px;background:#0b0f14;display:block}
.gpost-repost{font-size:10px;color:var(--muted);margin-bottom:6px}
/* v9.10.500 — subtle fade-in for posts entering the feed */
@keyframes gpostFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.gpost{animation:gpostFadeIn .25s ease-out}
.gpost-stats{display:flex;flex-wrap:wrap;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);margin:10px 0 0;font:500 12px var(--ui),Inter,sans-serif;color:var(--muted)}
.gpost-stats span{transition:color .15s;cursor:default}
.gpost-stats span:hover{color:var(--text)}
.gpost-acts{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:6px 0 2px}
.gpost-acts button{flex:1;text-align:center;padding:9px 4px;border:none;border-radius:10px;background:transparent;color:var(--muted);
  font:600 13px var(--ui),Inter,sans-serif;cursor:pointer;transition:background .15s,color .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:6px}
.gpost-acts button:hover{background:rgba(255,255,255,.07);color:var(--text);transform:translateY(-0.5px)}
.gpost-acts button:active{transform:translateY(0)}
.gpost-acts button.on{color:var(--accent);background:rgba(34,217,230,.08)}
/* v9.10.500 — bookmark button in action bar */
.gpost-acts button.on svg[viewBox="0 0 24 24"] path[d*="M19 21l-7"]{filter:drop-shadow(0 0 3px var(--accent))}
.gpost-emotes{display:none;gap:4px;margin-top:6px;flex-wrap:wrap}
.gpost-emotes.open{display:flex}
.gpost-emotes button{border:none;background:rgba(255,255,255,.06);border-radius:8px;padding:4px 8px;font-size:16px;cursor:pointer;transition:background .12s,transform .1s}
.gpost-emotes button:hover{background:rgba(255,255,255,.12);transform:scale(1.1)}
/* v9.10.353 — belt-and-braces: expanded comments can never exceed the card, and a
   long unbroken string (URL/token) wraps instead of pushing the page wide.
   v9.10.354 — `overflow-x:hidden` REMOVED from this rule. Per CSS overflow, when
   one axis is not `visible` the other computes to `auto` — so overflow-x:hidden
   silently turned this into a SCROLL CONTAINER. Never set a single-axis overflow
   on anything inside the .home-scroll flex column. max-width alone is enough. */
.gpost-comments{margin-top:8px;background:transparent;display:none;max-width:100%}
.gpost-comments.open{display:block}
.gpost-cmt{display:flex;gap:8px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);min-width:0;max-width:100%;transition:background .12s;border-radius:6px;margin:0 -4px;padding-left:4px;padding-right:4px}
.gpost-cmt:hover{background:rgba(255,255,255,.02)}
.gpost-cmt:last-child{border-bottom:none}
.gpost-cmt-body{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.gpost-cmt-body b{color:var(--accent);font-size:12px;font-weight:700}
/* v9.10.317 — comment-level engagement (like/emote/reply per comment) */
.gpost-cmt-acts{display:flex;gap:14px;margin-top:5px;align-items:center;flex-wrap:wrap}
.gpost-cmt-acts button{background:none;border:none;color:var(--muted);cursor:pointer;font:600 11px Inter,sans-serif;padding:0;display:inline-flex;align-items:center;gap:4px}
.gpost-cmt-acts button:hover{color:var(--text)}
.gpost-cmt-acts button.on{color:var(--accent)}
.gpost-cmt-rx{font-size:11px;color:var(--muted)}
.gpost-cmt-emotes{display:none;gap:4px;margin-top:5px;flex-wrap:wrap}
.gpost-cmt-emotes.open{display:flex}
.gpost-cmt-emotes button{border:none;background:rgba(255,255,255,.06);border-radius:7px;padding:2px 6px;font-size:14px;cursor:pointer}
.gpost-replies{margin:6px 0 2px 36px;border-left:2px solid rgba(255,255,255,.07);padding-left:10px}
.gpost-reply-form{display:none;gap:6px;align-items:center;margin-top:6px}
.gpost-reply-form.open{display:flex}
.gpost-reply-form input{flex:1;min-width:0;border-radius:16px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:var(--text);padding:6px 12px;font-size:12px;outline:none}
.gpost-reply-form input:focus{border-color:rgba(34,217,230,.4)}
.gpost-reply-form button{border:none;border-radius:16px;padding:6px 12px;background:var(--accent);color:#04070d;font:700 10px Outfit,sans-serif;cursor:pointer;white-space:nowrap}
/* v9.10.353 — HORIZONTAL-OVERFLOW FIX. The composer row is a flex row; the <input>
   had flex:1 but NOT min-width:0, so its automatic minimum size (min-width:auto ≈
   the default `size` ~20ch + 28px padding ≈ 205px) stopped it shrinking. avatar +
   gaps + Send + card padding then exceeded a 360px viewport, and the overflow
   widened the whole PAGE (sideways panning). .gpost-reply-form input (above) and
   .gsheet-foot .gpost-cmt-form input (below) already had min-width:0 — this one
   was simply missed. Also cap the row so it can never exceed the card. */
.gpost-cmt-form{display:flex;gap:8px;align-items:center;margin-top:10px;min-width:0;max-width:100%}
.gpost-cmt-form input{flex:1 1 auto;min-width:0;width:0;border-radius:20px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:var(--text);padding:8px 14px;font-size:13px;outline:none}
.gpost-cmt-form>:not(input){flex-shrink:0}
.gpost-cmt-form input:focus{border-color:rgba(34,217,230,.4)}
.gpost-cmt-form button{border:none;border-radius:20px;padding:8px 14px;background:var(--accent);color:#04070d;font:700 11px Outfit,sans-serif;cursor:pointer;white-space:nowrap}
/* v9.10.297: immersive TikTok/YouTube-Shorts vertical feed — snap one short per
   screen, scroll up/down to the next. The feed is its own scroll container so it
   pages instead of scrolling like a document. */
.gshorts-feed{display:flex;flex-direction:column;align-items:center;gap:0;height:calc(100vh - 210px);max-height:900px;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}
.gshorts-feed::-webkit-scrollbar{display:none}
.gshort-card{position:relative;width:100%;max-width:440px;height:100%;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;border-radius:16px;overflow:hidden;background:#0a0e14;display:flex;flex-direction:column;justify-content:flex-end}
@media (max-width:900px){ .gshorts-feed{height:calc(100vh - 150px)} .gshort-card{max-width:100%;border-radius:0} }
.gshort-card .gshort-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.gshort-card .gshort-bg video{width:100%;height:100%;object-fit:cover}
.gshort-card .gshort-bg img{width:100%;height:100%;object-fit:cover}
.gshort-card .gshort-grad{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.85))}
/* v9.10.494 — poster handle + caption must sit CLEAR of the centred (+) create FAB
   (bottom-centre) and the right action rail. padding-bottom lifts the text above the
   FAB band (tunable via --gshort-cta-clear); padding-right keeps it off the rail.
   Longhands only (never re-add the shorthand — it would reset these). */
.gshort-card .gshort-overlay{position:relative;padding-top:16px;padding-right:64px;padding-bottom:var(--gshort-cta-clear,92px);padding-left:16px;z-index:1}
.gshort-card .gshort-author{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.gshort-card .gshort-author img{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}
.gshort-card .gshort-author-name{font-weight:700;font-size:14px;color:#fff}
.gshort-card .gshort-caption{font-size:14px;line-height:1.4;color:#eee;word-break:break-word}
.gshort-actions{position:absolute;right:12px;bottom:80px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:2}
.gshort-actions button{background:rgba(255,255,255,.12);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:background .15s}
.gshort-actions button:hover{background:rgba(255,255,255,.25)}
.gshort-actions .gshort-count{font-size:11px;color:rgba(255,255,255,.8);margin-top:-8px;text-align:center}
/* v9.10.495 — expanded right rail: avatar + subscribe badge (top) and a "…" menu. */
.gshort-actions .gshort-rail-av{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:6px}
.gshort-actions .gshort-rail-av > span{cursor:pointer;display:block;line-height:0}
.gshort-actions .gshort-rail-av img{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
.gshort-actions .gshort-follow{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);width:20px;height:20px;min-width:0;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:2px solid #0a0e14;font-size:13px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.gshort-actions .gshort-follow.on{background:#22c55e}
.gshort-menu{position:absolute;z-index:70;min-width:180px;background:rgba(18,24,38,.98);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:2px}
.gshort-menu button{background:transparent;border:none;color:var(--text);text-align:left;padding:10px 12px;border-radius:8px;font:500 13px Outfit,sans-serif;cursor:pointer;white-space:nowrap}
.gshort-menu button:hover{background:rgba(255,255,255,.08)}
.gshort-card .gshort-bg video{cursor:pointer}
.gshort-sound{position:absolute;top:12px;left:12px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px);user-select:none}
.gshort-comments-panel{display:none;background:rgba(13,19,32,.95);border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:10px;max-width:380px;width:100%}
.gshort-comments-panel.open{display:block}
/* ── v9.10.340 — Shorts Phase 1: YouTube-Shorts immersive layout ──────────────
   When the Shorts tab is active we strip the home padding + pager chrome so the
   video fills the content area edge-to-edge; the creation composer moves out of
   the feed and into a (+) bottom-sheet, and comments open in a bottom sheet.
   All gated behind body.guest-shorts-active so nothing else is touched. */
@media(max-width:900px){
  body.guest-shorts-active .home-scroll{padding:0 !important;gap:0 !important;overflow:hidden}
  body.guest-shorts-active .guest-dash{padding:0 !important;height:100%}
  body.guest-shorts-active #guest-tab-body{height:100%}
  body.guest-shorts-active .ghome-pager-dots{display:none}
  body.guest-shorts-active .gshorts-feed{height:100%;max-height:none;max-width:none}
  body.guest-shorts-active .gshort-card{max-width:none;border-radius:0}
}
@media(min-width:901px){
  /* desktop keeps the Feed/Shorts/Me tab row; just remove the form + give the column height */
  body.guest-shorts-active .gshorts-feed{height:calc(100vh - 150px)}
}
/* scoped-to-uploader header bar (tap a handle → their shorts page) */
body.guest-shorts-active #guest-tab-body{position:relative}
.gshorts-scopebar{display:flex;align-items:center;gap:9px;position:absolute;top:10px;left:10px;z-index:6;background:rgba(0,0,0,.55);color:#fff;padding:6px 12px 6px 8px;border-radius:999px;backdrop-filter:blur(6px);font-size:13px;font-weight:600}
.gshorts-scopebar .gshorts-scopeback{background:rgba(255,255,255,.16);border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.gshort-author-name{cursor:pointer}
.gshort-author img{cursor:pointer}
/* ── v9.10.341 Shorts Phase 2 — For You/Popular toggle, channel header, #tags ── */
.gshorts-modebar{display:flex;gap:6px;position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(0,0,0,.5);padding:4px;border-radius:999px;backdrop-filter:blur(6px)}
.gshorts-mode{background:transparent;border:none;color:rgba(255,255,255,.72);font:600 12px Outfit,sans-serif;padding:5px 14px;border-radius:999px;cursor:pointer}
.gshorts-mode.on{background:#fff;color:#04070d}
/* v9.10.496 — hashtag discovery: modebar "#" button, trending chips, tag-view sort. */
.gshorts-modebar .gshorts-discover{font-weight:700}
.gshorts-tagsort{display:flex;gap:4px;margin-left:auto;background:rgba(0,0,0,.35);padding:3px;border-radius:999px}
.gshorts-tagsort .gshorts-mode{padding:4px 12px;font-size:11px}
.gshort-trending{display:flex;flex-wrap:wrap;gap:8px}
.gshort-tagchip{display:inline-flex;align-items:center;gap:7px;background:rgba(90,209,255,.12);border:1px solid rgba(90,209,255,.3);color:#5ad1ff;border-radius:999px;padding:7px 13px;font:600 13px Outfit,sans-serif;cursor:pointer}
.gshort-tagchip:hover{background:rgba(90,209,255,.2)}
.gshort-tagchip .gshort-tagcount{color:rgba(255,255,255,.55);font-weight:500;font-size:11px}
.gshorts-channelhead{display:flex;align-items:center;gap:11px;position:absolute;top:10px;left:10px;right:10px;z-index:6;background:rgba(0,0,0,.6);color:#fff;padding:8px 12px;border-radius:16px;backdrop-filter:blur(8px)}
.gshorts-channelhead .gshorts-scopeback{background:rgba(255,255,255,.16);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.gshorts-channelhead .gch-av img{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.28)}
.gshorts-channelhead .gch-meta{flex:1 1 auto;min-width:0}
.gshorts-channelhead .gch-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gshorts-channelhead .gch-sub{font-size:11px;color:rgba(255,255,255,.6)}
.gch-subbtn{flex:0 0 auto;border:none;border-radius:999px;padding:8px 16px;font:700 12px Outfit,sans-serif;cursor:pointer;background:#ff2d55;color:#fff}
.gch-subbtn.on{background:rgba(255,255,255,.16);color:#fff}
.gch-selfbadge{flex:0 0 auto;font-size:11px;color:rgba(255,255,255,.6);padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px}
.gshort-caption .gtag,.gpost-text .gtag{color:#5ad1ff;font-weight:600;cursor:pointer}
/* ── v9.10.346 — @mention autocomplete + mention links + mini profile card ──── */
.gshort-caption .gmention,.gpost-text .gmention,.gpost-cmt .gmention{color:#a78bfa;font-weight:600;cursor:pointer}
.gshort-caption .gmention:hover,.gpost-text .gmention:hover{text-decoration:underline}
#mention-box{position:fixed;z-index:6800;display:none;flex-direction:column;max-height:262px;overflow-y:auto;
  background:linear-gradient(180deg,#111a2b,#0b1220);border:1px solid rgba(167,139,250,.3);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);padding:4px}
#mention-box.open{display:flex}
#mention-box .mb-row{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;
  color:#d7e0ee;font:600 13px Outfit,sans-serif;padding:8px 9px;border-radius:9px;cursor:pointer;text-align:left}
#mention-box .mb-row.on,#mention-box .mb-row:hover{background:rgba(167,139,250,.16)}
#mention-box .mb-row img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06);flex-shrink:0}
#mention-box .mb-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mention-box .mb-h{color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}
#mention-box .mb-f{margin-left:auto;font-size:10px;color:var(--accent);flex-shrink:0}
#mention-card{position:fixed;z-index:6900;display:none;width:250px;padding:14px;
  background:linear-gradient(180deg,#141d2f,#0c1322);border:1px solid rgba(167,139,250,.32);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
/* v9.10.361 — never wider than a narrow phone, so the horizontal clamp in
   mcPositionCard() always has a real solution. No overflow property is used. */
#mention-card{max-width:calc(100vw - 16px)}
#mention-card.open{display:block}
#mention-card .mc-top{display:flex;align-items:center;gap:10px}
#mention-card .mc-top img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
#mention-card .mc-n{font:700 14px Outfit,sans-serif;color:#eef3fb}
#mention-card .mc-h{font-size:12px;color:var(--muted)}
#mention-card .mc-acts{display:flex;gap:7px;margin-top:12px}
#mention-card .mc-acts button{flex:1;border:none;border-radius:9px;padding:8px;font:700 12px Outfit,sans-serif;cursor:pointer}
#mention-card .mc-add{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
#mention-card .mc-msg{background:rgba(255,255,255,.08);color:#d7e0ee}
#mention-card .mc-state{font-size:11.5px;color:var(--accent);margin-top:10px;text-align:center}
/* ── v9.10.347 — post-detail page (post + comments + Back) ─────────────────── */
#post-detail-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;padding:24px 14px 40px;overflow-y:auto}
#post-detail-overlay .pd-wrap{position:relative;max-width:640px;width:100%}
#post-detail-overlay .pd-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
#post-detail-overlay .pd-back{background:rgba(34,217,230,.14);border:1px solid rgba(34,217,230,.3);color:var(--accent);
  font:700 13px Outfit,sans-serif;padding:9px 15px;border-radius:10px;cursor:pointer}
#post-detail-overlay .pd-back:hover{background:rgba(34,217,230,.24)}
#post-detail-overlay .pd-x{background:rgba(255,255,255,.1);border:none;color:#fff;width:34px;height:34px;
  border-radius:50%;cursor:pointer;font-size:15px;flex-shrink:0}
body.pd-open{overflow:hidden}
@media(max-width:900px){ #post-detail-overlay{padding:12px 8px 30px} }
#notif-panel .np-item.np-clickable:hover{background:rgba(34,217,230,.12) !important}
/* ── v9.10.356 user-profile overlay ── additive, body-appended, position:fixed.
   Touches NO existing container/layout selector; mirrors #post-detail-overlay. */
.uname-link{cursor:pointer}
.uname-link:active{opacity:.6}
/* ── v9.10.430 — PROFILE IS A PAGE, NOT A POPUP ──────────────────────────────
   Owner: "it shouldn't be a popup, it should be a page it goes to."
   These rules used to hang off #usrprof-overlay, a position:fixed full-screen
   floating card. They now target #view-profile, an ordinary .view-pane, so the
   profile occupies the content area under the app's own top bar and bottom nav
   exactly like Home / Messages / KAIVERSE.
   NOTE: no `position:fixed` and NO `overflow` property is declared anywhere in
   this block — the pane scrolls by reusing the existing .cfg-scroll container on
   #usrprof-inner. Padding/margin longhands only. */
#view-profile .upage-bar{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding-top:10px;padding-right:12px;padding-bottom:10px;padding-left:12px;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
#view-profile .upage-bar button{border:none;background:transparent;color:var(--muted);
  cursor:pointer;font:600 13px Outfit,sans-serif}
#view-profile .upage-back{color:#22d9e6}
#view-profile .upage-acts{display:flex;gap:8px;align-items:center}
#view-profile .upage-body{padding-top:0;padding-right:0;padding-bottom:28px;padding-left:0;gap:0}
#view-profile .up-cover{height:96px;background:linear-gradient(135deg,#1b2740,#0d1524)}
#view-profile .up-id{display:flex;gap:12px;align-items:center;padding:0 14px 12px;margin-top:-26px}
#view-profile .up-nm{font:700 17px Outfit,sans-serif;color:#eef3fb}
#view-profile .up-hd{font-size:12px;color:var(--muted);margin-top:2px}
#view-profile .up-bio{padding:0 14px 10px;font-size:13px;color:#c8d3e2;line-height:1.45}
#view-profile .up-stats{display:flex;gap:16px;padding:0 14px 12px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
#view-profile .up-stats b{color:#eef3fb;font-size:13px}
#view-profile .up-acts{display:flex;gap:8px;padding:0 14px 14px;flex-wrap:wrap}
#view-profile .up-acts button{border:1px solid rgba(34,217,230,.3);background:rgba(34,217,230,.1);
  color:#22d9e6;border-radius:9px;padding:7px 14px;font:600 12.5px Outfit,sans-serif;cursor:pointer}
#view-profile .up-acts button[disabled]{opacity:.5;cursor:default}
#view-profile .up-tabs{display:flex;border-top:1px solid rgba(255,255,255,.07)}
#view-profile .up-tabs button{flex:1;border:none;background:transparent;color:var(--muted);
  padding:10px;font:600 12.5px Outfit,sans-serif;cursor:pointer;border-bottom:2px solid transparent}
#view-profile .up-tabs button.on{color:#22d9e6;border-bottom-color:#22d9e6}
#view-profile .up-body{padding:12px}
#view-profile .up-empty{padding:26px;text-align:center;color:var(--muted);font-size:12.5px}
#view-profile .up-item{padding:10px 12px;border:1px solid rgba(255,255,255,.06);
  border-radius:11px;margin-bottom:8px;background:rgba(255,255,255,.02)}
#view-profile .up-item .up-t{font-size:13px;color:#dbe4f0;line-height:1.45;white-space:pre-wrap;word-break:break-word}
#view-profile .up-item .up-m{font-size:10.5px;color:var(--muted-2);margin-top:5px}
body.up-open{overflow:hidden}
.gshort-caption .gtag:hover,.gpost-text .gtag:hover{text-decoration:underline}
/* center-bottom (+) create FAB — sits above the mobile bottom nav (YouTube-style) */
/* v9.10.494 — centred create (+) button, enlarged modestly (52 -> 60px). Stays
   horizontally centred (left:50% + translateX). Size is easy to re-tune here. */
.gshort-fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(60px + env(safe-area-inset-bottom));z-index:60;width:60px;height:60px;border-radius:18px;border:none;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:34px;font-weight:300;line-height:1;display:none;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(99,102,241,.5)}
.gshort-fab.on{display:flex}
.gshort-fab:active{transform:translateX(-50%) scale(.94)}
@media(min-width:901px){ .gshort-fab{bottom:26px;border-radius:50%} }
/* bottom sheets (comments + create) — YouTube-style slide-up panels */
.gsheet-backdrop{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:none}
.gsheet-backdrop.open{display:block}
.gsheet{position:fixed;left:0;right:0;bottom:0;z-index:201;background:var(--panel-solid,#0d1320);border-top-left-radius:18px;border-top-right-radius:18px;border-top:1px solid var(--border);max-height:76dvh;display:flex;flex-direction:column;transform:translateY(102%);transition:transform .24s ease,opacity .24s ease,visibility .24s ease;padding-bottom:env(safe-area-inset-bottom);opacity:0;visibility:hidden;pointer-events:none}
/* v9.10.342 — a CLOSED sheet must fully disappear. On mobile bottom:0 + translateY(102%)
   cleared the viewport, but the desktop override (bottom:24px) left the translate short by
   that offset, so a ~20px sliver of the create/comments sheet leaked at the bottom-right of
   the desktop feed. opacity/visibility/pointer-events guarantee it's gone until .open. */
.gsheet.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
@media(min-width:901px){ .gsheet{left:auto;right:24px;width:430px;bottom:24px;border-radius:16px;max-height:72vh} }
.gsheet-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:14px;color:#fff;flex:0 0 auto}
.gsheet-hd .gsheet-x{background:rgba(255,255,255,.1);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
.gsheet-body{overflow-y:auto;padding:12px 16px;flex:1 1 auto;min-height:60px}
.gsheet-foot{border-top:1px solid var(--border);padding:10px 12px;flex:0 0 auto}
.gsheet-foot .gpost-cmt-form{display:flex;gap:8px}
.gsheet-foot .gpost-cmt-form input{flex:1;min-width:0;padding:9px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--text);font-size:13px;outline:none}
.gsheet-foot .gpost-cmt-form button{border:none;border-radius:999px;padding:9px 16px;background:var(--accent);color:#04070d;font-weight:700;font-size:13px;cursor:pointer}
/* v9.10.511 — polished composer */
.gpost-composer{background:rgba(13,19,32,.78);border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:16px 18px;margin-bottom:16px;backdrop-filter:blur(6px);
  transition:border-color .2s,box-shadow .2s}
.gpost-composer:focus-within{border-color:rgba(99,102,241,.3);box-shadow:0 4px 20px rgba(99,102,241,.08)}
.gcomp-row{display:flex;gap:12px;align-items:flex-start}
.gcomp-text{width:100%;min-height:48px;max-height:200px;border:none;background:transparent;
  border-radius:0;padding:6px 0;color:var(--text);font:15px/1.5 Inter,sans-serif;resize:none;outline:none}
.gcomp-text::placeholder{color:rgba(148,163,184,.6)}
.gcomp-side{display:flex;flex-direction:column;gap:4px;flex-shrink:0;padding-top:4px}
.gcomp-icon{background:none;border:1px solid rgba(255,255,255,.06);border-radius:10px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all .15s}
.gcomp-icon:hover{color:var(--accent);border-color:rgba(34,217,230,.35);background:rgba(34,217,230,.08)}
.gcomp-foot{display:flex;align-items:center;gap:8px;margin-top:10px;border-top:1px solid rgba(255,255,255,.05);padding-top:10px;flex-wrap:wrap}
.gcomp-search{width:100%;padding:8px 12px 8px 30px;border-radius:999px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);color:var(--text);font:12px Inter,sans-serif;outline:none;transition:border-color .15s}
.gcomp-search:focus{border-color:rgba(99,102,241,.35)}
.gcomp-post-btn{padding:9px 26px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font:700 13px var(--ui),sans-serif;
  border-radius:999px;border:none;cursor:pointer;box-shadow:0 4px 14px -4px rgba(99,102,241,.5);
  transition:transform .12s,box-shadow .15s,opacity .15s;flex-shrink:0}
.gcomp-post-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -4px rgba(99,102,241,.6)}
.gcomp-post-btn:active{transform:translateY(0)}
.gcomp-upload-label{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.12);color:#c5d0e0;cursor:pointer;font-size:12px;transition:all .15s}
.gcomp-upload-label:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
@media (max-width:640px){
  .gcomp-side{flex-direction:row;padding-top:0;margin-top:6px}
  .gcomp-row{flex-wrap:wrap}
  .gcomp-icon{width:32px;height:32px}
  .gcomp-icon svg{width:17px;height:17px}
}
/* v9.10.511 — Active users row (replaces hollow "stories" concept with real online presence) */
.gstories-row{display:flex;gap:12px;overflow-x:auto;padding:8px 4px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gstories-row::-webkit-scrollbar{display:none}
.gstory-card{flex:0 0 auto;width:72px;text-align:center;cursor:pointer;position:relative}
.gstory-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2.5px solid rgba(99,102,241,.5);transition:border-color .2s,transform .2s;
  box-shadow:0 4px 12px rgba(0,0,0,.3)}
.gstory-card img:hover{border-color:#8b5cf6;transform:scale(1.08)}
.gstory-card .gstory-seen img{border-color:rgba(255,255,255,.12)}
/* Online dot indicator */
.gstory-card::after{content:'';position:absolute;top:2px;right:10px;width:10px;height:10px;
  border-radius:50%;background:#22c55e;border:2px solid #0f172a;z-index:1}
.gstory-create::after{display:none}
.gstory-name{font:600 10px var(--ui),sans-serif;color:var(--muted);margin-top:6px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:70px;margin-left:auto;margin-right:auto}
.gstory-create{position:relative}
.gstory-create-plus{width:56px;height:56px;border-radius:50%;
  border:2px solid rgba(99,102,241,.35);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--accent);
  transition:all .2s;background:rgba(99,102,241,.08);
  box-shadow:0 4px 12px rgba(99,102,241,.15)}
.gstory-create:hover .gstory-create-plus{border-color:rgba(99,102,241,.6);
  background:rgba(99,102,241,.15);box-shadow:0 6px 18px rgba(99,102,241,.25);transform:scale(1.05)}
/* v9.10.501 — feed flows directly without wrapper card */
.gfeed-flow{display:flex;flex-direction:column;gap:0}
/* Reels band interspersed in feed */
.gfeed-reels{margin:6px 0 14px;padding:0}
.gfeed-reels .gc-h{font:600 12px var(--ui),sans-serif;color:var(--text);margin-bottom:10px;letter-spacing:0;text-transform:none}
.gfeed-reels-scroll{display:flex;gap:10px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gfeed-reels-scroll::-webkit-scrollbar{display:none}
.gfeed-reel-thumb{flex:0 0 auto;width:110px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;background:#0a0e14;aspect-ratio:9/16;max-height:180px}
.gfeed-reel-thumb img{width:100%;height:100%;object-fit:cover}
.gfeed-reel-thumb .gfr-overlay{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.75));
  display:flex;flex-direction:column;justify-content:flex-end;padding:8px;font:500 10px var(--ui),sans-serif;color:#fff}
.gfeed-reel-thumb:hover{box-shadow:0 4px 16px rgba(0,0,0,.4);transform:translateY(-2px);transition:transform .15s}
/* v9.10.500 — composer option pills: soft rounded pills with subtle icon+label feel */
.gcomposer-opt{display:inline-flex;align-items:center;gap:5px;border-radius:999px !important;
  padding:7px 14px !important;font:600 12px var(--ui),Inter,sans-serif !important;
  background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.08) !important;
  color:#b0bfd0 !important;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important}
.gcomposer-opt:hover{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.16) !important;color:#e0e8f4 !important}
.guest-card .gc-h{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
/* v9.10.500 — right sidebar widget styling */
.gsb-user-row{display:flex;gap:10px;align-items:center}
.gsb-user-row img{border-radius:12px;background:#111;cursor:pointer;border:1px solid rgba(255,255,255,.08)}
.gsb-user-info{min-width:0}
.gsb-user-info .gsb-name{font:700 14px var(--ui),sans-serif;color:var(--text)}
.gsb-user-info .gsb-handle{font-size:11px;color:var(--muted)}
.gsb-trending-item{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .12s;border-radius:6px;margin:0 -4px;padding-left:4px;padding-right:4px}
.gsb-trending-item:last-child{border-bottom:none}
.gsb-trending-item:hover{background:rgba(255,255,255,.04)}
.gsb-trending-item .gsb-hash{font:700 15px var(--ui),sans-serif;width:22px;text-align:center;flex-shrink:0}
.gsb-trending-item .gsb-tag{font:600 12.5px var(--ui),sans-serif;color:var(--text)}
.gsb-trending-item .gsb-tagmeta{font-size:10px;color:var(--muted)}
.gsb-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gsb-stat{text-align:center;padding:10px 8px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.04);transition:border-color .15s}
.gsb-stat:hover{border-color:rgba(255,255,255,.10)}
.gsb-stat .gsb-sv{font:700 18px var(--ui),sans-serif;color:var(--accent);line-height:1.2}
.gsb-stat .gsb-sl{font:500 10px var(--ui),sans-serif;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}
.gsb-presence{display:flex;flex-direction:column;gap:4px}
.gsb-presence-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:var(--text)}
.gsb-presence-row .gsb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.gsb-presence-row .gsb-dot.online{background:var(--good)}
.gsb-presence-row .gsb-dot.idle{background:var(--warn)}
.gsb-suggested-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-radius:8px;transition:background .12s;margin:0 -4px}
.gsb-suggested-row:hover{background:rgba(255,255,255,.04)}
.gsb-suggested-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#111;border:1px solid rgba(255,255,255,.08)}
.gsb-suggested-row .gsb-sname{font:600 12px var(--ui),sans-serif;color:var(--text)}
.gsb-suggested-row .gsb-swhy{font-size:10px;color:var(--muted)}
.gsb-suggested-row .gsb-follow-btn{margin-left:auto;border:1px solid rgba(34,217,230,.4);background:rgba(34,217,230,.10);
  color:var(--accent);border-radius:999px;padding:4px 12px;font:600 10px var(--ui),sans-serif;cursor:pointer;transition:background .15s}
.gsb-suggested-row .gsb-follow-btn:hover{background:rgba(34,217,230,.22)}
/* ── v9.10.376 — PROFILE ACTION BAR + new components ──────────────────────────
   Owner: "can the buttons and text be better please its plain or crappy style".
   The profile actions (Share a thought / Edit profile / Theme / Badges) were square,
   flat, same-weight boxes with no hierarchy — nothing said which one was the primary
   action, and they read as a row of placeholders. Now: a clear primary, quieter
   secondaries, real radius, and a lift on hover so they feel pressable. */
   NOTE: those buttons carry heavy INLINE styles (each sets its own background and
   padding), and inline beats a class selector — so the properties that actually make
   them feel like buttons are forced here, while their individual colours are left
   alone. That keeps the visual identity the owner already chose and fixes only the
   "plain / crappy" part: shape, weight, spacing and feedback. */
.gprof-acts .gc-btn{
  border-radius:11px !important;
  padding:9px 16px !important;
  font-family:var(--ui),Inter,sans-serif !important;
  font-size:12px !important;
  letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.12);
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease !important;
  box-shadow:0 2px 6px -3px rgba(0,0,0,.6);
}
.gprof-acts .gc-btn:hover{
  transform:translateY(-1.5px);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.85);
  filter:brightness(1.12);
}
.gprof-acts .gc-btn:active{transform:translateY(0);filter:brightness(.96)}
/* The primary action gets a real glow so the row has a clear first step. */
.gprof-acts .gc-btn:first-child{box-shadow:0 8px 22px -10px rgba(124,58,237,.85)}

/* Filter chips (profile posts + avatar style picker) */
.gprof-filters{display:flex;gap:5px;align-items:center}
.gpf-chip{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  border-radius:999px;
  padding:5px 12px;
  font:600 11px var(--ui),Inter,sans-serif;
  letter-spacing:.3px;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.gpf-chip:hover{background:rgba(255,255,255,.09);color:#dfe8f5}
.gpf-chip.on{background:var(--accent,#22d9e6);color:#04070d;border-color:transparent;font-weight:700}

/* v9.10.379 — profile form: tag box + typeahead dropdown */
.s2-tagbox{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:24px}
.s2-tag{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(34,217,230,.13);border:1px solid rgba(34,217,230,.34);
  color:#dff6fa;border-radius:999px;padding:3px 6px 3px 10px;
  font:600 11px var(--ui),Inter,sans-serif;letter-spacing:.2px;
}
.s2-tag button{
  border:none;background:transparent;color:#9fd8e2;cursor:pointer;
  font-size:14px;line-height:1;padding:0 2px;border-radius:50%;
}
.s2-tag button:hover{color:#fff;background:rgba(255,255,255,.14)}
/* The dropdown is absolutely positioned so it overlays what's below rather than
   pushing the form around as you type — a shifting form is very hard to use. */
.s2-ac{
  display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:#111a2b;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.8);
  max-height:210px;
}
.s2-ac.open{display:block}
.s2-ac button{
  display:block;width:100%;text-align:left;border:none;background:transparent;
  color:#e6edf7;padding:8px 11px;font:500 12.5px Inter,sans-serif;cursor:pointer;
}
.s2-ac button:hover{background:rgba(255,255,255,.07)}
.s2-ac button:first-child{border-radius:10px 10px 0 0}
.s2-ac button:last-child{border-radius:0 0 10px 10px}

/* Avatar builder */
.av-build{display:flex;gap:16px;align-items:flex-start;margin:6px 0 14px;flex-wrap:wrap}
.av-preview{display:flex;flex-direction:column;gap:8px;align-items:center;flex:0 0 auto}
.av-preview img{
  width:132px;height:132px;border-radius:20px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85);
}
.av-reroll{width:132px;text-align:center}
.av-opts{flex:1;min-width:210px;display:flex;flex-direction:column;gap:4px}
.av-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px;margin-bottom:8px}
.av-styles .gpf-chip{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 4px;border-radius:10px;line-height:1.1;
}
.av-styles .gpf-chip img{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.05)}
.av-styles .gpf-chip span{font-size:9.5px;letter-spacing:.2px}
.av-bgs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.av-swatch{
  width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);
  color:var(--muted);font-size:11px;line-height:1;
  transition:transform .14s ease,box-shadow .14s ease;
}
.av-swatch:hover{transform:translateY(-1px)}
.av-swatch.on{box-shadow:0 0 0 2px var(--accent,#22d9e6);border-color:transparent}
.guest-card .gc-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.guest-card .gc-row:last-child{border-bottom:none}
.guest-card .gc-k{color:var(--muted)} .guest-card .gc-v{color:var(--text);font-family:var(--mono);font-size:11px;word-break:break-all;text-align:right}
.guest-card textarea{width:100%;min-height:120px;resize:vertical;background:rgba(0,0,0,.35);border:1px solid var(--border);
  border-radius:10px;color:#fff;padding:10px 12px;font:12.5px/1.5 Inter,sans-serif;outline:none}
.guest-card textarea:focus{border-color:rgba(34,217,230,.5)}
.guest-card .gc-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.guest-card .gc-btn{border:none;border-radius:9px;padding:9px 14px;font:700 11px Outfit,sans-serif;letter-spacing:.6px;
  text-transform:uppercase;cursor:pointer;background:linear-gradient(135deg,var(--accent),#0070a8);color:#04070d}
.guest-card .gc-btn:disabled{opacity:.55;cursor:wait}
.guest-card .gc-msg{font-size:11px;color:var(--muted);margin-top:8px;min-height:1.2em}
@media (max-width:900px){
  .guest-dash{padding:10px 10px 88px}
  .guest-banner h2{font-size:15px}
  .guest-card textarea{font-size:16px;min-height:140px}
}

/* Confirm modal */
.modal-overlay{position:fixed;inset:0;z-index:8000;background:rgba(2,4,9,0.78);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{width:min(440px,92vw);max-height:92vh;background:var(--panel-solid);border:1px solid rgba(248,113,113,0.4);
  border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.6);overflow:hidden;display:flex;flex-direction:column}
.modal-hdr{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px}
.modal-hdr .mi{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(248,113,113,0.12);color:var(--bad)}
.modal-hdr .mi svg{width:18px;height:18px}
.modal-hdr .mt{font-family:var(--ui);font-weight:800;font-size:14px;letter-spacing:0.5px;color:#fff}
.modal-body{padding:18px 20px;font-size:12.5px;line-height:1.6;color:#c8d2e0;max-height:60vh;overflow-y:auto}
.modal-body b{color:var(--warn)}
/* A5 Leo config fit: Leo section can be long (voice+tools), ensure scrolls inside modal */
.modal-body .leo-config, .modal-body .cap-leo { max-height: 45vh; overflow-y:auto; }
.modal-token{margin-top:12px}
.modal-token label{display:block;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.modal-token input{width:100%;background:rgba(0,0,0,0.4);border:1px solid var(--border);border-radius:8px;
  padding:9px 11px;color:#fff;font-family:var(--mono);font-size:12px;outline:none}
.modal-token input:focus{border-color:rgba(34,217,230,0.5)}
.modal-acts{padding:14px 20px 18px;display:flex;gap:10px;justify-content:flex-end}
.modal-btn{padding:9px 18px;border-radius:9px;font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:0.5px;text-transform:uppercase;cursor:pointer;border:1px solid var(--border);transition:all 0.14s}
.modal-btn.cancel{background:rgba(255,255,255,0.04);color:var(--text)}
.modal-btn.cancel:hover{background:rgba(255,255,255,0.09)}
.modal-btn.confirm{background:linear-gradient(135deg,#f87171,#b91c1c);color:#fff;border:none}
.modal-btn.confirm:hover{filter:brightness(1.08)}
.modal-state{padding:26px 22px;text-align:center;display:none;flex-direction:column;align-items:center;gap:14px}
.modal-state.show{display:flex}
.modal-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(34,217,230,0.2);
  border-top-color:var(--accent);animation:spin 0.9s linear infinite}
.modal-state .ms-t{font-family:var(--ui);font-weight:700;font-size:13px;color:var(--accent)}
.modal-state .ms-s{font-size:11px;color:var(--muted)}
/* neutral (non-destructive) modal accent for config edits */
.modal.neutral{border-color:rgba(34,217,230,0.4)}
.modal.neutral .modal-hdr .mi{background:rgba(34,217,230,0.12);color:var(--accent)}
.modal.neutral .modal-btn.confirm{background:linear-gradient(135deg,#22d9e6,#0070a8)}
.modal-body b.acc{color:var(--accent)}

/* ── inline editors (AI config + channel settings) ──────────────────────── */
.editor{display:flex;flex-direction:column;gap:11px}
.ed-field{display:flex;flex-direction:column;gap:5px}
.ed-field label{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-family:var(--ui);font-weight:700}
.ed-field input,.ed-field select{width:100%;background:rgba(0,0,0,0.4);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;color:#fff;font-family:var(--mono);font-size:12px;outline:none}
.ed-field input:focus,.ed-field select:focus{border-color:rgba(34,217,230,0.5)}
.ed-field select option{background:#0a0f1b;color:#fff}
.ed-hint{font-size:9px;color:var(--muted-2);line-height:1.5}
.ed-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;
  border:1px solid var(--border);border-radius:9px;background:rgba(0,0,0,0.2)}
.ed-toggle .et-lbl{font-size:11px;color:var(--text);font-weight:600}
.ed-toggle .et-sub{font-size:9px;color:var(--muted-2);margin-top:2px}
.switch{position:relative;width:38px;height:20px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;border-radius:20px;background:rgba(255,255,255,0.12);transition:.18s}
.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track + .knob{transform:translateX(18px)}
.spk-toggles{display:flex;flex-wrap:wrap;gap:6px}
.spk-tog{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:0.3px;padding:5px 10px;border-radius:7px;
  border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--muted-2);cursor:pointer;transition:.13s;user-select:none}
.spk-tog.on{background:rgba(34,217,230,0.1)}
.spk-tog:hover{border-color:rgba(34,217,230,0.4)}
.mini-btn.go{cursor:pointer;color:var(--accent);border-color:rgba(34,217,230,0.3);background:rgba(34,217,230,0.06)}
.mini-btn.go:hover{background:rgba(34,217,230,0.14)}
.ed-saved{font-size:10px;color:var(--good);font-family:var(--mono);display:flex;align-items:center;gap:6px}
.ed-err{font-size:10px;color:var(--bad);font-family:var(--mono)}

/* ── HOME OPS TELEMETRY (real, actionable) ──────────────────────────────── */
.ops-grid{padding:13px 14px;display:grid;grid-template-columns:1fr 1fr;gap:13px}
.meter{border:1px solid var(--border);border-radius:11px;padding:11px 12px;background:rgba(0,0,0,0.2)}
.meter .m-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.meter .m-lbl{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.meter .m-val{font-family:var(--mono);font-size:15px;font-weight:600}
.meter .m-sub{font-size:8.5px;font-family:var(--mono);color:var(--muted-2);margin-top:5px}
.meter-track{height:9px;border-radius:6px;background:rgba(255,255,255,0.06);overflow:hidden}
.meter-fill{height:100%;border-radius:6px;transition:width 0.4s}
.ok-c{color:var(--good)} .warn-c{color:var(--warn)} .bad-c{color:var(--bad)}
.ok-bg{background:var(--good)} .warn-bg{background:var(--warn)} .bad-bg{background:var(--bad)}
/* provider cooldown table */
.cd-table{width:100%;border-collapse:collapse;font-size:11px}
.cd-table th{font-family:var(--ui);font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:6px 9px;border-bottom:1px solid var(--border)}
.cd-table th.r,.cd-table td.r{text-align:right}
.cd-table td{padding:7px 9px;border-bottom:1px solid var(--border-2);font-family:var(--mono);font-size:10.5px}
.cd-prov{color:var(--text);font-weight:600}
.cd-model{color:var(--muted-2);font-size:9.5px}
.cd-badge{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.5px;padding:2px 7px;border-radius:6px;text-transform:uppercase}
.cd-badge.ok{background:rgba(74,222,128,0.12);color:var(--good)}
.cd-badge.cool{background:rgba(251,191,36,0.14);color:var(--warn)}
.cd-badge.standby{background:rgba(148,163,184,0.14);color:var(--muted)}
.cd-badge.off{background:rgba(248,113,113,0.14);color:var(--bad)}
.bots-grid{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.bot-line{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--border);border-radius:9px;background:rgba(0,0,0,0.16)}
.bot-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bot-nm{font-family:var(--ui);font-weight:600;font-size:11.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bot-up{font-family:var(--mono);font-size:9px;color:var(--muted-2);flex-shrink:0}
.bot-state{font-family:var(--mono);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}

.test-card{
  background:rgba(244,114,182,0.05);border:1px solid rgba(244,114,182,0.22);
  border-radius:8px;padding:9px;font-size:11px;
}
.test-card .tc-from{font-family:var(--ui);font-weight:700;font-size:10px;color:var(--c-groq);margin-bottom:3px}
.test-card .tc-cmd{font-family:var(--mono);font-size:10px;color:var(--text);word-break:break-all}
.test-card.done{border-color:rgba(74,222,128,0.25);background:rgba(74,222,128,0.04)}
.test-card.done .tc-from{color:var(--good)}

/* ── LOGS / ISSUES panel ─────────────────────────────── */
.logs-bar{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.logs-bar select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);
  border-radius:6px;font-family:var(--mono);font-size:10px;padding:3px 6px}
.logs-issues{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--muted-2);
  font-family:var(--ui);cursor:pointer}
.logs-issues input{accent-color:var(--accent)}
.logs-meta{font-size:8.5px;font-family:var(--mono);color:var(--muted-2);margin-left:auto}
.logs-view{max-height:300px;overflow:auto;background:rgba(0,0,0,0.32);border:1px solid var(--border);
  border-radius:8px;padding:6px 8px;font-family:var(--mono);font-size:10px;line-height:1.5}
.log-ln{white-space:pre-wrap;word-break:break-word;padding:1px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.log-ln.error{color:#f87171}
.log-ln.warn{color:#fbbf24}
.log-ln.info{color:var(--muted-2)}

/* ── MEMORY / LATTICE panel ──────────────────────────── */
.mem-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:9px}
.mem-stat{background:rgba(124,58,237,0.05);border:1px solid rgba(124,58,237,0.20);
  border-radius:7px;padding:7px 9px}
.mem-stat .msv{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--text)}
.mem-stat .msv.na{font-size:9px;color:var(--muted-2);font-weight:500}
.mem-stat .msl{font-family:var(--ui);font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-top:2px}
.mem-sec-hdr{font-family:var(--ui);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted-2);margin:4px 0 5px}
.mem-item{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:7px;
  padding:6px 8px;margin-bottom:5px;font-size:10px}
.mem-item .mi-meta{font-family:var(--mono);font-size:8px;color:var(--muted-2);margin-bottom:2px}
.mem-item .mi-txt{color:var(--text);word-break:break-word;line-height:1.45}

/* ── TEST OUTPUTS panel (sandbox files) ──────────────── */
.sbx-card{background:rgba(251,146,60,0.05);border:1px solid rgba(251,146,60,0.22);
  border-radius:8px;padding:8px;margin-bottom:6px}
.sbx-card .sc-name{font-family:var(--mono);font-weight:700;font-size:10px;color:var(--c-kaicoder,#fb923c);word-break:break-all}
.sbx-card .sc-meta{font-family:var(--mono);font-size:8px;color:var(--muted-2);margin:2px 0 4px}
.sbx-card pre{margin:0;max-height:140px;overflow:auto;background:rgba(0,0,0,0.32);border-radius:6px;
  padding:6px;font-family:var(--mono);font-size:9px;line-height:1.45;color:var(--muted-2);white-space:pre-wrap;word-break:break-word}

/* ── BOTTOM COMMAND BAR ──────────────────────────────── */
.cmdbar{
  position:relative;z-index:5;flex-shrink:0;background:var(--panel-2);
  border-top:1px solid var(--border);backdrop-filter:blur(24px);padding:11px 18px 12px;
}
.cmd-row{display:flex;gap:12px;align-items:stretch}
.cmd-input-wrap{flex:1;position:relative;display:flex;flex-direction:column;gap:7px}
.cmd-input-box{position:relative;flex:1}
.cmd-input-box .prefix{
  position:absolute;left:14px;top:13px;color:var(--accent);font-family:var(--mono);font-size:13px;pointer-events:none;opacity:0.7}
#cmd-input{
  width:100%;height:54px;background:rgba(0,0,0,0.4);color:#fff;
  border:1px solid var(--border);border-radius:10px;padding:14px 14px 14px 30px;
  font-family:var(--mono);font-size:12.5px;resize:none;outline:none;transition:all 0.18s;line-height:1.5;
}
#cmd-input:focus{border-color:rgba(34,217,230,0.5);box-shadow:0 0 0 3px var(--accent-glow)}
#cmd-input::placeholder{color:var(--muted-2)}
.roster-chips{display:flex;gap:6px;flex-wrap:wrap}
.rchip{
  font-size:9px;padding:3px 9px;border-radius:20px;border:1px solid var(--border);
  color:var(--muted);cursor:pointer;transition:all 0.14s;font-family:var(--mono);display:flex;align-items:center;gap:5px;
}
.rchip .rdot{width:6px;height:6px;border-radius:50%}
.rchip:hover{border-color:rgba(255,255,255,0.2)}
.rchip.active{background:rgba(255,255,255,0.04)}

.cmd-btns{display:flex;flex-direction:column;gap:7px;justify-content:flex-start;width:170px}
.btn{
  border:none;border-radius:9px;padding:9px 14px;font-family:var(--ui);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  cursor:pointer;transition:all 0.15s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn svg{width:14px;height:14px}
.btn.execute{background:linear-gradient(135deg,var(--accent),#0070a8);color:#04070d;
  box-shadow:0 4px 16px var(--accent-glow)}
.btn.execute:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.sec{background:rgba(255,255,255,0.05);color:var(--text);border:1px solid var(--border)}
.btn.sec:hover{background:rgba(255,255,255,0.09);transform:translateY(-1px)}
.btn-secondary-row{display:flex;gap:7px}
.btn-secondary-row .btn{flex:1;padding:8px 6px;font-size:9px}
.btn.kai{color:var(--c-kai);border-color:rgba(74,222,128,0.35)}
.btn.talk{color:var(--c-claudey);border-color:rgba(167,139,250,0.35)}

/* ── CHANNEL SUB-TABS (Chat / Metrics / Settings) ────── */
.ch-tabs{
  flex-shrink:0;display:flex;align-items:center;gap:4px;padding:7px 18px;
  border-bottom:1px solid var(--border);background:var(--panel-2);
}
.ch-tab{
  font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:6px 14px;border-radius:8px;cursor:pointer;color:var(--muted);border:1px solid transparent;
  transition:all 0.15s;display:flex;align-items:center;gap:6px;
}
.ch-tab svg{width:13px;height:13px}
.ch-tab:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.ch-tab.active{color:var(--accent);background:var(--accent-glow);border-color:rgba(34,217,230,0.3)}
.ch-pane{flex:1;min-height:0;display:none;flex-direction:column;overflow:hidden}
.ch-pane.active{display:flex}

/* ── METRICS PANE ────────────────────────────────────── */
.metrics-pane{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:18px}
.met-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.met-card{border:1px solid var(--border);border-radius:11px;padding:14px;background:rgba(255,255,255,0.015)}
.met-card .mc-v{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--accent)}
.met-card .mc-l{font-size:9px;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);margin-top:4px}
.met-section .ms-hdr{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.spark{display:flex;align-items:flex-end;gap:4px;height:74px;padding:8px 10px;border:1px solid var(--border);border-radius:11px;background:rgba(0,0,0,0.2)}
.spark .bar{flex:1;min-height:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent-2));opacity:0.85}
.spark .bar:hover{opacity:1}
.spk-list{display:flex;flex-direction:column;gap:7px}
.spk-row{display:flex;align-items:center;gap:10px}
.spk-av{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:11px;color:#04070d}
.spk-name{flex:1;font-family:var(--ui);font-weight:600;font-size:12px}
.spk-bar-wrap{flex:2;height:7px;border-radius:5px;background:rgba(255,255,255,0.05);overflow:hidden}
.spk-bar{height:100%;border-radius:5px}
.spk-cnt{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:34px;text-align:right}

/* SETTINGS pane reuses sp-* classes in the center column */
.config-pane{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:18px}

/* ── BOT PROFILE + DM VIEW (slide-over) ──────────────── */
.bot-view{
  /* 2026-07-10: fixed + viewport-capped — the absolute 420px card could clip past
     the window edge on desktop ("can't see it"); fixed-positioning always fits. */
  position:fixed;top:50px;right:0;bottom:0;width:min(440px,92vw);z-index:30;
  background:var(--panel-solid);border-left:1px solid var(--border);
  box-shadow:-26px 0 50px rgba(0,0,0,0.55);transform:translateX(100%);
  transition:transform 0.26s ease;display:flex;flex-direction:column;
}
.bot-view.open{transform:translateX(0)}
.bv-hdr{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:13px}
.bv-av{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:19px;color:#04070d;box-shadow:0 0 18px rgba(0,0,0,0.4)}
.bv-meta{flex:1;min-width:0}
.bv-name{font-family:var(--ui);font-weight:800;font-size:16px;color:#fff;display:flex;align-items:center;gap:8px}
.bv-status{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.bv-role{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.bv-x{cursor:pointer;color:var(--muted);width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.bv-x:hover{color:var(--bad)}
.bv-config{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.bv-cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bv-cfg{border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:rgba(255,255,255,0.015)}
.bv-cfg .k{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2)}
.bv-cfg .v{font-family:var(--mono);font-size:12px;color:var(--text);margin-top:3px;word-break:break-word}
.bv-edit-note{font-size:9.5px;color:var(--muted-2);display:flex;align-items:center;gap:7px}
.bv-thread{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:11px}
.bv-empty{color:var(--muted-2);text-align:center;font-size:11px;padding:30px 10px;line-height:1.7}
/* bio block in the config header */
.bv-bio{border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:rgba(255,255,255,0.015)}
.bv-bio-txt{font-size:11.5px;line-height:1.55;color:#c8d2e0}
.bv-bio-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.bv-bio-tag{font-size:8.5px;font-family:var(--mono);padding:2px 7px;border-radius:6px;background:rgba(34,217,230,0.1);color:var(--accent);border:1px solid rgba(34,217,230,0.25)}
/* entity-popup: gear, key-stats, timeline/activity sub-tabs */
.ov-gear{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:auto;border-radius:7px;cursor:pointer;color:var(--muted);transition:color .15s,background .15s}
.ov-gear:hover{color:var(--accent);background:rgba(34,217,230,0.1)}
.ov-gear svg{width:15px;height:15px}
.ov-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:11px 0 4px}
.ov-stat{border:1px solid var(--border);border-radius:9px;padding:8px 6px;text-align:center;background:rgba(255,255,255,0.015)}
.ovs-v{font-family:var(--mono);font-size:14px;font-weight:600;color:#dce4f1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovs-l{font-size:8px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.ov-tabs{display:flex;gap:4px;margin-top:10px;border-bottom:1px solid var(--border)}
.ov-tab{flex:1;font-family:var(--ui);font-size:11px;font-weight:700;padding:8px 6px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted-2);cursor:pointer}
.ov-tab:hover{color:#c8d2e0}
.ov-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* timeline/activity feed rows in the popup + entity portfolio */
.bvp-hdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.bvp-chan{font-size:8.5px;font-family:var(--mono);color:var(--accent);padding:1px 6px;border-radius:5px;background:rgba(34,217,230,0.08)}
.bvp-ts{font-family:var(--mono);font-size:8.5px;color:var(--muted-2);margin-left:auto}
.bvp-txt{font-size:12px;line-height:1.5;color:#dce4f1;white-space:pre-wrap;word-break:break-word}
/* profile tabs */
.bv-tabs{display:flex;gap:4px;padding:8px 14px 0;border-bottom:1px solid var(--border)}
.bv-tab{flex:1;font-family:var(--ui);font-size:11px;font-weight:700;padding:8px 6px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted-2);cursor:pointer}
.bv-tab:hover{color:#c8d2e0}
.bv-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* social feed of the bot's posts */
.bv-feed,.bv-ops{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.bv-post{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,0.015)}
.bv-post.stressed{border-color:rgba(255,180,84,0.5);background:rgba(255,180,84,0.06)}
.bp-hdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.bp-ts{font-family:var(--mono);font-size:8.5px;color:var(--muted-2)}
.bp-ch{font-size:8px;font-family:var(--mono);color:var(--muted-2);padding:1px 5px;border-radius:5px;background:rgba(255,255,255,0.05)}
.bp-met{font-family:var(--mono);font-size:8.5px}
.bp-flag{font-size:8.5px;font-family:var(--mono);color:#ffb454;margin-left:auto}
.bp-body{font-size:12px;line-height:1.5;color:#dce4f1;white-space:pre-wrap;word-break:break-word}
.bv-ops .act-row{padding:6px 4px}
.dm{display:flex;flex-direction:column;gap:3px;max-width:82%}
.dm.me{align-self:flex-end;align-items:flex-end;max-width:78%;margin-right:4px}
.dm.them{align-self:flex-start;align-items:flex-start;max-width:78%}
.dm .dm-who{font:500 10px Inter,sans-serif;color:#64748b;padding:0 4px 2px;letter-spacing:0}
.dm .dm-bub{padding:10px 14px;border-radius:18px;font:400 14px/1.55 Inter,sans-serif;white-space:pre-wrap;word-break:break-word}
.dm.me .dm-bub{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-radius:18px 18px 4px 18px;box-shadow:0 2px 8px rgba(99,102,241,.2)}
.dm.them .dm-bub{background:rgba(30,41,59,.8);border:1px solid rgba(148,163,184,.12);color:#e2e8f0;border-radius:18px 18px 18px 4px}
.dm.sys .dm-bub{background:rgba(255,255,255,0.03);border:1px dashed var(--border);color:var(--muted);font-style:italic;font-size:12px}
/* 2026-07-17 — DM read receipts + typing indicator */
.dm-status{font:500 10px Inter,sans-serif;color:#64748b;padding:2px 6px 0;align-self:flex-end;letter-spacing:.3px}
.dm-status.seen{color:var(--accent,#22d9e6)}
.dm-status.pending{color:#475569;opacity:.6}
.typing-dots{display:inline-flex;align-items:center;gap:4px;min-height:14px}
.typing-dots .td{width:6px;height:6px;border-radius:50%;background:var(--muted,#8aa);opacity:.4;animation:tdBlink 1.2s infinite ease-in-out}
.typing-dots .td:nth-child(2){animation-delay:.2s}
.typing-dots .td:nth-child(3){animation-delay:.4s}
@keyframes tdBlink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.dm.sys{align-self:center;max-width:90%;align-items:center}
.bv-compose{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:9px;align-items:flex-end}
.bv-compose textarea{flex:1;height:42px;max-height:120px;background:rgba(0,0,0,0.4);color:#fff;border:1px solid var(--border);
  border-radius:10px;padding:11px 13px;font-family:var(--ui);font-size:12.5px;resize:none;outline:none;line-height:1.4}
.bv-compose textarea:focus{border-color:rgba(34,217,230,0.5);box-shadow:0 0 0 3px var(--accent-glow)}
.bv-send{flex-shrink:0;width:42px;height:42px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),#0070a8);color:#04070d;display:flex;align-items:center;justify-content:center}
.bv-send:hover{filter:brightness(1.1)}
.bv-send svg{width:18px;height:18px}
.agent-row{cursor:pointer}
.agent-dm-ic{width:15px;height:15px;color:var(--muted-2);flex-shrink:0}
.agent-row:hover .agent-dm-ic{color:var(--accent)}
.bv-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.bv-actions .mini-btn{flex:1}

/* ── BROWSER-STYLE TAB STRIP (center area) ──────────────── */
.tab-strip{display:flex;align-items:stretch;gap:4px;padding:5px 8px 0;background:rgba(0,0,0,0.28);
  border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:thin}
.tab-strip::-webkit-scrollbar{height:5px}
.tab-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px}
.tab-strip.empty{display:none}
.os-tab{display:flex;align-items:center;gap:7px;padding:7px 9px 7px 11px;max-width:190px;min-width:110px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);border-bottom:none;
  border-radius:9px 9px 0 0;cursor:pointer;flex-shrink:0;position:relative;user-select:none;transition:background 0.15s}
.os-tab:hover{background:rgba(255,255,255,0.06)}
.os-tab.active{background:var(--panel-solid);border-color:var(--border);box-shadow:0 -2px 10px rgba(0,0,0,0.3)}
.os-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.os-tab.dragging{opacity:0.45}
.os-tab .ot-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.os-tab .ot-label{flex:1;font-family:var(--ui);font-size:11.5px;font-weight:600;color:#c8d2e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-tab.active .ot-label{color:#fff}
.os-tab .ot-close{width:16px;height:16px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted-2)}
.os-tab .ot-close:hover{background:rgba(248,113,113,0.16);color:var(--bad)}
.os-tab .ot-close svg{width:11px;height:11px}

/* ── CENTER PORTFOLIO PAGE ──────────────────────────────── */
.view-pane#view-portfolio{overflow:hidden}
.pf-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 0 40px}
.pf-hero{display:flex;align-items:flex-start;gap:18px;padding:24px 28px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent);border-bottom:1px solid var(--border)}
.pf-av{width:72px;height:72px;border-radius:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:30px;color:#04070d;box-shadow:0 0 30px rgba(0,0,0,0.5)}
.pf-id{flex:1;min-width:0}
.pf-name{font-family:var(--ui);font-weight:800;font-size:26px;color:#fff;display:flex;align-items:center;gap:12px}
.pf-name .pf-status{width:11px;height:11px;border-radius:50%}
.pf-role{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:5px 0 12px}
.pf-bio{font-size:13px;line-height:1.6;color:#c8d2e0;max-width:760px}
.pf-bio-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pf-bio-tag{font-size:9.5px;font-family:var(--mono);padding:3px 9px;border-radius:7px;background:rgba(34,217,230,0.1);color:var(--accent);border:1px solid rgba(34,217,230,0.25)}
.pf-vitals{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:18px 28px;border-bottom:1px solid var(--border)}
.pf-vital{border:1px solid var(--border);border-radius:11px;padding:12px 14px;background:rgba(255,255,255,0.015)}
.pf-vital .vv{font-family:var(--mono);font-size:20px;font-weight:600;color:#fff}
.pf-vital .vl{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-top:4px}
.pf-vital .vn{font-size:8px;color:var(--muted-2);margin-top:3px;font-style:italic}
.pf-secthdr{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:0.6px;color:#fff;
  padding:18px 28px 8px;display:flex;align-items:center;gap:10px}
.pf-secthdr .pf-count{font-size:9px;font-family:var(--mono);color:var(--muted-2);font-weight:400}
.pf-cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:0 28px 8px}
.pf-cfg{border:1px solid var(--border);border-radius:10px;padding:11px 13px;background:rgba(255,255,255,0.015)}
.pf-cfg .k{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2)}
.pf-cfg .v{font-family:var(--mono);font-size:12.5px;color:var(--text);margin-top:4px;word-break:break-word}
.pf-tabs{display:flex;gap:6px;padding:8px 28px 0;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:var(--panel-solid);z-index:2;flex-wrap:wrap}
.pf-tab{font-family:var(--ui);font-size:12px;font-weight:700;padding:9px 14px;background:none;border:none;
  border-bottom:2px solid transparent;color:var(--muted-2);cursor:pointer}
.pf-tab:hover{color:#c8d2e0}
.pf-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.pf-pane{padding:14px 28px;display:none;flex-direction:column;gap:9px}
.pf-pane.on{display:flex}
.pf-edit-row{padding:4px 28px 8px}
.pf-empty{color:var(--muted-2);text-align:center;font-size:12px;padding:36px 10px;line-height:1.7}
.pf-dm-thread{display:flex;flex-direction:column;gap:11px;min-height:120px}

/* ── CHANNEL DETAIL slide-over (mirrors .bot-view) ───── */
.chan-view{
  position:absolute;top:50px;right:0;bottom:0;width:440px;z-index:30;
  background:var(--panel-solid);border-left:1px solid var(--border);
  box-shadow:-26px 0 50px rgba(0,0,0,0.55);transform:translateX(100%);
  transition:transform 0.26s ease;display:flex;flex-direction:column;
}
.chan-view.open{transform:translateX(0)}
/* ── right-edge scrim fix (2026-07-10, v9.10.234) ──────────────────────────
   The off-canvas slide-overs (.settings-panel / .bot-view / .chan-view) sit at
   right:0 and are pushed fully off-screen with translateX(100%) when closed, but
   their LEFTWARD box-shadow (-20..-26px x, 40-50px blur, up to rgba(0,0,0,.55)) is
   painted at z-index 20-30 — ABOVE the z-5 composer — so it bled a persistent dark
   fade back onto the visible right edge, dimming the Send button / composer. While
   closed, drop the shadow (nothing to overlay) and make them inert. The depth shadow
   returns the moment a panel is actually .open, so open-state looks unchanged. */
.settings-panel:not(.open),.bot-view:not(.open),.chan-view:not(.open){box-shadow:none;pointer-events:none}
.cv-hdr{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:13px}
.cv-av{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:20px;color:var(--accent);background:var(--accent-glow);box-shadow:0 0 18px rgba(0,0,0,0.4)}
.cv-av svg{width:22px;height:22px}
.cv-meta{flex:1;min-width:0}
.cv-name{font-family:var(--ui);font-weight:800;font-size:16px;color:#fff;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-status{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cv-role{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.cv-x{cursor:pointer;color:var(--muted);width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.cv-x:hover{color:var(--bad)}
.cv-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:18px;-webkit-overflow-scrolling:touch}
.cv-acts{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:9px}
.cv-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;
  padding:11px 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--muted-2);transition:all 0.14s}
.cv-btn svg{width:14px;height:14px}
.cv-btn.go{color:#04070d;background:linear-gradient(135deg,var(--accent),#0070a8);border:none}
.cv-btn.go:hover{filter:brightness(1.1)}
.cv-btn:hover{background:rgba(255,255,255,0.07);color:var(--accent);border-color:rgba(34,217,230,0.4)}
.cv-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,0.2)}
.cv-pill .dot{width:8px;height:8px;border-radius:50%}
.cv-sp{display:flex;flex-wrap:wrap;gap:6px}
.cv-sp .tag{font-family:var(--ui);font-size:10px;font-weight:600;padding:3px 9px;border-radius:7px;border:1px solid var(--border)}
.cv-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0}
.cv-row span:first-child{color:var(--muted)}
.cv-row .v{font-family:var(--mono);color:var(--text);text-align:right}

/* ── TOPOLOGY interactivity (hover/select highlight + tooltip) ─ */
.topo-node{cursor:pointer;transition:opacity 0.16s ease}
.topo-edge{transition:stroke-opacity 0.16s ease,stroke-width 0.16s ease}
svg.topo-svg.has-focus .topo-node:not(.focus){opacity:0.22}
svg.topo-svg.has-focus .topo-edge:not(.focus){stroke-opacity:0.04!important}
.topo-node.focus .node-ring{opacity:1}
.node-ring{opacity:0;transition:opacity 0.16s ease}
.topo-tip{position:absolute;pointer-events:none;z-index:50;opacity:0;transform:translate(-50%,-130%);
  background:var(--panel-solid);border:1px solid var(--border);border-radius:8px;padding:6px 10px;
  font-family:var(--ui);font-size:11px;font-weight:600;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,0.5);transition:opacity 0.12s}
.topo-tip .tip-sub{font-family:var(--mono);font-size:9px;color:var(--muted);font-weight:400;margin-top:2px}

/* ── RAIL TOOLTIPS ───────────────────────────────────── */
.rail-btn{position:relative}
.rail-tip{
  position:absolute;left:48px;top:50%;transform:translateY(-50%) translateX(-6px);
  background:var(--panel-solid);border:1px solid var(--border);color:var(--text);
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.4px;white-space:nowrap;
  padding:5px 10px;border-radius:8px;pointer-events:none;opacity:0;z-index:60;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);transition:opacity 0.15s,transform 0.15s;
}
.rail-btn:hover .rail-tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* ── VIEW PANES (switched by rail) ───────────────────── */
.view-pane{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ── HOME / MISSION CONTROL DASHBOARD ────────────────── */
.home-scroll{flex:1;overflow-y:auto;padding:22px 24px 40px;display:flex;flex-direction:column;gap:22px}
.home-status{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
  padding:20px 22px;border:1px solid var(--border);border-radius:14px;
  background:linear-gradient(135deg,rgba(34,217,230,0.05),rgba(255,255,255,0.012));
}
.hs-cell{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--border-2);padding-left:16px}
.hs-cell:first-child{border-left:none;padding-left:0}
.hs-cell .hsv{font-family:var(--mono);font-size:23px;font-weight:600;color:var(--accent)}
.hs-cell .hsl{font-size:9.5px;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted)}
.hs-cell .hsv.ok{color:var(--good)}
.hs-cell .hsv.bad{color:var(--bad)}

/* glassy mission-control card */
.mc-card{border:1px solid var(--border);border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,0.022),rgba(0,0,0,0.10));
  overflow:hidden;display:flex;flex-direction:column;min-width:0;
  box-shadow:0 8px 26px rgba(0,0,0,0.22)}
/* LEARNING & DREAMS fix: that view stacks .mc-card panels inside a fixed-height
   flex column (#learn-body / .learn-scroll). Flex children shrink by default and
   .mc-card has overflow:hidden, so each section (Scorecard, Training Activity,
   Vitals, Pipeline, Dreams) was squished into a tiny clipped window. Pin the
   cards to their natural content height so the whole view scrolls instead. */
.learn-scroll > .mc-card{flex-shrink:0}
.mc-hdr{padding:14px 17px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.mc-hdr .mc-t .lbl{font-size:13.5px;font-weight:700}
.mc-hdr .mc-t{display:flex;align-items:center;gap:9px;min-width:0}
.mc-hdr .mc-t svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}
.mc-hdr .mc-t .lbl{color:var(--text)}
.mc-hdr .mc-cnt{font-size:9px;font-family:var(--mono);color:var(--muted);flex-shrink:0}
.mc-hdr.link{cursor:pointer;transition:background 0.14s}
.mc-hdr.link:hover{background:rgba(34,217,230,0.05)}
.mc-open{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui);font-size:8px;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--border);border-radius:7px;padding:3px 7px;transition:all 0.14s;flex-shrink:0}
.mc-hdr.link:hover .mc-open{color:var(--accent);border-color:rgba(34,217,230,0.4)}
.mc-open svg{width:10px;height:10px}

/* ── KAI VITALS card (Learning view) — 4 grouped sections, scannable rows ── */
.vit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.vit-sec{border:1px solid var(--border);border-radius:11px;padding:15px 17px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,0.018),rgba(0,0,0,0.06))}
.vit-h{font-size:11px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--accent);margin-bottom:11px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.vit-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:6px 0;font-size:12.5px;border-bottom:1px dotted rgba(255,255,255,0.04)}
.vit-row:last-child{border-bottom:none}
.vit-l{color:var(--muted);min-width:0}
.vit-v{font-family:var(--mono);font-size:13px;color:var(--text);text-align:right;white-space:nowrap}
.vit-v.na{color:var(--muted-2);font-style:italic;font-size:11.5px}
/* OVERLAP FIX: long label + long value (e.g. "Hippocampus CA3/CA1" + "patterns 0 ·
   pending 0 · promoted 0") collided because the nowrap value spilled LEFT over the
   label. Let the row wrap so a too-wide value drops to its own right-aligned line. */
.vit-row{flex-wrap:wrap}
.vit-row .vit-l{flex:1 1 auto}
.vit-row .vit-v{flex:0 0 auto;margin-left:auto;max-width:100%}
.vit-tag{font-size:7.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-left:6px;padding:1px 4px;border-radius:4px;vertical-align:middle;background:rgba(255,255,255,0.05);color:var(--muted-2)}
.vit-tag.engine{background:rgba(34,217,230,0.14);color:#22d9e6}
.vit-tag.derived{background:rgba(167,139,250,0.14);color:#a78bfa}
.vit-tag.bot{background:rgba(74,222,128,0.14);color:#4ade80}
.pl-stepper{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pl-step{font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:4px 9px;border-radius:7px;border:1px solid var(--border);color:var(--muted-2);background:rgba(255,255,255,0.02)}
.pl-step.active{border-color:#22d9e6;color:#22d9e6;background:rgba(34,217,230,0.1)}
.pl-step.done{border-color:#4ade80;color:#4ade80}
.pl-arrow{color:var(--muted-2);font-size:11px}
.pl-win{font-weight:700;font-size:10px;letter-spacing:0.03em;padding:1px 6px;border-radius:5px}
.pl-win.run{background:rgba(34,217,230,0.16);color:#22d9e6}
.pl-win.open{background:rgba(251,191,36,0.16);color:#fbbf24}
.pl-win.closed{background:rgba(148,163,184,0.14);color:var(--muted-2)}
.vit-bar-row{padding:6px 0;border-bottom:1px dotted rgba(255,255,255,0.04)}
.vit-src{font-size:7px;margin-left:5px;vertical-align:middle;cursor:help}
.vit-src.eng{color:#4ade80}
.vit-src.der{color:#fbbf24}

/* ── KAI TRAINING (Learning view): scorecard + live terminal + composer ──
   Fully responsive: the scorecard reflows via auto-fit; the terminal is a
   min-height:0 flex child with its own overflow so it never clips the view. */
.trn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.trn-cell{border:1px solid var(--border);border-radius:11px;padding:10px 12px;min-width:0;
  background:linear-gradient(160deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06))}
.trn-cell .k{font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:5px}
.trn-cell .v{font-family:var(--mono);font-size:21px;font-weight:600;color:var(--text);line-height:1.1;word-break:break-word}
.trn-cell .v.na{color:var(--muted-2);font-style:italic;font-size:13px}
.trn-cell .sub{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);margin-top:3px}
.trn-status{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;font-family:var(--mono)}
.trn-status.pass{background:rgba(74,222,128,0.14);color:#4ade80}
.trn-status.fail{background:rgba(248,113,113,0.14);color:#f87171}
.trn-status.idle{background:rgba(255,255,255,0.05);color:var(--muted-2)}
.trn-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.trn-chip{background:rgba(251,191,36,0.12);color:#fbbf24;border-radius:6px;padding:2px 8px;font-size:10px;font-family:var(--mono)}
.trn-chip.topic{background:rgba(34,217,230,0.10);color:#22d9e6}
/* live terminal */
.train-term{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--muted);
  background:rgba(0,0,0,0.22);border-top:1px solid var(--border);
  height:clamp(260px,42vh,560px);overflow-y:auto;padding:10px 12px 14px;
  display:flex;flex-direction:column;gap:7px;min-height:0;scroll-behavior:smooth}
.train-term:focus{outline:1px solid rgba(34,217,230,0.4);outline-offset:-1px}
.trn-entry{border-left:2px solid var(--border);padding:5px 0 5px 9px}
.trn-entry .hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.trn-entry .ph{font-size:10px;font-weight:700;letter-spacing:0.03em}
.trn-entry .tm{font-size:9px;color:var(--muted-2)}
.trn-entry .bd{color:var(--text);white-space:pre-wrap;word-break:break-word;font-size:10.5px;line-height:1.5}
.train-composer{display:flex;gap:8px;padding:9px 11px;border-top:1px solid var(--border);background:rgba(255,255,255,0.02)}
.train-composer input{flex:1;min-width:0;background:rgba(0,0,0,0.25);border:1px solid var(--border);
  border-radius:8px;padding:8px 11px;color:var(--text);font-family:var(--ui);font-size:12px;outline:none}
.train-composer input:focus{border-color:rgba(34,217,230,0.5)}
.train-composer button{flex:0 0 auto;background:var(--accent);color:#04121a;border:none;border-radius:8px;
  padding:8px 16px;font-weight:600;font-size:12px;cursor:pointer;font-family:var(--ui)}
.train-composer button:disabled{opacity:0.5;cursor:default}
.train-composer-note{font-size:9.5px;color:var(--muted-2);padding:6px 12px 9px;line-height:1.4}
@media (max-width:560px){ .trn-cell .v{font-size:18px} .train-term{height:clamp(220px,38vh,440px)} }

/* ── TETRIS GRID: dense, balanced mission-control layout (no dead space) ──
   12-col grid; cards span columns + rows so they pack tightly. The tall cards
   (radar, ops, provider tabs) sit beside short ones so columns stay level. */
.home-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:stretch;
  grid-auto-flow:row dense;
}
/* Less dense / more readable: each card gets a real minimum height so sections
   are big enough to read and you SCROLL down through them (webpage-style) rather
   than everything crushed onto one screen. */
.home-grid > .mc-card{min-height:240px}
.g-sys{grid-column:span 7;grid-row:span 2;min-height:340px}   /* System Resources (wide, tall) */
.g-radar{grid-column:span 5;grid-row:span 3;min-height:480px} /* System Radar (tall) */
/* A6 radar trim: hide providers per backlog. (2026-07-10: this rule also hid
   .g-board .leaderboard — the agent leaderboard TABLE — so the card rendered its
   "N/N online" header but ZERO rows. That was an overreaching selector, not the
   intended "leaderboard axes" trim. Un-hidden so the 9 agents list again.) */
.g-prov { display: none !important; }
.g-prov{grid-column:span 5;grid-row:span 2;min-height:340px}  /* Provider/Connections tabbed box */
.g-lat{grid-column:span 7;grid-row:span 1;min-height:240px}   /* Lattice Metrics — WIDER (was span 3): uses the horizontal room */
.g-board{grid-column:1 / -1;grid-row:span 1;min-height:300px} /* agent leaderboard — full-width band */
.g-ops{grid-column:1 / -1;grid-row:span 1;min-height:300px}   /* live operations — full-width */
/* let inner scroll areas breathe inside fixed-height rows */
.g-board .leaderboard,.g-ops .activity-stream,.g-prov .ptab-body{max-height:none}

/* ── lattice key-metrics tiles ─────────────────────────── */
/* WIDER: lay the tiles out across the available width (auto-fit, ~3 across on a
   wide card) instead of a tall narrow 2-col block. Bigger type for readability. */
.lat-grid{padding:14px 16px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;align-content:start}
.lat-cell{border:1px solid var(--border);border-radius:11px;background:rgba(0,0,0,0.18);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.lat-cell .lcv{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--accent)}
.lat-cell .lcv.na{color:var(--muted-2);font-size:13px}
.lat-cell .lcl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.lat-cell .lcd{font-size:9px;font-family:var(--mono);color:var(--muted-2)}
.lat-cell.pos .lcv{color:var(--good)} .lat-cell.neg .lcv{color:var(--bad)}

/* ── PROVIDER / CONNECTIONS tabbed box ─────────────────── */
.ptabs{display:flex;gap:4px;align-items:center}
.ptab-btn{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
  padding:4px 10px;border-radius:7px;background:rgba(255,255,255,0.04);color:var(--muted-2);
  border:1px solid transparent;cursor:pointer;transition:all 0.14s}
.ptab-btn:hover{color:#c8d2e0;background:rgba(255,255,255,0.08)}
.ptab-btn.on{background:rgba(34,217,230,0.16);color:var(--accent);border-color:rgba(34,217,230,0.4)}
.ptab-body{flex:1;overflow-y:auto;min-height:0}

/* ── agent leaderboard (summary table, vitals visible) ── */
.leaderboard{padding:4px 6px 8px;overflow-x:auto;flex:1;overflow-y:auto}
.lb-table{width:100%;border-collapse:collapse;font-size:11px}
.lb-table th{font-family:var(--ui);font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);text-align:right;padding:6px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel-solid);z-index:1}
.lb-table th.l{text-align:left}
.lb-row td{padding:6px 8px;border-bottom:1px solid var(--border-2);vertical-align:middle;text-align:right;font-family:var(--mono);font-size:10.5px}
.lb-row td.l{text-align:left}
.lb-row:hover td{background:rgba(255,255,255,0.022)}
.lb-row.lb-top td{background:rgba(255,210,122,0.05)}
.lb-row.lb-top:hover td{background:rgba(255,210,122,0.09)}
.lb-agent{display:flex;align-items:center;gap:8px;min-width:0}
.lb-av{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:10px;color:#04070d;position:relative}
.lb-av .pdot{position:absolute;bottom:-2px;right:-2px;width:7px;height:7px;border-radius:50%;border:2px solid var(--panel-solid)}
.lb-nm{font-family:var(--ui);font-weight:700;font-size:11px;white-space:nowrap;cursor:pointer}
.lb-bar-wrap{display:inline-block;width:46px;height:5px;border-radius:4px;background:rgba(255,255,255,0.06);overflow:hidden;vertical-align:middle;margin-right:6px}
.lb-bar{height:100%;border-radius:4px}
.lb-on{font-size:8px;font-family:var(--mono);padding:1px 6px;border-radius:5px}

/* ── traffic chart card ────────────────────────────────── */
.traffic-wrap{padding:8px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.traffic-wrap svg{width:100%}
.traffic-note{font-size:8.5px;font-family:var(--mono);color:var(--muted-2)}
/* per-core load strip under the CPU meter */
.core-strip{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:7px}
.core-strip .core-cell{flex:1;min-width:2px;border-radius:2px 2px 0 0;opacity:0.85;transition:height 0.4s ease,background 0.4s ease}

/* ── SYSTEM METRICS OVERVIEW (graphical widgets) ──────── */
.metrics-overview{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:13px}
.widget{border:1px solid var(--border);border-radius:11px;padding:11px 12px 9px;
  background:rgba(0,0,0,0.20);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.widget .w-lbl{font-family:var(--ui);font-size:8.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);text-align:center}
.widget .w-val{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600}
.widget svg{display:block;overflow:visible}
.widget.full{grid-column:1 / -1;align-items:stretch}

/* ── CONNECTIONS / SERVICES ───────────────────────────── */
.conn-list{padding:9px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto}
.conn-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);
  border-radius:10px;background:rgba(0,0,0,0.16)}
.conn-ic{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:11px;color:#04070d;position:relative}
.conn-ic .cdot{position:absolute;bottom:-2px;right:-2px;width:9px;height:9px;border-radius:50%;border:2px solid var(--panel-solid)}
.conn-meta{flex:1;min-width:0}
.conn-name{font-family:var(--ui);font-weight:600;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conn-sub{font-size:9px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.conn-stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.conn-badge{font-size:8px;font-family:var(--mono);font-weight:600;letter-spacing:0.5px;padding:2px 7px;border-radius:6px;text-transform:uppercase}
.conn-metric{font-size:8.5px;font-family:var(--mono);color:var(--muted-2)}

/* ── AI PORTFOLIO (table) ─────────────────────────────── */
.portfolio{padding:6px 6px 8px;overflow-x:auto;flex:1;overflow-y:auto;max-height:330px}
.pf-table{width:100%;border-collapse:collapse;font-size:11px}
.pf-table th{font-family:var(--ui);font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:7px 9px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel-solid);z-index:1}
.pf-table th.r{text-align:right}
.pf-row td{padding:8px 9px;border-bottom:1px solid var(--border-2);vertical-align:middle}
.pf-row:hover td{background:rgba(255,255,255,0.022)}
.pf-agent{display:flex;align-items:center;gap:9px;min-width:0}
.pf-av{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:800;font-size:11px;color:#04070d;position:relative}
.pf-av .pdot{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;border-radius:50%;border:2px solid var(--panel-solid)}
.pf-nm{font-family:var(--ui);font-weight:700;font-size:11.5px;white-space:nowrap}
.pf-rl{font-size:8.5px;color:var(--muted-2);white-space:nowrap}
.pf-prov{font-family:var(--mono);font-size:10px;color:var(--muted)}
.pf-model{font-family:var(--mono);font-size:9.5px;color:var(--muted-2)}
.pf-hp{display:flex;align-items:center;gap:7px}
.pf-bar-wrap{width:54px;height:6px;border-radius:5px;background:rgba(255,255,255,0.06);overflow:hidden}
.pf-bar{height:100%;border-radius:5px}
.pf-pct{font-family:var(--mono);font-size:9.5px;color:var(--muted);min-width:26px}
.pf-acts{display:flex;gap:5px;justify-content:flex-end}
.pf-btn{font-family:var(--ui);font-size:8px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,0.03);
  color:var(--muted-2);cursor:pointer;transition:all 0.14s;white-space:nowrap;position:relative}
.pf-btn.dm{color:var(--accent);border-color:rgba(34,217,230,0.3)}
.pf-btn.cfg:hover,.pf-btn.dm:hover{background:rgba(255,255,255,0.07);transform:translateY(-1px)}
.pf-btn.dis{cursor:not-allowed;opacity:0.55}
.pf-btn .s2{position:absolute;top:-6px;right:-3px;font-size:6px;color:var(--accent);background:var(--bg);padding:0 3px;border-radius:4px}

/* ── activity stream (kept, scrollable) ───────────────── */
.activity-stream{flex:1;overflow-y:auto;max-height:330px;padding:8px 12px 12px;display:flex;flex-direction:column;gap:2px}
.act-row{display:flex;gap:10px;align-items:baseline;padding:7px 8px;border-radius:8px;transition:background 0.12s}
.act-row:hover{background:rgba(255,255,255,0.025)}
.act-ts{font-family:var(--mono);font-size:9px;color:var(--muted-2);flex-shrink:0;width:54px;font-variant-numeric:tabular-nums}
.act-who{font-family:var(--ui);font-weight:700;font-size:11px;flex-shrink:0;white-space:nowrap}
.act-chan{font-size:8.5px;font-family:var(--mono);color:var(--muted-2);flex-shrink:0;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,0.04)}
.act-text{flex:1;min-width:0;font-size:11.5px;color:#c8d2e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;align-self:center;box-shadow:0 0 6px currentColor}
.op-type{font-size:10px;flex-shrink:0;opacity:.8;width:14px;text-align:center}
.ops-fbtn{font-family:var(--mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,0.05);color:var(--muted-2);border:1px solid transparent;cursor:pointer}
.ops-fbtn:hover{background:rgba(255,255,255,0.09);color:#c8d2e0}
.ops-fbtn.on{background:rgba(34,217,230,0.16);color:var(--accent);border-color:rgba(34,217,230,0.4)}

/* ── TOPOLOGY ────────────────────────────────────────── */
.topo-wrap{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px;position:relative}
.topo-wrap svg{width:100%;height:100%;max-height:100%}
.topo-legend{position:absolute;top:16px;left:18px;display:flex;flex-direction:column;gap:6px;font-size:10px;color:var(--muted)}
.topo-legend .ll{display:flex;align-items:center;gap:7px}
.topo-legend .lk{width:9px;height:9px;border-radius:50%}

/* ── ORACLE NERVOUS SYSTEM VIEW ──────────────────────── */
#view-nervous{flex:1;min-height:0;flex-direction:column}
.ns-wrap{flex:1;position:relative;overflow:hidden;min-height:0;
  background:
    radial-gradient(680px 480px at 50% 46%, rgba(34,217,230,0.05), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(124,58,237,0.04), transparent 60%);
  touch-action:none;cursor:grab}
.ns-wrap.dragging{cursor:grabbing}
.ns-wrap canvas,.ns-wrap .ns-svg{position:absolute;inset:0;width:100%;height:100%}
.ns-svg{z-index:2}
.ns-wrap canvas{z-index:1}
.ns-edge{transition:stroke 0.5s ease,stroke-opacity 0.18s ease,stroke-width 0.18s ease}
.ns-node{cursor:pointer}
.ns-node text{pointer-events:none;user-select:none}
.ns-svg.has-focus .ns-node:not(.focus){opacity:0.18}
.ns-svg.has-focus .ns-edge:not(.focus){stroke-opacity:0.05!important}
.ns-edge.hot{stroke-width:2.4!important}
.ns-legend{position:absolute;top:14px;left:16px;z-index:6;display:flex;flex-direction:column;gap:5px;
  font-size:10px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);
  border-radius:11px;padding:11px 13px;backdrop-filter:blur(10px);pointer-events:none;max-width:200px}
.ns-legend-title{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:1.6px;color:var(--muted-2);margin-bottom:2px}
.ns-legend .ll{display:flex;align-items:center;gap:8px;color:var(--text)}
.ns-legend .lk{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ns-counters{position:absolute;top:14px;right:16px;z-index:6;display:flex;gap:8px}
.ns-ctr{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:11px;padding:8px 14px;backdrop-filter:blur(10px);min-width:72px}
.ns-ctr-v{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--accent);line-height:1}
.ns-ctr.err .ns-ctr-v{color:var(--bad)}
.ns-ctr-l{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:3px}
.ns-status{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:5px 16px;
  backdrop-filter:blur(10px);pointer-events:none;white-space:nowrap}
.ns-tip{position:absolute;z-index:8;opacity:0;pointer-events:none;transform:translate(-50%,-118%);
  background:var(--panel-solid);border:1px solid var(--accent-glow);border-radius:9px;padding:8px 11px;
  font-size:11px;color:var(--text);box-shadow:0 8px 26px rgba(0,0,0,0.6);transition:opacity 0.12s ease;
  min-width:140px;max-width:230px}
.ns-tip .tt-nm{font-family:var(--ui);font-weight:700;font-size:12px;margin-bottom:3px}
.ns-tip .tt-r{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.7}
.ns-tip .tt-r b{font-weight:500}
/* sits ABOVE the area-map radar (which occupies the bottom-right corner) */
/* KAIVERSE agent-click popup. DESKTOP-FIX(oraclefix): the panel was mobile-first —
   anchored bottom-RIGHT where the area-map radar now lives (JS bumps the radar up
   to bottom:170px), so on a wide desktop the popup collided with / sat under the
   radar and looked broken. Anchor it bottom-LEFT (a clean, uncluttered corner on
   desktop), give it a comfortable readable width, box-sizing, and a viewport-aware
   height so a tall body scrolls instead of overflowing. The mobile @media rule
   below still overrides this to a full-width bottom sheet, so phones are unchanged. */
.ns-edge-panel{position:absolute;left:16px;right:auto;bottom:24px;z-index:11;width:328px;max-width:calc(100vw - 32px);
  box-sizing:border-box;max-height:min(60vh,420px);
  background:var(--panel-2);border:1px solid var(--border);border-radius:13px;backdrop-filter:blur(14px);
  display:none;flex-direction:column;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,0.55)}
.ns-edge-panel{transition:opacity 0.22s ease}
.ns-edge-panel.open{display:flex}
.ns-ep-hdr{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--border);font-family:var(--ui);font-weight:700;font-size:12px;color:var(--text)}
.ns-ep-x{cursor:pointer;color:var(--muted);font-size:13px;padding:0 4px}
.ns-ep-x:hover{color:var(--text)}
.ns-ep-body{flex:1;min-height:0;max-height:min(46vh,320px);overflow-y:auto;padding:6px 0}
.ns-ep-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 14px;font-size:11px;border-bottom:1px solid var(--border-2)}
.ns-ep-row:last-child{border-bottom:none}
/* DESKTOP-FIX(oraclefix): the click-panel body renders <span class="ns-ep-k">/<span
   class="ns-ep-v"> key/value rows, but these two classes had NO CSS (the old rule set
   only styled a dot/timestamp/text activity layout) — so on desktop the rows rendered
   as cramped, unstyled, left-bunched text. Give the key a muted uppercase label and
   the value a right-aligned mono readout that wraps instead of overflowing the panel. */
.ns-ep-k{flex:0 0 auto;color:var(--muted-2);font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.ns-ep-v{flex:1 1 auto;min-width:0;text-align:right;color:var(--text);font-family:var(--mono);font-size:11px;line-height:1.5;word-break:break-word}
.ns-ep-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ns-ep-ts{font-family:var(--mono);font-size:9px;color:var(--muted-2);flex-shrink:0;width:34px}
.ns-ep-txt{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ns-ep-empty{padding:22px 14px;text-align:center;color:var(--muted-2);font-size:11px}
@media (max-width:900px){
  .ns-counters{gap:5px;top:auto;bottom:64px;right:10px}
  .ns-ctr{padding:6px 10px;min-width:58px}
  .ns-ctr-v{font-size:15px}
  .ns-legend{top:auto;bottom:64px;left:10px;font-size:9px;padding:8px 10px;max-width:150px}
  .ns-edge-panel{left:10px;right:10px;bottom:110px;width:auto}
  .ns-status{bottom:108px}
}

/* ── KAIVERSE 3D explorer chrome (overlays the WebGL canvas) ───────────── */
/* TRUE-BLACK SPACE BACKDROP. The previous blue the owner saw was NOT the
   renderer — it was (a) the .ns-wrap blue/purple radial-gradient still applied
   to this same element (it carries BOTH classes), and (b) the transparent
   canvas (renderer alpha:true) letting the page body's blue radial-gradients +
   lattice grid show THROUGH. Fixed here by: forcing an opaque near-black bg with
   !important to beat the .ns-wrap gradient, killing any inherited image, and
   (in JS) building the renderer with alpha:false so nothing bleeds through. */
.kv-wrap{background:#010205 !important;background-image:none !important;cursor:grab}
.kv-wrap::before{content:none !important}     /* no grid/gradient pseudo bleed */
.kv-wrap.dragging{cursor:grabbing}
/* pointer-lock active → hide the OS cursor entirely over the canvas + all overlays */
.kv-wrap.locked,.kv-wrap.locked *{cursor:none !important}
#kv-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;touch-action:none;background:#010205}
.kv-fallback{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px}
.kv-fb-icon{font-size:34px;color:var(--warn)}
.kv-fb-title{font-family:var(--ui);font-weight:700;font-size:16px;color:var(--text)}
.kv-fb-sub{font-size:12px;color:var(--muted);max-width:380px;line-height:1.6}
.kv-hud{position:absolute;top:14px;left:16px;z-index:6;display:flex;flex-direction:column;gap:7px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:13px;padding:13px 15px;
  backdrop-filter:blur(12px);min-width:236px;pointer-events:none;box-shadow:0 10px 34px rgba(0,0,0,0.5)}
.kv-hud-title{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:1.8px;color:var(--accent);margin-bottom:2px}
.kv-stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.kv-sl{font-size:10.5px;color:var(--muted)}
.kv-sl em{font-style:normal;color:var(--muted-2);font-size:9px}
.kv-sv{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);line-height:1.5}
.kv-sv.na{color:var(--muted-2);font-style:italic;font-size:11px}
.kv-legend{top:14px;left:auto;right:16px;max-width:230px;pointer-events:none}
.kv-hint{margin-top:6px;padding-top:6px;border-top:1px solid var(--border-2);font-size:9px;color:var(--muted-2);line-height:1.5}
.kv-status{pointer-events:none}
.kv-node-panel{width:288px}
/* ── THROTTLE / SPEED indicator (bottom-centre, above status) ── */
.kv-throttle{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:10px;pointer-events:none;
  background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:6px 14px;
  backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,0.5)}
.kv-throttle .kv-th-lbl{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:1.4px;color:var(--muted)}
.kv-throttle .kv-th-bar{width:120px;height:6px;border-radius:4px;background:rgba(255,255,255,0.08);overflow:hidden}
.kv-throttle .kv-th-fill{height:100%;width:30%;border-radius:4px;
  background:linear-gradient(90deg,#22d9e6,#7c3aed);transition:width 0.12s ease}
.kv-throttle .kv-th-val{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent);min-width:36px;text-align:right}
/* Immersive-vr entry — desktop HUD + mobile (not hidden with throttle chrome) */
.kv-vr-btn{position:absolute;right:16px;bottom:52px;z-index:8;min-width:52px;height:36px;padding:0 14px;
  border-radius:10px;border:1px solid rgba(34,217,230,.45);background:rgba(8,14,24,.82);color:#7ee8f5;
  font:700 12px Outfit,sans-serif;letter-spacing:.06em;cursor:pointer;backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(0,0,0,.35)}
.kv-vr-btn:hover{border-color:var(--accent);background:rgba(34,217,230,.15)}
.kv-vr-btn.on{background:rgba(34,217,230,.28);color:#fff;border-color:#22d9e6}
body.force-mobile .kv-vr-btn, body.kv-hud-hidden .kv-vr-btn{display:block !important;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:12px}
/* ── COMPASS → CORE (top-centre) — always points home + shows distance ── */
.kv-compass{display:none;position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:9px;pointer-events:auto;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:6px 13px;
  backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,0.5)}
.kv-compass:hover{border-color:var(--accent-glow)}
.kv-compass .kv-cmp-dial{width:26px;height:26px;flex-shrink:0;position:relative}
.kv-compass .kv-cmp-arrow{position:absolute;inset:0;transform-origin:50% 50%;transition:transform 0.1s linear}
.kv-compass .kv-cmp-txt{display:flex;flex-direction:column;line-height:1.2}
.kv-compass .kv-cmp-t1{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:1px;color:var(--accent)}
.kv-compass .kv-cmp-t2{font-family:var(--mono);font-size:9px;color:var(--muted)}
/* off-screen CORE edge marker — a chevron pinned to the viewport edge */
.kv-coremark{position:absolute;z-index:6;pointer-events:none;display:none;
  width:30px;height:30px;margin:-15px 0 0 -15px;color:var(--accent);
  filter:drop-shadow(0 0 6px var(--accent-glow))}
.kv-coremark.show{display:block}
/* RECENT ERRORS readout (restored error-source attribution) */
/* HUD overlays sit ABOVE the WebGL canvas (z-index:1) AND take pointer events so
   the panel + its "⤢ full" button reliably receive clicks. The canvas mousedown
   handler also bails when the target is inside one of these (see nsWireWrapOnce),
   so clicking UI never triggers pointer-lock / fly-to. (owner complaint #4) */
.ns-errbox{pointer-events:auto !important;min-width:280px;z-index:12}
.ns-errbox *{pointer-events:auto}
.ns-edge-panel,.kv-node-panel{pointer-events:auto;z-index:11}
/* ── AREA MAP / RADAR (owner #2) — bottom-right corner overlay ── */
/* AREA MAP / radar — owner #1: was clipped off-screen + too dim. Now FULLY inset
   from the corner (24px), a higher-contrast opaque panel with a clear border, and
   constrained so it can never overflow the viewport at any resolution. */
/* owner #3: lifted UP well clear of the bottom status bar (.ns-status sits at
   bottom:16px, ~30px tall). bottom:92px keeps the whole dial inside the viewport
   at every resolution and off the click-area where moving bodies are grabbed. */
.kv-radar{position:absolute;right:18px;bottom:18px;z-index:9;opacity:0.85;pointer-events:auto;
  background:rgba(6,12,22,0.92);border:1.5px solid rgba(34,217,230,0.55);border-radius:13px;padding:9px 10px 10px;
  backdrop-filter:blur(13px);box-shadow:0 10px 38px rgba(0,0,0,0.62), 0 0 0 1px rgba(0,0,0,0.4);
  width:188px;max-width:calc(100vw - 48px);box-sizing:border-box}
.kv-radar-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kv-radar-hd span:first-child{font-family:var(--ui);font-size:9.5px;font-weight:800;letter-spacing:1.7px;color:var(--accent)}
.kv-radar-rng{font-family:var(--mono);font-size:9px;color:#cfe0f2}
.kv-radar canvas{display:block;width:168px;height:168px;max-width:100%;border-radius:9px;
  background:radial-gradient(circle at 50% 50%, rgba(8,16,28,0.96), rgba(2,5,11,0.98));
  border:1px solid rgba(120,150,190,0.28);cursor:pointer}
/* keep it visible but a touch smaller on short/narrow viewports so it never clips */
@media (max-height:560px){ .kv-radar{bottom:200px;right:16px;width:150px}
  .kv-radar canvas{width:130px;height:130px} }
@media (max-width:560px){ .kv-radar{right:14px;bottom:210px;width:148px}
  .kv-radar canvas{width:128px;height:128px} }
.ns-errlist{display:flex;flex-direction:column;gap:5px;max-height:208px;overflow-y:auto;margin-top:3px}
.ns-err-empty{font-size:10px;color:var(--muted-2);font-style:italic;padding:2px 0}
.ns-err-row{display:flex;flex-direction:column;gap:1px;padding:5px 7px;border-radius:8px;cursor:pointer;
  background:rgba(248,113,113,0.07);border:1px solid rgba(248,113,113,0.22);transition:background 0.14s ease}
.ns-err-row:hover{background:rgba(248,113,113,0.16)}
.ns-err-row.warn{background:rgba(251,191,36,0.06);border-color:rgba(251,191,36,0.2)}
.ns-err-path{font-family:var(--mono);font-size:10.5px;font-weight:600;color:#f87171}
.ns-err-row.warn .ns-err-path{color:#fbbf24}
.ns-err-what{font-size:9.5px;color:var(--muted);line-height:1.35}
.ns-err-time{font-size:8.5px;color:var(--muted-2);font-family:var(--mono)}
/* the ⚠ events pill is a MOBILE-ONLY affordance — never shown on desktop */
.ns-events-toggle{display:none}
/* MOBILE: hide the RECENT ERRORS / signal-flow feed by default so it never
   covers the KAIVERSE. The pill (.ns-events-toggle) toggles #ns-errbox.open. */
@media (max-width:900px){
  .ns-errbox{display:none}
  .ns-errbox.open{display:flex !important;max-width:80vw !important;min-width:0;left:10px !important;bottom:170px !important}
  .ns-errlist{max-height:38vh}
  .ns-events-toggle{display:flex;align-items:center;gap:6px;position:absolute;left:10px;bottom:118px;z-index:8;
    padding:7px 12px;border-radius:999px;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:0.4px;
    color:#fbbf24;background:rgba(12,18,28,0.92);border:1px solid rgba(251,191,36,0.45);
    box-shadow:0 4px 16px rgba(0,0,0,0.55);backdrop-filter:blur(8px);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .ns-events-toggle.open{color:#22d9e6;border-color:rgba(34,217,230,0.5);background:rgba(10,20,28,0.94)}
}
@media (max-width:900px){
  .kv-hud{top:10px;left:10px;min-width:0;padding:10px 12px;gap:5px;max-width:54vw}
  .kv-sl{font-size:9px}.kv-sv{font-size:11px}
  .kv-legend{top:auto;bottom:118px;right:10px;max-width:150px}
  .kv-node-panel{left:10px;right:10px;bottom:118px;width:auto}
}

/* ── COCKPIT HUD FRAME (Unit 1) ─────────────────────────── */
#kv-cockpit-frame{position:absolute;inset:0;z-index:5;pointer-events:none;
  border:1px solid rgba(34,217,230,0.08);
  box-shadow:inset 0 0 80px rgba(0,0,0,0.4)}
#kv-cockpit-frame::before,#kv-cockpit-frame::after{content:'';position:absolute;width:40px;height:40px;
  border-color:rgba(34,217,230,0.25);border-style:solid;border-width:0}
#kv-cockpit-frame::before{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
#kv-cockpit-frame::after{top:12px;right:12px;border-top-width:2px;border-right-width:2px}
.kv-hud{box-shadow:0 10px 34px rgba(0,0,0,0.5),0 0 12px rgba(34,217,230,0.08) !important;
  font-family:var(--mono,monospace) !important}
.kv-hud-title{font-family:var(--mono,monospace) !important}
/* Throttle gauge ticks */
.kv-th-ticks{position:absolute;inset:0;display:flex;justify-content:space-between;padding:0 1px}
.kv-th-ticks::before{content:'';position:absolute;left:25%;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.12)}
.kv-th-ticks::after{content:'';position:absolute;left:75%;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.12)}
.kv-th-bar{position:relative}
.kv-th-sep{color:var(--muted-2);font-size:10px;margin:0 2px}
.kv-th-speed,.kv-th-alt{font-family:var(--mono);font-size:10px;color:var(--accent);white-space:nowrap}
.kv-th-alt{color:var(--muted)}

/* ── COCKPIT PANELS (Unit 2) ── Inventory, Star Chart, Ship Status ── */
.kv-cockpit-panel{position:absolute;z-index:14;background:var(--panel-2);border:1px solid var(--border);
  border-radius:13px;backdrop-filter:blur(13px);box-shadow:0 14px 40px rgba(0,0,0,0.55),0 0 14px rgba(34,217,230,0.06);
  overflow:hidden;pointer-events:auto}
.kv-cp-hdr{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--border);font-family:var(--mono,monospace);font-size:10px;font-weight:700;
  letter-spacing:1.8px;color:var(--accent)}
.kv-cp-close{cursor:pointer;color:var(--muted);font-size:16px;padding:0 4px}
.kv-cp-close:hover{color:var(--text)}
/* Inventory */
#kv-inv{right:16px;top:60px;width:240px}
.kv-inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px}
.kv-inv-slot{aspect-ratio:1;border:1px solid var(--border-2);border-radius:8px;background:rgba(255,255,255,0.02)}
/* Star Chart */
.kv-starchart-panel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,90vw);height:min(440px,70vh)}
#kv-starchart-cv{width:100%;height:calc(100% - 40px);display:block;background:rgba(2,5,11,0.9);cursor:crosshair}
/* Ship Status */
#kv-shipstatus{left:16px;top:60px;width:260px}
.kv-ss-body{padding:8px 0}
.kv-ss-row{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;font-size:11px;
  border-bottom:1px solid var(--border-2)}
.kv-ss-row:last-child{border-bottom:none}
.kv-ss-k{color:var(--muted-2);font-size:9px;letter-spacing:.5px;font-family:var(--mono)}
.kv-ss-v{color:var(--accent);font-family:var(--mono);font-size:11px}

/* ── POST-PROCESSING OVERLAYS (Unit 3) ───────────────── */
#kv-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,0.35) 100%);opacity:0.3}
#kv-scanlines{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 4px);
  opacity:0.04}
#kv-speedlines{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(180,220,255,0.06) 70%,rgba(120,180,255,0.12) 100%);
  opacity:0;transition:opacity 0.2s ease}
#kv-blackout{position:absolute;inset:0;z-index:50;pointer-events:none;background:#000;opacity:0;
  transition:opacity 0.5s ease}

/* ── GLOBAL CONFIG VIEW ──────────────────────────────── */
.cfg-scroll{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:22px}
.cfg-sec-hdr{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:2px;display:flex;align-items:center;gap:9px}
.cfg-ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cfg-chan-list{display:flex;flex-direction:column;gap:8px}
.cfg-chan-row{display:flex;align-items:center;gap:12px;padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,0.012)}
.cfg-chan-ic{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--accent-glow);color:var(--accent);font-family:var(--mono);font-size:13px}
.cfg-chan-ic svg{width:13px;height:13px}
.cfg-chan-meta{flex:1;min-width:0}
.cfg-chan-name{font-family:var(--ui);font-weight:600;font-size:12.5px}
.cfg-chan-sub{font-size:9.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-chan-stat{font-size:9px;font-family:var(--mono);color:var(--good);display:flex;align-items:center;gap:5px;flex-shrink:0}

/* responsive guard for narrower desktops */
@media(max-width:1500px){
  .col-left{width:262px}
  .col-right{width:288px}
  /* 2-up: keep tall cards beside short ones but on a 6-col base */
  .home-grid{grid-template-columns:repeat(6,1fr)}
  .g-sys{grid-column:span 6;grid-row:span 1}
  .g-radar{grid-column:span 3;grid-row:span 2}
  .g-prov{grid-column:span 3;grid-row:span 2}
  .g-lat{grid-column:span 3}
  .g-traffic{grid-column:span 3}
  .g-board{grid-column:span 6;grid-row:span 1}
  .g-ops{grid-column:span 6;grid-row:span 1}
}
@media(max-width:1280px){
  .metric{min-width:64px;padding:5px 9px}
  .col-left{width:240px}
  .col-right{width:268px}
  .home-status{grid-template-columns:repeat(3,1fr);gap:14px 12px}
  .home-grid{grid-template-columns:1fr}
  .g-sys,.g-radar,.g-prov,.g-lat,.g-traffic,.g-board,.g-ops{grid-column:1 / -1;grid-row:auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP-TABLET RESPONSIVENESS (901–1400px) — the gap the owner hit. Above
   900px the three columns stay side-by-side; without this band a fixed 320px
   right panel + 288px left rail CRUSH the center so cards (KAI Vitals 4-up,
   training scorecard) crunch and the bottom clips. Here we: (1) guarantee the
   center column owns its width (min-width:0) and every view scroll-container
   can actually scroll (min-height:0 + overflow auto) so nothing is unreachable;
   (2) progressively narrow the side columns as width shrinks so the center
   keeps usable space; (3) let the dense grids reflow via auto-fit/minmax.
   CSS-only — no behavior/logic touched. ─────────────────────────────────── */

/* every main view + its inner scroller must be a min-0 flex child that scrolls,
   so content past the fold is always reachable (no scroll trap, no clip). */
.col-center,.view-pane{min-width:0;min-height:0}
.home-scroll,.cfg-scroll,.learn-scroll,.metrics-pane,.config-pane,
.transcript,.bv-thread,.pf-scroll,.cv-body{min-height:0}

/* KAI Vitals + training scorecard: keep them honest auto-fit grids so they
   reflow 4→3→2→1 instead of crunching. (vit-grid/trn-grid already auto-fit;
   this just lowers the floor so cards stay readable on a squeezed center.) */
.vit-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.trn-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}

@media(max-width:1400px){
  /* center first: reclaim space from a slightly slimmer right panel */
  .col-right{width:300px}
  .vit-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
@media(max-width:1180px){
  /* tighter still — side columns shrink, center never crushes */
  .col-left{width:230px}
  .col-right{width:264px}
  .vit-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .trn-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .met-grid{grid-template-columns:repeat(2,1fr)}
  .ov-stats{grid-template-columns:repeat(2,1fr)}
  .cfg-ai-grid{grid-template-columns:repeat(2,1fr)}
  .home-status{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px) and (min-width:901px){
  /* last desktop band before the off-canvas drawers kick in at 900px: the
     right panel goes lean so the center stays comfortably readable. */
  .col-left{width:212px}
  .col-right{width:240px}
  .vit-grid,.met-grid,.ov-stats,.cfg-ai-grid{grid-template-columns:1fr 1fr}
  .home-status{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE  — desktop layout above is untouched. Everything
   below only activates at <=900px (tablet) and <=560px (phone). Adds an
   app-bar + bottom tab bar, turns the left/right columns into off-canvas
   drawers, reflows grids to single column, full-screens modals/slide-overs.
   ════════════════════════════════════════════════════════════════════════ */

/* mobile-only chrome (app bar / bottom tabs / drawer backdrop) — hidden on desktop */
.m-appbar,.m-tabbar,.m-backdrop,.drawer-close,.m-drawer-nav{display:none}

/* ── VIEW MODE forced-layout overrides (2026-07-10) ──────────────────────────
   The View Mode picker also swaps the viewport meta width so ALL the @media
   rules below resolve to the chosen layout; these class-keyed rules pin the
   core chrome switch independently of viewport scaling. Auto adds no class, so
   default (responsive-by-viewport) behavior is completely unchanged. */
body.force-mobile .topbar,
body.force-mobile .rail{display:none !important}
body.force-mobile .m-appbar{display:flex !important}
body.force-mobile .m-tabbar{display:flex !important}
body.force-desktop .m-appbar,
body.force-desktop .m-tabbar,
body.force-desktop .m-backdrop{display:none !important}
body.force-desktop .topbar,
body.force-desktop .rail{display:flex !important}

@media(max-width:900px){
  /* ── APP BAR (top): hamburger=channels/nav drawer, star=agents drawer ── */
  .m-appbar{
    display:flex;align-items:center;gap:10px;flex-shrink:0;height:var(--m-ab-height, 56px);padding:0 12px;
    padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));
    background:var(--panel-2);border-bottom:1px solid var(--border);z-index:6;position:relative;
  }
  .m-appbar .m-ab-btn{
    width:var(--m-ab-btn-size, 46px);height:var(--m-ab-btn-size, 46px);flex-shrink:0;border-radius:12px;border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition: all 0.2s ease;
  }
  .m-appbar .m-ab-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(34,217,230,0.3); color: var(--accent); }
  .m-appbar .m-ab-btn:active{background:rgba(34,217,230,0.12); transform: scale(0.96); }
  .m-appbar .m-ab-btn svg{width:20px;height:20px}
  /* v9.10.323 — profile avatar button in the header (30px avatar centered in the 46px tap target) */
  .m-appbar .m-ab-btn.m-ab-profile{padding:0;overflow:hidden}
  .m-appbar .m-ab-btn.m-ab-profile img{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;background:rgba(255,255,255,.06)}
  .m-appbar .m-ab-btn.m-ab-profile.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,189,210,.35)}
  .m-appbar .m-ab-title{flex:1;min-width:0;font-family:var(--ui);font-weight:700;font-size:13px;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-appbar .m-ab-title span{color:var(--muted);font-weight:400;font-size:11px}

  /* ── shared backdrop for any open drawer ── */
  .m-backdrop{
    display:block;position:fixed;inset:0;z-index:90;background:rgba(2,4,9,0.6);
    backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity 0.22s;
  }
  .m-backdrop.open{opacity:1;pointer-events:auto}

  /* ── desktop chrome hidden on mobile; app-bar + bottom tabs replace it ── */
  .topbar{display:none !important}
  .rail{display:none}

  /* ── MOBILE DRAWER FIX: dissolve .shell's stacking context (desktop z-index:1)
     so the fixed off-canvas drawers (z-index:100) and the backdrop (z-index:90)
     resolve at the root level. Without this, .col-left/.col-right are trapped
     inside .shell(z=1) which paints BELOW the body-level backdrop(z=90) — leaving
     the opened drawer dimmed and intercepting every tap on the scrim. ── */
  .shell{z-index:auto}

  /* ── LEFT column → off-canvas drawer from the left ── */
  .col-left{
    position:fixed;top:0;left:0;bottom:0;width:var(--m-drawer-width, clamp(280px, 85vw, 360px));z-index:100;
    transform:translateX(-100%);transition:transform 0.26s ease;
    box-shadow:18px 0 44px rgba(0,0,0,0.55);
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    display:flex !important;  /* JS toggles .open; ignore desktop setView display:none */
  }
  .col-left.m-open{transform:translateX(0)}

  /* ── RIGHT column → off-canvas drawer from the right ── */
  .col-right{
    position:fixed;top:0;right:0;bottom:0;width:var(--m-drawer-right-width, clamp(280px, 85vw, 380px));z-index:100;
    transform:translateX(100%);transition:transform 0.26s ease;
    box-shadow:-18px 0 44px rgba(0,0,0,0.55);
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    display:flex !important;  /* match col-left: ignore desktop setView display:none so the drawer actually shows */
  }
  .col-right.m-open{transform:translateX(0)}
  /* right-column drawer scrolls as one region on mobile */

  /* close button shown inside each drawer header on mobile */
  .drawer-close{
    display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
    border-radius:9px;border:1px solid var(--border);background:rgba(255,255,255,0.04);
    color:var(--muted);cursor:pointer;
  }
  .drawer-close svg{width:18px;height:18px}
  .col-left .col-section-hdr,.col-right .col-section-hdr{align-items:center}

  /* ── in-drawer view switcher — REMOVED 2026-07-10 (owner): the bottom tab bar
     already switches views, so the drawer is now PURELY the channel lattice
     (channels + Direct Messages). No duplicated nav. ── */
  .m-drawer-nav{display:none !important}

  /* ── center is the full-width primary ── */
  .col-center{flex:1;min-width:0}

  /* ── top metrics bar: never clip — horizontal scroll ── */
  .tb-right{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:60vw;gap:0}
  .tb-right::-webkit-scrollbar{height:0}
  .metric{flex-shrink:0}

  /* ── BOTTOM TAB BAR (primary view switching on phone) ── */
  /* Shell must not overflow past the tabbar */
  .shell{flex:1;min-height:0;overflow:hidden}
  .col-center{min-height:0;overflow:hidden}
  .view-pane{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Guest home content must fit between appbar and tabbar */
  .guest-dash{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}

  .m-tabbar{
    display:flex;flex-shrink:0;z-index:6;background:var(--panel-2);border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .m-tabbar .m-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:8px 4px;min-height:48px;color:var(--muted);cursor:pointer;background:transparent;border:none;
  }
  .m-tabbar .m-tab svg{width:20px;height:20px}
  .m-tabbar .m-tab .m-tab-l{font-family:var(--ui);font-size:8.5px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase}
  .m-tabbar .m-tab.active{color:var(--accent)}

  /* ── card grids → single column, full width ── */
  .home-status{grid-template-columns:repeat(2,1fr)}
  .home-grid{grid-template-columns:1fr}
  .g-sys,.g-radar,.g-prov,.g-lat,.g-traffic,.g-board,.g-ops{grid-column:1 / -1;grid-row:auto}
  .lat-grid{grid-template-columns:1fr 1fr}
  .ops-grid,.metrics-overview,.bv-cfg-grid{grid-template-columns:1fr}
  .met-grid{grid-template-columns:1fr 1fr}
  .cfg-ai-grid{grid-template-columns:1fr}
  .ops-grid .meter[style*="grid-column"],.metrics-overview .widget.full{grid-column:auto}

  /* ── slide-overs (bot profile + DM, channel settings) → near full-screen ── */
  .bot-view{top:0;width:100vw;z-index:120;padding-top:env(safe-area-inset-top)}
  .chan-view{top:0;width:100vw;z-index:120;padding-top:env(safe-area-inset-top)}
  .chan-view .cv-acts{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .settings-panel{top:0;width:100vw;z-index:120;padding-top:env(safe-area-inset-top)}
  .bv-compose{padding-bottom:max(12px,env(safe-area-inset-bottom))}

  /* topology already uses a viewBox; just guarantee it fits the viewport */
  .topo-wrap{padding:8px;overflow:auto;-webkit-overflow-scrolling:touch}
  .topo-wrap svg{max-width:100%;height:auto}

  /* smooth momentum scrolling on all live lists */
  .transcript,.bv-thread,.scroll,.agent-list,.metrics-pane,.config-pane,
  .home-scroll,.cfg-scroll,.activity-stream,.portfolio,.conn-list,.leaderboard,.ptab-body{-webkit-overflow-scrolling:touch}

  /* touch targets */
  .chan-item,.nav-item,.rchip,.ch-tab,.mini-btn,.pf-btn{min-height:40px}
  .rchip{padding:8px 12px}

  /* ── browser tabs + portfolio on mobile: tabs scroll horizontally, page
       sections gain breathing room, vitals/config reflow to fewer columns ── */
  .tab-strip{padding:5px 8px 0;-webkit-overflow-scrolling:touch}
  .os-tab{min-width:96px;max-width:150px}
  .pf-hero{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px 16px}
  .pf-av{width:56px;height:56px;font-size:24px}
  .pf-name{font-size:21px}
  .pf-vitals{grid-template-columns:repeat(2,1fr);padding:14px 16px}
  .pf-cfg-grid{grid-template-columns:1fr 1fr;padding:0 16px 8px}
  .pf-secthdr,.pf-tabs,.pf-pane,.pf-edit-row{padding-left:16px;padding-right:16px}
  .pf-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
}

@media(max-width:560px){
  /* phone: command bar stacks, input full width, buttons wrap & stay usable */
  .topbar{padding:0 10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .brand .sub{display:none}
  .tb-right{max-width:50vw}
  .metric{min-width:58px;padding:5px 8px}

  .cmdbar{padding:9px 12px 10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .cmd-row{flex-direction:column;gap:9px}
  .cmd-btns{flex-direction:row;flex-wrap:wrap;width:100%}
  .cmd-btns .btn.execute{flex:1 1 100%;min-height:46px}
  .btn-secondary-row{flex:1 1 100%}
  #cmd-input{height:48px}

  .home-status{grid-template-columns:1fr 1fr}
  .met-grid{grid-template-columns:1fr 1fr}

  /* modals (restart + Edit AI Config) → near full-screen, scrollable, sticky footer */
  .modal-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .modal-overlay .modal{
    width:100vw;max-width:100vw;min-height:100vh;border-radius:0;display:flex;flex-direction:column;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
  }
  .modal-overlay .modal > div{display:flex;flex-direction:column;flex:1;min-height:0}
  .modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-acts{position:sticky;bottom:0;background:var(--panel-solid);border-top:1px solid var(--border)}
  .modal-btn{flex:1;min-height:46px;justify-content:center;display:flex;align-items:center}

  .bv-cfg-grid{grid-template-columns:1fr 1fr}

  /* Hide bulky 3D UI overlays on mobile so they don't block the screen */
  .kv-hud, .ns-legend, .ns-errbox, .kv-throttle, .ns-events-toggle { display: none !important; }

  /* Fullscreen mobile immersion: Hide ALL UI chrome when fullscreen is toggled */
  :fullscreen .topbar, :fullscreen .m-appbar, :fullscreen .rail, :fullscreen .tab-strip, :fullscreen .col-left, :fullscreen .col-right, :fullscreen .m-tabbar { display: none !important; }
  :fullscreen .shell { padding: 0 !important; margin: 0 !important; }
  :fullscreen .col-center { padding: 0 !important; margin: 0 !important; height: 100vh !important; max-height: 100vh !important; }
  
  :-webkit-full-screen .topbar, :-webkit-full-screen .m-appbar, :-webkit-full-screen .rail, :-webkit-full-screen .tab-strip, :-webkit-full-screen .col-left, :-webkit-full-screen .col-right, :-webkit-full-screen .m-tabbar { display: none !important; }
  :-webkit-full-screen .shell { padding: 0 !important; margin: 0 !important; }
  :-webkit-full-screen .col-center { padding: 0 !important; margin: 0 !important; height: 100vh !important; max-height: 100vh !important; }
}

/* v9.10.509 — Player card level effects */
.pcard-glow-6{box-shadow:0 0 12px var(--accent-glow,rgba(34,217,230,.3))}
.pcard-glow-11{background-size:200% 200%;animation:pcardGrad 3s ease infinite}
.pcard-glow-16{animation:pcardShimmer 2s ease infinite}
@keyframes pcardGrad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes pcardShimmer{0%,100%{box-shadow:0 0 12px var(--accent-glow),0 0 24px rgba(168,85,247,.2)}50%{box-shadow:0 0 20px var(--accent-glow),0 0 40px rgba(168,85,247,.35)}}
/* XP progress bar */
.xp-bar-wrap{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:4px}
.xp-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent,#22d9e6),rgba(168,85,247,.8));transition:width .3s}
/* Voice invite toast */
.voice-invite-toast{position:fixed;top:20px;right:20px;z-index:99999;background:rgba(13,19,32,.95);border:1px solid var(--accent,#22d9e6);
  border-radius:16px;padding:16px 20px;box-shadow:0 12px 40px rgba(0,0,0,.6);backdrop-filter:blur(12px);
  display:flex;align-items:center;gap:14px;animation:viToastIn .3s ease}
.voice-invite-toast .vi-av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.voice-invite-toast .vi-info{flex:1;min-width:0}
.voice-invite-toast .vi-name{font:700 14px Outfit,sans-serif;color:#eef3fb}
.voice-invite-toast .vi-msg{font:12px Outfit,sans-serif;color:var(--muted);margin-top:2px}
.voice-invite-toast .vi-btns{display:flex;gap:8px;margin-top:8px}
.voice-invite-toast .vi-btn{border:none;padding:8px 18px;border-radius:10px;font:600 12px Outfit,sans-serif;cursor:pointer}
.voice-invite-toast .vi-answer{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.voice-invite-toast .vi-decline{background:rgba(239,68,68,.15);color:#f87171}
@keyframes viToastIn{from{transform:translateX(100px);opacity:0}to{transform:none;opacity:1}}

/* ── Unit 1: Multi-Image Grid + Lightbox ───────────────────────────────────── */
.gpost-images-grid{display:grid;gap:3px;margin-top:8px;border-radius:10px;overflow:hidden;background:#0b0f14}
.gpost-images-grid.g1{grid-template-columns:1fr}
.gpost-images-grid.g2{grid-template-columns:1fr 1fr}
.gpost-images-grid.g3{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
.gpost-images-grid.g3 .gpost-grid-img:first-child{grid-column:1/-1}
.gpost-images-grid.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.gpost-grid-img{width:100%;height:100%;object-fit:cover;cursor:pointer;min-height:120px;max-height:340px;display:block;transition:opacity .15s}
.gpost-grid-img:hover{opacity:.88}
.gpost-images-grid.g1 .gpost-grid-img{max-height:620px;object-fit:contain}
.img-lightbox{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);opacity:0;transition:opacity .2s ease}
.img-lightbox.open{opacity:1}
.img-lightbox img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:6px;user-select:none}
.img-lightbox-close{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.1);border:none;color:#fff;width:36px;height:36px;
  border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.img-lightbox-close:hover{background:rgba(255,255,255,.2)}
.img-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:none;color:#fff;
  width:44px;height:44px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.img-lightbox-nav:hover{background:rgba(255,255,255,.18)}
.img-lightbox-nav.prev{left:14px}
.img-lightbox-nav.next{right:14px}
.img-lightbox-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:500 13px Outfit,sans-serif;color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.5);padding:4px 14px;border-radius:20px}

/* ── Unit 2: Share Sheet Popup ─────────────────────────────────────────────── */
.gpost-share-sheet{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#151d2e;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:6px 0;min-width:180px;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:200;animation:shareSheetIn .15s ease}
@keyframes shareSheetIn{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.gpost-share-sheet button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;border:none;background:transparent;
  color:var(--text);font:500 13px Outfit,sans-serif;cursor:pointer;transition:background .12s}
.gpost-share-sheet button:hover{background:rgba(255,255,255,.06)}
.gpost-share-sheet button svg{flex-shrink:0;opacity:.7}

/* ── Unit 3: Feed Tabs ─────────────────────────────────────────────────────── */
.gfeed-tabs{display:flex;gap:0;margin-bottom:12px;border-bottom:2px solid rgba(255,255,255,.06);padding:0}
.gfeed-tabs button{border:none;background:transparent;color:var(--muted);font:600 13px Outfit,sans-serif;padding:10px 18px;cursor:pointer;
  position:relative;transition:color .15s}
.gfeed-tabs button::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:transparent;border-radius:2px;transition:background .15s}
.gfeed-tabs button.active{color:var(--accent)}
.gfeed-tabs button.active::after{background:var(--accent)}
.gfeed-tabs button:hover:not(.active){color:var(--text)}

/* ── Unit 4: Mobile Trending Strip ─────────────────────────────────────────── */
.gfeed-trending-strip{display:none;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gfeed-trending-strip::-webkit-scrollbar{display:none}
@media(max-width:899px){.gfeed-trending-strip{display:flex}}
.gfeed-trending-pill{flex:0 0 auto;padding:6px 14px;border-radius:20px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);
  color:#a5b4fc;font:600 12px Outfit,sans-serif;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.gfeed-trending-pill:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4)}

/* ── Unit 5: Notification Bell Ring ────────────────────────────────────────── */
/* ── Double-tap heart animation ────────────────────────────────────────────── */
.gpost-dblheart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:64px;
  pointer-events:none;z-index:50;opacity:0;transition:none}
.gpost-dblheart.pop{animation:dblHeartPop .7s ease forwards}
@keyframes dblHeartPop{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  30%{transform:translate(-50%,-50%) scale(1)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}

/* ── Enhanced post menu ───────────────────────────────────────────────────── */
.gpost-menu button{white-space:nowrap}

@keyframes notifBellRing{
  0%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-14deg)}
  30%{transform:rotate(10deg)}40%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}
  60%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}80%{transform:rotate(0)}100%{transform:rotate(0)}}
.notif-bell-ring{animation:notifBellRing .6s ease-in-out}