:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #10221c; background: #edf7f1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top, #d7f4e3, transparent 32rem), #f5faf7; }
.widget-shell { width: min(430px, 100%); height: min(760px, calc(100vh - 40px)); background: white; border: 1px solid #dce7e1; border-radius: 24px; box-shadow: 0 24px 70px rgba(31,70,53,.17); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.widget-head { padding: 19px; display: flex; gap: 12px; align-items: center; color: white; background: #10221c; }
.mark { width: 39px; height: 39px; border-radius: 12px; display: block; flex: 0 0 auto; }
.widget-title { min-width: 0; flex: 1; }
.widget-head b, .widget-head small { display: block; }
.widget-head small { margin-top: 3px; color: #bdd0c8; }
.reset-chat { border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: transparent; color: white; padding: 8px 10px; font-size: 11px; font-weight: 800; cursor: pointer; }
.online { width: 8px; height: 8px; border-radius: 50%; background: #58d08e; display: inline-block; margin-right: 5px; }
.messages { padding: 20px; overflow: auto; background: linear-gradient(#fbfdfc, #f6faf8); display: flex; flex-direction: column; gap: 10px; }
.message { max-width: 84%; padding: 11px 13px; border-radius: 14px; line-height: 1.48; font-size: 14px; }
.assistant { align-self: flex-start; background: white; border: 1px solid #dfe8e3; border-bottom-left-radius: 4px; }
.guest { align-self: flex-end; background: #dff7e9; border-bottom-right-radius: 4px; }
.meta { display: block; margin-top: 5px; font-size: 10px; opacity: .58; }
.quick { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.quick button { border: 1px solid #bad5c8; border-radius: 99px; background: white; color: #12633e; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 13px; border-top: 1px solid #dfe8e3; }
.composer input { min-width: 0; border: 1px solid #c6d6ce; border-radius: 11px; padding: 11px 12px; font: inherit; }
.composer button, .start button { border: 0; border-radius: 11px; background: #10221c; color: white; font-weight: 800; padding: 11px 15px; cursor: pointer; }
.start { grid-row: 2 / 4; padding: 26px; align-self: center; }
.start h1 { font-size: 30px; letter-spacing: -.04em; margin: 0 0 10px; }
.start p { color: #66736e; line-height: 1.5; }
.field { display: grid; gap: 6px; margin: 14px 0; }
.field label { font-size: 12px; font-weight: 750; }
.field input { border: 1px solid #c6d6ce; border-radius: 11px; padding: 11px 12px; font: inherit; }
.start button { width: 100%; margin-top: 8px; }
.notice { color: #66736e; font-size: 11px; text-align: center; padding-top: 10px; }
.typing { align-self: flex-start; color: #66736e; font-size: 12px; padding: 8px; }
.handoff-state { display: grid; gap: 6px; margin-top: 6px; padding: 13px; border: 1px solid #bad5c8; border-radius: 13px; background: #edf8f2; color: #234a39; font-size: 12px; line-height: 1.45; }
.handoff-state button { justify-self: start; border: 0; border-radius: 9px; background: #12633e; color: white; padding: 8px 10px; font-weight: 800; cursor: pointer; }
.error { margin: 10px 0; padding: 10px; border-radius: 9px; background: #ffe2dd; color: #8f2d24; font-size: 12px; }
@media (max-width: 480px) { body { padding: 0; } .widget-shell { height: 100vh; border-radius: 0; border: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }