/* Better Messages Voice UI — 2.15.40
 * Premium responsive voice-message skin.
 * Loaded after the production stylesheet.
 */
.bp-messages-wrap .bm-messages-stack .bm-content,
.bp-messages-wrap .bm-messages-stack .bm-messages-listing,
.bp-messages-wrap .bm-message,
.bp-messages-wrap .bm-message-content.voice-message{box-sizing:border-box;min-width:0;max-width:100%;}

/* Message row spacing */
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message{width:auto!important;padding:5px 0!important;background:transparent!important;overflow:visible!important;}

/* Premium voice card */
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-voice-message{
 box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:9px!important;
 position:relative!important;width:min(360px,100%)!important;max-width:100%!important;min-width:0!important;
 min-height:64px!important;margin:0!important;padding:10px 13px 23px!important;
 border:1px solid rgba(0,0,0,.055)!important;border-radius:20px!important;overflow:hidden!important;
 box-shadow:0 5px 18px rgba(20,30,25,.075),0 1px 2px rgba(20,30,25,.04)!important;
 transition:transform .18s ease,box-shadow .18s ease!important;
}
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-voice-message:hover{
 transform:translateY(-1px)!important;box-shadow:0 8px 22px rgba(20,30,25,.10),0 2px 4px rgba(20,30,25,.04)!important;
}

