/* Bloom color system — shared with homepage (home2) */

:root {
  --bloom-bg: #0a0a0f;
  --bloom-surface: #15151e;
  --bloom-surface-raised: #1a1a24;
  --bloom-purple: #a480ae;
  --bloom-purple-hover: #927599;
  --bloom-purple-light: #b995c2;
  --bloom-purple-dark: #876d90;
  --bloom-glow: #a585af;
  --bloom-text: #ffffff;
  --bloom-muted: #a1a1aa;
  --bloom-border: rgba(255, 255, 255, 0.12);
  --bloom-border-strong: #2a2a3a;
}

/* App shell — light mode brand (canvas stays light; accents match homepage) */
:root {
  --coral: var(--bloom-purple);
  --brand: var(--bloom-purple);
  --accent: var(--bloom-purple);
  --accent-hover: var(--bloom-purple-hover);
  --send-peach: var(--bloom-purple);
  --send-peach-hover: var(--bloom-purple-hover);
  --link-external: var(--bloom-purple-hover);
  --link-external-hover: var(--bloom-purple-dark);
  --lab-send-bg: color-mix(in srgb, var(--bloom-purple) 10%, #ffffff);
  --lab-send-border: color-mix(in srgb, var(--bloom-purple) 32%, #ffffff);
  --lab-send-fg: var(--bloom-purple-dark);
  --lab-send-shadow: 0 4px 20px rgba(164, 128, 174, 0.18);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--bloom-bg);
  --bloom-hero-mist: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bloom-glow) 14%, transparent) 0%,
    color-mix(in srgb, var(--bloom-glow) 6%, transparent) 38%,
    rgba(10, 10, 15, 0) 62%,
    transparent 100%
  );
  --bloom-hero-ellipse: radial-gradient(
    ellipse 78% 62% at 50% min(8vh, 4.75rem),
    color-mix(in srgb, var(--bloom-glow) 2.6%, transparent) 0%,
    color-mix(in srgb, var(--bloom-glow) 1%, transparent) 44%,
    transparent 72%
  );
  --surface: var(--bloom-surface);
  --sidebar-bg: var(--bloom-bg);
  --border: var(--bloom-border-strong);
  --text: #fafafa;
  --muted: var(--bloom-muted);
  --coral: var(--bloom-purple);
  --brand: var(--bloom-purple);
  --accent: var(--bloom-purple);
  --accent-hover: var(--bloom-purple-hover);
  --secondary-surface: var(--bloom-surface-raised);
  --sidebar-line: var(--bloom-border-strong);
  --placeholder: #71717a;
  --link-external: var(--bloom-purple-light);
  --link-external-hover: var(--bloom-purple);
  --send-peach: var(--bloom-purple);
  --send-peach-hover: var(--bloom-purple-hover);
  --chat-input-bg: var(--bloom-surface);
  --chat-input-border: color-mix(in srgb, var(--bloom-purple) 42%, var(--bloom-border-strong));
  --chat-canvas-bg: var(--bloom-bg);
  --results-canvas: var(--bloom-surface);
  --rp-table-section-bg: color-mix(in srgb, var(--bloom-purple) 18%, var(--bloom-surface) 82%);
  --rp-artifact-header-bg: var(--bloom-surface);
  --lab-send-bg: color-mix(in srgb, var(--bloom-purple) 16%, var(--bloom-surface));
  --lab-send-border: color-mix(in srgb, var(--bloom-purple) 38%, var(--bloom-surface));
  --lab-send-fg: var(--bloom-purple-light);
  --lab-send-shadow: 0 4px 20px rgba(164, 128, 174, 0.22);
}

html[data-theme="dark"] .get-pro-btn:hover {
  background: var(--bloom-surface-raised);
}

html[data-theme="dark"] .conv-item-row.active {
  background: color-mix(in srgb, var(--bloom-purple) 14%, transparent);
}

html[data-theme="dark"] thead th {
  background: var(--bloom-surface-raised);
}

html[data-theme="dark"] tbody tr:hover {
  background: var(--bloom-surface-raised);
}

html[data-theme="dark"] tbody tr {
  border-bottom-color: var(--bloom-border-strong);
}

html[data-theme="dark"] .chip:hover {
  background: var(--bloom-surface-raised);
  border-color: color-mix(in srgb, var(--bloom-purple) 28%, var(--bloom-border-strong));
}

