:root{
  --bg:#F2F3F5; --card:#FFFFFF; --line:#E3E5E9; --line2:#EEF0F3; --soft:#F6F7F9;
  --ink:#11151C; --ink2:#4A5260; --muted:#6B7280; --brd:#C9CDD4;
  --ok-bg:#E6F4EC; --ok:#1E6B3F; --ok-dot:#1F8A4C; --wait-bg:#FDF1DC; --wait:#8A5300;
  --bad-bg:#FDE8E6; --bad:#A3261B; --focus:#2a78d6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Onest,'Segoe UI',system-ui,sans-serif;font-size:14px;line-height:1.45}
a{color:var(--ink)}a:hover{color:var(--focus)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mono{font-family:'JetBrains Mono',monospace}
.boot{padding:40px;color:var(--muted)}
@keyframes live{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes in{from{opacity:.2;transform:translateY(-4px)}to{opacity:1;transform:none}}
.live{}
.in{animation:in .35s ease-out}
@media (prefers-reduced-motion:reduce){.live,.in{animation:none}}

/* шапка */
header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:17px}
nav.tabs{display:flex;flex-wrap:wrap;gap:2px}
nav.tabs a{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink2)}
nav.tabs a[aria-current=page]{background:var(--line2);font-weight:600;color:var(--ink)}
.badge{min-width:18px;padding:1px 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;text-align:center}
.head-right{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-weight:500;font-size:13px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.bad{background:var(--bad-bg);color:var(--bad)}.pill.wait{background:var(--wait-bg);color:var(--wait)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sq{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.banner{padding:12px 24px;background:var(--bad-bg);color:var(--bad);font-weight:500;border-bottom:1px solid #F5C4BE}

/* раскладка */
main{max-width:1440px;margin:0 auto;padding:28px 24px 48px;display:flex;flex-direction:column;gap:24px}
.row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.grow{flex:999 1 620px;min-width:0}.side{flex:1 1 340px;min-width:0}
h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.02em}
h2{margin:0;font-size:17px;font-weight:600}
.sub{color:var(--muted);margin-top:4px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px}
.card.pad{padding:18px 20px}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:18px 20px 14px}
.item{padding:16px 20px;border-top:1px solid var(--line)}
.muted{color:var(--muted)}.ink2{color:var(--ink2)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:12px}
.kpi{padding:16px;display:flex;flex-direction:column;gap:8px}
.kpi .v{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:3px;background:var(--line2);overflow:hidden}.bar>div{height:6px;background:var(--ink);border-radius:3px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}

/* кнопки */
.btn{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--brd);background:#fff;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink2)}
.btn.danger{border-color:#F5C4BE;background:var(--bad-bg);color:var(--bad);font-weight:600}
.btn:disabled{opacity:.5;cursor:default}
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:var(--line2)}
.seg button{min-height:36px;min-width:84px;padding:0 12px;border-radius:8px;border:0;background:transparent;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink2)}
.seg button[aria-pressed=true]{background:#fff;box-shadow:0 1px 2px rgba(17,21,28,.12);color:var(--ink)}
.seg button[aria-pressed=true].self{color:var(--ok)}.seg button[aria-pressed=true].ask{color:var(--wait)}.seg button[aria-pressed=true].no{color:var(--bad)}
.switch{width:36px;height:20px;border-radius:10px;position:relative;display:inline-block}
.switch>span{position:absolute;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}

/* лента */
.feed{display:flex;flex-direction:column;max-height:560px;overflow-y:auto}
.feed .e{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line2)}
.feed .t{font-size:12px;color:var(--muted)}
.feed .who{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.feed .txt{color:var(--ink2);white-space:pre-wrap;word-break:break-word}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--brd);background:#fff;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* графики */
.chart{position:relative;height:200px;display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid var(--brd)}
.chart .col{flex:1;min-width:0;display:flex;flex-direction:column-reverse;gap:2px;height:100%}
.chart .col span{display:block;width:100%;border-radius:2px}
.chart-labels{display:flex;gap:6px;font-size:11px;color:var(--muted)}.chart-labels span{flex:1;text-align:center}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* черновики и решения */
.draft-body{white-space:pre-wrap;color:var(--ink2);background:var(--soft);border-radius:10px;padding:10px 12px}
textarea.edit{width:100%;min-height:110px;resize:vertical;padding:12px 14px;border-radius:12px;border:1px solid var(--brd);background:var(--soft);line-height:1.45}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12px;font-weight:500;padding:2px 10px;border-radius:999px;white-space:nowrap}

/* агенты */
.agent-list{display:flex;flex-direction:column;gap:4px;flex:1 1 240px;max-width:100%}
.agent-list button{min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left}
.agent-list button[aria-pressed=true]{background:#fff;border-color:var(--brd)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:8px}
.models button{min-height:56px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer}
.models button[aria-pressed=true]{border:2px solid var(--ink);background:var(--soft)}
.fact{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--soft);border-radius:10px;margin-top:8px}
.fact span{flex:1;min-width:0;word-break:break-word}
.icon-btn{width:36px;height:36px;flex:none;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:8px}
input.text{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--brd);background:#fff;flex:1 1 220px;min-width:0}

/* разбор */
.trace-list button{width:100%;text-align:left;padding:12px 14px;border:0;border-top:1px solid var(--line2);background:transparent;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.trace-list button[aria-pressed=true]{background:var(--soft)}
.step{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px dashed var(--line)}
.step .meta{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}

/* вход и диалоги */
.login{max-width:420px;margin:12vh auto;padding:28px;display:flex;flex-direction:column;gap:14px}
.login label,dialog label{font-size:13px;color:var(--muted)}
.login input,dialog input{min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--brd);font-size:16px}
dialog{border:0;border-radius:16px;padding:24px;max-width:380px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(17,21,28,.45)}
dialog form{display:flex;flex-direction:column;gap:10px}
dialog h2{font-size:20px}
dialog .row{justify-content:flex-end;gap:8px}
.err{color:var(--bad);min-height:20px;margin:0}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:500;opacity:0;transition:opacity .25s;pointer-events:none;max-width:calc(100% - 32px)}
#toast.show{opacity:1}
@media (max-width:640px){header{padding:10px 16px}main{padding:20px 16px 40px}h1{font-size:24px}.kpi .v{font-size:24px}}

