:root { --line:#e3e6ea; --muted:#6b7280; --in:#f1f3f5; --out:#0b93f6; --ai:#7048e8; --bad:#c92a2a; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#111; background:#fafbfc; }
header { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; background:#fff; border-bottom:1px solid var(--line); }
header .brand { font-weight:700; font-size:1.05rem; text-decoration:none; color:#111; }
header .sub { color:var(--muted); font-size:.85rem; }
header .right { margin-left:auto; }
main { max-width:900px; margin:0 auto; padding:1.25rem; }
.banner { padding:.6rem .9rem; border-radius:8px; margin-bottom:1rem; }
.banner.error { background:#fff5f5; color:var(--bad); border:1px solid #ffc9c9; }
.banner.warn { background:#fff9db; color:#845ef7; border:1px solid #ffe066; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; margin-bottom:1rem; }
.row { display:flex; gap:.5rem; align-items:center; }
input[type=text], input[type=tel], input[type=password], textarea { flex:1; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; font:inherit; }
textarea { resize:vertical; min-height:64px; }
button { padding:.55rem 1rem; border:0; border-radius:8px; background:#111; color:#fff; font:inherit; cursor:pointer; }
button.ghost { background:#fff; color:#111; border:1px solid var(--line); }
button.link { background:none; color:var(--muted); padding:0; }
button[disabled] { opacity:.45; cursor:not-allowed; }
ul.threads { list-style:none; margin:0; padding:0; }
ul.threads li { border-bottom:1px solid var(--line); }
ul.threads a { display:block; padding:.8rem .25rem; text-decoration:none; color:inherit; }
ul.threads .num { font-weight:600; }
ul.threads .prev { color:var(--muted); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.when { color:var(--muted); font-size:.8rem; margin-left:auto; white-space:nowrap; }
.bubbles { display:flex; flex-direction:column; gap:.4rem; }
.b { max-width:78%; padding:.5rem .75rem; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; }
.b.inbound { align-self:flex-start; background:var(--in); }
.b.outbound { align-self:flex-end; background:var(--out); color:#fff; }
.b.ai { background:var(--ai); }
.b.system { background:#495057; }
.b.failed { background:#fff5f5; color:var(--bad); border:1px solid #ffc9c9; }
.b .meta { display:block; font-size:.7rem; opacity:.75; margin-top:.25rem; }
.pill { display:inline-block; font-size:.72rem; padding:.15rem .5rem; border-radius:999px; background:#f1f3f5; color:var(--muted); }
.pill.on { background:#e6fcf5; color:#087f5b; }
.pill.off { background:#fff0f6; color:#a61e4d; }
.counter { color:var(--muted); font-size:.8rem; }