/* ==========================================================================
   Voice chat UI — dusk sakura theme
   Visual + animation assets only. No audio / WebRTC logic.

   State is driven purely by classes and data attributes:
     .vc-dock[data-state="idle | connecting | live"]
     .vc-dock.is-muted      .vc-dock.is-deaf      .vc-dock.is-talking
     .vc-user.is-speaking   .vc-user.is-muted     .vc-user.is-deaf
     .vc-user.is-joining    .vc-user.is-leaving
   ========================================================================== */

:root {
  --vc-night: #16132e;
  --vc-plum: #2e2250;
  --vc-dusk: #5a3a73;
  --vc-sakura: #f6b3c9;
  --vc-sakura-deep: #e8799f;
  --vc-moon: #fff0cf;
  --vc-glow: #ffc9a8;
  --vc-text: #f4eaf6;
  --vc-muted: #b8a9cc;
  --vc-danger: #ff7a8f;
  --vc-ok: #9be3b8;
  --vc-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --vc-ease: cubic-bezier(.22, 1, .36, 1);
}

.vc-panel, .vc-mini, .vc-toast { font-family: var(--vc-font); color: var(--vc-text); }
.vc-panel *, .vc-mini *, .vc-toast * { box-sizing: border-box; }

/* ---------- Panel ---------- */
.vc-panel {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(46, 34, 80, .78), rgba(22, 19, 46, .88));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(246, 179, 201, .2);
  box-shadow: 0 24px 60px rgba(8, 5, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.vc-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(246, 179, 201, .12);
}
.vc-title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.vc-sub { margin: 3px 0 0; font-size: .8rem; color: var(--vc-muted); display: flex; align-items: center; gap: 6px; }
.vc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vc-muted); transition: background .4s; }
.vc-panel[data-connected="true"] .vc-live-dot { background: var(--vc-ok); animation: vc-blink 2.4s ease-in-out infinite; }

.vc-level {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  color: var(--vc-night); background: var(--vc-sakura);
}
.vc-level--n2n1 { background: var(--vc-glow); }
.vc-level--native { background: var(--vc-moon); }

/* ---------- Stage / participants ---------- */
.vc-stage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 6px 10px;
  padding: 20px 16px 8px;
  min-height: 190px;
}
.vc-empty {
  grid-column: 1 / -1; align-self: center; text-align: center;
  color: var(--vc-muted); font-size: .9rem; padding: 36px 0;
}

.vc-user {
  --user-color: var(--vc-sakura);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px 10px; border-radius: 18px;
  transition: background .35s;
}
.vc-user.is-speaking { background: rgba(246, 179, 201, .07); }

.vc-avatar-wrap { position: relative; width: 68px; height: 68px; }
.vc-avatar {
  position: relative; z-index: 1;
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.35rem; color: var(--vc-night);
  background: var(--user-color);
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
  transition: box-shadow .3s var(--vc-ease), transform .3s var(--vc-ease), filter .3s;
}
/* speaking: glowing ring + two soft ripples */
.vc-user.is-speaking .vc-avatar {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--user-color), 0 0 24px 2px color-mix(in srgb, var(--user-color) 55%, transparent);
}
.vc-avatar-wrap::before, .vc-avatar-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--user-color); opacity: 0; pointer-events: none;
}
.vc-user.is-speaking .vc-avatar-wrap::before { animation: vc-ripple 1.8s ease-out infinite; }
.vc-user.is-speaking .vc-avatar-wrap::after  { animation: vc-ripple 1.8s ease-out .9s infinite; }

.vc-user.is-muted .vc-avatar, .vc-user.is-deaf .vc-avatar { filter: saturate(.55) brightness(.85); }

.vc-flag {
  position: absolute; z-index: 2; right: -4px; bottom: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--vc-night); border: 2px solid var(--vc-plum); color: var(--vc-danger);
}
.vc-flag svg { width: 13px; height: 13px; }
.vc-user.is-muted .vc-flag, .vc-user.is-deaf .vc-flag { display: grid; animation: vc-pop .35s var(--vc-ease); }

