/* Gloow Contacts — exact WhatsApp-style 3-pane messenger (rail · list · conversation+context).
   Ported 1:1 from the design kit (gloow.css), scoped under .msgr so the mock's generic class
   names (.list/.conv/.ctx/.bubble/.tab/.pill/.stat) never collide with the global app.css.
   The mock's palette maps onto the app's design tokens, so it renders pixel-exact in light and
   themes correctly in dark. The thin icon rail is the existing partials/sidebar (.side). */
.msgr{
  --m-surf:var(--surface); --m-surf2:var(--surface-2); --m-surf3:var(--surface-3);
  --m-ink:var(--ink); --m-head:var(--head); --m-muted:var(--muted); --m-muted2:var(--muted-2);
  --m-line:var(--border); --m-lineSoft:var(--border-soft);
  --m-pink:var(--acc); --m-pinkInk:var(--acc-ink); --m-pinkSoft:var(--acc-soft);
  --m-pinkLite:color-mix(in srgb,var(--acc) 8%, var(--surface));
  --m-blue:var(--blue); --m-blueInk:var(--blue-ink); --m-blueSoft:var(--blue-soft);
  --m-green:var(--success); --m-greenSoft:color-mix(in srgb,var(--success) 16%, var(--surface));
  --m-amber:var(--warning); --m-amberSoft:color-mix(in srgb,var(--warning) 18%, var(--surface));
  --m-purple:#7A4FB5; --m-purpleSoft:color-mix(in srgb,#7A4FB5 14%, var(--surface));
  --m-wa:#1FA855; --m-ig:#C026D3; --m-em:#3B6FE0;
  display:flex; flex:1; min-width:0; height:100dvh; overflow:hidden; background:var(--m-surf);
}

/* ---- list column ---- */
.msgr .list{flex-shrink:0;width:360px;max-width:none;min-width:0;margin:0;padding:0;background:var(--m-surf);
  border-right:1px solid var(--m-line);display:flex;flex-direction:column;min-height:0;}
.msgr .list-head{padding:18px 18px 12px;border-bottom:1px solid var(--m-lineSoft);}
.msgr .list-title-row{display:flex;align-items:center;margin-bottom:14px;}
.msgr .list-title-row h1{font-family:var(--font);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--m-head);margin:0;line-height:1.1;}
.msgr .spacer{flex:1;}
.msgr .icon-btn{width:34px;height:34px;border-radius:8px;padding:0;box-sizing:border-box;border:1px solid var(--m-line);background:var(--m-surf);color:var(--m-muted);
  display:grid;place-items:center;cursor:pointer;text-decoration:none;flex-shrink:0;}
.msgr .icon-btn:hover{background:var(--m-surf2);color:var(--m-ink);}
.msgr .search{display:flex;align-items:center;gap:9px;height:40px;padding:0 13px;border-radius:11px;background:var(--m-surf2);
  color:var(--m-muted2);margin-bottom:13px;font-size:14px;border:1px solid transparent;transition:border-color .15s,box-shadow .15s;}
.msgr .search:focus-within{border-color:var(--m-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-blue) 18%,transparent);}
.msgr .search i{font-size:17px;flex-shrink:0;}
.msgr .search input{flex:1;min-width:0;border:none!important;background:none;outline:none!important;box-shadow:none!important;font:inherit;font-size:14px;color:var(--m-ink);}
.msgr .search input::placeholder{color:var(--m-muted2);}
.msgr .search .ps-clear{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--m-muted2);cursor:pointer;padding:0;}
.msgr .search .ps-clear:hover{background:color-mix(in srgb,var(--m-muted) 16%,transparent);color:var(--m-ink);}
.msgr .search .ps-spin{width:15px;height:15px;flex-shrink:0;border:2px solid color-mix(in srgb,var(--m-pink) 28%,transparent);border-top-color:var(--m-pink);border-radius:50%;animation:msgr-rot .6s linear infinite;}
@keyframes msgr-rot{to{transform:rotate(360deg);}}
.msgr .tabs{display:flex;gap:8px;}
.msgr .tab{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:99px;
  border:1px solid var(--m-line);background:transparent;color:var(--m-muted);cursor:pointer;text-decoration:none;}
