/* test2/styles.css */
/* --- Global Styles & Variables --- */
:root {
  --bg-color: #1e1e24;
  --primary-surface: #2a2a33;
  --secondary-surface: #383844;
  --tertiary-surface: #4a4a58;
  --text-color: #e8e8e8;
  --text-muted-color: #a0a0a8;
  --accent-color: #5a67d8;
  --accent-hover: #4c51bf;
  --highlight-color: #f6e05e;
  --record-color: #e53e3e;
  --record-active-bg: #c53030;
  --mute-color: #718096;
  --mute-active-bg: #4a5568;
  --handle-color: #a0aec0;
  --border-color: #404048;
  --track-bg: #2f2f37;
  --track-header-bg: #25252d;
  --timeline-grid-color: rgba(255, 255, 255, 0.06);
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --transition-speed-fast: 0.15s;
  --transition-speed-med: 0.25s;
  --shadow-sm: 0 2px 4px rgba(0,0,0, 0.15);
  --shadow-md: 0 5px 10px rgba(0,0,0, 0.2);
}

/* --- Light Theme Overrides --- */
body.light-theme {
  --bg-color: #f0f0f0;
  --primary-surface: #ffffff;
  --secondary-surface: #e0e0e0;
  --tertiary-surface: #d0d0d0;
  --text-color: #1e1e24;
  --text-muted-color: #555;
  --accent-color: #5a67d8;
  --accent-hover: #4c51bf;
  --highlight-color: #f6e05e;
  --record-color: #e53e3e;
  --record-active-bg: #c53030;
  --mute-color: #718096;
  --mute-active-bg: #4a5568;
  --handle-color: #a0aec0;
  --border-color: #ccc;
  --track-bg: #f5f5f5;
  --track-header-bg: #e0e0e0;
}

/* --- General Styles --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* **** MODIFIED BODY **** */
body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 14px;
  /* Body allows scrolling */
}
/* **** END MODIFIED BODY **** */

/* **** MODIFIED APP CONTAINER **** */
.app-container {
  display: flex;
  flex-direction: column;
  /* Set width and height to be slightly less than full viewport */
  width: 98vw;
  height: 95vh;
  /* Center the container with margins */
  margin: 20px auto; /* Adds space top/bottom and centers left/right */

  background-color: var(--bg-color); /* Use theme background */
  overflow: hidden; /* Keep internal overflow hidden */

  /* Re-add container look */
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  position: relative;
}

#beat-visualizer-fullscreen-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 500;
    display: none; /* Initially hidden */
    cursor: pointer; 
}

#beat-visualizer-fullscreen-container canvas {
    width: 100%;
    height: 100%;
}

/* **** END MODIFIED APP CONTAINER **** */

/* --- Buttons, Inputs, and Controls --- */
/* ... rest of the styles remain the same ... */

button, select, input[type="range"], input[type="checkbox"], label {
  font-family: inherit;
  transition: background-color var(--transition-speed-med) ease, color var(--transition-speed-med) ease, transform var(--transition-speed-fast) ease, opacity var(--transition-speed-med) ease, box-shadow var(--transition-speed-med) ease;
}
button {
  background-color: var(--secondary-surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}
button:not(.track-btn) i { font-size: 1.1em; }
button:hover:not(:disabled) {
  background-color: var(--tertiary-surface);
  border-color: var(--accent-hover);
  color: white;
  box-shadow: 0 3px 6px rgba(0,0,0, 0.2);
}
button:active:not(:disabled) {
  transform: scale(0.96);
  background-color: var(--accent-hover);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.hidden { display: none !important; }

.controls-container {
  display: flex;
  flex-direction: column; /* Change to stack children vertically */
  padding: 12px 20px;
  background: linear-gradient(to bottom, var(--primary-surface), var(--track-header-bg));
  border-bottom: 1px solid var(--border-color);
  /* flex-wrap: wrap; /* Not essential for stacking when direction is column */
  gap: 15px; /* This gap will now apply vertically between the control groups */
  /* align-items: stretch; /* Default, makes children full width if they don't have a set width. Or use align-items: center; if you want them centered. */
}
.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-color); /* Add a border */
  padding: 8px 12px; /* Add some internal padding */
  border-radius: 8px; /* Optional: round the corners */
  background-color: rgba(0, 0, 0, 0.05); /* Optional: subtle background */
  width: 100%;
}
.sound-pack-selector label { margin-right: 5px; }
#sound-pack-select {
  padding: 7px 10px;
  background-color: var(--secondary-surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}
#sound-pack-select:hover { border-color: var(--accent-hover); }

/* --- Additional Controls (Zoom, Theme, Help) --- */
.control-group.additional-settings {
  display: flex;
  align-items: center;
  gap: 10px;
}
#zoom-slider {
  cursor: pointer;
  width: 50px; /* <<< Adjust this value as needed (e.g., 120px, 150px, 180px) */
  vertical-align: middle; /* Optional: Helps align with adjacent text/buttons */
}
#theme-toggle-btn, #help-btn { padding: 6px 10px; }

/* --- Loop Toggle, Recording, & Export --- */
#loop-toggle-checkbox { display: none; }
.loop-toggle label {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--secondary-surface);
  box-shadow: var(--shadow-sm);
}
.loop-toggle label:hover {
  background-color: var(--tertiary-surface);
  border-color: var(--accent-hover);
  color: white;
}
#loop-toggle-checkbox:checked + label {
  background-color: var(--accent-color);
  border-color: var(--accent-hover);
  color: white;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
#play-pause-btn.playing { background-color: var(--accent-color); color: white; }
#split-tool-btn.active {
  background-color: var(--highlight-color);
  color: var(--bg-color);
  font-weight: bold;
  border-color: #d69e2e;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
#recording-indicator {
  color: var(--record-color);
  font-weight: bold;
  animation: blink 1.2s infinite;
}
#recording-indicator i { vertical-align: middle; }
@keyframes blink { 0%, 100% { opacity: 1; text-shadow: 0 0 5px var(--record-color); } 50% { opacity: 0.5; text-shadow: none; } }
#stop-recording-btn {
  background-color: var(--record-color);
  border-color: var(--record-active-bg);
  color: white;
}
#stop-recording-btn:hover:not(:disabled) { background-color: var(--record-active-bg); }
#export-progress { font-style: italic; color: var(--highlight-color); opacity: 1; transition: opacity var(--transition-speed-med) ease; }
#export-progress.hidden { opacity: 0; }

/* --- Main Content --- */
.main-content { display: flex; flex-grow: 1; overflow: hidden; }
.library-container {
  width: 220px;
  background-color: var(--primary-surface);
  border-right: 1px solid var(--border-color);
  padding: 15px; /* Consistent padding */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  gap: 15px; /* Add gap between direct children for cleaner spacing */
}

.library-container h3 {
  margin-bottom: 15px;
  font-size: 1.1em;
  text-align: center;
  color: var(--text-muted-color);
  font-weight: 600;
}
#current-pack-name {
  font-weight: normal;
  font-style: italic;
  font-size: 0.9em;
  color: var(--text-color);
}
.custom-sample-loader { margin-bottom: 8px; }
.custom-file-upload {
  display: block;
  padding: 10px 12px; /* Slightly adjust padding */
  cursor: pointer;
  background-color: var(--mute-active-bg);
  color: white;
  border-radius: 5px; /* Slightly smaller radius */
  text-align: center;
  font-size: 0.9em;
  transition: background-color var(--transition-speed-med), box-shadow var(--transition-speed-med);
  box-shadow: var(--shadow-sm);
  border: none; /* Remove border if not needed */
}

#generator-select {
  /* Inherit font */
  font-family: inherit;
  font-size: 0.9em; /* Match button font size */
  font-weight: 500; /* Match button font weight */

  /* Theme colors */
  background-color: var(--secondary-surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);

  /* Sizing and spacing */
  padding: 8px 12px; /* Match button padding (adjust as needed) */
  padding-right: 30px; /* Add space for custom arrow */
  border-radius: 6px; /* Match button border-radius */
  height: 36px; /* Match button height */
  box-sizing: border-box;
  cursor: pointer;
  width: 100%; /* Make it fill its container */
  margin-top: 5px; /* Add some space above */

  /* Remove default browser appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Add custom dropdown arrow (example using background SVG) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23${(getComputedStyle(document.documentElement).getPropertyValue('--text-muted-color') || '#a0a0a8').substring(1)}'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;

  /* Transitions */
  transition: background-color var(--transition-speed-med) ease, border-color var(--transition-speed-med) ease;
}

#generator-select:hover {
  background-color: var(--tertiary-surface);
  border-color: var(--accent-hover);
}

#generator-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 90, 103, 216), 0.3); /* Optional focus ring */
}

/* Style the container if needed */
.sound-generator-section select {
    /* Ensures the select takes full width if container allows */
    width: 100%;
}

/* Remove the top border from the generator section */
.sound-generator-section {
  border-top: none; /* Explicitly remove the top border */
  padding-top: 0; /* Remove padding-top if border is gone */
}
.custom-file-upload:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 3px 6px rgba(0,0,0, 0.2);
}
.custom-file-upload i { margin-right: 8px; }
#custom-sample-input { display: none; }
#library-list {
  list-style: none;
  flex-grow: 1;
  margin-top: 0; /* Remove potential default margin */
  padding-top: 5px; /* Add a little space above the list */
}
.library-item {
  background-color: var(--secondary-surface);
  padding: 9px 10px; /* Slightly adjust padding */
  margin-bottom: 6px; /* Slightly reduce margin */
  border-radius: 4px; /* Sharper corners */
  cursor: grab;
  border: 1px solid var(--border-color); /* Add a subtle border back */
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--transition-speed-med), border-color var(--transition-speed-med), box-shadow var(--transition-speed-med);
  box-shadow: none; /* Remove default shadow for cleaner look */
}

.library-item:hover {
  background-color: var(--tertiary-surface);
  border-color: var(--accent-color); /* Highlight border on hover */
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0, 0.15); /* Subtle shadow on hover */
}

.library-item:active {
  cursor: grabbing;
  background-color: var(--accent-hover);
  color: white;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); /* Inset shadow when active */
}
.library-item.dragging {
  opacity: 0.6; /* Make slightly more transparent when dragging */
}
.library-item.previewing {
  background-color: var(--highlight-color);
  color: var(--bg-color);
  font-weight: bold;
  border-color: #d69e2e;
}

/* --- Timeline Section --- */
.timeline-section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* --- Adjust Existing Track Header --- */
.track-header {
  display: flex;
  align-items: center; /* Change from stretch to center vertically */
  /* Consider slightly increasing height or adjusting padding if needed */
  /* height: 70px; /* Example: Increase height */
  padding: 5px 8px;  /* Adjust padding */
  background-color: var(--track-header-bg);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9em;
  pointer-events: all;
  gap: 8px; /* Adjust gap between controls and mixer */
  box-sizing: border-box; /* Ensure padding/border are included in height */
}

/* --- Adjust Existing Track Header Controls --- */
.track-header-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 55px; /* Give slightly more space if needed */
  flex-shrink: 0; /* Prevent shrinking */
  align-items: center; /* Center buttons horizontally */
}

.track-header-controls .track-name {
  font-weight: 600;
  margin-bottom: 3px; /* Space below name */
  text-align: center;
  font-size: 0.85em; /* Maybe slightly smaller name */
  width: 100%;      /* Ensure it takes width */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- NEW: Styles for Knob Container --- */
.knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* --- NEW: Styles for Knob Label --- */
.track-control-label {
  font-size: 0.7em; /* Smaller label */
  color: var(--text-muted-color);
  text-align: center;
  margin-bottom: 1px;
  line-height: 1.1; /* Adjust line height */
}

/* --- NEW: Styles for the Volume Knob Canvas --- */
.volume-knob {
  cursor: ns-resize; /* Vertical drag cursor */
  /* Add potential margin if needed */
  /* margin-top: 2px; */
  border-radius: 50%; /* Make it look circular */
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3); /* Optional inner shadow */
}

.track-header-controls .track-btn {
  /* Existing styles are likely okay, adjust padding/size if needed */
  padding: 3px;
  font-size: 0.8em;
  min-width: 24px;
  height: 24px;
}
/* --- NEW: Styles for Track Header Mixer Section --- */
.track-header-mixer {
  display: flex;
  flex-direction: column; /* Stack controls vertically */
  justify-content: center; /* Center vertically */
  align-items: center;    /* Center horizontally */
  gap: 2px;               /* Space between label and knob */
  flex-grow: 1;           /* Allow it to take available space */
  min-width: 45px;        /* Minimum width for the knob */
}

.track-control-label {
  font-size: 0.75em;
  color: var(--text-muted-color);
  text-align: center;
  margin-bottom: 1px;
  display: block; /* Ensure it takes its own line */
}

.track-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%; /* Make sliders fill their container */
  height: 10px; /* Adjust height */
  background: var(--secondary-surface);
  outline: none;
  opacity: 0.8;
  transition: opacity .2s;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  margin: 0; /* Reset margin */
}

.track-slider:hover {
  opacity: 1;
}

/* --- Slider Thumb Styles (Cross-browser) --- */
.track-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px; /* Thumb width */
  height: 14px; /* Thumb height */
  background: var(--handle-color);
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid var(--border-color);
}

.track-slider::-moz-range-thumb {
  width: 8px;
  height: 14px;
  background: var(--handle-color);
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid var(--border-color);
}

/* Specific overrides if needed */
.volume-slider {
  /* Optional: different background/thumb */
}
.pan-slider {
  /* Optional: different background/thumb */
}
.track-header button.track-btn {
  padding: 5px;
  font-size: 0.85em;
  min-width: 28px;
  height: 28px;
  border-radius: 4px;
  background-color: var(--secondary-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted-color);
  font-weight: bold;
  box-shadow: var(--shadow-sm);
}
.track-header button.track-btn:hover:not(:disabled) {
  background-color: var(--tertiary-surface);
  color: white;
  border-color: var(--accent-hover);
}
.track-header button.track-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.track-header button.arm-btn.armed {
  background-color: var(--record-color);
  border-color: var(--record-active-bg);
  color: white;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 8px rgba(229, 62, 62, 0.5);
}
.track-header button.mute-btn.muted {
  background-color: orange;
  border-color: darkorange;
  color: black; /* Adjust text color for readability */
  box-shadow: 0 0 5px orange; /* Optional: add a glow */
  font-weight: bold;
}
.track-header button.solo-btn.soloed {
  background-color: var(--highlight-color);
  border-color: #d69e2e;
  color: var(--bg-color);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 8px rgba(246, 224, 94, 0.5);
}
.track-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  margin-left: 5px;
  color: var(--text-muted-color);
}
.track-header.has-solo .track-name { opacity: 0.6; }
.track-header.soloed .track-name { color: var(--highlight-color); opacity: 1; }
.track-header.armed .track-name { color: var(--record-color); opacity: 1; }

#timeline-grid {
position: relative;
/* height: 100%;  Let content determine height or set explicitly if needed */
width: 5000px; /* Initial width, JS updates this */

/* Define grid line variables (use colors from your theme if preferred) */
--grid-line-major: rgba(255, 255, 255, 0.1);  /* More visible lines */
--grid-line-minor: rgba(255, 255, 255, 0.05); /* Fainter lines */
--grid-line-track: var(--timeline-grid-color); /* Horizontal track lines */

/* Set background color */
background-color: var(--track-bg); /* Use track background color */

/* Create grid lines with background gradients */
background-image:
  /* Horizontal Track Lines (every 60px) */
  linear-gradient(to bottom, var(--grid-line-track) 1px, transparent 1px),
  /* Major Vertical Lines (every 100px - adjust size[1] if basePixelsPerSecond changes) */
  linear-gradient(to right, var(--grid-line-major) 1px, transparent 1px),
  /* Minor Vertical Lines (every 25px - adjust size[2] if basePixelsPerSecond changes) */
  linear-gradient(to right, var(--grid-line-minor) 1px, transparent 1px);

/* Define size for each gradient layer */
background-size:
  100% 60px, /* Track lines repeat every 60px vertically */
  100px 100%, /* Major vertical lines repeat every 100px horizontally */
  25px 100%;  /* Minor vertical lines repeat every 25px horizontally */

/* Position all grids from the top-left */
background-position: 0 0, 0 0, 0 0;

/* Repeat settings (tracks repeat vertically, vertical lines repeat horizontally) */
background-repeat: repeat-y, repeat-x, repeat-x;

/* padding-top is handled by #timeline-wrapper margin-top now */
}

/* --- Optional: Adjust timeline grid color based on theme --- */
body.light-theme #timeline-grid {
 --grid-line-major: rgba(0, 0, 0, 0.1);
 --grid-line-minor: rgba(0, 0, 0, 0.05);
 /* --grid-line-track color is already handled by --timeline-grid-color variable */
}
/* Add overrides for other themes if needed */
.tracks-container {
  position: relative;
  width: 100%;
}
.track {
  height: 60px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  background-color: transparent;
  user-select: none;
  transition: background-color var(--transition-speed-med);
}
.track.drag-over { background-color: rgba(90, 103, 216, 0.1); }

/* Playhead */
#playhead {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: var(--record-color);
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 6px var(--record-color);
}

/* Audio Segments */
.segment {
  position: absolute;
  top: 6px;
  height: calc(100% - 12px);
  background: linear-gradient(135deg, var(--accent-color) 0%, #4a58c8 100%);
  border-radius: 5px;
  border: 1px solid var(--accent-hover);
  cursor: move;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  box-shadow: var(--shadow-sm), inset 0 1px 1px rgba(255,255,255,0.05);
  transition: background-color var(--transition-speed-med), border-color var(--transition-speed-med), box-shadow var(--transition-speed-med), opacity var(--transition-speed-med), transform var(--transition-speed-fast) ease-out;
  user-select: none;
  overflow-x: visible !important; 
  overflow-y: hidden; 
}
.segment.selected { /* Combined selected and multi-selected styles */
  border: 2px solid var(--highlight-color);
  box-shadow: 0 0 10px var(--highlight-color), var(--shadow-md);
  z-index: 5;
}
.segment.dragging {
  opacity: 0.75;
  z-index: 10;
  cursor: grabbing;
  box-shadow: var(--shadow-md);
}
.segment.recording-placeholder {
  background: repeating-linear-gradient(45deg, var(--record-color), var(--record-color) 10px, #ff7c7c 10px, #ff7c7c 20px);
  border-color: var(--record-active-bg);
  opacity: 0.8;
  animation: pulse-recording 1.5s infinite ease-in-out;
}
@keyframes pulse-recording { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.6; } }
.segment-waveform {
  flex-grow: 1;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.segment-waveform canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.segment-handle.left {
  left: 0;
}

.segment-handle.right {
  right: 0;
}
/* Segment Handles */
.segment-handle {
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  z-index: 6;
  cursor: ew-resize;
}
.segment-handle::before {
  content: '';
  position: absolute;
  top: 30%;
  height: 40%;
  width: 3px;
  background-color: var(--handle-color);
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.2);
  opacity: 0.7;
  transition: opacity var(--transition-speed-med);
}
.segment:hover .segment-handle::before { opacity: 1; }
.segment-handle.left::before { left: 3px; }
.segment-handle.right::before { right: 3px; }
.split-cursor-active .segment,
.split-cursor-active .segment:hover { cursor: col-resize !important; }

/* Context Menu */
#context-menu {
position: absolute;
background-color: var(--primary-surface);
border: 1px solid var(--border-color);
border-radius: 6px;
box-shadow: var(--shadow-md);
z-index: 100;
padding: 6px;
opacity: 0;
transform: scale(0.98);
transition: opacity var(--transition-speed-fast) ease-out, transform var(--transition-speed-fast) ease-out;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 180px;
}

#context-menu button {
width: 100%;
justify-content: flex-start;
padding: 8px 12px;
box-shadow: none;
margin: 0;
}

#context-menu button:hover {
background-color: var(--tertiary-surface);
border-color: var(--accent-hover);
color: white;
}
#context-menu button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--secondary-surface); /* Ensure disabled looks different */
  color: var(--text-muted-color);
  border-color: var(--border-color);
}

#context-menu:not(.hidden) { opacity: 1; transform: scale(1); }

/* --- Help Modal --- */
#help-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}
#help-modal.hidden { display: none; }
#help-modal .help-content {
  background-color: var(--primary-surface);
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  text-align: left;
  color: var(--text-color);
}
#help-modal .help-content h2 {
  margin-bottom: 10px;
  color: var(--accent-color);
}
#help-modal .help-content ul { list-style: none; padding: 0; }
#help-modal .help-content ul li { margin-bottom: 5px; }
#help-modal .help-content button { margin-top: 15px; }

/* --- ADDED THEMES --- */

/* Ensure :root represents the 'Dark' theme */


/* Light Theme (kept from before) */
body.theme-light { /* Renamed from light-theme for consistency */
--bg-color: #f0f0f0;
--primary-surface: #ffffff;
--secondary-surface: #e0e0e0;
--tertiary-surface: #d0d0d0;
--text-color: #1e1e24;
--text-muted-color: #555;
--accent-color: #5a67d8;
--accent-hover: #4c51bf;
--highlight-color: #f6e05e;
--record-color: #e53e3e;
--record-active-bg: #c53030;
--mute-color: #718096;
--mute-active-bg: #4a5568;
--handle-color: #a0aec0;
--border-color: #ccc;
--track-bg: #f5f5f5;
--track-header-bg: #e0e0e0;
--timeline-grid-color: rgba(0, 0, 0, 0.08);
}

/* Forest Theme */
body.theme-forest {
--bg-color: #2f3e2f;
--primary-surface: #3e4d3e;
--secondary-surface: #4b5a4b;
--tertiary-surface: #5c6e5c;
--text-color: #d8e8d8;
--text-muted-color: #a0b0a0;
--accent-color: #68d391; /* Green */
--accent-hover: #48bb78;
--highlight-color: #f6e05e; /* Yellow */
--record-color: #e53e3e;
--record-active-bg: #c53030;
--mute-color: #94a3b8;
--mute-active-bg: #64748b;
--handle-color: #b0c0b0;
--border-color: #5c6e5c;
--track-bg: #384638;
--track-header-bg: #2a382a;
--timeline-grid-color: rgba(200, 220, 200, 0.07);
}

