/* A quiet letterbox: complete questions out, short personal replies back. */
.letter-card{width:min(460px,100%);min-height:0;max-height:calc(100dvh - max(10px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)));gap:12px;padding:20px;background:linear-gradient(140deg,#fffdf8,#fcfaf3);border:1px solid #f5edd9;border-radius:24px;box-shadow:0 22px 70px #09242a55}
.letter-card-head{padding-bottom:10px;border-bottom:1px solid #e1e9df;gap:10px;flex:none}
.letter-card-head img{width:54px;height:58px;object-position:bottom}
.letter-card-head h2{font-size:1.3rem;line-height:1.15}
.letter-card-head small{font-size:.69rem;line-height:1.25;display:block}
.letter-close{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;background:transparent;color:#547a73;border-radius:50%;font-size:1.6rem}
.letter-close:hover{background:#eaf2eb}
.letter-writing,.letter-exchange{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.letter-topics{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border-radius:13px;background:#edf2ea;flex:none}
.letter-topics button{min-height:44px;border:0;border-radius:10px;background:transparent;color:#577970;font-size:.83rem;font-weight:800;padding:7px}
.letter-topics button[aria-pressed=true]{background:#fffefb;color:#254f49;box-shadow:0 1px 4px #345d4215}
.letter-prompt{margin:0;color:#59756d;font-size:.8rem;line-height:1.35}
.letter-questions{display:grid;gap:7px;flex:none}
.letter-questions button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:10px 12px;border:1px solid #cfdfd3;border-radius:13px;background:#fffefb;text-align:left;font:800 .88rem/1.3 'Nunito',sans-serif;color:#254e4a;transition:background .15s,border-color .15s}
.letter-questions button>span:first-child{min-width:0}
.letter-questions button>span:last-child{display:grid;place-items:center;flex:none;width:26px;height:26px;color:#789c8a}
.letter-questions svg{display:block;width:24px;height:24px}
.letter-questions button:hover{background:#eff6ee;border-color:#86ac98}
.letter-questions button:active{background:#dfeee2}
.letter-pagination{display:flex;align-items:center;justify-content:space-between;gap:4px;flex:none;color:#678279;font-size:.74rem}
.letter-pagination button{min-height:44px;min-width:44px;border:0;border-radius:9px;padding:7px 9px;background:transparent;color:#38675c;font-weight:800;font-size:.78rem}
.letter-pagination button:hover:not(:disabled){background:#e9f0e6}
.letter-pagination button:disabled{color:#82928a;opacity:.5;cursor:default}
.letter-question,.letter-answer{padding:13px 15px;border-radius:15px;flex:none}
.letter-question{margin-left:24px;background:#e6eee5;border:1px solid #d7e2d4;border-bottom-right-radius:4px}
.letter-answer{margin-right:12px;background:#fffefc;border:1px solid #e7ddc7;border-bottom-left-radius:4px;box-shadow:0 3px 8px #8b794509}
.letter-exchange small{display:block;color:#668071;font-size:.68rem;font-weight:800;line-height:1.3;margin-bottom:5px}
.letter-question p{margin:0;font-size:.85rem;line-height:1.4;font-weight:700;color:#31584d}
.letter-answer p{margin:0;font-size:.96rem;line-height:1.5;min-height:4.5em;color:#31524c}
.letter-answer p:focus{outline:0}
.letter-answer p:focus-visible{outline:2px solid #7da58b;outline-offset:5px;border-radius:2px}
.letter-sources{display:flex;flex-wrap:wrap;gap:2px 12px;flex:none}
.letter-sources a{display:inline-flex;align-items:center;min-height:44px;font-size:.7rem;color:#547567;text-underline-offset:3px}
.letter-actions{display:flex;gap:6px;flex:none;flex-wrap:wrap;padding-top:2px}
.letter-actions>button{min-height:44px;min-width:0;flex:1 1 40%;font-size:.83rem;border-radius:12px;font-weight:800;line-height:1.2;padding:10px 8px}
.letter-compose,.letter-back{border:1px solid #cbdcce;background:transparent;color:#416f60}
.letter-compose:hover,.letter-back:hover{background:#eaf2e6}
.letter-overlay[data-view=mail] .letter-actions{flex-direction:column}
.letter-overlay[data-view=reply] .letter-answer{animation:letter-reply-in .22s ease-out}
@keyframes letter-reply-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.letter-overlay [hidden]{display:none!important}
@media(max-height:660px),(max-width:360px){.letter-card{gap:8px;padding:12px}.letter-card-head{padding-bottom:6px;gap:7px}.letter-card-head img{width:42px;height:46px}.letter-card-head h2{font-size:1.12rem}.letter-writing,.letter-exchange{gap:6px}.letter-questions{gap:5px}.letter-questions button{min-height:48px;padding:8px 10px;font-size:.82rem}.letter-question,.letter-answer{padding:10px 12px}.letter-answer p{font-size:.88rem;line-height:1.4}.letter-exchange small{margin-bottom:4px}.letter-question p{font-size:.8rem}.letter-topics{padding:1px}.letter-pagination button,.letter-actions>button{font-size:.76rem}}
@media(prefers-reduced-motion:reduce){.letter-overlay[data-view=reply] .letter-answer{animation:none}.letter-questions button{transition:none}}

/* The envelope opens an inbox; composing is an action of the inbox, never of a doctor's letter. */
.letter-card{background:#fff;border-color:#d9e7e4;color:#17353d}
.letter-card-head{border-bottom-color:#d9e7e4}
.letter-card-head small{color:#557277;font-weight:600;font-size:.75rem}
.letter-card-head h2{color:#173e48}
.letter-inbox-icon{display:grid;place-items:center;flex:none;width:50px;height:54px}
.letter-inbox-icon svg{width:40px;height:40px}
.letter-inbox{display:flex;flex-direction:column;min-height:0;gap:12px}
.letter-inbox>.letter-compose{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 14px;border:0;border-radius:12px;background:#173e48;color:white;font:800 .88rem/1.3 'DM Sans',sans-serif;flex:none}
.letter-inbox>.letter-compose:hover{background:#245b60}
.letter-compose svg{width:21px;height:21px;flex:none}
.letter-list{display:flex;flex-direction:column;min-height:0}
.letter-list-heading{margin:0;padding:3px 1px 7px;font:700 .75rem/1.3 'DM Sans',sans-serif;color:#557277}
.letter-row+.letter-list-heading{padding-top:12px}
.letter-row{display:flex;align-items:center;gap:10px;min-height:86px;padding:12px 9px;width:100%;border:0;border-top:1px solid #d9e7e4;border-radius:0;background:transparent;color:#17353d;text-align:left;flex:none}
.letter-row:hover{background:#f0f7f4}
.letter-row[data-unread=true]{background:#edf7f3;border-top-color:#d5e8e0}
.letter-row[data-unread=true]:hover{background:#e0f0e9}
.letter-row>img{width:36px;height:42px;object-fit:contain;flex:none;align-self:center}
.letter-row-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.letter-row-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1px 8px;font:400 .72rem/1.25 'DM Sans',sans-serif}
.letter-row-meta strong{font-weight:600;color:#35595c}
.letter-row-date{color:#557277;font-size:.68rem}
.letter-row-subject{font:600 .9rem/1.25 'Nunito',sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.letter-row[data-unread=true] .letter-row-subject{font-weight:900}
.letter-row-preview{font:400 .75rem/1.3 'DM Sans',sans-serif;color:#557277;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.letter-row-status{font-size:1rem;color:#236c63;flex:none;width:12px;text-align:center}
.letter-row[data-unread=true] .letter-row-status{font-size:.65rem}
.letter-pause{flex:none;align-self:center;font-size:.72rem;color:#557277;padding-top:2px}
.letter-overlay[data-view=inbox] .letter-card{gap:12px}
.letter-overlay[data-view=mail] .letter-actions{flex-direction:row}
.letter-body{overflow:auto;overscroll-behavior:contain;min-height:0;font-size:.93rem;line-height:1.5}
.letter-exchange .letter-answer{margin-right:0;border-radius:12px;border-color:#d9e7e4;box-shadow:none}
.letter-exchange .letter-question{margin-left:0;border-radius:12px;background:#edf7f3;border-color:#d9e7e4}
@media(max-height:660px),(max-width:360px){.letter-inbox{gap:9px}.letter-inbox-icon{width:40px;height:44px}.letter-inbox-icon svg{width:34px;height:34px}.letter-row{gap:8px;min-height:80px;padding:10px 7px}.letter-row>img{width:30px;height:38px}.letter-row-meta{font-size:.7rem}.letter-row-subject{font-size:.85rem}.letter-row-preview{font-size:.72rem}.letter-card-head small{font-size:.7rem}.letter-inbox>.letter-compose{font-size:.82rem}.letter-body{font-size:.86rem;line-height:1.4}}
@media(max-height:440px){.letter-card{gap:6px}.letter-card-head{padding-bottom:4px}.letter-card-head img{width:32px;height:36px}.letter-inbox-icon{height:32px}.letter-inbox{gap:6px}.letter-overlay[data-view=inbox] .letter-card{gap:6px}}