/* ---------- офис ---------- */
.office{position:relative;width:100%;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 50% 10%,#FFFFFF 0%,#EEF3F9 60%,#E3EAF3 100%);container-type:inline-size}
.office .stage{position:relative;width:100%}
@container (max-width:640px){.office .stage{width:150%;margin:-14% 0 -6% -25%}}
.office svg{display:block;width:100%;height:auto;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
.office-overlay{position:absolute;inset:0;pointer-events:none}
.office .st{cursor:pointer;outline:none}
.office .st:hover .floor-glow,.office .st:focus-visible .floor-glow{opacity:.9}
.office .floor-glow{transition:opacity .25s}
.office .plate{font:700 12px Onest,sans-serif;fill:#4A5568;letter-spacing:.02em}
.office .board{font:700 22px Onest,sans-serif;fill:#7DF3FF;letter-spacing:.04em}
.office .board-sub{font:500 12px Onest,sans-serif;fill:#9FB3D1}
/* робот */
.office .bot-float{animation:hover 2.8s ease-in-out infinite}
.office .st[data-key=a172] .bot-float{animation-delay:-.4s}.office .st[data-key=nexus] .bot-float{animation-delay:-1.1s}
.office .st[data-key=alliance] .bot-float{animation-delay:-1.7s}.office .st[data-key=mastermind] .bot-float{animation-delay:-2.3s}
.office .eyes{animation:blink 5.2s infinite;transform-box:fill-box;transform-origin:center}
.office .eyes-off{display:none}
.office .st.off .eyes,.office .st.paused .eyes{display:none}
.office .st.off .eyes-off,.office .st.paused .eyes-off{display:inline}
.office .st.off .visor,.office .st.paused .visor{fill:url(#rbVisorOff);stroke-opacity:.2}
.office .st.off .bot-float,.office .st.paused .bot-float{animation-duration:5s}
.office .st.busy .eyes{animation:focus 1.1s ease-in-out infinite}
.office .st.busy .arm.l{animation:tap .28s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top}
.office .st.busy .arm.r{animation:tap .28s ease-in-out infinite alternate-reverse;transform-box:fill-box;transform-origin:top}
.office .walker .arm.r{transform-box:fill-box;transform-origin:20% 80%;transition:transform .3s}
.office .walker.wave .arm.r{animation:wave .45s ease-in-out 2 alternate}
.office .walker.flying .bot-float{animation:none}
.office .walker.hidden{display:none}
.office .glow{opacity:0;transition:opacity .4s;filter:blur(6px)}
.office .st.busy .glow{opacity:.35;animation:glow 1.4s ease-in-out infinite}
.office .code text{font:600 10px 'JetBrains Mono',monospace;opacity:0}
.office .st.busy .code text{animation:code 1.8s linear infinite}
.office .zz text{font:700 14px Onest,sans-serif;fill:#8FA0BA;opacity:0}
.office .st.off .zz text,.office .st.paused .zz text{animation:zz 2.4s ease-in-out infinite}
.office .st.away .seated,.office .st.away .glow,.office .st.away .code{display:none}
.office .folder.has{animation:nudge 2.6s ease-in-out infinite}
.office .rack circle{animation:led 2.4s steps(2) infinite}
.office.thinking .rack circle{animation-duration:.5s}
.office .stars{opacity:0;transition:opacity .6s}
.office .win-light{opacity:0}
.office.night .sky1{stop-color:#141C3A}.office.night .sky2{stop-color:#33427A}
.office.night .sun{fill:#F4F1D0}
.office.night .stars,.office.night .win-light{opacity:1}
.office.night .city polygon{fill:#24315A}
.office.night{background:radial-gradient(120% 90% at 50% 10%,#F2F5FA 0%,#E2E8F1 60%,#D6DEE9 100%)}
.st-label[hidden]{display:none}
.st-label{position:absolute;transform:translate(-50%,-100%);background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:999px;padding:.25em .8em;font-size:clamp(9px,1.25cqw,12px);font-weight:600;color:var(--ink2);white-space:nowrap;box-shadow:0 2px 6px rgba(17,21,28,.08)}
.st-label[data-tone=ok]{color:var(--ok);border-color:#BFE3CC}
.st-label[data-tone=bad]{color:var(--bad);border-color:#F5C4BE}
.st-label[data-tone=wait]{color:var(--wait);border-color:#F2D9A7}
.st-label[data-tone=off]{color:var(--muted)}
.bubble{position:absolute;transform:translate(-50%,-100%);max-width:min(300px,60cqw);background:#fff;border:1px solid var(--line);border-radius:14px;padding:.6em .9em;font-size:clamp(10px,1.4cqw,13px);line-height:1.35;box-shadow:0 8px 24px rgba(17,21,28,.14);animation:pop .3s cubic-bezier(.2,.9,.3,1.2);transition:opacity .35s}
.bubble::after{content:'';position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.bubble.ceo{border-color:#9EDCF5}.bubble.ceo::after{border-color:#9EDCF5}
.bubble .q{color:var(--ink2)}
.bubble.pop{font-size:clamp(9px,1.25cqw,12px);padding:.45em .8em}
.bubble.out{opacity:0}
.plane{position:absolute;font-size:20px;animation:fly 1.8s ease-in forwards}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes focus{0%,100%{opacity:1}50%{opacity:.65}}
@keyframes tap{to{transform:translateY(2.5px)}}
@keyframes wave{to{transform:rotate(-70deg)}}
@keyframes glow{50%{opacity:.18}}
@keyframes code{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
@keyframes zz{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@keyframes nudge{0%,80%,100%{transform:translateY(0)}88%{transform:translateY(-4px)}}
@keyframes led{50%{opacity:.25}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-85%) scale(.85)}}
@keyframes fly{to{opacity:0;transform:translate(160px,-120px) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.office *,.office *::after{animation:none!important;transition:none!important}}
.office-side{display:flex;flex-direction:column;gap:12px}
.now-list{display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
.now-list .e{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:8px 0;border-top:1px solid var(--line2);font-size:13px}

/* ---------- чат ---------- */
.chat{display:flex;flex-direction:column;height:min(72vh,760px);overflow:hidden}
.chat-log{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.msg{max-width:min(78%,640px);padding:10px 14px;border-radius:16px;white-space:pre-wrap;word-break:break-word;line-height:1.45}
.msg.user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.msg.assistant{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.msg .meta{display:block;font-size:11px;margin-top:4px;opacity:.65}
.chat-status{min-height:32px;padding:7px 20px;font-size:13px;color:var(--ink2);background:var(--soft);border-top:1px solid var(--line2)}
.chat-form{display:flex;gap:8px;align-items:flex-end;padding:12px}
.chat-form textarea{flex:1;min-height:48px;max-height:180px;resize:vertical;padding:12px 14px;border-radius:12px;border:1px solid var(--brd);line-height:1.4}
.ctx-bar{height:10px;border-radius:5px;background:var(--line2);overflow:hidden}.ctx-bar>div{height:10px;background:var(--focus);border-radius:5px;min-width:3px}
details.sum summary{cursor:pointer;color:var(--focus);font-weight:500;padding:6px 0}
details.sum div{white-space:pre-wrap;color:var(--ink2);background:var(--soft);border-radius:10px;padding:10px 12px;max-height:280px;overflow-y:auto}

/* ---------- черновик: команда текстом ---------- */
.say{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.say input{flex:1 1 220px;min-width:0;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--brd);background:#fff}
.say-hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ---------- график ---------- */
.chart2{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.yaxis{position:relative;height:200px;font-size:11px;color:var(--muted)}
.yaxis span{position:absolute;right:0;transform:translateY(50%)}
.chart .grid{position:absolute;left:0;right:0;border-top:1px dashed var(--line);pointer-events:none}
.chart .col{position:relative;cursor:pointer;border:0;background:transparent;padding:0}
.chart .col .n{position:absolute;left:0;right:0;text-align:center;font-size:11px;font-weight:600;color:var(--ink2)}
.chart .col[aria-pressed=true]{background:rgba(42,120,214,.08);border-radius:4px}
.hour-info{min-height:22px;font-size:13px;color:var(--ink2)}

/* ---------- память ---------- */
.mem-item{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--soft);border-radius:12px;margin-top:8px}
.mem-item .t{white-space:pre-wrap;word-break:break-word}
.mem-item .m{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12px;color:var(--muted)}
.mem-item .acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.mini{min-height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--brd);background:#fff;font-size:12px;font-weight:500;cursor:pointer;color:var(--ink)}
.mini.danger{color:var(--bad);border-color:#F5C4BE}
.vis{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:#fff;border:1px solid var(--line)}
textarea.box{width:100%;min-height:80px;resize:vertical;padding:10px 12px;border-radius:10px;border:1px solid var(--brd);background:#fff;line-height:1.4}
.info-note{padding:10px 14px;border-radius:10px;background:#EAF2FC;color:#1D4F8C;font-size:13px}

/* ---------- лист (диалог со списком) ---------- */
dialog.sheet{max-width:640px}
dialog.sheet .list{max-height:60vh;overflow-y:auto;margin:10px 0}
dialog.sheet .doc-text{white-space:pre-wrap;word-break:break-word;background:var(--soft);border-radius:10px;padding:12px}
.task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line2)}
.task .late{color:var(--bad);font-weight:600;font-size:12px}
button.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}