:root { --sand:#c9a86a; --bg:#faf7f2; --bot:#fff; --user:var(--sand); }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", Arial, sans-serif; background:var(--bg); height:100dvh; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:.5rem; padding:1rem; background:#1b1b1b; color:#fff; }
.brand .logo { background:var(--sand); color:#1b1b1b; font-weight:700; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; }
.brand h1 { font-size:1.1rem; margin:0; }
.chat { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.bubble { max-width:80%; padding:.6rem .9rem; border-radius:1rem; line-height:1.5; white-space:pre-wrap; }
.bubble.bot { background:var(--bot); align-self:flex-start; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.bubble.bot.typing { opacity:.6; font-size:1.4rem; letter-spacing:.1em; }
.bubble.user { background:var(--user); color:#1b1b1b; align-self:flex-end; }
.wa-cta { align-self:flex-start; margin-top:.25rem; padding:.5rem .9rem; background:#25d366; color:#fff; border-radius:.6rem; text-decoration:none; font-weight:600; }
.gate { padding:1rem; text-align:center; }
.composer { display:flex; gap:.5rem; padding:1rem; background:#fff; border-top:1px solid #eee; }
.composer input { flex:1; padding:.7rem; border:1px solid #ddd; border-radius:.6rem; font-size:1rem; }
.composer input:disabled { background:#f3f3f3; }
.composer button { padding:.7rem 1.2rem; border:0; border-radius:.6rem; background:var(--sand); font-weight:600; cursor:pointer; }
.composer button:disabled { opacity:.5; cursor:default; }