/* ── Food Service Engine — Widget de chat con IA ───────────────────────────────
   Autocontenido a propósito (ver FSE_Chatbot::render_widget()), mismo criterio
   que rce-chatbot.css. Paleta navy/dorado por defecto (identidad de La Fragata
   Resto-Bar, primer sitio de este chatbot en FSE, ver lafragata-config
   paleta_colores()) -- si el chatbot se activa en otro rubro con otra
   identidad, conviene resolver estos tokens vía FSE_Vertical_Bridge::
   paleta_colores() en vez de hardcodearlos de nuevo acá. */

.fse-chat-fab, .fse-chat-drawer, .fse-chat-drawer * {
  --fsec-bg: #0f1a2e;
  --fsec-bg-elev: #182645;
  --fsec-bg-elev2: #1f3157;
  --fsec-border: rgba(201, 164, 104, .32);
  --fsec-border-soft: rgba(201, 164, 104, .16);
  --fsec-gold-1: #e2c48f;
  --fsec-gold-2: #c9a468;
  --fsec-gold: #d4b076;
  --fsec-text: #f2ede1;
  --fsec-text-dim: #c9c2b3;
  --fsec-text-mute: #8f8a7d;
  --fsec-on-gold: #1c2740;
  box-sizing: border-box;
}

.fse-chat-fab {
  position: fixed !important;
  right: clamp(16px, 4vw, 28px) !important;
  bottom: clamp(90px, 18vw, 110px) !important;
  z-index: 800;
  width: 58px; height: 58px;
  background: var(--fsec-bg-elev2);
  color: var(--fsec-gold);
  border: 1px solid var(--fsec-gold);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fse-chat-fab:hover { transform: scale(1.08); }
.fse-chat-fab[hidden] { display: none !important; }
.fse-chat-fab svg { width: 25px; height: 25px; position: relative; z-index: 1; }
@media (min-width: 900px) { .fse-chat-fab { bottom: 28px !important; } }

.fse-chat-fab::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0%, var(--fsec-gold-1) 18%, transparent 40%);
  animation: fsec-fab-ring 3.4s linear infinite;
  z-index: -1;
}
@keyframes fsec-fab-ring {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

.fse-chat-drawer { position: fixed; inset: 0; z-index: 950; pointer-events: none; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.fse-chat-drawer.is-open { pointer-events: auto; }

.fse-chat-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity .25s ease;
}
.fse-chat-drawer.is-open .fse-chat-drawer__backdrop { opacity: 1; }

.fse-chat-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw);
  background:
    radial-gradient(70% 40% at 100% 0%, rgba(201,164,104,.14), transparent 60%),
    var(--fsec-bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s ease;
  box-shadow: -10px 0 40px rgba(0,0,0,.5);
}
.fse-chat-drawer.is-open .fse-chat-drawer__panel { transform: none; }

.fse-chat-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--fsec-bg-elev2);
  border-bottom: 1px solid var(--fsec-border-soft);
  color: var(--fsec-text);
  flex-shrink: 0;
}
.fse-chat-drawer__title { margin: 0; font-size: 1.05rem; font-weight: 800; flex: 1; }
.fse-chat-drawer__close {
  background: rgba(255,255,255,.06); border: none; color: var(--fsec-text);
  width: 30px; height: 30px; border-radius: 50%; font-size: .95rem; cursor: pointer;
}

.fse-chat-autolectura {
  display: flex; align-items: center; gap: 4px;
  color: var(--fsec-text-mute); font-size: .85rem; cursor: pointer;
  margin-right: 8px;
}
.fse-chat-autolectura input { accent-color: var(--fsec-gold); cursor: pointer; }
.fse-chat-autolectura:has(input:checked) { color: var(--fsec-gold); }

.fse-chat-msg__hablar {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--fsec-border-soft);
  color: var(--fsec-gold); font-size: .85rem; cursor: pointer; flex-shrink: 0;
}
.fse-chat-msg__hablar.is-hablando { background: var(--fsec-gold); color: var(--fsec-on-gold); }

.fse-chat-mensajes {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.fse-chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.4; }
.fse-chat-msg__texto { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.fse-chat-msg__texto a { color: var(--fsec-gold); text-decoration: underline; }
.fse-chat-msg--bot { align-self: flex-start; background: var(--fsec-bg-elev); border: 1px solid var(--fsec-border-soft); color: var(--fsec-text); border-bottom-left-radius: 3px; }
.fse-chat-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--fsec-gold-1), var(--fsec-gold-2)); color: var(--fsec-on-gold); border-bottom-right-radius: 3px; font-weight: 500; }
.fse-chat-msg--ancha { max-width: 96%; }

/* Mapa de ubicación -- lo pide el bot (regla 9 de FSE_Chatbot::system_prompt())
   cuando ya tiene domicilio + dirección (Módulo de seguimiento en vivo,
   2026-09-28, puerto directo de rce-chatbot.css). Vive dentro de una burbuja
   --ancha (ver agregarBurbuja() en fse-chatbot.js), por eso ocupa el 100%
   disponible ahí, no el 82% normal de una burbuja de texto. */
