/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-views.css, minus 0 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
/* ================================================================
   marketing-hub-views.css — Calendar, Timeline, Table, Focus Row
   ================================================================ */

/* ---- Focus List Rows ---- */
.mh-focus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--srf2, #e2e8f0);
  transition: background .15s;
}

.mh-focus-row:last-child { border-bottom: none; }

.mh-focus-row:hover { background: var(--srf1, #f8fafc); }

.mh-focus-row-body { flex: 1; min-width: 0; }

.mh-focus-row-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink1, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-focus-row-sub {
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-focus-row-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
}

/* ---- Calendar View ---- */
.mhv-calendar { padding: 4px 0; }

.mhv-cal-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink1, #1e293b);
  text-align: center;
  padding: 6px 0 10px;
}

.mhv-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.mhv-cal-day-header {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink4, #94a3b8);
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.mhv-cal-cell {
  position: relative;
  min-height: 40px;
  padding: 4px;
  border-radius: 6px;
  text-align: center;
  cursor: default;
  transition: background .15s;
}

.mhv-cal-cell:hover:not(.mhv-cal-empty) { background: var(--srf1, #f8fafc); }

.mhv-cal-today {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe;
}

.mhv-cal-has-items { cursor: pointer; }

.mhv-cal-num {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink2, #475569);
  display: block;
}

.mhv-cal-today .mhv-cal-num { color: #6366f1; font-weight: 700; }

.mhv-cal-dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
}

.mhv-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}

.mhv-cal-dot-more {
  font-size: 8px;
  color: var(--ink4, #94a3b8);
  line-height: 1;
}

.mhv-cal-empty { opacity: 0; pointer-events: none; }

/* ---- Timeline View ---- */
.mhv-timeline { padding: 4px 0; }

/* ---- Table View ---- */
.mhv-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mhv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.mhv-table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink4, #94a3b8);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--srf2, #e2e8f0);
  white-space: nowrap;
}

.mhv-table td {
  padding: 7px 8px;
  color: var(--ink2, #475569);
  border-bottom: 1px solid var(--srf2, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.mhv-table tr:last-child td { border-bottom: none; }

.mhv-table tr:hover td { background: var(--srf1, #f8fafc); }

.mhv-table td:first-child {
  font-weight: 600;
  color: var(--ink1, #1e293b);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INBOX & ROUTING — OVERVIEW (marketing-hub-inbox.js owns this panel)
   Class prefix is `mh-inb-` and nothing else uses it. That matters: the MRG
   porter DROPS any vendored rule whose selector names a class crm.css already
   owns, so a generic name here would silently not ship to the CRM's Marketing
   tab and the list would render unstyled there and only there.
   ═══════════════════════════════════════════════════════════════════════════ */

.mh-inb-dm-note {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid var(--bd1, #e2e8f0);
  border-left: 3px solid #7c3aed;
  border-radius: 8px;
  background: var(--srf1, #f8fafc);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink3, #64748b);
}

.mh-inb-dm-note b { color: var(--ink2, #475569); font-weight: 700; }

.mh-inb-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd0, #f1f5f9);
}

.mh-inb-row:last-child { border-bottom: 0; }

.mh-inb-row:hover { background: var(--srf1, #f8fafc); }

.mh-inb-row.is-waiting { box-shadow: inset 3px 0 0 #f59e0b; }

.mh-inb-main { flex: 1 1 auto; min-width: 0; }

.mh-inb-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.mh-inb-who { font-size: 12px; font-weight: 700; color: var(--ink1, #1e293b); }

.mh-inb-badge {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 6px;
  border-radius: 999px;
}

.mh-inb-camp {
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-subj {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2, #475569);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-prev {
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.mh-inb-when { font-size: 10px; color: var(--ink4, #94a3b8); white-space: nowrap; }

.mh-inb-wait { font-size: 10px; font-weight: 700; color: #b45309; white-space: nowrap; }

.mh-inb-done { font-size: 10px; color: #16a34a; white-space: nowrap; }

.mh-inb-crm {
  margin-top: 2px;
  padding: 3px 8px;
  border: 1px solid var(--bd1, #e2e8f0);
  border-radius: 999px;
  background: var(--srf0, #fff);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink2, #475569);
  cursor: pointer;
  white-space: nowrap;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-inb-crm:hover { border-color: #6366f1; color: #4f46e5; }

.mh-inb-crm--new { border-style: dashed; color: var(--ink4, #94a3b8); }

.mh-inb-crm--new:hover { border-color: #16a34a; color: #16a34a; }

.mh-inb-crm[disabled] { opacity: .5; cursor: default; }

.mh-inb-person,
.mh-inb-send {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--bd0, #f1f5f9);
}

.mh-inb-person:last-child,
.mh-inb-send:last-child { border-bottom: 0; }

.mh-inb-person-main { flex: 1 1 auto; min-width: 0; }

.mh-inb-person-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink1, #1e293b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-person-sub {
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-person-side { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.mh-inb-person-wait { font-size: 9px; font-weight: 800; color: #b45309; white-space: nowrap; }

.mh-inb-person-n {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.mh-inb-person-n.is-zero { background: var(--srf1, #f8fafc); color: var(--ink4, #94a3b8); }

/* ═══════════════════════════════════════════════════════════════════════════
   INBOX & ROUTING — THE REPLY CARD AND THE REPLY SHEET
   Added 2026-08-21. Tyler: *"for how the email responses show up, it needs to
   be a card that you can actually click and see the response better … a
   beautiful pop-up with a profile to actually review it."* Then, on the first
   cut: *"I want these front card designs to be a little bit more polished …
   make it more obvious what they're reading. There should be a tag to show what
   campaign or piece it came from … I want the replies to be more prominent."*

   ⚠️ EVERY SELECTOR HERE IS `mh-inb-` PREFIXED, AND THAT IS LOAD-BEARING. The
   MRG porter drops any vendored rule whose selector names a class crm.css,
   ax-containers.css or base.css already owns — a generic name would silently
   not ship to the CRM's Marketing tab, and the cards would be unstyled there
   and only there. (`is-*` tokens are exempt: the porter treats them as state.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE CARD ──────────────────────────────────────────────────────────────
   `.mh-inb-card` sits on top of `.mh-inb-row`, which is still on the element:
   marketing-hub-views.js counts the direct children of `.mh-focus-body` as the
   rows it searches and filters, so the row identity stays and only the skin
   changes.
   ⚠️ `display:block` OVERRIDES `.mh-inb-row`'s flex, and it has to — the card
   is two stacked rows now (the body and an action footer), not one flex line.
   Equal specificity, later in the file, which is the whole reason this block
   lives at the END. */
.mh-inb-card {
  display: block;
  position: relative;
  margin: 0 0 9px;
  padding: 12px 13px 10px;
  border: 1px solid var(--bd1, #e2e8f0);
  border-radius: 13px;
  background: var(--srf0, #fff);
  cursor: pointer;
  transition: border-color .13s ease, box-shadow .13s ease;
}

.mh-inb-card:last-child { margin-bottom: 2px; }

.mh-inb-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .09);
}

/* ⚠️ A VISIBLE FOCUS RING IS NOT OPTIONAL ON A `role="button"` DIV. It is
   reachable by Tab and answers Enter and Space; a keyboard user has to be able
   to see which card they are about to open. */
.mh-inb-card:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* The state stripe down the edge — an edge on a card now, rather than an inset
   shadow on a list item. */
.mh-inb-card.is-waiting { box-shadow: inset 3px 0 0 #f59e0b; }

.mh-inb-card.is-waiting:hover { box-shadow: inset 3px 0 0 #f59e0b, 0 6px 20px rgba(15, 23, 42, .09); }

/* 🚨 SOMEBODY ASKED TO BE TAKEN OFF THE LIST. Red, and it outranks "waiting":
   the obligation is the more urgent fact about this card. */
.mh-inb-card.is-ask {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff5f5 0%, var(--srf0, #fff) 52%);
  box-shadow: inset 3px 0 0 #dc2626;
}

.mh-inb-card.is-ask:hover { box-shadow: inset 3px 0 0 #dc2626, 0 6px 20px rgba(220, 38, 38, .13); }

/* Already honoured — quiet, and deliberately not red. Nothing is owed here. */
.mh-inb-card.is-off { box-shadow: inset 3px 0 0 #94a3b8; }

/* Marked off. It stays legible — it is still a reply somebody may want to
   re-read — but it stops competing with the ones that need work. */
.mh-inb-card.is-done { background: var(--srf1, #f8fafc); box-shadow: inset 3px 0 0 #16a34a; }

/* ══ 🚨 MARKING ONE OFF: OUT, THEN UP ═══════════════════════════════════════
   Tyler, 2026-08-21: *"make sure Mark handled has a smooth slide effect, like
   moving it away and then moving it up."* Two movements, deliberately sequential:
   the card slides OUT to the right and fades (that is the thing you acted on
   leaving), and only then does the space it held collapse so the cards below rise
   into it. Simultaneous reads as a glitch; the collapse alone reads as a delete.

   ⚠️ THE TWO DURATIONS ARE DECLARED HERE AND READ BY THE SCRIPT.
   marketing-hub-inbox.js pulls `--inb-slide` and `--inb-collapse` back out with
   getComputedStyle and schedules on them. A second copy of "220ms" in the JS is
   how an animation ends up cut off half way: the timer repaints the list while
   the transition is still running. One number, one place.

   ⚠️ AND THE JS PINS height/margin INLINE BEFORE ADDING THESE CLASSES.
   `height:auto` has no numeric start value, so a transition to 0 is a jump; and
   the card's own 9px bottom margin is part of the gap it occupies, so collapsing
   height alone leaves a hole and the rows below land with a hop. */
.mh-inb-card {
  --inb-slide: 220ms;
  --inb-collapse: 240ms;
}

.mh-inb-card.is-leaving {
  transition: transform var(--inb-slide) cubic-bezier(.36, .07, .25, 1),
              opacity var(--inb-slide) ease-in,
              box-shadow var(--inb-slide) ease;
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  box-shadow: none;
}

.mh-inb-card.is-collapsing {
  transition: height var(--inb-collapse) cubic-bezier(.4, 0, .2, 1),
              margin var(--inb-collapse) cubic-bezier(.4, 0, .2, 1),
              padding var(--inb-collapse) cubic-bezier(.4, 0, .2, 1),
              border-width var(--inb-collapse) linear;
  border-top-width: 0;
  border-bottom-width: 0;
  opacity: 0;
}

/* ⚠️ NOT AN OPTIONAL POLISH. A queue is worked through by pressing this button
   dozens of times; somebody who has asked the OS for less motion must get the
   repaint with no travel at all. The script checks the same query and skips
   straight to the render, so this block is the belt to that braces. */
@media (prefers-reduced-motion: reduce) {
  .mh-inb-card { --inb-slide: 1ms; --inb-collapse: 1ms; }
  .mh-inb-card.is-leaving { transition: none; transform: none; opacity: 0; }
  .mh-inb-card.is-collapsing { transition: none; }
}

.mh-inb-card.is-done .mh-inb-say { color: var(--ink3, #64748b); }

.mh-inb-cbody {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.mh-inb-cfoot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--bd0, #f1f5f9);
}

/* ── THE FACE ──────────────────────────────────────────────────────────────
   Initials underneath, the CRM photo on top of them. The <img> carries
   `onerror="this.remove()"`, so a blob url that 404s uncovers the initials
   instead of leaving a broken-image glyph where a person's face should be. */
.mh-inb-face {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  user-select: none;
}

.mh-inb-face i {
  font-style: normal;
  line-height: 1;
}

.mh-inb-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mh-inb-face--lg {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

/* ── WHO ──────────────────────────────────────────────────────────────────── */
.mh-inb-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.mh-inb-who {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink1, #1e293b);
  letter-spacing: -.1px;
}

.mh-inb-role {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink3, #64748b);
}

.mh-inb-role::before { content: '· '; color: var(--ink4, #94a3b8); }

.mh-inb-addr {
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 🚨 WHAT THEY SAID — THE BIGGEST TEXT ON THE CARD ──────────────────────
   It used to be a 10px grey line under a bolder repeat of our own subject. The
   subject is identical on every reply to one send, so leading with it made the
   whole list look the same; the reply is the only part that differs. Two lines,
   clamped — the sheet is one press away for the rest. */
.mh-inb-say {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink1, #1e293b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A silence, said out loud. Italic and grey so it can never be mistaken for
   something the customer typed. */
.mh-inb-say--none {
  font-style: italic;
  color: var(--ink4, #94a3b8);
  font-size: 11.5px;
}

/* ── THE TAGS ───────────────────────────────────────────────────────────────
   `.mh-inb-flag` is the tag; the modifier carries the meaning. */
.mh-inb-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}

.mh-inb-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--srf1, #f8fafc);
  color: var(--ink3, #64748b);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🚨 THE TAG THAT SAYS WHICH SEND. This is the one piece of provenance on the
   card and it used to be 10px of grey with an arrow in front of it, sitting in
   the header beside a channel badge — styled like a footnote. */
.mh-inb-flag--camp {
  background: #eef2ff;
  color: #4338ca;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px 3px 7px;
}

.mh-inb-flag--camp svg { flex: 0 0 auto; opacity: .8; }

.mh-inb-flag--none { background: var(--srf1, #f8fafc); color: var(--ink4, #94a3b8); font-style: italic; }

.mh-inb-flag--fwd { background: #ecfeff; color: #0e7490; }

.mh-inb-flag--ask { background: #fee2e2; color: #b91c1c; }

/* 🚨 "WE HAVE NOT LOOKED YET" IS ITS OWN STATE, AND IT IS NOT RED. The consent
   tag lives on the person and is fetched per address in the background; printing
   the red obligation tag while that read was in flight told Tyler nobody had
   acted on a request honoured eight days earlier. Amber and hedged, for the
   second or two it lasts. */
.mh-inb-flag--wait { background: #fef3c7; color: #92400e; font-style: italic; }

.mh-inb-flag--off { background: #e2e8f0; color: #475569; }

.mh-inb-flag--done { background: #dcfce7; color: #15803d; }

/* The subject, demoted to the bottom and to chrome, because on a queue of
   replies to ONE send it is the same string on every card. */
.mh-inb-subj {
  margin-top: 7px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink4, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── WHEN ─────────────────────────────────────────────────────────────────── */
.mh-inb-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.mh-inb-when { font-size: 10px; color: var(--ink4, #94a3b8); white-space: nowrap; }

.mh-inb-wait { font-size: 10px; font-weight: 700; color: #b45309; white-space: nowrap; }

.mh-inb-done { font-size: 10px; color: #16a34a; white-space: nowrap; }

.mh-inb-donetag { font-size: 10px; font-weight: 700; color: #15803d; white-space: nowrap; }

/* ── THE FOOTER BUTTONS ─────────────────────────────────────────────────────
   In their own row, so they are not competing with the words for the eye. */
.mh-inb-btn-s {
  appearance: none;
  padding: 4px 11px;
  border: 1px solid var(--bd1, #e2e8f0);
  border-radius: 999px;
  background: var(--srf0, #fff);
  color: var(--ink2, #475569);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-inb-btn-s:hover { border-color: #6366f1; color: #4f46e5; }

.mh-inb-btn-s--do { border-color: #bbf7d0; color: #15803d; background: #f0fdf4; }

.mh-inb-btn-s--do:hover { border-color: #16a34a; color: #15803d; background: #dcfce7; }

.mh-inb-btn-s--new { border-style: dashed; color: var(--ink4, #94a3b8); }

.mh-inb-btn-s--new:hover { border-color: #16a34a; color: #16a34a; }

.mh-inb-btn-s[disabled] { opacity: .55; cursor: default; }

/* Always visible now, not hover-only: on a card with three other controls in
   the same row, an affordance that appears on hover reads as a fourth surprise. */
.mh-inb-read {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #4f46e5;
  white-space: nowrap;
  opacity: .72;
  transition: opacity .12s ease;
}

.mh-inb-card:hover .mh-inb-read,
.mh-inb-card:focus-visible .mh-inb-read { opacity: 1; }

/* ── THE SHEET ─────────────────────────────────────────────────────────────
   🚨 Z-INDEX, AND THE TWO NUMBERS IT SITS BETWEEN. `.ch-overlay` is
   2147483000 and crm.js's openOverlay BUMPS a stacked one to base+n, so
   anything pinned AT the base is painted under a popup it is speaking about.
   2147483300 clears that. It stays BELOW `.crm-toast` (2147483500), because the
   toast is how this sheet reports that an unsubscribe was recorded — a
   confirmation drawn behind the thing it confirms is the same bug twice.

   ⚠️ THE OVERLAY IS MOUNTED ON `document.documentElement`. A forwards-filled
   entrance animation on <body> leaves an identity transform behind, which makes
   body a containing block for position:fixed and sizes this to the whole
   document instead of the viewport. */
.mh-inb-ov {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(2px);
  animation: mh-inb-fade .14s ease-out;
}

/* ⚠️ OPACITY ONLY, AND NO `forwards`. A filled-forwards animation that touches
   transform or filter leaves a permanent stacking context and a containing
   block behind it — which is the exact bug the comment above is about. */
@keyframes mh-inb-fade { from { opacity: 0; } to { opacity: 1; } }

.mh-inb-sheet {
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--srf0, #fff);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .34);
  overflow: hidden;
  animation: mh-inb-fade .16s ease-out;
}

.mh-inb-sh-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--bd0, #f1f5f9);
  background: var(--srf1, #f8fafc);
}

.mh-inb-sh-id { flex: 1 1 auto; min-width: 0; }

.mh-inb-sh-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink1, #1e293b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-sh-sub {
  font-size: 11px;
  color: var(--ink3, #64748b);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-sh-addr {
  font-size: 11px;
  color: var(--ink4, #94a3b8);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-inb-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--bd1, #e2e8f0);
  border-radius: 50%;
  background: var(--srf0, #fff);
  color: var(--ink3, #64748b);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mh-inb-x:hover { border-color: #cbd5e1; color: var(--ink1, #1e293b); }

/* ⚠️ THE SCROLLER IS INSIDE THE SHEET, NEVER THE PAGE. A long reply must not
   scroll the marketing panel behind the overlay. */
.mh-inb-sh-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 18px;
}

.mh-inb-sh-about {
  font-size: 11px;
  color: var(--ink3, #64748b);
  padding: 8px 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--srf1, #f8fafc);
  border-left: 3px solid #6366f1;
}

.mh-inb-sh-about b { color: var(--ink1, #1e293b); font-weight: 700; }

/* ── THE OPT-OUT CARD ─────────────────────────────────────────────────────
   The one thing on this sheet that is a to-do, so it is above the message and
   it says exactly what pressing it writes. */
.mh-inb-sh-act {
  padding: 12px 13px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--bd1, #e2e8f0);
  background: var(--srf1, #f8fafc);
}

.mh-inb-sh-act.is-ask { border-color: #fecaca; background: #fff5f5; }

.mh-inb-sh-act.is-done { border-color: var(--bd1, #e2e8f0); }

.mh-inb-sh-act-t {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink1, #1e293b);
}

.mh-inb-sh-act.is-ask .mh-inb-sh-act-t { color: #b91c1c; }

.mh-inb-sh-act-s {
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink3, #64748b);
  margin-top: 4px;
}

.mh-inb-sh-act-s b { color: var(--ink2, #475569); font-weight: 700; }

/* ── THE MESSAGE ───────────────────────────────────────────────────────── */
.mh-inb-sh-msg {
  padding: 12px 13px;
  border: 1px solid var(--bd1, #e2e8f0);
  border-radius: 12px;
  background: var(--srf0, #fff);
}

.mh-inb-sh-subj {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink1, #1e293b);
  line-height: 1.4;
}

.mh-inb-sh-meta {
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  margin-top: 3px;
}

.mh-inb-sh-meta .is-wait { color: #b45309; font-weight: 800; }

.mh-inb-sh-meta .is-done { color: #16a34a; font-weight: 800; }

/* 🚨 `pre-wrap`, AND `word-break` FOR THE URL SOMEBODY PASTES. This is plain
   text out of a mailbox: its line breaks are the sender's paragraphs and its
   longest token is often a tracking link with no spaces in it. */
.mh-inb-sh-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bd0, #f1f5f9);
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink1, #1e293b);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mh-inb-sh-body--none {
  font-style: italic;
  font-size: 12px;
  color: var(--ink4, #94a3b8);
  white-space: normal;
}

.mh-inb-sh-note {
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  margin-top: 8px;
}

.mh-inb-sh-note:empty { display: none; }

.mh-inb-sh-quoted {
  margin-top: 8px;
  padding: 9px 11px;
  border-left: 3px solid var(--bd1, #e2e8f0);
  background: var(--srf1, #f8fafc);
  border-radius: 0 8px 8px 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink3, #64748b);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
}

/* ── ANSWERING ─────────────────────────────────────────────────────────── */
.mh-inb-sh-reply { margin-top: 14px; }

.mh-inb-sh-h {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink1, #1e293b);
  margin-bottom: 3px;
}

.mh-inb-sh-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mh-inb-btn {
  appearance: none;
  padding: 8px 14px;
  border: 1px solid var(--bd1, #e2e8f0);
  border-radius: 999px;
  background: var(--srf0, #fff);
  color: var(--ink2, #475569);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.mh-inb-btn:hover { border-color: #6366f1; color: #4f46e5; }

.mh-inb-btn[disabled] { opacity: .55; cursor: default; }

.mh-inb-btn--go {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

.mh-inb-btn--go:hover { background: #4338ca; border-color: #4338ca; color: #fff; }

.mh-inb-btn--ok { background: #16a34a; border-color: #16a34a; color: #fff; }

.mh-inb-btn--ok:hover { background: #15803d; border-color: #15803d; color: #fff; }

.mh-inb-btn--stop {
  margin-top: 11px;
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.mh-inb-btn--stop:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.mh-inb-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin-top: 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
  cursor: pointer;
  text-align: left;
}

.mh-inb-link:hover { text-decoration: underline; }

.mh-inb-link--stop { color: #b91c1c; }

.mh-inb-sh-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--bd0, #f1f5f9);
}

.mh-inb-sh-foot-s {
  display: block;
  font-size: 10px;
  color: var(--ink4, #94a3b8);
  margin-top: 5px;
  line-height: 1.5;
}

.mh-inb-sh-foot-s b { color: var(--ink3, #64748b); font-weight: 700; }

/* A phone shows the sheet full-bleed: 620px of card inside 380px of viewport
   is a card with nothing around it, and the rounded corners then read as a
   rendering mistake. */
@media (max-width: 560px) {
  .mh-inb-ov { padding: 0; align-items: stretch; }
  /* ⚠️ `!important` ON THE RADIUS, AND ONLY HERE. MRG's brand sheet carries
     `.modal,.dialog,[role="dialog"]{border-radius:var(--mrg-radius-card)
     !important; border-top:4px solid var(--mrg-primary)}` — the 4px accent is
     that host's house style for a dialog and the sheet wears it gladly, but a
     rounded corner on a full-bleed phone sheet reads as a rendering fault. This
     is the one property worth taking back. */
  .mh-inb-sheet { max-width: none; max-height: 100vh; border-radius: 0 !important; }
  .mh-inb-card { padding: 10px; }
  .mh-inb-addr { max-width: 150px; }
  .mh-inb-cfoot { justify-content: flex-start; }
}