/* ===== Layout del widget ===== */
html, body { height:100%; margin:0; }
body { overflow:hidden; } /* el scroll es dentro del widget */

#chat-container{
  width:350px; height:500px;
  position:fixed; bottom:0; right:0;
  background:#fff; border:1px solid #d8dee4; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  font-size:14px;
}
#chat-container, #chat-container * { box-sizing:border-box; }

/* ===== Header ===== */
#chat-header{
  display:flex; align-items:center; justify-content:space-between;
  background:#0d6efd; color:#fff; padding:8px 10px;
  position:relative; z-index:2; /* para que el menú de idiomas quede encima */
}
.hdr-left,.hdr-right{ display:flex; align-items:center; gap:8px; }
.hdr-title{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#chat-header img, #logout-chat-icon, #close-chat-btn{
  width:22px !important; height:22px !important; flex:0 0 22px;
}

/* ===== Zonas desplazables (solo 1 visible a la vez) ===== */
#user-info-form, #verification-message, #chat-body{
  flex:1; overflow:auto; padding:10px;
}

/* ===== Form ===== */
#user-info-form{ display:flex; flex-direction:column; gap:10px; padding-bottom:14px; }
#user-info-form input[type="text"],
#user-info-form input[type="email"]{
  width:100%; height:36px; padding:8px 10px;
  border:1px solid #cbd5e1; border-radius:8px; background:#fff;
}
#user-info-form .hint-row small{ color:#475569; display:block; }

/* ===== Privacidad ===== */
.privacy{ display:flex; align-items:center; gap:8px; margin:6px 0; }
#toggle-privacy-details{ color:#1677ff; text-decoration:underline; cursor:pointer; }
#toggle-privacy-details:hover{ text-decoration:none; }
.privacy-details{
  font-size:12px; color:#334155; background:#f8fafc;
  border:1px solid #e2e8f0; border-radius:8px; padding:10px; margin-top:6px;
  max-height:220px; overflow:auto;
}
.privacy-details[hidden]{ display:none !important; }

/* ===== Verificación (integrado) ===== */
#verification-message{
  background:#f3f6fb; border:1px solid #e6eefc; border-radius:10px; padding:10px; margin:10px 0;
}

/* ===== Footer ===== */
#chat-footer{
  display:flex; align-items:center; gap:8px; background:#0d6efd; padding:8px; border-top:1px solid #cfe2ff;
}
#chat-input{ flex:1; height:34px; padding:6px 10px; border:1px solid #cbd5e1; border-radius:8px; }
#send-btn{ width:32px; height:32px; }

/* ===== Mensajes ===== */
#chat-messages{ display:flex; flex-direction:column; gap:10px; min-height:100%; }
.chat-message{ max-width:80%; border-radius:15px; padding:10px; }
.user-message{ margin-left:auto; background:#87fe90; border-radius:15px 15px 0 15px; }
.bot-message{ margin-right:auto; background:#e9f2ff; border-radius:15px 15px 15px 0; }

/* ===== Botones de opciones ===== */
.chat-opcion-busqueda{
  background:#0d6efd; color:#fff; border:1px solid #0b5ed7;
  padding:6px 10px; border-radius:10px; margin:4px; cursor:pointer; font-size:12px;
}
.chat-opcion-busqueda:hover{ background:#0b5ed7; }

/* ===== Botones genéricos (incluye CTA) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem .9rem; border-radius:10px; border:0;
  font-weight:700; line-height:1; cursor:pointer;
}
.btn-primary{ background:#1677ff; color:#fff; }
.btn-cta{ background:#1677ff; color:#fff; width:100%; margin-top:.5rem; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ===== Selector de idioma ===== */
.lang-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-weight:700;
  background:#fff; color:#0d6efd; border:1px solid #cfe2ff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.lang-pill .flag{ font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui; line-height:1; }
.lang-menu{
  position:absolute; top:42px; left:8px;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:8px; min-width:110px; z-index:9999;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  margin:0; list-style:none;
}
.lang-menu[hidden]{ display:none !important; }
.lang-menu, .lang-menu *{ list-style:none; margin:0; padding:0; }
.lang-menu button{ background:none; border:0; } /* reset SOLO dentro del menú */
.lang-item{
  display:flex; align-items:center; gap:8px; width:100%;
  border:1px solid #e5e7eb; background:#f8fafc;
  border-radius:8px; padding:6px 10px; margin:4px 0;
  font-weight:700; cursor:pointer;
}
.lang-item:hover{ background:#eaf3ff; }

/* Accesibilidad/foco */
#chat-container *:focus{ outline:none; }
#chat-container *:focus-visible{ outline:2px solid #2684ff; outline-offset:2px; }

/* Icono/foto en respuestas */
.chat-icono-foto-container{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }