/* ====================================================================
   ARTEMIS COCKPIT v4 — externalized stylesheet (production /v4-app)
   Self-hosted fonts (no external fetch — runs under STRICT CSP):
     Space Grotesk (latin, variable)  — vendor/space-grotesk-latin.woff2
     JetBrains Mono (latin + cyrillic, variable) — vendor/jetbrains-mono-*.woff2
   font-display:swap so text paints instantly with the system fallback.
   Space Grotesk ships latin only (no Cyrillic glyphs); Cyrillic UI text
   falls back to system-ui via the --sans stack — same as the prototype.
   ==================================================================== */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/vendor/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/vendor/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/vendor/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ====================================================================
   ARTEMIS COCKPIT v4 — "One unified feed"
   ONE continuous stream: settled turns = conversation cards; the ACTIVE
   turn renders live at the BOTTOM of the SAME stream (the live terminal/
   output is the "live edge" of the one feed). No Терминал/Чтение toggle.
   Permission default = Полный. Honest data only — no ETA, no % progress,
   no fake-busy. Every control clickable; unwired data shows an honest
   inline placeholder note (never fake content).
   Brand: deep-navy / card #0d142a / cyan #7cc5ff→#3a8dff / silver ink.
   Self-contained: inline CSS + JS. No /vendor dependency.
   ==================================================================== */
:root{
  --ink:#eef0fb; --ink-dim:#c9cde0; --ink-faint:#9aa2c6;
  --bg:#04060f; --bg-2:#0a0a1a; --bg-3:#0a0f24;
  --card:#0d142a; --card-2:#101831; --elev:#141d3a;
  --line:rgba(124,180,255,.13); --line-2:rgba(124,180,255,.22); --line-3:rgba(124,180,255,.34);
  --acc:#7cc5ff; --acc-2:#3a8dff; --acc-deep:#1e6ee0; --acc-glow:rgba(124,197,255,.40);
  --silver:#c9cde0;
  --green:#7cffaa; --green-d:#54e08a; --amber:#ffc066; --red:#ff7a8d; --red-d:#ff5a72; --violet:#c4b5fd;
  --r-lg:18px; --r:14px; --r-sm:10px; --pill:999px;
  --sans:'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --topbar-h:54px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; letter-spacing:-.003em;
  overflow:hidden; position:fixed; top:0; left:0; right:0; bottom:auto; width:100%;
  /* Height tracks the VISUAL viewport (--vvh, set by pinViewport) so the iOS soft keyboard shrinks the
     app and the composer rises ABOVE the keyboard instead of being buried. Falls back to the dynamic
     viewport height before JS runs / on desktop. */
  height:var(--vvh,100dvh);
  display:flex; flex-direction:column;
}
input,textarea,select,button{font:inherit;color:inherit}
input,textarea,select{font-size:16px}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--acc)!important;border-radius:8px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(124,180,255,.16);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(124,180,255,.30);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* cosmic backdrop */
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 42% at 12% 6%, rgba(58,141,255,.18), transparent 68%),
    radial-gradient(ellipse 64% 52% at 90% 96%, rgba(140,90,255,.12), transparent 70%),
    radial-gradient(ellipse 30% 22% at 62% 44%, rgba(124,197,255,.05), transparent 72%);}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(1px 1px at 18% 28%,#fff,transparent 50%),
    radial-gradient(1px 1px at 78% 66%,#fff,transparent 50%),
    radial-gradient(1.4px 1.4px at 42% 80%,#c4d4ff,transparent 50%),
    radial-gradient(1px 1px at 62% 18%,#fff,transparent 50%),
    radial-gradient(1px 1px at 88% 38%,#c4d4ff,transparent 50%),
    radial-gradient(1.2px 1.2px at 8% 58%,#fff,transparent 50%),
    radial-gradient(1.4px 1.4px at 70% 8%,#fff,transparent 50%),
    radial-gradient(1px 1px at 32% 48%,#bcdcff,transparent 50%);
  background-size:760px 760px; animation:drift 90s linear infinite;}
@keyframes drift{to{transform:translate(-200px,-200px)}}
@media (prefers-reduced-motion:reduce){.stars{animation:none}}

/* ================= APP SHELL ================= */
#app{position:relative;z-index:1;display:grid;flex:1 1 auto;min-height:0;overflow:hidden;
  grid-template-columns:304px 1fr 336px;transition:grid-template-columns .28s cubic-bezier(.2,0,0,1);}
@media (prefers-reduced-motion:reduce){#app{transition:none}}
@media (max-width:1240px){#app{grid-template-columns:288px 1fr}}
@media (max-width:768px){#app{grid-template-columns:1fr}} /* phone only — iPad portrait (834) keeps the 288px sidebar via the ≤1240 rule above */
/* Desktop: fold the right rail (План/Файлы) away to widen the reading column. */
@media (min-width:1241px){
  #app.rail-collapsed{grid-template-columns:304px 1fr 0px}
  #app.rail-collapsed #rail{transform:translateX(100%);opacity:0;pointer-events:none;border-left-color:transparent}
  #app.rail-collapsed #divR{display:none}
  /* Symmetric LEFT-rail collapse — fold #sidebar away to widen the conversation column.
     Same desktop gate as the right rail. applyCols() emits a 0px LEFT track (inline grid
     beats this CSS rule), this block just animates the panel itself + hides its divider. */
  #app.sidebar-collapsed{grid-template-columns:0px 1fr 336px}
  #app.sidebar-collapsed.rail-collapsed{grid-template-columns:0px 1fr 0px}
  #app.sidebar-collapsed #sidebar{transform:translateX(-100%);opacity:0;pointer-events:none;border-right-color:transparent}
  #app.sidebar-collapsed #divL{display:none}
}
/* draggable column dividers (desktop) */
.col-divider{position:absolute;top:0;bottom:0;width:9px;margin-left:-4px;z-index:20;cursor:col-resize;display:none}
.col-divider::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:transparent;transition:background .15s}
.col-divider:hover::after,.col-divider.drag::after{background:var(--acc);box-shadow:0 0 8px var(--acc-glow)}
@media (min-width:769px){.col-divider{display:block}}
@media (max-width:1240px){#divR{display:none}}

/* ================= SIDEBAR ================= */
#sidebar{position:relative;display:flex;flex-direction:column;min-height:0;
  background:linear-gradient(190deg,#0a0a1a 0%,#080d20 60%,#070a18 100%);
  border-right:1px solid var(--line);
  transition:transform .28s cubic-bezier(.2,0,0,1),opacity .2s ease,border-right-color .28s}
@media (prefers-reduced-motion:reduce){#sidebar{transition:none}}
/* collapse chevron in the sidebar brand header — desktop only (>1240px) */
.sb-collapse{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:none;
  align-items:center;justify-content:center;color:var(--ink-faint);border:1px solid transparent;transition:.14s}
.sb-collapse:hover{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.sb-collapse svg{transition:transform .2s}
@media (min-width:1241px){.sb-collapse{display:inline-flex}}
.sb-brand{display:flex;align-items:center;gap:11px;padding:calc(16px + var(--safe-top)) 18px 12px;}
/* LOGO SLOT — neutral, obviously swappable placeholder (drop in your own logo file) */
.logo-slot{width:36px;height:36px;flex:0 0 auto;border-radius:10px;position:relative;
  display:grid;place-items:center;border:1px dashed var(--line-3);
  background:radial-gradient(circle at 38% 30%,rgba(124,197,255,.16),rgba(58,141,255,.04))}
/* every emblem slot centers its injected <img> (logo.png) — block grid, image fills+contains */
.emblem{display:grid;place-items:center;line-height:0}
.emblem img{display:block;width:100%;height:100%;object-fit:contain}
.logo-slot .emblem{width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(124,197,255,.40))}
.logo-slot .slot-tag{position:absolute;bottom:-7px;right:-7px;font-family:var(--mono);font-size:7px;
  letter-spacing:.06em;color:var(--ink-faint);background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 3px}
.sb-brand .name{font-size:18px;font-weight:600;letter-spacing:-.01em}
.sb-brand .ver{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--ink-faint);text-transform:uppercase;margin-top:1px}

/* top action items (Новый чат / Поиск) — this is the GROWING flex column that wraps the
   pinned new-chat/search rows, the scrollable #projlist, and the pinned account footer.
   flex:1 1 auto + min-height:0 lets the inner #projlist actually scroll (esp. the mobile
   off-canvas drawer where the sidebar is a fixed flex column with many sessions). */
.sb-top{padding:2px 12px 8px;display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0}
/* new-chat button + the single search control stay pinned at the top (never scroll away) */
.sb-newbtn,.sb-search{flex:0 0 auto}
.sb-newbtn{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;height:44px;
  border-radius:var(--r);font-weight:600;font-size:13.5px;color:#06121f;
  background:linear-gradient(180deg,var(--acc),var(--acc-2));border:1px solid var(--acc);
  box-shadow:0 4px 16px var(--acc-glow);transition:filter .15s,transform .12s}
.sb-newbtn:hover{filter:brightness(1.08)} .sb-newbtn:active{transform:scale(.98)}
.sb-item{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 11px;border-radius:var(--r-sm);
  color:var(--ink-dim);font-size:13.5px;font-weight:500;transition:background .14s,color .14s;width:100%;text-align:left}
.sb-item:hover{background:var(--card);color:var(--ink)}
.sb-item svg{flex:0 0 auto;color:var(--ink-faint)}
.sb-item:hover svg{color:var(--acc)}
.sb-item .kbd{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--ink-faint);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px}

/* ONE search control — the row transforms in place. No second/stacked box.
   idle: show the label button; active: show the input field in the SAME slot. */
.sb-search{position:relative}
.sb-search-btn{width:100%}
.sb-search-field{display:none;position:relative}
.sb-search.searching .sb-search-btn{display:none}
.sb-search.searching .sb-search-field{display:block}
.sb-search-field input{width:100%;height:44px;padding:0 38px 0 36px;border-radius:var(--r-sm);
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink);font-size:16px}
.sb-search-field input:focus{outline:none;border-color:var(--acc)}
.sb-search-field .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-faint)}
.sb-search-field .clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint)}
.sb-search-field .clr:hover{color:var(--ink);background:var(--elev)}

#projlist{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 8px 14px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.grp-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  padding:14px 12px 6px;display:flex;align-items:center;gap:8px}
.grp-h .ct{margin-left:auto;color:var(--ink-faint);opacity:.7}
/* a folder is a CONTAINER: thin separator above each (except the first after a group head),
   plus a slightly stronger header so it clearly reads as a parent of its sessions. */
.proj{margin:2px 2px;padding-top:5px;margin-top:4px;border-top:1px solid var(--line)}
.grp-h + .proj{border-top:none;margin-top:0;padding-top:0}
.proj-head{display:flex;align-items:center;gap:8px;padding:7px 9px;min-height:40px;cursor:pointer;user-select:none;border-radius:8px}
.proj-head:hover{background:var(--card)}
.proj-head .chev{color:var(--ink-faint);transition:transform .2s;flex:0 0 auto}
.proj.collapsed .chev{transform:rotate(-90deg)}
.proj-head .hostdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.proj-head .hostdot.on{background:var(--green);box-shadow:0 0 7px var(--green)}
.proj-head .hostdot.off{background:var(--red);box-shadow:0 0 6px rgba(255,122,141,.5)}
.proj-head .pname{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.005em;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-head .host{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);letter-spacing:.04em;flex:0 0 auto}
.proj-head .obs-count{font-family:var(--mono);font-size:9.5px;color:var(--violet);letter-spacing:.03em;flex:0 0 auto;opacity:.8} /* V1: read-only VS Code count chip */
.proj-head .pin{flex:0 0 auto;width:24px;height:24px;border:0;background:none;border-radius:6px;display:grid;place-items:center;font-size:12px;line-height:1;opacity:.3;filter:grayscale(1);cursor:pointer;transition:.15s} /* F2: pin toggle */
.proj-head .pin.on{opacity:1;filter:none}
.proj-head .pin:hover{opacity:.75;background:var(--card)}
@media(max-width:768px){.proj-head .pin{width:30px;height:30px}}
/* F2 drag-to-reorder (Linear-grade). Visuals via classes + el.style (strict-CSP safe). Scroll/select killed
   ONLY while .grabbing (iOS needs touch-action:none on the captured container); otherwise the sidebar scrolls. */
#projlist.grabbing,#projlist.grabbing .proj-head,#projlist.grabbing *{touch-action:none!important;-webkit-user-select:none;user-select:none}
/* lifted row: scale via shadow/bg (NOT transform scale — JS owns transform for the pointer-follow translateY);
   pointer-events:none so hit-testing reads the row underneath. position by JS .style.transform. */
.proj.dragging{position:relative;z-index:6;background:var(--card-2);border-radius:11px;
  box-shadow:0 10px 28px rgba(0,0,0,.46),0 0 0 1px var(--line-2),0 0 22px var(--acc-glow);
  opacity:.97;cursor:grabbing;pointer-events:none;transition:box-shadow .16s ease,background .16s ease}
.proj.dragging .proj-head{background:transparent}
.proj.dragging .pname{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .proj-head{cursor:grab} #projlist.grabbing .proj-head{cursor:grabbing} }
.proj-head .add{margin-left:auto;flex:0 0 auto;color:var(--ink-faint);font-size:18px;line-height:1;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;transition:.15s} /* R7: flex:0 0 auto — never let the «+» tap target shrink below its size on a crowded folder row */
.proj-head .add:hover{color:var(--acc);background:var(--elev)}
.proj-head .add.busy{opacity:.45;pointer-events:none}
@media (hover:none),(pointer:coarse){ .proj-head .add{width:38px;height:38px;font-size:20px} }
.proj.collapsed .sess{display:none}
/* sessions are CHILDREN: indented under the folder + a 1px vertical guide line runs down
   the left of the whole session group, anchored under the folder chevron. */
.sess-group{position:relative;margin:2px 0 4px 16px;padding-left:11px}
.sess-group::before{content:"";position:absolute;left:0;top:2px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--line-3),var(--line));border-radius:1px}
.proj.collapsed .sess-group::before{display:none}
.sess{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;margin:1px 0;border-radius:var(--r-sm);
  cursor:pointer;border:1px solid transparent;transition:background .14s,border-color .14s;width:100%;text-align:left}
.sess:hover{background:var(--card)}
.sess.active{background:linear-gradient(180deg,rgba(124,197,255,.13),rgba(124,197,255,.045));border-color:var(--line-3)}
.sess .stat{flex:0 0 11px;height:11px;margin-top:3px;display:grid;place-items:center} /* R7: fixed 11px box, centered — the 11px running spinner and the 8px idle dot reserve the same width AND share a vertical center (no horizontal shift on flip, no ~1.5px idle-dot misalignment) */
.sdot{width:8px;height:8px;border-radius:50%;display:block}
.sdot.run{width:11px;height:11px;background:transparent;border:2px solid var(--acc-glow);border-top-color:var(--acc);box-shadow:0 0 6px var(--acc-glow);animation:spin .7s linear infinite}
.sdot.idle{background:var(--amber);box-shadow:0 0 7px rgba(255,192,102,.5)}
.sdot.done{background:transparent;width:auto;height:auto;color:var(--green);font-size:12px;line-height:1;margin-top:-1px}
.sdot.wait{background:var(--ink-faint)}
.sdot.obs{background:var(--violet);box-shadow:0 0 7px rgba(196,181,253,.55)}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.sess .body{min-width:0;flex:1}
.sess .row1{display:flex;align-items:center;gap:6px}
.sess .ttl{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--ink-dim)}
.sess.active .ttl{color:#fff}
.sess .unread{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.sess .tag{flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line-2);border-radius:6px;padding:1px 5px}
.sess .tag.obs{color:var(--violet);border-color:rgba(196,181,253,.35)}
.sess .sub{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.sess .when{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:2px}
/* search snippet under a result */
.sess .snip{font-size:11px;color:var(--ink-dim);margin-top:4px;line-height:1.4;white-space:normal;
  border-left:2px solid var(--line-3);padding-left:8px}
.sess .snip mark{background:rgba(124,197,255,.22);color:#fff;border-radius:3px;padding:0 2px}
.search-empty{padding:18px 14px;text-align:center;color:var(--ink-faint);font-size:12.5px;line-height:1.5}

/* account popover at bottom — pinned (never scrolls with the session list) */
.sb-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:11px 12px calc(11px + var(--safe-bot));position:relative}
.acct-btn{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:11px;transition:background .14s;text-align:left}
.acct-btn:hover{background:var(--card)}
.acct-btn .ava{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font-weight:600;font-size:13px;
  color:#06121f;background:linear-gradient(150deg,var(--acc),var(--violet))}
.acct-btn .who{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} /* R7: truncate the name so a long one can't paint over the chevron */
.acct-btn .mail{font-size:10.5px;color:var(--ink-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.acct-btn .chev{margin-left:auto;color:var(--ink-faint);transition:transform .18s;flex:0 0 auto}
.acct-pop{position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);z-index:60;
  background:var(--elev);border:1px solid var(--line-3);border-radius:var(--r);padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);pointer-events:none;transition:.16s;
  max-height:78vh;overflow-y:auto}
.acct-pop.open{opacity:1;transform:translateY(0);pointer-events:auto}
.acct-pop .ah{padding:9px 11px 7px;display:flex;align-items:center;gap:9px}
.acct-pop .ah .ava{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-weight:600;font-size:12px;color:#06121f;background:linear-gradient(150deg,var(--acc),var(--violet))}
.acct-pop .ah .e{font-size:12.5px;color:var(--ink);font-weight:600}
.acct-pop .ah .m{font-size:10.5px;color:var(--ink-faint);margin-top:1px}
.acct-pop .lims{margin:4px 4px 2px;padding:10px 11px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:11px;display:flex;flex-direction:column;gap:10px}
.acct-pop .lims .lh{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:7px}
.acct-pop .lims .lh .rst{margin-left:auto;color:var(--ink-faint);opacity:.8;text-transform:none;letter-spacing:0}
.lim{display:block}
.lim .lr{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-faint);margin-bottom:5px}
.lim .lr b{color:var(--ink-dim);font-weight:600}
.lim .bar{height:6px;border-radius:99px;background:var(--bg);overflow:hidden}
.lim .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green-d),var(--acc));border-radius:99px}
.lim .bar i.hot{background:linear-gradient(90deg,var(--amber),var(--red))}
.acct-pop .sep{height:1px;background:var(--line);margin:6px 4px}
.acct-pop .ai{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;font-size:13px;color:var(--ink-dim);width:100%;transition:background .12s;min-height:44px;text-align:left}
.acct-pop .ai:hover{background:var(--card);color:var(--ink)}
.acct-pop .ai svg{color:var(--ink-faint);flex:0 0 auto}
.acct-pop .ai .sub{font-size:10.5px;color:var(--ink-faint);margin-top:1px}
.acct-pop .ai.swap{color:var(--acc)} .acct-pop .ai.swap svg{color:var(--acc)}
.acct-pop .ai.danger{color:var(--red)} .acct-pop .ai.danger svg{color:var(--red)}

/* ================= MAIN ================= */
#main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
#main.dropping::after{content:"Отпустите файл — добавится в чат";position:absolute;inset:10px;z-index:60;
  display:grid;place-items:center;border:2px dashed var(--acc);border-radius:var(--r-lg);
  background:rgba(124,197,255,.07);color:var(--acc);font-size:14px;font-weight:600;letter-spacing:.01em;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* P1b — hide the feed while it renders+pins, then fade it in already at the bottom (no top-to-bottom scroll) */
#scroll{transition:opacity .12s ease}
#scroll.settling{opacity:0;transition:none} /* hide INSTANTLY during render; only the reveal (class removed) fades in */
.topbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(9px + var(--safe-top)) 16px 9px;min-height:var(--topbar-h);
  border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--bg-2) 80%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);z-index:14}
