/* Cabo – Sprachnachrichten */
.vc-btn { position: relative; color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.vc-btn svg { pointer-events: none; }
.vc-btn:disabled { opacity: .4; cursor: not-allowed; }
.vc-btn.rec { background: var(--danger); border-color: transparent; color: #fff; animation: vcPulse 1.1s ease-out infinite; }
@keyframes vcPulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.65); }
  100% { box-shadow: 0 0 0 16px rgba(239,68,68,0); }
}
.vc-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--grad); color: #fff; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
.vc-badge[hidden] { display: none; }
.vc-btn.rec .vc-badge { display: none; }
html.vc-recording, html.vc-recording body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Aufnahme-Panel */
.vc-panel { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  width: min(86vw, 300px); padding: 12px 16px 10px; border-radius: 18px; text-align: center;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.7); color: var(--ink);
  opacity: 0; pointer-events: none; transform: translate(-50%, 14px) scale(.96); transition: opacity .18s, transform .18s; }
.vc-panel.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.vc-panel.cancel { border-color: var(--danger); box-shadow: 0 20px 50px -18px rgba(239,68,68,.6); }
.vc-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-variant-numeric: tabular-nums; }
.vc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); align-self: center; animation: vcBlink 1s steps(2) infinite; }
@keyframes vcBlink { 50% { opacity: .25; } }
.vc-time { font-weight: 800; font-size: 1.4rem; }
.vc-max { color: var(--muted); font-size: .8rem; }
.vc-meter { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; margin: 8px 0 6px; }
.vc-meter i { display: block; width: 6px; height: 100%; border-radius: 3px; background: var(--grad); transform: scaleY(.12); transition: transform .08s linear; }
.vc-panel.cancel .vc-meter i { background: var(--danger); }
.vc-hint { color: var(--muted); font-size: .78rem; }
.vc-panel.cancel .vc-hint { color: var(--danger); font-weight: 700; }

/* Hinweis */
.vc-note { position: fixed; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 95; max-width: 88vw;
  padding: 9px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; text-align: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.vc-note.show { opacity: 1; transform: translate(-50%, 0); }
.vc-note.err { border-color: var(--danger); color: #ffb4b4; }

/* Sprechblasen */
.vc-bubbles { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 80;
  width: min(92vw, 340px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.vc-bubble { display: flex; align-items: stretch; border-radius: 16px; overflow: hidden; pointer-events: auto;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.75); color: var(--ink);
  opacity: 0; transform: translateY(-10px) scale(.97); transition: opacity .25s, transform .25s, border-color .2s; }
.vc-bubble.in { opacity: 1; transform: none; }
.vc-bubble.new { border-color: rgba(236,72,153,.55); }
.vc-bubble.playing { border-color: transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box; }
.vc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; color: inherit;
  -webkit-tap-highlight-color: transparent; }
.vc-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: var(--pc, var(--accent)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset; }
.vc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.vc-txt b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-txt small { color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-wave { flex: none; display: flex; align-items: center; gap: 2px; height: 20px; }
.vc-wave i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--muted); opacity: .6; transform: scaleY(.3); }
.vc-bubble.playing .vc-wave i { background: var(--grad); opacity: 1; animation: vcWave .8s ease-in-out infinite; }
.vc-bubble.playing .vc-wave i:nth-child(2) { animation-delay: -.6s; }
.vc-bubble.playing .vc-wave i:nth-child(3) { animation-delay: -.3s; }
.vc-bubble.playing .vc-wave i:nth-child(4) { animation-delay: -.45s; }
.vc-bubble.playing .vc-wave i:nth-child(5) { animation-delay: -.15s; }
@keyframes vcWave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.vc-dur { flex: none; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.vc-mute { flex: none; width: 36px; display: grid; place-items: center; color: var(--muted); border-left: 1px solid var(--line); }
.vc-mute.off { color: var(--accent-3); }
@media (prefers-reduced-motion: reduce) {
  .vc-btn.rec, .vc-dot, .vc-bubble.playing .vc-wave i { animation: none; }
  .vc-bubble.playing .vc-wave i { transform: scaleY(.8); }
}