:root{--navy:#0A2540;--light:#F8F9FA;--gold:#E5B800;--red:#E63946;--ink:#1b2a3a;--muted:#5b6b7b;--line:#e3e7ec;--bubble:#ffffff;--radius:16px;--shadow:0 8px 30px rgba(10,37,64,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--light);color:var(--ink);-webkit-font-smoothing:antialiased}
.app{display:flex;flex-direction:column;height:100dvh;max-width:860px;margin:0 auto;background:var(--light)}
body:not(.embed) .app{box-shadow:var(--shadow)}
.head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--navy);color:#fff}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:18px;flex:none}
.head-txt{flex:1;min-width:0}
.head h1{font-size:16px;font-weight:700;line-height:1.2}
.status{font-size:12px;color:#c9d4e0;display:flex;align-items:center;gap:6px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ecf8e}
.icon-btn{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.icon-btn:hover,.icon-btn:focus-visible{background:rgba(255,255,255,.1);outline:none}
.wa-btn{background:#25D366;border-color:#25D366;color:#0A2540;font-weight:600}
.wa-btn:hover,.wa-btn:focus-visible{background:#1fbd5a}
.feed{flex:1;overflow-y:auto;padding:18px 14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:85%;padding:11px 14px;border-radius:var(--radius);line-height:1.5;font-size:15px;white-space:pre-wrap;word-wrap:break-word;animation:pop .18s ease-out}
.msg.bot{background:var(--bubble);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.msg.user{background:var(--navy);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg.error{background:#fdecee;border:1px solid #f5c2c7;color:#8a1c25;align-self:flex-start}
.msg a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.msg.bot a{color:#0a58ca}
.msg ul{margin:6px 0 0 18px;white-space:normal}
.msg li{margin:2px 0}
.wa-link{display:inline-flex;margin-top:8px;background:#25D366;color:#0A2540!important;text-decoration:none!important;padding:8px 12px;border-radius:10px;font-weight:600}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px}
.chip{border:1px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;min-height:40px}
.chip:hover,.chip:focus-visible{background:var(--navy);color:#fff;outline:none}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;max-height:140px;line-height:1.4;color:var(--ink);background:var(--light)}
.composer textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.send{background:var(--gold);color:var(--navy);border:0;border-radius:12px;padding:0 18px;font:inherit;font-weight:700;cursor:pointer;min-width:52px;min-height:48px}
.send:disabled{opacity:.5;cursor:not-allowed}
.send:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.foot{font-size:11px;color:var(--muted);text-align:center;padding:0 12px 10px;background:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
@media (max-width:520px){.head .label{display:none}.msg{max-width:92%}}
.mic{background:var(--light);border:1px solid var(--line);border-radius:12px;min-width:48px;min-height:48px;font-size:18px;cursor:pointer}
.mic[aria-pressed=true]{background:var(--red);border-color:var(--red);animation:blink 1.2s infinite}
.mic:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.tools{display:flex;gap:4px;margin-top:6px;white-space:normal}
.tool{background:transparent;border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:13px;cursor:pointer;color:var(--muted);min-height:30px}
.tool:hover,.tool:focus-visible{border-color:var(--navy);color:var(--navy);outline:none}
.tool[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.lead-ok{display:block;margin-top:8px;font-size:13px;color:#0f7a4a;font-weight:600;white-space:normal}
@media (prefers-color-scheme:dark){:root{--light:#0d1b2a;--ink:#e8eef5;--muted:#9fb0c2;--line:#22374d;--bubble:#132a40}
.composer,.foot{background:#0a1724}.chip{background:transparent;color:var(--ink);border-color:var(--line)}.chip:hover{background:var(--gold);color:#0A2540}
.msg.bot a{color:#8cc2ff}.msg.error{background:#3a1218;border-color:#6b1f2a;color:#ffd4d8}.tool:hover,.tool:focus-visible{color:var(--gold);border-color:var(--gold)}}
.chips[hidden],[hidden]{display:none!important}
.msg.human{border-color:var(--gold);background:#fffaf0}.msg .who{display:block;font-size:11px;font-weight:700;color:#7a5b00;margin-bottom:2px}
.msg.note{align-self:center;background:transparent;color:var(--muted);font-size:13px;text-align:center;padding:4px 10px}
@media (prefers-color-scheme:dark){.msg.human{background:#2a2410}.msg .who{color:var(--gold)}}
.msg .who.agent{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:10px}