/* Тёмная тема, крупный кегль: интерфейс снимается на видео. */

/* Тёмная тема — основная: интерфейс снимается на видео и показывается с
   экрана. Светлая нужна для дневной работы и для проектора, где тёмный фон
   расплывается. Переключатель в шапке, выбор запоминается. */

:root, :root[data-theme="dark"] {
  --bg: #14161a; --panel: #1c1f26; --panel2: #232732; --rail: #1a1d24;
  --line: #2e3440; --fg: #e6e9ef; --fg2: #c9d0dc; --dim: #9aa3b2;
  --accent: #7aa2f7; --ok: #79c67a; --warn: #e0af68; --bad: #f07178; --rub: #b8860b;
  --shadow: none;
}

:root[data-theme="light"] {
  --bg: #f7f8fa; --panel: #ffffff; --panel2: #eef1f6; --rail: #f1f3f7;
  --line: #d7dce5; --fg: #1a1d23; --fg2: #3c4451; --dim: #6b7280;
  --accent: #2f5fd0; --ok: #2f7d32; --warn: #a15c00; --bad: #c0392b; --rub: #8a6100;
  --shadow: 0 1px 2px rgba(20, 25, 35, .05);
}
:root[data-theme="light"] .panel { box-shadow: var(--shadow); }
:root[data-theme="light"] .step .dot { color: #fff; }
:root[data-theme="light"] mark { background: #ffe08a; }
:root[data-theme="light"] .rl.l0.on { background: #fdf3e0; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.55 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
h1, h2 { margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.25rem; letter-spacing: -.01em; }
h2 { font-size: .95rem; }
h2.mt { margin-top: 1.4rem; }
a { color: var(--accent); }
mark { background: var(--warn); color: var(--bg); border-radius: 3px; padding: 0 2px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
.mono, .id, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* шапка */
.top { display: flex; align-items: center; gap: 1.2rem; padding: .85rem 1.4rem;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: .65rem; }
.instance { color: var(--dim); font-size: .8rem; }
.engine { margin-left: auto; text-align: right; font-size: .78rem; color: var(--dim); }
.engine .sub { opacity: .8; font-size: .72rem; }
.usage { display: flex; gap: .9rem; background: var(--panel2); padding: .4rem .8rem;
  border-radius: 8px; font-size: .78rem; color: var(--dim);
  font-family: "IBM Plex Mono", monospace; }
.usage b { color: var(--fg); }
.usage .rub b { color: var(--rub); }

/* уровни */
.levels { display: flex; padding: .45rem 1.4rem; background: var(--panel2);
  border-bottom: 1px solid var(--line); font-size: .74rem; }
.levels span { padding: .15rem .75rem; color: var(--dim); border-right: 1px solid var(--line); }
.levels span:last-child { border-right: 0; }
.levels span.on { color: var(--bg); background: var(--accent); border-radius: 4px; font-weight: 600; }

/* табы */
.tabs { display: flex; align-items: center; gap: .5rem; padding: .55rem 1.4rem;
  border-bottom: 1px solid var(--line); }
.tab { background: none; border: 1px solid var(--line); color: var(--dim); padding: .4rem .9rem;
  border-radius: 8px; cursor: pointer; font: inherit; font-size: .85rem; }
.tab.active { color: var(--fg); border-color: var(--accent); background: var(--panel2); }
.switch { margin-left: auto; display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--dim); }
.switch .note { max-width: 26rem; font-size: .72rem; }
select, input[type=text] { background: var(--panel2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; font: inherit; }

main { padding: 1rem 1.4rem 2rem; }
.screen { display: none; } .screen.active { display: block; }
.cols { display: grid; gap: 1rem; align-items: start; }
.cols.chat { grid-template-columns: minmax(0, 1fr) 19rem; }
.cols.markup { grid-template-columns: 21rem minmax(0, 1fr); }
.cols.base { grid-template-columns: 14rem minmax(0, 1fr) 24rem; }
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem 1.05rem; }
.hint { color: var(--dim); font-size: .76rem; margin: .5rem 0 0; }
.placeholder { color: var(--dim); font-size: .85rem; }
.warn { color: var(--warn); font-size: .82rem; }
.badge { font-size: .7rem; color: var(--bg); background: var(--accent);
  padding: .05rem .5rem; border-radius: 999px; }
button.primary { background: var(--accent); color: #0f1116; border: 0; border-radius: 8px;
  padding: .5rem 1rem; font: inherit; font-weight: 600; cursor: pointer; width: 100%; margin-top: .7rem; }
button.primary:disabled { opacity: .5; cursor: default; }

/* чат */
#ask-form { display: flex; gap: .5rem; }
#ask-form input { flex: 1; }
#ask-form button { width: auto; margin: 0; }
.presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.presets button { background: var(--panel2); border: 1px solid var(--line); color: var(--fg2);
  border-radius: 999px; padding: .25rem .7rem; font: inherit; font-size: .76rem; cursor: pointer; }
.presets button:hover { border-color: var(--accent); }

.feed { display: flex; flex-direction: column; }
.qrow { display: flex; gap: .7rem; margin: .3rem 0 1.2rem; }
.qbubble { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem 1rem; font-size: 1rem; }
.step { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .8rem; }
.step .gutter { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.step .dot { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--accent);
  color: var(--bg); display: grid; place-items: center; font-weight: 600; font-size: .78rem;
  font-family: "IBM Plex Mono", monospace; flex-shrink: 0; }
.step.l0 .dot { background: var(--warn); }
.step.ans .dot { background: var(--ok); }
.step .line { width: 1px; flex-grow: 1; background: var(--line); }
.step .body { padding-bottom: 1.3rem; min-width: 0; }
.step .head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.step .t { font-weight: 600; }
.step .d { font-size: .78rem; color: var(--dim); }
.step .n { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: .76rem;
  color: var(--dim); }
.bar { height: 4px; background: var(--panel2); border-radius: 2px; margin: .5rem 0 .6rem;
  overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.step.l0 .bar > i { background: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font-size: .74rem; padding: .15rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--fg2); font-family: "IBM Plex Mono", monospace; }
.chip.on { border-color: var(--accent); background: var(--panel2); }
.chip.off { opacity: .45; }
.chip.click { cursor: pointer; }
.docline { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 8px; padding: .45rem .7rem; font-size: .82rem; }
.docline .m { color: var(--dim); font-size: .72rem; font-family: "IBM Plex Mono", monospace; }
.quote { border-left: 2px solid var(--warn); background: var(--panel); border-radius: 0 8px 8px 0;
  padding: .5rem .8rem; font-size: .84rem; font-style: italic; }
.quote .m { color: var(--dim); font-size: .72rem; font-style: normal;
  font-family: "IBM Plex Mono", monospace; margin-top: .25rem; }
.answer { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem 1.1rem; font-size: 1rem; line-height: 1.65; }
.answer table { border-collapse: collapse; width: 100%; font-size: .84rem; margin: .5rem 0; }
.answer th, .answer td { border: 1px solid var(--line); padding: .3rem .5rem; text-align: left; }
.answer p { margin: .4rem 0; }
.ref { display: inline-block; min-width: 1.2rem; text-align: center; background: var(--panel2);
  border: 1px solid var(--accent); color: var(--accent); border-radius: 5px; font-size: .68rem;
  padding: 0 .3rem; margin: 0 .1rem; cursor: pointer; vertical-align: super;
  font-family: "IBM Plex Mono", monospace; }
.ref:hover { background: var(--accent); color: var(--bg); }

/* рейка */
.rail-levels { display: flex; flex-direction: column; gap: .2rem; }
.rl { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px;
  background: var(--panel2); font-size: .82rem; }
.rl .k { font-family: "IBM Plex Mono", monospace; font-size: .76rem; color: var(--accent); width: 1.4rem; }
.rl .v { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: .74rem; color: var(--dim); }
.rl.on { border: 1px solid var(--accent); }
.rl.l0.on { border-color: var(--warn); background: #2b2620; }
.rl.l0.on .k, .rl.l0.on .v { color: var(--warn); }
.rule { font-size: .82rem; color: var(--fg2); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 9px; padding: .6rem .75rem; margin: 0; }

/* разметка */
.box { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: .6rem .75rem; }
.box .t { font-weight: 500; font-size: .88rem; }
.box .d { color: var(--dim); font-size: .76rem; margin-top: .2rem; }
.approaches { display: flex; flex-direction: column; gap: .4rem; }
.appr { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  padding: .5rem .7rem; cursor: pointer; }
.appr.on { border-color: var(--accent); }
.appr .h { display: flex; align-items: baseline; gap: .5rem; }
.appr .k { font-family: "IBM Plex Mono", monospace; font-size: .76rem; color: var(--dim); }
.appr.on .k { color: var(--accent); }
.appr .t { font-size: .85rem; font-weight: 500; }
.appr .d { font-size: .75rem; color: var(--dim); margin-top: .15rem; }
.log { font: .76rem/1.6 "IBM Plex Mono", ui-monospace, monospace; color: var(--dim);
  max-height: 11rem; overflow-y: auto; margin: 0; padding: .55rem .7rem; white-space: pre-wrap;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .5rem;
  max-height: 27rem; overflow-y: auto; }
.card { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 9px; padding: .5rem .7rem; }
.card.bad { border-left-color: var(--bad); opacity: .65; }
.card .h { display: flex; align-items: baseline; gap: .5rem; font-size: .72rem;
  font-family: "IBM Plex Mono", monospace; }
.card .ty { color: var(--accent); font-weight: 500; }
.card.bad .ty { color: var(--bad); }
.card .ok { color: var(--ok); } .card.bad .ok { color: var(--bad); }
.card .id { margin-left: auto; color: var(--dim); }
.card .l { font-weight: 500; font-size: .86rem; margin-top: .25rem; }
.card .v { font-size: .82rem; color: var(--fg2); }
.card .s { font-size: .76rem; color: var(--dim); border-left: 2px solid var(--line);
  padding-left: .55rem; margin-top: .35rem; font-style: italic; }

table.cmp { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.cmp th, table.cmp td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
table.cmp th { color: var(--dim); font-weight: 500; }
table.cmp td.num { font-family: "IBM Plex Mono", monospace; }

/* база */
.stats { display: flex; gap: 2.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stats .n { font-size: 1.5rem; font-weight: 600; font-family: "IBM Plex Mono", monospace; }
.stats .k { font-size: .75rem; color: var(--dim); }
.filters { display: flex; flex-direction: column; gap: .15rem; }
.filters .f { display: flex; padding: .3rem .55rem; border-radius: 7px; font-size: .82rem;
  color: var(--fg2); cursor: pointer; }
.filters .f.on { background: var(--panel2); border: 1px solid var(--accent); color: var(--fg); }
.filters .f .c { margin-left: auto; font-family: "IBM Plex Mono", monospace; color: var(--dim); }
.table { max-height: 32rem; overflow-y: auto; }
.trow { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 9rem 6rem; align-items: center;
  padding: .5rem .5rem; border-bottom: 1px solid var(--panel2); font-size: .84rem; cursor: pointer; }
.trow.head { color: var(--dim); font-size: .76rem; border-bottom: 1px solid var(--line); cursor: default; }
.trow:hover:not(.head) { background: var(--panel2); }
.trow.on { background: var(--panel2); border-left: 2px solid var(--accent); }
.trow .ty { font-family: "IBM Plex Mono", monospace; font-size: .76rem; color: var(--accent); }
.trow.bad { opacity: .55; } .trow.bad .ty { color: var(--bad); }
.trow .d { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--dim); }
.lvl { font-size: .7rem; color: var(--accent); letter-spacing: .05em;
  font-family: "IBM Plex Mono", monospace; margin-top: 1rem; }
.lvl.w { color: var(--warn); }
.doctext { max-height: 15rem; overflow-y: auto; font-size: .78rem; line-height: 1.65;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  padding: .6rem .75rem; white-space: pre-wrap; margin-top: .4rem; }

/* подвал */
.limits { border-top: 1px solid var(--line); background: var(--panel); padding: .8rem 1.4rem 1.3rem;
  font-size: .8rem; }
.limits summary { cursor: pointer; color: var(--warn); }
.limits ul { margin: .4rem 0 0 1.2rem; color: var(--dim); }
.license { color: var(--dim); font-size: .74rem; margin: .7rem 0 0; }

@media (max-width: 1200px) {
  .cols.chat, .cols.markup, .cols.base { grid-template-columns: 1fr; }
}


/* Появление шага: короткое проявление вместо рывка раскладки. */
@keyframes step-in { from { opacity: 0; } to { opacity: 1; } }
.step, .qrow { animation: step-in .18s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .step, .qrow { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* Переключатель темы */
.theme { background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 8px; padding: .3rem .55rem; cursor: pointer; font: inherit; font-size: .78rem;
  display: flex; align-items: center; gap: .3rem; }
.theme:hover { border-color: var(--accent); color: var(--fg); }
.theme svg { display: block; }

/* Идёт запрос */
.busy { opacity: .55; pointer-events: none; }
#ask-form button.stop { background: var(--warn); }