/* ==========================================================================
   CRM+ — Conversations redesign (Light Mode)
   --------------------------------------------------------------------------
   A restyle only. Nothing here changes Chatwoot's markup, data or behaviour —
   the list still loads by infinite scroll, filters still drive the real store,
   and every element keeps the class the compiled app gave it.

   SCOPING: every selector below sits under `body.crm-convo`, set by
   conversations.js only while an inbox route is mounted. Do not add a rule
   outside that scope — an unscoped rule here reaches the whole platform.

   Colour ownership: brand-recolor.css already repaints `bg-n-brand` lime and
   forces legible dark text on it platform-wide. This file does SHAPE and
   LAYOUT on those elements and leaves their colour alone, so there is one
   place to change the brand, not two.

   DARK MODE is deliberately not handled yet; it is the last step by
   agreement.
   ========================================================================== */

body.crm-convo {
  --cv-ink: #1d1b1c;
  --cv-muted: #6b7280;
  /* One step up from the #9ca3af this started as: that measured 2.54:1 on the
     white card, and it carries the timestamp on every row in the list - the
     quietest thing on screen should still be readable. */
  --cv-faint: #6b7280;
  --cv-line: #ecefe8;
  --cv-card: #ffffff;
  /* Incoming bubbles are the one surface that cannot be the card white: the
     message panel is #fdfdfb, so a white bubble on it is separated by a
     hairline and nothing else - the message reads as loose text on the page.
     A faint tint gives it a shape. On the dark build the card is already far
     from its panel, so the two stay the same colour there. */
  --cv-in: #f2f5ee;
  --cv-hover: #f5f7f0;
  --cv-brand-soft: #fbfee4;
  --cv-brand-line: #e6fb7a;
  --cv-radius: 12px;
  --cv-out: #e9f9ec;        /* outgoing bubble fill */
  --cv-out-line: #cdeed4;
  --cv-out-meta: #5b7a61;   /* timestamp + ticks on the green fill */
}

/* --------------------------------------------------------------------------
   1. Conversation list — detached cards
   The compiled card is `.conversation` inside `.conversations-list`: a flex
   row with px-3 py-4. Detaching it means margin + radius on the row itself.
   Chatwoot squares off the last card and drops its bottom border so it sits
   flush with the panel, using !important; both are undone below.
   -------------------------------------------------------------------------- */
/* Padding is horizontal only, deliberately.

   Chatwoot ships the card as `px-3 py-0` and gets its vertical rhythm from the
   avatar's own `mt-4` / `mt-8`. The timestamp and unread badge are NOT in that
   flow at all - they live in an element the app absolutely positions at
   `right-3` and `top-4` / `top-8`, measured from the card's padding box.

   So adding vertical padding here moves the content down while that column
   stays put, and the status badge - which IS in the flow - slides underneath
   it. That is what put the timestamp on top of the status pill. */
body.crm-convo .conversations-list .conversation {
  margin: 6px 10px;
  padding: 0 12px !important;
  border: 1px solid var(--cv-line) !important;
  border-radius: var(--cv-radius) !important;
  background: var(--cv-card);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.crm-convo .conversations-list .conversation:hover {
  background: var(--cv-hover);
  border-color: #dfe4d6 !important;
}

body.crm-convo .conversations-list .conversation.active,
body.crm-convo .conversations-list .conversation.selected {
  background: var(--cv-brand-soft);
  border-color: var(--cv-brand-line) !important;
  box-shadow: none;
}

/* The active marker.
   Chatwoot draws it as a 2px bar pinned down the card's left edge
   (`after:absolute after:left-0 after:inset-y-0 after:w-0.5 after:bg-n-brand`).
   Once the card became a rounded card, that bar kept its square ends and stuck
   out past the curve as a straight line beside a round corner. Giving it the
   card's own left radii makes it follow the shape — the browser scales the
   horizontal half of each radius down to the bar's 2px width, so it tapers
   into the corner instead of crossing it.

   The card is NOT given `overflow: hidden` to achieve this, for the same
   reason the drawer cards are not. */
body.crm-convo .conversations-list .conversation::after {
  border-radius: var(--cv-radius) 0 0 var(--cv-radius);
}

body.crm-convo .conversations-list .conversation:last-child {
  border-bottom-width: 1px !important;
  border-radius: var(--cv-radius) !important;
}

/* Contact name */
body.crm-convo .conversations-list .conversation .text-base.font-medium {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cv-ink);
  letter-spacing: -.005em;
}

/* Message preview */
body.crm-convo .conversations-list .conversation .line-clamp-1,
body.crm-convo .conversations-list .conversation .line-clamp-2 {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cv-muted);
}

/* Timestamp */
body.crm-convo .conversations-list .conversation .text-sm.text-n-slate-10 {
  font-size: 12px;
  font-weight: 500;
  color: var(--cv-faint);
}

/* Unread counter — one circle, one size.

   Chatwoot ships it as `h-4 min-w-4 max-w-5 px-1 rounded-full` with the count
   as a bare text node. Padding stretches it into a pill as the number grows,
   and stepping the diameter per digit made neighbouring cards look mismatched
   down the list — so the circle is fixed and only the label shrinks. Colour is
   Chatwoot's own.

   HOW IT IS SELECTED, and why it is not by colour class: the component is
   `UnreadBadge` in SidepanelSwitch-B0g2y7uI.js and its fill is `bg-n-teal-9`.
   Every rule here used to say `bg-n-brand`, which is a different element
   entirely — so none of this applied and the count kept landing on top of the
   status pill. It is now matched by where it sits: the only classed <span>
   that is a direct child of the card's meta column. The same component renders
   a bare, class-less <span> when the count is zero, which `[class~=...]`
   correctly skips. */
