:root {
  --bg: #f6f7f5; --panel: #ffffff; --fg: #1d2320; --mute: #5d6862; --line: #dfe3df;
  --accent: #2f6b4f; --accent-fg: #ffffff; --me: #e3efe7; --bot: #ffffff; --err: #b3261e;
  --code: #eef1ee; --shadow: 0 1px 2px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141816; --panel: #1c211e; --fg: #e4e9e5; --mute: #9aa59f; --line: #2d3430;
    --accent: #5fae86; --accent-fg: #0f1311; --me: #23382c; --bot: #1c211e; --err: #f2867c;
    --code: #252b27; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #141816; --panel: #1c211e; --fg: #e4e9e5; --mute: #9aa59f; --line: #2d3430;
  --accent: #5fae86; --accent-fg: #0f1311; --me: #23382c; --bot: #1c211e; --err: #f2867c;
  --code: #252b27; --shadow: none;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 10px 16px;
  background: var(--accent); color: var(--accent-fg); font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
button.vtorich { background: transparent; color: var(--mute); border: 1px solid var(--line); font-weight: 500; padding: 6px 12px; }
button.vtorich:hover { color: var(--fg); border-color: var(--mute); }
input, textarea { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.logo img { width: 26px; height: 26px; }
.tiho { color: var(--mute); font-size: 13px; }
.oshibka { color: var(--err); min-height: 1.5em; margin: 0; font-size: 14px; }

.karta { max-width: 380px; margin: 12vh auto 0; padding: 28px 24px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.karta .logo { font-size: 18px; margin-bottom: 18px; }
.karta form { display: grid; gap: 14px; }
.karta label { display: grid; gap: 6px; font-size: 14px; color: var(--mute); }
@media (max-width: 440px) { .karta { margin: 24px 16px 0; } }

#chat { display: flex; flex-direction: column; height: 100dvh; }
header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel);
  border-bottom: 1px solid var(--line); }
header .kto { margin-left: auto; color: var(--mute); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { header .kto { display: none; } header .logo span { display: none; } #novyi { margin-left: auto; } }

#lenta { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#lenta > * { max-width: 820px; width: 100%; margin-left: auto; margin-right: auto; }
.soob { display: flex; }
.soob .puzyr { padding: 10px 14px; border-radius: 14px; max-width: 100%; overflow-wrap: anywhere; box-shadow: var(--shadow); }
.soob.ya { justify-content: flex-end; }
.soob.ya .puzyr { background: var(--me); white-space: pre-wrap; max-width: 85%; border-bottom-right-radius: 4px; }
.soob.bot .puzyr { background: var(--bot); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.soob.bot.oshibka-soob .puzyr { border-color: var(--err); }
.puzyr .vremya { display: block; font-size: 11px; color: var(--mute); margin-top: 4px; text-align: right; }
.puzyr p { margin: 0 0 .6em; } .puzyr p:last-child { margin-bottom: 0; }
.puzyr ul, .puzyr ol { margin: .2em 0 .6em; padding-left: 1.4em; }
.puzyr h1, .puzyr h2, .puzyr h3, .puzyr h4 { font-size: 1.02em; margin: .8em 0 .3em; }
.puzyr code { background: var(--code); border-radius: 4px; padding: 1px 4px; font-size: .92em; }
.puzyr pre { background: var(--code); border-radius: 8px; padding: 10px; overflow-x: auto; }
.puzyr pre code { background: none; padding: 0; }
.puzyr .tabl { overflow-x: auto; margin: .4em 0 .6em; }
.puzyr table { border-collapse: collapse; font-size: 14px; }
.puzyr th, .puzyr td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.puzyr th { background: var(--code); }
.puzyr hr { border: 0; border-top: 1px solid var(--line); }
.puzyr a { color: var(--accent); }
.razdel { text-align: center; color: var(--mute); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.razdel::before, .razdel::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.fail { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--panel);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; }
.fail .ik { font-size: 22px; }
.fail .opis { flex: 1; min-width: 0; }
.fail .imya { font-weight: 600; overflow-wrap: anywhere; }
.fail .podp { color: var(--mute); font-size: 13px; white-space: pre-wrap; }
.fail a.skachat { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pusto { color: var(--mute); text-align: center; margin-top: 10vh !important; }
.pusto b { color: var(--fg); }
.pusto .primery { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.pusto .primery button { background: var(--panel); color: var(--fg); border: 1px solid var(--line); font-weight: 500; padding: 6px 12px; }

footer { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
footer > * { max-width: 820px; margin: 0 auto; }
#forma { display: flex; gap: 8px; align-items: flex-end; }
#vopros { resize: none; max-height: 40vh; min-height: 44px; }
#otpravit { width: 44px; height: 44px; padding: 0; font-size: 18px; flex: none; }
#status { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 13px; margin-bottom: 8px; }
.tochki { display: inline-flex; gap: 3px; }
.tochki i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: t 1.2s infinite ease-in-out; }
.tochki i:nth-child(2) { animation-delay: .2s; } .tochki i:nth-child(3) { animation-delay: .4s; }
@keyframes t { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tochki i { animation: none; opacity: .7; } }