/* EMA Studio: Helder atelier. Licht standaard, donker via systeem of schakelaar. */
:root{
  --bg:#eef1f5; --surface:#fbfcfd; --surface2:#e6eaf0; --line:#d5dbe4;
  --ink:#15233f; --mute:#566176; --side:#15233f; --side-fg:#e9edf5; --side-mute:#a1adc4; --side-line:#2a3a5c;
  --accent:#a4532d; --accent-fg:#ffffff; --accent-soft:#f4e3d9;
  --ok:#2f7d57; --warn:#8f5c0e; --bad:#b3372c; --c1:#2f6f8f; --c2:#a4532d; --c3:#5d4fa0;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Figtree',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 1px 0 rgba(21,35,63,.04),0 12px 30px -18px rgba(21,35,63,.25);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1424; --surface:#141d33; --surface2:#1b2640; --line:#28365a;
  --ink:#e8edf7; --mute:#9aa7c0; --side:#0a101d; --side-fg:#e8edf7; --side-mute:#8795b3; --side-line:#1f2c49;
  --accent:#e0905f; --accent-fg:#1b1008; --accent-soft:#3a2619;
  --ok:#5dbb8c; --warn:#e0b25c; --bad:#e8847a; --c1:#6bb4d6; --c2:#e0905f; --c3:#a597e6; --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1424; --surface:#141d33; --surface2:#1b2640; --line:#28365a;
  --ink:#e8edf7; --mute:#9aa7c0; --side:#0a101d; --side-fg:#e8edf7; --side-mute:#8795b3; --side-line:#1f2c49;
  --accent:#e0905f; --accent-fg:#1b1008; --accent-soft:#3a2619;
  --ok:#5dbb8c; --warn:#e0b25c; --bad:#e8847a; --c1:#6bb4d6; --c2:#e0905f; --c3:#a597e6; --shadow:none; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55}
body{padding:16px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.shell{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;min-height:calc(100vh - 32px)}
@media(max-width:880px){.shell{grid-template-columns:minmax(0,1fr)}}

/* zijbalk */
.side{background:var(--side);color:var(--side-fg);border-radius:18px;padding:22px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px)}
.logo{font:700 24px var(--display);letter-spacing:-.01em;display:flex;align-items:baseline;gap:6px;padding-inline:8px}
.logo i{font-style:normal;color:var(--accent);font-size:11px;font-family:var(--mono);letter-spacing:.1em}
nav.menu{display:flex;flex-direction:column;gap:2px}
nav.menu button{display:flex;gap:12px;align-items:center;text-align:left;background:none;border:0;border-radius:10px;padding:10px 12px;color:var(--side-mute);font-weight:500}
nav.menu button svg{width:18px;height:18px;flex:none}
nav.menu button[aria-current=true]{background:var(--side-line);color:var(--side-fg)}
nav.menu button:hover{color:var(--side-fg)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.seg{display:flex;background:var(--side-line);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;border-radius:8px;padding:7px 8px;color:var(--side-mute);display:flex;gap:7px;align-items:center;justify-content:center;font-size:13px;font-weight:500}
.seg button[aria-pressed=true]{background:var(--side-fg);color:var(--side)}
.seg svg.flag{width:20px;height:14px;border-radius:2px;flex:none}
.seg svg.ico{width:15px;height:15px}
.lock{font-size:12px;color:var(--side-mute);display:flex;gap:8px}
.lock svg{width:15px;height:15px;flex:none;margin-top:2px}
@media(max-width:880px){
  .side{position:static;max-height:none;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px;gap:10px}
  nav.menu{flex-direction:row;flex-wrap:wrap;order:3;width:100%}
  nav.menu button{padding:8px 10px}
  .side-foot{margin:0 0 0 auto;flex-direction:row;flex-wrap:wrap}
  .lock{display:none}
}

/* werkvlak */
main{min-width:0;display:flex;flex-direction:column;gap:20px;padding-block:6px}
.view{display:flex;flex-direction:column;gap:20px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-end}
.head.tight{align-items:flex-start}
h1{font:700 clamp(28px,4vw,40px)/1.05 var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.sub{color:var(--mute);margin:6px 0 0;max-width:62ch}
.eyebrow{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:block}
.pill{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;padding:4px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mute);flex:none}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.live{background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);min-width:0}
.btn{border:0;border-radius:10px;padding:10px 16px;font-weight:600;font-size:14px;background:var(--accent);color:var(--accent-fg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.danger{color:var(--bad)}
.btn.small{padding:6px 12px;font-size:13px}
.chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fld,textarea,select,input[type=text],input[type=password],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=date],input[type=datetime-local],input[type=time]{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px;width:100%}
textarea{resize:vertical;margin-top:8px}
.note{font-size:13px;color:var(--mute);border-left:3px solid var(--line);padding-left:12px;margin-top:18px}

/* gesprek */
.listen{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.mic{width:104px;height:104px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;flex:none;box-shadow:0 0 0 10px var(--accent-soft);transition:box-shadow .2s,background .2s}
.mic svg{width:38px;height:38px}
.mic[aria-pressed=false]{background:var(--surface2);color:var(--ink);box-shadow:0 0 0 10px var(--bg)}
.mic.hearing{box-shadow:0 0 0 16px var(--accent-soft)}
.wave{display:flex;gap:3px;align-items:center;height:52px;flex:1;min-width:140px}
.wave i{width:4px;height:6px;background:var(--ink);opacity:.7;border-radius:2px;transition:height .08s}
.state{font:700 22px var(--display)}
.state small{display:block;font:400 13px var(--body);color:var(--mute)}
.silence{height:4px;border-radius:2px;background:var(--surface2);margin-top:18px;overflow:hidden}
.silence i{display:block;height:100%;width:0;background:var(--accent)}
.live-tr{margin-top:14px;padding:10px 14px;border:1px dashed var(--line);border-radius:10px;color:var(--mute)}
.thread{display:flex;flex-direction:column;gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);min-height:40px}
.thread:empty{display:none}
.msg{max-width:88%;min-width:0;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:14px 14px 4px 14px}
.msg.ai{padding-left:14px;border-left:3px solid var(--accent)}
.msg .who{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:3px}
.msg .tr{font-size:13px;opacity:.75;margin-top:5px}
.msg .err{color:var(--bad)}
.msg mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 2px}
.compose{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.compose input{flex:1;min-width:180px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:center}
.kv:first-child{border-top:0}
.kv .v{color:var(--mute);display:flex;gap:8px;align-items:center;text-align:right}

/* onderzoek */
.row-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-top:12px}
.check{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.check input{accent-color:var(--accent)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cols:empty{display:none}
@media(max-width:980px){.cols{grid-template-columns:minmax(0,1fr)}}
.col{border-top:4px solid var(--c)}
.col h3{display:flex;justify-content:space-between;align-items:center;gap:8px;font:700 17px var(--display);margin:0}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font:400 12px var(--mono);color:var(--mute);margin:8px 0 12px;font-variant-numeric:tabular-nums}
.col .body{white-space:pre-wrap;overflow-wrap:anywhere}
.col .body.err{color:var(--bad)}
.cur::after{content:"";display:inline-block;width:7px;height:15px;background:var(--c);vertical-align:-2px;margin-left:2px;animation:pulse 1s infinite}
.sum{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sum .eyebrow{color:inherit;opacity:.7}
.sum h3{font:700 24px var(--display);margin:6px 0 8px}
.sum-text{margin:0 0 16px;max-width:68ch;white-space:pre-wrap}
.sum .btn{background:var(--bg);color:var(--ink)}
.sum .btn.ghost{background:none;color:var(--bg);border-color:rgba(128,128,128,.5)}
.hist-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.hist-item:first-of-type{border-top:0}
.hist-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* stemstudio */
.studio{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px}
@media(max-width:980px){.studio{grid-template-columns:minmax(0,1fr)}}
.profiles{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.prof{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.prof[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.prof b{font:700 18px var(--display);min-width:44px}
.prof span{color:var(--mute);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof.add{border-style:dashed;justify-content:center;color:var(--mute)}
.pname{font:700 28px var(--display);background:none;border:0;border-bottom:1px dashed var(--line);border-radius:0;padding:2px 0;width:min(260px,100%)}
.ctl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px}
@media(max-width:700px){.ctl-grid{grid-template-columns:minmax(0,1fr)}}
.ctl{padding:10px 0;border-bottom:1px solid var(--line)}
.ctl label{display:flex;justify-content:space-between;gap:8px;font-weight:500}
.ctl label output{font:500 13px var(--mono);color:var(--accent)}
.ctl small{display:block;color:var(--mute);font-size:12.5px;margin-bottom:6px}
.ctl .badge{font:500 10px var(--mono);letter-spacing:.06em;color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:0 5px;margin-left:8px}
input[type=range]{width:100%;accent-color:var(--accent)}
.scope{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;margin:14px 0}
.scope canvas{width:100%;height:80px;display:block}
.scope .lbl{display:flex;justify-content:space-between;font:400 11px var(--mono);color:var(--mute)}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.filebtn{display:inline-flex;align-items:center;cursor:pointer}

/* instellingen */
.sec{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.sec:first-child{border-top:0;padding-top:0}
.sec:last-child{padding-bottom:0}
@media(max-width:760px){.sec{grid-template-columns:minmax(0,1fr)}}
.sec h3{font:700 18px var(--display);margin:0 0 4px}
.sec p{margin:0;color:var(--mute);font-size:13.5px}
.fields{display:flex;flex-direction:column;gap:12px;min-width:0}
.key{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.key .nm{font-weight:600;min-width:110px}
.key code{font:500 13px var(--mono);color:var(--mute);flex:1;min-width:120px}
.key input{flex:1;min-width:180px}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sw{width:42px;height:24px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);position:relative;flex:none;padding:0}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--mute);transition:left .15s}
.sw[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.sw[aria-checked=true]::after{left:20px;background:var(--accent-fg)}
.mapgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
@media(max-width:600px){.mapgrid{grid-template-columns:minmax(0,1fr)}}
.mapgrid label{font-size:13px;color:var(--mute);display:flex;flex-direction:column;gap:4px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;z-index:10;max-width:calc(100vw - 32px)}
.toast.bad{background:var(--bad);color:#fff}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  body{background:#fff;color:#000;padding:0}
  .side,.head,.compose,#resForm,.cols .meta,.chips,.toast,#histBox,#v-chat,#v-studio,#v-settings{display:none!important}
  .shell{display:block}.panel{border:0;box-shadow:none;background:#fff;color:#000}
  .sum{background:#fff;color:#000}
}
.ctl label output{white-space:nowrap}
.head.tight{margin-bottom:14px}
.scope + .ctl-grid{margin-top:4px}
.timing{font:400 11.5px var(--mono);color:var(--mute);margin-top:6px;font-variant-numeric:tabular-nums}

/* ---- agents, tafel, systeem ---- */
:root{--a1:#2f6f8f;--a2:#a4532d;--a3:#5d4fa0;--a4:#2f7d57;--a5:#a8466b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--a1:#6bb4d6;--a2:#e0905f;--a3:#a597e6;--a4:#5dbb8c;--a5:#e58aae}}
:root[data-theme="dark"]{--a1:#6bb4d6;--a2:#e0905f;--a3:#a597e6;--a4:#5dbb8c;--a5:#e58aae}
.pill-select{background:none;border:0;padding:0 2px;font:inherit;color:var(--ink);width:auto;max-width:150px}
.mono-av{--c:var(--a1);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 20px var(--display);color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface));border:2px solid color-mix(in srgb,var(--c) 55%,transparent)}
.mono-av.big{width:64px;height:64px;font-size:26px}.mono-av.sm{width:34px;height:34px;font-size:15px}.mono-av.xs{width:28px;height:28px;font-size:12px;border-width:1.5px}
.panel.flush{padding:0}
.agents-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1060px){.agents-grid{grid-template-columns:minmax(0,1fr)}}
.roster{padding:6px 22px}
.arow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border:0;border-top:1px solid var(--line);width:100%;background:none;text-align:left;color:var(--ink)}
.arow:first-child{border-top:0}
.arow[aria-pressed=true] .nm{color:var(--c)}
.arow .nm{font:700 20px var(--display)}.arow .rl{color:var(--mute);font-size:13.5px}
.arow .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute);background:var(--bg);white-space:nowrap}
.wavemini{display:flex;gap:2px;align-items:center;height:22px;--c:var(--a1)}.wavemini i{width:3px;border-radius:2px;background:var(--c);opacity:.75}
@media(max-width:560px){.arow{grid-template-columns:auto minmax(0,1fr)}.arow .wavemini{display:none}}
.steps{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 18px}
.steps button{background:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--mute)}
.steps button[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#setTabs{margin:0}
.form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.form label.check{flex-direction:row;color:var(--ink);font-size:13.5px;gap:8px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:560px){.two{grid-template-columns:minmax(0,1fr)}}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{border-radius:50%;padding:0;border:0;background:none}
.swatches button[aria-pressed=true] .mono-av{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--c)}
.voicepick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:560px){.voicepick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.voicepick button{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.voicepick button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.voicepick b{font:700 15px var(--display)}.voicepick span{font:400 11.5px var(--mono);color:var(--mute)}
.mem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.mem:first-of-type{border-top:0}.mem span{min-width:0;overflow-wrap:anywhere}
.mem-h{display:flex;gap:10px;align-items:center;margin:16px 0 4px}.mem-h:first-child{margin-top:0}
.mute{color:var(--mute);font-size:12.5px}
.table-wrap{position:relative;padding:22px 22px 8px}
.arc{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,3vw,36px);padding-top:26px;flex-wrap:wrap}
.seat{--c:var(--a1);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;background:none;border:0;color:var(--ink);transition:opacity .2s}
.seat[aria-pressed=false]{opacity:.38}
.seat.speaking .mono-av{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent);animation:ring 1.6s ease-in-out infinite}
.seat.thinking .mono-av{border-style:dashed}
@keyframes ring{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--c) 8%,transparent)}}
.seat .nm{font:700 15px var(--display)}.seat .st{font:400 11.5px var(--mono);color:var(--mute);min-height:16px}
.felt{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:26px 0 4px}
.tb-thread{display:flex;flex-direction:column;gap:16px;padding:8px 22px 0}
.tline{--c:var(--a1);display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.tline .who{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c);display:flex;gap:8px;align-items:center}
.tline .txt{overflow-wrap:anywhere}
.tline .tr{font-size:13px;color:var(--mute);margin-top:4px}
.tline.me{grid-template-columns:minmax(0,1fr);justify-items:end}
.tline.me .bub{background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:14px 14px 4px 14px;max-width:80%;overflow-wrap:anywhere}
.tline.me .tr{color:var(--mute)}
.tline mark{background:color-mix(in srgb,var(--c) 22%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.tag{font:500 10.5px var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:0 5px;text-transform:none;letter-spacing:0}
.composer{padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);margin-top:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.split{justify-content:space-between}
.row input[type=text],.row input[type=password],.row input[type=email]{flex:1;min-width:200px}
.sug{display:flex;gap:6px;flex-wrap:wrap}
.sug button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:3px 10px;font-size:13px;color:var(--ink)}
.rounds{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mute);flex-wrap:wrap}.rounds input{width:110px}.rounds output{font:500 13px var(--mono);color:var(--accent)}
.stop{border:1px solid var(--bad);color:var(--bad);background:none}
.mic.mini{width:44px;height:44px;box-shadow:none;flex:none}.mic.mini svg{width:20px;height:20px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);margin-bottom:20px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:18px 20px;border-left:1px solid var(--line)}.stat:first-child{border-left:0}
@media(max-width:760px){.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}
.stat b{display:block;font:700 26px var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stat span{font-size:13px;color:var(--mute)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
th{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;min-width:90px}.bar i{display:block;height:100%;background:var(--accent)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:20px}
@media(max-width:980px){.two-col{grid-template-columns:minmax(0,1fr)}}
.sec-t{font:700 20px var(--display);margin:0 0 4px}
.kvl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 0;border-top:1px solid var(--line)}.kvl:first-of-type{border-top:0}.kvl span:last-child{color:var(--mute);font-family:var(--mono);font-size:13px;text-align:right;overflow-wrap:anywhere}

.modal{position:fixed;inset:0;background:rgba(10,16,29,.55);display:grid;place-items:center;padding:16px;z-index:20}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(380px,100%);display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.modal-card h3{font:700 20px var(--display);margin:0}
.panel-soft{background:var(--accent-soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px}

.conv-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.conv-bar .chip[aria-pressed=true]{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.drawer{position:fixed;inset:0;background:rgba(10,16,29,.45);z-index:18;display:flex;justify-content:flex-end}
.drawer-card{width:min(420px,100%);height:100%;background:var(--surface);border-left:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.drawer-list{overflow:auto;display:flex;flex-direction:column;flex:1;min-height:0}
.conv-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 0;border-top:1px solid var(--line);align-items:center;text-align:left}
.conv-item:first-child{border-top:0}
.conv-item button.open{background:none;border:0;text-align:left;color:var(--ink);padding:0;min-width:0}
.conv-item .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.conv-item .m{font:400 12px var(--mono);color:var(--mute)}

.src-list{margin:0 0 16px;padding-left:22px;font-size:13.5px;opacity:.9}
.src-list a{color:inherit}
.steps-list{display:flex;flex-direction:column;gap:8px}

.netbar{position:fixed;left:0;right:0;top:0;z-index:30;background:var(--bad);color:#fff;text-align:center;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;font-size:14px}
/* mobiel: menu als onderbalk, met grote tikdoelen */
@media(max-width:880px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  nav.menu{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--side);border-top:1px solid var(--side-line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;width:auto;order:0}
  nav.menu button{flex-direction:column;gap:3px;padding:8px 1px;font-size:10.5px;justify-content:center;text-align:center;min-height:52px}
  nav.menu button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

.pal-card{width:min(520px,100%);gap:8px;align-self:start;margin-top:12vh}
.pal-list{display:flex;flex-direction:column;max-height:50vh;overflow:auto}
.pal-item{text-align:left;background:none;border:0;border-radius:8px;padding:10px 12px;color:var(--ink)}
.pal-item[aria-selected=true]{background:var(--accent-soft)}
.wz-card{width:min(460px,100%)}
.wz-card h3{font:700 22px var(--display);margin:0}
.seg button{padding-inline:6px}
/* ---- inlogpagina ---- */
.login-body{min-height:100vh;display:grid;place-items:center}
.login-wrap{width:min(920px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--surface)}
@media(max-width:760px){.login-wrap{grid-template-columns:minmax(0,1fr)}.login-side{display:none}}
.login-side{background:var(--side);color:var(--side-fg);padding:40px;display:flex;flex-direction:column;justify-content:space-between;min-height:440px}
.login-brand{font:700 34px var(--display);letter-spacing:-.02em}
.login-bars{display:flex;gap:7px;align-items:center;height:90px}
.login-bars i{width:9px;border-radius:5px;background:var(--accent);opacity:.9}
.login-bars i:nth-child(1){height:24%}.login-bars i:nth-child(2){height:55%}.login-bars i:nth-child(3){height:90%}.login-bars i:nth-child(4){height:62%}
.login-bars i:nth-child(5){height:36%}.login-bars i:nth-child(6){height:70%}.login-bars i:nth-child(7){height:28%}
.login-tag{color:var(--side-mute);margin:0;max-width:30ch}
.login-card{padding:40px;display:flex;flex-direction:column;gap:10px}
.login-card h1{font-size:30px}
.login-card label{font-size:13px;color:var(--mute);margin-top:6px}
.login-card .btn{margin-top:10px;padding:12px}
.login-code{display:flex;flex-direction:column;gap:10px}.login-ts{min-height:65px;margin-top:6px}.login-code .note{margin-top:4px}
.qr-box{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}.qr-box img{width:180px;height:180px;border-radius:10px;background:#fff;padding:6px;max-width:100%}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-family:var(--mono);font-size:14px}
.login-err{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad);border-radius:10px;padding:10px 12px;font-size:14px}
.lang-mini{display:flex;gap:2px;background:var(--surface2);border-radius:8px;padding:2px}
.lang-mini button{border:0;background:none;border-radius:6px;padding:4px 8px;font-size:12px;color:var(--mute)}
.lang-mini button[aria-pressed=true]{background:var(--surface);color:var(--ink)}

/* ---- gebruiker in de zijbalk ---- */
.me-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--side-line)}
.me-chip .who{min-width:0;flex:1}
.me-chip .who b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-chip .who span{font-size:11.5px;color:var(--side-mute)}
.me-chip button{background:none;border:0;color:var(--side-mute);padding:6px;border-radius:8px}
.me-chip button:hover{color:var(--side-fg)}
.me-chip svg{width:18px;height:18px}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:700 15px var(--display)}
.avatar.big{width:72px;height:72px;font-size:28px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
@media(max-width:880px){.me-chip .who{display:none}}
/* Installatiecentrum */
.inst-group{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.inst-group h3{font:700 17px var(--display);margin:0}
.inst-group>p{margin:0}
.inst-row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.inst-row.col{flex-direction:column;align-items:stretch}
.inst-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.inst-main small{color:var(--mute);font-variant-numeric:tabular-nums}
.inst-main .bar{margin-top:6px}
.inst-side{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chip-st{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.chip-st.ok{color:var(--ok);border-color:currentColor}
.chip-st.busy{color:var(--warn);border-color:currentColor;font-variant-numeric:tabular-nums}
.steps-code{font:12.5px/1.6 var(--mono);background:var(--surface2);border-radius:8px;padding:10px 12px;margin:0;overflow-x:auto;white-space:pre}
@media(max-width:560px){.inst-row{flex-direction:column;align-items:stretch}.inst-side{justify-content:flex-start}}
.inst-d{color:var(--mute);font-size:13.5px}
.inst-hint{font-size:13.5px;color:var(--warn);font-weight:500}
.inst-row.dim .inst-main b{color:var(--mute)}
.lnk{color:var(--accent);text-underline-offset:2px}
.wipe-count{font-weight:600;font-variant-numeric:tabular-nums;min-height:1.4em}
.modal-card.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
/* ---------- Tafel: weergavekeuze ---------- */
.look-seg{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.look-seg button{border:0;background:none;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:500;color:var(--mute)}
.look-seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
#v-table .head{align-items:center}
#v-table .head>.look-seg{margin-left:auto;margin-right:8px}
.tb-cap{display:none}
.seat .rl,.seat .eq{display:none}
.seat .who-b{display:contents}

/* ---------- Tafel: Salon ----------
   Een ronde tafel in een boog: kleine ronde gezichten, jij onderaan in het midden. Wie spreekt, krijgt een lichte "aurora" in zijn kleur, grote live
   ondertitels en een golflijn die met de stem meebeweegt. Alleen thema-kleuren: licht en donker werken vanzelf. Alleen transform en opacity bewegen. */
.look-salon .panel.flush{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:var(--surface)}
.look-salon .table-wrap{padding:14px 16px 0}
.look-salon .tb-cap{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:center}
.look-salon .arc{position:relative;display:block;height:clamp(108px,16vh,220px);margin:2px auto 0;max-width:760px;padding:0;flex:none}
.look-salon .felt{display:none}
.look-salon .seat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;background:none;border:0;color:var(--ink);
  transition:transform .45s var(--ease,cubic-bezier(.22,.8,.24,1)),opacity .3s}
.look-salon .seat:hover{transform:translate(-50%,-50%) scale(1.06)}
.look-salon .seat[aria-pressed=false]{opacity:.38}
.face{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid color-mix(in srgb,var(--c,var(--accent)) 55%,var(--surface));background:var(--surface2);display:block}
.face.mono{display:grid;place-items:center;font:italic 400 24px 'Instrument Serif',Georgia,serif;color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 13%,var(--surface))}
.face.big{width:60px;height:60px;font-size:28px}
.look-salon .seat .mono-av,.look-salon .seat .eq,.look-salon .seat .rl{display:none}
.look-salon .seat .who-b{display:contents}
.look-salon .seat .nm{font:600 12.5px var(--body);letter-spacing:.01em;white-space:nowrap}
.look-salon .seat .st{position:absolute;right:-2px;top:0;width:12px;height:12px;border-radius:50%;background:var(--ok);border:2px solid var(--surface);font-size:0;color:transparent;overflow:hidden;min-height:0}
.look-salon .seat[aria-pressed=false] .st{background:var(--mute)}
.look-salon .seat.thinking .st{background:var(--warn);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.look-salon .seat.speaking{transform:translate(-50%,-50%) scale(1.22)}
.look-salon .seat.speaking .face{border-color:var(--c);box-shadow:0 0 0 calc(3px + var(--lvl,.3) * 9px) color-mix(in srgb,var(--c) 28%,transparent)}
.look-salon .seat.speaking .st{background:var(--c)}
.look-salon .seat .hand{position:absolute;left:-4px;top:-6px;padding:1px 7px;border-radius:999px;background:var(--warn);color:#fff;font:600 11px var(--body)}
.look-salon .seat.done .hand{opacity:.4}
.look-salon .seat.me{cursor:default;pointer-events:none}
.look-salon .seat.me:hover{transform:translate(-50%,-50%)}
.look-salon .seat.me .face{width:46px;height:46px;border-color:var(--line);font-size:18px}
.look-salon .seat.me.hearing .face{border-color:var(--ok);box-shadow:0 0 0 calc(3px + var(--lvl,0) * 10px) color-mix(in srgb,var(--ok) 26%,transparent)}
.look-salon .seat.me .nm{color:var(--mute)}

.salon-stage{position:relative;overflow:hidden;isolation:isolate;margin:10px clamp(12px,3vw,28px) 0;padding:18px clamp(16px,3vw,32px) 16px;border-radius:20px;border:1px solid var(--line);
  background:var(--surface2);height:clamp(100px,15vh,190px);flex:none;--c:var(--accent);display:flex;flex-direction:column;gap:8px}
.salon-stage .aurora{position:absolute;inset:-30%;z-index:-1;pointer-events:none;opacity:.55;transition:opacity .8s}
.salon-stage .aurora i{position:absolute;width:60%;height:70%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 55%,transparent),transparent);will-change:transform;animation:drift 18s ease-in-out infinite alternate}
.salon-stage .aurora i:nth-child(1){left:6%;top:12%}
.salon-stage .aurora i:nth-child(2){right:4%;bottom:6%;animation-duration:24s;animation-delay:-8s;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),transparent)}
@keyframes drift{to{transform:translate3d(8%,6%,0) scale(1.15)}}
.salon-stage.speaking .aurora{opacity:.9}
.salon-stage .who{display:flex;align-items:center;gap:12px;min-height:60px}
.salon-stage .wn{display:flex;flex-direction:column;min-width:0}
.salon-stage .wn b{font:400 28px/1 'Instrument Serif',Georgia,serif;letter-spacing:.005em}
.salon-stage .wr{font-size:12.5px;color:var(--mute)}
.salon-stage .stag{margin-left:auto;padding:4px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--ink)}
.salon-stage .stag:empty{display:none}
.salon-stage .scap{margin:0;flex:1;min-height:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;font:400 clamp(18px,2.4vw,28px)/1.3 'Instrument Serif',Georgia,serif;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.salon-stage .scap.me{font:500 clamp(16px,1.8vw,20px)/1.4 var(--body);color:var(--ok)}
.salon-stage .wave{display:flex;gap:3px;align-items:center;height:26px;opacity:.0;transition:opacity .3s}
.salon-stage.speaking .wave,.salon-stage.hearing .wave{opacity:1}
.salon-stage .wave i{flex:1;max-width:6px;height:100%;border-radius:3px;background:var(--c);transform-origin:50% 50%;transform:scaleY(.12)}
.salon-stage.hearing .wave i{background:var(--ok)}
.salon-stage.speaking .wave i,.salon-stage.hearing .wave i{transform:scaleY(calc(.12 + var(--lvl,.3) * var(--k,.7)))}
.salon-stage .wave i:nth-child(4n+1){--k:.55}.salon-stage .wave i:nth-child(4n+2){--k:.95}.salon-stage .wave i:nth-child(4n+3){--k:.7}.salon-stage .wave i:nth-child(4n){--k:1}
.salon-stage .wave i:nth-child(3n){transition:transform .09s}
.salon-stage.empty{justify-content:center}
.salon-stage.empty .who,.salon-stage.empty .wave{display:none}
.salon-stage.empty .scap{min-height:0;color:var(--mute);text-align:center;font-size:clamp(17px,2vw,22px)}
.look-salon .tb-thread{padding:12px clamp(16px,3vw,30px) 6px}
.look-salon .composer{padding-top:10px}
@keyframes talk{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(.85)}}
#v-table:not(.lv) .salon-stage.speaking .wave i{animation:talk .9s ease-in-out infinite;animation-delay:calc(var(--k,.7) * -1s)}
@media (prefers-reduced-motion:reduce){#v-table:not(.lv) .salon-stage.speaking .wave i{animation:none;transform:scaleY(.5)}.salon-stage .aurora i{animation:none}.look-salon .seat.thinking .st{animation:none}}
@media (max-width:640px){
  .look-salon .arc{height:190px}
  .face{width:44px;height:44px}.face.mono{font-size:20px}.face.big{width:52px;height:52px}
  .look-salon .seat .nm{font-size:11px}
  .salon-stage{margin:8px 10px 0;padding:14px}
  .salon-stage .wn b{font-size:24px}
}
.rvc-box{display:flex;flex-direction:column;gap:10px}
.rvc-up{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.filelab{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute)}
.rvc-ctl{grid-column:1/-1}
.howto{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink);font-size:14px}
.table-scroll{overflow-x:auto}
table.calls{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
table.calls th{text-align:left;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:6px 8px;border-bottom:1px solid var(--line)}
table.calls td{padding:8px;border-bottom:1px solid var(--line)}
.note.warn{color:var(--warn)}
.stack{display:flex;flex-direction:column;gap:12px}
/* Noodknop */
.em-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--bad) 14%,var(--surface));
  border:1px solid var(--bad);color:var(--ink);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.em-banner b{color:var(--bad)}
.em-card{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--bad);
  border-radius:12px;background:color-mix(in srgb,var(--bad) 6%,var(--surface));margin-bottom:18px}