body.crm-convo .conversations-list .conversation
  [class~="absolute"][class~="flex-col"] > span[class~="rounded-full"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 !important;
  border-radius: 50% !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  max-width: 21px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* The label shrinks with its length; the circle does not. conversations.js
   writes the length onto the badge. */
body.crm-convo .conversations-list .conversation
  [class~="absolute"][class~="flex-col"] > span[data-crm-len="2"] { font-size: 10px; }
body.crm-convo .conversations-list .conversation
  [class~="absolute"][class~="flex-col"] > span[data-crm-len="3"] { font-size: 8.5px; letter-spacing: -.02em; }


/* --------------------------------------------------------------------------
   2. Labels — the design's tags
   -------------------------------------------------------------------------- */
body.crm-convo .conversations-list [data-labels-container] {
  gap: 6px;
}
body.crm-convo .conversations-list [data-label] {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   3. Message bubbles
   Incoming (`.left-bubble`) becomes a bordered white card; outgoing
   (`.right-bubble`) becomes the design's soft green.

   The compiled app paints agent bubbles `bg-n-solid-blue text-white` with a
   `text-white/70` timestamp. Repainting the fill alone would leave white text
   on a pale green card, so text, links and meta are forced back to ink here.
   Every override stays inside `.right-bubble`, so private notes, bot,
   template and error bubbles keep their own distinct colours.
   -------------------------------------------------------------------------- */
body.crm-convo .conversation-panel .left-bubble,
body.crm-convo .conversation-panel .right-bubble {
  padding: 9px 12px;
  border-radius: 8px;
  box-shadow: none;
}

body.crm-convo .conversation-panel .left-bubble {
  background: var(--cv-in) !important;
  border: 1px solid var(--cv-line);
}
body.crm-convo .conversation-panel .left-bubble,
body.crm-convo .conversation-panel .left-bubble .prose-bubble {
  color: var(--cv-ink) !important;
}

/* A PRIVATE NOTE is a right-bubble too, and it must not be caught here.
 *
 * brand-recolor.css paints it blue with white text on purpose - a note is for
 * the team, not the customer, and it has to be unmistakable. This rule used to
 * repaint it the same green as an ordinary reply while that white text stayed,
 * which left white on pale green: the note was there and unreadable. */
body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) {
  background: var(--cv-out) !important;
  border: 1px solid var(--cv-out-line);
}
body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]),
body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) .prose-bubble,
body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) .prose-bubble :where(strong, b, a, h1, h2, h3) {
  color: var(--cv-ink) !important;
}
/* Timestamp and delivery ticks sitting on the green fill. */
body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) [class*="text-white"] {
  color: var(--cv-out-meta) !important;
}

/* Date divider pill, and the activity lines that share its plate
   ("Assigned to Admin", "Conversation was marked resolved").
   The shipped grey measured 4.38:1 on that plate - just under the 4.5 small
   text needs, and these lines are the smallest text in the thread. One step
   darker clears it without making a system note look like a message. */
/* `:not(:has(img))` is load-bearing, not tidiness.

   An image attachment's container carries this same plate, so the pill radius
   clipped every picture in the thread into an oval - domed at the top, cut off
   at the bottom - and it read as the image being cropped. A date pill never
   contains an image, and that is the whole difference between them. */
body.crm-convo .conversation-panel [class~="bg-n-alpha-1"]:not(:has(img)) {
  /* A soft square, not a pill (owner, 2026-09-25): a voice note's transcript
     sits on this plate, and at 999px two lines of text read as a capsule. */
  border-radius: 8px;
  color: #565d66 !important;
}

/* --------------------------------------------------------------------------
   4. Composer
   -------------------------------------------------------------------------- */
body.crm-convo .message-editor {
  border-radius: 8px;
  background: var(--cv-card);
}

/* --------------------------------------------------------------------------
   5. Right-hand contact drawer
   Chatwoot stacks the contact card and the reorderable sections flush against
   each other, separated by hairlines. The reference shows them as detached
   cards on a soft ground, so each becomes a card and the hairlines go.

   The anchor is `.list-group`, which occurs exactly once in the whole compiled
   bundle, so `div:has(> .list-group)` names the drawer's scroll column with no
   ambiguity. Its first child is the contact card; `.list-group > * > *` is one
   section — the extra level is vuedraggable's own wrapper, so the sections
   stay drag-reorderable and this only paints them.
   -------------------------------------------------------------------------- */
body.crm-convo .list-group {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* The scroll column holding the contact card and the section list. A soft
   ground makes the white cards read as cards. `:has(> .list-group)` is exact:
   `list-group` appears once in the whole bundle. */
body.crm-convo div:has(> .list-group) {
  background: #f7f8f4;
}

/* Contact card — the first child of that column, ahead of the section list.
 *
 * The `:not(...)` keeps our own panels out of this. Each is itself a
 * `.list-group` child, so without the exclusion every block inside one matched
 * `> * > *` and got its own frame: a bordered box inside a bordered box inside
 * the section's own box, three deep. On the deals panel that showed as the
 * heading, the "not in the pipeline yet" line and the Create deal button each
 * wearing a separate rounded border, where every neighbouring section is one
 * card. Both panels draw their own frame - contact-panel.css, deal-panel.css -
 * and want nothing here.
 *
 * Each is excluded by the mount marker it already carries. Do not reuse one
 * marker for both: `data-crm-panel` is how contact-panel.js finds out whether
 * it has already drawn itself, and how deal-panel.js finds the contact card to
 * sit beneath, so a second element wearing it silently deletes the identity
 * card. */
body.crm-convo div:has(> .list-group) > div:first-child,
body.crm-convo .list-group > *:not([data-crm-panel]):not([data-crm-deals]):not([data-crm-next]) > * {
  margin: 10px 0 0;
  border: 1px solid var(--cv-line);
  border-radius: var(--cv-radius);
  background: var(--cv-card);
  box-shadow: none;
}

/* NO `overflow: hidden` above, however tempting it is for clean corners.
   These cards contain the Assigned Agent / Team / Priority selects, and their
   menus are `position: absolute` INSIDE the card. Clipping the card clipped
   every one of them — the menu stopped at the card's bottom edge, so the lower
   options simply could not be seen or clicked. z-index does not help: an
   overflow clip is not something a stacking order can escape. The children
   here have no background of their own at the corners, so the radius reads
   correctly without clipping. */

/* The contact card is the one card that is NOT inside `.list-group`, so it
   misses that element's 10px side padding and ran edge to edge while every
   section below it was inset. The inset is restated here rather than moved
   onto a shared parent, because the parent is also the scroll column. */
body.crm-convo div:has(> .list-group) > div:first-child {
  margin-left: 10px;
  margin-right: 10px;
  width: auto;
}

/* The plate inside the card.

   Each section wraps its body in an element classed `bg-white`, and in this
   build `.bg-white` is NOT white — Chatwoot's own utility resolves it to
   #f8f9fa. Sitting on a card this file paints pure white, it read as a grey
   sheet laid over the card, inset on every side. The dark build has the same
   shape with the values reversed: #0b0e12 on a #1b1e23 card, a darker panel
   inside a lighter one.

   The card is the surface, so the plate simply stops painting and lets it
   through. Nothing else about the element changes. */
body.crm-convo div:has(> .list-group) [class~="bg-white"] {
  background-color: transparent !important;
}

/* Chatwoot separates the sections with hairlines because they sit flush.
   As detached cards they no longer need them. */
body.crm-convo .list-group > * > * > [class*="border-b"] {
  border-bottom-color: transparent;
}

/* Section header */
body.crm-convo .list-group > * > * > button,
body.crm-convo .list-group > * > * > div > button {
  padding: 11px 13px;
  font-weight: 600;
}

/* Contact name in the card header */
body.crm-convo div:has(> .list-group) > div:first-child .text-base.font-medium {
  font-size: 15px;
  font-weight: 600;
  color: var(--cv-ink);
}

/* Email / phone / company rows */
body.crm-convo div:has(> .list-group) > div:first-child .text-sm {
  font-size: 13px;
}

/* The action strip under the contact — evenly spread, boxed, like the
   View Profile / Add Tag / Block / More row in the reference. */
body.crm-convo div:has(> .list-group) > div:first-child button[class*="rounded"] {
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   6. Channel bar (injected by conversations.js)
   Two rows above the inbox: channel tabs, then the inboxes inside the active
   channel. `.crm-cb-host` is the one layout change made to Chatwoot's own DOM
   — the script only adds it after confirming that element holds nothing but
   the inbox row.
   -------------------------------------------------------------------------- */
/* The bar is taken OUT of the flow and the space it needs is reserved as
 * padding on the host.
 *
 * The host used to be turned into a flex COLUMN instead, which read as the
 * obvious way to stack a bar above the inbox. It is not: upstream that element
 * is a flex ROW, and the Captain / Copilot panel is a second item in that row -
 * `md:static`, a docked 320px column beside the conversation. Turning the row
 * into a column sent Copilot underneath the conversation list, half the height
 * of the screen, every time it was opened.
 *
 * So nothing about the host's direction is touched now. `--crm-cb-h` is written
 * by conversations.js from the bar's own measured height, because the bar is
 * one row tall or two depending on whether the active channel has more than one
 * inbox. `position: relative` here does not capture the two `position: fixed`
 * launchers this element also holds - only transform/filter/will-change would. */
body.crm-convo .crm-cb-host {
  position: relative;
  padding-top: var(--crm-cb-h, 49px);   /* the bar's one-row height until it is measured: no drop when it fills */
  min-height: 0;
}
body.crm-convo .crm-cb-host > #crm-channel-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 5;
}

body.crm-convo .crm-cb {
  background: var(--cv-card);
  border-bottom: 1px solid var(--cv-line);
}

/* Row 1 — channel tabs */
body.crm-convo .crm-cb-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.crm-convo .crm-cb-tabs::-webkit-scrollbar { display: none; }

body.crm-convo .crm-cb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 13px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: var(--cv-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
body.crm-convo .crm-cb-tab:hover {
  background: var(--cv-hover);
  color: var(--cv-ink);
}
body.crm-convo .crm-cb-tab.is-active {
  background: var(--cv-brand-soft);
  border-bottom-color: var(--cv-brand-line);
  color: var(--cv-ink);
}

body.crm-convo .crm-cb-ic { font-size: 17px; line-height: 1; }

body.crm-convo .crm-cb-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef1e8;
  color: var(--cv-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
/* The active tab's count sits on the brand lime, so its ink is stated rather
   than inherited: `--cv-ink` flips to a near-white in dark mode, and inheriting
   it would have put a white number on a lime disc. */
body.crm-convo .crm-cb-tab.is-active .crm-cb-count {
  background: #d4fb08;
  color: #1d1b1c;
}

/* Row 2 — the inboxes inside the active channel */
body.crm-convo .crm-cb-chips {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--cv-line);
  overflow-x: auto;
  scrollbar-width: none;
}
body.crm-convo .crm-cb-chips::-webkit-scrollbar { display: none; }

body.crm-convo .crm-cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--cv-line);
  border-radius: 8px;
  background: var(--cv-card);
  cursor: pointer;
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease;
}
body.crm-convo .crm-cb-chip:hover { background: var(--cv-hover); }
body.crm-convo .crm-cb-chip.is-active {
  background: var(--cv-brand-soft);
  border-color: var(--cv-brand-line);
}

body.crm-convo .crm-cb-chip-ic { font-size: 19px; line-height: 1; }

/* The network marks are a background image, and a background needs a box. The
   font-size above is enough for a glyph font and nothing at all for these: in
   every other place they are worn they take over an element the platform had
   already sized, and here the span is one we make ourselves. Without this the
   chip showed only the small violet badge sitting on an invisible square. */
body.crm-convo .crm-cb-chip-ic[class*="crm-ic-comments-"] {
  width: 19px;
  height: 19px;
  flex: none;
}
body.crm-convo .crm-cb-chip-text { display: flex; flex-direction: column; line-height: 1.25; }
body.crm-convo .crm-cb-chip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cv-ink);
  direction: ltr;
}
body.crm-convo .crm-cb-chip-sub {
  font-size: 11px;
  color: var(--cv-faint);
}

/* The channel mark put back on a card in a filtered list. Sized and spaced to
   match the one Chatwoot draws itself on the unfiltered list, so the two views
   sit at the same rhythm rather than one looking indented. */
body.crm-convo .conversations-list .crm-card-mark {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Connection state on each inbox chip.
   Colour alone would leave this unreadable to a red-green colour-blind user,
   so the two states differ in fill as well: connected is solid, disconnected
   is a hollow ring. The `title` on the element carries the same fact in
   words. */
body.crm-convo .crm-cb-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-inline-start: 4px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .18);
}

body.crm-convo .crm-cb-dot.is-off {
  background: transparent;
  border: 1.5px solid var(--cv-faint);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   7. Conversation card polish
   The reference's visual language rather than its exact element order: quiet
   secondary text, a bigger avatar, tighter rhythm.
   -------------------------------------------------------------------------- */

/* The status pill is deliberately NOT styled here.
   A previous version tinted it green, replaced its text colour and had the
   script strip its utility classes. None of that was requested — the pill's
   colour belongs to Chatwoot. It is left exactly as the app renders it. */

/* Avatar — the reference's is noticeably larger than Chatwoot's 24px. */
body.crm-convo .conversations-list .conversation > :first-child img,
body.crm-convo .conversations-list .conversation > :first-child > div {
  border-radius: 50%;
}

/* Inbox / channel line above the name: supporting text, so quiet it down. */
body.crm-convo .conversations-list .conversation .text-xs,
body.crm-convo .conversations-list .conversation [class*="text-xxs"] {
  font-size: 11.5px;
  color: var(--cv-faint);
  font-weight: 500;
}

/* Tighter vertical rhythm — Chatwoot's leading-7 on the preview is what makes
   the card tall; the reference sits much closer. */
body.crm-convo .conversations-list .conversation [class*="leading-7"] {
  line-height: 1.4 !important;
}

/* Two rules used to live here, matching [class*="h-7"] and [class*="py-1"].
   Both were far too loose — `py-1` also catches py-1.5, py-10 and py-12, and
   dropping the fixed height off a row lets its contents collide with the
   timestamp on narrow layouts. Card height is handled by the padding and
   line-height above instead. */

/* The channel mark next to the timestamp sits in a grey disc. The reference
   puts the channel mark straight on the avatar with no plate behind it. */
body.crm-convo .conversations-list .conversation [class~="bg-n-alpha-2"][class*="size-5"] {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   8. Timestamp
   Chatwoot puts the timestamp in the same box as the status pill, where the
   two sit on top of each other. Pinning it to the card's bottom-right corner
   takes it out of that box entirely, so it lands under the unread counter and
   cannot collide with anything. conversations.js tags it, since it carries no
   class of its own that survives across card variants.
   -------------------------------------------------------------------------- */
body.crm-convo .conversations-list .conversation {

}

body.crm-convo .conversations-list .crm-time.crm-time-disabled {
  position: absolute !important;
  right: 12px;
  bottom: 8px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--cv-faint) !important;
  white-space: nowrap;
  pointer-events: none;   /* never sit between the cursor and the card */
}


/* Ancestors of the pinned timestamp, marked by conversations.js.

   An absolutely positioned element attaches to its nearest positioned
   ancestor, so a single `relative` row between the timestamp and the card
   would anchor it there and leave it at the top of the card.

   `transform`, `filter` and `contain` also create a containing block, and
   they do it regardless of `position` — so clearing position alone is not
   enough to hand the job back to the card. */
body.crm-convo .conversations-list .crm-static.crm-static-disabled {
  position: static !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
  perspective: none !important;
}


/* Every card the same height.
   Chatwoot clamps the preview to two lines, so a long message makes its card
   taller than its neighbours. One line with an ellipsis keeps the whole list
   on a single rhythm — and the full text is one click away in the thread. */
body.crm-convo .conversations-list .conversation [class*="line-clamp"] {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* One height for every row in the list.
   With the preview clamped to a single line the only thing left that changes a
   card's height is whether it carries a status pill, which is taller than the
   inbox name beside it. A floor on the card absorbs that difference, so the
   list keeps one rhythm whatever each conversation happens to have.

   Tune --cv-card-min if a future build makes the pill row taller; nothing else
   depends on the value. */
body.crm-convo {
  --cv-card-min: 104px;
}
body.crm-convo .conversations-list .conversation {
  /* Stated explicitly so --cv-card-min means the finished height of the card,
     padding and border included, rather than just its content box. */
  box-sizing: border-box;


}
/* ---------------------------------------------------------------------------
   HOTFIX 3 Sept 2026 — the pinned timestamp is switched OFF.

   Pinning it to the card corner worked on every shape in the local harness but
   landed on only some cards on the live platform: the one card that carried an
   unread badge pinned correctly, the rest left the timestamp where Chatwoot
   draws it while still reserving the empty strip at the bottom. So the real
   list has a card shape the harness does not reproduce, and half-applied
   pinning is worse than none.

   Everything below this point that the pinning needed — the bottom reserve,
   the uniform height floor, the neutralised ancestors — is off with it. The
   card goes back to Chatwoot's own vertical layout. The purely cosmetic work
   (card surface, bubbles, composer, drawer, channel bar, round unread badge,
   single-line preview) is untouched and still applies.

   conversations.js still tags .crm-time; only the positioning is withdrawn, so
   turning this back on is a matter of restoring these rules once the live card
   shape is actually known.
   --------------------------------------------------------------------------- */

/* The status dot before Open / Resolved / Pending / Snoozed.
   It is an empty element inside the pill, so hiding empty children of the
   pill removes it without touching the word, the fill or the shape. The pill
   is marked by conversations.js; `display: none` also collapses the flex gap
   the dot was sitting in, so no space is left behind. */
body.crm-convo .conversations-list .crm-status-pill > :empty {
  display: none !important;
}

/* Status pill colours — fixed by the user from the mock-up, one per state.

   The word is white on a solid fill in all four. Both the pill and anything
   inside it are forced, because the label often ships in its own span with a
   colour class of its own; leaving that alone gives dark text on a dark fill.

   Chatwoot's own colour classes are left ON the element — this stylesheet is
   loaded last, so !important here wins the cascade without the script having
   to strip anything. Change a colour by editing these four lines and nothing
   else. */
body.crm-convo .conversations-list .crm-status-pill,
body.crm-convo .conversations-list .crm-status-pill * {
  color: #ffffff !important;
  font-weight: 700;
}
/* One step darker than the obvious Tailwind mid-tones, because the label on
   them is white and 10px: #3b82f6 measured 3.68:1, #22c55e and #94a3b8 worse
   still. These read as the same four colours and carry white legibly.
   Pending keeps its amber - white can never sit on amber - and takes the near
   black ink instead, which is also how the brand's own yellow is handled. */
body.crm-convo .conversations-list .crm-status-open     { background: #2563eb !important; }
body.crm-convo .conversations-list .crm-status-resolved { background: #15803d !important; }
body.crm-convo .conversations-list .crm-status-pending  { background: #f59e0b !important; }
body.crm-convo .conversations-list .crm-status-snoozed  { background: #64748b !important; }

body.crm-convo .conversations-list .crm-status-pending,
body.crm-convo .conversations-list .crm-status-pending * {
  color: #1d1b1c !important;
}

/* Breathing room under the status pill.
   The timestamp sits on the line directly below it with nothing between them,
   which reads as one crowded block. conversations.js already tags the
   timestamp, so the gap goes there rather than on a guessed container. */
body.crm-convo .conversations-list .crm-time {
  display: block;
  margin-top: 6px !important;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   9. Splitting the meta column
   Chatwoot puts BOTH the timestamp and the unread counter in one absolutely
   positioned column at `right-3`, `top-4`/`top-8` — the count sitting under
   the time. The wanted arrangement is the other way round: the count up on the
   right beside the status badge, the time pinned to the bottom of the card
   where nothing can push it around.

   Since both live in that one column, the column is stretched to cover the
   card and each child is then placed on its own. No element is moved in the
   DOM and no class of Chatwoot's is removed; only where they land changes.

   Selectors use the card's real class tokens, read out of the shipped
   component, so they do not depend on a guessed shape.
   -------------------------------------------------------------------------- */
body.crm-convo .conversations-list .conversation [class~="absolute"][class~="flex-col"] {
  top: 0 !important;
  bottom: 0 !important;
  right: 12px !important;
  display: block !important;
  pointer-events: none;   /* it now covers the card; clicks must pass through */
}

/* The count, level with the status badge.

   Without this it sits in normal flow at the top of the column — which, once
   the column was stretched to cover the card, put it straight over the status
   pill. That was the overlap. */
body.crm-convo .conversations-list .conversation
  [class~="absolute"][class~="flex-col"] > span[class~="rounded-full"] {
  position: absolute;
  right: 0;
  margin: 0 !important;
  pointer-events: auto;

  /* Static fallback, used for the frames before conversations.js has measured:
     the header row starts at the card's own 12px padding and is 16px tall, so
     a 21px circle centred on it starts at 12 + (16 - 21) / 2. The script then
     replaces this with the pill's real centre — see alignUnreadBadges, and why
     a constant cannot be right on every machine. */
  top: 9.5px;
}

/* The time, pinned to the bottom-right corner. */
body.crm-convo .conversations-list .conversation [class~="absolute"][class~="flex-col"] > div:first-child {
  position: absolute;
  bottom: 9px;
  right: 0;
  margin: 0 !important;
}

/* Room at the bottom of the card for it to sit in. */
body.crm-convo .conversations-list .conversation {
  padding-bottom: 22px !important;
}

/* The time is one line. Stretching its column to cover the card narrowed the
   row it sits in, and "21h · 20h" broke across two lines. */
body.crm-convo .conversations-list .conversation [class~="absolute"][class~="flex-col"] > div:first-child,
body.crm-convo .conversations-list .conversation [class~="absolute"][class~="flex-col"] > div:first-child > * {
  white-space: nowrap;
}

/* Make room for the count so it sits BESIDE the status badge rather than on
   top of it. The badge group is in normal flow and runs to the card's right
   edge; the count is pinned to that same edge, so the group is pulled left by
   the count's width (21px) plus an 8px gap — and only on cards that actually
   have one.

   The auto margin is matched with `*=` rather than `~=`. Chatwoot writes it as
   the direction-scoped token `ltr:ml-auto`, so `[class~="ml-auto"]` matched
   nothing at all. The substring form covers the bare and scoped spellings
   both. */
body.crm-convo .conversations-list
  .conversation:has([class~="absolute"][class~="flex-col"] > span[class~="rounded-full"])
  [class~="items-baseline"][class*="ml-auto"] {
  margin-right: 29px;
}

/* ==========================================================================
   Dark mode
   --------------------------------------------------------------------------
   Everything above paints through the token block at the top of this file, so
   the theme is those values restated — not a second set of rules chasing the
   first. If a colour is added above, put it in a token and it comes here free.

   `:root.dark` is the carrier the platform already uses (theme-sync.js mirrors
   the SPA's state onto <html>), so this needs no script of its own.
   ========================================================================== */
:root.dark body.crm-convo,
.dark body.crm-convo {
  --cv-ink:   #e8eaed;      /* contact name, message text        */
  --cv-muted: #98a1ad;      /* preview line                      */
  --cv-faint: #8b939d;      /* timestamp, inbox name             */
  --cv-line:  #2c3138;      /* card borders and hairlines        */
  --cv-card:  #1b1e23;      /* the card itself                   */
  --cv-in:    #1b1e23;      /* incoming bubble, on a darker panel */
  --cv-hover: #22262c;      /* row hover                         */

  /* The active card is the brand lime at low alpha rather than the light tint
     used in day mode — a pale plate would glare against the dark list. */
  --cv-brand-soft: rgba(212, 251, 8, .10);
  --cv-brand-line: rgba(212, 251, 8, .42);

  /* Outgoing bubbles: the same green relationship, moved down to sit on a dark
     page instead of a white one. */
  --cv-out:      #1d3a2a;
  --cv-out-line: #2c5740;
  --cv-out-meta: #9dc4ac;
}

/* The card surface is set with a plain background above, so it follows the
   token. These are the few places that named a colour outright. */
.dark body.crm-convo .conversations-list .conversation:hover {
  border-color: #3a4048 !important;
}

/* The channel bar's count badge.

   Everything else in the bar paints through the tokens, so it followed the
   theme on its own. This one did not: its plate is a literal #eef1e8, chosen
   for a white bar, while its ink comes from `--cv-ink` — which flips to a
   near-white here. Light on light: measured 1.06:1, a number you could not
   read at all. The plate is restated as a light film over the dark bar, which
   keeps the same "quiet chip" reading it has in day mode. */
.dark body.crm-convo .crm-cb-count {
  background: rgba(255, 255, 255, .10);
  color: var(--cv-ink);
}

/* The drawer's ground: a soft light grey above, one step below the cards here
   so they still read as raised. */
.dark body.crm-convo div:has(> .list-group) {
  background: #141619;
}

/* Chatwoot paints the composer and the message ground itself; only the pieces
   this file repainted need restating. */
.dark body.crm-convo .message-editor {
  background: var(--cv-card);
}

/* ==========================================================================
   Outgoing bubble text in dark mode                 [crm-dark-outgoing-text]

   brand-recolor.css forces `#1d1b1c` on the bubble and all its descendants,
   which is correct while the fill is lime. In dark mode the fill becomes
   #1d3a2a, and any text in a wrapper that is not `.prose-bubble` kept the
   dark ink and disappeared into it.

   Reaching descendants needs the `*`, so the muted meta colour is restated
   afterwards or the timestamp would go white too.
   ========================================================================== */
:root.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]),
:root.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) *,
.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]),
.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) * {
  color: var(--cv-ink) !important;
}

/* The activity plate is dark here, so the ink above would vanish on it - the
   same line needs the opposite correction in each theme. */
:root.dark body.crm-convo .conversation-panel [class~="bg-n-alpha-1"],
.dark body.crm-convo .conversation-panel [class~="bg-n-alpha-1"] {
  color: #b8c0cb !important;
}

/* Timestamp and delivery ticks: quieter than the message, still readable. */
:root.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) [class*="text-white"],
:root.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) time,
.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) [class*="text-white"],
.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) time {
  color: var(--cv-out-meta) !important;
}

/* Links have to stay distinguishable from the message around them - but not in
   brand lime. Lime is a colour chosen to be pressed as a button; as thin
   underlined text it reads as a highlighter, and #d4fb08 measures 1.2:1 on
   white. The ground inside our own bubble is coloured in dark mode, so white is
   what stands on it; in light mode the platform's own link ink wins and stays
   readable, which is the right answer rather than an argument. */
:root.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) a,
.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ==========================================================================
   Channel mark on a round avatar                        [crm-channel-disc]

   With a square avatar the mark sat in the corner and needed no plate. A
   circle has no corner: the mark lands on the curve and merges with the
   picture, so it gets a disc in the card's own colour - the same trick the
   messaging apps use, and it costs nothing on a light card or a dark one
   because it takes the card token rather than a literal.
   ========================================================================== */
body.crm-convo .conversations-list .conversation [class~="bg-n-alpha-2"][class*="size-5"] {
  background: var(--cv-card) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--cv-card);
}

/* ==========================================================================
   The respond.io look (owner, 2026-09-29): studied screen by screen and
   taken here in our own colour (lime), light mode first.
     - the list is flat rows, not detached cards: no border, no gap box; the
       open one is a soft lime ground with 8px corners, and no bar down its
       side (no coloured edges - owner);
     - bubbles are flat 8px shapes with no outline: the customer's a light
       grey, ours a light lime, text 14px;
     - the composer is one framed box with a hairline.
   ========================================================================== */
body.crm-convo {
  --cv-rs-line: rgba(53, 60, 69, .16);
  --cv-rs-in: #f2f2f3;
  --cv-rs-out: #f3fbd0;
  --cv-rs-pick: #f6fcdc;
  --cv-rs-hover: #f5f6f7;
}
body.crm-convo .conversations-list .conversation,
body.crm-convo .conversations-list .conversation:last-child {
  margin: 2px 8px;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent;
}
body.crm-convo .conversations-list .conversation:hover {
  background: var(--cv-rs-hover);
}
body.crm-convo .conversations-list .conversation.active,
body.crm-convo .conversations-list .conversation.selected {
  background: var(--cv-rs-pick);
}
body.crm-convo .conversations-list .conversation::after {
  display: none !important;
}
body.crm-convo .conversation-panel .left-bubble,
body.crm-convo .conversation-panel .right-bubble {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
}
body.crm-convo .conversation-panel .left-bubble {
  background: var(--cv-rs-in) !important;
  border: 0;
}
body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) {
  background: var(--cv-rs-out) !important;
  border: 0;
}
body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) [class*="text-white"] {
  color: #5f6b3a !important;
}
body.crm-convo .message-editor {
  border: 1px solid var(--cv-rs-line);
  border-radius: 8px;
}
/* The same shapes in the dark build, on its own surfaces. */
:root.dark body.crm-convo,
.dark body.crm-convo {
  --cv-rs-line: #2c3138;
  --cv-rs-in: #22262c;
  --cv-rs-out: #2a3312;
  --cv-rs-pick: rgba(212, 251, 8, .08);
  --cv-rs-hover: rgba(255, 255, 255, .04);
}
.dark body.crm-convo .conversation-panel .right-bubble:not([class~="bg-n-solid-amber"]) [class*="text-white"] {
  color: #b5c28a !important;
}

