/* Copyright 2026 Peter Avakian.
 * Aragats4K console. Same visual family as Agentic Commit: shared --dj-* tokens from theme.css
 * (djanai-theme, vendored unchanged), dense spacing, solid surfaces, frosted header only.
 * No hard-coded colors: tints are color-mix() of tokens.
 */
:root{
  --tint-accent:color-mix(in srgb,var(--dj-accent) 15%,transparent);
  --tint-accent-2:color-mix(in srgb,var(--dj-accent) 25%,transparent);
  --glow-accent:color-mix(in srgb,var(--dj-accent) 45%,transparent);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;color:var(--dj-text);font:14px/1.45 var(--dj-font-sans);
  background:linear-gradient(135deg,var(--dj-bg-1) 0%,var(--dj-bg-2) 50%,var(--dj-bg-1) 100%) fixed}

header{display:flex;align-items:center;gap:10px;padding:12px 24px;position:sticky;top:0;z-index:5;flex-wrap:wrap;
  background:var(--dj-surface-chrome);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--dj-line-active)}
.brand{display:flex;align-items:center;gap:8px}
.brand img{display:block;height:36px;width:auto}
.badge{font-size:var(--dj-fs-12);padding:3px 10px;border-radius:var(--dj-r-pill);background:var(--dj-accent-soft);
  border:1px solid var(--dj-line-active);color:var(--dj-accent);white-space:nowrap;font-family:var(--dj-font-mono)}
.spacer{flex:1}
.ctl{display:flex;align-items:center;gap:8px;font-size:var(--dj-fs-13);color:var(--dj-text-muted)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--dj-text-faint)}
.dot.ok{background:var(--dj-accent);box-shadow:0 0 8px var(--glow-accent)} .dot.bad{background:var(--dj-danger)}
.tabs{display:flex;gap:4px;margin-left:12px}
.tabs button{background:transparent;border-color:transparent;color:var(--dj-text-muted)}
.tabs button.on{background:var(--dj-accent-soft);border-color:var(--dj-line-active);color:var(--dj-accent)}

main{padding:16px;max-width:1500px;margin:0 auto}
button{font:inherit;border:1px solid var(--dj-line-active);background:var(--tint-accent);color:var(--dj-accent);
  border-radius:var(--dj-r-control);padding:7px 14px;cursor:pointer;transition:background .15s,transform .15s}
button:hover{background:var(--tint-accent-2)}
button.primary{background:linear-gradient(135deg,var(--dj-accent),var(--dj-accent-strong));border:none;color:var(--dj-on-accent);font-weight:600}
button.primary:hover{transform:translateY(-1px)}
button.danger{background:var(--dj-danger-soft);border-color:var(--dj-danger);color:var(--dj-danger)}
button.small{padding:3px 10px;font-size:var(--dj-fs-12)}
button.wide{width:100%;padding:10px}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
select,textarea,input[type=text],input[type=password],input[type=number]{font:inherit;color:var(--dj-text);
  background:var(--dj-surface-input);border:1px solid var(--dj-line-active);border-radius:var(--dj-r-control);padding:7px 10px;outline:none}
select{background:var(--dj-surface)}
select:focus,textarea:focus,input:focus{border-color:var(--dj-accent);box-shadow:var(--dj-focus-ring)}
textarea{width:100%;resize:vertical}
input[type=number]{width:96px}
::placeholder{color:var(--dj-text-dim)}
label{display:flex;align-items:center;gap:6px;font-size:var(--dj-fs-13);color:var(--dj-text-muted)}

.card{background:var(--dj-surface);border:1px solid var(--dj-line);border-radius:var(--dj-r-container);
  box-shadow:var(--dj-shadow-card);padding:16px;margin-bottom:16px;min-width:0}
.card h3{margin:0 0 12px;font-size:var(--dj-fs-12);text-transform:uppercase;letter-spacing:1px;color:var(--dj-accent);
  display:flex;align-items:center;gap:8px;font-weight:700}
.card h3 .count{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;color:var(--dj-text-muted);font-family:var(--dj-font-mono)}
.card.narrow{max-width:440px;margin:60px auto}
.card.empty{text-align:center;padding:48px 20px;color:var(--dj-text-muted)}
.grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cards .card{margin:0} .span2{grid-column:1 / -1}
.grid>*,.cards>*,.formrow>*{min-width:0}
select{max-width:100%;text-overflow:ellipsis}
.formrow label{flex-wrap:wrap;max-width:100%}
button.chip{white-space:normal;text-align:left}
.nowrap{white-space:nowrap}
@media (max-width:980px){.grid,.cards{grid-template-columns:1fr} header{padding:10px 16px} main{padding:10px}}

.row,.formrow,.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.formrow{margin-top:10px} .toolbar{margin-bottom:12px}
.formrow input[type=text]{flex:1 1 160px;min-width:0}
.muted{color:var(--dj-text-muted)} .faint{color:var(--dj-text-dim)} .small{font-size:var(--dj-fs-12)}
.mono{font-family:var(--dj-font-mono);font-size:var(--dj-fs-12)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chip{font-size:var(--dj-fs-12);padding:3px 12px;border-radius:var(--dj-r-pill);border:1px solid var(--dj-line-soft);
  background:var(--dj-surface-tint);color:var(--dj-text-dim)}
button.chip{cursor:pointer} button.chip:hover{border-color:var(--dj-line-active);color:var(--dj-accent);background:var(--dj-accent-soft)}
.chip b{color:var(--dj-text);font-weight:600}
.chip.warn{color:var(--dj-warn);border-color:var(--dj-warn);background:var(--dj-warn-soft)}

.pill{display:inline-flex;align-items:center;font-size:var(--dj-fs-11);font-weight:600;letter-spacing:.3px;padding:2px 10px;
  border-radius:var(--dj-r-pill);white-space:nowrap;border:1px solid}
.s-ok{background:var(--dj-ok-soft);color:var(--dj-ok);border-color:var(--dj-ok)}
.s-bad{background:var(--dj-danger-soft);color:var(--dj-danger);border-color:var(--dj-danger)}
.s-wait{background:var(--dj-warn-soft);color:var(--dj-warn);border-color:var(--dj-warn)}
.s-deg{background:var(--dj-violet-soft);color:var(--dj-violet);border-color:var(--dj-violet)}
.s-neutral{background:var(--dj-surface-tint);color:var(--dj-text-muted);border-color:var(--dj-line)}

.banner{border-radius:var(--dj-r-card);padding:10px 12px;margin:10px 0;font-size:var(--dj-fs-13);border:1px solid var(--dj-line);overflow-wrap:anywhere}
.banner.bad{background:var(--dj-danger-soft);border-color:var(--dj-danger);color:var(--dj-text)}
.banner.ok{background:var(--dj-ok-soft);border-color:var(--dj-ok)}
.banner.info{background:var(--dj-info-soft);border-color:var(--dj-info)}
.banner code{font-family:var(--dj-font-mono);color:var(--dj-code);user-select:all}

/* Request path stepper, the Agentic Commit pipeline idiom */
.steps{display:flex;margin:6px 0 10px;overflow-x:auto;padding:4px 0}
.step{flex:1;min-width:70px;text-align:center;position:relative;font-size:var(--dj-fs-11);color:var(--dj-violet);font-family:var(--dj-font-mono)}
.step .b{width:26px;height:26px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--dj-violet);background:var(--dj-surface-sunken);font-weight:700;position:relative;z-index:1}
.step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;border-top:2px dashed var(--dj-violet-soft)}
.step:first-child::before{display:none}
.step.done{color:var(--dj-accent)} .step.done .b{background:var(--dj-accent);border-color:var(--dj-accent);color:var(--dj-on-accent)}
.step.done::before{border-top:2px solid var(--dj-accent)}
.step.active{color:var(--dj-accent-2)} .step.active .b{border-color:var(--dj-accent-2);color:var(--dj-accent-2);animation:pulse 1.4s infinite}
.step.skipped{color:var(--dj-text-dim)} .step.skipped .b{border-style:dashed;border-color:var(--dj-text-dim);color:var(--dj-text-dim)}
.step.failed{color:var(--dj-danger)} .step.failed .b{background:var(--dj-danger);border-color:var(--dj-danger);color:var(--dj-on-accent)}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow-accent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.step.active .b{animation:none}}
dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;font-size:var(--dj-fs-13)}
dt{color:var(--dj-text-muted)} dd{margin:0;overflow-wrap:anywhere;font-family:var(--dj-font-mono);font-size:var(--dj-fs-12);color:var(--dj-code)}

.answer{overflow-wrap:anywhere;line-height:1.55}
.answer.plain{white-space:pre-wrap}
/* Rendered Markdown (model output, sanitized) */
.md>:first-child{margin-top:0} .md>:last-child{margin-bottom:0}
.md p,.md ul,.md ol,.md pre,.md table,.md blockquote{margin:0 0 10px}
.md h1,.md h2,.md h3,.md h4{margin:16px 0 8px;line-height:1.3;color:var(--dj-text)}
.md h1{font-size:var(--dj-fs-18)} .md h2{font-size:var(--dj-fs-16)} .md h3,.md h4{font-size:var(--dj-fs-14)}
.md ul,.md ol{padding-left:22px} .md li{margin:2px 0}
.md strong{color:var(--dj-text);font-weight:700}
.md a{color:var(--dj-accent)}
.md code{font-family:var(--dj-font-mono);font-size:var(--dj-fs-12);color:var(--dj-code);background:var(--dj-surface-sunken);
  padding:1px 5px;border-radius:var(--dj-r-chip)}
.md pre{background:var(--dj-surface-sunken);border:1px solid var(--dj-line);border-radius:var(--dj-r-card);padding:10px 12px;overflow-x:auto}
.md pre code{background:none;padding:0;font-size:var(--dj-fs-12);line-height:1.5}
.md blockquote{border-left:3px solid var(--dj-line-active);padding:2px 0 2px 12px;color:var(--dj-text-muted)}
.md hr{border:0;border-top:1px solid var(--dj-line);margin:14px 0}
.md table{display:block;overflow-x:auto;width:max-content;max-width:100%}
.md th,.md td{border:1px solid var(--dj-line);vertical-align:top}
.md tr:hover td{background:transparent}
.thinking{margin:0 0 12px;border-left:3px solid var(--dj-violet);padding:2px 0 2px 12px}
.thinking summary{cursor:pointer;color:var(--dj-violet);font-size:var(--dj-fs-13);margin-bottom:6px}
.thinking pre{margin:0;max-height:240px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;
  font:var(--dj-fs-12)/1.5 var(--dj-font-mono);color:var(--dj-text-dim)}
details summary{cursor:pointer;color:var(--dj-text-muted);font-size:var(--dj-fs-13)}
.keylogin,.addform{margin-top:14px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--dj-surface);border:1px solid var(--dj-line);border-radius:var(--dj-r-card);padding:12px 14px}
.kpi .v{font-size:var(--dj-fs-22);font-weight:700;font-family:var(--dj-font-mono)}
.kpi .l{font-size:var(--dj-fs-12);color:var(--dj-text-muted);margin-top:2px}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--dj-fs-13)}
th{text-align:left;font-weight:600;color:var(--dj-info);font-size:var(--dj-fs-12);background:var(--dj-surface-tint);padding:6px 8px;
  border-bottom:1px solid var(--dj-line);white-space:nowrap}
td{border-bottom:1px solid var(--dj-line-soft);padding:6px 8px;vertical-align:middle}
td.num,th.num{text-align:right;font-family:var(--dj-font-mono);font-size:var(--dj-fs-12)}
tr:hover td{background:var(--dj-surface-tint)}
.bar{height:6px;border-radius:var(--dj-r-pill);background:var(--dj-surface-raised);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--dj-accent)}
.bar.warn i{background:var(--dj-warn)} .bar.bad i{background:var(--dj-danger)}
.tiers{display:flex;gap:8px;flex-wrap:wrap}
.tiers label{gap:4px}

