/* css/audio-player.css — loaded in index.html cascade order. */
/* Chat audio player */

.chat-audio-player{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  justify-content:center;
  padding:12px 14px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    rgba(17,24,39,.96);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 38px rgba(0,0,0,.24);
}

.chat-audio-player-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.chat-audio-player-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.chat-audio-player-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.chat-audio-player-title{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  min-width:0;
}

.chat-audio-player-sub{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chat-audio-player-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:inherit;
  font-weight:800;
  font-size:12px;
  padding:7px 12px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
}

.chat-audio-player-btn:hover{ background:rgba(255,255,255,.16); }

.chat-audio-player-btn.secondary{
  background:rgba(255,255,255,.06);
}

.chat-audio-player-mid{ display:flex; align-items:center; gap:10px; }

.chat-audio-player-range{ flex:1; width:100%; }

.chat-audio-player-time{ font-size:12px; opacity:.84; white-space:nowrap; }

.chat-audio-player-opts{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.chat-audio-player-loop,
.chat-audio-player-speed{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  opacity:.9;
  user-select:none;
}

.chat-audio-player-loop{
  cursor:pointer;
}

.chat-audio-player-loop input[type="checkbox"]{
  --toggle-w:28px;
  --toggle-h:16px;
  --toggle-knob:12px;
  --toggle-pad:2px;
  --toggle-shift:12px;
}

.chat-audio-player-vol{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.9;
}

.chat-audio-player-vol-range{ width:120px; }

select.custom-select-native:not(.font-native){
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

select:not(.font-native):not(.custom-select-native){
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(10,12,16,.96);
  color:rgba(255,255,255,.92);
  border-radius:14px;
  padding:8px 30px 8px 10px;
  cursor:pointer;
  color-scheme:dark;
}

.chat-audio-player-speed select{
  min-width:88px;
}

.chat-audio-player-speed .custom-select-dd{
  flex:0 0 auto;
  width:auto;
  min-width:88px;
}

.chat-audio-player-range{ --range-h:8px; --range-thumb:14px; }

.chat-audio-player-vol-range{ --range-h:7px; --range-thumb:13px; }

.chat-audio-player input[type="range"]{ min-width:0; }

.font-dd,
.custom-select-dd{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  width:100%;
}

.custom-select-dd{
  display:block;
}

.font-dd-btn{
  width:100%;
  text-align:left;
  cursor:pointer;
  padding-right:34px;
  position:relative;
}

.font-dd-btn::after{
  content:"▾";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  opacity:.8;
  font-size:12px;
}

.font-dd.open .font-dd-btn::after{content:"▴";}

/* Menu looks like a normal Chrome dropdown: separate floating menu below the control */

.font-dd-pop{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 6px);
  z-index:400;
  max-height:204px; /* ~6 items then scroll */
  overflow:auto;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,16,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

/* When opened, the popup is moved to <body> so it does not get trapped in any scroll container */

.font-dd-pop.portal{
  position:fixed;
  left:0;
  top:0;
  right:auto;
  z-index:5000;
}

.font-dd-opt{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color: rgba(255,255,255,.92);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}

.font-dd-opt:hover{background: rgba(255,255,255,.08);}

.font-dd-opt.is-selected{background: rgba(59,130,246,.22);}