:root{
  --neon-pink: #ff2d95;
  --neon-cyan: #00f0ff;
  --neon-purple: #9b5cff;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.04);
  --accent: var(--neon-cyan);
  --muted: rgba(255,255,255,0.12);
  --radius: 12px;
  --glow: 0 0 12px rgba(0,255,255,0.08), 0 0 28px rgba(155,92,255,0.06);
  font-family: "Share Tech Mono", monospace;
}

/* Fondo animado */
body{
  background: radial-gradient(ellipse at 10% 10%, rgba(155,92,255,0.08), transparent 10%),
              radial-gradient(ellipse at 90% 90%, rgba(0,240,255,0.06), transparent 10%),
              linear-gradient(180deg, #06040a 0%, #0b0710 100%);
  min-height: 100vh;
  color: #e6f7ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animated scanline overlay */
body::after{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  background-image: linear-gradient(transparent 94%, rgba(255,255,255,0.01) 96%);
  mix-blend-mode: overlay;
  opacity:0.6;
  z-index:0;
}

/* Contenedor principal */
.container { position: relative; z-index:1; }

/* Cards estilo ciberpunk */
.card{
  background: linear-gradient(180deg, rgba(10,6,14,0.6), rgba(5,3,8,0.55));
  border: 1px solid rgba(150,100,255,0.12);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 28px rgba(155,92,255,0.06);
  border-radius: var(--radius);
  backdrop-filter: blur(6px) saturate(120%);
}

/* Cabecera / botones */
#themeSwitch{
  font-family: "Orbitron", sans-serif;
  color: white;
  background: linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  border: none;
  box-shadow: 0 6px 22px rgba(0,0,0,0.6), 0 0 18px rgba(0,240,255,0.12);
  padding: .35rem .6rem;
  border-radius: 8px;
}

/* Input y botón enviar */
.input-group .form-control{
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(0,240,255,0.06);
  color: #e6f7ff;
  font-family: "Share Tech Mono", monospace;
  resize: none;
}
#sendButton{
  background: linear-gradient(90deg,var(--neon-cyan),var(--neon-purple));
  border: none;
  color: #02020a;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 20px rgba(0,240,255,0.12);
  padding: .5rem .9rem;
}

/* Burbujas de chat */
#chat_body { padding: 1rem; }
#chat_body .d-flex {
  margin-bottom: 0.65rem;
}
#chat_body [data-role="user"] {
  background: linear-gradient(90deg, rgba(0,240,255,0.14), rgba(155,92,255,0.12));
  color: #eaffff;
  border-left: 3px solid var(--neon-pink);
  box-shadow: 0 4px 18px rgba(155,92,255,0.06), 0 0 14px rgba(0,240,255,0.06);
  padding: .5rem .75rem;
  border-radius: 8px;
}
#chat_body [data-role="assistant"] {
  background: linear-gradient(90deg, rgba(155,92,255,0.06), rgba(0,240,255,0.06));
  color: #eaf4ff;
  border-right: 3px solid var(--neon-cyan);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 12px rgba(155,92,255,0.06);
  padding: .5rem .75rem;
  border-radius: 8px;
}

/* Burbuja texto streaming (cursor) */
#chat_body span {
  font-family: "Share Tech Mono", monospace;
  line-height:1.35;
  font-size:0.95rem;
}

/* Barra de progreso con glow */
progress#progressbar {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(155,92,255,0.06);
  box-shadow: 0 0 18px rgba(155,92,255,0.04);
  width: 100%;
}
progress#progressbar::-webkit-progress-value {
  background: linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));
  box-shadow: 0 0 18px rgba(0,240,255,0.12);
}

/* Scrollbar personalizado */
#chat_body::-webkit-scrollbar { width: 10px; }
#chat_body::-webkit-scrollbar-track { background: transparent; }
#chat_body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(155,92,255,0.25), rgba(0,240,255,0.25));
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.25);
}

