/* ══════════════════════════════════════════════════════════
   PLAYER.CSS — Vaivox Custom Player Styles
   Video player, audio controls, waveform, sync, fullscreen
   Extracted from main.css
   ══════════════════════════════════════════════════════════ */

/* ── Error message ────────────────────────────── */
.error-msg {
  display:none; margin-bottom:14px;
  background:rgba(255,61,107,.07); border:1px solid rgba(255,61,107,.25);
  border-radius:var(--r); padding:11px 15px;
  font-family:var(--mono); font-size:.8rem; color:var(--accent2); line-height:1.6;
}

/* ═══════════════════════════════════════════
   LOADING / PIPELINE
═══════════════════════════════════════════ */
#loading-section {
  display:none;
  overflow: hidden;
  animation: slideOpen .5s ease both;
}
@keyframes slideOpen {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 400px; opacity: 1; }
}

.loading-card {
  background: linear-gradient(150deg, #0e0a16 0%, #060410 100%) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(200,165,80,0.25);
  border-top: none;
  border-radius: 0 0 18px 18px;
  padding: 14px 20px 10px;
  max-width: 480px;
  margin: 0 auto;
  position:relative; overflow:hidden;
}
.loading-card .step-label { color: #e2e8f0; }
.loading-card .step-num { color: #94a3b8; }
.loading-card .step-sublabel { color: rgba(200,165,80,.8); }
.loading-card .step-row.waiting { opacity: .35; }
.loading-card .step-row.done .step-label { color: #94a3b8; }
.loading-card .progress-label { color: #94a3b8; }
.loading-card .loading-note { color: #94a3b8; }
.loading-card .progress-track { background: rgba(255,255,255,.1); }
.loading-card .step-badge.model { background: rgba(200,165,80,.15); border-color: rgba(200,165,80,.3); }
.loading-card .step-icon { border-color: rgba(255,255,255,.15); }
.loading-card .step-row.active .step-icon { border-color: var(--accent); }
.loading-card.active::before {
  content:''; position:absolute; inset:0; border-radius: 0 0 18px 18px; padding:1.5px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
  background-size:200% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderSlide 2s linear infinite;
}

.steps-list { margin-bottom:14px; }
.step-row {
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--border); transition:opacity .4s;
}
.step-row:last-child { border-bottom:none; }
.step-row.waiting { opacity:.2; }
.step-row.active  { opacity:1; }
.step-row.done    { opacity:.5; }

.step-icon {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--border2); transition:all .3s;
}
.step-row.active .step-icon { background:rgba(200,165,80,.1); border-color:var(--accent); box-shadow:0 0 12px rgba(200,165,80,.25); }
.step-row.done   .step-icon { background:rgba(34,197,94,.1); border-color:var(--green); }

.step-ring { width:14px; height:14px; border:2px solid rgba(200,165,80,.3); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.step-check { color:var(--green); font-size:.9rem; font-weight:700; }
.step-num { font-family:var(--mono); font-size:.65rem; color:var(--muted); }

.step-body { flex:1; min-width:0; }
.step-label { font-family:var(--mono); font-size:.75rem; color:var(--text); display:block; }
.step-row.done .step-label { color:var(--muted); }
.step-sublabel { font-family:var(--mono); font-size:.68rem; color:rgba(200,165,80,.6); display:none; margin-top:2px; }
.step-row.active .step-sublabel { display:block; }

.step-badge { font-family:var(--mono); font-size:.62rem; padding:2px 7px; border-radius:3px; flex-shrink:0; }
.step-badge.model { background:rgba(200,165,80,.07); border:1px solid rgba(200,165,80,.2); color:var(--accent); }
.step-badge.time  { background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2); color:var(--green); }

.progress-wrap { margin-bottom:4px; }
.progress-header { display:flex; justify-content:space-between; margin-bottom:8px; }
.progress-label { font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.progress-pct   { font-family:var(--mono); font-size:.72rem; color:var(--accent); font-weight:500; }
.progress-elapsed { font-family:var(--mono); font-size:.66rem; color:#64748b; margin-left:auto; padding-left:8px; }
.progress-track { height:3px; background:var(--border2); border-radius:3px; overflow:hidden; }
.progress-fill {
  height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 100%);
  transition:width .8s cubic-bezier(.4,0,.2,1); position:relative;
}
.progress-fill::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:50px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4));
  animation:shimmer 1.4s ease-in-out infinite;
}
.loading-note { font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-top:10px; display:flex; align-items:center; gap:6px; }
.loading-note::before { content:'//'; color:var(--accent); opacity:.5; }

/* ── Video title ──────────────────────────────── */
.video-title-wrap { padding:20px 24px 0; display:none; }
.video-title-label { font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.video-title-text { font-family:var(--sans); font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.35; }

/* ══════════════════════════════════════════
   VAIVOX CUSTOM PLAYER
══════════════════════════════════════════ */

/* Wrapper esterno player — stile TV pulito */
.vx-player-wrap {
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  margin: 0;
}

/* Area video 16:9 */
.vx-video-area {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
#yt-player-container { width:100%; height:100%; }

/* Watermark */
.vx-watermark {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--mono);
  font-size: .63rem;
  color: rgba(255,255,255,.4);
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  letter-spacing: .05em;
  pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  transition: opacity .3s;
  z-index: 10;
}
.vx-watermark.hidden { opacity: 0; }
.vx-wm-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

/* Badge lingua — top right video */
.vx-lang-badge {
  position: absolute;
  top: 12px; right: 12px;
  display: flex; gap: 5px;
  z-index: 11;
}
.vx-lang-btn {
  font-family: var(--mono);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .05em;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 5px;
}
.vx-lang-btn.active-dub {
  background: rgba(200,165,80,.15);
  border-color: rgba(200,165,80,.45);
  color: var(--accent);
}
.vx-lang-btn.active-orig {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

/* Overlay caricamento */
.vx-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(9,11,16,.82);
  backdrop-filter: blur(6px);
  transition: opacity .4s;
  z-index: 20;
}
.vx-overlay.hidden { opacity:0; pointer-events:none; }
.vx-overlay-spinner {
  width: 30px; height: 30px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.vx-overlay-text {
  font-family: var(--mono); font-size: .72rem;
  color: var(--muted); text-align: center; line-height: 1.7;
}

/* Errore embedding */
.yt-embed-error {
  display:none; padding:24px; text-align:center;
  font-family:var(--mono); font-size:.78rem;
  color:var(--muted); line-height:1.6;
  background: var(--surface);
}
.yt-embed-error strong { color:var(--accent2); display:block; margin-bottom:8px; }

/* ── Barra controlli — nascosta, sync via YouTube play ── */
.vx-controls {
  display: none;
}

/* Waveform */
.vx-waveform {
  display: flex; align-items: center; gap: 2px;
  height: 28px; margin-bottom: 8px; overflow: hidden;
}
.wave-bar { flex:1; border-radius:2px; min-height:3px; background:rgba(255,255,255,.07); transition:background .1s; }
.wave-bar.played { background:rgba(200,165,80,.2); }
.wave-bar.active { background:var(--accent); box-shadow:0 0 5px rgba(200,165,80,.4); }

/* Progress bar */
.vx-progress-wrap {
  position: relative;
  height: 18px;
  display: flex; align-items: center;
  cursor: pointer;
  margin-bottom: 6px;
}
.vx-progress-track {
  width: 100%; height: 3px;
  background: rgba(255,255,255,.09);
  border-radius: 3px; overflow: hidden;
  transition: height .15s;
}
.vx-progress-wrap:hover .vx-progress-track { height: 5px; }
.vx-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #3B82F6, rgba(200,165,80,.8));
  border-radius: 3px;
  transition: width .15s linear;
  pointer-events: none;
}
.vx-progress-thumb {
  position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  background: #3B82F6;
  box-shadow: 0 0 8px rgba(59,130,246,.7);
  top: 50%; transform: translate(-50%,-50%);
  left: 0%; opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.vx-progress-wrap:hover .vx-progress-thumb { opacity: 1; }

/* Row pulsanti */
.vx-btn-row {
  display: flex; align-items: center; gap: 8px;
}

/* Tasto PLAY — rotondo blu */
.vx-play-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #3B82F6;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 0 22px rgba(59,130,246,.38);
  position: relative;
}
.vx-play-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 0 38px rgba(59,130,246,.65);
}
.vx-play-btn:active { transform: scale(.95); }
.vx-play-btn.idle::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(59,130,246,.3);
  animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Tasti secondari */
.vx-ctrl-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.vx-ctrl-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}

/* Tempi */
.vx-times {
  font-family: var(--mono); font-size: .68rem;
  color: rgba(255,255,255,.38);
  white-space: nowrap; flex-shrink: 0;
}
.vx-times .cur { color: rgba(255,255,255,.75); }

.vx-spacer { flex: 1; }

/* Status */
.vx-status {
  font-family: var(--mono); font-size: .62rem;
  color: rgba(255,255,255,.3);
  white-space: nowrap; transition: color .3s;
}
.vx-status.playing { color: var(--green); }
.vx-status.loading { color: var(--accent); }

/* Offset */
.vx-offset-wrap {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .6rem;
  color: rgba(255,255,255,.3);
}
.vx-offset-wrap .vx-off-val { color: rgba(200,165,80,.7); }
input[type=range].vx-offset-slider {
  -webkit-appearance:none; appearance:none;
  width:70px; height:3px;
  background:rgba(255,255,255,.1);
  border-radius:3px; outline:none; cursor:pointer;
}
.vx-fs-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.vx-fs-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }

/* Fullscreen */
.vx-player-wrap:fullscreen          { border-radius:0; margin:0; }
.vx-player-wrap:-webkit-full-screen { border-radius:0; margin:0; }
.vx-player-wrap:fullscreen .vx-video-area,
.vx-player-wrap:-webkit-full-screen .vx-video-area {
  aspect-ratio: unset; height: calc(100vh - 110px);
}
input[type=range].vx-offset-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:11px; height:11px;
  border-radius:50%; background:var(--accent);
  border:2px solid #080c16; cursor:pointer;
}

/* Bottone YouTube fallback */
.yt-link-wrap { display:none; }
.yt-link-btn {
  display:none;
  transition:all .2s; width:100%; justify-content:center;
}
.yt-link-btn:hover { border-color:var(--accent2); color:var(--text); background:rgba(255,61,107,.06); }
.yt-icon { color:#ff0000; }

audio { display:none; }

/* Stats (player context) */
.stats-row { display:flex; gap:8px; margin:16px 0 0; }
.stat { flex:1; background:rgba(15,12,25,0.85); backdrop-filter:blur(10px); padding:14px 16px; display:flex; flex-direction:column; gap:4px; border-radius:12px; border:1px solid rgba(200,165,80,0.15); }
.stat-label { font-family:var(--mono); font-size:.58rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.stat-value { font-family:var(--mono); font-size:.86rem; color:var(--text); font-weight:500; }
@media(max-width:480px){ .stats-row { flex-wrap:wrap; margin:12px 0 0; } .stat { flex:1 0 45%; } }

/* Offset slider */
.offset-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.offset-label { font-family:var(--mono); font-size:.65rem; color:var(--muted); white-space:nowrap; }
.offset-label span { color:var(--accent); font-weight:600; }
input[type=range].offset-slider {
  -webkit-appearance:none; appearance:none;
  width:90px; height:3px; background:var(--border2); border-radius:3px; outline:none; cursor:pointer;
}
input[type=range].offset-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg); cursor:pointer;
}
input[type=range].offset-slider::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg); cursor:pointer;
}

