* { box-sizing: border-box; }
html{ scrollbar-gutter: stable; }

:root{
  --bg0:#0b1020;
  --bg1:#141a33;
  --text:#f3f6ff;
  --muted: rgba(243,246,255,0.78);
  --accent1:#7c5cff; /* purple */
  --accent2:#00d4ff; /* cyan */
  --accent4:#42ff9e; /* green */
  --warn:#ffcc66;    /* amber */
  --danger:#ff4d6d;
  --blue:#3aa0ff;
  --teal:#00d4ff;
  --slate:#8aa0c6;
}



body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,0.35), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(0,212,255,0.28), transparent 60%),
    radial-gradient(800px 650px at 60% 85%, rgba(255,79,216,0.20), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.topbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: var(--bg0);
  backdrop-filter: none;
  position: sticky;
  top:0;
  z-index:10;
}

/* Header layout: title left, action buttons centered */
.topbar .left{ grid-column: 1; }
.topbar .right{
  grid-column: 2;
  justify-self: center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  flex-wrap: wrap;
}

button{
  cursor:pointer;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.1px;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  transition:
    transform 0.06s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

/* Donate button (top right) */
.btnDonate{
  background: linear-gradient(135deg, rgba(255,215,128,0.45), rgba(255,140,0,0.35));
  border-color: rgba(255,215,128,0.85);
  color: #000;
  font-weight: 900;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,215,128,0.35) inset,
    0 0 22px rgba(255,215,128,0.35);
}

.btnDonate:hover{
  filter: brightness(1.1);
}


/* Buttons with SVG icons (used in header + any other places we switch to SVG) */
.btnWithIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.btnIcon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

button:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.07) inset;
}

button:active{ transform: translateY(1px); }

button:focus-visible{
  outline: none;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 0 0 3px rgba(0,212,255,0.28);
}

/* 
  Button colour system (semantic, keeps the dark vibe but makes actions pop)
  - Primary: main actions (Add, Export, Save Voice)
  - Secondary: safe utility actions (Save/Open)
  - Utility: help / non-critical
  - Play: audio playback
  - Move: reorder
  - Danger: delete/stop
  - Insert: insert-under buttons
*/

button.btn-primary{
  border-color: rgba(58,160,255,0.70);
  background: linear-gradient(135deg, rgba(58,160,255,0.55), rgba(0,212,255,0.25));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.32),
    0 0 0 1px rgba(58,160,255,0.18) inset,
    0 0 18px rgba(58,160,255,0.14);
}

button.btn-secondary{
  border-color: rgba(138,160,198,0.55);
  background: linear-gradient(135deg, rgba(138,160,198,0.30), rgba(255,255,255,0.08));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(138,160,198,0.12) inset;
}

button.btn-utility{
  border-color: rgba(124,92,255,0.65);
  background: linear-gradient(135deg, rgba(124,92,255,0.40), rgba(255,255,255,0.06));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(124,92,255,0.14) inset,
    0 0 16px rgba(124,92,255,0.10);
}

button.btn-success,
button.btn-play{
  border-color: rgba(66,255,158,0.65);
  background: linear-gradient(135deg, rgba(66,255,158,0.34), rgba(0,0,0,0.10));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(66,255,158,0.14) inset,
    0 0 16px rgba(66,255,158,0.10);
}

button.btn-move{
  border-color: rgba(255,204,102,0.62);
  background: linear-gradient(135deg, rgba(255,204,102,0.26), rgba(0,0,0,0.10));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.26),
    0 0 0 1px rgba(255,204,102,0.12) inset;
}

button.btn-insert{
  border-color: rgba(124,92,255,0.62);
  background: linear-gradient(135deg, rgba(124,92,255,0.34), rgba(0,212,255,0.08));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.26),
    0 0 0 1px rgba(124,92,255,0.12) inset;
}

button.btn-danger{
  border-color: rgba(255,77,109,0.70);
  background: linear-gradient(135deg, rgba(255,77,109,0.34), rgba(0,0,0,0.12));
  box-shadow:
    0 12px 30px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,77,109,0.12) inset,
    0 0 16px rgba(255,77,109,0.10);
}

/* Boost hover contrast on coloured buttons */
button.btn-primary:hover,
button.btn-secondary:hover,
button.btn-utility:hover,
button.btn-success:hover,
button.btn-play:hover,
button.btn-move:hover,
button.btn-insert:hover,
button.btn-danger:hover{
  filter: brightness(1.08) saturate(1.08);
}

button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Header */
.left{ display:flex; flex-direction:column; gap: 8px; }
.titleBlock{ display:flex; align-items:center; gap: 10px; line-height: 1.15; }
.titleMain{ display:flex; align-items:center; gap: 10px; font-weight: 900; font-size: 18px; letter-spacing: 0.2px; }
.titleSub{ display:block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.lenRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

/* Bubbles */
.showLenBubble{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(66,255,158,0.60);
  background: rgba(66,255,158,0.14);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    0 0 0 1px rgba(66,255,158,0.14) inset;
  width: fit-content;
}

.showLenLabel{
  font-size: 12px;
  color: rgba(66,255,158,0.85);
  font-weight: 800;
  letter-spacing: 0.1px;
}

.showLenValue{
  font-size: 12px;
  color: rgba(66,255,158,1);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Analysis bubble */
.analyzeBubble{
  border: 1px solid rgba(255,204,102,0.60);
  background: rgba(255,204,102,0.14);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,204,102,0.14) inset;
}
.analyzeBubble .showLenLabel,
.analyzeBubble .showLenValue{
  color: rgba(255,204,102,0.95);
}

.layout{
  width: 100%;
  max-width: none;
  margin: 18px 0;
  padding: 0 24px 28px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
}

.panel{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 18px;
  padding: 14px;
}

.panelTitle{
  font-weight: 900;
  margin: 2px 0 10px;
  display: block;
}
.panelTitleMain { display:block; line-height: 1.15; }
.panelTitleSub { margin: 2px 0 0 0; font-weight: 400; opacity: 0.75; line-height: 1.2; }

.dropZone{
  border: 1px dashed rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
  border-radius: 18px;
  padding: 18px;
  text-align:center;
  color: var(--muted);
  margin-bottom: 10px; /* small clean gap before first playlist item */
}
.dropZone.drag{
  border-color: rgba(0,212,255,0.65);
  background: rgba(0,212,255,0.10);
}

.list{ list-style:none; padding:0; margin:0; }

/* Playlist status row (show length + analysis) */
.playlistStatusRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin: 2px 0 12px;
}

.item{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 10px;
}

.itemHeader{
  display:flex;
  justify-content:space-between;
  gap: 12px;
}

.itemLeft{
  flex: 1 1 auto;
  min-width: 0;
}

.itemTopRow{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Keep title/meta on their own lines below the top row */
.itemTitle, .metaRow, .insertRow{
  width: 100%;
}


.badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
}

.badgeGrip{
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: grab;
}

.badgeGrip:active{
  cursor: grabbing;
}

.badgeText{
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  white-space: nowrap;
}

.path{
  font-size: 12px;
  color: rgba(243,246,255,0.70);
  margin-top: 6px;
  word-break: break-all;
}

.rowBtns button{
  margin-left:6px;
  padding: 0;
  border-radius: 12px;
  font-weight: 900;
  height: 34px;
  width: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.progressWrap{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.progressText{ font-size: 12px; color: var(--muted); }
.progressBar{
  height: 10px;
  margin-top: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  overflow:hidden;
}
.progressFill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(124,92,255,0.75), rgba(0,212,255,0.65), rgba(66,255,158,0.55));
}

.recBox .row{
  display:flex;
  gap: 8px;
  align-items:center;
  margin-bottom: 8px;
}
.recBox audio{ width: 100%; outline: none; }

/* Export button placement (just above Export Progress) */
.exportActions{
  margin-top: 12px;   /* space below the voice player */
  margin-bottom: 6px; /* small gap before Export Progress title */
}

.exportTitle{
  margin-top: 0;
}

/* Export button area (sits below voice player, above Export Progress text) */
.exportActions{
  margin-top: 12px;
  margin-bottom: 8px;
}

