/* ---------- темы ----------
   У каждой темы задаются только опорные цвета, остальные считаются из них —
   так тема остаётся согласованной и её не приходится подбирать вручную.
   Палитры взяты у авторов: Nord, Tokyo Night, Catppuccin, Rosé Pine, Solarized. */

:root{
  --paper:#EDF0F2; --card:#FFFFFF; --card-2:#F6F8F9; --ink:#161A1F;
  --line:#D7DFE5; --accent:#2F5D8C; --signal:#B96E15; --live:#2C7A58; --danger:#A63030;
  --shadow:0 1px 2px rgba(22,26,31,.05), 0 14px 30px -20px rgba(22,26,31,.4);
  --rail:248px; --mind:330px;
  --rail-tint:9%;        /* насколько колонка темнее фона страницы */
}

/* производные — считаются от опорных, поэтому меняются вместе с темой.
   Первая строка каждой пары — запасная на случай, если браузер не умеет color-mix:
   тогда вторая строка просто игнорируется, и цвет остаётся рабочим. */
:root{
  --muted:#6B7580; --line-soft:#E6ECF0; --accent-soft:#E3EBF3;
  --signal-soft:#F7EBD9; --live-soft:#DFEFE7;
  --muted:color-mix(in srgb, var(--ink) 60%, var(--paper));
  --line-soft:color-mix(in srgb, var(--line) 45%, var(--card));
  --accent-soft:color-mix(in srgb, var(--accent) 15%, var(--card));
  --signal-soft:color-mix(in srgb, var(--signal) 15%, var(--card));
  --live-soft:color-mix(in srgb, var(--live) 15%, var(--card));
}

/* «Сталь» тёмная — она же по системным настройкам */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper:#11151A; --card:#191F26; --card-2:#1F262E; --ink:#E7EDF2;
    --line:#2A333C; --accent:#84B2E2; --signal:#E0A657; --live:#63C097; --danger:#E08585;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --paper:#11151A; --card:#191F26; --card-2:#1F262E; --ink:#E7EDF2;
  --line:#2A333C; --accent:#84B2E2; --signal:#E0A657; --live:#63C097; --danger:#E08585;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -20px rgba(0,0,0,.85);
}
:root[data-theme="light"]{
  --paper:#EDF0F2; --card:#FFFFFF; --card-2:#F6F8F9; --ink:#161A1F;
  --line:#D7DFE5; --accent:#2F5D8C; --signal:#B96E15; --live:#2C7A58; --danger:#A63030;
}

/* Север (Nord) */
:root[data-theme="nord"]{
  --paper:#2E3440; --card:#3B4252; --card-2:#434C5E; --ink:#ECEFF4;
  --line:#4C566A; --accent:#88C0D0; --signal:#EBCB8B; --live:#A3BE8C; --danger:#BF616A;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 16px 34px -20px rgba(0,0,0,.8);
}

/* Токио (Tokyo Night Storm) */
:root[data-theme="tokyo"]{
  --paper:#1F2335; --card:#24283B; --card-2:#292E42; --ink:#C0CAF5;
  --line:#414868; --accent:#7AA2F7; --signal:#FF9E64; --live:#9ECE6A; --danger:#F7768E;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 16px 34px -20px rgba(0,0,0,.9);
}

/* Мокко (Catppuccin Mocha) */
:root[data-theme="mocha"]{
  --paper:#181825; --card:#1E1E2E; --card-2:#313244; --ink:#CDD6F4;
  --line:#45475A; --accent:#89B4FA; --signal:#FAB387; --live:#A6E3A1; --danger:#F38BA8;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 16px 34px -20px rgba(0,0,0,.9);
}

/* Роса (Rosé Pine) */
:root[data-theme="rose"]{
  --paper:#191724; --card:#1F1D2E; --card-2:#26233A; --ink:#E0DEF4;
  --line:#403D52; --accent:#C4A7E7; --signal:#F6C177; --live:#9CCFD8; --danger:#EB6F92;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 16px 34px -20px rgba(0,0,0,.9);
}