/* System events ("Assigned to …", "Resolved by …"): respond.io writes them as
   a quiet grey line in the middle of the thread, not as a grey plate - the
   plate made a note about the conversation look like a message in it. */
body.crm-convo .conversation-panel .message-bubble-container.justify-center > div > div.text-sm[class~="bg-n-alpha-1"][class~="text-n-slate-11"] {
  background: transparent !important;
  padding: 2px 8px !important;
  border-radius: 0 !important;
  font-size: 12px;
  line-height: 16px;
  color: var(--cv-rs-note, #626f7f) !important;
}
.dark body.crm-convo { --cv-rs-note: #9aa3af; }

/* The name at the top of the conversation: 14px bold over its 12px line. */
body.crm-convo .conversation-details-wrap > div.border-b span.text-sm.font-medium.text-n-slate-12 {
  font-weight: 700;
}

/* ==========================================================================
   The row as respond.io lays it out (owner, 2026-09-29: "the conversation
   list like Respond", with our features kept):

     [avatar 40]  Name ..................................... time
                  last message
                  labels
                  (channel) inbox name ................ Open  (2)

   The name leads and the time sits beside it; where the message came in
   drops to a small grey last line with the status pill and the unread count
   the owner chose, which stay exactly as they were. Nothing is moved in the
   DOM: the card's text column becomes a flex column and its rows are ordered.
   ========================================================================== */
body.crm-convo .conversations-list .conversation {
  padding-bottom: 0 !important;
  align-items: flex-start !important;
}
body.crm-convo .conversations-list .conversation > div.relative:first-child > span {
  width: 40px !important;
  height: 40px !important;
  margin-top: 12px !important;
}
body.crm-convo .conversations-list .conversation > div.relative:first-child > span > span:not(.crm-av-badge),
body.crm-convo .conversations-list .conversation > div.relative:first-child img {
  width: 40px !important;
  height: 40px !important;
}
body.crm-convo .conversations-list .conversation > div.relative:first-child + div {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  padding-block: 12px !important;
}
body.crm-convo .conversations-list .conversation h4.conversation--user {
  order: 1;
  margin-inline-end: 72px !important;
  padding-top: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-transform: none !important;
}
body.crm-convo .conversations-list .conversation h4.conversation--user + div {
  order: 2;
  height: auto !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--cv-muted, #626f7f);
}
body.crm-convo .conversations-list .conversation [class~="mt-0.5"][class~="mx-2"] { order: 3; margin-top: 4px !important; }
body.crm-convo .conversations-list .conversation > div.relative:first-child + div > div:first-child {
  order: 4;
  margin-top: 6px;
  font-size: 12px;
}
/* The status pill and the unread count on the name's line, the time on the
   last line (owner, 2026-09-30: "they were better where they were"). The
   pill group leaves the inbox line for the top corner; the count follows it
   there by itself (alignUnreadBadges centres it on the pill), and the time
   keeps its bottom-right corner from the rule further up. */
body.crm-convo .conversations-list .conversation div[class~="items-baseline"][class~="flex-shrink-0"]:has(.crm-status-pill) {
  position: absolute;
  top: 13px;
  inset-inline-end: 12px;
}
body.crm-convo .conversations-list .conversation [class~="absolute"][class~="flex-col"] > div:first-child {
  bottom: 13px !important;
}
body.crm-convo .conversations-list .conversation [class~="absolute"][class~="flex-col"] > div:first-child,
body.crm-convo .conversations-list .conversation [class~="absolute"][class~="flex-col"] > div:first-child * {
  font-size: 12px !important;
  color: var(--cv-muted, #626f7f) !important;
}

/* The bar's place, held empty until the inbox list arrives (conversations.js
   holdBarPlace): the height of its one row of tabs plus its hairline, so the
   page under it never drops when it fills. */
body.crm-convo .crm-cb--holding {
  height: 49px;
  box-sizing: border-box;
}

/* The name sits beside the picture whatever language it is written in (owner,
   2026-09-29: an Arabic name drifted to the far side of an English list,
   away from its avatar). The words keep their own direction; only the line's
   alignment follows the list. */
body.crm-convo .conversations-list .conversation h4.conversation--user { text-align: left !important; }
:root[dir="rtl"] body.crm-convo .conversations-list .conversation h4.conversation--user,
body.crm-convo[dir="rtl"] .conversations-list .conversation h4.conversation--user { text-align: right !important; }

/* The same room, reserved on the conversation screen before the script has
   even found where the bar goes: <main> holding the inbox section is the
   host (the script marks it .crm-cb-host a moment later). Without this the
   list and the thread were painted at the top and dropped 49px about two
   seconds into every load - the "things jump" the owner saw (2026-09-29). */
body.crm-convo main:has(> section > .conversations-list-wrap) {
  padding-top: var(--crm-cb-h, 49px);
}

/* ==========================================================================
   The composer as respond.io draws it (owner, 2026-09-29): one box, a quiet
   row of unframed 18px icons and a compact send button. The Reply / Private
   note switch and the text area stay exactly as they are (owner: "those are
   good, leave them").
   ========================================================================== */
body.crm-convo .reply-box .left-wrap { gap: 2px !important; }
body.crm-convo .reply-box .left-wrap button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  justify-content: center;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cv-muted, #626f7f) !important;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1) !important;
}
body.crm-convo .reply-box .left-wrap button:hover {
  background: var(--cv-rs-hover, #f5f6f7) !important;
  color: var(--cv-ink, #282e34) !important;
}
body.crm-convo .reply-box .left-wrap button > span[class*="i-"] {
  width: 18px !important;
  height: 18px !important;
}
body.crm-convo .reply-box > div.flex.flex-wrap.p-3 {
  padding: 6px 10px 8px !important;
}
body.crm-convo .reply-box > div.flex.flex-wrap.p-3 > div:last-child button {
  height: 32px !important;
  padding-inline: 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* The unread count back beside the status pill on the name's line (owner,
   2026-09-30). Its top comes from the rule further up (9.5px) until
   alignUnreadBadges centres it on the pill, so no !important here: the
   script's inline top has to win. */
body.crm-convo .conversations-list .conversation
  [class~="absolute"][class~="flex-col"] > span[class~="rounded-full"] {
  bottom: auto !important;
}

/* The header's 48px, held while the conversation is still loading: the
   platform draws the thread first and its header a moment later, which
   pushed every message down 48px on each load (measured 2026-09-29). Once the
   header is there the thread is no longer the first child and this lets go. */
body.crm-convo .conversation-details-wrap > div.flex-col:first-child {
  margin-top: 48px;
}

/* The list's fold button in respond.io's mark (owner, 2026-09-29): a panel
   whose chevron points the way the list will go - the same pair as the
   sidebar's (sidebar-resize.js). */
body.crm-convo .i-lucide-arrow-right-to-line {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cline x1='9' y1='3.5' x2='9' y2='20.5'/%3E%3Cpath d='M15.5 9.5 13 12l2.5 2.5'/%3E%3C/svg%3E");
}
body.crm-convo .i-lucide-arrow-left-to-line {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cline x1='15' y1='3.5' x2='15' y2='20.5'/%3E%3Cpath d='M8.5 9.5 11 12l-2.5 2.5'/%3E%3C/svg%3E");
}

/* The voice note (owner, 2026-09-29: "fix recording a voice note"). Two things
   made a working recorder look broken:
   - the stop / play button carries the running time ("00:08") beside its
     icon, and the 30px square above squeezed the time to 4px;
   - the waveform is drawn in the account's brand colour, and lime on white is
     all but invisible, so nothing seemed to be recording. It is a canvas, so
     it is darkened as a whole: lime becomes a dark olive, the grey progress
     a darker grey. */
body.crm-convo .reply-box .left-wrap button:has(> span.truncate) {
  width: auto !important;
  padding: 0 8px 0 6px !important;
  gap: 4px !important;
}
body.crm-convo .reply-box .left-wrap button > span.truncate {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--cv-ink, #282e34);
}
body.crm-convo .reply-box .reply-box__top > div.h-16.overflow-hidden { filter: brightness(.38) saturate(1.2); }
.dark body.crm-convo .reply-box .reply-box__top > div.h-16.overflow-hidden,
body.crm-convo.dark .reply-box .reply-box__top > div.h-16.overflow-hidden { filter: none; }

/* The recorder's buttons say what they do (owner, 2026-09-29: "I record but
   cannot send"). While recording the microphone turns into a crossed-out one
   that DELETES the recording, and the stop is a small square beside the
   time; pressing the microphone again to stop - the natural move - threw the
   recording away, so there was never anything to send. Now:
     recording   [● 00:05  Stop]  in red, and the crossed-out mic says Delete
     stopped     [▶ 00:18  Listen], and Send lights up as it always did */
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-stop) {
  background: #fdecec !important; color: #d93036 !important; padding: 0 10px 0 8px !important;
}
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-stop) > span.truncate { color: #d93036; font-weight: 600; }
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-stop)::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; flex: none;
  animation: crm-rec-pulse 1.2s ease-in-out infinite;
}
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-stop) > .i-ph-stop { display: none; }
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-stop)::after { content: "Stop"; font-size: 13px; font-weight: 600; }
body.crm-convo .reply-box .left-wrap button:has(> :is(.i-ph-play, .i-ph-pause)) {
  background: var(--cv-rs-hover, #f5f6f7) !important; color: var(--cv-ink, #282e34) !important; padding: 0 10px 0 8px !important;
}
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-play)::after { content: "Listen"; font-size: 13px; font-weight: 500; }
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-microphone-slash) { width: auto !important; padding: 0 8px 0 6px !important; gap: 4px !important; color: #d93036 !important; }
body.crm-convo .reply-box .left-wrap button:has(> .i-ph-microphone-slash)::after { content: "Delete"; font-size: 13px; }
[dir="rtl"] body.crm-convo .reply-box .left-wrap button:has(> .i-ph-stop)::after,
body.crm-convo [dir="rtl"] .reply-box .left-wrap button:has(> .i-ph-stop)::after { content: "إيقاف"; }
[dir="rtl"] body.crm-convo .reply-box .left-wrap button:has(> .i-ph-play)::after,
body.crm-convo [dir="rtl"] .reply-box .left-wrap button:has(> .i-ph-play)::after { content: "استمع"; }
[dir="rtl"] body.crm-convo .reply-box .left-wrap button:has(> .i-ph-microphone-slash)::after,
body.crm-convo [dir="rtl"] .reply-box .left-wrap button:has(> .i-ph-microphone-slash)::after { content: "حذف"; }
@keyframes crm-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  body.crm-convo .reply-box .left-wrap button:has(> .i-ph-stop)::before { animation: none; }
}

