/* =====================================================================
   AnfiChat — Chat flotante CatBot para Anfog Estudio
   Versión Híbrida: limpio + detalles cyber
   ===================================================================== */

#anfi-chat-container {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- BOTÓN FLOTANTE — Estilo cyber ---------- */
#anfi-chat-button {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #2fb593;
  background: rgba(10, 20, 18, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 20px rgba(47, 181, 147, 0.4),
    0 0 40px rgba(47, 181, 147, 0.15),
    inset 0 0 12px rgba(47, 181, 147, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 4px;
  overflow: visible;
}

#anfi-chat-button:hover {
  transform: scale(1.08);
  border-color: #4ac7ac;
  box-shadow: 
    0 0 28px rgba(47, 181, 147, 0.7),
    0 0 60px rgba(47, 181, 147, 0.25),
    inset 0 0 16px rgba(47, 181, 147, 0.2);
}

#anfi-chat-button:active {
  transform: scale(0.96);
}

#anfi-chat-button img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 50%;
}

#anfi-chat-button.open {
  transform: scale(0.92);
}

/* Badge turquesa fijo (indicador "en línea") */
.anfi-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: #24f5bc;
  border-radius: 50%;
  border: 2px solid #0a1412;
  box-shadow: 0 0 8px rgba(36, 245, 188, 0.5);
}

/* ---------- VENTANA DE CHAT — Híbrido cyber ---------- */
#anfi-chat-window {
  position: absolute;
  bottom: 90px;
  right: 0;
  width: 360px;
  height: 540px;
  max-height: calc(100vh - 140px);
  /* Glassmorphism: fondo oscuro semitransparente */
  background: rgba(15, 20, 25, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Borde holográfico turquesa al 35% (paleta de marca) */
  border: 1px solid rgba(47, 181, 147, 0.35);
  border-radius: 16px;
  box-shadow: 
    0 0 24px rgba(36, 245, 188, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: anfiSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fallback para navegadores sin backdrop-filter: subimos la opacidad para mantener legibilidad */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  #anfi-chat-window {
    background: rgba(15, 20, 25, 0.92);
  }
}

#anfi-chat-window.visible {
  display: flex;
}

@keyframes anfiSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- HEADER — Gradiente cyber ---------- */
.anfi-header {
  background: linear-gradient(135deg, #0f2922 0%, #1a725d 50%, #2fb593 100%);
  color: white;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.anfi-avatar {
  width: 40px;
  height: 40px;
  border: 1.5px solid #24f5bc;
  background: rgba(36, 245, 188, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(36, 245, 188, 0.3);
}

.anfi-avatar img {
  width: 100%;
  height: 100%;
}

.anfi-header-info { flex: 1; }

.anfi-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.anfi-status {
  font-size: 10px;
  color: #24f5bc;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
}

.anfi-status-dot {
  width: 6px;
  height: 6px;
  background: #24f5bc;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #24f5bc;
}

#anfi-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
  padding: 0;
}

#anfi-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- MENSAJES ---------- */
#anfi-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Transparente para que se vea el glassmorphism del contenedor */
  background: transparent;
}

/* Línea decorativa de "sesión iniciada" */
#anfi-messages::before {
  content: '— sesión iniciada —';
  display: block;
  text-align: center;
  font-size: 9px;
  color: rgba(47, 181, 147, 0.7);
  letter-spacing: 2px;
  padding: 4px 0 8px;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
}

#anfi-messages::-webkit-scrollbar { width: 4px; }
#anfi-messages::-webkit-scrollbar-thumb {
  background: rgba(47, 181, 147, 0.3);
  border-radius: 2px;
}

.anfi-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: anfiMsgIn 0.25s ease-out;
}

@keyframes anfiMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.anfi-msg-user { align-items: flex-end; }
.anfi-msg-bot { align-items: flex-start; }

.anfi-bubble {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-line;
  word-wrap: break-word;
}

