/* ==========================================================================
   WevoCRM theme
   --------------------------------------------------------------------------
   Palette from the WevoCRM marketing site: lime #e4f221 + ink #1d1b1c on warm
   paper neutrals.

   Built for this specific build (sendingtk/chatwoot v4.20.0), verified against
   its compiled CSS and DOM:
     - utilities are n-prefixed (bg-n-solid-2, text-n-slate-12, border-n-weak)
     - the CSS variables behind them are NOT prefixed (--solid-2, --slate-12)
     - --brand-color / --brand-color-hex are set at runtime by the fork's
       useBranding shim from BRAND_PRIMARY_COLOR, so they are left alone here
     - sidebar rows are div[role=button], not links

   Load order matters: this file must come after the compiled app CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Palette reference (documentation only)
      lime #e4f221 | lime-deep #cddb0a | lime-soft #f3fa9b | lime-tint #fdfee9
      ink  #1d1b1c | ink-2 #0b0e12 | ink-3 #15191f | ink-4 #1c2128
      paper #f5f6f1 | paper-2 #eef0ea | line #dfe3da | muted #687078
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. LIGHT MODE TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --background-color: 245 246 241 !important;
  --card-color: 255 255 255 !important;
  --surface-1: 255 255 255 !important;
  --surface-2: 253 253 251 !important;
  --surface-active: 253 254 233 !important;
  --solid-1: 255 255 255 !important;
  --solid-2: 253 253 251 !important;
  --solid-3: 245 246 241 !important;
  --solid-active: 253 254 233 !important;

  /* borders + overlays */
  --border-weak: 223 227 218 !important;
  --border-strong: 201 207 194 !important;
  --border-container: 223 227 218 !important;
  --alpha-1: 29, 27, 28, .06 !important;
  --alpha-2: 29, 27, 28, .10 !important;
  --alpha-3: 255, 255, 255, .96 !important;
  --background-input-box: 29, 27, 28, .03 !important;
  --color-scrollbar: rgba(160, 166, 152, .40) !important;
  --color-scrollbar-hover: rgba(140, 146, 132, .55) !important;

  /* neutral ramps: 1-6 surfaces, 7-8 borders, 9-10 solids, 11-12 text */
  --gray-1: 253 253 251 !important;
  --gray-2: 249 250 246 !important;
  --gray-3: 245 246 241 !important;
  --gray-4: 238 240 234 !important;
  --gray-5: 231 234 225 !important;
  --gray-6: 223 227 218 !important;
  --gray-7: 210 216 203 !important;
  --gray-8: 187 194 180 !important;
  --gray-9: 122 130 118 !important;
  --gray-10: 108 116 104 !important;
  --gray-11: 104 112 120 !important;
  --gray-12: 29 27 28 !important;
  --slate-1: 250 251 247 !important;
  --slate-2: 248 249 245 !important;
  --slate-3: 245 246 241 !important;
  --slate-4: 238 240 234 !important;
  --slate-5: 229 233 224 !important;
  --slate-6: 223 227 218 !important;
  --slate-7: 210 216 203 !important;
  --slate-8: 168 176 160 !important;
  --slate-9: 110 118 106 !important;
  --slate-10: 88 95 85 !important;
  --slate-11: 104 112 120 !important;
  --slate-12: 29 27 28 !important;

  /* teal drives STATUS (Resolved). Kept in the lime family but a deeper,
     quieter degree than the brand lime, so Open / Pending / Resolved read as
     shades of the same yellow instead of different hues. Ink text throughout
     (see section 4b). */
  --teal-1: 252 253 235 !important;
  --teal-2: 249 251 214 !important;
  --teal-3: 244 248 176 !important;
  --teal-4: 238 244 138 !important;
  --teal-5: 230 239 100 !important;
  --teal-6: 221 233 62 !important;
  --teal-7: 205 219 10 !important;
  --teal-8: 186 199 8 !important;
  --teal-9: 168 180 5 !important; /* Resolved pill */
  --teal-10: 148 159 4 !important;
  --teal-11: 128 137 4 !important;
  --teal-12: 58 62 3 !important;
  --blue-8: 205 219 10 !important;
  --blue-9: 228 242 33 !important;
  --blue-10: 205 219 10 !important;
  --blue-11: 29 27 28 !important;
  --solid-blue: 29 27 28 !important;
  --text-blue: 29 27 28 !important;

  /* outgoing message bubble = .bg-n-solid-iris. Lime is safe here because
     section 4b forces ink text on that exact class. */
  --solid-iris: 228 242 33 !important;
  --solid-purple: 253 254 233 !important;
  --iris-9: 228 242 33 !important;
  --iris-10: 205 219 10 !important;

  /* label chips */
  --label-background: 238 240 234 !important;
  --label-border: 29, 27, 28, .10 !important;

  /* this build also carries a woot-* ramp, still teal out of the box */
  --woot-25: 253 254 233 !important;
  --woot-50: 251 253 207 !important;
  --woot-75: 247 251 168 !important;
  --woot-100: 242 249 126 !important;
  --woot-200: 236 247 79 !important;
  --woot-300: 228 242 33 !important;
  --woot-400: 205 219 10 !important;
  --woot-500: 29 27 28 !important;
  --woot-600: 19 19 20 !important;
  --woot-700: 11 14 18 !important;
  --woot-800: 8 9 11 !important;
  --woot-850: 6 7 9 !important;
  --woot-900: 5 5 6 !important;
}