.vc-name-row { display: flex; align-items: center; gap: 5px; max-width: 100%; }
.vc-name { font-size: .88rem; font-weight: 700; color: var(--user-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-seed { font-size: .8rem; line-height: 1; }

/* join / leave */
.vc-user.is-joining { animation: vc-tile-in .7s var(--vc-ease) both; }
.vc-user.is-leaving { animation: vc-tile-out .4s ease-in both; }

/* ---------- Waveform (5 bars) ---------- */
.vc-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.vc-wave span {
  width: 3px; height: 100%; border-radius: 3px; background: var(--user-color, var(--vc-sakura));
  transform: scaleY(.18); transform-origin: center; opacity: .5;
  transition: transform .3s, opacity .3s;
}
.is-speaking .vc-wave span, .vc-wave.is-active span { opacity: 1; animation: vc-bar .9s ease-in-out infinite; }
.vc-wave span:nth-child(1) { animation-delay: -.10s !important; }
.vc-wave span:nth-child(2) { animation-delay: -.45s !important; }
.vc-wave span:nth-child(3) { animation-delay: -.25s !important; }
.vc-wave span:nth-child(4) { animation-delay: -.65s !important; }
.vc-wave span:nth-child(5) { animation-delay: -.35s !important; }

/* ---------- Control dock ---------- */
.vc-dock {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 28px 22px;
  border-top: 1px solid rgba(246, 179, 201, .12);
  background: linear-gradient(180deg, transparent, rgba(8, 5, 24, .35));
}
.vc-side { display: flex; align-items: center; gap: 12px; }
.vc-side--left { justify-content: flex-start; }
.vc-side--right { justify-content: flex-end; }

.vc-btn {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--vc-text); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(246, 179, 201, .18);
  transition: transform .25s var(--vc-ease), background .25s, color .25s, opacity .3s, visibility .3s;
}
.vc-btn svg { width: 21px; height: 21px; }
.vc-btn:hover { transform: translateY(-2px); background: rgba(246, 179, 201, .16); }
.vc-btn:active { transform: scale(.94); }
.vc-btn:focus-visible, .vc-orb:focus-visible { outline: 2px solid var(--vc-moon); outline-offset: 3px; }
.vc-btn--leave:hover { background: rgba(255, 122, 143, .25); color: var(--vc-danger); }
.vc-dock.is-deaf .vc-btn--deafen { background: rgba(255, 122, 143, .2); color: var(--vc-danger); border-color: rgba(255, 122, 143, .5); }

/* hide side buttons until connected */
.vc-dock:not([data-state="live"]) .vc-btn { opacity: 0; visibility: hidden; transform: scale(.7); pointer-events: none; }

/* ---------- The moon orb (main mic / join button) ---------- */
.vc-orb-wrap { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.vc-orb {
  position: relative; z-index: 2; width: 80px; height: 80px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 0;
  color: var(--vc-plum);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), transparent 38%),
    radial-gradient(circle at 70% 68%, rgba(232, 160, 140, .35) 0 9%, transparent 10%),
    radial-gradient(circle at 36% 72%, rgba(232, 160, 140, .28) 0 6%, transparent 7%),
    var(--vc-moon);
  box-shadow: 0 0 28px 4px rgba(255, 240, 207, .35), 0 8px 20px rgba(8, 5, 24, .45);
  transition: transform .3s var(--vc-ease), box-shadow .4s, background-color .4s, color .4s;
}
.vc-orb svg { width: 32px; height: 32px; overflow: visible; }
.vc-orb:hover { transform: scale(1.06); }
.vc-orb:active { transform: scale(.95); }

.vc-orb-label { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; text-align: center; font-size: .78rem; color: var(--vc-muted); min-height: 1.2em; }

/* mic slash: draws itself in when muted */
.vc-slash { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .35s var(--vc-ease); }
.vc-dock.is-muted .vc-slash { stroke-dashoffset: 0; }

/* idle: slow breathing invite */
.vc-dock[data-state="idle"] .vc-orb { animation: vc-breathe 3.6s ease-in-out infinite; }

/* connecting: petals orbit the moon */
.vc-orbit { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .3s; }
.vc-dock[data-state="connecting"] .vc-orbit { opacity: 1; animation: vc-spin 1.8s linear infinite; }
.vc-dock[data-state="connecting"] .vc-orb { transform: scale(.92); box-shadow: 0 0 20px 2px rgba(246, 179, 201, .4); }
.vc-orbit i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #ffd9e6, var(--vc-sakura-deep)); }
.vc-orbit i:nth-child(1) { transform: rotate(0deg)   translateY(-45px) rotate(20deg); }
.vc-orbit i:nth-child(2) { transform: rotate(72deg)  translateY(-45px) rotate(50deg); }
.vc-orbit i:nth-child(3) { transform: rotate(144deg) translateY(-45px) rotate(80deg); }
.vc-orbit i:nth-child(4) { transform: rotate(216deg) translateY(-45px) rotate(110deg); }
.vc-orbit i:nth-child(5) { transform: rotate(288deg) translateY(-45px) rotate(140deg); }

