/* ============ OBDM Audio Bubble Player (Proxy v4.1) ============ */
.obdm-audio-bubble{
  --obdm-audio-bg:#0F1827;
  --obdm-audio-fg:#ffffff;
  --obdm-audio-accent:#FCA244;

  display:flex;
  align-items:center;
  gap:8px;
  min-width:190px;
  max-width:420px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--obdm-audio-bg);
  color:var(--obdm-audio-fg);
  position:relative;
  box-shadow:0 10px 24px rgba(15,24,39,.12);
  font-family:inherit;
  direction:ltr;
  z-index:1;
}

.obdm-audio-bubble.obdm-audio--me{
  --obdm-audio-bg:#FCA244;
  --obdm-audio-fg:#0F1827;
  --obdm-audio-accent:#0F1827;
}
.obdm-audio-bubble.obdm-audio--you{
  --obdm-audio-bg:#0F1827;
  --obdm-audio-fg:#ffffff;
  --obdm-audio-accent:#FCA244;
}

/* bubble tail */
.obdm-audio-bubble::after{
  content:"";
  position:absolute;
  bottom:-6px;
  width:0;height:0;
  border:8px solid transparent;
  border-top-color:var(--obdm-audio-bg);
}
.obdm-audio-bubble.obdm-audio--you::after{
  left:18px; transform:rotate(20deg);
}
.obdm-audio-bubble.obdm-audio--me::after{
  right:18px; left:auto; transform:rotate(-20deg);
}

/* play button */
.obdm-audio-btn{
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;border:none;outline:none;
  flex:0 0 auto;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  color:inherit;
}
.obdm-audio-btn:hover{
  transform:scale(1.04);
  background:rgba(255,255,255,.22);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.obdm-audio-btn:active{transform:scale(.97);}

/* play/pause icon – في النص تماماً */
.obdm-audio-icon{
  position:relative;
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Play (مثلث) */
.obdm-audio-bubble:not([data-state="playing"]) .obdm-audio-icon::before{
  content:"";
  display:block;
  border-left:12px solid currentColor;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  margin-left:1px; /* لمسـة بسيطة عشان شكل المثلث */
}

/* Pause (عمودين) */
.obdm-audio-bubble[data-state="playing"] .obdm-audio-icon::before,
.obdm-audio-bubble[data-state="playing"] .obdm-audio-icon::after{
  content:"";
  display:block;
  width:4px;
  height:14px;
  background:currentColor;
  border-radius:2px;
  margin:0 1px;
}

/* العمود اللي فيه الشريط */
.obdm-audio-main{
  flex:1 1 auto;
  display:flex;
  align-items:center;
}

/* SEEK BAR – عريض وثابت زي واتساب */
.obdm-audio-seek{
  position:relative;
  height:14px;
  border-radius:999px;
  cursor:pointer;
  touch-action:none;
  flex:1 1 auto;
  min-width:170px;
  max-width:100%;
}
.obdm-audio-seek-track{
  position:absolute;
  inset:3px 0;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.obdm-audio-seek-progress{
  position:absolute;
  inset:0;
  width:0%;
  max-width:100%;
  overflow:hidden;
  /* سلاسة خفيفة لحركة الشريط */
  transition:width .08s linear;
}

/* Waveform الخلفية + الجزء المتقدّم */
.obdm-audio-seek-wave{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding-inline:4px;
}
.obdm-audio-seek-wave i{
  flex:1 1 auto;
  border-radius:999px;
  height:calc(var(--h,.4) * 100%);
  transform-origin:bottom;
}
.obdm-audio-seek-wave--bg i{
  background:rgba(255,255,255,.55);
}
.obdm-audio-seek-wave--fg i{
  background:var(--obdm-audio-accent);
}

/* إخفاء الـ <audio> الأصلي بصرياً (مش display:none) */
.obdm-audio-original{
  position:absolute !important;
  width:1px !important;height:1px !important;
  opacity:0 !important;pointer-events:none !important;
  left:-9999px !important;top:auto !important;
}

/* Fallback */
.obdm-audio-bubble.obdm-audio-fallback{
  opacity:.85; filter:grayscale(.25);
}
.obdm-audio-btn--link{ text-decoration:none; }

/* Responsive */
@media (max-width:420px){
  .obdm-audio-bubble{
    max-width:100%;
    padding-inline:10px;
    gap:8px;
  }
  .obdm-audio-btn{
    width:38px;height:38px;
  }
}