html[data-theme="dark"] .sb-link--active {
  background: color-mix(in srgb, var(--bloom-purple) 12%, transparent);
}

html[data-theme="dark"] .input-box.dash-hero-composer:focus-within,
html[data-theme="dark"] #welcomeScreen .input-box:focus-within,
html[data-theme="dark"] #chatScreen .input-box:focus-within {
  border-color: color-mix(in srgb, var(--bloom-purple) 55%, var(--bloom-border-strong));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--bloom-purple) 14%, transparent),
    var(--chat-input-shadow);
}

html[data-theme="dark"] .input-box.dash-hero-composer .send-btn,
html[data-theme="dark"] .input-box .send-btn {
  background: var(--lab-send-bg);
  border-color: var(--lab-send-border);
  color: var(--lab-send-fg);
  box-shadow: var(--lab-send-shadow);
}

html[data-theme="dark"] .input-box .send-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bloom-purple) 22%, var(--bloom-surface));
  border-color: color-mix(in srgb, var(--bloom-purple) 48%, var(--bloom-surface));
  color: var(--bloom-text);
}

html[data-theme="dark"] #welcomeScreen .dash-hero-composer .input-area,
html[data-theme="dark"] #chatScreen .dash-hero-composer .input-area {
  color: #f4f4f5 !important;
  -webkit-text-fill-color: #f4f4f5;
  caret-color: var(--bloom-purple-light);
}

html[data-theme="dark"] .truffl-suggest-chips .chip.truffl-rp-search-confirm-btn {
  background: var(--bloom-purple);
  border-color: var(--bloom-purple);
  color: var(--bloom-text);
}

html[data-theme="dark"] .truffl-suggest-chips .chip.truffl-rp-search-confirm-btn:hover {
  background: var(--bloom-purple-hover);
  border-color: var(--bloom-purple-hover);
}

/* Canvas — same mist stack as homepage .hero-section--bloom */
html[data-theme="dark"] body {
  background-color: var(--bloom-bg);
  background-image: var(--bloom-hero-ellipse), var(--bloom-hero-mist);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-theme="dark"] body::after {
  opacity: 1;
  inset: auto;
  left: 50%;
  top: clamp(2.25rem, 6vh, 4rem);
  transform: translate(-50%, -50%);
  width: min(110vw, 52rem);
  height: clamp(14rem, 38vw, 22rem);
  mix-blend-mode: normal;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--bloom-glow) 16%, transparent) 0%,
    color-mix(in srgb, var(--bloom-glow) 5%, transparent) 48%,
    transparent 74%
  );
  filter: blur(88px);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] #sidebar,
html[data-theme="dark"] .main-column,
html[data-theme="dark"] .main {
  background: transparent;
}

