/* Silfo™ — capa visual sobre LibreChat (inyectada por nginx).
   Paleta: azul noche, turquesa, cian, dorado y coral del ecosistema Colibrí.
   Fondo inspirado en Colibrí OS: turquesa a la izquierda, coral a la derecha,
   resplandor dorado abajo. */

:root {
  --silfo-navy: 7 18 30;
  --silfo-teal: 0 194 199;
  --silfo-coral: 233 74 99;
  --silfo-gold: 247 201 72;
}

/* ---------- Paleta modo oscuro ---------- */
html.dark {
  --text-primary: 236 242 248;
  --text-secondary: 176 193 212;
  --text-secondary-alt: 150 170 194;
  --text-tertiary: 150 170 194;
  --header-primary: 16 40 70;
  --header-hover: 22 51 90;
  --header-button-hover: 22 51 90;
  --surface-primary: 11 30 58;
  --surface-primary-alt: 8 24 46;
  --surface-primary-contrast: 22 51 90;
  --surface-secondary: 16 40 70;
  --surface-secondary-alt: 22 51 90;
  --surface-tertiary: 22 51 90;
  --surface-tertiary-alt: 16 40 70;
  --surface-hover: 22 51 90;
  --surface-hover-alt: 31 67 112;
  --surface-active: 31 67 112;
  --surface-active-alt: 31 67 112;
  --surface-composer-hover: 22 51 90;
  --surface-chat: 16 40 70;
  --surface-dialog: 16 40 70;
  --surface-submit: 14 140 132;
  --surface-submit-hover: 19 168 158;
  --border-light: 31 67 112;
  --border-medium: 31 67 112;
  --border-medium-alt: 31 67 112;
  --border-heavy: 45 85 135;
  --border-xheavy: 60 100 150;
}

/* ---------- Paleta modo claro (solo acentos) ---------- */
html:not(.dark) {
  --surface-submit: 11 30 58;
  --surface-submit-hover: 22 51 90;
}

/* ---------- Fondo degradado ---------- */
html.dark body,
html.dark #root {
  background:
    radial-gradient(60% 80% at 0% 45%, rgb(var(--silfo-teal) / 0.45), transparent 70%),
    radial-gradient(60% 80% at 100% 40%, rgb(var(--silfo-coral) / 0.45), transparent 70%),
    radial-gradient(45% 40% at 50% 105%, rgb(var(--silfo-gold) / 0.22), transparent 75%),
    rgb(var(--silfo-navy)) !important;
  background-attachment: fixed !important;
}

html:not(.dark) body,
html:not(.dark) #root {
  background:
    radial-gradient(60% 80% at 0% 45%, rgb(var(--silfo-teal) / 0.18), transparent 70%),
    radial-gradient(60% 80% at 100% 40%, rgb(var(--silfo-coral) / 0.16), transparent 70%),
    radial-gradient(45% 40% at 50% 105%, rgb(var(--silfo-gold) / 0.18), transparent 75%),
    #f7fafc !important;
  background-attachment: fixed !important;
}

/* Pantalla de acceso: deja ver el fondo */
#root > div.min-h-screen.bg-surface-primary {
  background-color: transparent !important;
}

/* Pantalla de acceso: colibrí más grande y nombre de la plataforma debajo */
#root > div.min-h-screen > div.h-10:has(> img[src*="logo"]) {
  height: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0 16px;
}
#root > div.min-h-screen > div.h-10:has(> img[src*="logo"]) > img {
  height: 88px !important;
  width: auto !important;
}
#root > div.min-h-screen > div.h-10:has(> img[src*="logo"])::after {
  content: "Silfo™ — Inteligencia Metodológica de Colibrí LATAM";
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(var(--text-primary));
}
@media (max-width: 480px) {
  #root > div.min-h-screen > div.h-10:has(> img[src*="logo"]) > img {
    height: 64px !important;
  }
  #root > div.min-h-screen > div.h-10:has(> img[src*="logo"])::after {
    font-size: 0.9rem;
  }
}

/* Área de conversación: transparente para que se vea el degradado.
   .bg-presentation = LibreChat estable · .bg-surface-canvas = LibreChat dev (producción) */
.bg-presentation,
#root div.h-full.grow.bg-surface-canvas {
  background-color: transparent !important;
}
/* Contenedor de la caja de mensaje (LibreChat dev): sin color, solo desenfoque.
   En la portada no se nota; en una conversación difumina el texto que pasa por detrás. */
#root div.bg-surface-canvas[class*="chat-form"] {
  background-color: transparent !important;
  backdrop-filter: blur(12px);
}
/* Franja superior (cabecera) de LibreChat dev: sin su degradado opaco */
#root [class*="from-surface-canvas"] {
  background-image: none !important;
}

/* Barra lateral y riel de íconos: vidrio esmerilado
   (bg-surface-primary-alt = LibreChat estable · bg-surface-sidebar = LibreChat dev) */
html.dark nav.bg-surface-primary-alt,
html.dark div.border-r.bg-surface-primary-alt,
html.dark nav.bg-surface-sidebar,
html.dark div.border-r.bg-surface-sidebar {
  background-color: rgb(6 18 31 / 0.62) !important;
  backdrop-filter: blur(14px);
}
html:not(.dark) nav.bg-surface-primary-alt,
html:not(.dark) div.border-r.bg-surface-primary-alt,
html:not(.dark) nav.bg-surface-sidebar,
html:not(.dark) div.border-r.bg-surface-sidebar {
  background-color: rgb(255 255 255 / 0.6) !important;
  backdrop-filter: blur(14px);
}

/* Caja de mensaje: vidrio con borde suave */
html.dark [view-transition-name\:chat-form] form > div,
html.dark .bg-surface-chat {
  background-color: rgb(16 40 70 / 0.72) !important;
  backdrop-filter: blur(10px);
}