/* Escargo Drive — Messages. Page-local, scoped under .dm-wrap.
   Uses the existing workspace tokens with literal fallbacks (same pattern as
   drive.js), so a cached shell still renders the intended colours. No new
   button/card/spacing system — UI FREEZE. */

.dm-wrap{max-width:1240px;margin:0 auto;padding:18px 16px 90px}
.dm-h1{font-size:clamp(1.5rem,3.6vw,2rem);letter-spacing:-.02em;margin:4px 0 16px}

/* ── inbox ─────────────────────────────────────────────────────────────── */
.dm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dm-row{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit;
  border:1px solid var(--ew-line,#dfe6de);border-radius:14px;background:var(--ew-surface,#fff);
  padding:13px 14px;min-height:64px}
.dm-row:hover{border-color:var(--ew-forest,#14311f)}
.dm-row:focus-visible{outline:3px solid var(--ew-lime,#d9ff4d);outline-offset:2px}
.dm-row.is-unread{background:var(--ew-surface-2,#f4f8f1)}
.dm-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--ew-forest,#14311f);color:#fff;font:800 15px Inter,sans-serif}
.dm-rowmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dm-rowtop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.dm-rowtop b{font-size:15px;letter-spacing:-.01em}
.dm-when{color:var(--ew-muted,#69736f);font-size:12px;white-space:nowrap}
.dm-ctx{color:var(--ew-muted,#69736f);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-prev{font-size:13.5px;color:#3c4741;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-row.is-unread .dm-prev{font-weight:700;color:#17201b}
.dm-badge{flex:0 0 auto;min-width:22px;height:22px;border-radius:999px;background:var(--ew-forest,#14311f);
  color:#fff;font:800 11px Inter,sans-serif;display:grid;place-items:center;padding:0 6px;align-self:center}

/* ── thread ────────────────────────────────────────────────────────────── */
.dm-wrap.is-thread{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.dm-thread{display:flex;flex-direction:column;min-height:70vh;border:1px solid var(--ew-line,#dfe6de);
  border-radius:16px;background:var(--ew-surface,#fff);overflow:hidden}
.dm-thead{display:flex;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--ew-line,#dfe6de);
  position:sticky;top:0;background:var(--ew-surface,#fff);z-index:2}
.dm-theadmain{flex:1;min-width:0;display:flex;flex-direction:column}
.dm-theadmain b{font-size:15px}
.dm-back{font:700 13px Inter,sans-serif;color:var(--ew-forest,#14311f);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center;padding-right:4px}
.dm-scroll{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;max-height:60vh}
.dm-day{align-self:center;font:700 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ew-muted,#69736f);margin:6px 0}
.dm-msg{max-width:76%;align-self:flex-start;display:flex;flex-direction:column;gap:3px}
.dm-msg.is-mine{align-self:flex-end;align-items:flex-end}
.dm-bub{padding:10px 13px;border-radius:16px 16px 16px 4px;background:var(--ew-surface-2,#f1f5ef);
  font-size:14.5px;line-height:1.45;word-break:break-word}
.dm-msg.is-mine .dm-bub{background:var(--ew-forest,#14311f);color:#fff;border-radius:16px 16px 4px 16px}
.dm-meta{font-size:11px;color:var(--ew-muted,#69736f)}

/* System events are CARDS, never bubbles: they were not written by a person. */
.dm-sys{align-self:center;max-width:92%;text-align:center;border:1px dashed var(--ew-line,#dfe6de);
  border-radius:12px;padding:8px 14px;background:#fbfcfa;display:flex;flex-direction:column;gap:2px}
.dm-sys b{font-size:13px}
.dm-sys span{font-size:12px;color:var(--ew-muted,#69736f)}
.dm-callpill{align-self:center;display:inline-flex;gap:8px;align-items:center;border:1px solid var(--ew-line,#dfe6de);
  border-radius:999px;padding:6px 14px;font:700 12.5px Inter,sans-serif;background:#fbfcfa}
.dm-callpill .dm-t,.dm-sys .dm-t{color:var(--ew-muted,#69736f);font-weight:400}
.dm-ico{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ew-muted,#69736f)}

/* ── quick replies + composer ──────────────────────────────────────────── */
.dm-qr{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;border-top:1px solid var(--ew-line,#dfe6de);
  scrollbar-width:thin}
.dm-chip{flex:0 0 auto;border:1px solid var(--ew-line,#dfe6de);background:#fff;border-radius:999px;
  padding:9px 14px;font:700 13px Inter,sans-serif;cursor:pointer;min-height:40px}
.dm-chip:hover{border-color:var(--ew-forest,#14311f)}
.dm-compose{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--ew-line,#dfe6de);
  position:sticky;bottom:0;background:var(--ew-surface,#fff)}
.dm-compose input{flex:1;min-height:44px;padding:10px 13px;border:1px solid var(--ew-line,#dfe6de);
  border-radius:12px;font-size:16px}   /* 16px floor: anything smaller zooms iOS on focus */
.dm-closed{margin:0;padding:14px;border-top:1px solid var(--ew-line,#dfe6de);color:var(--ew-muted,#69736f);font-size:13.5px}
.dm-err{margin:0;padding:10px 14px;color:#8c2f2f;font-size:13px}

/* ── context panel ─────────────────────────────────────────────────────── */
.dm-ctxpanel{border:1px solid var(--ew-line,#dfe6de);border-radius:16px;background:var(--ew-surface,#fff);
  padding:16px;position:sticky;top:16px}
.dm-ctxpanel h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ew-muted,#69736f);margin:0 0 10px}
.dm-ctxpanel dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px}
.dm-ctxpanel dt{font:700 12px Inter,sans-serif;color:var(--ew-muted,#69736f)}
.dm-ctxpanel dd{margin:0;font-size:13.5px}
.dm-note{font-size:12px;color:var(--ew-muted,#69736f);margin:10px 0 0;line-height:1.45}

/* ── buttons ───────────────────────────────────────────────────────────── */
.dm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;
  border:1px solid var(--ew-line,#dfe6de);border-radius:12px;background:#fff;color:inherit;
  font:700 13.5px Inter,sans-serif;cursor:pointer;text-decoration:none}
.dm-btn.dm-primary{background:var(--ew-forest,#14311f);color:#fff;border-color:var(--ew-forest,#14311f)}
.dm-btn.dm-sm{min-height:40px;padding:0 13px;font-size:13px}
.dm-empty{text-align:center;max-width:44ch;margin:8vh auto;display:flex;flex-direction:column;gap:12px;align-items:center}
.dm-empty h1{font-size:1.4rem;margin:0}
.dm-empty p{color:var(--ew-muted,#69736f);margin:0;line-height:1.5}

/* ── call overlay ──────────────────────────────────────────────────────── */
.dm-callwrap{position:fixed;inset:0;background:rgba(10,20,14,.72);display:grid;place-items:center;z-index:80;padding:20px}
.dm-callcard{width:min(360px,100%);background:#fff;border-radius:22px;padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;gap:10px;align-items:center}
.dm-callav{width:72px;height:72px;border-radius:50%;background:var(--ew-forest,#14311f);color:#fff;
  display:grid;place-items:center;font:800 26px Inter,sans-serif}
.dm-callcard h2{margin:0;font-size:1.15rem}
.dm-callctx{margin:0;color:var(--ew-muted,#69736f);font-size:12.5px}
.dm-callstate{margin:6px 0 2px;display:flex;flex-direction:column;gap:4px}
.dm-callstate b{font-size:15px}
.dm-calltime{font:700 22px Inter,sans-serif;font-variant-numeric:tabular-nums}
.dm-callsub{font-size:12.5px;color:var(--ew-muted,#69736f);line-height:1.45}
.dm-callcard[data-state="failed"] .dm-callsub,.dm-callcard[data-state="missed"] .dm-callsub{color:#8c2f2f}
.dm-callctl{display:flex;gap:10px;margin-top:8px}
.dm-cbtn{min-width:78px;min-height:48px;border-radius:14px;border:1px solid var(--ew-line,#dfe6de);
  background:#fff;font:700 13px Inter,sans-serif;cursor:pointer}
.dm-cbtn.is-on{background:var(--ew-forest,#14311f);color:#fff;border-color:var(--ew-forest,#14311f)}
.dm-cbtn[disabled]{opacity:.45;cursor:not-allowed}
.dm-cbtn.dm-end{background:#8c2f2f;color:#fff;border-color:#8c2f2f}

/* ── responsive: inbox and thread are SEPARATE full-height views on mobile.
   Three desktop columns are never compressed into one phone viewport. ──── */
@media (max-width:1023px){
  .dm-wrap.is-thread{grid-template-columns:1fr}
  .dm-ctxpanel{position:static;order:-1}
  .dm-ctxpanel dl{grid-template-columns:auto 1fr}
}
@media (max-width:767px){
  .dm-wrap{padding:12px 12px 84px}
  .dm-scroll{max-height:none}
  .dm-thread{min-height:calc(100vh - 190px)}
  .dm-msg{max-width:86%}
  .dm-ctxpanel{padding:13px}
  .dm-callctl{width:100%}
  .dm-cbtn{flex:1}
}
@media (prefers-reduced-motion:reduce){ .dm-row,.dm-chip,.dm-btn{transition:none} }

/* ── attachments ────────────────────────────────────────────────────────── */
.dm-clip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;
  border:1px solid var(--ew-line,#dfe6de);border-radius:12px;background:#fff;cursor:pointer;
  font:700 13px Inter,sans-serif;white-space:nowrap}
.dm-clip:hover{border-color:var(--ew-forest,#14311f)}
.dm-clip:focus-within{outline:3px solid var(--ew-lime,#d9ff4d);outline-offset:2px}
.dm-att{max-width:280px;border-radius:14px;overflow:hidden;background:var(--ew-surface-2,#f1f5ef);
  border:1px solid var(--ew-line,#dfe6de)}
.dm-att img{display:block;width:100%;height:auto;min-height:80px;background:var(--ew-surface-2,#f1f5ef)}
.dm-att img[data-pending]{min-height:150px}
.dm-att.is-up,.dm-att.is-gone{display:flex;flex-direction:column;gap:8px;padding:14px;font-size:13px;
  color:var(--ew-muted,#69736f)}
.dm-attbar{display:block;height:5px;border-radius:999px;background:var(--ew-line,#dfe6de);overflow:hidden}
.dm-attbar i{display:block;height:100%;background:var(--ew-forest,#14311f);transition:width .25s}
.dm-attgone{font-size:12.5px;color:var(--ew-muted,#69736f);padding:12px;display:block}
@media (prefers-reduced-motion:reduce){ .dm-attbar i{transition:none} }

/* ── link-a-booking card ────────────────────────────────────────────────── */
.dm-linkcard{margin:18px auto 0;max-width:430px;border:1px solid var(--ew-line,#dfe6de);border-radius:16px;
  background:var(--ew-surface,#fff);padding:18px;display:flex;flex-direction:column;gap:8px;text-align:left}
.dm-linkcard b{font-size:15px}
.dm-linkcard p{margin:0;font-size:13.5px;color:var(--ew-muted,#69736f);line-height:1.5}
.dm-linkcard.is-done{border-color:var(--ew-forest,#14311f)}
.dm-linkform{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.dm-linkform input{min-height:44px;padding:10px 13px;border:1px solid var(--ew-line,#dfe6de);
  border-radius:12px;font-size:16px}  /* 16px floor — iOS zoom */

/* optimistic send: failed state is a real retry control, not decoration */
.dm-retry{border:0;background:none;color:#8c2f2f;font:700 11.5px Inter,sans-serif;
  cursor:pointer;padding:2px 0;text-decoration:underline}