/* ============================================================
   Zentus hero chat — ÉLŐ chat kiegészítő stílusok
   A statikus mockup stílusait (zentus.css) egészíti ki: scroll, valódi
   input, kattintható gombok, hibaüzenet, gépelés-animáció.
   Brand-tokenek a :root-ból (--blue, --navy, --bg, stb.).
   ============================================================ */

/* Görgethető üzenet-terület rögzített magassággal */
[data-zentus-chat] .chat-body {
  max-height: 360px;
  overflow-y: auto;
  scroll-behavior: smooth;
  /* finom görgetősáv, brand-színnel */
  scrollbar-width: thin;
  scrollbar-color: rgba(48, 60, 96, 0.25) transparent;
}
[data-zentus-chat] .chat-body::-webkit-scrollbar { width: 8px; }
[data-zentus-chat] .chat-body::-webkit-scrollbar-thumb {
  background: rgba(48, 60, 96, 0.2);
  border-radius: 999px;
}
[data-zentus-chat] .chat-body::-webkit-scrollbar-track { background: transparent; }
/* A hero chat-ablak ELŐRE fenntartja a magasságot (az üdvözlő + gyorsválasz-
   gombok együttes méretére), így nem ugrik, amikor a gombok beúsznak. */
#zentus-chat .chat-body { min-height: 244px; }

/* A bot-buborékban megőrizzük a sortöréseket (\n -> új sor) */
[data-zentus-chat] .bubble { white-space: pre-wrap; word-break: break-word; }

/* Belépő animáció minden új buborékra */
[data-zentus-chat] .bubble,
[data-zentus-chat] .bubble-row,
[data-zentus-chat] .typing {
  animation: zc-pop 0.28s ease both;
}
@keyframes zc-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Gyors-válasz gombok: egyenként, staggerrel úsznak be (a delay-t a JS adja),
   kicsit a buborék után — a mozgásuk elárulja, hogy kattinthatók. */
[data-zentus-chat] .chat-choice {
  animation: zc-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  [data-zentus-chat] .chat-choice { animation: none; }
}

/* Hibaüzenet-buborék (barátságos, nem riasztó) */
[data-zentus-chat] .bubble--error {
  background: rgba(214, 69, 69, 0.08);
  color: var(--error);
  border: 1px solid rgba(214, 69, 69, 0.2);
}

/* Kép típusú trace */
[data-zentus-chat] .chat-visual {
  max-width: 80%;
  border-radius: 14px;
  align-self: flex-start;
}

/* Beszélgetés-vége jelzés */
[data-zentus-chat] .chat-end-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
}

/* ── Kattintható gombok (choice trace) ── */
[data-zentus-chat] .chat-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
[data-zentus-chat] .chat-choice {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  background: rgba(24, 132, 240, 0.06);
  border: 1px solid rgba(24, 132, 240, 0.35);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease;
}
[data-zentus-chat] .chat-choice:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--glow-blue);
}
[data-zentus-chat] .chat-choice:active { transform: translateY(0); }
[data-zentus-chat] .chat-choice:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Valódi input (form) ── */
[data-zentus-chat] .chat-input--live { gap: 10px; }
[data-zentus-chat] .chat-field {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: var(--navy);
}
[data-zentus-chat] .chat-field::placeholder { color: var(--text-muted); }

/* A küldés gomb mostantól valódi <button> */
[data-zentus-chat] .chat-send {
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
[data-zentus-chat] .chat-send:hover { background: var(--blue-hover); }
[data-zentus-chat] .chat-send:active { transform: scale(0.94); }
[data-zentus-chat] .chat-send:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Letiltott állapot, amíg a bot válaszol */
[data-zentus-chat].is-busy .chat-input--live { opacity: 0.65; }
[data-zentus-chat] .chat-send:disabled,
[data-zentus-chat] .chat-field:disabled { cursor: default; }

/* ── Gépelés-jelző animáció (a meglévő .typing kinézetére építve) ── */
[data-zentus-chat] .typing span {
  animation: zc-blink 1.2s infinite ease-in-out both;
}
[data-zentus-chat] .typing span:nth-child(2) { animation-delay: 0.2s; }
[data-zentus-chat] .typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes zc-blink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Mozgáscsökkentés tisztelete */
@media (prefers-reduced-motion: reduce) {
  [data-zentus-chat] .bubble,
  [data-zentus-chat] .bubble-row,
  [data-zentus-chat] .chat-choices,
  [data-zentus-chat] .typing,
  [data-zentus-chat] .typing span { animation: none; }
}