:root{--bg:#f5f4f0;--card:#fff;--ink:#000;--muted:#67665f;--line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.16);--brand:#000;--onbrand:#fff;--bar:var(--brand);--onbar:var(--onbrand);--ok:#2e9e5b;--warn:#d9822b;--bad:#c93c3c;--soft:#f0efeb;--radius:16px;--okSoft:#e4f5ea;--badSoft:#fbe4e4;--mark:#fff3b0;--grid:#fbfaf8;--gridLine:rgba(0,0,0,.06);--orgLine:#c4c0b6;
  --ring:color-mix(in srgb,var(--brand) 28%,transparent);--tint:color-mix(in srgb,var(--brand) 7%,transparent);--focusLine:color-mix(in srgb,var(--brand) 55%,var(--line2));
  --sh1:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.03);--sh2:0 8px 24px -12px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);--sh3:0 16px 48px -16px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.04);--edge:none;
  --halo1:rgba(0,0,0,.035);--halo2:rgba(80,120,160,.05);
  --ease:cubic-bezier(.16,1,.3,1);--easeIn:cubic-bezier(.7,0,.84,0);--t1:150ms;--t2:200ms;color-scheme:light}
html[data-theme="dark"]{--bg:#0a0b0d;--card:#121317;--ink:#f2f2f0;--muted:rgba(255,255,255,.62);--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--soft:rgba(255,255,255,.05);--ok:#3fbf74;--warn:#e8963f;--bad:#e36363;--okSoft:rgba(63,191,116,.16);--badSoft:rgba(227,99,99,.16);--mark:#5a4a00;--grid:#0e0f12;--gridLine:rgba(255,255,255,.05);--orgLine:#3a3b40;
  --sh1:0 1px 2px rgba(0,0,0,.2);--sh2:0 12px 32px -16px rgba(0,0,0,.45);--sh3:0 24px 64px -24px rgba(0,0,0,.5);--edge:inset 0 1px 0 rgba(255,255,255,.05);
  --halo1:rgba(255,255,255,.05);--halo2:rgba(43,255,248,.04);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14.5px/1.5 "Neue Montreal","Switzer",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background-image:radial-gradient(900px 600px at -5% -10%,var(--halo1),transparent 60%);background-attachment:fixed}
