:root{
  --bg:#0b141a;--header:#202c33;--panel:#111b21;--bot:#202c33;--user:#005c4b;
  --text:#e9edef;--muted:#8696a0;--accent:#00a884;--line:#2a3942;--quote:#17232b;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#081016;color:var(--text)}
body{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at top,#17313b 0,#081016 48%)}
.phone-shell{width:min(100%,460px);height:min(920px,100dvh);display:grid;grid-template-rows:auto 1fr auto auto auto;background:var(--panel);box-shadow:0 24px 90px #0009;overflow:hidden;position:relative}
.chat-header{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--header);border-bottom:1px solid #ffffff0d;min-height:68px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#00a884,#067a66);font-weight:800;color:white;letter-spacing:.5px}
.header-copy{display:flex;min-width:0;flex:1;flex-direction:column}.header-copy strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-copy span{font-size:12px;color:#b7c1c7;margin-top:3px}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#25d366;margin-right:5px}
.icon-btn{border:0;background:transparent;color:#aebac1;font-size:25px;cursor:pointer;padding:8px}
.messages{overflow-y:auto;padding:18px 14px 12px;background-color:#0b141a;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px);background-size:28px 28px;scroll-behavior:smooth}
.day-pill{width:max-content;margin:0 auto 16px;padding:5px 10px;border-radius:7px;background:#182229;color:#8696a0;font-size:11px;box-shadow:0 1px 1px #0005}
.bubble{position:relative;max-width:88%;padding:9px 10px 18px;border-radius:9px;margin:7px 0;box-shadow:0 1px 1px #0004;font-size:14.5px;line-height:1.42}.bubble p{margin:0 0 7px}.bubble p:last-of-type{margin-bottom:0}.bubble.bot{background:var(--bot);border-top-left-radius:2px}.bubble.user{background:var(--user);margin-left:auto;border-top-right-radius:2px}.time{position:absolute;right:8px;bottom:4px;font-size:10px;color:#aebac1}.ticks{color:#53bdeb;margin-left:3px}
.typing{display:flex;gap:4px;width:55px;align-items:center}.typing span{width:6px;height:6px;border-radius:50%;background:#96a4ac;animation:bounce 1s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.quote-card{margin-top:9px;background:var(--quote);border-left:3px solid var(--accent);border-radius:6px;padding:10px}.quote-title{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#b8c4ca;margin-bottom:8px}.quote-line{padding:8px 0;border-top:1px solid #ffffff12}.quote-line:first-of-type{border-top:0}.quote-name{font-weight:650}.quote-meta{display:flex;justify-content:space-between;gap:12px;color:#b4c0c6;font-size:12px;margin-top:2px}.quote-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff1c;margin-top:8px;padding-top:10px;font-weight:800;font-size:16px}.quote-validity{font-size:10.5px;color:#93a1a8;margin-top:7px}
.suggestions{display:flex;gap:8px;overflow-x:auto;padding:8px 10px;background:#0d171d;border-top:1px solid #ffffff0b;scrollbar-width:none}.suggestions::-webkit-scrollbar{display:none}.suggestion{white-space:nowrap;border:1px solid #2d5960;border-radius:18px;background:#12262c;color:#cde8e2;padding:8px 11px;font-size:12px;cursor:pointer}.suggestion:hover{border-color:#00a884}
.composer{display:grid;grid-template-columns:1fr 46px;gap:8px;padding:9px 10px;background:#202c33}.composer input{width:100%;border:0;outline:0;border-radius:22px;background:#2a3942;color:#e9edef;padding:12px 16px;font-size:15px}.composer input::placeholder{color:#8696a0}.send-btn{border:0;border-radius:50%;width:44px;height:44px;background:var(--accent);color:#fff;font-size:19px;cursor:pointer;transition:.15s}.send-btn:active{transform:scale(.95)}.send-btn:disabled{opacity:.5}
.demo-footer{text-align:center;padding:6px 10px 8px;background:#111b21;color:#667781;font-size:10px}
.error-note{color:#ffb4ab;font-size:12px;margin-top:5px}
@media(min-width:600px){.phone-shell{height:min(900px,94dvh);border-radius:24px;border:1px solid #ffffff12}.chat-header{padding-top:14px}}