:root{
    --bg:#eceff4; --surface:#ffffff; --surface-2:#f1f3f7; --board:#ffffff;
    --ink:#1b1e22; --text:#20242a; --text-2:#353a42; --muted:#6b7280; --muted-2:#4b5563; --log-ink:#353a42;
    --border:#c6d5de; --border-soft:#d8e3ea; --border-2:#9fb6c3; --focus:#8fbccd;   /* blue-grey tint to match the palette (was neutral grey) */
    --seg:#e3e7ee; --kitt:#dfe3ea; --border-red:#ecc4bf;
    --hover-red:#fdeceb; --hover-blue:#eaf2ff; --hover-green:#e9f7f1;
    /* warm taupe tint for advisor names / roles / placeholders / bottom links / status so they don't read as "disabled" grey */
    --name-ink:#352a20; --role-ink:#6e5c49; --placeholder-ink:#9c8b78;
  }
  html[data-theme="dark"]{
    --bg:#0b0d12; --surface:#11141b; --surface-2:#161a22; --board:#041017;
    --ink:#edeef1; --text:#cdd0d6; --text-2:#c4c8cf; --muted:#9aa0aa; --muted-2:#aab0ba; --log-ink:#b3a795;
    --border:#1e3a47; --border-soft:#1b2e38; --border-2:#2c5162; --focus:#3a7d95;   /* teal-tinted to match the body gradient (was neutral grey), toned down from #23414f */
    --seg:#16262e; --kitt:#16262e; --border-red:#5a201c;   /* inactive segments: slight teal tint (was near-neutral #181b21/#171a1f) */
    --hover-red:#1c0a08; --hover-blue:#0b1622; --hover-green:#0a1a15;
    /* warm taupe tint for advisor names / roles / placeholders / bottom links / status so they don't read as "disabled" grey */
    --name-ink:#ece4d6; --role-ink:#cdc0ad; --placeholder-ink:#b3a795;
  }
  *{ box-sizing:border-box; } html{ margin:0; height:100%; } body{ margin:0; }
    body {
        background: radial-gradient(900px 500px at 50% 0%, #fff7f0 0%, #e1e1e136 72%) fixed;
        background-color: #f9f8f4;
        color: var(--ink);
        font-family: -apple-system,"Segoe UI",Roboto,sans-serif;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: safe center;
        gap: clamp(12px,2.4vh,22px);
        user-select: none;
        padding: 16px 10px;
        overflow-x: hidden;
    }
  html[data-theme="dark"] body{ background: radial-gradient(900px 500px at 50% 0%, #022d43f2 0%, #00070f 72%) fixed; background-color:#182333; }
  @keyframes hspin{ to{ transform:rotate(360deg); } }
  .hspinner{ display:inline-block; width:18px; height:18px; border:2px solid var(--border); border-top-color:#2a7d6b; border-radius:50%; animation:hspin .8s linear infinite; flex:none; }
  #bgfx{ position:fixed; inset:0; z-index:-1; pointer-events:none; }   /* drifting constellation behind everything; intensifies while the panel is thinking */
  /* Smooth responsiveness: ease structural size/spacing/position on resize, breakpoints + state toggles.
     ONLY layout props on structural containers — NOT the per-frame VU meters (.seg/.meter), scale digits,
     canvases (#kittbar/#bgfx), or the draggable camera, which must stay instant. */
  @media (prefers-reduced-motion: no-preference){
    .pod, .reg, .col, #log, #topctrls, #topbar, h1, .name, .role{
      transition: flex-basis .3s ease, flex-grow .3s ease, max-width .3s ease, min-width .3s ease,
                  width .3s ease, height .3s ease, gap .3s ease, padding .3s ease, margin .3s ease,
                  font-size .3s ease, transform .3s ease, opacity .25s ease; }
  }
  h1{ font-size:clamp(13px,2.3vw,19px); letter-spacing:.26em; margin:0; color:var(--text); padding-left:.26em; }   /* smaller so the logo + title fit on one line */
  #topbar .logo{ height:clamp(26px,4.8vw,40px); width:auto; flex:none; margin-right:.5em; }
  .pod{ display:flex; justify-content:center; gap:clamp(6px,2.2vw,26px); align-items:flex-end; height:auto; min-height:33vh; width:min(600px,92vw); max-width:100%; flex-shrink:0; }   /* shared column width so the setup bar + chat line up with the panels; auto height fits the tall meter + card stack */
  #kittbar{ display:block; width:min(340px,66vw); height:16px; margin:0 auto; }
  /* Live-state cues while a meeting is running: gentle (desaturated blue) glow on the mic button,
     a soft glow on the logo, and a pulsing green LED tucked under the scanner bar. */
  @keyframes liveMicGlow{ 0%,100%{ box-shadow:0 0 4px rgba(99,152,198,.20); } 50%{ box-shadow:0 0 11px rgba(99,152,198,.50); } }
  body.live #mute{ animation:liveMicGlow 1.4s ease-in-out infinite; }
  @keyframes liveLogoGlow{ 0%,100%{ filter:drop-shadow(0 0 3px rgba(99,152,198,.35)); } 50%{ filter:drop-shadow(0 0 10px rgba(99,152,198,.75)); } }
  body.live #topbar .logo{ animation:liveLogoGlow 1.4s ease-in-out infinite; }
  #liveDot{ display:none; width:9px; height:9px; margin:0 auto 5px; border-radius:50%;
    background:radial-gradient(circle at 38% 34%, #9bf06a, #46c12f 60%, #256a18); }
  body.live #liveDot{ display:block; animation:liveLed 1.1s ease-in-out infinite; }
  @keyframes liveLed{ 0%,100%{ opacity:.55; box-shadow:0 0 3px rgba(70,193,47,.45); }
                      50%{ opacity:1; box-shadow:0 0 7px rgba(70,193,47,.95), 0 0 3px rgba(70,193,47,.6); } }
  .reg{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; height:auto; flex:1 1 0; min-width:56px; max-width:120px; }   /* column: VU meter on top (outside the card), the consolidated card below; auto height so the meter keeps its own size */
  /* Consolidated advisor card: rounded frame tinted with the advisor's hue (--c set on the card in JS, kept in sync on theme change). Wraps ONLY portrait + name + role + speaker; the VU meter sits ABOVE it, outside the frame. */
  .reg .card{ width:100%; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:7px 2px 8px; border-radius:10px; border:none;   /* no border, no fill — the fresnel inset glow alone defines the edge; minimal side padding */
    background:transparent;
    box-shadow:0 6px 20px rgba(0,0,0,.28), inset 0 0 3px rgba(var(--c),.34); transition:box-shadow .2s; }   /* 3px inset glow hugs the edge for the fresnel rim */
  .reg.active .card{ box-shadow:0 9px 26px rgba(0,0,0,.34), 0 0 18px rgba(var(--c),.18), inset 0 0 10px rgba(var(--c),.5); }   /* speaker's card lifts + the rim glows brighter in their hue */
  .reg.onbreak .card{ background:transparent; box-shadow:0 4px 14px rgba(0,0,0,.18); }   /* muted advisor: drop the colour tint so the card reads as "stepped out" */
  @media (max-width:600px){ .reg .card{ padding:9px 2px 11px; border-radius:10px; } .reg{ min-width:50px; } }   /* tighter card padding so five cards still fit a phone width */
  /* "Spotlight" the speaker by dimming the LABELS of inactive advisors — NOT the whole column.
     Keeping the fade off .meter means the meter housing background stays at a constant strength
     instead of darkening when an advisor activates (fading the parent dimmed the meter bg too). */
  .reg .name, .reg .rolewrap{ opacity:.82; transition:opacity .2s; }
  .reg.active .name, .reg.active .rolewrap{ opacity:1; }
  .reg.onbreak .col, .reg.onbreak .name, .reg.onbreak .role{ opacity:.18; }
  .toggle{ margin-top:5px; padding:3px 11px; border-radius:999px; border:1.5px solid var(--border); background:transparent; cursor:pointer; transition:filter .15s, transform .12s; line-height:0; display:inline-flex; align-items:center; justify-content:center; }   /* oval pill (not a circle) */
  .toggle svg{ width:11px !important; height:11px !important; }   /* small glyph — !important beats the inline width/height on the injected SVG */
  .toggle:hover{ filter:brightness(1.35); transform:translateY(-1px); }
  @media (max-width:600px){ .toggle{ padding:3px 9px; } .toggle svg{ width:10px !important; height:10px !important; } }
  .col{ display:flex; flex-direction:column; gap:4px; height:100%; width:clamp(11px,3vw,16px); }
  .seg{ flex:1; border-radius:1.5px; background:var(--seg); }
  /* Advisor portrait: a per-advisor square (holds their avatar/camera later). Fixed size at the TOP of the column;
     the VU meter below flexes to fill the rest, so only the meter's vertical size shrinks to make room. */
  .portrait{ flex:0 0 auto; width:100%; max-width:52px; aspect-ratio:1; border-radius:50%; overflow:hidden; border:1px solid rgba(var(--c),.38);   /* round avatar + subtle advisor-colour ring */
    display:flex; align-items:center; justify-content:center; position:relative; margin-top:0;
    background:rgba(var(--c),.12);
    color:rgba(var(--c),.92); font-size:clamp(9px,2vw,12px); font-weight:600; letter-spacing:.02em;
    box-shadow:inset 0 0 14px rgba(var(--c),.10); }
  .portrait video, .portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.22); transform-origin:50% 36%; }   /* zoom in a touch so the face reads bigger (origin biased up toward the face) */
  .reg.active .portrait{ border-color:rgba(var(--c),.62); box-shadow:0 0 10px rgba(var(--c),.26), inset 0 0 14px rgba(var(--c),.14); }
  .reg.onbreak .portrait{ opacity:.32; }
  /* VU meter housing: a rounded frame glowing in the advisor's hue, with a side number scale + tick marks (--c = "r,g,b") */
  .meter{ --meter-height:clamp(96px,15vh,150px); flex:0 0 auto; height:var(--meter-height); min-height:0; display:flex; align-items:stretch; gap:2px; padding:3px 4px 3px 6px; box-sizing:border-box;
    border:none; border-radius:7px; background:rgba(var(--c),.025);
    box-shadow:0 0 8px rgba(var(--c),.045), inset 0 0 16px rgb(70 127 172 / 24%); }   /* standalone tall housing ABOVE the card */
  .meter .scale{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; padding:2px 0; }
  .meter .ticks{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:2px 0; }
  .meter .srow{ display:flex; align-items:center; gap:2px; }
  /* Scale digits sized via transform:scale (NOT font-size) — browsers clamp font-size to a minimum (~6px), so tiny
     font-size values all render the same; a transform is not subject to that floor. Tune the .62 to resize. */
  .meter .snum{ font-size:.5px; line-height:.05; display:inline-block; transform:scale(var(--meter-digit-scale,.72)); transform-origin:right center; color:rgba(var(--c),.42); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .meter .stick{ display:block; width:3px; height:1.5px; border-radius:1px; background:rgba(var(--c),.42); }
  /* Double-stepped advisor frame: a narrow VU tower widens around portrait/role, then
     steps inward again below the role to form a compact bottom mute section. */
  .reg{ padding:10px 6px 8px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .advisor-frame{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0;
    filter:drop-shadow(0 6px 20px rgba(0,0,0,.28)); }
  .advisor-frame-line{ fill:transparent; stroke:none; }
  .advisor-frame-shadow{ display:none; fill:#000; stroke:none; opacity:.82; }
  /* Exact original card rim treatment, conformed to the stepped path and clipped so the blur falls inward. */
  .advisor-frame-glow{ fill:none; stroke:rgb(var(--c)); stroke-opacity:.34; stroke-width:3;
    vector-effect:non-scaling-stroke; filter:blur(3px); }
  .reg.active .advisor-frame{ filter:drop-shadow(0 9px 26px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(var(--c),.18)); }
  .reg.active .advisor-frame-glow{ stroke-opacity:.50; stroke-width:10; filter:blur(10px); }
  .reg.onbreak .advisor-frame{ filter:drop-shadow(0 4px 14px rgba(0,0,0,.18)); }
  .reg.onbreak .advisor-frame-glow{ display:none; }
  /* Light theme: no hard outline; a soft advisor-colored inner rim defines the silhouette. */
  html:not([data-theme="dark"]) .advisor-frame-line{ stroke:none; }
  html:not([data-theme="dark"]) .advisor-frame-glow{ stroke-opacity:.21; stroke-width:5; filter:blur(3px); }
  html:not([data-theme="dark"]) .reg.active .advisor-frame-glow{ stroke-opacity:.30; stroke-width:7; filter:blur(4px); }
  html:not([data-theme="dark"]) .advisor-frame{ z-index:2; filter:none; }
  html:not([data-theme="dark"]) .advisor-frame-shadow{ display:block; }
  html:not([data-theme="dark"]) .reg.active .advisor-frame-shadow{ opacity:.94; }
  html[data-theme="dark"] .reg.active .advisor-frame{ filter:drop-shadow(0 7px 18px rgba(0,0,0,.28)) drop-shadow(0 0 8px rgba(var(--c),.10)); }
  html[data-theme="dark"] .reg.active .advisor-frame-glow{ stroke-opacity:.28; stroke-width:6; filter:blur(6px); }
  .reg .card, .reg.active .card, .reg.onbreak .card{
    position:relative; z-index:1; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .meter{ --meter-digit-scale:.72; position:relative; z-index:1; isolation:isolate; width:100%; justify-content:center; border:0; border-radius:0; background:transparent; box-shadow:none;
    -webkit-text-size-adjust:none; text-size-adjust:none; }
  .reg > .toggle{ position:relative; z-index:1; }
  /* Original VU housing effect, now limited to the bottle neck. */
  .meter::before{ content:""; position:absolute; inset:-7px 0; z-index:-1; border-radius:7px;
    background:rgba(var(--c),.025);
    box-shadow:0 0 8px rgba(var(--c),.045), inset 0 0 16px rgb(70 127 172 / 24%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 11%, #000 89%, transparent 100%); }
  @media (max-width:600px){
    .reg{ padding:9px 4px 10px; }
    .reg .card{ padding:0; border-radius:0; }
    .meter{ --meter-digit-scale:.62; }
  }
  @media (max-width:420px){ .meter{ --meter-digit-scale:.55; } }
  .name{ font-size:clamp(9px,2.4vw,12px); letter-spacing:.1em; text-transform:uppercase; color:var(--name-ink); white-space:nowrap; }
  .reg.active .name{ color:var(--ink); }
  .role{ font-size:clamp(8px,1.9vw,10px); letter-spacing:.04em; text-transform:uppercase; color:var(--role-ink); margin-top:-4px; white-space:nowrap; }
  .rolewrap{ position:relative; display:block; width:100%; max-width:100%; margin:0; }   /* fills the card width */
  .rolelabel{ font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif; font-size:clamp(9px,2.2vw,12px); letter-spacing:.005em; text-transform:none; font-weight:500; color:var(--role-ink); line-height:1.2; text-align:center;
    padding:8px 10px 22px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); hyphens:auto; word-break:break-word; overflow:hidden;   /* reserved bottom strip keeps the caret clear of the text */
    box-sizing:border-box; height:calc(2.4em + 30px); display:flex; flex-direction:column; align-items:center; justify-content:center;   /* fixed box tall enough for 2 lines above the caret strip */
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0l4 5 4-5z' fill='%239097a1'/></svg>"); background-repeat:no-repeat; background-position:center bottom 7px; }   /* caret centered at the bottom -> full width for the text */
  .rolelabel .roletext{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; width:100%; }   /* clamp long names to the box with … */
  @keyframes roleChangedPulse{
    0%,100%{ transform:scale(1); filter:brightness(1); box-shadow:0 0 0 0 rgba(var(--c),0); }
    22%{ transform:scale(1.06); filter:brightness(1.3); box-shadow:0 0 0 4px rgba(var(--c),.24), 0 0 20px rgba(var(--c),.52); }
    55%{ transform:scale(1.025); filter:brightness(1.12); box-shadow:0 0 0 2px rgba(var(--c),.14), 0 0 11px rgba(var(--c),.3); }
  }
  .rolelabel.role-changed{ position:relative; z-index:1; animation:roleChangedPulse 1.8s ease-out; }
  @media (prefers-reduced-motion:reduce){ .rolelabel.role-changed{ animation:none; box-shadow:0 0 0 3px rgba(var(--c),.3), 0 0 12px rgba(var(--c),.35); } }
  @media (max-width:600px){ .rolelabel{ height:calc(3.6em + 30px); } .rolelabel .roletext{ -webkit-line-clamp:3; line-clamp:3; } }
  .rolewrap:hover .rolelabel{ border-color:var(--border-2); color:var(--text); }
  select.rolesel{ display:none; }   /* hidden state-holder; the custom .rolemenu drives it */
  /* Custom role dropdown — opens DOWNWARD (the native <select> popped up over the meter with 57 options) */
  .rolemenu{ position:fixed; transform:translateX(-50%); width:170px; max-width:88vw;
    display:none; flex-direction:column; gap:1px; padding:6px; max-height:230px; overflow:auto; z-index:200;
    background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.45); }
  .rolemenu.open{ display:flex; }
  /* category header: gold tint + a tinted band, so groups read clearly apart from the roles under them */
  .rolemenu .rolecat{ font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8a7343;
    padding:6px 8px; margin:5px 0 2px; border-radius:4px; background:rgba(138,115,67,.10); }
  .rolemenu .rolecat:first-child{ margin-top:0; }
  html[data-theme="dark"] .rolemenu .rolecat{ color:#e9d191; background:rgba(233,209,145,.11); }   /* brighter gold + band so it isn't lost on the dark gradient */
  .rolemenu .roleitem{ display:flex; align-items:center; gap:6px; width:100%; text-align:left; background:transparent; border:none; color:var(--text); border-radius:5px; padding:6px 9px; font-size:12px; letter-spacing:0; text-transform:none; line-height:1.25; cursor:pointer; white-space:normal; }
  .rolemenu .roleitem:hover{ background:var(--surface-2); color:var(--text); }
  .rolemenu .roleitem.active{ background:rgba(var(--c),.2); font-weight:700; }   /* selected role: advisor-hue tint + bold + a hue checkmark */
  .rolemenu .roleitem.active::after{ content:"✓"; margin-left:auto; flex:none; color:rgb(var(--c)); font-weight:700; }
  .rolemenu .roleitem.disabled{ opacity:.45; cursor:default; }
  /* Setup selects (Conversation / Mode / Panel) reuse the role-menu look, but the menu is left-aligned to the field */
  .selwrap{ position:relative; display:block; width:100%; }
  .selwrap select{ width:100%; }
  .seloverlay{ position:absolute; inset:0; cursor:pointer; }
  .rolemenu.selmenu{ transform:none; width:auto; }   /* JS sets left + min-width to match the select */
  .status{ color:var(--role-ink); font-size:13px; letter-spacing:.18em; text-transform:uppercase; min-height:18px; text-align:center; }
  button{ background:transparent; color:#e9554a; border:1px solid var(--border-red); border-radius:999px; padding:clamp(8px,2vw,11px) clamp(12px,2.6vw,18px);
    font-size:clamp(11px,2.6vw,12.5px); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:all .2s; white-space:nowrap; }
  /* Control buttons (End · Start · Mic · Panel Voice) — wide labeled pills, icon + text */
  #start, #mute, #modeBtn, #endSession{ width:auto; height:auto; min-width:0; padding:12px 15px; border:none; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px; line-height:1;
    font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    transition:background .2s, box-shadow .22s ease, transform .12s; }
  /* slight glossy gradient over each control button's own colour (survives hover/theme via !important on the image layer only) */
  #start, #mute, #modeBtn, #endSession{ background-image:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.02) 46%, rgba(0,0,0,.12) 100%) !important; }
  /* in-meeting control order: Panel Voice (left) · mic (center) · End Huddle (right) */
  #topctrls #modeBtn{ order:1; }
  #topctrls #start, #topctrls #micwrap{ order:2; }
  #topctrls #endSession{ order:3; }
  #start svg, #mute svg, #modeBtn svg, #endSession svg{ width:16px; height:16px; display:block; }
  .btnlbl{ white-space:nowrap; }
  #mute{ background:#0b7d63; color:#eaf0f7; width:190px; min-width:190px; box-sizing:border-box; }   /* fixed across Tap to Mute / Unmute */
  #mute:hover{ background:#0d9275; }
  #mute.muted{ background:#3a6d58; }   /* muted/off stays green, but deliberately softer */
  #mute.muted:hover{ background:#487e68; }
  #start{ background:#00624b; color:#eaf0f7; }   /* Join/Start — green */
  #start:hover{ background:#007a5d; }
  /* Start = a wide labeled pill (only shown before the meeting); the TEXT pulses, the bars are static */
  #start{ width:auto; height:auto; min-width:0; padding:13px 22px; border-radius:999px; gap:9px; }
  body:not(.live) #startwrap{ transform:translateY(-10px); }   /* pre-meeting: lift the Start Huddle button a bit higher */
  #start .startbars{ display:inline-flex; align-items:center; gap:2px; height:16px; }
  #start .startbars i{ width:2.5px; height:100%; background:currentColor; border-radius:3px; transform-origin:center; }
  #start .startbars i:nth-child(1),#start .startbars i:nth-child(5){ transform:scaleY(.45); }
  #start .startbars i:nth-child(2),#start .startbars i:nth-child(4){ transform:scaleY(.8); }
  #start .startbars i:nth-child(3){ transform:scaleY(1); }
  #start .startlbl{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; animation:startTextPulse 1.7s ease-in-out infinite; }
  @keyframes startTextPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
  @media (prefers-reduced-motion: reduce){ #start .startlbl{ animation:none; } }
  #endSession{ background:#9c4038; color:#eaf0f7; }   /* End session — round, red */
  #endSession:hover{ background:#b34d44; }
  /* Mic stays a pill in live mode (no longer an 80px circle); only the jump-in pulse changes it */
  body.live #mute{ transition:transform .25s ease, background .2s ease; padding-top:16px; padding-bottom:16px; }   /* in-call: mic is a bit taller than the other controls */
  body.live #mute svg{ width:16px; height:16px; }
  /* Mic is bright green while open and softer green while muted; the red cross reinforces the muted state. */
  /* Panel has the floor: muted green, plus pulse/enlarge and the tap-to-unmute label. */
  body.live #mute.jumpin{ transform:scale(1.12); animation:micJumpinPulse 1.5s ease-out infinite; }   /* panel speaking -> grows + pulses */
  @keyframes micJumpinPulse{ 0%{ box-shadow:0 0 0 0 rgba(99,152,198,.55); } 70%{ box-shadow:0 0 0 16px rgba(99,152,198,0); } 100%{ box-shadow:0 0 0 0 rgba(99,152,198,0); } }
  /* Listening waveform: replaces the mic glyph while the mic is actively listening (open + meeting live).
     Muted keeps the static mic+cross icon (MIC_OFF_ICON) — no waveform there. Bars share the button's text color. */
  #mute .micwave{ display:inline-flex; align-items:center; justify-content:center; gap:2.5px; height:16px; }
  body.live #mute .micwave{ height:16px; gap:2.5px; }
  #mute .micwave i{ width:3px; height:100%; background:currentColor; border-radius:3px; transform:scaleY(.42); transform-origin:center; animation:micWaveRipple 1.35s ease-in-out infinite; will-change:transform; }
  body.live #mute .micwave i{ width:3.5px; }
  #mute .micwave i:nth-child(3){ animation-delay:0s; }
  #mute .micwave i:nth-child(2),#mute .micwave i:nth-child(4){ animation-delay:.10s; }
  #mute .micwave i:nth-child(1),#mute .micwave i:nth-child(5){ animation-delay:.20s; }
  /* Outward ripple: center rises/falls first, then the inner pair, then the outer pair. */
  @keyframes micWaveRipple{ 0%,100%{transform:scaleY(.38)} 50%{transform:scaleY(1)} }
  @media (prefers-reduced-motion: reduce){ #mute .micwave i{ animation:none; transform:scaleY(.6); } }
  /* pulsing "tap to unmute" label floating just above the mic button */
  #micwrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
  #floorLabel{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:10px; white-space:nowrap;
    font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#9cc3ea; text-shadow:0 1px 2px rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .2s ease; }
  #floorLabel.show{ opacity:1; animation:floorLabelPulse 1.15s ease-in-out infinite; }
  #floorLabel.show::after{ content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#9cc3ea; }   /* little caret pointing down at the mic */
  @keyframes floorLabelPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
  html[data-theme="light"] #floorLabel, html[data-theme="light"] #talkLabel{ color:#2f6fb0; text-shadow:none; }   /* readable mic hint on white */
  html[data-theme="light"] #floorLabel.show::after{ border-top-color:#2f6fb0; }
  /* pulsing "tap to start" label floating above the play button — mirrors the mic's "tap to talk", shown only before/after a meeting */
  #startwrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
  #startLabel{ position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:10px; white-space:nowrap;
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; letter-spacing:.04em; text-transform:none; font-weight:500; color:#9cc3ea; text-shadow:0 1px 2px rgba(0,0,0,.25);
    pointer-events:none; }   /* caption sits UNDER the Start pill (info icon + text) */
  html[data-theme="light"] #startLabel{ color:#2f6fb0; text-shadow:none; }   /* darker blue so the hint reads on white */
  body.live #startwrap{ display:none; }   /* hide the hint once the meeting is running */
  /* Before the meeting: show ONLY the Start pill (mic + Panel Voice appear once it's live) */
  body:not(.live) #micwrap, body:not(.live) #modeBtn{ display:none; }
  body:not(.live) #topctrls{ padding-bottom:40px; }   /* reserve room for the Start caption (absolute) so the chat below doesn't clip it */
  /* Sub-captions under the in-call pills (Panel Voice / End Huddle) — mic has its own pulsing floor/talk label, no caption */
  #mute, #modeBtn, #endSession{ position:relative; }   /* anchor the absolute sub-caption */
  .btncap{ position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:9px; white-space:nowrap;
    font-size:11px; letter-spacing:.02em; text-transform:none; font-weight:500; color:#9cc3ea; text-shadow:0 1px 2px rgba(0,0,0,.2); pointer-events:none; }   /* same blue hint ink as the Start Huddle caption */
  html[data-theme="light"] .btncap{ color:#2f6fb0; text-shadow:none; }
  body.live #topctrls{ padding-bottom:34px; }   /* reserve room for the in-call sub-captions (absolute) so the chat below doesn't clip them */

  /* First-run (FTUE): dim the WHOLE screen like the pause overlay, but leave the Start
     button in its normal control position, raised above the dim, with its pulsing
     "Tap to start" hint. Cleared on the first Start (see clearFtue in pod_api.html). */
  #ftueDim{ display:none; position:fixed; inset:0; background:rgba(8,12,18,.94); z-index:40; }
  body.ftue #ftueDim{ display:block; }
  body.ftue #startwrap{ z-index:41; }   /* #startwrap is already position:relative, so this lifts it (+ its #startLabel) above the dim */
  body.ftue #topbar{ z-index:41; }      /* keep the logo + title visible above the dim too (#topbar is position:relative) */
  body.ftue #topbar h1{ color:#fff; }   /* force a light title on the dark dim — the light-theme --text would otherwise vanish */
  /* ---- Whiteboard styles moved to board.css (linked in <head>). Edit them there. ---- */
  /* steady "Talk" label above the open mic (active/listening state) */
  #talkLabel{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:10px; white-space:nowrap;
    font-size:14px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#9cc3ea; text-shadow:0 1px 2px rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .2s ease; }
  #talkLabel.show{ opacity:1; animation:floorLabelPulse 1.15s ease-in-out infinite; }   /* pulse like the other floating hints — no down-caret (listening indicator, not a "tap here" prompt) */
  /* Speech toggle mirrors iOS: bright Start green when on, softer sage green when off. */
  #modeBtn{ background:#0b7d63; color:#eaf0f7; }
  #modeBtn:hover{ background:#0d9275; }
  #modeBtn.texton{ background:#3a6d58; }
  #modeBtn.texton:hover{ background:#487e68; }
  #modeBtn, #endSession{ width:130px; min-width:130px; box-sizing:border-box; }   /* equal side controls; state text never resizes the row */
  /* Light theme: clear-glass housing (no frame/box-shadow). --glow (0..1) is driven per-frame by
     render() from the advisor's live level; the ADDITIVE glow comes solely from the ::after layer,
     which screen-blends a colored light over the glass so illumination ADDS up as the bars climb
     (clear at rest, lit when loud). */
  html[data-theme="light"] .meter{
    --glow:0; position:relative; isolation:isolate;
    background:linear-gradient(90deg, #cbcbcb0d 0%, #ffffff 45%, #dae3ffa1 100%); }
  html[data-theme="light"] .meter::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
    mix-blend-mode:screen;                                                                   /* TRUE additive: light adds over the glass + bars */
    background:radial-gradient(118% 66% at 50% 50%, rgba(var(--c),.85) 0%, rgba(var(--c),0) 72%);
    opacity:var(--glow); transition:opacity .1s linear; }
  html[data-theme="light"] .meter .snum{ color:rgba(var(--c),.62); }
  html[data-theme="light"] .meter .stick{ background:rgba(var(--c),.6); }
  /* Consolidated advisor card: lighter, cooler shadow on white; keep the advisor-hue tint from the base rule */
  /* Light theme: names + role labels render thin at weight 400 with wide tracking on white -> bump weight, darken role text */
  html[data-theme="light"] .name{ font-weight:600; }
  html[data-theme="light"] .role{ font-weight:600; color:var(--role-ink); }
  html[data-theme="light"] .rolelabel{ font-weight:600; color:#463c22; background-color:#fff; }
  html[data-theme="dark"] .rolelabel{ border:none; background-color:rgba(255,255,255,.025); box-shadow:inset 0 0 9px rgb(70 127 172 / 14%); }   /* match the VU meter: borderless, subtle bg, soft bluish inner glow */
  html[data-theme="light"] #toplinks a{ font-weight:600; color:var(--role-ink); }
  html[data-theme="light"] .status{ font-weight:600; color:var(--role-ink); }   /* "tap to start…" + status line read too thin on white at weight 400 */
  /* keep related controls together; groups wrap as units */
  .grp{ display:inline-flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; }
  #controls{ display:flex; gap:clamp(12px,3vw,26px); align-items:center; flex-wrap:wrap; justify-content:center; max-width:100%; }
  #setup{ display:flex; justify-content:center; width:100%; margin:14px 0 6px; }   /* tighter gap below the setup bar so the advisor meters sit up higher */
  /* Setup bar: a compact glass container holding captioned dropdowns (Conversation · Mode · Panel) + More options. */
  #setup .grp{ align-items:flex-end; gap:10px; flex-wrap:wrap; justify-content:center; width:min(600px,92vw); box-sizing:border-box; padding:10px 14px; border-radius:6px; background:var(--surface); border:1px solid var(--border); }   /* same column width as the panels + chat */
  html[data-theme="dark"] #setup .grp{ border:none; background:rgba(255,255,255,.015); box-shadow:inset 0 0 10px rgb(70 127 172 / 9%); }   /* glass: borderless, fainter bg + soft bluish inner glow (matches the fields) */
  #setup .fld{ flex:1 1 0; min-width:0; }   /* grow equally to fill the container width */
  #setup .fld > .cap{ text-align:center; }
  #setup .fldsep{ align-self:flex-end; margin-bottom:11px; color:var(--muted); font-size:15px; line-height:1; opacity:.5; user-select:none; }
  @media(max-width:600px){ #setup .fldsep{ display:none; } #setup .grp{ gap:8px; } }
  .grp-label{ color:var(--muted); font-size:11px; letter-spacing:.06em; }
  /* Setup bar: a tiny faded caption sits above each control. */
  .fld{ display:flex; flex-direction:column; align-items:stretch; gap:3px; flex:1 1 0; min-width:0; }
  .fld > .cap{ font-size:12px; line-height:1; letter-spacing:.08em; text-transform:uppercase; color:#776d56; text-align:center; }   /* slight (desaturated) yellow tint on the field titles */
  .fld > input, .fld > select{ width:100%; min-width:0; max-width:none; }
  #setup #projSelect, #setup #presetSelect, #setup #sceneSelect, #langCorner #langSelect{ color:#776d56; }   /* same muted tint on the project / goal / advisors / language value text */
  html[data-theme="dark"] .fld > .cap, html[data-theme="dark"] #setup #projSelect, html[data-theme="dark"] #setup #presetSelect, html[data-theme="dark"] #setup #sceneSelect, html[data-theme="dark"] #langCorner #langSelect{ color:#c6bfa9; }   /* lighter, muted gold on dark */
  /* header + advisor bars share one width so the lang picker lines up with the last column */
  #stage{ display:flex; flex-direction:column; width:fit-content; max-width:100%; margin:0 auto; }
  /* header bar: title centered over the panel, language picker pinned to the right edge (above Iris's column) */
  #topbar{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; gap:0; }   /* brand on top, language + account on a row below */
  #topbar .brandrow{ display:flex; align-items:center; justify-content:center; }
  #topbar .metarow{ display:flex; align-items:center; justify-content:space-between; width:min(600px,92vw); gap:12px; margin-top:-6px; }   /* same column width as the panels: language left, account right; pulled up under the title */
  /* language on the left edge (above Paul's column), record on the right edge (above Iris's column) */
  #langCorner{ position:relative; display:flex; align-items:center; z-index:21; }   /* z-index lifts the popup above the (transformed) advisor meters */
  /* Custom language dropdown: globe segment INSIDE the pill + a gradient popup (parity with the account menu) */
  #langCorner #langBtn{ display:flex; align-items:center; gap:7px; width:135px; box-sizing:border-box; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:3px 8px 3px 3px; cursor:pointer; line-height:1; }   /* same width as the account pill */
  #langCorner #langBtn:hover{ background:var(--surface); border-color:var(--border-2); }
  #langCorner #langBtn .langGlobe{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:24px; border-radius:6px; background:var(--surface-2); font-size:13px; }
  #langCorner #langBtn #langLabel{ font-size:13px; color:#776d56; }
  #langCorner #langBtn .langCaret{ width:11px; height:11px; opacity:.7; color:#776d56; margin-left:auto; }   /* push the caret to the right edge of the fixed-width pill */
  #langCorner #langMenu{ position:absolute; top:100%; left:0; margin-top:6px; display:none; flex-direction:column; gap:3px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.4); z-index:40; min-width:132px; max-height:62vh; overflow:auto; }
  #langCorner #langMenu.open{ display:flex; }
  #langCorner #langMenu button{ display:flex; align-items:center; width:100%; text-align:left; background:transparent; border:none; color:#776d56; border-radius:7px; padding:7px 10px; font-size:13px; letter-spacing:0; text-transform:none; cursor:pointer; }
  #langCorner #langMenu button:hover{ background:var(--surface-2); color:var(--text); }
  html[data-theme="dark"] #langCorner #langBtn #langLabel, html[data-theme="dark"] #langCorner #langBtn .langCaret, html[data-theme="dark"] #langCorner #langMenu button{ color:#c6bfa9; }
  /* z-index:20: recCorner's transform makes it a stacking context, which traps the dropdown's z-index inside it;
     without a positive z-index here the whole corner sits in the z-auto group and the (also-transformed) advisor
     meters — later in the DOM — paint OVER the open record menu. A positive z-index lifts the corner above them. */
  /* right edge: record pill (while running) + account menu, laid out in a flex row */
  #topbar #topRight{ position:relative; display:flex; align-items:center; gap:9px; z-index:20; }
  #topbar #recCorner{ position:relative; display:flex; gap:0; align-items:stretch; }
  #topbar #recCorner > button{ padding:4px 10px; font-size:11px; letter-spacing:.04em; }
  /* Split record pill: the mode picker (left) and start/stop (right) read as ONE pill — the two inner
     corners are squared and the shared edge is the left button's right border (recBtn drops its own). */
  #topbar #recModeBtn{ display:inline-flex; align-items:center; gap:2px; padding:4px 5px 4px 8px; border-top-right-radius:0; border-bottom-right-radius:0; }
  #topbar #recBtn{ border-top-left-radius:0; border-bottom-left-radius:0; border-left-width:0; padding:4px 14px; }   /* REC gets the wider half — the mode segment stays snug around its icon */
  html[data-theme="light"] #topbar #recModeBtn:not(.recording){ border-right-color:rgba(255,255,255,.4); }   /* light theme fills the pill solid green -> keep the segment divider visible */
  #recModeBtn .recmodeicon{ display:none; }
  #recModeBtn .recmodeicon svg{ width:15px; height:15px; display:block; }
  #recModeBtn:not(.video) .icoGram{ display:inline-flex; }   /* gramophone = audio only */
  #recModeBtn.video .icoReel{ display:inline-flex; }         /* reel = audio + video */
  #recModeBtn .recCaret{ width:11px; height:11px; }
  /* Mode dropdown: ONE panel of flat option rows (language-menu style), not stacked pill buttons.
     Rows keep the record pill's type size (11px) and its green; .sel = the current pick, held highlighted. */
  #topbar #recMenu{ position:absolute; top:100%; left:0; margin-top:6px; display:none; flex-direction:column; gap:2px; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.4); z-index:40; min-width:104px; }
  #topbar #recMenu.open{ display:flex; }
  #topbar #recMenu button{ display:flex; align-items:center; gap:7px; width:100%; text-align:left; background:transparent; border:none; border-radius:7px; color:#46c29c; padding:5px 9px; font-size:11px; letter-spacing:.04em; cursor:pointer; }
  #topbar #recMenu button:hover{ background:var(--hover-green); color:#62d3af; }
  #topbar #recMenu button.sel{ background:var(--hover-green); color:#62d3af; }
  html[data-theme="light"] #topbar #recMenu button{ color:#2a7d6b; }
  html[data-theme="light"] #topbar #recMenu button:hover{ background:rgba(42,125,107,.14); color:#1f5f50; }
  html[data-theme="light"] #topbar #recMenu button.sel{ background:#2a7d6b; color:#fff; }   /* the pick fills solid green, matching the record pill */
  #topbar #recMenu button .recmodeicon{ display:inline-flex; flex:0 0 auto; }
  #topbar #recMenu button .recmodeicon svg{ width:15px; height:15px; display:block; }
  /* Account pill (top-right) — matches the language pill / field chrome; dropdown mirrors the record menu */
  #topbar #acctCorner{ position:relative; }
  #topbar #acctBtn{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:6px 11px; font-size:13px; line-height:1; cursor:pointer; }   /* rounded-rect to match the language pill */
  #topbar #acctBtn:hover{ background:var(--surface); border-color:var(--border-2); color:var(--text); }
  #topbar #acctBtn .acctIcon{ display:inline-flex; }
  #topbar #acctBtn .acctIcon svg{ width:16px; height:16px; }
  #topbar #acctBtn #acctName{ font-weight:600; display:inline-block; width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }   /* fixed width so the pill never grows; JS caps the text at 9 chars + …; blue "You" tint set in JS (matches the chat-log name) */
  #topbar #acctBtn .acctCaret{ width:11px; height:11px; opacity:.7; }
  #topbar #acctMenu{ position:absolute; top:100%; right:0; margin-top:6px; display:none; flex-direction:column; gap:3px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.4); z-index:40; min-width:158px; }
  #topbar #acctMenu.open{ display:flex; }
  #topbar #acctMenu button, #topbar #acctMenu a{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:transparent; border:none; color:#776d56; border-radius:7px; padding:8px 10px; font-size:13px; letter-spacing:0; text-transform:none; text-decoration:none; cursor:pointer; }   /* menu text colour matches the language pill */
  html[data-theme="dark"] #topbar #acctMenu button, html[data-theme="dark"] #topbar #acctMenu a{ color:#c6bfa9; }
  #topbar #acctMenu button:hover, #topbar #acctMenu a:hover{ background:var(--surface-2); color:var(--text); }
  #topbar #acctMenu button svg, #topbar #acctMenu a svg{ width:15px; height:15px; flex:none; opacity:.85; }
  #topbar #acctMenu #logout{ color:#c0564b; }
  #topbar #acctMenu #logout:hover{ background:var(--hover-red); color:#ff6a5c; }
  /* Destructive + irreversible, so it sits below Log out behind a divider and reads dimmer until hovered. */
  #topbar #acctMenu #deleteAcct{ color:#8d5049; margin-top:6px; padding-top:10px; border-top:1px solid var(--border); border-radius:0 0 7px 7px; }
  #topbar #acctMenu #deleteAcct:hover{ background:var(--hover-red); color:#ff6a5c; }
  #langCorner select{ background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:5px 8px; font-size:13px; outline:none; cursor:pointer; }
  #langCorner select:focus{ border-color:var(--focus); }
  #ttsbar{ display:flex; justify-content:center; align-items:center; margin-top:-6px; font-size:12px; color:var(--muted); }
  #ttsbar .barbox{ display:flex; align-items:center; justify-content:center; gap:18px; width:min(600px,92vw); box-sizing:border-box; padding:7px 10px; border:none; border-radius:8px; background:transparent; }   /* same column width as the panels above; no fill, no border */
  #ttsbar .barleft,
  #ttsbar .barright{ display:flex; align-items:center; gap:10px; }   /* even spacing within each group; the box gap separates the groups */
  #ttsbar .bardiv{ width:1px; align-self:stretch; min-height:30px; background:var(--border); }   /* sits after History, between the two groups */
  #ttsbar select{ background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:5px 8px; font-size:12px; outline:none; cursor:pointer; }
  #ttsbar select:focus{ border-color:var(--focus); }
  #ttsbar select:disabled{ opacity:.4; cursor:not-allowed; }
  /* Panel Text mode now ONLY silences the panel's voice (handled in JS); the VU meters stay visible in both modes per user request. */
  @media(max-width:600px){
    #langCorner select{ font-size:12px; padding:4px 6px; }
    #topbar .metarow{ margin-top:6px; }   /* narrow screens: the -6px pull lets the left language pill collide with the centred logo/title — drop it below the brand row instead */
    #startLabel{ display:none; }           /* hide the "Everyone will join when you start" caption on small screens */
    body:not(.live) #topctrls{ padding-bottom:8px; }   /* caption hidden -> reclaim the space it reserved above the chat */
  }
  button:hover{ background:var(--hover-red); color:#ff6a5c; } button.live{ border-color:#9a3329; color:#ff6a5c; }
  /* category colours: meeting=red (default), conversation=blue, file-sharing=teal */
  button.cat-convo{ color:#6aa0ff; border-color:#27435f; }
  button.cat-convo:hover{ background:var(--hover-blue); color:#8fbaff; }
  button.cat-file{ color:#46c29c; border-color:#214f42; }
  button.cat-file:hover{ background:var(--hover-green); color:#62d3af; }
  /* sharing row (+ image / camera / + file): identical fixed width + centered label, compact */
  .grp > button.eqbtn{ width:122px; min-width:0; flex:0 0 auto; justify-content:center; text-align:center; padding:7px 10px; font-size:11px; }
  @media(max-width:600px){ .grp > button.eqbtn{ width:100px; } }
  /* Bottom utility buttons: softly filled, raised pills with taupe text. */
  #ttsbar button.barbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:90px; padding:7px 6px; border-radius:10px;
    border:1px solid #e7d7bd; background:linear-gradient(180deg,#fffefa 0%,#fff9ee 100%); color:#776d56; cursor:pointer; font-size:11px; line-height:1;
    box-shadow:0 5px 11px rgba(57,45,29,.13),0 1px 2px rgba(57,45,29,.09),inset 0 1px 0 rgba(255,255,255,.95);
    flex:0 0 auto; transition:background .15s, border-color .15s, box-shadow .15s, transform .1s; }   /* uniform width; yellowish (matches the setup / language text) */
  #ttsbar button.barbtn:hover{ background:linear-gradient(180deg,#fff 0%,#fff6e7 100%); border-color:#dbc49e; color:#776d56;
    box-shadow:0 7px 14px rgba(57,45,29,.16),0 2px 3px rgba(57,45,29,.09),inset 0 1px 0 #fff; transform:translateY(-1px); }
  #ttsbar button.barbtn:active{ transform:scale(.97); }
  /* out of meeting time -> Create is dimmed and inert (the server refuses the build too) */
  #ttsbar button.barbtn:disabled{ opacity:.42; cursor:not-allowed; }
  #ttsbar button.barbtn:disabled:hover{ background:inherit; border-color:inherit; color:inherit;
    box-shadow:none; transform:none; }
  #ttsbar button.barbtn svg{ display:block; width:15px; height:15px; flex:none; }
  /* opt out of the global uppercase button style — these read as labels, not shouty pills */
  #ttsbar button.barbtn .barlbl{ white-space:nowrap; text-transform:none; letter-spacing:.01em; }
  /* Five buttons no longer fit a phone at full width — drop to icon-only there (the title= tooltips
     and the icons carry the meaning) rather than letting the row overflow off-screen. */
  @media(max-width:600px){
    #ttsbar .barbox{ gap:12px; }
    #ttsbar .barleft, #ttsbar .barright{ gap:8px; }
    #ttsbar button.barbtn{ width:46px; gap:0; padding:7px 4px; }
    #ttsbar button.barbtn .barlbl{ display:none; }
  }
  html[data-theme="dark"] #ttsbar button.barbtn{ border-color:rgba(198,191,169,.45); background:rgba(255,255,255,.045); color:#c6bfa9;
    box-shadow:0 5px 12px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05); }
  html[data-theme="dark"] #ttsbar button.barbtn:hover{ border-color:rgba(198,191,169,.6); background:rgba(255,255,255,.075); color:#c6bfa9;
    box-shadow:0 7px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07); }
  /* Deck dialog — content source. All three options are the same kind of choice, so they get the
     same weight: identical row, identical radio. Picking a file just fills in that row's subtitle. */
  .srcrow{ display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:9px;
    padding:10px 12px; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s; }
  .srcrow:hover{ border-color:#2a7d6b; background:rgba(42,125,107,.07); }
  .srcrow .srctxt{ min-width:0; }
  .srcrow .srcname{ display:block; font-size:13px; text-transform:none; letter-spacing:0; }
  .srcrow .srchint{ display:block; font-size:11px; color:var(--muted); text-transform:none; letter-spacing:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .srcrow .srchint.chosen{ color:#2a7d6b; }
  /* Huddle Files browser — an OS-style open dialog: name / size / modified columns, click a folder
     to enter, click a file to select, double-click to open it straight away. */
  .fbrow{ display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
    background:none; border:none; color:var(--ink); font:inherit; font-size:12.5px;
    text-transform:none; letter-spacing:0; text-align:left; padding:8px 16px; cursor:pointer; }
  .fbrow:hover{ background:rgba(42,125,107,.09); }
  .fbrow.sel{ background:#2a7d6b; color:#fff; }
  .fbrow.sel .fbsize, .fbrow.sel .fbdate{ color:rgba(255,255,255,.8); }
  .fbrow .fbname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fbrow .fbsize{ width:72px; text-align:right; font-size:11px; color:var(--muted); flex:none; }
  .fbrow .fbdate{ width:104px; text-align:right; font-size:11px; color:var(--muted); flex:none; }
  .fbempty{ padding:22px 16px; text-align:center; font-size:12px; color:var(--muted); }
  @media(max-width:600px){ .fbrow .fbdate, #fileBrowserModal .fbhdr-date{ display:none; } }
  /* Create-file dialog: one selectable row per format */
  .mkfmt{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; box-sizing:border-box;
    border:1px solid var(--border); border-radius:9px; padding:11px 13px; background:none; color:var(--ink);
    font:inherit; font-size:13px; text-align:left; cursor:pointer; transition:border-color .15s, background .15s;
    text-transform:none; letter-spacing:0; }   /* opt out of the global uppercase button style — these are labelled rows, not pills */
  .mkfmt:hover{ border-color:#2a7d6b; background:rgba(42,125,107,.09); }
  .mkfmt .mkhint{ font-size:11px; color:var(--muted); }
  /* Saved Data dialog buttons: icon + label rows, hover lift */
  button.sdbtn{ display:flex; align-items:center; gap:11px; width:100%; background:#1d4e5e; border:1px solid #225767; color:#fff;
    border-radius:11px; padding:13px 16px; font-size:14px; font-weight:600; letter-spacing:.01em; text-transform:none; text-align:left;
    cursor:pointer; transition:background .15s, border-color .15s, transform .08s; }
  button.sdbtn svg{ width:18px; height:18px; flex:none; opacity:.85; }
  button.sdbtn:hover{ background:#266376; border-color:#33889b; }
  button.sdbtn:active{ transform:scale(.98); }
  button.sdbtn.sdbtn-cancel{ justify-content:center; background:none; border:1px solid var(--border); color:var(--muted); font-weight:500; margin-top:3px; }
  button.sdbtn.sdbtn-cancel:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border-2); }
  /* image Download/Copy: circular icon buttons (same treatment as the lower icon bar), in the green accent */
  button.imgact{ width:34px; height:34px; padding:0; border-radius:50%; flex:0 0 auto; line-height:0;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid rgba(53,194,160,.55); background:rgba(53,194,160,.14); color:#35c2a0;
    transition:background .15s, border-color .15s, transform .1s; }
  button.imgact:hover{ background:rgba(53,194,160,.26); border-color:#35c2a0; }
  button.imgact:active{ transform:scale(.92); }
  button.imgact svg{ display:block; width:16px; height:16px; }
  button#recBtn .recdot{ display:inline-block; margin-right:5px; }
  button#recBtn.recording .recdot{ color:#e9554a; animation:recdotblink 1s ease-in-out infinite; }   /* ONLY the record dot oscillates red — no button glow/outline */
  @keyframes recdotblink{ 0%,100%{ opacity:1; } 50%{ opacity:.18; } }
  /* live camera preview: corner on mobile (good), repositioned + larger on desktop; comfortable tap targets either way */
  #camPreview{ position:fixed; bottom:16px; right:16px; z-index:55; display:none; flex-direction:column; gap:8px; align-items:flex-end; }
  #camPreview video{ width:168px; max-width:46vw; border-radius:12px; border:1px solid var(--border); background:#000; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.45); display:block; }
  #camPreview #camHandle{ align-self:stretch; text-align:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#e3e9f1; cursor:move; user-select:none; touch-action:none; padding:6px 0; background:rgba(16,42,66,.95); border:1px solid #2f5878; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.4); }
  #camPreview .camrow{ display:flex; gap:8px; align-self:stretch; justify-content:center; padding:7px; background:rgba(16,42,66,.95); border:1px solid #2f5878; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.4); }
  #camPreview .camrow button{ padding:9px 15px; font-size:16px; line-height:1; min-width:46px; }
  @media (min-width:701px){   /* desktop: bigger preview, anchored to the right edge and vertically centred (not jammed in the corner) */
    #camPreview{ top:50%; bottom:auto; right:26px; transform:translateY(-50%); gap:10px; }
    #camPreview video{ width:260px; max-width:24vw; }
    #camPreview .camrow button{ padding:9px 17px; font-size:16px; }
  }
  /* light theme: file/media buttons (record, + image, + file) get a solid green fill + white text; dark keeps the teal outline */
  html[data-theme="light"] button.cat-file:not(.recording){ background:#2a7d6b; border-color:#2a7d6b; color:#fff; }
  html[data-theme="light"] button.cat-file:not(.recording):hover{ background:#27735f; border-color:#27735f; color:#fff; }
  /* Send button: green rounded square with a white paper-plane (dim until you type, .ready = full). */
  #shareBtn{ width:42px; height:42px; padding:0 !important; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    background:#2a7d6b; border:1px solid #2a7d6b; border-radius:12px; color:#fff; opacity:.45; }
  #shareBtn:hover{ background:#27735f; border-color:#27735f; color:#fff; }
  #shareBtn.ready{ opacity:1; }
  #shareBtn svg{ width:18px; height:18px; }
  /* "+" attach button + its pop-up menu (Camera / Image / File), Slack/Messages style. */
  #shareCtrls{ display:none !important; }   /* the old inline +image/camera/+file row — hidden; the + menu triggers them */
  #plusWrap{ position:relative; flex:0 0 auto; }
  #plusBtn{ width:42px; height:42px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center;
    background:#2b80a1; border:1px solid #2b80a1; border-radius:50%; color:#fff; font-size:24px; line-height:1; cursor:pointer; }   /* blue so the add-photo/file action is obvious next to the green send */
  #plusBtn:hover{ background:#246d89; border-color:#246d89; }
  #attachMenu{ position:absolute; bottom:100%; left:0; margin-bottom:8px; display:none; flex-direction:column; gap:2px; padding:6px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.45); z-index:60; min-width:170px; }
  #attachMenu.open{ display:flex; }
  #attachMenu button{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; border:none;
    color:var(--text); padding:10px 12px; border-radius:9px; font-size:15px; cursor:pointer; }
  #attachMenu button:hover{ background:var(--surface-2); }
  #attachMenu .ico{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:15px; flex:none; }
  @keyframes recpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(192,39,31,.55); } 50%{ box-shadow:0 0 0 7px rgba(192,39,31,0); } }
  #toplinks a{ color:var(--role-ink); text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:6px 15px; transition:all .15s; cursor:pointer; }
  #toplinks a:hover{ border-color:var(--border-2); color:var(--text); background:var(--surface-2); }
  #setup input{ background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 12px; font-size:16px; outline:none; min-width:140px; max-width:46vw; }
  #setup .fld > input{ min-width:0; max-width:none; }   /* the name input must flex with its column like the selects — the 140px min above broke its scale/alignment when the bar shrinks */
  #setup input:focus, #setup select:focus{ border-color:var(--focus); }
  /* combined chat panel: scrolling log on top, composer docked at the bottom */
  #chat{ width:min(600px,92vw); display:flex; flex-direction:column; border:1px solid var(--border-soft); border-radius:8px; background:var(--surface); overflow:visible; position:relative; margin-top:-12px; }   /* same column width as the panels + setup bar; pulled up a bit */
  /* Maximize / restore the chat log: a small toggle that blows #log up to a near-fullscreen overlay. */
  #logMaxBtn{ position:absolute; top:8px; right:20px; z-index:6; width:36px; height:28px; display:none; align-items:center; justify-content:center; padding:0; border:none; background:rgba(18,22,30,.55); color:#fff; border-radius:999px; cursor:pointer; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }   /* semi-transparent pill, offset to clear the scrollbar */
  #logMaxBtn:hover{ background:rgba(18,22,30,.82); }
  #logMaxBtn svg{ width:17px; height:17px; display:block; }
  /* z-index 48: the floating chat sits ABOVE app menus (recMenu 40) but BELOW every focused
     dialog/overlay — end-meeting (50), limit (55), pause (70), etc. — so those still cover it when they open. */
  #chat.log-max{ position:fixed; top:50%; left:clamp(24px,2.5vw,52px); transform:translateY(-50%); width:min(31vw,660px); min-width:min(92vw,420px); height:min(84vh,860px); max-height:none; z-index:48; box-shadow:0 24px 70px rgba(0,0,0,.55); }
  /* Once the user has dragged/resized the maximized window, JS sets inline left/top/width/height and adds
     .positioned — drop the centering transform so those coordinates are honored exactly. */
  #chat.log-max.positioned{ transform:none; }
  #chat.log-max #log{ flex:1 1 auto; max-height:none; min-height:0; }   /* log fills + scrolls; the composer (#sharebar) stays pinned at the bottom */
  #logMaxBack{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:79; }
  #logMaxBack.show{ display:block; }
  /* Drag-to-move handle: a slim title strip shown ONLY when maximized (removed from flow otherwise). */
  #logMoveBar{ display:none; }
  #chat.log-max #logMoveBar{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; height:20px; cursor:move; touch-action:none; background:rgba(127,140,160,.08); border-bottom:1px solid var(--border-soft); border-radius:12px 12px 0 0; }
  #chat.log-max #logMoveBar::before{ content:""; width:34px; height:4px; border-radius:999px; background:var(--border); opacity:.7; }
  html[data-theme="dark"] #chat.log-max #logMoveBar::before{ background:rgba(243,236,201,.85); opacity:1; }   /* yellowish-white grip on the dark theme */
  /* Edge / corner resize grips: only present (and hit-testable) in the maximized state. */
  .rzh{ display:none; }
  #chat.log-max .rzh{ display:block; position:absolute; z-index:82; touch-action:none; }
  .rzh-n{ top:-4px; left:10px; right:10px; height:9px; cursor:ns-resize; }
  .rzh-s{ bottom:-4px; left:10px; right:10px; height:9px; cursor:ns-resize; }
  .rzh-e{ right:-4px; top:10px; bottom:10px; width:9px; cursor:ew-resize; }
  .rzh-w{ left:-4px; top:10px; bottom:10px; width:9px; cursor:ew-resize; }
  .rzh-ne{ top:-5px; right:-5px; width:15px; height:15px; cursor:nesw-resize; }
  .rzh-nw{ top:-5px; left:-5px; width:15px; height:15px; cursor:nwse-resize; }
  .rzh-se{ bottom:-5px; right:-5px; width:15px; height:15px; cursor:nwse-resize; }
  .rzh-sw{ bottom:-5px; left:-5px; width:15px; height:15px; cursor:nesw-resize; }
  /* placeholder / empty-state text: tinted slate-blue, not flat grey, so the composer doesn't look disabled */
  input::placeholder, textarea::placeholder{ color:var(--placeholder-ink); opacity:1; }
  #log{ display:none; max-height:8.7em; overflow-y:auto; padding:10px 13px; font-size:14px; line-height:1.45; text-align:left; border-bottom:1px solid var(--border-soft); }
  /* Empty-state hint so the transcript area is discoverable before anything is logged. Once the first line is
     added #log is no longer :empty, so the hint disappears and the real transcript shows. */
  #log:empty{ display:block !important; }
  #log:empty::before{ content:"💬 The meeting transcript appears here."; display:block; color:var(--muted); font-style:italic; font-size:13px; line-height:1.5; opacity:.85; }
  html[data-theme="dark"] #log:empty::before{ color:#f3ecc9; }   /* yellowish-white placeholder on the dark theme */
  #sharebar{ display:flex; gap:8px; align-items:flex-end; min-width:0; padding:8px; }
  #sharebar textarea{ flex:1 1 0; width:0; min-width:0; min-height:42px; max-height:110px; background:var(--surface); border:.5px solid var(--border); color:var(--text); border-radius:8px; padding:9px 13px; font:inherit; font-size:16px; line-height:22px; outline:none; resize:none; overflow-x:hidden; overflow-y:hidden; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
  #sharebar textarea:focus{ border-color:var(--focus); }
  html[data-theme="dark"] #sharebar textarea{ background:#0d1a22; border-color:#13242d; }   /* subtle teal tint on the type box; border toned down from --border so it's not too bright */
  html[data-theme="dark"] #sharebar textarea:focus{ border-color:#295060; }   /* calmer focus border (was the bright --focus #3a7d95) */
  #sharebar button{ padding:9px 18px; }
  #plusBtn.file-drop-active, #shareInput.file-drop-active, #log.file-drop-active{
    outline:2px dashed #52bfa5; outline-offset:2px; box-shadow:0 0 0 5px rgba(82,191,165,.16); }
  #log.file-drop-active{ background:rgba(82,191,165,.08); }
  /* -webkit-appearance:none strips the native control chrome — without it iOS Safari paints its own dark
     dropdown "handle" that ignores the theme. We supply our own chevron (SVG data-URI, muted-gold stroke)
     so the picker matches the field on both platforms. background-color (not the shorthand) keeps the arrow. */
  #setup select{ -webkit-appearance:none; appearance:none; background-color:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:4px; padding:4px 30px 4px 12px; font-size:15px; outline:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23776d56' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:12px; }
  html[data-theme="dark"] #setup input, html[data-theme="dark"] #setup select{ border:none; background-color:rgba(255,255,255,.025); box-shadow:inset 0 0 9px rgb(70 127 172 / 14%); }   /* match the VU meter / roles: borderless, subtle bg, soft bluish inner glow */
  html[data-theme="dark"] #setup select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c6bfa9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }   /* lighter gold chevron on dark */
  html[data-theme="dark"] #setup select option{ background:var(--surface); color:var(--text); }   /* keep the open dropdown list dark (translucent field bg made the native popup render white) */
  #log, #log *{ -webkit-user-select:text; user-select:text; cursor:text; }   /* let the transcript be selected/copied */
  @keyframes huddleSpin{ to{ transform:rotate(360deg) } }
  .regspin{ display:none; position:absolute; inset:0; z-index:3; box-sizing:border-box; width:100%; height:100%; border-radius:50%; pointer-events:none;
    border:2.5px solid rgba(var(--c),.24); border-top-color:#e9a23a; border-right-color:#e9a23a; animation:huddleSpin .8s linear infinite; }
  .reg.building .regspin{ display:block; }
  /* The ring is a PER-ADVISOR build indicator only (see setBuilding). During the director's think the VU meters
     already sweep (the KITT thinking animation) + the status reads "the pod is thinking", so an extra ring on
     all five advisors just competes with the moving meters — no all-panel thinking ring. */
  /* The advisor spinner adds its own height plus one 6px card gap. Take exactly that space from this
     advisor's meter so the total pod height — and everything below it — stays fixed while they build. */
  .reg.building .meter{ height:max(52px, calc(var(--meter-height) - clamp(21px, calc(4.5vw + 6px), 26px))); overflow:hidden; }
  /* Nine 8px digit line-boxes cannot fit in the shortest building meter even though transform makes the
     glyphs look smaller. Give those rows a real compact layout height so 15/20 stay inside the housing. */
  .reg.building .meter .srow{ flex:0 1 6px; height:6px; min-height:0; }
  .reg.building .meter .snum{ line-height:6px; transform:scale(.62); }
  /* The busy ring overlays the portrait, so it adds no layout height and the meter no longer needs to shrink. */
  .reg.building .meter{ height:var(--meter-height); overflow:visible; }
  .reg.building .meter .srow{ flex:0 0 auto; height:auto; min-height:initial; }
  .reg.building .meter .snum{ line-height:.05; transform:scale(var(--meter-digit-scale,.72)); }
  /* External-process badges: one pill per non-instant background task (Manus, slow APIs). Stays up with a live timer until done. */
  #extproc{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; max-width:100%; }
  #extproc:empty{ display:none; }
  .epill{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 9px; border-radius:999px;
    border:1px solid rgba(var(--ep,150,160,170),.5); background:rgba(var(--ep,150,160,170),.08);
    font-size:11px; letter-spacing:.04em; color:var(--text-2); white-space:nowrap; }
  .epill .edot{ flex:none; width:11px; height:11px; box-sizing:border-box; border-radius:50%;
    border:2px solid rgba(var(--ep,150,160,170),.3); border-top-color:rgb(var(--ep,150,160,170)); animation:huddleSpin .8s linear infinite; }
  .epill .etime{ color:var(--muted); font-variant-numeric:tabular-nums; }

  /* ===== app-load entrance animations ===== */
  /* VU housings grow up from their base; title + logo rise into place (Apple-style); log box scales open. */
  @keyframes vuExpand{ from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:1; } }
  @keyframes riseIn{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
  @keyframes logOpen{ from{ transform:translateY(-10px) scaleY(.55); opacity:0; } to{ transform:translateY(0) scaleY(1); opacity:1; } }
  /* a calm ease-out "lerp" curve shared by all three */
  .reg .meter{ transform-origin:bottom center; animation:vuExpand .72s cubic-bezier(.22,1,.36,1) both; }
  .reg:nth-child(1) .meter{ animation-delay:.06s; }
  .reg:nth-child(2) .meter{ animation-delay:.14s; }
  .reg:nth-child(3) .meter{ animation-delay:.22s; }
  .reg:nth-child(4) .meter{ animation-delay:.30s; }
  .reg:nth-child(5) .meter{ animation-delay:.38s; }
  .reg:nth-child(6) .meter{ animation-delay:.46s; }
  /* names + role pickers drift up just after the bars settle */
  .reg .name, .reg .rolewrap{ animation:riseIn .6s cubic-bezier(.22,1,.36,1) both; animation-delay:.34s; }
  /* title block rises up on load — logo first, then the wordmark */
  #topbar .logo{ animation:riseIn .7s cubic-bezier(.22,1,.36,1) both; }
  #topbar h1{ animation:riseIn .7s cubic-bezier(.22,1,.36,1) both; animation-delay:.1s; }
  /* chat log scales open (lerp) the first time a line appears */
  #log.log-opening{ transform-origin:top center; animation:logOpen .44s cubic-bezier(.22,1,.36,1); }
  @media (prefers-reduced-motion: reduce){
    .reg .meter, .reg .name, .reg .rolewrap, #topbar .logo, #topbar h1, #log.log-opening{ animation:none !important; }
  }
  html.low-power-effects #floorLabel.show,
  html.low-power-effects #talkLabel.show,
  html.low-power-effects button#recBtn.recording .recdot,
  html.low-power-effects .typing-dots i{ animation:none !important; }
  html.low-power-effects .regspin,
  html.low-power-effects .epill .edot{ animation-duration:1.6s; }