/* Talk to EVE voice widget, shared by every page. */
/* ── VOICE WIDGET ── */
/* Collapsed pill — default state */
.vw-pill {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  display: flex; align-items: center; gap: 10px;
  background: #344a2e; color: #fff;
  padding: 12px 18px 12px 12px; border-radius: 999px;
  font-family: 'DM Sans'; font-weight: 700; font-size: 14px;
  cursor: pointer; border: none;
  box-shadow: 0 8px 24px rgba(52,74,46,.45), 0 0 0 4px rgba(52,74,46,.12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  animation: pillPulse 2.4s ease-in-out infinite;
}
.vw-pill:hover { background: #263a22; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(52,74,46,.55), 0 0 0 6px rgba(52,74,46,.15); }
.vw-pill-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: #344a2e;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
@keyframes pillPulse {
  0%,100%{box-shadow:0 8px 24px rgba(52,74,46,.45), 0 0 0 4px rgba(52,74,46,.12)}
  50%{box-shadow:0 8px 24px rgba(52,74,46,.55), 0 0 0 10px rgba(52,74,46,.06)}
}
.vw-pill.hidden { display: none; }

/* Expanded widget */
.vw {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 290px;
  border-radius: 22px;
  background: #1f2e1b;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding: 18px;
  font-family: 'DM Sans', sans-serif;
  display: none;
}
.vw.open { display: block; animation: vwIn .25s ease; }
@keyframes vwIn { from { opacity:0; transform: translateY(8px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
.vw-close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.06); border: none;
  width: 26px; height: 26px; border-radius: 50%;
  color: rgba(255,255,255,.6); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.vw-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.vw-header {
  display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
}
.vw-ava {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #344a2e;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans'; font-weight: 700; font-size: 12px;
  color: #fff; letter-spacing: .04em;
  box-shadow: 0 0 20px rgba(52,74,46,.45);
  position: relative;
}
.vw-ava.ringing { animation: vapiRing 1.2s ease-in-out infinite; }
@keyframes vapiRing { 0%,100%{box-shadow:0 0 20px rgba(52,74,46,.45)} 50%{box-shadow:0 0 34px rgba(52,74,46,.85)} }
.vw-name { font-family: 'DM Sans'; font-weight: 600; font-size: 14.5px; color: #fff; }
.vw-sub { font-size: 11.5px; color: rgba(255,255,255,.38); margin-top: 2px; }
.vw-sub.live { color: #4ade80; }
.vw-bars {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.vw-bar-row { display: flex; align-items: center; gap: 8px; }
.vw-bar-label {
  font-size: 9px; font-family: 'DM Sans'; font-weight: 700;
  letter-spacing: .07em; width: 22px; flex-shrink: 0;
}
.vw-bar-label.you { color: #4ade80; }
.vw-bar-label.eve { color: #f5df7a; }
.vw-bar-track {
  display: flex; align-items: center; gap: 3px; flex: 1; height: 28px;
}
.vw-bar-track span {
  flex: 1; border-radius: 99px; height: 3px;
  transition: height .08s ease;
}
.vw-bar-track.you span { background: #4ade80; }
.vw-bar-track.eve span { background: #344a2e; }
.vw-transcript {
  height: 110px; overflow-y: auto; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  padding: 8px 10px; margin-bottom: 12px;
  display: none; flex-direction: column; gap: 5px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.vw-transcript.visible { display: flex; }
.vw-tx-line { font-size: 11px; line-height: 1.45; display: flex; gap: 5px; }
.vw-tx-who { font-family: 'DM Sans'; font-weight: 700; font-size: 9px;
  letter-spacing: .06em; flex-shrink: 0; padding-top: 1px; }
.vw-tx-who.you { color: #4ade80; }
.vw-tx-who.eve { color: #60a5fa; }
.vw-tx-text { color: rgba(255,255,255,.65); }
.vw-tx-text.partial { color: rgba(255,255,255,.32); font-style: italic; }
.vw-timer { font-size: 12px; color: rgba(255,255,255,.35); text-align: center; margin-bottom: 12px; font-variant-numeric: tabular-nums; letter-spacing: .04em; min-height: 18px; }
.vw-btn {
  width: 100%; padding: 12px; border-radius: 999px;
  font-family: 'DM Sans'; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s;
  border: none; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.vw-btn-start { background: #344a2e; color: #fff; box-shadow: 0 6px 20px rgba(52,74,46,.35); }
.vw-btn-start:hover { background: #263a22; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(52,74,46,.45); }
.vw-btn-end { background: #ef4444; color: #fff; box-shadow: 0 6px 20px rgba(239,68,68,.4); }
.vw-btn-end:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(239,68,68,.55); }
@media (max-width: 480px) {
  .vw { width: calc(100vw - 32px); right: 16px; bottom: 16px; left: 16px; }
  .vw-pill { right: 16px; bottom: 16px; padding: 10px 16px 10px 10px; font-size: 13px; }
  .vw-pill-dot { width: 24px; height: 24px; font-size: 10px; }
}

.vw-pill { color: #fff; }
.vw-pill.away { opacity: 0; pointer-events: none; transform: translateY(12px); }
.vw-sub.warn { color: #f5df7a; }
.vw-note { font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.5); margin: 10px 2px 0; }
.vw-note a { color: inherit; text-decoration: underline; }
.demo-note { font-size: 12px; line-height: 1.5; opacity: .78; margin: 10px 0 0; max-width: 60ch; }
.demo-note a { color: inherit; text-decoration: underline; }
@media (max-width: 480px) { body.has-pill { padding-bottom: 76px; } }