/* =========================================================================
 *  x27 Assistant — paleta turquesa/azul marino basada en logo e:27
 *  Inyectado en LibreChat vía index.html patch
 *
 *  Colores del brand:
 *    turquesa:     #00B8D4
 *    turquesa osc: #00838F
 *    azul claro:   #4DD0E1
 *    negro:        #111827
 *    gris oscuro:  #263238
 * ========================================================================= */

:root {
  /* Variables propias por si LibreChat añade futuras */
  --x27-primary: #00b8d4;
  --x27-primary-hover: #00838f;
  --x27-primary-active: #006064;
  --x27-accent: #4dd0e1;
  --x27-dark: #111827;

  /* Intenta override de variables nativas de LibreChat (Tailwind) */
  --brand-purple: #00b8d4;
  --ring-primary: #00b8d4;
}

/* ---------- Botones "primario" (manda mensaje, enviar, continue) ---------- */
button[type="submit"],
button.btn-primary,
.bg-primary,
.bg-brand-purple,
.hover\:bg-brand-purple:hover {
  background-color: var(--x27-primary) !important;
  border-color: var(--x27-primary) !important;
  color: #fff !important;
}

button[type="submit"]:hover,
button.btn-primary:hover,
.bg-primary:hover {
  background-color: var(--x27-primary-hover) !important;
  border-color: var(--x27-primary-hover) !important;
}

/* ---------- Botones "nuevo chat" / "nueva conversación" ---------- */
a[href*="/chat/new"],
button[aria-label*="New chat" i],
button[aria-label*="Nuevo chat" i] {
  background-color: var(--x27-primary) !important;
  color: #fff !important;
  border: 1px solid var(--x27-primary) !important;
}

a[href*="/chat/new"]:hover,
button[aria-label*="New chat" i]:hover {
  background-color: var(--x27-primary-hover) !important;
  border-color: var(--x27-primary-hover) !important;
}

/* ---------- Links y enlaces ---------- */
a {
  color: var(--x27-primary);
}

a:hover {
  color: var(--x27-primary-hover);
}

/* ---------- Foco teclado (accesibilidad) ---------- */
*:focus-visible {
  outline: 2px solid var(--x27-primary) !important;
  outline-offset: 2px !important;
}

/* ---------- Checkbox / Radio / Switch activo ---------- */
input[type="checkbox"]:checked,
input[type="radio"]:checked,
[role="switch"][aria-checked="true"] {
  background-color: var(--x27-primary) !important;
  border-color: var(--x27-primary) !important;
}

/* ---------- Tabs activas ---------- */
[role="tab"][aria-selected="true"],
[data-state="active"][role="tab"] {
  color: var(--x27-primary) !important;
  border-bottom-color: var(--x27-primary) !important;
}

/* ---------- Badges / pills de modelo activo ---------- */
.bg-green-500,
.bg-purple-500,
.bg-indigo-500 {
  background-color: var(--x27-primary) !important;
}

/* ---------- Spinner / progress ---------- */
.text-green-500,
.text-purple-500,
.text-indigo-500,
.text-brand-purple {
  color: var(--x27-primary) !important;
}

/* ---------- Slider de parámetros (temperatura, top_p, etc.) ---------- */
input[type="range"] {
  accent-color: var(--x27-primary);
}

/* ---------- Logo del header: asegurar tamaño bonito ---------- */
img[src*="/assets/logo.svg"] {
  max-height: 32px;
  object-fit: contain;
}

/* ---------- Pantalla de login/register: formulario más grande ---------- */

/* Contenedor principal del formulario — más ancho */
[class*="login"], [class*="Login"],
form[action*="/login"], form[action*="/register"],
div:has(> form) > div:has(input[type="password"]) {
  max-width: 520px !important;
  width: 90vw !important;
  margin: 0 auto !important;
}

/* Forzar ancho del card/panel de login en LibreChat */
.min-h-screen > div > div,
.relative.flex.min-h-screen > div {
  max-width: 560px !important;
  width: 95vw !important;
}

/* Ocultar logo en login/register */
img[src*="logo.svg"] {
  display: none !important;
}

/* Inputs más grandes */
input[type="email"],
input[type="password"],
input[type="text"] {
  font-size: 1.1rem !important;
  padding: 0.85rem 1rem !important;
  min-height: 48px !important;
}

/* Botón de submit más grande */
button[type="submit"] {
  font-size: 1.15rem !important;
  padding: 0.9rem 1.5rem !important;
  min-height: 52px !important;
  border-radius: 10px !important;
}

/* Labels más legibles */
label {
  font-size: 1rem !important;
}

/* Título "Sign in" / "Iniciar sesión" más grande */
h1, h2 {
  font-size: 1.75rem !important;
}

/* ---------- Ocultar "LibreChat" del footer si aparece ---------- */
footer a[href*="librechat.ai"],
footer a[href*="github.com/danny-avila"] {
  display: none !important;
}

/* ---------- Scrollbar más discreta ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 184, 212, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 184, 212, 0.6);
}