/* Widget flotante del asistente de IA de Localis (solo informativo).
   Estilos aislados con prefijo .asistente- para no depender de Tailwind.
   Discreto: botón circular pequeño abajo a la derecha y z-index bajo, de modo
   que no tapa contenido ni modales (el modal de producto usa z-index 100 y el
   drawer de comercio 400). En el teléfono el panel se abre a pantalla completa. */

.asistente-widget {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.asistente-burbuja {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #f59e0b;
  color: #1c1917;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: opacity 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.asistente-burbuja:hover { opacity: 1; transform: translateY(-2px); }
.asistente-burbuja:active { transform: translateY(0); }
.asistente-burbuja svg { width: 22px; height: 22px; }

.asistente-panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 360px;
  max-width: calc(100vw - 24px);
  height: 520px;
  max-height: calc(100dvh - 120px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  border: 1px solid #e7e5e4;
}
.asistente-panel[hidden] { display: none; }

.asistente-panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: #1c1917;
  color: #fafaf9;
  flex: 0 0 auto;
}
.asistente-panel__titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.asistente-panel__titulo strong { display: block; font-size: 15px; }
.asistente-panel__titulo small { display: block; font-size: 11px; opacity: 0.7; }
.asistente-panel__punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  flex: 0 0 auto;
}
.asistente-panel__cerrar {
  background: transparent; border: none; color: #fafaf9;
  cursor: pointer; padding: 8px; border-radius: 8px; line-height: 0;
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
}
.asistente-panel__cerrar:hover { background: rgba(255, 255, 255, 0.12); }
.asistente-panel__cerrar svg { width: 18px; height: 18px; }

.asistente-mensajes {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fefbf6;
}

.asistente-msg {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.asistente-msg--asistente {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  color: #292524;
  border-bottom-left-radius: 4px;
}
.asistente-msg--usuario {
  align-self: flex-end;
  background: #f59e0b;
  color: #1c1917;
  border-bottom-right-radius: 4px;
}
.asistente-msg--error {
  align-self: stretch;
  max-width: 100%;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13.5px;
}

.asistente-escribiendo { display: inline-flex; gap: 4px; align-items: center; }
.asistente-escribiendo span {
  width: 7px; height: 7px; border-radius: 50%; background: #a8a29e;
  animation: asistente-pulso 1s infinite ease-in-out;
}
.asistente-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.asistente-escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes asistente-pulso {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.asistente-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e7e5e4;
  background: #ffffff;
  flex: 0 0 auto;
}
.asistente-form__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.asistente-form__entrada {
  flex: 1 1 auto;
  resize: none;
  max-height: 120px;
  border: 1px solid #d6d3d1;
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  /* 16px evita el zoom automatico de iOS al enfocar. */
  font-size: 16px;
  line-height: 1.35;
  color: #292524;
  outline: none;
}
.asistente-form__entrada:focus { border-color: #f59e0b; }
.asistente-form__enviar {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border: none; border-radius: 12px;
  background: #1c1917; color: #fafaf9;
  cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.asistente-form__enviar:disabled { opacity: 0.5; cursor: default; }
.asistente-form__enviar svg { width: 18px; height: 18px; }

.asistente-accion {
  align-self: stretch;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 10px 12px;
}
.asistente-accion__texto {
  font-size: 13.5px;
  line-height: 1.4;
  color: #78350f;
  margin-bottom: 8px;
}
.asistente-accion__botones { display: flex; gap: 8px; }
.asistente-accion__botones button {
  flex: 1 1 auto;
  border-radius: 10px;
  padding: 9px 10px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}
.asistente-accion__ok { background: #16a34a; color: #ffffff; border: none; }
.asistente-accion__no { background: #ffffff; color: #292524; border: 1px solid #d6d3d1; }
.asistente-accion__ok:disabled,
.asistente-accion__no:disabled { opacity: 0.5; cursor: default; }

.asistente-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff;
  border-top: 1px solid #f5f5f4;
  font-size: 12.5px;
  color: #78716c;
  flex: 0 0 auto;
}
.asistente-feedback span { flex: 1 1 auto; }
.asistente-feedback button {
  border: 1px solid #e7e5e4;
  background: #ffffff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  min-width: 40px;
  -webkit-tap-highlight-color: transparent;
}
.asistente-feedback button:hover { border-color: #f59e0b; }
.asistente-feedback[hidden] { display: none; }

.asistente-panel__pie {
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 1px dashed #e7e5e4;
  flex: 0 0 auto;
}
.asistente-soporte {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #d6d3d1;
  background: #fafaf9;
  color: #292524;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.asistente-soporte:hover { border-color: #22c55e; color: #166534; }
.asistente-soporte svg { width: 16px; height: 16px; }
.asistente-aviso {
  margin: 8px 2px 0;
  font-size: 11px;
  line-height: 1.4;
  color: #a8a29e;
  text-align: center;
}

/* ---- Telefono: el panel se abre a pantalla completa ---- */
@media (max-width: 640px) {
  .asistente-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .asistente-panel__cabecera {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  .asistente-msg { max-width: 90%; font-size: 15px; }
  .asistente-burbuja {
    width: 48px;
    height: 48px;
    opacity: 0.85;
  }
  /* Evita que el fondo haga scroll detras del chat abierto. */
  body.asistente-abierto { overflow: hidden; }
}