/* ======================= Reset & Body ======================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(100deg,#6a11cb,#000000);
  color:#fff;
  display: flex;
  flex-direction: column;
  height: 100vh;        /* full viewport height */
  min-height: 0;
  overflow: hidden;     /* prevent page scroll */
}

/* ======================= Navbar ======================= */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(100deg,#2e045b,#110f0f);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;       /* don't shrink */
}
.navbar img { height: 50px; margin-right: 10px; }
.navbar h1 { font-size: 22px; letter-spacing: 1px; color: #fff; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: #0d9e62; text-decoration: none; font-weight: bold; transition: color 0.2s ease-in-out; }
.nav-links a:hover { color: #ddff00; }
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; }
.hamburger span { width: 25px; height: 3px; background: #fff; border-radius: 3px; transition: 0.3s; }
@media(max-width:768px){
  .nav-links { display: none; position: absolute; top: 60px; right: 10px; background: #1e1e2f; flex-direction: column; gap: 10px; padding: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.6); }
  .nav-links.show { display: flex; }
  .hamburger { display: flex; }
}

/* ======================= Upload Section ======================= */
.upload-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  flex-shrink: 0;       /* keep fixed height */
}
.upload-section img { height: 150px; border-radius: 8px; }
.upload-section input[type="file"] {
  padding: 10px 15px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #05cad4;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
}
.upload-section input[type="file"]:hover { background: #1803d2; }

/* ======================= Timeline & Tracks ======================= */
#timeline {
  position: relative;
  flex: 1 1 auto;       /* fill remaining space but allow shrink */
  min-height: 0;         /* important for internal scroll */
  margin: 10px auto;
  width: 95%;
  background:#2c2c3c;
  border:2px solid #444;
  border-radius:10px;
  overflow: auto;        /* timeline scrollable */
  padding:10px 0;
  box-shadow:0 5px 15px rgba(0,0,0,0.6);
}
.track {
  position:relative;
  width:2000px;
  height:80px;
  margin-bottom:10px;
  border-bottom:1px solid #555;
  border-radius:5px;
  overflow:hidden;
}
.audio-block {
  position:absolute;
  height:60px;
  border-radius:8px;
  cursor:grab;
  font-weight:bold;
  color:#fff;
  user-select:none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}
.audio-block.vocal { background:linear-gradient(135deg,#ff5252,#c50d0d); }
.audio-block.bgm1  { background:linear-gradient(135deg,#2196f3,#0d47a1); }
.audio-block.bgm2  { background:linear-gradient(135deg,#ffb74d,#ff9800); }
.audio-block.bgm3  { background:linear-gradient(135deg,#9c27b0,#4a148c); }

/* ======================= Resize, Buttons & Labels ======================= */
.resize-handle { position:absolute; top:0; width:10px; height:100%; background:rgba(255,255,255,0.3); cursor: ew-resize; z-index:2; }
.audio-block:hover .resize-handle { display:block; }
.cut-btn, .delete-btn { position:absolute; top:5px; width:22px; height:22px; font-size:14px; line-height:22px; text-align:center; border-radius:50%; cursor:pointer; z-index:2; }
.cut-btn { left:5px; background:red; }
.delete-btn { left:32px; background:#333; }
.block-label { pointer-events:none; }

/* ======================= Controls ======================= */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px;
  flex-shrink: 0;       /* keep visible */
}
button {
  padding:10px 25px;
  margin:5px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:#028ae4;
  color:white;
  font-weight:bold;
  font-size:16px;
  transition:0.3s;
}
button:hover { background:#a4b809; }

/* ======================= Footer ======================= */
.footer {
  width: 100%;
  padding: 10px 20px;
  text-align: center;
  background: linear-gradient(100deg,#2e045b,#110f0f);
  box-shadow: 0 -4px 10px rgba(0,0,0,0.5);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;       /* stay visible */
}

/* ======================= Canvas & Volume Slider ======================= */
canvas { position:absolute; top:0; left:0; border-radius:8px; }
input[type=range] { cursor:pointer; }