/* ============================================================================
   Messages Workspace - premium collaboration UI (green–blue–white gradient)
   New from-scratch redesign. Scope: body.mx-page .mx-* only.
   ========================================================================== */
:root {
  --mx-blu: #2563eb;      --mx-blu-d: #1d4ed8;   --mx-blu-t: #eef3ff;   --mx-blu-soft: #dce7ff;
  --mx-grn: #0d9b66;      --mx-grn-d: #0a7d52;   --mx-grn-t: #e6f7ef;
  --mx-cyan: #0ea5b7;
  --mx-ink: #0b1220;      --mx-ink-2: #46536b;   --mx-ink-3: #6b788f;   --mx-ink-4: #9aa6bd;
  --mx-bg: #f4f6fb;       --mx-panel: #ffffff;   --mx-panel-2: #f8fbff;
  --mx-line: #e7edf7;     --mx-line-2: #eef2fa;
  --mx-r-xs: 10px;  --mx-r-sm: 14px;  --mx-r: 18px;  --mx-r-lg: 24px;  --mx-pill: 999px;
  --mx-sh-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --mx-sh-2: 0 8px 24px -12px rgba(20,40,90,.22), 0 2px 8px -4px rgba(20,40,90,.10);
  --mx-sh-3: 0 24px 60px -24px rgba(20,40,90,.35), 0 8px 24px -12px rgba(20,40,90,.18);
  --mx-ring: 0 0 0 3.5px rgba(37,99,235,.16);
  /* Two SEPARATE single-hue gradients - never mixed. Blue = brand/primary chrome; green = money/success. */
  --mx-grad: linear-gradient(135deg, #3277ff 0%, #1d4ed8 100%);          /* blue (brand / primary) */
  --mx-grad-blu: linear-gradient(135deg, #3277ff 0%, #1d4ed8 100%);
  --mx-grad-grn: linear-gradient(135deg, #16b877 0%, #0a7d52 100%);      /* green (money / success) */
  --mx-grad-red: linear-gradient(135deg, #f5564a 0%, #d5342a 100%);      /* red (destructive) */
  --mx-grad-soft: linear-gradient(135deg, rgba(37,99,235,.12), rgba(29,78,216,.08));       /* blue-soft */
  --mx-grad-grn-soft: linear-gradient(135deg, rgba(22,184,119,.14), rgba(10,125,82,.10));  /* green-soft */
  --mx-glass: rgba(255,255,255,.72);
  --mx-glass-line: rgba(255,255,255,.55);
  --mx-font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --mx-amber: #b26a00;    --mx-red: #d5342a;     --mx-red-t: #fdecec;
  --mx-ctl: 44px;
}
@media (prefers-color-scheme: dark) {
  /* Page commits to light; dark handled by high-contrast fallbacks only. */
}

/* ---- base shell ---- */
body.mx-page {
  margin: 0; font-family: var(--mx-font); color: var(--mx-ink);
  /* Clean white/near-white surface - no blended blue+green glow. Colour appears only as a single
     blue OR single green gradient on specific elements. */
  background: var(--mx-bg);
  -webkit-font-smoothing: antialiased;
}
body.mx-page *, body.mx-page *::before, body.mx-page *::after { box-sizing: border-box; }
.mx-page .mx-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mx-page :focus-visible { outline: 2px solid var(--mx-blu); outline-offset: 2px; border-radius: 8px; }

/* ---- app grid ---- */
.mx-app {
  display: grid; grid-template-columns: 372px 1fr 0px;
  gap: 14px; height: calc(100vh - 74px); height: calc(100dvh - 74px); max-width: 1680px; margin: 0 auto;
  padding: 14px 16px 16px; transition: grid-template-columns .32s cubic-bezier(.4,0,.2,1);
}
.mx-app.mx-drawer-open { grid-template-columns: 372px 1fr 360px; }
@media (max-width: 1200px){ .mx-app{ grid-template-columns: 320px 1fr 0; } .mx-app.mx-drawer-open{ grid-template-columns: 300px 1fr 320px; } }

.mx-panel {
  background: var(--mx-panel); border: 1px solid var(--mx-line);
  border-radius: var(--mx-r-lg); box-shadow: var(--mx-sh-2);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* ============================ RAIL ============================ */
.mx-rail { }
.mx-rail-head { padding: 16px 16px 10px; border-bottom: 1px solid var(--mx-line-2); }
.mx-rail-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mx-rail-title { font-size: 20px; font-weight: 800; letter-spacing:-.02em; margin:0; display:flex; align-items:center; gap:9px; }
.mx-rail-title .mx-dot { width:9px; height:9px; border-radius:50%; background:var(--mx-grad); box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.mx-newchat {
  border:0; cursor:pointer; height:40px; padding:0 15px; border-radius: var(--mx-pill);
  background: var(--mx-grad); color:#fff; font-weight:700; font-size:13.5px; font-family:inherit;
  display:inline-flex; align-items:center; gap:7px; box-shadow: 0 6px 16px -8px rgba(37,99,235,.6);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.mx-newchat:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(37,99,235,.65); filter:saturate(1.06); }
.mx-newchat:active { transform: translateY(0) scale(.98); }
.mx-newchat svg { width:17px; height:17px; }

.mx-search { position:relative; margin-top:12px; }
.mx-search input {
  width:100%; height:42px; border:1px solid var(--mx-line); border-radius: var(--mx-pill);
  padding: 0 14px 0 40px; font: 500 14px var(--mx-font); color: var(--mx-ink); background: var(--mx-panel-2);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.mx-search input:focus { outline:0; border-color: var(--mx-blu); box-shadow: var(--mx-ring); background:#fff; }
.mx-search .mx-search-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--mx-ink-4); pointer-events:none; }

.mx-filters { display:flex; gap:7px; overflow-x:auto; padding: 12px 16px 12px; scrollbar-width:none; border-bottom:1px solid var(--mx-line-2); }
.mx-filters::-webkit-scrollbar{ display:none; }
.mx-chip {
  flex:none; cursor:pointer; border:1px solid var(--mx-line); background:#fff; color:var(--mx-ink-2);
  height:32px; padding:0 13px; border-radius:var(--mx-pill); font:700 12.5px var(--mx-font); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; transition:.15s;
}
.mx-chip:hover { border-color: var(--mx-blu-soft); color:var(--mx-blu-d); }
.mx-chip.is-active { background: var(--mx-blu); border-color: var(--mx-blu); color:#fff; box-shadow: 0 4px 10px -6px rgba(37,99,235,.6); }
.mx-chip .mx-chip-count { font-size:11px; background: rgba(0,0,0,.08); border-radius:var(--mx-pill); padding:0 6px; line-height:16px; }
.mx-chip.is-active .mx-chip-count { background: rgba(255,255,255,.25); }

.mx-list { flex:1; min-height:0; overflow-y:auto; padding: 8px; scrollbar-width:thin; }
.mx-list::-webkit-scrollbar{ width:8px; } .mx-list::-webkit-scrollbar-thumb{ background:var(--mx-line); border-radius:8px; }

.mx-conv {
  position:relative; display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  border:1px solid transparent; background:transparent; cursor:pointer; padding:11px 12px; border-radius: var(--mx-r);
  transition: background .16s, border-color .16s, transform .12s; font-family:inherit;
}
.mx-conv:hover { background: var(--mx-panel-2); border-color: var(--mx-line-2); }
.mx-conv.is-active { background: var(--mx-blu-t); border-color: var(--mx-blu-soft); }
.mx-conv.is-active::before { content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--mx-grad); }
.mx-avatar { position:relative; width:46px; height:46px; border-radius: 15px; flex:none; overflow:hidden; background:var(--mx-grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:16px; box-shadow: var(--mx-sh-1); }
.mx-avatar img { width:100%; height:100%; object-fit:cover; }
.mx-avatar.mx-av-round { border-radius:50%; }
.mx-av-wrap { position:relative; flex:none; display:inline-flex; }
.mx-presence { position:absolute; right:-2px; bottom:-2px; width:13px; height:13px; border-radius:50%; border:2.5px solid #fff; background:var(--mx-ink-4); }
.mx-presence.is-online { background: var(--mx-grn); box-shadow: 0 0 0 3px rgba(13,155,102,.18); }
.mx-conv-body { flex:1; min-width:0; }
.mx-conv-row1 { display:flex; align-items:center; gap:4px; }
.mx-conv-name { min-width:0; font-weight:750; font-size:14.5px; color:var(--mx-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Pull the verified tick tight against the name (override the shared 5px left margin). */
.mx-conv-row1 .fp-kyc-tick { margin:0 !important; top:0; flex:none; }
/* @handle sits inline right after the tick; truncates before the name when space is tight. */
.mx-conv-row1 .mx-conv-handle { flex:0 2 auto; margin-left:3px; }
.mx-conv-time { margin-left:auto; padding-left:6px; font-size:11.5px; color:var(--mx-ink-3); font-weight:600; flex:none; }
.mx-conv-handle { min-width:0; font-size:12px; color:var(--mx-ink-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-typeflag { font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:1px 7px; border-radius:var(--mx-pill); }
.mx-typeflag.is-room { color:var(--mx-blu-d); background:var(--mx-blu-t); }
.mx-typeflag.is-personal { color:var(--mx-ink-2); background:var(--mx-line-2); }
.mx-conv-line2 { display:flex; align-items:center; gap:8px; margin-top:3px; }
.mx-conv-preview { flex:1; min-width:0; font-size:13px; color:var(--mx-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-conv.is-unread .mx-conv-preview { color:var(--mx-ink); font-weight:650; }
.mx-conv.is-unread .mx-conv-name { font-weight:800; }
.mx-unread { flex:none; margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:var(--mx-pill); background:var(--mx-grad); color:#fff; font-size:11px; font-weight:800; display:inline-grid; place-items:center; animation: mxPop .28s cubic-bezier(.34,1.56,.64,1); }
.mx-typing-mini { flex:1; min-width:0; font-size:11.5px; color:var(--mx-grn-d); font-weight:750; display:flex; align-items:center; gap:5px; }
/* Per-card star/pin: subtle persistent indicators in row1 (only when active) */
.mx-conv-flags { display:inline-flex; align-items:center; gap:4px; margin-left:4px; flex:none; transition:opacity .14s ease; }
.mx-conv-flags:empty { display:none; }
.mx-flagi { display:inline-flex; }
.mx-flagi svg { width:13px; height:13px; }
.mx-flagi.is-star { color:#e0a63a; } .mx-flagi.is-star svg { fill:#e0a63a; }
.mx-flagi.is-pin { color:var(--mx-blu-d); }
/* Hover toggle actions on any room/personal card (star + pin), swapped in over the time */
.mx-conv-acts { position:absolute; top:9px; right:10px; z-index:2; display:flex; gap:3px; opacity:0; pointer-events:none; transition:opacity .14s ease; }
.mx-conv:hover .mx-conv-acts { opacity:1; pointer-events:auto; }
.mx-conv:hover .mx-conv-time, .mx-conv:hover .mx-conv-flags { opacity:0; }
.mx-cact { position:relative; width:27px; height:27px; border-radius:8px; display:grid; place-items:center; color:var(--mx-ink-3); cursor:pointer; background:var(--mx-panel); border:1px solid var(--mx-line); box-shadow:0 1px 3px rgba(16,24,40,.1); transition:background .13s, color .13s, border-color .13s; }
.mx-cact:hover { background:var(--mx-line-2); color:var(--mx-ink); }
.mx-cact svg { width:15px; height:15px; }
/* ON states are FILLED so pinned/starred reads clearly from the button itself (pin becomes a slashed pin = "unpin") */
.mx-cact.mx-cact-star.is-on { color:#c98a12; border-color:#e7c883; background:#fdf7e8; } .mx-cact.mx-cact-star.is-on svg { fill:#e0a63a; }
.mx-cact.mx-cact-star.is-on:hover { background:#f8ecc9; }
.mx-cact.mx-cact-pin.is-on { color:var(--mx-blu-d); border-color:var(--mx-blu-soft); background:var(--mx-blu-t); }
.mx-cact.mx-cact-pin.is-on:hover { background:var(--mx-blu-soft); }
/* instant label tooltip (right-anchored so it never overflows the rail edge) */
.mx-cact::after { content:attr(data-tip); position:absolute; top:calc(100% + 6px); right:0; background:var(--mx-ink); color:#fff; font:600 10.5px var(--mx-font); padding:3px 7px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(2px); transition:opacity .12s ease, transform .12s ease; z-index:6; box-shadow:0 6px 16px -6px rgba(16,24,40,.4); }
.mx-cact:hover::after { opacity:1; transform:translateY(0); }
/* New Chat is buyer-only (only buyers start conversations, and only with sellers) */
body[data-current-role="seller"] .mx-newchat { display:none !important; }

/* ============================ CHAT ============================ */
.mx-chat { position:relative; }
.mx-chat-empty { flex:1; display:grid; place-items:center; text-align:center; padding:40px; }
.mx-chat-head { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--mx-line-2); background: var(--mx-glass); backdrop-filter: blur(10px); }
.mx-chat-head .mx-avatar { width:42px; height:42px; }
.mx-head-id { min-width:0; flex:1; overflow:hidden; }
.mx-head-name { font-weight:800; font-size:15.5px; display:flex; align-items:center; gap:7px; min-width:0; white-space:nowrap; }
.mx-head-name > .mx-conv-handle { overflow:hidden; text-overflow:ellipsis; }
.mx-head-nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }
.mx-head-sub { font-size:12px; color:var(--mx-ink-3); font-weight:600; display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:1px; }
.mx-head-sub .is-online { color:var(--mx-grn-d); }
.mx-head-localtime { display:inline-flex; align-items:center; gap:4px; color:var(--mx-ink-3); font-weight:600; white-space:nowrap; }
.mx-head-localtime::before { content:"·"; margin-right:2px; color:var(--mx-ink-4); }
.mx-head-localtime svg { width:13px; height:13px; opacity:.8; }
.mx-head-localtime b { font-weight:700; color:var(--mx-ink-2); }
.mx-head-actions { margin-left:auto; display:flex; align-items:center; gap:6px; }
.mx-icobtn { width:38px; height:38px; border-radius:12px; border:1px solid var(--mx-line); background:#fff; color:var(--mx-ink-2); cursor:pointer; display:grid; place-items:center; transition:.15s; }
.mx-icobtn:hover { border-color:var(--mx-blu-soft); color:var(--mx-blu-d); background:var(--mx-blu-t); }
.mx-icobtn svg { width:18px; height:18px; }
.mx-icobtn.is-on { background:var(--mx-blu); border-color:var(--mx-blu); color:#fff; }
/* drawer OPEN -> header info toggle reads as active (subtle, since it can be persistently on) */
.mx-icobtn.is-active, .mx-head-count.is-active { background:var(--mx-blu-t); border-color:var(--mx-blu-soft); color:var(--mx-blu-d); }

.mx-pinbar { padding:8px 16px; border-bottom:1px solid var(--mx-line-2); background:var(--mx-blu-t); display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mx-blu-d); font-weight:700; cursor:pointer; }
.mx-pinbar svg { width:14px; height:14px; }
.mx-pinbar b { color:var(--mx-ink); }

.mx-thread { flex:1; min-height:0; overflow-y:auto; padding: 18px 20px 8px; scroll-behavior:smooth; }
.mx-thread::-webkit-scrollbar{ width:9px; } .mx-thread::-webkit-scrollbar-thumb{ background:var(--mx-line); border-radius:9px; }
.mx-daymark { display:flex; align-items:center; gap:12px; margin: 16px 0 12px; }
.mx-daymark::before, .mx-daymark::after { content:""; flex:1; height:1px; background:var(--mx-line); }
.mx-daymark span { font-size:11.5px; font-weight:800; color:var(--mx-ink-3); letter-spacing:.03em; text-transform:uppercase; }

.mx-row { display:flex; gap:12px; padding: 6px 0; position:relative; animation: mxFade .3s ease both; transition: background-color .5s ease; border-radius:10px; }
.mx-row.mx-flash { background: var(--mx-blu-t); }
.mx-row.mx-grouped { padding-top:1px; }
.mx-row.mx-grouped .mx-row-av { visibility:hidden; height:0; }
.mx-row-av { flex:none; width:40px; }
.mx-row-av .mx-avatar { width:40px; height:40px; }
.mx-row-main { flex:1; min-width:0; }
.mx-row-head { display:flex; align-items:baseline; gap:8px; }
.mx-row-name { font-weight:750; font-size:13.5px; color:var(--mx-ink); }
.mx-role { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--mx-blu-d); background:var(--mx-blu-t); border-radius:var(--mx-pill); padding:1px 7px; }
.mx-role.is-seller { color:var(--mx-ink-2); background:var(--mx-line-2); }
.mx-row-time { font-size:11px; color:var(--mx-ink-3); font-weight:600; }
.mx-row-edited { font-size:10.5px; color:var(--mx-ink-3); font-style:italic; }
.mx-text { font-size:14.5px; line-height:1.55; color:var(--mx-ink); margin-top:2px; white-space:pre-wrap; word-break:break-word; }
.mx-text a { color:var(--mx-blu-d); text-decoration:underline; text-underline-offset:2px; }
.mx-text strong { font-weight:800; }
.mx-text em { font-style:italic; }
.mx-text s { opacity:.7; }
.mx-text code, .mx-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88em; background:var(--mx-line-2); border:1px solid var(--mx-line); border-radius:6px; padding:1px 5px; }
.mx-text a.mx-mention-link { color:var(--mx-blu-d); font-weight:750; text-decoration:none; background:var(--mx-blu-t); border-radius:6px; padding:0 4px; }
.mx-text a.mx-mention-link:hover { background:var(--mx-blu-soft); }
.mx-text.is-deleted { color:var(--mx-ink-4); font-style:italic; }
.mx-reply-quote { border-left:3px solid var(--mx-blu-soft); background:var(--mx-panel-2); border-radius:8px; padding:6px 10px; margin:2px 0 4px; font-size:12.5px; color:var(--mx-ink-2); cursor:pointer; }
.mx-reply-quote b { color:var(--mx-blu-d); display:block; font-size:11.5px; }

/* message hover actions */
.mx-msg-actions { position:absolute; top:-16px; right:8px; display:flex; align-items:center; gap:1px; background:#fff; border:1px solid var(--mx-line); border-radius:12px; box-shadow: 0 8px 24px -8px rgba(16,24,40,.28), 0 1px 2px rgba(16,24,40,.08); padding:4px; opacity:0; transform:translateY(6px) scale(.97); transform-origin:top right; pointer-events:none; transition: opacity .15s ease, transform .18s cubic-bezier(.34,1.42,.55,1); z-index:6; }
.mx-row:hover .mx-msg-actions, .mx-msg-actions:hover, .mx-msg-actions:focus-within { opacity:1; transform:none; pointer-events:auto; }
.mx-act { position:relative; width:32px; height:32px; border:0; background:transparent; color:var(--mx-ink-2); border-radius:9px; cursor:pointer; display:grid; place-items:center; transition: background .13s ease, color .13s ease, transform .1s ease; }
.mx-act:hover { background:var(--mx-blu-t); color:var(--mx-blu-d); }
.mx-act:active { transform:scale(.88); }
.mx-act.mx-act-del:hover { background:rgba(213,52,42,.1); color:#d5342a; }
/* pinned message -> pin button stays blue-filled with a slashed-pin icon = "Unpin" (clear state) */
.mx-act.is-pinned { color:var(--mx-blu-d); background:var(--mx-blu-t); }
.mx-act.is-pinned:hover { background:var(--mx-blu-soft); color:var(--mx-blu-d); }
.mx-act svg { width:16px; height:16px; }
/* Small auto show/hide tooltip above the hovered action button */
.mx-act::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(3px); background:#14171d; color:#fff; font-size:11px; font-weight:600; letter-spacing:.01em; line-height:1; white-space:nowrap; padding:5px 8px; border-radius:6px; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition: opacity .13s ease, transform .13s ease; z-index:8; }
.mx-act::before { content:""; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#14171d; opacity:0; transition: opacity .13s ease; }
.mx-act:hover::after, .mx-act:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }
.mx-act:hover::before, .mx-act:focus-visible::before { opacity:1; }

/* reactions */
.mx-reacts { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.mx-react { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 9px; border-radius:var(--mx-pill); border:1px solid var(--mx-line); background:#fff; font-size:12.5px; font-weight:700; color:var(--mx-ink-2); cursor:pointer; transition:.13s; }
.mx-react:hover { border-color:var(--mx-blu-soft); }
.mx-react.is-mine { background:var(--mx-blu-t); border-color:var(--mx-blu-soft); color:var(--mx-blu-d); }
.mx-react .mx-react-n { font-size:11.5px; }
.mx-react-add { width:26px; height:26px; padding:0; justify-content:center; color:var(--mx-ink-4); }

.mx-meta { display:flex; align-items:center; gap:5px; margin-top:4px; font-size:10px; color:var(--mx-ink-4); font-weight:500; letter-spacing:.02em; }
.mx-meta .mx-tick { display:inline-flex; align-items:center; gap:2.5px; }
.mx-meta .is-read { color:#8ea6e8; } /* soft light blue - "Seen" stays subtle, not a bold blue */
.mx-meta svg { width:11px; height:11px; }

/* attachments */
.mx-atts { display:flex; flex-wrap:wrap; gap:9px; margin-top:8px; }
.mx-att { border:1px solid var(--mx-line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--mx-sh-1); max-width:280px; }
.mx-att-img { position:relative; cursor:zoom-in; line-height:0; }
/* Photo AND video always render as one small uniform thumbnail (portrait or landscape alike); tap opens full in the lightbox. */
.mx-att-img img, .mx-att-img video { display:block; width:150px; height:150px; object-fit:cover; background:var(--mx-line-2); }
.mx-att-img .mx-play { position:absolute; inset:0; display:grid; place-items:center; }
.mx-att-img .mx-play svg { width:40px; height:40px; color:#fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.mx-att-file { display:flex; align-items:center; gap:11px; padding:11px 13px; min-width:220px; }
.mx-att-ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none; }
.mx-att-ic svg { width:22px; height:22px; }
.mx-att-info { min-width:0; }
.mx-att-name { display:block; font-size:13px; font-weight:700; color:var(--mx-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-att-sz { display:block; font-size:11.5px; color:var(--mx-ink-3); margin-top:1px; }
.mx-att-dl { margin-left:auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--mx-line); background:#fff; color:var(--mx-blu-d); display:grid; place-items:center; cursor:pointer; flex:none; }
.mx-att-dl:hover { background:var(--mx-blu-t); }

/* contract / offer card */
.mx-card { border:1px solid var(--mx-line); border-radius:18px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:var(--mx-sh-2); max-width:420px; margin-top:8px; overflow:hidden; }
.mx-card-top { padding:14px 16px 12px; background:var(--mx-grad-grn-soft); border-bottom:1px solid var(--mx-line-2); display:flex; align-items:center; gap:10px; }
.mx-card-top .mx-card-ic { width:38px; height:38px; border-radius:11px; background:var(--mx-grad-grn); color:#fff; display:grid; place-items:center; flex:none; }
.mx-card-top .mx-card-ic svg{ width:20px; height:20px; }
.mx-card-title { font-weight:800; font-size:15px; }
.mx-card-kind { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--mx-grn-d); }
.mx-card-body { padding:14px 16px; }
.mx-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.mx-card-metric .k { font-size:11px; color:var(--mx-ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.mx-card-metric .v { font-size:15px; font-weight:800; color:var(--mx-ink); margin-top:2px; }
.mx-card-metric .v.is-price { color:var(--mx-grn-d); }
.mx-status { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:var(--mx-pill); color:var(--mx-ink-2); background:var(--mx-line-2); text-transform:capitalize; }
.mx-status.is-pending { color:var(--mx-amber); background:#fff6e6; }
.mx-status.is-accepted, .mx-status.is-active, .mx-status.is-funded, .mx-status.is-completed, .mx-status.is-released { color:var(--mx-grn-d); background:var(--mx-grn-t); }
.mx-status.is-declined, .mx-status.is-withdrawn, .mx-status.is-cancelled, .mx-status.is-expired { color:var(--mx-red); background:var(--mx-red-t); }
.mx-card-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.mx-card { max-width:400px; }
.mx-card-desc { font-size:13.5px; line-height:1.55; color:var(--mx-ink-2); margin-top:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mx-card-top[data-view-contract]:hover { filter:brightness(.985); }
.mx-detail .mx-card-grid { grid-template-columns:1fr 1fr; }
.mx-detail-desc { white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.65; color:var(--mx-ink); }
/* Phase 2: forward label, translate block, presence */
.mx-fwd-label { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--mx-ink-3); margin-bottom:3px; }
.mx-fwd-label svg { width:13px; height:13px; }
.mx-translated { margin-top:6px; padding:9px 12px; background:var(--mx-blu-t); border:1px solid var(--mx-blu-soft); border-radius:12px; font-size:14px; line-height:1.55; color:var(--mx-ink); }
.mx-translated-tag { display:block; font-size:11px; font-weight:800; color:var(--mx-blu-d); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.mx-translated-x { display:block; margin-top:6px; background:none; border:0; color:var(--mx-blu-d); font-weight:700; font-size:12px; cursor:pointer; padding:0; }
.mx-pres-dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--mx-ink-4); }
.mx-pres-dot.is-available { background:var(--mx-grn); }
.mx-pres-dot.is-away { background:var(--mx-amber); }
.mx-pres-dot.is-busy { background:var(--mx-red); }
.mx-pres-menu button { display:flex; align-items:center; gap:9px; width:100%; border:0; background:transparent; padding:9px 11px; border-radius:9px; cursor:pointer; font:600 13px var(--mx-font); color:var(--mx-ink); text-align:left; }
.mx-pres-menu button:hover { background:var(--mx-panel-2); }
.mx-btn { border:0; cursor:pointer; height:40px; padding:0 16px; border-radius:12px; font:700 13.5px var(--mx-font); display:inline-flex; align-items:center; gap:7px; transition:.16s; }
.mx-btn svg{ width:16px; height:16px; }
.mx-btn-primary { background:var(--mx-grad); color:#fff; box-shadow:0 6px 16px -8px rgba(37,99,235,.6); }
.mx-btn-primary:hover { transform:translateY(-1px); }
.mx-btn-green { background:var(--mx-grad-grn); color:#fff; box-shadow:0 6px 16px -8px rgba(13,155,102,.55); }
.mx-btn-green:hover { transform:translateY(-1px); }
.mx-btn-ghost { background:#fff; border:1px solid var(--mx-line); color:var(--mx-ink-2); }
.mx-btn-ghost:hover { border-color:var(--mx-blu-soft); color:var(--mx-blu-d); }
.mx-btn-danger { background:#fff; border:1px solid var(--mx-red-t); color:var(--mx-red); }
.mx-btn-danger:hover { background:var(--mx-red-t); }
.mx-btn-danger-solid { background:var(--mx-grad-red); color:#fff; box-shadow:0 6px 16px -8px rgba(213,52,42,.55); }
.mx-btn-danger-solid:hover { transform:translateY(-1px); }
.mx-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* confirm dialog body */
.mx-confirm-msg { font-size:14.5px; line-height:1.6; color:var(--mx-ink); margin:0; }
.mx-confirm-sub { font-size:13px; line-height:1.55; color:var(--mx-ink-3); margin:10px 0 0; }
.mx-confirm-msg b { color:var(--mx-ink); font-weight:750; }

.mx-sysmsg { text-align:center; margin:10px 0; }
.mx-sysmsg span { font-size:12px; color:var(--mx-ink-3); background:var(--mx-panel-2); border:1px solid var(--mx-line-2); border-radius:var(--mx-pill); padding:5px 14px; }

.mx-typing { display:flex; align-items:center; gap:10px; padding:6px 20px 2px; }
.mx-typing .mx-avatar{ width:28px; height:28px; font-size:11px; }
.mx-typing-bubble { display:inline-flex; gap:4px; align-items:center; padding:8px 12px; background:var(--mx-panel-2); border:1px solid var(--mx-line-2); border-radius:var(--mx-pill); }
.mx-typing-bubble i { width:6px; height:6px; border-radius:50%; background:var(--mx-ink-4); animation: mxBounce 1.2s infinite; }
.mx-typing-bubble i:nth-child(2){ animation-delay:.15s; } .mx-typing-bubble i:nth-child(3){ animation-delay:.3s; }

/* ---- composer ---- */
.mx-composer { border-top:1px solid var(--mx-line-2); padding:12px 16px 14px; background:var(--mx-glass); backdrop-filter:blur(8px); }
.mx-reply-preview { display:flex; align-items:center; gap:10px; background:var(--mx-blu-t); border:1px solid var(--mx-blu-soft); border-radius:12px; padding:8px 12px; margin-bottom:9px; font-size:12.5px; }
.mx-reply-preview b { color:var(--mx-blu-d); }
.mx-reply-preview .mx-x { margin-left:auto; cursor:pointer; color:var(--mx-ink-3); }
.mx-upload-tray { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:9px; }
.mx-upcard { position:relative; overflow:hidden; display:flex; align-items:center; gap:10px; border:1px solid var(--mx-line); border-radius:12px; padding:9px 11px; background:#fff; width:252px; max-width:100%; box-shadow:var(--mx-sh-1); transition:box-shadow .3s ease, border-color .3s ease; }
.mx-upcard > *:not(.mx-upcard-fill) { position:relative; z-index:1; }
.mx-upcard .mx-att-ic { width:38px; height:38px; }
.mx-upcard-info { min-width:0; flex:1; }
.mx-upcard-name { display:block; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-upcard-sub { font-size:11px; color:var(--mx-ink-3); margin-top:2px; display:flex; gap:8px; }
/* Whole-card gradient fill that grows to 100% as the upload progresses (animated shimmer), then green + glow when done. */
.mx-upcard-fill { position:absolute; left:0; top:0; bottom:0; width:0%; z-index:0; overflow:hidden; background:linear-gradient(135deg, rgba(50,119,255,.24), rgba(29,78,216,.14)); transition:width .28s cubic-bezier(.4,0,.2,1); }
.mx-upcard-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 15%, rgba(255,255,255,.55) 50%, transparent 85%); background-size:240% 100%; animation:mxUpShimmer 1.15s linear infinite; }
@keyframes mxUpShimmer { from { background-position:130% 0; } to { background-position:-130% 0; } }
.mx-upcard.is-done { border-color:transparent; box-shadow:0 0 0 1.5px rgba(13,155,102,.4), 0 0 22px -3px rgba(13,155,102,.55), 0 6px 18px -8px rgba(13,155,102,.4); }
.mx-upcard.is-done .mx-upcard-fill { width:100% !important; background:linear-gradient(135deg, rgba(22,184,119,.3), rgba(10,125,82,.18)); }
.mx-upcard.is-done .mx-upcard-fill::after, .mx-upcard.is-error .mx-upcard-fill::after { animation:none; opacity:0; }
.mx-up-ok { color:var(--mx-grn-d); font-weight:800; }
.mx-upcard.is-error { border-color:var(--mx-red-t); }
.mx-upcard.is-error .mx-upcard-fill { width:100% !important; background:var(--mx-red-t); }
.mx-upcard-x { width:26px; height:26px; border-radius:50%; border:0; background:var(--mx-panel-2); color:var(--mx-ink-3); cursor:pointer; display:grid; place-items:center; flex:none; }
.mx-upcard-x:hover { background:var(--mx-red-t); color:var(--mx-red); }

/* iOS-style unified input card: textarea on top, action bar (tools + send) at the bottom */
.mx-inputcard {
  position:relative; background:#fff; border:1px solid var(--mx-line); border-radius:22px;
  box-shadow: 0 2px 10px -6px rgba(20,40,90,.14), 0 1px 2px rgba(16,24,40,.04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mx-inputcard:focus-within { border-color: #c9d4e6; box-shadow: 0 4px 14px -8px rgba(20,40,90,.18); }
.mx-input {
  width:100%; display:block; min-height:24px; max-height:170px; border:0; background:transparent; resize:none;
  padding:14px 18px 2px; font:500 15px var(--mx-font); color:var(--mx-ink); line-height:1.5; overflow-y:auto; outline:none;
}
.mx-input::placeholder { color:var(--mx-ink-4); }
/* the card itself shows focus feedback - kill the global blue :focus-visible outline on the message field */
.mx-page .mx-input:focus, .mx-page .mx-input:focus-visible { outline:none; box-shadow:none; }
.mx-actionbar { display:flex; align-items:center; gap:8px; padding:5px 7px 7px 9px; }
.mx-actionbar-left { flex:1; min-width:0; display:flex; align-items:center; gap:1px; overflow-x:auto; scrollbar-width:none; }
.mx-actionbar-left::-webkit-scrollbar { display:none; }
.mx-tool { flex:none; width:34px; height:34px; border:0; background:transparent; color:var(--mx-ink-3); border-radius:10px; cursor:pointer; display:grid; place-items:center; transition:background .14s, color .14s, transform .1s; font:700 14px var(--mx-font); }
.mx-tool:hover { background:var(--mx-blu-t); color:var(--mx-blu-d); }
.mx-tool:active { transform:scale(.9); }
.mx-tool.is-on { background:var(--mx-blu); color:#fff; }
.mx-tool svg { width:19px; height:19px; }
.mx-tool-sep { flex:none; width:1px; height:18px; background:var(--mx-line); margin:0 6px; }
/* "Create Offer" reads as a real action button (soft green pill) so the seller knows it sends an offer */
.mx-tool-contract { width:auto; display:inline-flex; align-items:center; padding:0 13px; height:34px; gap:6px; border:1px solid var(--mx-grn); background:var(--mx-grn-t); color:var(--mx-grn-d); font:800 12.5px var(--mx-font); border-radius:var(--mx-pill); box-shadow:0 1px 2px rgba(13,155,102,.15); }
.mx-tool-contract:hover { background:var(--mx-grad-grn); border-color:transparent; color:#fff; transform:translateY(-1px); }
.mx-tool-contract:hover svg { color:#fff; }
.mx-tool-contract svg { width:17px; height:17px; }
.mx-tool-contract span { white-space:nowrap; }
.mx-newline { flex:none; width:38px; height:38px; border:1px solid var(--mx-line); background:#fff; color:var(--mx-ink-3); border-radius:12px; cursor:pointer; display:grid; place-items:center; transition:background .14s, color .14s, border-color .14s, transform .1s; }
.mx-newline:hover { border-color:var(--mx-blu-soft); color:var(--mx-blu-d); background:var(--mx-blu-t); }
.mx-newline:active { transform:scale(.92); }
.mx-newline svg { width:18px; height:18px; }
.mx-send {
  flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--mx-grad); color:#fff; cursor:pointer;
  display:grid; place-items:center; box-shadow:0 6px 16px -8px rgba(37,99,235,.6); transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.mx-send:hover:not(:disabled) { transform:translateY(-1px) scale(1.06); }
.mx-send:active:not(:disabled) { transform:scale(.93); }
.mx-send:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.mx-send svg { width:19px; height:19px; }
.mx-composer-note { font-size:11.5px; color:var(--mx-ink-3); margin:8px 4px 0; display:flex; align-items:center; gap:6px; }
.mx-composer-note.is-warn { color:var(--mx-amber); }

/* @mention autocomplete (sellers only) */
.mx-mention { position:absolute; bottom:calc(100% + 10px); left:0; z-index:60; width:min(340px, 100%); max-height:290px; overflow-y:auto; background:#fff; border:1px solid var(--mx-line); border-radius:16px; box-shadow:var(--mx-sh-3); display:none; padding:6px; scrollbar-width:thin; }
.mx-mention.is-open { display:block; animation: mxFade .16s ease; }
.mx-mention-head { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--mx-ink-4); padding:6px 10px 4px; }
.mx-mention-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:12px; cursor:pointer; transition:background .12s; font-family:inherit; }
.mx-mention-item:hover, .mx-mention-item.is-active { background:var(--mx-blu-t); }
.mx-mention-item .mx-avatar { width:34px; height:34px; font-size:12px; }
.mx-mention-meta { min-width:0; display:flex; flex-direction:column; }
.mx-mention-name { font-size:13.5px; font-weight:700; color:var(--mx-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.mx-mention-handle { font-size:12px; color:var(--mx-blu-d); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-mention-lvl { font-size:11.5px; color:var(--mx-ink-3); font-weight:600; margin-left:auto; flex:none; }
.mx-mention-msg { padding:14px 12px; font-size:13px; color:var(--mx-ink-3); text-align:center; }
.mx-mention-msg .mx-sk { height:34px; border-radius:10px; }

/* blocked composer */
.mx-blocked { padding:16px; text-align:center; font-size:13px; color:var(--mx-ink-3); border-top:1px solid var(--mx-line-2); }

/* ============================ DRAWER ============================ */
.mx-drawer { transform: translateX(16px); opacity:0; pointer-events:none; transition:.3s; }
.mx-app.mx-drawer-open .mx-drawer { transform:none; opacity:1; pointer-events:auto; }
.mx-drawer-head { padding:15px 18px; border-bottom:1px solid var(--mx-line-2); display:flex; align-items:center; gap:10px; }
.mx-drawer-head h3 { margin:0; font-size:15px; font-weight:800; letter-spacing:-.01em; }
.mx-drawer-hide { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px 0 9px; border-radius:var(--mx-pill); border:1px solid var(--mx-line); background:#fff; color:var(--mx-ink-3); font:700 12px var(--mx-font); cursor:pointer; transition:.14s; }
.mx-drawer-hide svg { width:15px; height:15px; }
.mx-drawer-hide:hover { border-color:var(--mx-blu-soft); background:var(--mx-blu-t); color:var(--mx-blu-d); }
.mx-drawer-body { flex:1; min-height:0; overflow-y:auto; padding:16px 16px 22px; }
.mx-drawer-sec { margin-bottom:20px; }
.mx-drawer-sec:last-child { margin-bottom:0; }
.mx-drawer-sec h4 { margin:0 0 10px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--mx-ink-4); }
.mx-sec-h { display:flex; align-items:center; gap:8px; }
.mx-sec-h > span:first-child { margin-right:auto; }
.mx-sec-count { display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 6px; border-radius:var(--mx-pill); background:var(--mx-line-2); color:var(--mx-ink-3); font:800 10.5px var(--mx-font); letter-spacing:0; }

/* ---- hero card ---- */
.mx-di-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
  padding:22px 16px 18px; margin-bottom:20px; border:1px solid var(--mx-line); border-radius:var(--mx-r);
  background:linear-gradient(180deg,#fbfcff 0%, var(--mx-panel-2) 100%); }
.mx-di-ava .mx-avatar { width:74px; height:74px; font-size:27px; box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--mx-line), var(--mx-sh-2); }
.mx-di-name { margin-top:11px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--mx-ink); }
.mx-di-name .fp-kyc-tick { margin:0 !important; }
.mx-di-name .fp-kyc-tick img { width:16px; height:16px; }
.mx-di-handle { font-size:12.5px; font-weight:600; color:var(--mx-ink-3); }
.mx-di-serve { display:inline-flex; align-items:center; gap:6px; max-width:100%; margin-top:9px; padding:6px 12px 6px 10px;
  border:1px solid var(--mx-line); border-radius:var(--mx-pill); background:#fff; color:var(--mx-ink-2); font-size:12px; font-weight:600; box-shadow:var(--mx-sh-1); }
.mx-di-serve svg { width:14px; height:14px; flex:none; color:var(--mx-blu); }
.mx-di-serve span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- members ---- */
.mx-mem-list { display:flex; flex-direction:column; gap:2px; }
.mx-member { display:flex; align-items:center; gap:11px; padding:8px; border-radius:var(--mx-r-sm); transition:background .14s; }
.mx-member:hover { background:var(--mx-panel-2); }
.mx-member .mx-avatar { width:38px; height:38px; font-size:14px; flex:none; }
.mx-mem-meta { flex:1; min-width:0; }
.mx-mem-name { display:flex; align-items:center; gap:4px; min-width:0; font-size:13.5px; font-weight:700; color:var(--mx-ink); }
.mx-mem-name > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mx-mem-name .fp-kyc-tick { margin:0 !important; flex:none; }
.mx-mem-name .fp-kyc-tick img { width:14px; height:14px; }
.mx-mem-sub { display:flex; align-items:center; gap:7px; margin-top:2px; font-size:11.5px; font-weight:500; color:var(--mx-ink-3); }
.mx-mem-sub > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mx-role { flex:none; padding:1.5px 8px; border-radius:var(--mx-pill); font:800 10px var(--mx-font); text-transform:uppercase; letter-spacing:.03em; }
.mx-role-buyer { background:var(--mx-blu-t); color:var(--mx-blu-d); }
.mx-role-seller { background:var(--mx-grn-t); color:var(--mx-grn-d); }
.mx-role-member { background:var(--mx-line-2); color:var(--mx-ink-3); }
.mx-member-x { margin-left:auto; flex:none; width:28px; height:28px; border-radius:8px; border:0; background:transparent; color:var(--mx-ink-4); cursor:pointer; display:grid; place-items:center; transition:.13s; }
.mx-member-x:hover { background:var(--mx-red-t); color:var(--mx-red); }
.mx-member-x svg { width:14px; height:14px; }
.mx-add-btn { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--mx-blu-soft); background:var(--mx-blu-t); color:var(--mx-blu-d); font:800 11.5px var(--mx-font); cursor:pointer; padding:4px 11px 4px 8px; border-radius:var(--mx-pill); transition:.14s; }
.mx-add-btn svg { width:14px; height:14px; }
.mx-add-btn:hover { background:var(--mx-blu); border-color:var(--mx-blu); color:#fff; }
.mx-linkbtn { border:0; background:transparent; color:var(--mx-blu-d); font:800 12.5px var(--mx-font); cursor:pointer; padding:2px 6px; border-radius:6px; text-transform:none; letter-spacing:0; }
.mx-linkbtn:hover { background:var(--mx-blu-t); }

/* ---- pinned ---- */
.mx-pin-list { display:flex; flex-direction:column; gap:6px; }
.mx-pin-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  padding:9px 11px; border:1px solid var(--mx-line); border-radius:var(--mx-r-sm); background:#fff; transition:.14s; font:inherit; }
.mx-pin-item:hover { border-color:var(--mx-blu-soft); background:var(--mx-blu-t); }
.mx-pin-ic { flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--mx-blu-t); color:var(--mx-blu); }
.mx-pin-item:hover .mx-pin-ic { background:#fff; }
.mx-pin-ic svg { width:14px; height:14px; }
.mx-pin-tx { flex:1; min-width:0; font-size:12.5px; font-weight:500; color:var(--mx-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- contract history ---- */
.mx-ct-list { display:flex; flex-direction:column; gap:8px; }
.mx-ct-sep { margin:8px 2px 1px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--mx-ink-4); }
.mx-ct-card { display:block; position:relative; padding:11px 13px; border:1px solid var(--mx-line); border-radius:var(--mx-r-sm); background:#fff; text-decoration:none; box-shadow:var(--mx-sh-1); transition:transform .14s, border-color .14s, box-shadow .14s, background .14s; }
.mx-ct-card:hover { border-color:var(--mx-blu-soft); box-shadow:var(--mx-sh-2); transform:translateY(-1px); }
.mx-ct-done { background:var(--mx-panel-2); box-shadow:none; }
.mx-ct-done:hover { background:#fff; }
.mx-ct-row1 { display:flex; align-items:flex-start; gap:8px; }
.mx-ct-title { flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--mx-ink); line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mx-ct-status { flex:none; padding:2.5px 9px; border-radius:var(--mx-pill); font:800 10px var(--mx-font); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; }
.mx-cs-active { background:var(--mx-blu-t); color:var(--mx-blu-d); }
.mx-cs-rev { background:#fdf5e6; color:var(--mx-amber); }
.mx-cs-dispute { background:var(--mx-red-t); color:var(--mx-red); }
.mx-cs-done { background:var(--mx-grn-t); color:var(--mx-grn-d); }
.mx-cs-cancel { background:var(--mx-line-2); color:var(--mx-ink-3); }
.mx-ct-row2 { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:9px; }
.mx-ct-amt { font-size:14px; font-weight:800; color:var(--mx-ink); letter-spacing:-.01em; }
.mx-ct-type { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--mx-ink-3); }
.mx-ct-type svg { width:13px; height:13px; }
.mx-ct-rev { display:inline-flex; align-items:center; padding:1.5px 7px; border-radius:var(--mx-pill); background:#fdf5e6; color:var(--mx-amber); font:800 10px var(--mx-font); }
.mx-ct-date { margin-left:auto; font-size:10.5px; font-weight:500; color:var(--mx-ink-4); white-space:nowrap; }

/* ---- quick actions ---- */
.mx-di-actions { border-top:1px solid var(--mx-line-2); padding-top:18px; }
.mx-qa-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:10px; }
.mx-qa { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  padding:15px 8px; border:1px solid var(--mx-line); border-radius:var(--mx-r-sm); background:#fff; color:var(--mx-ink-2);
  transition:transform .14s, border-color .14s, background .14s, color .14s, box-shadow .14s; }
.mx-qa:hover { border-color:var(--mx-blu-soft); background:var(--mx-panel-2); transform:translateY(-1px); box-shadow:var(--mx-sh-1); }
.mx-qa:active { transform:translateY(0); }
.mx-qa-ic { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--mx-line-2); color:var(--mx-ink-3); transition:.14s; }
.mx-qa-ic svg { width:19px; height:19px; }
.mx-qa-lb { font:700 12px var(--mx-font); letter-spacing:-.01em; }
/* active (on) states - each control its own accent */
.mx-qa.is-on { color:var(--mx-ink); }
.mx-qa-star.is-on { border-color:#f0d79a; background:#fdf7e8; }
.mx-qa-star.is-on .mx-qa-ic { background:#f6e2a6; color:#b9861a; }
.mx-qa-star.is-on .mx-qa-ic svg path { fill:#eab308; stroke:#b9861a; }
.mx-qa-pin.is-on { border-color:var(--mx-blu-soft); background:var(--mx-blu-t); }
.mx-qa-pin.is-on .mx-qa-ic { background:var(--mx-blu-soft); color:var(--mx-blu-d); }
.mx-qa-mute.is-on { border-color:#f0d9a8; background:#fdf5e6; }
.mx-qa-mute.is-on .mx-qa-ic { background:#f6e6bf; color:var(--mx-amber); }
.mx-qa-arch.is-on { border-color:#cdd6e6; background:#eef2f9; }
.mx-qa-arch.is-on .mx-qa-ic { background:#dbe2ee; color:var(--mx-ink-2); }
.mx-di-block { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer;
  height:42px; border:1px solid var(--mx-line); border-radius:var(--mx-r-sm); background:#fff; color:var(--mx-ink-3);
  font:700 13px var(--mx-font); transition:.14s; }
.mx-di-block svg { width:17px; height:17px; }
.mx-di-block:hover { border-color:var(--mx-red-t); background:var(--mx-red-t); color:var(--mx-red); }
.mx-head-count { display:inline-flex; align-items:center; gap:4px; height:38px; padding:0 11px; border:1px solid var(--mx-line); background:#fff; color:var(--mx-ink-2); border-radius:12px; font:700 13px var(--mx-font); cursor:pointer; transition:.15s; }
.mx-head-count svg { width:17px; height:17px; }
.mx-head-count:hover { border-color:var(--mx-blu-soft); color:var(--mx-blu-d); background:var(--mx-blu-t); }
.mx-media-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.mx-media-tab { cursor:pointer; border:1px solid var(--mx-line); background:#fff; height:28px; padding:0 11px; border-radius:var(--mx-pill); font:700 11.5px var(--mx-font); color:var(--mx-ink-2); }
.mx-media-tab.is-active { background:var(--mx-blu); border-color:var(--mx-blu); color:#fff; }
.mx-media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mx-media-grid img, .mx-media-grid .mx-media-cell { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; background:var(--mx-panel-2); cursor:pointer; border:1px solid var(--mx-line-2); }
.mx-drawer-btns { display:flex; flex-direction:column; gap:8px; }

/* ============================ POPUPS ============================ */
.mx-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px;
  background:rgba(11,18,32,.42); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .22s; }
.mx-overlay.is-open { opacity:1; pointer-events:auto; }
.mx-modal { width:100%; max-width:560px; max-height:88vh; background:#fff; border-radius:24px; box-shadow:var(--mx-sh-3); display:flex; flex-direction:column; overflow:hidden; transform:translateY(14px) scale(.98); transition:transform .26s cubic-bezier(.34,1.3,.6,1); }
.mx-overlay.is-open .mx-modal { transform:none; }
.mx-modal.is-wide { max-width:720px; }
.mx-modal-head { padding:18px 22px; border-bottom:1px solid var(--mx-line-2); display:flex; align-items:center; gap:12px; }
.mx-modal-head h2 { margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.mx-modal-x { flex:none; margin-left:auto; width:36px; height:36px; min-width:36px; padding:0; border-radius:50%; border:1px solid var(--mx-line); background:#fff; color:var(--mx-ink-2); cursor:pointer; display:grid; place-items:center; line-height:1; }
.mx-modal-x:hover { background:var(--mx-panel-2); }
.mx-modal-body { flex:1; min-height:0; overflow-y:auto; padding:18px 22px; }

/* ---- premium modal header w/ icon + sticky footer ---- */
.mx-modal-head .mx-modal-hic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff; }
.mx-modal-head .mx-modal-hic.is-blue { background:var(--mx-grad); }
.mx-modal-head .mx-modal-hic.is-green { background:var(--mx-grad-grn); }
.mx-modal-head .mx-modal-hic.is-red { background:var(--mx-grad-red); }
.mx-modal-head .mx-modal-hic svg { width:22px; height:22px; }
.mx-modal-head-sub { font-size:12.5px; color:var(--mx-ink-3); font-weight:500; margin-top:2px; }
.mx-modal-foot { padding:14px 22px; border-top:1px solid var(--mx-line-2); display:flex; flex-wrap:wrap; row-gap:8px; gap:10px; justify-content:flex-end; align-items:center; background:var(--mx-glass); backdrop-filter:blur(6px); }
.mx-modal-foot .mx-foot-note { margin-right:auto; font-size:12px; color:var(--mx-ink-3); display:flex; align-items:center; gap:6px; }
@media (max-width:520px){
  .mx-modal-foot .mx-foot-note { margin-right:0; flex-basis:100%; order:-1; }
  .mx-modal-foot .mx-btn { flex:1; justify-content:center; white-space:nowrap; }
}

/* ---- off-platform contact: inline "hidden" chip + policy modal ---- */
.mx-masked { display:inline-flex; align-items:center; gap:5px; vertical-align:baseline; margin:0 1px; padding:1px 9px 1px 7px; border:1px solid var(--mx-line-2); border-radius:999px; background:var(--mx-blu-t); color:var(--mx-blu-d); font:inherit; font-size:.9em; font-weight:750; line-height:1.35; cursor:pointer; transition:.15s; }
.mx-masked svg { width:13px; height:13px; flex:none; }
.mx-masked:hover { background:var(--mx-blu-soft); border-color:var(--mx-blu-soft); transform:translateY(-1px); }
.mx-policy-lead { margin:0 0 16px; font-size:14px; line-height:1.62; color:var(--mx-ink-2); }
.mx-policy-lead b, .mx-policy-list b { font-weight:800; color:var(--mx-ink); }
.mx-policy-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.mx-policy-list li { display:flex; gap:12px; align-items:flex-start; font-size:13.3px; line-height:1.55; color:var(--mx-ink-2); }
.mx-policy-ic { flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--mx-blu-t); color:var(--mx-blu-d); }
.mx-policy-ic svg { width:18px; height:18px; }
.mx-policy.is-green .mx-policy-ic { background:var(--mx-grn-t); color:var(--mx-grn-d); }
.mx-policy.is-red .mx-policy-ic { background:var(--mx-red-t); color:var(--mx-red); }
.mx-policy-note { margin:16px 0 0; padding-top:13px; border-top:1px solid var(--mx-line-2); font-size:12px; color:var(--mx-ink-3); }

/* ---- premium form fields (modals) ---- */
.mx-field { margin-bottom:15px; }
.mx-field-label { display:block; font-size:12.5px; font-weight:750; color:var(--mx-ink-2); margin-bottom:7px; }
.mx-field-label .req { color:var(--mx-red); margin-left:2px; }
.mx-field-label .mx-charcount { float:right; font-size:11px; color:var(--mx-ink-4); font-weight:600; }
.mx-ff { width:100%; height:46px; border:1px solid var(--mx-line); border-radius:13px; padding:0 14px; font:500 14px var(--mx-font); color:var(--mx-ink); background:var(--mx-panel-2); transition:border-color .18s, box-shadow .18s, background .18s; }
select.mx-ff { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b788f' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:36px; cursor:pointer; }
textarea.mx-ff { height:auto; min-height:96px; padding:12px 14px; resize:vertical; line-height:1.55; }
.mx-ff:focus { outline:0; border-color:var(--mx-blu); box-shadow:var(--mx-ring); background:#fff; }
.mx-ff-money { position:relative; }
.mx-ff-money > span { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--mx-ink-3); font-weight:800; pointer-events:none; }
.mx-ff-money .mx-ff { padding-left:26px; }
.mx-field-row { display:grid; gap:12px; }
.mx-field-row.c2 { grid-template-columns:1fr 1fr; }
.mx-field-hint { font-size:11.5px; color:var(--mx-ink-3); margin-top:5px; }

/* segmented control */
.mx-seg { display:inline-flex; background:var(--mx-panel-2); border:1px solid var(--mx-line); border-radius:12px; padding:4px; gap:4px; margin-bottom:16px; }
.mx-seg button { border:0; background:transparent; height:36px; padding:0 18px; border-radius:9px; font:700 13px var(--mx-font); color:var(--mx-ink-2); cursor:pointer; transition:.15s; }
.mx-seg button.is-active { background:#fff; color:var(--mx-blu-d); box-shadow:var(--mx-sh-1); }

/* contract composer 2-col + live preview */
.mx-cc { display:grid; grid-template-columns:1fr 288px; gap:24px; }
@media (max-width:700px){ .mx-cc { grid-template-columns:1fr; } .mx-cc-side { order:-1; } }
.mx-cc-side .k { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mx-ink-4); font-weight:800; margin:0 0 8px; }
.mx-cc-prev { border:1px solid var(--mx-line); border-radius:18px; overflow:hidden; box-shadow:var(--mx-sh-1); background:linear-gradient(180deg,#fff,#fbfdff); }
.mx-cc-prev .top { padding:13px 15px; background:var(--mx-grad-grn-soft); border-bottom:1px solid var(--mx-line-2); display:flex; gap:9px; align-items:center; }
.mx-cc-prev .top .ic { width:34px;height:34px;border-radius:10px;background:var(--mx-grad-grn);color:#fff;display:grid;place-items:center;flex:none; }
.mx-cc-prev .top .ic svg{ width:18px;height:18px; }
.mx-cc-prev .ttl { font-weight:800; font-size:14px; }
.mx-cc-prev .kind { font-size:10.5px; font-weight:800; text-transform:uppercase; color:var(--mx-grn-d); }
.mx-cc-prev .bd { padding:13px 15px; }
.mx-cc-prev .bd .row { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; }
.mx-cc-prev .bd .row .kk { color:var(--mx-ink-3); font-weight:600; }
.mx-cc-prev .bd .row .vv { font-weight:800; }
.mx-cc-prev .bd .row .vv.p { color:var(--mx-grn-d); }
.mx-cc-prev .bd .dsc { font-size:12.5px; color:var(--mx-ink-2); margin-top:8px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- composer: big type toggle + tap-to-fill preset chips (easy setup) ---- */
.mx-seg-lg { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:5px; }
.mx-seg-lg button { height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.mx-seg-lg button svg { width:16px; height:16px; }
.mx-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.mx-chipx { height:30px; padding:0 12px; border:1px solid var(--mx-line); background:#fff; border-radius:var(--mx-pill); font:700 12px var(--mx-font); color:var(--mx-ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; transition:background .13s, color .13s, border-color .13s, box-shadow .13s; }
.mx-chipx svg { width:13px; height:13px; }
.mx-chipx:hover { border-color:var(--mx-blu-soft); background:var(--mx-blu-t); color:var(--mx-blu-d); }
.mx-chipx.is-sel { background:var(--mx-blu); border-color:var(--mx-blu); color:#fff; box-shadow:0 4px 10px -5px rgba(37,99,235,.55); }
.mx-chipx.is-sel:hover { background:var(--mx-blu-d); color:#fff; }
.mx-chipx-ghost { border-style:dashed; color:var(--mx-ink-3); font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
/* revisions: preset chips + a compact custom-number field on one wrapping row */
.mx-rev-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.mx-rev-row .mx-chips { margin-top:0; }
.mx-rev-custom .mx-ff { height:30px; width:96px; padding:0 10px; border-radius:var(--mx-pill); font:700 12px var(--mx-font); background:#fff; }
.mx-rev-custom .mx-ff::placeholder { font-weight:600; color:var(--mx-ink-4); }
.mx-ff-suffix { position:relative; }
.mx-ff-suffix .mx-ff { padding-right:46px; }
.mx-ff-suffix > span { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--mx-ink-4); font-weight:700; font-size:12.5px; pointer-events:none; }
.mx-cc-note { display:flex; gap:8px; margin-top:12px; padding:11px 12px; border-radius:12px; background:var(--mx-grn-t); color:var(--mx-grn-d); font-size:11.5px; line-height:1.5; font-weight:600; }
.mx-cc-note svg { width:16px; height:16px; flex:none; margin-top:1px; }

/* new chat */
.mx-usercard { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--mx-line); border-radius:16px; margin-bottom:10px; transition:.15s; }
.mx-usercard:hover { border-color:var(--mx-blu-soft); box-shadow:var(--mx-sh-1); }
.mx-usercard .mx-avatar { width:48px; height:48px; }
.mx-usercard-info { flex:1; min-width:0; }
.mx-usercard-actions { display:flex; gap:7px; flex:none; }

/* emoji picker */
.mx-emoji { position:absolute; bottom:calc(100% + 8px); z-index:60; width:340px; max-height:380px; background:#fff; border:1px solid var(--mx-line); border-radius:18px; box-shadow:var(--mx-sh-3); display:none; flex-direction:column; overflow:hidden; }
.mx-emoji.is-open { display:flex; animation: mxFade .18s ease; }
.mx-emoji-search { padding:10px; border-bottom:1px solid var(--mx-line-2); }
.mx-emoji-search input { width:100%; height:36px; border:1px solid var(--mx-line); border-radius:10px; padding:0 12px; font:500 13px var(--mx-font); }
.mx-emoji-cats { display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid var(--mx-line-2); overflow-x:auto; }
.mx-emoji-cat { flex:none; width:32px; height:32px; border:0; background:transparent; border-radius:8px; cursor:pointer; font-size:17px; }
.mx-emoji-cat.is-active { background:var(--mx-blu-t); }
.mx-emoji-grid { flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:8px; }
.mx-emoji-grid button { border:0; background:transparent; font-size:20px; height:36px; border-radius:8px; cursor:pointer; transition:.1s; }
.mx-emoji-grid button:hover { background:var(--mx-blu-t); transform:scale(1.15); }

/* lightbox */
.mx-lb { position:fixed; inset:0; z-index:1100; background:rgba(8,12,22,.94); display:none; place-items:center; flex-direction:column; }
.mx-lb.is-open { display:grid; }
.mx-lb-stage { max-width:92vw; max-height:82vh; display:grid; place-items:center; }
.mx-lb-stage img, .mx-lb-stage video { max-width:92vw; max-height:82vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); transition:transform .2s; }
.mx-lb-stage audio { width:min(90vw,460px); }
.mx-lb-bar { position:absolute; top:18px; right:18px; display:flex; gap:8px; }
.mx-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:grid; place-items:center; }
.mx-lb-nav:hover { background:rgba(255,255,255,.22); }
.mx-lb-prev { left:20px; } .mx-lb-next { right:20px; }
.mx-lb-btn { width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:grid; place-items:center; }
.mx-lb-btn:hover { background:rgba(255,255,255,.22); }
.mx-lb-btn svg, .mx-lb-nav svg { width:22px; height:22px; }

/* ============================ SKELETONS + EMPTY ============================ */
.mx-sk { background:linear-gradient(100deg, var(--mx-line-2) 30%, #fff 50%, var(--mx-line-2) 70%); background-size:200% 100%; animation: mxShimmer 1.3s infinite; border-radius:8px; }
.mx-sk-conv { display:flex; gap:11px; padding:11px 12px; }
.mx-sk-conv .mx-sk-av { width:46px; height:46px; border-radius:15px; flex:none; }
.mx-sk-lines { flex:1; }
.mx-sk-line { height:10px; margin-bottom:8px; }
.mx-sk-msg { display:flex; gap:12px; padding:10px 0; }
.mx-empty { text-align:center; padding:40px 24px; }
.mx-empty-art { width:96px; height:96px; margin:0 auto 16px; border-radius:26px; background:var(--mx-grad-soft); display:grid; place-items:center; }
.mx-empty-art svg { width:44px; height:44px; color:var(--mx-blu); }
.mx-empty h3 { margin:0 0 6px; font-size:17px; font-weight:800; }
.mx-empty p { margin:0 0 16px; font-size:13.5px; color:var(--mx-ink-3); max-width:320px; margin-inline:auto; }

/* toasts */
.mx-toasts { position:fixed; right:18px; bottom:18px; z-index:1200; display:flex; flex-direction:column; gap:9px; }
.mx-toast { background:#fff; border:1px solid var(--mx-line); border-left:4px solid var(--mx-blu); border-radius:14px; box-shadow:var(--mx-sh-3); padding:12px 15px; font-size:13.5px; font-weight:650; max-width:340px; animation: mxSlideIn .3s cubic-bezier(.34,1.3,.6,1); }
.mx-toast.is-ok { border-left-color:var(--mx-grn); }
.mx-toast.is-err { border-left-color:var(--mx-red); }

/* ---- animations ---- */
@keyframes mxFade { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@keyframes mxPop { 0%{ transform:scale(0);} 60%{ transform:scale(1.2);} 100%{ transform:scale(1);} }
@keyframes mxBounce { 0%,60%,100%{ transform:translateY(0);} 30%{ transform:translateY(-5px);} }
@keyframes mxShimmer { to{ background-position:-200% 0; } }
@keyframes mxSlideIn { from{ opacity:0; transform:translateX(30px);} to{ opacity:1; transform:none; } }

/* ---- responsive ---- */
@media (max-width: 900px){
  .mx-app { grid-template-columns:1fr; height:calc(100vh - 64px); height:calc(100dvh - 64px); padding:8px; }
  .mx-app .mx-chat, .mx-app .mx-drawer { display:none; }
  .mx-app.mx-mobile-chat .mx-rail { display:none; }
  .mx-app.mx-mobile-chat .mx-chat { display:flex; }
  .mx-app.mx-drawer-open.mx-mobile-chat { grid-template-columns:1fr; }
  .mx-app.mx-drawer-open.mx-mobile-chat .mx-chat { display:none; }
  .mx-app.mx-drawer-open.mx-mobile-chat .mx-drawer { display:flex; }
  .mx-chat-back { display:grid !important; }
  .mx-emoji { width:min(340px, 90vw); }
  /* full-screen conversation on phones: hide the marketing nav + go edge-to-edge so chatting feels native (WhatsApp-style). Back button returns to the list where the nav reappears. */
  body.mx-chat-open .messages-role-navbar { display:none; }
  body.mx-chat-open .mx-shell { padding:0; margin:0; }
  body.mx-chat-open .mx-app { height:100vh; height:100dvh; padding:0; gap:0; }
  body.mx-chat-open .mx-chat { border-radius:0; }
  /* declutter the composer toolbar on phones: drop desktop text-formatting so Attach/Emoji/Mention/Contract are one tap away (markdown still works by typing) */
  .mx-actionbar-left [data-fmt], .mx-actionbar-left [data-list], .mx-actionbar-left .mx-tool-sep { display:none; }
}
.mx-chat-back { display:none; }

/* touch devices: hover-only affordances must be visible + comfortable tap targets */
@media (hover: none){
  .mx-page .mx-row { flex-wrap:wrap; }
  .mx-page .mx-msg-actions { position:static; order:3; flex-basis:100%; width:max-content; margin:7px 0 2px 52px; opacity:1; transform:none; pointer-events:auto; box-shadow:none; border-color:var(--mx-line-2); }
  .mx-page .mx-row.mx-grouped .mx-msg-actions { margin-left:0; }
  .mx-page .mx-act { width:36px; height:36px; }
  .mx-page .mx-tool:not(.mx-tool-contract) { width:40px; height:40px; }
  .mx-page .mx-tool-contract { height:40px; }
  .mx-page .mx-newline { width:40px; height:40px; }
  .mx-page .mx-chip, .mx-page .mx-media-tab { height:40px; }
}

@media (prefers-reduced-motion: reduce){
  body.mx-page *, body.mx-page *::before, body.mx-page *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* a person's name / avatar links to their public profile (seller-profile or buyer-profile) */
body.mx-page .mx-profile-link { color: inherit; text-decoration: none; cursor: pointer; }
body.mx-page .mx-profile-link:hover { text-decoration: underline; text-underline-offset: 2px; }
body.mx-page .mx-avlink { display: inline-flex; text-decoration: none; cursor: pointer; border-radius: 999px; transition: opacity .14s ease; }
body.mx-page .mx-avlink:hover { opacity: .88; }
body.mx-page .mx-head-nm.mx-profile-link:hover { color: var(--mx-brand, #2456e6); text-decoration: none; }