.hamb,.tb-back{display:none;width:44px;height:44px;border-radius:11px;color:var(--ink-dim);flex:0 0 auto;align-items:center;justify-content:center}
.hamb:hover,.tb-back:hover{background:var(--elev);color:var(--ink)}
.tb-title{min-width:0;flex:1}
.tb-title .t{font-size:14.5px;font-weight:600;min-width:0;display:flex;align-items:center;gap:8px}
/* ellipsis must live on a block/flex-ITEM, not the flex container (where text-overflow is inert) */
.tb-title .t .tt{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title .t .live,.tb-title .t .obsbadge{flex:0 0 auto}
.tb-title .t .live{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  border:1px solid rgba(124,255,170,.3);background:rgba(124,255,170,.08);border-radius:6px;padding:1px 6px;display:inline-flex;align-items:center;gap:5px}
.tb-title .t .live .d{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:pulse 1.5s ease-in-out infinite}
.tb-title .t .obsbadge{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);
  border:1px solid rgba(196,181,253,.4);background:rgba(196,181,253,.08);border-radius:6px;padding:2px 7px;display:inline-flex;align-items:center;gap:5px}
.tb-title .p{font-family:var(--mono);font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tb-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto;position:relative}
/* HONEST live meters: REAL elapsed + REAL tokens (no ETA, no %) */
.meter{font-family:var(--mono);font-size:10.5px;color:var(--acc);background:var(--card);border:1px solid var(--line-2);
  border-radius:8px;padding:5px 9px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.meter.elapsed{color:var(--ink-dim)}
.iconbtn{width:40px;height:40px;border-radius:11px;color:var(--ink-dim);border:1px solid var(--line-2);background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:.15s;position:relative}
.iconbtn:hover{background:var(--elev);color:var(--ink);border-color:var(--line-3)}
.iconbtn.on{color:var(--acc);border-color:var(--line-3);background:rgba(124,197,255,.08)}

/* kebab menu (real per-session actions) */
.kebab-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:230px;
  background:var(--elev);border:1px solid var(--line-3);border-radius:var(--r);padding:6px;
  box-shadow:0 16px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.16s}
