:root { color-scheme: light; --ink:#20251f; --muted:#667064; --paper:#fbfaf6; --wash:#f0ede4; --line:#d9d5c9; --green:#285c48; --green-dark:#1d4938; --error:#9d352f; --shadow:0 18px 50px rgba(32,37,31,.10); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body.guest-body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at top left,#fff 0,var(--wash) 55%,#e5e7dc 100%); }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.auth-card { width:min(100% - 32px,520px); margin:clamp(24px,8vh,84px) auto; padding:clamp(28px,7vw,52px); background:rgba(251,250,246,.96); border:1px solid rgba(217,213,201,.8); border-radius:28px; box-shadow:var(--shadow); }
.auth-card.compact { max-width:460px; }
.eyebrow { margin:0 0 12px; color:var(--green); font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.family-name { margin:0 0 12px; color:var(--green); font-size:.82rem; font-weight:800; letter-spacing:.04em; }
h1 { margin:0 0 14px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,7vw,3.4rem); font-weight:500; line-height:1.03; letter-spacing:-.035em; }
.context { color:var(--muted); font-size:1.05rem; line-height:1.55; }
.field { display:grid; gap:8px; margin:20px 0; color:#394038; font-size:.9rem; font-weight:700; }
.field input,.field textarea,.composer textarea { width:100%; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); padding:14px 16px; outline:none; transition:border-color .15s,box-shadow .15s; }
.field input:focus,.field textarea:focus,.composer textarea:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(40,92,72,.12); }
.field input[inputmode="numeric"] { font-size:1.65rem; letter-spacing:.32em; text-align:center; font-variant-numeric:tabular-nums; }
.primary,.secondary,.text-button,.back { border:0; cursor:pointer; }
.primary { display:block; width:100%; margin-top:20px; padding:15px 20px; border-radius:14px; color:white; background:var(--green); font-weight:800; text-align:center; text-decoration:none; }
.primary:hover { background:var(--green-dark); }
.primary:disabled { opacity:.55; cursor:wait; }
.secondary { padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font-weight:750; }
.text-button,.back { display:block; margin:18px auto 0; padding:8px; color:var(--green); background:transparent; font-weight:750; }
.back { margin:0 0 18px; }
.form-error { color:var(--error); font-weight:700; line-height:1.4; }
.success { padding:14px; border-radius:12px; background:#e2eee5; color:var(--green-dark); }
.record-note { margin:24px 0 0; color:var(--muted); font-size:.83rem; line-height:1.45; }
.messages-shell,.thread-shell { width:min(100%,760px); min-height:100vh; margin:0 auto; padding:clamp(20px,5vw,48px); background:rgba(251,250,246,.9); border-inline:1px solid rgba(217,213,201,.7); }
.messages-shell.narrow { max-width:620px; }
.messages-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.messages-header h1 { margin:0; }
.header-actions { display:flex; gap:10px; }
.settings-card { margin-top:28px; padding:20px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 4px 18px rgba(32,37,31,.04); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.toggle-row span { display:grid; gap:5px; }
.toggle-row small { color:var(--muted); font-weight:500; line-height:1.4; }
.toggle-row input { width:24px; height:24px; accent-color:var(--green); }
.thread-list,.message-list { list-style:none; margin:0; padding:0; }
.thread-list li { border-top:1px solid var(--line); }
.thread-list li:last-child { border-bottom:1px solid var(--line); }
.thread-list button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 4px; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.thread-list span:first-child { display:grid; min-width:0; gap:5px; }
.thread-list small { overflow:hidden; color:var(--muted); font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }
.thread-meta { min-width:30px; padding:5px 8px; border-radius:999px; background:#e1e8df; color:var(--green-dark); font-size:.78rem; font-weight:800; text-align:center; }
.empty { padding:56px 18px; color:var(--muted); text-align:center; }
.empty h2 { color:var(--ink); font-family:Georgia,serif; font-size:1.8rem; font-weight:500; }
.empty .primary { width:auto; margin:24px auto 0; }
.thread-header { position:sticky; top:0; z-index:2; padding:12px 0 18px; background:rgba(251,250,246,.96); backdrop-filter:blur(10px); }
.thread-header h1 { font-size:clamp(1.8rem,6vw,2.8rem); }
.message-list { display:grid; gap:14px; padding:8px 0 330px; }
.message-list li { padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 4px 18px rgba(32,37,31,.04); }
.message-list p { margin:9px 0 0; line-height:1.55; white-space:pre-wrap; }
.message-byline { display:flex; justify-content:space-between; gap:16px; color:var(--green-dark); font-size:.82rem; }
.message-byline time { color:var(--muted); font-weight:500; }
.composer { position:fixed; right:0; bottom:0; left:0; width:min(100%,760px); margin:auto; padding:14px clamp(20px,5vw,48px) calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(251,250,246,.97); }
.composer textarea { resize:none; }
.composer .primary { width:auto; margin:10px 0 0 auto; padding:11px 20px; }
.attachment-picker { display:grid; gap:8px; margin-top:10px; }
.attachment-button { position:relative; display:inline-flex; width:max-content; max-width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--green-dark); font-size:.85rem; font-weight:800; cursor:pointer; }
.attachment-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.retention-disclosure { margin:0; color:var(--muted); font-size:.75rem; line-height:1.35; }
.attachment-queue { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.attachment-queue li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.attachment-queue li span,.attachment-card span { display:grid; min-width:0; gap:2px; }
.attachment-queue strong,.attachment-card strong { overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.attachment-queue small,.attachment-card small { color:var(--muted); font-size:.72rem; }
.attachment-queue button { border:0; background:transparent; color:var(--error); font-size:.75rem; font-weight:800; cursor:pointer; }
.message-attachments { display:grid; gap:8px; margin-top:10px; }
.attachment-card { display:flex; align-items:center; gap:10px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper); text-decoration:none; }
.attachment-card img { width:64px; height:52px; border-radius:8px; object-fit:cover; }
.attachment-icon { place-items:center; width:52px; height:42px; border-radius:8px; background:#efe5df; color:var(--error); font-size:.68rem; font-weight:900; }
.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; }
@media (max-width:540px) { .auth-card { width:calc(100% - 20px); margin:10px auto; border-radius:22px; } .messages-header { align-items:start; flex-direction:column; } .header-actions { width:100%; } .messages-header .secondary { width:100%; } .message-byline { flex-direction:column; gap:3px; } }