:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #19382d; background: #e5e9e2; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, textarea, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .42; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #75a790; outline-offset: 3px; }
.hidden { display: none !important; }
.phone { width: 100%; max-width: 540px; height: 100vh; height: 100dvh; margin: auto; background: #f4f5f1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top)) 22px 18px; border-bottom: 1px solid #dfe4dc; flex-shrink: 0; }
.identity { display: flex; align-items: center; gap: 12px; }
.mark { display: grid; place-items: center; background: #1b4536; color: #f4f5f1; font: 600 29px Georgia, serif; letter-spacing: -3px; padding-right: 4px; width: 42px; height: 42px; border-radius: 14px; }
h1 { margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -.5px; }
.identity p { margin: 0; color: #667b6e; font-size: 12px; }
.quiet { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: #385746; border: 1px solid #d6dfd3; border-radius: 25px; background: transparent; font-size: 18px; }
.quiet span { font-size: 13px; font-weight: 550; }
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.transcript { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 22px 14px; overscroll-behavior: contain; scroll-behavior: smooth; }
.thread-start { display: flex; align-items: center; gap: 12px; margin: 0 0 27px; color: #839080; font-size: 10px; font-weight: 600; letter-spacing: 1.8px; }
.thread-start::before, .thread-start::after { content: ""; height: 1px; background: #dfe4d9; flex: 1; }
.bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 19px; }
.bubble { max-width: 87%; padding: 14px 17px; border-radius: 20px 20px 20px 5px; background: #fff; border: 1px solid #e3e7de; font-size: 16px; line-height: 1.5; color: #293e32; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-label { margin: 0 0 8px 3px; font-size: 10px; font-weight: 650; letter-spacing: 1.4px; color: #7c8a7b; }
.customer { align-items: flex-end; }
.customer .bubble { color: #fff; background: #1b4536; border-color: #1b4536; border-radius: 20px 20px 5px 20px; }
.bubble-time { font-size: 10px; color: #849181; margin: 7px 3px 0; }
.typing { display: flex; gap: 5px; padding: 17px 19px; width: fit-content; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #7a9684; animation: blink 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .14s; }.typing i:nth-child(3) { animation-delay: .28s; }
.turn-note { font-size: 13px; line-height: 1.5; color: #657561; margin: -5px 3px 20px; }
.turn-note.error { color: #94502e; }
.compose-area { flex-shrink: 0; padding: 12px 18px calc(10px + env(safe-area-inset-bottom)); background: #f4f5f1; border-top: 1px solid #e4e8df; }
.composer { display: flex; align-items: flex-end; gap: 10px; padding: 7px; border: 1px solid #dce2d5; border-radius: 27px; background: #fff; box-shadow: 0 3px 12px #27472d05; }
textarea { resize: none; flex: 1; min-width: 0; max-height: 130px; background: transparent; border: 0; padding: 11px 7px 11px 11px; line-height: 1.35; font-size: 16px; color: #19382d; }
textarea:focus { outline: none; }textarea::placeholder { color: #95a08f; }
.send { width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #1b4536; color: #fff; font-size: 27px; }
.compose-caption { text-align: center; margin: 12px 0 0; color: #8a9583; font-size: 8px; letter-spacing: 1.3px; font-weight: 600; }.compose-caption span { margin-left: 5px; }
.banner, .notice { font-size: 13px; line-height: 1.45; padding: 11px 18px; background: #ecebdc; color: #655f3f; }
.notice { padding: 0 4px 12px; background: transparent; }
.text-button { border: 0; background: transparent; color: #315f47; padding: 10px 0; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.notice .text-button { margin-left: 10px; }
.auth { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 35px 32px 25px; }
.auth-content { margin: auto 0; padding: 20px 0 35px; }
.auth-mark { display: grid; place-items: center; height: 65px; width: 65px; border-radius: 21px; background: #e3e9dc; font: 600 46px Georgia, serif; letter-spacing: -5px; padding-right: 7px; margin-bottom: 42px; }
.eyebrow { color: #7b8c73; font-size: 10px; font-weight: 650; letter-spacing: 2px; margin: 0 0 15px; }
h2 { margin: 0 0 22px; font-family: Georgia, serif; font-size: clamp(38px, 10vw, 52px); line-height: 1.08; font-weight: 400; letter-spacing: -2px; }
.muted { font-size: 15px; line-height: 1.65; color: #778171; margin: 0 0 26px; }
.primary { min-height: 52px; width: 100%; border: 0; border-radius: 16px; background: #1b4536; color: #fff; font-size: 15px; font-weight: 600; }
.auth label { display: block; font-size: 13px; margin-bottom: 8px; }
.auth input { width: 100%; border: 1px solid #cbd6c7; border-radius: 12px; background: white; padding: 14px; font-size: 16px; margin-bottom: 15px; }
.auth-footer { color: #8a9583; font-size: 9px; letter-spacing: 2px; margin: 20px 0 0; }
.error { color: #94502e; font-size: 13px; line-height: 1.5; }
#recovery-code { display: block; user-select: all; overflow-wrap: anywhere; background: #fff; border: 1px solid #d8e1d1; border-radius: 14px; padding: 20px; margin: 22px 0; line-height: 1.8; }
.loading { flex: 1; display: flex; gap: 12px; align-items: center; justify-content: center; color: #778171; font-size: 14px; padding: 24px; }
.loader { width: 15px; height: 15px; border: 2px solid #d3ddca; border-top-color: #385b41; border-radius: 50%; animation: spin 1s linear infinite; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (min-width: 600px) { .phone { height: min(880px, calc(100dvh - 64px)); margin: 32px auto; border: 1px solid #d3dccb; border-radius: 30px; box-shadow: 0 20px 60px #24392412; }.topbar { padding-top: 23px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }