/* ClickaCierre — Preguntas frecuentes como conversación (componente compartido).
   Spec: 05-brand/system/CLICKACIERRE-FAQ-Conversacion.md. Extraído de la guía de
   restaurantes v6 sin cambios de diseño: pregunta lima a la derecha, «a» a la
   izquierda con su avatar inclinado, abierta sobre la página. Usa los tokens de
   la página (--lime, --ink, --ink-2, --line, --paper, --muted) con respaldo. */

.chat{display:flex;flex-direction:column;gap:28px;max-width:760px;margin-top:30px}
.pair{display:flex;flex-direction:column;gap:10px}
.pair h3,.pair .ask{align-self:flex-end;max-width:min(460px,88%);margin:0;padding:13px 17px;border-radius:18px 18px 5px 18px;background:var(--lime,#b8f34a);color:var(--on-lime,#0b1220);font:500 16px/1.45 var(--body,Arial,sans-serif);letter-spacing:0}
.answer{display:flex;align-items:flex-end;gap:10px}
.avatar{display:grid;place-items:center;flex:none;width:28px;height:28px;padding-bottom:3px;border-radius:50%;background:var(--lime,#b8f34a);color:var(--on-lime,#0b1220);font:550 19px/1 var(--display,Arial,sans-serif);transform:rotate(-14deg)}
.answer p{max-width:min(540px,88%);margin:0;padding:13px 17px;border:1px solid var(--line,rgba(198,208,226,.16));border-radius:18px 18px 18px 5px;background:var(--ink-2,#0f1723);font-size:15px;line-height:1.6;color:var(--paper,#f1f3e9)}
.bites{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;max-width:min(540px,88%)}
.answer .bites p{max-width:100%;padding:10px 15px}
.bites a,.answer a{color:var(--acc,var(--lime,#b8f34a));text-underline-offset:3px}
.chat.is-live .bites p,.chat.is-live .ask{animation:q-in .3s cubic-bezier(.2,.8,.2,1) both}

/* Con JS la conversación se arma al tocar: las preguntas sin responder flotan
   debajo y, al tocar una, pasa a la conversación y «a» la responde. */
.chat.is-live{gap:0}
.chat-log{display:flex;flex-direction:column;gap:28px}
.chat-log:empty{display:none}
.chat-pool{display:flex;flex-direction:column;gap:14px;margin-top:34px}
.chat-log:empty+.chat-pool{margin-top:0}
.chat-pool .answer{display:none}
.chat.is-live .pair h3 button{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;outline:0}
.chat-pool .pair h3{animation:q-float var(--fd,5s) ease-in-out var(--fdl,0s) infinite alternate;transition:background .2s,box-shadow .2s}
.chat-pool .pair h3:hover,.chat-pool .pair h3:has(:focus-visible){animation-play-state:paused;background:var(--lime-hi,#d0ff7e);box-shadow:0 10px 26px rgba(184,243,74,.18)}
.chat-pool .pair h3:has(:focus-visible){outline:2px solid var(--acc,var(--lime,#b8f34a));outline-offset:3px}
.chat-log .pair h3{animation:q-sent .38s cubic-bezier(.2,.8,.2,1) both}
.chat.is-live .answer:not([hidden]){animation:q-in .34s cubic-bezier(.2,.8,.2,1) both}
.answer .dots{display:flex;gap:4px;padding:15px 17px;border:1px solid var(--line,rgba(198,208,226,.16));border-radius:18px 18px 18px 5px;background:var(--ink-2,#0f1723)}
.answer .dots i{width:7px;height:7px;border-radius:50%;background:var(--muted,#9ba9ba);animation:q-dot 1.1s ease-in-out infinite}
.answer .dots i:nth-child(2){animation-delay:.15s}
.answer .dots i:nth-child(3){animation-delay:.3s}
.chat-pool.is-busy .pair h3{opacity:.55;pointer-events:none}
/* respuestas plegadas: la pregunta queda con una flecha para volver a abrirla */
.chat.is-live .chat-log .pair h3 button{display:flex;align-items:center;justify-content:space-between;gap:16px}
.chat.is-live .chat-log .pair h3 button::after{content:'';flex:none;width:7px;height:7px;margin:4px 2px 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:225deg;transition:rotate .25s,margin .25s}
.chat.is-live .chat-log .pair.is-collapsed h3 button::after{rotate:45deg;margin-top:-4px}
.chat-log .pair.is-collapsed h3{opacity:.8;transition:opacity .2s}
.chat-log .pair.is-collapsed h3:hover,.chat-log .pair h3:has(:focus-visible){opacity:1}
.chat-log .pair h3:has(:focus-visible){outline:2px solid var(--acc,var(--lime,#b8f34a));outline-offset:3px}
.chat-log .pair.is-collapsed>:not(h3){display:none}
.chat-log .pair.is-collapsed+.pair.is-collapsed{margin-top:-14px}
@keyframes q-float{from{translate:0 0;rotate:0deg}to{translate:var(--fx,-3px) var(--fy,-5px);rotate:var(--fr,-.6deg)}}
@keyframes q-sent{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes q-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes q-dot{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -4px;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .chat-pool .pair h3,.chat-log .pair h3,.chat.is-live .answer,.chat.is-live .bites p,.chat.is-live .ask,.answer .dots i{animation:none}
}