/* =====================================================================
   Vibe Chat theme for Chatwoot — injected by the Nginx reverse proxy.
   We only OVERRIDE Chatwoot's own Radix-style --blue-* accent scale
   (its brand/accent color) with a violet scale, so the whole UI adopts
   the Vibe Chat identity using Chatwoot's own variables. Robust across
   minor DOM changes; pinned to Chatwoot v4.15.1-ce.
   Values are "R G B" (space-separated) to match Chatwoot's format.
   ===================================================================== */

/* ---- Light theme (:root) ---- */
:root {
  --blue-1: 253 252 254;
  --blue-2: 250 248 255;
  --blue-3: 243 238 254;   /* selected-row / hover tint */
  --blue-4: 234 226 253;
  --blue-5: 223 212 251;
  --blue-6: 208 194 248;
  --blue-7: 188 172 240;
  --blue-8: 160 134 230;
  --blue-9: 124 58 237;    /* SOLID ACCENT = Vibe Chat violet #7C3AED */
  --blue-10: 109 40 217;   /* hover #6D28D9 */
  --blue-11: 107 70 193;   /* accent text on light (AA) */
  --blue-12: 47 38 95;
  --text-blue: 245 240 255;
  --solid-blue: 124 58 237;
  --border-blue: 124, 58, 237, .5;
  --border-blue-strong: 208 194 248;
}

/* ---- Dark theme (.dark) ---- */
.dark {
  --blue-1: 20 18 31;
  --blue-2: 27 21 39;
  --blue-3: 41 31 67;      /* selected-row / hover tint */
  --blue-4: 51 37 100;
  --blue-5: 62 46 120;
  --blue-6: 74 56 138;
  --blue-7: 92 72 165;
  --blue-8: 112 88 205;
  --blue-9: 139 92 246;    /* SOLID ACCENT = brighter violet #8B5CF6 for dark bg */
  --blue-10: 124 58 237;   /* hover */
  --blue-11: 196 181 253;  /* accent text on dark (#C4B5FD) */
  --blue-12: 233 224 255;
  --text-blue: 233 224 255;
  --solid-blue: 51 37 100;
  --border-blue: 139, 92, 246, .5;
  --border-blue-strong: 92 72 165;
}

/* ---- The real brand accent: `n-brand` is COMPILED as a hardcoded woot-blue
   (rgb(39,129,246)) in Tailwind utilities, not a CSS var — so we re-point the
   utility classes to Vibe Chat violet. Pinned to Chatwoot v4.15.1-ce. ---- */
:root {
  --vibe-brand: 124 58 237;        /* #7C3AED solid */
  --vibe-brand-hover: 109 40 217;  /* #6D28D9 */
}
/* solid + opacity backgrounds */
.bg-n-brand,
.checked\:bg-n-brand:checked,
.indeterminate\:bg-n-brand:indeterminate,
.group:hover .group-hover\:bg-n-brand,
.before\:bg-n-brand::before,
.after\:bg-n-brand::after,
.dark\:checked\:bg-n-brand:checked,
.bg-\[\#2781F6\]                { background-color: rgb(124 58 237) !important; }
.bg-n-brand\/5, .dark\:bg-n-brand\/5    { background-color: rgb(124 58 237 / .05) !important; }
/* In dark mode a translucent brand tint sits over the WHITE canvas (Chatwoot
   paints dark per-container, not on body), which produced a light page behind
   dark cards — the "mixed theme" bug. Make the tint solid-dark instead, so it
   also stands in for any `dark:bg-n-background` utility our !important beat. */
.dark .bg-n-brand\/5, .dark .dark\:bg-n-brand\/5 {
  background-color: color-mix(in srgb, rgb(139 92 246) 7%, rgb(17 17 19)) !important;
}
.bg-n-brand\/10, .dark\:bg-n-brand\/10,
.hover\:bg-n-brand\/10:hover            { background-color: rgb(124 58 237 / .10) !important; }
.bg-n-brand\/20, .focus-visible\:bg-n-brand\/20:focus-visible,
.hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: rgb(124 58 237 / .20) !important; }
.bg-n-brand\/30                 { background-color: rgb(124 58 237 / .30) !important; }
.bg-n-brand\/50                 { background-color: rgb(124 58 237 / .50) !important; }
.bg-n-brand\/80, .hover\:bg-n-brand\/80:hover { background-color: rgb(124 58 237 / .80) !important; }

/* text / links */
.text-n-brand,
.group:focus-within .group-focus-within\:text-n-brand,
.group:hover .group-hover\:text-n-brand,
.hover\:text-n-brand:hover,
p a                            { color: rgb(124 58 237) !important; }
.dark .text-n-brand, .dark p a, .dark\:hover\:text-n-brand:hover:is(.dark *) { color: rgb(167 139 250) !important; }

/* borders / outlines / rings — incl. checkbox/radio, focus, editor */
.border-n-brand, .checked\:border-n-brand:checked, .indeterminate\:border-n-brand:indeterminate,
.focus\:border-n-brand:focus, .dark\:border-n-brand:is(.dark *),
input:focus, textarea:focus, select:focus,
.search-input:focus            { border-color: rgb(124 58 237) !important; }
.outline-n-brand, .\!outline-n-brand, .focus\:outline-n-brand:focus,
.focus-within\:outline-n-brand:focus-within, .has-\[\:focus\]\:outline-n-brand:has(:focus),
.dark\:\!outline-n-brand:is(.dark *) { outline-color: rgb(124 58 237) !important; }
.ring-n-brand, .focus\:ring-n-brand:focus, .focus-visible\:ring-n-brand:focus-visible,
.focus-within\:ring-n-brand:focus-within, .dark\:ring-n-brand:is(.dark *),
input:focus, textarea:focus, select:focus { --tw-ring-color: rgb(124 58 237) !important; }
.fill-n-brand   { fill: rgb(124 58 237) !important; }
.stroke-n-brand { stroke: rgb(124 58 237) !important; }
.hover\:bg-n-brand:hover { background-color: rgb(109 40 217) !important; }

/* scoped components (base class + !important beats the data-v hash) */
.banner.primary               { background-color: rgb(124 58 237) !important; }
.notification--unread-indicator { background-color: rgb(124 58 237) !important; }
.dark .notification--unread-indicator { background-color: rgb(167 139 250) !important; }

/* ---- Auth pages (login / signup / reset) — the pre-login first impression.
   Wrapper: .bg-n-brand\/5.min-h-screen (scoped so app screens are untouched). ---- */
.bg-n-brand\/5.min-h-screen img[src*="/vibe/logo"] {
  height: 2.75rem; /* a touch more presence than Chatwoot's h-8 */
}
.bg-n-brand\/5.min-h-screen h2 {
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* subtle brand polish (safe, class-independent) */
body {
  -webkit-font-smoothing: antialiased;
}