h1,h2,h3{letter-spacing:-.02em}
::selection{background:var(--ring)}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid transparent;background-clip:padding-box;border-radius:8px}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
:where(input,textarea,select):focus-visible{outline:0}
.hidden{display:none!important}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
.btn{border:1px solid var(--line2);background:var(--card);border-radius:8px;padding:8px 14px;cursor:pointer;white-space:nowrap;font-weight:500;font-size:14px;line-height:1.3;box-shadow:var(--sh1),var(--edge);transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease),transform var(--t1) var(--ease),opacity var(--t1) var(--ease)}
.btn:hover{background:var(--soft);border-color:var(--line2)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.primary{background:var(--brand);color:var(--onbrand);border-color:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.06)}
.btn.primary:hover{opacity:.92;background:var(--brand)}
.btn:disabled,.btn:disabled:hover,.btn.primary:disabled:hover{opacity:.4!important;cursor:default;transform:none;pointer-events:none}
.btn.small{padding:5px 10px;font-size:13px;border-radius:7px}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--soft);border-color:transparent}
.btn.ok{border-color:var(--ok);color:var(--ok)}
.btn.bad{border-color:var(--bad);color:var(--bad)}
.btn.rec{border-color:var(--bad);color:var(--bad)}
.btn.rec.on{background:var(--bad);color:#fff}
a.btn{color:inherit;text-decoration:none;display:inline-block}
.muted{color:var(--muted)}
.small{font-size:12px}
.mt{margin-top:10px}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--warn);color:#fff;font-size:12px;line-height:18px;text-align:center;vertical-align:middle}
.badge:empty{display:none}
.pill{font-size:12px;padding:2px 8px;border-radius:9px;background:var(--soft);color:var(--muted);font-weight:500}
.pill.on{background:var(--okSoft);color:var(--ok)}
.pill.rec{background:var(--badSoft);color:var(--bad)}
.brand{display:flex;align-items:center;gap:8px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .brand{max-width:220px}
.duck{--ds:26px;--de:var(--onbrand);position:relative;display:inline-block;width:var(--ds);height:var(--ds);border-radius:50%;background:var(--brand);flex:none;vertical-align:middle;transform-origin:50% 62%;animation:duckNod 7.3s ease-in-out infinite}
.duck i{position:absolute;left:calc(var(--ds)*.27);top:calc(var(--ds)*.31);width:calc(var(--ds)*.19);height:calc(var(--ds)*.19);border-radius:50%;background:var(--de);box-shadow:calc(var(--ds)*.31) 0 0 var(--de);animation:duckBlink 4.6s ease-in-out infinite}
.duck:after{content:"";position:absolute;left:calc(var(--ds)*.4);top:calc(var(--ds)*.52);width:calc(var(--ds)*.16);height:calc(var(--ds)*.16);transform-origin:0 100%;border-left:calc(var(--ds)*.085) solid var(--de);border-bottom:calc(var(--ds)*.085) solid var(--de);border-radius:0 0 0 calc(var(--ds)*.03);transform:rotate(45deg);animation:duckQuack 7.3s ease-in-out infinite}
.duck.sm{--ds:20px}.duck.lg{--ds:.9em}.duck.xl{--ds:64px;margin-bottom:18px}
.brand:hover .duck,a:hover>.duck{animation:duckTilt 300ms ease-out forwards}
.brand:hover .duck:after,a:hover>.duck:after{animation:duckChatter 300ms ease-in-out infinite}
.av.duck{--ds:34px;--de:#fff;background:var(--db,var(--brand));display:grid}
.av.duck,.av.duck i,.av.duck:after{animation-delay:var(--dl,0s)}
.av.blank{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line2)}
.teamCard .head .av.duck{--ds:44px}
.av.tiny.duck{--ds:18px}
.orgNode .av.duck{--ds:40px}
#botList li:hover .av.duck:after,.ovHead:hover .av.duck:after,.teamCard .head:hover .av.duck:after,.orgNode:hover .av.duck:after{animation:duckChatter 300ms ease-in-out infinite}
.avPick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.avPick .seg button{padding:4px 9px;font-size:12px}
@keyframes duckBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes duckQuack{0%,84%,95%,100%{transform:rotate(45deg)}86%,90%{transform:scale(.85,1.3) rotate(45deg)}88%,92%{transform:scale(.95,1.1) rotate(45deg)}}
@keyframes duckNod{0%,84%,100%{transform:rotate(0)}88%,94%{transform:rotate(-9deg)}91%{transform:rotate(-5deg)}}
@keyframes duckTilt{to{transform:rotate(-11deg)}}
@keyframes duckChatter{0%,100%{transform:rotate(45deg)}50%{transform:scale(.85,1.3) rotate(45deg)}}
/* reduce motion: no nod, tilt or hover chatter (the whole mark moving); blink and quack stay, they change shape in place */
@media (prefers-reduced-motion:reduce){.duck{animation:none!important}.brand:hover .duck:after,a:hover>.duck:after,#botList li:hover .av.duck:after,.ovHead:hover .av.duck:after,.teamCard .head:hover .av.duck:after,.orgNode:hover .av.duck:after{animation:duckQuack 7.3s ease-in-out var(--dl,0s) infinite}}
/* login + dialogs */
.login{min-height:100%;display:grid;place-items:center;padding:16px;position:relative;overflow:hidden;isolation:isolate}
.login .card{position:relative;z-index:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;width:min(420px,100%);display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh3),var(--edge)}
.login .card{padding:32px;gap:16px}
.card.wideCard{width:min(820px,100%)}
.card h1{margin:4px 0 6px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.login .btn.primary{padding:11px 14px;font-size:15px;border-radius:10px}
dialog{border:0;border-radius:var(--radius);padding:0;background:transparent;max-height:92vh;max-width:96vw;overflow:auto}
dialog[open]{animation:dlgIn var(--t2) var(--ease)}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog[open]::backdrop{animation:fadeIn var(--t2) var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
input,textarea,select{border:1px solid var(--line2);border-radius:8px;padding:9px 12px;background:var(--card);color:var(--ink);font-size:14px;box-shadow:var(--edge);transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
input:hover,textarea:hover,select:hover{border-color:var(--line2)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--focusLine);box-shadow:0 0 0 3px var(--ring)}
input:disabled{background:var(--soft);color:var(--muted);box-shadow:none}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.seg button{border:0;background:transparent;color:var(--muted);padding:5px 12px;cursor:pointer;font-size:13px;font-weight:500;border-radius:6px;transition:background var(--t1) var(--ease),color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh1),var(--edge)}
.err{color:var(--bad);margin:0;min-height:1em;font-size:13px}
/* layout */
.app{display:grid;grid-template-columns:260px 1fr;grid-template-rows:44px 48px 1fr;height:100vh;position:relative;isolation:isolate}
.platbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;background:var(--bar);color:var(--onbar);box-shadow:inset 0 -1px 0 var(--line)}
.platbar .brand{color:var(--onbar);font-size:15px;cursor:pointer;border-radius:8px;padding:3px 6px;margin-left:-6px;transition:background var(--t1) var(--ease)}
.platbar .brand:hover{background:rgba(255,255,255,.1)}
.platbar .duck{background:var(--onbar);--de:var(--bar)}
.brand img{height:28px;width:auto;max-width:160px;object-fit:contain;display:block}
.platbar .brand img{height:30px;background:#fff;border-radius:8px;padding:2px}
.login .brand img{height:44px}
.platRight{display:flex;align-items:center;gap:6px}
.platbar .btn.ghost{color:var(--onbar);opacity:.8;border-radius:999px;font-size:13px;padding:5px 11px}
.platbar .btn.ghost:hover{background:rgba(255,255,255,.1);opacity:1}
.platbar .btn.ghost.on{background:rgba(255,255,255,.14);opacity:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.userChip{display:inline-flex;align-items:center;gap:8px;border:0;background:rgba(255,255,255,.1);color:var(--onbar);border-radius:999px;padding:3px 12px 3px 3px;cursor:pointer;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background var(--t1) var(--ease)}
.userChip:hover{background:rgba(255,255,255,.18)}
.avatar{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-grid;place-items:center;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.big{width:72px;height:72px;background:var(--soft);color:var(--muted)}
.avatar.big .ic{width:30px;height:30px}
.top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--card)}
.topLeft{min-width:120px}
.topHintBtn{border:0;background:transparent;padding:4px 0;cursor:default;text-align:left}
.phoneOnly{display:none!important}
.topLeft .botName{font-weight:600;color:var(--ink);font-size:14px}
.topLeft .viewName{font-weight:600;color:var(--ink);font-size:14px;letter-spacing:-.01em}
.colorIn{width:44px;height:38px;padding:2px;border-radius:8px}
.logoBox{height:72px;border:1px dashed var(--line);border-radius:8px;display:grid;place-items:center;background:var(--card);padding:8px}
.logoBox img{max-height:56px;max-width:100%;object-fit:contain}
.provGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:8px}
.integ .pill.plan{background:var(--brand);color:var(--onbrand)}
.tabs{display:flex;gap:2px;padding:3px;background:var(--soft);border-radius:8px;border:1px solid var(--line)}
.tabs button{border:0;background:transparent;padding:5px 12px;border-radius:6px;cursor:pointer;color:var(--muted);font-weight:500;font-size:13.5px;transition:background var(--t1) var(--ease),color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh1),var(--edge)}
.bots{border-right:1px solid var(--line);padding:12px;overflow:auto}
.view{overflow:auto;min-height:0}
.paneTitle{font-size:13px;color:var(--ink);margin:8px 6px 6px;font-weight:500}
#botList,#threadList,#activity,.cards{list-style:none;margin:0;padding:0}
#botList li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
#botList li:hover{background:var(--soft)}
#botList li.on{background:var(--card);border-color:var(--line);box-shadow:var(--sh1),var(--edge)}
.av{position:relative;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--onbrand);display:grid;place-items:center;font-weight:600;font-size:13px;text-transform:uppercase;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.av .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--card);background:var(--bad)}
.av .dot.on{background:var(--ok)}
.botMeta{min-width:0;flex:1}
.botMeta .n{font-weight:600}
.botMeta .d{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity li{padding:6px 8px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);overflow-wrap:anywhere}
.activity li b{color:var(--ink)}
.activity .when{display:block;font-size:11px;color:var(--muted);margin-top:2px}
/* chat */
.chat{display:grid;grid-template-columns:250px 1fr;min-height:0}
.threads{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.threadsHead{display:flex;align-items:center;justify-content:space-between;padding:12px;font-weight:600;border-bottom:1px solid var(--line)}
#threadList{overflow:auto;flex:1}
.threadsSearch{display:block;padding:8px 12px 6px;border-bottom:1px solid var(--line)}
.tsRow{display:flex;align-items:center;gap:8px}
.tsRow>.ic{width:16px;height:16px;flex:none;color:var(--muted)}
.tsRow input{flex:1;min-width:0;padding:7px 10px;font-size:13px}
.tsRow input::-webkit-search-cancel-button{display:none}
.tsRow .iconbtn{flex:none}
.tsAdv{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0 20px;padding:3px 6px 3px 2px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;border-radius:6px;transition:color var(--t1) var(--ease)}
.tsAdv:hover{color:var(--ink)}
.tsAdv .chev{width:14px;height:14px;transition:transform var(--t1) var(--ease)}
.tsAdv[aria-expanded="true"] .chev{transform:rotate(90deg)}
.tsBadge{min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:var(--brand);color:var(--onbrand);font-size:10px;font-weight:600;display:inline-grid;place-items:center;margin-left:2px}
.tsPanel{margin:4px 0 2px 24px;display:flex;flex-direction:column;gap:6px}
.tsField{display:flex;flex-direction:column;gap:3px}
.tsField>span:first-child{font-size:11px;color:var(--muted)}
.tsField.dim{opacity:.45;pointer-events:none}
.tsField .seg{flex-wrap:wrap;width:fit-content;max-width:100%;padding:2px}
.tsField .seg button{padding:4px 8px;font-size:12px}
.tsFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
#threadList .hit{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
#threadList mark,#threadList .t mark{background:var(--mark);color:var(--ink);padding:0 2px;border-radius:2px}
#threadList li.empty .btn{margin-top:8px}
#threadList li{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line);transition:background var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
#threadList li:hover{background:var(--soft)}
#threadList li.on{background:var(--soft);box-shadow:inset 2px 0 0 var(--brand)}
#threadList .t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#threadList .l{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
#threadList .l .last{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#threadList .l .when{flex:none}
.conv{display:flex;flex-direction:column;min-height:0}
.convHead{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
.convHead span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:78%;padding:10px 14px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word;animation:msgIn var(--t2) var(--ease);line-height:1.5}
.msg.user{align-self:flex-end;background:var(--brand);color:var(--onbrand);border-bottom-right-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--sh1)}
.msg.assistant{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;box-shadow:var(--sh1),var(--edge)}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg .who{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:4px}
.msg.assistant.thinking:after{content:none}
.msg .steps{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.msg .steps summary{cursor:pointer}
.msg .steps li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .files{display:block;font-size:12px;opacity:.8;margin-top:4px}
.msg .mediaImg{display:block;margin-top:8px;max-width:100%}
.msg .mediaImg img{display:block;max-width:min(100%,440px);max-height:380px;border-radius:10px;border:1px solid var(--line);background:var(--soft)}
.msg .mediaVid,.msg .mediaAud{display:block;margin-top:8px;max-width:min(100%,440px);border-radius:10px}
.msg .fileChip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;font-size:12px;color:inherit;text-decoration:none;background:var(--soft);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg.user .fileChip{border-color:color-mix(in srgb,var(--onbrand) 30%,transparent);background:color-mix(in srgb,var(--onbrand) 12%,transparent)}
.msg .stopBtn{display:block;margin-top:8px}
.msg.user.queued{opacity:.6}
.msg.user.queued:after{content:"waits for the bot to finish";display:block;font-size:11px;opacity:.85;margin-top:4px}
.mediaGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.mediaTile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0;box-shadow:var(--sh1),var(--edge)}
.mediaTile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block;background:var(--soft)}
.mediaTile .fileIcon{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--soft);border-radius:6px;color:var(--muted);gap:4px;font-size:12px;text-decoration:none}
.mediaTile .fileIcon .ic{width:28px;height:28px}
.mediaTile .t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.mediaTile .row{margin-top:auto;flex-wrap:wrap;gap:4px}
.mediaTile .row .btn{padding:4px 8px;font-size:12px}
@keyframes blink{50%{opacity:.2}}
.attach{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px}
.attach span{font-size:12px;background:var(--soft);border-radius:8px;padding:3px 8px}
.composer{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--card);align-items:flex-end}
.composer .field,.pipForm .field{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;background:var(--soft);border:1px solid var(--line2);border-radius:22px;padding:3px 10px 3px 4px;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.composer .field:focus-within,.pipForm .field:focus-within{border-color:var(--focusLine);box-shadow:0 0 0 3px var(--ring)}
.composer .field textarea,.pipForm .field textarea{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;border-radius:0;padding:9px 6px;line-height:1.35;resize:none;max-height:160px;overflow-y:auto}
.composer .field textarea:focus,.pipForm .field textarea:focus{box-shadow:none;outline:0}
.attachBtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted);cursor:pointer;flex:none;transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.attachBtn:hover{background:var(--card);color:var(--ink)}
.attachBtn .ic{width:19px;height:19px}
.sendBtn{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;flex:none;border:0;padding:0;background:var(--brand);color:var(--onbrand);cursor:pointer;box-shadow:var(--sh1);transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease)}
.sendBtn .ic{width:21px;height:21px;transform:translateX(1px)}
.sendBtn:hover{transform:translateY(-1px)}
.sendBtn:disabled{opacity:.4;cursor:default;transform:none}
.sendBtn.small{width:38px;height:38px}
.sendBtn.small .ic{width:18px;height:18px}
.sendKeyHint{flex-basis:100%;padding:0 6px;font-size:11px}
/* team admin */
.orgTree{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--sh1),var(--edge)}
.orgTree ul{list-style:none;margin:0;padding-left:0}
.orgTree ul ul{padding-left:26px;border-left:2px solid var(--line);margin-left:16px}
.orgTree li{display:flex;align-items:center;gap:8px;padding:5px 0}
.orgTree .root{font-size:13px;font-weight:500;color:var(--ink);padding-bottom:6px}
.orgTree .tag{font-size:11px;color:var(--muted)}
.teamGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.teamCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh1),var(--edge)}
.teamCard .head{display:flex;align-items:center;gap:10px}
.teamCard .head>div{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.teamCard .head .btn{flex:none;align-self:flex-start}
.teamCard .head .av{width:44px;height:44px;font-size:15px}
.teamCard .ids{font-size:11px;color:var(--muted)}
.teamCard input,.teamCard select,.teamCard textarea{font-size:13px;padding:7px 10px}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mgrBox{border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.mgrBox .paneTitle{margin:0 0 4px}
.mgrBox select{font-size:13px;padding:6px 8px}
.catHead{font-size:13px;font-weight:500;color:var(--ink);margin:10px 0 4px;background:transparent;border:0;padding:0}
.cards li.catHead{background:transparent;border:0;padding:0}
#nbRoutineRow{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px}
#nbRoutineRow input{width:auto}
/* brain */
.brainBox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh1),var(--edge)}
.accessPick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.accessPick .lbl{font-size:12px;color:var(--muted);margin-right:4px}
.chip{border:1px solid var(--line2);background:var(--card);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;user-select:none;font-weight:500;transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.chip:hover{background:var(--soft)}
.chip.on{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.chip.all.on{background:var(--ok);border-color:var(--ok);color:#fff}
.cards .kind{display:inline-flex;align-items:center;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cards .chips{gap:4px;margin:4px 0}
.userBots{margin-top:8px}
.planMeter{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh1),var(--edge)}
.planMeter .row{flex-wrap:wrap;gap:8px 14px}
.planMeter .k{font-weight:600}
.planMeter .bar{height:6px;border-radius:3px;background:var(--soft);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.planMeter .bar i{display:block;height:100%;width:100%;transform-origin:0 50%;background:var(--ok);border-radius:3px;transition:transform var(--t2) var(--ease)}
.planMeter.warn .bar i{background:#d9a300}
.planMeter.over .bar i{background:var(--bad)}
.planMeter.over{border-color:var(--bad)}
.planMeter .msg{font-size:13px;line-height:1.45}
.intCard .barSmall{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.intCard .barSmall i{display:block;height:100%;background:var(--ok)}
.intCard.warn .barSmall i{background:#d9a300}
.intCard.over .barSmall i{background:var(--bad)}
.chip.inh{opacity:.55}
select.small{font-size:12px;padding:2px 6px;margin-left:8px}
.cards .chips .chip{cursor:default;padding:1px 8px}
#brainSearch{width:260px;padding:6px 10px;font-size:13px}
#brainSearchBot{padding:6px 8px;font-size:13px}
.hit{font-size:13px}
.hit mark{background:var(--mark);color:var(--ink);padding:0 2px}
/* overview */
.overview{padding:16px}
.ovGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.ovCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh1),var(--edge);transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease),transform var(--t1) var(--ease)}
.ovCard:hover{border-color:var(--line2)}
.ovHead{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ovHead .botMeta .n{display:flex;align-items:center;gap:6px}
.ovScreen{position:relative;background:#1c1c1c;aspect-ratio:1366/768;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(0,0,0,.2)}
.ovScreen img{width:100%;height:100%;object-fit:contain;display:block}
.ovScreen .ovUrl{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#eee;font-size:11px;padding:3px 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovScreen .ovOff{position:absolute;inset:0;display:grid;place-items:center;color:#aaa;font-size:13px}
.ovAct{padding:10px 12px;font-size:13px;border-top:1px solid var(--line);min-height:64px}
.ovAct .who{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.ovAct .txt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ovFoot{display:flex;gap:6px;padding:8px 12px 12px;flex-wrap:wrap}
.ovFoot .pill{align-self:center}
/* live */
.live{display:flex;flex-direction:column;min-height:0;padding:12px;gap:8px}
.liveBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabPick{position:relative;min-width:0;max-width:300px}
.tabPickBtn{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--line2);background:var(--card);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--ink);cursor:pointer;box-shadow:var(--edge);transition:border-color var(--t1) var(--ease),background var(--t1) var(--ease)}
.tabPickBtn:hover{background:var(--soft)}
.tabPickBtn:after{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);flex:none;margin-left:2px}
.tabPickTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabPickAv{display:inline-flex;flex:none;align-items:center}
.tabPickBtn .tabPickAv:empty{display:none}
.tabPick.away .tabPickBtn{border-color:var(--brand)}
.tabPickList li.bot .tabPickTitle{font-weight:600}
.tabPickList{position:absolute;left:0;top:calc(100% + 4px);z-index:45;min-width:100%;width:max-content;max-width:min(340px,calc(100vw - 32px));max-height:50vh;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--sh3),var(--edge);animation:dlgIn var(--t1) var(--ease)}
.tabPickList li{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--ink);transition:background var(--t1) var(--ease)}
.tabPickList li .tabPickAv{width:18px;height:18px;justify-content:center}
.tabPickList li:hover{background:var(--soft)}
.tabPickList li.on{background:var(--tint)}
.pipHead .tabPick{flex:1;min-width:0;max-width:none}
.pipHead .tabPickBtn{padding:3px 8px;font-size:12px;max-width:100%}
.pipHead .tabPickList{max-height:150px;font-size:12px}
.liveLeft{display:flex;gap:8px;align-items:center}
.liveTitle{font-weight:600}
.urlbar{display:flex;gap:6px;flex:1;min-width:260px}
.urlbar input{flex:1;min-width:0;padding:6px 10px;font-size:13px}
.liveRight{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.liveRight .tabPick{flex:0 1 220px;min-width:90px;max-width:220px}
.liveBody{display:grid;grid-template-columns:1fr;gap:12px;min-height:0;flex:1;align-items:start;overflow:auto}
.liveBody.rec{grid-template-columns:1fr 320px}
.stage{position:relative;background:#1c1c1c;border-radius:12px;overflow:hidden;min-height:120px;border:1px solid var(--line);box-shadow:var(--sh2)}
.stage canvas{width:100%;height:auto;display:block;cursor:default;outline:none}
.stage.control canvas{cursor:crosshair}
.stageMsg{position:absolute;inset:auto 12px 12px;background:rgba(0,0,0,.6);color:#eee;font-size:13px;padding:6px 10px;border-radius:8px}
.recPane{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px;overflow:auto;box-shadow:var(--sh1),var(--edge)}
.recPane ol{margin:0;padding-left:18px;font-size:12px;max-height:240px;overflow:auto}
.liveHint{margin:0}
.oauthRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.note.bad{border-color:var(--bad);color:var(--bad)}
.badge:empty{display:none}
#inboxBtn .badge{margin-left:4px}
/* Dock: the guide wears the brand colour with a black face, and when it is not open it waits as a floating bubble, bottom left under the team list on desktop, bottom right above the composer on small screens */
.av.duck.sys{--de:var(--onbrand)}
.dockFab{position:fixed;left:16px;bottom:16px;z-index:35;display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid var(--line2);border-radius:50%;background:var(--card);box-shadow:var(--sh3),var(--edge);cursor:pointer;color:var(--ink);transition:transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.dockFab .duck{--ds:42px;--de:var(--onbrand);background:var(--brand);--dl:-0.7s}
.dockFab .duck,.dockFab .duck i,.dockFab .duck:after{animation-delay:var(--dl)}
.dockFab:hover{transform:translateY(-1px);box-shadow:var(--sh3),0 0 0 3px var(--ring)}
.dockFab:hover .duck{animation:duckTilt 300ms ease-out forwards}
.dockFab:hover .duck:after{animation:duckChatter 300ms ease-in-out infinite}
.dockFab:focus-visible{outline:0;box-shadow:var(--sh3),0 0 0 3px var(--ring)}
.dockFab .lbl{position:absolute;left:calc(100% + 10px);top:50%;transform:translate(-4px,-50%);opacity:0;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:var(--sh1),var(--edge);transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease)}
.dockFab:hover .lbl,.dockFab:focus-visible .lbl{opacity:1;transform:translate(0,-50%)}
.bots{padding-bottom:88px}
.msgs>:first-child{margin-top:auto}
#botList li.sep{height:1px;background:var(--line);margin:4px 8px;padding:0;cursor:default;border:0}
.msg.proposal .body{border-left:3px solid var(--brand);padding-left:12px}
.msg.proposal .body b{display:block;margin-bottom:2px}
label.check{flex-direction:row;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.cards li .k .av.tiny{vertical-align:middle;margin-right:4px}
.integ.wide{grid-column:1/-1;align-items:flex-start}
.integ.wide>div{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.integ.wide>.row{flex:none}
.integ.wide b{font-family:inherit;font-weight:600}
.oauthRow input{max-width:220px}
/* phone: taking control fills the screen, the bot's page is laid out at the phone's size, a hidden field carries the keyboard */
.fullBar{display:none}
.live.full{position:fixed;inset:0;z-index:40;padding:0;gap:0;background:#111;height:100dvh;touch-action:manipulation}
.live.full .fullBar,.live.full .fullBar *{touch-action:manipulation}
.live.full .liveBar,.live.full .liveHint,.live.full .recPane{display:none}
.live.full .fullBar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--card);border-bottom:1px solid var(--line);position:relative}
.fullBar form{flex:1;min-width:0;display:flex}
.fullBar input{width:100%;min-width:0;padding:6px 10px;font-size:16px}
.fullBar #kbIn{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;padding:0;border:0;font-size:16px}
.fullBar .iconbtn.on{background:var(--tint);border-color:var(--brand);color:var(--brand)}
.fullBar .iconbtn.hint{box-shadow:0 0 0 3px var(--ring)}
.fullBar .iconbtn.rec.on{background:var(--bad);border-color:var(--bad);color:#fff}
.fullBar .iconbtn.rec:disabled{opacity:.45}
.live.full .liveBody{display:block;position:relative;flex:1;min-height:0;overflow:hidden}
.live.full .stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:0;box-shadow:none;background:#111;min-height:0}
.live.full .stage canvas{width:auto;height:auto;max-width:100%;max-height:100%;touch-action:none}
/* sub tabs inside a view */
.subTabs{display:flex;gap:4px;padding:10px 20px 0;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:2;overflow-x:auto}
.subTabs button{border:0;background:transparent;padding:8px 12px;border-radius:8px 8px 0 0;cursor:pointer;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;font-weight:500;transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.subTabs button.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.subTabs button:hover{color:var(--ink)}
/* sections */
section{padding:16px 20px;border-bottom:1px solid var(--line)}
.secHead{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.secHead h2{margin:0;font-size:17px;font-weight:600}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:8px}
.cards .k,.k.small{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.cards .t{font-weight:600;margin:2px 0 4px}
.cards pre{white-space:pre-wrap;font:13px/1.45 inherit;background:var(--soft);border:1px solid var(--line);padding:10px 12px;border-radius:8px;max-height:260px;overflow:auto;margin:6px 0 8px}
.cards .row input{flex:1;padding:6px 8px;font-size:13px}
.person .personHead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-bottom:8px}
.person .personHead b{min-width:0;overflow-wrap:anywhere}
.person .personActs{margin-bottom:8px}
.person .personActs select.small{margin-left:0}
.person .userBots{margin:6px 0 8px}
.person>p{margin:0}
.boardText{white-space:pre-wrap;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;max-height:360px;overflow:auto}
.boardText.tall{max-height:70vh;font-family:inherit;font-size:13px;line-height:1.55}
.twoCol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.formGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:10px}
.formGrid label,.formGrid select,.formGrid input{min-width:0;max-width:100%}
.formGrid select{width:100%}
.formGrid .wide{grid-column:1/-1}
.connRow label{display:block;margin-bottom:10px}
.connRow input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.memories{display:flex;flex-direction:column;gap:8px}
.memories pre{white-space:pre-wrap;font:12px/1.4 inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px;max-height:200px;overflow:auto;margin:0}
.empty{color:var(--muted);font-size:13px;padding:8px}
.integ{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}
.integ b{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:500}
/* icons: one colour, inherit text colour */
.ic{width:16px;height:16px;display:inline-block;vertical-align:-3px;flex:none}
.ic-btn{display:inline-flex;align-items:center;gap:6px}
.ic-btn.on{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.iconbtn{display:inline-grid;place-items:center;padding:5px 8px}
.top .user{display:flex;align-items:center;gap:8px}
/* picture in picture */
.pip{position:fixed;right:18px;top:64px;z-index:41;width:min(460px,calc(100vw - 36px));background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:var(--sh3),var(--edge);animation:dlgIn var(--t2) var(--ease);display:flex;flex-direction:column;overflow:hidden;resize:both;min-width:280px;min-height:160px}
.pipHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 12px;border-bottom:1px solid var(--line);font-size:13px;cursor:move;user-select:none;background:var(--soft)}
.pipHead>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipHead .row{flex:none;flex-wrap:nowrap;gap:2px}
.pipHead select{flex:none;max-width:170px;padding:3px 6px;font-size:12px;cursor:pointer}
.pipSel{display:flex;align-items:center;gap:6px}
.pipSel select{flex:1;min-width:0;max-width:100%;padding:3px 6px;font-size:12px;border-radius:6px;background:var(--card)}
.pipStage{position:relative;background:#1c1c1c;flex:1;min-height:0}
.pipStage canvas{width:100%;height:100%;object-fit:contain;display:block}
.pipGrip{display:none}
#pipLive{height:300px}
#pipChat{height:420px}
.pipMsgs{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.pipMsgs .msg{max-width:92%;padding:8px 10px}
.pipMsgs .steps{display:none}
.pipForm{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line);align-items:flex-end}
.pipForm .field{border-radius:20px;padding:2px 8px 2px 4px}
.pipForm .field textarea{font-size:13px;padding:7px 8px}
@media (max-width:1100px){
  .pip{right:8px;left:8px;top:auto;bottom:8px;width:auto;resize:none;max-height:calc(var(--appH,100dvh) - 16px)}
  .pipHead{touch-action:none}
  .pipGrip{display:block;height:14px;flex:none;cursor:ns-resize;touch-action:none;position:relative}
  .pipGrip:after{content:"";position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line2)}
  .top .user .ic-btn span{display:none}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:44px auto 1fr}
  .platbar{padding:0 10px;min-width:0;overflow:hidden}
  .platbar .brand{flex:0 1 auto}
  .platbar .brand>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .platRight{flex:none}
  .dockFab{left:auto;right:12px;bottom:12px;width:48px;height:48px}
  .dockFab .duck{--ds:36px}
  .dockFab .lbl{left:auto;right:calc(100% + 10px);transform:translate(4px,-50%)}
  .app[data-view="chat"] .dockFab{bottom:100px}
  .platbar .btn.ghost span,.userChip span:not(.avatar){display:none}
  .userChip{padding:2px;gap:0;border-radius:50%}
  .top{flex-wrap:wrap;height:auto;padding:6px 10px;row-gap:6px}
  .topLeft{display:none}
  .tabs{flex:0 0 auto;max-width:100%;margin:0 auto;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .top .brk{display:block;flex-basis:100%;height:0;order:2}
  #ovTabs{width:auto;flex:0 0 auto;margin:0 auto;gap:4px}
  .app[data-view="overview"] .topLeft{flex-basis:100%}
  .app[data-view="overview"] .top .user{display:none}
  .tabs button{padding:6px 8px;font-size:14px;white-space:nowrap}
  .top .user{margin-left:auto}
  .bots{display:none}
  .bots.show{display:block}
  .chat{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .threads{border-right:0;border-bottom:1px solid var(--line);max-height:34vh}
  .twoCol,.formGrid{grid-template-columns:minmax(0,1fr)}
  .person{padding:10px 12px}
  .person .personHead{flex-direction:column;gap:0;margin-bottom:10px}
  .person .personHead b{font-size:14px}
  .person .personActs{gap:6px;margin-bottom:10px}
  .person .personActs .btn.small,.person .personActs select.small{font-size:12px;padding:4px 8px}
  .person .userBots{gap:5px;margin:0 0 10px}
  .person .userBots .chip{font-size:11px;padding:2px 8px}
  .person>p{font-size:12px;line-height:1.45}
  #usersSection>.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  #usersSection>.row #newUserEmail,#usersSection>.row #addUser{grid-column:1/-1}
  #usersSection>.row input,#usersSection>.row select{min-width:0;font-size:14px;padding:8px 10px}
  .integ.wide{flex-wrap:wrap}
  .integ.wide>div{flex:1 1 100%}
  .integ.wide>.row{width:100%;justify-content:flex-end}
  .liveBody.rec{grid-template-columns:1fr}
  .msg{max-width:92%}
}
/* phones */
@media (max-width:700px){
  .phoneOnly{display:inline-flex!important}
  form.phoneOnly{display:flex!important}
  .hidden.phoneOnly{display:none!important}
  html,body{overflow:hidden}
  body{position:fixed;inset:0;width:100%}
  .app{grid-template-rows:44px auto 1fr;height:100dvh;height:var(--appH,100dvh)}
  .live.full{height:var(--appH,100dvh)}
  .platbar{padding:0 8px;gap:4px}
  .platbar .brand{font-size:14px;max-width:46vw}
  .platbar .brand img{height:26px}
  .platbar .btn.ghost{padding:5px 7px}
  #logout{display:none}
  .top{padding:4px 10px}
  .topLeft{display:block;flex:1;min-width:0}
  .topHintBtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--ink);padding:4px 0}
  .topHintBtn:after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px)}
  .topHintBtn:empty:before{content:"Pick a bot"}
  .tabs button{padding:6px 7px;font-size:13px}
  .top .user{display:flex;order:1}
  .top .tabs{order:3}
  .bots.show{display:block;overflow-x:hidden;position:fixed;left:0;right:0;top:44px;bottom:0;z-index:30;background:var(--card);padding:12px 12px 40px;box-shadow:var(--sh3);border-top:1px solid var(--line)}
  .overview{padding:10px}
  .ovGrid{grid-template-columns:1fr;gap:10px}
  .ovRow .k{width:56px}
  .planMeter{padding:10px 12px}
  .orgWrap{height:calc(100dvh - 140px)}
  .orgBar>span{display:none}
  .orgChart{touch-action:none}
  .chat{grid-template-columns:minmax(0,1fr)}
  .threads,.conv{min-width:0}
  .threads{max-height:none;border-bottom:1px solid var(--line)}
  .ovHead .botMeta .d{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .threadsHead{display:none}
  .threads{border-bottom:0}
  .threads.open{border-bottom:1px solid var(--line)}
  #threadList,.threadsSearch{display:none}
  .threads.open .threadsSearch{display:block}
  .threads.open #threadList{display:block;max-height:45vh}
  .topHintBtn .av.tiny{flex:none}
  .top .user .iconbtn.phoneOnly{display:inline-grid!important}
  .top .user .hidden.phoneOnly{display:none!important}
  .top .user .ic-btn.on{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
  .convHead{padding:8px 12px;font-size:14px}
  .msgs{padding:10px}
  .composer{padding:8px;gap:6px}
  .composer textarea,.pipForm .field textarea{font-size:16px}
  .sendKeyHint{display:none}
  .live{padding:8px;gap:6px}
  .urlbar{min-width:0;width:100%;order:3}
  .liveRight{width:100%;order:2;flex-wrap:wrap;flex:0 1 auto}
  .liveRight .tabPick{flex:0 1 auto;max-width:46vw}
  .stage{border-radius:8px}
  .stage.control canvas{touch-action:none}
  .liveHint{font-size:12px}
  section{padding:12px}
  .secHead{flex-wrap:wrap;gap:4px 10px}
  .subTabs{padding:6px 8px 0;overscroll-behavior-x:contain}
  .teamGrid{grid-template-columns:1fr}
  .libBar input,#brainSearch{width:100%}
  .card{padding:18px}
  .intCard2{width:96vw}
  dialog{max-height:96dvh}
  input,select,textarea{font-size:16px}
  .btn.small{font-size:13px}
  #pipLive{height:240px}
  #pipChat{height:min(60dvh,calc(var(--appH,100dvh) - 60px))}
  body[data-view="chat"] #pipLive{bottom:100px}
  .pipHead{cursor:default}
}

.note{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px}
/* views settle in with a short rise */
.view:not(.hidden){animation:viewIn var(--t2) var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view:not(.hidden),.msg,dialog[open],dialog[open]::backdrop,.pip{animation:none}.btn,.intCard,.ovCard,.orgNode{transition:none}}

.boardText h2,.boardText h3{margin:10px 0 4px;font-size:14px}
.boardText h2{font-size:16px}
.boardText.tall{white-space:pre-wrap}
.boardText.tall h3+br{display:none}

/* integration library */
.libBar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.libBar input{width:260px;padding:7px 10px;font-size:13px}
.libBar .chips{display:flex;gap:6px;flex-wrap:wrap}
.libGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.intCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;box-shadow:var(--sh1),var(--edge);transition:border-color var(--t1) var(--ease),transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.intCard:hover{border-color:var(--line2)}
.intCard.on{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.intTop{display:flex;align-items:center;gap:10px}
.logo{width:40px;height:40px;border-radius:8px;background:var(--soft);display:grid;place-items:center;flex:none;font-weight:700;font-size:13px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.logo img{width:24px;height:24px;display:block}
.logoBig{width:56px;height:56px;border-radius:10px;background:var(--soft);display:grid;place-items:center;flex:none;font-weight:700;font-size:16px;box-shadow:inset 0 0 0 1px var(--line)}
.logoBig img{width:32px;height:32px;display:block}
.intName{font-weight:600;line-height:1.2}
.intCat{font-size:11px;color:var(--muted)}
.intTag{font-size:13px;color:var(--muted);flex:1}
.intFoot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.intHead{display:flex;align-items:center;gap:12px}
.intHead h1{margin:0}
.intHead p{margin:2px 0 0}

/* integration dialog: wide, two columns, room for long fields */
.intCard2{width:min(860px,96vw);gap:16px}
.intCard2 .intHead{padding-bottom:4px;border-bottom:1px solid var(--line)}
.intCard2 #intDlgFields{grid-template-columns:1fr 1fr;gap:12px}
.intCard2 #intDlgFields input,.intCard2 #intDlgFields textarea{width:100%}
.intCard2 #intDlgFields label.wide{grid-column:1/-1}
.intCard2 .note{line-height:1.5}
.intCard2 p{margin:0}
@media (max-width:700px){.intCard2 #intDlgFields{grid-template-columns:1fr}}

/* brain item dialog: same footprint as the integration dialog */
.brainCard #brainDlgText{width:100%;min-height:40vh;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace}
.brainCard .accessPick{padding:6px 0}

.logo.dark{background:#0b0d10}
.logo.dark img{width:26px;height:26px}
.logoBig.dark{background:#0b0d10}
.logoBig.dark img{width:34px;height:34px}

/* overview meta rows */
.ovMeta{padding:8px 12px 2px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.ovRow{display:flex;align-items:center;gap:8px;min-height:20px}
.ovRow .k{width:64px;flex:none;color:var(--muted);font-size:12px}
.ovTools{display:inline-flex;align-items:center;gap:4px}
.ovTools img{width:18px;height:18px;display:block}
.ovTools .mini{width:18px;height:18px;border-radius:5px;background:var(--soft);display:inline-grid;place-items:center;font-size:9px;font-weight:700}
.ovTools .mini.dark{background:#0b0d10}
.ovTools .mini.light{background:var(--soft)}
.ovTools .mini img{width:12px;height:12px;display:block}

/* chain of command on overview cards */
.ovChain{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;row-gap:4px}
.chainNode{display:inline-flex;align-items:center;gap:4px;background:var(--soft);border-radius:999px;padding:1px 8px 1px 2px;font-size:12px}
.chainNode.you{padding-left:8px;border:1px dashed var(--line);background:transparent}
.av.tiny{width:18px;height:18px;font-size:9px}
.chev{width:12px;height:12px;color:var(--muted)}
.chainBreak{flex-basis:100%;height:0}

/* hierarchy org chart: pannable, zoomable map on a square grid */
.orgWrap{padding:8px 0;display:flex;flex-direction:column;gap:8px;height:calc(100vh - 150px);min-height:420px}
.orgBar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.orgChart{position:relative;flex:1;min-height:320px;overflow:hidden;border:1px solid var(--line);border-radius:12px;cursor:grab;user-select:none;
  background-color:var(--grid);background-image:linear-gradient(to right,var(--gridLine) 1px,transparent 1px),linear-gradient(to bottom,var(--gridLine) 1px,transparent 1px);background-size:32px 32px}
.orgChart.panning{cursor:grabbing}
.orgCanvas{position:absolute;left:0;top:0;transform-origin:0 0;width:1px;height:1px}
#orgLines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.orgNode{position:absolute;width:160px;min-width:120px;min-height:150px;justify-content:center;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;box-shadow:var(--sh1),var(--edge);resize:both;overflow:hidden;user-select:none;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.orgNode:hover{border-color:var(--line2)}
.orgNode.dragging{box-shadow:var(--sh3);z-index:5}
.orgNode .av{width:40px;height:40px;font-size:14px;flex:none}
.orgNode .n{font-weight:600;font-size:13px;line-height:1.2}
.orgNode .r{font-size:11px;color:var(--muted);line-height:1.25;overflow:hidden}
.orgNode.root{background:var(--brand);color:var(--onbrand);border-color:var(--brand);width:220px;min-height:170px;padding:16px 12px;gap:8px;border-radius:18px}
.orgNode.root .av{width:72px;height:72px;font-size:24px}
.orgNode.root .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.orgNode.root .av .ic{width:32px;height:32px}
.orgNode.root .n{font-size:17px}
.orgNode.root .tag{font-size:12px}
.orgNode.root .r{color:var(--onbrand);opacity:.8}
.orgNode.manager{border-width:2px}
.orgNode .tag{font-size:11px;color:var(--muted)}
.orgNode.root .tag{color:var(--onbrand);opacity:.8}
.orgNode.root .av{background:rgba(255,255,255,.2);color:var(--onbrand)}

/* dark theme: customer logos drawn for light surfaces get a white tile */
html[data-theme="dark"] .login .brand img,html[data-theme="dark"] .logoBox img{background:#fff;border-radius:8px;padding:4px}
/* Dock panel: the guide's chat floats over the page you are on, opened from the bubble, closed back into it */
.dockPanel{left:16px;right:auto;top:auto;bottom:16px;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100dvh - 90px));z-index:36;resize:none}
.dockPanel .pipSel{gap:8px}
.dockWhere{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.dockPanel .pipMsgs .steps{display:block}
.dockPanel .pipMsgs .empty{padding:14px 8px}
@media (max-width:1100px){.dockPanel{left:auto;right:12px;bottom:12px;width:min(400px,calc(100vw - 24px))}}
@media (max-width:700px){.dockPanel:not(.hidden){display:flex!important}.dockPanel{left:8px;right:8px;width:auto;bottom:8px;height:min(72dvh,calc(var(--appH,100dvh) - 60px))}}
.integ.wide.editing{border-color:var(--brand);box-shadow:0 0 0 2px var(--ring)}

/* phones: avatar rail on the Bot desks overview */
.ovRail{display:none}
.ovCard{scroll-margin-top:10px}
@media (max-width:700px){
  .ovRail:not(.hidden){display:flex;flex-direction:column;gap:6px;position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:34}
  .ovRail button{border:0;background:transparent;padding:2px;border-radius:50%;opacity:.6;display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));transition:opacity var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
  .ovRail button.on{opacity:1;box-shadow:0 0 0 2px var(--brand)}
  .ovRail .av.tiny{width:24px;height:24px;font-size:10px}
  .ovRail .av.tiny.duck{--ds:24px}
}

/* overview: Activity tab */
.actWrap{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}
.actSummary{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--muted);padding:2px 4px}
.actSummary b{color:var(--ink);font-weight:600}
.actCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--sh1),var(--edge);display:flex;flex-direction:column;gap:10px}
.actHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.actHead h2{margin:0;font-size:15px;font-weight:600;flex:1}
.actRange{display:flex;gap:2px;padding:2px;background:var(--soft);border:1px solid var(--line);border-radius:8px}
.actRange button{border:0;background:transparent;padding:3px 9px;border-radius:6px;cursor:pointer;color:var(--muted);font-size:12.5px;font-weight:500}
.actRange button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh1),var(--edge)}
/* fixed, whole-pixel columns: a duck that starts on a half pixel renders slightly oval at 1x */
.actLegend{display:grid;grid-template-columns:repeat(auto-fill,132px);gap:6px 8px;font-size:12.5px}
.actKey{display:flex;align-items:center;gap:6px;min-width:0}
.actKey>span:not(.tag){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actKey>i{width:10px;height:10px;border-radius:3px;flex:none}
.actKey .tag{font-size:11px;color:var(--muted);padding:1px 6px;border:1px solid var(--line);border-radius:999px}
.actChart{width:100%;overflow:hidden}
.actChart svg{display:block;max-width:100%;height:auto}
.actChart .grid{stroke:var(--gridLine);stroke-width:1}
.actChart .yl{font-size:11px;fill:var(--muted);text-anchor:end}
.actChart .xl{font-size:11px;fill:var(--muted);text-anchor:middle}
.actChart [data-day].hot{fill:var(--soft)}
.actChart [data-day]{cursor:crosshair}
.actTip{position:fixed;z-index:40;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font-size:12.5px;box-shadow:var(--sh3),var(--edge);pointer-events:none;min-width:150px}
.actTip .d{display:flex;justify-content:space-between;gap:16px;font-weight:600;margin-bottom:4px}
.actTip .r{display:flex;align-items:center;gap:6px}
.actTip .r span{margin-left:auto;padding-left:12px;color:var(--muted)}
.actTip .r i{width:8px;height:8px;border-radius:2px;flex:none}
.actRows{display:flex;flex-direction:column}
.actRow{display:grid;grid-template-columns:minmax(150px,1.4fr) 80px minmax(110px,1fr) 120px 60px 60px 60px 100px;gap:10px;align-items:center;padding:8px 6px;border-top:1px solid var(--line);font-size:13px;cursor:pointer;border-radius:8px}
.actRow:not(.head):hover{background:var(--soft)}
.actRow.head{border-top:0;font-size:11.5px;color:var(--muted);cursor:default;padding-top:0}
.actRow .who{display:flex;align-items:center;gap:8px;min-width:0}
.actRow .who .av{width:28px;height:28px;font-size:11px}
.actRow .who .av.duck{--ds:28px}
.actRow .who .n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actRow .cost{font-weight:600}
.actRow .share{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.actRow .share i{display:block;height:6px;border-radius:3px;width:var(--w);min-width:2px;max-width:calc(100% - 44px);flex:0 1 auto}  /* the label always keeps its room, even at 100% */
.actRow .share em{font-style:normal;color:var(--muted);font-size:12px;flex:none;white-space:nowrap}
@media (max-width:900px){
  .actRow{grid-template-columns:minmax(120px,1.4fr) 70px minmax(80px,1fr) 90px;gap:8px}
  .actRow>span:nth-child(n+5){display:none}
}
@media (max-width:700px){
  .actRow{grid-template-columns:1fr 70px;gap:4px 8px;padding:8px 4px}
  .actRow .share{grid-column:1 / -1}
  .actRow>span:nth-child(4){display:none}
  .actRow.head{display:none}
  .actSummary{font-size:13px;gap:4px 14px}
}

/* chat: control card, the bot's browser inside the thread while it waits for a hand */
.msg.ctlCard{width:min(100%,760px);max-width:min(100%,760px);white-space:normal;padding:12px 14px}
.msg.ctlCard .who{align-items:center;gap:6px;justify-content:flex-start}
.ctlText{margin:2px 0 8px}
.ctlText b{display:block}
.ctlStage{background:#1c1c1c;min-height:120px}
.ctlStage canvas{width:100%;height:auto;display:block;outline:none}
.ctlStage.control canvas{cursor:crosshair}
.ctlStage.control{box-shadow:0 0 0 2px var(--brand),var(--sh2)}
.ctlFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.ctlBtns{gap:6px}
@media (max-width:700px){
  .msg.ctlCard{padding:10px;display:flex;flex-direction:column}
  .msg.ctlCard>.ctlTabs{order:1;padding-top:10px;flex-direction:column;align-items:stretch;gap:6px}
  .msg.ctlCard>.ctlFoot{order:2;flex-direction:column;align-items:stretch;gap:8px;margin-top:8px}
  .ctlTabs .tabPick{max-width:none}
  .ctlTabs .tabPickBtn{width:100%}
  .ctlTabs .tabPickList{top:calc(100% + 4px);bottom:auto}
  .ctlBtns{flex-direction:column;align-items:stretch;gap:8px}
  .ctlBtns .btn{width:100%;justify-content:center}
}

/* read out loud */
.msg .who .readBtn{display:inline-grid;place-items:center;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;padding:0;margin:-4px -6px -4px 0;flex:none;transition:color var(--t1) var(--ease),background var(--t1) var(--ease)}
.msg .who .readBtn .ic{width:15px;height:15px}
.msg .who .readBtn:hover{color:var(--ink);background:var(--soft)}
.msg .who .readBtn.on{color:var(--brand);background:var(--soft)}
.msg .who .readBtn.busy{opacity:.5;cursor:progress}
.msg .who>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* microphone in the composer */
.micBtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;padding:0;background:transparent;color:var(--muted);cursor:pointer;flex:none;transition:background var(--t1) var(--ease),color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.micBtn .ic{width:19px;height:19px}
.micBtn:hover{color:var(--ink);background:var(--card)}
.micBtn.on{color:var(--onbrand);background:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.micBtn:disabled{opacity:.4;cursor:default}
.sendKeyHint.listening{color:var(--brand)}
.pipForm .micBtn{width:32px;height:32px}
.pipForm .micBtn .ic{width:17px;height:17px}

/* the server card on the Overview */
.ovServer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;box-shadow:var(--sh1),var(--edge)}
.srvHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.srvTitle{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.srvTitle .ic{width:18px;height:18px}
.srvPlan{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srvMeters{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.srvMeter{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.srvK{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.srvK .ic{width:16px;height:16px;color:var(--brand)}
.srvV{font-size:22px;font-weight:600;line-height:1.2}
.srvV .muted{font-size:12px;font-weight:400}
.srvMeter .bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.srvMeter .bar i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width var(--t2) var(--ease)}
.srvMeter.warm .bar i{background:#d9a300}
.srvMeter.hot .bar i{background:var(--bad)}
.srvX{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);min-height:36px}
.spark{color:var(--brand);flex:none;max-width:60%;height:36px;width:160px}
.srvFacts{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.srvFact{display:inline-flex;align-items:center;gap:5px}
.srvFact .ic{width:14px;height:14px;color:var(--muted)}
.srvFact.bad{color:var(--bad)}
.srvFoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
#rebootDlg .card,#upgradeDlg .card,#restartBotsDlg .card{max-width:460px}
#rebootDlg textarea,#upgradeDlg textarea{width:100%}
@media (max-width:640px){.srvMeters{grid-template-columns:1fr 1fr}.spark{max-width:48%;width:110px}.srvV{font-size:18px}}
.srvMore{display:grid;grid-template-columns:3fr 2fr;gap:12px;margin-top:14px}
.srvSide{display:flex;flex-direction:column;gap:12px}
.srvBlock{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.srvBlockHead{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:8px}
.srvBlockHead .ic{width:16px;height:16px;color:var(--brand)}
.srvTable{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px}
.srvTable th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:4px 6px;border-bottom:1px solid var(--line)}
.srvTable td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
.srvTable tr:last-child td{border-bottom:0}
.srvTable .num{text-align:right;font-variant-numeric:tabular-nums}
.srvTable td .av{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:6px}
.srvTable td:first-child{white-space:nowrap}
.srvTable th,.srvTable td{white-space:nowrap}
.srvScroll{overflow-x:auto;scrollbar-width:thin;margin-bottom:8px}
.srvScroll .srvTable{margin-bottom:0}
@media (max-width:700px){.srvTable{font-size:12px}.srvTable th,.srvTable td{padding:5px 4px}.srvTable td .av{margin-right:4px}.srvTable td .av{display:none}}
.srvDl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:13px}
.srvDl dt{color:var(--muted)}
.srvDl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.srvList{list-style:none;margin:0 0 8px;padding:0;font-size:13px}
.srvList li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
.srvList li:last-child{border-bottom:0}
@media (max-width:900px){.srvMore{grid-template-columns:1fr}}

/* a quiet bot: what it waits for, and its suggestions */
.ovIdle{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 12px 2px;font-size:12px;color:var(--muted)}
.ovIdleTxt{display:inline-flex;align-items:center;gap:5px}
.ovIdleTxt .ic{width:14px;height:14px}
.ovIdle .chips{margin-top:0}
.badge.soft{background:var(--soft);color:var(--ink);border:1px solid var(--line2)}
.suggestView section{max-width:860px}
.sugState{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:12px 0 14px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.sugStateHead{display:inline-flex;align-items:center;gap:6px}
.sugState ul{margin:2px 0 0 18px;padding:0;color:var(--muted);font-size:13px}
.sugList{display:flex;flex-direction:column;gap:10px}
.sugCard{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--edge)}
.sugIcon{flex:none;width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--brand)}
.sugIcon .ic{width:18px;height:18px}
.sugBody{min-width:0;display:flex;flex-direction:column;gap:4px}
.sugTitle{font-weight:600}
.sugText{font-size:13px;color:var(--muted);white-space:pre-line}
.sugBody .row{margin-top:4px}
.sugEmpty{color:var(--muted);padding:10px 0}

/* the company's tool stack on the Integrations page */
.stackBtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);background:transparent;color:var(--muted);border-radius:999px;padding:3px 9px;font-size:12px;cursor:pointer;margin-right:auto;transition:background var(--t1) var(--ease),color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.stackBtn .ic{width:13px;height:13px}
.stackBtn:hover{color:var(--ink);background:var(--soft)}
.stackBtn.on{color:var(--brand);border-color:var(--brand)}
.intCard.stack{border-color:var(--line2)}
.intFoot .pill,.stackBtn{white-space:nowrap}
.sugIdeas{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.sugIdeasHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sugCard.idea .sugIcon{background:var(--tint);color:var(--brand)}
.check{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4}
.check input{margin-top:3px}

/* who is working, who has answered */
.pill.busy{animation:busyPulse 1.6s ease-in-out infinite}
@keyframes busyPulse{0%,100%{opacity:1}50%{opacity:.45}}
/* the working pill pulses opacity only, which reduced motion allows */
.badge.new{background:var(--brand);color:var(--onbrand)}
.threads li.unread .t{font-weight:700}
.threads li .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.threads li .dot.new{background:var(--brand)}
.threads li .dot.busy{background:var(--ok);animation:busyPulse 1.6s ease-in-out infinite}

/* platform alerts */
.alertBar{position:sticky;top:0;z-index:30;display:flex;flex-direction:column;gap:4px;padding:8px 16px;background:var(--bad);color:#fff;font-size:13px}
.alertRow{display:flex;align-items:center;gap:8px}
.alertRow .ic{width:16px;height:16px;flex:none}

/* two-step sign-in */
#loginStep1,#loginStep2{display:flex;flex-direction:column;gap:16px}
#loginStep2 p{margin:0}
#loginStep2 .check{font-size:13px;color:var(--muted);padding:2px 0}
.loginActs{display:flex;align-items:center;gap:14px;margin-top:4px}
.loginActs .btn.primary{flex:1}
.login .btn.link{background:none;border:0;color:var(--muted);font-size:14px;padding:11px 8px}
.login .btn.link:hover{color:var(--text)}
.tsCard{max-width:440px}
.tsQr{display:flex;justify-content:center;margin:8px 0}
.tsQr svg{width:200px;height:200px;background:#fff;border-radius:8px;padding:6px}
.tsKey{display:block;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.06em;user-select:all;word-break:break-all}
.tsList{list-style:none;margin:8px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.tsList code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.06em;user-select:all}

/* glowing DockBot faces, the same aurora as dockbots.io: blurred duck silhouettes in two tints derived from the brand colour
   (--glowA, --glowB from applyBrand), eyes and beak as holes. Always behind content, never clickable. */
.glowLayer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glowFace{position:absolute;--de:var(--glowHole);opacity:var(--glowOp,.9);filter:blur(var(--glowBlur,26px));background:radial-gradient(circle at 50% 44%,var(--glowA) 0%,color-mix(in srgb,var(--glowA) 48%,transparent) 58%,transparent 100%);transform-origin:50% 62%}
.glowFace.b{background:radial-gradient(circle at 50% 44%,var(--glowB) 0%,color-mix(in srgb,var(--glowB) 40%,transparent) 58%,transparent 100%);filter:blur(calc(var(--glowBlur,26px) + 4px))}
.glowFace,.glowFace i,.glowFace:after{animation-delay:var(--dl,0s)}
:root{--glowA:#169a50;--glowB:#2bfff8;--glowHole:rgba(255,255,255,.72);--glowOp:.55}
html[data-theme="dark"]{--glowHole:rgba(0,0,0,.62);--glowOp:.9}
/* sign-in: the colleagues are already here, large and alive behind the card */
.login .glowFace.a{--ds:540px;left:calc(50% + 40px);top:calc(50% - 470px)}
.login .glowFace.b{--ds:300px;left:calc(50% - 560px);top:calc(50% + 60px)}
/* inside the app: quieter, fixed, peeking in from the right edge and the lower right, away from the Dock button and the team list */
.appGlow{position:fixed;--glowOp:.42;--glowBlur:34px}
html[data-theme="dark"] .appGlow{--glowOp:.6}
.appGlow .glowFace{animation:none}
.appGlow .glowFace:after{animation:none}
.appGlow .glowFace.a{--ds:520px;right:-140px;left:auto;top:-120px}
.appGlow .glowFace.b{--ds:320px;right:120px;left:auto;bottom:-130px;top:auto}
@media (max-width:900px){.login .glowFace.a{--ds:380px;left:calc(50% - 60px);top:-120px}.login .glowFace.b{--ds:220px;left:-80px;top:calc(100% - 260px)}.appGlow .glowFace.a{--ds:340px;right:-120px;top:-80px}.appGlow .glowFace.b{--ds:220px;right:-40px;bottom:-90px}.glowFace{--glowBlur:20px}}
@media (prefers-reduced-motion:reduce){
  .glowFace{animation:glowBreathe 7s ease-in-out var(--dl,0s) infinite!important}
  .glowFace i{animation:duckBlink 4.6s ease-in-out var(--dl,0s) infinite!important}
  .glowFace:after{animation:none!important}
}
@keyframes glowBreathe{0%,100%{opacity:var(--glowOp,.9)}50%{opacity:calc(var(--glowOp,.9) * .55)}}

/* ---------- setup guide ---------- */
.wizard{position:fixed;inset:0;z-index:48;display:grid;grid-template-columns:280px 1fr;background:var(--bg);isolation:isolate;overflow:hidden}
.wizard .glowFace{--glowOp:.75}
html[data-theme="dark"] .wizard .glowFace{--glowOp:.95}
.wizard .glowFace.a{--ds:620px;left:calc(50% + 120px);top:-260px}
.wizard .glowFace.b{--ds:340px;left:120px;top:calc(100% - 300px)}
.wizRail{display:flex;flex-direction:column;gap:18px;padding:24px 20px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--card) 80%,transparent)}
.wizBrand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.wizSteps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.wizSteps li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--muted);font-size:14px;transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.wizSteps li .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);font-size:12px;font-weight:600;flex:none;transition:background var(--t1) var(--ease),color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.wizSteps li.on{color:var(--ink);background:var(--soft)}
.wizSteps li.on .n{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.wizSteps li.done{color:var(--ink)}
.wizSteps li.done .n{background:var(--okSoft);color:var(--ok);border-color:transparent}
.wizRailNote{margin-top:auto}
.wizMain{overflow:auto;padding:48px clamp(24px,6vw,96px) 64px;min-height:0}
.wizPanel{display:none;max-width:820px}
.wizPanel.on{display:block;animation:wizIn 200ms var(--ease) both}
.wizPanel h1{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.wizLead{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 14px;max-width:62ch}
.wizWelcome{padding-top:6vh}
.wizDuck{--ds:72px;margin-bottom:22px;display:block}
.wizIn>*{animation:wizIn 300ms var(--ease) both}
.wizIn>*:nth-child(2){animation-delay:120ms}.wizIn>*:nth-child(3){animation-delay:240ms}.wizIn>*:nth-child(4){animation-delay:360ms}.wizIn>*:nth-child(5){animation-delay:480ms}.wizIn>*:nth-child(6){animation-delay:600ms}
@keyframes wizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wizActs{margin:18px 0 10px;gap:14px}
.btn.big{padding:12px 20px;font-size:16px;border-radius:10px}
.btn.link{background:none;border:0;box-shadow:none;color:var(--muted);padding:6px 2px}
.btn.link:hover{color:var(--ink)}
.wizSkipBox{margin-top:10px;max-width:60ch;padding:14px 16px;border:1px solid var(--line2);border-radius:10px;background:var(--card)}
.wizForm{align-items:flex-end;gap:10px;margin:8px 0 12px}
.wizForm label{flex:1 1 280px}
.wizForm label.grow{flex:1 1 320px}
.wizForm input{width:100%}
/* the work view: Dock's browser, the progress bar, the last steps */
.wizWork{margin:14px 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.wizStage{position:relative;aspect-ratio:16/10;background:#111;border-radius:12px;overflow:hidden;border:1px solid var(--line2);box-shadow:var(--sh3),var(--edge)}
.wizStage canvas{width:100%;height:100%;object-fit:contain;display:block}
.wizStage .stageMsg{position:absolute;inset:0;display:grid;place-items:center;color:#aaa;font-size:13px}
.wizSide{display:flex;flex-direction:column;gap:12px;padding-top:8px}  /* room for the ducks' hop; the work view clips its box */
.wizStatus{display:flex;align-items:center;gap:10px;font-weight:500}
.wizLog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.wizLog li{display:flex;gap:8px;align-items:center;animation:wizIn 200ms var(--ease) both}
.wizLog li:last-child{color:var(--ink)}
.wizLog li .ic{width:14px;height:14px;flex:none}
.wizElapsed{font-size:12px;color:var(--muted)}
/* ducks as loaders: three colleagues bobbing in a row, and one walking the progress bar */
.duckLoader{display:inline-flex;gap:6px;align-items:flex-end;padding-top:6px}
.duckLoader .duck{--ds:18px;--de:var(--onbrand);animation:duckBob 1.2s ease-in-out infinite}
.duckLoader .duck:nth-child(2){animation-delay:.15s}.duckLoader .duck:nth-child(3){animation-delay:.3s}
.duckLoader .duck i,.duckLoader .duck:after{animation:none}
@keyframes duckBob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.duckBar{position:relative;height:10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);margin:14px 0 6px}
.duckBar .fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:var(--brand);transform-origin:left center;transform:scaleX(var(--p,0));transition:transform 600ms var(--ease)}
.duckBar .track{position:absolute;left:0;top:0;bottom:0;width:100%;transform:translateX(calc(var(--p,0) * 100%));transition:transform 600ms var(--ease);pointer-events:none}
.duckBar .rider{position:absolute;left:0;top:50%;transform:translate(-50%,-50%)}
.duckBar .rider .duck{--ds:26px;--de:var(--onbrand);box-shadow:0 0 0 3px var(--bg);animation:duckWaddle .9s ease-in-out infinite}
.duckBar .rider .duck i{animation:duckBlink 4.6s ease-in-out infinite}
.duckBar .rider .duck:after{animation:duckQuack 7.3s ease-in-out infinite}
.duckBar.done .rider .duck{animation:none}
@keyframes duckWaddle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@media (prefers-reduced-motion:reduce){
  .wizIn>*,.wizPanel.on,.wizLog li{animation:none!important}
  .duckBar .fill,.duckBar .track{transition:none}
  .duckLoader .duck{animation:duckFade 1.2s ease-in-out infinite!important}
  .duckBar .rider .duck{animation:none!important}
  .duckBar .rider .duck i{animation:duckBlink 3.2s ease-in-out infinite!important}
}
@keyframes duckFade{0%,60%,100%{opacity:1}30%{opacity:.35}}
/* previews: current vs Dock's proposal, accepted field by field */
.wizPreview{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.pvHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pvHead h2{margin:0;font-size:17px}
.pvSummary{white-space:pre-wrap;font-size:13.5px;line-height:1.5;color:var(--muted);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-width:72ch}
.pvGrid{display:flex;flex-direction:column;gap:6px}
.pvRow{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);transition:border-color var(--t1) var(--ease)}
.pvRow.pick{border-color:var(--brand)}
.pvRow .lab{font-size:13px;font-weight:500;color:var(--ink);padding-top:2px}
.pvRow .cur,.pvRow .new{font-size:13px;line-height:1.45;word-break:break-word}
.pvRow .cur{color:var(--muted)}
.pvRow .cur:before,.pvRow .new:before{display:block;font-size:11px;letter-spacing:.02em;color:var(--muted);margin-bottom:2px}
.pvRow .cur:before{content:"Now"}
.pvRow .new:before{content:"Dock found"}
.pvRow .new.empty{color:var(--muted);font-style:italic}
.pvRow .sw{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;padding-top:2px}
.pvRow.full{grid-template-columns:150px minmax(0,1fr) auto}
.pvRow .swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid var(--line2)}
.pvRow img.logoPv{max-height:44px;max-width:160px;background:#fff;border-radius:6px;padding:4px;border:1px solid var(--line)}
.pvRow details{font-size:13px}
.pvRow details summary{cursor:pointer;color:var(--muted)}
.pvRow .profileTxt{white-space:pre-wrap;max-height:260px;overflow:auto;margin-top:6px;line-height:1.5}
.pvList{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.pvCard{position:relative;display:block;min-width:0;padding:12px 44px 12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);transition:border-color var(--t1) var(--ease)}
.pvCard>span,.pvCard>div{display:block;min-width:0}
.pvCard.pick{border-color:var(--brand)}
.pvCard input[type=checkbox]{position:absolute;top:12px;right:12px;margin:0;width:20px;height:20px;padding:0;accent-color:var(--brand)}
.pvCard input[type=checkbox]:focus{box-shadow:0 0 0 3px var(--ring);border-radius:4px}
.pvCard .t{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pvCard .t a{color:var(--muted);font-weight:400;font-size:12px}
.pvCard .d{font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px}
.pvCard .meta{font-size:12px;color:var(--muted);margin-top:4px}
.pvCard .nameIn{width:100%;margin-top:6px}
.pvCard select{margin-top:6px;font-size:12px}
.pvActs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pvNote{font-size:12px;color:var(--muted)}
.stackPick{display:flex;flex-direction:column;gap:12px}
.stackChips{display:flex;flex-wrap:wrap;gap:8px}
.stackChip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line2);border-radius:999px;background:var(--card);cursor:pointer;font-size:13px;user-select:none;transition:border-color var(--t1) var(--ease),background var(--t1) var(--ease)}
.stackChip.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--card))}
.stackChip .ev{font-size:11px;color:var(--muted)}
.stackChip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.wizSummary{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.wizSummary li{display:flex;gap:10px;align-items:center}
.wizSummary li .ic{width:16px;height:16px;color:var(--ok);flex:none}
.botMk{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.botMk .r{display:flex;align-items:center;gap:10px;font-size:13px}
.botMk .r .av{flex:none}
/* ask Dock buttons and dialog */
.askDock .duck{--ds:16px;margin-right:2px}
.dockDlgCard{width:min(900px,96vw)}
.dockDlgHead{display:flex;align-items:center;gap:10px}
.dockDlgHead h1{margin:0}
/* competitors in the Brain */
.compGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.compCard{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);display:flex;flex-direction:column;gap:4px}
.compCard .t{font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.compCard .t a{font-size:12px;color:var(--muted);font-weight:400}
.compCard .d{font-size:13px;color:var(--muted);line-height:1.45}
.compCard .acts{display:flex;gap:6px;margin-top:4px}
.compEmpty{grid-column:1/-1;color:var(--muted);font-size:13px;padding:10px 0}
@media (max-width:900px){
  .wizard{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .wizRail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .wizSteps{flex-direction:row;flex-wrap:wrap;margin:0;gap:2px}
  .wizSteps li span:not(.n){display:none}
  .wizSteps li.on span:not(.n){display:inline}
  .wizRailNote{display:none}
  .wizMain{padding:20px 16px 48px}
  .wizPanel h1{font-size:24px}
  .wizWork{grid-template-columns:1fr}
  .pvRow{grid-template-columns:1fr;gap:6px}
  .pvRow.full{grid-template-columns:1fr}
  .wizard .glowFace.a{--ds:360px;left:40%;top:-140px}.wizard .glowFace.b{--ds:220px;left:-60px;top:calc(100% - 200px)}
}

/* real tool logos in the stack chips and previews (the library's SVGs; initials when a tool has none) */
.toolLogo{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:9px;font-weight:700;color:#333;flex:none;overflow:hidden}
.toolLogo img{width:15px;height:15px;display:block}
.stackChip{padding-left:7px}
.toolRow{display:flex;flex-wrap:wrap;gap:6px}
.toolTag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:12px}

/* logos sit on white in both themes (brand marks are drawn for white); card footers wrap instead of spilling out */
.logo,.logoBig{background:#fff;color:#222;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
html[data-theme="dark"] .logo,html[data-theme="dark"] .logoBig{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.intFoot{flex-wrap:wrap;row-gap:6px}
.intFoot .btn{margin-left:auto}
/* Dock's stack guesses as cards: logo, name, confidence; the evidence underneath */
.stackCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.stackCard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;user-select:none;transition:border-color var(--t1) var(--ease),background var(--t1) var(--ease)}
.stackCard.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
.stackCard .toolLogo{width:34px;height:34px;border-radius:8px}
.stackCard .toolLogo img{width:22px;height:22px}
.stackCard .t{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;min-width:0}
.stackCard .t .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.stackCard .st{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}
.stackCard .st .dot{width:7px;height:7px;border-radius:50%;flex:none}
.stackCard .ev{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:3px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stackCard .tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);flex:none;margin-left:auto;font-size:11px;color:var(--onbrand);transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.stackCard.on .tick{background:var(--brand);border-color:var(--brand)}
.stackCard.on .tick:after{content:"";width:5px;height:9px;border-right:2px solid var(--onbrand);border-bottom:2px solid var(--onbrand);transform:translateY(-1px) rotate(45deg)}
/* the Ask Dock dialog: a glowing face behind the work view while Dock works */
.dockDlgCard{position:relative;overflow:hidden;isolation:isolate}
.dockDlgCard>*:not(.glowLayer){position:relative;z-index:1}
.dockDlgCard .glowLayer{position:absolute;z-index:0}
.dockDlgCard .glowFace{--ds:420px;left:calc(100% - 300px);top:-120px;--glowOp:.5;transition:opacity var(--t2) var(--ease)}
html[data-theme="dark"] .dockDlgCard .glowFace{--glowOp:.8}
.dockDlgCard:not(.working) .glowFace{opacity:.5}  /* always there behind the dialog, brightest while Dock works */

/* the guide above the team: its own heading and a tinted row, so it never reads as one of the working bots */
#botList li.head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 6px 4px;margin-top:4px;font-size:13px;font-weight:500;color:var(--ink);cursor:default;border:0;background:none}
#botList li.head:hover{background:none}
#botList li.head+li.head{margin-top:0}
#botList li.sys{background:color-mix(in srgb,var(--brand) 7%,var(--card));border-color:var(--line);margin-bottom:6px}
#botList li.sys:hover{background:color-mix(in srgb,var(--brand) 11%,var(--card))}
#botList li.sys.on{border-color:var(--line2)}
#botList li.sys .pill{background:transparent;color:var(--brand);border:1px solid var(--brand);padding:1px 7px}

/* phone: the guide's rail is one brand row with "Close for now" on the right and a scrolling strip of steps; links and
   field switches are full-size tap targets; the work view never widens the page */
.btn.link{min-height:44px;display:inline-flex;align-items:center}
.pvRow .sw{min-height:44px;padding:0 8px;cursor:pointer;border-radius:8px}
.pvRow .sw:hover{background:var(--soft)}
.wizWork{overflow:hidden}
.wizSide{min-width:0}
@media (max-width:900px){
  .wizRail{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand later" "steps steps";gap:4px 8px;padding:8px 12px 6px;align-items:center}
  .wizBrand{grid-area:brand;min-width:0}
  .wizBrand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #wizLater{grid-area:later;margin:0;padding:8px 4px;font-size:13px}
  .wizSteps{grid-area:steps;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px;gap:4px}
  .wizSteps::-webkit-scrollbar{display:none}
  .wizSteps{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .wizSteps li{flex:none;min-height:44px}
  .wizRailNote{display:none}
}

/* a bot at work: its own avatar, alive, next to one plain sentence about what it is doing right now */
.thinkRow{display:flex;align-items:center;gap:10px}
.thinkRow .av{width:30px;height:30px;--ds:30px}
.msg.assistant.thinking .thinkRow .body{color:var(--muted)}
.msg.streaming .thinkRow .av{display:none}
.msg.streaming .thinkRow{display:block}
.msg.streaming .thinkRow .body{color:inherit}
.av.think{animation:thinkBob 1.9s ease-in-out infinite;transform-origin:50% 70%}
.thinkRow .dots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.thinkRow .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.25;animation:dotPulse 1.2s ease-in-out infinite}
.thinkRow .dots i:nth-child(2){animation-delay:.2s}
.thinkRow .dots i:nth-child(3){animation-delay:.4s}
.msg.streaming .thinkRow .dots{display:none}
@keyframes dotPulse{0%,70%,100%{opacity:.25}35%{opacity:1}}
.av.think.duck i{animation:duckBlink 4.6s ease-in-out infinite,thinkLook 4.2s ease-in-out infinite}
.av.think.duck:after{animation:duckQuack 7.3s ease-in-out infinite}
@keyframes thinkBob{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-5px) rotate(-9deg)}70%{transform:translateY(-2px) rotate(7deg)}}
@keyframes thinkLook{0%,28%{translate:0 0}34%,50%{translate:calc(var(--ds)*-.08) 0}56%,72%{translate:0 0}78%,92%{translate:calc(var(--ds)*.08) 0}100%{translate:0 0}}
@media (prefers-reduced-motion:reduce){.av.think{animation:none!important}.av.think.duck i{animation:duckBlink 4.6s ease-in-out infinite,thinkLook 4.2s ease-in-out infinite!important}}

/* the control card: a tab picker under the stage, like Live */
.ctlTabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0 0}
.ctlTabs .tabPickList{top:auto;bottom:calc(100% + 4px)}

/* proposed bots wear their future avatar colour */
.pvTeam .t{align-items:center}
.av.pvAv{--ds:30px;width:30px;height:30px;transition:opacity var(--t1) var(--ease),background var(--t2) var(--ease)}
.av.pvAv.off{opacity:.35}

.orgNode .r{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* the Dock button while it is being dragged */
.dockFab.dragging{cursor:grabbing;transition:none;box-shadow:var(--sh3),0 0 0 3px var(--ring)}
.dockFab.dragging:hover{transform:none}

/* how many products Dock should read, and the cost warning from 50 up */
.tierPick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.tiers button{border:0;background:transparent;padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.tiers button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh1),var(--edge)}
.note.warn{background:color-mix(in srgb,var(--warn) 14%,var(--card));border-color:color-mix(in srgb,var(--warn) 50%,var(--line));margin-bottom:10px;max-width:62ch}
.brainView .subTabs{margin:0;padding:10px 20px 0}
.prodMeta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.pvCard .d,.pvCard .meta{display:block}

/* a long result list scrolls inside the dialog: faces along the whole height, so there is always glow behind the view */
.dockDlgCard .glowFace.mid{--ds:340px;left:-150px;top:42%}
.dockDlgCard .glowFace.low{--ds:380px;left:calc(100% - 240px);top:80%}

.applyMk{margin-top:10px}
.applyMk .r b{font-weight:500}

/* a company's own icon on its card */
.compLogo{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:11px;font-weight:700;color:#333;margin-right:8px;vertical-align:middle;overflow:hidden;flex:none}
.compLogo img{width:18px;height:18px;object-fit:contain;display:block}
.compCard .t>span:first-child{display:inline-flex;align-items:center;min-width:0}

/* a fifth larger on a desktop; phones and tablets keep the 56 px button */
@media (min-width:1101px) and (pointer:fine){.dockFab{width:67px;height:67px}.dockFab .duck{--ds:50px}}

/* the guide's desk: tinted like its row in the team list */
.ovCard.sys{background:color-mix(in srgb,var(--brand) 6%,var(--card))}

/* desks line up: the latest message and the footer sit at the bottom of every card, the gap floats above them */
.ovAct{margin-top:auto}
.ovIdle{min-height:34px}

/* phone: content keeps clear of the Dock button, the bot rail sits under the bot sheet, tab strips fade at the scroll edge */
@media (max-width:700px){
  .view{padding-bottom:88px}
  .view.chat{padding-bottom:0}
  .composer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body[data-view="chat"] .dockFab{bottom:calc(80px + env(safe-area-inset-bottom))}
  .ovRail:not(.hidden){z-index:29}
  #tabs.scrolls::after,.subTabs.scrolls::after{content:"";position:sticky;right:0;flex:0 0 32px;margin-left:-32px;align-self:stretch;pointer-events:none;z-index:1}
  .subTabs.scrolls{padding-left:0;padding-right:0}
  .subTabs.scrolls>button:first-of-type{margin-left:20px}
  .subTabs.scrolls>button:last-of-type{margin-right:20px}
  .subTabs.scrolls::after{background:linear-gradient(to right,transparent,var(--card) 70%)}
  #tabs.scrolls{padding-left:0;padding-right:0}
  #tabs.scrolls>button:first-of-type{margin-left:3px}
  #tabs.scrolls>button:last-of-type{margin-right:3px}
  #tabs.scrolls::after{background:linear-gradient(to right,transparent,var(--soft) 70%),linear-gradient(to right,transparent,var(--card) 70%);border-radius:0 6px 6px 0}
  #tabs.more::before,.subTabs.more::before{content:"";order:99;position:sticky;right:9px;z-index:2;align-self:center;flex:0 0 8px;height:8px;margin-left:-8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);pointer-events:none;opacity:.75;animation:nudgeRight 1.6s ease-in-out 3}
  @keyframes nudgeRight{0%,100%{translate:0 0}50%{translate:4px 0}}
  @media (prefers-reduced-motion:reduce){#tabs.more::before,.subTabs.more::before{animation:none}}
}
/* the guide: a built-in part of the platform, marked as such on its desk and on the chart */
.sysPill{background:transparent;color:var(--brand);border:1px solid var(--brand);padding:1px 7px}
.orgNode.sys{border-style:dashed;border-color:var(--line2);background:color-mix(in srgb,var(--brand) 7%,var(--card))}
.orgNode.sys .tag{color:var(--brand)}

/* the schedule picker: plain choices, a time, the days; the cron text only under Custom */
.schedPick{display:flex;flex-direction:column;gap:8px;grid-column:1/-1}
.schedPick .lab{font-size:13px;color:var(--muted);font-weight:500}
.schedKind{flex-wrap:wrap}
.schedKind button{border:0;background:transparent;padding:7px 12px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer}
.schedKind button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh1),var(--edge)}
.schedRow{gap:14px;align-items:flex-end}
.schedRow label{flex:0 1 auto}
.schedRow input[type=time]{width:120px}
.schedRow select{width:auto}
.schedSummary{margin:0}
.schedSummary.bad{color:var(--bad)}

/* "i" icons: a small ring with a dot, the tooltip itself is #tip in the top layer so it shows above dialogs */
.info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:help;vertical-align:middle;flex:0 0 auto;transition:color var(--t1) var(--ease)}
.info .ic{width:17px;height:17px}
.info:hover,.info:focus-visible,.info.pinned{color:var(--ink)}
.lt{display:inline-flex;align-items:center;gap:6px}
.secHead .info{align-self:center}
#tip{position:fixed;inset:auto;margin:0;padding:8px 11px;max-width:300px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink);font-size:13px;line-height:1.45;font-weight:400;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:200;pointer-events:none;display:none;overflow:visible}
#tip.on{display:block}

/* Platform, Bots: the list on the left, the picked bot's settings on the right; on a phone the list is a strip */
.botSet{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start;margin-top:12px}
.botSetList{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh1),var(--edge);overflow:hidden}
.botSetList li{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);min-width:0}
.botSetList li:last-child{border-bottom:0}
.botSetList li.head{cursor:default;font-size:11px;color:var(--muted);font-weight:600;padding:8px 12px 4px;background:var(--soft)}
.botSetList li.on{background:color-mix(in srgb,var(--brand) 12%,var(--card))}
.botSetList li:not(.head):hover{background:var(--soft)}
.botSetList li>div{min-width:0;flex:1}
.botSetList li b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.botSetList .ids{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.botSetList .av{width:30px;height:30px;font-size:12px;--ds:30px;flex:none}
.botSetPanel{display:flex;flex-direction:column;gap:12px;min-width:0}
.bsHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bsHead .av{width:48px;height:48px;font-size:16px;--ds:48px;flex:none}
.bsHead>div{flex:1 1 200px;min-width:0}
.bsHead .bsName{font-size:17px;font-weight:600}
.bsHead .ids{font-size:12px;color:var(--muted)}
.bsGroup{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh1),var(--edge)}
.bsGroup .paneTitle{margin:0}
.bsGroup .formGrid{margin-bottom:0}
.bsGroup textarea{width:100%}
.bsList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.bsList li{display:flex;gap:8px;align-items:baseline;font-size:13px;flex-wrap:wrap}
.subTabs .grow{flex:1}
.subTabs .btn{align-self:center;margin-bottom:6px}
@media (max-width:900px){.botSet{grid-template-columns:1fr}.botSetList{display:flex;overflow-x:auto;scrollbar-width:none}.botSetList li{flex:0 0 auto;border-bottom:0;border-right:1px solid var(--line);padding:8px 10px}.botSetList li.head,.botSetList .ids{display:none}}

/* language pickers: two plain words under the sign-in card, the chosen one in ink */
.langPick{display:flex;justify-content:center;gap:16px;margin-top:6px}
.langPick .btn.link{font-size:12px;color:var(--muted)}
.langPick .btn.link.on{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.brk{display:none}

/* the control card on a phone: the tab title shortens instead of pushing the card wider, the list opens downward
   where the chat can scroll to it, and the quiet button gets an edge so it reads as a button */
@media (max-width:700px){
  .msg.ctlCard .ctlTabs .tabPickBtn{min-width:0}
  .msg.ctlCard .ctlTabs .tabPickTitle{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
  .msg.ctlCard .ctlTabs .tabPickList{top:calc(100% + 4px);bottom:auto;max-height:40vh}
  .msg.ctlCard .ctlBtns .btn.ghost{border:1px solid var(--line2)}
}

/* the guide on a phone: never wider than the screen, tighter cards, the tier buttons may wrap */
#wizard{overflow:hidden}
.wizMain{overflow-x:hidden}
.wizPanel{max-width:min(820px,100%)}
.tierPick .seg{flex-wrap:wrap}
@media (max-width:700px){
  .pvCard{padding:10px 40px 10px 12px}
  .pvCard input[type=checkbox]{top:10px;right:10px}
  .pvCard .t{font-size:14px}
  .pvCard .d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .pvSummary{font-size:13px;max-height:12em;overflow:auto}
}

/* phone: a strip with many tabs packs them so all six fit; a strip scrolled to its end shows no fade on the last tab */
@media (max-width:700px){
  #tabs.dense{gap:0}
  #tabs.dense button{padding:6px 5px;font-size:12.5px}
  #tabs.atEnd::after,.subTabs.atEnd::after{opacity:0}
}

/* the guide: rail steps are places you can go, the welcome step remembers earlier runs, a soft word when skipping ahead */
.wizSteps li{cursor:pointer}
.wizSteps li:hover{color:var(--ink)}
.wizRan{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:13.5px;line-height:1.5}
.wizRan b{display:block;margin-bottom:2px}
.wizRan ul{margin:6px 0 0;padding-left:18px}
.wizSoft{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--brand) 40%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--brand) 8%,var(--card));font-size:13px;line-height:1.45}
.wizSoft .duck{--ds:22px;flex:none;margin-top:1px}
.wizSoft span{flex:1}
.wizSoft button{flex:none}
.jobJoined{margin:0 0 8px;font-size:13px;color:var(--muted)}

/* the question inside the Ask Dock dialog: one labelled field and the start button */
.dlgAsk{display:flex;flex-direction:column;gap:12px;max-width:520px}
.dlgAsk label{font-size:13px;color:var(--muted);font-weight:500;display:flex;flex-direction:column;gap:6px}
.dlgAsk input{width:100%}

/* the guide: what the platform already holds, shown before Dock is sent out */
.wizHave{margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.wizHave .k{font-size:12px;color:var(--muted);margin-bottom:6px}
.wizHave .chips{margin-top:0}
.wizHave .chip{cursor:default;display:inline-flex;align-items:center;gap:6px}
.wizHave .chip .av{width:18px;height:18px;--ds:18px;font-size:9px}
.wizHave .chip.more{color:var(--muted)}
.wizForm .info{align-self:center}

.wizHave .chips .rest{display:contents}
.wizHave .chips .rest.hidden{display:none}
.wizHave button.chip.more{cursor:pointer;background:var(--card)}
.wizHave button.chip.more:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- Customers (CRM): the tab in the Brain and the tab under Platform ---------- */
.crmBar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.crmTabs{flex:none;max-width:100%;overflow-x:auto;scrollbar-width:none}
.crmTabs button{white-space:nowrap}
.crmSearch{position:relative;flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:6px}
.crmSearch>.ic{position:absolute;left:10px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.crmSearch input{flex:1;min-width:0;width:100%;padding-left:32px;font-size:13px}
.crmTools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.crmTools .chips{margin-top:0}
.crmTools .grow,.crmPipeHead .grow,.crmStageRow .grow,.paneTitle .grow,.crmComposer .grow{flex:1 1 auto}
.crmFilter{flex:1 1 180px;min-width:0;max-width:260px;padding:7px 10px;font-size:13px}
.crmInline{flex-direction:row;align-items:center;gap:6px;font-size:13px}
.crmInline select,.crmInline input{padding:5px 8px;font-size:13px}
.crmTools label.check{margin:0;align-items:center}
.crmScroll{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0 6px}
.crmTable{margin-bottom:0}
.crmTable tbody tr[data-go]{cursor:pointer}
.crmTable tbody tr[data-go]:hover td,.crmTable tbody tr[data-go]:focus-visible td{background:var(--soft)}
.crmTable tbody tr[data-go]:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.crmCard:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.chip.crmGone{opacity:.7;cursor:default;background:var(--soft);color:var(--muted);border-color:var(--line)}
.chip.crmGone:hover{background:var(--soft)}
.crmTable td b{font-weight:600}
.crmTable td .lt{gap:4px}
.crmTable td.empty{white-space:normal;color:var(--muted);text-align:left}
.crmTagList{margin-left:6px;display:inline-flex;gap:4px;vertical-align:middle}
.crmTagList .pill{padding:0 6px;font-size:11px}
.crmFoot{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:8px;min-height:20px}
.crmOffCard{max-width:620px}
.crmOffCard .paneTitle{margin:0;font-size:15px;font-weight:600}
.crmOffCard p{margin:0}
.av.tiny{width:18px;height:18px;font-size:9px}
.av.tiny.crmIni{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
/* the record */
.crmRec{display:flex;flex-direction:column;gap:14px;max-width:1040px}
.crmRecHead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crmRecHead h3{margin:0;font-size:18px;font-weight:600;flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.crmTags{align-items:center}
.crmTag{display:inline-flex;align-items:center;gap:4px;padding-right:4px}
.crmTag .x{border:0;background:transparent;color:inherit;padding:0;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;cursor:pointer;opacity:.75}
.crmTag .x:hover{opacity:1;background:rgba(255,255,255,.2)}
.crmTag .x .ic{width:12px;height:12px}
.crmTagIn{padding:3px 10px;font-size:12px;border-radius:999px;width:110px}
.crmTwo{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;align-items:start}
.crmFacts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.crmFacts label{min-width:0}
.crmFacts input:not([type=checkbox]),.crmFacts select{min-width:0;width:100%;padding:7px 10px;font-size:13.5px}
.crmFacts label.check{grid-column:1/-1;color:var(--ink);flex-direction:row;align-items:center;gap:8px}
.crmFacts label.check input{width:auto;flex:none;margin:0}
.crmMore{border-top:1px solid var(--line);padding-top:8px}
.crmMore summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:8px;list-style:none}
.crmMore summary::-webkit-details-marker{display:none}
.crmMore summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform var(--t1) var(--ease)}
.crmMore[open]>summary::before{transform:rotate(45deg)}
.crmStatus{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crmRelated{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.crmRel .chips{margin-top:4px;align-items:center}
.crmRel .chip .muted{font-weight:400}
.chip.crmChipAdd{display:inline-flex;align-items:center;gap:4px;border-style:dashed;background:transparent}
.chip.crmChipAdd .ic{width:12px;height:12px}
.crmComposer input,.crmComposer textarea{width:100%;font-size:13.5px}
.crmComposer textarea{resize:vertical;min-height:72px}
.crmKinds{flex-wrap:wrap;align-self:flex-start}
.crmKinds button{padding:4px 10px}
/* the timeline, shared by records and the Activity tab */
.crmTl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:1040px}
.crmTl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);animation:crmIn var(--t2) var(--ease)}
.crmTl li.empty{display:block;border:0;background:transparent}
.crmTl .ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--muted);flex:none}
.crmTl li.change .ico{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.crmTl li.change{background:color-mix(in srgb,var(--soft) 60%,var(--card))}
.crmTl li.undone{opacity:.55}
.crmTl li.task.done .subj{text-decoration:line-through;color:var(--muted)}
.crmTl .main{display:flex;flex-direction:column;gap:3px;min-width:0}
.crmTl .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12px;color:var(--muted)}
.crmTl .who .av{margin-right:2px}
.crmTl .who .when{opacity:.9}
.crmTl .who b,.crmTl .who i{color:var(--ink);font-style:normal;font-weight:500;overflow-wrap:anywhere}
.crmTl .who .chips{margin:0;display:inline-flex;gap:4px}
.crmTl .who .chips .chip{padding:0 8px;font-size:11px}
.crmTl .subj{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.crmTl .body{white-space:pre-wrap;font-size:13.5px;overflow-wrap:anywhere}
.crmTl .acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.crmHitList .hit{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.crmHitList li[data-go]{cursor:pointer}
.crmHitList li[data-go]:hover{border-color:var(--line2)}
/* the pipeline board: columns scroll inside their own region, never the page */
.crmBoard{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 10px;align-items:flex-start;scroll-snap-type:x proximity}
.crmDragHint{margin:0 0 8px}
.crmCol{flex:0 0 250px;min-width:0;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:140px;scroll-snap-align:start;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.crmCol.over{border-color:var(--brand);box-shadow:0 0 0 2px var(--ring)}
.crmCol.won{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.crmCol.lost{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.crmColHead{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;padding:0 2px}
.crmColHead .muted{font-weight:400;white-space:nowrap}
.crmColBody{display:flex;flex-direction:column;gap:6px;min-height:60px}
.crmColEmpty{padding:10px 6px;text-align:center}
.crmCard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:4px;cursor:grab;box-shadow:var(--sh1),var(--edge);animation:crmIn var(--t2) var(--ease);transition:border-color var(--t1) var(--ease),opacity var(--t1) var(--ease)}
.crmCard:hover{border-color:var(--line2)}
.crmCard:active{cursor:grabbing}
.crmCard.dragging{opacity:.45}
.crmCard .t{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.crmCard .m{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0}
.crmCard .m>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmCard .amt{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.crmCard .own{display:inline-flex}
.crmCard select{display:none}
@media (pointer:coarse){.crmCard{cursor:default}.crmCard select{display:block;width:100%;font-size:13px;padding:5px 8px;margin-top:4px}.crmCol{flex-basis:230px}}
@keyframes crmIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes crmFade{from{opacity:0}to{opacity:1}}
/* Platform, Customers */
.crmModes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.modeCard{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;box-shadow:var(--sh1),var(--edge);font:inherit;color:inherit;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.modeCard:hover{border-color:var(--line2)}
.modeCard.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--ring),var(--sh1)}
.modeCard.disabled{opacity:.6;cursor:default}
.modeCard.disabled:hover{border-color:var(--line)}
.modeCard .t{font-weight:600;display:flex;align-items:center;gap:6px}
.modeCard .d{font-size:13px;color:var(--muted);line-height:1.45}
.modeCard .s:empty{display:none}
.crmSetGroup{margin-top:12px;max-width:960px}
.crmSetGroup .paneTitle.lt{display:flex;flex-wrap:wrap}
.crmDanger{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.crmPipe{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.crmPipe+.crmPipe{margin-top:10px}
.crmPipeHead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crmStages{display:flex;flex-direction:column}
.crmStageRow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.crmStageRow .n{font-weight:500;flex:1 1 120px;min-width:0;overflow-wrap:anywhere}
.crmFlags{display:flex;gap:16px;flex-wrap:wrap}
.crmFlags label.check{color:var(--ink)}
#crmFieldEditor .srvScroll{margin-bottom:0}
#crmFieldEditor code{font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--soft);padding:1px 6px;border-radius:5px}
@media (max-width:1100px){.crmTwo{grid-template-columns:1fr}}
@media (max-width:700px){
  .crmTabs button{padding:5px 8px;font-size:12.5px}
  .crmSearch{flex-basis:100%}
  .crmFilter{max-width:none;flex-basis:100%}
  .crmFacts{grid-template-columns:1fr}
  .crmModes{grid-template-columns:1fr}
  .crmTl li{grid-template-columns:auto minmax(0,1fr);padding:8px 10px}
  .crmTl .acts{grid-column:2;justify-content:flex-start}
  .crmTl .ico{width:22px;height:22px}
  .crmRecHead h3{flex-basis:100%;font-size:17px}
  .crmScroll{padding:0 2px}
  .crmStageRow .iconbtn{padding:5px 6px}
  /* a stage row: the name on its own line, every control on one aligned line under it */
  .crmStageRow .n{flex-basis:100%}
  /* the record dialogs take the width the import dialog takes; without it a <dialog> shrinks to its content */
  dialog[id^="crm"] .card{width:96vw}
}
@media (prefers-reduced-motion:reduce){.crmTl li,.crmCard{animation:crmFade var(--t2) var(--ease)}.crmCol,.crmCard,.modeCard{transition:opacity var(--t1) var(--ease)}.crmMore summary::before{transition:opacity var(--t1) var(--ease)}}
/* an operator reads the mode cards and the rules; nothing is dimmed, what they cannot change is hidden by the script */
.crmReadOnly .modeCard,.crmReadOnly #crmAccess{pointer-events:none}
.crmReadOnly .modeCard{cursor:default}

/* a CRM request in Needs you: the fields the bot wants to write */
.crmReq{margin:6px 0 8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-size:13px;display:grid;gap:2px}
.crmReq .muted{display:inline-block;min-width:88px}

/* ---------- Customers: import ---------- */
/* the dialog: four steps in the head, one panel at a time; the mapping table scrolls inside its own region */
.crmImpDlgCard{width:min(920px,100%);gap:12px}
.crmImpDlgCard>*{min-width:0}
.crmImpHead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.crmImpHead h1{margin:0;flex:1 1 auto}
.crmImpSteps{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.crmImpSteps li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:3px 9px 3px 3px;border-radius:999px;border:1px solid transparent}
.crmImpSteps li .n{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);font-size:11px;font-weight:600}
.crmImpSteps li.on{color:var(--ink);border-color:var(--line)}
.crmImpSteps li.on .n{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.crmImpSteps li.done .n{background:var(--okSoft);color:var(--ok);border-color:transparent}
.crmImpPanel{display:flex;flex-direction:column;gap:12px;min-width:0;animation:crmFade var(--t2) var(--ease)}
.crmImpCards{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
.crmImpCard{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);display:flex;flex-direction:column;gap:8px;min-width:0}
.crmImpCard .t{font-weight:600;display:flex;align-items:center;gap:8px}
.crmImpCard .d{font-size:13px;color:var(--muted);line-height:1.45}
.crmImpCard .s:empty{display:none}
.crmImpCard .logo{width:24px;height:24px;border-radius:6px;display:inline-grid;place-items:center;background:var(--soft);font-size:11px;font-weight:600;overflow:hidden;flex:none}
.crmImpCard .logo img{width:18px;height:18px;display:block}
.crmImpSrc{cursor:pointer;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.crmImpSrc:hover,.crmImpSrc:focus-visible{border-color:var(--line2)}
.crmImpSrc.off{cursor:default;opacity:.75}
.crmImpSrc.off:hover{border-color:var(--line)}
.crmImpSrc.off a{color:var(--ink);text-decoration:underline}
.crmImpSrc.busy{border-color:var(--brand);box-shadow:0 0 0 2px var(--ring)}
.crmDrop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px;border:1px dashed var(--line2);border-radius:10px;background:var(--soft);transition:border-color var(--t1) var(--ease),background var(--t1) var(--ease)}
.crmDrop.over{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
.crmDrop>.ic{color:var(--muted)}
.crmDrop label.btn{cursor:pointer;margin:0}
.crmImpPick{gap:10px 14px}
.crmImpFetch{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:13px}
.crmImpFetch .k{color:var(--muted);margin-bottom:4px;line-height:1.45}
.crmImpLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crmImpLine .st{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);flex:none}
.crmImpLine .st .ic{width:12px;height:12px}
.crmImpLine.staged .st{background:var(--okSoft);color:var(--ok);border-color:transparent}
.crmImpLine.failed .st{background:var(--badSoft);color:var(--bad);border-color:transparent}
.crmImpLine.fetching .st,.crmImpLine.applying .st{background:var(--brand);border-color:var(--brand);animation:impPulse 1.4s ease-in-out infinite}
.crmImpLine>span:last-child{min-width:0;overflow-wrap:anywhere}
@keyframes impPulse{0%,100%{opacity:1}50%{opacity:.3}}
.crmImpOpts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.crmImpOpts .crmInline input{width:170px}
.crmImpOpts label.check{margin:0;align-items:center}
.crmImpSec{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.crmImpSec+.crmImpSec{margin-top:10px}
.crmImpSec summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap;list-style:none}
.crmImpSec summary::-webkit-details-marker{display:none}
.crmImpSec summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform var(--t1) var(--ease)}
details.crmImpSec[open]>summary::before{transform:rotate(45deg)}
.crmImpSecHead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crmImpSecTools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.crmImpSecTools:empty{display:none}
.crmImpSecTools .btn .duck{--ds:16px;margin-right:4px}
.crmImpScroll{margin:8px 0 0;border:1px solid var(--line);border-radius:8px;max-height:min(50vh,440px);overflow:auto}
.crmImpTable{margin:0;min-width:560px}
.crmImpTable td{vertical-align:top;white-space:normal}
.crmImpTable td.muted span{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmImpTable select,.crmImpTable input{padding:5px 8px;font-size:13px;min-width:0;max-width:100%}
.crmImpCustom{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.crmImpCustom input{width:160px}
.crmImpTable tr.lit td{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.crmImpReport{display:flex;flex-direction:column;gap:14px}
.crmImpRep{display:flex;flex-direction:column;gap:8px}
.crmImpRep h3{margin:0;font-size:15px;font-weight:600}
.crmImpRep h4{margin:4px 0 0;font-size:13px;font-weight:600}
.crmImpRep p{margin:0;font-size:13.5px;line-height:1.5}
.crmImpRep p.row{gap:10px}
.crmImpRep .srvScroll{border:1px solid var(--line);border-radius:8px;margin:0;max-height:260px;overflow:auto}
.crmImpRep .srvTable{margin:0}
.crmImpRep .srvTable td{white-space:normal;min-width:80px}
.crmImpDone{display:flex;flex-direction:column;gap:10px}
.crmImpDone ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.crmImpDone li{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.crmImpDone li .ic{flex:none;margin-top:3px;color:var(--ok)}
.crmImpDone li.bad,.crmImpDone li.bad .ic{color:var(--bad)}
.crmImpDone p{margin:0}
.crmImpActs .grow{flex:1 1 auto}
.crmImpHist{min-width:680px}
.crmImpHist td.bad{color:var(--bad)}
.crmImpHist tr.more td:first-child{border-top:0}
/* the guide step: three cards */
.wizCrmCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 6px}
.wizCrmCard{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--sh1),var(--edge);transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.wizCrmCard:hover,.wizCrmCard:focus-visible{border-color:var(--line2)}
.wizCrmCard .t{font-weight:600;display:flex;align-items:center;gap:8px}
.wizCrmCard .d{font-size:13px;color:var(--muted);line-height:1.45}
#wizCrmHave .chips{margin-top:0}
@media (max-width:700px){
  .crmImpCards,.wizCrmCards{grid-template-columns:1fr}
  .crmImpDlgCard{width:96vw}
  /* the options become one left aligned column: label above its field, checkbox first then its text, everything full width */
  .crmImpOpts{flex-direction:column;align-items:stretch;gap:10px}
  .crmImpOpts .crmInline{flex-direction:column;align-items:stretch;gap:4px;width:100%}
  .crmImpOpts .crmInline input,.crmImpOpts .crmInline select{width:100%}
  .crmImpOpts label.check{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
  .crmImpOpts label.check input{width:auto;margin:0;flex:none}
  .crmImpSec{padding:8px 10px;min-width:0}
  .crmImpSec summary,.crmImpSecHead{gap:6px 8px}
  .crmImpFetch{padding:8px 10px}
  .crmImpTable{min-width:480px}
  .crmImpTable td.muted span{max-width:120px}
  .crmImpActs .grow{flex-basis:100%}
  .crmImpDone .row>.btn{flex:1 1 auto;text-align:center}
}
/* the Done step has only Close in the foot: it sits at the right, with no spacer pushing it to a line of its own */
.crmImpDlgCard[data-step="done"] .crmImpActs{justify-content:flex-end}
.crmImpDlgCard[data-step="done"] .crmImpActs .grow{display:none}
@media (prefers-reduced-motion:reduce){.crmImpPanel{animation:crmFade var(--t2) var(--ease)}.crmImpSec summary::before,.crmImpSrc,.crmDrop,.wizCrmCard{transition:opacity var(--t1) var(--ease)}}

.crmColBody .crmMore{align-self:center;margin:4px auto 2px;cursor:pointer}

/* ---------- Customers: mirror ---------- */
/* the badge beside the Customers tabs, the Sync box under the mode cards, outbox rows, the conflict row, the approval note */
.crmMirrorBadge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);padding:3px 4px 3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--soft);max-width:100%;min-width:0}
.crmMirrorBadge>.ic{width:14px;height:14px;flex:none}
.crmMirrorBadge>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crmSync{display:flex;flex-direction:column;gap:10px;font-size:13px}
.crmSyncTables{display:flex;flex-direction:column;gap:6px}
.crmSyncTables .bad{color:var(--bad)}
.crmSyncOut{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:flex-start}
.crmSyncOut>span{align-self:center}
.crmSyncFold{border:1px solid var(--line);border-radius:10px;padding:6px 10px;flex:1 1 260px;min-width:0}
.crmSyncFold summary{cursor:pointer;display:flex;gap:6px;align-items:center;flex-wrap:wrap;list-style:none}
.crmSyncFold summary::-webkit-details-marker{display:none}
.crmSyncFold summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform var(--t1) var(--ease)}
.crmSyncFold[open]>summary::before{transform:rotate(45deg)}
.crmSyncFold.none summary{color:var(--muted)}
.crmSyncList{margin-top:6px}
.crmSyncList .empty{padding:6px 0}
.crmSyncRow{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.crmSyncRow .op{font-weight:500}
.crmSyncRow .err{flex-basis:100%;color:var(--bad);overflow-wrap:anywhere}
.crmSyncRow .acts{margin-left:auto;display:flex;gap:6px}
.crmMirrorSend{display:flex;align-items:center;gap:6px;margin:4px 0 6px}
.crmMirrorSend .ic{width:14px;height:14px;flex:none}
#crmRulesMirror{margin-left:4px}
#crmPipesMirrorNote{margin:0 0 8px}
.crmTl li.conflict .ico{color:var(--bad)}
.crmTl li.conflict .lost{text-decoration:line-through;opacity:.75}
@media (max-width:700px){.crmSyncRow .acts{margin-left:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.crmSyncFold summary::before{transition:opacity var(--t1) var(--ease)}}
/* CRM Phase 4: thread rows on the timeline, record chips in the chat header, the merge dialog, the merge card, the Automatic box */
.crmTl li.thread .ico{background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand)}
.crmTl li.thread .who .lt{gap:4px}
.convHead .crmThreadChips{display:flex;flex-wrap:wrap;gap:6px;min-width:0;margin-right:auto;font-weight:500}
.convHead .crmThreadChips:empty{display:none}
.convHead .crmThreadChips .chip{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmMergeList{display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow:auto;min-height:44px}
.crmMergeHint{padding:6px 2px}
.crmMergeOpt{flex-direction:row;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink);font-weight:500;transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.crmMergeOpt:hover{border-color:var(--line2)}
.crmMergeOpt:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px var(--ring)}
.crmMergeOpt input{width:auto;flex:none;margin:0}
.crmMergeOpt .t{min-width:0;overflow-wrap:anywhere}
.crmMergeOpt .sub{color:var(--muted);font-size:12px;font-weight:400;min-width:0;overflow-wrap:anywhere}
.crmReq .crmMergeReq{margin:0;align-items:center;gap:6px}
.crmReq .crmMergeReq .muted{min-width:0;display:inline}
.crmAuto{display:flex;flex-direction:column;gap:8px}
.crmAuto label.check{color:var(--ink);align-items:center;margin:0}
.crmAuto label.check input{width:auto;flex:none;margin:0}
@media (max-width:700px){.convHead .crmThreadChips .chip{max-width:140px}}
@media (prefers-reduced-motion:reduce){.crmMergeOpt{transition:opacity var(--t1) var(--ease)}}

/* CRM Phase 5: catalog source cards in the import dialog, the Consent box, the erase dialog, the Privacy box picker */
#crmImpSources{display:contents}
.crmImpCard .n{font-size:12px;color:var(--muted);line-height:1.4}
.crmConsent{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:10px}
.crmFacts .wide{grid-column:1/-1}
.crmRecHead .pill,.crmNoMkt{flex:none;white-space:nowrap}
.crmNoMkt{margin-left:6px;vertical-align:1px}
.crmPrivacyFind{max-width:420px}
.crmPrivacyList{max-height:none;min-height:0;margin-top:8px}
.crmPickOpt{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink);background:var(--card);font:inherit;font-weight:500;text-align:left;width:100%;max-width:420px;transition:border-color var(--t1) var(--ease)}
.crmPickOpt:hover,.crmPickOpt:focus-visible{border-color:var(--line2)}
.crmPickOpt .t{min-width:0;overflow-wrap:anywhere}
.crmPickOpt .sub{color:var(--muted);font-size:12px;font-weight:400;min-width:0;overflow-wrap:anywhere}
.crmPickOpt .pill{margin-left:auto;flex:none}
@media (prefers-reduced-motion:reduce){.crmPickOpt{transition:opacity var(--t1) var(--ease)}}