/* Clochat voice messages, voice player, composer mic/send button, mic
   permission toggle.

   Consolidated from css/50-voice-composer.css's v61->v69 cascade. The v61
   (`.voice-btn`, plain `.voice-card`) and v62 (`.voice-card` without
   `.v63`) rules are dropped: composer/voice.js (final, v64) always renders
   `class="voice-card v63 v64"`, and composer/text-composer.js (final,
   stability/056) always renders the `#send` button with class
   `voice-send-toggle` removed in favor of plain `.send#send` with
   `.is-mic`/`.is-send` toggling — so the old `.voice-btn` selectors target
   markup that is no longer produced. v63/v64/v65 (the actual voice card)
   and v67/v68/v69 (composer touch behavior, mic settings toggle, lazy
   audio preload) are all still live and kept verbatim. */

.msg audio { width: min(260px, 64vw); max-width: 100%; display: block; }
.msg.mine audio { filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.msg audio { display: none !important; } /* v62: replaced by the custom voice-card player */

/* ===== v63: visible Telegram-like voice player with seek + speed ===== */
.msg.voice-msg {
  min-width: 226px !important;
  max-width: min(84%, 326px) !important;
  padding: 8px 9px 7px !important;
  overflow: visible !important;
}
.msg.voice-msg .msgmeta { margin-top: 3px !important; }
.voice-card.v63 {
  width: 100% !important;
  min-width: 204px !important;
  max-width: 100% !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 2px 0 !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.voice-card.v63 .voice-play {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  padding: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.msg.mine .voice-card.v63 .voice-play { background: rgba(255,255,255,.22) !important; }
.voice-card.v63 .voice-play svg { width: 17px !important; height: 17px !important; display: block !important; fill: currentColor !important; }
.voice-card.v63 .voice-body { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.voice-card.v63 .voice-top { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
.voice-card.v63 .voice-wave {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 104px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 2px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background: rgba(0,0,0,.06) !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.voice-card.v63 .voice-wave::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: calc(var(--voice-progress,0) * 1%) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.17) !important;
  pointer-events: none !important;
}
/* v64: seek-bar position indicator drawn over the progress fill. */
.voice-card.v63 .voice-wave::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: calc(var(--voice-progress,0) * 1%) !important;
  width: 2px !important;
  transform: translateX(-1px) !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.9) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}
.voice-card.v63 .voice-wave.seeking { filter: brightness(1.12) !important; }
.voice-card.v63 .voice-bar {
  position: relative !important;
  z-index: 1 !important;
  width: 2.5px !important;
  flex: 0 0 2.5px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.42) !important;
  opacity: 1 !important;
  transition: background .08s linear, transform .08s linear !important;
}
.voice-card.v63 .voice-bar.on { background: rgba(255,255,255,.96) !important; }
.voice-card.v63.playing .voice-bar { transform: scaleY(1.06) !important; }
.voice-card.v63 .voice-speed {
  flex: 0 0 auto !important;
  min-width: 32px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 13px !important;
  padding: 0 7px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font: 700 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.msg.mine .voice-card.v63 .voice-speed { background: rgba(255,255,255,.18) !important; }
.voice-card.v63 .voice-info { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; color: rgba(232,237,255,.70) !important; font-size: 11px !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; min-height: 13px !important; }
.msg.mine .voice-card.v63 .voice-info { color: rgba(255,255,255,.76) !important; }
.voice-card.v63 .voice-caption { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.voice-card.v63 .voice-time { white-space: nowrap !important; color: inherit !important; }
.voice-card.v63.voice-missing { opacity: .82 !important; }
.voice-card.v63.voice-missing .voice-wave { display: none !important; }
.voice-card.v63.voice-missing .voice-caption { color: rgba(255,255,255,.82) !important; }

/* ===== v64: outgoing/incoming alignment for voice messages ===== */
.msg.voice-msg.mine { margin-left: auto !important; margin-right: 10px !important; align-self: flex-end !important; }
.msg.voice-msg:not(.mine) { margin-left: 10px !important; margin-right: auto !important; align-self: flex-start !important; }

/* ===== v65: safety net — a voice marked as mine always uses outgoing styling ===== */
.msg.voice-msg.mine,
.msg.voice-msg[data-mine="1"] {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: linear-gradient(135deg,#4d6422,#3a5018) !important;
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 6px !important;
}
.msg.voice-msg:not(.mine)[data-mine="0"] { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; }

@media (max-width: 390px) {
  .msg.voice-msg { min-width: 226px !important; max-width: min(84%,326px) !important; padding-left: 9px !important; padding-right: 9px !important; }
  .voice-card.v63 { min-width: 204px !important; gap: 8px !important; }
  .voice-card.v63 .voice-play { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  .voice-card.v63 .voice-speed { min-width: 32px !important; padding: 0 7px !important; }
  .voice-card.v63 .voice-wave { gap: 2px !important; min-width: 104px !important; }
  .voice-card.v63 .voice-bar { width: 2.5px !important; flex-basis: 2.5px !important; }
}

/* ===== v67: composer touch/selection stability ===== */
.composer, .composer *, #send, #send *, .voice-send-toggle, .voice-send-toggle * {
  -webkit-user-select: none !important; user-select: none !important;
  -webkit-touch-callout: none !important;
}
#text { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; }
#send, .voice-send-toggle { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; }

/* ===== v69: voice card performance ===== */
.voice-card audio.voice-audio { preload: none !important; }
.voice-toast { contain: layout paint style; transform: translateZ(0); }

/* ===== final-stable-icon-and-touch-fixes (99-final-fixes.css) =====
   Final #send button is always `<button class="send" id="send">` with the
   mic/send SVG injected by composer/text-composer.js's updateComposer(),
   which is the markup these selectors target — kept here since this is the
   composer's icon styling layer, not voice-card specific. */
#send.send svg, .send#send svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  overflow: visible !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: #fff !important;
  pointer-events: none !important;
}
#send.send svg path, .send#send svg path {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#send.send.is-mic, #send.send.is-send {
  color: #fff !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.voice-toast-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 6px rgba(255,77,79,.8);
  animation: voiceToastBlink 1s ease-in-out infinite;
}
@keyframes voiceToastBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.voice-toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  max-width: 696px;
  margin: auto;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(14,26,10,.97);
  border: 1px solid rgba(110,138,47,.35);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
}

/* ===== Voice recording mode (tap-to-record UI) ===== */
.voice-record-hint {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
}
.voice-cancel-x {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #1e2a14;
  color: #fff;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.voice-hint-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 16px;
  background: #0f1420;
  border: 1px solid rgba(110,138,47,.25);
}
.voice-hint-text {
  color: rgba(255,255,255,.62);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}