/* comments-list.css — the network mark, and the Comment capsule.
 *
 * Violet, not the amber it replaced: that amber warns "this reply is public"
 * over the composer, and reusing it on a list row that needs no action blunts
 * the warning where it matters.
 *
 * One hue, three weights: a translucent fill, a slightly stronger edge, and the
 * word and dot in the deep end of the same violet. Translucency is what keeps
 * it working on both a white list and a near-black one without a second
 * palette - it tints whatever is behind it instead of sitting on top of it.
 *
 * The capsule is small on purpose. It marks a row; it is not a button, and it
 * should lose to the customer's name and their message.
 */

:root {
  --crm-chip-fill: rgba(139, 92, 246, .13);
  --crm-chip-edge: rgba(139, 92, 246, .30);
  --crm-chip-ink:  #6D28D9;
}

:root.dark,
.dark,
[data-theme="dark"] {
  /* The fill has to lift off a dark row, so it is tinted a little harder and
     the ink moves up the ramp rather than down. */
  --crm-chip-fill: rgba(167, 139, 250, .18);
  --crm-chip-edge: rgba(167, 139, 250, .34);
  --crm-chip-ink:  #C4B5FD;
}

/* The network's mark on a comment's card is conversations.js's (one owner),
   painted by channel-icons.css: TikTok on white, like everywhere else. */

/* The capsule. `!important` throughout: the platform paints this element with
   utility classes of its own. */
.crm-comment-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 7px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: var(--crm-chip-fill) !important;
  border: 1px solid var(--crm-chip-edge) !important;
  color: var(--crm-chip-ink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

/* Every descendant, so the platform's own colour on the inner span does not
   survive inside the capsule. */
.crm-comment-chip * {
  color: var(--crm-chip-ink) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  line-height: inherit !important;
}

/* The label's colour swatch, kept but restated: a round dot in the same violet
   as the word, so the capsule reads as one mark instead of two. */
.crm-comment-chip [class*="rounded"],
.crm-comment-chip [style*="background-color"] {
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  min-height: 5px !important;
  flex: none !important;
  border-radius: 50% !important;
  background: var(--crm-chip-ink) !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Tagged by the script, because the markup gives nothing stable to aim at.
   -------------------------------------------------------------------------- */

/* A circle reads as "a person"; the rounded square the component ships reads
   as an object. These are people. */
.crm-avatar-round {
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* The label's swatch, restated as a dot in the capsule's own ink so the
   capsule reads as one mark rather than a chip with a sticker on it. */
.crm-comment-chip .crm-chip-dot {
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  min-height: 5px !important;
  max-width: 5px !important;
  max-height: 5px !important;
  flex: 0 0 5px !important;
  border-radius: 50% !important;
  background: var(--crm-chip-ink) !important;
  background-color: var(--crm-chip-ink) !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   The unread counter

   The brand lime with black digits. Lime on its own is too light to carry
   white text - the number would be a smudge - so the ink is the same near
   black the rest of the brand uses.
   -------------------------------------------------------------------------- */
.crm-unread {
  background: #d4fb08 !important;
  color: #1d1b1c !important;
  border: 0 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

.crm-unread * {
  color: #1d1b1c !important;
}

/* crm-unread-pill: the sidebar's counters arrive as bare numbers, so the
   pill is built here rather than only recoloured. */
.crm-unread {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  text-align: center;
  line-height: 18px;
  font-size: 11px;
}

/* ==========================================================================
   Counters                                        [crm-counter-selector]

   This selector came from the page, not from reading the build - four
   guesses at it from the compiled bundle were all wrong.

   `:not([style])` matters: the elements Chatwoot gives an inline colour to
   are label swatches, not counts, and they must keep their own colour.

   Lime with black digits. Flex centring rather than line-height, because a
   one-digit and a two-digit count are different widths and only flex puts
   both in the middle.
   ========================================================================== */
aside nav span[class*="rounded"][class*="text-"]:not([style]),
aside span[class*="rounded"][class*="text-"]:not([style]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 21px !important;
  height: 21px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background-color: #d4fb08 !important;
  color: #000000 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

/* The digits sit in a child on some rows; the colour has to reach them. */
aside nav span[class*="rounded"][class*="text-"]:not([style]) *,
aside span[class*="rounded"][class*="text-"]:not([style]) * {
  color: #000000 !important;
}