/* ══════════════════════════════════════════════════════════════
   SVSK IA · burbuja de chat del sitio público
   Vive fuera de la app de Blazor (se agrega al <body>), por eso
   todos los nombres llevan el prefijo "sia-" y no chocan con nada.
   ══════════════════════════════════════════════════════════════ */
:root {
  --sia-oro: #D4AF37;
  --sia-oro-claro: #F0D27A;
  --sia-fondo: #0E0F14;
  --sia-panel: #15161D;
  --sia-linea: rgba(255,255,255,.09);
  --sia-texto: #ECEAE4;
  --sia-suave: #9C9AA3;
  --sia-tu: #1F3A2E;
}

.sia-raiz { position: fixed; right: 22px; bottom: 22px; z-index: 2147483000; font: 15px/1.45 Inter, "Segoe UI", system-ui, sans-serif; color: var(--sia-texto); }
.sia-raiz[hidden] { display: none; }

/* Burbuja */
.sia-boton { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #1A1B23, #0E0F14); color: var(--sia-texto); font: 600 14.5px Inter, system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(212,175,55,.45), 0 18px 40px -12px rgba(0,0,0,.8), 0 0 40px -12px rgba(212,175,55,.6);
  transition: transform .25s ease, box-shadow .25s ease; }
.sia-boton:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(240,210,122,.8), 0 22px 44px -12px rgba(0,0,0,.85), 0 0 50px -10px rgba(212,175,55,.75); }
.sia-boton:focus-visible { outline: 2px solid var(--sia-oro-claro); outline-offset: 3px; }
.sia-boton img { width: 38px; height: 38px; border-radius: 50%; background: #0B0B0F; padding: 4px; box-shadow: 0 0 0 1px rgba(212,175,55,.5); }
.sia-boton small { display: block; font-weight: 500; font-size: 11.5px; color: var(--sia-suave); }
.sia-punto { width: 9px; height: 9px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61,220,132,.2); margin-left: 4px; }

/* Panel */
.sia-panel { position: absolute; right: 0; bottom: 0; width: 380px; height: min(620px, calc(100vh - 44px)); display: flex; flex-direction: column;
  background: var(--sia-fondo); border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 30px 80px -20px rgba(0,0,0,.9);
  transform-origin: bottom right; animation: sia-abrir .28s cubic-bezier(.2,.8,.2,1); }
.sia-panel[hidden] { display: none; }
@keyframes sia-abrir { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.sia-cab { display: flex; align-items: center; gap: 11px; padding: 14px 14px 14px 16px; background: linear-gradient(180deg, #1A1B23, #13141A); border-bottom: 1px solid var(--sia-linea); }
.sia-cab img { width: 40px; height: 40px; border-radius: 50%; background: #0B0B0F; padding: 4px; box-shadow: 0 0 0 1px rgba(212,175,55,.5); }
.sia-cab b { display: block; font-size: 15px; }
.sia-cab small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sia-suave); }
.sia-cab small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }
.sia-cerrar { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--sia-texto); cursor: pointer; font-size: 18px; line-height: 1; }
.sia-cerrar:hover { background: rgba(255,255,255,.12); }
.sia-cerrar:focus-visible { outline: 2px solid var(--sia-oro-claro); }

.sia-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain;
  background: radial-gradient(120% 60% at 50% 0%, rgba(212,175,55,.06), transparent 60%), var(--sia-fondo); }
.sia-m { max-width: 85%; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; font-size: 14.5px; }
.sia-m.ia { align-self: flex-start; background: var(--sia-panel); border: 1px solid var(--sia-linea); border-bottom-left-radius: 5px; }
.sia-m.tu { align-self: flex-end; background: var(--sia-tu); border-bottom-right-radius: 5px; }
.sia-m.cita { align-self: stretch; max-width: none; background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.06)); border: 1px solid rgba(212,175,55,.45); font-weight: 600; text-align: center; }
.sia-escribe { align-self: flex-start; display: flex; gap: 5px; padding: 13px 14px; border-radius: 16px; background: var(--sia-panel); border: 1px solid var(--sia-linea); }
.sia-escribe i { width: 7px; height: 7px; border-radius: 50%; background: var(--sia-suave); animation: sia-salto 1.2s infinite ease-in-out; }
.sia-escribe i:nth-child(2) { animation-delay: .15s; } .sia-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes sia-salto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.sia-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--sia-linea); background: #12131A; }
.sia-form textarea { flex: 1; resize: none; max-height: 110px; min-height: 44px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--sia-linea);
  background: #0B0C11; color: var(--sia-texto); font: 14.5px/1.4 Inter, system-ui, sans-serif; }
.sia-form textarea:focus { outline: none; border-color: rgba(212,175,55,.6); }
.sia-form button { width: 46px; border: 0; border-radius: 14px; cursor: pointer; background: var(--sia-oro); color: #14110A; font-size: 18px; font-weight: 800; }
.sia-form button:disabled { opacity: .45; cursor: default; }
.sia-form button:focus-visible { outline: 2px solid var(--sia-oro-claro); outline-offset: 2px; }
.sia-aviso { padding: 0 14px 11px; background: #12131A; font-size: 11px; color: var(--sia-suave); }
.sia-aviso a { color: var(--sia-oro-claro); }

@media (max-width: 520px) {
  .sia-raiz { right: 14px; bottom: 14px; }
  .sia-boton small { display: none; }
  .sia-panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sia-panel, .sia-escribe i { animation: none; }
  .sia-boton { transition: none; }
}

/* Formulario de cita: los datos de contacto no pasan por la IA */
.sia-cita { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,175,55,.14), rgba(212,175,55,.04)); border: 1px solid rgba(212,175,55,.45); }
.sia-cita b { font-size: 14.5px; }
.sia-cita p { margin: 0 0 2px; font-size: 12.5px; color: var(--sia-suave); }
.sia-cita input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sia-linea); background: #0B0C11; color: var(--sia-texto); font: 14px Inter, system-ui, sans-serif; }
.sia-cita input:focus { outline: none; border-color: rgba(212,175,55,.6); }
.sia-cita button { margin-top: 2px; padding: 11px; border: 0; border-radius: 10px; background: var(--sia-oro); color: #14110A; font: 700 14px Inter, system-ui, sans-serif; cursor: pointer; }
.sia-cita button:disabled { opacity: .5; cursor: default; }
.sia-cita button:focus-visible { outline: 2px solid var(--sia-oro-claro); outline-offset: 2px; }
.sia-err { font-size: 12.5px; color: #FF8A7A; }