/* ═══════════════════════════════════════════════════════════════
   SWITCHBOARD IFRAME POLISH — hide Chatwoot chrome + match parent theme
   Uses CSS custom properties so the parent can live-update tokens
   via postMessage({type:'switchboard:theme', tokens:{...}}).
   Defaults match the Aurora theme.
   ═══════════════════════════════════════════════════════════════ */

/* Declare on :root AND #app so live-updated inline styles on either
   target win the cascade. Defaults match sand-teal (current default theme).
   These get overridden by postMessage from parent on every page load. */
:root,
#app {
  --bx-bg: #eae4d8;
  --bx-surface: #f5f1ea;
  --bx-surface-2: #f5f1ea;
  --bx-border: #cfc6b2;
  --bx-primary: #0d9488;
  --bx-primary-hover: #0f766e;
  --bx-text: #141210;
  --bx-muted: #5c564e;
  --bx-alpha-1: rgba(13, 148, 136, 0.04);
  --bx-alpha-2: rgba(13, 148, 136, 0.08);
  --bx-alpha-3: rgba(13, 148, 136, 0.12);
}

/* ─── Dark-theme token override ─────────────────────────────────────
   Chatwoot's "Sand & Teal" (and other dark variants) apply a .dark class
   that sets --button-color: 42 43 51 (near-black) and --card-color: 28 30 34.
   Our Tailwind-class overrides (bg-n-solid-*, bg-n-surface-*) handle most
   backgrounds, but bg-n-button-color and bg-n-card use these CSS custom
   properties directly and are not caught by class selectors alone.
   Overriding the raw tokens at #app level fixes all classes that consume them,
   including any we haven't listed explicitly. */
#app {
  --button-color: 245 241 234;   /* #f5f1ea = bx-surface */
  --card-color: 245 241 234;     /* #f5f1ea = bx-surface */
  --background-color: 234 228 216; /* #eae4d8 = bx-bg */
  --surface-1: 245 241 234;
  --surface-2: 245 241 234;
  --solid-1: 245 241 234;
  --solid-2: 245 241 234;
  --solid-3: 245 241 234;
  /* Base text color reset: Chatwoot's dark theme sets near-white on #app.
     Overriding here means all un-classified elements inherit dark text
     instead of invisible white. All text-n-* overrides below still win
     because they also use !important on more-specific selectors. */
  color: var(--bx-text) !important;

  /* Chatwoot's dashboard.css uses --slate-* (no n- prefix) for direct
     var() references — notably .ProseMirror text color is set as
     color: rgb(var(--slate-12) / 1). In dark mode --slate-12 = near-white;
     setting on #app overrides the html.dark inherited value for all
     descendants, so any element using var(--slate-*) gets light-theme values.
     R G B space-separated (Radix / Nuxt UI format). */
  --slate-12: 20 18 16;     /* #141210 = bx-text */
  --slate-11: 20 18 16;
  --slate-10: 92 86 78;     /* #5c564e = bx-muted */
  --slate-9: 92 86 78;
  --slate-8: 92 86 78;
  --slate-7: 207 198 178;   /* #cfc6b2 = bx-border */
  --slate-6: 207 198 178;
  --slate-5: 234 228 216;   /* #eae4d8 = bx-bg */
  --slate-4: 234 228 216;
  --slate-3: 245 241 234;   /* #f5f1ea = bx-surface */
  --slate-2: 245 241 234;
  --slate-1: 245 241 234;

  /* Complete Radix palette override — all color scales used in dashboard.css.
     After stripping html.dark, these become the source of truth for any
     component that uses var(--color-name) directly rather than via a class.
     R G B space-separated (Radix / Nuxt UI format for rgb(var(--x) / opacity)). */

  /* Teal — Chatwoot's teal scale (our primary IS teal, so map to primary) */
  --teal-2: 245 241 234;   /* bx-surface */
  --teal-3: 234 228 216;   /* bx-bg */
  --teal-4: 207 198 178;   /* bx-border */
  --teal-5: 13 148 136;    /* bx-primary */
  --teal-6: 13 148 136;
  --teal-7: 13 148 136;
  --teal-8: 13 148 136;
  --teal-9: 13 148 136;
  --teal-10: 15 118 110;   /* bx-primary-hover */
  --teal-11: 15 118 110;
  --teal-12: 20 18 16;     /* bx-text */

  /* Ruby — danger/error: keep native Radix ruby for light mode */
  --ruby-2: 255 241 241;
  --ruby-3: 255 228 228;
  --ruby-4: 255 210 210;
  --ruby-5: 255 189 189;
  --ruby-6: 246 167 167;
  --ruby-7: 235 142 142;
  --ruby-8: 220 108 108;
  --ruby-9: 229 70 102;    /* Chatwoot ruby-9 = #e54666 (danger red) */
  --ruby-10: 209 52 84;
  --ruby-11: 192 35 67;
  --ruby-12: 100 10 30;

  /* Amber — warning: keep native */
  --amber-2: 255 251 235;
  --amber-3: 254 243 199;
  --amber-4: 253 230 138;
  --amber-5: 251 211 84;
  --amber-6: 245 185 34;
  --amber-7: 230 162 14;
  --amber-8: 204 138 0;
  --amber-9: 245 158 11;
  --amber-10: 217 119 6;
  --amber-11: 180 83 9;
  --amber-12: 120 53 15;

  /* Blue — info: keep native indigo/blue */
  --blue-2: 239 246 255;
  --blue-3: 219 234 254;
  --blue-4: 191 219 254;
  --blue-5: 147 197 253;
  --blue-6: 96 165 250;
  --blue-7: 59 130 246;
  --blue-8: 37 99 235;
  --blue-9: 29 78 216;
  --blue-10: 30 64 175;
  --blue-11: 37 99 235;
  --blue-12: 23 37 84;

  /* Gray — secondary neutrals */
  --gray-1: 250 250 250;
  --gray-5: 229 231 235;
  --gray-10: 107 114 128;
  --gray-11: 75 85 99;
  --gray-12: 17 24 39;

  /* Iris / Violet — accent: keep native */
  --iris-2: 238 242 255;
  --iris-4: 199 210 254;
  --iris-5: 165 180 252;
  --iris-9: 99 102 241;
  --iris-10: 79 70 229;
  --iris-11: 67 56 202;
  --iris-12: 49 46 129;

  /* Semantic tokens */
  --border-weak: 207 198 178;    /* bx-border */
  --border-strong: 159 151 136;  /* slightly darker */
  --background-input-box: 245 241 234;  /* bx-surface */
  --dark-bg: 234 228 216;        /* bx-bg (used for "dark" accents in light theme) */
  --dark-text: 20 18 16;         /* bx-text */
}

/* Hide Chatwoot primary sidebar (logo, nav, profile footer) */
#app > div > div > aside,
#app aside[class*="w-[200px]"] {
  display: none !important;
}

/* Hide Chatwoot Cmd+K palette (custom element, unambiguous) */
ninja-keys {
  display: none !important;
}

/* Hide Captain AI button (Chatwoot's own AI assistant — we have our own) */
#app .i-woot-captain,
#app button:has(.i-woot-captain),
#app div:has(> span.i-woot-captain) {
  display: none !important;
}

/* ⚠ DO NOT add broad class-match hide rules here.
   Past regression (2026-04-11): rules like
     [class*="banner"], [class*="trial"], [class*="grid-cols-2"],
     [class*="from-n-surface-1"], [class*="col-span-full"]
   seemed harmless but over-matched and killed real features:
     - Portals "Create Portal" CTA lived inside a from-n-surface-1 +
       bg-gradient-to-t fade wrapper → entire onboarding flow dead,
       page looked like a half-faded uninteractive article preview.
     - Contacts empty-state, conversations onboarding, etc. share
       classes with real content on other pages.
   Rule: hide only by narrow id / custom-element / attribute selectors,
   not class substrings. If you need to hide something Chatwoot-specific,
   inspect the actual DOM and use the most specific selector possible. */

/* ─── REBRANDING: hide Chatwoot logos, wordmarks, "powered by" ─── */
#app img[src*="chatwoot-logo"],
#app img[src*="brand-assets"],
#app img[src*="logo_chatwoot"],
#app img[alt*="Chatwoot" i],
#app img[alt*="chatwoot" i],
#app svg[class*="logo-chatwoot"] {
  display: none !important;
}
#app a[href*="chatwoot.com"],
#app a[href*="chatwoot.help"] {
  display: none !important;
}

/* Backgrounds — Chatwoot n-background / n-solid-* / n-surface-* */
#app,
#app .bg-n-background,
#app .bg-n-solid-1,
#app .bg-n-solid-2,
#app .bg-n-solid-3 {
  background-color: var(--bx-bg) !important;
}

#app main {
  background-color: var(--bx-bg) !important;
}

#app .bg-n-surface-1,
#app .bg-n-surface-2 {
  background-color: var(--bx-surface) !important;
}

#app .bg-n-surface-3,
#app .bg-n-surface-4 {
  background-color: var(--bx-surface-2) !important;
}

#app .bg-n-alpha-1 { background-color: var(--bx-alpha-1) !important; }
#app .bg-n-alpha-2 { background-color: var(--bx-alpha-2) !important; }
#app .bg-n-alpha-3 { background-color: var(--bx-alpha-3) !important; }

/* Borders */
#app .border-n-weak,
#app .border-n-strong,
#app .border-n-slate-3,
#app .border-n-slate-4,
#app .border-n-slate-5,
#app .border-n-container {
  border-color: var(--bx-border) !important;
}

/* Primary / brand — BACKGROUND */
#app .bg-n-brand,
#app .bg-n-brand-text,
#app .bg-n-brand-fill,
#app .bg-n-brand-bg,
#app .bg-n-woot-6, #app .bg-n-woot-7, #app .bg-n-woot-8,
#app .bg-n-woot-9, #app .bg-n-woot-10, #app .bg-n-woot-11,
#app .bg-n-blue-6, #app .bg-n-blue-7, #app .bg-n-blue-8,
#app .bg-n-blue-9, #app .bg-n-blue-10, #app .bg-n-blue-11,
#app .bg-n-indigo-9, #app .bg-n-indigo-10, #app .bg-n-indigo-11 {
  background-color: var(--bx-primary) !important;
}

#app .hover\:bg-n-brand:hover,
#app .hover\:bg-n-woot-10:hover,
#app .hover\:bg-n-woot-11:hover,
#app .hover\:bg-n-blue-10:hover,
#app .hover\:bg-n-blue-11:hover {
  background-color: var(--bx-primary-hover) !important;
}

/* Primary / brand — TEXT */
#app .text-n-brand,
#app .text-n-brand-text,
#app .text-n-woot-6, #app .text-n-woot-7, #app .text-n-woot-8,
#app .text-n-woot-9, #app .text-n-woot-10, #app .text-n-woot-11,
#app .text-n-blue-6, #app .text-n-blue-7, #app .text-n-blue-8,
#app .text-n-blue-9, #app .text-n-blue-10, #app .text-n-blue-11,
#app .text-n-indigo-9, #app .text-n-indigo-10, #app .text-n-indigo-11 {
  color: var(--bx-primary) !important;
}

/* Primary / brand — BORDERS */
#app .border-n-brand,
#app .border-n-woot-6, #app .border-n-woot-7, #app .border-n-woot-8,
#app .border-n-woot-9, #app .border-n-woot-10, #app .border-n-woot-11,
#app .border-n-blue-6, #app .border-n-blue-7, #app .border-n-blue-8,
#app .border-n-blue-9, #app .border-n-blue-10, #app .border-n-blue-11,
#app .border-b-n-brand, #app .border-t-n-brand,
#app .border-l-n-brand, #app .border-r-n-brand {
  border-color: var(--bx-primary) !important;
}

/* Catch-all for any element that sets color via the default Tailwind indigo/blue
   palette (Chatwoot's default primary) — we normalize to Switchboard primary. */
#app .bg-woot-500, #app .bg-woot-600, #app .bg-woot-700,
#app .bg-blue-500, #app .bg-blue-600, #app .bg-blue-700,
#app .bg-indigo-500, #app .bg-indigo-600, #app .bg-indigo-700 {
  background-color: var(--bx-primary) !important;
}
#app .text-woot-500, #app .text-woot-600, #app .text-woot-700,
#app .text-blue-500, #app .text-blue-600, #app .text-blue-700,
#app .text-indigo-500, #app .text-indigo-600, #app .text-indigo-700 {
  color: var(--bx-primary) !important;
}
#app .border-woot-500, #app .border-woot-600, #app .border-woot-700,
#app .border-blue-500, #app .border-blue-600, #app .border-blue-700,
#app .border-indigo-500, #app .border-indigo-600, #app .border-indigo-700 {
  border-color: var(--bx-primary) !important;
}

/* Active tab indicator (used by Conversations Mine/Unassigned/All tabs) */
#app [class*="border-b-2"][class*="border-woot"],
#app [class*="border-b-2"][class*="border-n-woot"],
#app [class*="border-b-2"][class*="border-n-brand"],
#app [class*="active"][class*="border-woot"] {
  border-bottom-color: var(--bx-primary) !important;
  color: var(--bx-primary) !important;
}

/* Text colors */
#app .text-n-slate-12,
#app .text-n-slate-11 {
  color: var(--bx-text) !important;
}

#app .text-n-slate-10,
#app .text-n-slate-9,
#app .text-n-slate-8 {
  color: var(--bx-muted) !important;
}

/* Chart bars/fills — Chatwoot renders these as n-slate-12 (dark) backgrounds */
#app .bg-n-slate-12,
#app .bg-n-slate-11 {
  background-color: var(--bx-primary) !important;
}

#app .bg-n-slate-10,
#app .bg-n-slate-9 {
  background-color: var(--bx-primary) !important;
  opacity: 0.7;
}

#app .bg-n-slate-8,
#app .bg-n-slate-7,
#app .bg-n-slate-6 {
  background-color: var(--bx-border) !important;
}

#app .bg-n-slate-5,
#app .bg-n-slate-4,
#app .bg-n-slate-3 {
  background-color: var(--bx-surface) !important;
}

#app .bg-n-slate-2,
#app .bg-n-slate-1 {
  background-color: var(--bx-bg) !important;
}

/* Inputs */
#app input:not([type="checkbox"]):not([type="radio"]),
#app textarea,
#app select {
  background-color: var(--bx-surface) !important;
  border-color: var(--bx-border) !important;
  color: var(--bx-text) !important;
}

#app input::placeholder,
#app textarea::placeholder {
  color: var(--bx-muted) !important;
}

/* ProseMirror rich-text editor (reply composer, private note, article editor).
   contenteditable divs are not caught by the textarea selector above; they
   inherit color from #app which was near-white in dark theme → invisible text. */
#app [contenteditable="true"],
#app .ProseMirror {
  color: var(--bx-text) !important;
}

/* Keep ProseMirror placeholder text muted, not full dark */
#app .ProseMirror .is-editor-empty:first-child::before,
#app .ProseMirror p.is-empty::before {
  color: var(--bx-muted) !important;
}

/* Hover/active states */
#app .hover\:bg-n-alpha-2:hover,
#app .hover\:bg-n-alpha-3:hover,
#app .hover\:bg-n-slate-3:hover,
#app .hover\:bg-n-slate-4:hover,
#app .hover\:bg-n-slate-5:hover,
#app .hover\:bg-n-slate-6:hover,
#app .hover\:bg-n-slate-7:hover,
#app .hover\:bg-n-slate-8:hover,
#app .hover\:bg-n-slate-9:hover {
  background-color: var(--bx-alpha-2) !important;
  opacity: 1 !important;
}