/* Латте (Catppuccin Latte) */
:root[data-theme="latte"]{
  --paper:#DCE0E8; --card:#EFF1F5; --card-2:#E6E9EF; --ink:#4C4F69;
  --line:#CCD0DA; --accent:#1E66F5; --signal:#DF8E1D; --live:#40A02B; --danger:#D20F39;
}

/* Рассвет (Rosé Pine Dawn) */
:root[data-theme="dawn"]{
  --paper:#F2E9E1; --card:#FFFAF3; --card-2:#FAF4ED; --ink:#464261;
  --line:#DFD9D2; --accent:#907AA9; --signal:#EA9D34; --live:#286983; --danger:#B4637A;
}

/* Соляр (Solarized Light) */
:root[data-theme="solar"]{
  --paper:#E4DCC6; --card:#FDF6E3; --card-2:#EEE8D5; --ink:#073642;
  --line:#D5CDB6; --accent:#268BD2; --signal:#B58900; --live:#859900; --danger:#DC322F;
}

*{box-sizing:border-box}
/* Классы вроде .gate{display:grid} перебивают браузерное правило для hidden,
   и «спрятанный» блок остаётся на экране. Закрываем это раз и навсегда. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- вход ---------- */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate-card{
  width:min(360px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px 26px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);
}
.gate-card h1{
  margin:0;font-family:"Golos Text",sans-serif;font-size:1.55rem;font-weight:700;letter-spacing:-.01em;
}
.gate-mark{display:flex;flex-direction:column;gap:4px;width:34px;margin-bottom:2px}
.gate-mark span{height:4px;border-radius:2px;background:var(--accent);opacity:.85}
.gate-mark span:nth-child(2){width:70%;opacity:.55}
.gate-mark span:nth-child(3){width:45%;opacity:.35}
.gate-hint{margin:0;color:var(--muted);font-size:.92rem}
.gate-card input{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--card-2);
}
.gate-card input:focus{border-color:var(--accent);outline:none}
.gate-card button{
  padding:11px 14px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;
}
.gate-card button[disabled]{opacity:.6;cursor:default}
.gate-error{margin:0;color:var(--danger);font-size:.9rem}
#code{letter-spacing:.35em;text-align:center;font-family:"IBM Plex Mono",monospace}

/* ---------- каркас ---------- */
.app{display:grid;grid-template-columns:var(--rail) 1fr;height:100dvh;overflow:hidden;position:relative}

/* рукоятка ширины: узкая полоса на стыке колонки и переписки.
   Ползунок прокрутки при этом остаётся у самой колонки, как и был. */
.rail-grip{
  position:absolute;top:0;bottom:0;left:var(--rail);width:9px;margin-left:-5px;
  cursor:col-resize;z-index:15;touch-action:none;
}
.rail-grip::after{
  content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;
}
.rail-grip:hover::after,.app.rail-drag .rail-grip::after{background:var(--accent)}
.app.rail-drag{cursor:col-resize;user-select:none}
.rail{
  /* колонка должна читаться как отдельная плоскость, иначе сливается с перепиской:
     берём самый глубокий фон темы и приглушаем его ещё на несколько процентов */
  /* затемняем, а не подкрашиваем: во всех десяти темах карточка переписки светлее
     фона страницы, поэтому шаг вниз всегда увеличивает разницу */
  background:var(--paper);
  background:color-mix(in srgb, black var(--rail-tint), var(--paper));
  border-right:1px solid var(--line);
  border-right-color:color-mix(in srgb, var(--ink) 22%, var(--line));
  box-shadow:inset -10px 0 16px -16px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:2px;padding:0 10px 12px;overflow-y:auto;
}
.rail-top{
  display:flex;align-items:center;gap:6px;padding:14px 8px 11px;margin:0 -10px 6px;
  padding-left:18px;padding-right:18px;position:sticky;top:0;z-index:2;
  background:inherit;border-bottom:1px solid var(--line);
  border-bottom-color:color-mix(in srgb, var(--ink) 14%, var(--line));
}
.rail-top .brand{margin-right:auto}
.rail-top .icon-btn{width:30px;height:30px;font-size:.95rem}
.brand{display:flex;align-items:center;gap:9px;font-family:"Golos Text",sans-serif;font-weight:700;font-size:1.02rem}
.brand-mark{display:flex;flex-direction:column;gap:2.5px;width:16px}
.brand-mark i{height:2.5px;border-radius:2px;background:var(--accent)}
.brand-mark i:nth-child(2){width:70%;opacity:.6}
.brand-mark i:nth-child(3){width:45%;opacity:.38}
.rail-lbl{
  margin:8px 0 5px;padding:0 8px;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:color-mix(in srgb, var(--ink) 75%, var(--paper));
}
/* выбор оформления */
.themes{border-bottom:1px solid var(--line-soft);padding-bottom:10px;margin-bottom:4px}
.theme-list{display:flex;flex-direction:column;gap:2px}
.theme{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;text-align:left;
  padding:7px 9px;border:none;background:none;border-radius:8px;width:100%;font-size:.86rem;
}
.theme:hover{background:var(--line-soft)}
.theme.on{background:var(--accent-soft);color:var(--accent)}
.theme b{font-weight:500;display:block}
.theme small{display:block;color:var(--muted);font-size:.68rem;font-family:"IBM Plex Mono",monospace}
.theme .sw{display:flex;gap:2px}
.theme .sw i{width:9px;height:16px;border-radius:3px;border:1px solid rgba(128,128,128,.28)}

