:root{
  --sia-bg:#000; --sia-panel:#000; --sia-border:#000000;
  --sia-text:#ffffff; --sia-accent:#5e17eb; --sia-accent2:#eefb03;
}
#sia-fab{

  width: 86px; height: 86px; border-radius: 999px;
  position: fixed !important;
  right: 20px; bottom: 20px;
  z-index: 2147483647; /* máximo seguro para overlays */

  display: grid; place-items: center; cursor: pointer; outline: none; user-select:none;
  transition: transform .2s ease, box-shadow .2s ease;
  background-color: #000;
}
#sia-fab:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.4), 0 0 0 2px rgba(238,251,3,.18) inset; }
#sia-fab:focus{ box-shadow: 0 0 0 3px rgba(94,23,235,.45); }

#sia-panel{
  position: fixed; right: 20px; bottom: 100px; z-index: 9999;
  width: clamp(220px, 38vw, 280px); max-height: 82vh;
  background: var(--sia-panel); color: var(--sia-text);
  border: 1px solid var(--sia-border); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  display: flex; flex-direction: column;
}
#sia-panel.is-open{
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

.sia-panel__header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--sia-border);
  background: linear-gradient(180deg, rgba(94,23,235,.18), rgba(94,23,235,0) 60%);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.sia-title{ font-family: system-ui, Arial; font-size: 14px; letter-spacing:.2px; }
.sia-actions{ display: flex; gap: 6px; }
.sia-ico-btn{
  width: 30px; height: 30px; display: grid; place-items:center;
  background: transparent; border: 1px solid var(--sia-border);
  color: #cfd2ff; border-radius: 8px; cursor:pointer;
}
.sia-ico-btn:hover{ background: #171a35; }

.sia-panel__body{ display: block; grid-template-columns: 220px 1fr; gap: 12px; padding: 12px; }
.sia-avatar-wrap{
  background: radial-gradient(120% 120% at 70% 30%, #000 0%, #000 70%);
  border: 1px solid var(--sia-border); border-radius: 12px;
  display: block; place-items: center; min-height: 220px;
}
#sia-canvas{ width: 100%; height: 220px; display:block; }

.sia-chat{ display:flex; flex-direction:column; min-height: 220px; }
.sia-messages{
  flex:1; overflow:auto; padding: 8px; border:1px solid var(--sia-border);
  border-radius: 10px; background:#000000;
}
.sia-msg{ font-size: 14px; line-height:1.45; margin:6px 0; }
.sia-msg.you{ color:#c0caf5; }
.sia-msg.bot{ color:#9f9f9f; }

.sia-form{ display:flex; gap:8px; margin-top:8px; }
.sia-form input{
  flex:1; background:#0f1130; color:#fff; border:1px solid var(--sia-border);
  border-radius:10px; padding:10px 12px; outline:none;
}
.sia-send{
  width:42px; border-radius:10px; background: var(--sia-accent);
  color:#fff; border:none; display:grid; place-items:center; cursor:pointer;
}
.sia-send:hover{ filter: brightness(1.1); }

@media (max-width: 820px){
  #sia-panel{ width: calc(100vw - 24px); right: 12px; bottom: 88px; }
  .sia-panel__body{ grid-template-columns: 1fr; }
  #sia-canvas{ height: 180px; }
}


#sia-input{
background:#0f1130!important; color:#fff!important
}



/* ===== Panel fijo + scroll interno como ChatGPT ===== */
#sia-panel{
  max-height: 80dvh;           /* alto controlado */
  overflow: hidden;            /* el scroll vive adentro */
  display: flex;
  flex-direction: column;
}

/* Cuerpo del panel: no crece, reparte espacio internamente */
.sia-panel__body{
  /* convertimos a layout vertical; el avatar arriba, chat abajo */
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  min-height: 0;               /* clave p/que los hijos puedan overflow */
  overflow: hidden;
}

/* Avatar: alto controlado para no comer espacio al chat */


/* Chat: contenedor con scroll sólo en los mensajes */
.sia-chat{
  display: flex;
  flex-direction: column;
  min-height: 0;               /* permite que .sia-messages use overflow */
  overflow: hidden;
}

/* Timeline con scroll interno */
.sia-messages{
  flex: 1 1 auto;              /* ocupa todo lo disponible */
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--sia-border);
  border-radius: 10px;
  background: #000000;
  scroll-behavior: smooth;
}

/* Input SIEMPRE visible, no lo empujan los mensajes */
.sia-form{
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75) 40%);
  border-top: 1px solid var(--sia-border);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.sia-form input{
  height: 42px;
  max-height: 42px;
  background:#0f1130 !important;
  color:#fff !important;
}

/* ===== Fullscreen: aprovecha todo el alto ===== */
#sia-panel.is-fs{
  inset: auto 20px 20px auto;  /* anclado a la derecha */
  width: min(720px, 100dvw);
  max-height: 100dvh;
}
#sia-panel.is-fs .sia-panel__body{
  height: calc(100dvh - 48px); /* ajusta si tu header es + alto */
  overflow: hidden;
}
#sia-panel.is-fs .sia-messages{
  /* un poco más de aire en fullscreen */
  padding: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 820px){
  #sia-panel{
    width: calc(100dvw - 24px);
    right: 12px; bottom: 88px;
    max-height: 86dvh;
  }
  #sia-panel.is-fs{
    right: 0; bottom: 0; left: 0;
    width: 100dvw;
    border-radius: 0;
  }
  .sia-panel__body{
    height: calc(86dvh - 48px);
  }
  #sia-canvas{ height: 180px; }
}