/* --------------------------------------------------------------------------
   3. DARK MODE TOKENS
   -------------------------------------------------------------------------- */
:root.dark,
.dark {
  --background-color: 11 14 18 !important;
  --card-color: 21 25 31 !important;
  --surface-1: 17 21 26 !important;
  --surface-2: 22 26 32 !important;
  --surface-active: 35 41 50 !important;
  --solid-1: 11 14 18 !important;
  --solid-2: 22 26 32 !important;
  --solid-3: 28 33 40 !important;
  --solid-active: 35 41 50 !important;

  --border-weak: 30 35 42 !important;
  --border-strong: 46 52 60 !important;
  --alpha-1: 21, 25, 31, .80 !important;
  --alpha-2: 255, 255, 255, .08 !important;
  --alpha-3: 22, 26, 32, .95 !important;
  --background-input-box: 255, 255, 255, .02 !important;
  --color-scrollbar: rgba(120, 130, 140, .34) !important;
  --color-scrollbar-hover: rgba(150, 160, 170, .50) !important;

  --gray-1: 11 14 18 !important;
  --gray-2: 17 21 26 !important;
  --gray-3: 22 26 32 !important;
  --gray-4: 28 33 40 !important;
  --gray-5: 35 41 50 !important;
  --gray-6: 43 50 59 !important;
  --gray-7: 55 63 73 !important;
  --gray-8: 76 86 98 !important;
  --gray-9: 112 122 134 !important;
  --gray-10: 128 138 150 !important;
  --gray-11: 160 168 178 !important;
  --gray-12: 237 239 235 !important;
  --slate-1: 11 14 18 !important;
  --slate-2: 17 21 26 !important;
  --slate-3: 22 26 32 !important;
  --slate-4: 28 33 40 !important;
  --slate-5: 35 41 50 !important;
  --slate-6: 43 50 59 !important;
  --slate-7: 55 63 73 !important;
  --slate-8: 76 86 98 !important;
  --slate-9: 112 122 134 !important;
  --slate-10: 128 138 150 !important;
  --slate-11: 160 168 178 !important;
  --slate-12: 237 239 235 !important;

  /* same lime-degree status scale in dark mode - solid pills with ink text */
  --teal-1: 20 22 10 !important;
  --teal-2: 28 31 12 !important;
  --teal-3: 42 47 14 !important;
  --teal-4: 56 62 12 !important;
  --teal-5: 72 79 12 !important;
  --teal-6: 94 102 10 !important;
  --teal-7: 124 134 8 !important;
  --teal-8: 150 161 6 !important;
  --teal-9: 168 180 5 !important; /* Resolved pill */
  --teal-10: 190 203 8 !important;
  --teal-11: 205 219 10 !important;
  --teal-12: 243 250 155 !important;
  --blue-8: 205 219 10 !important;
  --blue-9: 228 242 33 !important;
  --blue-10: 228 242 33 !important;
  --blue-11: 228 242 33 !important;
  --solid-blue: 228 242 33 !important;
  --text-blue: 228 242 33 !important;

  /* outgoing bubble: lime, with ink text forced in section 4b */
  --solid-iris: 228 242 33 !important;
  --solid-purple: 45 52 20 !important;
  --iris-9: 228 242 33 !important;
  --iris-10: 205 219 10 !important;

  --label-background: 28 33 40 !important;
  --label-border: 255, 255, 255, .06 !important;
  --button-color: 28 33 40 !important;

  --woot-25: 20 22 10 !important;
  --woot-50: 28 31 12 !important;
  --woot-75: 45 50 13 !important;
  --woot-100: 59 66 8 !important;
  --woot-200: 90 99 12 !important;
  --woot-300: 155 168 20 !important;
  --woot-400: 205 219 10 !important;
  --woot-500: 228 242 33 !important;
  --woot-600: 205 219 10 !important;
  --woot-700: 176 189 6 !important;
  --woot-800: 141 152 5 !important;
  --woot-850: 106 114 4 !important;
  --woot-900: 74 80 3 !important;
}

