/**
 * Global light/dark appearance — single photo background per theme
 * (replaces animated nebula + separate hero backgrounds)
 */

html:not([data-ttb-theme="light"]) .ttb-universe {
  background-color: oklch(0.08 0.03 265);
  background-image: url("/static/landing/hero-bg-dark.jpg");
  background-size: cover;
  background-position: 50% 22%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-ttb-theme="light"] .ttb-universe {
  background-color: oklch(0.97 0.012 92);
  background-image: url("/static/landing/hero-bg-light.jpg");
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-ttb-theme="light"] .ttb-universe::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    oklch(0.99 0.006 90 / 0.22) 0%,
    oklch(0.98 0.01 92 / 0.04) 42%,
    oklch(0.97 0.012 95 / 0.18) 100%
  );
}

/* Light mode palette (marketing mockup) */
html[data-ttb-theme="light"] {
  color-scheme: light;
  --ttb-void: oklch(0.97 0.012 92);
  --ttb-void-deep: oklch(0.96 0.014 95);
  --ttb-ink: oklch(0.22 0.05 265);
  --ttb-ink-muted: oklch(0.38 0.04 265);
  --ttb-ink-soft: oklch(0.5 0.03 265);
  --ttb-signal: oklch(0.72 0.11 195);
  --ttb-signal-deep: oklch(0.58 0.12 195);
  --ttb-signal-soft: oklch(0.93 0.04 195);
  --ttb-sky: oklch(0.98 0.01 90);
  --ttb-sky-deep: oklch(0.96 0.012 95);
  --ttb-cloud: oklch(0.97 0.01 92);
  --ttb-surface: oklch(0.99 0.006 90 / 0.78);
  --ttb-surface-raised: oklch(0.99 0.008 90 / 0.92);
  --ttb-surface-solid: oklch(0.99 0.008 90);
  --ttb-border: oklch(0.86 0.02 92 / 0.85);
  --ttb-border-strong: oklch(0.72 0.09 195 / 0.45);
  --ttb-border-glow: oklch(0.72 0.12 195 / 0.55);
  --ttb-glow-signal: 0 0 0 1px oklch(0.72 0.12 195 / 0.5),
    0 10px 32px oklch(0.58 0.11 195 / 0.22);
  --ttb-shadow-sm: 0 2px 14px oklch(0.35 0.04 265 / 0.08);
  --ttb-shadow-md: 0 8px 28px oklch(0.35 0.04 265 / 0.1);
  --ttb-shadow-lg: 0 18px 44px oklch(0.35 0.04 265 / 0.12);
  --ttb-chatbox-header: linear-gradient(
    180deg,
    oklch(0.99 0.006 90) 0%,
    oklch(0.96 0.012 92) 100%
  );
  --ttb-chatbox-accent-soft: oklch(0.93 0.05 25 / 0.55);
  --ttb-vocab-header: linear-gradient(
    180deg,
    oklch(0.99 0.006 90) 0%,
    oklch(0.96 0.012 92) 100%
  );
  --ttb-writer-header: linear-gradient(
    180deg,
    oklch(0.99 0.006 90) 0%,
    oklch(0.96 0.012 92) 100%
  );
  --ttb-curriculum-header: linear-gradient(
    180deg,
    oklch(0.99 0.006 90) 0%,
    oklch(0.96 0.012 92) 100%
  );
  --ttb-dashboard-header: linear-gradient(
    180deg,
    oklch(0.99 0.006 90) 0%,
    oklch(0.96 0.012 92) 100%
  );
}

html:not([data-ttb-theme="light"]) .ttb-universe__nebula,
html:not([data-ttb-theme="light"]) .ttb-universe__stars,
html:not([data-ttb-theme="light"]) .ttb-universe__stars--far,
html:not([data-ttb-theme="light"]) .ttb-universe__grid,
html:not([data-ttb-theme="light"]) .ttb-universe__scan,
html[data-ttb-theme="light"] .ttb-universe__nebula,
html[data-ttb-theme="light"] .ttb-universe__stars,
html[data-ttb-theme="light"] .ttb-universe__stars--far,
html[data-ttb-theme="light"] .ttb-universe__grid,
html[data-ttb-theme="light"] .ttb-universe__scan {
  display: none !important;
}

html:not([data-ttb-theme="light"]) body.ttb-app-body,
html:not([data-ttb-theme="light"]) body.ttb-landing,
html:not([data-ttb-theme="light"]) body.ttb-auth-page {
  background: transparent;
}

html[data-ttb-theme="light"] body.ttb-app-body,
html[data-ttb-theme="light"] body.ttb-landing,
html[data-ttb-theme="light"] body.ttb-auth-page {
  background: transparent;
}

/* App nav theme toggle */
.ttb-nav__actions .ttb-theme-toggle {
  margin-right: 0.15rem;
}

@media (max-width: 768px) {
  .ttb-nav__actions > .ttb-theme-toggle {
    display: none;
  }
}

.ttb-nav__drawer .ttb-nav-drawer-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0 0.85rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--ttb-border);
}

.ttb-nav-drawer-theme__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ttb-ink-muted);
}