/* ── Video preview ──────────────────────────── */
.yt-preview {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(160deg, rgba(24,18,42,0.95) 0%, rgba(10,8,16,0.97) 100%);
  border: 1px solid rgba(200,165,80,0.25);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  width: 90%; box-sizing: border-box;
  max-height: 0; overflow: hidden; opacity: 0;
  padding: 0 20px;
  transition: max-height 0.45s ease-out, opacity 0.3s ease-out 0.05s, padding 0.35s ease-out;
  z-index: 1;
}
.yt-preview.visible {
  max-height: 80px; opacity: 1;
  padding: 14px 20px;
}
.yt-preview-thumb {
  width: 80px; height: 45px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(200,165,80,0.2);
}
.yt-preview-info { flex: 1; min-width: 0; }
.yt-preview-title {
  font-size: 0.82rem; font-weight: 600; color: #f1f5f9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.yt-preview-channel {
  font-family: var(--mono); font-size: 0.68rem; color: #94a3b8;
}
.yt-preview-ok {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Mobile player overrides ──────────────────── */
@media (max-width: 600px) {
  /* Player video */
  .vx-player-wrap {
    margin: 12px 0 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Titolo video */
  .video-title-wrap { padding: 16px 16px 0 !important; }

  /* Link YouTube */
  .yt-link-wrap { padding: 0 16px 16px !important; }

  /* Stats */
  .stats-row { margin-left: 0 !important; margin-right: 0 !important; }

  /* Press play hint */
  #press-play-hint { font-size: 0.8rem !important; }
}