/* Ocean Theme */
body.theme-ocean {
--bg-color: #2a3a4a;
--primary-surface: #3a4a5a;
--secondary-surface: #4a5a6a;
--tertiary-surface: #5a6a7a;
--text-color: #cce8ff;
--text-muted-color: #90a0b0;
--accent-color: #63b3ed; /* Blue */
--accent-hover: #4299e1;
--highlight-color: #f6e05e; /* Yellow */
--record-color: #fc8181; /* Coral */
--record-active-bg: #f56565;
--mute-color: #a0aec0;
--mute-active-bg: #718096;
--handle-color: #b0c0d0;
--border-color: #5a6a7a;
--track-bg: #324252;
--track-header-bg: #253545;
--timeline-grid-color: rgba(180, 210, 230, 0.08);
}

/* Sunset Theme */
body.theme-sunset {
--bg-color: #4a2a2a;
--primary-surface: #5a3a3a;
--secondary-surface: #6a4a4a;
--tertiary-surface: #7a5a5a;
--text-color: #fed7d7;
--text-muted-color: #b09090;
--accent-color: #f56565; /* Red */
--accent-hover: #e53e3e;
--highlight-color: #f6ad55; /* Orange */
--record-color: #fbd38d; /* Light Orange/Yellow */
--record-active-bg: #f6ad55;
--mute-color: #b79494;
--mute-active-bg: #a08080;
--handle-color: #c0b0b0;
--border-color: #7a5a5a;
--track-bg: #523232;
--track-header-bg: #452525;
--timeline-grid-color: rgba(240, 200, 200, 0.07);
}

/* Matrix Theme */
body.theme-matrix {
--bg-color: #0d0d0d;
--primary-surface: #1a1a1a;
--secondary-surface: #2a2a2a;
--tertiary-surface: #3a3a3a;
--text-color: #39ff14; /* Matrix Green */
--text-muted-color: #2aaa0e;
--accent-color: #39ff14;
--accent-hover: #2aaa0e;
--highlight-color: #bfffac; /* Lighter green */
--record-color: #f87171; /* Contrasting red */
--record-active-bg: #dc2626;
--mute-color: #6b7280;
--mute-active-bg: #4b5563;
--handle-color: #2aaa0e;
--border-color: #3a3a3a;
--track-bg: #111111;
--track-header-bg: #080808;
--timeline-grid-color: rgba(57, 255, 20, 0.1); /* Green grid */
}

/* Grayscale Theme */
body.theme-grayscale {
--bg-color: #e0e0e0;
--primary-surface: #f0f0f0;
--secondary-surface: #d0d0d0;
--tertiary-surface: #b0b0b0;
--text-color: #1a1a1a;
--text-muted-color: #555555;
--accent-color: #666666;
--accent-hover: #444444;
--highlight-color: #333333;
--record-color: #aa0000; /* Keep some color for critical indicators */
--record-active-bg: #880000;
--mute-color: #888888;
--mute-active-bg: #666666;
--handle-color: #777777;
--border-color: #b0b0b0;
--track-bg: #e8e8e8;
--track-header-bg: #d8d8d8;
--timeline-grid-color: rgba(0, 0, 0, 0.08);
}

/* Dark Theme (Default) */
body.dark-theme { /* Use class for consistency */
--bg-color: #1e1e24;
--primary-surface: #2a2a33;
--secondary-surface: #383844;
--tertiary-surface: #4a4a58;
--text-color: #e8e8e8;
--text-muted-color: #a0a0a8;
--accent-color: #5a67d8;
--accent-hover: #4c51bf;
--highlight-color: #f6e05e;
--record-color: #e53e3e;
--record-active-bg: #c53030;
--mute-color: #718096;
--mute-active-bg: #4a5568;
--handle-color: #a0aec0;
--border-color: #404048;
--track-bg: #2f2f37;
--track-header-bg: #25252d;
--timeline-grid-color: rgba(255, 255, 255, 0.06);
}

/* Blue Theme */
body.blue-theme {
--bg-color: #0d1b2a;
--primary-surface: #1b263b;
--secondary-surface: #415a77;
--tertiary-surface: #778da9;
--text-color: #e0e1dd;
--text-muted-color: #a9b2c3;
--accent-color: #e0aaff;
--accent-hover: #d18bff;
--highlight-color: #66fcf1;
--record-color: #c5c6c7;
--record-active-bg: #d1d2d3;
--mute-color: #a3a3a3;
--mute-active-bg: #888;
--handle-color: #99d1d1;
--border-color: #1c2833;
--track-bg: #1c2833;
--track-header-bg: #0b1120;
--timeline-grid-color: rgba(255, 255, 255, 0.1);
}

/* High Contrast Theme */
body.high-contrast-theme {
--bg-color: #000;
--primary-surface: #222;
--secondary-surface: #444;
--tertiary-surface: #666;
--text-color: #fff;
--text-muted-color: #ccc;
--accent-color: #ff0;
--accent-hover: #cc0;
--highlight-color: #0f0;
--record-color: #f00;
--record-active-bg: #c00;
--mute-color: #888;
--mute-active-bg: #555;
--handle-color: #fff;
--border-color: #fff;
--track-bg: #333;
--track-header-bg: #000;
--timeline-grid-color: rgba(255, 255, 255, 0.2);
}

/* === NEW SODA THEMES START === */

/* Quantum Fizz Theme */
body.theme-quantum-fizz {
  --bg-color: #1a1a3a;
  --primary-surface: #2a2a4a;
  --secondary-surface: #3a3a5a;
  --tertiary-surface: #4a4a6a;
  --text-color: #e0ffff;
  --text-muted-color: #a0c0c0;
  --accent-color: #39ff14; /* Neon Green */
  --accent-hover: #2aaa0e;
  --highlight-color: #00f2ff; /* Electric Blue */
  --record-color: #ff6b6b; /* Contrasting Red/Pink */
  --record-active-bg: #ee3b3b;
  --mute-color: #8a8aa0;
  --mute-active-bg: #6a6a8a;
  --handle-color: #a0c0c0;
  --border-color: #4a4a6a;
  --track-bg: #222240;
  --track-header-bg: #151530;
  --timeline-grid-color: rgba(57, 255, 20, 0.08); /* Subtle green grid */
}

/* Sunrise Burst Theme */
body.theme-sunrise-burst {
  --bg-color: #6f4e37; /* Dark Wood/Earth */
  --primary-surface: #8b5a2b; /* Lighter Brown */
  --secondary-surface: #a0522d; /* Sienna */
  --tertiary-surface: #b86b3d;
  --text-color: #fff8dc; /* Cornsilk */
  --text-muted-color: #d2b48c; /* Tan */
  --accent-color: #ff7f00; /* Bright Orange */
  --accent-hover: #e66a00;
  --highlight-color: #ffdd00; /* Sunny Yellow */
  --record-color: #e53e3e;
  --record-active-bg: #c53030;
  --mute-color: #a08c7a;
  --mute-active-bg: #8b7362;
  --handle-color: #d2b48c;
  --border-color: #b86b3d;
  --track-bg: #805025;
  --track-header-bg: #654321; /* Darker Brown */
  --timeline-grid-color: rgba(255, 248, 220, 0.09); /* Subtle cream grid */
}

/* Arctic Chill Theme */
body.theme-arctic-chill {
  --bg-color: #e0f2f7; /* Very Light Blue */
  --primary-surface: #ffffff; /* White */
  --secondary-surface: #f0f8ff; /* Alice Blue */
  --tertiary-surface: #d6eaf8; /* Light Blue Gray */
  --text-color: #2a3a4a; /* Dark Blue/Gray */
  --text-muted-color: #5a6a7a;
  --accent-color: #87ceeb; /* Sky Blue */
  --accent-hover: #64b5f6; /* Lighter Sky Blue */
  --highlight-color: #add8e6; /* Light Blue */
  --record-color: #ff6b6b; /* Soft Red */
  --record-active-bg: #f55c5c;
  --mute-color: #b0c4de; /* Light Steel Blue */
  --mute-active-bg: #9cb8d9;
  --handle-color: #a0c4d8;
  --border-color: #c0d0e0; /* Light Gray Blue */
  --track-bg: #f5fcff;
  --track-header-bg: #e8f5fa;
  --timeline-grid-color: rgba(42, 58, 74, 0.08); /* Dark blue grid */
}