.exportTitle{
  margin-top: 10px;
}

/* Meta row */
.metaRow{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  display:flex;
  gap: 10px;
  align-items:center;
}
.metaRow .dur{
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.metaRow .dur.live{
  border-color: rgba(255,204,102,0.35);
  background: rgba(255,204,102,0.10);
  color: rgba(255,204,102,0.95);
}

.rowBtns button.playBtn{ width: 34px; min-width: 34px; padding: 0; }


@media (max-width: 960px){
  .layout{ grid-template-columns: 1fr; }
}

.item.playing{
  border-color: rgba(0,212,255,0.55);
  box-shadow:
    0 0 0 1px rgba(0,212,255,0.18) inset,
    0 0 22px rgba(0,212,255,0.18);
}


/* Insert-under buttons (per track) */
.rowBtns button{
  font-size: 12px;
}


/* SVG icons (gold) for MUSIC / VOICE labels and insert buttons */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.badgeIcon {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-icon .insPlus {
  font-weight: 900;
  line-height: 1;
}

.btn-icon .btnIcon {
  width: 14px;
  height: 14px;
  display: inline-block;
}
/* =========================================================
   Recording countdown modal (non-invasive)
   ========================================================= */

.recCountdownOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.recCountdownOverlay.active{
  display: flex;
}

.recCountdownModal{
  background: linear-gradient(
    180deg,
    rgba(20,26,51,0.95),
    rgba(11,16,32,0.95)
  );
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 28px 34px;
  min-width: 280px;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

.recCountdownLabel{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12px;
  color: rgba(243,246,255,0.75);
  margin-bottom: 8px;
}

.recCountdownNumber{
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--warn); /* gold */
  text-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 22px rgba(255,204,102,0.35);
}

.recCountdownGo{
  color: var(--accent4);
  text-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 24px rgba(66,255,158,0.35);
}

/* =========================================================
   Recorder countdown modal (VT modal version)
   Uses: #recCountdownModal.vtModalOverlay + .isOpen
   ========================================================= */
.vtModalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.vtModalOverlay.isOpen{
  display: flex;
}

.vtModalCard{
  background: linear-gradient(180deg, rgba(20,26,51,0.95), rgba(11,16,32,0.95));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 28px 34px;
  min-width: 280px;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

.vtModalTitle{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12px;
  color: rgba(243,246,255,0.75);
  margin-bottom: 8px;
}

.vtModalNum{
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--warn);
  text-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 22px rgba(255,204,102,0.35);
}

.vtModalSub{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(243,246,255,0.78);
  line-height: 1.45;
}
/* Insert buttons under each track */
.insertRow{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.insertRow .insertBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-weight: 900;
  height: 34px;
}

.insertRow .insertBtn:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.20);
}

.insertRow .insertMusic{
  border-color: rgba(124,92,255,0.45);
}

.insertRow .insertVoice{
  border-color: rgba(0,212,255,0.45);
}

.btnIcon{
  width: 16px;
  height: 16px;
  display: inline-block;
}


/* Topbar icon + label buttons */
button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Keep small icons tidy everywhere */
.iconLabelBtn .btnIcon{
  width: 18px;
  height: 18px;
}

/* Optional: make sure these read as “gold” even if the SVG is monochrome */
.goldIcon{
  /* If your SVGs are already gold, this won’t change much. If they’re white, this gives a warm-gold tint. */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)) brightness(1.05) saturate(1.25);
}

/* Playlist bubbles centered at the top of the playlist panel */
.playlistTopCenter{
  display:flex;
  justify-content:center;
  margin: 10px 0 14px;
}

.lenRow.center{
  justify-content:center;
}
/* PERFECTLY CENTER PLAY / PAUSE BUTTONS */
.rowBtns button.playBtn{ width: 34px; min-width: 34px; padding: 0; }

/* Optional: slightly bolder pause symbol */
.rowBtns button.playBtn{ width: 34px; min-width: 34px; padding: 0; }

/* Ensure text rendering doesn't shift */
.rowBtns button.playBtn::before{
  display: none;
}