/* Mobile drawer: solid panel so dashboard content does not bleed through */
@media (max-width: 900px) {
  html[data-theme="dark"] body.sb-mobile-open .sidebar,
  html[data-theme="dark"] body.sb-mobile-open #sidebar,
  html[data-theme="dark"] body.sb-mobile-open .sidebar-inner,
  html[data-theme="dark"] body.sb-mobile-open .sb-foot {
    background: #0a0a0f !important;
  }
  body.sb-mobile-open .sidebar,
  body.sb-mobile-open #sidebar,
  body.sb-mobile-open .sidebar-inner,
  body.sb-mobile-open .sb-foot {
    background: var(--chat-canvas-bg, #fefaff) !important;
  }
  html[data-theme="dark"] body.sb-mobile-open .sb-tree-card {
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

/* Settings — same bloom canvas as chat (transparent shell, body glow shows through) */
html[data-theme="dark"] #settingsScreen,
html[data-theme="dark"] #settingsScreen .settings-page,
html[data-theme="dark"] #settingsScreen .settings-backdrop,
html[data-theme="dark"] #settingsScreen .settings-modal,
html[data-theme="dark"] #settingsScreen .settings-nav {
  background: transparent;
}

html[data-theme="dark"] #welcomeScreen::before,
html[data-theme="dark"] #chatScreen::before {
  display: none;
}

/* Brand — same Lucid wordmark as homepage nav (.nav-brand-wordmark) */
.sb-brand-logo-img {
  display: none !important;
}

.sb-brand-wordmark,
.welcome-brand-wordmark {
  display: inline;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
}

html[data-theme="dark"] .sb-brand-wordmark,
html[data-theme="dark"] .welcome-brand-wordmark {
  color: #ffffff;
}

.welcome-brand-wordmark {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
}

/* Results panel — same bloom glow as body / chat hero (dark) */
html[data-theme="dark"] #resultsPanel .rp-inner,
html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface {
  background: transparent;
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface {
  position: relative;
  isolation: isolate;
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: min(100%, 44rem);
  height: clamp(14rem, 52%, 24rem);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--bloom-glow) 9%, transparent) 0%,
    color-mix(in srgb, var(--bloom-glow) 3%, transparent) 48%,
    transparent 74%
  );
  filter: blur(96px);
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .rp-table-wrap {
  background: color-mix(in srgb, var(--bloom-surface) 72%, transparent) !important;
  border-color: color-mix(in srgb, var(--bloom-purple) 16%, rgba(255, 255, 255, 0.08)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bloom-purple) 6%, transparent),
    0 8px 36px color-mix(in srgb, var(--bloom-glow) 7%, transparent),
    0 0 72px color-mix(in srgb, var(--bloom-glow) 5%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .rp-table-scroll {
  background: transparent;
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .ui-table-body td,
html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface tbody td {
  background: transparent;
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .ui-table-head,
html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface thead.ui-table-header th,
html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface thead th {
  background: color-mix(in srgb, var(--bloom-surface) 55%, transparent) !important;
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .rp-table-wrap::before {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--bloom-surface) 78%, transparent) 0%,
    rgba(21, 21, 30, 0) 100%
  );
}

html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .rp-table-wrap::after {
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--bloom-surface) 78%, transparent) 0%,
    rgba(21, 21, 30, 0) 100%
  );
}

html[data-theme="dark"] .results-panel {
  background: transparent;
}

/* Mobile leads sheet: solid panel — chat must not show through the table */
@media (max-width: 900px) {
  .results-panel.open,
  #resultsPanel.results-panel.open {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: var(--chat-canvas-bg, #fefaff) !important;
    isolation: isolate;
  }

  #resultsPanel .rp-inner,
  #resultsPanel .rp-leads-claude-surface {
    background: var(--chat-canvas-bg, #fefaff) !important;
  }

  html[data-theme="dark"] .results-panel.open,
  html[data-theme="dark"] #resultsPanel,
  html[data-theme="dark"] #resultsPanel .rp-inner,
  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface,
  html[data-theme="dark"] #resultsPanel .rp-artifact-header {
    background: #0a0a0f !important;
    --results-canvas: #0a0a0f;
    --rp-artifact-header-bg: #0a0a0f;
    --rp-table-section-bg: #12121a;
  }

  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface::before {
    display: none !important;
  }

  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .rp-table-wrap {
    background: #12121a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .rp-table-scroll {
    background: #12121a !important;
  }

  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .ui-table-body td,
  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface tbody td {
    background: #12121a !important;
  }

  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface .ui-table-head,
  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface thead.ui-table-header th,
  html[data-theme="dark"] #resultsPanel .rp-leads-claude-surface thead th {
    background: #16161f !important;
  }
}

/* Get Started CTA — same look as homepage hero shimmer-btn (no animation) */
.truffl-shimmer-btn {
  --truffl-shimmer-bg: var(--bloom-purple, #a480ae);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0.625rem 1rem;
  min-height: 2.5rem;
  border: 1px solid var(--truffl-shimmer-bg);
  border-radius: 0.5rem;
  background: var(--truffl-shimmer-bg);
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.truffl-shimmer-btn:hover:not(:disabled) {
  background: var(--bloom-purple-hover, #927599);
  border-color: var(--bloom-purple-hover, #927599);
  color: rgba(255, 255, 255, 0.95);
}

.truffl-shimmer-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--truffl-shimmer-bg) 55%, transparent);
  outline-offset: 2px;
}

html[data-theme="dark"] .truffl-shimmer-btn {
  background: color-mix(in srgb, var(--truffl-shimmer-bg) 14%, transparent);
  border-color: var(--truffl-shimmer-bg);
}

html[data-theme="dark"] .truffl-shimmer-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--truffl-shimmer-bg) 22%, transparent);
  border-color: color-mix(in srgb, var(--truffl-shimmer-bg) 85%, white);
}