/**
 * Composer voice — same footprint as text composer,
 * thin tall bars, Telegram mic ↔ send morph.
 */

:root {
  /* Faster + smoother than punchy overshoot */
  --voice-snap: cubic-bezier(0.33, 1, 0.68, 1);
  --voice-punch: cubic-bezier(0.22, 1, 0.36, 1);
  --voice-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --voice-morph-ms: 300ms;
  --voice-exit-ms: 260ms;
  /* Exact idle composer: pad 18+12 + field 52 + gap 4 + toolbar 42 = 128 */
  --voice-card-min-h: 128px;
  --voice-card-to-h: 68px;
  --voice-compress-dur: 0.42s;
  --voice-expand-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --voice-bar-h: 98px;
  --voice-btn: 46px;
  --voice-btn-icon: 18px;
  --voice-gap: 10px;
  --voice-pad-y: 18px;
  --voice-pad-x: 18px;
  --voice-pad-b: 12px;
  --send-icon-ms: 200ms;
  --voice-wave-w: 70%;
  /* Must fit inside 98px stage — label overlays, no extra height */
  --voice-canvas-h: 64px;
}

/* —— Telegram mic ↔ send morph (both icons stay mounted) —— */

.composer-send .composer-send-icon--send,
.composer-send .composer-send-icon--voice {
  transition:
    opacity var(--send-icon-ms) var(--voice-punch),
    transform var(--send-icon-ms) var(--voice-punch),
    filter var(--send-icon-ms) var(--voice-soft);
  will-change: opacity, transform;
}

/* Default / has text → send visible */
.composer-send:not(.is-voice):not(.is-stop) .composer-send-icon--send {
  display: grid !important;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: blur(0);
}

.composer-send:not(.is-voice):not(.is-stop) .composer-send-icon--voice {
  display: grid !important;
  opacity: 0;
  transform: scale(0.55) rotate(-18deg);
  filter: blur(1px);
  pointer-events: none;
}

