/* ==========================================================================
   OTAI Corporate Identity overrides for LibreChat
   Maps LibreChat's CSS variable tokens to the OTAI palette.
   Loaded last via a Caddy `replace_response` injection in index.html.
   Source of truth: otai-website (packages/otai-vue-ui/tailwind.preset.cjs)
   ========================================================================== */

@import url('https://rsms.me/inter/inter.css');

:root,
html,
html.dark,
[data-theme='dark'],
[data-theme='light'] {
  /* --- Brand palette --- */
  --otai-bg-1: #0f0814;
  --otai-surface-1: #1d1023;
  --otai-surface-2: #2d1b36;
  --otai-surface-3: #3c2249;
  --otai-border-1: #3c2249;
  --otai-text-1: #e6e7ea;
  --otai-text-2: #b790cb;
  --otai-muted: #6f5a7c;
  --otai-primary: #a60df2;
  --otai-primary-light: #d475fd;
  --otai-primary-dark: #7b09b5;
  --otai-secondary: #1fd5ff;
  --otai-danger: #ff4f6d;
  --otai-success: #16dba0;
  --otai-warning: #f7b733;

  /* --- LibreChat semantic tokens (light + dark unified to OTAI dark) --- */
  --background: var(--otai-bg-1);
  --foreground: var(--otai-text-1);

  --presentation: var(--otai-bg-1);

  --primary: var(--otai-primary);
  --primary-foreground: #ffffff;
  --secondary: var(--otai-surface-2);
  --secondary-foreground: var(--otai-text-1);

  --muted: var(--otai-surface-2);
  --muted-foreground: var(--otai-text-2);

  --accent: var(--otai-primary);
  --accent-foreground: #ffffff;

  --card: var(--otai-surface-1);
  --card-foreground: var(--otai-text-1);

  --destructive: var(--otai-danger);
  --destructive-foreground: #ffffff;

  --border: var(--otai-border-1);
  --border-light: rgba(60, 34, 73, 0.6);
  --border-medium: var(--otai-border-1);
  --border-medium-alt: var(--otai-border-1);
  --border-heavy: #4a2c5b;
  --border-xheavy: #5a3870;
  --border-destructive: var(--otai-danger);

  --ring: var(--otai-primary);
  --ring-primary: var(--otai-primary);

  --brand-purple: var(--otai-primary);

  /* --- Surfaces (sidebars, panels, dialogs, chat area) --- */
  --surface-primary: var(--otai-bg-1);
  --surface-primary-alt: var(--otai-surface-1);
  --surface-primary-contrast: var(--otai-surface-2);
  --surface-secondary: var(--otai-surface-1);
  --surface-secondary-alt: var(--otai-surface-2);
  --surface-tertiary: var(--otai-surface-2);
  --surface-tertiary-alt: #34203f;
  --surface-chat: var(--otai-bg-1);
  --surface-dialog: var(--otai-surface-1);
  --surface-active: rgba(166, 13, 242, 0.18);
  --surface-active-alt: rgba(166, 13, 242, 0.28);
  --surface-hover: rgba(166, 13, 242, 0.12);
  --surface-hover-alt: rgba(166, 13, 242, 0.2);
  --bg-surface-hover: rgba(166, 13, 242, 0.12);
  --surface-submit: var(--otai-primary);
  --surface-submit-hover: var(--otai-primary-dark);
  --surface-destructive: var(--otai-danger);
  --surface-destructive-hover: #c5304b;

  /* --- Text on destructive contexts --- */
  --text-destructive: var(--otai-danger);

  /* --- Header / nav --- */
  --header-primary: var(--otai-bg-1);
  --header-hover: rgba(166, 13, 242, 0.12);
  --header-button-hover: rgba(166, 13, 242, 0.2);

  --switch-unchecked: var(--otai-surface-3);
}

/* Force the dark theme look regardless of user preference. The OTAI
   identity is dark-only (matches openticketai.com). */
html,
body {
  background-color: var(--otai-bg-1) !important;
  color: var(--otai-text-1);
  font-family:
    'Inter',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif !important;
}

::selection {
  background: var(--otai-primary-dark);
  color: #ffffff;
}

/* Subtle radial glow on the chat surface, matching the marketing site. */
#root,
.dark body,
body {
  background-image: radial-gradient(
    circle at 20% -10%,
    rgba(166, 13, 242, 0.12) 0%,
    rgba(15, 8, 20, 0) 55%
  );
}

/* Focus rings + buttons should always read as OTAI primary. */
*:focus-visible {
  outline-color: var(--otai-primary) !important;
}

/* LibreChat's "submit" / "send" buttons - keep readable on purple. */
button[data-testid='send-button'],
button[aria-label='Send message'],
.btn-primary {
  background-color: var(--otai-primary) !important;
  color: #ffffff !important;
  border-color: var(--otai-primary) !important;
}

button[data-testid='send-button']:hover,
button[aria-label='Send message']:hover,
.btn-primary:hover {
  background-color: var(--otai-primary-light) !important;
  border-color: var(--otai-primary-light) !important;
}

/* Brand the loading splash background that LibreChat sets inline. */
#loading-container {
  background-color: var(--otai-bg-1) !important;
}

/* Lift links to the OTAI primary tone everywhere. */
a {
  color: var(--otai-primary);
}
a:hover {
  color: var(--otai-primary-light);
}