* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#8e0303; font-family:Arial, sans-serif; }

/* player wrapper */
#airplay-player {
  width:100%; 
  min-width:0; /* Firefox fix for flex shrinking */
  height:70px;
  background:#8e0303;
  color:#fff;
  display:flex;
  align-items:center; /* vertical center */
  gap:12px;
  padding:0 15px;
  overflow:hidden;  /* Hide scrollbars */
  border-top:2px solid rgba(255,255,255,0.25);
}

/* play/stop button */
#airplay-controls {
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
#airplay-controls img {
  width:42px;
  height:42px;
  cursor:pointer;
  display:block;
}

/* cover image */
#airplay-cover img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 20px 0 15px;
}

/* now playing area */
#airplay-meta {
  flex:1 1 auto;        /* fills remaining space */
  min-width:0 !important;          /* allows ellipsis > critical for Firefox */
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.2em;
  overflow:hidden;
}
#airplay-title {
  font-size:15px;
  color:#ffecec;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#airplay-track {
  font-size:14px;
  font-weight:bold;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#airplay-artist {
  font-size:12px;
  color:#ccc;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* volume slider */
#airplay-volume {
  flex:0 0 100px !important; /* fixed width area */
  max-width:100px;
  height:20px;
  margin-right:16px;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  --val:50%;
}
/* WebKit track with dynamic left-color using CSS var */
#airplay-volume::-webkit-slider-runnable-track {
  height:6px;
  border-radius:6px;
  background: linear-gradient(to right, #f57f7f 0%, #f57f7f var(--val), rgba(255,255,255,0.45) var(--val), rgba(255,255,255,0.45) 100%);
}
/* WebKit thumb */
#airplay-volume::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  margin-top:-4px;
  box-shadow:0 0 1px rgba(0,0,0,0.6);
}
/* Firefox track/progress */
#airplay-volume::-moz-range-track { height:6px; border-radius:6px; background: rgba(255,255,255,0.45); }
#airplay-volume::-moz-range-progress { height:6px; border-radius:6px; background:#f57f7f; }
/* IE fallback */
#airplay-volume::-ms-fill-lower { background:#f57f7f; }
#airplay-volume::-ms-fill-upper { background: rgba(255,255,255,0.45); }

/* responsive adjustments for small screens */
@media (max-width:480px){
  #airplay-title { font-size:13px; }
  #airplay-track { font-size:12px; }
  #airplay-artist { font-size:11px; }
  #airplay-cover img { width:50px; height:50px; margin:0 12px 0 0; }
  #airplay-volume { display:none; } /* hide slider */
  #airplay-player { padding:0 10px; gap:6px; }
}