/* Dony2B demo. Дизайн-исходник: design/dony/b2b-demo.html (ADR-0050). */
:root{
  --ink:#121110; --graphite:#1b1a18; --bone:#e9e5dc; --mist:#9c978d; --ash:#9c978d;
  --accent:#c9a15a; --hairline:rgba(233,229,220,.14); --hairline-strong:rgba(233,229,220,.32);
  --bg:var(--ink); --surface:var(--graphite); --text:var(--bone); --muted:var(--mist);
  --display:"Dony Display",Georgia,"Times New Roman",serif;
  --ui:"Dony Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lamp:rgba(233,229,220,.06); --ok:#8fae8b;
}
@media (prefers-color-scheme: light) {
  :root {
    --ink:#f3eee5; --graphite:#ffffff; --bone:#1f1b16; --mist:#6f665a; --ash:#6f665a;
    --accent:#8b631c; --hairline:rgba(31,27,22,.14); --hairline-strong:rgba(31,27,22,.32);
    --lamp:rgba(31,27,22,.05); --ok:#3d6b3a;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:16px;line-height:1.55}
a{color:inherit}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:20px}
.brand .b2b{color:var(--accent);font-size:.72em;vertical-align:.28em;letter-spacing:.08em}
.back{font-size:14px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--accent)}
.banner{margin:20px 0;padding:12px 18px;border:1px solid var(--accent);border-radius:12px;font-size:13.5px;color:var(--text);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner .tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:3px 10px;white-space:nowrap}
.banner span{color:var(--muted)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.6vw,34px);margin:26px 0 8px}
.sub{color:var(--muted);font-size:15px;margin-bottom:22px}
.controls{display:flex;gap:12px;align-items:center;margin-bottom:26px;flex-wrap:wrap}
button{font-family:var(--ui);font-size:14px;padding:10px 20px;border-radius:999px;border:1px solid var(--hairline-strong);background:transparent;color:var(--text);cursor:pointer}
button.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
button.primary:hover{background:var(--accent);border-color:var(--accent);color:#121110}
button:disabled{opacity:.45;cursor:default}
.progress{font-size:13px;color:var(--muted)}
.thread{display:flex;flex-direction:column;gap:14px;padding-bottom:40px}
.msg{border:1px solid var(--hairline);border-radius:14px;padding:16px 18px;background:var(--surface);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.msg[hidden]{display:none}
.msg.show{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .msg{transition:none;transform:none} }
.msg .who{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:flex;justify-content:space-between;gap:10px}
.msg .who .role{color:var(--muted);letter-spacing:.04em;text-transform:none}
.msg.user{background:transparent;border-style:dashed}
.msg.user .who{color:var(--muted)}
.msg p{font-size:15px}
.msg ul{margin:8px 0 0 18px;font-size:14.5px;color:var(--muted)}
.msg li{margin:4px 0}
.msg .metric{font-family:var(--display);font-size:26px;color:var(--text)}
.msg .delta{color:var(--warn)}
.msg.summary{border-color:var(--hairline-strong)}
.msg .sources{margin-top:12px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--hairline);padding-top:10px}
.msg .conf{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--ok);border:1px solid var(--ok);border-radius:999px;padding:2px 12px}
.note{font-size:13px;color:var(--muted);border:1px dashed var(--hairline-strong);border-radius:12px;padding:14px 18px;margin:6px 0 30px}
footer{border-top:1px solid var(--hairline);padding:22px 0;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent)}

/* --- refinement: живость демо в рамках бренда --- */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body{background-image:radial-gradient(900px 420px at 80% -10%,var(--lamp,rgba(233,229,220,.06)),transparent 65%)}
html{scrollbar-width:thin;scrollbar-color:var(--hairline-strong) transparent}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.msg .who .role{display:inline-flex;align-items:center;gap:6px}
.typing{display:inline-flex;gap:3px;align-items:center}
.typing i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion: reduce){.typing i{animation:none;opacity:.6}}
button{transition:background .2s,color .2s,border-color .2s,transform .15s}
button:active{transform:scale(.97)}
.progress{font-variant-numeric:tabular-nums}

/* светлая тема: металлический градиент на белой карточке не читается —
   сплошное тёмное золото токена светлой темы (4.5:1) */
@media (prefers-color-scheme: light){
  .msg .metric{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--accent); }
}

/* селектор сценария — постоянный control region */
.scenario{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.scenario select{background:var(--surface);color:var(--text);border:1px solid var(--hairline-strong);border-radius:8px;padding:7px 10px;font-family:var(--ui);font-size:13px;cursor:pointer;max-width:200px}
.scenario select:hover{border-color:var(--accent)}
.controls{row-gap:12px}