/* --------------------------------------------------------------------------
   4. Typography, selection, focus, scrollbars
   -------------------------------------------------------------------------- */
body,
#app,
#portal,
.font-default {
  font-family: 'IBM Plex Sans Arabic', Inter, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4 {
  letter-spacing: -.02em;
}

::selection {
  color: #1d1b1c;
  background: #e4f221;
}

:focus-visible {
  outline-color: rgba(228, 242, 33, .65);
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   4b. LEGIBILITY LAYER
   The app assumes its brand colour is dark: it puts white text on bg-n-brand
   and uses text-n-brand for links. With a lime brand both break, so:
     - anything filled with the brand gets ink text (Send, primary buttons)
     - brand-coloured TEXT becomes ink in light mode, lime in dark mode
   Matched with ~= so hover:/focus: variants never match.
   -------------------------------------------------------------------------- */
[class~="bg-n-brand"],
[class~="bg-n-brand"] :is(span, svg, b, small, p, div) {
  color: #1d1b1c !important;
}

/* Badges, counters and status pills are filled from the woot-*/teal-*/blue-*
   ramps, which are lime here, while the app writes their text in white. Ink
   text on every lime-filled utility. */
:is(
  [class~="bg-woot-500"], [class~="bg-n-woot-500"],
  [class~="bg-woot-600"], [class~="bg-n-woot-600"],
  [class~="bg-woot-400"], [class~="bg-n-woot-400"],
  [class~="bg-woot-300"], [class~="bg-n-woot-300"],
  [class~="bg-woot-100"], [class~="bg-woot-50"], [class~="bg-woot-25"],
  [class~="bg-blue-500"], [class~="bg-blue-400"],
  [class~="bg-blue-100"], [class~="bg-blue-50"],
  [class~="bg-violet-500"], [class~="bg-violet-600"],
  [class~="bg-n-blue-9"], [class~="bg-n-blue-10"], [class~="bg-n-blue-11"],
  [class~="bg-n-solid-blue"],
  [class~="bg-n-teal-8"], [class~="bg-n-teal-9"],
  [class~="bg-n-teal-10"], [class~="bg-n-teal-11"],
  [class~="bg-n-amber-8"], [class~="bg-n-amber-9"],
  [class~="bg-n-amber-10"], [class~="bg-n-amber-11"],
  [class~="bg-n-solid-amber"], [class~="bg-n-solid-amber-button"]
),
:is(
  [class~="bg-woot-500"], [class~="bg-n-woot-500"],
  [class~="bg-woot-600"], [class~="bg-n-woot-600"],
  [class~="bg-woot-400"], [class~="bg-n-woot-400"],
  [class~="bg-woot-300"], [class~="bg-n-woot-300"],
  [class~="bg-woot-100"], [class~="bg-woot-50"], [class~="bg-woot-25"],
  [class~="bg-blue-500"], [class~="bg-blue-400"],
  [class~="bg-blue-100"], [class~="bg-blue-50"],
  [class~="bg-violet-500"], [class~="bg-violet-600"],
  [class~="bg-n-blue-9"], [class~="bg-n-blue-10"], [class~="bg-n-blue-11"],
  [class~="bg-n-solid-blue"],
  [class~="bg-n-teal-8"], [class~="bg-n-teal-9"],
  [class~="bg-n-teal-10"], [class~="bg-n-teal-11"],
  [class~="bg-n-amber-8"], [class~="bg-n-amber-9"],
  [class~="bg-n-amber-10"], [class~="bg-n-amber-11"],
  [class~="bg-n-solid-amber"], [class~="bg-n-solid-amber-button"]
) :is(span, svg, b, small, p, div) {
  color: #1d1b1c !important;
}

/* STATUS PILLS (Resolved / Open / Pending / Snoozed) and any yellow-family
   chip: black text, always. Two attributes give this (0,2,0) specificity, so
   it beats .text-white without relying on !important alone. The white status
   dot inside is darkened to match. */
[class~="bg-n-brand"][class*="rounded"],
[class~="bg-n-brand"][class*="rounded"] *,
[class~="bg-n-teal-8"][class*="rounded"], [class~="bg-n-teal-8"][class*="rounded"] *,
[class~="bg-n-teal-9"][class*="rounded"], [class~="bg-n-teal-9"][class*="rounded"] *,
[class~="bg-n-teal-10"][class*="rounded"], [class~="bg-n-teal-10"][class*="rounded"] *,
[class~="bg-n-teal-11"][class*="rounded"], [class~="bg-n-teal-11"][class*="rounded"] *,
[class~="bg-n-amber-8"][class*="rounded"], [class~="bg-n-amber-8"][class*="rounded"] *,
[class~="bg-n-amber-9"][class*="rounded"], [class~="bg-n-amber-9"][class*="rounded"] *,
[class~="bg-n-amber-10"][class*="rounded"], [class~="bg-n-amber-10"][class*="rounded"] *,
[class~="bg-n-amber-11"][class*="rounded"], [class~="bg-n-amber-11"][class*="rounded"] *,
[class~="bg-n-solid-amber"][class*="rounded"], [class~="bg-n-solid-amber"][class*="rounded"] *,
[class~="bg-woot-500"][class*="rounded"], [class~="bg-woot-500"][class*="rounded"] *,
[class~="bg-blue-500"][class*="rounded"], [class~="bg-blue-500"][class*="rounded"] *,
[class~="bg-violet-500"][class*="rounded"], [class~="bg-violet-500"][class*="rounded"] * {
  color: #1d1b1c !important;
}

[class~="bg-n-brand"][class*="rounded"] span[class*="bg-white"],
[class~="bg-n-teal-9"][class*="rounded"] span[class*="bg-white"],
[class~="bg-n-amber-9"][class*="rounded"] span[class*="bg-white"],
[class~="bg-woot-500"][class*="rounded"] span[class*="bg-white"],
[class~="bg-blue-500"][class*="rounded"] span[class*="bg-white"] {
  background-color: rgba(29, 27, 28, .55) !important;
}

/* Soft brand chips (Add Labels, brand tints): the fill is only ~10% lime, so
   they need lime text and a lime hairline, NOT ink text. */
[class*="bg-n-brand/"] {
  border: 1px solid rgba(205, 219, 10, .55) !important;
  border-radius: 999px !important;
}

[class*="bg-n-brand/"],
[class*="bg-n-brand/"] * {
  color: #1d1b1c !important;
}

.dark [class*="bg-n-brand/"] {
  border-color: rgba(228, 242, 33, .45) !important;
}

.dark [class*="bg-n-brand/"],
.dark [class*="bg-n-brand/"] * {
  color: #e4f221 !important;
}

/* outgoing message bubble: exact class from the compiled CSS.
   Matched with ~= on purpose - this build also defines a
   hover:bg-n-solid-iris variant, and an earlier :not([class*="hover:"])
   guard here is what excluded the bubble and left its text white. */
[class~="bg-n-solid-iris"],
[class~="bg-n-solid-iris"] *,
[class~="bg-n-solid-iris/90"],
[class~="bg-n-solid-iris/90"] *,
[class~="bg-n-solid-purple"],
[class~="bg-n-solid-purple"] * {
  color: #1d1b1c !important;
}

[class~="bg-n-solid-iris"] svg,
[class~="bg-n-solid-iris/90"] svg {
  opacity: .8;
}

[class~="text-n-brand"] {
  color: #1d1b1c !important;
}

.dark [class~="text-n-brand"] {
  color: #e4f221 !important;
}

/* --------------------------------------------------------------------------
   5. SIDEBAR
   Structure in this build:
     aside.bg-n-solid-2
       > section            logo tile, account switcher, search, compose
       > nav > ul > li      row = li > div > div[role=button]
                            group rows contain ul.sidebar-group-children
   Only leaf rows get the lime pill: :not(:has(> ul.sidebar-group-children))
   keeps a parent group (which also carries text-n-brand while a child is
   active) from turning into a second pill.
   Whole-token matching (~=) is used throughout so variant classes such as
   hover:text-n-brand never match.
   -------------------------------------------------------------------------- */

/* ---- rail ----
   Light values are the default; dark values are ".dark ..." descendants so
   they win wherever the .dark class actually sits in the tree. */
aside.bg-n-solid-2 {
  background-color: #f1f3ec !important;
  border-color: rgba(205, 219, 10, .45) !important; /* lime hairline */
}

.dark aside.bg-n-solid-2 {
  background-color: #11151a !important; /* softer on the eye than #0b0e12 */
  border-color: rgba(228, 242, 33, .30) !important;
}

@media (min-width: 768px) {
  aside.bg-n-solid-2 {
    margin: 8px !important;
    height: calc(100vh - 16px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(205, 219, 10, .45) !important;
    /* NO overflow:hidden here - it clips popups rendered inside the rail
       (the profile menu when the sidebar is collapsed). */
    overflow: visible !important;
  }

  .dark aside.bg-n-solid-2 {
    border: 1px solid rgba(228, 242, 33, .30) !important;
  }
}

/* ---- brand block ---- */
aside section div[class*="size-9"] {
  background-color: #e4f221 !important;
  outline-color: #cddb0a !important;
  border-radius: 12px !important;
}

#sidebar-account-switcher span:first-child {
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

#sidebar-account-switcher:hover {
  background-color: rgba(228, 242, 33, .14) !important;
}

/* ---- search ---- */
aside section a[href*="/search"] {
  height: 38px !important;
  border-radius: 12px !important;
  padding-inline: 12px !important;
}

aside section a[href*="/search"]:hover {
  outline-color: #cddb0a !important;
}

/* ---- new conversation (compose) button = primary action ----
   The button ships with dark:!bg-n-black/30, whose specificity beats a
   single-class rule in dark mode, so the dark variant is repeated with a
   .dark prefix to outrank it. Lime with an ink icon in both modes. */
aside section span.inline-flex > button,
.dark aside section span.inline-flex > button {
  background-color: #e4f221 !important;
  outline-color: #cddb0a !important;
  border-radius: 12px !important;
}

aside section span.inline-flex > button span,
.dark aside section span.inline-flex > button span {
  color: #1d1b1c !important;
}

aside section span.inline-flex > button:hover,
.dark aside section span.inline-flex > button:hover {
  background-color: #cddb0a !important;
}

/* ---- nav rows as chips ---- */
aside nav ul li > div > div[role="button"] {
  height: 40px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  padding-inline: 8px !important;
  transition: background-color .16s ease, color .16s ease !important;
}

aside nav ul li > div > div[role="button"]:hover {
  background-color: rgba(228, 242, 33, .10) !important;
}

/* icon in its own tile */
aside nav ul li > div > div[role="button"] > div.relative {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  background-color: rgba(29, 27, 28, .05) !important;
}

.dark aside nav ul li > div > div[role="button"] > div.relative {
  background-color: rgba(255, 255, 255, .05) !important;
}

/* ---- guaranteed legible sidebar text and icons ----
   Explicit per-mode colours so no row, label, icon or counter can end up
   dark-on-dark or light-on-light regardless of which token feeds it. */
/* The account switcher is matched separately: an ID inside :is() would lend
   its specificity to every branch and outrank the badge rules below - that is
   what kept the counters white-on-lime. */
aside #sidebar-account-switcher span {
  color: #1d1b1c !important;
}

.dark aside #sidebar-account-switcher span {
  color: #e6e9e2 !important;
}

aside :is(
  nav ul li > div > div[role="button"] span,
  nav ul li.child-item span,
  nav ul li.child-item a
):not([class~="bg-n-brand"]) {
  color: #1d1b1c !important;
}

.dark aside :is(
  nav ul li > div > div[role="button"] span,
  nav ul li.child-item span,
  nav ul li.child-item a
):not([class~="bg-n-brand"]) {
  color: #e6e9e2 !important;
}

/* counters: lime chip with ink digits in BOTH modes, same as light mode.
   :not([style]) keeps label colour dots (inline background) out of this. */
aside nav span[class*="rounded"][class*="text-"]:not([style]),
.dark aside nav span[class*="rounded"][class*="text-"]:not([style]) {
  border-radius: 999px !important;
  font-weight: 700 !important;
  background-color: #e4f221 !important;
  color: #1d1b1c !important;
}

/* active child row (All Conversations, Mentions, ... live in .child-item) */
aside nav ul li.child-item :is(a, div)[class~="text-n-brand"],
aside nav ul li.child-item[class~="text-n-brand"] span {
  color: #1d1b1c !important;
  font-weight: 700 !important;
}

.dark aside nav ul li.child-item :is(a, div)[class~="text-n-brand"],
.dark aside nav ul li.child-item[class~="text-n-brand"] span {
  color: #e4f221 !important;
  font-weight: 700 !important;
}

