:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--patient-bg); color: var(--patient-text); }
button, textarea { font: inherit; }
a { color: inherit; }
.patient-shell { display: grid; min-height: 100dvh; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); }
.patient-brand { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 5vw, 80px); color: #f8f3e9; background: var(--patient-accent); }
.patient-logo { display: inline-flex; align-self: flex-start; font: 500 clamp(18px, 2vw, 26px)/1.1 Georgia, serif; text-decoration: none; }
.patient-logo img { display: block; max-width: 180px; max-height: 46px; }
.patient-brand__content { max-width: 510px; }
.eyebrow { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .72; }
h1, h2, p { margin-top: 0; }
.patient-brand h1 { max-width: 10ch; margin-bottom: 24px; font: 400 clamp(42px, 5vw, 76px)/.98 Georgia, serif; letter-spacing: -.035em; }
.patient-brand__content > p:last-child { max-width: 38ch; margin-bottom: 0; font-size: 17px; line-height: 1.65; opacity: .82; }
.patient-brand__foot { margin-bottom: 0; font-size: 13px; opacity: .64; }
.patient-chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) clamp(18px, 4vw, 64px) max(18px, env(safe-area-inset-bottom)); background: var(--patient-bg); }
.chat-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; border-bottom: 1px solid color-mix(in srgb, var(--patient-text) 14%, transparent); }
.chat-header__clinic { margin-bottom: 3px; font: 500 19px/1.1 Georgia, serif; }
.chat-header__status { display: flex; align-items: center; gap: 6px; margin-bottom: 0; color: var(--patient-text-muted); font-size: 12px; }
.chat-header__status span { width: 6px; height: 6px; border-radius: 50%; background: #78917d; }
.quiet-link { color: var(--patient-text-muted); font-size: 13px; text-underline-offset: 3px; }
.chat-welcome { max-width: 580px; padding: clamp(34px, 7vh, 90px) 0 28px; transition: max-height .32s ease, padding .32s ease, opacity .2s ease; }
.chat-welcome--collapsed { max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }
.chat-welcome h2 { margin-bottom: 24px; font: 400 clamp(32px, 4vw, 52px)/1.03 Georgia, serif; letter-spacing: -.03em; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.quick-action { padding: 11px 15px; border: 1px solid color-mix(in srgb, var(--patient-text) 20%, transparent); border-radius: 5px; color: var(--patient-text); background: transparent; cursor: pointer; font-size: 14px; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.quick-action:hover { border-color: var(--patient-accent); background: color-mix(in srgb, var(--patient-accent) 6%, transparent); transform: translateY(-1px); }
.quick-action:active { transform: scale(.98); }
.chat-timeline { display: flex; min-height: 0; flex-direction: column; gap: 12px; overflow-y: auto; padding: 4px 0 20px; scroll-behavior: smooth; }
.message { align-self: flex-start; max-width: min(620px, 88%); padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--patient-text) 10%, transparent); border-radius: 4px 14px 14px; background: var(--patient-surface); box-shadow: 0 6px 16px rgb(27 38 31 / .035); font-size: 15px; line-height: 1.58; animation: message-in .21s ease both; }
.message p { margin-bottom: 0; white-space: pre-wrap; }
.message--user { align-self: flex-end; border-color: transparent; border-radius: 14px 4px 14px 14px; color: #fff; background: var(--patient-accent); }
.presentation { align-self: flex-start; width: min(440px, 100%); padding: 14px; border: 1px solid color-mix(in srgb, var(--patient-accent) 25%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--patient-accent) 4%, var(--patient-surface)); animation: message-in .21s ease both; }
.presentation > p { margin-bottom: 12px; font-size: 14px; line-height: 1.45; }.presentation form { display: flex; gap: 8px; }.presentation input { min-width: 0; flex: 1; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--patient-text) 20%, transparent); border-radius: 5px; color: var(--patient-text); background: var(--patient-surface); }.presentation button { padding: 10px 13px; border: 0; border-radius: 5px; color: #fff; background: var(--patient-accent); cursor: pointer; white-space: nowrap; }
.typing { display: flex; align-items: center; gap: 5px; height: 24px; padding-left: 10px; }
.typing[hidden] { display: none; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--patient-text-muted); animation: typing 1.1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .14s; }.typing span:nth-child(3) { animation-delay: .28s; }
.chat-error { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border-left: 2px solid #a33d38; color: #7b2926; background: #fbefec; font-size: 13px; }
.chat-error button, .reset-button { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.composer { display: flex; align-items: flex-end; gap: 10px; padding: 10px; border: 1px solid color-mix(in srgb, var(--patient-text) 16%, transparent); border-radius: 9px; background: var(--patient-surface); transition: border-color .18s ease, box-shadow .18s ease; }
.composer:focus-within { border-color: var(--patient-accent); box-shadow: 0 4px 18px color-mix(in srgb, var(--patient-accent) 10%, transparent); }
.composer textarea { display: block; width: 100%; min-height: 30px; max-height: 132px; padding: 4px 2px; border: 0; outline: 0; resize: none; color: var(--patient-text); background: transparent; line-height: 1.45; }
.composer button { display: grid; width: 39px; height: 39px; place-items: center; flex: 0 0 auto; border: 0; border-radius: 7px; color: #fff; background: var(--patient-accent); cursor: pointer; font-size: 19px; transition: background .16s ease, opacity .16s ease; }
.composer button:hover:not(:disabled) { background: var(--patient-accent-hover); }.composer button:disabled { cursor: wait; opacity: .5; }
.chat-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 13px 2px 0; color: var(--patient-text-muted); font-size: 11px; line-height: 1.45; }.chat-footer p { max-width: 54ch; margin-bottom: 0; }.chat-footer a { text-underline-offset: 2px; }.reset-button { flex: 0 0 auto; font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@keyframes message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes typing { 0%, 80%, 100% { opacity: .28; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (max-width: 760px) { .patient-shell { display: block; }.patient-brand { min-height: 210px; padding: max(24px, env(safe-area-inset-top)) 22px 28px; }.patient-brand h1 { margin-bottom: 12px; font-size: 38px; }.patient-brand__content > p:last-child, .patient-brand__foot { display: none; }.patient-chat { min-height: calc(100dvh - 210px); padding: 14px 18px max(14px, env(safe-area-inset-bottom)); }.chat-welcome { padding: 30px 0 22px; }.chat-welcome h2 { font-size: 34px; }.chat-timeline { min-height: 180px; }.chat-footer { padding-bottom: 2px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }