/* Superset AI-агент — светлая деловая тема.
   Разделы: переменные, каркас, шапка, сайдбар, лента, markdown,
   журнал вызовов, композер, адаптив. */

/* ---------- переменные ---------- */
:root{
  --bg:#FFFFFF; --surface:#F7F8FA; --surface2:#EFF1F4; --border:#DDE1E6;
  --text:#1F2933; --muted:#6B7683;
  --accent:#2563EB; --accent-hover:#1D4ED8; --accent-soft:#EFF4FF;
  --ok:#15803D; --err:#B91C1C;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --radius:8px;
}

/* ---------- каркас ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
.layout{flex:1 1 auto; display:flex; min-height:0}
main{flex:1 1 auto; min-width:0; overflow-y:auto}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:var(--radius);
  font:600 14px/1 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  padding:0 18px; height:40px; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{background:#A9C2F7; cursor:default}
.btn-secondary{background:var(--bg); color:var(--text); border-color:var(--border)}
.btn-secondary:hover{background:var(--surface2)}
.btn-icon{
  width:36px; height:36px; padding:0; font-size:16px; line-height:1;
  background:transparent; color:var(--muted); border-color:transparent;
}
.btn-icon:hover{background:var(--surface2); color:var(--text)}
.btn:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px}

/* ---------- шапка ---------- */
header{
  flex:none; display:flex; align-items:center; gap:12px;
  height:52px; padding:0 16px;
  border-bottom:1px solid var(--border); background:var(--surface);
}
.wordmark{font-size:15px; font-weight:600; letter-spacing:.1px}
.wordmark b{font-weight:600; color:var(--accent)}
.instance{font-size:11.5px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border:1px solid #D7E3FC;
  border-radius:4px; padding:2px 7px}
.status{margin-left:auto; display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--muted)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--err); flex:none}
.dot.on{background:var(--ok)}

/* ---------- сайдбар ---------- */
#sidebar{
  flex:none; width:260px; border-right:1px solid var(--border);
  background:var(--surface); overflow-y:auto;
  padding:14px 12px; display:flex; flex-direction:column; gap:12px;
}
#sidebar.hidden{display:none}
#newChat{width:100%; justify-content:flex-start}
.chat-list{display:flex; flex-direction:column; gap:2px}
.chat-list:empty::after{
  content:'История пуста'; color:var(--muted); font-size:13px; padding:4px 8px}
