:root {
  --bg: #eef0f3; --surface: #ffffff; --text: #16191d; --muted: #5d6570; --line: #e1e4e8;
  --brand: #2e7d4f; --brand-text: #ffffff; --in: #ffffff; --out: #d9f3e1; --bot: #fff3cd; --note: #fff8e1;
  --warn: #8a5a00; --error: #b42318; --chip: #ffffff;
  --tg: #2aabee; --ig: #d6336c; --vk: #0077ff; --max: #5b3df5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181c; --surface: #1f2328; --text: #e8eaed; --muted: #a0a7b1; --line: #30363d;
    --brand: #3f9e66; --in: #262b31; --out: #1f4630; --bot: #4a3f1c; --note: #3b3420; --chip: #262b31;
    --warn: #f0c36d; --error: #ff8a80;
  }
}
:root[data-theme="dark"] {
  --bg: #15181c; --surface: #1f2328; --text: #e8eaed; --muted: #a0a7b1; --line: #30363d;
  --brand: #3f9e66; --in: #262b31; --out: #1f4630; --bot: #4a3f1c; --note: #3b3420; --chip: #262b31;
  --warn: #f0c36d; --error: #ff8a80;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
#app { max-width: 720px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
.screen { display: flex; flex-direction: column; min-height: 100vh; }
.screen[hidden] { display: none; }
.bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--brand); color: var(--brand-text); padding: 12px 16px; font-weight: 600; }
.link { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0 4px; }
#back { font-size: 22px; line-height: 1; }
.chips { display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-top: 4px; }
.chip { border: 1px solid var(--line); background: var(--chip); color: var(--text); border-radius: 16px; padding: 5px 12px;
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.chip.on { background: var(--brand); color: var(--brand-text); border-color: var(--brand); }
.chip b { font-weight: 700; margin-left: 2px; }
.items { list-style: none; margin: 0; padding: 0; background: var(--surface); }
.items li { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ic { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--muted); }
.ic.telegram { background: var(--tg); } .ic.instagram { background: var(--ig); } .ic.vk { background: var(--vk); }
.ic.max { background: var(--max); }
.t { flex: 1; min-width: 0; }
.t b { display: block; font-size: 14px; }
.t span { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time { font-size: 12px; color: var(--muted); align-self: center; white-space: nowrap; }
.time.waiting { background: #e03131; color: #fff; border-radius: 10px; padding: 1px 7px; font-weight: 700; }
.empty { text-align: center; color: var(--muted); padding: 32px 16px; }
.card { margin: 10px 16px 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface);
  font-size: 13px; }
.card b { font-size: 14px; } .card div { margin-top: 3px; } .card a { color: var(--brand); }
.card .muted { color: var(--muted); }
.card .found { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.btn.small { padding: 3px 10px; font-size: 13px; margin-top: 4px; }
.btns { display: flex; gap: 8px; padding: 10px 16px 0; }
.btn { flex: 1; border: 1px solid var(--brand); background: transparent; color: var(--brand); border-radius: 8px; padding: 8px 6px;
  font: inherit; font-size: 14px; cursor: pointer; }
.btn.pri { background: var(--brand); color: var(--brand-text); }
.btn.gray { border-color: var(--muted); color: var(--muted); }
.btn:disabled { opacity: .45; cursor: default; }
.state { margin: 8px 16px 0; font-size: 13px; color: var(--muted); }
.msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.m { max-width: 86%; padding: 8px 11px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.m.in { background: var(--in); align-self: flex-start; border-bottom-left-radius: 4px; }
.m.human { background: var(--out); align-self: flex-end; border-bottom-right-radius: 4px; }
.m.bot { background: var(--bot); align-self: flex-end; border-bottom-right-radius: 4px; }
.m.draft { background: var(--surface); align-self: flex-end; border: 1px dashed var(--brand); border-bottom-right-radius: 4px; }
.m.draft.failed { border-color: var(--error); color: var(--muted); }
.training { margin: 8px 16px 0; padding: 6px 10px; border-radius: 8px; background: var(--note); font-size: 13px; }
.m.note { background: var(--note); align-self: center; border: 1px dashed var(--muted); font-size: 13px; }
.m small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; white-space: normal; }
.m small.bad { color: var(--error); }
.note-form, .reply { display: flex; gap: 8px; padding: 8px 16px; align-items: flex-end; }
.reply { padding-bottom: 16px; }
textarea, input[type=password] { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
  font: inherit; background: var(--surface); color: var(--text); resize: vertical; }
.reply .btn, .note-form .btn { flex: none; }
.login { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; }
.login p { margin: 0; color: var(--muted); }
.error { color: var(--error); margin: 4px 16px; font-size: 13px; }
.warn { color: var(--warn); margin: 4px 16px; font-size: 13px; }