.projects{display:flex;flex-direction:column;gap:2px}
/* папки: стоят в самом низу списка, внутри — свои проекты с отступом */
.pfolder{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin-top:10px;
  padding:8px 11px;border:none;background:none;border-radius:9px;cursor:pointer;
  color:var(--muted);font-family:"IBM Plex Sans",sans-serif;font-size:.84rem;
}
.pfolder:hover{background:var(--line-soft);color:var(--ink)}
.pfolder b{font-weight:500;color:inherit}
/* раскрывашка: отдельный заметный значок, а не точка сбоку — по нему сразу видно,
   что папку можно открыть и открыта ли она сейчас */
.pfolder .fchev{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:18px;height:18px;border-radius:5px;font-size:.72rem;line-height:1;
  background:color-mix(in srgb, var(--ink) 9%, transparent);
  color:color-mix(in srgb, var(--ink) 70%, var(--paper));
  transition:transform .15s, background .15s;
}
.pfolder:hover .fchev{background:var(--accent-soft);color:var(--accent)}
.pfolder.closed .fchev{transform:rotate(-90deg)}
.pfolder .fcnt{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  background:color-mix(in srgb, var(--ink) 7%, transparent);border-radius:6px;padding:1px 6px;
}
.pfolder .fcnt.live{color:var(--live);background:var(--live-soft)}
.pfolder.unread b{color:var(--ink);font-weight:600}
.fnest{
  display:flex;flex-direction:column;gap:2px;margin-left:11px;padding-left:5px;
  border-left:1px solid var(--line);
  border-left-color:color-mix(in srgb, var(--ink) 12%, var(--line));
}
/* работающий проект: «Стоп» прямо в списке, чтобы гасить не заходя внутрь */
.projwrap{position:relative;display:flex;align-items:center}
.projwrap > .proj{flex:1;min-width:0;padding-right:36px}
.pstop{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;padding:0;
  width:24px;height:24px;border-radius:7px;cursor:pointer;font-size:.68rem;line-height:1;
  border:1px solid var(--danger);background:var(--card);color:var(--danger);
}
.pstop:hover{background:var(--danger);color:var(--card)}
.pstop[disabled]{opacity:.45;cursor:default}
.pstop[disabled]:hover{background:var(--card);color:var(--danger)}
/* взведена: следующее нажатие остановит агента — это должно быть видно сразу */
.pstop.armed,.pstop.armed:hover{
  background:var(--danger);color:var(--card);font-weight:700;font-size:.78rem;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent);
}
.proj{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;text-align:left;
  padding:10px 11px;border:none;background:none;border-radius:9px;font-size:.9rem;width:100%;
  border-left:3px solid transparent;color:var(--ink);
}
.proj:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.plabel{min-width:0}
.pline{display:flex;align-items:baseline;gap:8px}
.pline b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* сколько дней проект молчит: после 25 дней предупреждение — на 30-й память чистится */
.pdays{
  flex:none;font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--muted);
  background:color-mix(in srgb, var(--ink) 7%, transparent);border-radius:6px;padding:1px 6px;
}
.pdays.warn{color:var(--signal);background:var(--signal-soft);font-weight:500}
.proj.conductor{margin-bottom:8px;padding-bottom:11px;border-bottom:1px solid var(--line-soft);border-radius:8px 8px 0 0}
.proj.conductor .pdot{background:var(--signal)}
.proj.conductor.on .pdot{background:var(--accent)}
.proj.on{
  background:var(--card);border-left-color:var(--accent);color:var(--ink);font-weight:600;
  box-shadow:var(--shadow);
}
.proj.on .pdays{background:var(--accent-soft);color:var(--accent)}
.proj small{display:block;color:var(--muted);font-size:.72rem;font-weight:400;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:color-mix(in srgb, var(--ink) 28%, transparent);
}
.pdot.live{background:var(--live)}
.ghost-btn{
  margin-top:auto;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--muted);font-size:.84rem;
  border-color:color-mix(in srgb, var(--ink) 16%, var(--line));
}
.ghost-btn:hover{color:var(--ink)}

/* min-height:0 обязателен: без него длинная переписка растягивает колонку,
   страница начинает прокручиваться целиком и список проектов уезжает вверх */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--card)}
.mhead{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.mhead h2{margin:0;font-family:"Golos Text",sans-serif;font-size:1.02rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:500;
  border-radius:999px;padding:3px 11px;background:var(--live-soft);color:var(--live);white-space:nowrap;
}
.icon-btn{
  width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:9px;background:var(--card);
  display:grid;place-items:center;color:var(--muted);
}
.icon-btn:hover{background:var(--card-2)}
.only-narrow{display:none}

.tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--card)}
.tab{
  padding:10px 13px;border:none;background:none;color:var(--muted);font-size:.88rem;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

.pane{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}

/* ---------- переписка ---------- */
#pane-chat{position:relative}
/* кнопка «вниз»: видна, только когда владелец ушёл вверх по переписке */
.to-bottom{
  position:absolute;right:26px;bottom:96px;z-index:3;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:1rem;line-height:1;box-shadow:var(--shadow);
}
.to-bottom:hover{border-color:var(--accent);color:var(--accent)}
/* точка — значит внизу появилось что-то новое, пока ты читал историю */
.to-bottom.new::after{
  content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);border:2px solid var(--card);
}
.chat{flex:1;overflow-y:auto;padding:22px 20px 26px;display:flex;flex-direction:column;gap:14px}
.msg{
  flex:none;                 /* иначе flex сжимает высокий пузырь и он получает свой ползунок */
  max-width:min(76ch,86%);font-size:.95rem;line-height:1.6;padding:12px 16px;border-radius:14px;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg.me{align-self:flex-end;background:var(--accent-soft);border-bottom-right-radius:4px}
.msg.agent{align-self:flex-start;background:var(--card-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.oops{align-self:flex-start;background:var(--signal-soft);border:1px solid var(--signal);color:var(--ink)}
.msg .files{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.msg .files{margin-top:10px}
.msg .files .chip{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:6px 11px;color:var(--accent);
}
.msg .files .chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.msg .files .chip span:first-child{font-size:.95rem;line-height:1}
/* уже скачанный — приглушён, галочка вместо стрелки; по наведению снова живой */
.msg .files .chip.done{color:var(--muted);border-color:var(--line-soft)}
.msg .files .chip.done span:first-child{color:var(--live)}
.msg .files .chip.done:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
/* забирали, но файл после этого переделали — на руках старая копия */
.msg .files .chip.again{color:var(--signal);border-color:var(--signal)}
.msg .files .chip.again span:first-child{color:var(--signal)}
/* файла в проекте больше нет: ссылка ведёт в пустоту, и это должно быть видно сразу */
.msg .files .chip.gone{
  color:var(--muted);border-color:var(--line-soft);
  border-style:dashed;background:transparent;
}
.msg .files .chip.gone span:last-child{text-decoration:line-through;opacity:.75}
.msg .files .chip.gone:hover{color:var(--muted);border-color:var(--line);background:transparent}
.msg time{display:block;margin-top:7px;font-size:.68rem;color:var(--muted);font-family:"IBM Plex Mono",monospace}
/* таблицы в ответе агента: широкая таблица прокручивается внутри себя,
   страницу вбок не тянет */
.msg .tbl{margin:11px 0;overflow-x:auto;max-width:100%}
.msg .tbl table{border-collapse:collapse;font-size:.83rem;line-height:1.45}
.msg .tbl th,.msg .tbl td{
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  padding:6px 10px;text-align:left;vertical-align:top;
}
.msg .tbl th{
  font-weight:600;white-space:nowrap;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
}
.msg .tbl tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--ink) 4%, transparent)}

/* разметка внутри ответа агента */
.msg .body{display:block}
.msg b{font-weight:600}
.msg b.head{display:block;font-family:"Golos Text",sans-serif;font-size:1rem;margin:2px 0 4px}
.msg code{
  font-family:"IBM Plex Mono",monospace;font-size:.86em;background:var(--paper);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap;
}
.msg pre{
  margin:9px 0;padding:12px 14px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;overflow-x:auto;white-space:pre;
}
.msg pre code{background:none;border:none;padding:0;font-size:.84rem;line-height:1.5;white-space:pre}
.msg ul,.msg ol{margin:6px 0;padding-left:1.35em;display:flex;flex-direction:column;gap:3px}
.msg li{white-space:normal}
.msg.agent{white-space:normal}
.doing{
  align-self:flex-start;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.86rem;
  padding:3px 2px;
}
.doing i{
  width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.doing i{animation:none;opacity:.8}}
.empty{margin:auto;color:var(--muted);font-size:.92rem;text-align:center;max-width:34ch}

.drop{
  display:none;margin:0 14px;padding:14px;border:1.5px dashed var(--accent);border-radius:12px;
  color:var(--accent);text-align:center;font-size:.9rem;background:var(--accent-soft);
}
.app.dragging .drop{display:block}

.composer{border-top:1px solid var(--line);padding:11px 14px 14px;display:flex;flex-direction:column;gap:8px}
.composer-row{display:flex;align-items:flex-end;gap:9px}
#input{
  flex:1;resize:none;max-height:180px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--card-2);
}
#input:focus{outline:none;border-color:var(--accent)}
.send-btn{
  width:38px;height:38px;flex:none;border:none;border-radius:10px;background:var(--accent);color:#fff;font-size:1.05rem;
}
.send-btn[disabled]{opacity:.45;cursor:default}
.queue{display:flex;flex-wrap:wrap;gap:6px}
.queue span{
  font-family:"IBM Plex Mono",monospace;font-size:.74rem;background:var(--accent-soft);color:var(--accent);
  border-radius:7px;padding:4px 9px;display:inline-flex;align-items:center;gap:7px;
}
.queue button{border:none;background:none;color:inherit;padding:0;font-size:.9rem;line-height:1}

