/* =========================================================================
   POTOS — Chat vocal (js/voice.js). Charte « Soirée jeux » (css/theme.css) : jetons seulement,
   lisible en sombre comme en clair. Fluidité (docs/fluidite.md) : on n'anime que transform et
   opacity ; aucun backdrop-filter ; l'anneau « parle » est peint une fois, seule son opacité change.
   ========================================================================= */

/* ---------- Widget (barre du haut : #voice-slot / [data-voice-slot]) ---------- */
.vc { display: inline-flex; align-items: center; gap: var(--e-2, 8px); flex: none; }
.vc .icon-btn { position: relative; }
.vc .vc-join { width: auto; min-width: var(--tap, 44px); gap: 6px; padding: 0; font: 600 .9rem/1 var(--font-ui); white-space: nowrap; }
.vc .vc-join > [aria-hidden] { font-size: 20px; }
.vc .vc-join.is-busy { opacity: .7; }
.vc-lbl { display: none; }
@media (min-width: 760px) { .vc-lbl { display: inline; } .vc .vc-join { padding: 0 12px; } }
.vc .vc-mic.is-live { border-color: rgb(var(--ok-rgb) / .7); background: rgb(var(--ok-rgb) / .16); }
.vc .vc-mic.is-off { border-color: rgb(var(--danger-rgb, 230 80 80) / .6); background: rgb(var(--danger-rgb, 230 80 80) / .14); }
.vc .vc-mic::after { /* halo « je parle » : peint une fois, opacité seulement */
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--ok); opacity: 0; transition: opacity var(--d-rapide, .12s);
}
.vc .vc-mic.is-talk::after { opacity: 1; }
.vc-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
  font: 700 .68rem/1 var(--font-display); color: var(--on-accent); background: var(--ok); border-radius: var(--r-pill, 999px);
  border: 2px solid var(--bg);
}
.vc-dot { /* quelqu'un parle */
  position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg); opacity: 0; transform: scale(.4);
  transition: opacity var(--d-rapide, .12s), transform var(--d-rapide, .12s);
}
.vc.is-talking .vc-dot { opacity: 1; transform: scale(1); }
.vc .vc-people.is-alert { border-color: var(--accent); }

/* Repli sans emplacement : petit bouton flottant discret (au-dessus de l'écran de fin) */
.vc.vc-float {
  position: fixed; z-index: 80; left: max(10px, env(safe-area-inset-left)); bottom: var(--vc-lift, calc(96px + env(safe-area-inset-bottom)));
  padding: 4px; border-radius: var(--r-lg, 16px); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--ombre-2);
}
.vc.vc-float .vc-lbl { display: none; }
.vc.vc-away:not(.is-joined) { display: none; }

/* ---------- Panneau ---------- */
.vc-panel {
  position: fixed; z-index: 84; top: calc(64px + env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 88px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--e-3, 12px); padding: var(--e-4, 16px);
  color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg, 16px); box-shadow: var(--ombre-3);
  animation: vc-in var(--d-moyen, .25s) var(--ease-out, ease-out) both;
}
.vc-panel[hidden] { display: none; }
@keyframes vc-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.vc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vc-title { font: 700 1.05rem/1.2 var(--font-display); }
.vc-msg { padding: 10px 12px; font-size: .9rem; line-height: 1.35; border-radius: var(--r-md, 12px); background: var(--surface-2); border: 1px solid var(--line-2); }
.vc-msg.is-err, .vc-msg.is-mic { border-color: var(--warn); }
.vc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-actions .btn { flex: 1 1 auto; }
.vc-tap { width: 100%; }
.vc-big { width: 100%; display: grid; justify-items: center; gap: 2px; line-height: 1.15; }
.vc-big small { font: 500 .78rem/1 var(--font-ui); opacity: .8; }
.vc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vc-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.vc-row.is-me { grid-template-columns: 44px minmax(0, 1fr); }
.vc-av { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); }
.vc-av svg { width: 100%; height: 100%; }
.vc-who { min-width: 0; display: grid; }
.vc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vc-who small { color: var(--muted); font-size: .75rem; }
.vc-vol { width: 92px; accent-color: var(--accent); }
.vc-vol:disabled { opacity: .4; }
.vc .icon-btn.vc-off.is-on, .vc-panel .vc-off.is-on { border-color: var(--warn); }
.vc-note { font-size: .78rem; color: var(--muted); }
.vc-quit { justify-self: start; }
@media (max-width: 420px) { .vc-vol { width: 70px; } }

/* ---------- Indicateur « parle » sur les avatars (salon, cadre de jeu, places, [data-voice-pid]) ----------
   .vc-mark (posé par js/voice.js dans l'avatar) = .vc-ring (anneau vert, opacité 0 → 1 quand il parle, pulsation en
   transform) + .vc-badge (pastille 🎙️ / 🔇 : il est dans le vocal). */
.vc-rel { position: relative; }
.vc-mark { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; }
.vc-ring, .vc-av > .vc-ring {
  position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  border: 3px solid var(--ok); opacity: 0; transform: scale(.94);
  transition: opacity var(--d-rapide, .12s), transform var(--d-rapide, .12s);
}
.vc-mark > .vc-ring { inset: -1px; } /* places des jeux : souvent dans une liste qui rogne ses bords → anneau et pastille dedans */
.vc-badge {
  position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 20px; height: 20px;
  font-size: 11px; line-height: 1; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2);
}
.vc-badge::before { content: "🎙️"; }
.pav > .vc-mark > .vc-ring { inset: -4px; } /* avatar rond du salon : anneau autour, pastille à cheval */
.pav > .vc-mark > .vc-badge { right: -6px; bottom: -6px; }
.vc-muted > .vc-mark .vc-badge::before { content: "🔇"; }
.vc-talk > .vc-mark .vc-ring, .vc-row.is-talk .vc-ring { opacity: 1; transform: scale(1); animation: vc-talk .7s ease-in-out infinite alternate; }
@keyframes vc-talk { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Mouvement réduit / appareil modeste : pas de pulsation, l'anneau reste fixe */
.perf-lite .vc-talk > .vc-mark .vc-ring, .perf-lite .vc-row.is-talk .vc-ring { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .vc-talk > .vc-mark .vc-ring, .vc-row.is-talk .vc-ring { animation: none; }
  .vc-panel { animation: none; }
}

/* ---------- Éléments audio : hors écran, jamais déplacés ---------- */
.vc-audio { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------- Écran de fin (.end-top) : vocal réduit à un bouton, entre « Passer » et 🔊 ----------
   La barre pousse son dernier bouton à droite (margin-left: auto) : c'est le vocal qui prend ce rôle quand il est là.
   « Passer l'animation » devient « Passer » pour ne jamais toucher le titre posé sur la même ligne (ordinateur). */
.end-top .vc { margin-left: auto; }
.end-top .vc .icon-btn, .end-top .voice-slot:not(:empty) ~ .icon-btn { margin-left: 0; }
.end-screen.is-playing .end-top .vc { margin-left: 0; }
.end-top:has(.vc) .skip-long { display: none; }