/* BPM 370 R27 — Messages vocaux façon Messenger */
[data-bpm-voice-trigger],
[data-bpm-voice-trigger-quick]{
  touch-action:none!important;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  overscroll-behavior:contain;
}
[data-bpm-voice-trigger].is-recording,
[data-bpm-voice-trigger-quick].is-recording{
  color:#fff!important;
  background:#e54857!important;
  box-shadow:0 0 0 7px rgba(229,72,87,.18),0 8px 28px rgba(229,72,87,.30)!important;
  transform:scale(1.05);
}

.bpm-voice-recorder-strip{
  --bpm-cancel-progress:0;
  --bpm-lock-progress:0;
  position:relative;
  min-width:0;
  align-items:center!important;
  gap:10px!important;
  min-height:58px;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:18px!important;
  padding:9px 11px!important;
  background:linear-gradient(135deg,rgba(34,8,14,.98),rgba(14,18,31,.98))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.28);
  overflow:hidden;
  isolation:isolate;
}
.bpm-voice-recorder-strip[hidden]{display:none!important}
.bpm-voice-recorder-strip:not([hidden]){display:flex!important}
.bpm-voice-recorder-strip:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(229,72,87,.13),transparent 46%,rgba(42,127,255,.09));
  pointer-events:none;
}
.bpm-voice-recorder-strip.is-cancelling{
  border-color:rgba(255,90,105,.62)!important;
  transform:translateX(-5px);
}
.bpm-voice-recorder-strip.is-locked{
  border-color:rgba(42,127,255,.48)!important;
  background:linear-gradient(135deg,rgba(10,26,51,.98),rgba(14,18,31,.98))!important;
}
.bpm-voice-recorder-strip.is-sending{opacity:.78;pointer-events:none}

.bpm-voice-recorder-strip .rec-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff4f5e;
  box-shadow:0 0 0 5px rgba(255,79,94,.12);
  animation:bpmVoicePulse 1s ease-in-out infinite;
}
.bpm-voice-recorder-strip.is-preparing .rec-dot{background:#f0b64b;box-shadow:0 0 0 5px rgba(240,182,75,.12)}
.bpm-voice-recorder-strip.is-locked .rec-dot{background:#4da3ff;box-shadow:0 0 0 5px rgba(77,163,255,.12)}
.bpm-voice-recorder-strip .rec-time{
  flex:0 0 auto;
  min-width:43px;
  color:#fff!important;
  font:800 13px/1.1 var(--font,system-ui,sans-serif)!important;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.bpm-voice-recorder-strip .rec-text{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dce7f8!important;
  font-size:12px!important;
}

.bpm-voice-wave{
  flex:1 1 108px;
  min-width:64px;
  max-width:170px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  transform:translateX(calc(var(--bpm-cancel-progress) * -22px));
  opacity:calc(1 - (var(--bpm-cancel-progress) * .42));
  transition:transform .08s linear,opacity .08s linear;
}
.bpm-voice-wave i{
  display:block;
  width:3px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(180deg,#82c7ff,#ea6980);
  animation:bpmVoiceWave .8s ease-in-out infinite alternate;
  animation-delay:calc(var(--bpm-wave-index) * -45ms);
}
.bpm-voice-recorder-strip.is-preparing .bpm-voice-wave i,
.bpm-voice-recorder-strip.is-sending .bpm-voice-wave i{animation-play-state:paused;height:5px;opacity:.42}

.bpm-voice-lock-indicator{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  color:#9acfff;
  transform:translateY(calc(var(--bpm-lock-progress) * -8px));
  opacity:calc(.50 + (var(--bpm-lock-progress) * .50));
  transition:transform .08s linear,opacity .08s linear;
}
.bpm-voice-lock-indicator i{font-size:18px}
.bpm-voice-lock-indicator small{font-size:8px;white-space:nowrap;color:#8594ad}
.bpm-voice-recorder-strip.is-locked .bpm-voice-lock-indicator i:before{content:"\f70e"}

.bpm-voice-round,
.bpm-voice-recorder-strip .rec-action{
  flex:0 0 auto;
  min-width:40px;
  height:40px;
  border:0!important;
  border-radius:50%!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0!important;
  padding:0!important;
  color:#fff!important;
  cursor:pointer;
  font-size:18px;
}
.bpm-voice-round.cancel,
.bpm-voice-recorder-strip .rec-action.cancel{background:#982f3c!important}
.bpm-voice-round.send,
.bpm-voice-recorder-strip .rec-action.send{background:#2a7fff!important}
.bpm-voice-recorder-strip.is-recording [data-bpm-voice-send]{display:none!important}
.bpm-voice-recorder-strip.is-locked [data-bpm-voice-send]{display:inline-flex!important}

.msg-compose.bpm-voice-active .compose-shortcuts,
.msg-compose.bpm-voice-active .compose-row,
.msg-compose.bpm-voice-active .emoji-bar,
.msg-compose.bpm-voice-active .msg-compose-meta,
.msg-compose.bpm-voice-active .preview-box{display:none!important}
.msg-compose.bpm-voice-active{padding-top:10px!important}

.bpm-qm-voice-recorder{
  margin:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  width:calc(100% - 20px);
}
.bpm-qm-chat-screen.bpm-voice-active .bpm-qm-tools,
.bpm-qm-chat-screen.bpm-voice-active .bpm-qm-compose,
.bpm-qm-chat-screen.bpm-voice-active .bpm-qm-note,
.bpm-qm-chat-screen.bpm-voice-active .bpm-qm-emoji-picker{display:none!important}

@keyframes bpmVoicePulse{50%{opacity:.35;transform:scale(.78)}}
@keyframes bpmVoiceWave{
  0%{height:5px;opacity:.56}
  45%{height:22px;opacity:1}
  100%{height:10px;opacity:.74}
}

@media(max-width:760px){
  .bpm-voice-recorder-strip{
    gap:7px!important;
    min-height:56px;
    padding:8px 9px!important;
    border-radius:16px!important;
  }
  .bpm-voice-wave{flex-basis:80px;min-width:52px;max-width:112px}
  .bpm-voice-recorder-strip .rec-text{font-size:10px!important}
  .bpm-voice-lock-indicator small{display:none}
  .bpm-voice-round,
  .bpm-voice-recorder-strip .rec-action{min-width:38px;width:38px;height:38px}
  .bpm-voice-recorder-strip .rec-action{font-size:0!important}
  .bpm-voice-recorder-strip .rec-action i{font-size:18px!important}
  .record-box.bpm-voice-recorder-strip{margin-bottom:0!important}
}

@media(max-width:390px){
  .bpm-voice-recorder-strip .rec-text{display:none}
  .bpm-voice-wave{max-width:none}
  .bpm-voice-lock-indicator{min-width:24px}
}

@media(prefers-reduced-motion:reduce){
  .bpm-voice-wave i,.bpm-voice-recorder-strip .rec-dot{animation:none!important}
}
[data-bpm-voice-trigger].is-starting,
[data-bpm-voice-trigger-quick].is-starting{opacity:.72;cursor:progress}