/* While a voice note is open (recording, or recorded and not yet sent), its
   three controls stand together as WhatsApp's do: Delete, Stop / Listen, Send
   (owner, 2026-09-29). The composer's other tools step aside until the note
   is sent or deleted, and the send button comes up beside the recorder
   instead of waiting at the far end of the row. */
body.crm-convo .reply-box > div.flex.flex-wrap:has(> .left-wrap button > :is(.i-ph-stop, .i-ph-play, .i-ph-pause)) {
  justify-content: flex-start !important;
}
body.crm-convo .reply-box .left-wrap:has(button > :is(.i-ph-stop, .i-ph-play, .i-ph-pause)) > :not(button:has(> :is(.i-ph-microphone-slash, .i-ph-stop, .i-ph-play, .i-ph-pause))) {
  display: none !important;
}
body.crm-convo .reply-box .left-wrap:has(button > :is(.i-ph-stop, .i-ph-play, .i-ph-pause)) { flex: 0 0 auto !important; }

/* ==== The list's header, one row shorter (owner, 2026-09-29) ================
   The name ("Conversations  All") moves up to lead the channel bar, and the
   three tools (filter, sort, collapse) join the Mine / Unassigned / All row,
   whose tabs sit closer together so it all fits a small laptop. The platform's
   header is lifted out of the flow and laid over the right end of the tabs
   row; nothing in its markup is moved, so its buttons and menus work as they
   did. */
body.crm-convo .crm-cb-row { display: flex; align-items: stretch; min-width: 0; }
body.crm-convo .crm-cb-row > .crm-cb-tabs { flex: 1 1 auto; min-width: 0; }
body.crm-convo .crm-cb-title {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 240px;
  padding-inline: 16px 8px; margin-inline-end: 4px; border-inline-end: 1px solid var(--cv-line);
}
body.crm-convo .crm-cb-title:empty { display: none; }
body.crm-convo .crm-cb-title-text { font-size: 15px; font-weight: 600; color: var(--cv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.crm-convo .crm-cb-title-chip {
  flex: none; padding: 1px 6px; border-radius: 6px; background: var(--cv-hover, #f5f6f7);
  font-size: 11px; font-weight: 500; color: var(--cv-muted); text-transform: capitalize;
}
/* .crm-cb-tabs in the selector on purpose: crm-tabs.css gives every tab
   `body.crm-convo .crm-cb-tabs .crm-cb-tab { display: inline-flex !important }`,
   the same specificity, loaded later - so a folded tab stayed on screen and
   the More menu repeated it (2026-10-12). One class more wins. */
body.crm-convo .crm-cb-tabs .crm-cb-tab[hidden] { display: none !important; }
body.crm-convo .crm-cb-caret { font-size: 11px; }
body.crm-convo .crm-cb-menu {
  position: fixed; z-index: 60; min-width: 180px; padding: 4px;
  background: var(--cv-card, #fff); border: 1px solid var(--cv-line, rgba(53, 60, 69, .16)); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
body.crm-convo .crm-cb-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: 6px; background: none; color: var(--cv-ink, #282e34);
  font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: start;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
body.crm-convo .crm-cb-menu-item:hover { background: var(--cv-hover, #f5f6f7); }
body.crm-convo .crm-cb-menu-item .crm-cb-ic { font-size: 17px; line-height: 1; }
body.crm-convo .crm-cb-menu-item .crm-cb-label { flex: 1; }
body.crm-convo .crm-cb-menu-item .crm-cb-count {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: #eef1e8; color: #282e34;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* the platform's header: its name goes (it is in the bar now), its tools float */
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) {
  position: absolute !important; top: 0; inset-inline-end: 8px; z-index: 3;
  height: 38px !important; padding: 0 !important; background: transparent; pointer-events: none;
}
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) > div:first-child { display: none !important; }
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) > div:last-child { pointer-events: auto; gap: 2px; }
/* the tabs row, now the list's first line, leaves room for the tools */
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div {
  margin-top: 0 !important; padding-inline-end: 92px !important; min-height: 38px;
}
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div ul { gap: 12px; }
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div ul > li { margin: 0 !important; }

/* The More menu says when it is open */
body.crm-convo .crm-cb-more[aria-expanded="true"] { color: var(--cv-ink, #282e34); }
body.crm-convo .crm-cb-more[aria-expanded="true"] .crm-cb-caret { display: inline-block; transform: rotate(180deg); }

/* Mine / Unassigned / All never scroll (owner, 2026-09-30). The platform's
   left/right arrows go, the row takes the whole width beside the tools, and
   the tabs sit tighter so the three fit a 340px list. Row 48px, header 50px,
   the tabs 5px down (owner's own values, 2026-09-30). */
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div { padding-inline-end: 106px !important; min-height: 48px; }
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div > button { display: none !important; }
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div > ul {
  flex: 1 1 auto; max-width: none !important; min-width: 0 !important; gap: 8px; padding-top: 5px;
}
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div > ul > li { flex-shrink: 1; min-width: 0; }
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div > ul > li > a { white-space: nowrap; }
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) + div > ul > li > a > div {
  margin: 0 !important; margin-inline-start: 5px !important; padding: 0 5px !important; height: 18px !important; min-width: 18px;
}

/* Bigger tools (owner, 2026-09-30: "very small"). The list header's filter,
   sort and collapse, and the bulk bar that shows when conversations are
   ticked: 12px glyphs in 24px buttons become 16px in 30px. */
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) > div:last-child button.h-6.w-6,
body.crm-convo .conversations-list-wrap .outline-n-weak button.h-6.w-6 {
  width: 30px !important; height: 30px !important; min-width: 30px; font-size: 16px !important;
}
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) > div:last-child button.h-6.w-6 > span,
body.crm-convo .conversations-list-wrap .outline-n-weak button.h-6.w-6 > span { width: 16px !important; height: 16px !important; }
body.crm-convo .conversations-list-wrap .outline-n-weak button.h-6.w-6 { color: var(--cv-ink, #282e34); }
body.crm-convo .conversations-list-wrap > div.h-12:has(> div > h1) { height: 50px !important; }

/* The handle on the list's edge that drags it wider or narrower. A hairline
   that turns Facebook blue under the pointer and while dragging. */
body.crm-convo .conversations-list-wrap > .crm-list-grip {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; z-index: 20;
  width: 8px; cursor: col-resize; touch-action: none;
}
body.crm-convo .conversations-list-wrap > .crm-list-grip::after {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 2px;
  background: transparent; transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
body.crm-convo .conversations-list-wrap > .crm-list-grip:hover::after,
body.crm-convo.crm-list-resizing .conversations-list-wrap > .crm-list-grip::after { background: #1877f2; }
body.crm-convo.crm-list-resizing, body.crm-convo.crm-list-resizing * { cursor: col-resize !important; user-select: none !important; }

/* Collapse closes the list; the chat takes the room. The button at the start
   of the channel bar, shown only then, brings it back. */
body.crm-convo.crm-list-closed .conversations-list-wrap { display: none !important; }
body.crm-convo .crm-list-open { display: none; }
body.crm-convo.crm-list-closed .crm-list-open {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; align-self: center; margin-inline-end: 8px; padding: 0; border: 0; border-radius: 8px;
  background: rgba(53, 60, 69, .08); color: var(--cv-ink, #282e34); cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
body.crm-convo.crm-list-closed .crm-list-open:hover { background: #1877f2; color: #fff; }
body.crm-convo .crm-list-open > span { width: 16px; height: 16px; }
body.crm-convo .crm-list-open > span { transform: scaleX(-1); }   /* points into the room the list will take */
[dir="rtl"] body.crm-convo .crm-list-open > span { transform: none; }

/* The channel on the photo, like respond.io: a white disc at the avatar's
   bottom corner holding the card's own channel mark. */
body.crm-convo .conversations-list .conversation span[class~="group/avatar"] { position: relative; }
body.crm-convo .crm-av-badge {
  position: absolute; bottom: -3px; inset-inline-end: -3px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(53, 60, 69, .12), 0 1px 2px rgba(16, 24, 40, .12);
}
body.crm-convo .crm-av-badge__mark { display: inline-block; width: 12px !important; height: 12px !important; border-radius: 50%; }
:root.dark body.crm-convo .crm-av-badge, .dark body.crm-convo .crm-av-badge { background: #1b1e23; box-shadow: 0 0 0 1px #2c3138; }
/* The photo's column paints above the text column beside it, or the text
   column's background covers the half of the badge that sticks out. */
body.crm-convo .conversations-list .conversation > div.relative:first-child:has(.crm-av-badge) { z-index: 2; }
/* comments-list.js rounds a lettered avatar by clipping its WRAPPER
   (.crm-avatar-round, overflow hidden), which cut the badge in half on every
   card without a photo. The picture box inside still clips the letters. */
body.crm-convo .conversations-list span.crm-avatar-round:has(> .crm-av-badge) { overflow: visible !important; }
/* With the pills up top and the time on the last line, the name keeps clear
   of the pills and the inbox line keeps clear of the time. */
body.crm-convo .conversations-list .conversation h4.conversation--user { margin-inline-end: 84px !important; }
body.crm-convo .conversations-list .conversation > div.relative:first-child + div > div:first-child { padding-inline-end: 76px; }