/* Add subtle texture for Arctic Chill */
body.theme-arctic-chill::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
}

/* Nebula Pop Theme */
body.theme-nebula-pop {
  --bg-color: #301934; /* Deep Purple */
  --primary-surface: #482850; /* Medium Purple */
  --secondary-surface: #5d3a6b;
  --tertiary-surface: #724c86;
  --text-color: #e6e6fa; /* Lavender */
  --text-muted-color: #b0a0c0;
  --accent-color: #ff00ff; /* Magenta */
  --accent-hover: #cc00cc;
  --highlight-color: #7fffd4; /* Aquamarine */
  --record-color: #ff69b4; /* Hot Pink */
  --record-active-bg: #ff1493; /* Deep Pink */
  --mute-color: #a080b0;
  --mute-active-bg: #8a6fa0;
  --handle-color: #c0b0d0;
  --border-color: #724c86;
  --track-bg: #402048;
  --track-header-bg: #301934;
  --timeline-grid-color: rgba(230, 230, 250, 0.08); /* Subtle lavender grid */
}

/* Optional: Add a subtle gradient for Nebula Pop */
body.theme-nebula-pop .app-container {
   background: linear-gradient(135deg, var(--bg-color) 0%, #482850 100%);
}
body.theme-nebula-pop .track {
    background-color: transparent; /* Let container gradient show */
}

/* === NEW SODA THEMES END === */

/* Timeline Ruler */
#timeline-ruler {
  position: absolute;
  top: 0;
  left: 170px; /* Keep from fix #1 */
  height: 30px;
  /* Remove or comment out width: calc(100% - 120px); */
  /* width: calc(100% - 120px); */
  background-color: var(--secondary-surface);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  z-index: 10;
  pointer-events: auto;
}

.ruler-label {
position: absolute;
top: 8px;
font-size: 0.8em;
color: var(--text-muted-color);
white-space: nowrap;
transform: translateX(-50%);
padding: 0 3px;
}

#timeline-wrapper {
flex-grow: 1;
overflow-x: scroll;
overflow-y: scroll;
position: relative;
background-color: var(--track-bg);
margin-left: 170px;
margin-top: 30px; /* Add margin for the ruler */
}

.track-headers-container {
  position: absolute;
  left: 0;
  /* Changed from top: 30px */
  top: 0;
  width: 170px;
  z-index: 15;
  background: var(--track-header-bg); /* This background will now fill the corner */
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  /* Changed from calc(100% - 30px) */
  height: 100%;
  /* ADDED: Push the inner content down to align with ruler */
  padding-top: 30px;
  box-sizing: border-box; /* Add this to include padding in height calculation */
}

/* Ensure the inner container positioning still works (should be fine) */
.track-headers-inner {
  position: relative;
  /* top: 0; - This might not be needed anymore if padding handles it */
  width: 100%;
  pointer-events: auto;
  /* Adjust height if using box-sizing */
  height: 100%; /* Make inner container fill the padded parent */
}

.track-headers-container .track-header,
.track-headers-container .track-header * {
pointer-events: auto;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
.control-group.playback-controls,
.control-group.file-actions {
  width: auto;
  flex-grow: 0;
  flex-shrink: 1;
}
.control-group.playback-controls { order: 1; }
.control-group.file-actions { order: 2; }
}

@media (max-width: 800px) {
.controls-container {
  gap: 10px;
  padding: 10px 15px;
}
.control-group {
  width: auto;
  flex-grow: 0;
  flex-shrink: 1;
}
.control-group {
  justify-content: flex-start;
  gap: 8px;
}
}

@media (max-width: 600px) {
 .controls-container {
    gap: 5px;
    padding: 8px 10px;
 }
 .control-group {
    padding: 5px 8px;
    gap: 5px;
    width: 100%;
    justify-content: center;
 }
 button {
    padding: 6px 10px;
    font-size: 0.85em;
 }
 #master-visualizer { display: none; }
 #playhead-time-display { min-width: 60px; }
}

/* Custom Scrollbar Styles */
* {
scrollbar-width: 20px;
scrollbar-color: var(--accent-color) var(--primary-surface);
}
::-webkit-scrollbar {
width: 20px;
height: 20px;
}
::-webkit-scrollbar-track {
background: var(--primary-surface);
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background-color: var(--secondary-surface);
border-radius: 5px;
border: 2px solid var(--primary-surface);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--tertiary-surface);
}
::-webkit-scrollbar-corner {
background: var(--primary-surface);
}

/* --- Visualization Styles --- */
.control-group.playback-controls {
display: flex;
align-items: center;
flex-grow: 1;
gap: 10px;
width: auto;
}
#master-visualizer {
height: 30px;
width: 200px;
min-width: 100px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-left: auto;
vertical-align: middle;
}
.control-group.playback-controls button,
.control-group.playback-controls .loop-toggle {
flex-shrink: 0;
}

/* Playhead Time Display */
.control-group.file-actions {
display: flex;
align-items: center;
flex-grow: 1;
gap: 10px;
width: auto;
}
#playhead-time-display {
font-family: 'Courier New', Courier, monospace;
font-size: 1.1em;
color: var(--text-muted-color);
background-color: var(--primary-surface);
padding: 5px 10px;
border-radius: 4px;
min-width: 80px;
text-align: center;
margin-left: auto;
align-self: center;
}

/* Load Button Label */
label[for="load-project-input"] {
  background-color: var(--secondary-surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-weight: 500;
  transition: background-color var(--transition-speed-med) ease, color var(--transition-speed-med) ease, transform var(--transition-speed-fast) ease, opacity var(--transition-speed-med) ease, box-shadow var(--transition-speed-med) ease;
}
label[for="load-project-input"]:hover {
  background-color: var(--tertiary-surface);
  border-color: var(--accent-hover);
  color: white;
  box-shadow: 0 3px 6px rgba(0,0,0, 0.2);
}
label[for="load-project-input"]:active {
  transform: scale(0.96);
  background-color: var(--accent-hover);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
#load-project-input {
  display: none;
}

/* Animations */
@keyframes shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX(3px); }
}
button.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes flash-red {
0%, 100% { border-color: var(--accent-hover); }
50% { border-color: var(--record-color); box-shadow: 0 0 8px var(--record-color); }
}
.segment.flash-red-border {
animation: flash-red 0.4s ease-in-out;
}

/* Control Bar Uniformity */
.controls-container button,
.controls-container .loop-toggle label,
.controls-container label[for="load-project-input"],
.controls-container #sound-pack-select {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.controls-container #sound-pack-select {
   padding-left: 10px;
   padding-right: 10px;
   
}
.control-group {
    align-items: center;
}

/* --- Styles for Multi-Select Feature --- */

/* --- Selection Box --- */
#selection-box {
  position: absolute; /* Position relative to timeline-wrapper */
  border: 1px dashed var(--highlight-color);
  background-color: rgba(246, 224, 94, 0.15); /* Use highlight color with alpha */
  z-index: 25; /* Ensure it's above grid but below segments if needed */
  pointer-events: none; /* Allow clicks to pass through */
  /* The 'hidden' class will be toggled by JS */
}
/* JS toggles this class */
#selection-box.hidden {
  display: none;
}