.msgr .tab.on{background:var(--m-pink);color:#fff;border-color:transparent;}
.msgr .tab .ct{font-size:11.5px;font-weight:800;background:var(--m-pink);color:#fff;border-radius:99px;min-width:18px;
  padding:0 5px;display:inline-grid;place-items:center;}
.msgr .tab.on .ct{background:rgba(255,255,255,.28);color:#fff;}
.msgr .list-body{flex:1;overflow-y:auto;padding:0 8px;display:flex;flex-direction:column;}
.msgr #results{flex:1;display:flex;flex-direction:column;transition:opacity .12s ease;}
.msgr #results.is-busy{opacity:.55;}
.msgr .section-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--m-muted2);margin:16px 6px 8px;}
.msgr .section-label .ct{background:var(--m-pink);color:#fff;border-radius:99px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;font-size:10.5px;}
.msgr .section-label .ct.pink{background:var(--m-pink);color:#fff;}
/* Count badges are pink only when they actually have a count; a 0 reads muted/grey, not pink. */
.msgr .tab .ct.zero,.msgr .section-label .ct.zero,.msgr .empty-list .gbtn .ct.zero{background:var(--m-surf3);color:var(--m-muted);}
.msgr .tab.on .ct.zero{background:rgba(255,255,255,.28);color:#fff;}

/* contact row */
.msgr .crow{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-radius:12px;border:1px solid transparent;
  text-decoration:none;color:inherit;margin-bottom:1px;}
.msgr .crow:hover{background:var(--m-surf2);text-decoration:none;}
.msgr .crow.on{background:var(--m-pinkLite);border-color:var(--m-pinkSoft);}
.msgr .crow.on:hover{background:var(--m-pinkLite);}
.msgr .crow .body{flex:1;min-width:0;}
.msgr .crow .top{display:flex;align-items:center;gap:8px;}
.msgr .crow .nm{font-size:14px;font-weight:700;color:var(--m-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msgr .crow .sub{font-size:12.5px;color:var(--m-ink);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msgr .crow .sub.muted{color:var(--m-muted);}
.msgr .crow .rowact{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s;}
.msgr .crow:hover .rowact{opacity:1;}
.msgr .crow .rowact button{border:none;background:transparent;color:var(--m-muted2);cursor:pointer;font-size:11.5px;font-weight:700;padding:4px 7px;border-radius:7px;}
.msgr .crow .rowact button:hover{background:var(--m-surf3);color:var(--m-ink);}

/* avatars (reuses partials/avatar.ejs markup: .av-wrap > .av-circle + .av-ch) */
.msgr .av-wrap{position:relative;flex-shrink:0;}
.msgr .av-circle{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-family:var(--font);font-weight:800;color:#fff;background:hsl(var(--av-h,210) 46% 56%);}
.msgr .av-ch{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--m-surf);border:2px solid var(--m-surf);overflow:hidden;}
.msgr .av-ch .ch{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;}
.msgr .av-ch .ch i{font-size:11px;}
.msgr .av-ch .ch svg{width:18px;height:18px;}

/* status pills */
.msgr .pill{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap;flex-shrink:0;}
.msgr .pill.sm{font-size:11px;padding:2px 8px;}
.msgr .pill.reply{background:var(--m-pinkSoft);color:var(--m-pinkInk);}
.msgr .pill.cold{background:var(--m-amberSoft);color:var(--m-amber);}
.msgr .pill.slot{background:var(--m-blueSoft);color:var(--m-blueInk);}
.msgr .pill.booked{background:var(--m-greenSoft);color:var(--m-green);}
.msgr .pill.replied{background:var(--m-blueSoft);color:var(--m-blueInk);}
.msgr .pill.treated{background:var(--m-purpleSoft);color:var(--m-purple);}
.msgr .pill.lost,.msgr .pill.neutral{background:var(--m-surf3);color:var(--m-muted);}

/* ---- conversation pane ---- */
.msgr .conv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);min-height:0;}
.msgr .conv-head{display:flex;align-items:center;gap:13px;padding:13px 22px;background:var(--m-surf);border-bottom:1px solid var(--m-line);}
.msgr .conv-head .who{min-width:0;}
.msgr .conv-head .name{font-family:var(--font);font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--m-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msgr .conv-head .csub{font-size:12.5px;color:var(--m-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msgr .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 12px;border-radius:99px;
  background:var(--m-pinkSoft);color:var(--m-pinkInk);white-space:nowrap;flex-shrink:0;}
.msgr .tag.green{background:var(--m-greenSoft);color:var(--m-green);}
.msgr .gbtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:8px 14px;border-radius:10px;
  border:1px solid var(--m-line);background:var(--m-surf);color:var(--m-ink);cursor:pointer;flex-shrink:0;text-decoration:none;font-family:var(--body);}
.msgr .gbtn:hover{background:var(--m-surf2);text-decoration:none;}
.msgr .gbtn.dark{background:var(--m-ink);color:var(--m-surf);border:none;padding:8px 16px;}
.msgr .gbtn.dark:hover{filter:brightness(1.08);}
.msgr .gbtn:disabled,.msgr .gbtn.btn-disabled{opacity:.45;cursor:default;}
.msgr .conv-body{flex:1;display:flex;min-height:0;}
.msgr .msgs-col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
.msgr .msgs{flex:1;min-height:0;overflow-y:auto;padding:22px 26px 6px;}
.msgr .daysep{text-align:center;margin-bottom:18px;}
.msgr .daysep span{font-size:11.5px;font-weight:600;color:var(--m-muted2);background:var(--m-surf);border:1px solid var(--m-line);
  padding:4px 13px;border-radius:99px;}
.msgr .bubble-row{display:flex;flex-direction:column;margin-bottom:14px;}
.msgr .bubble-row.out{align-items:flex-end;}
.msgr .bubble-row.in{align-items:flex-start;}
.msgr .ai-meta{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--m-pinkInk);margin-bottom:5px;}
.msgr .bubble{max-width:72%;width:fit-content;padding:11px 15px;font-size:14.5px;line-height:1.5;border-radius:17px;
  box-shadow:0 1px 2px rgba(40,30,60,.04);white-space:pre-wrap;overflow-wrap:anywhere;}
.msgr .bubble.in{background:var(--m-surf);border:1px solid var(--m-line);color:var(--m-ink);border-top-left-radius:6px;}
.msgr .bubble.out{background:var(--m-ink);color:var(--m-surf);border-top-right-radius:6px;}
.msgr .bubble.ai{background:var(--grad);color:#fff;border-top-right-radius:6px;}
.msgr .bubble-time{font-size:11px;color:var(--m-muted2);margin-top:4px;font-weight:500;}
.msgr .bubble-media{padding:5px;border-radius:14px;max-width:72%;}
.msgr .bubble-media img,.msgr .bubble-media video{max-width:100%;border-radius:11px;display:block;}
.msgr .msg-attach{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;}
.msgr .escalate{display:flex;gap:11px;align-items:flex-start;max-width:560px;margin:4px auto 14px;padding:13px 15px;border-radius:14px;
  background:var(--m-pinkLite);border:1px solid var(--m-pinkSoft);}
.msgr .escalate .ic{width:28px;height:28px;border-radius:9px;background:var(--grad);display:grid;place-items:center;flex-shrink:0;}
.msgr .escalate p{font-size:13px;line-height:1.5;color:var(--m-ink);margin:0;}
.msgr .escalate.warn{background:color-mix(in srgb,var(--warning) 8%,var(--surface));border-color:color-mix(in srgb,var(--warning) 35%,transparent);}
.msgr .escalate.warn .ic{background:var(--warning);}

/* composer + AI draft */
.msgr .composer{border-top:1px solid var(--m-line);background:var(--m-surf);padding:13px 22px 18px;}
.msgr .composer-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--m-muted);font-weight:500;margin-bottom:9px;}
.msgr .draft{border:1px solid var(--m-line);border-radius:14px;background:var(--m-surf);overflow:hidden;}
.msgr .draft .draft-to{padding:10px 15px 0;font-size:13px;color:var(--m-muted);}
.msgr .draft .draft-to b{color:var(--m-ink);font-weight:600;}
.msgr .draft-body{padding:12px 15px;font-size:14px;line-height:1.55;color:var(--m-ink);width:100%;border:none;outline:none;resize:none;
  background:transparent;font-family:var(--body);min-height:46px;max-height:40vh;field-sizing:content;box-shadow:none;}
/* Kill the global textarea focus glow on the composer (the old fix only covered .reply-box). */
.msgr .draft-body:focus{box-shadow:none!important;border:none!important;outline:none!important;}
.msgr .draft-bar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid var(--m-lineSoft);}
.msgr .draft-ch{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--m-muted);font-weight:600;}
.msgr .draft-ch svg{width:15px;height:15px;}

/* autopilot panel (manual-mode replacement) */
.msgr .autopilot{border-top:1px solid var(--m-line);background:var(--m-surf);padding:13px 22px 18px;}
.msgr .ap-card{display:flex;align-items:center;gap:12px;border:1px solid var(--m-pinkSoft);background:var(--m-pinkLite);border-radius:14px;padding:13px 15px;}
.msgr .ap-card .ap-dot{width:9px;height:9px;border-radius:99px;background:var(--m-pink);flex-shrink:0;box-shadow:0 0 0 0 color-mix(in srgb,var(--m-pink) 55%,transparent);animation:msgr-pulse 1.8s infinite;}
@keyframes msgr-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--m-pink) 45%,transparent);}70%{box-shadow:0 0 0 9px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.msgr .ap-text{flex:1;min-width:0;}
.msgr .ap-text b{display:block;font-size:13.5px;color:var(--m-pinkInk);font-weight:700;}
.msgr .ap-text span{font-size:12.5px;color:var(--m-muted);line-height:1.45;}

/* AI context pane */
.msgr .ctx{width:300px;flex-shrink:0;background:var(--m-surf);border-left:1px solid var(--m-line);padding:20px 18px;overflow-y:auto;text-align:left;align-self:stretch;}
.msgr .ctx-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--m-pinkInk);margin-bottom:12px;}
.msgr .ctx .kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--m-lineSoft);}
.msgr .ctx .kv .k{font-size:12.5px;color:var(--m-muted);}
.msgr .ctx .kv .v{font-size:13px;font-weight:700;color:var(--m-ink);text-align:right;}
.msgr .ctx .kv .v.high{color:var(--m-pinkInk);}
/* kv labels are plain text; values render as badges (urgency/contact coloured, others neutral). */
.msgr .ctx .kv .k,.msgr .ctx .kv .v{border:none;background:none;padding:0;border-radius:0;}
/* Values reuse the app's standard badges: .ubadge (urgency/neutral) + .badge-soft (contact). */
.msgr .ctx .kv .dash{color:var(--m-muted2);font-weight:600;}
/* Soft, tasteful value badges matching the contact-list status pills — clearly filled (not faint
   near-white) but not loud solid blocks. */
