/*
 * TransGO Assistant — REEA Flow AI Engine branding layer.
 * Brand tokens per the official REEA Global Brand Kit (Confluence page
 * 2336063489): Orange #FB551E, Black #000000, Gray #747C7C, White.
 * Plus the REEA Flow product gradient used on reeaglobal.com/ai-engine
 * (CSS var `--REEA-Flow-Gradient`, not in the master kit).
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* REEA Flow product gradient (purple → orange). Signature visual of the
     Flow product line; not in the master Brand Kit. */
  --reea-gradient: linear-gradient(256deg, #984BAD 5.35%, #FB551E 100%);
  --reea-gradient-soft: linear-gradient(256deg, rgba(152, 75, 173, 0.12) 5.35%, rgba(251, 85, 30, 0.12) 100%);

  /* Brand Kit primary palette. */
  --reea-orange: #FB551E;
  --reea-orange-hover: #DA3200;
  --reea-orange-pressed: #EF4919;
  --reea-purple: #984BAD;
  --reea-black: #000000;
  --reea-gray: #747C7C;

  /* Chainlit ships shadcn tokens as space-separated HSL triplets consumed
     via `hsl(var(--primary))`. Chainlit's own bundle is appended *after*
     this stylesheet, so the variable overrides need `!important`. */
  --primary: 15 97% 55% !important;             /* #FB551E */
  --primary-foreground: 0 0% 100% !important;
  --ring: 15 97% 55% !important;
}

.dark, html.dark, :root.dark {
  --primary: 15 97% 55% !important;
  --primary-foreground: 0 0% 100% !important;
  --ring: 15 97% 55% !important;
}

/* Roboto everywhere. Chainlit's bundled styles set `font-family: Inter` on
   high-specificity selectors, so override with `!important` on the root
   typographic surfaces. */
html, body, #root, button, input, textarea, select,
[class*="font-sans"], [data-radix-popper-content-wrapper] {
  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Signature gradient strip across the top of the app — the single
   highest-impact brand element. Stays fixed during scroll. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--reea-gradient);
  z-index: 9999;
  pointer-events: none;
}

/* Welcome / readme page H1: paint the brand wordmark with the gradient.
   Chainlit renders chainlit.md inside a `.prose` container (Tailwind
   Typography plugin), so target that. */
.prose h1,
.prose h1:first-of-type {
  background: var(--reea-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Starter prompt cards: subtle gradient hover. */
button:where([class*="starter"]):hover,
a:where([class*="starter"]):hover {
  border-color: var(--reea-orange);
  background: var(--reea-gradient-soft);
}

/* REEA Flow header link.
   Chainlit forces header_link icons into `h-6 w-6` (24x24), which crushes
   the REEA Flow wordmark (338x38, 9:1 aspect ratio) into an unreadable
   blob. Restore the natural aspect ratio, and visually hide the
   `display_name` text since the wordmark already reads "reea flow AI ENGINE"
   (keep it in the DOM so screen readers still get a label). */
header a[href*="reeaglobal.com"] img,
a[href*="reeaglobal.com"] img {
  width: auto !important;
  height: 18px !important;
  max-width: 140px;
}
header a[href*="reeaglobal.com"] > :not(img),
a[href*="reeaglobal.com"] > :not(img) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}