button.badge{cursor:pointer;padding:3px 10px} button.badge:hover{background:var(--tint-accent-2)}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;
  background:color-mix(in srgb,var(--dj-bg-1) 70%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal{position:relative;width:100%;max-width:340px;text-align:center;background:var(--dj-surface);border:1px solid var(--dj-line-active);
  border-radius:var(--dj-r-container);box-shadow:var(--dj-shadow-card);padding:28px 20px 18px}
.modal-close{position:absolute;top:10px;right:10px;padding:2px 9px;font-size:var(--dj-fs-13)}
.about-mark{display:block;margin:0 auto}
.about-name{font-size:var(--dj-fs-16);font-weight:700;letter-spacing:1px;margin-top:6px}
.about-version{font-size:var(--dj-fs-13);color:var(--dj-accent);font-weight:600;margin-top:2px}
.about-build{font-size:var(--dj-fs-11);color:var(--dj-text-muted);font-family:var(--dj-font-mono);margin-top:2px}
.about-parts{margin:14px 0 0;text-align:left;font-size:var(--dj-fs-12);border-top:1px solid var(--dj-line);padding-top:12px}
.about-parts dd{font-size:var(--dj-fs-11)}
.about-foot{font-size:var(--dj-fs-13);color:var(--dj-text-muted);line-height:1.7;border-top:1px solid var(--dj-line);margin-top:12px;padding-top:12px}
.about-foot a{color:var(--dj-accent);text-decoration:none}
/* Grounded answers (P2) */
label.check{cursor:pointer} label.check input{accent-color:var(--dj-accent)}
a.cite{display:inline-block;font-family:var(--dj-font-mono);font-size:var(--dj-fs-11);font-weight:700;line-height:1.4;
  padding:0 5px;margin:0 1px;border-radius:var(--dj-r-chip);background:var(--dj-accent-soft);color:var(--dj-accent);
  text-decoration:none;vertical-align:1px}
a.cite:hover{background:var(--tint-accent-2)} a.cite.bad{background:var(--dj-danger-soft);color:var(--dj-danger)}
.src{border:1px solid var(--dj-line-soft);border-radius:var(--dj-r-card);padding:8px 10px;margin-bottom:8px;scroll-margin-top:80px}
.src.cited{border-color:var(--dj-line-active)} .src.flash{box-shadow:0 0 0 2px var(--dj-accent)}
.src summary{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;color:var(--dj-text)}
.src .n{font-family:var(--dj-font-mono);font-weight:700;color:var(--dj-accent)}
.src .md{font-size:var(--dj-fs-13);color:var(--dj-text-muted);margin-top:6px}
.chip.ok{color:var(--dj-ok);border-color:var(--dj-ok);background:var(--dj-ok-soft)}
.chip.bad{color:var(--dj-danger);border-color:var(--dj-danger);background:var(--dj-danger-soft)}

/* Knowledge */
.hit{background:var(--dj-surface);border:1px solid var(--dj-line);border-radius:var(--dj-r-container);padding:14px 16px;margin-bottom:12px}
.hit-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.hit-rank{font-family:var(--dj-font-mono);font-size:var(--dj-fs-12);color:var(--dj-on-accent);background:var(--dj-accent);
  border-radius:var(--dj-r-pill);padding:1px 8px;font-weight:700}
.hit-title{font-weight:600} .hit-section{color:var(--dj-text-muted)}
.hit-meta{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.hit .md{font-size:var(--dj-fs-13);color:var(--dj-text-muted)}
.toast{position:fixed;bottom:20px;right:20px;max-width:420px;z-index:10;padding:10px 14px;border-radius:var(--dj-r-card);
  background:var(--dj-surface);border:1px solid var(--dj-line-active);box-shadow:var(--dj-shadow-card);font-size:var(--dj-fs-13)}