/* TryGC Brain consumes the same design tokens as the application shell. */
:root[data-trygc-page="brain"] {
  --background: var(--gcui-canvas);
  --foreground: var(--gcui-text);
  --card: var(--gcui-surface);
  --card-foreground: var(--gcui-text);
  --muted: var(--gcui-surface-2);
  --muted-foreground: var(--gcui-text-3);
  --border: var(--gcui-border);
  --input: var(--gcui-surface-2);
  --ring: var(--gcui-primary);
  --gc-orange: var(--gcui-primary);
  --gc-purple: var(--gcui-secondary);
}

:is(html[data-route="brain"], html[data-trygc-page="brain"]) .brain-page-shell {
  --bg-primary: var(--background, var(--gcui-canvas));
  --bg-secondary: var(--muted, var(--gcui-surface-2));
  --surface: var(--card, var(--gcui-surface));
  --border-custom: var(--border, var(--gcui-border));
  --border-hover: var(--gcui-border-strong);
  --text-primary: var(--foreground, var(--gcui-text));
  --text-secondary: var(--muted-foreground, var(--gcui-text-3));
  --accent-1: var(--gc-orange, var(--gcui-primary));
  --accent-2: var(--gc-purple, var(--gcui-secondary));
  color: var(--foreground, var(--gcui-text));
  font-family: var(--gcui-font) !important;
}

:is(html[data-route="brain"], html[data-trygc-page="brain"]) .brain-page-shell :where(button, input, select, textarea) {
  font-family: var(--gcui-font) !important;
}

:is(html[data-route="brain"], html[data-trygc-page="brain"]) .brain-page-shell :where(h1, h2, h3, h4, .font-condensed, .font-barlow-condensed) {
  font-family: var(--gcui-font-heading) !important;
}

:is(html[data-route="brain"], html[data-trygc-page="brain"]) .brain-page-shell [class*="text-[var(--accent-1)]"] {
  color: var(--gcui-primary) !important;
}

:is(html[data-route="brain"], html[data-trygc-page="brain"]) .brain-page-shell :where(.bg-\[var\(--surface\)\], .bg-\[var\(--surface\)\]\/90, .bg-\[var\(--surface\)\]\/95) {
  border-color: var(--gcui-border) !important;
}

/* The standalone /brain.html surface is legacy, but must honor both modes too. */
html[data-trygc-page="brain"],
html[data-trygc-page="brain"] body,
html[data-trygc-page="brain"] #root,
html[data-trygc-page="brain"] .brain-standalone-shell {
  background: var(--gcui-canvas) !important;
  color: var(--gcui-text) !important;
  font-family: var(--gcui-font) !important;
}

html[data-trygc-page="brain"] .brain-standalone-shell :where(h1, h2, h3, h4) {
  color: var(--gcui-text) !important;
  font-family: var(--gcui-font-heading) !important;
}

html[data-trygc-page="brain"] .brain-standalone-header {
  background: var(--gcui-surface) !important;
  border-color: var(--gcui-border) !important;
  color: var(--gcui-text) !important;
}

html[data-trygc-page="brain"] .brain-standalone-header :where(a, span) {
  color: var(--gcui-text-2) !important;
}

html[data-trygc-page="brain"] .bolt-ray-backdrop {
  display: none !important;
}

html[data-trygc-page="brain"] .brain-announcement,
html[data-trygc-page="brain"] .brain-standalone-input,
html[data-trygc-page="brain"] .brain-import-button,
html[data-trygc-page="brain"] [class*="bg-[#151022]"],
html[data-trygc-page="brain"] [class*="bg-[#171224]"] {
  background: var(--gcui-surface) !important;
  border-color: var(--gcui-border) !important;
  color: var(--gcui-text) !important;
}

html[data-trygc-page="brain"] [class*="bg-[#1E1730]"] {
  background: var(--gcui-surface-2) !important;
}

html[data-trygc-page="brain"] [class*="text-[#F8F6FC]"] {
  color: var(--gcui-text) !important;
}

html[data-trygc-page="brain"] :where([class*="text-[#A098AD]"], [class*="text-[#8C829B]"]) {
  color: var(--gcui-text-3) !important;
}

html[data-trygc-page="brain"] [class*="text-[#C5BDCF]"] {
  color: var(--gcui-text-2) !important;
}

html[data-trygc-page="brain"] [class*="border-white"] {
  border-color: var(--gcui-border) !important;
}

html[data-trygc-page="brain"] .brain-announcement {
  box-shadow: var(--gcui-shadow-card) !important;
}

html[data-trygc-page="brain"] .brain-announcement :where(span:not(:first-child)) {
  color: var(--gcui-text-2) !important;
}

html[data-trygc-page="brain"] .brain-standalone-input textarea {
  background: transparent !important;
  color: var(--gcui-text) !important;
  font-family: var(--gcui-font) !important;
}

html[data-trygc-page="brain"] .brain-standalone-input textarea::placeholder {
  color: var(--gcui-text-3) !important;
  opacity: 1;
}

html[data-trygc-page="brain"] .brain-import-button:hover {
  background: var(--gcui-surface-2) !important;
  border-color: var(--gcui-primary-line) !important;
  color: var(--gcui-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-trygc-page="brain"] *,
  html[data-trygc-page="brain"] *::before,
  html[data-trygc-page="brain"] *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================================
   Brain hero — carries the Influencer Intelligence header treatment across.
   Added 2026-08-21.

   Sampled from .ii-hero on /influencer-intelligence:
     border-top   4px solid #F97316            -> var(--shadcn-primary)
     radius       24px
     background   white + two radials (peach #FFEDDC @18%, orange #F97316 @17%)
     shadow       --shadcn-shadow-card
     headline     Outfit 900, tracking -0.035em, second word in #F97316

   Everything is expressed through --shadcn-* rather than the sampled literals,
   so the panel flips with the theme instead of staying light-mode-only.

   One deliberate deviation: the source hero runs a 66px headline inside 46px
   padding. Brain's shell is height-capped at calc(100dvh - 84px) and the chat
   takes the remainder, so a hero that tall would eat the conversation. The
   treatment is kept and the scale is reduced.
   ========================================================================== */

.brain-hero {
  position: relative;
  padding: 22px 26px;
  border-top: 4px solid var(--shadcn-primary, #f97316);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--shadcn-accent, #ffeddc) 55%, transparent), transparent 34%),
    radial-gradient(circle at 15% 110%, color-mix(in srgb, var(--shadcn-primary, #f97316) 17%, transparent), transparent 38%),
    var(--shadcn-card, #fff);
  box-shadow: var(--shadcn-shadow-card, 0 1px 3px rgba(23, 16, 34, .08), 0 6px 16px -4px rgba(23, 16, 34, .12));
}

.brain-hero-eyebrow {
  margin: 0 0 6px;
  font-family: var(--shadcn-font-heading, "Outfit", sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--shadcn-primary, #f97316);
}

.brain-hero-title {
  margin: 0;
  font-family: var(--shadcn-font-heading, "Outfit", sans-serif) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1.03;
  color: var(--shadcn-foreground, #171022);
}

.brain-hero-accent { color: var(--shadcn-primary, #f97316); }

/* The source hero sits on white in both themes; on the app's dark card the
   radials need a little more presence to stay visible. */
:root.dark .brain-hero,
:root[data-theme="dark"] .brain-hero {
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--shadcn-primary) 14%, transparent), transparent 34%),
    radial-gradient(circle at 15% 110%, color-mix(in srgb, var(--shadcn-primary) 20%, transparent), transparent 38%),
    var(--shadcn-card, #151022);
}

@media (max-width: 720px) {
  .brain-hero { padding: 16px 18px; border-radius: 18px; }
  .brain-hero-title { font-size: 26px !important; }
}

/* ============================================================================
   Brain hero + chat headline
   Added 2026-08-21.

   Hero treatment sampled from .ii-hero on /influencer-intelligence:
     border-top   4px solid #F97316            -> var(--shadcn-primary)
     radius       24px
     background   white + two radials (peach #FFEDDC, orange #F97316)
     shadow       --shadcn-shadow-card
     headline     Outfit 900, tracking -0.035em, accent word in #F97316

   Expressed through --shadcn-* rather than the sampled literals, so the panel
   flips with the theme instead of being pinned to light mode.

   The brand line is the headline and "TryGC Brain" is the small label above it.
   Because that line is far longer than "TryGC Brain" was, the scale is reduced
   and the wrap is balanced — Brain's shell is height-capped at
   calc(100dvh - 84px) and the chat takes the remainder, so a tall hero would
   eat the conversation.
   ========================================================================== */

.brain-hero {
  position: relative;
  padding: 20px 26px;
  border-top: 4px solid var(--shadcn-primary, #f97316);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--shadcn-accent, #ffeddc) 55%, transparent), transparent 34%),
    radial-gradient(circle at 15% 110%, color-mix(in srgb, var(--shadcn-primary, #f97316) 17%, transparent), transparent 38%),
    var(--shadcn-card, #fff);
  box-shadow: var(--shadcn-shadow-card, 0 1px 3px rgba(23, 16, 34, .08), 0 6px 16px -4px rgba(23, 16, 34, .12));
}

/* Small label — the product name, deliberately not the loudest thing here. */
.brain-hero-eyebrow {
  margin: 0 0 4px;
  font-family: var(--shadcn-font-heading, "Outfit", sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--shadcn-primary, #f97316);
}

.brain-hero-title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--shadcn-font-heading, "Outfit", sans-serif) !important;
  font-size: clamp(23px, 2.3vw, 33px) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  line-height: 1.06;
  text-wrap: balance;
  color: var(--shadcn-foreground, #171022);
}

.brain-hero-accent { color: var(--shadcn-primary, #f97316); }

/* The source hero sits on white in both themes; on the app's dark card the
   radials need more presence to stay visible. */
:root.dark .brain-hero,
:root[data-theme="dark"] .brain-hero {
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--shadcn-primary) 14%, transparent), transparent 34%),
    radial-gradient(circle at 15% 110%, color-mix(in srgb, var(--shadcn-primary) 20%, transparent), transparent 38%),
    var(--shadcn-card, #151022);
}

@media (max-width: 720px) {
  .brain-hero { padding: 15px 17px; border-radius: 18px; }
  .brain-hero-title { font-size: 21px !important; max-width: none; }
}

/* ---- Chat empty-state headline ------------------------------------------
   It rendered flat: only "OPTIMIZE" was coloured, the rest sat on
   text-neutral-900 / dark:text-white. A single gradient is clipped to the whole
   line so every word carries colour, and the accent word overrides back to a
   solid orange so it still reads as the emphasis rather than blending in. */
.brain-ask-headline {
  background: linear-gradient(
    100deg,
    var(--shadcn-brand-purple, #7c3aed) 0%,
    var(--shadcn-primary, #f97316) 54%,
    var(--shadcn-chart-5, #f59e0b) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.brain-ask-headline .brain-ask-accent {
  -webkit-text-fill-color: var(--shadcn-primary, #f97316);
  color: var(--shadcn-primary, #f97316);
}

/* Without background-clip support, transparent fill would render the headline
   invisible — fall back to a solid brand colour rather than nothing. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brain-ask-headline {
    background: none;
    color: var(--shadcn-brand-purple, #7c3aed);
    -webkit-text-fill-color: currentColor;
  }
  .brain-ask-headline .brain-ask-accent { color: var(--shadcn-primary, #f97316); }
}

/* ---- Full-width chat ("Expand") -----------------------------------------
   Measured on a 1050px-tall viewport before this: of the 966px shell, the hero
   took 151px, the Report Studio strip 35px and the tab bar 43px, leaving the
   conversation itself only 485px of actual scrollable message area.

   Expand hides the two purely navigational blocks (hero, Report Studio strip)
   and lets the chat take that space back — roughly +195px, about a 40% taller
   conversation. The tab bar stays: hiding it would strand anyone wanting to
   leave Agent Chat.

   State lives in a class on <html> rather than React state, so it costs no
   re-render and cannot desync from the component tree. */

.brain-focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-custom, var(--shadcn-border, #ddd3e5));
  border-radius: 8px;
  background: var(--surface, var(--shadcn-card, #fff));
  color: var(--text-secondary, var(--shadcn-muted-foreground, #675d75));
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.brain-focus-toggle:hover {
  border-color: color-mix(in srgb, var(--shadcn-primary, #f97316) 55%, var(--shadcn-border, #ddd3e5));
  color: var(--shadcn-primary, #f97316);
}

.brain-focus-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--shadcn-primary, #f97316) 40%, transparent);
  outline-offset: 2px;
}

/* The label tracks the mode without needing component state to drive it. */
.brain-focus-toggle::before { content: "\2922"; font-size: 13px; line-height: 1; }
.brain-focus-toggle::after { content: "Expand"; }
:root.brain-focus .brain-focus-toggle::before { content: "\2921"; }
:root.brain-focus .brain-focus-toggle::after { content: "Exit full width"; }

:root.brain-focus .brain-focus-toggle {
  border-color: var(--shadcn-primary, #f97316);
  color: var(--shadcn-primary, #f97316);
  background: color-mix(in srgb, var(--shadcn-primary, #f97316) 8%, transparent);
}

:root.brain-focus .brain-hero,
:root.brain-focus .brain-report-strip { display: none !important; }

/* Reclaim the shell's own gap allowance too, now that two children are gone. */
:root.brain-focus .brain-page-shell { gap: 8px; }