.kebab-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
.kebab-menu .mi{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;font-size:13px;color:var(--ink-dim);width:100%;text-align:left;transition:background .12s;min-height:44px}
.kebab-menu .mi:hover{background:var(--card);color:var(--ink)}
.kebab-menu .mi svg{color:var(--ink-faint);flex:0 0 auto}
.kebab-menu .mi:hover svg{color:var(--acc)}
.kebab-menu .mi.danger{color:var(--red)} .kebab-menu .mi.danger svg{color:var(--red)}
.kebab-menu .sep{height:1px;background:var(--line);margin:5px 4px}

/* state banners (loading/disconnect/ended/error) */
.banner{display:flex;align-items:center;gap:10px;justify-content:center;padding:9px 14px;font-size:12px;font-weight:500;border-bottom:1px solid var(--line)}
.banner.recon{color:var(--amber);background:rgba(255,192,102,.08)}
.banner.ended{color:var(--ink-dim);background:var(--bg-2)}
.banner.error{color:var(--red);background:rgba(255,122,141,.08)}
.banner.update{color:var(--acc);background:rgba(124,197,255,.08)}
.banner.update svg{flex:0 0 auto}
.banner.codriven{color:var(--amber);background:rgba(255,192,102,.10)}
.banner.codriven svg{flex:0 0 auto}
.banner .spd{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,192,102,.3);border-top-color:var(--amber);animation:spin .8s linear infinite}
.banner .relink{margin-left:6px;color:var(--acc);text-decoration:underline;text-underline-offset:2px;cursor:pointer;user-select:none;border-radius:5px;padding:1px 4px;transition:background .12s,transform .06s,opacity .12s}
.banner .relink:hover{background:rgba(124,197,255,.14)}
.banner .relink:active{transform:translateY(1px) scale(.96);opacity:.7;background:rgba(124,197,255,.22)}

/* ===== THE ONE UNIFIED FEED ===== */
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* P1b root cause: scroll-behavior:smooth ANIMATED every programmatic scroll-to-bottom (~900ms) — that's
   the visible "перемотка к низу" on open. The feed pins INSTANTLY now; smooth scrolling is wrong for a
   live terminal feed that auto-follows output. */
.feed{max-width:880px;margin:0 auto;padding:24px 24px 28px;display:flex;flex-direction:column;gap:20px}
.daydiv{display:flex;align-items:center;gap:14px;color:var(--ink-faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.daydiv::before,.daydiv::after{content:"";flex:1;height:1px;background:var(--line)}

/* observed read-only notice */
.obs-notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);
  background:rgba(196,181,253,.07);border:1px solid rgba(196,181,253,.28)}
.obs-notice .oi{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;color:var(--violet);background:rgba(196,181,253,.12);border:1px solid rgba(196,181,253,.3)}
.obs-notice .ot{font-size:12.5px;line-height:1.5;color:var(--ink-dim)}
.obs-notice .ot b{color:var(--violet)}
.obs-notice .ot a{color:var(--acc);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* honest inline placeholder note (for unwired controls) */
.ph-note{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--r);font-size:12.5px;line-height:1.5;
  color:var(--ink-dim);background:rgba(124,197,255,.05);border:1px dashed var(--line-3);margin:0 auto;max-width:880px}
.ph-note svg{color:var(--acc);flex:0 0 auto;margin-top:1px}
.ph-note b{color:var(--ink)}
.ph-note .src-tag{font-family:var(--mono);color:var(--acc)}

/* ===== message rows (settled conversation cards) ===== */
.msg{display:flex;gap:13px;position:relative}
.msg .ava{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;margin-top:1px}
.msg.user .ava{color:#06121f;background:linear-gradient(150deg,var(--acc),var(--violet));font-weight:600;font-size:12px}
.msg.bot .ava{background:var(--card);border:1px solid var(--line-2);padding:5px;place-items:center}
.msg.bot .ava .emblem{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(124,197,255,.35))}
.msg .col{min-width:0;flex:1;display:flex;flex-direction:column;gap:9px}
.msg .meta{display:flex;align-items:center;gap:8px}
.msg .meta .nm{font-size:12px;font-weight:600;color:var(--ink-dim)}
.msg.user .meta .nm{color:var(--acc)}
.msg .meta .ts{font-family:var(--mono);font-size:10px;color:var(--ink-faint)}
.msg .copy{margin-left:auto;width:30px;height:30px;border-radius:7px;color:var(--ink-faint);border:1px solid transparent;display:grid;place-items:center;opacity:0;transition:.15s}
.msg:hover .copy{opacity:1}
.msg .copy:hover{color:var(--acc);background:var(--elev);border-color:var(--line-2)}
.msg .copy.ok{color:var(--green);border-color:rgba(124,255,170,.3);opacity:1}
/* Touch devices have no hover — copy must always be reachable + 44px hit area */
@media (hover:none),(pointer:coarse){
  .msg .copy{opacity:.65;width:44px;height:44px;margin:-7px -7px -7px auto}
}
.bubble{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;font-size:14px;line-height:1.6;color:var(--ink)}
.msg.user .bubble{background:linear-gradient(180deg,rgba(124,197,255,.10),rgba(58,141,255,.05));border-color:var(--line-3);color:#eaf2ff}
.bubble p{margin:0 0 9px} .bubble p:last-child{margin:0}
.bubble code{font-family:var(--mono);font-size:12.5px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:6px;padding:1px 5px}
.bubble strong{color:#fff;font-weight:600}
.bubble ul{margin:7px 0;padding-left:20px} .bubble li{margin:3px 0}

/* collapsed tool-call detail (from real tool calls) */
.cmds{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);overflow:hidden}
.cmds>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 13px;font-size:12.5px;color:var(--ink-dim);user-select:none;transition:background .14s;min-height:44px}
.cmds>summary::-webkit-details-marker{display:none}
.cmds>summary:hover{background:var(--card)}
.cmds>summary .chev{transition:transform .2s;color:var(--ink-faint);flex:0 0 auto}
.cmds[open]>summary .chev{transform:rotate(90deg)}
.cmds>summary .lbl{font-weight:500}
.cmds>summary .gloss{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-left:auto}
.cmds-body{border-top:1px solid var(--line);padding:10px 13px;display:flex;flex-direction:column;gap:6px}
.cmds-body .cp{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);display:flex;align-items:center;gap:8px}
.cmds-body .cp .ok{color:var(--green-d)}
.cmds-body .cp .dollar{color:var(--ink-faint)}