.em-card.on{background:color-mix(in srgb,var(--bad) 14%,var(--surface))}
.em-card>div{min-width:0;flex:1}
.btn.danger-solid{background:var(--bad);color:var(--surface);border-color:var(--bad)}
.sum-row td{color:var(--mute);font-size:13px;padding-top:0;border-bottom:1px solid var(--line)}
.talk-select{max-width:150px}
.sysrules{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px;background:var(--surface)}
/* Beheer: status en kosten */
.ops-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:18px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.alert{padding:8px 12px;border-radius:10px;font-size:14px;border:1px solid var(--line)}
.alert.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface))}.alert.bad b{color:var(--bad)}
.alert.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}.alert.warn b{color:var(--warn)}
.alert.ok{border-color:var(--ok);color:var(--ok)}
.rates{display:inline-flex;gap:4px}.rate{border:1px solid var(--line);background:none;border-radius:8px;padding:2px 8px;opacity:.55}.rate.on{opacity:1;background:var(--accent-soft);border-color:var(--accent)}
.menu button.has-alert::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bad);margin-left:auto;align-self:center}
.live-partial{font-style:italic;color:var(--mute)}
.tline.me.partial .bub{opacity:.7;font-style:italic}
.pill.hearing{border-color:var(--accent);color:var(--ink)}
.lvl-bar{display:inline-block;width:44px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.lvl-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .08s linear}
.seat.speaking .mono-av{box-shadow:0 0 0 calc(4px + var(--lvl,0) * 12px) color-mix(in srgb,var(--c) 26%,transparent);transition:box-shadow .06s linear}
/* live: het echte geluidsniveau stuurt ring en staafjes (de vaste animaties zouden het overschrijven) */
#v-table.lv .seat.speaking .mono-av,#v-table.lv .eq i{animation:none}