.chat-item{
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  border:1px solid transparent; border-radius:6px; cursor:pointer;
  font-size:13.5px; color:var(--text);
}
.chat-item:hover{background:var(--bg); border-color:var(--border)}
.chat-item.active{background:var(--accent-soft); border-color:#C7D9FB}
.chat-item .t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-item .del{
  flex:none; border:0; background:none; color:var(--muted); cursor:pointer;
  font-size:17px; line-height:1; padding:0 2px; opacity:0}
.chat-item:hover .del, .chat-item.active .del{opacity:.6}
.chat-item .del:hover{opacity:1; color:var(--err)}

/* ---------- лента ---------- */
.feed{max-width:780px; margin:0 auto; padding:24px 16px 24px;
  display:flex; flex-direction:column; gap:16px}
.empty{color:var(--muted); text-align:center; margin-top:12vh}
.empty .glyph{display:block; font-size:16px; font-weight:600;
  color:var(--text); margin-bottom:10px}
.empty .hint{font-size:13.5px; max-width:460px; margin:10px auto 0}
.turn-user{
  align-self:flex-end; max-width:82%; background:var(--accent-soft);
  border:1px solid #D7E3FC; padding:9px 14px; border-radius:var(--radius);
  white-space:pre-wrap; overflow-wrap:break-word}
.turn-agent{align-self:stretch; max-width:100%}
.agent-text{padding:2px 2px 0; overflow-wrap:break-word}
.agent-text + .agent-text{margin-top:8px}

/* ---------- markdown ---------- */
.agent-text p{margin:0 0 8px} .agent-text p:last-child{margin-bottom:0}
.agent-text h1,.agent-text h2,.agent-text h3,.agent-text h4{
  margin:14px 0 6px; line-height:1.3; font-weight:600}
.agent-text h1{font-size:18px} .agent-text h2{font-size:16.5px}
.agent-text h3{font-size:15.5px} .agent-text h4{font-size:15px}
.agent-text ul,.agent-text ol{margin:4px 0 8px; padding-left:22px}
.agent-text li{margin:2px 0}
.agent-text code{font-family:var(--mono); font-size:13px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:3px; padding:1px 4px}
.agent-text pre{background:var(--surface); border:1px solid var(--border);
  border-radius:6px; padding:10px 12px; overflow-x:auto; margin:8px 0}
.agent-text pre code{background:none; border:0; padding:0}
.agent-text table{border-collapse:collapse; margin:8px 0; font-size:13.5px;
  display:block; overflow-x:auto; max-width:100%}
.agent-text th,.agent-text td{border:1px solid var(--border);
  padding:5px 10px; text-align:left; vertical-align:top}
.agent-text th{background:var(--surface2)}
.agent-text a{color:var(--accent)}
.agent-text hr{border:0; border-top:1px solid var(--border); margin:12px 0}

/* ---------- журнал вызовов ---------- */
.steps{margin:10px 0 2px; border:1px solid var(--border);
  border-radius:6px; background:var(--surface);
  font-family:var(--mono); font-size:12.5px; overflow:hidden}
.steps-head{display:flex; align-items:center; gap:8px; padding:7px 12px;
  cursor:pointer; user-select:none; color:var(--muted);
  font:600 12px/1.4 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.steps-head:hover{background:var(--surface2)}
.steps-head .chev{display:inline-block; width:10px; transition:transform .12s;
  transform:rotate(-90deg)}
.steps.open .steps-head .chev{transform:none}
.steps-title{color:var(--text)}
.steps-count{margin-left:auto}
.steps-body{display:none; border-top:1px solid var(--border)}
.steps.open .steps-body{display:block}
.step{padding:7px 12px; display:flex; gap:10px; align-items:baseline;
  cursor:pointer}
.step:hover{background:var(--surface2)}
.step + .step{border-top:1px solid var(--border)}
.step .glyph{width:14px; flex:none; color:var(--muted)}
.step.run .glyph{color:var(--accent)}
.step.ok .glyph{color:var(--ok)}
.step.fail .glyph{color:var(--err)}
.step .name{color:var(--text)}
.step .args{color:var(--muted); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1}
.step .detail{display:none; flex-basis:100%; margin-top:6px; color:var(--muted);
  white-space:pre-wrap; word-break:break-word; max-height:200px; overflow-y:auto}
.step.open{flex-wrap:wrap} .step.open .detail{display:block}
.error-line{color:var(--err); font-size:13.5px; padding:6px 2px}

/* ---------- план работы ---------- */
.plan{border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:6px; background:var(--surface); padding:10px 14px; margin:2px 0}
.plan-title{font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.4px; color:var(--muted); margin-bottom:6px}
.plan-body{font-size:14px}
.plan-body p:last-child{margin-bottom:0}

/* ---------- индикатор ожидания ---------- */
.thinking{display:flex; align-items:center; gap:8px; padding:6px 2px;
  color:var(--muted); font-size:13.5px}
.thinking .dots{display:inline-flex; gap:4px; align-items:center}
.thinking .dots i{
  width:5px; height:5px; border-radius:50%; background:var(--muted);
  animation:blink 1.2s infinite ease-in-out}
.thinking .dots i:nth-child(2){animation-delay:.18s}
.thinking .dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{
  0%,80%,100%{opacity:.25; transform:translateY(0)}
  40%{opacity:1; transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .thinking .dots i{animation:none; opacity:.6}
}

/* ---------- композер ---------- */
footer{flex:none; border-top:1px solid var(--border); background:var(--surface);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.composer{max-width:780px; margin:0 auto; display:flex; gap:10px;
  align-items:flex-end}
textarea{
  flex:1 1 auto; resize:none; min-height:40px; max-height:200px;
  overflow-y:auto; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:9px 12px; font:inherit; line-height:1.45;
}
textarea::placeholder{color:var(--muted)}
.composer .btn{flex:none}
.composer-hint{max-width:780px; margin:6px auto 0; font-size:11.5px;
  color:var(--muted)}

/* ---------- адаптив ---------- */
@media (max-width:760px){
  #sidebar{position:fixed; top:52px; left:0; z-index:20;
    height:calc(100% - 52px); width:78%; max-width:300px;
    box-shadow:0 6px 24px rgba(0,0,0,.12)}
  .feed{padding:16px 12px}
}