/* Talk to the website (voice.js): mic button next to the chat button, and a
   small panel showing what was heard and what the assistant is saying. */
.wwvoice {
  --navy: #0b0d18; --panel: #11142a; --line: rgba(255, 255, 255, .12);
  --text: #f3f5fb; --muted: #a7aec2;
  --pink: #e6207f; --orange: #ff7a1a; --cyan: #22c8f0;
  --brand-gradient: linear-gradient(95deg, #e6207f 0%, #ff7a1a 100%);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
.wwvoice *, .wwvoice *::before, .wwvoice *::after { box-sizing: border-box; }
.wwvoice svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Button (left of the chat button) ---------- */
.wwvoice-btn {
  position: fixed; right: 96px; bottom: 30px; z-index: 300;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: var(--navy); border: 2px solid transparent;
  background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(135deg, var(--pink), var(--orange), var(--cyan));
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .2s;
}
.wwvoice-btn:hover { transform: translateY(-2px) scale(1.05); }
.wwvoice-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.wwvoice.is-open .wwvoice-btn { background-image: linear-gradient(135deg, var(--pink), var(--orange)), linear-gradient(135deg, var(--pink), var(--orange)); }
/* Hidden while the chat window is open */
.wwchat.is-open ~ .wwvoice .wwvoice-btn, .wwchat.is-open ~ .wwvoice .wwvoice-panel { display: none; }
body.wwvoice-on .wwchat-popup { display: none !important; }

/* ---------- Panel ---------- */
.wwvoice-panel {
  position: fixed; right: 24px; bottom: 96px; z-index: 301;
  width: min(340px, calc(100vw - 32px));
  padding: 16px 18px 18px; border-radius: 20px;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(34, 200, 240, .08);
  animation: wwvoice-in .22s ease-out;
}
.wwvoice-panel[hidden] { display: none; }
@keyframes wwvoice-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.wwvoice-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wwvoice-title { flex: 1; font-size: 15px; }
.wwvoice-lang, .wwvoice-close {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px;
}
.wwvoice-lang { padding: 4px 10px; }
.wwvoice-close { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; }
.wwvoice-close svg { width: 16px; height: 16px; }
.wwvoice-lang:hover, .wwvoice-close:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }

/* Consent (Law 25), shown before the first use */
.wwvoice-consent p { margin: 0 0 10px; font-size: 14px; }
.wwvoice-consent-text { color: var(--muted); font-size: 13px !important; }
.wwvoice-actions { display: flex; gap: 8px; margin: 14px 0 10px; }
.wwvoice-start, .wwvoice-later {
  flex: 1; padding: 10px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
}
.wwvoice-start { border: 0; color: #fff; background: var(--brand-gradient); }
.wwvoice-later { border: 1px solid var(--line); color: var(--text); background: transparent; }
.wwvoice-privacy { color: var(--muted); font-size: 12px; text-decoration: underline; }

/* ---------- Live conversation ---------- */
.wwvoice-live { text-align: center; }
.wwvoice-live[hidden] { display: none; }
.wwvoice-mic {
  position: relative; width: 76px; height: 76px; margin: 6px auto 10px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: var(--brand-gradient);
  box-shadow: 0 10px 30px rgba(230, 32, 127, .45);
}
.wwvoice-mic svg { width: 30px; height: 30px; position: relative; z-index: 1; }
.wwvoice-mic:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.wwvoice-rings { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }

/* Listening: rings ripple out. Thinking: slow pulse. Speaking: cyan glow. */
.wwvoice[data-state="listening"] .wwvoice-rings { animation: wwvoice-ring 1.4s ease-out infinite; }
.wwvoice[data-state="thinking"] .wwvoice-mic { animation: wwvoice-pulse 1s ease-in-out infinite; }
.wwvoice[data-state="speaking"] .wwvoice-mic { background: linear-gradient(135deg, var(--cyan), #7c5cff); box-shadow: 0 10px 30px rgba(34, 200, 240, .45); }
.wwvoice[data-state="speaking"] .wwvoice-rings { animation: wwvoice-ring-soft 1.8s ease-out infinite; }
@keyframes wwvoice-ring { 0% { box-shadow: 0 0 0 0 rgba(230, 32, 127, .55); } 100% { box-shadow: 0 0 0 22px rgba(230, 32, 127, 0); } }
@keyframes wwvoice-ring-soft { 0% { box-shadow: 0 0 0 0 rgba(34, 200, 240, .45); } 100% { box-shadow: 0 0 0 18px rgba(34, 200, 240, 0); } }
@keyframes wwvoice-pulse { 50% { transform: scale(.94); opacity: .85; } }

.wwvoice-status { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.wwvoice-heard { margin: 0 0 6px; font-size: 15px; font-weight: 600; min-height: 0; }
.wwvoice-heard:empty, .wwvoice-said:empty { display: none; }
.wwvoice-said {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; text-align: left;
  font-size: 14px; background: rgba(255, 255, 255, .06); max-height: 30vh; overflow-y: auto;
}
.wwvoice-examples { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.wwvoice-examples li { margin: 2px 0; }
/* Examples only until the conversation starts */
.wwvoice.has-talked .wwvoice-examples { display: none; }

@media (max-width: 640px) {
  .wwvoice-btn { right: 84px; bottom: 20px; }
  .wwvoice-panel { right: 16px; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .wwvoice-panel, .wwvoice-rings, .wwvoice-mic { animation: none !important; }
}