/* ---- active leaf row: lime pill ---- */
aside nav ul li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is(
  [class~="text-n-brand"],
  [class~="bg-n-brand"],
  [class~="active"]
) {
  background-color: #e4f221 !important;
  color: #1d1b1c !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(228, 242, 33, .18) !important;
}

/* only the row's own label, icon and badge are inked - never a blanket * */
aside nav ul li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is(
  [class~="text-n-brand"],
  [class~="bg-n-brand"],
  [class~="active"]
) :is(span, svg, b, small) {
  color: #1d1b1c !important;
}

aside nav ul li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is(
  [class~="text-n-brand"],
  [class~="bg-n-brand"],
  [class~="active"]
) > div.relative {
  background-color: rgba(29, 27, 28, .14) !important;
}

/* badge on a lime pill inverts: ink chip, lime digits */
aside nav ul li:not(:has(> ul.sidebar-group-children)) > div > div[role="button"]:is(
  [class~="text-n-brand"],
  [class~="bg-n-brand"],
  [class~="active"]
) span[class*="rounded"] {
  background-color: #1d1b1c !important;
  color: #e4f221 !important;
}

/* ---- sub rows ---- */
ul.sidebar-group-children li.child-item {
  border-radius: 10px !important;
}

ul.sidebar-group-children li.child-item:hover {
  background-color: rgba(228, 242, 33, .08) !important;
}

ul.sidebar-group-children li.child-item::before {
  background-color: rgba(228, 242, 33, .28) !important;
}

/* ---- badges ---- */
aside nav span[class*="rounded-full"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ---- collapse handle ----
   The chevron is a mask icon painted with currentColor, and the app reveals
   the handle on hover. macOS trackpads make that hard to find, so it is
   always visible here: solid chip, lime hairline, coloured chevron. */
/* the button stays an invisible hit area - only the inner wrapper is drawn */
.sidebar-collapse-handle,
.sidebar-collapse-handle--collapsed,
.sidebar-collapse-handle--expanded {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 60 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* the visible chip */
.sidebar-collapse-handle__icon {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background-color: #f1f3ec !important;
  border: 1px solid rgba(205, 219, 10, .55) !important;
  color: #1d1b1c !important;
  box-shadow: 0 4px 12px rgba(29, 27, 28, .12) !important;
}

.dark .sidebar-collapse-handle__icon {
  background-color: #11151a !important;
  border-color: rgba(228, 242, 33, .45) !important;
  color: #e4f221 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important;
}

/* ONLY the chevron paints with currentColor - it is a mask icon.
   Never put this on the wrapper: it fills the whole element with colour. */
.sidebar-collapse-handle__chevron {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  color: inherit !important;
  background-color: currentColor !important;
}

.sidebar-collapse-handle:hover .sidebar-collapse-handle__icon,
.dark .sidebar-collapse-handle:hover .sidebar-collapse-handle__icon {
  background-color: #e4f221 !important;
  border-color: #cddb0a !important;
  color: #1d1b1c !important;
}

/* --------------------------------------------------------------------------
   6. Help centre portal
   -------------------------------------------------------------------------- */
#portal .prose a {
  color: #1d1b1c;
  text-decoration-color: #cddb0a;
}

/* --------------------------------------------------------------------------
   7. Extending this file
   Utility-class overrides only work with the exact compiled class name, and
   variant classes keep their prefix in the class attribute - so match with
   [class~="name"], never [class*="name"], or hover:* variants will match too.
   Removed in this revision: --w-*, --n-*, .bg-woot-*, .bg-slate-* rules. They
   belong to stock Chatwoot and are inert in this build.
   -------------------------------------------------------------------------- */