/* --- Multi-Selection Highlight --- */
/* Style for segments when they are part of a multiple selection */
/* You can make this different from the single '.selected' style if you want */
.segment.multi-selected {
  /* Example: Use the same style as single selection */
  border: 2px solid var(--highlight-color);
  box-shadow: 0 0 10px var(--highlight-color), var(--shadow-md);
  z-index: 5; /* Ensure selected are above non-selected */
  /* Example: Slightly different style */
  /* border: 2px solid var(--accent-color); */
  /* box-shadow: 0 0 8px var(--accent-color), var(--shadow-md); */
}

/* Ensure single selection style still exists and works */
/* This rule might be redundant if multi-selected uses the same style */
.segment.selected {
  border: 2px solid var(--highlight-color);
  box-shadow: 0 0 10px var(--highlight-color), var(--shadow-md);
  z-index: 5;
}

/* --- Temporary Highlight During Selection Box Drag --- */
.segment.selection-candidate {
  outline: 2px dotted rgba(246, 224, 94, 0.5); /* Example: dotted yellow outline */
  outline-offset: 1px;
}

@keyframes glow {
  0%, 100% {
    background-color: var(--secondary-surface); /* Start/End with normal background */
    box-shadow: var(--shadow-sm);
    border-color: transparent;
  }
  50% {
    background-color: var(--highlight-color); /* Glow color */
    color: var(--bg-color); /* Contrasting text for glow */
    box-shadow: 0 0 12px var(--highlight-color), var(--shadow-md); /* Glow shadow */
    border-color: var(--highlight-color); /* Glow border */
  }
}

.library-item.newly-added-glow {
  animation: glow 1.5s ease-in-out; /* Apply the animation */
  /* Ensure it overrides hover styles temporarily if needed */
  border-color: var(--highlight-color);
}

/* --- Styles for Branding Text --- */
#app-branding {
  font-size: 2.2em;   /* Adjust size to fit */
  font-weight: bold;
  font-family: 'Impact', Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Example cool font */
  color: red; /* Use theme's accent color */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Add a shadow */
  z-index: 5;        /* Keep it above most elements */
  
  line-height: 1;    /* Adjust line height for better positioning */
  cursor: pointer; /* Changes the mouse cursor to a hand pointer on hover */
  user-select: none; /* Prevents text selection on click */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
}

/* Adjustments for different themes */
body.theme-matrix #app-branding {
  text-shadow: 1px 1px 5px rgba(57, 255, 20, 0.7); /* Green shadow for matrix */
}
body.theme-sunrise-burst #app-branding {
    color: #ffdd00; /* Use highlight color */
    text-shadow: 1px 1px 3px rgba(111, 78, 55, 0.6); /* Brownish shadow */
}
body.theme-arctic-chill #app-branding {
    color: #5a6a7a; /* Use text color */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); /* Light shadow */
}
/* Add more theme adjustments if desired */




/* ... existing styles ... */

/* Style for Homepage Content (Links Box) */
.homepage-content {
  background-color: var(--primary-surface);
  padding: 20px;
  box-sizing: border-box;
  margin-top: 10px;
  /* margin-bottom is removed to let the next box control spacing */
  width: 98vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

/* Nav Grid Styles */
.nav-grid {
  display: flex;
  flex-wrap: wrap;           /* Allow items to wrap */
  justify-content: center;  /* Center items horizontally (handles last row) */
  gap: 15px;                /* Keep the gap */
  padding: 10px;
  max-width: 1200px;         /* Keep max-width if desired */
  margin: 0 auto;           /* Center the whole container */
  /* Remove grid-specific properties */
}

.nav-item {
  /* --- Add flex-basis for uniformity --- */
  flex-basis: 75px;   /* Set a base width (matches your grid's min value) */
  flex-grow: 0;       /* Prevent items from growing excessively */
  flex-shrink: 0;     /* Prevent items from shrinking too much */
  /* --- End Add --- */

  /* Keep existing flex properties for internal centering */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center <a> tag inside */
  text-align: center;
}

/* Keep other styles (.nav-item a, .nav-item img) as they are */
.nav-item img {
  display: block;
  max-width: 100%;
  height: 65px;
  margin: 0 auto; /* Ensure image centers within <a> */
}
.nav-item a { display: block; transition: transform 0.2s ease; }
.nav-item a:hover { transform: scale(1.1); }


/* **** NEW Style for Comments Section **** */
.comments-section {
  background-color: var(--primary-surface); /* Match background */
  padding: 20px;
  box-sizing: border-box;
  margin-top: 30px; /* Space above this box */
  margin-bottom: 30px; /* Space below this box */
  width: 98vw; /* Match width */
  margin-left: auto;  /* Center */
  margin-right: auto; /* Center */
  border-radius: 10px; /* Match style */
  box-shadow: var(--shadow-md); /* Match style */
  border: 1px solid var(--border-color); /* Match style */
}

/* Optional: Style for iframe if needed */
.comments-section iframe {
  display: block; /* Helps with margin centering */
  margin-left: auto;
  margin-right: auto;
  max-width: 100%; /* Prevent overflow on smaller screens */
}
/* **** END Added Styles **** */

/* --- Styles for Action Buttons on Segments --- */
/* --- Styles for Action Buttons on Segments --- */
.segment-action-btn {
  width: 30px; /* User specified size */
  height: 30px;/* User specified size */
  padding: 0;
  border-radius: 50%; /* Circular */
  box-sizing: border-box;
  line-height: 0;
  aspect-ratio: 1 / 1;
  font-size: 0.8em; /* Adjust icon size */
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
  z-index: 7;
  pointer-events: auto;
  flex-shrink: 0;
  vertical-align: middle; /* Added for better alignment with inputs */
}

/* Show buttons on segment hover */
.segment:hover .segment-action-btn {
  opacity: 1;
}

/* Hover/Active states */
.segment-action-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
}
.segment-action-btn:active {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(0.95);
}

/* --- Wrapper for Name and Buttons --- */
.segment-header-content {
  position: absolute;
  top: 3px; /* Keep */
  left: 8px; /* Keep */
  display: flex; /* Keep */
  align-items: center; /* Keep */
  gap: 5px; /* Keep */
  z-index: 8; /* Keep: Header content should be above waveform, buttons will be above name */
  pointer-events: none; /* Keep: Buttons inside will have pointer-events: auto */
  
  /* This max-width is important to prevent the header from overlapping segment handles */
  max-width: calc(100% - 16px); /* (8px left padding + 8px right padding for handles approx) */
  
  overflow: visible !important; /* MODIFIED: Allows children (like .segment-name) to overflow this container */
}

/* Segment Name Style */
.segment-name {
  font-size: 13px; /* Original was 0.8em (approx 11.2px). This is a bit bigger. Adjust as needed. */
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  white-space: nowrap; /* Keep: Ensures name stays on a single line */
  overflow: visible !important; /* MODIFIED: Allows text to extend beyond its calculated box */
  text-overflow: clip !important; /* MODIFIED: Removes the "..." and just clips if necessary (though overflow:visible should prevent this) */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  pointer-events: auto; /* Keep: Allows interaction if any were needed */
  
  /* Remove specific max-width constraints to allow full name visibility */
  /* max-width: 150px; /* REMOVED */
  /* min-width: 0; /* Could be added if flex issues, but likely not needed with nowrap and overflow:visible */
  
  /* Let it take the space it needs, but don't let it push other flex items aggressively */
  flex-grow: 0;   /* Keep or change to 1 if you want it to try and fill space before overflowing */
  flex-shrink: 0; /* Change from 1 to 0 to prevent shrinking if possible */
  
  position: relative; /* Good for z-index if needed, but usually not required here */
  z-index: 1; /* Ensure name is above waveform if it overflows, but below buttons */
}

