/* ═══ Variables ═══════════════════════════════════════════════════════════ */
:root {
  --dp-bg:       #0b0715;
  --dp-surface:  rgba(255,255,255,0.04);
  --dp-hover:    rgba(255,255,255,0.07);
  --dp-active:   rgba(139,92,246,0.12);
  --dp-border:   rgba(139,92,246,0.2);
  --dp-border-s: rgba(255,255,255,0.07);
  --dp-accent:   #8b5cf6;
  --dp-accent-l: #a78bfa;
  --dp-text:     #e2d9f3;
  --dp-muted:    rgba(226,217,243,0.55);
  --dp-faint:    rgba(226,217,243,0.28);
  --dp-radius:   12px;
}

/* ═══ Wrapper ══════════════════════════════════════════════════════════════ */
#onv-drive-player {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--dp-text);
  background: var(--dp-bg);
  border-radius: var(--dp-radius);
  overflow: hidden;
  border: 1px solid var(--dp-border);
}
.dp-wrap { display: flex; flex-direction: column; }

/* ═══ Player ═══════════════════════════════════════════════════════════════ */
.dp-player-section { background: #000; }

.dp-video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

/* movi-player fills the 16:9 box */
.dp-video-box movi-player {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Filename bar ───────────────────────────────────────────────────────── */
.dp-filename-bar {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--dp-muted);
  background: var(--dp-surface);
  border-top: 1px solid var(--dp-border-s);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══ Browser / list ═══════════════════════════════════════════════════════ */
.dp-browser-section {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dp-border) transparent;
}
.dp-browser-section::-webkit-scrollbar { width: 5px; }
.dp-browser-section::-webkit-scrollbar-track { background: transparent; }
.dp-browser-section::-webkit-scrollbar-thumb { background: var(--dp-border); border-radius: 3px; }

.dp-list { padding: 8px 0; }

/* ── Folder row ─────────────────────────────────────────────────────────── */
.dp-folder-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  cursor: pointer; user-select: none;
  transition: background .12s;
}
.dp-folder-header:hover { background: var(--dp-hover); }

.dp-arrow { display: flex; align-items: center; color: var(--dp-faint); flex-shrink: 0; }
.dp-arrow-svg { transition: transform .2s ease; }
.dp-folder-header.dp-expanded .dp-arrow-svg { transform: rotate(90deg); }

.dp-folder-header .dp-item-name {
  font-weight: 600; color: var(--dp-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}

/* ── Accordion ──────────────────────────────────────────────────────────── */
.dp-folder-children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
.dp-folder-children.dp-expanded { grid-template-rows: 1fr; }

.dp-children-inner {
  overflow: hidden;
  border-left: 2px solid var(--dp-border);
  margin-left: 26px;
}
.dp-children-inner .dp-children-inner {
  border-left-color: rgba(139,92,246,0.1);
  margin-left: 22px;
}

/* ── Video row ──────────────────────────────────────────────────────────── */
.dp-row-video {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s;
  border-left: 3px solid transparent;
}
.dp-row-video:hover { background: var(--dp-hover); }
.dp-row-video.dp-playing { background: var(--dp-active); border-left-color: var(--dp-accent); }

.dp-play-icon { display: flex; align-items: center; color: var(--dp-faint); flex-shrink: 0; transition: color .12s; }
.dp-row-video:hover .dp-play-icon,
.dp-row-video.dp-playing .dp-play-icon { color: var(--dp-accent-l); }

.dp-row-video .dp-item-name {
  flex: 1; color: var(--dp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; transition: color .12s;
}
.dp-row-video:hover .dp-item-name,
.dp-row-video.dp-playing .dp-item-name { color: var(--dp-text); }

.dp-dur {
  font-size: 11px; color: var(--dp-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; flex-shrink: 0;
}

.dp-sub-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: var(--dp-accent-l);
  border: 1px solid var(--dp-accent);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .12s;
}
.dp-row-video:hover .dp-sub-badge,
.dp-row-video.dp-playing .dp-sub-badge { opacity: 1; }

/* ═══ States ═══════════════════════════════════════════════════════════════ */
.dp-loading { display: flex; justify-content: center; align-items: center; padding: 32px 0; }
.dp-loading-sm { padding: 14px 0; }

.dp-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--dp-border);
  border-top-color: var(--dp-accent);
  border-radius: 50%;
  animation: dp-spin .7s linear infinite;
}
.dp-spinner-sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes dp-spin { to { transform: rotate(360deg); } }

.dp-empty, .dp-error { padding: 20px 16px; color: var(--dp-faint); font-size: 13px; text-align: center; }
.dp-error { color: #f87171; }

/* ═══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .dp-browser-section { max-height: 320px; }
}