/* ---- Mijn account (Hesabım): zijmenu, kop met identiteit, kaarten ---- */
.acct{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.acct-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px}
.acct-nav button{display:flex;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:10px;background:none;text-align:left;color:var(--mute);font:500 14px var(--body)}
.acct-nav button:hover{background:var(--surface2);color:var(--ink)}
.acct-nav button[aria-current=page]{background:var(--accent-soft);color:var(--ink)}
.acct-nav .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.acct-nav button[aria-current=page] .ic{color:var(--accent)}
.acct-main{display:flex;flex-direction:column;gap:16px;min-width:0;max-width:760px}
.acct-head{display:flex;align-items:center;gap:18px;padding:4px 0 10px;border-bottom:1px solid var(--line)}
.acct-id{min-width:0}
.acct-id h2{margin:0;font:700 24px/1.15 var(--display);text-wrap:balance}
.acct-id p{margin:2px 0 0;color:var(--mute);overflow-wrap:anywhere}
.acct-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px;font-size:12.5px;color:var(--mute)}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.acard-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px}
.acard-h h3{margin:0;font:700 16px/1.3 var(--display)}
.acard-h p{margin:3px 0 0;color:var(--mute);font-size:13.5px;max-width:62ch}
.acard-b{padding:16px 20px 18px;border-top:1px solid var(--line)}
.acard.danger{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.acard.danger h3{color:var(--bad)}
.acct-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.acct-form .wide,.acct-actions{grid-column:1/-1}
.acct-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.acct-field>span{font-size:12.5px;font-weight:600;color:var(--mute)}
.acct-field input{width:100%}
.acct-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.acct-dirty{font-size:12.5px;color:var(--warn)}
.acct-photo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.acct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.acct-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.acct-list li:first-child{border-top:0;padding-top:0}
.acct-list li>div{display:flex;flex-direction:column;min-width:0}
.acct-list b{display:flex;align-items:center;gap:8px;font-weight:600}
.acct-list small{color:var(--mute)}
.acct-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.acct-stat{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.acct-stat>span:first-child{font-size:12px;color:var(--mute)}
.acct-strength{display:flex;align-items:center;gap:10px}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:160px}
.pw-meter i{height:5px;border-radius:3px;background:var(--line);transition:background .2s}
.pw-meter[data-s="0"] i:nth-child(-n+1){background:var(--bad)}
.pw-meter[data-s="1"] i:nth-child(-n+2){background:var(--warn)}
.pw-meter[data-s="2"] i:nth-child(-n+3){background:var(--ok)}
.pw-meter[data-s="3"] i{background:var(--ok)}
.pw-label{font-size:12.5px;color:var(--mute)}
.chip-st.warn{color:var(--warn);border-color:currentColor}
@media (max-width:760px){
  .acct{grid-template-columns:1fr;gap:14px}
  .acct-nav{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .acct-nav button{white-space:nowrap;border:1px solid var(--line)}
  .acct-form{grid-template-columns:1fr}
  .acct-stats{grid-template-columns:1fr}
  .acct-head{align-items:flex-start}
}
.acard a.btn{text-decoration:none}

/* ---- taken en herinneringen: bel in de zijbalk en de lijst ---- */
.bell{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--side-line);border-radius:12px;background:none;color:var(--side-fg);font:500 13.5px var(--body);cursor:pointer}
.bell:hover{background:color-mix(in srgb,var(--side-fg) 8%,transparent)}
.bell svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bell-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font:600 11.5px var(--body)}
.tk-card{width:min(560px,100%);display:flex;flex-direction:column;gap:12px}
.tk-card h3{margin:0}
.tk-list{list-style:none;margin:0;padding:0;max-height:min(52vh,420px);overflow:auto;border-top:1px solid var(--line)}
.tk-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 2px;border-bottom:1px solid var(--line)}
.tk-list li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-list li b{font-weight:600;overflow-wrap:anywhere}
.tk-list li small{color:var(--mute);overflow-wrap:anywhere}
.tk-list li.late small:last-child{color:var(--warn)}
.tk-list li input[type=checkbox]{margin-top:3px}
.tk-list .tk-empty{display:block;color:var(--mute);padding:16px 2px}
.tk-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.tk-push{font-size:13px;color:var(--mute)}
@media (max-width:560px){.tk-add{grid-template-columns:1fr}}
@media(max-width:880px){.bell{width:auto}.bell-t{display:none}}
.tk-tabs{margin:0}
.cr-tl{position:relative;height:18px;border-radius:9px;background:var(--surface2);margin:6px 0}.cr-ev{position:absolute;top:3px;width:3px;height:12px;border-radius:2px;background:var(--accent)}
.cr-evl{font:400 11.5px var(--mono);color:var(--mute);overflow-wrap:anywhere}.cr-tx{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;padding:10px;border-radius:10px;background:var(--surface2);font:400 13px var(--mono);margin:6px 0 0}
.look-salon .seat.me .avatar.face{display:grid;place-items:center;font:700 17px var(--display);color:var(--accent);background:var(--accent-soft)}

/* ---------- Masa vult het scherm: de pagina groeit nooit, alleen de berichtenlijst scrolt ---------- */
#v-table:not([hidden]){height:calc(100dvh - 44px);min-height:460px;gap:12px}
#v-table .head,#v-table .conv-bar{flex:none}
#v-table .panel.flush{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}
#v-table .table-wrap,#v-table .composer{flex:none}
#v-table .composer{margin-top:0}
#v-table .tb-thread{flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:12px}
#v-table .tline{content-visibility:auto;contain-intrinsic-size:auto 72px;min-width:0}
#v-table .tline>div{min-width:0}
#v-table .tline .txt{overflow-wrap:anywhere;word-break:break-word}
#v-table .tline .txt a{overflow-wrap:anywhere}
.tb-older{align-self:center;font:500 11.5px var(--mono);color:var(--mute);padding:4px 10px;border-radius:999px;background:var(--surface2)}
.tb-jump{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--cmp-h,150px) + 10px);z-index:5;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--ink);color:var(--bg);font:600 12.5px var(--body);box-shadow:var(--shadow);cursor:pointer}
.tb-jump[hidden]{display:none}
.look-salon .panel.flush{display:flex}
@media (max-height:700px){
  .look-salon .arc{height:clamp(120px,22vh,170px)}
  .salon-stage{height:clamp(110px,20vh,150px)}
  .salon-stage .wave,.look-salon .tb-cap{display:none}
  .look-salon .seat .nm{font-size:11px}
}

