/* =====================================================
   PREVIEW.CSS — Audio Player, Video, Lightbox, Code
   ===================================================== */

/* ---- Audio Player Bar (floating bottom) ---- */
.audio-bar {
  position:fixed; bottom:0; left:0; right:0;
  height:70px;
  background:var(--surface-deep);
  border-top:var(--border-thick);
  box-shadow:0 -4px 0 var(--ink);
  display:flex; align-items:center; gap:1rem; padding:0 1.5rem;
  z-index:195;
  transform:translateY(100%);
  transition:transform 0.3s var(--ease-out);
}
.audio-bar.active { transform:translateY(0); }

.audio-play {
  width:40px; height:40px; flex-shrink:0;
  background:var(--yellow); border:var(--border);
  box-shadow:var(--shadow-sm); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--ink);
  transition:transform 0.12s var(--ease-bounce), box-shadow 0.12s;
}
.audio-play:hover  { transform:translate(-1px,-1px); box-shadow:var(--shadow-md); }
.audio-play:active { transform:translate(1px,1px); box-shadow:none; }

.audio-info { min-width:0; flex-shrink:0; }
.audio-track-name { font-weight:800; font-size:0.88rem; color:var(--txt-inverse); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.audio-time { font-family:var(--mono); font-size:0.72rem; color:rgba(255,255,255,0.5); margin-top:2px; }

.audio-seek-wrap { flex:1; display:flex; align-items:center; gap:0.5rem; }
.audio-seek, .audio-volume {
  -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,0.15); height:6px;
  border-radius:3px; outline:none; cursor:pointer;
}
.audio-seek { flex:1; }
.audio-volume { width:90px; }
.audio-seek::-webkit-slider-thumb,
.audio-volume::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  background:var(--yellow); border:2px solid var(--ink);
  border-radius:50%; box-shadow:1px 1px 0 var(--ink);
}

.audio-close {
  width:34px; height:34px; flex-shrink:0;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  border-radius:var(--radius-sm); color:rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.audio-close:hover { background:var(--coral); color:#fff; }

/* ---- Video / Code / Lightbox Modal specifics ---- */
.video-wrap {
  width:100%; border-radius:var(--radius-sm);
  overflow:hidden; border:var(--border);
  box-shadow:var(--shadow-md); background:#000;
}
.video-wrap video { width:100%; display:block; max-height:65vh; }

.code-wrap {
  border:var(--border); border-radius:var(--radius-sm);
  overflow:auto; max-height:65vh;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,0.08);
}
.code-wrap pre { margin:0; }

/* Lightbox image */
.lightbox-img-wrap {
  display:flex; align-items:center; justify-content:center;
  background:#111; border:var(--border); border-radius:var(--radius-sm);
  min-height:200px; overflow:hidden;
}
#lightbox-img {
  max-width:100%; max-height:65vh;
  display:block; margin:0 auto;
  transition:transform 0.2s var(--ease-out);
}
.lightbox-info-bar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:0.5rem; margin-top:0.75rem;
  font-family:var(--mono); font-size:0.78rem; color:var(--txt-secondary);
}
.lightbox-thumbs {
  display:flex; gap:6px; overflow-x:auto;
  padding:0.6rem 0; margin-top:0.5rem;
}
.lightbox-thumb {
  width:56px; height:56px; flex-shrink:0;
  border:var(--border); border-radius:var(--radius-sm);
  object-fit:cover; cursor:pointer; opacity:0.65;
  transition:opacity 0.12s, transform 0.12s;
}
.lightbox-thumb:hover, .lightbox-thumb.active { opacity:1; transform:scale(1.05); }

/* Lightbox controls */
.lightbox-controls {
  display:flex; align-items:center; gap:0.5rem; justify-content:center;
  margin-top:0.75rem;
}

/* ---- Speedtest Modal ---- */
.speed-display {
  text-align:center; padding:1.5rem;
  background:var(--surface-alt);
  border:var(--border); border-radius:var(--radius-md);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,0.06);
  margin-bottom:1.25rem;
}
.speed-number {
  font-family:var(--mono); font-size:4rem; font-weight:900;
  color:var(--ink); line-height:1; letter-spacing:-0.04em;
}
.speed-unit { font-family:var(--mono); font-size:0.9rem; font-weight:800; color:var(--txt-secondary); margin-top:0.25rem; }
.speed-status {
  font-family:var(--mono); font-size:0.82rem; font-weight:800;
  color:var(--txt-muted); margin-top:0.5rem;
}
.speed-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem;
  margin-bottom:1.25rem;
}
.speed-stat {
  background:var(--surface); border:var(--border);
  border-radius:var(--radius-sm); padding:0.85rem;
  text-align:center; box-shadow:var(--shadow-sm);
}
.speed-stat-label { font-size:0.72rem; font-weight:800; color:var(--txt-muted); text-transform:uppercase; letter-spacing:0.05em; }
.speed-stat-val   { font-family:var(--mono); font-size:1.1rem; font-weight:900; color:var(--ink); margin-top:0.25rem; }

/* ---- Lock / Rename / Folder Modals ---- */
.fm-modal {
  position:fixed; inset:0; z-index:500;
  background:rgba(10,10,20,0.65); backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.fm-modal[style*="flex"] { display:flex !important; animation:modalIn 0.22s var(--ease-out); }