/* ---------- расходы подписки ---------- */
.usage{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft)}
.usage .rail-lbl{display:flex;align-items:center;gap:6px;margin-top:0}
.usage-upd{
  margin-left:auto;border:none;background:none;color:var(--muted);cursor:pointer;
  font-size:.85rem;line-height:1;padding:2px 4px;border-radius:6px;
}
.usage-upd:hover{color:var(--accent);background:var(--line-soft)}
.usage-upd[disabled]{opacity:.4;cursor:default}
.ubar{padding:5px 8px 7px}
.ubar .utop{display:flex;align-items:baseline;gap:8px;font-size:.79rem}
.ubar .utop b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubar .utop span{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--muted)}
.ubar .uline{display:block;height:5px;margin-top:4px;border-radius:3px;background:var(--line);overflow:hidden}
.ubar .uline i{display:block;height:100%;background:var(--accent);border-radius:3px;min-width:2px}
.ubar .uline i.warn{background:var(--signal)}
.ubar .uline i.danger{background:var(--danger)}
.unote{
  margin:6px 8px 0;font-family:"IBM Plex Mono",monospace;font-size:.66rem;line-height:1.5;
  color:var(--muted);
}

/* кнопка «Стоп»: видна только пока агент работает, и должна быть заметной */
.stop-btn{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--danger);
  background:transparent;color:var(--danger);border-radius:999px;padding:4px 12px;
  font-family:"IBM Plex Sans",sans-serif;font-size:.8rem;cursor:pointer;white-space:nowrap;
}
.stop-btn:hover{background:var(--danger);color:var(--card)}
.stop-btn[disabled]{opacity:.5;cursor:default}
.stop-btn[disabled]:hover{background:transparent;color:var(--danger)}
.stop-btn.armed,.stop-btn.armed:hover{
  background:var(--danger);color:var(--card);font-weight:600;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent);
}

