/* Add to your app.css */
.stage { min-height: 460px; position: relative; }

/* Always keep overlays above the visualizer canvas */
#lyrics-layer,
#song-layer,
#artist-layer {
  z-index: 10001 !important;
}

/* Stage inner stack must fill the box (so AR changes actually crop) */
.stage .stage-inner,
#bg-layer,
#viz-canvas {
  width: 100% !important;
  height: 100% !important;
}

#bg-layer { object-position:center center; }

/* Make background interactive when it has a source */
#bg-layer[src] {
  pointer-events: auto !important;
  cursor: move;
}


#viz-canvas {
  background: transparent !important; /* Ensure canvas is transparent */
  pointer-events: none !important; /* Allow clicks to pass through */
}

#logo-layer {
  pointer-events: auto !important; /* Logo should be interactive */
}

#lbl-time-cur {color: #00FF00;}
#lbl-time-tot {color: #FFA500;}
/* Keep small text white only on dark bars/overlays, not globally */
.transport .small,
.pvw-topbar .small,
#wasm-mp4-progress .small,
#export-warning-overlay .small {
  color: #fff;
}

/* Keep Bootstrap alert text readable even when .small is used */
.alert.small {
  color: var(--bs-alert-color) !important;
}

#btn-big-play {
  z-index: 4 !important;
}

.stage > .position-absolute.bottom-0 {
  z-index: 5 !important;
  pointer-events: auto !important; /* Controls should be interactive */
}

/* START knob = green */
#artist-time-start::-webkit-slider-thumb { background:#22c55e; border-color:#22c55e; }
#artist-time-start::-moz-range-thumb     { background:#22c55e; border:none; }

/* END knob = red */
#artist-time-end::-webkit-slider-thumb { background:#ef4444; border-color:#ef4444; }
#artist-time-end::-moz-range-thumb     { background:#ef4444; border:none; }

/* Slightly thicker focus halo so colors pop */
#artist-time-start:focus::-webkit-slider-thumb,
#artist-time-end:focus::-webkit-slider-thumb { box-shadow:0 0 0 6px rgba(13,110,253,.25); }

/* START knob = green */
#song-time-start::-webkit-slider-thumb { background:#22c55e; border-color:#22c55e; }
#song-time-start::-moz-range-thumb     { background:#22c55e; border:none; }

/* END knob = red */
#song-time-end::-webkit-slider-thumb { background:#ef4444; border-color:#ef4444; }
#song-time-end::-moz-range-thumb     { background:#ef4444; border:none; }

/* Slightly thicker focus halo so colors pop */
#song-time-start:focus::-webkit-slider-thumb,
#song-time-end:focus::-webkit-slider-thumb { box-shadow:0 0 0 6px rgba(13,110,253,.25); }

/* When 9:16 is active, flip sizing so HEIGHT drives WIDTH */
.stage.vertical {
  /* override the inline width/height on #stage-container */
  height: 70vh !important;      /* pick your preview height */
  width: auto !important;       /* width will be AR * height */
  max-width: 100%;              /* never exceed the column */
  margin-inline: auto;          /* center the tall box */
}
/* Ambient side fill wrapper */
.stage-ambient { position: relative; }

/* Blurred copy of the background behind the player */
#ambient-bg {
  z-index: 0;
  filter: blur(28px) brightness(0.65) saturate(1.05);
  transform: scale(1.08);        /* avoid sharp edges after blur */
}

/* Soft side vignette so edges don't distract */
.stage-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                    /* above ambient blur, below player */
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.15) 18%,
      rgba(0,0,0,0.15) 82%,
      rgba(0,0,0,0.55) 100%);
}

/* Keep the actual player above the ambient layers */
.stage-ambient > #stage-container { position: relative; z-index: 2; }
/* Ensure side panels & transport float above the player's ambient shadow */
.ui-over { position: relative; z-index: 50; }
/* Aspect ratio quick-toggle look */
.ar-btn { min-width: 48px; font-weight: 600; letter-spacing: .2px; }
.ar-btn.active {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}


/* =========================================
   Transport bar: visible, layered, responsive (FINAL)
   ========================================= */
.transport{
  position: sticky;
  bottom: 0;
  z-index: 60;                     /* above ambient shadow */
  padding: .6rem .8rem;
  border-radius: .75rem;
  background: rgba(16,18,27,.78);  /* dark translucent */
  backdrop-filter: blur(8px);      /* frosted */
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: .5rem .75rem;
  flex-wrap: wrap;                 /* allows tidy wrap at small widths */
}