/* Selected / active menu items */
#app .bg-n-slate-3,
#app .bg-n-slate-4 {
  background-color: var(--bx-alpha-3) !important;
}

/* Scrollbars */
#app ::-webkit-scrollbar { width: 8px; height: 8px; }
#app ::-webkit-scrollbar-track { background: transparent; }
#app ::-webkit-scrollbar-thumb {
  background: var(--bx-border);
  border-radius: 4px;
}
#app ::-webkit-scrollbar-thumb:hover {
  background: var(--bx-primary);
}

/* UI #4: Live chat campaigns modal */
#app [role="dialog"][class*="modal"],
#app .modal-content {
  background-color: var(--bx-surface) !important;
  border-color: var(--bx-border) !important;
}

#app [role="dialog"] h1, #app [role="dialog"] h2, #app [role="dialog"] h3,
#app .modal-content h1, #app .modal-content h2, #app .modal-content h3 {
  color: var(--bx-text) !important;
}

#app [role="dialog"] button[class*="bg-woot"],
#app [role="dialog"] button[class*="bg-indigo"] {
  background-color: var(--bx-primary) !important;
  color: white !important;
}

#app [role="dialog"] button[class*="bg-woot"]:hover,
#app [role="dialog"] button[class*="bg-indigo"]:hover {
  background-color: var(--bx-primary-hover) !important;
}

/* UI #6: Labels page indigo override */
#app [style*="6366f1"], #app [style*="rgb(99, 102, 241)"] {
  background-color: var(--bx-primary) !important;
}

#app .rounded-full[class*="w-4"], #app div[class*="color-swatch"] {
  background-color: var(--bx-primary) !important;
}

/* UI #7: Canned Response modal */
#app [class*="canned"] button[class*="indigo"],
#app [class*="response"] button[class*="indigo"] {
  background-color: var(--bx-primary) !important;
  border-color: var(--bx-primary) !important;
  color: white !important;
}

#app [class*="canned"] [class*="text-indigo"],
#app [class*="response"] [class*="text-indigo"] {
  color: var(--bx-primary) !important;
}

#app [role="dialog"] input, #app [role="dialog"] textarea, #app [role="dialog"] select {
  background-color: var(--bx-surface) !important;
  border-color: var(--bx-border) !important;
  color: var(--bx-text) !important;
}

#app [style*="indigo"] { background-color: var(--bx-primary) !important; }
#app .fill-indigo-600, #app .fill-indigo-500 { fill: var(--bx-primary) !important; }


/* ─── Embed-specific layout fixes ──────────────────────────────────
   Chatwoot was designed as a standalone app; some layouts assume a
   different viewport. Override here. */

/* #38: Notifications page renders in a tiny constrained box.
   The Chatwoot Notifications view wraps its content in
   `flex items-start w-full max-w-5xl mx-auto`, then the inner panel
   has no width directive and collapses to content. We need both:
   (a) remove the max-w-5xl cap, (b) ensure the inner overflow-y-auto
   panel and the section beneath it stretch to the full width.
   Scoped via [data-switchboard-route="notifications"] which bridge.js
   sets on <html>. */
[data-switchboard-route="notifications"] .max-w-5xl {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[data-switchboard-route="notifications"] .max-w-5xl > .h-full.overflow-y-auto,
[data-switchboard-route="notifications"] .max-w-5xl > .h-full.overflow-y-auto > .flex,
[data-switchboard-route="notifications"] .max-w-5xl > .h-full.overflow-y-auto section {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* #39: MobileSidebarLauncher — Chatwoot renders a hamburger toggle
   at fixed bottom-left when viewport < 768px (`block md:hidden`).
   Inside our iframe, the iframe content viewport is often narrower
   than 768px on desktop (brain-app sidebar steals ~250px), so
   Chatwoot treats it as mobile and shows a sidebar toggle that does
   nothing useful here. Hide it. */
#mobile-sidebar-launcher,
#app #mobile-sidebar-launcher {
  display: none !important;
}