:root { font-family: "Plus Jakarta Sans", sans-serif; color: #183236; background: #edf5f3; font-synthesis: none; color-scheme: light; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100dvh; margin: 0; overflow: hidden; background: radial-gradient(circle at 8% 8%, #d7f1e6 0, transparent 28rem), linear-gradient(140deg, #f5f0e5, #edf6f3 48%, #d9eee9); }
button, textarea, input { font: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #e5a83f; outline-offset: 2px; }
.shell { width: min(100%, 1050px); height: 100dvh; min-height: 100dvh; margin: auto; padding: 0 clamp(14px, 3vw, 34px) 16px; display: flex; flex-direction: column; overflow: hidden; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }.topbar-actions { display: inline-flex; align-items: center; gap: 12px; }.clear-conversation { border: 1px solid #b9d9ce; border-radius: 999px; background: rgba(255,255,255,.68); color: #24665e; cursor: pointer; padding: 7px 10px; font-size: 11px; font-weight: 800; }.clear-conversation:hover { border-color: #55a58f; background: #e6f5ed; }.clear-conversation:disabled { cursor: wait; opacity: .55; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #155e57; font-size: 22px; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 12px 12px 12px 3px; background: #0f766e; color: #fff9ef; font-family: Newsreader, serif; font-size: 23px; letter-spacing: -.08em; }
.status { display: inline-flex; align-items: center; gap: 8px; color: #6d7d7c; font-size: 12px; font-weight: 700; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a2b2b0; }.status.ready { color: #18715b; }.status.ready .status-dot { background: #36ad78; box-shadow: 0 0 0 4px #d3f1e4; }.status.verification { color: #a66213; }.status.verification .status-dot { background: #dd941f; box-shadow: 0 0 0 4px #fff0ca; }.status.error { color: #b24742; }.status.error .status-dot { background: #d95f58; }
.chat { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: clamp(22px, 5vh, 58px) clamp(14px, 4vw, 48px) 18px; background: rgba(255,255,252,.88); border: 1px solid rgba(31, 105, 94, .12); border-radius: 30px; box-shadow: 0 24px 55px rgba(30, 85, 76, .12); }
.chat::after { position: absolute; right: -100px; bottom: -130px; width: 300px; height: 300px; border: 48px solid rgba(202, 234, 220, .45); border-radius: 50%; content: ""; pointer-events: none; }
.intro { position: relative; z-index: 1; margin: auto 0 28px; }.eyebrow { margin: 0 0 12px; color: #d18820; font-size: 11px; font-weight: 800; letter-spacing: .18em; }.intro h1 { margin: 0; max-width: 720px; color: #164b49; font-family: Newsreader, Georgia, serif; font-size: clamp(37px, 6vw, 66px); font-weight: 700; letter-spacing: -.06em; line-height: .98; }.intro h1 em { color: #d18820; font-style: italic; }.lede { max-width: 610px; margin: 18px 0 25px; color: #637775; font-size: 15px; line-height: 1.7; }
.chips, .suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; }.chips button, .suggestion-chip { border: 1px solid #b9d9ce; border-radius: 999px; background: #f7fcf9; color: #24665e; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform .16s, background .16s, border-color .16s; }.chips button { padding: 10px 14px; }.chips button:hover, .suggestion-chip:hover { transform: translateY(-1px); border-color: #55a58f; background: #e6f5ed; }.chips button:disabled, .suggestion-chip:disabled { cursor: wait; opacity: .58; transform: none; }
.messages { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2px 5px 2px 0; scroll-behavior: smooth; scrollbar-color: #b5d1c7 transparent; }.message { max-width: min(80%, 680px); padding: 13px 16px; border-radius: 17px; color: #2b4748; font-size: 14px; line-height: 1.58; overflow-wrap: anywhere; }.message.user { align-self: flex-end; background: #0f766e; border-bottom-right-radius: 5px; color: white; box-shadow: 0 8px 18px rgba(15, 118, 110, .18); }.message.assistant { align-self: flex-start; background: #fffefa; border: 1px solid #dcece6; border-bottom-left-radius: 5px; box-shadow: 0 6px 16px rgba(37, 87, 80, .05); }.message.system { align-self: center; background: #fff4d9; color: #8a5a14; font-size: 12px; text-align: center; }.message.pending { color: #7b9590; }.message a { color: #0d776c; }.message p { margin: 0 0 9px; }.message p:last-child { margin-bottom: 0; }.message ul, .message ol { margin: 8px 0; padding-left: 19px; }.suggestion-chips { margin-top: 12px; }.suggestion-chip { padding: 7px 10px; }
.feedback { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 9px; border-top: 1px solid #e7efeb; color: #7b918d; font-size: 11px; }.feedback button { width: 28px; height: 26px; border: 1px solid #d5e5de; border-radius: 8px; background: white; cursor: pointer; }.feedback button:hover { border-color: #61aa93; background: #effaf4; }
.identity-card { position: relative; z-index: 2; margin: 0 0 2px; padding: 19px; border: 1px solid #cde4da; border-radius: 18px; background: #fbfffc; box-shadow: 0 12px 25px rgba(24, 82, 72, .09); }.identity-heading { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; }.identity-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #d9f2e5; color: #18735b; font-weight: 900; }.identity-heading strong, .identity-heading small { display: block; }.identity-heading small { margin-top: 3px; color: #6c8480; font-size: 12px; line-height: 1.4; }.identity-card label { display: block; margin: 10px 0; color: #456461; font-size: 12px; font-weight: 700; }.identity-card input:not([type=checkbox]) { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border: 1px solid #cde1d8; border-radius: 10px; color: #183d3a; outline-color: #e5a83f; }.consent { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 500 !important; }.consent input { margin-top: 3px; }.primary { width: 100%; margin-top: 5px; padding: 11px; border: 0; border-radius: 10px; background: #0f766e; color: white; cursor: pointer; font-weight: 800; }.primary:hover { background: #0c665f; }.primary:disabled { cursor: wait; opacity: .55; }.text-button { margin-top: 10px; border: 0; background: none; color: #197064; cursor: pointer; font-size: 13px; }.form-error { min-height: 18px; margin: 8px 0 0; color: #b33d36; font-size: 12px; }.otp-copy { margin: 0; color: #667f7b; font-size: 13px; }.hidden { display: none !important; }
.composer { display: flex; flex: 0 0 auto; gap: 10px; align-items: flex-end; margin-top: 14px; padding: 8px 8px 8px 16px; border: 1px solid #c8dfd6; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 12px 26px rgba(25, 80, 70, .09); }.composer:focus-within { border-color: #4aa78d; box-shadow: 0 0 0 3px rgba(88, 170, 145, .17); }.composer textarea { flex: 1; max-height: 120px; padding: 7px 0; border: 0; outline: 0; resize: none; background: transparent; color: #183d3a; font-size: 14px; line-height: 1.45; }.composer textarea::placeholder { color: #8ca39f; }.composer button { width: 42px; height: 42px; border: 0; border-radius: 13px; background: #d18820; color: white; cursor: pointer; font-size: 21px; font-weight: 800; }.composer button:hover { background: #bd7414; }.composer button:disabled { cursor: wait; opacity: .52; }footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; color: #728480; font-size: 11px; }
@media (max-width: 600px) { .shell { padding: 0 10px 10px; }.topbar { min-height: 64px; }.chat { padding: 24px 14px 14px; border-radius: 22px; }.intro { margin-bottom: 20px; }.intro h1 { font-size: 42px; }.lede { margin: 14px 0 20px; font-size: 14px; }.message { max-width: 92%; }.composer { margin-top: 10px; }footer { flex-direction: column; gap: 2px; padding: 9px 2px 0; } }