/* Botones flotantes: WhatsApp directo y el agente de Operia */
.flotantes {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.flotante {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; min-width: 56px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 .9375rem/1 var(--body); box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .8);
  transition: transform .2s ease, box-shadow .2s ease;
}
.flotante:hover { transform: translateY(-2px); }
.flotante svg { flex: none; }
.wa-float { justify-content: center; padding: 0; width: 56px; background: #25D366; color: #fff; }
.wa-float:hover { box-shadow: 0 14px 40px -12px rgba(37, 211, 102, .6); }
.chat-launcher {
  padding: 0 20px 0 8px; background: var(--carbon); color: var(--hueso);
  box-shadow: inset 0 0 0 1px var(--linea), 0 12px 34px -12px rgba(0, 0, 0, .8);
}
.chat-launcher:hover { box-shadow: inset 0 0 0 1px var(--llama), 0 14px 40px -12px rgba(252, 74, 3, .55); }
.chat-launcher-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a1a10, #0b0806);
  box-shadow: inset 0 0 0 1px rgba(252, 74, 3, .35);
}
.chat-launcher-mark img { width: 24px; height: 24px; }
.chat-launcher-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; margin-left: 2px;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, .18);
}
@media (max-width: 719px) {
  .chat-launcher { width: 56px; padding: 0; justify-content: center; }
  .chat-launcher-text, .chat-launcher-dot { display: none; }
}

/* Panel del chat */
.chat {
  position: fixed; z-index: 80; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100svh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--carbon); border: 1px solid var(--linea); border-radius: var(--radius-l);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(252, 74, 3, .08);
  transform-origin: bottom right; animation: chat-entra .28s cubic-bezier(.2, .8, .2, 1);
}
.chat[hidden] { display: none; }
@keyframes chat-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.chat-abierto .flotantes { visibility: hidden; }

.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px;
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(252, 74, 3, .08), transparent);
}
.chat-head img { width: 34px; height: 34px; }
.chat-head-text { flex: 1; min-width: 0; }
.chat-head-text strong { display: block; font: 600 1rem/1.2 var(--display); }
.chat-head-text span { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ceniza); }
.chat-head-text span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.chat-cerrar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; color: var(--hueso); border: 1px solid var(--linea); cursor: pointer;
}
.chat-cerrar:hover { border-color: var(--hueso); }

.chat-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.es-agente { align-self: flex-start; background: #17110d; border: 1px solid var(--linea); border-bottom-left-radius: 6px; }
.chat-msg.es-usuario { align-self: flex-end; background: var(--ember); color: var(--noche); font-weight: 500; border-bottom-right-radius: 6px; }
.chat-msg .btn { margin-top: 10px; min-height: 40px; padding: 0 16px; font-size: .875rem; white-space: nowrap; }
.chat-escribiendo { display: inline-flex; gap: 5px; padding: 14px 16px; }
.chat-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--sol); animation: chat-punto 1s ease-in-out infinite; }
.chat-escribiendo i:nth-child(2) { animation-delay: .15s; background: var(--llama); }
.chat-escribiendo i:nth-child(3) { animation-delay: .3s; background: var(--brasa); }
@keyframes chat-punto { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.chat-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; }
.chat-sugerencias button {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--hueso); border: 1px solid var(--linea); font: 500 .8125rem/1 var(--body);
}
.chat-sugerencias button:hover { border-color: var(--llama); }

.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--linea); }
.chat-form textarea {
  flex: 1; min-height: 46px; max-height: 120px; resize: none; padding: 12px 14px;
  background: var(--noche); color: var(--hueso); border: 1px solid var(--borde-campo); border-radius: 14px;
  font: 400 .9375rem/1.4 var(--body);
}
.chat-form textarea::placeholder { color: var(--ceniza); }
.chat-form textarea:focus { outline: none; border-color: var(--sol); }
.chat-enviar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--ember); color: var(--noche); cursor: pointer;
}
.chat-enviar:disabled { opacity: .45; cursor: default; }
.chat-nota { margin: 0; padding: 0 16px 12px; font-size: .75rem; color: var(--ceniza); }
.chat-nota a { color: var(--hueso); }

@media (max-width: 719px) {
  .chat { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
}
@media (prefers-reduced-motion: reduce) {
  .chat { animation: none; }
  .chat-escribiendo i { animation: none; opacity: .8; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }