/* ==========================================================================
   messaging.css — /reputation-management-software. Loads after feature-v2/v3, show.css and home.css.

   The `.mx-*` block is a port of the product's inbox, read from cloutly-frontend@origin/master:
   DashboardInbox3/index.js (a 384px `w-96` list column with a right hairline, beside the thread column on
   `bg-gray-50`), components/InboxHeader.js, components/list/GroupLabel.js, components/CustomerListItem.js +
   components/list/ChannelBadgeAvatar.js, components/CustomerHeader.js, components/ThreadItem.js +
   components/components/{StatusBadge,ReviewStarsBadge,ThreadIcon}.js, components/composer/AdaptiveComposer.js,
   composer/composerMode.js and components/components/MagicResponseButtonGroup.js. Tailwind classes are translated
   to the values they mean (p-4 = 16px, text-[15px] = 15px, h-8 = 32px, rounded-md = 6px, rounded-xl = 12px).

   Two site rules override the product inside the port and nothing else does:
   1. Nothing renders under 13px. The product runs 11.5px on the group label, the row meta line and the tone chips,
      and 12px on the composer help line and the send note; all are 13px here.
   2. Muted text on a tint is #5b6076 (6.21:1 on white, 5.80 on --v2-card, 5.65 on #f3f4f6, 5.58 on #f9fafb). The
      product's #667085, #6b7280, #9ca3af and #929292 all fail the floor.
   Three product tones also had to move for contrast: the header's needs-response chip #b07a00 on #fff4d6 is 3.40:1,
   so it is #8a5a00 on #fff0cc (5.22:1); the group label's amber-600 #d97706 is 3.21:1 on white, so it is #b45309
   (5.04:1); the amber row dot is decorative and keeps #f59e0b.
   ========================================================================== */

/* hero moment: a review, then the draft indented and overlapping its bottom edge like a reply in a thread; the chip on the right shoulder.
   Callum sits mid-right beside the draft he sends (his set position is bottom-right; moved here so the composition is not the widgets one). */
.msg-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.msg-page .hero-moment .moment { max-width: 430px; gap: 0; }
.m-review .m-from { display: flex; align-items: center; gap: 8px; }
.m-review .m-stars { display: block; color: #e8a100; letter-spacing: 2px; font-size: 15px; font-weight: 500; margin-top: 2px; }
.m-review p { margin-top: 6px; font: 400 15.5px/1.5 var(--font-body); color: var(--ink); }
.m-draft { position: relative; z-index: 1; margin: -12px 0 0 44px; box-shadow: inset 0 0 0 1.5px var(--blue), 0 24px 50px -30px rgba(0, 61, 255, .35); }
.m-draft small { display: block; font: 600 13px/1.3 var(--font-display); color: var(--blue); }
.m-draft p { margin-top: 6px; font: 400 15px/1.5 var(--font-body); color: var(--ink); }
.m-draft b { display: inline-block; margin-top: 10px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px/1.3 var(--font-display); }
.msg-page .m-chip { justify-self: end; margin: 14px 12px 0 0; }
.msg-page .pp--br { right: -8%; bottom: auto; top: 60%; }
.gg { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(15, 13, 25, .1); font: 700 12.5px/1 var(--font-display); font-style: normal; }
.gg .icon { width: 14px; height: 14px; }
@media (max-width: 991px) { .msg-page .hero-moment { justify-content: center; } .m-draft { margin-left: 28px; } .msg-page .pp--br { right: 0; top: 58%; } }

/* ==========================================================================
   the device: one ported inbox with three numbered pins
   ========================================================================== */
.mx .head { margin-bottom: 32px; }
.mx-screen {
  display: grid; grid-template-columns: 384px minmax(0, 1fr);
  max-width: 1040px; margin-inline: auto;
  border-radius: 16px; background: #f9fafb; overflow: hidden;
  box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow);
}