/* ---------- файлы ---------- */
.files{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px}
.frow{
  display:grid;grid-template-columns:1fr auto auto auto auto;gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;background:var(--card);font-size:.9rem;
  text-decoration:none;color:inherit;
}
.frow:hover{border-color:var(--accent);background:var(--card-2)}
.frow .tagf{
  font-family:"IBM Plex Sans",sans-serif;font-size:.74rem;border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;color:var(--muted);
}
.frow .dl{color:var(--accent);font-family:"IBM Plex Sans",sans-serif;font-size:.82rem}
.frow.done{background:var(--paper)}
.frow.done b{font-weight:400;color:var(--muted)}
.frow.done .dl{color:var(--live)}
.frow .dl.again{color:var(--signal)}
@media (max-width:560px){
  .frow{grid-template-columns:1fr auto;row-gap:6px}
  .frow .tagf{grid-column:1}
}
.frow b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow span{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.76rem;white-space:nowrap}

/* ---------- узкий экран ---------- */
@media (max-width:720px){
  .app{grid-template-columns:1fr}
  .rail-grip{display:none}      /* на узком экране колонка выезжает поверх, тянуть нечего */
  .only-narrow{display:grid}
  .rail{
    position:fixed;inset:0 auto 0 0;width:min(84vw,var(--rail));z-index:20;
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow);
  }
  .app.rail-open .rail{transform:none}
  .msg{max-width:92%}
}
@media (prefers-reduced-motion: reduce){.rail{transition:none}}

/* коробка одного прогона: ответ агента и индикатор работы под ним */
.run{display:flex;flex-direction:column;gap:14px;align-items:flex-start;flex:none;max-width:100%}
/* проект, где ответ уже пришёл, а владелец его ещё не видел */
.pdot.fresh{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* Свой цвет у проекта, где уже была работа. Заливка — это сам проект и она не меняется;
   состояние показывает кольцо вокруг точки, иначе цвет пропадал бы именно тогда,
   когда по списку и надо быстро найти нужный проект. */
.pdot.свой{background:var(--цвет);box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent)}
.pdot.свой.live{background:var(--цвет);box-shadow:0 0 0 3px color-mix(in srgb, var(--live) 55%, transparent)}
.pdot.свой.fresh{background:var(--цвет);box-shadow:0 0 0 3px var(--accent-soft)}
.proj.unread{font-weight:600}
.proj.unread small{color:var(--ink)}