.msgr .ctx .ubadge,.msgr .ctx .badge-soft{font-size:12px;font-weight:700;padding:3px 11px;border-radius:99px;border:none;}
.msgr .ctx .ubadge.u-normal,.msgr .ctx .ubadge.u-medium,.msgr .ctx .ubadge.u-low{background:color-mix(in srgb,var(--m-muted) 14%,var(--m-surf));color:var(--m-muted);}
.msgr .ctx .ubadge.u-high{background:var(--m-pinkSoft);color:var(--m-pinkInk);}
.msgr .ctx .badge-soft{background:var(--m-blueSoft);color:var(--m-blueInk);}
.msgr .ctx .badge-soft.badge-returning{background:var(--m-greenSoft);color:var(--m-green);}
.msgr .ctx-note{font-size:13px;line-height:1.55;color:var(--m-ink);background:var(--m-pinkLite);border:1px solid var(--m-pinkSoft);
  border-radius:12px;padding:12px 13px;margin:14px 0;}
.msgr .ctx-next{border:1px solid var(--m-pinkSoft);background:var(--m-pinkLite);border-radius:14px;padding:14px;}
.msgr .ctx-next .lab{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m-pinkInk);}
.msgr .ctx-next .h{font-family:var(--font);font-size:15px;font-weight:800;color:var(--m-head);margin:5px 0 11px;letter-spacing:-.01em;}
.msgr .ctx-next .slots{display:flex;gap:8px;flex-wrap:wrap;}
.msgr .slot{font-size:12.5px;font-weight:700;color:var(--m-ink);background:var(--m-surf);border:1px solid var(--m-line);border-radius:9px;padding:7px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--body);}
.msgr .slot:hover{border-color:var(--m-pink);color:var(--m-pinkInk);}
.msgr .slot i{font-size:13px;}

/* empty list ("All caught up") */
.msgr .empty-list{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 36px;}
/* Calendar-style medallion: a single soft-pink circle with a faint outer ring and just the tick
   (no inner bordered ring). Matches .empty .med.acc; the tick itself is kept small. */
.msgr .empty-ring{width:72px;height:72px;border-radius:50%;background:var(--m-pinkSoft);color:var(--m-pinkInk);display:grid;place-items:center;margin-bottom:18px;box-shadow:0 0 0 7px color-mix(in srgb,var(--m-pink) 11%,transparent);}
.msgr .empty-ring i{font-size:26px;line-height:1;}
.msgr .empty-list h2{font-family:var(--font);font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--m-head);margin:0;}
.msgr .empty-list p{font-size:13.5px;color:var(--m-muted);line-height:1.55;margin:7px 0 0;max-width:252px;}
.msgr .empty-list .gbtn{margin-top:20px;}
.msgr .empty-list .gbtn .ct{font-size:11.5px;font-weight:800;background:var(--m-pink);color:#fff;border-radius:99px;min-width:18px;padding:0 5px;display:inline-grid;place-items:center;margin-left:3px;}
.msgr .empty-foot{border-top:1px solid var(--m-lineSoft);padding:13px 18px;display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--m-surf);}
.msgr .empty-foot i{color:var(--m-pink);font-size:14px;flex-shrink:0;}
.msgr .empty-foot span{font-size:12.5px;color:var(--m-muted);font-weight:600;}