/* ---------- the list column (index.js `w-96 border-r border-gray-200 bg-white`) ---------- */
.mx-list { background: #fff; border-right: 1px solid #e5e7eb; padding-bottom: 6px; }
.mx-lh { padding: 14px 16px 12px; border-bottom: 1px solid #e5e7eb; }
.mx-lh1 { display: flex; align-items: center; gap: 8px; margin: 0; }
.mx-lh1 b { font: 600 19px/1.25 var(--font-display); color: #111827; }
.mx-need {
  padding: 2px 10px; border-radius: 999px; background: #fff0cc; color: #8a5a00;
  font-style: normal; font: 600 13px/1.5 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mx-scope { margin: 5px 0 0; font: 500 13px/1.4 var(--font-display); color: #5b6076; font-variant-numeric: tabular-nums; }
.mx-search {
  display: flex; align-items: center; gap: 9px; margin: 11px 0 0;
  height: 36px; padding: 0 11px; border-radius: 6px; background: #fff;
  box-shadow: inset 0 0 0 1px #d1d5db; font: 400 13.5px/1 var(--font-body); color: #5b6076;
}
.mx-search .icon { flex: none; width: 15px; height: 15px; fill: none; }
.mx-tabs { display: flex; align-items: center; gap: 5px; margin: 10px 0 0; }
.mx-tabs b, .mx-tabs i { padding: 5px 11px; border-radius: 6px; font-style: normal; font: 600 13px/1.3 var(--font-display); }
.mx-tabs b { background: #eef2ff; color: var(--blue); }
.mx-tabs i { color: #5b6076; }
.mx-fil { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 6px; color: #5b6076; }
.mx-fil .icon { width: 14px; height: 14px; }

/* GroupLabel.js: uppercase, tracked, the count in amber on the pinned group only */
.mx-group {
  position: relative; display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 12px 16px 6px; font: 700 13px/1.3 var(--font-display); letter-spacing: .05em;
  text-transform: uppercase; color: #5b6076;
}
.mx-group em { font-style: normal; color: #b45309; }

/* CustomerListItem.js: 16px padding, gray-100 rules, the 40px avatar with an 18px channel badge, the 7px amber dot */
.mx-rows { margin: 0; padding: 0; list-style: none; }
.mx-rows button {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 16px;
  border: 0; border-bottom: 1px solid #f3f4f6; background: none; text-align: left; cursor: pointer;
  transition: background-color .15s;
}
.mx-rows button:hover { background: #f9fafb; }
.mx-rows button.is-sel { background: rgba(0, 61, 255, .06); border-bottom-color: rgba(0, 61, 255, .2); }
.mx-rows button:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.mx-av {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--font-display);
}
.mx-av--lg { width: 40px; height: 40px; }
.mx-mk {
  position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #e5e7eb;
}
.mx-mk .icon { width: 12px; height: 12px; fill: currentColor; color: #4b5563; }
.mx-b { min-width: 0; flex: 1; }
.mx-1 { display: flex; align-items: center; gap: 7px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.mx-1, .mx-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-1 em { margin-left: auto; padding-left: 10px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.mx-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.mx-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.mx-3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.mx-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; }

/* ---------- the thread column (CustomerDetail.js: header on white, thread on gray-50, composer under it) ---------- */
.mx-thread { display: flex; flex-direction: column; min-width: 0; }
.mx-panes { display: grid; flex: 1; }
.mx-pane { grid-area: 1 / 1; visibility: hidden; }
.mx-pane.is-on { visibility: visible; }

/* CustomerHeader.js: avatar, name, and the meta row of phone and location */
.mx-ch { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.mx-ch-b { min-width: 0; }
.mx-ch-b b { display: block; font: 600 16px/1.3 var(--font-display); color: #111827; }
.mx-ch-m { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }

/* ThreadItem.js: the actor line, then the card. A review card is white with a hairline and a star row; an inbound
   message is the same card without one. */
.mx-item { padding: 18px 20px; }
.mx-item-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.mx-item-h b { font: 500 13.5px/1.4 var(--font-display); color: #111827; }
.mx-kind { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; }
.mx-kind .icon { width: 12px; height: 12px; fill: currentColor; }
.mx-kind--review { background: #fefce8; color: #a16207; }
.mx-kind--message { background: #eff6ff; color: #1d4ed8; }
.mx-badge {
  margin-left: auto; padding: 2px 9px; border-radius: 999px; background: #fff7ed;
  box-shadow: inset 0 0 0 1px #fed7aa; color: #b03d09; font-style: normal; font: 600 13px/1.5 var(--font-display);
}
.mx-body { margin-left: 38px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb, 0 1px 2px rgba(15, 13, 25, .05); }
.mx-body p { margin: 0; font: 400 15px/1.55 var(--font-body); color: #111827; }
.mx-rate { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 400 13.5px/1.4 var(--font-body); color: #5b6076; }
.mx-rate .mx-stars { font-size: 15px; }

/* ---------- the composer (AdaptiveComposer.js inside a 12px card, on the gray-50 ground) ---------- */
.mx-comp {
  position: relative; margin: 0 20px 20px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px #d1d5db, 0 1px 2px rgba(15, 13, 25, .05);
}
.mx-ctabs { position: relative; display: flex; align-items: center; gap: 4px; margin: 0; padding: 8px 10px 0; }
.mx-ctabs button {
  padding: 6px 12px; border: 0; border-radius: 6px; background: none;
  font: 600 13px/1.3 var(--font-display); color: #5b6076; cursor: pointer; transition: background-color .15s, color .15s;
}
.mx-ctabs button.is-on { background: #eef2ff; color: var(--blue); }
.mx-ctabs button:not(.is-on):hover { background: #f3f4f6; color: #111827; }
.mx-ctabs button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mx-ctabs button[hidden] { display: none; }
.mx-help { margin: 6px 0 0; padding: 0 16px 8px; border-bottom: 1px solid #f3f4f6; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.mx-area { display: grid; min-height: 84px; padding: 12px 16px; }
.mx-area > p { grid-area: 1 / 1; margin: 0; font: 400 15px/1.55 var(--font-body); visibility: hidden; }
.mx-area > p.is-on { visibility: visible; }
.mx-ph { color: #5b6076; }
.mx-draft { color: #111827; }
.mx-draft .rest { color: transparent; }
.mx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0 12px 10px; }
.mx-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; border: 0; border-radius: 6px; background: #fff;
  box-shadow: inset 0 0 0 1px #d1d5db; font: 500 13.5px/1 var(--font-display); color: #374151;
  cursor: pointer; transition: background-color .15s, box-shadow .15s;
}
.mx-btn .icon { width: 16px; height: 16px; }
.mx-btn:hover { background: #f9fafb; }
.mx-btn--q { cursor: default; }
.mx-btn--q:hover { background: #fff; }
.mx-btn--ai.is-ready { box-shadow: inset 0 0 0 1px #d1d5db, 0 0 0 4px rgba(0, 61, 255, .18); }
.mx-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mx-chev { width: 13px; height: 13px; }
.mx-drop { position: relative; }
.mx-menu[hidden] { display: none; }
.mx-menu {
  position: absolute; left: 0; top: calc(100% + 5px); z-index: 3; display: grid; min-width: 168px; padding: 5px;
  border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb, 0 14px 32px -14px rgba(15, 13, 25, .35);
}
.mx-menu button {
  border: 0; background: none; padding: 7px 9px; border-radius: 5px; text-align: left;
  font: 400 13.5px/1.3 var(--font-display); color: #111827; cursor: pointer;
}
.mx-menu button:hover { background: #f3f4f6; }
.mx-menu button[aria-current="true"] { font-weight: 700; }
.mx-menu-sep { display: block; height: 1px; margin: 5px 3px; background: #e5e7eb; }
.mx-menu-last { padding: 7px 9px; font: 400 13.5px/1.3 var(--font-display); color: #5b6076; }
.mx-foot {
  border-radius: 0 0 12px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0;
  padding: 10px 12px; border-top: 1px solid #e5e7eb; background: #f9fafb;
  font: 400 13px/1.4 var(--font-body); color: #5b6076;
}
.mx-foot b { margin-left: auto; padding: 7px 13px; border-radius: 6px; background: var(--blue); color: #fff; font: 600 13.5px/1 var(--font-display); }

/* the three pins the notes below the screen are numbered against */
.mx-pin {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--blue); color: #fff; font-style: normal;
  font: 700 13px/1 var(--font-display); box-shadow: 0 0 0 3px #fff;
}
.mx-group .mx-pin { position: absolute; right: 12px; top: 8px; }
.mx-btn--ai .mx-pin { right: -11px; top: -11px; }
.mx-ctabs .mx-pin { position: absolute; left: 152px; top: -10px; }

.mx-honest { max-width: 1040px; margin: 16px auto 0; font: 400 13px/1.5 var(--font-body); color: var(--v2-body); }

.mx-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 34px; max-width: 1040px; margin: 48px auto 0; padding: 0; list-style: none; counter-reset: none; }
.mx-notes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; }
.mx-notes b { grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font: 700 13.5px/1 var(--font-display); }
.mx-notes h3 { margin: 0; font: 600 17px/1.35 var(--font-display); color: var(--ink); }
.mx-notes p { margin: 6px 0 0; font: 400 15px/1.6 var(--font-body); color: var(--v2-body); }
.mx-notes a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 13, 25, .3); }
.mx-notes a:hover { color: var(--blue); text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) { .mx-rows button, .mx-btn, .mx-ctabs button { transition: none; } }
.no-motion .mx-rows button, .no-motion .mx-btn, .no-motion .mx-ctabs button { transition: none; }

/* ---------- breakpoints. The two columns hold down to 900px on a narrower list track; below that the screen
   stacks, the list over the thread, the way the product itself lays out on a narrow viewport (index.js `isMobile`
   renders the list full width and opens the thread over it). ---------- */
@media (max-width: 1100px) {
  .mx-screen { grid-template-columns: 320px minmax(0, 1fr); }
  .mx-comp { margin: 0 16px 16px; }
  .mx-ch, .mx-item { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 900px) {
  .mx-screen { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .mx-list { border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .mx-notes { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
  .mx-honest { max-width: 620px; }
}
@media (max-width: 700px) {
  .mx-notes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .mx-lh, .mx-rows button { padding-left: 13px; padding-right: 13px; }
  .mx-group { padding-left: 13px; padding-right: 13px; }
  .mx-ch, .mx-item { padding-left: 14px; padding-right: 14px; }
  .mx-comp { margin: 0 14px 14px; }
  .mx-body { margin-left: 0; }
  .mx-ctabs .mx-pin { left: auto; right: 10px; }
  .mx-foot b { margin-left: 0; }
}

/* ==========================================================================
   the 39, named. Not a screen: a plain columned inventory of the sites Cloutly reads.
   ========================================================================== */
.sites .head { margin-bottom: 28px; }
.sites .head .sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 13, 25, .3); }
.sites .head .sub a:hover { color: var(--blue); text-decoration-color: currentColor; }
.src { max-width: 880px; margin-inline: auto; padding: 24px 26px 20px; border-radius: 16px; background: var(--v2-card); }
.src-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 20px; margin: 0; padding: 0; list-style: none; }
.src-list li { padding: 4px 0; font: 400 14.5px/1.45 var(--font-body); color: var(--ink); }
.src-count { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--v2-line); font: 500 13px/1.4 var(--font-display); color: #5b6076; }

@media (max-width: 760px) { .src-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .src-list { grid-template-columns: repeat(2, 1fr); gap: 0 14px; } .src { padding: 18px 18px 16px; } }