/* ==========================================================================
   SinHuellas Chat - Pure White & Emerald Gold Theme (#163f30 & #d7a944)
   ========================================================================== */

/* Native Text Highlight Selection */
::selection {
  background: #163f30 !important;
  color: #ffffff !important;
}
::-moz-selection {
  background: #163f30 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   1. LIGHT MODE (APPLIED WHEN BODY DOES NOT HAVE .dark CLASS)
   -------------------------------------------------------------------------- */

:root:not(.dark),
body:not(.dark) {
  /* Brand Color Tokens */
  --sh-emerald: #163f30 !important;
  --sh-emerald-hover: #1e523f !important;
  --sh-emerald-light: rgba(22, 63, 48, 0.08) !important;
  --sh-gold: #d7a944 !important;
  --sh-gold-hover: #c49635 !important;
  --sh-gold-light: rgba(215, 169, 68, 0.15) !important;

  /* Pure White Light Theme Tokens */
  --sh-bg-primary: #ffffff !important;
  --sh-bg-secondary: #f8fafc !important;
  --sh-surface-card: #ffffff !important;
  --sh-border-color: #e2e8f0 !important;
  --sh-text-primary: #0f172a !important;
  --sh-text-muted: #475569 !important;

  --sh-brand-gradient: linear-gradient(135deg, #163f30 0%, #1e523f 100%) !important;
  --sh-gold-gradient: linear-gradient(135deg, #d7a944 0%, #c49635 100%) !important;

  /* Radix / Tailwind Light Mode CSS Variables */
  --slate-1: 255 255 255 !important;
  --slate-2: 248 250 252 !important;
  --slate-3: 241 245 249 !important;
  --slate-4: 226 232 240 !important;
  --slate-5: 203 213 225 !important;
  --slate-6: 148 163 184 !important;
  --slate-7: 100 116 139 !important;
  --slate-8: 71 85 105 !important;
  --slate-9: 51 65 85 !important;
  --slate-10: 30 41 59 !important;
  --slate-11: 71 85 105 !important;
  --slate-12: 15 23 42 !important;

  --background-color: 255 255 255 !important;
  --surface-1: 255 255 255 !important;
  --surface-2: 255 255 255 !important;
  --surface-active: 241 245 249 !important;
  --solid-1: 255 255 255 !important;
  --solid-2: 255 255 255 !important;
  --solid-3: 241 245 249 !important;
  --card-color: 255 255 255 !important;
  --label-background: 248 250 252 !important;
  --border-strong: 226 232 240 !important;
  --border-weak: 241 245 249 !important;

  --woot-500: 22 63 48 !important;
  --woot-600: 30 82 63 !important;
  --woot-700: 18 50 38 !important;

  --blue-50: 248 250 252 !important;
  --blue-100: 241 245 249 !important;
  --blue-500: 22 63 48 !important;
  --blue-600: 30 82 63 !important;
  --blue-700: 18 50 38 !important;
  --blue-9: 22 63 48 !important;
  --blue-10: 30 82 63 !important;
  --blue-11: 22 63 48 !important;
  --blue-12: 15 23 42 !important;
}

/* Light Mode Body & Containers */
body:not(.dark),
body:not(.dark) #app,
body:not(.dark) .app-wrapper,
body:not(.dark) .v3-app,
body:not(.dark) main,
body:not(.dark) .main-content,
body:not(.dark) [class*="bg-n-background"],
body:not(.dark) [class*="bg-n-solid"],
body:not(.dark) [class*="bg-n-slate"],
body:not(.dark) [class*="bg-n-surface"],
body:not(.dark) .bg-n-surface-1,
body:not(.dark) .bg-n-surface-2,
body:not(.dark) .bg-n-surface-3,
body:not(.dark) .secondary-sidebar,
body:not(.dark) aside.secondary-sidebar,
body:not(.dark) [class*="secondary-sidebar"],
body:not(.dark) [class*="conversations-sidebar"],
body:not(.dark) [class*="conversations-list"],
body:not(.dark) [class*="bg-slate-25"],
body:not(.dark) [class*="bg-slate-50"],
body:not(.dark) [class*="bg-slate-100"],
body:not(.dark) [class*="bg-slate-700"],
body:not(.dark) [class*="bg-slate-800"],
body:not(.dark) [class*="bg-slate-850"],
body:not(.dark) [class*="bg-slate-900"],
body:not(.dark) [class*="bg-slate-925"],
body:not(.dark) [class*="bg-slate-950"],
body:not(.dark) [class*="bg-woot-900"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Base Typography & Font Smoothing */
html, body, #app, .app-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Light Mode Secondary Sidebar & Headers */
body:not(.dark) .secondary-sidebar,
body:not(.dark) [class*="secondary-sidebar"],
body:not(.dark) [class*="conversations-sidebar"],
body:not(.dark) header,
body:not(.dark) .header,
body:not(.dark) topbar,
body:not(.dark) .topbar,
body:not(.dark) aside,
body:not(.dark) nav,
body:not(.dark) .sidebar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Light Mode Cards & Onboarding */
body:not(.dark) div[class*="bg-n-surface"],
body:not(.dark) .auth-card,
body:not(.dark) .card,
body:not(.dark) div[class*="shadow-card"],
body:not(.dark) div[class*="rounded-xl"] {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

/* Light Mode High Contrast Text */
body:not(.dark) p,
body:not(.dark) span:not(button *):not(nav *),
body:not(.dark) label,
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3,
body:not(.dark) h4,
body:not(.dark) h5,
body:not(.dark) h6,
body:not(.dark) td,
body:not(.dark) th {
  color: #0f172a !important;
}

body:not(.dark) .text-n-slate-12,
body:not(.dark) [class*="text-n-slate-12"],
body:not(.dark) .text-slate-900,
body:not(.dark) .text-slate-800,
body:not(.dark) .text-slate-700 {
  color: #0f172a !important;
}

body:not(.dark) .text-n-slate-11,
body:not(.dark) [class*="text-n-slate-11"],
body:not(.dark) .text-slate-600,
body:not(.dark) .text-slate-500 {
  color: #475569 !important;
}

body:not(.dark) a[class*="text-n-brand"],
body:not(.dark) .text-n-brand {
  color: var(--sh-emerald) !important;
  font-weight: 600 !important;
}

/* Light Mode Selected/Faded Element Protection */
body:not(.dark) [class*="bg-n-brand/"],
body:not(.dark) [class*="bg-n-teal/"],
body:not(.dark) [class*="bg-n-amber/"],
body:not(.dark) [class*="bg-n-slate/"],
body:not(.dark) [class*="bg-n-alpha-"],
body:not(.dark) [class*="bg-slate-100"],
body:not(.dark) [class*="bg-slate-200"] {
  color: #0f172a !important;
}

body:not(.dark) [class*="bg-n-brand/"] *,
body:not(.dark) [class*="bg-n-teal/"] *,
body:not(.dark) [class*="bg-n-amber/"] *,
body:not(.dark) [class*="bg-n-slate/"] *,
body:not(.dark) [class*="bg-n-alpha-"] *,
body:not(.dark) [class*="bg-slate-100"] *,
body:not(.dark) [class*="bg-slate-200"] * {
  color: #0f172a !important;
}

/* Light Mode Inputs */
body:not(.dark) input[type="text"],
body:not(.dark) input[type="email"],
body:not(.dark) input[type="password"],
body:not(.dark) textarea,
body:not(.dark) select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
}

/* Light Mode Secondary / Faded Buttons */
body:not(.dark) button[class*="bg-n-brand/"],
body:not(.dark) button[class*="bg-n-teal/"],
body:not(.dark) button[class*="bg-n-amber/"],
body:not(.dark) button[class*="bg-n-slate/"],
body:not(.dark) button[class*="bg-woot-50"],
body:not(.dark) button[class*="bg-woot-100"],
body:not(.dark) button.clear,
body:not(.dark) button.secondary,
body:not(.dark) button.hollow,
body:not(.dark) button.link,
body:not(.dark) button.flat,
body:not(.dark) .button--secondary,
body:not(.dark) .button--clear,
body:not(.dark) .button--hollow,
body:not(.dark) .woot-button--secondary,
body:not(.dark) .n-button--secondary {
  background-color: #ffffff !important;
  border: 1px solid var(--sh-emerald) !important;
  color: var(--sh-emerald) !important;
}

body:not(.dark) button[class*="bg-n-brand/"] *,
body:not(.dark) button[class*="bg-n-teal/"] *,
body:not(.dark) button[class*="bg-n-amber/"] *,
body:not(.dark) button[class*="bg-n-slate/"] *,
body:not(.dark) button[class*="bg-woot-50"] *,
body:not(.dark) button[class*="bg-woot-100"] *,
body:not(.dark) button.clear *,
body:not(.dark) button.secondary *,
body:not(.dark) button.hollow *,
body:not(.dark) button.link *,
body:not(.dark) button.flat *,
body:not(.dark) .button--secondary *,
body:not(.dark) .button--clear *,
body:not(.dark) .button--hollow *,
body:not(.dark) .woot-button--secondary *,
body:not(.dark) .n-button--secondary * {
  color: var(--sh-emerald) !important;
  fill: var(--sh-emerald) !important;
  stroke: var(--sh-emerald) !important;
}

body:not(.dark) button[class*="bg-n-brand/"]:hover,
body:not(.dark) button[class*="bg-n-teal/"]:hover,
body:not(.dark) button[class*="bg-n-amber/"]:hover,
body:not(.dark) button[class*="bg-n-slate/"]:hover,
body:not(.dark) button.clear:hover,
body:not(.dark) button.secondary:hover,
body:not(.dark) button.hollow:hover,
body:not(.dark) .button--secondary:hover {
  background: var(--sh-brand-gradient) !important;
  color: #ffffff !important;
  border-color: var(--sh-emerald) !important;
}

body:not(.dark) button[class*="bg-n-brand/"]:hover *,
body:not(.dark) button[class*="bg-n-teal/"]:hover *,
body:not(.dark) button[class*="bg-n-amber/"]:hover *,
body:not(.dark) button[class*="bg-n-slate/"]:hover *,
body:not(.dark) button.clear:hover *,
body:not(.dark) button.secondary:hover *,
body:not(.dark) button.hollow:hover *,
body:not(.dark) .button--secondary:hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Light Mode Modals & Dropdowns */
body:not(.dark) .modal-container,
body:not(.dark) .modal-content,
body:not(.dark) .woot-modal,
body:not(.dark) [role="dialog"] .modal-container,
body:not(.dark) [role="dialog"] > div:nth-child(2),
body:not(.dark) div[class*="modal-card"] {
  background-color: #ffffff !important;
  border: 1px solid var(--sh-gold) !important;
  color: #0f172a !important;
}

body:not(.dark) .modal-header, body:not(.dark) .woot-modal--header {
  border-bottom: 1px solid #e2e8f0 !important;
  color: var(--sh-emerald) !important;
}

body:not(.dark) .modal-footer, body:not(.dark) .woot-modal--footer {
  border-top: 1px solid #e2e8f0 !important;
  background-color: #f8fafc !important;
}

body:not(.dark) .dropdown-pane,
body:not(.dark) [class*="dropdown-menu"],
body:not(.dark) .popover-content {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   2. DARK MODE - OLED PITCH BLACK PURE (ESTILO APPLE iOS - SINO AZUL #0e1628)
   -------------------------------------------------------------------------- */

.dark,
body.dark {
  /* Brand Tokens in Dark Mode */
  --sh-bg-primary: #000000 !important;
  --sh-bg-secondary: #09090b !important;
  --sh-surface-card: #121215 !important;
  --sh-border-color: #222226 !important;
  --sh-text-primary: #ffffff !important;
  --sh-text-muted: #a1a1aa !important;

  /* Eradicate Radix Slate Blue Hues (#0e1628) to Pure Pitch Black / Charcoal */
  --slate-1: 0 0 0 !important;
  --slate-2: 0 0 0 !important;
  --slate-3: 0 0 0 !important;
  --slate-4: 0 0 0 !important;
  --slate-5: 18 18 21 !important;
  --slate-6: 24 24 28 !important;
  --slate-7: 70 70 75 !important;
  --slate-8: 100 100 105 !important;
  --slate-9: 140 140 145 !important;
  --slate-10: 161 161 170 !important;
  --slate-11: 212 212 216 !important;
  --slate-12: 255 255 255 !important;

  --background-color: 0 0 0 !important;
  --surface-1: 0 0 0 !important;
  --surface-2: 0 0 0 !important;
  --surface-3: 0 0 0 !important;
  --surface-active: 18 18 21 !important;
  --solid-1: 0 0 0 !important;
  --solid-2: 0 0 0 !important;
  --solid-3: 0 0 0 !important;
  --card-color: 0 0 0 !important;
  --label-background: 0 0 0 !important;
  --border-strong: 24 24 28 !important;
  --border-weak: 18 18 21 !important;

  --woot-500: 22 63 48 !important;
  --woot-600: 30 82 63 !important;

  --blue-9: 22 63 48 !important;
  --blue-10: 30 82 63 !important;
  --blue-11: 215 169 68 !important;
  --blue-12: 255 255 255 !important;
}

/* Eradicate #0e1628 Dark Blue Tint in Dark Mode Across Containers */
body.dark,
body.dark #app,
body.dark .app-wrapper,
body.dark .v3-app,
body.dark main,
body.dark .main-content,
body.dark [class*="bg-n-background"],
body.dark [class*="bg-n-solid"],
body.dark [class*="bg-n-slate"],
body.dark [class*="bg-n-surface"],
body.dark [class*="bg-slate-900"],
body.dark [class*="bg-slate-925"],
body.dark [class*="bg-slate-950"],
body.dark [class*="bg-slate-800"],
body.dark [class*="bg-slate-850"],
body.dark [class*="bg-woot-900"],
body.dark div[class*="conversations-sidebar"],
body.dark div[class*="secondary-sidebar"] {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Dark Mode Cards & Floating Surfaces (Grafito Oscuro Mate #121215) */
body.dark div[class*="bg-n-surface"],
body.dark .bg-n-surface-2,
body.dark .bg-n-surface-3,
body.dark .card,
body.dark .auth-card,
body.dark div[class*="shadow-card"],
body.dark div[class*="rounded-xl"] {
  background-color: #121215 !important;
  border: 1px solid #222226 !important;
  color: #ffffff !important;
}

/* Dark Mode Typography Hierarchy */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
  color: #ffffff !important;
}

body.dark p,
body.dark label,
body.dark td,
body.dark th {
  color: #e4e4e7 !important;
}

body.dark .text-n-slate-12,
body.dark [class*="text-n-slate-12"],
body.dark .text-slate-100,
body.dark .text-slate-200 {
  color: #ffffff !important;
}

body.dark .text-n-slate-11,
body.dark [class*="text-n-slate-11"],
body.dark .text-slate-400,
body.dark .text-slate-300,
body.dark span.text-n-slate-11 {
  color: #a1a1aa !important;
}

body.dark a[class*="text-n-brand"],
body.dark .text-n-brand {
  color: var(--sh-gold) !important;
  font-weight: 600 !important;
}

/* Dark Mode Inputs */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark textarea,
body.dark select {
  background-color: #18181b !important;
  border: 1px solid #27272a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
  border-color: var(--sh-gold) !important;
  box-shadow: 0 0 0 2px rgba(215, 169, 68, 0.25) !important;
}

/* Dark Mode Secondary / Outline Buttons */
body.dark button[class*="bg-n-brand/"],
body.dark button[class*="bg-n-teal/"],
body.dark button[class*="bg-n-amber/"],
body.dark button[class*="bg-n-slate/"],
body.dark button[class*="bg-woot-50"],
body.dark button.clear,
body.dark button.secondary,
body.dark button.hollow,
body.dark button.link,
body.dark button.flat,
body.dark .button--secondary,
body.dark .button--clear,
body.dark .button--hollow,
body.dark .woot-button--secondary,
body.dark .n-button--secondary {
  background-color: #18181b !important;
  border: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

body.dark button[class*="bg-n-brand/"] *,
body.dark button[class*="bg-n-teal/"] *,
body.dark button[class*="bg-n-amber/"] *,
body.dark button[class*="bg-n-slate/"] *,
body.dark button[class*="bg-woot-50"] *,
body.dark button.clear *,
body.dark button.secondary *,
body.dark button.hollow *,
body.dark button.link *,
body.dark button.flat *,
body.dark .button--secondary *,
body.dark .button--clear *,
body.dark .button--hollow *,
body.dark .woot-button--secondary *,
body.dark .n-button--secondary * {
  color: #f4f4f5 !important;
  fill: #f4f4f5 !important;
  stroke: #f4f4f5 !important;
}

body.dark button[class*="bg-n-brand/"]:hover,
body.dark button[class*="bg-n-teal/"]:hover,
body.dark button[class*="bg-n-amber/"]:hover,
body.dark button[class*="bg-n-slate/"]:hover,
body.dark button.clear:hover,
body.dark button.secondary:hover,
body.dark button.hollow:hover,
body.dark .button--secondary:hover {
  background: #27272a !important;
  color: #ffffff !important;
  border-color: rgba(215, 169, 68, 0.5) !important;
}

/* Dark Mode Sidebar & Header */
body.dark aside,
body.dark nav,
body.dark .sidebar,
body.dark .secondary-sidebar,
body.dark [class*="secondary-sidebar"],
body.dark [class*="conversations-sidebar"],
body.dark header,
body.dark .header,
body.dark topbar,
body.dark .topbar {
  background-color: #000000 !important;
  border-color: #1f1f23 !important;
}

body.dark aside svg, body.dark nav svg, body.dark .sidebar svg {
  color: var(--sh-gold) !important;
}

body.dark aside a:hover,
body.dark nav a:hover,
body.dark .sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Dark Mode Modals & Dropdowns */
body.dark .modal-container,
body.dark .modal-content,
body.dark .woot-modal,
body.dark [role="dialog"] .modal-container,
body.dark [role="dialog"] > div:nth-child(2),
body.dark div[class*="modal-card"] {
  background-color: #121215 !important;
  border: 1px solid #27272a !important;
  color: #ffffff !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
}

body.dark .modal-header, body.dark .woot-modal--header {
  border-bottom: 1px solid #222226 !important;
  color: var(--sh-gold) !important;
}

body.dark .modal-footer, body.dark .woot-modal--footer {
  border-top: 1px solid #222226 !important;
  background-color: #09090b !important;
}

body.dark .dropdown-pane,
body.dark [class*="dropdown-menu"],
body.dark .popover-content {
  background-color: #121215 !important;
  border: 1px solid #27272a !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

/* --------------------------------------------------------------------------
   3. DRASTIC LUXURY EXECUTIVE SIDEBAR NAVIGATION REDESIGN (<nav>)
   -------------------------------------------------------------------------- */

body:not(.dark) nav {
  background: #ffffff !important;
  padding: 8px !important;
}

body.dark nav {
  background: #0f172a !important;
  padding: 8px !important;
}

nav li {
  margin-bottom: 4px !important;
}

nav li a {
  border-radius: 14px !important;
  padding: 10px 14px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

/* Icons styling inside nav links */
nav a div.relative,
nav a span[class*="i-lucide-"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

/* Inactive Nav Link - Light Mode */
body:not(.dark) nav a {
  color: #475569 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

body:not(.dark) nav a span[class*="i-lucide-"] {
  color: #163f30 !important;
}

body:not(.dark) nav a:hover {
  background: linear-gradient(90deg, rgba(22, 63, 48, 0.07) 0%, rgba(215, 169, 68, 0.14) 100%) !important;
  color: #163f30 !important;
  border: 1px solid rgba(215, 169, 68, 0.3) !important;
  transform: translateX(4px) !important;
}

body:not(.dark) nav a:hover span[class*="i-lucide-"] {
  transform: scale(1.18) !important;
  color: #163f30 !important;
}

/* Inactive Nav Link - Dark Mode */
body.dark nav a {
  color: #94a3b8 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

body.dark nav a span[class*="i-lucide-"] {
  color: #d7a944 !important;
}

body.dark nav a:hover {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.85) 0%, rgba(215, 169, 68, 0.18) 100%) !important;
  color: #d7a944 !important;
  border: 1px solid rgba(215, 169, 68, 0.35) !important;
  transform: translateX(4px) !important;
}

body.dark nav a:hover span[class*="i-lucide-"] {
  transform: scale(1.18) !important;
  color: #d7a944 !important;
}

/* ACTIVE NAV ITEM - DRASTIC EXECUTIVE EMBOSSED PILL */
nav a.router-link-exact-active,
nav a.router-link-active,
nav a.active,
nav a[aria-current="page"] {
  background: linear-gradient(135deg, #163f30 0%, #1e523f 60%, #113125 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-left: 4px solid #d7a944 !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 8px 20px -4px rgba(22, 63, 48, 0.45), 0 2px 6px -1px rgba(215, 169, 68, 0.35) !important;
}

nav a.router-link-exact-active *,
nav a.router-link-active *,
nav a.active *,
nav a[aria-current="page"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

nav a.router-link-exact-active span[class*="i-lucide-"],
nav a.router-link-active span[class*="i-lucide-"],
nav a.active span[class*="i-lucide-"] {
  filter: drop-shadow(0 0 6px rgba(215, 169, 68, 0.6)) !important;
}

/* Sub-item Dropdown Tree Navigation */
nav ul ul {
  padding-left: 12px !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  position: relative !important;
}

nav ul ul::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, #d7a944 0%, rgba(215, 169, 68, 0.15) 100%) !important;
  border-radius: 2px !important;
}

nav ul ul li a {
  height: 36px !important;
  font-size: 0.8125rem !important;
  padding-left: 14px !important;
}

body:not(.dark) nav ul ul a:hover {
  background: rgba(215, 169, 68, 0.14) !important;
  color: #163f30 !important;
}

body.dark nav ul ul a:hover {
  background: rgba(215, 169, 68, 0.2) !important;
  color: #d7a944 !important;
}

/* --------------------------------------------------------------------------
   4. SOLID PRIMARY GREEN BUTTONS (STRICT MATCH FOR TRUE SOLID BACKGROUNDS ONLY)
   -------------------------------------------------------------------------- */
button.bg-woot-500,
.bg-woot-500,
button.bg-blue-600,
button.bg-blue-500,
.button--primary,
button.primary,
button[type="submit"],
.woot-button--primary,
.n-button--primary,
button.bg-n-brand:not([class*="/"]):not([class*="-50"]):not([class*="-100"]),
div.bg-n-brand:not([class*="/"]):not([class*="-50"]):not([class*="-100"]) {
  background: var(--sh-brand-gradient) !important;
  border: none !important;
  color: #ffffff !important;
}

button.bg-woot-500 *,
.bg-woot-500 *,
button.bg-blue-600 *,
button.bg-blue-500 *,
.button--primary *,
button.primary *,
button[type="submit"] *,
.woot-button--primary *,
.n-button--primary *,
button.bg-n-brand:not([class*="/"]):not([class*="-50"]):not([class*="-100"]) *,
div.bg-n-brand:not([class*="/"]):not([class*="-50"]):not([class*="-100"]) * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

button.bg-woot-500:hover,
.bg-woot-500:hover,
button.bg-n-brand:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, #1e523f 0%, #163f30 100%) !important;
  box-shadow: 0 6px 18px rgba(215, 169, 68, 0.35) !important;
  color: #ffffff !important;
}

button.bg-woot-500:hover *,
.bg-woot-500:hover *,
button.bg-n-brand:hover *,
button[type="submit"]:hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* --------------------------------------------------------------------------
   5. TOP LOGO & ACCOUNT SWITCHER HEADER SECTION ENHANCEMENTS
   -------------------------------------------------------------------------- */

/* Parent Container Spacing */
div:has(> #sidebar-account-switcher),
div:has(> button#sidebar-account-switcher),
aside div.flex.items-center:has(img[src*="logo"]) {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Logo Image Container (Size Upgrade from 16px to 34px) */
aside img[src*="logo"],
div:has(> #sidebar-account-switcher) img,
.sidebar img[src*="logo"] {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

aside img[src*="logo"]:hover,
.sidebar img[src*="logo"]:hover {
  transform: scale(1.12) !important;
  filter: drop-shadow(0 4px 10px rgba(215, 169, 68, 0.5)) !important;
}

/* Logo Wrapping Frame */
div:has(> img[src*="logo"]) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  transition: all 0.25s ease !important;
}

body:not(.dark) div:has(> img[src*="logo"]) {
  background: #ffffff !important;
  border: 1px solid rgba(215, 169, 68, 0.4) !important;
  box-shadow: 0 4px 12px rgba(22, 63, 48, 0.08) !important;
}

body.dark div:has(> img[src*="logo"]) {
  background: #1e293b !important;
  border: 1px solid rgba(215, 169, 68, 0.4) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Taller Section Divider */
div:has(> #sidebar-account-switcher) > div.w-px,
aside div.w-px.h-3 {
  height: 24px !important;
  width: 2px !important;
  background: linear-gradient(180deg, #d7a944 0%, rgba(215, 169, 68, 0.2) 100%) !important;
}

/* Account Switcher Button & Title */
#sidebar-account-switcher {
  height: 44px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body:not(.dark) #sidebar-account-switcher span {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #163f30 !important;
  letter-spacing: -0.01em !important;
}

body.dark #sidebar-account-switcher span {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #d7a944 !important;
  letter-spacing: -0.01em !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(215, 169, 68, 0.4) !important;
  border-radius: 9999px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(22, 63, 48, 0.7) !important;
}

/* Logo Hover & Footer Branding Removal */
img[alt*="SinHuellas"], img[src*="logo"] {
  transition: all 0.3s ease !important;
}

img[alt*="SinHuellas"]:hover, img[src*="logo"]:hover {
  transform: scale(1.06) !important;
  filter: drop-shadow(0 4px 10px rgba(215, 169, 68, 0.3)) !important;
}

a[href*="chatwoot.com"], .powered-by-chatwoot { display: none !important; }

/* ==========================================================================
   6. ULTRA LUXURY EXECUTIVE INTERFACE OVERHAUL (CONVERSATIONS, CHAT BUBBLES, WIDGETS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 HEADER & TOPBAR GLASSMORPHISM
   -------------------------------------------------------------------------- */
header,
.header,
.topbar,
[class*="header-main"],
div:has(> #sidebar-account-switcher) {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.3s ease !important;
}

body:not(.dark) header,
body:not(.dark) .topbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}

body.dark header,
body.dark .topbar {
  background: rgba(15, 23, 42, 0.92) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Top Accent Gold Bar */
body::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #163f30 0%, #d7a944 50%, #163f30 100%) !important;
  z-index: 999999 !important;
}

/* --------------------------------------------------------------------------
   6.2 CONVERSATIONS LIST & FLOATING CARDS
   -------------------------------------------------------------------------- */
/* Individual Conversation Item Capsules */
[class*="conversations-list"] > div,
[class*="conversation-item"],
.conversation,
div[role="button"]:has([class*="avatar"]) {
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.dark) [class*="conversations-list"] > div,
body:not(.dark) [class*="conversation-item"],
body:not(.dark) .conversation {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02) !important;
}

body:not(.dark) [class*="conversations-list"] > div:hover,
body:not(.dark) [class*="conversation-item"]:hover,
body:not(.dark) .conversation:hover {
  background: #f8fafc !important;
  border-color: rgba(215, 169, 68, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(22, 63, 48, 0.06) !important;
}

body.dark [class*="conversations-list"] > div,
body.dark [class*="conversation-item"],
body.dark .conversation {
  background: #121215 !important;
  border: 1px solid #222226 !important;
}

body.dark [class*="conversations-list"] > div:hover,
body.dark [class*="conversation-item"]:hover,
body.dark .conversation:hover {
  background: #18181b !important;
  border-color: rgba(215, 169, 68, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Active Selected Conversation Item */
.conversation.active,
[class*="conversation-item"].active,
[class*="conversation-item"][class*="active"],
div[class*="bg-n-alpha-2"]:has([class*="avatar"]) {
  background: linear-gradient(135deg, rgba(22, 63, 48, 0.08) 0%, rgba(215, 169, 68, 0.12) 100%) !important;
  border-left: 4px solid #d7a944 !important;
  border-radius: 4px 14px 14px 4px !important;
}

body.dark .conversation.active,
body.dark [class*="conversation-item"].active,
body.dark [class*="conversation-item"][class*="active"] {
  background: linear-gradient(135deg, rgba(22, 63, 48, 0.22) 0%, rgba(215, 169, 68, 0.15) 100%) !important;
  border-left: 4px solid #d7a944 !important;
  border-radius: 4px 14px 14px 4px !important;
}

/* Unread Badge Counters (Neon Gold/Emerald Gradient Pill) */
.unread-count,
span[class*="unread"],
span[class*="bg-n-brand"]:not(button *),
div[class*="badge"]:not(button *) {
  background: linear-gradient(135deg, #d7a944 0%, #c49635 100%) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  border-radius: 9999px !important;
  padding: 2px 8px !important;
  box-shadow: 0 2px 8px rgba(215, 169, 68, 0.4) !important;
}

/* Avatars Styling (Gold Rings & Smooth Shadows) */
[class*="avatar"],
.avatar-container,
div:has(> img[class*="avatar"]) {
  border-radius: 9999px !important;
  box-shadow: 0 0 0 2px rgba(215, 169, 68, 0.35), 0 4px 10px rgba(15, 23, 42, 0.1) !important;
  transition: transform 0.25s ease !important;
}

[class*="avatar"]:hover {
  transform: scale(1.08) !important;
}

/* --------------------------------------------------------------------------
   6.3 CHAT MESSAGE BUBBLES & INPUT REPLY BOX
   -------------------------------------------------------------------------- */
/* Main Chat Panel Container */
.conversation-panel,
main div:has(> [class*="bubble"]) {
  background: transparent !important;
}

/* Incoming Message Bubbles (Left) */
body:not(.dark) [class*="bubble"][class*="incoming"],
body:not(.dark) .message-bubble.incoming,
body:not(.dark) div[class*="bg-n-slate-2"],
body:not(.dark) div[class*="bg-slate-100"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  border-radius: 18px 18px 18px 4px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  padding: 12px 16px !important;
}

body.dark [class*="bubble"][class*="incoming"],
body.dark .message-bubble.incoming,
body.dark div[class*="bg-n-slate-2"],
body.dark div[class*="bg-slate-700"] {
  background: #18181b !important;
  border: 1px solid #27272a !important;
  color: #ffffff !important;
  border-radius: 18px 18px 18px 4px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  padding: 12px 16px !important;
}

/* Outgoing Message Bubbles (Right - Deep Emerald Luxury) */
[class*="bubble"][class*="outgoing"],
.message-bubble.outgoing,
div[class*="bg-n-brand-solid"],
div[class*="bg-woot-500"]:not(button) {
  background: linear-gradient(135deg, #163f30 0%, #1e523f 100%) !important;
  border: 1px solid rgba(215, 169, 68, 0.3) !important;
  color: #ffffff !important;
  border-radius: 18px 18px 4px 18px !important;
  box-shadow: 0 6px 18px rgba(22, 63, 48, 0.25) !important;
  padding: 12px 16px !important;
}

[class*="bubble"][class*="outgoing"] *,
.message-bubble.outgoing * {
  color: #ffffff !important;
}

/* Reply Input Box Container */
.reply-box,
div[class*="reply-box"],
div:has(> .ProseMirror) {
  border-radius: 18px !important;
  transition: all 0.25s ease !important;
}

body:not(.dark) .reply-box,
body:not(.dark) div[class*="reply-box"],
body:not(.dark) div:has(> .ProseMirror) {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

body:not(.dark) .reply-box:focus-within,
body:not(.dark) div[class*="reply-box"]:focus-within {
  border-color: #163f30 !important;
  box-shadow: 0 0 0 3px rgba(215, 169, 68, 0.25), 0 8px 24px rgba(22, 63, 48, 0.1) !important;
}

body.dark .reply-box,
body.dark div[class*="reply-box"],
body.dark div:has(> .ProseMirror) {
  background: #121215 !important;
  border: 1px solid #27272a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

body.dark .reply-box:focus-within,
body.dark div[class*="reply-box"]:focus-within {
  border-color: #d7a944 !important;
  box-shadow: 0 0 0 3px rgba(215, 169, 68, 0.25), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* --------------------------------------------------------------------------
   6.4 DASHBOARD CARDS & STATS WIDGETS
   -------------------------------------------------------------------------- */
[class*="metric-card"],
.stat-card,
div[class*="shadow-card"],
main div[class*="rounded-xl"] {
  border-radius: 18px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.dark) [class*="metric-card"],
body:not(.dark) .stat-card,
body:not(.dark) main div[class*="rounded-xl"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
}

body:not(.dark) [class*="metric-card"]:hover,
body:not(.dark) .stat-card:hover,
body:not(.dark) main div[class*="rounded-xl"]:hover {
  border-color: rgba(215, 169, 68, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(22, 63, 48, 0.08) !important;
}

body.dark [class*="metric-card"],
body.dark .stat-card,
body.dark main div[class*="rounded-xl"] {
  background: #121215 !important;
  border: 1px solid #222226 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

body.dark [class*="metric-card"]:hover,
body.dark .stat-card:hover,
body.dark main div[class*="rounded-xl"]:hover {
  border-color: rgba(215, 169, 68, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6) !important;
}

/* --------------------------------------------------------------------------
   6.5 TABLES & DATA GRID REFINEMENT
   -------------------------------------------------------------------------- */
table {
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

tr {
  transition: all 0.2s ease !important;
  border-radius: 10px !important;
}

body:not(.dark) th {
  color: #475569 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

body.dark th {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid #334155 !important;
}

body:not(.dark) tbody tr:hover {
  background: rgba(22, 63, 48, 0.04) !important;
}

body.dark tbody tr:hover {
  background: #18181b !important;
}

/* --------------------------------------------------------------------------
   6.6 MODALS & OVERLAYS GLASSMORPHISM
   -------------------------------------------------------------------------- */
.modal-backdrop,
div[class*="backdrop"],
div[class*="overlay"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-color: rgba(0, 0, 0, 0.85) !important;
}

.modal-container,
.modal-content,
.woot-modal,
[role="dialog"] .modal-container,
[role="dialog"] > div:nth-child(2) {
  border-radius: 22px !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(215, 169, 68, 0.3) !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   6.7 SMOOTH TRANSITIONS & FOCUS GLOWS
   -------------------------------------------------------------------------- */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #d7a944 !important;
  box-shadow: 0 0 0 3px rgba(215, 169, 68, 0.3) !important;
}

button {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button:active {
  transform: scale(0.97) !important;
}

/* ==========================================================================
   7. STRICT OLED PITCH BLACK CONTRACT (DOMINANTE NEGRO ABSOLUTO #000000)
   ========================================================================== */

html.dark,
body.dark,
.dark,
.dark #app,
.dark .app-wrapper,
.dark .v3-app,
.dark main,
.dark .main-content,
.dark header,
.dark .header,
.dark topbar,
.dark .topbar,
.dark aside,
.dark nav,
.dark .sidebar,
.dark .secondary-sidebar,
.dark [class*="secondary-sidebar"],
.dark [class*="conversations-sidebar"],
.dark [class*="conversations-list"],
.dark [class*="bg-n-background"],
.dark [class*="bg-n-solid"],
.dark [class*="bg-n-slate"],
.dark [class*="bg-slate-"],
.dark [class*="bg-woot-"],
.dark [class*="dark:bg-slate-"],
.dark [class*="dark:bg-woot-"],
.dark [class*="dark:bg-n-"],
.dark [class*="dark:bg-gray-"],
.dark [class*="dark:bg-zinc-"],
.dark [class*="dark:bg-neutral-"],
.dark .bg-slate-900,
.dark .bg-slate-800,
.dark .bg-slate-700,
.dark .bg-slate-950,
.dark .bg-slate-925,
.dark .bg-slate-850,
.dark .dark\:bg-slate-900,
.dark .dark\:bg-slate-800,
.dark .dark\:bg-slate-700,
.dark .dark\:bg-slate-950,
.dark .dark\:bg-slate-925,
.dark .dark\:bg-slate-850,
.dark .dark\:bg-woot-900,
.dark .dark\:bg-woot-800,
.dark .dark\:bg-slate-900\/50,
.dark .dark\:bg-slate-800\/50,
.dark .dark\:bg-slate-950\/50 {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.dark .card,
.dark .auth-card,
.dark div[class*="card-"],
.dark div[class*="shadow-card"] {
  background-color: #121215 !important;
  border: 1px solid #222226 !important;
  color: #ffffff !important;
}

/* NAVBAR, SIDEBAR & TOP HEADER STRICT OLED PITCH BLACK (#000000) */
.dark aside,
.dark nav,
.dark header,
.dark .header,
.dark topbar,
.dark .topbar,
.dark .sidebar,
.dark .sidebar-main,
.dark .secondary-sidebar,
.dark [class*="secondary-sidebar"],
.dark [class*="conversations-sidebar"],
.dark [class*="conversations-list"],
.dark [class*="bg-n-solid"],
.dark [class*="bg-n-surface"],
.dark [class*="bg-n-slate"],
.dark [class*="bg-n-alpha"],
.dark [class*="bg-slate-"],
.dark [class*="bg-woot-"],
.dark div[class*="flex-shrink-0"],
.dark div[class*="w-56"],
.dark div[class*="w-60"],
.dark div[class*="w-64"] {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: #18181b !important;
}

.dark input,
.dark select,
.dark textarea {
  background-color: #18181b !important;
  border: 1px solid #27272a !important;
  color: #ffffff !important;
}

.dark table,
.dark tbody tr {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.dark tbody tr:hover {
  background-color: #18181b !important;
}

.dark th {
  border-bottom: 1px solid #222226 !important;
  color: #a1a1aa !important;
}

.dark td {
  border-bottom: 1px solid #18181b !important;
  color: #e4e4e7 !important;
}





/* FORCE CSS VARIABLES TO BLACK FOR DARK MODE */
html.dark, body.dark, .dark {
  --background-color: 0 0 0 !important;
  --surface-1: 18 18 21 !important;
  --surface-2: 18 18 21 !important;
  --surface-active: 33 33 33 !important;
  --slate-1: 0 0 0 !important;
  --slate-2: 0 0 0 !important;
  --blue-1: 0 0 0 !important;
  --blue-2: 0 0 0 !important;
  --blue-3: 0 0 0 !important;
  --blue-4: 0 0 0 !important;
  --iris-1: 0 0 0 !important;
  --iris-2: 0 0 0 !important;
  --n-background: 0 0 0 !important;
  --solid-1: 18 18 21 !important;
  --solid-2: 18 18 21 !important;
  --solid-3: 18 18 21 !important;
  --card-color: 18 18 21 !important;
}

body.dark * {
  /* This prevents inline styles or very specific variables from re-applying that slate blue */
  scrollbar-color: #333 #000;
}

/* FORCE ALL SURFACES TO PITCH BLACK */
html.dark, body.dark, .dark, .dark * {
  --background-color: 0 0 0 !important;
  --surface-1: 0 0 0 !important;
  --surface-2: 0 0 0 !important;
  --surface-active: 10 10 10 !important;
  --slate-1: 0 0 0 !important;
  --slate-2: 0 0 0 !important;
  --slate-3: 15 15 15 !important;
  --blue-1: 0 0 0 !important;
  --blue-2: 0 0 0 !important;
  --blue-3: 0 0 0 !important;
  --blue-4: 0 0 0 !important;
  --iris-1: 0 0 0 !important;
  --iris-2: 0 0 0 !important;
  --n-background: 0 0 0 !important;
  --solid-1: 0 0 0 !important;
  --solid-2: 0 0 0 !important;
  --solid-3: 0 0 0 !important;
  --card-color: 0 0 0 !important;
}

body.dark,
body.dark #app,
body.dark aside,
body.dark nav,
body.dark header,
body.dark main,
body.dark section,
body.dark div[class*="bg-n-background"],
body.dark div[class*="bg-n-solid"],
body.dark div[class*="bg-n-surface"],
body.dark div[class*="bg-slate"],
body.dark div[class*="sidebar"],
body.dark div[class*="header"] {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Fix for Toast/Snackbar Notifications */
body:not(.dark) div[class*="bg-n-slate-12"],
body:not(.dark) div[class*="bg-slate-900"] {
  background-color: var(--sh-emerald) !important;
  color: #ffffff !important;
}
body:not(.dark) div[class*="bg-n-slate-12"] *,
body:not(.dark) div[class*="bg-slate-900"] * {
  color: #ffffff !important;
}

/* Fix for Reply Box Drag Handle Gradient */
body:not(.dark) .resizable-editor-wrapper > div:first-child {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Fix for "Todas las conversaciones" border */
body:not(.dark) aside .active,
body:not(.dark) aside [class*="active"],
body:not(.dark) nav .active {
  box-shadow: none !important;
}

/* Remove heavy shadows from reply-box */
body:not(.dark) .reply-box,
body:not(.dark) div[class*="reply-box"] {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
body:not(.dark) .reply-box:focus-within,
body:not(.dark) div[class*="reply-box"]:focus-within {
  box-shadow: 0 0 0 1px var(--sh-emerald), 0 2px 8px rgba(22, 63, 48, 0.05) !important;
}

/* Fix for Active Conversation Item Borders */
body:not(.dark) .conversation.active,
body:not(.dark) [class*="conversation-item"].active,
body:not(.dark) [class*="conversation-item"][class*="active"] {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Remove heavy shadow on reply-box again just in case */
body:not(.dark) .reply-box-wrap,
body:not(.dark) .bottom-box,
body:not(.dark) .send-message-box {
  box-shadow: none !important;
}