/* channel-icons.css — the brand's own channel marks, everywhere.
 *
 * Chatwoot draws each channel as a one-colour mask:
 *
 *   .i-woot-whatsapp { background-color: currentColor; -webkit-mask-image: url(...) }
 *
 * That is why every channel looked the same shade of grey — the glyph takes
 * the surrounding text colour by design. Showing a full-colour mark means
 * turning the mask off and painting the file as a background instead, so the
 * three properties have to move together: no mask, no fill, a background image.
 *
 * `!important` is doing real work here rather than papering over specificity:
 * several of these rules ship scoped as `.i-woot-x[data-v-1234]`, and the hash
 * changes with every build, so there is nothing stable to out-specify.
 *
 * Sized in `em` like the originals, so each mark stays exactly as big as the
 * one it replaced, wherever it appears.
 */

[class~="i-woot-whatsapp"],
[class~="i-woot-telegram"],
[class~="i-woot-messenger"],
[class~="i-woot-instagram"],
[class~="i-woot-tiktok"],
[class~="i-woot-mail"],
[class~="i-woot-gmail"],
[class~="i-woot-outlook"] {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  /* 2em, not the 1em these replaced. The owner sized them on screen: at 1em a
     real logo is smaller than the letters beside it, because 1em was chosen
     for a monochrome glyph and these are full-colour marks that have to be
     told apart from each other, not merely noticed. The sidebar, the nav and
     the channel bar keep their own fixed 18px further down - those sit in a
     row of equal-sized rails and are not free to grow. */
  width: 2em;
  height: 2em;
  display: inline-block;
  /* The marks are circular, so a circular clip keeps them tidy if anything
     upstream ever gives them a background of their own. */
  border-radius: 50%;
}

[class~="i-woot-whatsapp"]  { background-image: url("/overview/icons/whatsapp.svg") !important; }
[class~="i-woot-telegram"]  { background-image: url("/overview/icons/telegram.svg") !important; }
[class~="i-woot-messenger"] { background-image: url("/overview/icons/messenger.svg") !important; }
[class~="i-woot-instagram"] { background-image: url("/overview/icons/instagram.svg") !important; }

/* TikTok is the odd one in the supplied set: there is no file for it, and the
   mark the build ships is a bare note meant to sit on the brand's own black.
   Painting it like the others would leave a white-ish squiggle in a row of
   full-colour discs, so the disc is supplied here. */
/* The shipped mark is drawn for a WHITE ground: 393 of its 724 opaque pixels
   are the near-black note and 162 are the cyan offset - there is not a single
   light pixel in it. Sitting it on TikTok's own black disc therefore hid the
   note inside the disc and left only the cyan fringe, measured at 1.98:1
   against the page in dark mode where the disc itself merges with the
   background. A white disc is what the artwork expects, and it needs a hairline
   in LIGHT mode instead - a white disc on a white page has the same problem in
   reverse. */
/* `html` in front: brand-recolor.css gives the same mark a transparent
   background at the same specificity, and which of the two won depended on
   which file the browser applied last - TikTok was white on one load and
   black on the next. The owner's answer: white, always. */
html [class~="i-woot-tiktok"] {
  background-image: url("/integrations/channels/badges/tiktok.png") !important;
  background-color: #ffffff !important;
  background-size: 64% !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* On a dark page the white disc is its own edge. */
:root.dark [class~="i-woot-tiktok"],
.dark [class~="i-woot-tiktok"],
[data-theme="dark"] [class~="i-woot-tiktok"] {
  box-shadow: none;
}

/* All three mail channels share one mark: from the agent's side they are the
   same conversation arriving, and the provider is a detail of setup. */
[class~="i-woot-mail"],
[class~="i-woot-gmail"],
[class~="i-woot-outlook"] { background-image: url("/overview/icons/mail.svg") !important; }

/* --------------------------------------------------------------------------
   A little bigger where they carry meaning.

   These stopped being decorative the moment they became the real platform
   logos: in the sidebar and the channel bar they are how someone tells one
   inbox from another at a glance, and 1em was sized for a monochrome glyph
   sitting beside text.
   -------------------------------------------------------------------------- */
aside [class*="i-woot-"],
nav [class*="i-woot-"],
.crm-cb-ic {
  width: 1.15em !important;
  height: 1.15em !important;
}

aside .crm-comment-glyph,
nav .crm-comment-glyph {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   The channel bar

   It draws from the `i-ri-*` family, which the block above never touched -
   so the bar was still showing the generic set while every row had changed.
   Same idea: turn the mask off, paint the real mark as a background.
   ========================================================================== */
.crm-cb-ic {
  border-radius: 50%;
  position: relative;
}

/* Turning the mask off is only safe where a real mark takes its place.
 *
 * This reset used to apply to every `.crm-cb-ic`, which erased the icons that
 * have no brand file behind them - the All Inbox tray, the comments bubble and
 * TikTok's own tab all rendered as empty squares. So it is listed, not
 * blanket: an icon that keeps its mask keeps working as the monochrome glyph
 * it was meant to be.
 */
.crm-cb-ic.i-ri-messenger-fill,
.crm-cb-ic.i-ri-instagram-fill,
.crm-cb-ic.i-ri-whatsapp-fill,
.crm-cb-ic.i-ri-telegram-fill,
.crm-cb-ic.i-ri-tiktok-fill,
.crm-cb-ic.i-ri-mail-fill {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.crm-cb-ic.i-ri-messenger-fill  { background-image: url("/overview/icons/messenger.svg") !important; }
.crm-cb-ic.i-ri-instagram-fill  { background-image: url("/overview/icons/instagram.svg") !important; }
.crm-cb-ic.i-ri-whatsapp-fill   { background-image: url("/overview/icons/whatsapp.svg") !important; }
.crm-cb-ic.i-ri-telegram-fill   { background-image: url("/overview/icons/telegram.svg") !important; }
.crm-cb-ic.i-ri-mail-fill       { background-image: url("/overview/icons/mail.svg") !important; }

/* The bar's TikTok tab, on the white disc the mark is drawn for. */
.crm-cb-ic.i-ri-tiktok-fill {
  background-image: url("/integrations/channels/badges/tiktok.png") !important;
  background-color: #ffffff !important;
  background-size: 64% !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

:root.dark .crm-cb-ic.i-ri-tiktok-fill,
.dark .crm-cb-ic.i-ri-tiktok-fill,
[data-theme="dark"] .crm-cb-ic.i-ri-tiktok-fill {
  box-shadow: none;
}

/* ==========================================================================
   Settings → Inboxes: fill the ring

   Each row draws a 48px ringed circle and puts a 14-20px glyph in the middle
   of it, with 8px of padding besides - so the logo reads as a speck floating
   in an empty disc, and the photo avatars sit at 30px inside a 48px ring for
   the same reason. The circle is the right size; what goes in it was not.

   The avatars carry their size as an INLINE style, which is why this needs
   `!important` - an author rule marked important is the one thing that beats
   a non-important inline declaration.
   ========================================================================== */
td div.size-12.rounded-full.p-2 {
  padding: 0 !important;
}

td div.size-12.rounded-full.p-2 span,
td div.size-12.rounded-full.p-2 img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
}

/* A photo is rarely square; crop it to the circle rather than squashing it. */
td div.size-12.rounded-full.p-2 img {
  object-fit: cover;
}

/* The same problem on the "Add Inbox" channel picker: a 40px disc with a 16px
   mark adrift in the middle of it. Matched by what the circle CONTAINS rather
   than by the screen it is on, so any later screen reusing this component is
   right without another rule. */
div.size-10.rounded-full:has(> [class*="i-woot-"]) > [class*="i-woot-"] {
  width: 100% !important;
  height: 100% !important;
}

/* Comments. Facebook comments take the Facebook mark, not Messenger's - they
   did not arrive in Messenger. */
.crm-ic-comments-fb,
.crm-ic-comments-ig,
.crm-ic-comments-tt,
.crm-ic-comments-yt {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  position: relative;
}
.crm-ic-comments-fb { background-image: url("/overview/icons/facebook.svg"); }
.crm-ic-comments-ig { background-image: url("/overview/icons/instagram.svg"); }

/* Drawn as a disc in the file itself rather than squared off here: the other
   three marks are discs, and a rounded square among them reads as a mistake.
   Cropping a rectangular logo into a circle is what looks counterfeit; drawing
   the circle does not. */
.crm-ic-comments-yt {
  background-image: url("/overview/icons/youtube.svg");
}

/* TikTok's shipped mark is a note on a transparent background, not a filled
   disc like the other two. The disc is added here in its own black so it fills
   the circle the way the rest do, and the note is held off the edge. */
html .crm-ic-comments-tt {
  background-image: url("/integrations/channels/badges/tiktok.png") !important;
  background-color: #ffffff !important;
  background-size: 64%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

:root.dark .crm-ic-comments-tt,
.dark .crm-ic-comments-tt,
[data-theme="dark"] .crm-ic-comments-tt {
  box-shadow: none;
}

/* Instagram messages and Instagram comments are the same account and share a
   logo, so the badge is the whole difference between them - a small violet
   dot, the same violet the Comment capsule uses, ringed so it reads as sitting
   on top rather than as part of the logo. */
.crm-ic-comments-fb::after,
.crm-ic-comments-ig::after,
.crm-ic-comments-tt::after,
.crm-ic-comments-yt::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b5cf6;
  box-shadow: 0 0 0 1.5px var(--crm-badge-ring, #ffffff);
}

:root.dark .crm-ic-comments-fb::after,
:root.dark .crm-ic-comments-ig::after,
:root.dark .crm-ic-comments-tt::after,
.dark .crm-ic-comments-fb::after,
.dark .crm-ic-comments-ig::after,
.dark .crm-ic-comments-tt::after,
[data-theme="dark"] .crm-ic-comments-fb::after,
[data-theme="dark"] .crm-ic-comments-ig::after,
[data-theme="dark"] .crm-ic-comments-tt::after {
  --crm-badge-ring: #14171b;
}

/* A black disc on a near-black page disappears, the same problem the mail mark
   has. A hairline ring gives it an edge without lightening the logo itself. */
:root.dark .crm-ic-comments-tt,
.dark .crm-ic-comments-tt,
[data-theme="dark"] .crm-ic-comments-tt {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   The mail mark on a dark page                        [crm-mail-on-dark]

   It is a navy disc with a white envelope in it - drawn for a white page,
   which is reasonable, and invisible on a near-black one because the disc
   and the background are the same colour.

   Only this mark needs it. The others are bright and already separate
   themselves from any background.
   ========================================================================== */
:root.dark [class~="i-woot-mail"],
:root.dark [class~="i-woot-gmail"],
:root.dark [class~="i-woot-outlook"],
.dark [class~="i-woot-mail"],
.dark [class~="i-woot-gmail"],
.dark [class~="i-woot-outlook"],
[data-theme="dark"] [class~="i-woot-mail"],
[data-theme="dark"] [class~="i-woot-gmail"],
[data-theme="dark"] [class~="i-woot-outlook"],
:root.dark .crm-cb-ic.i-ri-mail-fill,
.dark .crm-cb-ic.i-ri-mail-fill,
[data-theme="dark"] .crm-cb-ic.i-ri-mail-fill {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
  border-radius: 50%;
}

/* ==========================================================================
   Mark size                                              [crm-mark-size]

   Fixed, not a percentage. A percentage resolves against a parent that may
   be sizing itself from this very element, and the pair collapses to
   nothing - which is how the marks disappeared rather than merely looked
   wrong.
   ========================================================================== */
aside [class*="i-woot-"],
nav [class*="i-woot-"],
.crm-cb-ic {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

/* A YouTube inbox is a channel type the shipped build has no table entry for,
   so its row was drawn with a globe. The mark put in its place inherits the
   globe's box, and only needs the shape the logo actually is. */
.crm-yt-inbox-mark {
  display: inline-block;
  border-radius: 50%;
  object-fit: contain;
  flex: none;
}

/* ==========================================================================
   One size for every channel mark on a conversation card      [crm-card-mark]

   The owner's rule (27 Sep 2026): 1em, never growing or shrinking with the
   row. At 2em the mark was taller than the line it sits on and the inbox
   name and the bot's name ran over it. Only channel marks are named: status
   and priority icons share the i-woot- prefix and stay as they are. The mark
   itself is drawn by conversations.js (paintCardMarks) and nothing else.
   ========================================================================== */
.conversations-list .conversation :is(
  [class~="i-woot-whatsapp"], [class~="i-woot-instagram"], [class~="i-woot-messenger"],
  [class~="i-woot-telegram"], [class~="i-woot-tiktok"], [class~="i-woot-mail"],
  [class~="i-woot-gmail"], [class~="i-woot-outlook"], [class~="i-woot-website"],
  [class~="i-woot-sms"], [class~="i-woot-twilio"], [class~="i-woot-line"],
  [class~="i-woot-x"], [class~="i-woot-voice"], [class~="i-woot-api"]
),
.conversations-list .conversation .crm-card-mark,
.conversations-list .conversation .crm-comment-glyph {
  width: 1em !important;
  height: 1em !important;
  flex: none !important;
}

.conversations-list .conversation .crm-card-mark {
  display: inline-block;
  border-radius: 50%;
}

/* A platform mark that comments-list.js covered with the network's own. Hidden,
   never removed: the list recycles cards, and the mark has to come back the
   moment the card shows a conversation from another inbox. */
[data-crm-hidden-mark] { display: none !important; }