/* live: soft sakura glow */
.vc-dock[data-state="live"] .vc-orb { box-shadow: 0 0 34px 8px rgba(246, 179, 201, .45), 0 8px 20px rgba(8, 5, 24, .45); }
.vc-dock.is-muted .vc-orb, .vc-dock.is-deaf .vc-orb { background: #6c5a88; color: var(--vc-night); box-shadow: 0 8px 20px rgba(8, 5, 24, .45); }
.vc-dock.is-muted .vc-orb { color: #ffe0e6; }

/* talking: ripples radiate from the moon */
.vc-ripple { position: absolute; inset: 6px; z-index: 0; border-radius: 50%; border: 2px solid var(--vc-sakura); opacity: 0; pointer-events: none; }
.vc-dock.is-talking:not(.is-muted):not(.is-deaf) .vc-ripple { animation: vc-ripple-big 2.1s ease-out infinite; }
.vc-ripple--2 { animation-delay: .7s !important; }
.vc-ripple--3 { animation-delay: 1.4s !important; }

/* ---------- Petal burst (play once on join) ---------- */
.vc-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.vc-petal {
  position: absolute; width: 12px; height: 12px; margin: -6px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #ffe3ec, var(--vc-sakura-deep));
  opacity: 0;
  animation: vc-burst 1.5s cubic-bezier(.15, .7, .3, 1) var(--delay, 0s) forwards;
}

/* ---------- Toast ---------- */
.vc-toast-area { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; pointer-events: none; }
.vc-toast {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
  font-size: .85rem; background: rgba(22, 19, 46, .92); border: 1px solid rgba(246, 179, 201, .3);
  box-shadow: 0 10px 30px rgba(8, 5, 24, .5);
  animation: vc-toast 3.2s var(--vc-ease) forwards;
}
.vc-toast::before { content: ""; width: 10px; height: 10px; border-radius: 100% 0 100% 0; background: var(--vc-sakura-deep); }

/* ---------- Mini "connected" bar (for sidebar / bottom of chat) ---------- */
.vc-mini {
  display: none; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(246, 179, 201, .16), rgba(46, 34, 80, .7));
  border: 1px solid rgba(246, 179, 201, .25);
}
.vc-mini.is-visible { display: flex; animation: vc-tile-in .5s var(--vc-ease) both; }
.vc-mini__text { flex: 1; min-width: 0; line-height: 1.3; }
.vc-mini__status { display: block; font-size: .76rem; font-weight: 700; color: var(--vc-ok); }
.vc-mini__room { display: block; font-size: .8rem; color: var(--vc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-mini__actions { display: flex; align-items: center; gap: 8px; }
.vc-mini .vc-btn { width: 36px; height: 36px; }
.vc-mini .vc-btn svg { width: 17px; height: 17px; }
.vc-mini.is-muted .vc-wave, .vc-mini.is-deaf .vc-wave { opacity: .3; }
.vc-mini.is-muted .vc-mini__status { color: var(--vc-danger); }

/* toggle buttons with two icons (on / off) — used by mute + deafen in the mini bar */
.vc-btn .vc-ico-off { display: none; }
.vc-btn.is-active .vc-ico-on { display: none; }
.vc-btn.is-active .vc-ico-off { display: block; }
.vc-btn--toggle.is-active { background: rgba(255, 122, 143, .2); color: var(--vc-danger); border-color: rgba(255, 122, 143, .5); }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes vc-ripple      { 0% { transform: scale(1);   opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes vc-ripple-big  { 0% { transform: scale(.95); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes vc-bar         { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
@keyframes vc-breathe     { 0%, 100% { transform: scale(1); box-shadow: 0 0 28px 4px rgba(255, 240, 207, .3), 0 8px 20px rgba(8, 5, 24, .45); } 50% { transform: scale(1.05); box-shadow: 0 0 44px 10px rgba(255, 240, 207, .5), 0 8px 20px rgba(8, 5, 24, .45); } }
@keyframes vc-spin        { to { transform: rotate(360deg); } }
@keyframes vc-pop         { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes vc-blink       { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes vc-tile-in     { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes vc-tile-out    { to { opacity: 0; transform: translateY(-8px) scale(.85); } }
@keyframes vc-toast       { 0% { opacity: 0; transform: translateY(16px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes vc-burst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .vc-panel *, .vc-mini *, .vc-toast, .vc-petal { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .vc-user.is-speaking .vc-avatar-wrap::before, .vc-user.is-speaking .vc-avatar-wrap::after { animation: none; }
}

@media (max-width: 420px) {
  .vc-dock { padding-inline: 14px; }
  .vc-side { gap: 8px; }
  .vc-btn { width: 44px; height: 44px; }
}