/* Botón flotante */
#asicon-chat-launcher {
  position: fixed;
  right: 30px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  border: 0.5px solid #bebebe;
  cursor: pointer;
  outline: none;
  text-align: center;
  padding: 0;
  box-shadow: 2px 2px 3px #000;
  z-index: 2147483000;

  background-image: url('../../resources/images/bot/andy_2.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;

  transition: all 0.25s ease-in-out;
}

/* 👇 Cambio de imagen al pasar el mouse */
#asicon-chat-launcher:hover,
#asicon-chat-launcher:active {
  background-image: url('../../resources/images/bot/andy.png');
  box-shadow: 3px 3px 6px rgba(0,0,0,.28);
  transform: translateY(-1px);
}

/* Modal overlay */
#asicon-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  z-index: 2147483001;
}

#asicon-chat-close svg {
  width: 25px;
  height: 22px;
}

/* Modal contenedor */
#asicon-chat-modal {
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: 380px;
  max-width: 96vw;
  height: 560px;
  max-height: 80vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 2147483002;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
#asicon-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #2C528D;
  color: #fff;
}

#asicon-chat-header .title {
  font-weight: 600;
  font-size: 15px;
}

#asicon-chat-close {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #ff0000;
  cursor: pointer;
  padding: 0;
}

/* Cuerpo del chat */
#asicon-chat-body {
  flex: 1;
  background: #f7f7f8;
  padding: 12px;
  overflow-y: auto;
}
.asicon-msg {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  max-width: 82%;
  word-wrap: break-word;
}
.asicon-user { background: #e8f0ff; margin-left: auto; }
.asicon-bot  { background: #efefef; }

/* Input */
#asicon-chat-inputbar {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #eee;
}

#asicon-chat-textarea {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 120px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
}
#asicon-chat-send {
  background: #2C528D;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  align-self: center;
  width: auto;
  white-space: nowrap;
}

#asicon-chat-footer {
  font-size: 11px;
  color: #666;
  text-align: center;
  padding: 8px;
  border-top: 1px solid #eee;
  background: #fafafa;
}
#asicon-chat-footer a {
  color: #2C528D;
  text-decoration: none;
}
#asicon-chat-footer a:hover {
  text-decoration: underline;
}

/* Helpers */
.asicon-muted { color:#777; font-size: 12px; padding: 8px 12px; }

/* Oculta cualquier SVG o ícono dentro del botón */
#asicon-chat-launcher > svg,
#asicon-chat-launcher svg,
#asicon-chat-launcher .icon,
#asicon-chat-launcher img {
  display: none !important;
}

/* Limpieza de pseudo-elementos */
#asicon-chat-launcher::before,
#asicon-chat-launcher::after {
  content: none !important;
  background: none !important;
}

/* ===== Responsive ===== */

/* ≤ 480px */
@media (max-width: 480px) {
  #asicon-chat-launcher {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    background-size: 100%;
  }
  #asicon-chat-modal {
    right: max(10px, env(safe-area-inset-right));
    left: max(10px, env(safe-area-inset-left));
    bottom: calc(max(80px, 14px) + env(safe-area-inset-bottom));
    width: auto;
    max-width: 100vw;
    height: 70vh;
    max-height: 76vh;
    border-radius: 14px;
  }
  #asicon-chat-footer {
    font-size: 10.5px;
    padding: 6px 8px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    white-space: normal;
  }
  #asicon-chat-footer a { padding: 3px 4px; }
  #asicon-chat-header .title { font-size: 14px; }
  #asicon-chat-body { padding: 10px; }
  .asicon-msg { max-width: 88%; }
  #asicon-chat-textarea { min-height: 44px; }
  #asicon-chat-send { padding: 8px 14px; }
  #asicon-chat-close { width: 32px; height: 32px; }
  #asicon-chat-close svg { width: 18px; height: 18px; }
}

/* 481px – 768px */
@media (min-width: 481px) and (max-width: 768px) {
  #asicon-chat-launcher {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
  }
  #asicon-chat-modal {
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: min(420px, 92vw);
    height: 72vh;
    max-height: 78vh;
  }
  #asicon-chat-footer { font-size: 11px; padding: 8px 10px; }
  .asicon-msg { max-width: 86%; }
}

/* 769px – 1199px */
@media (min-width: 769px) and (max-width: 1199px) {
  #asicon-chat-modal { width: 420px; height: 66vh; }
  #asicon-chat-footer { font-size: 11.5px; }
}

/* ≥ 1200px */
@media (min-width: 1200px) {
  #asicon-chat-modal { width: 440px; height: 60vh; }
  #asicon-chat-footer { font-size: 12px; }
}

/* ===== Interacción táctil/mouse ===== */
@media (pointer: coarse) {
  #asicon-chat-close { width: 36px; height: 36px; }
  #asicon-chat-send { padding: 10px 16px; }
  #asicon-chat-footer a { padding: 4px 6px; }
}

@media (hover: hover) and (pointer: fine) {
  #asicon-chat-send:hover { filter: brightness(1.08); }
  #asicon-chat-close:hover { opacity: .85; }
}

/* ===== Accesibilidad ===== */
@media (prefers-reduced-motion: reduce) {
  #asicon-chat-launcher,
  #asicon-chat-modal,
  #asicon-chat-send,
  #asicon-chat-close { transition: none !important; }
  #asicon-chat-footer * { transition: none !important; }
}

/* ===== Altura reducida ===== */
@media (max-height: 560px) {
  #asicon-chat-modal { height: 68vh; max-height: 74vh; }
  #asicon-chat-footer {
    padding: 4px 6px;
    font-size: 10px;
  }
  #asicon-chat-footer br { display: none; }
}

/* ===== Modo oscuro ===== */
@media (prefers-color-scheme: dark) {
  #asicon-chat-modal { background: #1e1f22; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
  #asicon-chat-body  { background: #151619; }
  .asicon-bot        { background: #2a2b31; color: #e8e8e8; }
  .asicon-user       { background: #1e3a8a; color: #fff; }
  #asicon-chat-textarea { background:#111215; color:#e8e8e8; border-color:#333; }
  #asicon-chat-send { background:#2C528D; color:#fff; }
  #asicon-chat-footer {
    background: #1f2024;
    border-top-color: #333;
    color: #cfcfcf;
  }
  #asicon-chat-footer a { color: #7fb4ff; }
}