/* ═══════════════════════════════════════════════════════════════
   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);
}

/* 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;
}

/* 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 {
  background-color: var(--bx-alpha-2) !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; }