:root{
--bg:#eceff4; --surface:#ffffff; --surface-2:#f1f3f7; --board:#f8fbfd;
--body-bg-glow:#e8f3fb; --body-bg-fade:#c6daeb33; --body-bg-base:#f2f6fa;
--dialog-gradient:linear-gradient(160deg,#edf6fc 0%,#f8fbfd 52%,#dbe8f1 100%);
--control-gradient:linear-gradient(160deg,#eff7fc 0%,#e2edf4 100%);
--chat-gradient:linear-gradient(160deg,#edf6fc 0%,#f8fbfd 52%,#dbe8f1 100%);
--resume-row-bg:linear-gradient(135deg,#fbfdff 0%,#edf4f9 58%,#dfeaf2 100%);
--resume-row-hover:linear-gradient(135deg,#f5faff 0%,#e4eef5 52%,#d3e2ed 100%);
--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; --vu-rest-scale:#8d96a1; --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;
/* Pale gray-white controls sampled from the circular menu reference; state changes use opacity, not advisor/green hues. */
--whitish-control:#dfe1e8; --whitish-control-hover:#f0f1f5; --whitish-control-muted:#bcc2c5;
--whitish-control-ink:#56656a; --whitish-control-border:#c4c9ce;
--subtle-whitish-control:#c8cad3; --subtle-whitish-control-hover:#d8dae2;
--subtle-whitish-control-border:#c4c9ce;
/* Advisor mute pill owns its own tokens so the dark theme can go outline-only without
dragging #mute / #start / #modeBtn (which share the whitish-control set) along with it. */
--advisor-toggle-bg:#c8cad3; --advisor-toggle-bg-hover:#d8dae2;
--advisor-toggle-border:#c4c9ce; --advisor-toggle-ink:#56656a;
--advisor-toggle-shadow:0 2px 6px rgba(16,25,29,.18);
}
/* Subscription plan sheet. Kept in the shared theme vocabulary so it reads like the account/settings UI. */
.plan-modal{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:80;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.plan-shell{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;width:min(940px,96vw);max-height:90vh;overflow:auto;box-shadow:0 18px 55px rgba(0,0,0,.58)}
.plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.plan-title{font-size:22px;font-weight:700;color:var(--ink)}
.plan-summary{font-size:13px;color:var(--muted);line-height:1.5;margin-top:4px}
.plan-close{width:34px;height:34px;padding:0;border-radius:50%;font-size:25px;line-height:1;color:var(--muted);background:transparent;border:1px solid var(--border);cursor:pointer}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan-card{display:flex;flex-direction:column;min-height:170px;padding:16px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface) 86%,#3184a5 14%)}
.plan-card.current{border-color:#49a9d7;box-shadow:0 0 0 1px rgba(73,169,215,.35),0 8px 24px rgba(0,0,0,.16)}
.plan-card.enterprise{grid-column:span 2}
.plan-card-name{font-size:17px;font-weight:700;color:var(--ink)}
.plan-card-price{font-size:25px;font-weight:750;color:var(--ink);margin:8px 0 2px}.plan-card-price small{font-size:12px;font-weight:500;color:var(--muted)}
.plan-card-minutes{font-size:15px;font-weight:700;line-height:1.35;color:var(--ink);margin-bottom:14px}
.plan-card-cadence{font-weight:400}
.plan-usage{margin:0 0 14px;color:var(--muted);font-size:11.5px}
.plan-usage-labels{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;line-height:1.35}
.plan-usage-labels strong{color:var(--ink);font-weight:650}
.plan-usage-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--muted) 22%,transparent);overflow:hidden}
.plan-usage-fill{height:100%;width:0;border-radius:inherit;background:#2f9677;transition:width .3s ease}
.plan-usage.warning .plan-usage-fill{background:#d69a35}.plan-usage.danger .plan-usage-fill{background:#d65f55}
.plan-card button,.plan-card a{margin-top:auto;display:block;text-align:center;text-decoration:none;border:0;border-radius:8px;padding:10px;background:#1c6b85;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.plan-card button[disabled]{cursor:default;opacity:.58}.plan-card.current button{background:#286454}
.plan-error{padding:10px 12px;margin:-4px 0 14px;border:1px solid #9c4038;border-radius:8px;color:#ef8c83;font-size:13px}
.plan-foot{color:var(--muted);font-size:11.5px;line-height:1.5;text-align:center;margin-top:16px}
@media(max-width:760px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-card.enterprise{grid-column:span 2}}
@media(max-width:480px){.plan-grid{grid-template-columns:1fr}.plan-card.enterprise{grid-column:span 1}.plan-shell{padding:18px}.plan-card{min-height:150px}}
html[data-theme="dark"]{
--bg:#0b0d12; --surface:#11141b; --surface-2:#161a22; --board:#061f2d;
--body-bg-glow:#064963f2; --body-bg-fade:#00141f; --body-bg-base:#061f2d;
--dialog-gradient:linear-gradient(160deg,#07536c 0%,#0d2732 52%,#00141f 100%);
--control-gradient:linear-gradient(160deg,#07536c 0%,#012330 100%);
--chat-gradient:linear-gradient(160deg,#06445c 0%,#0b2c39 52%,#00141f 100%);
--resume-row-bg:linear-gradient(135deg,#164653 0%,#123641 56%,#102832 100%);
--resume-row-hover:linear-gradient(135deg,#1b5a69 0%,#164553 54%,#123440 100%);
--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; --vu-rest-scale:#68777f; --kitt:#16262e; --border-red:#5a201c; /* inactive VU parts share one neutral tint; advisor color arrives with the live level */
--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;
--whitish-control:#dfe1e8; --whitish-control-hover:#f0f1f5; --whitish-control-muted:#aeb7ba;
--whitish-control-ink:#56656a; --whitish-control-border:#eef0f3;
--subtle-whitish-control-border:#c8cad3;
/* Advisor mute + bottom bar on dark: an OUTLINE and a glyph, sitting on a fill that is
the page rather than on top of it. The pale filled pills read as raised plastic
buttons against this backdrop, which is the look being removed here. */
--advisor-toggle-bg:#243239; --advisor-toggle-bg-hover:#2b3c44;
--advisor-toggle-border:#1b272e; --advisor-toggle-ink:#bcebfb;
--advisor-toggle-shadow:none;
--dark-bottom-control:#1b272b; --dark-bottom-control-hover:#233136;
--dark-bottom-control-ink:#aec0c3; --dark-bottom-control-border:#1a262b;
}
*{ box-sizing:border-box; } html{ margin:0; height:100%; } body{ margin:0; }
html[data-tenant-pending] body{ visibility:hidden; }
body {
background:radial-gradient(900px 500px at 50% 0%, var(--body-bg-glow) 0%, var(--body-bg-fade) 72%) fixed;
background-color:var(--body-bg-base);
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%, var(--body-bg-glow) 0%, var(--body-bg-fade) 72%) fixed; background-color:var(--body-bg-base); }
/* Shared gradient surfaces. Tenant branding overrides these variables for both themes. */
.gradCard, #consentScreen>div, [id$="Modal"]>div{
background:var(--dialog-gradient) !important; border:none !important;
}
#attachMenu, #meterMenu, #acctMenu, #langMenu, .rolemenu{ background:var(--dialog-gradient) !important; }
#acctBtn, #langBtn, #subLangBtn{ background:var(--control-gradient) !important; }
#chat{ background:var(--chat-gradient) !important; }
html.tenant-portal #setup[hidden], html.tenant-portal #ttsbar[hidden],
html.tenant-portal #recCorner[hidden], html.tenant-portal.tenant-recording-hidden #recCorner{ display:none !important; }
html.recording-disabled #recCorner{ display:none !important; }
html.tenant-portal .rolewrap{ pointer-events:none; }
#tenantGate{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
padding:20px; background:rgba(249,248,244,.9); backdrop-filter:blur(2px); }
html[data-theme="dark"] #tenantGate{ background:rgba(3,20,30,.94); }
#tenantGate .tenant-gate-card{ width:min(400px,92vw); text-align:center; padding:30px 26px; border-radius:14px;
background:var(--dialog-gradient); border:1px solid var(--border); color:var(--text);
font-family:-apple-system,"Segoe UI",Roboto,sans-serif; box-shadow:0 20px 60px rgba(35,45,55,.2); }
html[data-theme="dark"] #tenantGate .tenant-gate-card{ box-shadow:0 20px 60px rgba(0,0,0,.5); }
#tenantGate .tenant-gate-logo{ max-width:150px; height:44px; object-fit:contain; margin-bottom:14px; }
#tenantGate .tenant-gate-company{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
#tenantGate h2{ margin:6px 0 4px; font-size:22px; color:var(--text); }
#tenantGate .tenant-gate-copy{ font-size:14px; color:var(--muted); margin-bottom:20px; }
#tenantGate #tgGo{ display:flex; align-items:center; justify-content:center; gap:10px; width:min(300px,100%); margin:0 auto;
padding:13px 0; border:none; border-radius:999px; background:#2a7d6b; color:#fff; font-size:13px; font-weight:600;
letter-spacing:.04em; cursor:pointer; transition:filter .2s; }
#tenantGate #tgGo:hover{ filter:brightness(.94); }
#tenantGate #tgGo svg{ flex:none; }
html[data-theme="dark"] #tenantGate #tgGo{ background:#fff; color:#1f2937; }
#tenantGate .tenant-gate-legal{ font-size:11px; color:var(--muted); margin-top:14px; line-height:1.5; }
@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; } /* buoyant bubble mesh behind everything */
/* 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:0 1 clamp(50px,16vw,99px); width:clamp(50px,16vw,99px); min-width:50px; max-width:99px; } /* stable five-seat width: a smaller roster centers the remaining columns instead of making each meter fatter */
/* 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(--advisor-toggle-border); background:var(--advisor-toggle-bg); color:var(--advisor-toggle-ink); box-shadow:var(--advisor-toggle-shadow); cursor:pointer; transition:background .15s, box-shadow .15s, transform .12s, opacity .15s; line-height:0; display:inline-flex; align-items:center; justify-content:center; } /* oval pill, independent of advisor hue: pale on light, outline + glyph on dark */
.toggle svg{ width:11px !important; height:11px !important; } /* small glyph — !important beats the inline width/height on the injected SVG */
.toggle:hover{ background:var(--advisor-toggle-bg-hover); transform:translateY(-1px); }
.reg.onbreak > .toggle{ opacity:.58; }
@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(9px,2.3vw,13px); }
.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:0; /* round avatar; the working ring is a separate overlay */
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:0 3px 7px rgba(0,0,0,.3);
transform:scale(1); transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.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) */
.portrait img[src*="/Jed.gif"]{ transform-origin:50% 0%; } /* Keep Jed's existing crop and zoom, anchored at the top so his hair is not clipped. */
.reg.active .portrait{ box-shadow:0 3px 7px rgba(0,0,0,.3); }
.reg.speaking .portrait{ transform:scale(1.22); z-index:3; } /* enlarge only during real voice playback; transforms preserve the five-seat layout */
.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(118px,19vh,180px); --meter-height:clamp(118px,19svh,180px); 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:var(--vu-rest-scale); white-space:nowrap; font-variant-numeric:tabular-nums; }
.meter .stick{ display:block; width:3px; height:1.5px; border-radius:1px; background:var(--vu-rest-scale); }
/* 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; }
.advisor-frame-tower-fill, .advisor-frame-tower-line{ display:none; pointer-events:none; }
/* 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; }
/* The VU housing is the tallest single block on the page and the phone is where that hurts: at 375x812
it stood 154px of a 353px advisor column and was most of the page's 125px of scroll. Two things were
wrong on Safari specifically. First the unit — iOS resolves `vh` against the LARGE viewport (URL bar
retracted), so 19vh was 19% of more than the user can actually see, and the overshoot became scroll;
`svh` above measures the SMALL viewport, which is the one on screen while the bar is showing.
Second the value, cut to 13svh/104px here. The housing still reads as a tall tower next to a 52px
portrait; it just stops setting the page's height on its own. */
.meter{ --meter-digit-scale:.62; --meter-height:clamp(92px,15vh,132px); --meter-height:clamp(92px,13svh,132px); }
}
@media (max-width:420px){ .meter{ --meter-digit-scale:.55; } }
/* Advisor name: natural case. A name is a proper noun — caps flatten "McKenzie" into "MCKENZIE" and cost
the word-shape people actually read by. Dropping the caps also drops the tracking (.1em on lowercase
reads as spaced-out gibberish); the weight bump keeps the presence the caps used to carry. */
.name{ font-size:clamp(10px,2.5vw,13px); letter-spacing:.01em; font-weight:600; color:var(--name-ink); white-space:nowrap; }
.reg.active .name{ color:var(--ink); }
.role{ font-size:clamp(8px,1.9vw,10px); letter-spacing:.02em; 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:7px 10px 20px; 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 (caret is 6px tall at bottom:7px, so 20px clears it) */
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. The 30px allowance has to cover the 1px border top+bottom too (box-sizing:border-box charges it here), which 8+22 padding did not — it left 2.4em-2px for 2.4em of text and clipped the second line of every two-line role. Trimmed to 27px of padding INSTEAD of raising the height, so the card is not one pixel taller than before. */
background-image:url("data:image/svg+xml;utf8, 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; }
#statusText{ position:relative; display:inline-block; min-height:18px; }
/* Opening startup: a light, non-blocking dim. All controls remain usable while the internal
mic/AEC gate warms up; JS clears this at the first advisor audio frame. */
body::after{ content:""; position:fixed; inset:0; z-index:1000; pointer-events:none; background:#000; opacity:0; transition:opacity .18s ease-in-out; }
body.starting-up::after{ pointer-events:none; opacity:.50; }
body:is(.starting-up,.startup-leaving) #statusText{ z-index:1001; color:transparent; text-shadow:none; }
body:is(.starting-up,.startup-leaving) #statusText::after{ content:"Starting up…"; position:absolute; top:0; left:50%; transform:translateX(-50%); color:#f4f8fc; font-size:13px; white-space:nowrap; text-shadow:0 1px 5px rgba(0,0,0,.85); }
body:is(.starting-up,.startup-leaving) #kittbar{ position:relative; z-index:1001; transition:opacity .18s ease-in-out; }
body:is(.starting-up,.startup-leaving) #endModal{ z-index:1002 !important; }
body:is(.starting-up,.startup-leaving) #mute,
body:is(.starting-up,.startup-leaving) #mute.jumpin{ animation:none !important; box-shadow:none !important; transform:none !important; }
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:15px;
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; }
/* Keep meeting controls flat and softly lit, matching the pale circular reference controls. */
#start, #mute, #modeBtn{ background-image:none !important; }
#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:var(--whitish-control); color:var(--whitish-control-ink); border:1px solid var(--whitish-control-border); box-shadow:0 2px 7px rgba(16,25,29,.18); width:190px; min-width:190px; box-sizing:border-box; } /* fixed across Tap to Mute / Unmute */
#mute:hover{ background:var(--whitish-control-hover); }
#mute.muted{ background:var(--whitish-control-muted); } /* off state stays in the same pale neutral family */
#mute.muted:hover{ background:var(--whitish-control); }
#start{ background:var(--whitish-control); color:var(--whitish-control-ink); border:1px solid var(--whitish-control-border); box-shadow:0 2px 7px rgba(16,25,29,.18); }
#start:hover{ background:var(--whitish-control-hover); }
html[data-theme="dark"] #start{ background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.02) 46%,rgba(0,0,0,.12) 100%) !important; }
/* 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:15px; 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; }
/* The red cross distinguishes muted state; the button itself stays neutral and whitish. */
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 */
/* "Joining as " chip floating ABOVE the Start pill — surfaces the detected (Google-profile) name with
an inline edit, so a first-timer fixes what the advisors call them right here instead of hunting through
the account menu. FTUE-ONLY (body.ftue): a returning user already owns their name, so the chip would just
be clutter over the Join button. Mirrors #startLabel's ink. */
#joinAs{ display:none; position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:14px; white-space:nowrap;
flex-direction:column; align-items:center; gap:3px;
font-size:14px; letter-spacing:.03em; font-weight:500; color:#f2e9cf; text-shadow:0 1px 2px rgba(0,0,0,.25); } /* yellowish-white ink; two stacked lines (cap over name) */
.joinAsCap{ font-size:11px; letter-spacing:.08em; opacity:.85; }
html[data-theme="light"] #joinAs{ color:#6f5d26; text-shadow:none; } /* same warm family, dark enough to read on white */
body.ftue #joinAs{ display:flex; color:#f2e9cf; text-shadow:0 1px 2px rgba(0,0,0,.35); } /* first-run only; over the dark dim the light ink wins in BOTH themes */
#joinAsName{ background:none; border:none; padding:0 0 2px; cursor:pointer; font:inherit; font-weight:700; color:inherit; text-transform:none; letter-spacing:inherit;
display:inline-flex; align-items:center; gap:5px; border-bottom:1px dashed currentColor; } /* text-transform:none — the global button rule would shout the name in caps */
#joinAsName::before{ content:"✎"; font-size:12px; opacity:.8; } /* pen on the LEFT of the name */
#joinAsInput{ width:150px; padding:4px 10px; border-radius:7px; border:1px solid var(--border); background:var(--bg);
color:var(--ink); font:inherit; text-align:center; outline:none; }
body.ftue #topctrls{ margin-top:66px !important; } /* reserve room above the Start pill for the two-line chip (FTUE only, like the chip itself); !important because #topctrls carries an inline margin-top:6px (below-room is the padding-bottom rule further down) */
body.ftue #startLabel{ display:none; } /* first-run: the dim + "Joining as" chip carry the moment — drop the "Everyone will join" caption until the first meeting has been started */
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 */
/* A .btncap is absolutely positioned, so it takes NO layout space: padding-bottom above only clears the
caption under the LAST row. Once the pill row WRAPS (below 500px, see the order rules above) the next
row's button lands on top of the previous row's caption — "End Huddle" sat across
"Toggle Speech"/"Toggle Mic" on a phone. The row gap has to clear a caption (11px tall, 9px below the
pill), so it is set here rather than left to a `gap` shorthand. flex-wrap and column-gap moved off the
inline style in pod_api.html for the same reason — inline beats a stylesheet, so the phone rules could
not have overridden them there. Keep all three declarations here. */
#topctrls{ flex-wrap:wrap; row-gap:24px; column-gap:clamp(12px,3vw,26px); }
/* 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 ). 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 follows the same whitish palette; off is distinguished by the crossed icon and softer fill. */
#modeBtn{ background:var(--whitish-control); color:var(--whitish-control-ink); border:1px solid var(--whitish-control-border); box-shadow:0 2px 7px rgba(16,25,29,.18); }
#modeBtn:hover{ background:var(--whitish-control-hover); }
#modeBtn.texton{ background:var(--whitish-control-muted); }
#modeBtn.texton:hover{ background:var(--whitish-control); }
#modeBtn, #endSession{ width:130px; min-width:130px; box-sizing:border-box; } /* equal side controls; state text never resizes the row */
/* Phone widths: keep all three pills on ONE line by scaling the control down, not by wrapping it.
Wrapping was the wrong answer twice over — it pushed the mic off-centre and it cost a whole extra row
of height on the screen with the least of it. 500px is where the fixed 130+190+130+gaps stops fitting.
Everything below is expressed in em against a fluid font-size, so the pill scales as ONE piece: the
width reservations, the icon and the inner gap all shrink in lockstep with the label. That is what
keeps the px reservations' original job intact — #mute stays a fixed 12.1em across "Tap to Mute" and
the longer "Tap to Unmute", so muting still never resizes the row, at any width.
12.1em/10.3em are the widest labels ("Tap to Unmute" / "End Huddle") measured at 12px plus ~.6em of
breathing room each side, so the row is 32.7em wide however the labels read. 2.7vw is then the largest
font that keeps 32.7em + 2 column gaps inside the narrowest phone; the 8px floor only engages under
296px, where nothing ships, and exists so the row can never overflow. */
@media (max-width:499px){
#topctrls{ flex-wrap:nowrap; column-gap:clamp(4px,1.7vw,10px); }
#mute, #modeBtn, #endSession{ font-size:clamp(8px,2.7vw,12px); padding:.95em .6em; gap:.5em; letter-spacing:.03em; }
/* body.live #mute (1,1,1) sets the taller in-call mic in px and outranks the rule above, so its em
counterparts have to be restated at that same specificity or the mic alone stays full size. */
body.live #mute{ padding-top:1.33em; padding-bottom:1.33em; }
#mute svg, #modeBtn svg, #endSession svg, body.live #mute svg{ width:1.33em; height:1.33em; }
#mute .micwave, body.live #mute .micwave{ height:1.33em; }
#modeBtn, #endSession{ width:10.3em; min-width:0; }
#mute{ width:12.1em; min-width:0; }
}
/* 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:transparent; }
html[data-theme="light"] .meter::before{
background:linear-gradient(90deg,rgba(94,145,184,.08) 0%,rgba(255,255,255,.46) 48%,rgba(94,145,184,.16) 100%);
box-shadow:inset 0 0 14px rgba(51,94,128,.08); /* inset rim only: no outer shadow under the glass housing */
}
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(88% 44% at 50% 50%,rgba(var(--c),.38) 0%,rgba(var(--c),.10) 46%,rgba(var(--c),0) 72%);
opacity:calc(var(--glow) * .34); transition:opacity .1s linear; }
html[data-theme="light"] .meter .snum{ color:var(--vu-rest-scale); }
html[data-theme="light"] .meter .stick{ background:var(--vu-rest-scale); }
/* 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[hidden], #setup .fldsep[hidden]{ display:none !important; }
#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; }
html.tenant-portal.tenant-setup-hidden .pod{ margin-top:20px; } /* keep the VU towers clear of the language/account pills when the setup row is disabled */
/* 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; color:inherit; text-decoration:none; }
#topbar .brandcopy{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tenant-heading-accent{ color:#b6cc2d; }
#tenantCredit{ margin-top:3px; color:var(--muted); font-size:8px; line-height:1; letter-spacing:.12em; text-transform:uppercase; }
#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;
text-transform:none; letter-spacing:0; } /* same width as the account pill — and the same opt-out: it shows a language NAME, not an action, so the global button uppercase must not apply */
#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{ border-right-color:rgba(255,255,255,.78) !important; } /* light theme fills both actions solid green; retain a clear divider between mode and start/stop */
#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;
text-transform:none; letter-spacing:0; } /* rounded-rect to match the language pill. text-transform:none — this pill holds the USER'S NAME, and the global button rule was shouting it in caps (same trap #joinAsName had to opt out of) */
#topbar #acctBtn:hover{ background:var(--surface); border-color:var(--border-2); color:var(--text); }
#topbar #acctBtn .acct-usage-ring{ --usage-pct:0%; --usage-color:#2f9677; position:relative; display:inline-grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:conic-gradient(var(--usage-color) var(--usage-pct),color-mix(in srgb,var(--muted) 24%,transparent) 0); }
#topbar #acctBtn .acct-usage-ring.no-usage{ background:transparent; }
#topbar #acctBtn .acct-usage-ring::before{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--surface); }
#topbar #acctBtn .acct-usage-ring[data-state="warning"]{ --usage-color:#d69a35; }
#topbar #acctBtn .acct-usage-ring[data-state="danger"]{ --usage-color:#d65f55; }
#topbar #acctBtn .acctIcon{ display:inline-flex; }
#topbar #acctBtn .acct-usage-ring .acctIcon{ position:relative; z-index:1; }
#topbar #acctBtn .acctIcon svg{ width:14px; height:14px; }
#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 aquarium-blue glass. */
#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 #c6d9e8; background:linear-gradient(180deg,#fbfdff 0%,#e8f1f8 100%); color:#486579; cursor:pointer; font-size:11px; line-height:1;
box-shadow:0 5px 11px rgba(38,73,102,.13),0 1px 2px rgba(38,73,102,.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; }
#ttsbar button.barbtn:hover{ background:linear-gradient(180deg,#fff 0%,#dceaf5 100%); border-color:#a8c4da; color:#38586f;
box-shadow:0 7px 14px rgba(38,73,102,.16),0 2px 3px rgba(38,73,102,.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. */
/* Dropping the labels also dropped these to a 46x31 target — the smallest thing to hit on the page, on
the device you hit things with a thumb, and the row was leaving ~66px of its width unused at 375px.
Spend that on the buttons rather than on gaps: taller (31 -> 40px, from the 18px icon and 10px of
vertical padding) and fluid in width so a roomier phone gets a roomier target. The floor is what still
fits five of them plus the divider across a 320px screen. */
@media(max-width:600px){
#ttsbar .barbox{ gap:10px; }
#ttsbar .barleft, #ttsbar .barright{ gap:6px; }
#ttsbar button.barbtn{ width:clamp(50px,14.5vw,64px); gap:0; padding:10px 4px; }
#ttsbar button.barbtn svg{ width:18px; height:18px; }
#ttsbar button.barbtn .barlbl{ display:none; }
}
/* Dark theme: a recessive page-toned fill with a dark rim and a light glyph, kept separate from
the meeting controls. The gloss inset stays near-zero — it is what made these read as buttons. */
html[data-theme="dark"] #ttsbar button.barbtn{ border-color:var(--dark-bottom-control-border); background:var(--dark-bottom-control); color:var(--dark-bottom-control-ink);
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:var(--dark-bottom-control-border); background:var(--dark-bottom-control-hover); color:var(--dark-bottom-control-ink);
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; text-transform:none; letter-spacing:0; }
#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; }
.phone-upload-card{ position:relative; width:min(390px,92vw); padding:25px 24px 22px; border-radius:16px; color:var(--ink); text-align:center; box-shadow:0 18px 55px rgba(0,0,0,.55); }
#phoneUploadClose{ position:absolute; top:9px; right:11px; width:34px; height:34px; padding:0; border:0; background:transparent; color:var(--muted); font-size:27px; line-height:1; cursor:pointer; }
#phoneUploadTitle{ font-size:19px; font-weight:650; margin:1px 30px 7px; }
.phone-upload-copy{ color:var(--muted); font-size:13px; line-height:1.45; margin:0 auto 15px; max-width:310px; }
.phone-qr-frame{ display:grid; place-items:center; width:220px; height:220px; margin:0 auto 12px; padding:10px; border-radius:14px; background:#fff; border:1px solid var(--border); }
#phoneUploadQr{ display:block; width:100%; height:100%; object-fit:contain; }
#phoneUploadStatus{ min-height:20px; color:var(--muted); font-size:13px; margin-bottom:7px; }
#phoneUploadLink{ display:none; color:#2b80a1; font-size:12px; overflow-wrap:anywhere; }
#phoneUploadLocal{ display:block; width:100%; margin-top:15px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:transparent; color:var(--ink); cursor:pointer; text-transform:none; letter-spacing:0; }
#phoneUploadLocal:hover{ background:var(--surface-2); }
.phone-upload-expiry{ margin-top:11px; color:var(--muted); font-size:11px; }
@media(max-width:480px){ .phone-qr-frame{ width:190px; height:190px; } .phone-upload-card{ padding:22px 18px 19px; } }
@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; z-index:5; margin-top:-12px; } /* same column width as the panels + setup bar; z-index lets the upward attachment menu clear advisor controls */
/* 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); }
#uploadConfirmModal.paste-confirm #uploadConfirmActions{ flex-direction:column; align-items:stretch; }
#uploadConfirmModal.paste-confirm #uploadConfirmActions button{ width:100%; min-height:40px; box-sizing:border-box; }
#uploadConfirmModal.paste-confirm #uploadConfirmOk{ order:0; }
#uploadConfirmModal.paste-confirm #uploadConfirmCancel{ order:1; }
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. 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; }
/* Gallery / Luxury preset. Tenants and the Main Huddle share this generic preset class; the
tenant-rh alias remains during migration so older cached tenant bootstraps still render it. */
html:is(.tenant-rh,.theme-preset-gallery-luxury){
--bg:#ebe3d8; --surface:#f6f1e9; --surface-2:#eee7dc; --board:#f8f4ed;
--ink:#38322c; --text:#403a33; --text-2:#5a5046; --muted:#81766a; --muted-2:#665c52; --log-ink:#50473e;
--border:#cfc3b4; --border-soft:#ddd3c6; --border-2:#ad9a83; --focus:#a48b69;
--seg:#ddd4c8; --name-ink:#39322b; --role-ink:#756858; --placeholder-ink:#ad9f90;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury)[data-theme="light"] body{
background-color:#ebe3d8;
background-image:linear-gradient(rgba(247,242,234,.12),rgba(232,222,210,.06)),var(--tenant-background-image,none);
background-position:center; background-size:cover; background-attachment:fixed;
color:#38322c; font-family:"Avenir Next","Helvetica Neue","Segoe UI",sans-serif;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) #bgfx{ display:none; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar .logo{ display:none; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar .brandrow{ color:#332d27; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar .brandcopy{ gap:10px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar h1{
padding:0; color:#332d27; font-family:"Bodoni 72","Didot","Bodoni MT","Times New Roman",serif;
font-size:clamp(42px,5vw,58px); font-weight:400; line-height:.82; letter-spacing:.015em;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) .rh-brand-subtitle{
color:#51483f; font-family:"Bodoni 72","Didot","Bodoni MT","Times New Roman",serif;
font-size:clamp(10px,1.2vw,13px); line-height:1; letter-spacing:.32em; text-transform:uppercase;
padding-left:.32em; white-space:nowrap;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) body.ftue #topbar h1,
html:is(.tenant-rh,.theme-preset-gallery-luxury) body.ftue .rh-brand-subtitle{ color:#f7f2ea; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #stage{ width:100%; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar .metarow{ width:min(650px,92vw); margin-top:-2px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #langCorner :is(#langBtn,#subLangBtn),
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar #acctBtn{
background:rgba(246,241,233,.68) !important; border-color:rgba(171,154,132,.52); color:#5b5147;
border-radius:9px; box-shadow:0 5px 16px rgba(75,61,45,.06); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) #langCorner #langBtn .langGlobe{ background:rgba(226,217,205,.72); }
html:is(.tenant-rh,.theme-preset-gallery-luxury).tenant-setup-hidden .pod{ margin-top:24px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .pod{ width:min(520px,92vw); margin-inline:auto; gap:clamp(12px,2.2vw,22px); min-height:34vh; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .reg{ --c:111,86,61 !important; flex-basis:clamp(86px,17vw,112px); width:clamp(86px,17vw,112px); max-width:112px; padding-inline:7px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury):not([data-theme="dark"]) .advisor-frame-shadow{
display:block; fill:#eee4d6; opacity:1; filter:none;
}
/* This theme uses that path as the card's SOLID fill, not as a shadow, so the VU-tower fade mask
applied in app-roster.js has to be switched off here or the top of the card washes out. */
html:is(.tenant-rh,.theme-preset-gallery-luxury) .advisor-frame-shadow{ -webkit-mask:none; mask:none; }
html:is(.tenant-rh,.theme-preset-gallery-luxury):not([data-theme="dark"]) .advisor-frame-line{
stroke:#cbbdac; stroke-width:.8; vector-effect:non-scaling-stroke;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury):not([data-theme="dark"]) .advisor-frame-glow{ stroke-opacity:.10; stroke-width:4; filter:blur(3px); }
html:is(.tenant-rh,.theme-preset-gallery-luxury):not([data-theme="dark"]) .reg.active .advisor-frame-glow{ stroke-opacity:.18; stroke-width:5; filter:blur(4px); }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .advisor-frame-glow{ display:none; }
html:is(.tenant-rh,.theme-preset-gallery-luxury):not([data-theme="dark"]) .advisor-frame{
z-index:0; filter:drop-shadow(0 8px 12px rgba(76,62,46,.14));
}
html:is(.tenant-rh,.theme-preset-gallery-luxury)[data-theme="light"] .meter{ background:transparent; }
html:is(.tenant-rh,.theme-preset-gallery-luxury)[data-theme="light"] .meter::after{ display:none; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .meter .seg{ box-shadow:none !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .meter .snum{ text-shadow:none !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .meter::before{
background:transparent; box-shadow:none;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) .portrait{ background:#eee6dc; box-shadow:0 3px 7px rgba(74,60,45,.3); }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .name{
color:#3e352d; font-family:"Bodoni 72","Didot","Bodoni MT","Times New Roman",serif;
font-size:clamp(15px,2.3vw,18px); font-weight:400; letter-spacing:.01em;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury)[data-theme="light"] .name{ font-weight:400; }
html:is(.tenant-rh,.theme-preset-gallery-luxury)[data-theme="light"] .rolelabel{
height:44px; padding:5px 5px 16px; border:0; border-radius:0; background-color:transparent;
color:#716354; box-shadow:none; font-size:8px; font-weight:500;
line-height:1.2; letter-spacing:.025em; text-transform:none; background-image:none;
-webkit-text-size-adjust:100%; text-size-adjust:100%;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) .toggle{ border-color:var(--whitish-control-border); color:var(--whitish-control-ink); background:var(--subtle-whitish-control); }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .status{ color:#5f5143; font-family:"Bodoni 72","Didot","Bodoni MT","Times New Roman",serif; font-size:12px; font-weight:500; letter-spacing:.20em; text-shadow:0 1px 0 rgba(255,255,255,.68); }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #kittbar{ display:block; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #start{
width:auto; min-width:0; padding:13px 22px; border:none; border-radius:15px;
background:#3b342d !important; color:#f5eee4; box-shadow:0 5px 13px rgba(55,45,35,.22),inset 0 0 0 1px rgba(255,255,255,.08);
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) #start:hover{ background:#4a4036 !important; color:#fffaf3; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #start .startlbl{ font-family:"Bodoni 72","Didot","Bodoni MT","Times New Roman",serif; font-weight:400; letter-spacing:.16em; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #startLabel{ color:#756654; text-shadow:none; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #mute,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #mute.muted,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #modeBtn,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #modeBtn.texton{ background:#6f563d !important; color:#f8f1e7; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #mute:hover,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #modeBtn:hover{ background:#80664b !important; color:#fffaf3; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #endSession{ background:#963f37 !important; color:#fff7f2; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #endSession:hover{ background:#ad4b42 !important; color:#fff; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #resumeBody > button:first-child,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #ntNew,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #nameModalOk,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #connWait{ background:#6f563d !important; color:#f8f1e7 !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #pauseSession,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #recapEnd,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #endNow{ background:#6f563d !important; color:#f8f1e7 !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #pauseSession:hover,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #recapEnd:hover,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #endNow:hover{ background:#80664b !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #endCancel{ background:transparent !important; border-color:#bba68d !important; color:#6f563d !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #endCancel:hover{ background:rgba(111,86,61,.08) !important; color:#59432f !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #attachMenu .ico{ background:#765b40 !important; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #chat{
width:min(630px,92vw); margin-top:-8px; border-color:rgba(176,158,136,.48); border-radius:8px;
background:rgba(248,244,237,.86) !important; box-shadow:0 8px 22px rgba(72,58,43,.16);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) #log{ color:#50463c; font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #sharebar textarea{
background:rgba(252,249,244,.68); border-color:#d6cbbc; color:#443b33; border-radius:8px;
box-shadow:inset 0 1px 3px rgba(73,58,43,.04);
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) #shareBtn{ background:#ad9777; border-color:#ad9777; color:#fffaf3; border-radius:9px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #shareBtn:hover{ background:#927b5b; border-color:#927b5b; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #plusBtn{ background:#40382f; border-color:#40382f; color:#f8f2e9; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #plusBtn:hover{ background:#51463b; border-color:#51463b; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #attachMenu,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #acctMenu,
html:is(.tenant-rh,.theme-preset-gallery-luxury) #langMenu{ box-shadow:0 14px 34px rgba(68,54,40,.20); }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #tenantGate{ background:rgba(235,227,216,.76); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #tenantGate .tenant-gate-card{
border-color:rgba(176,158,136,.54); background:rgba(248,244,237,.92) !important;
box-shadow:0 20px 55px rgba(68,54,40,.18);
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) #tenantGate #tgGo{ background:#3b342d; color:#f5eee4; border-radius:7px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #tenantGate #tgGo:hover{ background:#4a4036; }
@media(max-width:600px){
html:is(.tenant-rh,.theme-preset-gallery-luxury)[data-theme="light"] body{
background-image:linear-gradient(rgba(244,238,229,.72),rgba(235,226,215,.66)),var(--tenant-background-image,none);
background-position:38% center; background-attachment:scroll;
}
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar .brandcopy{ gap:8px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) #topbar h1{ font-size:41px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .rh-brand-subtitle{ font-size:9px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .pod{ gap:5px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury) .reg{ flex-basis:clamp(72px,27vw,96px); width:clamp(72px,27vw,96px); min-width:72px; padding-inline:3px; }
html:is(.tenant-rh,.theme-preset-gallery-luxury)[data-theme="light"] .rolelabel{ height:48px; padding:5px 2px 8px; font-size:10px; line-height:1.25; }
}
/* Huddle Luxe: the warm gallery atmosphere rebuilt on the standard Huddle Speak UI. It deliberately
inherits the original type, title/logo, advisor hues, VU illumination, and control-button colours. */
html.theme-preset-huddle-luxe{
--bg:#eee5da; --surface:#fbf7f1; --surface-2:#f2e9de; --board:#fffaf4;
--body-bg-glow:#ead7c2; --body-bg-fade:#d2baa033; --body-bg-base:#f3eadf;
--dialog-gradient:linear-gradient(160deg,#fffaf4 0%,#f5ecdf 52%,#e5d4c1 100%);
--control-gradient:linear-gradient(160deg,#fffaf4 0%,#eee1d2 100%);
--chat-gradient:linear-gradient(160deg,rgba(255,250,244,.94) 0%,rgba(245,236,223,.94) 58%,rgba(226,210,192,.94) 100%);
--resume-row-bg:linear-gradient(135deg,#fffaf4 0%,#f4eadc 58%,#e8d8c6 100%);
--resume-row-hover:linear-gradient(135deg,#fffdf9 0%,#efe1d1 54%,#dfcbb5 100%);
--ink:#2f2924; --text:#352e28; --text-2:#4b4036; --muted:#77695b; --muted-2:#5f5144; --log-ink:#493e34;
--border:#ccbba8; --border-soft:#dfd1c2; --border-2:#aa9074; --focus:#a87d57;
--seg:#e2d8cd; --kitt:#d9c9b8; --name-ink:#352a20; --role-ink:#6e5843; --placeholder-ink:#9a826c;
}
html.theme-preset-huddle-luxe body{
background:
radial-gradient(900px 520px at 50% 0%,rgba(234,215,194,.82) 0%,rgba(210,186,160,.16) 72%),
var(--tenant-background-image,none) center/cover fixed;
background-color:var(--body-bg-base);
}
html.theme-preset-huddle-luxe #bgfx{ display:block; opacity:.88; }
html.theme-preset-huddle-luxe #ttsbar button.barbtn{
border-color:#e7d7bd; background:linear-gradient(180deg,#fffefa 0%,#fff9ee 100%); color:#776d56;
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);
}
html.theme-preset-huddle-luxe #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;
}
/* Replace the standard light meter's white-to-blue rectangle. The warm housing lives on the
already feather-masked ::before layer, so it dissolves into the advisor frame without a seam. */
html.theme-preset-huddle-luxe .meter{ background:transparent; }
html.theme-preset-huddle-luxe .meter::before{
background:linear-gradient(90deg,rgba(211,191,168,.10) 0%,rgba(255,249,240,.48) 48%,rgba(198,170,139,.20) 100%);
box-shadow:inset 0 0 14px rgba(139,104,72,.11),0 0 7px rgba(139,104,72,.04);
}
html.theme-preset-huddle-luxe .meter::after{
background:radial-gradient(88% 44% at 50% 50%,rgba(var(--c),.38) 0%,rgba(var(--c),.10) 46%,rgba(var(--c),0) 72%);
opacity:calc(var(--glow) * .34);
}
html.theme-preset-huddle-luxe #topbar .logo{ display:block; }
html.theme-preset-huddle-luxe #topbar h1{
font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
font-size:clamp(13px,2.3vw,19px); font-weight:700; line-height:normal;
letter-spacing:.26em; padding-left:.26em; color:var(--text);
}
html.theme-preset-huddle-luxe .name,
html.theme-preset-huddle-luxe .status,
html.theme-preset-huddle-luxe #log,
html.theme-preset-huddle-luxe #start .startlbl{ font-family:-apple-system,"Segoe UI",Roboto,sans-serif; }
/* Main Huddle backdrop. Tenant portals keep their independently branded backgrounds. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"]{
--huddle-dark-outline:#1b282e;
--huddle-dark-start-green:#00624b;
--huddle-dark-start-green-hover:#007a5d;
--huddle-dark-meeting-green:#0b7d63;
--huddle-dark-meeting-green-hover:#0d9275;
--huddle-dark-meeting-off-green:#3a6d58;
--huddle-dark-meeting-off-green-hover:#487e68;
--surface-2:#131d22;
--board:#0a1216;
--dialog-gradient:linear-gradient(160deg,#172126 0%,#0f181c 52%,#070c0f 100%);
--control-gradient:linear-gradient(160deg,#182228 0%,#0a1115 100%);
--chat-gradient:linear-gradient(160deg,#141e23 0%,#0d161a 52%,#050a0d 100%);
--resume-row-bg:linear-gradient(135deg,#1b272c 0%,#121c21 56%,#0b1317 100%);
--resume-row-hover:linear-gradient(135deg,#253239 0%,#19252a 54%,#10191e 100%);
}
html:is(.tenant-madimensions,.tenant-homedepot)[data-theme="dark"]{
--surface:#11141b !important;
--surface-2:#131d22 !important;
--board:#0a1216 !important;
--ink:#edeef1 !important;
--text:#cdd0d6 !important;
--text-2:#c4c8cf !important;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] body{
background-color:#060d0f;
background-image:var(--tenant-background-image,url("HuddleBackgroundDark.webp?v=1"));
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #bgfx{ display:none; }
/* Borderless dark-theme VU silhouette: remove the advisor-hue housing bloom and
use the existing shadow-only SVG layer for depth instead of an outline. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .meter::before{
background:transparent;
box-shadow:none;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .advisor-frame,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .reg.active .advisor-frame,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .reg.onbreak .advisor-frame{
filter:none;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .advisor-frame-glow{ display:none; }
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .advisor-frame-shadow{
display:block;
-webkit-mask:none;
mask:none;
opacity:1;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .advisor-frame feFlood:first-of-type{
flood-color:#000;
flood-opacity:.56;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .advisor-frame feFlood:last-of-type{
flood-color:#000;
flood-opacity:.38;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] .advisor-frame-line{
stroke:none;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #chat,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #langCorner :is(#langBtn,#subLangBtn),
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #topbar #acctBtn{
border-color:var(--huddle-dark-outline);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #log,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #sharebar textarea{
border-color:var(--huddle-dark-outline);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #ttsbar button.barbtn{
border-color:var(--dark-bottom-control-border);
background:var(--dark-bottom-control);
color:var(--dark-bottom-control-ink);
box-shadow:0 6px 14px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #ttsbar button.barbtn:hover{
border-color:var(--dark-bottom-control-border);
background:var(--dark-bottom-control-hover);
color:var(--dark-bottom-control-ink);
box-shadow:0 8px 18px rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);
}
/* Restore the original dark meeting palette. Keep the glossy layer while each
control and state owns its established green base color. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #start,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #mute,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #modeBtn{
background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.02) 46%,rgba(0,0,0,.12) 100%) !important;
color:#eaf0f7;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #start{
background-color:var(--huddle-dark-start-green);
border-color:var(--huddle-dark-start-green);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #start:hover{
background-color:var(--huddle-dark-start-green-hover);
border-color:var(--huddle-dark-start-green-hover);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #mute,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #modeBtn{
background-color:var(--huddle-dark-meeting-green);
border-color:var(--huddle-dark-meeting-green);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #mute:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #modeBtn:hover{
background-color:var(--huddle-dark-meeting-green-hover);
border-color:var(--huddle-dark-meeting-green-hover);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #mute.muted,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #modeBtn.texton{
background-color:var(--huddle-dark-meeting-off-green);
border-color:var(--huddle-dark-meeting-off-green);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #mute.muted:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] #modeBtn.texton:hover{
background-color:var(--huddle-dark-meeting-off-green-hover);
border-color:var(--huddle-dark-meeting-off-green-hover);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"]{
--huddle-light-outline:#f5f1ea;
--huddle-meeting-green:#3d7b50;
--huddle-meeting-green-hover:#498b5d;
--huddle-meeting-green-border:#7abc8e;
--huddle-action-green:#54a46d;
--huddle-action-green-hover:#63b47d;
--huddle-action-green-rgb:84,164,109;
--surface-2:#f4eee5;
--board:#fbf7ef;
--dialog-gradient:linear-gradient(160deg,#fbf6ed 0%,#f6efe4 52%,#eadfce 100%);
--control-gradient:linear-gradient(160deg,#fbf6ed 0%,#eee4d5 100%);
--chat-gradient:linear-gradient(160deg,#fbf6ed 0%,#f6efe4 52%,#eadfce 100%);
--resume-row-bg:linear-gradient(135deg,#fcf8f1 0%,#f3eadf 58%,#e9ddce 100%);
--resume-row-hover:linear-gradient(135deg,#faf3e8 0%,#ede2d4 52%,#dfd0bf 100%);
}
/* Standard branded tenants may carry legacy tenant-level surface/ink values. The complete current
Huddle light theme owns these tokens, so it must beat the inline tenant palette as well. */
html:is(.tenant-madimensions,.tenant-homedepot)[data-theme="light"]{
--surface:#ffffff !important;
--surface-2:#f4eee5 !important;
--board:#fbf7ef !important;
--ink:#1b1e22 !important;
--text:#20242a !important;
--text-2:#353a42 !important;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] body{
background-color:#f5f1ea;
background-image:var(--tenant-background-image,url("HuddleBackgroundLight.webp?v=1"));
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #bgfx{ display:none; }
/* Light-theme VU: retain every advisor's hue, but remove the glass housing and luminous
depth effects so the vertical readout sits flat on the page like the RH treatment. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .meter::before{
background:transparent;
box-shadow:none;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .meter::after{ display:none; }
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .meter .seg{ box-shadow:none !important; }
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .meter .snum{ text-shadow:none !important; }
/* Match RH's flat outer advisor silhouette without taking RH's single neutral VU hue. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .advisor-frame{
z-index:0;
filter:drop-shadow(0 8px 12px rgba(76,62,46,.3));
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .advisor-frame-shadow{
display:block;
fill:#eeece9;
opacity:1;
filter:none;
-webkit-mask:none;
mask:none;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .advisor-frame-line{
stroke:var(--huddle-light-outline);
stroke-width:1.4;
vector-effect:non-scaling-stroke;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .advisor-frame-glow{ display:none; }
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .advisor-frame-tower-fill{
display:block;
fill:#eeece9;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .advisor-frame-tower-line{
display:block;
fill:none;
stroke:var(--huddle-light-outline);
stroke-width:1.4;
vector-effect:non-scaling-stroke;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #setup select,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #setup input{
border-color:var(--huddle-light-outline);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #setup .grp{
background:#eeece9;
border-color:var(--huddle-light-outline);
box-shadow:0 5px 16px rgba(75,61,45,.06);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #setup select:focus,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #setup input:focus{
border-color:#d5c3aa;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #chat{
border-color:var(--huddle-light-outline);
border-radius:8px;
box-shadow:0 8px 22px rgba(72,58,43,.16);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #log{ border-bottom-color:var(--huddle-light-outline); }
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #sharebar textarea{
background:rgba(252,249,244,.68);
border-color:var(--huddle-light-outline);
color:#443b33;
border-radius:8px;
box-shadow:inset 0 1px 3px rgba(73,58,43,.04);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #langCorner :is(#langBtn,#subLangBtn),
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #topbar #acctBtn{
background:rgba(246,241,233,.68) !important;
border-color:var(--huddle-light-outline);
color:#5b5147;
border-radius:9px;
box-shadow:0 5px 16px rgba(75,61,45,.06);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #langCorner #langBtn .langGlobe{
background:rgba(226,217,205,.72);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #ttsbar .bardiv{
background:var(--huddle-light-outline);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #ttsbar button.barbtn{
border-color:var(--huddle-light-outline);
background:linear-gradient(180deg,#fbf6ed 0%,#eee4d5 100%);
color:#776d56;
box-shadow:0 6px 14px rgba(75,61,45,.22),0 2px 4px rgba(75,61,45,.16),inset 0 1px 0 rgba(255,255,255,.95);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #ttsbar button.barbtn:hover{
border-color:#d8c6ad;
background:linear-gradient(180deg,#fffaf3 0%,#e8dccd 100%);
color:#6b5b47;
box-shadow:0 8px 18px rgba(75,61,45,.26),0 3px 5px rgba(75,61,45,.18),inset 0 1px 0 #fff;
}
/* In light mode, advisor mute buttons share the bottom utility buttons' warm fill. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .reg > .toggle{
background:linear-gradient(180deg,#fbf6ed 0%,#eee4d5 100%);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .reg > .toggle:hover{
background:linear-gradient(180deg,#fffaf3 0%,#e8dccd 100%);
}
/* In the main light theme, keep the original green meeting controls. Dark mode uses the neutral palette above. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #start,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #mute,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #mute.muted,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #modeBtn,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #modeBtn.texton{
background-color:var(--huddle-meeting-green) !important;
background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.02) 46%,rgba(0,0,0,.12) 100%) !important;
border:1px solid var(--huddle-meeting-green-border) !important;
color:#eaf0f7;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #start:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #mute:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #mute.muted:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #modeBtn:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #modeBtn.texton:hover{
background-color:var(--huddle-meeting-green-hover) !important;
border-color:var(--huddle-meeting-green-border) !important;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #start:focus-visible,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #mute:focus-visible,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #modeBtn:focus-visible{
outline:2px solid var(--huddle-meeting-green-border);
outline-offset:2px;
}
/* One action green across the remaining main light-theme actions. */
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #tenantGate #tgGo,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] button.cat-file:not(.recording),
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #shareBtn,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #topbar #recMenu button.sel,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .fbrow.sel,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #bookConfirm,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #presetSaveOk,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #learnSave,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #uploadConfirmOk,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #deckConfirmOk,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #fbOpen,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #renameSave,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] [data-act="phone"] .ico{
background-color:var(--huddle-action-green) !important;
border-color:var(--huddle-action-green) !important;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #tenantGate #tgGo:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] button.cat-file:not(.recording):hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #shareBtn:hover{
background-color:var(--huddle-action-green-hover) !important;
border-color:var(--huddle-action-green-hover) !important;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] #topbar #recMenu button:not(.sel),
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .srcrow .srchint.chosen{
color:var(--huddle-action-green);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .srcrow:hover,
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .mkfmt:hover{
border-color:var(--huddle-action-green);
background:rgba(var(--huddle-action-green-rgb),.09);
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] .hspinner{ border-top-color:var(--huddle-action-green); }
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] input[type="radio"]{ accent-color:var(--huddle-action-green) !important; }
@media(max-width:600px){
html:not(.tenant-portal):is([data-theme="light"],[data-theme="dark"]) body,
html:is(.tenant-madimensions,.tenant-homedepot):is([data-theme="light"],[data-theme="dark"]) body{
background-position:72% center;
background-attachment:scroll;
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="dark"] body{
background-image:linear-gradient(rgba(6,13,15,.24),rgba(6,13,15,.24)),var(--tenant-background-image,url("HuddleBackgroundDark.webp?v=1"));
}
html:is(:not(.tenant-portal),.tenant-madimensions,.tenant-homedepot)[data-theme="light"] body{
background-image:linear-gradient(rgba(245,241,234,.20),rgba(245,241,234,.20)),var(--tenant-background-image,url("HuddleBackgroundLight.webp?v=1"));
}
}
/* Home Depot uses the complete current Main Huddle theme above. Only its brand accents
remain tenant-specific; the underlying cards, backdrop, VU meters and controls stay shared. */
html.tenant-homedepot #topbar h1{
color:#f96302; font-weight:850; letter-spacing:-.025em;
}
html.tenant-homedepot #tenantGate .tenant-gate-company{ color:#d94f00; font-weight:700; }
html.tenant-homedepot #start,
html.tenant-homedepot #tenantGate #tgGo,
html.tenant-homedepot #shareBtn{
background:#f96302 !important; border-color:#d94f00 !important; color:#fff !important;
}
html.tenant-homedepot #start:hover,
html.tenant-homedepot #tenantGate #tgGo:hover,
html.tenant-homedepot #shareBtn:hover{
background:#df5700 !important; border-color:#c34c00 !important; color:#fff !important;
}
html.tenant-homedepot #start:focus-visible,
html.tenant-homedepot #tenantGate #tgGo:focus-visible,
html.tenant-homedepot #shareBtn:focus-visible{
outline:3px solid rgba(249,99,2,.34); outline-offset:3px;
}
/* Main / secondary language split pill. */
#langCorner #langBtn{width:auto;min-width:78px;border-radius:8px 0 0 8px !important;padding:4px 10px 4px 5px;height:32px;}
#langCorner #subLangBtn{display:flex;align-items:center;gap:7px;height:32px;margin-left:-1px;padding:4px 11px;border:1px solid var(--border);border-radius:0 8px 8px 0 !important;background:var(--control-gradient);color:#776d56;font-size:13px;cursor:pointer;text-transform:none;letter-spacing:0;}
#langCorner #subLangBtn:hover{border-color:var(--border-2);}
#langCorner #subLangBtn{position:relative;}
#langCorner #subLangBtn::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:currentColor;opacity:.24;pointer-events:none;}
html[data-theme="dark"] #langCorner #subLangBtn{color:#c6bfa9;}
#langCorner button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
#langCorner #langMenu button[aria-selected="true"]{background:var(--surface-2);color:var(--text);font-weight:600;}