/* Theme toggle control */
.ttb-theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 3.25rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ttb-radius-pill);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ttb-theme-toggle:focus-visible {
  outline: 2px solid var(--ttb-signal);
  outline-offset: 3px;
}

.ttb-theme-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: oklch(0.22 0.04 265);
  border: 1px solid var(--ttb-border-strong);
  transition: background var(--ttb-duration) var(--ttb-ease-out),
    border-color var(--ttb-duration) var(--ttb-ease-out);
}

.ttb-theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.35rem;
  height: calc(100% - 4px);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ttb-signal), var(--ttb-signal-deep));
  box-shadow: 0 2px 8px oklch(0.05 0.02 265 / 0.45);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-ttb-theme="light"] .ttb-theme-toggle__thumb {
  transform: translateX(1.45rem);
}

.ttb-theme-toggle__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.62rem;
  line-height: 1;
  color: var(--ttb-ink-soft);
  pointer-events: none;
  transition: color var(--ttb-duration) var(--ttb-ease-out),
    opacity var(--ttb-duration) var(--ttb-ease-out);
}

.ttb-theme-toggle__icon--sun {
  left: 0.45rem;
}

.ttb-theme-toggle__icon--moon {
  right: 0.42rem;
}

html[data-ttb-theme="dark"] .ttb-theme-toggle__icon--moon,
html:not([data-ttb-theme="light"]) .ttb-theme-toggle__icon--moon,
html[data-ttb-theme="light"] .ttb-theme-toggle__icon--sun {
  color: var(--ttb-signal);
  opacity: 1;
}

html[data-ttb-theme="dark"] .ttb-theme-toggle__icon--sun,
html:not([data-ttb-theme="light"]) .ttb-theme-toggle__icon--sun,
html[data-ttb-theme="light"] .ttb-theme-toggle__icon--moon {
  opacity: 0.45;
}

html[data-ttb-theme="light"] .ttb-theme-toggle__track {
  background: oklch(0.92 0.02 90);
  border-color: oklch(0.82 0.03 90);
}

.mobile-menu-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ttb-border);
}

.mobile-menu-theme__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ttb-ink-muted);
}

.ttb-theme-toggle--menu {
  margin-left: auto;
}

/* Landing: let global photo show through content bands */
html:not([data-ttb-theme="light"]) body.ttb-landing .section {
  background: oklch(0.12 0.04 265 / 0.78) !important;
  backdrop-filter: blur(10px);
}

html:not([data-ttb-theme="light"]) body.ttb-landing footer {
  background: oklch(0.1 0.035 265 / 0.85) !important;
  backdrop-filter: blur(10px);
}

.ttb-auth-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  pointer-events: none;
}

.ttb-auth-topbar .ttb-auth-back,
.ttb-auth-topbar .ttb-theme-toggle {
  pointer-events: auto;
}

body.ttb-auth-page .ttb-auth-back {
  position: static;
}

/* ——— App shell (all pages via base.html) ——— */
html[data-ttb-theme="light"] body.ttb-app-body {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] .ttb-nav {
  background: oklch(0.99 0.006 90 / 0.72);
  border-bottom-color: oklch(0.88 0.02 92 / 0.75);
  box-shadow: 0 4px 24px oklch(0.4 0.04 265 / 0.06);
  backdrop-filter: blur(16px);
}

html[data-ttb-theme="light"] .ttb-nav__title {
  color: var(--ttb-signal-deep);
  font-weight: 600;
}

html[data-ttb-theme="light"] .ttb-nav__tagline {
  color: var(--ttb-ink-soft);
  font-weight: 500;
}

html[data-ttb-theme="light"] .ttb-nav__link {
  color: var(--ttb-ink-muted);
  font-weight: 500;
}

html[data-ttb-theme="light"] .ttb-nav__link:hover {
  color: var(--ttb-signal-deep);
  background: oklch(0.93 0.04 195 / 0.38);
  border-color: oklch(0.72 0.12 195 / 0.22);
  box-shadow: none;
}

html[data-ttb-theme="light"] .ttb-btn--ghost {
  color: var(--ttb-ink);
  border-color: transparent;
  background: transparent;
}

html[data-ttb-theme="light"] .ttb-btn--primary {
  background: var(--ttb-surface-solid);
  color: var(--ttb-ink);
  border: 2px solid var(--ttb-signal);
  box-shadow: var(--ttb-glow-signal);
}

html[data-ttb-theme="light"] .ttb-nav__drawer {
  background: oklch(0.99 0.006 90 / 0.96);
  border-bottom-color: var(--ttb-border);
}

/* ——— Auth pages ——— */
html[data-ttb-theme="light"] body.ttb-auth-page {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-back {
  background: oklch(0.99 0.006 90 / 0.85);
  color: var(--ttb-ink-muted);
  border-color: var(--ttb-border);
}

html[data-ttb-theme="light"] body.ttb-auth-page .auth-card,
html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-panel:not(.ttb-onboard-welcome) {
  background: oklch(0.99 0.006 90 / 0.88);
  backdrop-filter: blur(14px);
  border-color: var(--ttb-border);
  box-shadow: var(--ttb-shadow-md);
}

html[data-ttb-theme="light"] body.ttb-auth-page .ttb-onboard-grid {
  background: oklch(0.99 0.006 90 / 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid var(--ttb-border);
  box-shadow: var(--ttb-shadow-md);
}

html[data-ttb-theme="light"] body.ttb-auth-page .auth-title {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] body.ttb-auth-page .auth-subtitle,
html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-section-label,
html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-hint,
html[data-ttb-theme="light"] body.ttb-auth-page .auth-link {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-input,
html[data-ttb-theme="light"] body.ttb-auth-page input[type="email"],
html[data-ttb-theme="light"] body.ttb-auth-page input[type="password"],
html[data-ttb-theme="light"] body.ttb-auth-page input[type="text"] {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-input::placeholder,
html[data-ttb-theme="light"] body.ttb-auth-page input::placeholder {
  color: var(--ttb-ink-soft) !important;
}

html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-icon-btn {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-icon-btn:hover {
  background: oklch(0.93 0.04 195 / 0.45);
  color: var(--ttb-signal-deep);
}

html[data-ttb-theme="light"] body.ttb-auth-page .social-btn,
html[data-ttb-theme="light"] body.ttb-auth-page #email-login-btn {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-auth-page .social-btn:hover:not(:disabled),
html[data-ttb-theme="light"] body.ttb-auth-page #email-login-btn:hover:not(:disabled) {
  background: oklch(0.96 0.014 92) !important;
  border-color: var(--ttb-signal) !important;
  color: var(--ttb-signal-deep) !important;
}

html[data-ttb-theme="light"] body.ttb-auth-page .security-notice {
  background: oklch(0.96 0.014 92) !important;
  border-color: var(--ttb-border) !important;
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-auth-page .flash-message.success {
  background: oklch(0.94 0.06 145 / 0.7);
  color: oklch(0.32 0.12 145);
  border-color: oklch(0.62 0.14 145 / 0.55);
}

html[data-ttb-theme="light"] body.ttb-auth-page .flash-message.error {
  background: oklch(0.93 0.05 25 / 0.6);
  color: oklch(0.4 0.16 25);
  border-color: oklch(0.62 0.18 25 / 0.55);
}

html[data-ttb-theme="light"] body.ttb-auth-page .ttb-auth-divider {
  color: var(--ttb-ink-soft);
}

/* ——— Landing page ——— */
html[data-ttb-theme="light"] body.ttb-landing {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] body.ttb-landing .landing-nav {
  background: oklch(0.99 0.006 90 / 0.72) !important;
  border-bottom-color: oklch(0.88 0.02 92 / 0.7) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}

html[data-ttb-theme="light"] body.ttb-landing .landing-nav.is-scrolled {
  background: oklch(0.99 0.006 90 / 0.92) !important;
  box-shadow: 0 4px 24px oklch(0.4 0.04 265 / 0.08) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .nav-brand,
html[data-ttb-theme="light"] body.ttb-landing .nav-brand div:first-child {
  color: var(--ttb-signal) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .nav-tagline {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .nav-beta-label {
  background: oklch(0.99 0.008 90 / 0.95) !important;
  color: var(--ttb-signal-deep) !important;
  border: 1px solid oklch(0.72 0.12 195 / 0.42) !important;
  box-shadow: var(--ttb-shadow-sm) !important;
  font-weight: 600 !important;
}

html[data-ttb-theme="light"] body.ttb-landing .nav-links a {
  color: var(--ttb-ink-muted) !important;
  font-weight: 500 !important;
}

html[data-ttb-theme="light"] body.ttb-landing .nav-links a:hover {
  color: var(--ttb-signal-deep) !important;
  background: oklch(0.93 0.04 195 / 0.35) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .nav-btn-secondary {
  color: var(--ttb-ink) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-ttb-theme="light"] body.ttb-landing .nav-btn-primary {
  background: var(--ttb-surface-solid) !important;
  color: var(--ttb-ink) !important;
  border: 2px solid var(--ttb-signal) !important;
  box-shadow: var(--ttb-glow-signal) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .hero-title-main {
  color: var(--ttb-ink) !important;
  text-shadow: none !important;
}

html[data-ttb-theme="light"] body.ttb-landing .hero-title-sub {
  color: var(--ttb-signal) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .hero-description,
html[data-ttb-theme="light"] body.ttb-landing .hero-feature {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .hero-feature i {
  color: var(--ttb-signal) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .beta-badge-top {
  background: oklch(0.99 0.008 90 / 0.92) !important;
  color: var(--ttb-signal-deep) !important;
  border: 1px solid oklch(0.72 0.12 195 / 0.35) !important;
  box-shadow: var(--ttb-shadow-sm) !important;
  font-weight: 600 !important;
}

html[data-ttb-theme="light"] body.ttb-landing .cta-primary {
  background: var(--ttb-surface-solid) !important;
  color: var(--ttb-ink) !important;
  border: 2px solid var(--ttb-signal) !important;
  box-shadow: var(--ttb-glow-signal) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .cta-secondary {
  background: oklch(0.99 0.006 90 / 0.55) !important;
  color: var(--ttb-ink) !important;
  border: 1px solid oklch(0.82 0.02 92) !important;
  box-shadow: none !important;
}

/* Match dark scroll layering: fixed hero photo shows through bands while scrolling */
html[data-ttb-theme="light"] body.ttb-landing .section {
  background: oklch(0.99 0.006 90 / 0.52) !important;
  backdrop-filter: blur(12px);
}

html[data-ttb-theme="light"] body.ttb-landing .section[style*="background"] {
  background: oklch(0.99 0.006 90 / 0.52) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .section-title {
  color: var(--ttb-ink) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .section-subtitle,
html[data-ttb-theme="light"] body.ttb-landing .section h3,
html[data-ttb-theme="light"] body.ttb-landing .section ul li,
html[data-ttb-theme="light"] body.ttb-landing .section p {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .section div[style*="background: white"],
html[data-ttb-theme="light"] body.ttb-landing .section div[style*="background: #fff"] {
  background: oklch(0.99 0.006 90 / 0.94) !important;
  border: 1px solid var(--ttb-border) !important;
  box-shadow: var(--ttb-shadow-sm) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .section div[style*="background: white"] > h3,
html[data-ttb-theme="light"] body.ttb-landing .section div[style*="background: #fff"] > h3 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ttb-ink) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .section div[style*="background: white"] > p,
html[data-ttb-theme="light"] body.ttb-landing .section div[style*="background: #fff"] > p {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .section-title {
  background: none !important;
  -webkit-text-fill-color: var(--ttb-ink) !important;
  background-clip: border-box !important;
}

html[data-ttb-theme="light"] body.ttb-landing footer {
  background: oklch(0.98 0.01 92 / 0.82) !important;
  backdrop-filter: blur(12px);
  border-top-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-landing footer h4 {
  color: var(--ttb-signal-deep) !important;
}

html[data-ttb-theme="light"] body.ttb-landing footer a {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-landing .mobile-menu {
  background: oklch(0.99 0.006 90 / 0.96) !important;
  backdrop-filter: blur(16px);
}

html[data-ttb-theme="light"] body.ttb-landing .mobile-menu a {
  color: var(--ttb-ink) !important;
}

html[data-ttb-theme="light"] .ttb-theme-toggle__thumb {
  background: linear-gradient(180deg, var(--ttb-signal), var(--ttb-signal-deep));
}

html[data-ttb-theme="light"] .ttb-theme-toggle:focus-visible {
  outline-color: var(--ttb-signal);
}

/* ======================================================================
   LIGHT MODE — App shell (home, mood, cards, fun-facts, social, popup,
   nav user controls, tutor widget). Loaded after ttb-shell.css and
   ttb-home.css; uses higher-specificity selectors plus !important where
   the source rules also use !important (notably .ttb-home-student
   .apps-grid .app-card and the tutor-widget overrides).
   ====================================================================== */

/* —— Nav user controls + dropdown + mobile drawer —— */
html[data-ttb-theme="light"] .ttb-nav__user-btn {
  background: oklch(0.99 0.006 90 / 0.85);
  color: var(--ttb-ink);
  border-color: var(--ttb-border);
}

html[data-ttb-theme="light"] .ttb-nav__user-btn:hover {
  border-color: var(--ttb-signal);
  box-shadow: var(--ttb-glow-signal);
}

html[data-ttb-theme="light"] .ttb-nav__username {
  color: var(--ttb-signal-deep);
}

html[data-ttb-theme="light"] .ttb-nav__avatar {
  border-color: var(--ttb-border);
}

html[data-ttb-theme="light"] .ttb-nav__menu-btn {
  background: oklch(0.99 0.006 90 / 0.85);
  color: var(--ttb-ink);
  border-color: var(--ttb-border);
}

html[data-ttb-theme="light"] .ttb-dropdown {
  background: oklch(0.99 0.006 90 / 0.98);
  border-color: var(--ttb-border);
  box-shadow: var(--ttb-shadow-md);
}

html[data-ttb-theme="light"] .ttb-dropdown a {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] .ttb-dropdown a:hover {
  background: oklch(0.95 0.012 92);
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] .ttb-nav__drawer {
  background: oklch(0.99 0.006 90 / 0.96);
  border-bottom: 1px solid var(--ttb-border);
}

html[data-ttb-theme="light"] .ttb-nav__drawer .ttb-nav__link {
  color: var(--ttb-ink-muted);
  font-weight: 500;
}

html[data-ttb-theme="light"] .ttb-nav__drawer .ttb-nav__link:hover {
  background: oklch(0.93 0.04 195 / 0.4);
  border-color: var(--ttb-border);
  color: var(--ttb-signal-deep);
}

/* —— Home: command header & sections —— */
html[data-ttb-theme="light"] body.ttb-app-body .header-wrapper,
html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-command,
html[data-ttb-theme="light"] body.ttb-app-body .hero-section,
html[data-ttb-theme="light"] body.ttb-app-body .fun-facts {
  background: oklch(0.99 0.006 90 / 0.92);
  border-color: var(--ttb-border);
  box-shadow: var(--ttb-shadow-sm);
}

html[data-ttb-theme="light"] body.ttb-app-body .ai-title,
html[data-ttb-theme="light"] body.ttb-app-body .title-separator {
  color: var(--ttb-signal-deep);
}

html[data-ttb-theme="light"] body.ttb-app-body .subtitle,
html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-command__tagline .subtitle {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] body.ttb-app-body .hero-title {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] body.ttb-app-body .hero-subtitle {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] body.ttb-app-body .bot-strip__item {
  filter: drop-shadow(0 4px 12px oklch(0.45 0.08 265 / 0.18));
}

/* —— Home: mood selector (Happy / Frustrated / Smart) —— */
html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-mood .mood-question,
html[data-ttb-theme="light"] body.ttb-app-body .mood-question {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-btn,
html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-mood .mood-btn,
html[data-ttb-theme="light"] body.ttb-app-body .hero-section--compact .mood-btn {
  background: oklch(0.99 0.008 90 / 0.92);
  border-color: var(--ttb-border);
  color: var(--ttb-ink);
  box-shadow: var(--ttb-shadow-sm);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-text {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-btn:hover {
  border-color: var(--ttb-signal);
  background: oklch(0.99 0.006 90);
  box-shadow: 0 0 16px oklch(0.58 0.12 195 / 0.18);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-btn.selected {
  background: oklch(0.93 0.04 195 / 0.7);
  border-color: var(--ttb-signal);
  box-shadow: 0 0 18px oklch(0.58 0.12 195 / 0.25);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-btn.selected .mood-text {
  color: var(--ttb-signal-deep);
}

/* —— Home: app feature cards (ThatChatBox, ThatVocab, ThatWriter, …) —— */
html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-student .apps-grid .app-card {
  background: oklch(0.99 0.008 90 / 0.94) !important;
  border-color: var(--ttb-border);
  box-shadow: var(--ttb-shadow-sm);
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-student .apps-grid .app-card:hover {
  background: oklch(0.99 0.008 90) !important;
  border-color: var(--ttb-card-accent, var(--ttb-signal));
  box-shadow: var(--ttb-shadow-md);
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-student .app-card .card-content h3 {
  color: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal-deep)) 55%, var(--ttb-ink) 45%) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-student .app-card .card-content p {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .app-card__port i {
  color: var(--ttb-ink-muted);
  filter: drop-shadow(0 0 8px oklch(0.72 0.12 195 / 0.25));
}

html[data-ttb-theme="light"] body.ttb-app-body .app-card__port::before {
  opacity: 0.32;
  filter: blur(18px);
}

html[data-ttb-theme="light"] body.ttb-app-body .app-card .card-arrow {
  background: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal)) 14%, oklch(0.99 0.008 90 / 0.92) 86%);
  border-color: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal)) 38%, var(--ttb-border) 62%);
  color: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal)) 52%, var(--ttb-ink) 48%);
}

html[data-ttb-theme="light"] body.ttb-app-body .app-card:hover .card-arrow {
  background: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal)) 22%, oklch(0.99 0.008 90 / 0.95) 78%);
  border-color: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal)) 50%, var(--ttb-border) 50%);
}

html[data-ttb-theme="light"] body.ttb-app-body .feature {
  background: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal)) 12%, oklch(0.99 0.006 90 / 0.85) 88%);
  border-color: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal)) 30%, var(--ttb-border) 70%);
  color: color-mix(in oklch, var(--ttb-card-accent, var(--ttb-signal-deep)) 36%, var(--ttb-ink) 64%);
}

html[data-ttb-theme="light"] body.ttb-app-body .featured-badge {
  background: oklch(0.93 0.07 88);
  color: oklch(0.42 0.13 78);
  border: 1px solid oklch(0.72 0.14 88 / 0.55);
}

html[data-ttb-theme="light"] body.ttb-app-body .coming-soon-badge {
  background: oklch(0.95 0.012 92);
  color: var(--ttb-ink-muted);
  border: 1px solid var(--ttb-border);
}

html[data-ttb-theme="light"] body.ttb-app-body .app-card.disabled {
  opacity: 0.78;
}

/* —— Home: fun-facts grid + social bar —— */
html[data-ttb-theme="light"] body.ttb-app-body .fun-facts h3 {
  color: var(--ttb-ink);
}

html[data-ttb-theme="light"] body.ttb-app-body .fact {
  background: oklch(0.99 0.008 90 / 0.92);
  border-color: var(--ttb-border);
  box-shadow: var(--ttb-shadow-sm);
}

html[data-ttb-theme="light"] body.ttb-app-body .fact i {
  color: var(--ttb-signal-deep);
}

html[data-ttb-theme="light"] body.ttb-app-body .fact p {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-social {
  background: oklch(0.99 0.008 90 / 0.9);
  border-color: var(--ttb-border);
  box-shadow: var(--ttb-shadow-sm);
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-social__label {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-social__link {
  background: oklch(0.99 0.008 90 / 0.92);
  border-color: var(--ttb-border);
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-home-social__link:hover {
  color: var(--ttb-signal-deep);
  border-color: var(--ttb-signal);
  box-shadow: 0 0 14px oklch(0.58 0.12 195 / 0.22);
}

/* —— Home: parent dashboard student selector —— */
html[data-ttb-theme="light"] body.ttb-app-body .student-selector-wrapper select {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-signal) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .student-selector-wrapper label {
  color: var(--ttb-ink) !important;
}

/* —— Home: mood popup (overrides hero-gradient + dark navy hardcodes) —— */
html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-overlay {
  background: oklch(0.85 0.012 90 / 0.55);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup {
  background: linear-gradient(
    135deg,
    oklch(0.99 0.006 90) 0%,
    oklch(0.96 0.014 95) 100%
  );
  border: 1px solid var(--ttb-border);
  box-shadow: var(--ttb-shadow-lg);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup::before {
  background: oklch(0.96 0.015 265 / 0.04);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-title,
html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-message,
html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-loading {
  color: var(--ttb-ink);
  text-shadow: none;
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-close {
  background: oklch(0.93 0.014 92);
  color: var(--ttb-ink-muted);
  border: 1px solid var(--ttb-border);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-close:hover {
  background: oklch(0.88 0.018 92);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-btn.primary {
  background: var(--ttb-signal);
  color: oklch(0.18 0.05 265);
  border-color: var(--ttb-border-glow);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-btn.primary:hover {
  background: color-mix(in oklch, var(--ttb-signal) 68%, var(--ttb-signal-deep) 32%);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-btn.secondary {
  background: oklch(0.95 0.012 92);
  color: var(--ttb-ink);
  border: 2px solid var(--ttb-border);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-btn.secondary:hover {
  background: oklch(0.92 0.016 92);
}

html[data-ttb-theme="light"] body.ttb-app-body .loading-spinner {
  border-color: oklch(0.45 0.04 265 / 0.18);
  border-top-color: var(--ttb-signal-deep);
}

html[data-ttb-theme="light"] body.ttb-app-body .mood-popup-error {
  background: oklch(0.93 0.05 25 / 0.45);
  color: oklch(0.42 0.16 25);
  border-color: oklch(0.62 0.16 25 / 0.45);
}

/* —— Flash banners on app pages —— */
html[data-ttb-theme="light"] body.ttb-app-body .ttb-flash--success {
  background: oklch(0.94 0.06 145 / 0.7);
  color: oklch(0.32 0.12 145);
  border-color: oklch(0.62 0.14 145 / 0.55);
}

html[data-ttb-theme="light"] body.ttb-app-body .ttb-flash--error {
  background: oklch(0.93 0.05 25 / 0.6);
  color: oklch(0.4 0.16 25);
  border-color: oklch(0.62 0.18 25 / 0.55);
}

/* ======================================================================
   LIGHT MODE — Tutor widget (Ask Companion). The source widget CSS
   uses many oklch(0.x 0.04 265) dark navy fills with !important; we
   defeat those via [data-ttb-theme="light"] + matching specificity +
   !important. We also retarget the widget's CSS variables to light
   tokens so anything that respects them flips automatically.
   ====================================================================== */
html[data-ttb-theme="light"] .tutor-widget {
  --tutor-primary: var(--ttb-signal-deep);
  --tutor-primary-light: var(--ttb-signal);
  --tutor-secondary: var(--ttb-signal-deep);
  --tutor-bg: oklch(0.99 0.008 90);
  --tutor-bg-chat: oklch(0.97 0.012 92);
  --tutor-text: var(--ttb-ink);
  --tutor-text-muted: var(--ttb-ink-muted);
}

/* Embedded shell (home page) + floating shell */
html[data-ttb-theme="light"] .tutor-widget-window-frame,
html[data-ttb-theme="light"] .tutor-widget-window-frame--embedded {
  background: oklch(0.99 0.008 90 / 0.98) !important;
  border-color: var(--ttb-border) !important;
  box-shadow: var(--ttb-shadow-md), 0 0 18px oklch(0.72 0.12 195 / 0.18) !important;
}

html[data-ttb-theme="light"] .tutor-widget-titlebar {
  background: linear-gradient(
    180deg,
    oklch(0.97 0.012 92) 0%,
    oklch(0.94 0.016 92) 100%
  ) !important;
  border-bottom-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget-titlebar__label {
  color: var(--ttb-signal-deep) !important;
  font-weight: 500 !important;
}

html[data-ttb-theme="light"] .tutor-widget-titlebar__btn {
  background: oklch(0.99 0.006 90 / 0.85) !important;
  color: var(--ttb-ink-muted) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget-titlebar__btn:hover {
  border-color: var(--ttb-signal) !important;
  color: var(--ttb-signal-deep) !important;
}

html[data-ttb-theme="light"] .tutor-widget-titlebar__btn--expand {
  color: var(--ttb-signal-deep);
  border-color: oklch(0.72 0.12 195 / 0.45);
}

/* Chat window + message stream */
html[data-ttb-theme="light"] .tutor-widget .tutor-chat-window {
  background: var(--tutor-bg) !important;
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-messages {
  background: var(--tutor-bg-chat) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-messages::-webkit-scrollbar-thumb {
  background: oklch(0.78 0.02 92);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-bubble--bot {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
  box-shadow: var(--ttb-shadow-sm) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-bubble--user {
  background: oklch(0.93 0.04 195 / 0.7) !important;
  color: var(--ttb-ink) !important;
  border-color: oklch(0.72 0.12 195 / 0.55) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-bubble-time,
html[data-ttb-theme="light"] .tutor-widget .tutor-bubble--user .tutor-bubble-time {
  color: var(--ttb-ink-soft) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-bubble-avatar {
  background: oklch(0.95 0.012 92) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-bubble-mark {
  background: var(--ttb-signal);
  box-shadow: 0 0 8px oklch(0.72 0.12 195 / 0.5);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-doc-badge {
  background: oklch(0.97 0.012 92) !important;
  border-color: var(--ttb-border) !important;
  color: var(--ttb-signal-deep) !important;
}

/* Empty state */
html[data-ttb-theme="light"] .tutor-widget .tutor-empty-title {
  color: var(--ttb-signal-deep) !important;
  font-weight: 500 !important;
  font-family: var(--ttb-font-body) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-empty-subtitle {
  color: var(--ttb-ink-muted) !important;
}

/* Suggestion chips */
html[data-ttb-theme="light"] .tutor-widget .tutor-suggestions {
  background: oklch(0.97 0.012 92 / 0.92) !important;
  border-top-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-chip {
  background: oklch(0.99 0.006 90 / 0.95) !important;
  color: var(--ttb-ink-muted) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-chip:hover {
  background: oklch(0.93 0.04 195 / 0.5) !important;
  color: var(--ttb-signal-deep) !important;
  border-color: oklch(0.72 0.12 195 / 0.45) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-stat-chip {
  background: oklch(0.99 0.006 90 / 0.92);
  border-color: var(--ttb-border);
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-stat-chip:hover {
  border-color: var(--ttb-signal);
  color: var(--ttb-signal-deep);
}

/* Action cards (open Vocab / Curriculum suggestions) */
html[data-ttb-theme="light"] .tutor-widget .tutor-action-card {
  background: oklch(0.99 0.008 90 / 0.95);
  border-color: var(--ttb-border);
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-action-card__title {
  color: var(--ttb-ink) !important;
  font-weight: 500 !important;
  font-family: var(--ttb-font-body) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-action-card__desc {
  color: var(--ttb-ink-muted);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-action-card__go {
  background: oklch(0.93 0.04 195 / 0.6);
  border-color: oklch(0.72 0.12 195 / 0.45);
  color: var(--ttb-signal-deep);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-action-card__go:hover {
  background: oklch(0.85 0.07 195 / 0.7);
  border-color: var(--ttb-signal);
  color: oklch(0.32 0.14 195);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-action-card__dismiss {
  color: var(--ttb-ink-soft);
}

html[data-ttb-theme="light"] .tutor-widget .tutor-action-card__dismiss:hover {
  color: var(--ttb-ink);
  background: oklch(0.93 0.014 92);
}

/* Input bar */
html[data-ttb-theme="light"] .tutor-widget .tutor-input-bar {
  background: oklch(0.97 0.012 92) !important;
  border-top-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-input-field {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-input-field::placeholder {
  color: var(--ttb-ink-soft) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-input-field:focus {
  border-color: var(--ttb-signal) !important;
  box-shadow: 0 0 0 3px oklch(0.72 0.12 195 / 0.22) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-input-upload-btn,
html[data-ttb-theme="light"] .tutor-widget .tutor-attach-btn {
  background: oklch(0.99 0.006 90 / 0.95) !important;
  color: var(--ttb-ink-muted) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-input-upload-btn:hover {
  color: var(--ttb-signal-deep) !important;
  background: oklch(0.93 0.04 195 / 0.45) !important;
  border-color: oklch(0.72 0.12 195 / 0.45) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-send-btn {
  background: oklch(0.85 0.08 195 / 0.65) !important;
  border-color: oklch(0.62 0.12 195 / 0.55) !important;
  color: oklch(0.22 0.05 265) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-send-btn:hover {
  background: oklch(0.78 0.1 195 / 0.85) !important;
}

/* Mic button */
html[data-ttb-theme="light"] .tutor-widget .tutor-mic-btn {
  background: oklch(0.93 0.06 25 / 0.55) !important;
  border-color: oklch(0.62 0.18 25 / 0.45) !important;
  color: oklch(0.42 0.16 25) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-mic-btn:hover {
  background: oklch(0.88 0.08 25 / 0.7) !important;
  border-color: oklch(0.55 0.2 25 / 0.55) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-mic-btn--ready {
  background: linear-gradient(
    180deg,
    var(--ttb-signal),
    var(--ttb-signal-deep)
  ) !important;
  border-color: oklch(0.62 0.12 195 / 0.6) !important;
  color: oklch(0.18 0.04 265) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-mic-btn--recording {
  background: oklch(0.62 0.18 25 / 0.85) !important;
  border-color: oklch(0.55 0.2 25 / 0.7) !important;
  color: oklch(0.99 0.012 25) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-mic-btn__timer {
  color: oklch(0.45 0.16 25) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-mic-btn--recording .tutor-mic-btn__timer {
  color: oklch(0.99 0.01 25) !important;
}

/* Voice error pill */
html[data-ttb-theme="light"] .tutor-widget .tutor-voice-error {
  background: oklch(0.93 0.05 25 / 0.55) !important;
  color: oklch(0.42 0.16 25) !important;
  border-color: oklch(0.62 0.16 25 / 0.5) !important;
}

/* Speaking indicator */
html[data-ttb-theme="light"] .tutor-widget .tutor-speaking-text {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] .tutor-widget .tutor-speaking-bar {
  background: var(--ttb-signal-deep) !important;
}

/* Floating launcher pill + settings panel */
html[data-ttb-theme="light"] .tutor-widget-pill {
  background: oklch(0.99 0.006 90 / 0.95) !important;
  color: var(--ttb-signal-deep) !important;
  border-color: var(--ttb-border) !important;
  box-shadow: var(--ttb-shadow-md), 0 0 16px oklch(0.72 0.12 195 / 0.22) !important;
}

html[data-ttb-theme="light"] .tutor-widget-pill:hover {
  background: oklch(0.93 0.04 195 / 0.55) !important;
  border-color: var(--ttb-signal) !important;
  box-shadow: var(--ttb-shadow-lg), var(--ttb-glow-signal) !important;
}

html[data-ttb-theme="light"] .tutor-widget-settings {
  background: oklch(0.99 0.006 90 / 0.98) !important;
  border-color: var(--ttb-border) !important;
  box-shadow: var(--ttb-shadow-md) !important;
}

html[data-ttb-theme="light"] .tutor-widget-settings label {
  color: var(--ttb-ink-soft) !important;
}

html[data-ttb-theme="light"] .tutor-widget-settings input[type="text"],
html[data-ttb-theme="light"] .tutor-widget-settings select {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] .tutor-widget-settings input:focus,
html[data-ttb-theme="light"] .tutor-widget-settings select:focus {
  border-color: var(--ttb-signal) !important;
}

/* ======================================================================
   LIGHT MODE — ThatChatBox (chatbox-space.css loads after ttb-theme)
   ====================================================================== */
html[data-ttb-theme="light"] body.ttb-app-body .chatbox-container {
  background: oklch(0.99 0.008 90 / 0.96) !important;
  border-color: var(--ttb-border) !important;
  box-shadow: var(--ttb-shadow-md) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-header {
  background: var(--ttb-chatbox-header) !important;
  border-bottom-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-title {
  color: var(--ttb-signal-deep) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-subtitle {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-btn {
  background: oklch(0.99 0.006 90 / 0.92) !important;
  color: var(--ttb-ink-muted) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-btn:hover {
  color: var(--ttb-signal-deep) !important;
  border-color: var(--ttb-signal) !important;
  box-shadow: 0 0 12px oklch(0.72 0.12 195 / 0.2) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-btn.end-conversation,
html[data-ttb-theme="light"] body.ttb-app-body .chatbox-btn.end-session {
  background: oklch(0.93 0.05 25 / 0.55) !important;
  border-color: oklch(0.62 0.18 25 / 0.45) !important;
  color: oklch(0.42 0.16 25) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-main {
  background: oklch(0.97 0.012 92) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .bot-message .message-content {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .user-message .message-content {
  background: oklch(0.93 0.04 195 / 0.65) !important;
  color: var(--ttb-ink) !important;
  border-color: oklch(0.72 0.12 195 / 0.45) !important;
  box-shadow: var(--ttb-shadow-sm) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chat-input-section {
  background: oklch(0.98 0.01 92) !important;
  border-top-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .user-input {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .user-input::placeholder {
  color: var(--ttb-ink-soft) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .chatbox-input-reminder {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .action-btn.upload {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-signal-deep) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .action-btn.upload:hover {
  background: oklch(0.93 0.04 195 / 0.45) !important;
  border-color: var(--ttb-signal) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .route-button {
  background: oklch(0.99 0.008 90 / 0.95) !important;
  border-color: var(--ttb-border) !important;
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .route-button:hover {
  border-color: var(--ttb-signal) !important;
  color: var(--ttb-signal-deep) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .route-button-content h4 {
  color: var(--ttb-ink) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .route-selection-footer p {
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .message-section {
  background: oklch(0.99 0.006 90 / 0.88) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .section-title,
html[data-ttb-theme="light"] body.ttb-app-body .section-content {
  color: var(--ttb-ink) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .session-options,
html[data-ttb-theme="light"] body.ttb-app-body .compact-topic,
html[data-ttb-theme="light"] body.ttb-app-body .compact-encouragement,
html[data-ttb-theme="light"] body.ttb-app-body .file-preview-item {
  background: oklch(0.99 0.006 90) !important;
  border-color: var(--ttb-border) !important;
  color: var(--ttb-ink-muted) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .message-btn.secondary {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-signal-deep) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .modal-overlay {
  background: oklch(0.85 0.012 90 / 0.55) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .feedback-modal {
  background: oklch(0.99 0.006 90 / 0.98) !important;
  border-color: var(--ttb-border) !important;
  color: var(--ttb-ink) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .persona-modal-fields select,
html[data-ttb-theme="light"] body.ttb-app-body .persona-modal-fields textarea,
html[data-ttb-theme="light"] body.ttb-app-body .feedback-textarea {
  background: oklch(0.99 0.006 90) !important;
  color: var(--ttb-ink) !important;
  border-color: var(--ttb-border) !important;
}

html[data-ttb-theme="light"] body.ttb-app-body .modal-btn.secondary {
  background: oklch(0.96 0.014 92) !important;
  color: var(--ttb-ink-muted) !important;
  border-color: var(--ttb-border) !important;
}