/* ---------- задачи ---------- */
.board{
  flex:1;min-height:0;overflow-y:auto;padding:18px;display:grid;gap:14px;
  grid-template-columns:repeat(3,1fr);align-items:start;
}
.lane{display:flex;flex-direction:column;gap:9px;min-width:0}
.lane-h{
  display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.count{background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:0 7px;font-size:.62rem}
.tcard{
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  display:flex;flex-direction:column;gap:7px;font-size:.85rem;line-height:1.45;
  overflow-wrap:anywhere;
}
.tcard.work{border-left:3px solid var(--live)}
.tcard.wait{border-left:3px solid var(--signal)}
.tcard.done{opacity:.62}
.tmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;color:var(--muted)}
.tmeta .days{color:var(--signal)}
.tbtn{
  border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:.7rem;
  color:var(--muted);background:var(--card);
}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.tbtn.drop{margin-left:auto;border-color:transparent;padding:2px 6px}
.tbtn.drop:hover{border-color:var(--danger);color:var(--danger)}
.adder{display:flex;gap:8px;padding:0 18px 18px;background:var(--card)}
.adder input{
  flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:.88rem;
  background:var(--card-2);color:var(--ink);font-family:inherit;
}
.adder input:focus{outline:none;border-color:var(--accent)}
.adder .go{
  width:38px;border:none;border-radius:9px;background:var(--accent);color:var(--card);
  font-size:1rem;line-height:1;
}

/* ---------- решения ---------- */
.dsearch{padding:14px 18px 0;background:var(--card)}
.dsearch input{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:.88rem;
  background:var(--card-2);color:var(--ink);font-family:inherit;
}
.dsearch input:focus{outline:none;border-color:var(--accent)}
.tape{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 20px;display:flex;flex-direction:column}
.trow{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.trow:last-child{border-bottom:none}
.tdate{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);padding-top:2px}
.tbody{display:flex;flex-direction:column;gap:5px;min-width:0;overflow-wrap:anywhere}
.tbody b{font-size:.92rem;font-weight:600}
.tbody p{font-size:.86rem;color:var(--muted);line-height:1.5;margin:0}
.why{font-size:.8rem;border-left:2px solid var(--accent);padding:2px 0 2px 10px;color:var(--muted)}

@media (max-width:720px){
  .board{grid-template-columns:1fr}
  .trow{grid-template-columns:1fr;gap:4px}
}

/* ---------- ход работы: правая колонка ---------- */
.mind{display:none;background:var(--card-2);border-left:1px solid var(--line);
  flex-direction:column;min-height:0;overflow:hidden}
.app.mind-on{grid-template-columns:var(--rail) 1fr var(--mind)}
.app.mind-on .mind{display:flex}
.mind-head{
  display:flex;align-items:baseline;gap:8px;padding:13px 14px;border-bottom:1px solid var(--line);
  font-family:"Golos Text",sans-serif;font-size:.9rem;font-weight:600;
}
.mind-head #mind-sum{font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:400;color:var(--muted)}
.mind-switch{
  margin-left:auto;border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:7px;padding:3px 9px;font-size:.7rem;font-family:inherit;font-weight:400;
}
.mind-switch:hover{border-color:var(--accent);color:var(--accent)}
.mind-switch.on{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent)}
.mind-tape{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 18px;display:flex;flex-direction:column;gap:11px}
.mstep{display:flex;flex-direction:column;gap:4px;font-size:.85rem;line-height:1.45;overflow-wrap:anywhere}
.mstep .m1{display:flex;gap:9px;align-items:baseline}
.mstep .mt{font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--muted);flex:none}
.mstep .mw{color:var(--ink)}
.mstep .mthink,.mstep .mquiet{font-size:.74rem;color:var(--muted);padding-left:44px}
.mstep .mbad{font-size:.76rem;color:var(--danger);padding-left:44px}
.mstep .md,.mstep .mr{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--muted);
  border-left:2px solid var(--line);padding-left:8px;margin-left:44px;
}
.mind-note{font-size:.72rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.mind-done{
  font-size:.74rem;color:var(--live);background:var(--live-soft);border-radius:7px;
  padding:6px 10px;align-self:flex-start;
}
@media (max-width:1100px){
  .app.mind-on{grid-template-columns:var(--rail) 1fr}
  .app.mind-on .mind{display:none}
}

/* Тёмные темы стоят в узком диапазоне яркости, и девяти процентов там не видно —
   колонке нужен шаг крупнее, иначе она снова сливается с перепиской. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){ --rail-tint:32%; }
}
:root[data-theme="dark"],:root[data-theme="nord"],:root[data-theme="tokyo"],
:root[data-theme="mocha"],:root[data-theme="rose"]{ --rail-tint:32%; }