/* ===== STEP LIST (only from real tool calls — no % bar, no ETA) ===== */
.run{border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card),var(--bg-2));overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.34)}
.run-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.run-head .spark{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 30%,rgba(124,197,255,.30),rgba(58,141,255,.10));border:1px solid var(--line-3);color:var(--acc)}
.run-head .ti{min-width:0;flex:1}
.run-head .ti .h{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.run-head .ti .s{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:2px;letter-spacing:.04em}
.run-badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:7px;padding:3px 9px;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.run-badge.run{color:var(--acc);background:rgba(124,197,255,.10);border:1px solid var(--line-3)}
.run-badge.run .d{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 7px var(--acc);animation:pulse 1.4s ease-in-out infinite}
.run-badge.done{color:var(--green);background:rgba(124,255,170,.08);border:1px solid rgba(124,255,170,.3)}
.steps{padding:6px 16px 12px}
.step{display:flex;gap:12px;position:relative;padding:9px 0}
.step:not(:last-child)::before{content:"";position:absolute;left:9px;top:24px;bottom:-9px;width:2px;background:var(--line-2)}
.step.done:not(:last-child)::before{background:linear-gradient(180deg,rgba(124,255,170,.5),var(--line-2))}
.step .ico{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11px;z-index:1;border:2px solid var(--line-2);background:var(--bg-2)}
.step.done .ico{border-color:rgba(124,255,170,.55);color:var(--green);background:rgba(124,255,170,.08)}
.step.doing .ico{border-color:var(--acc);background:var(--card)}
.step.doing .ico .sp{width:10px;height:10px;border-radius:50%;border:2px solid rgba(124,197,255,.3);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.step.doing .ico .sp{animation:none;border-top-color:var(--acc)}}
.step.todo .ico{color:var(--ink-faint)}
.step .sc{min-width:0;flex:1}
.step .st-t{font-size:13px;line-height:1.45}
.step.done .st-t{color:var(--ink-dim)}
.step.doing .st-t{color:#fff;font-weight:500}
.step.todo .st-t{color:var(--ink-faint)}
.step .st-meta{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:3px}

/* file-diff card (from Edit/Write) */
.diff{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.diff-head{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--card)}
.diff-head .fi{color:var(--acc);flex:0 0 auto}
.diff-head .fn{font-family:var(--mono);font-size:12px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diff-head .stat{margin-left:auto;display:flex;gap:8px;font-family:var(--mono);font-size:10.5px;flex:0 0 auto}
.diff-head .stat .add{color:var(--green)} .diff-head .stat .del{color:var(--red)}
.diff-body{font-family:var(--mono);font-size:11.5px;line-height:1.7;overflow-x:auto}
.dl{display:flex;white-space:pre;padding:0 13px 0 0;min-width:max-content}
.dl .ln{flex:0 0 auto;width:42px;text-align:right;padding-right:13px;color:var(--ink-faint);opacity:.55;user-select:none}
.dl .tx{flex:1;padding-left:11px}
.dl.add{background:rgba(124,255,170,.07)} .dl.add .tx{color:#bdfdd8}.dl.add .tx::before{content:"+ ";color:var(--green)}
.dl.del{background:rgba(255,122,141,.08)} .dl.del .tx{color:#ffccd4}.dl.del .tx::before{content:"- ";color:var(--red)}
.dl.ctx .tx{color:var(--ink-dim)} .dl.ctx .tx::before{content:"  "}
.dl.hunk{background:var(--bg-3)} .dl.hunk .tx{color:var(--acc);opacity:.8} .dl.hunk .ln{opacity:0}

/* ===== LIVE EDGE — the active turn at the bottom of the same feed ===== */
.live-edge{border:1px solid var(--line-3);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,rgba(124,197,255,.05),var(--bg-2));box-shadow:0 0 0 1px rgba(124,197,255,.06),0 10px 34px rgba(0,0,0,.4)}
.le-head{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(124,197,255,.04)}
.le-head .le-ava{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;background:var(--card);border:1px solid var(--line-2);padding:5px}
.le-head .le-ava .emblem{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(124,197,255,.35))}
.le-head .le-nm{font-size:12px;font-weight:600;color:var(--ink-dim)}
.le-head .le-now{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--line-3);background:rgba(124,197,255,.08);border-radius:6px;padding:2px 7px;margin-left:6px;display:inline-flex;align-items:center;gap:5px}
.le-head .le-now .d{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 7px var(--acc);animation:pulse 1.4s ease-in-out infinite}
.le-head .le-lockwrap{margin-left:auto;display:inline-flex;align-items:center;gap:7px}
.le-head .le-lock{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:4px 8px}
.le-head .le-lock.self{color:var(--green);border:1px solid rgba(124,255,170,.28);background:rgba(124,255,170,.06)}
.le-head .le-lock.free{color:var(--ink-faint);border:1px solid var(--line-2);background:transparent}
.le-head .le-lock.contested{color:var(--amber);border:1px solid rgba(255,192,102,.35);background:rgba(255,192,102,.08)}
.le-head .le-take{font-size:10.5px;font-weight:600;color:#06121f;background:linear-gradient(180deg,var(--amber),#ff9d3c);border-radius:8px;padding:5px 10px;min-height:32px}
.le-head .le-take:hover{filter:brightness(1.06)}
.le-head .le-raw{font-size:11px;color:var(--ink-faint);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;transition:.15s}
.le-head .le-raw:hover{color:var(--ink);border-color:var(--line-3)}
.le-head .le-raw svg{transition:transform .2s}
.le-head .le-raw.open svg{transform:rotate(180deg)}
/* U1 — keep the live-terminal header INSIDE its card on narrow screens (the «развернуть терминал»
   button was overflowing past the right edge / "touching the line"). Truncate the name, never let the
   button shrink, and drop the redundant «СЕЙЧАС» chip on phones (the green dot + lock already show it). */
.le-head{min-width:0}
.le-head .le-nm{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.le-head .le-raw{flex:0 0 auto}
@media (max-width:560px){ .le-head{gap:7px;padding:10px 12px} .le-head .le-now{display:none} }
/* the live terminal — the raw edge, collapsed by default behind "развернуть сырой терминал" */
.term{display:none;background:#04060d;border-bottom:1px solid var(--line)}
.term.show{display:block}
.term-chrome{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--card)}
.term-chrome .dots{display:flex;gap:5px}
.term-chrome .dots i{width:9px;height:9px;border-radius:50%;display:block}
.term-chrome .dots i:nth-child(1){background:#ff6b81}.term-chrome .dots i:nth-child(2){background:#ffc066}.term-chrome .dots i:nth-child(3){background:var(--green-d)}
.term-chrome .tl{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);letter-spacing:.05em}
.term-chrome .lock{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--green);display:inline-flex;align-items:center;gap:5px}
/* live "what is it doing right now" strip — one in-place line, pulses while working */
.le-activity{display:none;align-items:center;gap:6px;margin-left:10px;font-family:var(--mono);font-size:10px;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.le-activity.on{display:inline-flex}
.le-activity .apulse{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--acc);animation:apulse 1s ease-in-out infinite}
@keyframes apulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
/* live step timeline — capped, scrollable list of tool steps; one row per step, not per word */
.le-steps{display:none;flex-direction:column;gap:1px;max-height:118px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px;border-bottom:1px solid var(--line);background:rgba(124,197,255,.03);font-family:var(--mono);font-size:10.5px;line-height:1.5}
.le-steps.on{display:flex}
.le-steps .step{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;min-height:16px}
.le-steps .step .mk{flex:0 0 auto;width:11px;text-align:center;color:var(--ink-faint)}
.le-steps .step.ok .mk{color:var(--green)}
.le-steps .step.err .mk{color:var(--red)}
.le-steps .step.run .mk{display:inline-flex;align-items:center;justify-content:center}
.le-steps .step.run .apulse{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--acc);animation:apulse 1s ease-in-out infinite} /* the running-step pulse dot had NO size/bg outside .le-activity → invisible marker (audit iter-8) */
.le-steps .step .tn{flex:0 0 auto;color:var(--acc)}
.le-steps .step .sx{color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis}
.le-steps .step.run .sx{color:var(--ink-dim)}
.le-steps .step.run{color:var(--ink-dim)}
.termpre{max-height:300px;overflow:auto;margin:0;padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.55;color:#cfe6ff;white-space:pre-wrap;word-break:break-word}
.termpre .ok{color:var(--green)} .termpre .dim{color:var(--ink-faint)} .termpre .pr{color:var(--acc)} .termpre .warn{color:var(--amber)}
.termpre .cur{display:inline-block;width:8px;height:15px;background:var(--acc);vertical-align:text-bottom;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.le-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
/* live thinking line */
.thinking{display:flex;align-items:center;gap:10px;color:var(--ink-faint);font-size:12.5px;font-style:italic}
.thinking .orb{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 9px var(--acc);animation:pulse 1.1s ease-in-out infinite}
.thinking .bars{display:inline-flex;gap:3px;align-items:flex-end;height:13px}
.thinking .bars i{width:3px;background:var(--acc);border-radius:2px;animation:eq 1s ease-in-out infinite}
.thinking .bars i:nth-child(2){animation-delay:.15s}.thinking .bars i:nth-child(3){animation-delay:.3s}.thinking .bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
@media (prefers-reduced-motion:reduce){.thinking .bars i{animation:none;height:8px}}

/* HITL pending approval (sits in the feed as the live edge when paused) */
.hitl{border:1px solid rgba(255,192,102,.4);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,rgba(255,192,102,.08),var(--bg-2));box-shadow:0 8px 30px rgba(0,0,0,.34)}
.hitl-head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid rgba(255,192,102,.25)}
.hitl-head .hi{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;color:var(--amber);background:rgba(255,192,102,.14);border:1px solid rgba(255,192,102,.35)}
.hitl-head .ht{font-size:13.5px;font-weight:600;color:var(--amber)}
.hitl-head .hs{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:2px}
.hitl-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.hitl-body .tool{font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
.hitl-body .tool b{color:var(--ink)}
.hitl-body .path{font-family:var(--mono);font-size:11.5px;color:var(--acc);background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;overflow-x:auto;white-space:nowrap}
.hitl-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.hitl-actions .tg{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:11px;font-size:12.5px;font-weight:600;color:var(--acc);background:var(--card);border:1px solid var(--line-3);min-height:44px}
.hitl-actions .tg:hover{border-color:var(--acc)}
.hitl-actions .tg svg{flex:0 0 auto}
.hitl-actions .hwait{font-family:var(--mono);font-size:11px;color:var(--amber);display:inline-flex;align-items:center;gap:7px;margin-left:auto}
.hitl-actions .hwait .d{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px var(--amber);animation:pulse 1.3s ease-in-out infinite}

/* ===== EMPTY / HOME greeting ===== */
.home{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 22px;text-align:center}
.home .logo-slot{width:64px;height:64px;margin-bottom:18px}
.home .logo-slot .emblem{width:54px;height:54px}
.home h1{font-size:26px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.home .sub{font-size:13.5px;color:var(--ink-faint);margin:0 0 26px}
.suggs{display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px}
.sugg{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-align:left;transition:border-color .15s,background .15s;min-height:54px}
.sugg:hover{border-color:var(--line-3);background:var(--card-2)}
.sugg .si{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;color:var(--acc);background:radial-gradient(circle at 38% 30%,rgba(124,197,255,.22),rgba(58,141,255,.06));border:1px solid var(--line-2)}
.sugg .st{font-size:13.5px;font-weight:500;color:var(--ink)}
.sugg .sd{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.sugg .sgo{margin-left:auto;color:var(--ink-faint)}

/* loading skeleton — mimics the conversation layout (avatar + message-shaped blocks + live edge) */
.skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--card) 25%,var(--elev) 37%,var(--card) 63%);background-size:400% 100%;animation:sh 1.4s ease infinite}
@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-msg{display:flex;gap:13px}
.sk-ava{width:30px;height:30px;border-radius:9px;flex:0 0 auto;background:linear-gradient(90deg,var(--card) 25%,var(--elev) 37%,var(--card) 63%);background-size:400% 100%;animation:sh 1.4s ease infinite}
.sk-ava.user{border-radius:9px}
.sk-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;padding-top:4px}
.sk-edge{border:1px solid var(--line-3);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(124,197,255,.04),var(--bg-2));padding:18px 18px 22px;display:flex;flex-direction:column;gap:11px;margin-left:43px}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
@media (prefers-reduced-motion:reduce){
  .sdot.run,.tb-title .t .live .d,.run-badge.run .d,.le-head .le-now .d,.hitl-actions .hwait .d,.thinking .orb,.termpre .cur,.queued-chip .qc-dot,.le-activity .apulse,.le-steps .step.run .apulse,.banner .spd{animation:none!important}
}

/* scroll-to-latest FAB */
.tobottom{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--composer-h,96px) + 12px + var(--safe-bot));z-index:14;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 12px;border-radius:var(--pill);
  background:color-mix(in oklab,var(--card) 88%,transparent);border:1px solid var(--line-3);color:var(--ink-dim);font-size:11.5px;font-weight:500;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 20px rgba(0,0,0,.4);transition:opacity .2s,transform .2s}
.tobottom:hover{color:var(--ink);border-color:var(--acc)}
.tobottom.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(6px)}

/* ================= COMPOSER ================= */
.composer{flex:0 0 auto;border-top:1px solid var(--line);background:#070c1c;padding:12px 16px calc(12px + var(--safe-bot));z-index:13}
.composer.hidden-c{display:none}
/* dead session (ended/error/loading): composer is non-interactive — typing into a killed tmux can't work */
.composer.dead-c .comp-box{opacity:.5;pointer-events:none;filter:saturate(.6)}
.composer.dead-c .full-banner{display:none}
.composer.dead-c .dead-cta{display:flex}
.dead-cta{display:none;align-items:center;justify-content:center;gap:10px;max-width:880px;margin:0 auto 10px;padding:11px 14px;border-radius:11px;
  font-size:12.5px;color:var(--ink-dim);background:var(--card);border:1px solid var(--line-2)}
.dead-cta b{color:var(--ink)}
.dead-cta button{font-size:12px;font-weight:600;color:#06121f;background:linear-gradient(180deg,var(--acc),var(--acc-2));border-radius:9px;padding:7px 13px;min-height:36px}
/* «в очереди» chip — a busy-time composer message is HELD (not lost) and auto-sends when idle */
.queued-chip{display:flex;align-items:center;gap:9px;max-width:880px;margin:0 auto 10px;padding:9px 13px;border-radius:11px;background:rgba(255,192,102,.10);border:1px solid rgba(255,192,102,.34);color:var(--amber);font-size:12.5px;line-height:1.4}
.queued-chip[hidden]{display:none}
.queued-chip .qc-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px var(--amber);flex:0 0 auto;animation:qcpulse 1.4s ease-in-out infinite}
.queued-chip .qc-txt{flex:1 1 auto;min-width:0;display:flex;align-items:baseline}
.queued-chip .qc-pre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queued-chip .qc-re{flex:0 0 auto;white-space:nowrap;opacity:.85} /* the «отправлю, как освободится» reassurance never ellipsis-clips on a phone (audit iter-6) */
.queued-chip .qc-x{flex:0 0 auto;width:24px;height:24px;min-height:24px;border-radius:7px;font-size:16px;line-height:1;color:var(--amber);border:1px solid rgba(255,192,102,.34);background:transparent}
.queued-chip .qc-x:hover{background:rgba(255,192,102,.14)}
@media (hover:none),(pointer:coarse){ .queued-chip .qc-x{width:44px;height:44px;min-height:44px} } /* a11y: 44px touch target on phones (audit) */
@keyframes qcpulse{0%,100%{opacity:.45}50%{opacity:1}}
/* live BUSY badge in the header (flips from green «свободна» to amber «занята») */
.tb-title .t .live.busy{color:var(--amber)}
.tb-title .t .live.busy .d{background:var(--amber);box-shadow:0 0 7px var(--amber)}
.composer.home-mode .comp-hint-run{display:none}
.composer.home-mode .comp-hint-home{display:inline}
.comp-hint-home{display:none}
.comp-inner{max-width:880px;margin:0 auto}
/* Full-access is the DEFAULT, so keep it CALM: a quiet single inline line, not an alarm.
   Briefly emphasised right after an escalation, then settles. Hidden on home/ended/loading/observed. */
.full-banner{display:none;align-items:center;gap:8px;margin:0 0 9px;padding:7px 12px;border-radius:10px;font-size:11.5px;font-weight:500;
  color:var(--ink-faint);background:rgba(255,157,60,.05);border:1px solid rgba(255,157,60,.18)}
.full-banner.show{display:flex}
.full-banner .dotwarn{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--amber);box-shadow:0 0 6px rgba(255,157,60,.55)}
.full-banner span{flex:1;color:var(--ink-dim)}
.full-banner span b{color:var(--amber);font-weight:600}
.full-banner button{font-size:11px;font-weight:600;color:var(--ink-faint);border:1px solid var(--line-2);border-radius:9px;padding:5px 10px;min-height:32px}
.full-banner button:hover{color:var(--amber);border-color:rgba(255,157,60,.4)}
/* fresh escalation → louder for a few seconds */
.full-banner.fresh{color:var(--amber);background:rgba(255,157,60,.1);border-color:rgba(255,157,60,.4)}
.full-banner.fresh span{color:var(--amber)}
.comp-box{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);transition:border-color .15s,box-shadow .15s;overflow:visible}
.comp-box.focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.comp-top{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 6px 12px}
/* ATTACHMENTS — drag-drop / "+" picker add chips here (prototype: not uploaded to server) */
.attach-row{display:none;flex-wrap:wrap;gap:7px;padding:9px 12px 2px}
.attach-row.show{display:flex}
.att-chip{display:inline-flex;align-items:center;gap:8px;max-width:280px;padding:6px 8px 6px 10px;border-radius:11px;
  background:var(--bg-3);border:1px solid var(--line-2);font-size:12px;color:var(--ink-dim)}
