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

:root {
  --ink: #10213d;
  --muted: #637083;
  --paper: #f7f4ee;
  --cream: #efe9df;
  --teal: #2f7d78;
  --teal2: #dceae7;
  --copper: #c87343;
  --navy: #0b1324;
  --line: rgba(16,33,61,.13);
  --white: #fff;
  --shadow: 0 22px 70px rgba(16,33,61,.12);
  --card-bg: rgba(255,255,255,.66);
  --nav-bg: rgba(247,244,238,.82);
  --mesh-bg: linear-gradient(135deg,#f8f5ef,#e7eee9);
}

/* ==========================================
   DARK MODE COLOR SYSTEM (DATA-THEME="DARK")
   ========================================== */
[data-theme="dark"], html.dark {
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --paper: #0b1324;
  --cream: #101c33;
  --teal: #3ab8af;
  --teal2: #1e3a47;
  --copper: #e0834f;
  --navy: #070d19;
  --line: rgba(255, 255, 255, 0.14);
  --white: #13233c;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.6);
  --card-bg: rgba(19, 35, 60, 0.9);
  --nav-bg: rgba(11, 19, 36, 0.94);
  --mesh-bg: linear-gradient(135deg, #0b1324, #12213a);
}

html {
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Bulletproof Theme Contrast Rules */
html:not(.dark) body {
  background-color: #f7f4ee !important;
  color: #10213d !important;
}

html:not(.dark) .card {
  background-color: #ffffff !important;
  border-color: rgba(16, 33, 61, 0.12) !important;
  color: #10213d !important;
}

html:not(.dark) .niche-card-title {
  color: #10213d !important;
}

html:not(.dark) .niche-card-desc {
  color: #637083 !important;
}

/* Ensure Dark Cards and Teal/Dark Banners ALWAYS keep crisp white text in all themes */
.dark-card,
.dark-card h1, .dark-card h2, .dark-card h3, .dark-card h4, .dark-card p, .dark-card > span,
.bg-\[\#2f7d78\] h1, .bg-\[\#2f7d78\] h2, .bg-\[\#2f7d78\] h3, .bg-\[\#2f7d78\] h4, .bg-\[\#2f7d78\] p,
.bg-\[\#0b1324\] h1, .bg-\[\#0b1324\] h2, .bg-\[\#0b1324\] h3, .bg-\[\#0b1324\] h4, .bg-\[\#0b1324\] p,
.bg-\[\#13233c\] h1, .bg-\[\#13233c\] h2, .bg-\[\#13233c\] h3, .bg-\[\#13233c\] h4, .bg-\[\#13233c\] p {
  color: #ffffff !important;
}

/* Light buttons inside dark cards must ALWAYS have dark navy text */
.btn-light, .btn-light * {
  color: #10213d !important;
}

/* Light cards & containers nested inside dark cards MUST ALWAYS have proper dark navy & muted text */
.dark-card .bg-\[\#f7f4ee\],
.dark-card .bg-white,
.dark-card .card {
  color: #10213d !important;
}

.dark-card .bg-\[\#f7f4ee\] h1, .dark-card .bg-\[\#f7f4ee\] h2, .dark-card .bg-\[\#f7f4ee\] h3, .dark-card .bg-\[\#f7f4ee\] h4,
.dark-card .bg-white h1, .dark-card .bg-white h2, .dark-card .bg-white h3, .dark-card .bg-white h4,
.dark-card .card h1, .dark-card .card h2, .dark-card .card h3, .dark-card .card h4 {
  color: #10213d !important;
}

.dark-card .bg-\[\#f7f4ee\] p,
.dark-card .bg-white p,
.dark-card .card p {
  color: #637083 !important;
}

.dark-card .bg-\[\#f7f4ee\] b, .dark-card .bg-\[\#f7f4ee\] strong,
.dark-card .bg-white b, .dark-card .bg-white strong {
  color: #10213d !important;
}



html.dark body {
  background-color: #0b1324 !important;
  color: #f1f5f9 !important;
}

html.dark .card {
  background-color: #13233c !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

html.dark .niche-card-title {
  color: #ffffff !important;
}

html.dark .niche-card-desc {
  color: #94a3b8 !important;
}



body {
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--paper);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, .brand {
  font-family: 'Manrope', sans-serif;
  letter-spacing: -.035em;
}

.shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}

.eyebrow:before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.headline {
  font-size: clamp(2.4rem, 6vw, 5.75rem);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.065em;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.04;
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border-radius: 999px;
  padding: .9rem 1.25rem;
  font-weight: 700;
  transition: .3s ease;
}

.btn-primary {
  background: var(--ink);
  color: white;
}

.btn-primary:hover {
  background: var(--teal);
  transform: translateY(-2px);
}

.btn-light {
  background: white;
  color: #10213d;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.btn-outline {
  border: 1px solid var(--line);
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: white;
}

.card {
  border: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: 1.5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dark-card {
  background: #13233c;
  color: white;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1.5rem;
}

.noise {
  background-image: radial-gradient(rgba(16,33,61,.07) .7px, transparent .7px);
  background-size: 8px 8px;
}

.gradient-mesh {
  background: radial-gradient(circle at 12% 15%, rgba(200,115,67,.23), transparent 28%), radial-gradient(circle at 88% 18%, rgba(47,125,120,.24), transparent 31%), var(--mesh-bg);
}

.nav-blur {
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.logo-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .65rem;
  background: var(--ink);
  position: relative;
  display: grid;
  place-items: center;
  color: white;
  font: 800 .82rem 'Manrope';
}

.logo-mark:after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  background: var(--copper);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.metric {
  font: 700 clamp(2rem, 4vw, 3.6rem) 'Manrope';
  letter-spacing: -.05em;
}

.reveal {
  opacity: 1;
  transform: none;
  animation: rise-in .65s ease both;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

.field {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  border-radius: .9rem;
  padding: .9rem 1rem;
  outline: none;
  transition: .2s;
}

.field:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(47,125,120,.1);
}

.table-row {
  display: grid;
  grid-template-columns: 1.1fr repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
  pointer-events: none;
}

.prose h2 { font: 700 1.7rem 'Manrope'; margin: 2rem 0 .7rem; }
.prose h3 { font: 700 1.15rem 'Manrope'; margin: 1.3rem 0 .4rem; }
.prose p, .prose li { color: var(--muted); line-height: 1.75; }
.prose ul { padding-left: 1.2rem; list-style: disc; }
.prose a { color: var(--teal); text-decoration: underline; }

/* =======================================================
   EXACT TAILWIND ESCAPED SELECTOR OVERRIDES FOR DARK MODE
   ======================================================= */

[data-theme="dark"] body,
html.dark body {
  background-color: #0b1324 !important;
  color: #f1f5f9 !important;
}

/* 1. Header & Nav Links */
[data-theme="dark"] header,
html.dark header,
[data-theme="dark"] .nav-blur,
html.dark .nav-blur {
  background-color: rgba(11, 19, 36, 0.94) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] header nav,
html.dark header nav {
  background-color: transparent !important;
}

header nav button,
header nav a:not(.btn) {
  color: #10213d;
}

[data-theme="dark"] header nav button,
html.dark header nav button,
[data-theme="dark"] header nav a:not(.btn),
html.dark header nav a:not(.btn) {
  color: #e2e8f0 !important;
}

[data-theme="dark"] header nav button:hover,
html.dark header nav button:hover,
[data-theme="dark"] header nav a:not(.btn):hover,
html.dark header nav a:not(.btn):hover {
  color: #3ab8af !important;
}


[data-theme="dark"] header nav a:not(.btn):hover,
html.dark header nav a:not(.btn):hover {
  color: #3ab8af !important;
}

/* 2. Text Colors (Escaped Tailwind Bracket Selectors) */
[data-theme="dark"] .text-\[\#10213d\],
html.dark .text-\[\#10213d\] {
  color: #ffffff !important;
}

[data-theme="dark"] .text-\[\#637083\],
html.dark .text-\[\#637083\] {
  color: #94a3b8 !important;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4 {
  color: #ffffff !important;
}

/* 3. Background Colors (Escaped Tailwind Bracket Selectors) */
[data-theme="dark"] .bg-\[\#efe9df\],
html.dark .bg-\[\#efe9df\],
[data-theme="dark"] section.bg-\[\#efe9df\],
html.dark section.bg-\[\#efe9df\] {
  background-color: #0b1324 !important;
}

[data-theme="dark"] .bg-\[\#efe9df\]\/60,
html.dark .bg-\[\#efe9df\]\/60,
[data-theme="dark"] .bg-\[\#efe9df\]\/50,
html.dark .bg-\[\#efe9df\]\/50 {
  background-color: rgba(16, 28, 51, 0.85) !important;
}

[data-theme="dark"] .bg-\[\#f7f4ee\],
html.dark .bg-\[\#f7f4ee\] {
  background-color: #0b1324 !important;
}

[data-theme="dark"] .bg-\[\#dceae7\],
html.dark .bg-\[\#dceae7\] {
  background-color: #1e3a47 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .bg-white,
html.dark .bg-white,
[data-theme="dark"] .bg-white\/95,
html.dark .bg-white\/95,
[data-theme="dark"] .bg-white\/90,
html.dark .bg-white\/90,
[data-theme="dark"] .bg-white\/80,
html.dark .bg-white\/80,
[data-theme="dark"] .bg-white\/60,
html.dark .bg-white\/60 {
  background-color: #13233c !important;
  color: #f1f5f9 !important;
}

/* 4. Social Proof Toast Widget (#social-proof-toast) */
[data-theme="dark"] #social-proof-toast,
html.dark #social-proof-toast {
  background-color: #13233c !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] #social-proof-toast #toast-message,
html.dark #social-proof-toast #toast-message,
[data-theme="dark"] #social-proof-toast div,
html.dark #social-proof-toast div {
  color: #ffffff !important;
}

[data-theme="dark"] #social-proof-toast .text-\[\#c87343\],
html.dark #social-proof-toast .text-\[\#c87343\] {
  color: #e0834f !important;
}

[data-theme="dark"] #social-proof-toast .bg-\[\#2f7d78\]\/10,
html.dark #social-proof-toast .bg-\[\#2f7d78\]\/10 {
  background-color: rgba(47, 125, 120, 0.35) !important;
}

/* 5. Cookie Consent Banner (#cookie-banner) */
[data-theme="dark"] #cookie-banner,
html.dark #cookie-banner {
  background-color: #13233c !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

[data-theme="dark"] #cookie-banner *,
html.dark #cookie-banner * {
  color: #f1f5f9 !important;
}

/* 6. Form Fields & Inputs */
[data-theme="dark"] .field,
html.dark .field,
[data-theme="dark"] input[type="text"],
html.dark input[type="text"],
[data-theme="dark"] input[type="email"],
html.dark input[type="email"],
[data-theme="dark"] input[type="password"],
html.dark input[type="password"],
[data-theme="dark"] select,
html.dark select,
[data-theme="dark"] textarea,
html.dark textarea {
  background-color: #0f1c30 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .field::placeholder,
html.dark .field::placeholder {
  color: #64748b !important;
}

/* 7. Buttons & Borders */
[data-theme="dark"] .btn-outline,
html.dark .btn-outline {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .btn-outline:hover,
html.dark .btn-outline:hover {
  background-color: #2f7d78 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-light,
html.dark .btn-light {
  background-color: #1e3a47 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

[data-theme="dark"] .btn-primary,
html.dark .btn-primary {
  background-color: #3ab8af !important;
  color: #0b1324 !important;
}

[data-theme="dark"] .btn-primary:hover,
html.dark .btn-primary:hover {
  background-color: #2f7d78 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .border-\[\#10213d\]\/10,
html.dark .border-\[\#10213d\]\/10,
[data-theme="dark"] .border-\[\#10213d\]\/12,
html.dark .border-\[\#10213d\]\/12,
[data-theme="dark"] .border-\[\#10213d\]\/15,
html.dark .border-\[\#10213d\]\/15,
[data-theme="dark"] .border-\[\#10213d\]\/20,
html.dark .border-\[\#10213d\]\/20 {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* 8. Accordions & Tables */
[data-theme="dark"] details,
html.dark details {
  background-color: #13233c !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] details summary,
html.dark details summary {
  color: #ffffff !important;
}

[data-theme="dark"] .table-row,
html.dark .table-row {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

/* 9. Mobile Menu */
[data-theme="dark"] .mobile-menu,
html.dark .mobile-menu {
  background-color: #0b1324 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] .mobile-menu a,
html.dark .mobile-menu a {
  color: #f1f5f9 !important;
}

/* 10. Status Badges & Alerts */
[data-theme="dark"] .bg-emerald-50,
html.dark .bg-emerald-50 {
  background-color: rgba(6, 78, 59, 0.6) !important;
}
[data-theme="dark"] .text-emerald-700,
html.dark .text-emerald-700,
[data-theme="dark"] .text-emerald-600,
html.dark .text-emerald-600 {
  color: #34d399 !important;
}

[data-theme="dark"] .bg-rose-50,
html.dark .bg-rose-50 {
  background-color: rgba(136, 19, 55, 0.6) !important;
}
[data-theme="dark"] .text-rose-700,
html.dark .text-rose-700 {
  color: #fb7185 !important;
}

@media (max-width: 768px) {
  .shell { width: min(100% - 28px, 1180px); }
  .table-row { grid-template-columns: 1fr; }
  .headline { font-size: clamp(2.5rem, 13vw, 4rem); }
  .nav-links { display: none; }
  .mobile-menu.open { display: flex; }
  .orb { opacity: .55; }
}

@media (max-width: 520px) {
  header .btn-primary { display: none; }
  .brand.text-xl { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
  .marquee-track { animation: none; }
}

/* ==========================================
   SMOOTH SLIDE-DOWN MEGA-MENU DROPDOWNS
   ========================================== */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
  pointer-events: none;
}

.group:hover .dropdown-menu,
.group:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ----------------------------------------------------
   OS-INDEPENDENT LIGHT & DARK THEME OVERRIDES FOR DROPDOWNS
   Overriding Tailwind 4 @media (prefers-color-scheme: dark)
   ---------------------------------------------------- */

/* Force Pure White Glass in Light Mode (Regardless of macOS Dark Mode) */
html:not([data-theme="dark"]):not(.dark) .dropdown-menu > div,
html:not([data-theme="dark"]):not(.dark) .custom-select-panel,
[data-theme="light"] .dropdown-menu > div,
[data-theme="light"] .custom-select-panel {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #10213d !important;
  border: 1px solid rgba(16, 33, 61, 0.15) !important;
  box-shadow: 0 20px 60px rgba(16, 33, 61, 0.16) !important;
}

html:not([data-theme="dark"]):not(.dark) .dropdown-menu a,
[data-theme="light"] .dropdown-menu a {
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) .dropdown-menu a div:first-child,
[data-theme="light"] .dropdown-menu a div:first-child {
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) .dropdown-menu a div:last-child,
[data-theme="light"] .dropdown-menu a div:last-child {
  color: #637083 !important;
}

html:not([data-theme="dark"]):not(.dark) .dropdown-menu a:hover,
[data-theme="light"] .dropdown-menu a:hover,
html:not([data-theme="dark"]):not(.dark) .custom-select-option:hover,
[data-theme="light"] .custom-select-option:hover {
  background-color: #f7f4ee !important;
}

html:not([data-theme="dark"]):not(.dark) .custom-select-option,
[data-theme="light"] .custom-select-option {
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) .custom-select-option span,
[data-theme="light"] .custom-select-option span {
  color: #10213d !important;
}

/* Force Deep Navy Glass in Dark Mode */
html.dark .dropdown-menu > div,
html.dark .custom-select-panel,
[data-theme="dark"] .dropdown-menu > div,
[data-theme="dark"] .custom-select-panel {
  background-color: rgba(19, 35, 60, 0.96) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
}

html.dark .dropdown-menu a div:first-child,
[data-theme="dark"] .dropdown-menu a div:first-child {
  color: #ffffff !important;
}

html.dark .dropdown-menu a div:last-child,
[data-theme="dark"] .dropdown-menu a div:last-child {
  color: #94a3b8 !important;
}

html.dark .dropdown-menu a:hover,
[data-theme="dark"] .dropdown-menu a:hover,
html.dark .custom-select-option:hover,
[data-theme="dark"] .custom-select-option:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .custom-select-option,
[data-theme="dark"] .custom-select-option {
  color: #f1f5f9 !important;
}

html.dark .custom-select-option span,
[data-theme="dark"] .custom-select-option span {
  color: #f1f5f9 !important;
}

/* Styled Form Select Dropdowns */
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232f7d78'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
  cursor: pointer;
}

/* ==========================================
   AI CHAT WIDGET DUAL THEME STYLES
   ========================================== */

/* Light Mode Chat Drawer */
html:not([data-theme="dark"]):not(.dark) #ai-chat-modal,
[data-theme="light"] #ai-chat-modal {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(16, 33, 61, 0.15) !important;
  box-shadow: 0 20px 60px rgba(16, 33, 61, 0.22) !important;
  color: #10213d !important;
}

/* Light Mode Header */
html:not([data-theme="dark"]):not(.dark) #ai-chat-modal > div:first-child,
[data-theme="light"] #ai-chat-modal > div:first-child {
  background-color: #f7f4ee !important;
  border-bottom-color: rgba(16, 33, 61, 0.1) !important;
}

html:not([data-theme="dark"]):not(.dark) #ai-chat-modal h3,
[data-theme="light"] #ai-chat-modal h3 {
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) #ai-chat-modal p,
[data-theme="light"] #ai-chat-modal p {
  color: #637083 !important;
}

html:not([data-theme="dark"]):not(.dark) #ai-chat-close,
[data-theme="light"] #ai-chat-close {
  background-color: rgba(16, 33, 61, 0.08) !important;
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) #ai-chat-close:hover,
[data-theme="light"] #ai-chat-close:hover {
  background-color: rgba(16, 33, 61, 0.16) !important;
}

/* Light Mode Assistant Messages */
html:not([data-theme="dark"]):not(.dark) #ai-chat-messages .bg-white\/10,
[data-theme="light"] #ai-chat-messages .bg-white\/10,
html:not([data-theme="dark"]):not(.dark) .ai-answer-bubble,
[data-theme="light"] .ai-answer-bubble {
  background-color: #f7f4ee !important;
  border-color: rgba(16, 33, 61, 0.1) !important;
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-answer-bubble *,
[data-theme="light"] .ai-answer-bubble * {
  color: #10213d !important;
}

/* Dark Mode Assistant Messages */
html.dark .ai-answer-bubble,
html.dark .ai-answer-bubble *,
[data-theme="dark"] .ai-answer-bubble,
[data-theme="dark"] .ai-answer-bubble * {
  color: #ffffff !important;
}

/* Light Mode Quick Reply Buttons - High Contrast Deep Navy Text */
html:not([data-theme="dark"]):not(.dark) .ai-quick-btn,
[data-theme="light"] .ai-quick-btn {
  background-color: #f7f4ee !important;
  border-color: rgba(47, 125, 120, 0.35) !important;
  color: #10213d !important;
  font-weight: 800 !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-quick-btn:hover,
[data-theme="light"] .ai-quick-btn:hover {
  background-color: #2f7d78 !important;
  color: #ffffff !important;
  border-color: #2f7d78 !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-quick-btn svg,
[data-theme="light"] .ai-quick-btn svg {
  color: #2f7d78 !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-quick-btn:hover svg,
[data-theme="light"] .ai-quick-btn:hover svg {
  color: #ffffff !important;
}

/* Light Mode Footer & Input */
html:not([data-theme="dark"]):not(.dark) #ai-chat-modal > div:last-child,
[data-theme="light"] #ai-chat-modal > div:last-child {
  background-color: #f7f4ee !important;
  border-top-color: rgba(16, 33, 61, 0.1) !important;
}

html:not([data-theme="dark"]):not(.dark) #ai-chat-input,
[data-theme="light"] #ai-chat-input {
  background-color: #ffffff !important;
  border-color: rgba(16, 33, 61, 0.2) !important;
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) #ai-chat-input::placeholder,
[data-theme="light"] #ai-chat-input::placeholder {
  color: #637083 !important;
}

/* --- LIGHT MODE DYNAMIC DYNAMIC CHAT CAROUSEL OVERRIDES --- */
html:not([data-theme="dark"]):not(.dark) #ai-chat-messages .space-y-2 > div:first-child,
[data-theme="light"] #ai-chat-messages .space-y-2 > div:first-child {
  color: #2f7d78 !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-offer-card,
[data-theme="light"] .ai-offer-card {
  background-color: #ffffff !important;
  border-color: rgba(16, 33, 61, 0.15) !important;
  box-shadow: 0 4px 14px rgba(16, 33, 61, 0.08) !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-offer-card > div,
[data-theme="light"] .ai-offer-card > div {
  color: #10213d !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-offer-card > div:first-child,
[data-theme="light"] .ai-offer-card > div:first-child {
  color: #2f7d78 !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-offer-card > div:nth-child(3),
[data-theme="light"] .ai-offer-card > div:nth-child(3) {
  color: #637083 !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-offer-card a,
[data-theme="light"] .ai-offer-card a {
  background-color: #2f7d78 !important;
  color: #ffffff !important;
  border: none !important;
}

html:not([data-theme="dark"]):not(.dark) .ai-offer-card a:hover,
[data-theme="light"] .ai-offer-card a:hover {
  background-color: #25635f !important;
  color: #ffffff !important;
}

/* Dark Mode Overrides for Offer Cards */
html.dark .ai-offer-card,
[data-theme="dark"] .ai-offer-card {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .ai-offer-card > div,
[data-theme="dark"] .ai-offer-card > div {
  color: #ffffff !important;
}

html.dark .ai-offer-card > div:first-child,
[data-theme="dark"] .ai-offer-card > div:first-child {
  color: #8bc0b8 !important;
}

html.dark .ai-offer-card > div:nth-child(3),
[data-theme="dark"] .ai-offer-card > div:nth-child(3) {
  color: rgba(255, 255, 255, 0.7) !important;
}