/* Empty → mic visible */
.composer-send.is-voice:not(.is-stop) {
  touch-action: none;
  color: var(--sw-text-main, #fff);
}

.composer-send.is-voice:not(.is-stop) .composer-send-icon--send {
  display: grid !important;
  opacity: 0;
  transform: scale(0.55) rotate(18deg);
  filter: blur(1px);
  pointer-events: none;
}

.composer-send.is-voice:not(.is-stop) .composer-send-icon--voice {
  display: grid !important;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: blur(0);
}

.composer-send.is-voice-holding:not(.is-stop) {
  transform: scale(0.96);
  filter: none;
}

/* Mobile short-hold arm — press feedback before recording chrome opens */
body.is-mobile .composer-send.is-voice.tg-voice-arming:not(.is-stop) {
  transform: scale(0.9);
  transition: transform 0.12s ease;
}

/* Mobile only — bare mic glyph */
body.is-mobile .composer-send.is-voice:active:not(:disabled):not(.is-stop),
body.is-mobile .composer-send.is-voice:hover:not(:disabled):not(.is-stop) {
  background: transparent;
  border-color: transparent;
  filter: none;
  color: var(--sw-text-main, #fff);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

body.is-mobile .composer-send.is-voice:hover:not(:disabled):not(.is-stop) .composer-send-voice,
body.is-mobile .composer-send.is-voice:hover:not(:disabled):not(.is-stop) .composer-send-icon--voice {
  filter: brightness(1.35);
  opacity: 1;
}

/* PC mic — no square chip behind icon (glyph untouched); locked send keeps chip */
body:not(.is-mobile) .composer-send.is-voice:not(.is-stop):not(.is-voice-locked) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

body:not(.is-mobile) .composer-send.is-voice:not(.is-voice-locked):hover:not(:disabled):not(.is-stop),
body:not(.is-mobile) .composer-send.is-voice:not(.is-voice-locked):active:not(:disabled):not(.is-stop) {
  background: transparent !important;
  border-color: transparent !important;
  filter: none;
  box-shadow: none !important;
}

body:not(.is-mobile) .composer-send.is-voice:not(.is-voice-locked):hover:not(:disabled):not(.is-stop) .composer-send-voice,
body:not(.is-mobile) .composer-send.is-voice:not(.is-voice-locked):hover:not(:disabled):not(.is-stop) .composer-send-icon--voice {
  filter: brightness(1.35);
  opacity: 1;
}

.composer-send.is-voice-recording:not(.is-stop):not(.is-voice-locked) {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Locked hands-free — plane send like Telegram */
.composer-send.is-voice-locked:not(.is-stop) {
  color: var(--sw-primary, #6ee7ff);
}

.composer-send.is-voice-locked:not(.is-stop) .composer-send-icon--send {
  display: grid !important;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: blur(0);
  pointer-events: auto;
}

.composer-send.is-voice-locked:not(.is-stop) .composer-send-icon--voice {
  display: grid !important;
  opacity: 0;
  transform: scale(0.55) rotate(-18deg);
  filter: blur(1px);
  pointer-events: none;
}

.composer-send-voice {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 1;
  transition:
    filter 0.18s var(--voice-soft),
    opacity 0.18s var(--voice-soft),
    transform 0.2s var(--voice-snap);
}

.composer-send-plane {
  display: none !important;
}

/* PC locked send uses arrow (plane node optional / removed) */
body:not(.is-mobile) .composer-send.is-voice-locked:not(.is-stop) .composer-send-arrow {
  display: block;
}

.composer-send.is-voice:not(.is-voice-locked):not(.is-stop) .composer-send-arrow {
  display: none;
}

.composer-send-arc-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.composer-send.is-voice-recording:not(.is-voice-locked) .composer-send-arc-canvas {
  opacity: 1;
}

/* —— Live card = same size as text composer —— */

.composer-card {
  position: relative;
}

.composer-card.is-voice-live {
  gap: 0;
  min-height: var(--voice-card-min-h);
  max-height: var(--voice-card-min-h);
  height: var(--voice-card-min-h);
  padding: var(--voice-pad-y) var(--voice-pad-x) var(--voice-pad-b);
  overflow: hidden;
  background: var(--composer-surface, rgba(14, 14, 16, 0.55));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--voice-morph-ms) var(--voice-soft),
    height var(--voice-compress-dur) var(--voice-expand-ease),
    min-height var(--voice-compress-dur) var(--voice-expand-ease),
    max-height var(--voice-compress-dur) var(--voice-expand-ease),
    padding var(--voice-compress-dur) var(--voice-expand-ease);
  isolation: isolate;
}

/* Opaque scrim — masks toolbar/field bleed during recording */
.composer-card.is-voice-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: var(--composer-surface, rgba(14, 14, 16, 0.55));
  pointer-events: none;
}

/*
 * PC: do not stack a second translucent layer — same visual alpha as text composer.
 * (Two rgba(…, 0.55) layers read as ~0.8 opaque.)
 */
body:not(.is-mobile) .composer-card.is-voice-live::before,
body:not(.is-mobile) .composer-card.is-voice-closing::before {
  background: transparent;
}

/* Kill composer-card:focus-within accent ring / lift on press */
.composer-card.is-voice-live:focus-within,
.composer-card.is-voice-closing:focus-within,
.composer-card.is-voice-live:active,
.composer-card.is-voice-closing:active,
.composer-card:has(.composer-send.is-voice),
.composer-card:has(.composer-send.is-voice):focus-within,
.composer-card:has(.composer-send.is-voice):active,
.composer-card:has(.composer-send.is-voice-holding),
.composer-card:has(.composer-send.is-voice:focus),
.composer-card:has(.composer-send.is-voice:active) {
  background: var(--composer-surface, rgba(14, 14, 16, 0.55)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Keep field/toolbar ABSOLUTE for the whole close — switching to relative causes PC layout jerk */
.composer-card.is-voice-live.is-voice-closing,
.composer-card.is-voice-closing {
  min-height: var(--voice-card-min-h);
  max-height: var(--voice-card-min-h);
  height: var(--voice-card-min-h);
}

.composer-card.is-voice-live.is-voice-closing .composer-voice-stage {
  position: absolute;
  left: var(--voice-pad-x);
  right: var(--voice-pad-x);
  top: var(--voice-pad-y);
  bottom: var(--voice-pad-b);
  width: auto;
  margin: 0;
  z-index: 4;
  min-height: 0;
}
.composer-card.is-voice-live > .composer-card__field,
.composer-card.is-voice-live > .composer-card__toolbar,
.composer-card.is-voice-live > .composer-attach-sheet,
body.is-mobile .composer-card.is-voice-live > .composer-card__field,
body.is-mobile .composer-card.is-voice-live > .composer-card__toolbar {
  position: absolute !important;
  left: var(--voice-pad-x);
  right: var(--voice-pad-x);
  top: var(--voice-pad-y);
  z-index: 0;
  margin: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.34s var(--voice-snap),
    transform 0.4s var(--voice-snap),
    visibility 0s linear 0.38s;
}

.composer-card.is-voice-live.is-voice-menu-out > .composer-card__field,
.composer-card.is-voice-live.is-voice-menu-out > .composer-card__toolbar,
.composer-card.is-voice-live.is-voice-menu-out > .composer-attach-sheet,
body.is-mobile .composer-card.is-voice-live.is-voice-menu-out > .composer-card__field,
body.is-mobile .composer-card.is-voice-live.is-voice-menu-out > .composer-card__toolbar {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, -36px, 0) !important;
  pointer-events: none !important;
}

/* Locked hands-free: only send plane visible, no attach/mode ghosts */
.composer-card.is-voice-live.is-voice-locked > .composer-card__toolbar {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: none !important;
  z-index: 6;
}

.composer-card.is-voice-live.is-voice-locked .composer-card__toolbar .composer-tool,
.composer-card.is-voice-live.is-voice-locked .composer-card__toolbar .composer-tools,
.composer-card.is-voice-live.is-voice-locked .composer-card__toolbar .composer-card__spacer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.composer-card.is-voice-live.is-voice-locked #send-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Close: keep field/toolbar fully hidden while height expands — early opacity:1 caused a white flash. */
.composer-card.is-voice-live.is-voice-closing > .composer-card__field,
.composer-card.is-voice-live.is-voice-closing > .composer-card__toolbar,
.composer-card.is-voice-closing > .composer-card__field,
.composer-card.is-voice-closing > .composer-card__toolbar,
body.is-mobile .composer-card.is-voice-live.is-voice-closing > .composer-card__field,
body.is-mobile .composer-card.is-voice-live.is-voice-closing > .composer-card__toolbar {
  position: absolute !important;
  left: var(--voice-pad-x);
  right: var(--voice-pad-x);
  top: var(--voice-pad-y);
  z-index: 0;
  margin: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: none !important;
}

.composer-card.is-voice-live.is-voice-closing > .composer-card__toolbar,
.composer-card.is-voice-closing > .composer-card__toolbar,
body.is-mobile .composer-card.is-voice-live.is-voice-closing > .composer-card__toolbar {
  top: auto;
  bottom: var(--voice-pad-b);
}

/* Freeze placeholder chrome while morphing — dots/line transitions jerk at settle */
.composer-card.is-voice-live .composer-ph,
.composer-card.is-voice-closing .composer-ph,
.composer-card.is-voice-settling .composer-ph {
  transition: none !important;
}

.composer-card.is-voice-live .composer-ph__line,
.composer-card.is-voice-closing .composer-ph__line,
.composer-card.is-voice-settling .composer-ph__line {
  transition: none !important;
  transform: translateY(0) !important;
}

/* PC: placeholder stays hidden until restore, then fades in softly. */
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-restoring .composer-ph,
body:not(.is-mobile) .composer-card.is-voice-closing.is-voice-restoring .composer-ph {
  opacity: 0 !important;
  transition: opacity 0.45s var(--voice-expand-ease) !important;
  pointer-events: none;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-restoring .composer-ph__line,
body:not(.is-mobile) .composer-card.is-voice-closing.is-voice-restoring .composer-ph__line {
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;
  transition:
    opacity 0.45s var(--voice-expand-ease),
    transform 0.45s var(--voice-expand-ease) !important;
}

body:not(.is-mobile) .composer-card.is-voice-ph-in .composer-ph,
body:not(.is-mobile) .composer-card.is-voice-settling.is-voice-ph-in .composer-ph {
  opacity: 1 !important;
}

body:not(.is-mobile) .composer-card.is-voice-ph-in .composer-ph__line,
body:not(.is-mobile) .composer-card.is-voice-settling.is-voice-ph-in .composer-ph__line {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-restoring .composer-card__input,
body:not(.is-mobile) .composer-card.is-voice-closing.is-voice-restoring .composer-card__input {
  color: transparent;
  transition: color 0.4s var(--voice-expand-ease);
  caret-color: transparent;
}

body:not(.is-mobile) .composer-card.is-voice-ph-in .composer-card__input,
body:not(.is-mobile) .composer-card.is-voice-settling .composer-card__input {
  color: var(--sw-text-main, #fff);
  caret-color: auto;
}

.composer-card.is-voice-live .composer-ph__dot,
.composer-card.is-voice-closing .composer-ph__dot,
.composer-card.is-voice-settling .composer-ph__dot {
  animation-play-state: paused !important;
}

/* One-frame settle after absolute→flow — kill leftover transform transitions */
.composer-card.is-voice-settling > .composer-card__field,
.composer-card.is-voice-settling > .composer-card__toolbar {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* PC settle: keep soft transitions — hard cut makes tools jerk into place. */
body:not(.is-mobile) .composer-card.is-voice-settling > .composer-card__field,
body:not(.is-mobile) .composer-card.is-voice-settling > .composer-card__toolbar {
  transition:
    opacity 0.28s var(--voice-expand-ease),
    transform 0.28s var(--voice-expand-ease) !important;
  transform: none !important;
  opacity: 1 !important;
}

.composer-card.is-voice-live > .composer-card__toolbar {
  top: auto;
  bottom: var(--voice-pad-b);
}

.composer-card.is-voice-live > .composer-attach-sheet {
  top: 0;
  bottom: 0;
  height: auto !important;
  max-height: none !important;
}

.composer-card:not(.is-voice-live) .composer-card__field,
.composer-card:not(.is-voice-live) .composer-card__toolbar {
  max-height: 220px;
  opacity: 1;
  transform: none;
  transition: none;
}

.composer:has(.composer-card.is-voice-live) .composer-mode-hint {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.18s var(--voice-snap),
    opacity 0.14s var(--voice-snap),
    margin 0.18s var(--voice-snap);
}

/* Step 2 — Telegram-style recording bar */
.composer-voice-stage {
  display: none;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: var(--voice-bar-h);
  flex: 1 1 auto;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
  will-change: transform, opacity;
}

.composer-card.is-voice-live .composer-voice-stage {
  display: flex !important;
  position: relative;
  z-index: 5;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  overflow: hidden;
  animation: composer-voice-bar-in 0.28s 0.02s var(--voice-snap) both;
}

/* Cancel — Telegram caps link style */
.composer-voice-stage__cancel {
  flex: 0 0 auto;
  order: 3;
  margin: 0;
  padding: 8px 10px 8px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sw-primary, #54a9ff);
  line-height: 1.2;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.18s var(--voice-soft), color 0.18s var(--voice-soft);
}

.composer-voice-stage__cancel-text {
  pointer-events: none;
}

.composer-voice-stage__cancel:hover,
.composer-voice-stage__cancel:active {
  color: color-mix(in srgb, var(--sw-primary, #54a9ff) 88%, #fff);
}

.composer-card.is-voice-live .composer-voice-stage__cancel {
  animation: composer-voice-ctrl-in 0.26s 0.06s var(--voice-snap) both;
}

/* Timer — next to red dot */
.composer-voice-stage__timer {
  flex: 0 0 auto;
  order: 2;
  min-width: 3.6em;
  margin: 0 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--sw-text-main, #fff);
  opacity: 0;
  line-height: 1;
}

.composer-card.is-voice-live .composer-voice-stage__timer {
  animation: composer-voice-ctrl-in 0.26s 0.08s var(--voice-snap) both;
}

/* Recording indicator — pulsing red dot (left) */
.composer-voice-stage__rec-dot {
  order: 1;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin: 0 10px 0 0;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45);
  opacity: 0;
  animation: composer-voice-rec-pulse 1.15s ease-in-out infinite;
}

.composer-card.is-voice-live .composer-voice-stage__rec-dot {
  animation:
    composer-voice-ctrl-in 0.22s 0.04s var(--voice-snap) both,
    composer-voice-rec-pulse 1.15s 0.2s ease-in-out infinite;
}

@keyframes composer-voice-rec-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.42);
  }
  50% {
    opacity: 0.82;
    transform: scale(0.92);
    box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);
  }
}

.composer-card.is-voice-live.is-voice-closing .composer-voice-stage {
  animation: composer-voice-bar-out 0.24s var(--voice-snap) both;
}

.composer-voice-stage[hidden] {
  display: none !important;
}

.composer-voice-stage__body {
  position: relative;
  flex: 1 1 auto;
  order: 4;
  min-width: 0;
  height: var(--voice-bar-h);
  min-height: var(--voice-bar-h);
  max-height: var(--voice-bar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-left: 8px;
}

/* Wave track fits locked card; label overlays bottom */
.composer-voice-stage__canvas {
  display: block;
  width: var(--voice-wave-w);
  max-width: 420px;
  height: var(--voice-canvas-h);
  margin: 0 auto;
  border-radius: 0;
  touch-action: none;
  opacity: 0;
  transform-origin: center center;
}

.composer-card.is-voice-live .composer-voice-stage__canvas {
  animation: composer-voice-wave-in 0.32s 0.1s var(--voice-soft) both;
}

.composer-card.is-voice-live.is-voice-closing .composer-voice-stage__canvas {
  animation: composer-voice-wave-out 0.2s var(--voice-soft) both;
}

.composer-voice-stage__label {
  position: absolute;
  left: 50%;
  bottom: 4px;
  margin: 0;
  padding: 0;
  width: var(--voice-wave-w);
  max-width: 420px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sw-text-muted, rgba(255, 255, 255, 0.42));
  opacity: 0;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
}

.composer-card.is-voice-live .composer-voice-stage__label:not([hidden]) {
  animation:
    composer-voice-label-in 0.28s 0.16s var(--voice-soft) both,
    composer-voice-label-pulse 2s 0.5s var(--voice-soft) infinite;
}

.composer-card.is-voice-live.is-voice-closing .composer-voice-stage__label:not([hidden]) {
  animation: composer-voice-label-out 0.16s var(--voice-soft) both;
}

.composer-voice-stage__label.is-error {
  color: #ff8f8f;
  animation: composer-voice-label-in 0.25s 0.1s var(--voice-soft) both !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 500;
}

.composer-card.is-voice-live.is-voice-closing .composer-voice-stage__cancel,
.composer-card.is-voice-live.is-voice-closing .composer-voice-stage__timer,
.composer-card.is-voice-live.is-voice-closing .composer-voice-stage__rec-dot {
  animation: composer-voice-ctrl-out 0.18s var(--voice-soft) both;
}

@keyframes composer-voice-bar-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 28%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes composer-voice-bar-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 22%, 0);
  }
}

@keyframes composer-voice-wave-in {
  from {
    opacity: 0;
    transform: scaleY(0.55) scaleX(0.96);
  }
  to {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes composer-voice-wave-out {
  from {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0.6) scaleX(0.96);
  }
}

@keyframes composer-voice-ctrl-in {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes composer-voice-ctrl-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(3px);
  }
}

@keyframes composer-voice-label-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 0.72;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes composer-voice-label-out {
  from {
    opacity: 0.72;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
}

@keyframes composer-voice-label-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .composer-card.is-voice-live .composer-voice-stage,
  .composer-card.is-voice-live.is-voice-closing .composer-voice-stage,
  .composer-card.is-voice-live .composer-voice-stage__canvas,
  .composer-card.is-voice-live .composer-voice-stage__label,
  .composer-card.is-voice-live .composer-voice-stage__cancel,
  .composer-card.is-voice-live .composer-voice-stage__timer,
  .composer-card.is-voice-live .composer-voice-stage__rec-dot,
  .composer-send .composer-send-icon--send,
  .composer-send .composer-send-icon--voice {
    animation: none !important;
    transition: none !important;
  }

  .composer-send.is-voice:not(.is-stop) .composer-send-icon--voice,
  .composer-send:not(.is-voice):not(.is-stop) .composer-send-icon--send {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Mobile voice UI lives in tg-voice-panel.css */

/* PC live bar — stage left, send right (from first paint, not only after compact) */
body:not(.is-mobile) {
  --voice-compress-dur: 0.52s;
  --voice-expand-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --voice-morph-ms: 360ms;
  --voice-exit-ms: 420ms;
  --voice-card-to-h: 64px;
  --voice-snap: cubic-bezier(0.16, 1, 0.3, 1);
}

body:not(.is-mobile) .composer-card.is-voice-live {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  column-gap: 10px;
  /* Single surface layer — match idle text composer transparency */
  background: var(--composer-surface, rgba(14, 14, 16, 0.55)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  transition:
    background var(--voice-morph-ms) var(--voice-soft),
    height var(--voice-compress-dur) var(--voice-expand-ease),
    min-height var(--voice-compress-dur) var(--voice-expand-ease),
    max-height var(--voice-compress-dur) var(--voice-expand-ease),
    padding var(--voice-compress-dur) var(--voice-expand-ease);
}

/* PC never flashes the tall wave stage — bar chrome only. */
body:not(.is-mobile) .composer-card.is-voice-live .composer-voice-stage__label,
body:not(.is-mobile) .composer-card.is-voice-live .composer-voice-stage__body,
body:not(.is-mobile) .composer-card.is-voice-live .composer-voice-stage__canvas {
  display: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live > .composer-voice-stage {
  grid-column: 1;
  grid-row: 1;
  animation: composer-voice-pc-stage-in 0.48s var(--voice-expand-ease) both;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing .composer-voice-stage {
  animation: composer-voice-pc-stage-out 0.42s var(--voice-expand-ease) both;
}

@keyframes composer-voice-pc-stage-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes composer-voice-pc-stage-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
}

/* PC — compress live card to a thin bar (same idea as mobile tg-voice-visible) */
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-compact {
  height: var(--voice-card-to-h) !important;
  min-height: var(--voice-card-to-h) !important;
  max-height: var(--voice-card-to-h) !important;
  padding: 10px 16px 10px 20px !important;
  box-sizing: border-box !important;
}

/* PC: field stays hidden; toolbar/send stays in the right grid cell */
body:not(.is-mobile) .composer-card.is-voice-live > .composer-card__field,
body:not(.is-mobile) .composer-card.is-voice-live > .composer-attach-sheet {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live > .composer-card__toolbar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  grid-column: 2;
  grid-row: 1;
  z-index: 7 !important;
  width: 46px !important;
  min-width: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

body:not(.is-mobile) .composer-card.is-voice-live .composer-card__toolbar .composer-tool,
body:not(.is-mobile) .composer-card.is-voice-live .composer-card__toolbar .composer-tools,
body:not(.is-mobile) .composer-card.is-voice-live .composer-card__toolbar .composer-card__spacer,
body:not(.is-mobile) .composer-card.is-voice-live .composer-card__toolbar .composer-docs-tray {
  display: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live .composer-voice-send-wrap,
body:not(.is-mobile) .composer-card.is-voice-live #send-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 8;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-compact .composer-voice-stage {
  grid-column: 1;
  grid-row: 1;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  align-items: center;
  gap: 0;
  overflow: visible !important;
  z-index: 5;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-compact .composer-voice-stage__rec-dot {
  margin: 0 16px 0 4px;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-compact .composer-voice-stage__timer {
  min-width: 4.4em;
  margin: 0 18px 0 0;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-compact .composer-voice-stage__cancel {
  margin-left: auto;
  margin-right: 4px;
  padding: 8px 10px;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.is-mobile) .composer-card.is-voice-live .composer-voice-stage__cancel,
body:not(.is-mobile) .composer-card.is-voice-live .composer-voice-stage__timer,
body:not(.is-mobile) .composer-card.is-voice-live .composer-voice-stage__rec-dot {
  animation: composer-voice-pc-ctrl-in 0.42s 0.06s var(--voice-expand-ease) both;
}

@keyframes composer-voice-pc-ctrl-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing .composer-voice-stage__cancel,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing .composer-voice-stage__timer,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing .composer-voice-stage__rec-dot {
  animation: composer-voice-pc-ctrl-out 0.32s var(--voice-expand-ease) both;
}

@keyframes composer-voice-pc-ctrl-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }
}

/* PC locked send: keep arrow bright and clickable */
body:not(.is-mobile) .composer-send.is-voice-locked:not(.is-stop) {
  color: var(--sw-primary, #54a9ff) !important;
  opacity: 1 !important;
}

body:not(.is-mobile) .composer-card.is-voice-closing {
  height: var(--voice-card-min-h) !important;
  min-height: var(--voice-card-min-h) !important;
  max-height: var(--voice-card-min-h) !important;
  padding: var(--voice-pad-y) var(--voice-pad-x) var(--voice-pad-b) !important;
  transition:
    height var(--voice-compress-dur) var(--voice-expand-ease),
    min-height var(--voice-compress-dur) var(--voice-expand-ease),
    max-height var(--voice-compress-dur) var(--voice-expand-ease),
    padding var(--voice-compress-dur) var(--voice-expand-ease),
    background var(--voice-morph-ms) var(--voice-soft);
}

/* PC restore: bring field + tools back in sync with height expand (no empty snap). */
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  column-gap: 0 !important;
  gap: 2px !important;
  grid-template-columns: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-voice-stage {
  position: absolute !important;
  left: var(--voice-pad-x);
  right: calc(var(--voice-pad-x) + 56px);
  top: 50%;
  bottom: auto;
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none !important;
  animation: composer-voice-pc-stage-out 0.36s var(--voice-expand-ease) both !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-card__field,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-card__toolbar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  z-index: 3 !important;
  overflow: visible !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: composer-voice-pc-chrome-in 0.44s var(--voice-expand-ease) both !important;
  transition: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-card__field {
  animation-delay: 0.05s !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-card__toolbar {
  display: flex !important;
  align-items: center !important;
  place-items: unset !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 !important;
  animation-delay: 0.1s !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-tool,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-tools,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-card__spacer {
  display: inline-flex !important;
  opacity: 0;
  transform: translate3d(0, 5px, 0);
  animation: composer-voice-pc-tool-in 0.36s var(--voice-expand-ease) both !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-tools {
  display: flex !important;
  animation-delay: 0.08s !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-tool--attach {
  animation-delay: 0.04s !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-tool--web {
  animation-delay: 0.1s !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-docs-tray {
  display: inline-flex !important;
  animation: composer-voice-pc-tool-in 0.36s 0.08s var(--voice-expand-ease) both !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-card__spacer {
  display: block !important;
  flex: 1 1 auto !important;
  opacity: 0;
  transform: none;
  animation: composer-voice-pc-spacer-in 0.3s 0.06s var(--voice-expand-ease) both !important;
}

/* After tool-in finishes, lock final pose so class teardown cannot reflow. */
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring.is-voice-settling .composer-card__toolbar .composer-tool,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring.is-voice-settling .composer-card__toolbar .composer-tools,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring.is-voice-settling .composer-card__toolbar .composer-docs-tray,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring.is-voice-settling .composer-card__toolbar .composer-card__spacer {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring.is-voice-settling > .composer-card__field,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring.is-voice-settling > .composer-card__toolbar {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring.is-voice-settling > .composer-voice-stage {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-voice-send-wrap,
body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring #send-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  animation: none !important;
  transform: none !important;
}

@keyframes composer-voice-pc-chrome-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes composer-voice-pc-tool-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes composer-voice-pc-spacer-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-card__field,
  body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-card__toolbar,
  body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-tool,
  body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-tools,
  body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-card__spacer,
  body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring .composer-card__toolbar .composer-docs-tray,
  body:not(.is-mobile) .composer-card.is-voice-live.is-voice-closing.is-voice-restoring > .composer-voice-stage {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* Neutralize legacy stage rules when TG panel owns the card */
body.is-mobile .composer-card.tg-voice-live .composer-voice-stage {
  min-height: 0 !important;
  overflow: visible !important;
  animation: none !important;
}

body.is-mobile .composer-card.tg-voice-live .composer-voice-stage__timer,
body.is-mobile .composer-card.tg-voice-live .composer-voice-stage__rec-dot {
  animation: none;
}

body.is-mobile .composer-send.is-voice-recording:not(.is-voice-locked) .composer-send-arc-canvas {
  display: none !important;
  opacity: 0 !important;
}