/* =========================
   BASE LAYOUT
   ========================= */

html, body { height: 100%; }

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  padding:20px;
  overflow:hidden;
  margin:0;
}

/* Contenedor principal */
#main{
  display:flex;
  flex-direction:column;
  height:80vh;
  width:94vw;
  max-width:540px;
  box-shadow:0 2px 4px #000a;
  border-radius:8px;
  overflow:hidden;
  position:relative;
  padding:10px;
}

/* =========================
   HEADER (logo + título)
   ========================= */

.header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#1e1c6f;
  color:#00b4f6;
  padding:10px;
  border-radius:8px;
  box-shadow:0 2px 6px #000a;
  border:1px solid #ccc;
  font-size:22px;
  font-weight:bold;
  margin:0;
}

.logo-header{
  height:38px;
  width:auto;
  object-fit:contain;
  transition:transform .3s ease;
}
.logo-header:hover{ transform:scale(1.08); }

/* Si todavía usas <h2> sin clase header */
h2{
  text-align:center;
  background:#1e1c6f;
  color:#00b4f6;
  padding:8px;
  border-radius:8px;
  box-shadow:0 2px 4px #000a;
  border:1px solid #ccc;
  margin:0;
}

/* =========================
   CHAT AREA
   ========================= */

#msg{
  flex:1;
  overflow-y:auto;
  margin:8px 0;
}

.chat{
  display:flex;
  flex-direction:column;
}

/* Mensajes */
.left, .right,
.message.left, .message.right{
  font-size:16px;
  display:inline-block;
  padding:14px;
  width:auto;
  max-width:60%;
  margin:8px;
  font-family:monospace;
  word-wrap:break-word;
  box-shadow:0 2px 4px #000a;
}

/* Bot */
.left, .message.left{
  color:#000;
  background:#dadcde;
  border-radius:20px 20px 20px 0;
  align-self:flex-start;
}

/* Usuario */
.right, .message.right{
  color:#000;
  background:#b3bfca;
  border-radius:20px 20px 0 20px;
  align-self:flex-end;
}
.right{ float:none; }

/* =========================
   INPUT AREA
   ========================= */

.input{
  display:flex;
  padding:8px;
  gap:10px;
  align-items:center;
}

/* Caja de texto */
#msg_send{
  outline:none;
  font-size:16px;
  padding:10px;
  width:100%;
  border-radius:8px;
  border:1px solid #ccc;
  background:#0098c5;
  box-shadow:0 2px 4px #000a;
  color:#000;
}

/* =========================
   BOTÓN ENVIAR (WhatsApp style)
   - se oculta por defecto y aparece solo con texto
   ========================= */

.enviar{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #ccc;
  box-shadow:0 2px 2px #000a;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#1e1c6f;
  color:#00b4f6;
  transition:transform .1s, opacity .2s ease;
  outline:none;
  flex:0 0 auto;
}

/* oculto cuando no hay texto */
.enviar.is-hidden{
  display:none;
}

/* deshabilitado por seguridad (si quieres mantenerlo) */
.enviar:disabled{
  cursor:not-allowed;
  opacity:.65;
}

/* click */
.enviar:active{
  transform:scale(.98);
}

/* =========================
   MIC + TTS (MISMA “TEXTURA” QUE ENVIAR)
   ========================= */

.mic-btn, .tts-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #ccc;
  box-shadow:0 2px 2px #000a;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:#1e1c6f;      /* mismo fondo que enviar */
  color:#00b4f6;            /* mismo color que enviar */
  transition:transform .1s, opacity .2s ease;
  outline:none;
  flex:0 0 auto;
}

.mic-btn:active, .tts-btn:active{
  transform:scale(.98);
}

/* TTS apagado */
.tts-btn.off{
  background:#b3bfca;
  color:#111;
}

/* MIC grabando */
.mic-btn.recording{
  background:#1e1c6f;
  color:#00b4f6;
  position:relative;
}

.mic-btn.recording::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:10px;
  height:10px;
  background:#ff3b30;
  border-radius:999px;
  box-shadow:0 0 0 0 rgba(255,59,48,.7);
  animation:micPulse 1.1s infinite;
}

@keyframes micPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,59,48,.7); }
  70%{ box-shadow:0 0 0 12px rgba(255,59,48,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,48,0); }
}

/* Indicador “Grabando…” */
.rec-indicator{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #cfd6dd;
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  font-size:13px;
  color:#111;
  user-select:none;
}

.rec-indicator .dot{
  width:10px;
  height:10px;
  background:#ff3b30;
  border-radius:999px;
  animation:micPulse 1.1s infinite;
}

/* =========================
   LOADER
   ========================= */

.loader{
  border:8px solid #f3f3f3;
  border-radius:50%;
  border-top:8px solid #0098c5;
  width:50px;
  height:50px;
  animation:spin 2s linear infinite;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

@keyframes spin{
  0%{ transform:translate(-50%,-50%) rotate(0deg); }
  100%{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* =========================
   SINTRABOT PRO - FUENTES
   ========================= */

.sources-toggle{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(0,180,246,0.20), rgba(30,28,111,0.30));
  border:1px solid rgba(0,180,246,0.35);
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
  font-size:13px;
  font-weight:700;
  color:#00b4f6;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, opacity .2s ease, box-shadow .2s ease;
}
.sources-toggle:hover{
  transform:translateY(-1px);
  opacity:.95;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.sources-toggle:active{ transform:translateY(0); }

.sources-icon{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#00b4f6;
  box-shadow:0 0 12px rgba(0,180,246,0.65);
  animation:sintraPulse 1.6s ease-in-out infinite;
}

@keyframes sintraPulse{
  0%{ transform:scale(.9); opacity:.7; }
  50%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(.9); opacity:.7; }
}

.sources-container{
  margin-top:10px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .35s ease, opacity .25s ease;
}
.sources-container.open{
  max-height:220px;
  opacity:1;
}

.source-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  margin:6px 8px 0 0;
  border-radius:999px;
  border:1px solid rgba(0,180,246,0.30);
  background:linear-gradient(135deg, rgba(30,28,111,0.75), rgba(0,152,197,0.45));
  color:#e7f6ff;
  font-size:12px;
  font-family:monospace;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.source-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  opacity:.97;
}

.doc-icon{
  display:inline-block;
  animation:docSway 2.2s ease-in-out infinite;
}
@keyframes docSway{
  0%{ transform:rotate(-2deg); }
  50%{ transform:rotate(2deg); }
  100%{ transform:rotate(-2deg); }
}
/* Ocultar dinámicamente */
.is-hidden {
  display: none !important;
}.enviar {
  transition: transform .15s ease, opacity .2s ease;
}

.enviar:not(.is-hidden) {
  animation: sendPop .15s ease;
}

@keyframes sendPop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}