/* xprhub.com/messages (2026-11-08, revamped 2026-11-09). A two-pane messenger on a wide screen (900px and up), one pane at
   a time on a phone. The hub's purple tokens and Inter only, plus ONE extra accent: seal amber, used only on chain messages
   (the public, signed record), their receipt details and the composer while Send on chain is on. The header and footer are
   the shared ones in /site.css (loaded after this file, so overrides here use a more specific selector). Message text
   wraps instead of pushing the page sideways. Contrast of every text pair is checked in hub/tests/messages.spec.mjs. */
:root {
  --bg: #0d0a17; --chat: #0f0b1c; --panel: #17112a; --panel2: #1e1636; --line: #2e2350; --hover: #211941;
  --selected: rgba(117, 67, 227, .22); --mine: rgba(117, 67, 227, .85);
  --ink: #f6f4ff; --muted: #a9a0c9; --placeholder: #8d84b0; --purple: #7543e3; --purple-hi: #9b7bff; --bad: #ff8f8f;
  --seal: #f0b44c;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 85% -10%, rgba(117, 67, 227, .22), transparent 60%), var(--bg);
  color: var(--ink); font: 15px/1.45 var(--font); min-height: 100vh; overflow-x: hidden;
  display: flex; flex-direction: column;
}
body > .site-top, body > .site-notice, body > .site-foot { flex: none; }
h1, h2, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; background: var(--purple); color: #fff;
  font: 600 14px/1.2 var(--font); padding: 10px 16px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #8455f0; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--purple-hi); background: transparent; }