.micRow {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.micLabel {
  opacity: 0.9;
  font-size: 12px;
}

.smallBtn {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: inherit;
  cursor: pointer;
}

.smallBtn:hover {
  filter: brightness(1.08);
}

.micLevel {
  width: 160px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}

.micLevelFill {
  width: 0%;
  height: 100%;
  background: rgba(0, 255, 120, 0.8);
  transition: width 60ms linear;
}

.micStatus {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.95;
  min-height: 16px;
}

.micStatus.ok { color: rgba(0, 255, 140, 0.95); }
.micStatus.warn { color: rgba(255, 210, 80, 0.95); }
.micStatus.err { color: rgba(255, 90, 90, 0.95); }
.micStatus.info { color: rgba(200, 200, 200, 0.95); }


.recBox .row.micRow{
  flex-direction: column;
  align-items: stretch;
}

.micLabel{
  display:block;
  margin-bottom: 4px;
  font-size: 12px;
  opacity: 0.9;
}

.micControls{
  display:flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.micMeterLabel{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.9;
}

/* ===== Mic selector + test (polished) ===== */
.recBox .row.micRow{
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.micLabel{
  display:block;
  font-size: 12px;
  opacity: 0.9;
}

.micControls{
  display:flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.micSelect{
  min-width: 240px;
  max-width: 520px;
  flex: 1 1 240px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: #1a1a1a;       /* dark grey */
  color: #ffffff;
  outline: none;
}

.micSelect option{
  background: #1a1a1a;
  color: #ffffff;
}

.smallBtn{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #1a1a1a;
  color: #ffffff;
  cursor: pointer;
}

.smallBtn:hover{
  filter: brightness(1.08);
}

.micMeterRow{
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.micMeterLabel{
  font-size: 12px;
  opacity: 0.9;
}

.micLevel{
  width: 180px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}

.micLevelFill{
  width: 0%;
  height: 100%;
  background: rgba(0, 255, 120, 0.8);
  transition: width 60ms linear;
}

.micStatus{
  font-size: 12px;
  min-height: 16px;
  white-space: nowrap;
}

.micStatus.ok { color: rgba(0, 255, 140, 0.95); }
.micStatus.warn { color: rgba(255, 210, 80, 0.95); }
.micStatus.err { color: rgba(255, 90, 90, 0.95); }
.micStatus.info { color: rgba(200, 200, 200, 0.95); }

.voiceLinksTitle{
  margin-top: 6px;
}


.recBox audio{
  width: 100%;
  outline: none;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  accent-color: var(--teal);
}

.recBox audio::-webkit-media-controls-panel{
  background: rgba(0,0,0,0.18);
}

.recBox audio::-webkit-media-controls-current-time-display,
.recBox audio::-webkit-media-controls-time-remaining-display{
  color: rgba(243,246,255,0.92);
}

.recBox audio::-webkit-media-controls-play-button,
.recBox audio::-webkit-media-controls-mute-button{
  filter: brightness(1.15);
}

.recBox audio::-webkit-media-controls-timeline{
  filter: brightness(1.05);
}

.recBox audio{
  width: 100%;
  outline: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.14);
  padding: 8px 10px;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  accent-color: var(--teal);
}

.recBox audio{
  width: 100%;
  outline: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
  padding: 8px 10px;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  accent-color: rgba(0,212,255,0.85);
}

/* Electron/Chromium tuning (keeps it subtle) */
.recBox audio::-webkit-media-controls-panel{
  background: rgba(0,0,0,0.22);
}

.recBox audio::-webkit-media-controls-current-time-display,
.recBox audio::-webkit-media-controls-time-remaining-display{
  color: rgba(243,246,255,0.65);
}

.recBox audio::-webkit-media-controls-play-button,
.recBox audio::-webkit-media-controls-mute-button{
  filter: brightness(0.95) saturate(0.95);
}

.recBox audio::-webkit-media-controls-timeline{
  filter: brightness(0.95);
}
/* Mic meter block directly under dropdown */
.micMeterBlock{
  margin-top: 4px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.micMeterRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}


/* ===== Custom preview player (matches VT theme) ===== */
.playerBox{
  margin-top: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.26);
  padding: 10px 10px 12px;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}

.playerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.playerBtn{
  width: 44px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,212,255,0.35);
  background: rgba(0,212,255,0.12);
  color: rgba(0,212,255,0.92);
  font-weight: 900;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.playerBtn:hover{ filter: brightness(1.06); }
.playerBtn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.playerTime{
  font-size: 12px;
  color: rgba(243,246,255,0.68); /* less white */
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.playerSeek{
  width: 100%;
  margin: 0;
  accent-color: rgba(0,212,255,0.85);
}

.playerBottom{
  margin-top: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.playerHint{
  font-size: 12px;
  color: rgba(243,246,255,0.55);
  font-weight: 800;
}

.playerVol{
  display:flex;
  align-items:center;
  gap: 8px;
}

.volLabel{
  font-size: 12px;
  color: rgba(243,246,255,0.55);
  font-weight: 800;
}

.playerVolSlider{
  width: 100%;
  accent-color: rgba(0,212,255,0.85);
}

/* Hide the raw audio element (we drive it via custom UI) */
.playerBox audio{
  display:none;
}


/* ===== Section dividers (right panel) ===== */
.panelDivider{
  margin: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35) inset;
}

/* Ensure meter never collapses */
.micLevel{
  display: block;
}

/* Custom player tweaks */
.playerLeft{
  display:flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.playerPreviewLabel{
  font-size: 12px;
  font-weight: 900;
  color: rgba(243,246,255,0.55);
  letter-spacing: 0.1px;
}
/* Playlist filename (top line) */
.itemTitle{
  font-size: 12px;   /* try 12px */
  line-height: 1.25;
}


/* ---------------------------------
   Playlist drag reorder (custom)
---------------------------------- */
.item{
  position: relative;
}

.dragHandle{ display:none; }

.dragHandle:active{
  cursor: grabbing;
}

.item.isDragging{
  opacity: 0.35;
}

.dropPlaceholder{
  border: 2px dashed rgba(255,215,0,0.55);
  background: rgba(255,215,0,0.06);
  border-radius: 16px;
  margin-bottom: 10px;
}

.dragGhost{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.95;
  transform: translate(-9999px, -9999px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

.dragGhost .itemHeader{
  border-radius: 16px;
}


/* ---------------------------------
   Playlist item alternating tones
---------------------------------- */
.item.toneA{
  background: rgba(0,0,0,0.20);
  border-color: rgba(255,255,255,0.12);
}

.item.toneB{
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.16);
}

/* subtle left accent to help scanning */
.item.toneA::before,
.item.toneB::before{
  content:"";
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: rgba(255,215,0,0.18);
  opacity: 0.9;
}



/* Jingle button + per-item insert */
.insertBtn.insertJingle {
  border-color: rgba(255, 215, 128, 0.35);
}

/* Jingle mode selector */
.jingleModeWrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

.jingleModeLabel {
  opacity: 0.85;
  font-size: 12px;
}

.jingleModeSelect {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.18);
  color: inherit;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.typeChangeSelect option,
.jingleModeSelect option{
  background: #0b0b1a;
  color: #eaeaea;
}


.jingleModeSelect:focus {
  outline: 2px solid rgba(255, 215, 128, 0.55);
  outline-offset: 2px;
}


/* Type-based row coloring (strong scan, still subtle) */
.item.isMusic{
  background: linear-gradient(0deg, rgba(80, 140, 255, 0.13), rgba(80, 140, 255, 0.13));
}
.item.isVoice{
  background: linear-gradient(0deg, rgba(255, 180, 60, 0.14), rgba(255, 180, 60, 0.14));
}
.item.isJingle{
  background: linear-gradient(0deg, rgba(200, 90, 255, 0.14), rgba(200, 90, 255, 0.14));
}

/* Preserve your existing toneA/toneB shading by layering it underneath */
.item.toneA.isMusic{ background: linear-gradient(0deg, rgba(80, 140, 255, 0.13), rgba(80, 140, 255, 0.13)), rgba(255,255,255,0.04); }
.item.toneB.isMusic{ background: linear-gradient(0deg, rgba(80, 140, 255, 0.13), rgba(80, 140, 255, 0.13)), rgba(0,0,0,0.10); }

.item.toneA.isVoice{ background: linear-gradient(0deg, rgba(255, 180, 60, 0.14), rgba(255, 180, 60, 0.14)), rgba(255,255,255,0.04); }
.item.toneB.isVoice{ background: linear-gradient(0deg, rgba(255, 180, 60, 0.14), rgba(255, 180, 60, 0.14)), rgba(0,0,0,0.10); }

.item.toneA.isJingle{ background: linear-gradient(0deg, rgba(200, 90, 255, 0.14), rgba(200, 90, 255, 0.14)), rgba(255,255,255,0.04); }
.item.toneB.isJingle{ background: linear-gradient(0deg, rgba(200, 90, 255, 0.14), rgba(200, 90, 255, 0.14)), rgba(0,0,0,0.10); }

/* Hover stays readable */
.item.isMusic:hover,
.item.isVoice:hover,
.item.isJingle:hover{
  filter: brightness(1.05);
}


/* Per-type badge text colours (slightly brighter than row tint) */
.item.isMusic .badgeText{
  color: #8fb9ff;
}

.item.isVoice .badgeText{
  color: #ffd27a;
}

.item.isJingle .badgeText{
  color: #e7b0ff;
}


/* Type changer (always visible) */
.typeChangeWrap{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-left: 0;
}

.typeChangeLabel{
  font-size: 11px;
  opacity: 0.70;
}

.typeChangeSelect{
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #eaeaea;
  padding: 0 10px;
  outline: none;
}

.typeChangeSelect:hover{
  background: rgba(255,255,255,0.10);
}

.typeChangeSelect:focus{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.typeChangeSelect option{
  background: #111827;
  color: #eaeaea;
}


/* Keep the right-hand panel fixed while the playlist scrolls */
.sidebarPanel{
  position: sticky;
  top: 86px; /* sits below the sticky header */
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow: auto;
}



/* ===========================
   Mic UI tweak (safe, scoped)
   - Select stays on its own line
   - Meter + bar share the next line with Mic Test + Refresh (right)
   - No layout impact on Voice Links / player
   =========================== */

.recBox .row.micRow{
  position: relative;           /* anchor for absolutely positioned buttons */
  overflow-x: hidden;           /* prevent accidental horizontal scrollbars */
}

/* Force the dropdown onto its own line */
.recBox .row.micRow .micControls{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.recBox .row.micRow .micControls .micSelect{
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Put the buttons visually on the next line, aligned right (without taking layout width) */
.recBox .row.micRow .micControls #btnMicTest,
.recBox .row.micRow .micControls #btnMicRefresh{
  position: absolute;
  top: calc(100% + 6px);        /* aligns with the meter line */
  z-index: 2;
}

/* Refresh sits left of Test */
.recBox .row.micRow .micControls #btnMicTest{
  right: 0;
  min-width: 120px;             /* makes icon + text sit side-by-side */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.recBox .row.micRow .micControls #btnMicRefresh{
  right: 132px;                 /* = test min-width + gap */
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make sure the meter line reserves space for the two buttons on the right */
.recBox .row.micRow .micMeterBlock{
  margin-top: 6px;              /* matches the button top offset */
  padding-right: 190px;         /* reserve space for Test + Refresh */
}

/* Keep meter elements on one neat line */
.recBox .row.micRow .micMeterRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.recBox .row.micRow .micMeterLabel{
  margin-top: 0;
  white-space: nowrap;
}

.recBox .row.micRow .micLevel{
  width: auto;
  flex: 1 1 auto;
  max-width: 260px;
}

/* Small screens: if it still gets tight, allow the meter to shorten */
@media (max-width: 1050px){
  .recBox .row.micRow .micMeterBlock{
    padding-right: 170px;
  }
  .recBox .row.micRow .micControls #btnMicRefresh{
    right: 126px;
  }
}


/* =========================
   UI tweaks (build v5)
   ========================= */

/* Title: keep byline on the same row and smaller */
.titleBlock{
  display:flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.titleBy{
  font-size: 12px;
  opacity: 0.85;
  font-weight: 700;
  position: relative;
  top: -1px;
}
.appIcon{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: inline-block;
}


/* Top row: color-code the 3 add buttons */
.topBtnMusic{
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.45);
}
.topBtnVoice{
  background: rgba(205,127,50,0.18); /* bronze */
  border-color: rgba(205,127,50,0.45);
}
.topBtnJingle{
  background: rgba(168,85,247,0.18); /* purple */
  border-color: rgba(168,85,247,0.45);
}

/* Playlist header row (title + show length + analysis) */
.panelHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.playlistMeta{
  display:flex;
  align-items:center;
  gap: 10px;
}

.metaBlock{
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  min-width: 120px;
}

.metaLabel{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  opacity: 0.9;
}

.metaValue{
  font-size: 12px;
  font-weight: 900;
  opacity: 0.95;
}

/* Give the two meta blocks their existing “bubble” colors, but without bubbles */
#showLen .metaLabel, #showLen .metaValue{
  color: rgba(66,255,158,0.95);
}
#analyzeStatus .metaLabel, #analyzeStatus .metaValue{
  color: rgba(124,92,255,0.95);
}

/* Type dropdown: dark like other dropdowns */
.typeChangeSelect,
.jingleModeSelect{
  background: rgba(0,0,0,0.35);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 0 12px;
  height: 34px;
}

/* Insert buttons inline with the type dropdown */
.typeChangeWrap{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.typeInsertRow{
  display:flex;
  align-items:center;
  gap: 8px;
}

.typeInsertRow .insertBtn{
  padding: 8px 10px;
  border-radius: 10px;
  height: 36px;           /* match select height */
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

/* Delete button: RED */
.rowBtns .deleteBtn{
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.45);
  color: rgba(255,220,220,1);
}
.rowBtns .deleteBtn:hover{
  background: rgba(239,68,68,0.24);
  border-color: rgba(239,68,68,0.60);
}

/* Mic test bubble: tighter */
.smallBtn{
  padding: 6px 10px;
}

/* Recorder preview: remove seek bar and align volume with play button */
.playerControlsInline{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.playerVolInline{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 0;
  flex: 1;
  min-width: 0;
}
.playerVolInline .volLabel{
  font-size: 12px;
  opacity: 0.85;
}

/* About modal */
.aboutCard{
  max-width: 520px;
}
.aboutHeader{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.aboutIcon{
  font-size: 28px;
}
.aboutVersion{
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}
.aboutCopy{
  font-size: 13px;
  opacity: 0.92;
}
.aboutActions{
  display:flex;
  justify-content:flex-end;
  margin-top: 14px;
}

/* Modal open state (reuses existing overlay) */
.vtModalOverlay.open{
  display:flex;
}



/* Danger buttons */
.dangerTop{
  background: rgba(255,0,0,0.18);
  border: 1px solid rgba(255,0,0,0.35);
  color: #fff;
}
.dangerTop:hover{ background: rgba(255,0,0,0.28); }

.dangerBtn{
  background: rgba(255,0,0,0.18);
  border: 1px solid rgba(255,0,0,0.35);
  color: #fff;
}
.dangerBtn:hover{ background: rgba(255,0,0,0.28); }


/* Uniform small row buttons */
.miniBtn{
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.playBtn.miniBtn{ padding: 0; }


.exportNote{
  font-size: 12px;
  font-weight: 400;
  opacity: 0.8;
}

.btnExportSection{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 10px;
}


/* ==============================================
   About modal polish
   ============================================== */

.aboutCard{
  width: min(560px, calc(100vw - 80px));
  padding: 26px 28px;
  text-align: left;
  border-radius: 22px;
}

.aboutHeader{
  gap: 14px;
  margin-bottom: 14px;
}

.aboutIcon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.05) inset;
}

.aboutIconInner{
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.92);
}

.aboutTitleWrap{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.aboutCard .vtModalTitle{
  font-size: 18px;
  margin: 0;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.2px;
}

.aboutVersion{
  font-size: 13px;
  color: rgba(243,246,255,0.72);
  opacity: 1;
}

.aboutBody{
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.aboutCopy{
  font-size: 13px;
  color: rgba(243,246,255,0.78);
  line-height: 1.35;
}

.aboutActions{
  margin-top: 18px;
}

.aboutActions .primary{
  min-width: 120px;
}
/* Playlist header – inline status bar */
.playlistHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.playlistTitle {
  font-weight: 800;
  color: #ffffff;
}

.playlistLabel {
  color: rgba(255,255,255,0.75);
}

.playlistSep {
  color: rgba(255,255,255,0.35);
}

.playlistValue {
  font-weight: 700;
}

.lengthValue {
  color: #3dff9b; /* green */
}

.processValue {
  color: #d4af37; /* gold */
}


/* Mic test: hide status text, keep meter + buttons centered */
#micStatus{ display:none !important; }
#btnMicTest, #btnMicRefresh{ min-width: 0 !important; width: auto !important; }
.recBox .row.micRow .micMeterBlock{ padding-right: 0 !important; }
.recBox .row.micRow .micControls{ position: static !important; padding-bottom: 0 !important; }


/* =========================
   Text Note playlist items
   ========================= */
.item.isTextNote{
  background: linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.18);
}
.item.isTextNote .badgeText{
  color: rgba(243,246,255,0.92);
}
.item.isTextNote .noteTitle{
  font-style: italic;
  opacity: 0.95;
}

/* Selected playlist item (for insert-at-position workflows) */
.item.isSelected{
  outline: 2px solid rgba(0,212,255,0.55);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.18) inset, 0 0 18px rgba(0,212,255,0.14);
}

/* Insert Note button */
.typeInsertRow .insertBtn.insertNote{
  border-color: rgba(255,255,255,0.22);
}

/* =========================================================
   Mic UI stability fixes
   - Prevent dropdown/meter shifting on Test/Refresh
   - Prevent micro scrollbar flash
   ========================================================= */
#btnMicTest{
  width: 84px !important;          /* fixed width stops Test ↔ Stop reflow */
  min-width: 84px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#btnMicRefresh{
  width: 44px !important;
  min-width: 44px !important;
  justify-content: center !important;
}

.micSelect{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Use a single consistent layout model (no absolute positioning) */
.recBox .row.micRow .micControls{
  position: static !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.recBox .row.micRow .micControls .micSelect{
  flex: 1 1 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Ensure the meter row doesn't reserve phantom space */
.recBox .row.micRow .micMeterBlock{
  padding-right: 0 !important;
}

/* =========================================================
   Mic UI stability (v3)
   Root cause observed: on click, buttons move down by 1px due to global
   button:active { transform: translateY(1px); } which can clip bottoms
   inside a tight container, causing a momentary vertical overflow scrollbar.
   Fix: disable the active transform for mic buttons and ensure enough height.
   ========================================================= */

/* Keep sidebar stable (no flash) */
html{ scrollbar-gutter: stable; }
.sidebarPanel{ scrollbar-gutter: stable; overflow-y: auto; }

/* DO NOT clip mic controls */
.recBox .row.micRow{ overflow: visible !important; }

/* Stable meter row layout (meter grows, buttons fixed) */
.recBox .row.micRow .micMeterRow{
  display: grid !important;
  grid-template-columns: 1fr 44px 84px !important; /* meter | refresh | test */
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
  padding-bottom: 2px !important; /* tiny breathing room prevents cut-off */
}

.recBox .row.micRow .micLevel{
  width: 100% !important;
  max-width: none !important;
}

/* Lock dropdown width */
.recBox .row.micRow .micControls{ display: block !important; }
.recBox .row.micRow .micControls .micSelect{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Fixed button sizing + disable active press shift just for these */
#btnMicRefresh, #btnMicTest{
  height: 34px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#btnMicRefresh{
  width: 44px !important;
  min-width: 44px !important;
}

#btnMicTest{
  width: 84px !important;
  min-width: 84px !important;
}

/* Prevent the global translateY(1px) from clipping these buttons */
#btnMicRefresh:active,
#btnMicTest:active{
  transform: none !important;
}