/* Keep the authenticated identity inside the header at narrow widths. */
.topbar { gap:12px; }
.topbrand { min-width:0; }
#who { min-width:0; overflow-wrap:anywhere; flex-shrink:0; }

.filter-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.filter-grid > div { min-width:0; }
.filter-grid select { width:100%; max-width:100%; }
dialog { border:1px solid #d6cdc3; border-radius:18px; padding:24px; max-width:min(90vw,420px); color:inherit; background:#fffaf4; }
dialog::backdrop { background:#0006; }
@media(min-width:600px){ .filter-grid { grid-template-columns:1fr 1fr; } }
/* DM layout: preserve the existing warm palette, compact accessible controls. */
.dm-screen {display:flex;flex-direction:column;min-width:0;max-height:calc(var(--dm-viewport,100dvh) - 180px);padding-bottom:env(safe-area-inset-bottom,0px);gap:8px}
.dm-header {display:flex;align-items:center;gap:8px;flex-shrink:0}
.dm-header h1 {font-size:18px;line-height:1.4;margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.dm-icon,.dm-send {min-height:44px;min-width:44px;border:1px solid #b8aea4;border-radius:50%;background:#fffaf4;color:#3b3029;font-size:20px;flex-shrink:0}
.dm-send {background:#57483d;color:#fff;border-color:#57483d}
.dm-history {min-height:80px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;display:flex;flex-direction:column;gap:12px}
.dm-row {display:flex;gap:6px;align-items:flex-end;max-width:100%;flex-shrink:0}
.dm-own {flex-direction:row-reverse}
.dm-avatar {width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#e6ded4;color:#493b30;display:grid;place-items:center;overflow:hidden;font-size:12px}
.dm-avatar img {width:100%;height:100%;object-fit:cover}
.dm-stack {max-width:calc(100% - 52px);min-width:0}
.dm-bubble {padding:10px 12px;border-radius:16px 16px 16px 4px;background:#efe7dc;color:#30281f;border:1px solid #ded2c1}
.dm-own .dm-bubble {border-radius:16px 16px 4px 16px;background:#57483d;color:#fff;border-color:#57483d}
.dm-bubble p {margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.5}
.dm-stack time {font-size:10px;color:#665b50;display:block;margin:3px 4px}
.dm-own time {text-align:right}
.dm-composer {display:flex;align-items:flex-end;gap:8px;flex-shrink:0;margin:0}
.dm-composer textarea {flex:1;min-width:0;width:0;min-height:44px;max-height:min(30dvh,180px);resize:none;overflow-y:auto;line-height:1.5;padding:10px 12px;border-radius:22px;margin:0;box-sizing:border-box;overflow-wrap:anywhere}
.dm-status {font-size:11px;line-height:1.5;margin:0;flex-shrink:0;overflow-wrap:anywhere}
.dm-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}
.photo-preview {width:72px;height:72px;border-radius:50%;object-fit:cover;background:#e6ded4}
@media(max-height:500px){.dm-screen{max-height:calc(var(--dm-viewport,100dvh) - 100px)}.dm-status{font-size:10px}}

.dm-screen {height:var(--dm-space,auto);max-height:var(--dm-space,calc(100dvh - 180px));box-sizing:border-box}
/* My Account: optional private photo; native keyboard-operable chooser. */
.account-photo{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0}
.account-avatar{position:relative;align-self:center;width:112px;height:112px;min-width:112px;min-height:112px;border:2px solid #d3d0cd;border-radius:50%;background:#e8e6e4;overflow:hidden;padding:0;cursor:pointer}
.account-avatar:focus-visible{outline:3px solid #57483d;outline-offset:4px}
.avatar-silhouette{font-size:0;position:absolute;inset:0}
.avatar-silhouette::before{content:'';position:absolute;width:32px;height:32px;border-radius:50%;background:#8a8885;left:38px;top:23px}
.avatar-silhouette::after{content:'';position:absolute;width:66px;height:50px;border-radius:50% 50% 0 0;background:#8a8885;left:21px;top:61px}
.account-avatar-image{width:100%;height:100%;object-fit:cover}
.account-avatar [hidden]{display:none}
#account-email{overflow-wrap:anywhere}
.avatar-crop-editor{min-width:0;display:grid;gap:12px;justify-items:center}
.avatar-crop-editor[hidden],.account-photo [hidden]{display:none!important}
.avatar-crop-canvas{display:block;width:min(100%,280px);height:auto;aspect-ratio:1;border-radius:50%;border:2px solid #bdb7ae;touch-action:none;cursor:grab}
.avatar-crop-canvas:focus-visible{outline:3px solid #57483d;outline-offset:3px}
.avatar-crop-editor label{width:100%;display:grid;gap:6px}
.avatar-crop-editor input[type=range]{width:100%;min-height:44px;padding:0;accent-color:#57483d}

.crop-nudge{display:flex;gap:8px;flex-wrap:wrap}.crop-nudge button{min-width:44px;min-height:44px;flex:1} [tabindex="-1"]:focus{outline:2px solid currentColor;outline-offset:4px}