.att-chip .fi{color:var(--acc);flex:0 0 auto}
.att-chip .nm{font-family:var(--mono);font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.att-chip .sz{font-family:var(--mono);font-size:10px;color:var(--ink-faint);flex:0 0 auto}
.att-chip .rm{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--ink-faint);transition:.14s}
.att-chip .rm:hover{color:var(--red);background:var(--elev)}
.att-note{display:none;align-items:flex-start;gap:8px;margin:9px 0 0;padding:8px 11px;border-radius:10px;font-size:11.5px;line-height:1.45;
  color:var(--ink-faint);background:rgba(124,197,255,.05);border:1px dashed var(--line-3)}
.att-note.show{display:flex}
.att-note svg{color:var(--acc);flex:0 0 auto;margin-top:1px}
.att-note b{color:var(--ink-dim)}
.comp-top textarea{flex:1;resize:none;min-height:30px;max-height:min(168px,30vh);background:none;border:none;outline:none;color:var(--ink);font-size:16px;line-height:1.5;padding:6px 2px}
.comp-top textarea::placeholder{color:var(--ink-faint)}
/* Touch devices (incl. iPad portrait, wider than the phone width-breakpoint): bump the remaining small
   controls to ≥44px via a CAPABILITY query, not width — so tablets are covered too (audit). */