/* Add-contact modal: a touch more breathing room between each label and its input. */
.msgr .book-field .bf-head{display:block;margin-bottom:7px;}

/* empty conversation pane ("Gloow is running your front desk") */
.msgr .conv-empty{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--bg);padding:0 48px;min-height:0;}
.msgr .conv-empty .gmark-lg{width:64px;height:64px;border-radius:18px;background:none;display:grid;place-items:center;}
.msgr .conv-empty .gmark-lg b{font-family:var(--font);font-weight:900;font-size:41px;line-height:1;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.msgr .conv-empty h2{font-family:var(--font);font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--m-head);margin:22px 0 0;}
.msgr .conv-empty p{font-size:15px;color:var(--m-muted);line-height:1.6;margin:10px 0 0;max-width:460px;}
.msgr .stats{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center;}
.msgr .stats .stat{background:var(--m-surf);border:1px solid var(--m-line);border-radius:16px;padding:16px 22px;min-width:132px;}
.msgr .stats .stat .n{font-family:var(--font);font-size:24px;font-weight:800;color:var(--m-pinkInk);letter-spacing:-.02em;}
.msgr .stats .stat .l{font-size:12.5px;color:var(--m-muted);margin-top:3px;}

/* ---------- responsive ---------- */
/* Conversation back-button (to the list) + AI drawer tab — hidden on the desktop 3-pane. */
.msgr .conv-back{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--m-line);background:var(--m-surf);color:var(--m-ink);flex-shrink:0;text-decoration:none;margin-right:2px;}
.msgr .conv-back i{font-size:18px;}
/* Delete is destructive — red so it reads as dangerous; arming it fills solid red. */
.msgr .del-btn{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 42%,transparent);}
.msgr .del-btn i{color:var(--danger);}
.msgr .del-btn:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);}
.msgr .del-btn.armed{background:var(--danger);color:#fff;border-color:var(--danger);}
.msgr .del-btn.armed i{color:#fff;}
.msgr .ctx-tab{display:none;}

/* Below desktop width the AI context pane becomes a slide-in drawer with a sparkle tab, so the
   conversation gets the full width instead of being squeezed into a thin, word-wrapping column. */
@media (max-width:1280px){
  .msgr .ctx{position:fixed;top:0;right:0;bottom:0;height:100dvh;width:min(330px,88vw);z-index:360;transform:translateX(102%);
    transition:transform .22s ease;box-shadow:var(--shadow-lg);}
  .msgr .ctx.open{transform:none;}
  /* Vertically centred on the right edge so it's easy to spot (not tucked in a corner). */
  .msgr .ctx-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:361;display:grid;place-items:center;width:42px;height:64px;
    border:none;border-radius:14px 0 0 14px;background:var(--grad);color:#fff;cursor:pointer;box-shadow:-2px 0 12px rgba(40,30,60,.18);transition:right .22s ease;}
  .msgr .ctx-tab i{font-size:21px;}
  .msgr .ctx-tab.open{right:min(330px,88vw);}
}

/* Tablet/phone: one pane at a time. Show the list, or the conversation (with a back button) when
   one is open — the contact list is always one tap away, never just gone. */
@media (max-width:860px){
  .msgr{height:auto;min-height:0;}
  .msgr .list{width:100%;height:auto;border-right:none;}
  .msgr.has-conv .list{display:none;}
  .msgr:not(.has-conv) .conv,.msgr:not(.has-conv) .conv-empty{display:none;}
  .msgr .conv,.msgr .conv-empty{height:100vh;}
  .msgr .conv-back{display:inline-flex;}
}

/* Phone: rail is the bottom tab bar (mobile.css). dvh so the composer clears it; hide the bar while
   a conversation is open so it never covers the composer. */
@media (max-width:700px){
  .msgr,.msgr .list,.msgr .conv,.msgr .conv-empty{height:100dvh;}
  body:has(.msgr.has-conv) .side{display:none;}
}