/* Kalani theme — Dynamo brand colors over LibreChat.
 *
 * LibreChat exposes no theming config (custom themes are an open upstream
 * request, danny-avila/LibreChat #5389), but its palette is CSS custom
 * properties and its markup is stable, so a stylesheet linked AFTER the bundle
 * is enough. No fork of the client is required.
 *
 * Palette from Dynamo_BrandGuide_2025.pdf (NOT the #fe4e51 in trident's
 * CLAUDE.md — the guide says #F05154):
 *   Dynamo Red   #F05154   Dynamo Black #343433
 *   Dynamo Blue  #5789C7   Dynamo Grey  #C1C5D1
 *
 * NOTE ON APPROACH: overriding LibreChat's accent variables alone does almost
 * nothing visible — its chat UI is deliberately near-monochrome, and the
 * variables that sound like accents (`--surface-submit`) are used in two
 * obscure places. The send button, for instance, is `bg-text-primary`, a
 * neutral. So the high-traffic controls are restyled by selector below.
 * Selectors are ID/data-testid based, which are far more stable than utility
 * classes; if upstream renames them the styling degrades to stock LibreChat
 * rather than breaking the UI.
 */

:root,
.dark {
  --dynamo-red: #f05154;
  --dynamo-red-hover: #d13d40;
  --dynamo-blue: #5789c7;

  /* Real accent variables — low traffic, but correct to align. */
  --brand-purple: var(--dynamo-red);
  --surface-submit: var(--dynamo-red);
  --surface-submit-hover: var(--dynamo-red-hover);

  /* Focus rings (Tailwind/shadcn HSL triplet convention — no hsl() wrapper). */
  --ring: 359 84% 63%;
}

/* ── Send button ────────────────────────────────────────────────────────────
   The single most-used control. Ships as `bg-text-primary` (neutral), so it
   cannot be recolored via variables without changing all primary text.
   #id beats a utility class on specificity, so no !important needed. */
#send-button:not(:disabled) {
  background-color: var(--dynamo-red);
  color: #ffffff;
}
#send-button:not(:disabled):hover {
  background-color: var(--dynamo-red-hover);
}
#send-button:not(:disabled) svg {
  color: #ffffff;
}

/* ── Focus visibility ───────────────────────────────────────────────────────
   Keyboard focus should read as brand, and this also helps accessibility. */
*:focus-visible {
  outline-color: var(--dynamo-red);
}

/* ── Links ──────────────────────────────────────────────────────────────────
   Dynamo Blue is the brand's secondary and reads better than red for links,
   which is also why the brand guide uses blue for interactive text. */
.prose a,
a.text-blue-500,
a[target='_blank'] {
  color: var(--dynamo-blue);
}

/* ── Icons: Kalani Blue, page-wide ──────────────────────────────────────────
   Red on icons fought the blue identity mark, and scoping to `nav-panel-*`
   only caught part of the rail — the other icons use different markup.
   Colouring icons by element instead of by test-id catches all of them.

   This works because LibreChat uses Lucide icons, which draw with
   `stroke="currentColor"`, so setting `color` on the svg tints the icon
   without touching any text. Deliberately NOT a `--text-*` variable override:
   those drive body text and chat history, which is what broke dark mode. */
/* !important is required, not lazy: Lucide icons carry Tailwind utility classes
   like `h-5 w-5 text-text-primary`, which is specificity (0,3,0). A bare `svg`
   rule is (0,0,1) and loses — which is why only the icons WITHOUT a colour
   class picked up the tint on the first pass. */
svg {
  color: var(--dynamo-blue) !important;
}

/* Icons sitting on a filled control must stay legible against it. These come
   after the blanket rule and win on specificity. */
#send-button svg,
#send-button:not(:disabled) svg {
  color: #ffffff !important;
}

/* ── Sidebar rail: active item ──────────────────────────────────────────────
   Same treatment The Truman Board gives its selected nav item — stronger mark
   on a translucent wash — in blue rather than red. Translucent so it
   composites correctly over both the light and dark sidebar. */
[data-testid^='nav-panel-'] {
  opacity: 0.7;
}
[data-testid^='nav-panel-']:hover {
  opacity: 1;
}
[data-testid^='nav-panel-'][aria-pressed='true'] {
  opacity: 1;
  background-color: rgba(87, 137, 199, 0.18);
}
[data-testid^='nav-panel-'][aria-pressed='true'] svg {
  color: #7ba5d8 !important; /* lighter tint of Dynamo Blue — active reads brighter */
}