/* Swarah UI, built on tokens.css. No inline styles anywhere (CSP style-src 'self'). */
[hidden]{display:none!important}
.stage{width:100%}#orb{width:100%;aspect-ratio:1}
*{box-sizing:border-box}
body{margin:0;font:var(--sw-fs-m)/1.55 var(--sw-font);background:var(--sw-grad-haze),var(--sw-grad-bg);background-attachment:fixed;color:var(--sw-text);min-height:100vh}
main{max-width:720px;margin:auto;padding:20px 16px 40px}
a{color:var(--sw-accent)}
h1,h2,h3{font-weight:600;letter-spacing:.01em}h2{font-size:var(--sw-fs-l)}h3{font-size:var(--sw-fs-m)}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand .wave{width:52px;height:47px;flex:none}
h1{margin:0;font-size:var(--sw-fs-word);line-height:1.1;font-weight:500}
.word{background:var(--sw-grad-word);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag,.badge{font-size:var(--sw-fs-xs);background:var(--sw-indigo);color:var(--sw-text);padding:2px 10px;border-radius:var(--sw-r-pill);vertical-align:middle;font-weight:500}.badge{background:var(--sw-border)}
.sub{color:var(--sw-text-2);margin:4px 0 0;width:100%}
.notfor{color:var(--sw-warn-text);font-size:var(--sw-fs-s);margin:10px 0}
.gate,.panel,dialog{background:var(--sw-panel-a);border:1px solid var(--sw-border);border-radius:var(--sw-r-m);padding:18px;box-shadow:var(--sw-shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.panel{margin:12px 0}.gate label{display:block;margin:8px 0}.gate a{color:var(--st-happy-hi)}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--sw-accent);outline-offset:2px}
#agree,#mic{border:0;border-radius:var(--sw-r-pill);background:var(--sw-grad-wave);color:var(--sw-text);font-weight:600;box-shadow:var(--sw-glow-violet)}
#agree{margin-top:10px;padding:10px 24px}#agree:disabled{opacity:.4;box-shadow:none}
#mic{font-size:var(--sw-fs-l);padding:14px 30px;display:block;margin:10px auto}#mic[aria-pressed=true]{background:var(--st-error);box-shadow:none}
.blocked{background:var(--sw-error-surface);border-left:4px solid var(--st-error);padding:16px;border-radius:var(--sw-r-s)}
.ailabel{position:sticky;top:0;z-index:5;display:inline-block;background:var(--sw-amber);color:var(--sw-on-amber);font-weight:600;padding:3px 12px;border-radius:var(--sw-r-pill);margin-bottom:8px;font-size:var(--sw-fs-s)}
.acct{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.acct button,.panel button,.row button{padding:7px 16px;border-radius:var(--sw-r-pill);border:1px solid var(--sw-border);background:var(--sw-panel);color:var(--sw-text)}
.status{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;color:var(--sw-text-2);font-size:var(--sw-fs-s)}#conn{margin-left:auto;color:var(--sw-accent)}
.hint,.planned,.small,.opt span{color:var(--sw-text-3);font-size:var(--sw-fs-s)}
#log{min-height:140px;background:rgba(2,9,34,.6);border:1px solid var(--sw-border);border-radius:var(--sw-r-m);padding:10px 12px;max-height:44vh;overflow:auto}
.u{color:var(--sw-info-text)}.a{color:var(--st-happy-hi)}
.opt{display:block;margin:10px 0;padding:10px;border:1px solid var(--sw-border);border-radius:var(--sw-r-s)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.danger{border-color:var(--st-error)!important;color:var(--sw-warn-text)!important}
.link{border:0!important;background:none!important;color:var(--st-happy-hi)!important;text-decoration:underline}
textarea{width:100%;background:rgba(2,9,34,.6);color:var(--sw-text);border:1px solid var(--sw-border);border-radius:var(--sw-r-s);padding:8px;font:inherit}
#chats li{margin:4px 0}.err{color:var(--sw-warn-text)}.ts:empty{display:none}
dialog{max-width:460px;color:var(--sw-text);background:var(--sw-panel)}dialog::backdrop{background:rgba(2,9,34,.75)}#wdDialog{border-color:var(--st-error)}
/* prefs */
.prefs{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:8px 0}
.pick{display:flex;flex-direction:column;font-size:var(--sw-fs-xs);color:var(--sw-text-2)}
select{font:inherit;font-size:var(--sw-fs-s);background:var(--sw-panel);color:var(--sw-text);border:1px solid var(--sw-border);border-radius:var(--sw-r-pill);padding:6px 12px;min-height:36px}
/* stage */
.stage{position:relative;display:flex;justify-content:center;align-items:center;margin:6px auto}
#orb{max-width:250px;margin:4px auto}
/* desktop: brand + legal left, stage centre, controls and transcript right */
@media (min-width:1024px){
  main{max-width:1280px;display:grid;grid-template-columns:300px 1fr;gap:0 36px;padding:28px 32px}
  main>header,main>.notfor{grid-column:1}main>section,main>p#checking{grid-column:2;grid-row:1/span 3}
  .brand{flex-direction:column;align-items:flex-start}.brand .wave{width:72px;height:65px}
  #app:not([hidden]){display:grid;grid-template-columns:minmax(360px,1fr) 380px;grid-template-areas:"label label" "acct acct" "ts ts" "err err" "stage prefs" "stage cam" "stage status" "stage mic" "stage hint" "stage log" "stage planned" "stage .";grid-template-rows:repeat(11,auto) 1fr;gap:4px 28px;align-content:start}
  #app>.ailabel{grid-area:label;justify-self:start}#acct{grid-area:acct}#ts{grid-area:ts}#err{grid-area:err}#prefs{grid-area:prefs}#camOn{grid-area:cam}#stage{grid-area:stage;align-self:start;min-height:520px}
  #app>.status{grid-area:status}#mic{grid-area:mic;justify-self:start;margin:6px 0}#app>.hint{grid-area:hint}#log{grid-area:log;max-height:340px}#app>.planned{grid-area:planned}
  #orb{max-width:350px;width:100%}
}

input[type=checkbox],input[type=radio]{accent-color:var(--sw-accent)}

/* m9d wordmark: board-sampled "Sw" silver + "arah" lilac, Poppins 600 */
.word{background:none;color:inherit;font-weight:600;letter-spacing:.01em}.word .w1{background:linear-gradient(180deg,#D9DBE5,#D0D0E3);-webkit-background-clip:text;background-clip:text;color:transparent}.word .w2{background:linear-gradient(180deg,#C8ACE6,#C298E3 60%,#C4A0E4);-webkit-background-clip:text;background-clip:text;color:transparent}

/* m9f: board layout — orb is the only visual. Wordmark + wave top-left, orb centred in mood haze, status + round gradient mic below. */
html,body{min-height:100%;background-color:#01091D}
body{background:#01091D}
.brand{flex-direction:row!important;align-items:center!important;gap:10px}
.brand h1{font-size:28px;line-height:1;margin:0;font-weight:600;letter-spacing:.01em}
.brand .sub{flex-basis:100%;margin:6px 0 0;color:var(--sw-text-2);font-size:13px;letter-spacing:.02em}
.brand .wave{width:44px!important;height:40px!important}
#app{text-align:center}
.prefs{justify-content:center}
.stage{margin:18px auto 8px;position:relative}
.stage::before{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side,rgba(97,38,247,.26),rgba(97,38,247,.14) 35%,rgba(0,104,252,.06) 65%,rgba(0,104,252,0));pointer-events:none}
#orb{width:min(78vw,300px)!important;max-width:none!important;margin:0 auto!important;position:relative}
.status{justify-content:center;gap:14px}#conn{margin-left:0!important;font-size:15px;color:var(--sw-text)}
#mic{border-radius:999px;padding:16px 34px;background:linear-gradient(90deg,#0068FC,#6126F7 55%,#E550BF);box-shadow:0 0 28px rgba(97,38,247,.55),0 0 0 1px rgba(255,255,255,.12) inset;margin:14px auto!important;justify-self:center!important}
@media (min-width:900px){
  #app:not([hidden]){display:block!important}#app>*{margin-left:auto;margin-right:auto}#stage{min-height:0!important}
  #orb{width:420px!important}
  .hint{max-width:560px;margin:8px auto}
}
.swarah-glow{height:100lvh!important}
html,body{overflow-x:clip}.stage::before{inset:-12%}
/* m9f band fix: html carries the indigo base (full height); body/main stay transparent so the fixed cosmic canvases (z:-1) are never covered by a body-height box */
html{min-height:100%;background:#01091D}body{min-height:100%;background:transparent!important}
/* m9g: board device-screen layout (sidebar + centred orb + tiles + ask bar), picker, avatars */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app>.ailabel{font-size:11px;padding:2px 10px}
.status{margin:6px 0}.status #conn{color:var(--sw-text-2)}
.hint{display:none}
.prefs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;justify-content:center;margin:6px 0}
.pick{font-size:12px;color:var(--sw-text-2);display:flex;gap:6px;align-items:center}
.pick select{padding:6px 10px;border-radius:999px;border:1px solid rgba(160,140,255,.28);background:rgba(20,22,70,.65);color:var(--sw-text);font:inherit;font-size:13px}
.seg{border:0;padding:3px;margin:0;display:flex;gap:2px;border-radius:999px;background:rgba(20,22,70,.6);border:1px solid rgba(160,140,255,.22)}.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg label{position:relative;padding:6px 12px;border-radius:999px;font-size:13px;cursor:pointer;color:var(--sw-text-2)}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:linear-gradient(90deg,#0068FC,#6126F7);color:#fff;box-shadow:0 0 14px rgba(97,38,247,.5)}
.seg label:has(input:focus-visible){outline:2px solid var(--sw-accent);outline-offset:2px}
.avatarwrap{position:relative;margin:0 auto;width:min(70vw,260px);transform:scale(calc(1 + var(--lvl,0) * .025));transition:transform .08s linear}
.avatarwrap[hidden]{display:none}
.avatarwrap img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid rgba(160,140,255,.35);box-shadow:0 0 calc(24px + var(--lvl,0) * 40px) rgba(140,90,255,calc(.35 + var(--lvl,0) * .4))}
.avlabel{position:absolute;top:10px;left:10px;margin:0;font-size:11px;padding:2px 10px}
.prov{font-size:11px;color:var(--sw-text-3);margin:8px 0 0;text-align:center}
#orb[hidden]{display:none}
.ask-h{font-size:20px;font-weight:500;margin:10px 0 12px;color:#fff}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px;margin:0 auto 16px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;border:1px solid rgba(160,140,255,.28);background:linear-gradient(180deg,rgba(40,30,110,.55),rgba(16,18,60,.6));color:#C7D2FF;font:inherit;font-size:13px;cursor:pointer}
.tile:hover,.tile:focus-visible{border-color:#8D66F8;box-shadow:0 0 16px rgba(97,38,247,.45)}.tile .ti{font-size:20px}
.askbar{display:flex;align-items:center;gap:8px;max-width:620px;margin:0 auto;padding:6px 6px 6px 18px;border-radius:999px;border:1px solid rgba(160,140,255,.3);background:rgba(14,16,52,.75)}
.askbar input{flex:1;min-width:0;background:transparent;border:0;color:var(--sw-text);font:inherit;font-size:15px;padding:8px 0;outline:none}
.askbar #mic{margin:0!important;padding:10px 18px!important;font-size:14px!important;white-space:nowrap}
.menubtn{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid rgba(160,140,255,.3);background:rgba(20,22,70,.6);color:var(--sw-text);font:inherit;font-size:13px;margin:0 0 8px}
.sidenav{display:none;flex-direction:column;gap:4px;text-align:left;margin:0 0 10px;padding:8px;border-radius:14px;background:rgba(14,16,52,.85);border:1px solid rgba(160,140,255,.22)}.sidenav.open{display:flex}
.nav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--sw-text-2);text-decoration:none;font-size:14px}.nav .ni{width:18px;text-align:center}
.nav.on{background:rgba(97,38,247,.28);color:#fff}.nav.off{opacity:.6;cursor:not-allowed}.nav .badge{margin-left:auto;font-size:10px}
@media (min-width:900px){
  .menubtn{display:none}
  .sidenav{display:flex;position:fixed;left:32px;top:290px;width:200px;background:rgba(10,12,44,.55)}
  #orb{width:360px!important}.avatarwrap{width:280px}
}
/* m9h: v2 render-still orb + board app panel */
#orb.has-img{contain:layout;overflow:visible}#orb.has-img canvas{opacity:0}
.orbimg{position:absolute;inset:-6%;transform:scale(calc(1 + var(--lvl,0) * .07));transition:transform .08s linear}
.orbbloom{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(140,90,255,.55),rgba(229,80,191,.22) 55%,rgba(0,104,252,0));filter:blur(18px);opacity:calc(.55 + var(--lvl,0) * .45)}
.ol{position:absolute;inset:6%;width:88%;height:88%;opacity:1;animation:olspin 60s linear infinite,olbreathe 6s ease-in-out infinite;filter:brightness(calc(1 + var(--lvl,0) * .35)) saturate(1.05);transition:filter .6s ease}
.orbripple{position:absolute;inset:10%;border-radius:50%;border:2px solid rgba(160,140,255,calc(var(--lvl,0) * .8));transform:scale(calc(1 + var(--lvl,0) * .18));opacity:0;transition:opacity .4s}
#orb[data-state=listening] .ol{filter:brightness(1.22) saturate(1.15) drop-shadow(0 0 18px rgba(120,150,255,.6))}
#orb[data-state=listening] .orbbloom{opacity:.95}
#orb[data-state=thinking] .ol{animation:olspin 30s linear infinite,olbreathe 6s ease-in-out infinite,olhue 4s ease-in-out infinite}
#orb[data-state=speaking] .ol{animation-duration:40s,1.6s}
#orb[data-state=speaking] .orbripple{opacity:1;animation:olripple 1.6s ease-out infinite}
@keyframes olhue{0%,100%{filter:hue-rotate(0deg) brightness(1.05)}50%{filter:hue-rotate(28deg) saturate(1.1) brightness(1.1)}}
@keyframes olripple{0%{box-shadow:0 0 0 0 rgba(160,120,255,calc(.25 + var(--lvl,0) * .5))}100%{box-shadow:0 0 0 calc(8px + var(--lvl,0) * 40px) rgba(160,120,255,0)}}
@keyframes olspin{to{rotate:360deg}}@keyframes olbreathe{0%,100%{scale:1}50%{scale:1.025}}
@media (prefers-reduced-motion:reduce){.ol,.orbripple{animation:none!important}.orbimg{transform:none}}
#orb{width:min(88vw,360px)!important}
.stage::before{display:none}
.tag{display:none}
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:4px 0}
.topbar .ailabel{position:static;background:transparent;color:var(--sw-text-2);border:1px solid rgba(160,140,255,.3);font-weight:500;font-size:11px;padding:2px 10px;margin:0 auto 0 0}
.topbar .prefs{margin:0;gap:6px}.topbar .seg label{padding:4px 9px;font-size:12px}.topbar .pick select{padding:4px 8px;font-size:12px}
.side .slogo,.side .sidelegal{display:none}
.tiles{max-width:none;gap:12px}
.tile{padding:18px 6px 14px;font-size:14px;font-weight:500;border-radius:16px;gap:8px}
.tile svg.ti{width:32px;height:32px}
.tile[data-intent=Research]{color:#5FD3FF}.tile[data-intent=Create]{color:#C9C2FF}.tile[data-intent=Plan]{color:#F6C79A}.tile[data-intent=Explore]{color:#EFA3F7;background:linear-gradient(180deg,rgba(90,30,120,.5),rgba(30,16,60,.6))}
.askbar{max-width:none;width:100%;box-sizing:border-box;padding:6px 6px 6px 22px;border-radius:20px}
.askbar #mic{width:48px;height:48px;padding:0!important;border-radius:50%!important;display:grid;place-items:center;font-size:20px!important;flex:none;background:radial-gradient(circle at 50% 40%,#7B4BFF,#3B1FC9)}
@media (min-width:900px){
  main{display:block!important;max-width:1360px;padding:24px 32px}
  main:has(#app:not([hidden]))>.brand,main:has(#app:not([hidden]))>.notfor{display:none}
  #app{text-align:left}
  .apppanel{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 48px);box-sizing:border-box;border-radius:26px;background:linear-gradient(180deg,rgba(10,14,46,.82),rgba(6,10,34,.86));border:1px solid rgba(160,140,255,.24);box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden}
  .side{display:flex;flex-direction:column;gap:6px;padding:22px 14px;background:rgba(6,8,30,.6);border-right:1px solid rgba(160,140,255,.14)}
  .side .slogo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;padding:0 8px}
  .side .sidelegal{display:block;font-size:11px;margin:4px 8px 14px;line-height:1.35}
  .sidenav{display:flex!important;position:static!important;width:auto!important;background:transparent!important;border:0!important;padding:0!important}
  .pane{display:flex;flex-direction:column;align-items:center;padding:16px 28px 22px;text-align:center;min-width:0}
  .pane>*{width:100%;max-width:820px;box-sizing:border-box}
  .pane>.stage{flex:1;display:flex;align-items:center;justify-content:center}
  #orb{width:min(46vh,460px)!important}.avatarwrap{width:min(40vh,320px)}
  .ask-h{font-size:24px;margin:6px 0 16px}
  .tile{padding:22px 6px 16px}
  .askbar{margin-top:18px;max-width:none!important;width:100%}
  .pane>form.askbar{max-width:none}
}
.orbimg,.orbimg *{pointer-events:none}