/* Sender / receiver */
.bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content.voice-message .bm-voice-message{
 background:linear-gradient(135deg,#e4faed 0%,#d6f5e3 100%)!important;color:#12a85a!important;border-color:rgba(18,168,90,.14)!important;
}
.bp-messages-wrap .bm-messages-stack.incoming .bm-message-content.voice-message .bm-voice-message{
 background:linear-gradient(135deg,#f7f8f9 0%,#eceff2 100%)!important;color:#65717b!important;border-color:rgba(70,80,90,.10)!important;
}

/* Small directional accent */
.bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content.voice-message .bm-voice-message:after,
.bp-messages-wrap .bm-messages-stack.incoming .bm-message-content.voice-message .bm-voice-message:after{
 content:"";position:absolute;bottom:0;width:14px;height:14px;transform:translateY(5px) rotate(45deg);border-radius:3px;
}
.bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content.voice-message .bm-voice-message:after{right:7px;background:#d6f5e3;}
.bp-messages-wrap .bm-messages-stack.incoming .bm-message-content.voice-message .bm-voice-message:after{left:7px;background:#eceff2;}

/* Play button */
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-play{
 flex:0 0 38px!important;width:38px!important;height:38px!important;display:inline-flex!important;
 align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;
 border-radius:50%!important;font-size:27px!important;line-height:38px!important;text-align:center!important;
 cursor:pointer!important;background:rgba(255,255,255,.78)!important;
 box-shadow:0 2px 7px rgba(0,0,0,.08)!important;transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
 z-index:2!important;
}
.bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content.voice-message .bm-voice-message-play{color:#0fa75a!important;}
.bp-messages-wrap .bm-messages-stack.incoming .bm-message-content.voice-message .bm-voice-message-play{color:#66737d!important;}
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-play:hover{transform:scale(1.06)!important;background:#fff!important;box-shadow:0 4px 10px rgba(0,0,0,.11)!important;}
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-play:active{transform:scale(.96)!important;}

/* Waveform */
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-waveform{
 flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:calc(100% - 47px)!important;
 height:32px!important;overflow:hidden!important;cursor:pointer!important;z-index:1!important;
}
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-waveform wave,
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-waveform canvas{
 display:block!important;width:100%!important;max-width:100%!important;height:32px!important;overflow:hidden!important;
}

/* Duration */
.bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-duration{
 position:absolute!important;bottom:5px!important;left:13px!important;right:auto!important;margin:0!important;
 font-size:10px!important;font-weight:600!important;line-height:12px!important;letter-spacing:.1px!important;
 font-variant-numeric:tabular-nums!important;opacity:.72!important;z-index:2!important;
}
.bp-messages-wrap .bm-messages-stack.outgoing .bm-message-content.voice-message .bm-voice-message-duration{color:#36795b!important;}
.bp-messages-wrap .bm-messages-stack.incoming .bm-message-content.voice-message .bm-voice-message-duration{color:#6f7981!important;}
html[dir="rtl"] .bp-messages-wrap .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-duration{left:auto!important;right:13px!important;}

/* Transcription */
.bp-messages-wrap .bm-messages-stack .bm-message-content .bm-voice-transcription-text{
 max-width:360px!important;box-sizing:border-box!important;margin:6px 0 0!important;padding:8px 11px!important;
 border-radius:12px!important;font-size:12px!important;line-height:1.45!important;background:rgba(0,0,0,.035)!important;
}

/* Recorder / preview bar */
.bp-messages-wrap .bm-voice-recorder,
.bp-messages-wrap .bm-voice-preview{
 box-sizing:border-box!important;max-width:100%!important;min-width:0!important;
 border-radius:18px!important;padding:8px!important;gap:8px!important;
 box-shadow:0 4px 16px rgba(0,0,0,.07)!important;border:1px solid rgba(0,0,0,.06)!important;
 background:rgba(255,255,255,.96)!important;
}
.bp-messages-wrap .bm-voice-btn,
.bp-messages-wrap .bm-record-voice-send,
.bp-messages-wrap .bm-record-voice-delete{
 flex:0 0 38px!important;width:38px!important;height:38px!important;border-radius:50%!important;
 transition:transform .16s ease,box-shadow .16s ease!important;
}
.bp-messages-wrap .bm-voice-btn:hover,
.bp-messages-wrap .bm-record-voice-send:hover,
.bp-messages-wrap .bm-record-voice-delete:hover{transform:scale(1.05)!important;}
.bp-messages-wrap .bm-record-voice-time{font-variant-numeric:tabular-nums!important;font-weight:600!important;min-width:50px!important;}

/* Composer stays inside the viewport */
.bp-messages-wrap .bm-reply,.bp-messages-wrap .bm-reply .bm-editor{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;}
.bp-messages-wrap .bm-reply{position:relative!important;overflow:visible!important;}

@media(max-width:600px){
 .bp-messages-wrap.bp-messages-mobile .bm-messages-list{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-list .bm-list{box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding-left:7px!important;padding-right:7px!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack{width:100%!important;max-width:100%!important;min-width:0!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-content{max-width:calc(100% - 40px)!important;min-width:0!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message{width:auto!important;max-width:100%!important;padding:4px 0!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-voice-message{
   width:min(320px,calc(100vw - 82px))!important;min-height:60px!important;padding:9px 10px 22px!important;
   border-radius:18px!important;gap:7px!important;
 }
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-play{
   flex-basis:36px!important;width:36px!important;height:36px!important;font-size:26px!important;line-height:36px!important;
 }
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-waveform{
   max-width:calc(100% - 43px)!important;height:29px!important;
 }
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-waveform wave,
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-waveform canvas{height:29px!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-duration{font-size:9px!important;bottom:4px!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-voice-recorder,
 .bp-messages-wrap.bp-messages-mobile .bm-voice-preview{width:calc(100% - 12px)!important;margin:4px 6px!important;}
}
@media(max-width:380px){
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-content{max-width:calc(100% - 34px)!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-voice-message{width:min(100%,calc(100vw - 62px))!important;padding-left:8px!important;padding-right:8px!important;}
 .bp-messages-wrap.bp-messages-mobile .bm-messages-stack .bm-message-content.voice-message .bm-voice-message-play{flex-basis:33px!important;width:33px!important;height:33px!important;font-size:24px!important;}
}

/*
 * Mobile recording dock — 2.15.42
 * Keep the live recorder / preview ABOVE the composer instead of letting the
 * fixed-height mobile reply area clip it. This is intentionally scoped to the
 * recording controls only; normal message input layout is unchanged.
 */
@media (max-width:600px){
  .bp-messages-wrap.bp-messages-mobile .bm-reply{
    position:relative!important;
    overflow:visible!important;
    z-index:30!important;
  }

  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-recorder,
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-preview{
    position:absolute!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(100% + 10px)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    min-height:56px!important;
    padding:7px 8px!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    box-sizing:border-box!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(18,168,90,.14)!important;
    box-shadow:0 10px 28px rgba(20,30,25,.14),0 2px 7px rgba(20,30,25,.07)!important;
    z-index:999!important;
    transform:translateZ(0)!important;
  }

  /* The live waveform must be allowed to shrink instead of pushing buttons
     outside the 430px mobile viewport. */
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-recorder .bm-voice-waveform-live,
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-preview .bm-voice-trim-bar{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
  }

  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-waveform-live{
    height:40px!important;
    min-height:40px!important;
    border-radius:12px!important;
  }

  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-preview-canvas{
    width:100%!important;
    max-width:100%!important;
    height:38px!important;
  }

  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-btn,
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-record-voice-send,
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-record-voice-delete{
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }

  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-record-voice-time{
    flex:0 0 auto!important;
    min-width:48px!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }

  /* Leave a small visual gap above the message field while recording. */
  .bp-messages-wrap.bp-messages-mobile .bm-reply:has(.bm-voice-recorder),
  .bp-messages-wrap.bp-messages-mobile .bm-reply:has(.bm-voice-preview){
    z-index:40!important;
  }
}

@media (max-width:380px){
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-recorder,
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-preview{
    left:5px!important;
    right:5px!important;
    bottom:calc(100% + 8px)!important;
    padding:6px!important;
    border-radius:16px!important;
  }

  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-voice-btn,
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-record-voice-send,
  .bp-messages-wrap.bp-messages-mobile .bm-reply .bm-record-voice-delete{
    flex-basis:35px!important;
    width:35px!important;
    min-width:35px!important;
    height:35px!important;
    min-height:35px!important;
  }
}
