/* Premium Responsive Audio Player Styling */

.cap-wrapper {
  margin: 16px 0;
  width: 100%;
  max-width: 650px;
  display: block;
}

/* ---- Custom HTML5 Player ---- */
.cap-player {
  --cap-bg: rgba(30, 30, 35, 0.88);
  --cap-border: rgba(255, 255, 255, 0.08);
  --cap-text: #f8fafc;
  --cap-text-muted: #94a3b8;
  --cap-accent-gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  --cap-accent: #6366f1;
  --cap-track-bg: rgba(255, 255, 255, 0.10);
  --cap-buffer-bg: rgba(255, 255, 255, 0.16);
  --cap-shadow: 0 10px 25px -5px rgba(0,0,0,.32), 0 8px 10px -6px rgba(0,0,0,.28);
  --cap-radius: 14px;

  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--cap-bg);
  border: 1px solid var(--cap-border);
  border-radius: var(--cap-radius);
  box-shadow: var(--cap-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--cap-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  user-select: none;
}

/* Light theme auto-detection */
.cap-player.cap-light-detect {
  --cap-bg: rgba(255,255,255,0.88);
  --cap-border: rgba(0,0,0,0.08);
  --cap-text: #1e293b;
  --cap-text-muted: #64748b;
  --cap-track-bg: rgba(0,0,0,0.08);
  --cap-buffer-bg: rgba(0,0,0,0.13);
  --cap-shadow: 0 10px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.08);
}

.cap-player * { box-sizing: border-box; }

/* ---- Buttons ---- */
.cap-btn {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; outline: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}

.cap-play-section { flex-shrink: 0; }

.cap-play-pause-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cap-accent-gradient);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.cap-play-pause-btn:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(99,102,241,.45); }
.cap-play-pause-btn:active { transform: scale(.95); }

/* ---- Mask-based icons ---- */
.cap-icon {
  display: inline-block;
  width: 24px; height: 24px;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  flex-shrink: 0; vertical-align: middle;
}
.cap-play-pause-btn .cap-icon { width: 26px; height: 26px; }

.cap-icon-play {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.cap-icon-pause {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E");
  display: none;
}
.cap-icon-volume-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}
.cap-icon-volume-mute {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.21.05-.42.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.21.05-.42.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
  display: none;
}

/* Google Drive icon (simplified 'G') */
.cap-icon-drive {
  width: 20px; height: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.433 22l4-6.933H22l-4 6.933H4.433zM2 18.067L6 11l4 6.933-3.567 4.134L2 18.067zM9 3h6l7 12.133H16L9 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.433 22l4-6.933H22l-4 6.933H4.433zM2 18.067L6 11l4 6.933-3.567 4.134L2 18.067zM9 3h6l7 12.133H16L9 3z'/%3E%3C/svg%3E");
}

/* ---- Main section layout ---- */
.cap-main-section {
  flex-grow: 1; display: flex; flex-direction: column;
  gap: 6px; min-width: 0;
}
.cap-info { display: flex; justify-content: space-between; align-items: center; }
.cap-title {
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cap-timeline-container { display: flex; align-items: center; gap: 12px; width: 100%; }
.cap-time {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--cap-text-muted); width: 38px; text-align: center; flex-shrink: 0;
}

/* ---- Progress bar ---- */
.cap-progress-slider {
  flex-grow: 1; height: 6px; background: var(--cap-track-bg);
  border-radius: 9999px; position: relative; cursor: pointer;
  padding: 4px 0; background-clip: content-box;
}
.cap-progress-track { height: 6px; width: 100%; border-radius: 9999px; }
.cap-progress-buffer {
  position: absolute; top: 4px; left: 0; height: 6px;
  background: var(--cap-buffer-bg); border-radius: 9999px;
  width: 0; pointer-events: none; transition: width .25s;
}
.cap-progress-fill {
  position: absolute; top: 4px; left: 0; height: 6px;
  background: var(--cap-accent-gradient); border-radius: 9999px;
  width: 0; pointer-events: none;
}
.cap-progress-handle {
  position: absolute; top: 7px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4);
  transform: translate(-50%,-50%) scale(0);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.cap-progress-slider:hover .cap-progress-handle { transform: translate(-50%,-50%) scale(1); }

/* ---- Volume ---- */
.cap-volume-section { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cap-mute-btn { color: var(--cap-text-muted); }
.cap-mute-btn:hover { color: var(--cap-text); transform: scale(1.05); }

.cap-volume-slider-container {
  width: 60px; height: 6px; background: var(--cap-track-bg);
  border-radius: 9999px; position: relative; cursor: pointer;
  padding: 4px 0; background-clip: content-box;
}
.cap-volume-track { height: 6px; position: relative; width: 100%; }
.cap-volume-fill {
  height: 100%; background: var(--cap-accent);
  border-radius: 9999px; width: 100%; pointer-events: none;
}
.cap-volume-handle {
  position: absolute; top: 3px; left: 100%;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4);
  transform: translate(-50%,-50%) scale(0);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.cap-volume-slider-container:hover .cap-volume-handle,
.cap-volume-section:hover .cap-volume-handle { transform: translate(-50%,-50%) scale(1); }

/* ================================================================
   Google Drive player — same .cap-player shell, Drive-mode overrides
   ================================================================ */

/* The player becomes a flex column when Drive mode is active */
.cap-player.cap-drive-mode {
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 0;
  overflow: hidden;
}

/* Drive icon circle — mirrors the play button dimensions */
.cap-drive-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cap-accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
  flex-shrink: 0;
}
.cap-drive-icon-wrap .cap-icon-drive {
  width: 22px;
  height: 22px;
  background-color: #fff;
}

/* Main section in drive mode fills row */
.cap-player.cap-drive-mode .cap-main-section {
  flex-grow: 1;
  min-width: 0;
  align-self: center;
}

/* The iframe stretches across the full card width below the header */
.cap-drive-iframe {
  width: calc(100% + 40px); /* 40px = 2 × 20px horizontal padding */
  margin-left: -20px;
  margin-right: -20px;
  margin-top: 8px;
  height: 78px;
  border: none;
  display: block;
  background: transparent;
  flex-basis: 100%; /* force to its own row in the flex layout */
}

/* ---- Responsive ---- */
@media (max-width: 500px) {
  /* Base player mobile tweaks */
  .cap-player:not(.cap-drive-mode) { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .cap-player:not(.cap-drive-mode) .cap-main-section { order: 3; width: 100%; margin-top: 4px; }
  .cap-player:not(.cap-drive-mode) .cap-volume-section { margin-left: auto; }

  /* Drive mode mobile: keep icon + title in one row, iframe below */
  .cap-player.cap-drive-mode { padding: 12px 16px; gap: 12px; }
  .cap-player.cap-drive-mode .cap-play-section { align-self: center; }
  .cap-player.cap-drive-mode .cap-main-section { align-self: center; order: 0; width: auto; flex: 1; margin-top: 0; }
  /* Correct negative margin for 16px mobile padding */
  .cap-player.cap-drive-mode .cap-drive-iframe {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }
}