/* =========================================================
   Cantinero · Chat host conversacional
   Aislado del resto del CSS — prefix `.cv-chat-`
   Encaja en el sistema BEM del app.css (vars, ease, sombras)
   ========================================================= */

/* Wrapper de acciones del topbar (chat + reservar) */
.topbar__actions{
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}

/* FAB — ícono redondo dentro del topbar, junto al botón Reservar */
.cv-chat-fab{
  position:relative;
  flex-shrink:0;
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--rose);
  color:var(--jet);
  box-shadow:
    0 4px 10px -4px rgba(254,186,177,.55),
    inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
}
.cv-chat-fab:hover{ transform:scale(1.06); box-shadow:0 6px 14px -4px rgba(254,186,177,.7); }
.cv-chat-fab:active{ transform:scale(.94); }
.cv-chat-fab svg{ width:20px; height:20px; stroke-width:1.8; }
.cv-chat-fab.is-hidden{ display:none; }

/* Floating variant — overrides base position */
.cv-chat-fab.cv-chat-fab--float{
  position:absolute;
  top:calc(var(--safe-top, 0px) + 72px);
  right:16px;
  z-index:90;
  width:52px; height:52px;
  background:var(--jet); color:var(--rose);
  border:1.5px solid rgba(254,186,177,.25);
  box-shadow:
    0 4px 18px -4px rgba(42,42,41,.45),
    0 1px 3px rgba(42,42,41,.12);
}
.cv-chat-fab--float svg{ width:22px; height:22px; stroke-width:1.8 }
.cv-chat-fab--float:hover{
  transform:scale(1.08);
  background:var(--rose); color:var(--jet);
  box-shadow:0 6px 22px -4px rgba(232,154,146,.6);
}
.cv-chat-fab--float .cv-chat-fab__dot{
  width:9px; height:9px;
  box-shadow:0 0 0 2px var(--jet);
}

/* Dot rojo de aviso (primera vez que abre el sitio) */
.cv-chat-fab__dot{
  position:absolute; top:-2px; right:-2px;
  width:9px; height:9px; border-radius:50%;
  background:#ff4d4d; box-shadow:0 0 0 2px var(--paper);
  display:none;
}
.cv-chat-fab[data-fresh="1"] .cv-chat-fab__dot{ display:block; }

/* Sheet del chat — reusa .sheet del app.css pero ajusta el body */
.cv-chat-sheet .sheet__body{
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  background:var(--paper);
  overflow-x:hidden;        /* nada se desborda lateralmente */
  min-width:0;
}
.cv-chat-sheet .sheet__wrap{ width:100%; max-width:100%; overflow-x:hidden; }

.cv-chat-meta{
  padding:14px 18px 8px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(42,42,41,.06);
  background:linear-gradient(180deg,rgba(254,186,177,.10),transparent);
}
.cv-chat-meta__avatar{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--rose);
  color:var(--jet);
  display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:18px;
  flex-shrink:0;
}
.cv-chat-meta__title{ display:grid; gap:2px; }
.cv-chat-meta__title strong{
  font-family:var(--ff-display);
  font-size:15px; color:var(--jet); font-weight:700;
}
.cv-chat-meta__title span{
  font-size:11px; color:var(--label);
  display:inline-flex; align-items:center; gap:5px;
}
.cv-chat-meta__title span::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#34c759; box-shadow:0 0 6px rgba(52,199,89,.6);
}

/* Lista de mensajes */
.cv-chat-log{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px 14px 6px;
  display:flex; flex-direction:column; gap:8px;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  min-width:0;
}

.cv-chat-msg{
  max-width:min(86%, calc(100% - 8px));
  padding:9px 13px;
  border-radius:18px;
  font-size:14.5px; line-height:1.45;
  white-space:pre-wrap;        /* respeta saltos de línea \n */
  overflow-wrap:anywhere;       /* rompe palabras larguísimas (URLs, texto sin espacios) */
  word-break:break-word;
  min-width:0;
  hyphens:auto;
}
.cv-chat-msg strong{ font-weight:700; }
.cv-chat-msg em{ font-style:italic; }
.cv-chat-msg a{ color:inherit; text-decoration:underline; word-break:break-all; }
.cv-chat-msg--bot{
  align-self:flex-start;
  background:var(--white);
  color:var(--jet);
  border-top-left-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(42,42,41,.05);
}
.cv-chat-msg--user{
  align-self:flex-end;
  background:var(--rose);
  color:var(--jet);
  border-top-right-radius:6px;
  font-weight:500;
}
.cv-chat-msg--err{
  align-self:stretch;
  background:rgba(255,77,77,.06);
  border:1px solid rgba(255,77,77,.18);
  color:#a02626;
  font-size:12.5px;
  text-align:center;
  border-radius:12px;
}

.cv-chat-typing{
  align-self:flex-start;
  display:inline-flex; gap:4px;
  padding:11px 14px;
  background:var(--white);
  border-radius:18px;
  border-top-left-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(42,42,41,.05);
}
.cv-chat-typing i{
  width:6px; height:6px; border-radius:50%;
  background:var(--jet-50);
  animation:cvChatBounce 1.2s ease-in-out infinite;
}
.cv-chat-typing i:nth-child(2){ animation-delay:.15s; }
.cv-chat-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes cvChatBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.4; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* Sugerencias rápidas */
.cv-chat-quick{
  padding:0 14px 10px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.cv-chat-quick button{
  padding:7px 12px;
  border-radius:var(--r-pill);
  background:var(--white);
  color:var(--jet);
  font-size:12.5px; font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(42,42,41,.08);
  transition:transform .15s var(--ease-soft), background .15s var(--ease-soft);
}
.cv-chat-quick button:hover{ background:var(--jet-08); }
.cv-chat-quick button:active{ transform:scale(.96); }

/* Footer del chat — input + send */
.cv-chat-foot{
  padding:10px 12px calc(var(--safe-bot) + 12px);
  background:var(--paper);
  border-top:1px solid rgba(42,42,41,.07);
  display:flex; align-items:flex-end; gap:8px;
}
.cv-chat-input{
  flex:1; min-height:44px; max-height:110px;
  padding:11px 14px;
  border-radius:22px;
  border:1px solid rgba(42,42,41,.10);
  background:var(--white);
  color:var(--jet);
  font-family:inherit;
  font-size:16px;          /* iOS Safari NO hace zoom auto si input >=16px */
  line-height:1.35;
  resize:none; outline:none;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.cv-chat-input:focus{
  border-color:var(--rose-deep);
  box-shadow:0 0 0 3px rgba(254,186,177,.22);
}
.cv-chat-input::placeholder{ color:var(--meta); }

.cv-chat-send{
  flex:0 0 44px;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--rose);
  color:var(--jet);
  display:grid; place-items:center;
  transition:opacity .15s var(--ease), transform .12s var(--ease);
}
.cv-chat-send:disabled{ opacity:.3; cursor:not-allowed; }
.cv-chat-send:not(:disabled):hover{ transform:scale(1.06); }
.cv-chat-send:not(:disabled):active{ transform:scale(.92); }
.cv-chat-send svg{ width:18px; height:18px; }

.cv-chat-disclaimer{
  font-size:10.5px;
  color:var(--meta);
  text-align:center;
  padding:6px 16px 0;
  letter-spacing:.3px;
}

/* CTA al final del chat — botón hacia reserva */
.cv-chat-bridge{
  align-self:flex-start;
  max-width:100%;
  margin-top:2px;
  padding:10px 16px;
  border-radius:var(--r-pill);
  background:var(--jet);
  color:var(--rose);
  font-size:13px; font-weight:700;
  letter-spacing:.3px;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  transition:transform .15s var(--ease);
  white-space:normal;
  text-align:left;
}
.cv-chat-bridge:hover{ transform:translateY(-1px); }
.cv-chat-bridge svg{ width:14px; height:14px; flex-shrink:0; }

@media (prefers-reduced-motion:reduce){
  .cv-chat-typing i{ animation-duration:1ms !important; }
}