/* LiveStat — рельса чатов | чат | панель результатов. Токены на :root; тёмная тема — prefers-color-scheme
   или data-theme на <html>. Токены графиков (--bg, --text, --series-*, --seq-*) читает charts.js. */

:root {
  color-scheme: light;
  --rail: #e4e4e0; --panel: #f2f2ef; --surface: #fbfbf9; --sunk: #e9e9e5; --bub: #e7e7e2;
  --ink: #17181a; --ink2: #3f4146; --muted: #6f7177; --faint: #a6a8ad; --line: #dadad5; --line2: #e9e9e5;
  --accent: #cf5f24; --accent-ink: #ad4c17; --accent-soft: rgba(207, 95, 36, .11); --accent-line: rgba(207, 95, 36, .36);
  --good: #3c7a55; --crit: #b3322f;
  --shadow: 0 10px 32px rgba(18, 18, 20, .13), 0 1px 3px rgba(18, 18, 20, .07);
  --scrim: rgba(10, 10, 12, .32);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --rail-w: 56px; --chat-w: clamp(380px, 30vw, 460px);

  /* графики (charts.js) */
  --font: var(--sans);
  --bg: var(--surface); --text: var(--ink); --text-2: var(--ink2); --rule: var(--line);
  --code-bg: var(--sunk); --hover: rgba(22, 22, 21, .04);
  --grid: #ebebe7; --axis: #cfcfc9; --whisker: #3f4146; --null: #ebebe7; --zone: rgba(22, 22, 21, .035);
  --tooltip-bg: #ffffff;
  --series-1: #cf5f24; --series-2: #2a78d6; --series-3: #1baf7a; --series-4: #6250d6;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #c98a00; --series-8: #e34948; --series-other: #a8a69f;
  --seq-0: #fbe9dd; --seq-1: #f3bf9c; --seq-2: #e48a52; --seq-3: #c4561c; --seq-4: #7a300a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --rail: #0d0e10; --panel: #151619; --surface: #1a1b1e; --sunk: #25272b; --bub: #272a2e;
    --ink: #ebebe8; --ink2: #c4c5c8; --muted: #8b8d93; --faint: #5e6066; --line: #2e3035; --line2: #24262a;
    --accent: #ee8245; --accent-ink: #f39a64; --accent-soft: rgba(238, 130, 69, .13); --accent-line: rgba(238, 130, 69, .4);
    --good: #69b48a; --crit: #f07a7a; --shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --scrim: rgba(0, 0, 0, .5); --hover: rgba(255, 255, 255, .05);
    --grid: #26282c; --axis: #3a3c41; --whisker: #c4c5c8; --null: #25272b; --zone: rgba(255, 255, 255, .04);
    --tooltip-bg: #202124;
    --series-1: #ee8245; --series-2: #3987e5; --series-3: #199e70; --series-4: #9085e9;
    --series-5: #d55181; --series-6: #2f9a2f; --series-7: #c98500; --series-8: #e66767; --series-other: #6b6963;
    --seq-0: #2b1d15; --seq-1: #6b3415; --seq-2: #b4551f; --seq-3: #ee8245; --seq-4: #fbd2b4;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --rail: #0d0e10; --panel: #151619; --surface: #1a1b1e; --sunk: #25272b; --bub: #272a2e;
  --ink: #ebebe8; --ink2: #c4c5c8; --muted: #8b8d93; --faint: #5e6066; --line: #2e3035; --line2: #24262a;
  --accent: #ee8245; --accent-ink: #f39a64; --accent-soft: rgba(238, 130, 69, .13); --accent-line: rgba(238, 130, 69, .4);
  --good: #69b48a; --crit: #f07a7a; --shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --scrim: rgba(0, 0, 0, .5); --hover: rgba(255, 255, 255, .05);
  --grid: #26282c; --axis: #3a3c41; --whisker: #c4c5c8; --null: #25272b; --zone: rgba(255, 255, 255, .04);
  --tooltip-bg: #202124;
  --series-1: #ee8245; --series-2: #3987e5; --series-3: #199e70; --series-4: #9085e9;
  --series-5: #d55181; --series-6: #2f9a2f; --series-7: #c98500; --series-8: #e66767; --series-other: #6b6963;
  --seq-0: #2b1d15; --seq-1: #6b3415; --seq-2: #b4551f; --seq-3: #ee8245; --seq-4: #fbd2b4;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--surface); color: var(--ink); font: 13.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  overflow: hidden; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-width: 1024px;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input { font: inherit; color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
code { font: 12px var(--mono); background: var(--sunk); padding: 1px 4px; border-radius: 4px; }
a { color: var(--accent-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.link { color: var(--muted); }
.link:hover:not(:disabled) { color: var(--ink); }
.link:disabled { opacity: .5; }
.mono { font-family: var(--mono); }
.dotted { border-bottom: 1px dotted currentColor; }

@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-line); } 50% { box-shadow: 0 0 0 4px transparent; } }
@keyframes fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shim { to { background-position: -200% 0; } }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateX(2px); } 60% { transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.spin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--accent-line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; flex: none; }
.sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.sdot.ok { background: var(--good); }
.sdot.off { background: var(--faint); }
.sdot.err { background: var(--crit); }
.typing > :last-child::after, .typing:empty::after {
  content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; font-style: normal; margin-left: 1px;
}
.typing > :is(ul, ol):last-child::after { content: none; }
.typing > :is(ul, ol):last-child > li:last-child::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; margin-left: 1px; }