/* Adjust name width when action buttons are present */
.segment.has-actions .segment-name {
   /* Estimate space needed: (3 buttons * 30px) + (2 gaps * 5px) = 100px */
   /* Reduce max-width further to avoid overlap */
   max-width: 60px; /* Adjust this value based on testing */
}

/* Optional: If only regenerate is present, maybe allow more space? */
.segment.has-regenerate:not(.has-actions) .segment-name {
   max-width: 130px; /* Only regen button */
}



.segment-action-btn.delete-btn:hover {
  background-color: rgba(200, 0, 0, 0.7); /* Reddish hover */
  color: white;
}


/* Cursor shown during regeneration */
.app-regenerating {
  cursor: progress !important; /* Or 'wait', 'crosshair', or your custom url() */
}
/* Ensure elements within also show the wait cursor */
.app-regenerating * {
    cursor: progress !important; /* Match the cursor above */
}

.hidden-color-input {
  display: none; /* Or use position absolute off-screen */
   position: absolute;
  left: 200px;
  top: 200px;
  /*opacity: 0; */
}
/* --- ADD THESE STYLES TO newstyles.css --- */



#app-fullscreen-btn {
  margin-left: 8px; /* Add space to the left of the button */
  /* You might need to adjust other styles in .control-group.file-actions if alignment is off */
}

/* Style for the Reverb Controls Popup Container */
.reverb-controls-popup {
  position: absolute;
  /* Position it below the segment header, adjust as needed */
  top: 35px; /* Adjust based on segment header height */
  left: 50%;
  transform: translateX(-50%); /* Center it horizontally */
  background-color: var(--secondary-surface); /* Use theme color */
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px; /* Add some padding */
  box-shadow: var(--shadow-md); /* Add shadow like context menu */
  z-index: 20; /* Ensure it's above other segments */
  display: flex; /* Use flex for internal layout */
  flex-direction: column; /* Stack items vertically */
  gap: 10px; /* Space between elements inside */
  min-width: 200px; /* Give it a reasonable minimum width */
  align-items: stretch; /* Stretch items like the toggle container */
  /* Prevent clicks inside popup from propagating to segment */
  pointer-events: auto;
}

/* Class to hide the popup */
.reverb-controls-popup.hidden {
  display: none;
}

/* Style for the On/Off Toggle Container */
.reverb-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes label and toggle apart */
  width: 100%;
  font-size: 0.9em;
}
.reverb-toggle-container label {
    margin-right: 5px;
    color: var(--text-muted-color);
    cursor: pointer; /* Make label clickable for toggle */
}
.reverb-toggle {
  cursor: pointer;
  /* Optional: Style checkbox */
  /* accent-color: var(--accent-color); */
}

/* Style for the Knobs Container inside the Popup */
.reverb-knobs-container {
  display: flex; /* Use flex for layout */
  flex-wrap: wrap; /* Allow knobs to wrap if needed */
  gap: 15px;      /* Space between knob containers */
  width: 100%;
  justify-content: space-around; /* Distribute space between knobs */
  margin-top: 5px;
  border-top: 1px solid var(--border-color); /* Separator line */
  padding-top: 10px; /* Space above knobs */
}

/* Use existing .knob-container styles defined elsewhere in your CSS */
/* (Make sure you HAVE .knob-container styles defined) */
.reverb-controls-popup .knob-container {
    align-items: center;
    min-width: 60px; /* Ensure knobs have enough space */
}

/* Use existing .parameter-label styles */
/* (Make sure you HAVE .parameter-label styles defined) */
.reverb-controls-popup .parameter-label {
    font-size: 0.8em;
    margin-bottom: 3px;
    text-align: center; /* Center knob labels */
}

/* Ensure knob canvases are displayed */
.reverb-controls-popup canvas.knob {
    display: block;
    margin: 0 auto; /* Center knob canvas if container is wider */
}

/* Adjust layout of segment header when action buttons are present */
/* Re-add or adjust this if you removed it previously */
.segment.has-actions .segment-header-content {
  gap: 3px; /* Reduce gap slightly if too crowded */
}
/* Adjust name width based on number of buttons */
/* Estimate space: (5 buttons * 30px) + (4 gaps * 3px) = ~162px */
.segment.has-actions .segment-name {
   max-width: calc(100% - 170px); /* Adjust this based on final button sizes/gaps */
   /* Or set a fixed max-width if preferred e.g., max-width: 30px; */
}

/* --- End Reverb Styles --- */
/* --- Segment Background Styling --- */

/* Override default background when custom color is applied */
/* The background-color is set directly via inline style in JS */
.segment.has-custom-color {
  background-image: none; /* Remove the default gradient if one exists */
  /* The actual background-color is applied via element.style.backgroundColor */
}

/* Adjust name width when action buttons are present */
/* This includes the new color button */
.segment.has-actions .segment-name {
   /* Estimate space needed: (4 buttons * 30px) + (3 gaps * 5px) = ~135px */
   /* Reduce max-width further */
   max-width: 40px; /* Adjust this value based on testing */
}

.ad-content-area {
  /* --- Existing styles --- */
  text-align: center;
  background-color: var(--primary-surface);
  padding: 20px 30px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 98vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
/* --- Styles for Added Text Content Section --- */
/* --- Styles for Added Text Content Section --- */
.text-content-area {
  /* --- MODIFIED FOR FLEXBOX LAYOUT --- */
  display: flex;
  justify-content: space-between; /* Distributes space between text and embed */
  align-items: flex-start;       /* Aligns items to the top */
  gap: 20px;                     /* Adds space between the text column and embed */

  /* --- Existing styles --- */
  background-color: var(--primary-surface);
  padding: 20px 30px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 98vw;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

/* --- NEW: Style for the text column --- */
.text-column {
  flex-grow: 1; /* Allows the text column to take available space */
  flex-basis: 0;  /* You can also use a percentage like flex-basis: 60%; */
  min-width: 0; /* Prevents overflow issues in flex items */
}

/* --- MODIFIED: Styles for the Instagram embed within the flex layout --- */
.text-content-area .instagram-media {
  flex-shrink: 0; /* Prevents the embed from shrinking below its min-width */
  /* The embed has inline min-width:326px and max-width:540px which will be respected */
  /* Let its own width properties define its size within the flex item */
  margin: 0 !important; /* Override inline margin: 1px if it causes issues */
  /* Ensure its original width property works well in a flex context */
  /* The inline style width: calc(100% - 2px) will apply to the width of this flex item. */
  /* If you want to strictly adhere to its max-width, you might set a flex-basis: */
  /* flex-basis: 326px; */ /* Example: start at min-width */
}

/* Adjust heading alignment within the new text-column */
.text-column h2 {
  text-align: left; /* Original .text-content-area h2 was centered */
  margin-bottom: 20px;
  color: var(--accent-color);
  font-size: 1.5em;
}

.text-column h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--text-muted-color);
  font-size: 1.2em;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}

.text-column p,
.text-column ul {
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: left; /* Ensure text remains left-aligned */
}

.text-column ul {
  list-style: disc;
  margin-left: 20px; /* Original margin-left */
}

.text-column li {
  margin-bottom: 8px;
}

/* --- Keep original h2 centered if it's OUTSIDE text-column (e.g. for Comments section) --- */
.text-content-area > h2 { /* Only for h2 that is a DIRECT child, if any */
    text-align: center;
}



/* ... (your existing styles) ... */

