/* AISearch Intelli Voice: layer 2 (master brief, 9 Nov 2026). Loads AFTER states.css and charts-metal.css.
   Protected and untouched here: the approved sage dial (#A6D1C0 in metal/charts-metal.js), the silver Rick and Dani silhouettes (their SVG gradients),
   the globe image and the approved metal geometry. Everything below is layout, material wrappers, and the new components. */

:root{
  /* liquid-metal specification, used on the orb ring only */
  --lm-0:#0d3d2e;--lm-35:#1a7a4c;--lm-65:#2d9e66;--lm-100:#0a2e22;
  --lm-depth:0 8px 32px rgba(0,0,0,.4);
  /* softened status accents (brief section 8): progress bars, status indicators, ticks only */
  --st-red:#B87C7A;--st-gold:#B6A16D;--st-bronze:#A88973;--st-pass:#3f9a8a;--st-grey:#8b9193;
  --lv:0;
}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html,body{overflow-x:clip}

/* ---------- panels: 8px edges, translucent frosted glass (no whole-element opacity) ---------- */
.glass,.card,.notice,.transcript,.app[data-mode="board"] .stage,.prompt-menu[open],.voice-audio-panel,.case-dialog{
  border-radius:8px!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .34 0 0 0 0 .34 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E") 0 0/180px 180px,
    linear-gradient(155deg,rgba(250,252,252,.56),rgba(222,231,229,.32) 52%,rgba(244,248,247,.48))!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.2)!important;backdrop-filter:blur(24px) saturate(1.2)!important}
.transcript{border-radius:8px!important;background:
    linear-gradient(155deg,rgba(247,250,250,.80),rgba(232,239,238,.72))!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.15)!important;backdrop-filter:blur(30px) saturate(1.15)!important}