/* Mensaje del bot — fondo blanco humo + texto gris carbón para legibilidad sobre el glassmorphism */
.anfi-msg-bot .anfi-bubble {
  background: #F0F0F0;
  color: #2B2B2B;
  border-left: 2px solid #2fb593;
  border-radius: 4px 12px 12px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Mensaje del usuario — gradiente verde con borde turquesa */
.anfi-msg-user .anfi-bubble {
  background: linear-gradient(135deg, #1a725d, #2fb593);
  color: white;
  border-right: 2px solid #24f5bc;
  border-radius: 12px 4px 12px 12px;
  box-shadow: 0 2px 8px rgba(47, 181, 147, 0.25);
}

/* Indicador de "escribiendo..." */
.anfi-typing {
  display: flex;
  gap: 4px;
  padding: 14px 16px !important;
  align-items: center;
}

.anfi-typing span {
  width: 7px;
  height: 7px;
  background: #2fb593;
  border-radius: 50%;
  animation: anfiTypingDot 1.4s infinite ease-in-out;
}

.anfi-typing span:nth-child(2) { animation-delay: 0.2s; }
.anfi-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes anfiTypingDot {
  0%, 60%, 100% { transform: scale(0.7); opacity: 0.5; }
  30% { transform: scale(1); opacity: 1; }
}

/* ---------- SUGERENCIAS — Estilo comando terminal ---------- */
.anfi-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.anfi-suggestion-btn {
  background: rgba(47, 181, 147, 0.08);
  border: 1px solid rgba(47, 181, 147, 0.5);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11.5px;
  cursor: pointer;
  color: #24f5bc;
  transition: all 0.2s;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.anfi-suggestion-btn::before { content: '[ '; }
.anfi-suggestion-btn::after { content: ' ]'; }

.anfi-suggestion-btn:hover {
  background: linear-gradient(135deg, #1a725d, #2fb593);
  color: white;
  border-color: #2fb593;
  box-shadow: 0 0 12px rgba(47, 181, 147, 0.3);
}

/* ---------- INPUT ---------- */
.anfi-input-area {
  padding: 12px;
  background: rgba(15, 20, 25, 0.35);
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(47, 181, 147, 0.2);
  flex-shrink: 0;
  align-items: center;
  position: relative;
}

#anfi-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(47, 181, 147, 0.3);
  border-radius: 20px;
  font-size: 16px;
  outline: none;
  font-family: inherit;
  transition: all 0.2s;
  min-width: 0;
  background: rgba(15, 20, 25, 0.55);
  color: #F0F0F0;
}

#anfi-input::placeholder {
  color: rgba(240, 240, 240, 0.45);
}

#anfi-input:focus {
  border-color: #2fb593;
  background: rgba(15, 20, 25, 0.75);
  box-shadow: 0 0 0 3px rgba(47, 181, 147, 0.15);
}

#anfi-send-btn {
  background: linear-gradient(135deg, #1a725d, #2fb593);
  border: none;
  color: white;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 0 12px rgba(36, 245, 188, 0.3);
}

#anfi-send-btn:hover { 
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(36, 245, 188, 0.5);
}
#anfi-send-btn:active { transform: scale(0.92); }

/* ---------- BOTÓN WHATSAPP — Estilo comando ---------- */
.anfi-whatsapp-btn {
  background: #25d366;
  color: white;
  border: none;
  padding: 11px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.2s;
  flex-shrink: 0;
}

.anfi-whatsapp-btn::before { content: '[ '; }
.anfi-whatsapp-btn::after { content: ' ]'; }

.anfi-whatsapp-btn:hover { background: #1ebe5a; }

.anfi-whatsapp-btn svg {
  width: 14px;
  height: 14px;
}

/* ---------- RESPONSIVE (móviles) ---------- */
@media (max-width: 480px) {
  #anfi-chat-container {
    bottom: 20px;
    right: 20px;
  }
  
  /* Panel flotante contenido en móvil — NO fullscreen.
     Usamos dvh (dynamic viewport height) para que la altura se reajuste
     sola cuando el teclado virtual aparece, sin tener que ocupar toda la
     pantalla. Anclado arriba para que el botón del gato quede visible
     abajo a la derecha. */
  #anfi-chat-window {
    position: fixed;
    top: 16px;
    right: 12px;
    left: auto;
    bottom: auto;
    width: calc(100vw - 24px);
    max-width: 380px;
    height: 70dvh;
    max-height: 600px;
    margin: 0;
  }

  /* Fallback para navegadores sin soporte de dvh */
  @supports not (height: 100dvh) {
    #anfi-chat-window {
      height: 70vh;
    }
  }
  
  #anfi-chat-button {
    width: 64px;
    height: 64px;
  }
}