:root {
  color-scheme:light;
  --paper:#fff;
  --ink:#202124;
  --muted:#74767c;
  --line:#e1e2e7;
  --incoming:#eeeeF1;
  --outgoing:#168544;
  --blue:#1267cc;
  --error:#b02a2a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#e9ebef; }
button,input,textarea { font:inherit; }
button,a,input,textarea { touch-action:manipulation; }
button { border:0; cursor:pointer; color:inherit; }
button:disabled { cursor:wait; opacity:.5; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
input,textarea { color:var(--ink); background:var(--paper); }
textarea { resize:none; }
a { color:inherit; }
p,h1,h2,h3 { margin:0; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.app-shell { height:100dvh; max-height:100dvh; width:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column; background:var(--paper); box-shadow:0 0 50px #20212410; }
.app-header { display:flex; align-items:center; gap:10px; padding:12px 17px; padding-top:max(12px,env(safe-area-inset-top)); border-bottom:1px solid var(--line); flex-shrink:0; background:#f6f6f8; }
.contact-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#dce9df; color:#326547; font-size:29px; flex-shrink:0; }
.contact-heading { flex:1; min-width:0; }
.contact-heading h1 { font-size:16px; font-weight:600; line-height:1.5; }
.contact-heading p { font-size:11px; color:var(--muted); line-height:1.5; }
.icon-button { width:42px; height:42px; display:grid; place-items:center; background:transparent; border-radius:50%; font-size:26px; flex-shrink:0; }
.icon-button svg { width:24px; height:24px; }
.info-button { color:var(--blue); }
.conversation { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px 14px 20px; scrollbar-width:thin; }
.preview-context { font-size:11px; line-height:1.5; text-align:center; color:var(--muted); margin:0 4px 23px; }
.empty-state { padding:clamp(35px,12vh,100px) 20px 30px; text-align:center; color:var(--muted); font-size:14px; line-height:1.5; }
.empty-title { font-size:20px; font-weight:600; color:var(--ink); margin-bottom:9px; }
.empty-example { font-size:13px; margin:24px auto 0; max-width:255px; }
.messages { display:flex; flex-direction:column; gap:10px; }
.message { display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; }
.message.user { align-items:flex-end; }
.message.assistant { align-items:flex-start; }
.message-time { align-self:center; font-size:10px; color:var(--muted); margin:14px 0 10px; line-height:1.4; }
.message-text { max-width:87%; padding:10px 13px; border-radius:18px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.4; background:var(--incoming); }
.user .message-text { background:var(--outgoing); color:white; border-bottom-right-radius:5px; }
.assistant .message-text { border-bottom-left-radius:5px; }
.message-text a { text-decoration:underline; text-underline-offset:2px; }
.message-photo { display:block; width:auto; max-width:min(82%,280px); max-height:320px; border-radius:17px; object-fit:contain; background:var(--incoming); }
.photo-unavailable { font-size:12px; color:var(--muted); background:var(--incoming); padding:14px; border-radius:16px; }
.message-status { max-width:87%; font-size:11px; color:var(--muted); line-height:1.5; margin:3px 3px 0; }
.message-status.failed { color:var(--error); }
.composer-wrap { flex-shrink:0; background:var(--paper); border-top:1px solid #f1f1f3; padding:8px 9px max(8px,env(safe-area-inset-bottom)); }
.composer { display:flex; align-items:flex-end; gap:5px; }
.message-input-wrap { flex:1; min-width:0; display:flex; align-items:flex-end; border:1px solid #c9cbd1; border-radius:23px; padding:4px; gap:3px; background:var(--paper); }
.composer textarea { width:100%; min-height:32px; max-height:130px; padding:5px 7px 4px 9px; border:0; background:transparent; font-size:16px; line-height:23px; outline:none; }
.composer textarea::placeholder { color:#93969d; }
.send-button { width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--outgoing); color:#fff; font-size:25px; line-height:1; }
.transport-note { color:var(--muted); text-align:center; font-size:10px; margin:6px 0 0; line-height:1.4; }
.form-error { font-size:12px; line-height:1.5; color:var(--error); }
.global-error { padding:9px 12px; margin:0 4px 8px; background:#fff0ef; border-radius:10px; }
dialog { background:#f6f6f8; color:var(--ink); border:0; }
dialog::backdrop { background:#17212f66; backdrop-filter:blur(3px); }
.details-dialog { width:430px; max-width:calc(100% - 24px); max-height:calc(100dvh - 48px); padding:24px; border-radius:22px; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.dialog-header h2,.confirmation h2 { font-size:21px; font-weight:650; line-height:1.25; }
.dialog-header .icon-button { margin:-8px -9px -8px 0; color:var(--muted); }
.dialog-copy { font-size:13px; line-height:1.6; color:var(--muted); margin:15px 0; }
.details-actions { overflow:hidden; background:#fff; border-radius:12px; margin:20px 0; }
.details-actions button { display:flex; gap:10px; align-items:center; width:100%; text-align:left; padding:15px; background:#fff; font-size:14px; border-bottom:1px solid var(--line); }
.details-actions button:last-child { border-bottom:0; }
.details-actions button span:last-child { margin-left:auto; color:var(--muted); font-size:20px; }
.policy-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; font-size:11px; color:var(--muted); margin-top:12px; }
.policy-links a { text-underline-offset:3px; }
.fine-print { font-size:11px; color:var(--muted); line-height:1.6; text-align:center; margin-top:22px; }
.primary-button { color:#fff; background:var(--blue); padding:13px 17px; border-radius:11px; font-size:14px; font-weight:550; }
.quiet-button { color:var(--blue); background:#e7eef8; padding:13px 17px; border-radius:11px; font-size:14px; }
.confirmation-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin:24px 0 5px; }
.initial-loading { min-height:100dvh; display:grid; place-items:center; font-size:15px; color:var(--muted); }
.login-view { min-height:100dvh; padding:35px 22px; display:grid; place-items:center; background:#f6f6f8; }
.login-card { width:100%; max-width:365px; text-align:center; }
.large-avatar { width:76px; height:76px; font-size:49px; margin:0 auto 22px; }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:1px; margin-bottom:10px; }
.login-card h1 { font-size:30px; letter-spacing:-.7px; }
.login-copy { font-size:14px; line-height:1.6; color:var(--muted); margin-top:16px; }
.login-card form { text-align:left; margin-top:30px; }
.login-card label { font-size:12px; display:block; margin-bottom:8px; }
.password-field { display:flex; flex-direction:column; gap:10px; }
.password-field input { min-width:0; width:100%; padding:12px; border:1px solid #c9cbd1; border-radius:10px; font-size:16px; }
.password-field button { background:var(--outgoing); color:#fff; padding:13px; border-radius:10px; font-size:14px; }
.login-card .form-error { margin-top:12px; }
@media(min-width:600px) and (min-height:650px) {
  .app-shell { height:calc(100dvh - 40px); max-height:900px; margin:20px auto; border:1px solid #d8dae0; border-radius:22px; overflow:hidden; }
}