.btn:disabled { opacity: .55; cursor: default; }
.iconbtn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.iconbtn:hover { background: var(--hover); }
.iconbtn:disabled { opacity: .45; cursor: default; background: transparent; }
.ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-fill { fill: currentColor; stroke: none; }
.link { color: var(--purple-hi); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
input[type="text"] { width: 100%; min-width: 0; padding: 9px 12px; background: var(--chat); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font: 15px/1.3 var(--font); }
input[type="text"]:hover { border-color: #43366f; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
.mx :focus-visible { outline: 2px solid var(--purple-hi); outline-offset: 2px; }
.mx input[type="text"]:focus-visible { outline-offset: 0; border-color: var(--purple-hi); }

/* ---- the page ---- */
.mx { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 1040px; min-width: 0; margin: 0 auto; padding: 8px 16px 24px; }

/* title row: small, so nothing pushes the chat down */
.mx-top { flex: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.mx-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.mx-titlebar h1 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.mx-new { display: flex; gap: 8px; flex: 1 1 300px; max-width: 420px; min-width: 0; }
.mx-new input { flex: 1; }
.mx-problem { margin: 0 0 12px; padding: 8px 12px; border: 1px solid rgba(255, 143, 143, .5); border-radius: 10px; color: var(--bad); font-size: 14px; }
body[data-view="gate"] .mx-new, body[data-view="loading"] .mx-new { display: none; }

/* the frame that holds the panes */
.mx-frame { position: relative; display: flex; flex-direction: column; min-width: 0; }
.mx-loading { display: none; padding: 24px; color: var(--muted); text-align: center; }
body[data-view="loading"] .mx-loading { display: block; }

/* status and error lines (moved by messages.js to the open view) */
.notes { flex: none; }
#status { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
#status:not(:empty) { padding: 8px 2px 0; }
#error { margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(255, 143, 143, .5); border-radius: 10px; background: rgba(255, 143, 143, .08); color: var(--bad); font-size: 14px; overflow-wrap: anywhere; }
.mx-inbox > .notes { padding: 0 10px; }
.mx-inbox > .notes #status:not(:empty) { padding: 10px 2px 2px; }
.mx-live > .notes { padding: 0 16px; background: var(--chat); }
.mx-live > .notes #status:not(:empty) { padding: 8px 2px; }
.mx-live > .notes #error { margin: 8px 0; }
.mx-gate > .notes { text-align: left; }

/* sign-in gate: a centered panel in the pane area */
.mx-gate { align-self: center; width: min(100%, 420px); margin: 24px auto; padding: 28px 24px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.mx-gate h2 { margin-bottom: 8px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.mx-gate p { margin-bottom: 18px; color: var(--muted); }

/* ---- inbox ---- */
.mx-inbox { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.mx-list { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; margin: 0; padding: 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.row:hover { background: var(--hover); }
.row.selected { background: var(--selected); }
.mx .row:focus-visible { outline-offset: -2px; }
.row.pinned { margin-bottom: 7px; }
.row.pinned::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -5px; height: 1px; background: var(--line); }
.row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-title { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.row.unread .row-name { font-weight: 800; }
.row-time { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.row.unread .row-time { color: var(--purple-hi); font-weight: 600; }
.row-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.row.unread .row-preview { color: var(--ink); }
.row-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--purple); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px;
  text-align: center; font-variant-numeric: tabular-nums; }
.mx-hint { padding: 16px 12px; color: var(--muted); font-size: 14px; }
.skel { display: flex; align-items: center; gap: 12px; padding: 10px; }
.skel span { display: block; border-radius: 999px; background: var(--panel2); }
.skel .s-av { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.skel .s-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; background: none; }
.skel .s-l1 { width: 45%; height: 10px; }
.skel .s-l2 { width: 75%; height: 9px; }

/* the Admin badge after an admin account's name (textContent only) */
.msg-admin-badge { flex: none; display: inline-block; padding: 0 7px; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; color: #fff; background: var(--purple);
  border: 1px solid var(--purple-hi); border-radius: 999px; }

/* avatars: a letter disc, then the XPR profile picture on top once it is read */
.av { position: relative; flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; color: var(--ink);
  font-size: 15px; font-weight: 700; line-height: 1; user-select: none; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-sm { width: 28px; height: 28px; font-size: 12px; }
.av-admin { background: var(--panel2); color: var(--purple-hi); box-shadow: inset 0 0 0 1px var(--line); }
.av-admin .ic { width: 18px; height: 18px; }
.av-sm.av-admin .ic { width: 15px; height: 15px; }
.av-t0 { background: #5b3fb8; }
.av-t1 { background: #8a3a8f; }
.av-t2 { background: #a2405e; }
.av-t3 { background: #a0522d; }
.av-t4 { background: #2f7a5a; }
.av-t5 { background: #2a6f8f; }
.av-t6 { background: #3d5bb5; }
.av-t7 { background: #4b6b7d; }

/* ---- the open chat ---- */
.mx-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat); }
.mx-live { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.mx-empty { flex: 1; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }

.chat-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 10px 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.chat-av { flex: none; display: inline-flex; }
.chat-av:empty { display: none; }
.chat-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
.chat-title:focus { outline: none; }
.chat-title:focus-visible { outline: 2px solid var(--purple-hi); outline-offset: 2px; border-radius: 6px; }
.chat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.more-wrap { position: relative; flex: none; margin-left: auto; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; max-width: min(300px, calc(100vw - 32px)); padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.menu-item { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px/1.3 var(--font); text-align: left;
  text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.menu-item:hover, .menu-item:focus { background: var(--panel2); }
.mx .menu-item:focus-visible { outline-offset: -2px; }

/* the order panel (MARKET_PANEL), one line until opened */
.mx-panel { flex: none; background: var(--panel); border-bottom: 1px solid var(--line); }
.panel-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 12px 8px 16px; border: 0; background: none; color: var(--ink); font: 14px/1.4 var(--font);
  text-align: left; cursor: pointer; }
.panel-toggle:hover { background: var(--hover); }
.mx .panel-toggle:focus-visible { outline-offset: -2px; }
.panel-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.panel-state { flex: none; color: var(--purple-hi); font-size: 13px; font-weight: 600; }
.panel-toggle .ic { width: 16px; height: 16px; color: var(--purple-hi); transition: transform .15s ease; }
.panel-toggle[aria-expanded="true"] .ic { transform: rotate(90deg); }
.panel-slot { max-height: 40vh; overflow-y: auto; padding: 0 16px 12px; }
.mx-panel .market-panel { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.mx-panel .market-panel h3 { display: none; }

/* the message list */
.mx-scroll { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 10px; }
.older { align-self: center; margin: 0 0 14px; padding: 7px 14px; font-size: 13px; }
.log { display: flex; flex-direction: column; gap: 14px; margin-top: auto; min-width: 0; }
.log > .mx-hint { align-self: center; padding: 24px 0; }

.day { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.note { align-self: center; max-width: min(90%, 560px); color: var(--muted); font-size: 13px; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.note time { margin-left: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }

.grp { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.grp.mine { justify-content: flex-end; }
.grp-av { flex: none; padding-top: 1px; }
.grp-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(80%, 600px); }
.grp.mine .grp-body { align-items: flex-end; }
.grp-name { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 0 3px 2px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.grp-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; min-width: 0; }
.grp.mine .grp-stack { align-items: flex-end; }
.grp-meta { margin: 4px 4px 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; min-width: 0; }
.grp.mine .msg { align-items: flex-end; }
.msg-row { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.bubble { min-width: 0; max-width: 100%; padding: 8px 12px; border-radius: 18px; background: var(--panel2); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.grp.mine .bubble { background: var(--mine); }
.bubble:focus { outline: none; }
.bubble:focus-visible { outline: 2px solid var(--purple-hi); outline-offset: 2px; }
/* bubbles in one group join: the corners on the sender's side are small between them */
.grp.theirs .msg:not(:first-child) .bubble { border-top-left-radius: 6px; }
.grp.theirs .msg:not(:last-child) .bubble { border-bottom-left-radius: 6px; }
.grp.mine .msg:not(:first-child) .bubble { border-top-right-radius: 6px; }
.grp.mine .msg:not(:last-child) .bubble { border-bottom-right-radius: 6px; }
.plain-link { color: var(--purple-hi); text-decoration: underline dotted; text-underline-offset: 2px; }
.grp.mine .bubble .plain-link, .grp.mine .bubble .link { color: var(--ink); }
.removed { padding: 2px 4px; color: var(--muted); font-size: 13px; font-style: italic; }

/* the per-message action (Report): shown on hover or focus where there is a mouse, always (quietly) on touch screens */
.msg-acts { flex: none; }
.act { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.act .ic { width: 16px; height: 16px; }
.act:hover { background: var(--panel2); color: var(--ink); }
.act:disabled { cursor: default; }
@media (hover: hover) {
  .msg .act { opacity: 0; }
  .msg:hover .act, .msg:focus-within .act { opacity: 1; }
}
.report-form { display: flex; gap: 8px; width: min(100%, 380px); margin-top: 6px; }
.report-form input { flex: 1; }
.report-form .btn { padding: 8px 12px; }
.report-done { margin-top: 4px; color: var(--muted); font-size: 13px; }

.chipbtn { padding: 2px 12px; border: 1px solid var(--purple-hi); border-radius: 999px; background: transparent; color: var(--purple-hi); font: 600 13px/1.5 var(--font); cursor: pointer; }
.chipbtn:hover { background: rgba(155, 123, 255, .14); }

/* pictures and files */
.media { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; }
.grp.mine .media { align-items: flex-end; }
.msg-img { display: block; width: auto; height: auto; max-width: min(280px, 100%); max-height: 360px; border-radius: 14px; background: var(--panel2); }
.filerow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; white-space: normal; }
.file-text { flex-basis: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.filerow .ic { width: 18px; height: 18px; color: var(--muted); }
.grp.mine .filerow .ic { color: var(--ink); }
.file-name { flex: 1 1 8em; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.filerow .link { flex: none; }

/* chain messages: a signed receipt, the one loud thing on the page */
.receipt { width: 380px; max-width: 100%; min-width: 0; padding: 10px 14px 0; background: var(--panel2); border-radius: 12px; color: var(--ink); }
.grp.theirs .receipt { border-left: 3px solid var(--seal); }
.grp.mine .receipt { border-right: 3px solid var(--seal); }
.receipt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--seal); font-size: 12px; font-weight: 600; }
.receipt-head .ic { width: 14px; height: 14px; }
.receipt-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.receipt-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; padding: 8px 0 10px; border-top: 1px dashed rgba(240, 180, 76, .45);
  color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.receipt-tx code { font-family: var(--mono); font-size: 12px; color: var(--seal); }
.receipt-foot .link { color: var(--purple-hi); }
.receipt.fresh { animation: receipt-in .45s ease-out; }
@keyframes receipt-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- composer ---- */
.composer { flex: none; padding: 10px 12px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.warn { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--seal); border-radius: 8px; background: rgba(240, 180, 76, .08); color: var(--ink); font-size: 13px; }
.composer-box { display: flex; align-items: flex-end; gap: 6px; padding: 5px; background: var(--chat); border: 1px solid var(--line); border-radius: 14px; }
.composer-box:focus-within { border-color: var(--purple-hi); box-shadow: 0 0 0 1px var(--purple-hi); }
.composer.chain .composer-box { border-color: var(--seal); box-shadow: 0 0 0 1px var(--seal); }
.composer.chain .composer-box:focus-within { box-shadow: 0 0 0 2px var(--seal); }
.composer textarea { flex: 1; min-width: 0; min-height: 40px; max-height: calc(6 * 1.45em + 18px); margin: 0; padding: 9px 8px; resize: none; overflow-y: auto; border: 0; background: transparent;
  color: var(--ink); font: 15px/1.45 var(--font); }
.mx .composer textarea:focus-visible { outline: none; }
.attach { position: relative; color: var(--muted); }
.attach:hover { color: var(--ink); }
.attach:focus-within { outline: 2px solid var(--purple-hi); outline-offset: 0; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.send { flex: none; min-height: 40px; }
.composer-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 8px; padding: 0 2px; }
.switch { position: relative; display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 14px; cursor: pointer; }
.sw-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sw-track { position: relative; flex: none; width: 34px; height: 20px; margin-top: 0; border: 1px solid #6c5fa0; border-radius: 999px; background: var(--line); transition: background-color .15s ease; }
.sw-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s ease; }
.sw-input:checked + .sw-track { background: var(--purple); border-color: var(--purple-hi); }
.sw-input:checked + .sw-track::before { transform: translateX(14px); background: #fff; }
.sw-input:focus-visible + .sw-track { outline: 2px solid var(--purple-hi); outline-offset: 2px; }
.sw-text { min-width: 0; line-height: 20px; }
.sw-hint { margin-left: 4px; color: var(--muted); font-size: 12px; }
.hint { margin: 6px 2px 0; color: var(--muted); font-size: 12px; }

/* ---- phones and narrow windows: one pane at a time ---- */
@media (max-width: 899.98px) {
  body[data-view="inbox"] .mx-chat { display: none; }
  .mx-empty { display: none; }
  /* the open chat fills the screen: its own header with Back, the list scrolling, the composer docked at the bottom */
  body[data-view="thread"] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  body[data-view="thread"] > .site-top, body[data-view="thread"] > .site-notice, body[data-view="thread"] > .site-foot, body[data-view="thread"] .mx-top { display: none; }
  body[data-view="thread"] .mx { flex: 1 1 auto; min-height: 0; padding: 0; }
  body[data-view="thread"] .mx-problem { margin: 8px 12px; }
  body[data-view="thread"] .mx-frame { flex: 1 1 auto; min-height: 0; }
  body[data-view="thread"] .mx-inbox { display: none; }
  body[data-view="thread"] .mx-chat { flex: 1 1 auto; }
  .chat-head { padding-left: 4px; gap: 8px; }
  .mx-scroll { padding: 12px 12px 8px; }
  .grp-body { max-width: 82%; }
  .composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) {
  .mx-titlebar h1 { font-size: 22px; }
  .sw-hint { display: block; margin-left: 0; line-height: 1.4; }
  .composer-opts { align-items: flex-start; }
}

/* ---- wide screens: two panes inside the site width; the page does not scroll, the panes do ---- */
@media (min-width: 900px) {
  body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  body > .site-foot { padding-top: 10px; padding-bottom: 12px; }
  .mx { flex: 1 1 auto; min-height: 0; padding: 4px 20px 14px; }
  .mx-frame { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden;
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
  .mx-frame > .mx-loading, .mx-frame > .mx-gate { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .mx-frame > .notes { grid-column: 1 / -1; grid-row: 2; }
  .mx-gate { margin: 24px; }
  .mx-inbox { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
  .mx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .mx-chat { grid-column: 2; grid-row: 1; }
  #back { display: none; }
}
/* a very short window: the frame keeps a usable height and the page scrolls instead */
@media (min-width: 900px) and (max-height: 600px) {
  body { height: auto; min-height: 100vh; overflow: visible; }
  .mx { flex: 1 0 auto; }
  .mx-frame { flex: none; height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .receipt.fresh { animation: none; }
  .panel-toggle .ic, .sw-track, .sw-track::before { transition: none; }
}