/* MFM Chat — brand utility classes.
   Loaded AFTER Tailwind CDN so these win for token-driven colors.
   Tailwind CDN's JIT doesn't reliably generate utilities from custom
   theme.extend.colors when the page lazy-renders React content, so we
   define the small set we actually need here directly. */

/* Backgrounds */
.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.bg-card       { background-color: var(--card); }
.bg-popover    { background-color: var(--popover); }
.bg-primary    { background-color: var(--primary); }
.bg-primary-foreground { background-color: var(--primary-foreground); }
.bg-secondary  { background-color: var(--secondary); }
.bg-muted      { background-color: var(--muted); }
.bg-accent     { background-color: var(--accent); }
.bg-destructive { background-color: var(--destructive); }
.bg-input      { background-color: var(--input); }
.bg-sidebar    { background-color: var(--sidebar); }
.bg-sidebar-accent { background-color: var(--sidebar-accent); }

/* Text */
.text-background          { color: var(--background); }
.text-foreground          { color: var(--foreground); }
.text-card-foreground     { color: var(--card-foreground); }
.text-popover-foreground  { color: var(--popover-foreground); }
.text-primary             { color: var(--primary); }
.text-primary-foreground  { color: var(--primary-foreground); }
.text-secondary-foreground{ color: var(--secondary-foreground); }
.text-muted-foreground    { color: var(--muted-foreground); }
.text-accent-foreground   { color: var(--accent-foreground); }
.text-destructive         { color: var(--destructive); }
.text-destructive-foreground { color: var(--destructive-foreground); }
.text-sidebar-foreground  { color: var(--sidebar-foreground); }
.text-sidebar-accent-foreground { color: var(--sidebar-accent-foreground); }

/* Borders */
.border-border       { border-color: var(--border); }
.border-input        { border-color: var(--input); }
.border-foreground   { border-color: var(--foreground); }
.border-sidebar-border { border-color: var(--sidebar-border); }

/* ============================================================
   SUGGESTION CHIP
   Soft-fill chip used for starter prompts on the chat home screen.
   Light: pale gray fill, brand-black text → orange text on hover.
   Dark : slightly-lighter-than-bg fill, white text → orange text on hover.
   ============================================================ */
.suggestion-chip {
  /* Same fill as the sidebar surface — chrome reads as one continuous panel */
  background-color: var(--sidebar);
  color: var(--foreground);
  transition: color 200ms ease;
}
.suggestion-chip:hover {
  color: var(--brand);
}
.dark .suggestion-chip {
  /* Slightly lighter than the unified dark background so the chip reads as
     a soft surface above it. Sidebar + main bg share hsl(240 5.9% 10%);
     chips lift to hsl(240 4% 14%) — subtle separation, not loud. */
  background-color: hsl(240 4% 14%);
  color: var(--brand-white);
}
.dark .suggestion-chip:hover {
  color: var(--brand);
}

/* ============================================================
   BRAND BUTTON HOVER — "Fill from center"
   On the primary (black) button, an orange pill grows out from the
   center on hover until it fully covers the black background.
   The button's overflow:hidden clips the overflow into the button's
   shape; isolation:isolate creates a stacking context so the ::before
   sits below button text (which is .btn-fill-hover > *).
   ============================================================ */
.btn-fill-hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  /* So the button's background-color doesn't paint into the 1px border area,
     which would otherwise be visible as a thin dark frame around the
     orange circle once the fill animation completes. */
  background-clip: padding-box;
  /* color transitions stay subtle — only the bg fill moves */
  transition: color 200ms ease;
}
.btn-fill-hover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8px;
  height: 8px;            /* tiny dot at rest — invisible until hover scales it up */
  background-color: var(--brand);
  border-radius: 50%;
  /* center the dot at the button's bottom edge (just peeking up from below) */
  transform: translate(-50%, 50%) scale(0);
  transform-origin: center;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}
.btn-fill-hover:hover::before,
.btn-fill-hover:focus-visible::before {
  /* 8px × 80 = 640px circle, plenty to cover the entire button */
  transform: translate(-50%, 50%) scale(80);
}
/* Disabled buttons keep their resting fill — no hover animation. */
.btn-fill-hover:disabled::before,
.btn-fill-hover[disabled]::before,
.btn-fill-hover[aria-disabled="true"]::before {
  display: none;
}
/* Make sure button content (spans, icons, etc.) sits above the fill. */
.btn-fill-hover > * {
  position: relative;
  z-index: 1;
}

/* ── BRAND INPUT FOCUS ──
   Animated 2px orange underline that grows from center to both edges on focus.
   Drawn via a background-image gradient — no HTML wrapper required.
   The bottom border fades to transparent so the orange line takes its place;
   sides + top keep their resting gray border. */
.brand-input {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 0% 100%;         /* anchor at the left edge */
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition:
    background-size 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms ease;
}
.brand-input:focus,
.brand-input:focus-visible {
  background-size: 100% 2px;
  border-bottom-color: transparent;
  /* Don't paint our global brand outline on top of the new underline. */
  outline: none !important;
  box-shadow: none !important;
}

/* Role-selection card — mirrors .brand-input's bottom-border behaviour.
   Resting: gray border all round. Hover/selected: a 2px orange underline
   grows from center along the bottom while the bottom border fades out;
   sides + top keep their resting gray border. Sharp-ish corners. */
.role-card {
  border-radius: 4px;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-position: 50% 100%;        /* grow from center */
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition:
    background-size 220ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms ease,
    background-color 160ms ease;
}
.role-card:hover,
.role-card[data-selected="true"] {
  background-size: 100% 2px;
  border-bottom-color: transparent;
}

/* Role icon crossfade: black-and-white at rest, color on hover/selected. */
.role-icon { transition: opacity 180ms ease; }
.role-icon--color { opacity: 0; }
.role-card:hover .role-icon--bw,
.role-card[data-selected="true"] .role-icon--bw { opacity: 0; }
.role-card:hover .role-icon--color,
.role-card[data-selected="true"] .role-icon--color { opacity: 1; }

/* Brand focus ring.
   The Tailwind CDN's JIT can miss the `ring-2` shadow utility when React
   renders elements late, so the ring color was set but never painted.
   Override with an explicit, !important outline so every focusable element
   actually shows the brand-orange ring on keyboard focus.
   We match BOTH :focus and :focus-visible — click-focus on inputs in
   dark mode was falling through to the browser's default white outline. */
:focus-visible,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
/* Inputs sit inside a container that's already padded; collapse the offset
   so the ring hugs the border instead of bleeding out. */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline-offset: 0 !important;
}

/* Hover variants for the button system */
.hover\:bg-accent:hover        { background-color: var(--accent); }
.hover\:bg-muted:hover         { background-color: var(--muted); }
.hover\:bg-secondary:hover     { background-color: var(--secondary); }
.hover\:bg-sidebar-accent:hover{ background-color: var(--sidebar-accent); }
.hover\:text-foreground:hover  { color: var(--foreground); }
.hover\:text-accent-foreground:hover { color: var(--accent-foreground); }

/* Focus-visible offset for the buttons */
.focus-visible\:ring-ring:focus-visible { --tw-ring-color: var(--ring); }
.focus-visible\:ring-offset-background:focus-visible { --tw-ring-offset-color: var(--background); }

/* Disabled bg for primary submit button when input is empty */
.disabled\:bg-muted:disabled { background-color: var(--muted); }
.disabled\:text-muted-foreground:disabled { color: var(--muted-foreground); }