/* --- Piano Roll Modal Styles --- */
#piano-roll-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 250; /* High z-index */
}
#piano-roll-modal.hidden {
  display: none;
}

.piano-roll-content {
  background-color: var(--primary-surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  width: 60%;
  height: 80vh;
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Style the handle itself */
.pr-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: se-resize; /* South-east resize cursor */
  z-index: 300;
  /* Optional: Add a visual grip icon */
  background-image: linear-gradient(
    135deg, 
    var(--text-muted-color) 33%, 
    transparent 33%, 
    transparent 66%, 
    var(--text-muted-color) 66%, 
    var(--text-muted-color)
  ),
  linear-gradient(
    135deg, 
    var(--text-muted-color) 33%, 
    transparent 33%, 
    transparent 66%, 
    var(--text-muted-color) 66%, 
    var(--text-muted-color)
  );
  background-size: 8px 8px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.6;
}

.pr-resize-handle:hover {
  opacity: 1;
}

.piano-roll-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--secondary-surface);
}
#piano-roll-title {
  font-size: 1.2em;
  color: var(--accent-color);
}
#close-piano-roll-btn {
  background: none;
  border: none;
  color: var(--text-muted-color);
  font-size: 1.8em;
  cursor: pointer;
  padding: 0 5px;
}
#close-piano-roll-btn:hover {
  color: var(--text-color);
}

.piano-roll-controls {
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}
.piano-roll-controls label {
  margin-left: 5px;
}
.piano-roll-controls input[type="number"],
.piano-roll-controls select {
  background-color: var(--secondary-surface);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 5px 8px;
  width: 70px;
}
.piano-roll-controls select {
    width: auto; /* Allow select to size to content */
}
.piano-roll-controls button {
  padding: 6px 12px;
  font-size: 0.9em;
}
#pr-add-to-library-btn {
  margin-left: auto; /* Pushes it to the right */
  background-color: var(--accent-color);
  color: white;
}
#pr-add-to-library-btn:hover {
  background-color: var(--accent-hover);
}


.piano-roll-main {
  display: flex;
  flex-grow: 1;
  overflow: hidden; /* Important for scrolling children */
}

#pr-keyboard {
  width: 80px; /* Width of the keyboard */
  background-color: var(--secondary-surface);
  overflow-y: auto; /* Scroll if keys don't fit */
  border-right: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pr-key {
  height: 20px; /* KEY_HEIGHT_PX */
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  cursor: pointer;
  user-select: none;
  background-color: #eee; /* White keys */
  color: #333;
}
.pr-key.black {
  background-color: #555; /* Black keys */
  color: #fff;
  border-bottom: 1px solid #777;
  position: relative;
  /* margin-left: 30px; */ /* This line has been removed or commented out */
 
  z-index: 1; /* Black keys on top */
}
.pr-key:hover {
  background-color: var(--highlight-color);
}

#pr-grid-container {
  flex-grow: 1;
  overflow: auto; /* Scroll for grid */
  position: relative; /* For playhead positioning */
  background-color: var(--track-bg);
}

#pr-grid {
    position: relative;
    background-color: var(--timeline-bg-color); 
    
    /* --- The Grid Magic --- */
    --grid-cell-width: 25px;
    --grid-key-height: 20px;
    --beat-width: calc(var(--grid-cell-width) * 4);
    
    --grid-subdivision-color: var(--border-color);
    --grid-beat-color: var(--text-muted-color);
    --grid-key-color: var(--border-color);
    
    background-size: var(--beat-width) var(--grid-key-height);
    background-image:
        repeating-linear-gradient(
            to right,
            var(--grid-subdivision-color) 0 1px,
            transparent 1px var(--grid-cell-width)
        ),
        repeating-linear-gradient(
            to bottom,
            var(--grid-key-color) 0 1px,
            transparent 1px var(--grid-key-height)
        ),
        repeating-linear-gradient(
            to right,
            var(--grid-beat-color) 0 1px,
            transparent 1px var(--beat-width)
        );
        
    min-width: 100%; /* ADD THIS LINE */
}
body.light-theme #pr-grid {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px),
    linear-gradient(to right, rgba(0,0,0,0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px);
}


.pr-grid-cell {
    position: absolute;
    box-sizing: border-box;
    /* border: 1px dotted rgba(255,255,255,0.05); Remove if background grid is enough */
    cursor: cell;
}
.pr-grid-cell:hover {
    background-color: rgba(var(--accent-color-rgb, 90, 103, 216), 0.1);
}


.pr-note {
  position: absolute;
  background-color: var(--accent-color);
  border: 1px solid var(--accent-hover);
  border-radius: 3px;
  box-sizing: border-box;
  opacity: 0.8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  color: white;
  overflow: hidden;
  user-select: none;
}
.pr-note:hover {
  opacity: 1;
  border-color: var(--highlight-color);
}

#pr-grid-playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    /* height is set by JS */
    background-color: var(--record-color);
    z-index: 5;
    pointer-events: none;
    display: none; /* Initially hidden */
}

#pr-status {
  padding: 8px 15px;
  font-size: 0.85em;
  color: var(--text-muted-color);
  min-height: 20px; /* Ensure it has some height */
  text-align: center;
  border-top: 1px solid var(--border-color);
}

/* Ensure the new Piano Roll button in nav-grid looks like a button */
#open-piano-roll-btn img {
  display: block;
  transition: transform 0.2s ease;
}
#open-piano-roll-btn:hover img {
  transform: scale(1.1);
}

.piano-roll-controls select option {
    color: #1E1E24; 
}




#pr-grid {
    position: relative;
    background-color: var(--timeline-bg-color); /* Use a theme variable for the background */
    
    /* --- The Grid Magic --- */
    --grid-cell-width: 25px;
    --grid-key-height: 20px;
    --beat-width: calc(var(--grid-cell-width) * 4);
    
    --grid-subdivision-color: var(--border-color); /* Lighter lines for subdivisions */
    --grid-beat-color: var(--text-muted-color); /* Darker lines for main beats */
    --grid-key-color: var(--border-color);
    
    background-size: var(--beat-width) var(--grid-key-height);
    background-image:
        repeating-linear-gradient(
            to right,
            var(--grid-subdivision-color) 0 1px,
            transparent 1px var(--grid-cell-width)
        ),
        repeating-linear-gradient(
            to bottom,
            var(--grid-key-color) 0 1px,
            transparent 1px var(--grid-key-height)
        ),
        repeating-linear-gradient(
            to right,
            var(--grid-beat-color) 0 1px,
            transparent 1px var(--beat-width)
        );
}

/* --- FINAL Style for standout "Generate Beat" button --- */
#generate-beat-btn {
  /* A cool, electric blue-to-purple gradient */
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #4f46e5);
  background-size: 200% 100%;
  flex-shrink: 0;
  color: white;
  font-weight: bold;

  /* Remove the default border and use a pseudo-element for a glowing one */
  border: none;
  position: relative;
  overflow: hidden;

  /* Apply the new shimmer animation */
  animation: background-shimmer 3s infinite linear;
}

/* We use ::before to create the animated glowing border effect */
#generate-beat-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* This gradient will act as our moving border/glow */
  background: linear-gradient(90deg, transparent, #a78bfa, transparent);
  background-size: 50% 500%;
  background-repeat: no-repeat;
  
  /* Apply the border animation */
  animation: border-shimmer 3s infinite linear;
}

/* Keyframes for the background shimmer */
@keyframes background-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* Keyframes for the border/glow shimmer */
@keyframes border-shimmer {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}

/* Custom hover effect */
#generate-beat-btn:hover:not(:disabled) {
  transform: scale(1.03); /* A more subtle enlargement */
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
  cursor: pointer;
}