/* ===== Detalles ===== */
#sia-fab{
  /* ya fixed + z-index alto en tu base, mantenemos */
  will-change: transform;
}



/* ===== Scrollbar personalizado estilo tech ===== */
.sia-messages::-webkit-scrollbar {
  width: 6px;
  background: transparent; /* invisible cuando no hay scroll */
}

.sia-messages::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  margin: 4px 0;
}

.sia-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sia-accent), var(--sia-accent2));
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(94,23,235,0.5);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.sia-messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--sia-accent2), var(--sia-accent));
  box-shadow: 0 0 10px rgba(238,251,3,0.6);
}

.sia-messages::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
.sia-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--sia-accent) rgba(255,255,255,0.05);
}

/* efecto "auto-ocultable" moderno */
.sia-messages {
  scrollbar-gutter: stable;
  transition: scrollbar-color 0.3s ease;
}


.sia-messages::-webkit-scrollbar {
  width: 4px;
  opacity: 0;
  transition: opacity .3s ease;
}
.sia-messages:hover::-webkit-scrollbar {
  opacity: 1;
}


/* Formato de contenido (Markdown) dentro de mensajes del bot */
.sia-msg.bot .md{
  font-size: 14px;
  line-height: 1.6;
  color: #cfd2ff;
}

.sia-msg.bot .md p{ margin: .5rem 0; }
.sia-msg.bot .md h4{
  margin: .75rem 0 .35rem;
  font-size: 15px;
  font-weight: 700;
  color: #e7e9ff;
}

.sia-msg.bot .md ul,
.sia-msg.bot .md ol{
  margin: .4rem 0 .6rem .95rem;
  padding-left: .8rem;
}

.sia-msg.bot .md ul{ list-style: disc; }
.sia-msg.bot .md ol{ list-style: decimal; }

.sia-msg.bot .md li{ margin: .25rem 0; }
.sia-msg.bot .md a{
  color: var(--sia-accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(94,23,235,.4);
}
.sia-msg.bot .md a:hover{
  color: #fff; border-bottom-color: rgba(94,23,235,.8);
}

/* Código */
.sia-msg.bot .md pre{
  background: #0f1130;
  color: #e6e6e6;
  border: 1px solid var(--sia-border);
  border-radius: 8px;
  padding: 10px 12px;
  overflow:auto;
  margin: .6rem 0;
}
.sia-msg.bot .md code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* Bloques > ajustan ancho en mobile */
@media (max-width: 820px){
  .sia-msg.bot .md ul, .sia-msg.bot .md ol{ margin-left: .8rem; }
  .sia-msg.bot .md pre{ font-size: 12px; }
}


/* Avatar: cuadrado por defecto (ocupa todo el ancho) */
.sia-avatar-wrap{
  width: 100%;
  aspect-ratio: 1 / 1;                 /* cuadrado perfecto */
  height: auto !important;
  min-height: 0 !important;
  transition: width .42s cubic-bezier(.2,.7,.2,1), transform .42s cubic-bezier(.2,.7,.2,1);
  margin: 0 auto;                       /* centra cuando reduzca el ancho */
  overflow: hidden !important;
}

/* Canvas sigue al contenedor (no forzar height) */
#sia-canvas{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Estado encogido: reduce ANCHO (la altura se ajusta sola) */
.sia-avatar-wrap.is-shrunk{
  width: 60%;                           /* cambia a 50% si querés */
}

/* En mobile podés dejarlo un poco más grande */
@media (max-width: 820px){
  .sia-avatar-wrap.is-shrunk{ width: 70%; }
}


/* Panel minimizado: se muestra sólo el header (tipo “barra”) */
#sia-panel.is-min .sia-panel__body{ display: none; }
#sia-panel.is-min{
  width: 320px;                 /* ancho de la barrita */
  max-height: 56px;
  bottom: 100px;
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Botón minimizar con sutil énfasis */
#sia-minimize{
  font-size: 18px; line-height: 1; padding-bottom: 2px;
}


/* Mini-form dentro del chat */
.sia-cvcard{ border:1px solid var(--sia-border); border-radius:10px; padding:10px; background:#0b0d22; margin:8px 0; }
.sia-cvcard label{ display:block; font-size:12.5px; color:#cfd2ff; margin:6px 0 4px; }
.sia-cvcard input[type="text"],
.sia-cvcard input[type="email"],
.sia-cvcard input[type="tel"],
.sia-cvcard textarea{
  width:100%; background:#0f1130; color:#fff; border:1px solid var(--sia-border); border-radius:8px; padding:8px 10px;
}
.sia-cvcard input[type="file"]{ width:100%; color:#cfd2ff; }
.sia-cvcard .cv-actions{ display:flex; gap:8px; margin-top:8px; }
.sia-btn{ background:var(--sia-accent); color:#fff; border:0; border-radius:8px; padding:8px 12px; cursor:pointer; }
.sia-btn.secondary{ background:#1f233e; }
.sia-cvnote{ font-size:12px; color:#aab; margin-top:4px; }