/* ================================================= рельса чатов */
.rail { position: relative; z-index: 30; }
.rail-in {
  position: absolute; inset: 0 auto 0 0; width: var(--rail-w); background: var(--rail); display: flex; flex-direction: column;
  padding: 10px 7px 12px; gap: 4px; overflow: hidden; transition: width .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s;
}
.rail.wide .rail-in { width: 292px; box-shadow: var(--shadow); }
.rail-row { display: flex; align-items: center; gap: 12px; min-height: 42px; border-radius: 12px; width: 100%; text-align: left; flex: none; color: var(--muted); position: relative; }
.rail-row .ic { width: 42px; height: 42px; display: grid; place-items: center; flex: none; position: relative; }
.rail-row .tx { flex: 1; min-width: 0; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.rail.wide .rail-row .tx { opacity: 1; }
button.rail-row:hover { background: var(--sunk); color: var(--ink); }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--rail); display: grid; place-items: center; font: 600 12px var(--mono); letter-spacing: -.04em; }
.rail-row.brand { color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.rail-row svg.i { width: 18px; height: 18px; }
.rail-row .kbd { color: var(--faint); font-size: 11.5px; margin-left: 6px; }
.rsep { height: 1px; background: var(--line); margin: 4px 10px; flex: none; }
.chats { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 3px; padding: 2px 0; scrollbar-width: none; min-height: 0; }
.chats::-webkit-scrollbar { display: none; }
.chat { align-items: center; }
.chat[aria-current="true"] { background: var(--surface); color: var(--ink); }
.chat[aria-current="true"]::before { content: ""; position: absolute; left: -7px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.chat svg.ring { position: absolute; inset: 3px; width: 36px; height: 36px; transform: rotate(-90deg); }
.ring .trk { stroke: var(--line); fill: none; stroke-width: 2.2; }
.ring .bar { fill: none; stroke-width: 2.2; stroke-linecap: round; transition: stroke-dashoffset .35s ease, stroke .3s; }
.chat.s-think svg.ring { animation: spin 1.6s linear infinite; }
.chat .lbl { position: relative; font: 500 14px/1 var(--sans); color: var(--muted); }
.chat[aria-current="true"] .lbl { color: var(--ink); }
.chat .dot { position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--rail); display: none; }
.chat[aria-current="true"] .dot { border-color: var(--surface); }
.chat.s-live .dot { display: block; background: var(--accent); animation: pulse 1.6s infinite; }
.chat.s-wait .dot { display: block; background: var(--accent); }
.chat.s-err .dot { display: block; background: var(--crit); }
.chat.draft .ring .trk { stroke-dasharray: 2.5 3; }
.chat.attn { animation: nudge 1.4s ease 2; }
.chat .tx { display: flex; flex-direction: column; gap: 1px; padding-right: 30px; }
.chat .t { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.chat .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: baseline; }
.chat .s b { font-weight: 500; color: var(--ink2); }
.chat .more { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 22px; border-radius: 6px; color: var(--muted); display: none; place-items: center; font-size: 15px; line-height: 1; letter-spacing: -.05em; }
.rail.wide .chat:hover .more, .rail.wide .chat.menu-open .more { display: grid; }
.chat .more:hover, .chat .more[aria-expanded="true"] { background: var(--line); color: var(--ink); }
.rail-bottom { display: flex; flex-direction: column; gap: 2px; flex: none; }
/* проекты в рельсе: группа — строка проекта (квадрат с буквой) и её чаты на общей подложке */
.pg { display: flex; flex-direction: column; gap: 3px; flex: none; border-radius: 14px; background: var(--hover); padding-bottom: 0; }
.pg.fold { background: none; }
.pic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font: 600 12.5px/1 var(--sans); flex: none; }
.pic.sm { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.proj .ic { position: relative; }
.proj .dot { position: absolute; right: 5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--rail); display: none; }
.proj.s-live .dot { display: block; background: var(--accent); animation: pulse 1.6s infinite; }
.proj.s-wait .dot { display: block; background: var(--accent); }
.proj.s-err .dot { display: block; background: var(--crit); }
.proj.attn { animation: nudge 1.4s ease 2; }
.pg.has-cur .proj .pic { color: var(--ink); }
.proj[aria-current="true"] { background: var(--surface); color: var(--ink); }
.proj[aria-current="true"]::before { content: ""; position: absolute; left: -7px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.proj[aria-current="true"] .pic { box-shadow: inset 0 0 0 1.5px var(--accent-line); color: var(--accent-ink); }
.proj .tx { display: flex; flex-direction: column; gap: 1px; padding-right: 30px; }
.proj .t { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.proj .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.proj .s .live { color: var(--accent-ink); margin-left: 4px; }
.proj .fold { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 6px; color: var(--faint); display: none; place-items: center; }
.proj .fold svg { width: 12px; height: 12px; transition: transform .2s; }
.rail.wide .proj .fold { display: grid; }
.rail.wide .proj .fold[hidden] { display: none; }
.proj .fold:hover { background: var(--line); color: var(--ink); }
.pg.fold .proj .fold svg { transform: rotate(-90deg); }
/* меню «⋯» чата */
.rmenu { position: fixed; z-index: 40; width: 236px; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 4px; animation: fadein .12s ease; }
.rmenu-i { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--ink); min-width: 0; }
.rmenu-i:hover, .rmenu-i:focus-visible { background: var(--sunk); outline: 0; }
.rmenu-i.crit { color: var(--crit); }
.rmenu-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rmenu-h { font-size: 11.5px; color: var(--faint); padding: 7px 10px 3px; }
.rmenu-sep { height: 1px; background: var(--line2); margin: 4px 6px; }

/* «крошка» проекта над чатом */
.pcrumb { flex: none; padding: 10px 16px 0; min-width: 0; }
.pcrumb-b { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; font-size: 12.5px; color: var(--muted); padding: 3px 9px 3px 4px; border-radius: 8px; }
.pcrumb-b:hover { background: var(--sunk); color: var(--ink); }
.pcrumb-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 500; }
.pcrumb-a { color: var(--faint); }
.pcrumb + .feed .feed-in { padding-top: 12px; }

/* ================================================= основная область */
.main { display: grid; grid-template-columns: var(--chat-w) 0 minmax(0, 1fr); height: 100vh; min-width: 0; }
body.solo .main { grid-template-columns: 100% 0 0; }
body.panel-max .main { grid-template-columns: 0 0 minmax(0, 1fr); }