.card.hl{background:linear-gradient(155deg,rgba(255,255,255,.74),rgba(240,246,245,.52))!important}
@media (prefers-reduced-transparency:reduce){.glass,.card,.notice,.transcript,.app[data-mode="board"] .stage,.prompt-menu[open],.voice-audio-panel,.case-dialog{background:rgba(247,249,249,.98)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ---------- the two waves: the approved ribbon image, twice ---------- */
.ribbon{position:fixed;pointer-events:none;user-select:none;z-index:0;height:auto}
/* upper wave: enters at the top beneath the title, then swoops down the left side to the lower part of the page, clear of the orb */
.ribbon-up{display:block;left:-47vw;top:-10vh;width:120vw;max-width:none;opacity:.9;transform:rotate(58deg) scaleY(-1);transform-origin:50% 50%}
.ribbon-low{display:block;right:-14vw;bottom:-5vh;width:66vw;max-width:none;opacity:.8}
@media (max-width:760px){.ribbon-up{left:-92vw;top:2vh;width:200vw}.ribbon-low{right:-40vw;bottom:-3vh;width:120vw}}
@media (forced-colors:active){.ribbon{display:none}}

/* ---------- orb: the approved globe, plus a liquid-metal ring that shows only while the voice is really active ---------- */
.orbwrap{position:relative}
.globe{transform:scale(calc(1 + var(--lv) * .045));transform-origin:50% 50%;transition:transform .12s linear}
.orb-metal{position:absolute;left:7.235%;top:5.85%;width:85.5%;height:85.5%;border-radius:50%!important;transform:scale(1.045);pointer-events:none;
  box-shadow:var(--lm-depth);opacity:0;transition:opacity .45s ease}
.orb-metal i{position:absolute;inset:0;display:block;border-radius:50%!important;overflow:hidden;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
.om-body{background:linear-gradient(135deg,var(--lm-0) 0%,var(--lm-35) 35%,var(--lm-65) 65%,var(--lm-100) 100%)}
.om-noise{opacity:.04;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E") 0 0/200px 200px}
.om-spec{background:radial-gradient(circle at 22% 22%,rgba(255,255,255,.35),rgba(255,255,255,0) 22%);filter:blur(6px);transform:translate(-3px,-3px)}
.om-ref{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);animation:om-rot 4s ease-in-out infinite;animation-play-state:paused}
@keyframes om-rot{from{transform:rotate(120deg)}to{transform:rotate(480deg)}}
.app[data-state="listening"] .orb-metal,.app[data-state="speaking"] .orb-metal,.app[data-state="thinking"] .orb-metal{opacity:1}
.app[data-state="listening"] .om-ref,.app[data-state="speaking"] .om-ref,.app[data-state="thinking"] .om-ref{animation-play-state:running}
/* listening: the globe breathes and ripples spread from it; both start only when the recognizer has really started */
.orbwrap::before,.orbwrap::after{content:"";position:absolute;left:7.235%;top:5.85%;width:85.5%;height:85.5%;border-radius:50%!important;border:1.5px solid rgba(45,158,102,.45);opacity:0;pointer-events:none}
.app[data-state="listening"] .orbwrap::before{animation:orb-ripple 2.6s ease-out infinite}
.app[data-state="listening"] .orbwrap::after{animation:orb-ripple 2.6s ease-out 1.3s infinite}
@keyframes orb-ripple{0%{opacity:.7;transform:scale(1.04)}100%{opacity:0;transform:scale(1.34)}}
.app[data-state="listening"] .globe{animation:orb-breathe 2.8s ease-in-out infinite}
@keyframes orb-breathe{0%,100%{transform:scale(calc(1 + var(--lv) * .045))}50%{transform:scale(calc(1.018 + var(--lv) * .045))}}
.app[data-state="listening"] .glow{opacity:.75}
@media (prefers-reduced-motion:reduce){
  .om-ref,.app[data-state="listening"] .globe,.app[data-state="listening"] .orbwrap::before,.app[data-state="listening"] .orbwrap::after{animation:none!important}
  .globe{transition:none;transform:none}
  .app[data-state="listening"] .orbwrap::before{opacity:.55;transform:scale(1.1)}
}

/* ---------- landing: one large orb at the top centre, mic directly below it, nothing else competing ---------- */
.app[data-mode="home"]{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.app[data-mode="home"] .stage{flex:1 1 auto;justify-content:flex-start;padding-top:2px;gap:8px}
.app[data-mode="home"] .orbwrap{--w:clamp(250px,40vh,380px);margin-bottom:26px}
.app[data-mode="home"] .stagetext{gap:12px}
.app[data-mode="home"] #welcome{font-size:clamp(22px,2.6vw,30px);font-weight:300;max-width:24em;line-height:1.3;margin:0}
.app[data-mode="home"] .prompt-menu,.app[data-mode="home"] .voicehint:empty{display:none!important}
.app[data-mode="home"] .voicehint{margin:0}
@media (max-width:600px){.app[data-mode="home"] .orbwrap{--w:min(78vw,300px);margin-bottom:20px}}

/* side-panel layout (listening has really started, or an answer is on screen): greeting is kept for screen readers only */
.app[data-mode="board"] #welcome{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app[data-mode="board"] .prompt-menu{order:99;margin-top:14px}

/* ---------- bare silver mirror-metal icons: no frame, no box ---------- */
.ibtn.bare,.topctl .ibtn,.cact button,.boardctl .ibtn,.bare-transport,.calnav .ibtn,.case-dialog .ibtn,.audio-action{
  background:none!important;background-image:none!important;border:0!important;border-image:none!important;box-shadow:none!important;text-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:#2B3033!important;min-width:44px;min-height:44px;padding:8px;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transform:none!important}
.ibtn.bare::before,.topctl .ibtn::before,.cact button::before,.boardctl .ibtn::before,.bare-transport::before,.calnav .ibtn::before,.case-dialog .ibtn::before,.audio-action::before,
.ibtn.bare::after,.topctl .ibtn::after,.bare-transport::after{content:none!important;display:none!important}
.ibtn.bare svg [fill="currentColor"],.topctl .ibtn svg [fill="currentColor"],.cact button svg [fill="currentColor"],.bare-transport svg [fill="currentColor"],.audio-action svg [fill="currentColor"]{fill:url(#vdSilver)}
.ibtn.bare svg [stroke="currentColor"],.topctl .ibtn svg [stroke="currentColor"],.cact button svg [stroke="currentColor"],.bare-transport svg [stroke="currentColor"],.audio-action svg [stroke="currentColor"],.calnav svg [stroke="currentColor"]{stroke:url(#vdSilver)}
.app[data-mode] .bare-transport svg path[fill="currentColor"],.app[data-mode] .bare-transport svg rect[fill="currentColor"],.app[data-mode] .voice-settings svg path:first-child{fill:url(#vdSilver)!important}   /* the controls stay silver; only the two people are gold */
.voice-settings svg path:first-child{fill:url(#vdSilver)}
.voice-settings svg path:last-child{stroke:url(#vdSilver)}
/* glossy at rest, matte when on: the material changes, not a surrounding box */
.ibtn.bare svg,.topctl .ibtn svg,.cact button svg,.bare-transport svg,.audio-action svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 2px 2px rgba(52,58,60,.40));transition:filter .2s ease}
.ibtn[aria-pressed="true"] svg,.ibtn[aria-expanded="true"] svg,.cact button[aria-pressed="true"] svg,.bare-transport[aria-pressed="true"] svg,.bare-transport[aria-expanded="true"] svg{filter:contrast(.62) saturate(0) drop-shadow(0 1px 1px rgba(52,58,60,.30))}
.ibtn:disabled{opacity:.45}
.ibtn:disabled svg{filter:contrast(.6) saturate(0)}
.cact{display:flex;gap:0;margin-left:auto}
.chead{display:flex;justify-content:flex-end;min-height:0;margin:0 0 -6px}
.cact button{min-width:36px;min-height:36px;padding:6px}
.cact button svg{width:16px;height:16px}
.audio-action span{font-size:13px;color:#2B3033}

/* ---------- one voice control: mic, its state, and the reply settings ---------- */
.voice-control .status{grid-column:1/-1;margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;font-size:12px;line-height:16px;color:var(--mute);min-height:16px;white-space:nowrap;text-align:center;display:block!important}
.voice-control .status::before{display:none}
.app[data-state="error"] .voice-control .status{color:#9B2C2C}

/* settings panel (popover): output mute and volume belong to spoken replies, not to the microphone */
.voice-audio-panel{position:fixed;margin:0;width:min(280px,calc(100vw - 16px));padding:10px;color:#2B3033;overflow:visible;border:0}
.voice-audio-panel:not([hidden]){display:flex;flex-direction:column;gap:4px}
.voice-audio-panel[hidden]{display:none!important}
.voice-audio-panel .audio-action{width:100%;justify-content:flex-start;min-height:44px}
.audio-vol{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 8px;font-size:13px}
.audio-vol[hidden]{display:none}
.audio-vol input{flex:1;min-width:0;accent-color:#3f9a8a;height:28px}

/* ---------- Rick and Dani: bare silver silhouettes, names beneath ---------- */
.app[data-mode] .voices{display:flex;justify-content:center;gap:clamp(16px,4vw,40px);background:none;border:0;box-shadow:none;padding:0;margin:4px 0 0}
.app[data-mode] .vopt{--person-finish:1;flex-direction:column;gap:6px;width:96px;min-width:96px;min-height:116px;padding:8px 6px;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;text-shadow:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-start}
.app[data-mode] .vopt .voice-person{width:88px;height:88px;object-fit:contain;filter:none;pointer-events:none;-webkit-user-drag:none;user-select:none}
.app[data-mode] .vopt .p-matte{display:none}
.app[data-mode] .vopt[aria-checked="true"] .p-gloss{display:none}
.app[data-mode] .vopt[aria-checked="true"] .p-matte{display:block}
.app[data-mode] .vopt span{font-size:14px;font-weight:500;color:var(--mute);letter-spacing:.01em}
.app[data-mode] .vopt[aria-checked="true"] span{color:#2B3033}
/* glossy (unselected): full reflection fields.  matte (selected): the highlights are removed and the contrast is flattened. */
.app[data-mode] .vopt[aria-checked="true"]{--person-finish:.6}
.app[data-mode] .vopt:focus-visible{outline:1px solid #5C6266!important;outline-offset:2px!important}
.app[data-mode] .vopt:active{--person-finish:.7}
@media(hover:hover){.app[data-mode] .vopt:hover:not([aria-checked="true"]){--person-finish:.88}}

/* ---------- result cards: title and visual only ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px;align-items:stretch}
.app[data-mode] .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.card{display:flex;flex-direction:column}
.card h3{margin:0 0 12px}
.card .gfx{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}
.card .more{margin-top:12px}
.boardctl{display:flex;gap:4px;justify-content:flex-end}
.boardbar{display:flex;justify-content:flex-end;margin-bottom:4px}

/* evenly spaced legend: equal columns, shape plus colour plus count */
.legend{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;list-style:none;margin:14px 0 0;padding:0;width:100%}
.lg{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:11px;line-height:1.25;color:var(--mute)}
.lg b{font-size:15px;font-weight:500;color:#2B3033}
.lg .sw{display:block;width:12px;height:12px;border:1px solid rgba(11,13,14,.55)}
.lg.p .sw{background:var(--st-pass);border-radius:50%!important}
.lg.q .sw{background:var(--st-gold);clip-path:polygon(50% 0,100% 100%,0 100%);border:0}
.lg.f .sw{background:var(--st-red)}
.lg.n .sw{background:var(--st-bronze);transform:rotate(45deg) scale(.82)}
.lg.u .sw{background:none;border:2px dashed var(--st-grey);border-radius:50%!important}
.segbox{width:100%}

/* ticks: unmistakable glyphs.  A tick = named us, a cross = did not, a dashed ring = not counted. */
.tk{stroke:#0d3d2e}
.xg{stroke:rgba(11,13,14,.66)}
.gfx-svg .dot circle[fill="rgba(255,255,255,.7)"]{fill:rgba(255,255,255,.62)}
/* the bead discs are softened (lighter, less reflective) so they sit calmly beside the sage dials; the dark tick on them stays unmistakable (about 6:1) */
.mlayer.beads{filter:brightness(1.7) saturate(.6) contrast(.8)}

/* ---------- extra chart types (all from the saved results) ---------- */
.extras{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.xgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px;align-items:stretch}
.x-wide{grid-column:1/-1}
@media(min-width:900px){.x-wide{grid-column:span 2}}
.xcard .gfx{min-height:150px}
.donutbox{position:relative;width:148px;height:148px}
.donut{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.donut circle{fill:none;stroke-width:9;stroke-linecap:butt}
.d-p{stroke:var(--st-pass)}.d-q{stroke:var(--st-gold)}.d-f{stroke:var(--st-red)}.d-n{stroke:var(--st-bronze)}.d-u{stroke:var(--st-grey)}
.donutbox .rnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.donutbox .rnum b{font-size:30px;font-weight:300;color:#2B3033;line-height:1}
.donutbox .rnum span{font-size:11px;color:var(--mute)}
.bars,.wheel{width:100%;max-width:340px;height:auto}
.bar{fill:#89bfae;stroke:#3f9a8a;stroke-width:1}
.bars .pv{font-size:11px;fill:#2B3033;font-weight:500}
.bars .px{font-size:10px;fill:#4D5153}
.wheel{max-width:230px}
.wd{stroke:rgba(11,13,14,.45);stroke-width:1}
.w-y{fill:#a6d1c0}
.w-n{fill:rgba(255,255,255,.6)}
.w-x{fill:none;stroke-dasharray:3 3}
.wheel .dl{font-size:9px;fill:#4D5153}

/* ---------- audit calendar ---------- */
.calwrap{display:block}
.cal{display:block}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.calhead h3{margin:0}
.calnav{display:flex;align-items:center;gap:2px}
.calmonth{min-width:8.5em;text-align:center;font-size:14px;color:#2B3033}
.caltab{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:3px;text-align:center}
.caltab th{font-size:11px;font-weight:500;color:var(--mute);padding:4px 0}
.caltab td{height:40px;vertical-align:middle;font-size:13px;color:#2B3033;background:rgba(255,255,255,.28);border-radius:4px!important;position:relative}
.caltab td.e{background:none}
.caltab td.has{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(4,122,118,.28)}
.mks{display:flex;gap:3px;justify-content:center;margin-top:2px}
.mk{display:inline-block;width:8px;height:8px;background:#047A76}
.k-audit{border-radius:50%!important}
.k-plain{transform:rotate(45deg) scale(.82);background:#0d3d2e}
.k-toolkit{background:#3f9a8a}
.k-sov{clip-path:polygon(50% 0,100% 100%,0 100%);background:#1a7a4c}
.cal-legend{grid-template-columns:repeat(4,1fr);margin-top:12px}
.cal-legend .lg{flex-direction:column}

/* ---------- next-step cards ---------- */
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;margin:20px 0 0}
.options[hidden]{display:none}
.card.opt{justify-content:flex-start;gap:8px;padding-top:20px;padding-bottom:20px}
.card.opt h3{margin:0}
.card.opt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.card.opt a{color:var(--link);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0;min-height:32px}
.card.opt h3 a{color:#2B3033;text-decoration:none;font-weight:inherit;font-size:inherit;padding:0;min-height:0;display:inline}
.card.opt h3 a:hover{text-decoration:underline}

/* ---------- prompts disclosure at the bottom of the side panel ---------- */
.prompt-menu{width:100%;margin-top:12px;padding:0}
.prompt-menu summary{display:list-item;list-style-position:inside;cursor:pointer;min-height:44px;padding:10px 12px;font-size:13px;color:var(--mute);background:none!important;border:0!important;box-shadow:none!important;text-align:left}
.prompt-menu summary::before,.prompt-menu summary::after{content:none!important;display:none!important}
.prompt-menu[open]{padding:4px 8px 10px}
.prompt-menu[open] summary{color:#2B3033}
.app[data-mode] .prompt-menu .examples{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:6px 0 0;padding:0;list-style:none}
.app[data-mode] .prompt-menu .chipbtn{width:100%;justify-content:flex-start;text-align:left;min-height:40px;background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;color:#2B3033!important}
.app[data-mode] .prompt-menu .chipbtn::before{display:none}
.app[data-mode] .prompt-menu .chipbtn:hover,.app[data-mode] .prompt-menu .chipbtn:focus-visible{background:rgba(255,255,255,.5)!important}

/* ---------- footer: land acknowledgement, privacy, Journey link, credit ---------- */
.foot{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:720px;margin:20px auto 0;padding:8px 12px 24px}
.foot .ack{margin:0;font-size:12.5px;line-height:1.6;color:var(--mute);max-width:54ch}
.foot .foot-links{margin:0}
.foot .foot-links a{color:var(--mute);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;padding:8px 6px;display:inline-block}
.foot .result-notes{max-width:62ch;font-size:12.5px;color:var(--mute)}
.foot .result-notes summary{cursor:pointer;min-height:32px;padding:6px;text-align:center}
.foot #credit{margin:0;font-size:12.5px;color:var(--mute)}
.app[data-mode="board"] .foot{grid-area:foot}

/* ---------- case study dialog ("on the static site") ---------- */
.case-dialog{position:fixed;inset:0;margin:auto;max-width:min(420px,calc(100vw - 32px));padding:24px 28px;color:#2B3033;border:0}
.case-dialog::backdrop{background:rgba(40,46,48,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.case-dialog h2{margin:0 0 12px;font-weight:300;font-size:22px}
.case-dialog p{margin:0 0 4px}
.case-dialog a{color:var(--link);text-decoration:underline;text-underline-offset:3px;padding:8px 0;display:inline-block}
.case-dialog .ibtn{position:absolute;top:4px;right:4px}

/* ---------- board layout (side panel) ---------- */
@media(min-width:900px){
  .app[data-mode="board"]{grid-template-areas:"top top" "perm perm" "stage board" "stage tscript" "foot foot"}
  .app[data-mode="board"] .board{min-width:0}
}
@media(max-width:600px){.legend{gap:2px}.lg{font-size:10px}.calhead{justify-content:center}}

/* ---------- 9 Nov 2026: nothing around the orb. The mic and the speaker sit in the text column, below the greeting, large, as chrome renders ---------- */
.voice-control{position:static!important;left:auto!important;top:auto!important;transform:none!important;display:grid;grid-template-columns:auto auto;gap:2px 22px;align-items:center;justify-items:center;justify-content:center;margin:8px 0 6px;z-index:2}
.app .voice-control .micbtn{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:104px!important;height:104px!important;min-width:104px;min-height:104px;padding:0!important;display:flex;align-items:center;justify-content:center}
.app[data-mode] .voice-control .voice-settings{position:relative!important;width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important;padding:0!important;display:flex;align-items:center;justify-content:center}
.voice-control .micbtn img,.voice-control .voice-settings img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 6px 5px rgba(52,58,60,.30));transition:filter .2s ease,transform .2s ease}
.voice-control .micbtn:active img,.voice-control .voice-settings:active img{transform:scale(.96)}
.voice-control .micbtn .i-stop{display:none}
[data-state="listening"] .voice-control .micbtn .i-mic,[data-state="speaking"] .voice-control .micbtn .i-mic,[data-state="thinking"] .voice-control .micbtn .i-mic{display:none}
[data-state="listening"] .voice-control .micbtn .i-stop,[data-state="speaking"] .voice-control .micbtn .i-stop,[data-state="thinking"] .voice-control .micbtn .i-stop{display:block}
.voice-control .voice-settings .sp-matte{display:none}
.voice-control .voice-settings[aria-expanded="true"] .sp-gloss{display:none}
.voice-control .voice-settings[aria-expanded="true"] .sp-matte{display:block}
.voice-control .status{margin-top:2px}
@media (max-width:600px){.app .voice-control .micbtn{width:92px!important;height:92px!important;min-width:92px;min-height:92px}.app[data-mode] .voice-control .voice-settings{width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important}}

/* side panel: the controls no longer hang under the orb, so the old reserve for them goes */
.app[data-mode="board"] .orbwrap{margin-bottom:12px}

/* ---------- 9 Nov 2026 (late): a frosted glass panel top right holds the mic, the speaker and the two toggles ---------- */
.topctl.glass{display:flex;align-items:center;gap:6px;padding:10px 16px 8px;border-radius:8px}
.topctl .ibtn{width:56px;height:56px;min-width:56px;min-height:56px;padding:0;display:flex;align-items:center;justify-content:center}
.topctl.glass .voice-control{margin:0 6px 0 0;gap:0 14px}
.topctl.glass .voice-control .status{margin-top:0}
.app .voice-control .micbtn{width:88px!important;height:88px!important;min-width:88px;min-height:88px}
.app[data-mode] .voice-control .voice-settings{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important}
.voice-control .micbtn .i-stop-m{display:none}
[data-state="listening"] .voice-control .micbtn .i-stop{display:none}
[data-state="listening"] .voice-control .micbtn .i-stop-m{display:block}
@media (max-width:600px){.app .voice-control .micbtn{width:80px!important;height:80px!important;min-width:80px;min-height:80px}.app[data-mode] .voice-control .voice-settings{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important}.topctl .ibtn{width:48px;height:48px;min-width:48px;min-height:48px}}

/* ---------- chrome images in the small buttons: gloss by default, matte when the button is selected ---------- */
.ic{display:block;width:30px;height:30px;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 4px 3px rgba(52,58,60,.32));transition:filter .2s ease}
.ic-m{display:none}
.ibtn[aria-pressed="true"] .ic-g,.ibtn[aria-expanded="true"] .ic-g,.cact button[aria-pressed="true"] .ic-g{display:none}
.ibtn[aria-pressed="true"] .ic-m,.ibtn[aria-expanded="true"] .ic-m,.cact button[aria-pressed="true"] .ic-m{display:block}
.topctl .ibtn .ic{width:38px;height:38px}
.cact button .ic{width:22px;height:22px}
.calnav .ibtn .ic{width:22px;height:22px}
.ibtn.bare.sm .ic{width:24px;height:24px}
.case-dialog .ibtn .ic{width:26px;height:26px}
.audio-action .ic{width:28px;height:28px;flex:none}
.voice-control .micbtn img,.voice-control .voice-settings img,.vopt .voice-person{filter:drop-shadow(0 6px 5px rgba(52,58,60,.32))}

/* ---------- a soft shadow and glow behind every icon button; selected = a brighter glow (and the matte image) ---------- */
.vopt:not(#case-dialog-close),.micbtn:not(#case-dialog-close),.voice-settings:not(#case-dialog-close),.topctl .ibtn:not(#case-dialog-close),.ibtn.bare:not(#case-dialog-close),.cact button:not(#case-dialog-close),.calnav .ibtn:not(#case-dialog-close),.audio-action:not(#case-dialog-close){position:relative;isolation:isolate}
.vopt,.micbtn,.voice-settings,.topctl .ibtn,.ibtn.bare,.cact button,.calnav .ibtn,.audio-action,#case-dialog-close{--glow:radial-gradient(ellipse 50% 30% at 50% 68%,rgba(52,58,60,.20),rgba(52,58,60,0) 72%),radial-gradient(circle closest-side,rgba(255,255,255,.5) 0%,rgba(236,246,241,.34) 48%,rgba(214,236,226,.14) 80%,rgba(214,236,226,0) 100%)}
.vopt[aria-checked="true"],.vopt[aria-pressed="true"],.vopt[aria-expanded="true"],.micbtn[aria-checked="true"],.micbtn[aria-pressed="true"],.micbtn[aria-expanded="true"],.voice-settings[aria-checked="true"],.voice-settings[aria-pressed="true"],.voice-settings[aria-expanded="true"],.topctl .ibtn[aria-checked="true"],.topctl .ibtn[aria-pressed="true"],.topctl .ibtn[aria-expanded="true"],.ibtn.bare[aria-checked="true"],.ibtn.bare[aria-pressed="true"],.ibtn.bare[aria-expanded="true"],.cact button[aria-checked="true"],.cact button[aria-pressed="true"],.cact button[aria-expanded="true"],.calnav .ibtn[aria-checked="true"],.calnav .ibtn[aria-pressed="true"],.calnav .ibtn[aria-expanded="true"],.audio-action[aria-checked="true"],.audio-action[aria-pressed="true"],.audio-action[aria-expanded="true"]{--glow:radial-gradient(ellipse 50% 30% at 50% 68%,rgba(52,58,60,.22),rgba(52,58,60,0) 72%),radial-gradient(circle closest-side,rgba(255,255,255,.62) 0%,rgba(255,255,255,.5) 37%,rgba(190,226,217,.30) 68%,rgba(190,226,217,.10) 90%,rgba(190,226,217,0) 100%)}
[data-state="listening"] .micbtn{--glow:radial-gradient(ellipse 50% 30% at 50% 68%,rgba(52,58,60,.22),rgba(52,58,60,0) 72%),radial-gradient(circle closest-side,rgba(255,255,255,.62) 0%,rgba(255,255,255,.5) 37%,rgba(190,226,217,.30) 68%,rgba(190,226,217,.10) 90%,rgba(190,226,217,0) 100%)}
.app[data-mode] .vopt::before,.app[data-mode] .micbtn::before,.app[data-mode] .voice-settings::before,.app[data-mode] .topctl .ibtn::before,.app[data-mode] .ibtn.bare::before,.app[data-mode] .cact button::before,.app[data-mode] .calnav .ibtn::before,.app[data-mode] .audio-action::before,.vopt::before,.micbtn::before,.voice-settings::before,.topctl .ibtn::before,.ibtn.bare::before,.cact button::before,.calnav .ibtn::before,.audio-action::before,#case-dialog-close::before{content:""!important;display:block!important;position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;height:auto;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;background:var(--glow);transition:opacity .2s ease}
.app[data-mode] .vopt::before,.vopt::before{top:52px;width:104px}
.audio-action::before{left:22px;top:50%;width:54px}
@media (prefers-reduced-motion:reduce){.ic{transition:none}}

/* ---------- the acknowledgement of country: last on the page, smallest type on the page ---------- */
.foot .ack{order:99;font-size:9px;line-height:1.5;max-width:70ch;margin-top:6px;opacity:.9}

/* glow stays on for selected and hover, and is not a blurred frosted face (states.css fades that one out) */
.app[data-mode] .vopt::before,.app[data-mode] .micbtn::before,.app[data-mode] .voice-settings::before,.app[data-mode] .topctl .ibtn::before,.app[data-mode] .ibtn.bare::before,.app[data-mode] .cact button::before,.app[data-mode] .calnav .ibtn::before,.app[data-mode] .audio-action::before,.vopt::before,.micbtn::before,.voice-settings::before,.topctl .ibtn::before,.ibtn.bare::before,.cact button::before,.calnav .ibtn::before,.audio-action::before,#case-dialog-close::before{opacity:1!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;right:auto;bottom:auto}

/* ---------- 9 Nov 2026 (night): the control glass panel sits bottom right and is smaller ---------- */
.app .topctl.glass{position:fixed;right:16px;bottom:16px;left:auto;top:auto;z-index:30;gap:2px;padding:7px 10px 5px;margin:0}
.app .topctl.glass .voice-control{margin:0 2px 0 0;gap:0 6px}
.app .topctl.glass .voice-control .micbtn{width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important}
.app[data-mode] .topctl.glass .voice-control .voice-settings{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
.app .topctl.glass .ibtn{width:40px;height:40px;min-width:40px;min-height:40px}
.app .topctl.glass .ibtn .ic{width:28px;height:28px}
.app .topctl.glass .voice-control .status{font-size:10.5px}
.app[data-mode] .foot{padding-bottom:104px}
@media (max-width:600px){.app .topctl.glass{right:8px;bottom:8px}}
/* the popover action rows are full width, so their glow is sized to the icon, not to 150% of the row */
.app[data-mode] .audio-action::before,.audio-action::before{left:24px!important;top:50%!important;width:56px!important}

/* ---------- 9 Nov 2026 (night): nothing drawn around the globe. While the voice is active it gets a SOFT GLOW only: no rim, no ripple outlines ---------- */
.orb-metal i{display:none!important}
.orb-metal{transform:none;box-shadow:0 0 calc(50px + var(--lv,0) * 14px) 0 rgba(190,226,217,calc(.11 + var(--lv,0) * .09)),0 32px 44px -22px rgba(52,58,60,.10)!important}
.orbwrap::before,.orbwrap::after{display:none!important}

/* ---------- Rick and Dani share ONE frosted glass panel; a clear rectangle slides to the chosen voice ---------- */
.app[data-mode] .voices.glass{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:6px;width:min(300px,100%);margin:8px auto 0;border:1px solid rgba(255,255,255,.65);box-shadow:0 10px 28px rgba(52,58,60,.10),inset 1px 1px 0 rgba(255,255,255,.9)}
.voices .vslider{position:absolute;left:6px;top:6px;width:calc(50% - 6px);height:calc(100% - 12px);border-radius:6px;background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(236,244,242,.5));box-shadow:0 6px 16px rgba(52,58,60,.12),inset 0 0 0 1px rgba(255,255,255,.8);transition:transform .32s cubic-bezier(.3,.7,.2,1);pointer-events:none;z-index:0}
.voices:has([data-voice="dani"][aria-checked="true"]) .vslider{transform:translateX(100%)}
.app[data-mode] .voices .vopt{position:relative;z-index:1;width:100%;min-width:0}
@media (prefers-reduced-motion:reduce){.voices .vslider{transition:none}}

/* the moving globe: the canvas sits exactly where the approved still image is */
.globe .gm-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* ---------- Rick and Dani panel: smaller ---------- */
.app[data-mode] .voices.glass{width:min(208px,100%);padding:4px;margin-top:6px}
.voices .vslider{left:4px;top:4px;width:calc(50% - 4px);height:calc(100% - 8px)}
.app[data-mode] .vopt .voice-person{width:56px;height:56px}
.app[data-mode] .vopt{font-size:12.5px;padding-top:4px;padding-bottom:4px}
.app[data-mode] .vopt::before,.vopt::before{top:34px;width:70px}

/* ---------- Rick and Dani, liquid-glass style: rounded frosted bar, round glass buttons, the chosen one a bright white circle that slides ---------- */
.app[data-mode] .voices.glass{border-radius:30px!important;width:min(200px,100%);padding:8px}
.app[data-mode] .voices .vopt{padding:8px 0 6px;background:none}
.app[data-mode] .vopt .voice-person{width:48px;height:48px}
.app[data-mode] .voices .vopt::before{top:32px;width:64px;background:rgba(255,255,255,.2)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 4px 10px rgba(52,58,60,.10)}
.app[data-mode] .voices .vopt[aria-checked="true"]::before{opacity:0!important}
.voices .vslider{left:calc(25% - 28px);top:8px;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 0 24px rgba(190,226,217,.30),0 6px 14px rgba(52,58,60,.12);transform:none!important;transition:left .34s cubic-bezier(.3,.7,.2,1)}
.voices:has([data-voice="dani"][aria-checked="true"]) .vslider{left:calc(75% - 36px)}
/* the global square-corner reset is !important, so the round buttons say so too */
.voices .vslider,.app[data-mode] .voices .vopt::before{border-radius:50%!important}

/* ---------- Rick and Dani as flat glyphs like the reference (not mirror chrome): white on a grey glass circle, dark on the white chosen circle ---------- */
.app[data-mode] .voices .vopt .voice-person{filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(40,46,48,.25))!important}
.app[data-mode] .voices .vopt[aria-checked="true"] .voice-person{filter:brightness(0) opacity(.8)!important}
.app[data-mode] .voices .vopt::before{background:linear-gradient(160deg,rgba(120,130,132,.36),rgba(90,98,100,.30))!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 4px 10px rgba(52,58,60,.10)}

/* ---------- the two small control panels in the reference style: tinted frosted glass, white text, white flat icons ---------- */
.app[data-mode] .voices.glass,.app .topctl.glass{
  background:linear-gradient(160deg,rgba(112,121,123,.62),rgba(82,90,92,.56))!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.3)!important;backdrop-filter:blur(24px) saturate(1.3)!important;
  border:1px solid rgba(255,255,255,.38);box-shadow:0 10px 28px rgba(40,46,48,.16),inset 0 1px 0 rgba(255,255,255,.45);color:#fff}
.app[data-mode] .voices .vopt,.app[data-mode] .voices .vopt[aria-checked="true"],.app .topctl.glass .status,.app .topctl.glass .voice-control{color:#fff}
.app[data-mode] .voices .vopt::before{background:linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.10))!important}
.app .topctl.glass img{filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(40,46,48,.28))!important}
.app .topctl.glass .ibtn::before,.app .topctl.glass .micbtn::before,.app .topctl.glass .voice-settings::before{opacity:0!important}
.app .topctl.glass [aria-pressed="true"]::before,.app .topctl.glass [aria-expanded="true"]::before{opacity:.42!important}

/* ---------- Rick and Dani: a small tinted glass panel, man and woman OUTLINES in white, a slider between them ---------- */
.app[data-mode] .voices.glass{display:flex;align-items:center;justify-content:center;gap:12px;width:auto;max-width:100%;padding:8px 16px 6px;margin:6px auto 0;border-radius:30px!important}
.voices .vslider{display:none!important}
.app[data-mode] .voices .vopt{display:flex;flex-direction:column;align-items:center;gap:2px;width:auto;min-width:60px;padding:2px 4px;background:none}
.app[data-mode] .voices .vopt::before{display:none!important}
.vo-outline{display:block;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .25s ease,filter .25s ease;filter:drop-shadow(0 1px 1px rgba(40,46,48,.25))}
.app[data-mode] .voices .vopt[aria-checked="true"] .vo-outline{opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 1px 1px rgba(40,46,48,.25))}
.app[data-mode] .voices .vopt span{font-size:11.5px;color:#fff}
.vswitch{position:relative;width:46px;height:26px;padding:0;margin:0 2px 12px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.16);box-shadow:inset 0 1px 3px rgba(40,46,48,.25);cursor:pointer;border-radius:13px!important;flex:none}
.vknob{position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%!important;background:#fff;box-shadow:0 2px 5px rgba(40,46,48,.28);transition:transform .3s cubic-bezier(.3,.7,.2,1)}
.voices:has([data-voice="dani"][aria-checked="true"]) .vknob{transform:translateX(20px)}
.vswitch:focus-visible,.app[data-mode] .voices .vopt:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.vknob,.vo-outline{transition:none}}
.app[data-mode] .voices .vopt{min-height:0!important;height:auto!important;aspect-ratio:auto}
.vo-outline{width:52px;height:52px}
.app[data-mode] .voices.glass{padding:8px 18px 6px}
.vswitch{margin-bottom:14px}

/* ---------- the two small panels: real frosted-glass look (sheen, grain, bright rim, inner edge light) instead of a flat grey fill ---------- */
.app[data-mode] .voices.glass,.app .topctl.glass{
  background:
    radial-gradient(130% 100% at 14% -8%,rgba(255,255,255,.46),rgba(255,255,255,.10) 42%,rgba(255,255,255,0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E") 0 0/160px 160px,
    linear-gradient(165deg,rgba(104,114,116,.46),rgba(62,70,72,.52))!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.7) brightness(.94)!important;backdrop-filter:blur(26px) saturate(1.7) brightness(.94)!important;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 1px 0 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.14),inset 0 0 22px rgba(255,255,255,.07),0 16px 34px rgba(40,46,48,.22),0 2px 6px rgba(40,46,48,.12)}

/* ---------- the two small panels: see-through glass (the ribbons show through, blurred), white icons kept legible with a soft dark edge ---------- */
.app[data-mode] .voices.glass,.app .topctl.glass{
  background:
    radial-gradient(130% 100% at 14% -8%,rgba(255,255,255,.42),rgba(255,255,255,.08) 42%,rgba(255,255,255,0) 62%),
    linear-gradient(165deg,rgba(104,114,116,.28),rgba(62,70,72,.34))!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(.9)!important;backdrop-filter:blur(22px) saturate(1.8) brightness(.9)!important}
.app .topctl.glass img{filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(30,36,38,.55))!important}
.vo-outline{filter:drop-shadow(0 1px 2px rgba(30,36,38,.55))}
.app[data-mode] .voices .vopt[aria-checked="true"] .vo-outline{filter:drop-shadow(0 0 5px rgba(255,255,255,.45)) drop-shadow(0 1px 2px rgba(30,36,38,.55))}
.app[data-mode] .voices .vopt span,.app .topctl.glass .status{text-shadow:0 1px 2px rgba(30,36,38,.55)}

/* ---------- the background ribbons: a soft, slow wave sway (independent translate / rotate / scale, so the base transforms stay) ---------- */
@keyframes rb-sway-a{0%{translate:0 0;rotate:-.7deg;scale:1}50%{translate:1.2vw -1.4vh;rotate:.9deg;scale:1.012}100%{translate:-.8vw 1.1vh;rotate:-.4deg;scale:1.006}}
@keyframes rb-sway-b{0%{translate:0 0;rotate:.6deg;scale:1}50%{translate:-1.4vw -1.2vh;rotate:-.8deg;scale:1.014}100%{translate:1vw .9vh;rotate:.3deg;scale:1.004}}
.ribbon-up{animation:rb-sway-a 21s ease-in-out infinite alternate;will-change:translate,rotate,scale}
.ribbon-low{animation:rb-sway-b 17s ease-in-out infinite alternate;will-change:translate,rotate,scale}
@media (prefers-reduced-motion:reduce){.ribbon-up,.ribbon-low{animation:none;will-change:auto}}

/* ---------- the volume controls (spoken-reply popover): much smaller ---------- */
.voice-audio-panel{width:min(184px,calc(100vw - 16px));padding:6px;gap:2px}
.voice-audio-panel .audio-action{min-height:34px;padding:0 6px;font-size:12px;gap:8px}
.voice-audio-panel .audio-action .ic{width:20px;height:20px}
.audio-vol{min-height:32px;gap:8px;padding:0 6px;font-size:12px}
.audio-vol input{height:18px}
.app[data-mode] .audio-action::before,.audio-action::before{left:16px!important;width:38px!important}

/* =====================================================================================================================
   LIQUID GLASS (reference: the rounded translucent menu): ONE material for every panel and every icon button.
   Large radius, thin bright rim, lighter at the top and deeper at the bottom, strong blur+saturation of whatever is behind,
   white text and white glyphs, round translucent buttons, the selected one a bright white circle with a dark glyph.
   ===================================================================================================================== */
.app .glass,.app .card,.app .notice,.app .transcript,.app[data-mode="board"] .stage,.app .prompt-menu[open],.app .voice-audio-panel,.app .case-dialog,
.app[data-mode] .voices.glass,.app .topctl.glass,.voice-audio-panel.glass,.app .card.hl{
  border-radius:28px!important;
  background:
    radial-gradient(120% 70% at 20% -10%,rgba(255,255,255,.34),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(112,122,126,.52) 0%,rgba(70,78,82,.66) 100%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.9)!important;backdrop-filter:blur(30px) saturate(1.9)!important;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.10),0 18px 40px rgba(34,40,44,.20),0 2px 8px rgba(34,40,44,.10);
  color:#fff}
.app .card,.app .card :where(h1,h2,h3,h4,p,span,div,small,li,td,th,strong,em,label,summary,figcaption,text){color:#fff!important;text-shadow:0 1px 2px rgba(28,34,38,.35)}
.app .card svg text{fill:#fff!important}
.app .stage,.app .stage :where(p,span,summary,small,label,h1,h2,h3){color:#fff;text-shadow:0 1px 2px rgba(28,34,38,.35)}
.app .transcript,.app .transcript :where(p,span,div,button,small,strong){color:#fff!important;text-shadow:0 1px 2px rgba(28,34,38,.35)}
.app .voice-audio-panel,.app .voice-audio-panel :where(span,label,button){color:#fff!important}
.app .prompt-menu[open],.app .prompt-menu[open] :where(summary,button,li,p,span){color:#fff!important}

/* icon buttons: round translucent glass; selected = bright white circle with a dark glyph */
.app .ibtn,.app .micbtn,.app .voice-settings,.app .cact button,.app .calnav .ibtn,.app .audio-action{
  border-radius:50%!important;background:rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 3px 8px rgba(34,40,44,.14)!important;border:0!important}
.app .audio-action{border-radius:22px!important;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.app .ibtn::before,.app .micbtn::before,.app .voice-settings::before,.app .cact button::before,.app .calnav .ibtn::before,.app .audio-action::before{opacity:0!important}
.app .ic,.app .micbtn img,.app .voice-settings img,.app .audio-action img{filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(28,34,38,.45))!important}
.app [aria-pressed="true"].ibtn,.app [aria-expanded="true"].ibtn,.app .micbtn[aria-pressed="true"],.app .voice-settings[aria-expanded="true"],.app .cact button[aria-pressed="true"]{background:#fff!important;box-shadow:0 0 18px rgba(255,255,255,.35),0 3px 8px rgba(34,40,44,.16)!important}
.app [aria-pressed="true"].ibtn .ic,.app [aria-expanded="true"].ibtn .ic,.app .micbtn[aria-pressed="true"] img,.app .voice-settings[aria-expanded="true"] img,.app .cact button[aria-pressed="true"] .ic{filter:brightness(0) opacity(.78)!important}

/* the volume popover as the reference menu: text left, glyph right, a hairline under the first row */
.app .voice-audio-panel .audio-action{flex-direction:row-reverse;justify-content:space-between;padding:0 10px 0 12px}
.app .voice-audio-panel .audio-action:first-child{border-bottom:1px solid rgba(255,255,255,.30)!important;border-radius:0!important}
.app .audio-vol{flex-direction:row-reverse;color:#fff}
.app .audio-vol input{accent-color:#fff}

/* calendar and other light cells inside the glass cards: keep them as faint translucent tiles with white numerals */
.app .card td{background:rgba(255,255,255,.12)!important;border-radius:10px!important}
.app .stage .prompt-menu summary,.app .stage .foot{color:#fff}

/* =====================================================================================================================
   LIQUID GLASS, correction pass: small and minimal (sizes taken from the reference: glyph about half the button, label about
   half the glyph's height), much MORE TRANSPARENT (the tint is faint; the backdrop is darkened and saturated instead, so the
   ribbons stay visible through the glass), concentric radii, shadow + rim instead of a border, 44px hit areas kept by pseudo-element.
   ===================================================================================================================== */
.app .glass,.app .card,.app .notice,.app .transcript,.app[data-mode="board"] .stage,.app .prompt-menu[open],.app .voice-audio-panel,.app .case-dialog,
.app[data-mode] .voices.glass,.app .topctl.glass,.app .card.hl{
  background:
    radial-gradient(120% 60% at 18% -12%,rgba(255,255,255,.30),rgba(255,255,255,0) 58%),
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(40,48,52,.16) 100%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(2) brightness(.68) contrast(1.06)!important;
  backdrop-filter:blur(26px) saturate(2) brightness(.68) contrast(1.06)!important;
  border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.30),inset 0 1px 0 rgba(255,255,255,.50),inset 0 -1px 0 rgba(255,255,255,.08),0 16px 36px rgba(34,40,44,.16),0 2px 6px rgba(34,40,44,.08)}
@media (prefers-reduced-transparency:reduce){.app .glass,.app .card,.app .transcript,.app[data-mode="board"] .stage,.app .voice-audio-panel,.app[data-mode] .voices.glass,.app .topctl.glass{background:rgba(88,98,102,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* type: small and minimal */
.app .card h3{font-size:14px!important;font-weight:400!important;letter-spacing:0!important}
.app .card .gfx,.app .card p,.app .card span,.app .card small{font-size:inherit}
.app .stage :where(summary,.status){font-size:12px}
.app .transcript{font-size:12px}
.app .voice-audio-panel .audio-action,.app .audio-vol{font-size:11.5px!important}

/* bottom-right control panel */
.app .topctl.glass{padding:6px 10px 4px;gap:4px;border-radius:24px!important}
.app .topctl.glass .voice-control{margin:0 2px 0 0;gap:0 4px}
.app .topctl.glass .ibtn{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
.app .topctl.glass .ibtn .ic{width:17px!important;height:17px!important}
.app .topctl.glass .voice-control .micbtn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
.app .topctl.glass .micbtn img{width:23px!important;height:23px!important}
.app[data-mode] .topctl.glass .voice-control .voice-settings{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
.app .topctl.glass .voice-settings img{width:19px!important;height:19px!important}
.app .topctl.glass .voice-control .status{font-size:9.5px!important;margin-top:1px}
/* 44px hit areas without changing the look */
.app .topctl.glass .ibtn::after,.app .topctl.glass .micbtn::after,.app .topctl.glass .voice-settings::after{content:""!important;display:block!important;position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:0}

/* Rick and Dani */
.app[data-mode] .voices.glass{padding:6px 14px 4px;gap:10px;border-radius:24px!important}
.vo-outline{width:30px!important;height:30px!important;stroke-width:2}
.app[data-mode] .voices .vopt{min-width:44px;padding:0 2px}
.app[data-mode] .voices .vopt span{font-size:10.5px}
.vswitch{width:38px;height:22px;margin-bottom:12px;border-radius:11px!important}
.vknob{width:16px;height:16px}
.voices:has([data-voice="dani"][aria-checked="true"]) .vknob{transform:translateX(16px)}

/* volume popover */
.app .voice-audio-panel{width:min(168px,calc(100vw - 16px));padding:4px;border-radius:20px!important}
.app .voice-audio-panel .audio-action{min-height:30px!important;padding:0 8px 0 10px;border-radius:0!important}
.app .voice-audio-panel .audio-action .ic{width:15px!important;height:15px!important}
.app .audio-vol{min-height:28px;padding:0 8px}
.app .audio-vol input{height:14px}

/* small icon buttons inside the cards and the calendar */
.app .cact button{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
.app .cact button .ic{width:14px!important;height:14px!important}
.app .calnav .ibtn{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}
.app .calnav .ibtn .ic{width:13px!important;height:13px!important}
.app #back{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
.app #back .ic{width:17px!important;height:17px!important}

/* TRANSPARENCY pass (Viv: "just the transparency, the frosted glass"): only the glass material changes. The backdrop is blurred lightly so the
   ribbons stay recognisable through every panel, the tint is faint, and the darkening is just enough for white text. Sizes untouched. */
.app .glass,.app .card,.app .notice,.app .transcript,.app[data-mode="board"] .stage,.app .prompt-menu[open],.app .voice-audio-panel,.app .case-dialog,
.app[data-mode] .voices.glass,.app .topctl.glass,.app .card.hl{
  background:
    radial-gradient(120% 55% at 20% -10%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(36,44,48,.07) 100%)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.9) brightness(.74)!important;
  backdrop-filter:blur(9px) saturate(1.9) brightness(.74)!important}
.app .card,.app .card h3,.app .transcript,.app[data-mode="board"] .stage,.app .voices .vopt span,.app .topctl .status{text-shadow:0 1px 3px rgba(20,28,32,.45)}
/* transparency, second step: less darkening so the panel reads as clear glass over the pale page, not grey card */
.app .glass,.app .card,.app .notice,.app .transcript,.app[data-mode="board"] .stage,.app .prompt-menu[open],.app .voice-audio-panel,.app .case-dialog,
.app[data-mode] .voices.glass,.app .topctl.glass,.app .card.hl{
  -webkit-backdrop-filter:blur(8px) saturate(1.8) brightness(.86)!important;
  backdrop-filter:blur(8px) saturate(1.8) brightness(.86)!important}
.app .card,.app .card h3,.app .transcript,.app[data-mode="board"] .stage,.app .voices .vopt span,.app .topctl .status{text-shadow:0 1px 2px rgba(20,28,32,.55),0 0 8px rgba(20,28,32,.28)}

/* ---------- ribbons: a viewport-fixed layer (masked to the frosted panels by the script in index.html), images bleed off every screen edge ---------- */
.ribbons{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ribbons .ribbon{position:absolute}

/* orb kept exactly as approved; only a slight soft shadow below it (a crescent under the sphere, no ring, no glow change) */
.orb-metal{box-shadow:0 0 calc(50px + var(--lv,0) * 14px) 0 rgba(190,226,217,calc(.11 + var(--lv,0) * .09)),0 30px 30px -20px rgba(46,54,58,.24)!important}
/* phone: a longer upper ribbon, same centre, so its lower end runs off the bottom edge instead of stopping mid-screen */
@media (max-width:760px){.ribbon-up{left:-122vw;top:calc(34vh - 9vw);width:260vw}}

/* ---------- Viv, round 3 ---------- */
/* greeting and the other home text on the bare page: dark charcoal, no white glass styling (white is only for text on a glass panel) */
.app[data-mode="home"] #welcome,.app[data-mode="home"] .stage :where(p,span,summary,small,label,h1,h2){color:#2B3033!important;text-shadow:none!important}
.app[data-mode="home"] .stage .prompt-menu summary,.app[data-mode="home"] .stage .foot,.app[data-mode="home"] .stage .foot p,.app[data-mode="home"] .stage .foot a{color:#2B3033!important;text-shadow:none!important}
/* Rick / Dani: smaller, sharp edges, square rocker */
.app[data-mode] .voices.glass{border-radius:0!important;padding:4px 10px 3px!important;gap:8px!important;border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(34,40,44,.10)!important}
.vo-outline{width:24px!important;height:24px!important;stroke-width:2}
.app[data-mode] .voices .vopt{min-width:36px;gap:1px}
.app[data-mode] .voices .vopt span{font-size:10px!important}
.vswitch{width:32px!important;height:18px!important;margin-bottom:11px!important;border-radius:0!important}
.vknob{width:12px!important;height:12px!important;left:2px!important;top:2px!important;border-radius:0!important}
.voices:has([data-voice="dani"][aria-checked="true"]) .vknob{transform:translateX(14px)!important}
/* upper ribbon sits further left, clear of the title and the greeting column (desktop) */
@media (min-width:761px){.ribbon-up{left:-56vw}}

/* ---------- Viv, round 3b: the two small panels: sharp edge, smaller, genuinely see-through ---------- */
.app[data-mode] .voices.glass,.app .topctl.glass{
  border-radius:0!important;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03)),rgba(36,42,46,.15)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.5) brightness(.96)!important;backdrop-filter:blur(10px) saturate(1.5) brightness(.96)!important;
  border:1px solid rgba(255,255,255,.7)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px rgba(34,40,44,.08)!important}
.app .topctl.glass{padding:4px 8px 3px!important;gap:2px!important;right:12px;bottom:12px}
.app .topctl.glass .voice-control{gap:0 6px!important;margin:0!important}
.app .topctl.glass .ibtn{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}
.app .topctl.glass .ibtn .ic{width:15px!important;height:15px!important}
.app .topctl.glass .voice-control .micbtn{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
.app .topctl.glass .micbtn img{width:19px!important;height:19px!important}
.app[data-mode] .topctl.glass .voice-control .voice-settings{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
.app .topctl.glass .voice-settings img{width:16px!important;height:16px!important}
.app .topctl.glass .voice-control .status{font-size:9px!important;margin-top:0!important}
.app .topctl.glass .ibtn::after,.app .topctl.glass .micbtn::after,.app .topctl.glass .voice-settings::after{width:34px!important;height:34px!important}
/* small panels: a touch more charcoal so the white glyphs stay readable; blur stays light so it is still see-through */
.app[data-mode] .voices.glass,.app .topctl.glass{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),rgba(36,42,46,.30)!important}