/* Pequeñas animaciones */
@keyframes pulse-neon {
  0% { box-shadow: 0 0 6px rgba(0,240,255,0.08); transform: translateY(0); }
  50% { box-shadow: 0 0 20px rgba(155,92,255,0.12); transform: translateY(-1px); }
  100% { box-shadow: 0 0 6px rgba(0,240,255,0.08); transform: translateY(0); }
}
#sendButton:hover, #themeSwitch:hover { transform: translateY(-2px); animation: pulse-neon 1.6s infinite; }

/* Tema claro: versión ampliada y afinada para mantener estética ciberpunk en modo claro */
html[data-bs-theme="light"] {
  --neon-pink: #ff2d95;
  --neon-cyan: #00a8c6;
  --neon-purple: #8b57d6;

  background: linear-gradient(180deg, #f6f7fb 0%, #eef2ff 100%);
  color: #081229;
  filter: none;
}

/* Ajustes de body en modo claro (suavizar overlay) */
html[data-bs-theme="light"] body {
  background: linear-gradient(180deg, #f6f7fb 0%, #eef2ff 100%);
  color: #081229;
}
html[data-bs-theme="light"] body::after {
  /* overlay más sutil para el efecto scanline en claro */
  background-image: linear-gradient(transparent 94%, rgba(0,0,0,0.02) 96%);
  mix-blend-mode: overlay;
  opacity: 0.18;
}

/* Cards en claro: cristal más luminoso con borde neón suave */
html[data-bs-theme="light"] .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,255,0.98));
  border: 1px solid rgba(34, 17, 51, 0.04);
  box-shadow: 0 6px 20px rgba(10,10,30,0.04), 0 0 24px rgba(139,87,214,0.04);
}

/* Cabecera / botones en claro */
html[data-bs-theme="light"] #themeSwitch{
  color: #081229;
  background: linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 16px rgba(10,10,30,0.04), 0 0 14px rgba(0,168,198,0.06);
}

/* Inputs en claro */
html[data-bs-theme="light"] .input-group .form-control{
  background: rgba(250,250,255,0.9);
  border: 1px solid rgba(139,87,214,0.06);
  color: #081229;
  box-shadow: none;
}
html[data-bs-theme="light"] #sendButton{
  background: linear-gradient(90deg,var(--neon-cyan),var(--neon-purple));
  color: #081229;
  box-shadow: 0 6px 14px rgba(139,87,214,0.06);
}

/* Burbujas de chat en claro: mantener bordes neón pero fondo claro */
html[data-bs-theme="light"] #chat_body { background: transparent; }
html[data-bs-theme="light"] #chat_body [data-role="user"] {
  background: linear-gradient(90deg, rgba(0,168,198,0.08), rgba(155,92,255,0.03));
  color: #081229;
  border-left: 3px solid rgba(255,45,149,0.9);
  box-shadow: 0 4px 12px rgba(139,87,214,0.04), 0 0 6px rgba(0,168,198,0.06);
}
html[data-bs-theme="light"] #chat_body [data-role="assistant"] {
  background: linear-gradient(90deg, rgba(155,92,255,0.03), rgba(0,168,198,0.04));
  color: #081229;
  border-right: 3px solid rgba(0,168,198,0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03), 0 0 8px rgba(139,87,214,0.04);
}

/* Texto de los mensajes en claro */
html[data-bs-theme="light"] #chat_body span {
  color: #081229;
}

/* Barra de progreso en claro */
html[data-bs-theme="light"] progress#progressbar {
  background: rgba(10,10,20,0.03);
  border: 1px solid rgba(139,87,214,0.04);
  box-shadow: 0 0 12px rgba(139,87,214,0.03);
}
html[data-bs-theme="light"] progress#progressbar::-webkit-progress-value {
  background: linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));
  box-shadow: 0 0 12px rgba(139,87,214,0.06);
}

/* Scrollbar en claro (sutil) */
html[data-bs-theme="light"] #chat_body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(139,87,214,0.18), rgba(0,168,198,0.12));
  border: 2px solid rgba(255,255,255,0.6);
}

/* Hovers y pulsos en claro (menos intenso) */
html[data-bs-theme="light"] #sendButton:hover, html[data-bs-theme="light"] #themeSwitch:hover {
  transform: translateY(-1px);
  animation: pulse-neon 1.6s infinite;
  opacity: 0.98;
}