@media (max-height:900px){#v-table .head .sub{display:none}#v-table .tb-thread{min-height:150px}}
#v-table .tb-thread{min-height:140px}
.salon-stage{flex:none}

#v-table .composer{padding:10px clamp(14px,2.4vw,22px) 12px;gap:8px}
@media (max-height:900px){.look-salon .tb-cap{display:none}.look-salon .table-wrap{padding-top:8px}.salon-stage{padding:12px 18px}.salon-stage .who{min-height:48px}.face.big{width:48px;height:48px}}
@media (max-height:900px){.salon-stage{height:clamp(124px,17vh,170px)}.salon-stage .wave{display:none}.salon-stage .scap{font-size:clamp(17px,2vw,22px)}.look-salon .arc{height:clamp(100px,14vh,190px)}}
@media (max-width:880px){
  #v-table:not([hidden]){min-height:600px}
  #v-table:not(.look-salon) .arc{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:12px;padding:10px 4px 2px;scrollbar-width:none}
  #v-table:not(.look-salon) .arc::-webkit-scrollbar{display:none}
  #v-table:not(.look-salon) .seat{flex:none}
  #v-table:not(.look-salon) .table-wrap{padding:8px 12px 0}
  #v-table:not(.look-salon) .felt{display:none}
}
@media (max-width:880px){
  #v-table:not([hidden]){min-height:640px}
  #v-table .sug{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #v-table .sug::-webkit-scrollbar{display:none}
  #v-table .sug button{flex:none}
  #v-table .composer>.row:first-of-type{flex-wrap:nowrap}
  #v-table .composer .row input[type=text]{min-width:0}
  #v-table .composer .rounds{gap:8px}
}

/* Kamers: echte mensen aan de tafel */
.room-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px clamp(14px,2.4vw,22px);border-bottom:1px solid var(--line);flex:none;min-width:0}
.room-bar .rlabel{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.room-bar input,.room-bar select{min-width:0;max-width:170px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:13px}
.room-bar .rinv{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.room-bar .rinv em{font-style:normal;color:var(--mute)}
.room-bar .rpeople{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.room-bar .rp{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 2px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.room-bar .rp.talk{border-color:var(--ok,#2a9d6f);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok,#2a9d6f) 25%,transparent)}
.room-bar .rp .avatar{width:22px;height:22px;font-size:11px}
.seat.human{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,0)}
.seat.human .face,.seat.human .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}
.seat.human.hearing .face,.seat.human.hearing .avatar{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--ok,#2a9d6f)}
.tline.me.other{justify-items:start}
.tline.me.other .bub{background:var(--panel2,var(--line));color:var(--ink);border-radius:14px 14px 14px 4px}
.tline .bywho{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.room-bar .rhint{font-size:12px;color:var(--mute);max-width:320px}

/* Salon-podium rustiger: geen zwevende kleurvlekken of golfbalken meer; een duidelijke kleurrand, jouw eigen kopje als jij praat en een klein geluidsteken */
.salon-stage .aurora,.salon-stage .wave{display:none!important}
.salon-stage{background:var(--surface2);border-left:4px solid var(--c);transition:border-color .25s}
.salon-stage .seq{display:inline-flex;align-items:center;gap:3px;height:18px;margin-left:4px;opacity:0;transition:opacity .2s}
.salon-stage.speaking .seq,.salon-stage.hearing .seq{opacity:1}
.salon-stage .seq i{width:3px;height:100%;border-radius:2px;background:var(--c);transform-origin:50% 50%;transform:scaleY(.25);transition:transform .09s}
.salon-stage.hearing .seq i{transform:scaleY(calc(.25 + var(--lvl,.2) * var(--k,.8)))}
.salon-stage.speaking:not(.hearing) .seq i{animation:talk .9s ease-in-out infinite;animation-delay:calc(var(--k,.8) * -1s)}
.salon-stage .seq i:nth-child(2){--k:1}.salon-stage .seq i:nth-child(3){--k:.6}.salon-stage .seq i:nth-child(4){--k:.9}
@media (prefers-reduced-motion:reduce){.salon-stage.speaking:not(.hearing) .seq i{animation:none;transform:scaleY(.6)}}
.salon-stage.empty .seq{display:none}

html.theming *,html.theming *::before,html.theming *::after{transition:none!important}
.room-bar .rp .rk{border:0;background:transparent;color:var(--mute);font-size:16px;line-height:1;padding:0 2px;cursor:pointer}.room-bar .rp .rk:hover{color:var(--bad)}

/* Mijn account: weergave, gebruik, toggles en kamers */
.acct .seg{background:var(--surface2);border:1px solid var(--line);width:max-content;max-width:100%;flex-wrap:wrap}
.acct .seg button{border:0;background:none;color:var(--mute);padding:7px 12px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}
.acct .seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.acct-me{min-width:0;margin-right:-0px}
.acct-main:has(.acct-me){max-width:none}
.acct-bars{display:flex;align-items:flex-end;gap:3px;height:96px;margin-top:14px}
.acct-bars i{flex:1;min-width:0;background:var(--accent);opacity:.75;border-radius:3px 3px 0 0}
.quota{display:flex;flex-direction:column;gap:6px}
.quota .bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.quota .bar i{display:block;height:100%;background:var(--accent)}
.acard .toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.acard .toggle:first-child{border-top:0}
.acard .toggle span{display:flex;flex-direction:column;gap:2px}
.acard .toggle small{color:var(--mute);font-size:12.5px}
.acct-rooms .chip-st{margin-left:8px}

/* Gebruikers-menu */
.usr-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.usr-new summary{cursor:pointer;font-weight:600;padding:12px 16px}
.usr-new .acct-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.usr-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.usr-bar input[type=search]{flex:1 1 260px;min-width:0}
.usr-seg{width:max-content;max-width:100%;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--line)}
.usr-seg button{border:0;background:none;color:var(--mute);padding:7px 12px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}
.usr-seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.usr-list{display:flex;flex-direction:column;gap:8px}
.usr-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.usr-row.off{opacity:.78;border-style:dashed}
.usr-who{display:flex;gap:12px;align-items:center;min-width:0}
.usr-who>div{display:flex;flex-direction:column;min-width:0}
.usr-who small,.usr-st small,.usr-n small{color:var(--mute);font-size:12px;overflow-wrap:anywhere}
.usr-who b{overflow-wrap:anywhere}
.usr-st{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.usr-n{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px}
.usr-act{justify-content:flex-end}
@media (max-width:1000px){.usr-row{grid-template-columns:minmax(0,1fr) auto}.usr-st,.usr-n{grid-column:1}.usr-act{grid-column:2;grid-row:1}.usr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.usr-st{min-width:0}.usr-st .chip{white-space:normal;text-align:left;max-width:100%}
.usr-row{grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto}

/* Installeren: zichtbare activiteit als er geen percentage is */
.bar.indet{position:relative;overflow:hidden}
.bar.indet i{position:absolute;inset:0 auto 0 0;width:35%;animation:indet 1.4s ease-in-out infinite}
@keyframes indet{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.bar.indet i{animation:none;width:100%;opacity:.5}}
.inst-detail{display:block;margin-top:4px;color:var(--mute);font:12px var(--mono);overflow-wrap:anywhere}