/* ═══════════════════════════════════════════════════════════════════
   Private messages (dm-) — pages/messages.php · inc/dm.php · parts/dm.js
   Desktop: two panes in a card · ≤760px: list page → full-screen thread
   ═══════════════════════════════════════════════════════════════════ */
.dm{--dm-me1:#1F7A43;--dm-me2:#14532D;--dm-them:#fff;--dm-bg:#FAF8F3;--dm-field:#F3F1EA;--dm-r:20px;--dm-rs:6px;
  display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  height:calc(100vh - var(--hdr) - 40px);height:calc(100dvh - var(--hdr) - 40px);min-height:520px;margin:20px 0;
  background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-2);overflow:hidden;position:relative}
body.dm-page main{min-height:0}
.dm *{-webkit-tap-highlight-color:transparent}
.dm-icon-btn{display:inline-grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);font-size:18px;cursor:pointer;transition:background .15s,color .15s;list-style:none}
.dm-icon-btn::-webkit-details-marker{display:none}
.dm-icon-btn:hover{background:var(--paper);color:var(--ink)}
.dm-icon-btn.sm{width:32px;height:32px;font-size:15px}
.dm :focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.dm-empty-ico{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mint);color:var(--leaf-2);font-size:24px;margin-bottom:10px}
.dm-empty-ico.lg{width:84px;height:84px;font-size:36px;margin-bottom:16px;background:radial-gradient(circle at 30% 25%,#F0FDF4,#DCFCE7)}

/* ── Conversation list ─────────────────────────────────────────── */
.dm-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line-2);background:#fff}
.dm-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 16px 10px 20px}
.dm-side-head h1{font-size:26px;margin:0;letter-spacing:-.02em}
.dm-new{position:relative}
.dm-new>summary{background:var(--paper);color:var(--forest)}
.dm-new[open]>summary{background:var(--forest);color:#fff}
.dm-new-form{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:290px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3)}
.dm-new-form label{display:block;font:600 13px var(--ui);color:var(--muted);margin-bottom:8px}
.dm-new-row{display:flex;gap:8px}
.dm-new-row input[type=text]{min-height:38px;padding:7px 12px;font-size:14.5px}
.dm-tools-row{padding:0 14px 6px}
.dm-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--dm-field);color:var(--muted);border:1px solid transparent;transition:border-color .15s,background .15s}
.dm-search:focus-within{background:#fff;border-color:#BBF7D0;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.dm-search input[type=search]{border:0!important;background:transparent!important;box-shadow:none!important;min-height:36px;padding:0;font-size:14.5px;outline:none}
.dm-search input::-webkit-search-cancel-button{opacity:.6}
.dm-tabs{display:flex;gap:6px;margin-top:10px}
.dm-tabs button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:600 13px var(--ui);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.dm-tabs button:hover{border-color:#C9C3B2}
.dm-tabs button.on{background:var(--forest);border-color:var(--forest);color:#fff}
.dm-tabs b{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--leaf);color:#fff;font:700 11px/18px var(--ui);text-align:center}
.dm-tabs .on b{background:var(--lime);color:var(--forest)}
.dm-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 8px 12px;display:flex;flex-direction:column;gap:1px}
.dm-ci{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;color:var(--ink);text-decoration:none;position:relative;transition:background .12s}
.dm-ci:hover{background:#F7F5EF;text-decoration:none}
.dm-ci.is-on{background:#EBF5EC}
.dm-ci[hidden]{display:none}
.dm-ci-av{position:relative;flex-shrink:0;display:block;line-height:0}
.dm-ci-av .avatar{display:block}
.dm-ci-av .avatar-i{display:grid;place-items:center;color:hsl(var(--hue) 55% 22%)}
.dm-on{position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:#22C55E;border:2.5px solid #fff;box-sizing:border-box}
.dm-on[hidden]{display:none}
.dm-ci-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dm-ci-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dm-ci-top b{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-ci-top time{flex-shrink:0;font-size:12px;color:var(--muted)}
.dm-ci-bot{display:flex;align-items:center;gap:8px;min-height:20px}
.dm-ci-prev{flex:1;min-width:0;font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-ci-typing{display:none;flex:1;font-size:13.5px;color:var(--leaf-2);font-weight:600}
.dm-ci.is-typing .dm-ci-prev{display:none}
.dm-ci.is-typing .dm-ci-typing{display:block}
.dm-ci.is-new .dm-ci-prev{color:var(--leaf-2)}
.dm-ci-n{flex-shrink:0;font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--leaf);color:#fff;font:700 11.5px/20px var(--ui);text-align:center}
.dm-ci.is-unread .dm-ci-top b{font-weight:750}
.dm-ci.is-unread .dm-ci-prev{color:var(--ink);font-weight:600}
.dm-ci.is-unread .dm-ci-top time{color:var(--leaf-2);font-weight:600}
.dm-list-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}
.dm-list-empty p{margin:0 0 14px}
.dm-list-empty b{color:var(--ink)}
.dm-list-none{padding:18px 20px;margin:0;color:var(--muted);font-size:14px;text-align:center}
.dm-ci-start{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;color:var(--forest);font-weight:600;font-size:14.5px}
.dm-ci-start i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--mint);font-size:18px}
.dm-ci-start:hover{background:#F7F5EF;text-decoration:none}

/* ── Thread pane ───────────────────────────────────────────────── */
.dm-pane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--dm-bg)}
.dm-head{display:flex;align-items:center;gap:10px;min-height:66px;padding:10px 12px 10px 16px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line-2);flex-shrink:0;position:relative;z-index:5}
@supports (backdrop-filter:blur(8px)){.dm-head{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}}
.dm-back{display:none;margin-left:-6px;color:var(--forest);font-size:20px}
.dm-head-av{position:relative;flex-shrink:0;line-height:0}
.dm-head-av .avatar{display:block}
.dm-head-av .avatar-i{display:grid;place-items:center}
.dm-head-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.dm-head-name{font-weight:650;font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-head-name:hover{color:var(--forest)}
.dm-head-status{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-head-status.is-on{color:#15803D;font-weight:600}
.dm-head-who .dt-chip-via{align-self:flex-start;margin-top:3px}
.dm-more .menu{right:0}

.dm-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;display:flex;flex-direction:column;padding:14px 18px 12px;outline:none;
  background:radial-gradient(900px 420px at 100% 0,rgba(220,252,231,.45),transparent 60%),radial-gradient(700px 400px at 0 100%,rgba(217,249,157,.18),transparent 60%),var(--dm-bg)}
.dm-scroll::before{content:"";flex:1 1 auto}
.dm-scroll>*{flex-shrink:0}
.dm-loader{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;font-size:12.5px;color:var(--muted)}
.dm-loader[hidden]{display:none}
.dm-spin{width:14px;height:14px;border-radius:50%;border:2px solid #D6E9D8;border-top-color:var(--leaf);animation:dmspin .8s linear infinite}
@keyframes dmspin{to{transform:rotate(360deg)}}
.dm-intro{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:26px 10px 18px}
.dm-intro[hidden]{display:none}
.dm-intro .avatar{display:block;margin-bottom:8px}
.dm-intro .avatar-i{display:grid;place-items:center}
.dm-intro b{font-size:18px;font-weight:650}
.dm-intro .btn{margin:8px 0 4px;border-radius:999px}
.dm-intro-hint{font-size:13px;color:var(--muted)}
.dm-day{align-self:center;margin:16px 0 8px;font:600 11.5px var(--ui);letter-spacing:.02em;color:var(--muted)}
.dm-day span{display:inline-block;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(20,40,25,.05)}

/* rows + bubbles */
.dm-row{display:flex;align-items:flex-end;gap:8px;margin-top:2px;position:relative}
.dm-row.g-first{margin-top:12px}
.dm-day+.dm-row,.dm-intro+.dm-row{margin-top:4px}
.dm-row.dm-me{flex-direction:row-reverse}
.dm-av{width:28px;flex-shrink:0;line-height:0;visibility:hidden}
.dm-av .avatar{display:block}
.dm-av .avatar-i{display:grid;place-items:center}
.dm-row.g-last .dm-av{visibility:visible;margin-bottom:21px}
.dm-row.g-last:has(.dm-reacts) .dm-av{margin-bottom:38px}
.dm-row.dm-typing .dm-av{margin-bottom:0}
.dm-stack{display:flex;flex-direction:column;align-items:flex-start;max-width:min(74%,560px);min-width:0}
.dm-row.dm-me .dm-stack{align-items:flex-end}
.dm-bubble{position:relative;padding:8px 13px;border-radius:var(--dm-r);background:var(--dm-them);color:var(--ink);font-size:15px;line-height:1.42;box-shadow:0 1px 1.5px rgba(20,40,25,.08),0 0 0 1px rgba(20,40,25,.035);overflow-wrap:anywhere;word-break:break-word;max-width:100%;outline-offset:3px}
.dm-row.dm-me .dm-bubble{background:linear-gradient(165deg,var(--dm-me1),var(--dm-me2));color:#fff;box-shadow:0 1px 2px rgba(20,83,45,.25)}
.dm-row.dm-them:not(.g-first) .dm-bubble{border-top-left-radius:var(--dm-rs)}
.dm-row.dm-them:not(.g-last) .dm-bubble{border-bottom-left-radius:var(--dm-rs)}
.dm-row.dm-me:not(.g-first) .dm-bubble{border-top-right-radius:var(--dm-rs)}
.dm-row.dm-me:not(.g-last) .dm-bubble{border-bottom-right-radius:var(--dm-rs)}
.dm-text p{margin:0 0 .4em}.dm-text p:last-child{margin:0}
.dm-text ul,.dm-text ol{margin:.2em 0;padding-left:18px}
.dm-text blockquote{margin:0 0 4px;padding-left:8px;border-left:2px solid currentColor;opacity:.85}
.dm-text a{color:var(--leaf-2);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-all}
.dm-row.dm-me .dm-text a{color:var(--lime)}
.dm-time{display:none;font-size:11px;color:var(--muted);margin:3px 6px 0;font-variant-numeric:tabular-nums}
.dm-row.g-last .dm-time{display:block}
.dm-row.dm-typing .dm-time{display:none}
/* emoji-only */
.dm-row.dm-emoji .dm-bubble{background:none!important;box-shadow:none!important;padding:0 2px;font-size:42px;line-height:1.15;color:var(--ink)}
/* photos */
.dm-row.dm-has-img .dm-bubble{padding:3px;width:min(300px,100%)}
.dm-row.dm-has-img .dm-text{padding:6px 10px 5px}
.dm-row.dm-img-only .dm-bubble{padding:0;background:none!important;box-shadow:none!important}
.dm-img{display:block;width:100%;max-height:380px;border-radius:calc(var(--dm-r) - 3px);overflow:hidden;background:#E9E6DC;cursor:zoom-in}
.dm-row.dm-img-only .dm-img{border-radius:var(--dm-r);box-shadow:0 1px 2px rgba(20,40,25,.12)}
.dm-row.dm-them.dm-img-only:not(.g-first) .dm-img{border-top-left-radius:var(--dm-rs)}
.dm-row.dm-them.dm-img-only:not(.g-last) .dm-img{border-bottom-left-radius:var(--dm-rs)}
.dm-row.dm-me.dm-img-only:not(.g-first) .dm-img{border-top-right-radius:var(--dm-rs)}
.dm-row.dm-me.dm-img-only:not(.g-last) .dm-img{border-bottom-right-radius:var(--dm-rs)}
.dm-img img{display:block;width:100%;height:100%;object-fit:cover}
/* unsent */
.dm-row.dm-unsent .dm-bubble{background:transparent!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:var(--muted)!important;font-size:13.5px;font-style:italic;padding:6px 12px}
.dm-unsent-t i{font-size:12px;margin-right:3px;opacity:.7}
/* reply quote */
.dm-quote{display:flex;flex-direction:column;align-items:flex-start;gap:1px;max-width:88%;margin:0 0 -8px;padding:6px 12px 13px;border:0;border-radius:16px;background:rgba(20,40,25,.055);color:var(--ink-2);font:400 13px/1.35 var(--ui);text-align:left;cursor:pointer;opacity:.95}
.dm-row.dm-me .dm-quote{align-items:flex-end;text-align:right;background:rgba(20,83,45,.1)}
.dm-quote:hover{background:rgba(20,40,25,.1)}
.dm-quote-who{font-weight:650;font-size:12px;color:var(--muted)}
.dm-quote-who i{font-size:10px;margin-right:2px}
.dm-quote-txt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* reactions */
.dm-reacts{display:flex;gap:4px;margin:-7px 8px 0;position:relative;z-index:1}
.dm-rc{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 7px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 12px var(--ui);color:var(--ink-2);cursor:pointer;box-shadow:0 1px 2px rgba(20,40,25,.08);transition:transform .12s}
.dm-rc span{font-size:14px;line-height:1}
.dm-rc.mine{border-color:#86EFAC;background:#F0FDF4}
.dm-rc:hover{transform:scale(1.06)}
.dm-reacts:empty{display:none}
/* status, highlight, pending */
.dm-status{align-self:flex-end;font-size:11.5px;color:var(--muted);margin:3px 4px 0;font-weight:500}
.dm-status.is-seen{color:var(--leaf-2)}
.dm-status[hidden]{display:none}
.dm-row.dm-pending .dm-bubble{opacity:.7}
.dm-row.dm-failed .dm-bubble{opacity:.6;background:linear-gradient(165deg,#9F1239,#881337)}
.dm-fail{display:flex;align-items:center;gap:6px;margin:4px 4px 0;font-size:12px;color:var(--berry);font-weight:600}
.dm-fail button{border:0;background:none;padding:0;color:var(--berry);font:700 12px var(--ui);text-decoration:underline;cursor:pointer}
.dm-row.dm-flash .dm-bubble{animation:dmflash 1.4s ease}
@keyframes dmflash{0%,40%{box-shadow:0 0 0 4px rgba(190,242,100,.95)}100%{box-shadow:0 0 0 0 rgba(190,242,100,0)}}
/* typing */
.dm-typing .dm-bubble{padding:12px 14px}
.dm-dots{display:inline-flex;gap:4px;align-items:center;height:10px}
.dm-dots i{width:7px;height:7px;border-radius:50%;background:#9CA79F;animation:dmdot 1.2s infinite ease-in-out}
.dm-dots i:nth-child(2){animation-delay:.15s}.dm-dots i:nth-child(3){animation-delay:.3s}
@keyframes dmdot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
.dm-typing[hidden]{display:none}

/* hover tools (desktop) */
.dm-hover{display:flex;align-items:center;gap:2px;align-self:center;opacity:0;transition:opacity .12s;margin:0 2px}
.dm-row:hover .dm-hover,.dm-row:focus-within .dm-hover,.dm-hover.keep{opacity:1}
.dm-hover button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:14px;cursor:pointer}
.dm-hover button:hover{background:rgba(20,40,25,.07);color:var(--ink)}
.dm-row.dm-pending .dm-hover,.dm-row.dm-unsent .dm-hover,.dm-row.dm-typing .dm-hover{display:none}

/* message menu (reactions + actions) */
.dm-pop{position:fixed;z-index:1300;min-width:220px;max-width:calc(100vw - 24px);background:#fff;border-radius:18px;box-shadow:0 18px 50px -12px rgba(20,40,25,.35),0 0 0 1px rgba(20,40,25,.06);padding:6px;transform-origin:var(--ox,50%) var(--oy,100%)}
.dm-pop-r{display:flex;gap:2px;padding:2px}
.dm-pop-r button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;transition:transform .12s,background .12s}
.dm-pop-r button:hover,.dm-pop-r button:focus-visible{background:var(--paper);transform:scale(1.15)}
.dm-pop-r button.on{background:#DCFCE7}
.dm-pop-a{border-top:1px solid var(--line-2);margin-top:4px;padding-top:4px}
.dm-pop-a button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:none;color:var(--ink);font:500 14.5px var(--ui);text-align:left;cursor:pointer}
.dm-pop-a button i{width:18px;text-align:center;color:var(--muted)}
.dm-pop-a button:hover,.dm-pop-a button:focus-visible{background:var(--paper)}
.dm-pop-a .dm-danger,.dm-pop-a .dm-danger i{color:var(--berry)}
.dm-pop-t{padding:4px 12px 2px;font-size:11.5px;color:var(--muted)}
.dm-pop-scrim{position:fixed;inset:0;z-index:1299;background:rgba(15,30,20,.18)}
.dm-burst{position:absolute;z-index:3;font-size:44px;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%)}

.dm-newpill{position:absolute;left:50%;bottom:calc(var(--dm-cbh,72px) + 12px);transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--forest);color:#fff;font:600 13.5px var(--ui);box-shadow:0 8px 20px -6px rgba(20,83,45,.5);cursor:pointer}
.dm-newpill[hidden]{display:none}
.dm-newpill.is-down span{display:none}
.dm-newpill.is-down{width:38px;padding:0;justify-content:center;background:#fff;color:var(--forest);box-shadow:0 4px 14px -4px rgba(20,40,25,.3),0 0 0 1px var(--line)}

/* blocked / scam notes */
.dm-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#FFFBEB;color:#92400E;font-size:14px;flex-shrink:0}
.dm-pane .dt-scam{margin:0 12px 8px;flex-shrink:0}

/* ── Composer ──────────────────────────────────────────────────── */
.dm-composer{position:relative;flex-shrink:0;background:#fff;border-top:1px solid var(--line-2);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.dm-cbar{display:flex;align-items:flex-end;gap:6px}
.dm-photo-btn{color:var(--leaf-2);font-size:20px;margin-bottom:1px;position:relative;overflow:hidden}
.dm-photo-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dm-photo-btn:focus-within{outline:2px solid var(--leaf);outline-offset:1px}
.dm-field{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;background:var(--dm-field);border:1px solid transparent;border-radius:22px;padding:0 4px 0 15px;transition:border-color .15s,background .15s,box-shadow .15s}
.dm-field:focus-within{background:#fff;border-color:#BBF7D0;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.dm-field textarea{flex:1;min-width:0;display:block;min-height:42px;max-height:144px;height:42px;padding:10px 0;margin:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;outline:none;resize:none;font-size:15.5px;line-height:1.4;overflow-y:auto}
.dm-emoji-btn{margin-bottom:5px;color:var(--muted)}
.dm-emoji-btn[aria-expanded=true]{color:var(--leaf-2);background:#DCFCE7}
.dm-send{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:50%;border:0;background:var(--forest);color:#fff;font-size:16px;cursor:pointer;transition:background .15s,transform .12s,color .15s}
.dm-send:hover{background:var(--forest-2)}
.dm-send:active{transform:scale(.92)}
.dm-send:disabled{background:#E9E6DD;color:#A8AEA6;cursor:default;transform:none}
.dm-send i{transform:translateX(-1px)}
.dm-replybar,.dm-attach{display:flex;align-items:center;gap:10px;margin:0 2px 8px;padding:8px 6px 8px 12px;border-radius:14px;background:var(--paper);font-size:13px}
.dm-replybar[hidden],.dm-attach[hidden]{display:none}
.dm-replybar>i{color:var(--leaf-2)}
.dm-replybar>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dm-replybar b{font-size:12.5px;color:var(--forest)}
.dm-replybar span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-attach-img{width:46px;height:46px;border-radius:10px;overflow:hidden;background:#E9E6DC;flex-shrink:0}
.dm-attach-img img{display:block;width:100%;height:100%;object-fit:cover}
.dm-attach-meta{flex:1;min-width:0;color:var(--ink-2);font-weight:500}
.dm-attach.is-busy .dm-attach-meta::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-2px;border-radius:50%;border:2px solid #D6E9D8;border-top-color:var(--leaf);animation:dmspin .8s linear infinite}
.dm-emoji-pick{position:absolute;right:10px;bottom:calc(100% + 6px);z-index:20;width:min(340px,calc(100vw - 20px));padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;background:#fff;border-radius:18px;box-shadow:0 18px 50px -12px rgba(20,40,25,.35),0 0 0 1px rgba(20,40,25,.06)}
.dm-emoji-pick[hidden]{display:none}
.dm-emoji-pick button{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:10px;background:none;font-size:22px;line-height:1;cursor:pointer;padding:0}
.dm-emoji-pick button:hover,.dm-emoji-pick button:focus-visible{background:var(--paper)}
.dm-drop-hint{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(240,253,244,.88);border:2px dashed var(--leaf);border-radius:inherit;color:var(--forest);font:600 16px var(--ui);pointer-events:none}

/* empty pane */
.dm-pane-empty{margin:auto;text-align:center;max-width:400px;padding:30px}
.dm-pane-empty h2{font-size:26px;margin:0 0 8px}
.dm-pane-empty p{margin:0 0 18px}

/* ── Motion (only when allowed) ────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .dm-row.dm-in .dm-stack{animation:dmin .22s cubic-bezier(.2,.8,.3,1)}
  @keyframes dmin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  .dm-pop{animation:dmpop .16s cubic-bezier(.2,.8,.3,1.2)}
  @keyframes dmpop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
  .dm-reacts .dm-rc.dm-new{animation:dmrc .3s cubic-bezier(.2,.8,.3,1.4)}
  @keyframes dmrc{from{transform:scale(.3)}to{transform:scale(1)}}
  .dm-burst{animation:dmburst .7s ease-out forwards}
  @keyframes dmburst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
  .dm-stack{transition:transform .18s ease}
}
@media (prefers-reduced-motion:reduce){.dm-dots i,.dm-spin{animation-duration:2.4s}}
.dm-swipe-ico{position:absolute;left:4px;top:50%;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--leaf-2);box-shadow:var(--sh-1);opacity:0;pointer-events:none}

/* ── Tablets (app shell, tab bar visible) ──────────────────────── */
@media (max-width:1180px){.dm{grid-template-columns:300px minmax(0,1fr)}}
@media (max-width:1020px){
  .dm{height:calc(100vh - var(--hdr) - var(--tbh,62px) - 24px);height:calc(100dvh - var(--hdr) - env(safe-area-inset-top) - var(--tbh,62px) - 24px);margin:12px 0}
  body.dm-page.has-thread{padding-bottom:0}
  body.dm-page.has-thread .tabbar{display:none}
  body.dm-page.has-thread .dm{height:calc(100vh - var(--hdr) - 24px);height:calc(100dvh - var(--hdr) - env(safe-area-inset-top) - 24px)}
}

/* ── Phones: list page → full-screen thread ────────────────────── */
@media (max-width:760px){
  body.dm-page .dm-wrap{padding:0}
  .dm{display:block;height:auto;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
  .dm-side{border:0;background:transparent}
  .dm-side-head{padding:14px 16px 8px}
  .dm-side-head h1{font-size:28px}
  .dm-tools-row{padding:0 16px 6px}
  .dm-search{background:#fff;border-color:var(--line-2)}
  .dm-list{overflow:visible;padding:4px 8px calc(16px + var(--tbh,0px))}
  .dm-ci{padding:10px 8px}
  .dm-ci.is-on{background:transparent}
  .dm.has-thread .dm-side{display:none}
  .dm:not(.has-thread) .dm-pane{display:none}
  /* the thread takes the whole screen (keyboard-aware height from dm.js: --dm-vh / --dm-vt) */
  body.dm-page.has-thread{overflow:hidden;padding-bottom:0}
  body.dm-page.has-thread .abar,body.dm-page.has-thread .tabbar,body.dm-page.has-thread .ftr{display:none!important}
  .dm.has-thread .dm-pane{position:fixed;left:0;right:0;top:var(--dm-vt,0px);height:100vh;height:var(--dm-vh,100dvh);z-index:1060;background:var(--dm-bg)}
  .dm-head{padding:calc(6px + env(safe-area-inset-top)) 6px 6px 8px;min-height:calc(58px + env(safe-area-inset-top));gap:8px}
  .dm-back{display:inline-grid}
  .dm-head-av .avatar{width:36px!important;height:36px!important}
  .dm-head-name{font-size:15.5px}
  .dm-scroll{padding:10px 10px 10px}
  .dm-stack{max-width:78%}
  .dm-row.dm-has-img .dm-bubble{width:min(260px,100%)}
  .dm-composer{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .dm-field textarea{font-size:16px}
  .dm-new-form{position:fixed;left:12px;right:12px;top:calc(var(--hdr) + env(safe-area-inset-top) + 64px);width:auto}
  .dm-pop{min-width:0}
}
@media (max-width:760px) and (hover:none){.dm-hover{display:none}}
.dm-field textarea:focus-visible,.dm-search input:focus-visible,.dm-scroll:focus-visible{outline:none}
.dm-scroll:focus-visible{box-shadow:inset 0 0 0 2px rgba(22,163,74,.35)}