/* ================================================= чат */
.chatcol { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border-right: 1px solid var(--line2); position: relative; overflow: hidden; }
body.solo .chatcol { background: var(--surface); border-right-color: transparent; justify-content: center; padding-bottom: 14vh; }
body.panel-max .chatcol { visibility: hidden; }
.feed { flex: 1; overflow-y: auto; position: relative; min-height: 0; overscroll-behavior: contain; }
body.solo .feed { display: none; }
.feed-in { padding: 22px 20px 10px; }
.m { margin: 0 0 16px; animation: fadein .22s ease both; min-width: 0; }
.m.old { animation: none; }
.m-user { display: flex; justify-content: flex-end; }
.bub { max-width: 88%; background: var(--bub); border-radius: 14px 14px 4px 14px; padding: 8px 12px 9px; font-size: 13.5px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bub.pending { opacity: .6; }
.tok { display: inline-flex; align-items: center; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 0 6px; margin-right: 6px; font-size: 12.5px; line-height: 21px; white-space: nowrap; vertical-align: baseline; }
.m-sys { text-align: center; color: var(--faint); font-size: 12px; display: flex; align-items: center; gap: 10px; }
.m-sys::before, .m-sys::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.m-sys.crit { color: var(--crit); }
.bub.has-att { min-width: 300px; }
.att-head { margin-bottom: 6px; }
.att { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.att:hover { border-color: var(--faint); }
.att-ic { color: var(--accent); font-size: 13px; }
.att-t { font-weight: 500; color: var(--ink); }
.att-n { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.att .wk-chev { color: var(--faint); font-size: 9px; transition: transform .2s; }
.att[aria-expanded="true"] .wk-chev { transform: rotate(90deg); }
.att-body { margin-top: 6px; max-height: 48vh; overflow: auto; background: var(--surface); border: 1px solid var(--line2); border-radius: 9px; padding: 4px 10px 8px; white-space: normal; animation: fadein .2s ease; }
.att-tools { position: sticky; top: 0; display: flex; justify-content: flex-end; background: var(--surface); padding: 2px 0; }
.att-text { white-space: pre-wrap; font-size: 12.5px; color: var(--ink2); }
.ot { font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.ot-g { font-weight: 600; color: var(--ink); margin-top: 8px; }
.ot-i { margin-top: 2px; }
.ot-n { color: var(--faint); font: 11.5px var(--mono); margin-right: 6px; }
.m-sys.crit::before, .m-sys.crit::after { content: none; }
.m-sys.crit { text-align: left; display: block; }
.m-agent { font-size: 13.5px; line-height: 1.56; color: var(--ink); }

/* markdown в чате */
.md { overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 18px; }
.md li { margin: 2px 0; }
.md h1, .md h2, .md h3, .md h4 { font-size: 13.5px; font-weight: 600; margin: 14px 0 4px; color: var(--ink); line-height: 1.4; }
.md strong { font-weight: 600; }
.md pre { background: var(--sunk); border-radius: 7px; padding: 8px 10px; overflow: auto; font: 11.5px/1.5 var(--mono); }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; margin: 0 0 8px; font-size: 12.5px; display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { text-align: left; padding: 3px 12px 3px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.md th { font-weight: 500; color: var(--muted); }
.md blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

/* ход работы агента: одна свёрнутая строка */
.wk { margin-bottom: 8px; }
.wk-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; padding: 3px 6px; margin-left: -6px; border-radius: 7px; width: calc(100% + 12px); text-align: left; min-height: 26px; }
.wk-row:hover { background: var(--sunk); color: var(--ink2); }
.wk-ic { width: 12px; display: grid; place-items: center; flex: none; color: var(--faint); }
.wk-line { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk.live .wk-line { color: var(--accent-ink); }
.wk.fail .wk-ic { color: var(--crit); }
.wk-chev { font-size: 9px; color: var(--faint); transition: transform .2s; flex: none; }
.wk.open .wk-chev { transform: rotate(90deg); }
.wk.is-focus > .wk-row { color: var(--ink2); }
.wk.is-focus > .wk-row .wk-ic { color: var(--accent); }
.wk-body { display: none; margin: 4px 0 8px 5px; padding-left: 15px; border-left: 1px solid var(--line); }
.wk.open .wk-body { display: block; animation: fadein .2s ease; }
.reasoning { margin: 2px 0 6px; }
.reasoning > summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 12.5px; }
.reasoning > summary::-webkit-details-marker { display: none; }
.reasoning > summary:hover { color: var(--ink); }
.reasoning-text { font-size: 12.5px; line-height: 1.55; color: var(--muted); font-style: italic; margin: 4px 0 8px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.step { display: block; }
.step > summary, div.step { display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; margin-left: -6px; border-radius: 6px; font-size: 12.5px; list-style: none; cursor: default; }
.step > summary { cursor: pointer; }
.step > summary::-webkit-details-marker { display: none; }
.step > summary:hover { background: var(--sunk); }
.step-k { flex: 0 0 44px; font: 11px var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-s { flex: 1 1 auto; min-width: 0; color: var(--ink2); line-height: 1.4; overflow-wrap: anywhere; }
.step-r { flex: 0 0 auto; color: var(--faint); font-size: 11px; }
.step.live .step-k, .step.live .step-s { color: var(--accent-ink); }
.step.fail .step-k, .step.fail .step-r, .step.crit .step-s { color: var(--crit); }
.step-body { margin: 2px 0 8px; }
pre.code, pre.out { margin: 0 0 4px; padding: 8px 10px; background: var(--sunk); border-radius: 7px; font: 11.5px/1.5 var(--mono); color: var(--ink2); white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; }
pre.out { color: var(--muted); }
pre.out.fail { color: var(--crit); }

/* вопрос агента */
.ask { margin-top: 10px; }
.ask-q + .ask-q { margin-top: 14px; }
.ask-h { font-size: 11.5px; color: var(--accent-ink); font-weight: 500; margin-bottom: 1px; }
.ask-t { font-weight: 600; margin: 0 0 6px; }
.ask-o { display: block; width: 100%; text-align: left; padding: 8px 11px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-top: 6px; transition: border-color .15s, background .15s; position: relative; }
.ask-o:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-soft); }
.ask-o.on { border-color: var(--accent); background: var(--accent-soft); }
.ask-l { font-weight: 600; display: block; padding-right: 22px; }
.ask-d { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 1px; }
.ask-k { position: absolute; right: 11px; top: 9px; color: var(--faint); font-size: 11px; }
.ask-act { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.ask-alt { color: var(--faint); font-size: 12px; margin-top: 8px; }
.ask.off .ask-t { font-weight: 500; color: var(--ink2); }
.ask.off .ask-opts { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.ask.off .ask-o { width: auto; border: 0; background: none; padding: 0; margin: 0; cursor: default; color: var(--faint); font-size: 12.5px; }
.ask.off .ask-l { font-weight: 400; padding: 0; }
.ask.off .ask-o.on { color: var(--ink2); }
.ask.off .ask-o.on .ask-l::before { content: "✓ "; color: var(--accent); }
.ask.off .ask-d, .ask.off .ask-k { display: none; }

/* блоки чата, связанные с панелью */
.blk { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 13px; background: var(--surface); transition: border-color .15s, box-shadow .15s; margin-top: 10px; }
.blk.clickable { cursor: pointer; }
.blk.clickable:hover { border-color: var(--faint); }
.blk.is-focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.blk.dim { opacity: .6; }
.to { position: absolute; right: 11px; top: 9px; color: var(--faint); font-size: 13px; opacity: 0; transition: opacity .15s; }
.blk:hover .to, .m-sum:hover .to { opacity: 1; }
.is-focus .to { opacity: 1; color: var(--accent); }
.pl-t { font-weight: 600; font-size: 13.5px; line-height: 1.4; padding-right: 18px; }
.pl-what { color: var(--ink2); font-size: 12.5px; line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pl-what p { margin: 0 0 4px; }
.pl-state { color: var(--muted); font-size: 12px; margin-top: 4px; }
.pl-rec { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; margin-top: 8px; font-size: 12px; color: var(--ink2); padding: 5px 8px; margin-left: -8px; width: calc(100% + 16px); border-radius: 7px; }
.pl-rec:hover { background: var(--sunk); }
.pl-rec .lb { color: var(--muted); flex: none; }
.pl-rec .ar { color: var(--faint); }
.pl-rec.crit { color: var(--crit); }
.pl-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pl-row .lb { color: var(--muted); font-size: 12px; flex: none; min-width: 52px; }
.seg { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--sunk); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button { padding: 5px 4px; border-radius: 6px; font-size: 12px; color: var(--muted); transition: background .15s, color .15s; white-space: nowrap; }
.seg button:hover:not(:disabled) { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.seg button:disabled { opacity: .45; }
.pl-est { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.pl-est b { color: var(--ink); font-weight: 500; }
.pl-note { color: var(--accent-ink); font-size: 12px; margin-top: 6px; }
.go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 14px; border-radius: 9px; background: var(--ink); color: var(--surface); font-weight: 600; font-size: 13.5px; transition: background .2s, opacity .2s; }
.go:hover:not(:disabled) { background: var(--accent); }
.go:disabled { opacity: .35; }
.go span { font-weight: 400; opacity: .7; }
.lnk { color: var(--muted); font-size: 12px; margin-top: 9px; display: inline-flex; gap: 5px; align-items: center; }
.lnk:hover { color: var(--ink); }
.lnk i { font-style: normal; font-size: 9px; transition: transform .2s; }
.lnk[aria-expanded="true"] i { transform: rotate(90deg); }
.more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); font-size: 12.5px; cursor: default; animation: fadein .2s ease; }
.more .md { color: var(--ink2); margin-bottom: 10px; }
.spec { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; margin: 0; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.spec ul { margin: 0; padding-left: 16px; }
.spec li { margin: 2px 0; }
.spec .sub { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.spec .tag { font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.spec details summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; }
.spec details summary::-webkit-details-marker { display: none; }
.num-in { width: 72px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 1px 5px; font-size: 12px; }
.code-fold { margin-top: 8px; }
.code-fold > summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; }
.code-fold > summary::-webkit-details-marker { display: none; }
.code-fold pre { margin-top: 6px; max-height: 320px; }

.rn-top { display: flex; align-items: center; gap: 8px; padding-right: 22px; min-width: 0; }
.rn-top b { font-weight: 600; white-space: nowrap; }
.rn-top .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rn-pct { color: var(--accent-ink); font-weight: 500; }
.sp { flex: 1; }
.tbtn { font-size: 12px; color: var(--muted); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.tbtn:hover:not(:disabled) { background: var(--sunk); color: var(--ink); }
.tbtn:disabled { opacity: .5; }
.pbar { height: 4px; background: var(--sunk); border-radius: 4px; overflow: hidden; margin-top: 9px; display: flex; }
.pbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.pbar i.o { background: var(--ink2); opacity: .35; }
.rn-meta { color: var(--muted); font-size: 12.5px; margin-top: 7px; }
.rn-meta.crit { color: var(--crit); }
.rn-est { font-size: 12.5px; color: var(--ink2); margin-top: 3px; }
.rn-est b { font-weight: 600; color: var(--ink); }
.rn-now { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--faint); min-height: 28px; }
.rn-now .ft { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); text-align: left; }
.rn-now .ft:hover { color: var(--ink); }
.okc { color: var(--good); font-size: 12px; }
.rn-details { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); font-size: 12px; color: var(--muted); line-height: 1.65; cursor: default; }
.pp { display: inline-block; font: 500 11px/18px var(--mono); text-align: center; border-radius: 5px; background: var(--sunk); color: var(--muted); min-width: 36px; height: 18px; flex: none; padding: 0 4px; }
.pp.hi { background: var(--accent-soft); color: var(--accent-ink); }

.m-sum { position: relative; font-size: 13.5px; line-height: 1.58; color: var(--ink); cursor: pointer; padding-left: 12px; margin-left: -12px; border-left: 2px solid transparent; transition: border-color .2s; }
.m-sum .to { top: 0; right: 0; }
.m-sum.is-focus { border-left-color: var(--accent-line); }
.m-sum .md { padding-right: 16px; }
.m-sum .note { color: var(--muted); font-size: 12px; margin: 0 0 6px; }
.nexts { margin-top: 10px; cursor: default; }
.nexts .h { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.nexts button { display: block; text-align: left; color: var(--ink2); font-size: 12.5px; padding: 4px 0 4px 16px; position: relative; line-height: 1.4; }
.nexts button::before { content: "↳"; position: absolute; left: 0; color: var(--faint); }
.nexts button:hover { color: var(--accent-ink); }
.acts { display: flex; gap: 4px; margin-top: 8px; margin-left: -7px; cursor: default; }
.acts a.tbtn { text-decoration: none; }

/* ввод */
.composer { position: relative; padding: 8px 16px 16px; flex: none; }
body.solo .composer { width: min(860px, calc(100% - 96px)); margin: 0 auto; padding: 0; }
.cbox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 7px 7px 7px 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.cbox:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
body.solo .cbox { padding: 12px 10px 12px 18px; border-radius: 18px; box-shadow: 0 8px 34px rgba(0, 0, 0, .06); }
body.solo .cbox:focus-within { box-shadow: 0 0 0 3px var(--accent-soft), 0 8px 34px rgba(0, 0, 0, .06); }
.cbox .tok { margin-right: 2px; cursor: default; }
/* «#» — ссылки на объекты проекта: нейтральные токены (база «@» — акцентная) */
.crefs { display: contents; }
.tok.ref { gap: 3px; color: var(--ink2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); max-width: 280px; }
.ref-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cbox .tok.ref { padding-right: 2px; }
.ref-x { width: 17px; height: 17px; border-radius: 5px; color: var(--muted); font-size: 13px; line-height: 1; flex: none; }
.ref-x:hover { background: var(--sunk); color: var(--ink); }
button.tok.ref { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; line-height: 21px; padding: 0 7px; margin: 0 6px 2px 0; transition: box-shadow .15s, color .15s; }
button.tok.ref:hover { color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
.atm.refs { width: min(400px, calc(100% - 32px)); }
body.solo .atm.refs { width: min(400px, 100%); }
.atm .rk { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--faint); display: inline-block; min-width: 62px; }
.atm.refs span { padding-left: 62px; }
.cbox textarea { flex: 1 1 150px; border: 0; outline: 0; background: none; resize: none; font: 13.5px/1.45 var(--sans); color: var(--ink); max-height: 160px; min-height: 20px; padding: 3px 0; }
body.solo .cbox textarea { font-size: 15.5px; }
.cbox textarea::placeholder { color: var(--faint); }
.att-hint { flex-basis: 100%; font-size: 11.5px; color: var(--muted); padding: 2px 2px 0; }
.send { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: var(--surface); display: grid; place-items: center; flex: none; transition: background .15s, opacity .15s; margin-left: auto; }
.send:hover:not(:disabled) { background: var(--accent); }
.send:disabled { opacity: .18; }
.send svg { width: 15px; height: 15px; }
.c-status { font-size: 12px; color: var(--muted); padding: 0 4px 6px; display: flex; gap: 7px; align-items: center; min-height: 0; }
.c-status:empty { display: none; }
.atm { position: absolute; left: 16px; bottom: calc(100% - 6px); width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 4px; z-index: 50; animation: fadein .12s ease; }
body.solo .atm { left: 0; bottom: calc(100% + 8px); }
body.proj .atm { top: calc(100% + 8px); bottom: auto; }
body.proj .llmm { top: calc(100% + 8px); bottom: auto; }
.atm button { display: block; width: 100%; text-align: left; padding: 7px 10px 8px; border-radius: 8px; }
.atm button[aria-selected="true"] { background: var(--sunk); }
.atm button:disabled { opacity: .5; }
.atm b { font-weight: 600; font-size: 13px; }
.atm b small { font-weight: 400; color: var(--faint); font-size: 11.5px; margin-left: 6px; }
.atm span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atm mark { background: none; color: var(--accent-ink); }
.atm .none { padding: 8px 10px; color: var(--muted); font-size: 12.5px; }

/* разделитель чат | панель */
.split { position: relative; z-index: 6; cursor: col-resize; }
.split::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; }
.split:hover::after, .split.drag::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--accent-line); }
body.solo .split, body.panel-max .split { display: none; }
body.dragging { cursor: col-resize; user-select: none; }
body.dragging iframe, body.dragging canvas { pointer-events: none; }

/* ================================================= панель */
.right { overflow-y: auto; padding: 0 34px 80px; min-width: 0; background: var(--surface); position: relative; }
body.solo .right { visibility: hidden; overflow: hidden; padding: 0; }
.rwrap { max-width: 1080px; margin: 0 auto; }
.rh { position: sticky; top: 0; z-index: 5; background: var(--surface); padding: 18px 0 12px; display: flex; gap: 16px; align-items: flex-start; }
.rh-main { flex: 1; min-width: 0; }
.rh-t { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; line-height: 1.35; }
.rh-s { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; margin-top: 3px; min-height: 19px; }
.rh-s .crit { color: var(--crit); }
.rh-tools { display: flex; align-items: center; gap: 2px; flex: none; padding-top: 1px; }
.rh-nav { display: flex; align-items: center; gap: 2px; color: var(--muted); font-size: 12px; margin-right: 6px; }
.rh-nav .pos { min-width: 34px; text-align: center; }
.ibtn { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); }
.ibtn:hover:not(:disabled) { background: var(--sunk); color: var(--ink); }
.ibtn:disabled { opacity: .35; }
.ibtn svg { width: 16px; height: 16px; }
.rh-tools .tbtn { text-decoration: none; }
.pempty { color: var(--faint); font-size: 13px; padding: 64px 0; text-align: center; }
.appear { animation: rise .4s ease both; }

.sec { padding: 20px 0 24px; border-top: 1px solid var(--line2); min-width: 0; }
.sec > h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sec > h3 .n { font-weight: 400; font-size: 12px; color: var(--faint); }
.will { font-size: 12px; color: var(--faint); margin-top: -2px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; grid-auto-flow: row dense; }
.grid2 > .full { grid-column: 1 / -1; }
/* сверка с перечнем пользователя */
.rec-sum { font-size: 12.5px; color: var(--ink2); }
.rec-sum.crit { color: var(--crit); }
.rec-tools { margin: 10px 0 6px; max-width: 520px; display: flex; }
.rec-list { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
.rec-g { font-weight: 600; color: var(--ink); margin: 14px 0 4px; }
.rec-gq { font-weight: 400; color: var(--muted); }
.rec-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 104px; gap: 14px; padding: 6px 0; border-top: 1px solid var(--line2); align-items: start; }
.rec-num { color: var(--faint); font: 11.5px/1.75 var(--mono); }
.rec-u { color: var(--ink2); }
.rec-u s { color: var(--crit); text-decoration-color: var(--crit); opacity: .75; }
.rec-m { color: var(--ink); border-radius: 6px; padding: 0 6px; margin: 0 -6px; }
.rec-m.ed { cursor: text; }
.rec-m.ed:hover { background: var(--sunk); }
.rec-m.edited { background: var(--accent-soft); }
.rec-m.crit { color: var(--crit); }
.rec-m.editing { background: none; }
.rec-ta { width: 100%; border: 1px solid var(--accent-line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 12.5px/1.45 var(--sans); padding: 4px 6px; resize: vertical; outline: 0; }
.rec-acts { display: flex; gap: 2px; margin: 2px 0 0 -7px; }
.rec-b { font-size: 11px; color: var(--faint); text-align: right; white-space: nowrap; }
.rec-row.st-short .rec-b, .rec-row.st-reword .rec-b { color: var(--accent-ink); }
.rec-row.st-missing .rec-b { color: var(--crit); }
.rec-ask { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.rec-foot { position: sticky; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); z-index: 2; }
.rec-g .rec-num { margin-right: 8px; }
.rec-go { width: auto; margin-top: 0; padding: 7px 14px; font-size: 12.5px; }

/* главный показатель */
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; padding: 6px 0 26px; }
.hero.solo-kpi { grid-template-columns: 1fr; }
.hero .lab { font-size: 13px; color: var(--ink2); display: flex; gap: 8px; align-items: baseline; }
.hero .val { font: 500 60px/1.02 var(--sans); letter-spacing: -.035em; margin: 8px 0 6px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero .val .pm { font-size: 17px; color: var(--muted); letter-spacing: -.01em; font-weight: 400; }
.hero .ci { font-size: 13px; color: var(--ink2); }
.hero .ci b { font-weight: 500; color: var(--accent-ink); }
.hero .ci .lead { margin-top: 4px; font-size: 12px; color: var(--muted); cursor: help; }
.hero .meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.hero .err { color: var(--crit); font-size: 13px; }
.hero.waiting .val { color: var(--faint); }
.ruler { position: relative; height: 36px; margin: 16px 4px 0; }
.ruler .ax { position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--line); }
.ruler .tk { position: absolute; top: 11px; width: 1px; height: 7px; background: var(--line); }
.ruler .tl { position: absolute; top: 22px; transform: translateX(-50%); font-size: 11px; color: var(--faint); white-space: nowrap; }
.ruler .band { position: absolute; top: 8px; height: 13px; background: var(--accent-soft); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); border-radius: 2px; transition: left .3s ease, width .3s ease; }
.ruler .pt { position: absolute; top: 4px; width: 2px; height: 21px; background: var(--ink); transform: translateX(-1px); transition: left .3s ease; }
.hero.skel .ruler .band { background: repeating-linear-gradient(-45deg, var(--line2) 0 4px, transparent 4px 8px); border-color: var(--faint); }
.hero .side { display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
.hero .side .l { font-size: 12.5px; color: var(--muted); margin-bottom: 1px; }
.hero .side .v { font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.hero .side .c { font-size: 12px; color: var(--muted); }
.hero .side .waiting .v { color: var(--faint); }

/* воронка плана */
.funnel { display: flex; align-items: flex-start; margin: 2px 0 4px; }
.funnel .fs { flex: 1; padding-right: 14px; min-width: 0; }
.funnel .ar { color: var(--faint); padding: 4px 14px 0 0; font-size: 14px; }
.funnel .fv { font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; }
.funnel .fl { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.fbar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--sunk); margin-top: 16px; }
.fbar i { display: block; height: 100%; min-width: 2px; }
.fbar .a { background: var(--accent); }
.fbar .b { background: var(--ink2); opacity: .45; }
.fbar .k { background: var(--good); opacity: .7; }
.minil { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--faint); margin-top: 4px; }
.ghost { height: 150px; margin-top: 12px; border-radius: 6px; background: repeating-linear-gradient(-45deg, var(--line2) 0 4px, transparent 4px 8px); opacity: .7; }
.ghost.kpi { height: 44px; width: 60%; }
.samples { list-style: none; margin: 6px 0 0; padding: 0; }
.samples li { padding: 5px 0; border-top: 1px solid var(--line2); color: var(--ink2); font-size: 12.5px; }

/* ход работы в панели */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.fact { padding: 18px 0 20px; border-top: 1px solid var(--line2); min-width: 0; animation: rise .35s ease both; }
.fact .fv { font: 500 30px/1.1 var(--sans); letter-spacing: -.03em; margin: 0 0 6px; overflow-wrap: anywhere; }
.fact .fv small { font-size: 15px; color: var(--muted); letter-spacing: 0; }
.fact .fl { color: var(--ink2); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.fact .fl.mono, .fact .fs2 { font: 12px/1.5 var(--mono); color: var(--ink2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fact .fs2 { color: var(--muted); margin-top: 4px; }
.fact .src { font-size: 11.5px; color: var(--faint); margin-top: 8px; display: flex; gap: 10px; }
.fact .src button { color: var(--faint); }
.fact .src button:hover { color: var(--ink); }
.fact pre { margin-top: 8px; max-height: 200px; }
.fact.fail .fv, .fact.fail .fl { color: var(--crit); }
.fact.textual .fv { display: none; }
.fact.textual .fl { font-size: 14px; color: var(--ink); }
.fact.pending .fv { color: transparent; background: linear-gradient(90deg, var(--sunk), var(--line2), var(--sunk)); background-size: 200% 100%; animation: shim 1.2s linear infinite; border-radius: 6px; width: 55%; }
.nudge { display: flex; gap: 10px; align-items: center; color: var(--accent-ink); font-size: 13px; margin: 2px 0 16px; }

/* живая лента и надёжность */
.cl { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.cl li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line2); min-width: 0; align-items: flex-start; }
.cl li.new { animation: fadein .4s ease; }
.cl .ct { min-width: 0; flex: 1; }
.cl .ft { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: var(--ink2); text-align: left; }
.cl .ft:hover { color: var(--ink); }
.cl .fm { display: block; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; margin-top: 10px; }
.qm .v { font: 500 18px var(--sans); }
.qm .l { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.qdet { margin-top: 12px; }
.qdet > summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; }
.qdet > summary::-webkit-details-marker { display: none; }
.qdet > summary:hover { color: var(--ink); }
.qdet h4 { font-size: 12px; font-weight: 500; color: var(--muted); margin: 14px 0 4px; }
.qdet p { margin: 0 0 6px; font-size: 12.5px; color: var(--ink2); }

/* ================================================= графики (charts.js) */
.chart { margin: 0; min-width: 0; }
.chart-cap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 2px; }
.cap-l { flex: 1 1 auto; min-width: 0; }
.chart-t { font-weight: 600; color: var(--ink); font-size: 13.5px; margin-right: 8px; }
.chart-n, .stale { color: var(--faint); font-size: 12px; white-space: nowrap; }
.chart-n + .stale { margin-left: 8px; }
.chart-cap .link { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.chart-note { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.chart-body { position: relative; margin-top: 8px; }
.chart-canvas { width: 100%; }
.chart-wait { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 12.5px; border-radius: 6px; background: repeating-linear-gradient(-45deg, var(--line2) 0 4px, transparent 4px 8px); }
.chart-err { color: var(--crit); font-size: 13px; padding: 12px 0; }
.chart.stale-on .chart-body { opacity: .65; transition: opacity .3s; }
.chart .prose { font-size: 13.5px; line-height: 1.58; }
/* свободные визуализации агента (vizframe.js): iframe без рамки, высота — по содержимому */
.chart-body.frame { margin-top: 6px; }
.vizf iframe { display: block; width: 100%; border: 0; background: transparent; color-scheme: light; transition: height .18s ease; }
.viz-img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.vizp { padding-top: 4px; }
.vizp .chart-cap .chart-t { display: none; }
.vizp .viz-img { width: 100%; }
.chart .prose p { margin: 0 0 8px; }
.scale { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.scale .ramp { width: 120px; height: 6px; border-radius: 1px; }
.scale .nullsw { width: 10px; height: 10px; background: var(--null); margin-left: 12px; border-radius: 1px; }
.dt-wrap { overflow-x: auto; }
table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dt th, .dt td { padding: 5px 12px 5px 0; text-align: left; border-bottom: 1px solid var(--line2); vertical-align: baseline; }
.dt th { font-weight: 500; color: var(--muted); font-size: 12px; }
.dt .r { text-align: right; padding-right: 0; padding-left: 12px; white-space: nowrap; }
.dt td.cat { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt .ci { color: var(--muted); }
.dt tr.null td { color: var(--faint); }
.mb { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; width: 100%; }
.mb .track { position: relative; flex: 0 0 72px; height: 4px; background: var(--grid); border-radius: 1px; }
.mb .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 1px; transition: width .6s; }
.mb .cib { position: absolute; top: -2px; bottom: -2px; border-left: 1px solid var(--whisker); border-right: 1px solid var(--whisker); opacity: .55; transition: left .6s, width .6s; }
.tt { font: 12px/1.45 var(--font); min-width: 140px; }
.tt-h { color: var(--muted); margin-bottom: 4px; }
.tt-row { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tt-key { flex: 0 0 12px; height: 2px; border-radius: 1px; align-self: center; }
.tt-val { font-weight: 600; color: var(--text); }
.tt-name { color: var(--text-2); }
.tt-sub { color: var(--muted); padding-left: 20px; margin-bottom: 3px; }
.tt-hint { color: var(--faint); margin-top: 4px; }
.feedl { display: flex; flex-direction: column; }
.fi { padding: 8px 0; border-bottom: 1px solid var(--line2); min-width: 0; }
.fi:last-child { border-bottom: 0; }
.fi.new { animation: fadein .5s ease-out; }
.fi-t { display: block; text-align: left; font-size: 13px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.fi-t:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.fi-m, .fi-a { font-size: 12px; color: var(--muted); line-height: 1.5; }
.fi-a { color: var(--ink2); }
.fi-a .unsure { color: var(--muted); }
.fi-a .sep, .fi-m .sep { color: var(--faint); margin: 0 .4em; }
.fi .warn { color: var(--crit); }
.examples-list + .more { margin-top: 10px; font-size: 12.5px; color: var(--muted); border: 0; padding: 0; }
.empty { color: var(--muted); font-size: 13px; }

/* ================================================= лист (карточка, библиотека) */
.sheet { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: flex; justify-content: center; align-items: flex-start; padding: 6vh 24px; overflow-y: auto; overscroll-behavior: contain; animation: fadein .15s ease; }
.sheet-in { width: min(720px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 22px 26px 28px; position: relative; }
.sheet-close { position: fixed; top: calc(6vh + 12px); right: calc((100vw - min(720px, 100vw - 48px)) / 2 + 14px); font-size: 12.5px; z-index: 81; background: var(--surface); padding: 2px 8px; border-radius: 6px; }
.sheet .eyebrow { font-size: 12px; color: var(--muted); margin-bottom: 4px; overflow-wrap: anywhere; }
.sheet h2 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 0 0 18px; overflow-wrap: anywhere; }
.sheet h3 { font-size: 12px; font-weight: 500; color: var(--muted); margin: 22px 0 8px; }
.sheet .prose { font-size: 13.5px; line-height: 1.6; }
.sheet .back { font-size: 12.5px; margin-bottom: 14px; display: inline-block; }
.fields { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; }
.fields dt { font-size: 12.5px; color: var(--muted); }
.fields dd { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink2); }
.dec { margin-bottom: 14px; }
.dec-h { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.dec-h .muted { font-size: 12px; margin-left: 8px; font-weight: 400; }
.dec-row { display: grid; grid-template-columns: minmax(0, 16em) 160px 3.5em; justify-content: start; gap: 14px; align-items: center; font-size: 12.5px; color: var(--ink2); padding: 2px 0; }
.dec-row.top { color: var(--ink); }
.dec-row .v { text-align: right; }
.dec-row .track { height: 6px; background: var(--sunk); border-radius: 3px; position: relative; }
.dec-row .track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--faint); border-radius: 3px; }
.dec-row.top .track i { background: var(--accent); }
.lib-list { list-style: none; margin: 0; padding: 0; }
.lib-list li { padding: 7px 0; border-top: 1px solid var(--line2); display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.lib-list .link { color: var(--ink); font: 500 12.5px var(--mono); flex: 0 0 auto; text-align: left; }
.lib-list .d { color: var(--muted); font-size: 12.5px; flex: 1 1 auto; min-width: 0; }
.lib-list .r { color: var(--faint); font-size: 11.5px; white-space: nowrap; }

/* ================================================= уведомления и соединение */
.notice { position: fixed; right: 20px; bottom: 16px; align-items: flex-end; z-index: 90; display: flex; flex-direction: column; gap: 4px; pointer-events: none; max-width: 360px; }
.notice .n { font-size: 12.5px; line-height: 1.45; color: var(--ink2); background: var(--surface); padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.notice .n.in { opacity: 1; transform: none; }
.notice .n.error { color: var(--crit); }
.notice .n .d { color: var(--muted); }
.conn { position: fixed; left: calc(var(--rail-w) + 16px); top: 12px; z-index: 90; font-size: 12.5px; color: var(--crit); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; }

/* ================================================= файлы: вложения в строке ввода и карточки в чате */
.clip { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--muted); margin-left: -5px; transition: color .15s, background .15s; }
.clip:hover:not(:disabled) { color: var(--ink); background: var(--sunk); }
.clip:disabled { opacity: .35; }
.clip svg { width: 16px; height: 16px; }
/* модель агента и уровень размышления: кнопка у «отправить», панель над строкой ввода (справа) */
.llmb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 9px; border-radius: 8px; flex: 0 1 auto; min-width: 0; color: var(--ink2); font-size: 12.5px; white-space: nowrap; transition: color .15s, background .15s; }
.llmb:hover, .llmb[aria-expanded="true"] { color: var(--ink); background: var(--sunk); }
.llmb-m { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.llmb-e { color: var(--muted); }
.llmb-e::before { content: '·'; margin-right: 6px; color: var(--faint); }
.llmb svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
.cbox textarea + .llmb { margin-left: auto; }
.cbox .llmb + .send { margin-left: 0; }
.llmm { position: absolute; right: 16px; bottom: calc(100% - 6px); width: 280px; max-width: calc(100% - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 50; animation: fadein .12s ease; }
body.solo .llmm { right: 0; bottom: calc(100% + 8px); max-width: 100%; }
.llmm-h { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 8px 4px; font-size: 11.5px; color: var(--faint); }
.llmm-l { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; }
.llmm-i { display: block; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--ink); }
.llmm-i:hover, .llmm-i:focus-visible { background: var(--sunk); outline: 0; }
.llmm-i[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.llmm-s { border-top: 1px solid var(--line2); margin-top: 6px; padding: 2px 0 8px; }
.llmm-s:first-child { border-top: 0; margin-top: 0; }
.llmm-s .llmm-h { padding-top: 8px; }
.llmm-v { font-size: 12.5px; color: var(--ink); font-weight: 500; }
.llmm-rw { position: relative; margin: 6px 14px 0; height: 22px; }
.llmm-r { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 22px; background: none; margin: 0; z-index: 1; cursor: pointer; }
.llmm-r::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--sunk); }
.llmm-r::-moz-range-track { height: 4px; border-radius: 2px; background: var(--sunk); }
.llmm-r::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent-line); }
.llmm-r::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent-line); }
.llmm-r:focus-visible { outline: 0; }
.llmm-r:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
.llmm-t { position: absolute; left: 8px; right: 8px; top: 9px; height: 4px; pointer-events: none; }
.llmm-t button { position: absolute; top: -1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--line); pointer-events: auto; padding: 0; }
.cbox.drop { border-style: dashed; border-color: var(--accent-line); background: var(--accent-soft); }
.cfiles { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 1px 0 5px; }
.cfile { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; background: var(--sunk); border-radius: 8px; padding: 3px 3px 3px 9px; font-size: 12.5px; color: var(--ink2); }
.cfile-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cfile-s { color: var(--muted); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cfile-x { width: 20px; height: 20px; border-radius: 6px; color: var(--muted); font-size: 15px; line-height: 1; flex: none; }
.cfile-x:hover { color: var(--ink); background: var(--line2); }
.m-user.with-files { flex-direction: column; align-items: flex-end; gap: 6px; }
.files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.files-user { justify-content: flex-end; margin-top: 0; max-width: 88%; }
.file { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 340px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px 6px 6px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
a.file:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.file.loading { opacity: .7; }
.file-ic { width: 34px; height: 34px; border-radius: 7px; background: var(--sunk); display: grid; place-items: center; flex: none; font: 600 10px var(--mono); text-transform: uppercase; color: var(--ink2); letter-spacing: .02em; }
.file-img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: none; background: var(--sunk); }
.file-t { display: flex; flex-direction: column; min-width: 0; }
.file-n { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-m { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* страница проекта в ответе агента (planner.page, Message.pages) */
.files.pages .file { min-width: 280px; max-width: 440px; }
.page-ic { color: var(--accent); background: var(--accent-soft); }
.page-ic svg { width: 18px; height: 18px; }
.page-go { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--accent-ink); white-space: nowrap; }
.page-go::after { content: " ↗"; }
.rn-src { color: var(--ink2); text-decoration: underline dotted var(--faint); text-underline-offset: 3px; }
.rn-src:hover { color: var(--accent-ink); }

/* ================================================= вход */
body.login { display: grid; place-items: center; grid-template-columns: 1fr; min-height: 100vh; overflow: auto; }
.login-box { width: 320px; display: flex; flex-direction: column; gap: 12px; }
.login-box .logo { margin-bottom: 6px; }
.login-box h1 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.login-box label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.login-box input { font: 14px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; outline: none; }
.login-box input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-box .err { color: var(--crit); font-size: 12.5px; min-height: 18px; }

@media (max-width: 1280px) {
  .right { padding: 0 24px 72px; }
  .hero { grid-template-columns: 1fr; gap: 18px; }
  .hero .side { flex-direction: row; flex-wrap: wrap; gap: 14px 32px; justify-content: flex-start; }
  .hero .val { font-size: 48px; }
  .qm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .grid2, .facts, .cl { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================= визуализации в чате (visuals.js) */
.vlist { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.vcard { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 12px 10px; transition: border-color .15s; }
.vcard:hover { border-color: var(--accent-line); }
.vcard.is-focus { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.vcard .chart-cap { align-items: center; }
.vcard .chart-t { font-size: 13px; }
.vcard .v-exp { width: 24px; height: 24px; margin: -4px -4px -4px 0; flex: none; opacity: .7; }
.vcard:hover .v-exp { opacity: 1; }
.vcard .v-exp svg { width: 15px; height: 15px; }
.vcard .v-head { display: flex; justify-content: flex-end; margin: -4px -4px 0 0; }
.vcard .kpi { padding: 0; }

/* ================================================= экран проекта (project.js): шапка | строка ввода | секции */
.pj-head, .pj-body { display: none; }
body.proj .chatcol { display: block; overflow-y: auto; padding: 0; }
body.proj .pj-head, body.proj .pj-body { display: block; width: min(860px, calc(100% - 96px)); margin: 0 auto; }
body.proj .pj-head { padding: max(48px, 9vh) 0 18px; }
.pj-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pj-saved { margin-left: auto; color: var(--good); opacity: 0; transition: opacity .3s; }
.pj-saved.in { opacity: 1; }
.pj-title { display: block; width: calc(100% + 12px); margin: 6px 0 2px -6px; padding: 2px 6px; border: 0; border-radius: 8px; background: none; outline: none; font: 600 24px/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.pj-title:hover { background: var(--hover); }
.pj-title:focus { background: var(--hover); box-shadow: 0 0 0 2px var(--accent-soft); }
.pj-meta { font-size: 12.5px; color: var(--muted); }
.pj-instr { display: block; width: 100%; margin-top: 14px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); color: var(--ink2); font: 13.5px/1.5 var(--sans); resize: none; outline: none; transition: border-color .15s, box-shadow .15s; }
.pj-instr:hover { border-color: var(--line); }
.pj-instr:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--ink); }
.pj-instr::placeholder { color: var(--faint); }
body.proj .pj-body { padding: 8px 0 72px; }
.pj-sec { margin-top: 26px; }
.pj-sec > h3 { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--muted); display: flex; gap: 7px; align-items: baseline; }
.pj-sec > h3 .n { color: var(--faint); font-weight: 400; }
.pj-list { display: flex; flex-direction: column; gap: 1px; }
.pj-row { display: flex; align-items: center; gap: 12px; width: calc(100% + 16px); margin: 0 -8px; padding: 7px 8px; min-height: 46px; border-radius: 10px; text-align: left; color: var(--ink); min-width: 0; }
button.pj-row:hover, .pj-row.static:hover { background: var(--sunk); }
.pj-row.loading { opacity: .7; }
.pj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pj-t { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-t.mono { font: 500 12.5px var(--mono); }
.pj-s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 6px; align-items: baseline; }
.pj-s b { font-weight: 500; color: var(--ink2); }
.pj-sm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* обрезается название чата, а не «N версии» */
.pj-s .pj-lnk { flex: none; }
.pj-r { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.pj-v { flex: none; font: 500 15px var(--sans); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.pj-ring { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 2px var(--line); font: 500 12px/1 var(--sans); color: var(--muted); }
.pj-ring.live { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-ink); }
.pj-ring.wait { box-shadow: inset 0 0 0 2px var(--accent-line); }
.pj-ring.err { box-shadow: inset 0 0 0 2px var(--crit); }
.pj-st { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.pj-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.pj-st.ok::before { background: var(--good); }
.pj-st.err::before { background: var(--crit); }
.pj-st.live::before { background: var(--accent); animation: pulse 1.6s infinite; }
.pj-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--sunk); color: var(--muted); }
.pj-ic svg { width: 17px; height: 17px; }
.pj-ic.page { color: var(--accent); background: var(--accent-soft); }
.pj-ext { width: 28px; height: 28px; border-radius: 7px; background: var(--sunk); display: grid; place-items: center; flex: none; font: 600 9px var(--mono); text-transform: uppercase; color: var(--ink2); letter-spacing: .02em; overflow: hidden; }
.pj-acts { flex: none; display: flex; align-items: center; gap: 2px; }
.pj-acts a.tbtn { text-decoration: none; }
.pj-open { color: var(--accent-ink); }
.pj-open::after { content: " ↗"; }
.pj-x { opacity: 0; transition: opacity .15s; }
.pj-row:hover .pj-x, .pj-x:focus-visible { opacity: 1; }
.pj-x:hover { color: var(--crit) !important; }
.pj-lnk { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); font-size: 12px; }
.pj-lnk:hover { color: var(--ink); }
.pj-lnk i { font-style: normal; font-size: 9px; transition: transform .2s; }
.pj-lnk[aria-expanded="true"] i { transform: rotate(90deg); }
.pj-vers { display: flex; flex-direction: column; margin: 0 0 4px 32px; padding-left: 8px; border-left: 1px solid var(--line); }
.pj-ver { display: flex; gap: 10px; align-items: baseline; padding: 3px 8px; border-radius: 7px; font-size: 12.5px; color: var(--ink2); text-decoration: none; }
.pj-ver:hover { background: var(--sunk); color: var(--accent-ink); }
.pj-ver b { font-weight: 500; min-width: 22px; }
.pj-ver span { color: var(--muted); }
.pj-drop { border: 1px dashed var(--line); border-radius: 12px; padding: 4px 12px; transition: border-color .15s, background .15s; }
.pj-drop .pj-row { width: calc(100% + 8px); margin: 0 -4px; padding: 6px 4px; min-height: 42px; }
.pj-drop.over { border-color: var(--accent-line); background: var(--accent-soft); }
.pj-drop-h { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.pj-list + .pj-drop-h { border-top: 1px solid var(--line2); margin-top: 4px; }
.pj-pick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 8px; background: var(--sunk); color: var(--ink2); font-size: 12.5px; font-weight: 500; }
.pj-pick:hover { color: var(--ink); background: var(--line2); }
.pj-pick svg { width: 14px; height: 14px; }
.pj-notes { font-size: 13px; color: var(--ink2); background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 16px; max-height: 360px; overflow-y: auto; }
.pj-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line2); }
.pj-del { font-size: 12.5px; color: var(--muted); padding: 3px 8px; margin-left: -8px; border-radius: 7px; }
.pj-del:hover { color: var(--crit); background: var(--sunk); }