/* Buttons readable on dark bar */
.transport .btn,
.transport .form-check-label { color: #eaeaf1; }
.transport .btn-outline-secondary { border-color:#b8bdc7; color:#eaeaf1; }
.transport .btn-outline-secondary:hover { background:#2b2f3a; }

/* Export attention state: visible when WASM is loaded and button is enabled */
#btn-export-viz.btn-outline-success:not(:disabled),
#btn-export-viz.export-ready-pulse{
  border-color:#22c55e !important;
  color:#eaffef !important;
  box-shadow: 0 0 0 rgba(34,197,94,0);
  animation: exportPulse 1.25s ease-in-out infinite;
  font-weight: 600;
}

@keyframes exportPulse{
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.00); filter: brightness(1); }
  45%  { box-shadow: 0 0 0 4px rgba(34,197,94,.35), 0 0 10px rgba(34,197,94,.35); filter: brightness(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,.00); filter: brightness(1); }
}

/* AR pills */
.ar-btn { min-width:48px; font-weight:600; letter-spacing:.2px; }
.ar-btn.active { color:#fff; background:#0d6efd; border-color:#0d6efd; }

/* Time colors (you already had these) */
#lbl-time-cur { color:#00FF00; }
#lbl-time-tot { color:#FFA500; }

/* ===== Sliders + icons grouped ===== */
.slider-group{ display:flex; align-items:center; gap:.5rem; }
.slider-group .form-range{ flex:1 1 auto; min-width:0; }

/* Desktop sizing: seek long, volume shorter and right-aligned */
.slider-seek{ flex:1 1 520px; min-width:280px; }
.slider-vol { flex:0 0 240px; max-width:320px; margin-left:auto; }

/* Icons the same size, aligned with sliders */
.transport-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25rem; font-size:1.25rem; line-height:1;
  color:#eaeaf1; opacity:.95;
}

/* === Responsive breakpoint ===
   Keep ONE row down to 900px. Below that, wrap to tidy rows. */
@media (max-width: 900px){
  .transport{ padding:.55rem .65rem; }

  /* Order: row1 buttons/loop/time, row2 seek, row3 volume */
  .transport .btn-group,
  .transport .btn,
  .transport .form-check,
  #lbl-time-cur, #lbl-time-tot { order:1; }

  .slider-seek { order:2; flex:1 1 100%; max-width:100%; margin-left:0; }
  .slider-vol  { order:3; flex:1 1 100%; max-width:100%; margin-left:0; }
}

/* Keep long preset names inside the left panel */
.left-panel .accordion-body { overflow: hidden; }

.left-panel .form-select{
  width:100%; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* === Fullscreen Preview overlay === */
.pvw-no-scroll { overflow: hidden; }

.pvw-overlay{
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  background: rgba(0,0,0,.92);
  pointer-events: auto;
}
.pvw-overlay.pvw-show{ display: block; }

.pvw-topbar{
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .5rem .75rem;
  background: rgba(0,0,0,.72); /* darker = readable */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.18);
  z-index: 9999;            /* on top of canvas */
  pointer-events: auto;
  color:#fff;
}

.pvw-topbar .form-select{ background:#fff; color:#000; }
.pvw-topbar .btn, .pvw-topbar .form-check-label { color:#fff; }
.pvw-topbar .form-range{ accent-color:#0d6efd; }

.pvw-shell{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  /* bar height provided by JS as --pvw-bar; fall back to 56px */
    padding: calc(var(--pvw-bar,56px) + 16px) 12px 12px;
  z-index: 2;
}


/* Make preview bar buttons pop */
.pvw-topbar .btn-primary { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.pvw-topbar .btn-secondary { background:#6c757d; border-color:#6c757d; color:#fff; }
.pvw-topbar .btn-primary:hover { filter: brightness(1.05); }
.pvw-topbar .btn-secondary:hover { filter: brightness(1.05); }

/* Font style buttons - use green (btn-success) when active */
#artist-font-regular.btn-secondary,
#artist-font-bold.btn-secondary,
#artist-font-italic.btn-secondary,
#song-font-regular.btn-secondary,
#song-font-bold.btn-secondary,
#song-font-italic.btn-secondary,
#lyrics-font-regular.btn-secondary,
#lyrics-font-bold.btn-secondary,
#lyrics-font-italic.btn-secondary {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

/* ========== Preview overlay: mobile tweaks ========== */
@media (max-width: 640px){
  .pvw-topbar{ flex-wrap: wrap; gap:.5rem; padding:.5rem; }
  .pvw-topbar .pvw-left,
  .pvw-topbar .pvw-right{ display:flex; flex-wrap: wrap; gap:.5rem; }

  /* Seek should take a full row on small screens */
  #pvw-seek{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Make selects slightly smaller to fit */
  .pvw-topbar .form-select{ font-size:.85rem; padding-top:.15rem; padding-bottom:.15rem; }
}

/* Safe-area for notches */
.pvw-overlay{ padding-bottom: env(safe-area-inset-bottom); }