@media (hover:none),(pointer:coarse){
  .le-head .le-take,.le-head .le-raw{min-height:44px}
  .peek-tab{min-width:44px;padding:14px 12px}
  .hist .turn .turn-copy,.msg .copy{min-height:44px}
  .eff-seg button{min-height:44px}
  .rtab{min-height:44px}
  .proj-head .add{width:44px;height:44px}
  .proj-head .pin{width:44px;height:44px} /* R7: pin hit-target was 24px (iPad) / 30px (phone) — below 44px */
  .tobottom{min-height:44px} /* R7: scroll-to-latest FAB was 32px on touch */
}
.attach{width:44px;height:44px;border-radius:12px;color:var(--ink-faint);border:1px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto;transition:.15s;background:var(--bg-3)}
.attach:hover{color:var(--acc);border-color:var(--line-3)}
.mic{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:var(--acc);border:1px solid var(--line-2);transition:.15s;background:radial-gradient(circle at 50% 34%,rgba(124,197,255,.20),rgba(124,197,255,.04))}
.mic:hover{border-color:var(--line-3)}
.mic.rec{color:var(--red);border-color:rgba(255,122,141,.5);background:radial-gradient(circle at 50% 34%,rgba(255,122,141,.28),rgba(255,122,141,.06));box-shadow:0 0 0 4px rgba(255,122,141,.18)}
.send{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:#06121f;background:linear-gradient(180deg,var(--acc),var(--acc-2));border:1px solid var(--acc);box-shadow:0 3px 12px var(--acc-glow);transition:.12s}
.send:active{transform:scale(.95)} .send:disabled{opacity:.4;box-shadow:none;cursor:default}
.send.stop{background:linear-gradient(180deg,var(--red),var(--red-d));border-color:var(--red);box-shadow:0 3px 12px rgba(255,122,141,.4);color:#1a0307}
/* in-flight send: a visible spinner (replaces the icon) + full opacity, so a slow send shows «working»
   not just a greyed button — paired with aria-busy on #send for assistive tech (audit iter-3 low) */
.send.busy{opacity:1;color:transparent;cursor:default;position:relative}
.send.busy::after{content:"";position:absolute;top:calc(50% - 8px);left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;border:2px solid rgba(6,18,31,.35);border-top-color:#06121f;animation:send-spin .7s linear infinite}
@keyframes send-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.send.busy::after{animation:none}}
.wave{flex:1;height:44px;display:none;align-items:center;gap:3px;padding:0 6px}
.wave.on{display:flex}
.wave i{flex:1;max-width:5px;background:linear-gradient(180deg,var(--acc),var(--acc-2));border-radius:3px;height:20%;animation:wv .9s ease-in-out infinite}
@keyframes wv{0%,100%{height:18%;opacity:.7}50%{height:90%;opacity:1}}
@media (prefers-reduced-motion:reduce){.wave i{animation:none;height:50%}}
.wave-timer{font-size:11px;color:var(--red);flex:0 0 auto;padding:0 4px 0 6px;min-width:34px;text-align:right}
.wave-cancel{font-family:var(--mono);font-size:10px;color:var(--ink-faint);padding:0 8px;flex:0 0 auto;text-transform:uppercase;letter-spacing:.08em}
.wave-cancel:hover{color:var(--red)}
.comp-bar{display:flex;align-items:center;gap:8px;padding:0 10px 9px 12px;flex-wrap:wrap}
.selwrap{position:relative}
.megasel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--pill);background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink-dim);font-size:12.5px;font-weight:500;transition:.15s;white-space:nowrap}
.megasel:hover{border-color:var(--line-3);color:var(--ink)}
.megasel .bolt{color:var(--acc);flex:0 0 auto}
.megasel .mname{color:var(--ink)} .megasel .mid{color:var(--ink-faint)} .megasel .rname{color:var(--ink)}
.megasel .chev{color:var(--ink-faint);transition:transform .18s;flex:0 0 auto}
.megasel.open .chev{transform:rotate(180deg)}
.megasel.locked{opacity:.62;cursor:not-allowed;border-style:dashed}
.megasel.locked:hover{border-color:var(--line-2);color:var(--ink-dim)}
.lockico{color:var(--ink-faint);flex:0 0 auto}
.menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;min-width:248px;max-height:min(60vh,420px);overflow-y:auto;background:var(--elev);border:1px solid var(--line-3);border-radius:var(--r);padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(6px);pointer-events:none;transition:.16s}
.menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
.menu .mi{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:9px;font-size:13px;color:var(--ink-dim);cursor:pointer;transition:background .12s;min-height:44px;width:100%;text-align:left}
.menu .mi:hover{background:var(--card)}
.menu .mi.on{color:#fff;background:rgba(124,197,255,.10)}
.menu .mi .desc{font-size:10.5px;color:var(--ink-faint);margin-top:1px}
.menu .mi .lead{width:22px;flex:0 0 auto;text-align:center;font-family:var(--mono);font-size:12px;color:var(--acc)}
.menu .mi .tick{margin-left:auto;color:var(--acc);opacity:0;flex:0 0 auto}
.menu .mi.on .tick{opacity:1}
.menu .mi .submark{margin-left:auto;color:var(--ink-faint);flex:0 0 auto}
.menu .sep{height:1px;background:var(--line);margin:6px 2px}
.menu .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:8px 10px 4px}
/* EFFORT segmented control inside the model menu (low/medium/high/xhigh/max) */
.eff-seg{display:flex;gap:4px;padding:4px 8px 8px}
.eff-seg button{flex:1;min-height:38px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--ink-faint);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;transition:.13s;display:grid;place-items:center;padding:0 2px}
.eff-seg button:hover{color:var(--ink);border-color:var(--line-3)}
.eff-seg button.on{color:#06121f;background:linear-gradient(180deg,var(--acc),var(--acc-2));border-color:var(--acc);box-shadow:0 2px 8px var(--acc-glow)}
/* TOGGLE rows (Thinking / UltraCode) — a switch, clearly NOT an effort notch */
.tgl-mi{display:flex;align-items:flex-start;gap:11px;padding:10px 10px;border-radius:9px;font-size:13px;color:var(--ink-dim);cursor:pointer;transition:background .12s;min-height:46px;width:100%;text-align:left}
.tgl-mi:hover{background:var(--card)}
.tgl-mi.ro{cursor:default;opacity:.82} .tgl-mi.ro:hover{background:transparent} /* read-only (inherited-from-account) status row, not a live switch */
.tgl-mi .tlead{width:22px;flex:0 0 auto;text-align:center;font-size:14px;color:var(--acc);margin-top:1px}
.tgl-mi .tcol{min-width:0;flex:1}
.tgl-mi .tn{font-weight:600;color:var(--ink)}
.tgl-mi .tdesc{font-size:10.5px;color:var(--ink-faint);margin-top:2px;line-height:1.4}
.tgl-mi .sw{flex:0 0 auto;width:38px;height:22px;border-radius:99px;background:var(--bg-3);border:1px solid var(--line-2);position:relative;transition:.16s;margin-top:2px}
.tgl-mi .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink-faint);transition:.16s}
.tgl-mi.on .sw{background:linear-gradient(90deg,var(--acc-2),var(--acc));border-color:var(--acc)}
.tgl-mi.on .sw::after{left:18px;background:#06121f}
.comp-bar .spacer{flex:1}
.comp-hint{font-family:var(--mono);font-size:10px;color:var(--ink-faint);white-space:nowrap}
.comp-hint kbd{font-family:var(--mono);background:var(--bg-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;font-size:9.5px}

/* PERMISSION control — DROPDOWN, default = Bypass permissions */
.perm-wrap{position:relative;display:inline-flex;align-items:center}
/* the perm button has two labels: full text (desktop) + short "Bypass" (mobile, to fit 390px) */
.perm-face-short{display:none}
/* the dropdown FACE — shows the current mode */
.perm-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;border-radius:var(--pill);
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--ink-dim);font-size:12.5px;font-weight:600;transition:.15s;white-space:nowrap}
.perm-btn:hover{border-color:var(--line-3);color:var(--ink)}
.perm-btn .pd{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7;flex:0 0 auto}
.perm-btn .chev{color:var(--ink-faint);transition:transform .18s;flex:0 0 auto}
.perm-btn.open .chev{transform:rotate(180deg)}
/* face accents per mode */
.perm-btn.is-full{color:#1a0c00;background:linear-gradient(180deg,var(--amber),#ff9d3c);border-color:var(--amber);box-shadow:0 2px 9px rgba(255,157,60,.35)}
.perm-btn.is-full .pd,.perm-btn.is-full .chev{color:#1a0c00;opacity:.9}
.perm-btn.is-auto{color:#06121f;background:linear-gradient(180deg,var(--acc),var(--acc-2));border-color:var(--acc);box-shadow:0 2px 9px var(--acc-glow)}
.perm-btn.is-auto .pd,.perm-btn.is-auto .chev{color:#06121f;opacity:.9}
/* the dropdown MENU */
.perm-menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:32;min-width:268px;background:var(--elev);border:1px solid var(--line-3);border-radius:var(--r);padding:6px;
  box-shadow:0 16px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(6px);pointer-events:none;transition:.16s}
.perm-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
.perm-menu .pi{display:flex;align-items:flex-start;gap:11px;padding:10px 11px;border-radius:9px;font-size:13px;color:var(--ink-dim);width:100%;text-align:left;transition:background .12s;min-height:44px}
.perm-menu .pi:hover{background:var(--card);color:var(--ink)}
.perm-menu .pi .pdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:4px}
.perm-menu .pi .pdot.full{background:var(--amber);box-shadow:0 0 7px rgba(255,157,60,.6)}
.perm-menu .pi .pdot.auto{background:var(--acc);box-shadow:0 0 7px var(--acc-glow)}
.perm-menu .pi .pdot.plan{background:var(--violet);box-shadow:0 0 7px rgba(196,181,253,.55)}
.perm-menu .pi .pdot.default{background:var(--ink-faint)}
.perm-menu .pi .pn{font-weight:600;color:var(--ink)}
.perm-menu .pi .pdesc{font-size:10.5px;color:var(--ink-faint);margin-top:2px;line-height:1.4}
.perm-menu .pi .tick{margin-left:auto;color:var(--acc);opacity:0;flex:0 0 auto;align-self:center}
.perm-menu .pi.on .tick{opacity:1}
.perm-menu .pi.on{background:rgba(124,197,255,.07)}

/* ================= RIGHT RAIL ================= */
#rail{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:linear-gradient(190deg,#0a0a1a,#080d20);border-left:1px solid var(--line);
  transition:transform .28s cubic-bezier(.2,0,0,1),opacity .2s ease,border-left-color .28s}
@media (prefers-reduced-motion:reduce){#rail{transition:none}}
@media (max-width:1240px){#rail{display:none}}
/* collapse chevron in the rail header */
.rail-collapse{flex:0 0 auto;align-self:center;width:30px;height:30px;border-radius:8px;display:none;align-items:center;justify-content:center;
  color:var(--ink-faint);border:1px solid transparent;transition:.14s}
.rail-collapse:hover{background:var(--card);color:var(--ink);border-color:var(--line-2)}
@media (min-width:1241px){.rail-collapse{display:inline-flex}}
/* slim re-open toggle in the topbar, desktop only, shown only when the rail is folded */
.rail-reopen{display:none;width:40px;height:40px;border-radius:11px;color:var(--ink-dim);border:1px solid var(--line-2);background:var(--card);
  align-items:center;justify-content:center;transition:.15s;flex:0 0 auto}
.rail-reopen:hover{background:var(--elev);color:var(--ink);border-color:var(--line-3)}
@media (min-width:1241px){#app.rail-collapsed .rail-reopen{display:inline-flex}}
/* slim re-open ☰ on the LEFT of the topbar — desktop only, shown only when the sidebar is folded.
   Mirrors .rail-reopen; wired to toggleSidebar() (NOT the mobile drawer). */
.sb-reopen{display:none;width:40px;height:40px;border-radius:11px;color:var(--ink-dim);border:1px solid var(--line-2);background:var(--card);
  align-items:center;justify-content:center;transition:.15s;flex:0 0 auto;margin-right:2px}
.sb-reopen:hover{background:var(--elev);color:var(--ink);border-color:var(--line-3)}
@media (min-width:1241px){#app.sidebar-collapsed .sb-reopen{display:inline-flex}}
.rtabs{display:flex;gap:4px;padding:calc(12px + var(--safe-top)) 12px 0;flex:0 0 auto;align-items:center}
.rtab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:10px 10px 0 0;font-size:12px;font-weight:500;color:var(--ink-faint);border:1px solid transparent;border-bottom:none;transition:.14s}
.rtab:hover{color:var(--ink-dim)}
.rtab.on{color:var(--ink);background:var(--card);border-color:var(--line)}
/* the rail's scrollable content area: a long План or a big Файлы list scrolls INSIDE the rail
   (flex:1 1 auto + min-height:0 + overflow-y:auto) instead of overflowing/clipping the column. */
.rbody{flex:1 1 auto;min-height:0;overflow-y:auto;border-top:1px solid var(--line);padding:16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rpane{display:none;flex-direction:column;gap:16px} .rpane.on{display:flex}
.rail-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 22px;color:var(--ink-faint)}
.rail-empty svg{color:var(--ink-faint);opacity:.6;margin-bottom:4px}
.rail-empty .re-t{font-size:13px;font-weight:600;color:var(--ink-dim)}
.rail-empty .re-s{font-size:11.5px;line-height:1.5;color:var(--ink-faint)}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.rcard .rh{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.rcard .rh .ct{margin-left:auto;color:var(--acc)}
.rcheck{display:flex;align-items:flex-start;gap:9px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--line)}
.rcheck:last-child{border-bottom:none}
.rcheck .m{flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line-3);display:grid;place-items:center;font-size:10px;margin-top:1px;color:transparent}
.rcheck.done .m{background:linear-gradient(180deg,var(--green),var(--green-d));border-color:var(--green-d);color:#06121f}
.rcheck.done .x{color:var(--ink-faint);text-decoration:line-through}
.rcheck.doing .m{border-color:var(--acc)} .rcheck.doing .x{color:var(--acc)}
.rcheck .x{line-height:1.4;color:var(--ink-dim)}
/* completed-plan collapsed chip: a 100%-done plan shrinks to one «✓ Выполнен N/N» line instead of hanging as a full stale checklist */
.rcard.plan-done{cursor:pointer;transition:border-color .15s ease,background .15s ease}
.rcard.plan-done:hover{border-color:var(--line-3);background:rgba(124,197,255,.03)}
.rcard.plan-done .rh{margin-bottom:0}
.pd-check{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;background:linear-gradient(180deg,var(--green),var(--green-d));border:1px solid var(--green-d);color:#06121f;flex:0 0 auto}
.pd-chev{margin-left:6px;color:var(--ink-faint);opacity:.7;font-size:11px}
.pd-collapse{margin-left:8px;background:none;border:none;color:var(--ink-faint);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:2px 5px;border-radius:6px;transition:color .15s ease,background .15s ease}
.pd-collapse:hover{color:var(--acc);background:rgba(124,197,255,.08)}
.subag{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.subag:last-child{border-bottom:none}
.subag .sa-ic{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;background:var(--bg-3);border:1px solid var(--line-2);color:var(--acc)}
.subag .sa-n{font-size:12.5px;font-weight:500;color:var(--ink)}
.subag .sa-s{font-size:10.5px;color:var(--ink-faint);margin-top:1px}
.subag .sa-badge{margin-left:auto;font-family:var(--mono);font-size:9px;border-radius:6px;padding:2px 7px;flex:0 0 auto}
.subag .sa-badge.run{color:var(--acc);background:rgba(124,197,255,.1);border:1px solid var(--line-3)}
.subag .sa-badge.done{color:var(--green);background:rgba(124,255,170,.08);border:1px solid rgba(124,255,170,.3)}
.subag .sa-badge.wait{color:var(--ink-faint);background:var(--bg-3);border:1px solid var(--line-2)}
.art{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-dim);cursor:pointer;width:100%;text-align:left}
.art:last-child{border-bottom:none}
.art:hover{color:var(--ink)}
.art .ai2{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:var(--bg-3);border:1px solid var(--line-2);color:var(--acc)}
.art .as{margin-left:auto;font-family:var(--mono);font-size:9px;border-radius:5px;padding:1px 6px;color:var(--green);background:rgba(124,255,170,.08);border:1px solid rgba(124,255,170,.28)}

.rfrozen{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-faint);background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;margin-bottom:4px}
.rfrozen svg{flex:0 0 auto;color:var(--ink-faint)}
/* right rail honest placeholder */
.rph{font-size:11.5px;line-height:1.5;color:var(--ink-faint);background:rgba(124,197,255,.04);border:1px dashed var(--line-3);border-radius:10px;padding:11px 12px}
.rph b{color:var(--ink-dim)} .rph .src-tag{font-family:var(--mono);color:var(--acc)}

/* ================= MOBILE ================= */
.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(2,4,12,.64);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:40}
.host-filter-wrap{display:none;position:relative;border-bottom:1px solid var(--line)}
.host-filter-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;pointer-events:none;background:linear-gradient(90deg,transparent,#0a0a1a 88%)}
.host-filter{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.host-filter::-webkit-scrollbar{display:none}
.hchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:var(--pill);background:var(--card);border:1px solid var(--line-2);color:var(--ink-dim);font-size:12.5px;font-weight:500;white-space:nowrap}
.hchip .ct-off{font-family:var(--mono);font-size:9.5px;color:var(--red);background:rgba(255,122,141,.12);border:1px solid rgba(255,122,141,.4);border-radius:99px;padding:0 6px;line-height:1.6}
.hchip .hd{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.hchip .hd.on{background:var(--green);box-shadow:0 0 7px var(--green)}
.hchip .hd.off{background:var(--red);box-shadow:0 0 6px rgba(255,122,141,.5)}
.hchip.sel{border-color:var(--acc);background:rgba(124,197,255,.1);color:#fff}
.fab{position:fixed;right:18px;bottom:calc(18px + var(--safe-bot));z-index:48;display:none;align-items:center;gap:9px;height:54px;padding:0 20px;border-radius:var(--pill);color:#06121f;font-weight:600;font-size:14px;background:linear-gradient(180deg,var(--acc),var(--acc-2));border:1px solid var(--acc);box-shadow:0 8px 26px var(--acc-glow)}
.fab:active{transform:scale(.97)}

/* mobile peek sheet for План/Файлы */
.peek-tab{position:fixed;right:8px;top:42%;transform:translateY(-50%);z-index:42;display:none;align-items:center;gap:6px;writing-mode:vertical-rl;padding:14px 8px;border-radius:12px;background:var(--card);border:1px solid var(--line-3);color:var(--acc);font-size:11px;font-weight:600;letter-spacing:.06em;box-shadow:-4px 0 18px rgba(0,0,0,.4)}
.peek{position:fixed;left:0;right:0;bottom:0;z-index:55;max-height:82dvh;display:flex;flex-direction:column;background:var(--bg-2);border-top:1px solid var(--line-3);border-radius:18px 18px 0 0;transform:translateY(102%);transition:transform .28s cubic-bezier(.2,0,0,1);box-shadow:0 -12px 50px rgba(0,0,0,.6)}
.peek.open{transform:translateY(0)}
.peek-grab{padding:10px 0 4px;display:flex;justify-content:center;flex:0 0 auto;touch-action:none}
.peek-grab i{width:38px;height:4px;border-radius:3px;background:var(--line-3)}
.peek-tabs{display:flex;gap:6px;padding:6px 14px 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.peek-tabs button{flex:1;min-height:44px;border-radius:10px;font-size:12.5px;font-weight:500;color:var(--ink-faint);border:1px solid transparent}
.peek-tabs button.on{color:var(--ink);background:var(--card);border-color:var(--line)}
.peek-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:14px}
.peek-pane{display:none;flex-direction:column;gap:14px} .peek-pane.on{display:flex}
/* DESKTOP RESIZE — when the rail is hidden (≤1240px) the «План·Файлы» peek drawer is the way to reach
   Plan/Files; show its opener there too (not only on mobile ≤920) so narrowing never strands them. */
@media (max-width:1240px){ #app.owned-run ~ .peek-tab{display:flex} }
/* U4 — kill iOS long-press selection / callout / tap-highlight on chrome controls.
   The terminal, the composer textarea, and История text KEEP selection so you can still copy. */
button,[data-action],[role="button"],summary,.iconbtn,.peek-tab,.fab,.proj-head,.sb-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#ta,.xterm,.xterm *,.hist .turn .txt,.hist .turn .tech-body{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

@media (max-width:768px){
  #app{grid-template-columns:1fr}
  .hamb{display:flex}
  #sidebar{position:fixed;top:var(--demo-h,0px);left:0;bottom:0;width:88%;max-width:340px;z-index:50;display:flex;flex-direction:column;
    transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,0,0,1);box-shadow:0 0 80px rgba(0,0,0,.7)}
  #app.nav-open #sidebar{transform:translateX(0)}
  #app.nav-open .drawer-backdrop{display:block;top:var(--demo-h,0px)}
  #projlist{flex:1 1 auto}
  .host-filter-wrap{display:block;flex:0 0 auto}
  #main{padding-bottom:0;min-height:0}
  .feed{padding:18px 14px 22px}
  .composer{position:relative}
  .tb-actions .meter{display:none} /* setRail re-shows #tokMeter inline for a selected session (inline beats this) */
  .comp-hint{display:none}
  .iconbtn{width:44px;height:44px}
  /* Composer on mobile: WRAP the bar so the safety-critical «Доступ» pill is never scrolled off-screen
     (was a hidden horizontal scroller — audit). Model + access pills drop to a second row at narrow widths. */
  .full-banner{display:none!important}
  .comp-bar{flex-wrap:wrap;padding-bottom:8px;gap:7px}
  .comp-bar .spacer{display:none}
  /* shrink the Bypass pill so it FITS at 390px: shorter label + tighter padding/font */
  .perm-btn{padding:0 10px;font-size:11px;min-height:44px;gap:6px}
  .perm-face-full{display:none}
  .perm-face-short{display:inline}
  /* the .comp-bar is a horizontal scroller (overflow:auto) which would clip an upward
     menu — so on mobile pin the perm menu FIXED to the viewport, full-width, above the composer. */
  .perm-menu{position:fixed;left:12px;right:12px;bottom:calc(96px + var(--safe-bot));min-width:0;width:auto;z-index:60}
  .megasel{min-height:44px}
  .comp-top{padding-bottom:4px}
  /* >=44px primary tap targets on mobile */
  .proj-head{min-height:44px}
  .le-head .le-raw{min-height:44px}
  .cmds>summary{min-height:44px}
  /* Always show the hamburger ☰ at narrow widths — INCLUDING in-session — so the
     left sidebar is always reachable. The redundant back-arrow (.tb-back) is retired:
     one clear ☰ opens the drawer in every state. */
  .hamb{display:flex}
  .tb-back{display:none!important}
  /* FAB shows ONLY when the composer is hidden (observed / ended). Never co-visible with composer. */
  .fab{display:none}
  .peek-tab{display:flex}
  #app.show-fab ~ .fab{display:inline-flex}
  #app.show-fab.keyboard-open ~ .fab{display:none!important}
  #app.keyboard-open ~ .fab{display:none!important}
  #app:not(.owned-run) ~ .peek-tab{display:none!important}
  #app.keyboard-open .comp-bar{display:none}
  /* Keyboard up → pin the composer right above it: drop the safe-area bottom inset (the home indicator
     is covered by the keyboard) so there's no empty gap, and tighten top padding → max room for text. */
  #app.keyboard-open .composer{padding-top:8px;padding-bottom:6px}
  #app.keyboard-open ~ .peek-tab{display:none!important}
  #app.nav-open ~ .peek-tab{display:none!important}
  #app.nav-open ~ .fab{display:none!important} /* don't float the FAB over the open nav drawer */
  /* ≥44px touch targets (Apple HIG) — were sub-44 (audit) */
  .eff-seg button{min-height:44px}
  .set-btn{min-height:44px}
  .spawn-row{min-height:44px}
  .hist .turn .turn-copy{min-height:44px}
  .proj-head .add{width:44px;height:44px}
  .att-chip .rm{width:44px;height:44px}
  .att-chip .rm:active{background:var(--elev)}
  .sb-search-field .clr{width:40px;height:40px}
  .wave-cancel{min-height:44px;display:inline-flex;align-items:center}
  #ta{min-height:42px}
}
@media (max-width:380px){
  .megasel .mid{display:none}
}

/* ===== DEMO bar + modals + toast (was the second <style> block in v4.html) ===== */
/* DEMO bar is a REAL docked row at the top of the body flex column — it pushes
   the app down instead of overlaying chrome. Closing it reclaims the space. */
#demoBar{flex:0 0 auto;position:relative;z-index:5;display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:center;
  padding:calc(6px + var(--safe-top)) 10px 6px;
  background:linear-gradient(180deg,rgba(196,181,253,.13),rgba(7,11,26,.96));border-bottom:1px dashed rgba(196,181,253,.45);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
#demoBar.hidden-demo{display:none}
.demo-tag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);padding:0 6px 0 2px;display:inline-flex;align-items:center;gap:5px}
.demo-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 7px rgba(196,181,253,.7)}
@media (max-width:920px){
  #demoBar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  #demoBar::-webkit-scrollbar{display:none}
}
.dbtn{flex:0 0 auto;font-family:var(--mono);font-size:10px;color:var(--ink-dim);background:var(--card);border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;min-height:32px;white-space:nowrap}
.dbtn:hover{color:var(--acc);border-color:var(--line-3)}
.dbtn.on{color:#06121f;background:linear-gradient(180deg,var(--acc),var(--acc-2));border-color:var(--acc)}
.dbtn.dclose{color:var(--ink-faint)} .dbtn.dclose:hover{color:var(--red);border-color:var(--red)}
#demoReopen{position:fixed;top:calc(8px + var(--safe-top));right:10px;z-index:300;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--violet);background:rgba(7,11,26,.92);border:1px dashed rgba(196,181,253,.5);border-radius:8px;padding:6px 9px}
.modal-back{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(2,4,12,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-back.open{display:flex}
.modal{width:100%;max-width:380px;background:var(--elev);border:1px solid rgba(255,192,102,.4);border-radius:var(--r-lg);padding:22px 22px 18px;box-shadow:0 24px 70px rgba(0,0,0,.7);text-align:center}
.modal-ic{width:46px;height:46px;border-radius:13px;margin:0 auto 14px;display:grid;place-items:center;color:var(--amber);background:rgba(255,192,102,.14);border:1px solid rgba(255,192,102,.4)}
.modal-t{font-size:16px;font-weight:600;margin-bottom:8px}
.modal-d{font-size:12.5px;line-height:1.55;color:var(--ink-dim);margin-bottom:18px}.modal-d b{color:var(--amber)}
.modal-acts{display:flex;gap:10px}
.modal-acts button{flex:1;min-height:44px;border-radius:12px;font-size:13px;font-weight:600}
.modal-acts .m-cancel{color:var(--ink-dim);border:1px solid var(--line-2);background:var(--card)}
.modal-acts .m-cancel:hover{border-color:var(--line-3);color:var(--ink)}
.modal-acts .m-go{color:#1a0c00;background:linear-gradient(180deg,var(--amber),#ff9d3c);border:1px solid var(--amber)}
.modal.danger-modal{border-color:rgba(255,122,141,.4)}
.modal-ic.danger-ic{color:var(--red);background:rgba(255,122,141,.13);border-color:rgba(255,122,141,.4)}
/* new-session folder picker */
.modal.spawn-modal{max-width:440px;text-align:left;border-color:var(--line-3)}
.spawn-modal .modal-t,.spawn-modal .modal-d{text-align:left}
.spawn-path{font-family:var(--mono);font-size:11px;color:var(--acc);background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spawn-list{max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line-2);border-radius:10px;padding:5px;margin-bottom:10px;background:var(--bg-2)}
.spawn-row{display:flex;align-items:center;gap:9px;width:100%;min-width:0;text-align:left;padding:8px 10px;border-radius:8px;color:var(--ink-dim);font-size:13px;border:1px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spawn-row:hover{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.spawn-row>span,.spawn-row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spawn-row .fi{flex:0 0 auto;color:var(--acc);display:inline-flex}
.spawn-row.up{color:var(--ink-faint)}
.spawn-empty{padding:10px;font-size:12px;color:var(--ink-faint)}
.spawn-name{width:100%;min-height:42px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);padding:0 12px;font-size:13px;margin-bottom:14px;outline:none}
.spawn-name:focus{border-color:var(--acc)}
/* settings rows */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.set-row .set-l{font-size:13.5px;color:var(--ink)}
.set-row .set-s{font-size:11px;color:var(--ink-faint);margin-top:2px;display:flex;align-items:center;gap:6px}
.set-row .set-hint{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint);font-weight:400}
.set-btn[disabled]{opacity:.45;pointer-events:none}
.ok-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--green);box-shadow:0 0 6px var(--green)}
.set-btn{flex:0 0 auto;min-height:34px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:600;color:var(--acc);background:rgba(124,197,255,.1);border:1px solid var(--line-3);cursor:pointer}
.set-btn:hover{background:rgba(124,197,255,.18);color:var(--ink)}
.set-note{font-size:11.5px;line-height:1.55;color:var(--ink-faint);margin:14px 0 4px}
.modal-d code{font-family:var(--mono);font-size:11.5px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;color:var(--acc)}
.modal-acts .m-go.m-danger{color:#1a0307;background:linear-gradient(180deg,var(--red),var(--red-d));border-color:var(--red)}
.toastBox{position:fixed;left:50%;bottom:calc(var(--composer-h,96px) + 12px + var(--safe-bot,0px));transform:translateX(-50%) translateY(12px);z-index:400;padding:12px 16px;border-radius:12px;background:var(--elev);color:var(--ink);border:1px solid var(--line-3);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13px;line-height:1.45;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:min(420px,90vw);text-align:center}
.toastBox.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* undo toast */
.undo{position:fixed;left:50%;bottom:calc(var(--composer-h,96px) + 12px + var(--safe-bot,0px));transform:translateX(-50%) translateY(12px);z-index:401;display:none;align-items:center;gap:12px;padding:11px 12px 11px 16px;border-radius:12px;background:var(--elev);border:1px solid var(--line-3);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13px;color:var(--ink);max-width:90vw}
.undo.on{display:flex}
.undo button{font-size:12.5px;font-weight:600;color:var(--acc);border:1px solid var(--line-3);border-radius:9px;padding:7px 12px;min-height:38px}
.undo button:hover{border-color:var(--acc);background:rgba(124,197,255,.08)}

/* ====================================================================
   B1 LIVE-WIRING GLUE — styles for the REAL read/observe transplant
   (real xterm mount, conversation transcript, splash, auth gate).
   Mirrors the live cockpit (style.css) palette so it reads as one app.
   ==================================================================== */

/* --- real xterm.js mount inside the live edge's raw-terminal panel --- */
/* Tall enough that claude's bottom status line (token counter / effort / permission mode) is
   visible — 300px was ~16 rows and clipped it. Responsive, capped so it never eats the whole page. */
#termRaw .xterm-wrap{height:min(62vh,580px);min-height:360px;padding:8px 10px;background:#04060d}
/* #term4 is the xterm mount point — must be full-height so xterm's internal canvas fills the wrap */
#termRaw #term4{height:100%;width:100%}
#termRaw .xterm{height:100%;width:100%}
#termRaw .xterm-viewport{background:transparent!important}
#termRaw .xterm .xterm-viewport::-webkit-scrollbar{width:9px}
#termRaw .xterm .xterm-viewport::-webkit-scrollbar-thumb{background:rgba(124,180,255,.18);border-radius:6px}

/* --- conversation transcript rendered inside the feed (real /history turns) --- */
.hist{display:flex;flex-direction:column;gap:18px}
.hist .turn{display:flex;flex-direction:column;gap:7px;position:relative}
.hist .turn .who{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-faint)}
.hist .turn.user .who{color:var(--acc)}
.hist .turn .txt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-size:14px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.hist .turn.user .txt{background:linear-gradient(180deg,rgba(124,197,255,.10),rgba(58,141,255,.05));border-color:var(--line-3);color:#eaf2ff}
.hist .turn .txt p{margin:0 0 9px}.hist .turn .txt p:last-child{margin:0}
.hist .turn .txt pre{background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;overflow-x:auto;font-size:12.5px}
.hist .turn .txt code{font-family:var(--mono);font-size:12.5px}
.hist .turn .txt :not(pre)>code{background:var(--bg-3);border:1px solid var(--line-2);border-radius:6px;padding:1px 5px}
.hist .turn .txt ul,.hist .turn .txt ol{margin:7px 0;padding-left:20px}.hist .turn .txt li{margin:3px 0}
.hist .turn .txt h1,.hist .turn .txt h2,.hist .turn .txt h3{font-size:15px;margin:10px 0 6px;color:#fff}
.hist .turn .tech{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);overflow:hidden}
.hist .turn .tech>summary{list-style:none;cursor:pointer;padding:9px 12px;font-size:12px;color:var(--ink-dim);user-select:none;min-height:40px;display:flex;align-items:center}
.hist .turn .tech>summary::-webkit-details-marker{display:none}
.hist .turn .tech>summary:hover{background:var(--card)}
.hist .turn .tech.thinking>summary{color:var(--violet)}
.hist .turn .tech-body{border-top:1px solid var(--line);margin:0;padding:10px 13px;font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--ink-dim);white-space:pre-wrap;overflow-x:auto;max-height:340px;overflow-y:auto}
/* P3a — grouped tool blocks: one-line header (mark · name · summary), collapsible IN/OUT */
.hist .turn .tech.tool>summary{gap:8px}
.hist .turn .tech .tmk{flex:0 0 auto;width:14px;text-align:center;font-size:11px;font-weight:700;color:var(--ink-faint)}
.hist .turn .tech.tool.ok .tmk{color:var(--green)}
.hist .turn .tech.tool.error .tmk{color:var(--red)}
.hist .turn .tech.tool.running .tmk{color:var(--acc)}
.hist .turn .tech .tnm{flex:0 0 auto;font-family:var(--mono);font-weight:600;color:var(--ink)}
.hist .turn .tech .tsm{flex:1 1 auto;min-width:0;font-family:var(--mono);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* visible expand affordance (was hidden — audit): chevron rotates when the card is open */
.hist .turn .tech>summary .tchev{margin-left:auto;flex:0 0 auto;display:inline-flex;color:var(--ink-faint);transition:transform .2s}
.hist .turn .tech[open]>summary .tchev{transform:rotate(90deg)}
.hist .turn .tech .tech-body.tin{color:var(--ink);background:var(--bg-3)}
.hist .turn .tech .tech-body.tout{border-top:1px dashed var(--line-2)}
.hist .turn .tech.tool.error .tech-body.tout{color:#ffb4b4}
/* P3b-lite — status-colored left edge on tool cards (echoes the VS Code timeline dots' colors). Full
   timeline rail + inline Edit/Write diff are queued behind your review of this P3a grouping. */
.hist .turn .tech.tool{border-left-width:2px}
.hist .turn .tech.tool.ok{border-left-color:rgba(124,255,170,.45)}
.hist .turn .tech.tool.error{border-left-color:var(--red)}
.hist .turn .tech.tool.running{border-left-color:var(--acc)}
/* mobile: a long command/token must never blow out the page width (research §3) */
.hist,.hist .turn,.hist .turn .txt,.hist .turn .tech{min-width:0}
.hist .turn .turn-copy{align-self:flex-start;margin-top:2px;font-family:var(--mono);font-size:10px;color:var(--ink-faint);border:1px solid var(--line-2);border-radius:7px;padding:3px 8px;min-height:30px}
@media (hover:none),(pointer:coarse){ .hist .turn .turn-copy{min-height:44px} } /* R7: re-assert the touch target AFTER this base rule — the early coarse block (~L657) is defeated by this later base 30px in the cascade */
.hist .turn .turn-copy:hover{color:var(--acc);border-color:var(--line-3)}
.hist .turn .turn-copy.copied{color:var(--green);border-color:rgba(124,255,170,.3)}
.hist .turn .turn-copy.failed{color:var(--red)}
/* Grouping is done on the SERVER now (jsonl.ts merges consecutive assistant lines into one Turn), so
   one «Claude» header + one Copy per logical reply, text and tool cards interleaved in stream order.
   The old CSS adjacent-sibling hack only hid headers (each block stayed a separate bubble + lost
   chronology) — removed in favour of the real fix. */
.feed-muted{color:var(--ink-faint);font-size:13px;text-align:center;padding:26px 16px;line-height:1.5}

/* --- sidebar: empty / loading / error states for the real session list --- */
.sb-loading,.sb-err,.pempty{padding:14px 14px;color:var(--ink-faint);font-size:12.5px;line-height:1.5}
.pempty{padding:6px 10px 8px 26px;font-size:11.5px}
.pempty .lk,.sb-err .lk{color:var(--acc);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.archlink{margin:14px 8px 6px;padding:10px 12px;border-radius:10px;color:var(--ink-dim);font-size:12.5px;border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;gap:8px}
.archlink:hover{background:var(--card);border-color:var(--line-2)}
.arch-sec{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:14px 12px 6px}
.archrow{display:flex;gap:14px;padding:4px 10px 8px 26px}
.archrow .lk{color:var(--acc);cursor:pointer;font-size:12px}
.archrow .lk.del{color:var(--red)}

/* --- in-feed file viewer (rail Файлы → click a file) --- */
.fv-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:12.5px;color:var(--ink);min-width:0}
.fv-head .lk{color:var(--acc);cursor:pointer;flex:0 0 auto}
.fv-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-body{background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-dim);max-height:60vh}
.fv-img{max-width:100%;border-radius:10px;border:1px solid var(--line-2)}
.fv-frame{width:100%;height:60vh;border:1px solid var(--line-2);border-radius:10px;background:#fff}

/* --- splash (mirrors live style.css) --- */
.v4-splash{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#0a0f24 0%,#04060f 80%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .6s,visibility .6s}
.v4-splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.v4-splash .splash-emblem{width:120px;height:120px;animation:spfloat 3s ease-in-out infinite}
.v4-splash .splash-emblem img{width:120px;height:120px}
.v4-splash-word{font-size:22px;letter-spacing:.5em;color:#fff;opacity:0;animation:wordin .7s ease-out .2s forwards}
.v4-splash-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.5em;color:var(--acc);opacity:0;animation:wordin .7s ease-out .4s forwards}
.v4-splash-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#cfe3ff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 90% 20%,#bcdcff,transparent);opacity:.55;animation:spdrift 16s linear infinite alternate}
@keyframes spfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wordin{to{opacity:1}}
@keyframes spdrift{to{transform:translate(40px,-30px)}}
@media(prefers-reduced-motion:reduce){.v4-splash .splash-emblem,.v4-splash-stars{animation:none}}

/* --- auth gate (mirrors live style.css) --- */
.v4-login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 500px at 50% 20%,rgba(58,141,255,.18),transparent 60%),var(--bg)}
.v4-login.hidden{display:none}
.v4-login-card{width:320px;max-width:90vw;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.v4-login-card .login-emblem{width:64px;height:64px;margin:0 auto 4px}
.v4-login-card .login-emblem img{width:64px;height:64px}
.v4-login-h{text-align:center;font-size:17px;font-weight:600;color:var(--ink)}
.v4-login input{background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;color:var(--ink);padding:10px;font-size:18px;letter-spacing:4px;text-align:center;font-family:var(--mono)}
.lg-btn{font-size:13.5px;font-weight:600;color:#06121f;background:linear-gradient(180deg,var(--acc),var(--acc-2));border-radius:10px;padding:11px 12px;min-height:44px}
.lg-btn.ghost{background:var(--card-2);border:1px solid var(--line-2);color:var(--ink)}
.lg-btn:hover{filter:brightness(1.06)}
.lg-btn.hidden{display:none}
.lg-or{color:var(--ink-faint);font-size:12px;text-align:center;margin:2px 0}
.lg-msg{color:var(--ink-faint);font-size:12px;text-align:center;min-height:16px}

/* hide the prototype DEMO bar — real data drives the cockpit now (B1) */
#demoBar,#demoReopen{display:none!important}