.fse-chat-mapa-ubicacion {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.fse-chat-mapa-ubicacion__mapa {
  width: 100%; height: 200px; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid var(--fsec-border-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--fsec-text); font-size: .82rem;
}
.fse-chat-mapa-ubicacion__gps,
.fse-chat-mapa-ubicacion__confirmar {
  display: block; width: 100%; padding: 9px 14px; border-radius: 20px;
  border: none; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.fse-chat-mapa-ubicacion__gps {
  background: rgba(255,255,255,.08); border: 1px solid var(--fsec-border-soft); color: var(--fsec-text);
}
.fse-chat-mapa-ubicacion__confirmar {
  background: linear-gradient(135deg, var(--fsec-gold-1), var(--fsec-gold-2)); color: var(--fsec-on-gold);
}
.fse-chat-mapa-ubicacion__gps:disabled,
.fse-chat-mapa-ubicacion__confirmar:disabled { opacity: .6; cursor: default; }
.fse-chat-mapa-ubicacion__ref {
  width: 100%; padding: 8px 12px; border-radius: 20px; box-sizing: border-box;
  border: 1px solid var(--fsec-border-soft); background: rgba(255,255,255,.06);
  color: var(--fsec-text); font-size: .85rem; font-family: inherit;
}
.fse-chat-mapa-ubicacion__ref::placeholder { color: var(--fsec-text); opacity: .55; }

.fse-chat-tabla-wrap { overflow-x: auto; margin: 6px -4px; -webkit-overflow-scrolling: touch; }
.fse-chat-tabla { border-collapse: collapse; font-size: .78rem; white-space: nowrap; }
.fse-chat-tabla th, .fse-chat-tabla td {
  padding: 6px 9px; border: 1px solid var(--fsec-border-soft); text-align: left;
}
.fse-chat-tabla th {
  background: var(--fsec-bg-elev2); color: var(--fsec-gold); font-weight: 700;
  position: sticky; top: 0;
}
.fse-chat-tabla tr:nth-child(even) td { background: rgba(255,255,255,.02); }

.fse-chat-cargando { display: flex; gap: 4px; padding: 0 18px 8px; }
.fse-chat-cargando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fsec-text-mute);
  animation: fsec-blink 1.2s infinite ease-in-out both;
}
.fse-chat-cargando span:nth-child(2) { animation-delay: .15s; }
.fse-chat-cargando span:nth-child(3) { animation-delay: .3s; }
@keyframes fsec-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.fse-chat-form {
  position: relative;
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--fsec-border-soft);
  background: var(--fsec-bg-elev2); flex-shrink: 0;
}
.fse-chat-mic-hint {
  position: absolute; right: 12px; bottom: calc(100% + 8px);
  max-width: min(220px, 70vw);
  background: var(--fsec-bg-elev2); border: 1px solid var(--fsec-border-soft);
  color: var(--fsec-text); font-size: .78rem; line-height: 1.35;
  padding: 8px 12px; border-radius: 12px; border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  animation: fsec-hint-flota 2.2s infinite ease-in-out;
}
@keyframes fsec-hint-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.fse-chat-input {
  flex: 1; border: 1.5px solid var(--fsec-border-soft); border-radius: 20px;
  padding: 10px 14px; font-size: 16px;
  font-family: inherit; color: var(--fsec-text); background: rgba(255,255,255,.04);
}
.fse-chat-input::placeholder { color: var(--fsec-text-mute); }
.fse-chat-input:focus { outline: none; border-color: var(--fsec-gold); }
.fse-chat-send-mic {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--fsec-border-soft); background: rgba(255,255,255,.04);
  color: var(--fsec-gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .1s ease;
  touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 5px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
.fse-chat-send-mic svg { width: 19px; height: 19px; }
.fse-chat-send-mic.is-texto {
  border: none;
  background: linear-gradient(135deg, var(--fsec-gold-1), var(--fsec-gold-2));
  color: var(--fsec-on-gold);
  box-shadow: 0 3px 0 rgba(120,90,30,.5), 0 5px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.fse-chat-send-mic.is-presionado {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3), inset 0 2px 4px rgba(0,0,0,.4);
}
.fse-chat-send-mic.is-grabando {
  background: rgba(220, 60, 60, .18); border-color: rgba(220, 60, 60, .6); color: #ff8080;
  animation: fsec-mic-pulso 1.1s infinite ease-in-out;
  transform: scale(1.12);
}
@keyframes fsec-mic-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,60,60,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220,60,60,0); }
}

html.fse-chat-no-scroll, html.fse-chat-no-scroll body { overflow: hidden; }

@media (max-width: 480px) {
  .fse-chat-drawer__panel { width: 100vw; }
}

/* ── Panel de grabación de audio (estilo WhatsApp): caneca | pausa | enviar ── */
.fse-chat-form.is-recording > .fse-chat-input,
.fse-chat-form.is-recording > .fse-chat-send-mic,
.fse-chat-form.is-recording > .fse-chat-mic-hint { display: none !important; }
.fse-chat-rec { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.fse-chat-rec[hidden] { display: none; }
.fse-chat-rec__top { display: flex; align-items: center; gap: 10px; }
.fse-chat-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a5a; flex: none; animation: fsec-rec-blink 1s infinite ease-in-out; }
.fse-chat-rec.is-pausado .fse-chat-rec__dot { animation: none; opacity: .4; }
@keyframes fsec-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.fse-chat-rec__time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fsec-text); min-width: 42px; }
.fse-chat-rec__wave { flex: 1; min-width: 0; height: 34px; }
.fse-chat-rec__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fse-rec-btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--fsec-border-soft); background: rgba(255,255,255,.05); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .1s ease, background .15s ease; }
.fse-rec-btn svg { width: 22px; height: 22px; }
.fse-rec-btn:active { transform: scale(.94); }
.fse-rec-btn--trash { color: var(--fsec-text-mute); width: 44px; height: 44px; }
.fse-rec-btn--pause { color: #ff6a6a; border-color: rgba(255, 90, 90, .7); background: rgba(255, 90, 90, .1); }
.fse-rec-btn--send { border: none; background: linear-gradient(135deg, var(--fsec-gold-1), var(--fsec-gold-2)); color: var(--fsec-on-gold); box-shadow: 0 3px 0 rgba(120,90,30,.5), 0 5px 10px rgba(0,0,0,.3); }