/* Global Styles 01*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121110;  /* From first file (#121110) */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
  }
  
  /* Central Container for Mimic Page */
  .central-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  
  /* Top Section: Logo and Waveform Stack */
  .top-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 900px;
    margin-bottom: 20px;
  }
  
  .logo-container {
    width: 400px;
    height: 400px;
    margin-right: 20px;
  }
  
  .logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .waveform-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  
  .waveform-box {
    position: relative;
    background: #222;
    width: 100%;
    height: 200px;  /* Desktop height */
    border: 1px solid silver;
    box-sizing: border-box;
  }

    /* Keep canvases pixel-perfect and aligned */
  .waveform-box canvas {
    display: block;
  }

  
  .waveform-label {
    position: absolute;
    top: 2px;
    left: 4px;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    font-size: 0.9em;
    border: 1px solid silver;
    border-radius: 3px;
  }
  
  /* Custom File Upload Button */
  .custom-file-upload {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #222;
    color: silver;
    border: 1px solid silver;
    border-radius: 4px;
  }
  
  /* Slider Controls */
  .slider-controls {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .slider-controls .control {
    margin: 10px 0;
    text-align: center;
  }
  
  .slider-controls label {
    margin-bottom: 5px;
    font-size: 1em;
  }
  
  .slider-controls input[type="range"] {
    width: 150px;
  }
  
  /* Text Control (Textarea and Button) */
  .text-control {
    width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .text-control textarea {
    flex: 1;
    padding: 10px;
    font-size: 1em;
    border: 1px solid silver;
    border-right: none;
    border-radius: 4px 0 0 4px;
    background-color: #222;
    color: #fff;
    height: 200px;
    resize: none;
  }
  
  .text-control button {
    padding: 10px 20px;
    font-size: 1em;
    border: 1px solid silver;
    border-radius: 0 4px 4px 0;
    background-color: #222;
    color: #fff;
    cursor: pointer;
  }

  
  
  /* Player Controls in Waveform Box */
  .play-control {
    position: absolute;
    top: 2px;
    right: 4px;
    background: none;
    border: none;
    color: silver;
    font-size: 1.2em;
    cursor: pointer;
  }
  

  

  /* Meta lines inside waveform boxes */
.waveform-meta {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none; /* clicks pass through */
}

.fileline {
  font-size: 12px;
  color: #bbb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statusline {
  font-size: 12px;
  color: #aaa;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure canvases sit behind labels/buttons/meta cleanly */
.waveform-box canvas {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.waveform-box .waveform-label,
.waveform-box .play-control,
.waveform-box .waveform-meta {
  z-index: 1;
  position: absolute;
}
.waveform-box .waveform-label { top: 2px; left: 4px; }
.waveform-box .play-control    { top: 2px; right: 4px; }

  
  /* Sidebar Styles */
  :root {
    /* tweak this to change how far past the edge it hides */
    --sidebar-hide-offset: 20px;
  }
  
  /* Sidebar (transform-based slide) */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;                         /* anchor to the edge */
    width: 250px;
    height: 100%;
    box-sizing: border-box;          /* include padding in width */
    background: #000 !important;
    color: #fff !important;
    z-index: 2000;
    overflow-y: auto;
    padding-top: 40px;
    padding-left: 10px;
  
    /* slide fully offscreen + extra offset so nothing peeks */
    transform: translateX(calc(-100% - var(--sidebar-hide-offset)));
    transition: transform 0.3s ease-in-out;
  }
  
  #sidebar.active {
    transform: translateX(0);
  }
  
  /* Keep your existing inner styles */
  #sidebar .sidebar-header { margin-bottom: 10px; }
  #sidebar ul { list-style: none; padding: 0; }
  #sidebar li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid silver;
    position: relative;
  }
  #sidebar li a {
    flex: 1;
    text-decoration: none;
    color: silver;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #sidebar li a:hover { color: #fff; text-decoration: none; }
  #sidebar li img { width: 20px; height: 20px; }
  

  
  /* Upload Button in Sidebar */
  #uploadContainer {
    margin-top: 20px;
    text-align: center;
  }
  
  #uploadContainer input[type="file"] {
    width: 100%;
    padding: 5px;
  }

  
  /* ⬇️ Dropdown Menu Box */
  .popup-menu {
    display: none;
    position: absolute;
    right: 10px;
    top: 35px;
    background-color: #222;
    border: 1px solid silver;
    border-radius: 4px;
    z-index: 999;
    min-width: 100px;
  }

  /* ✅ Make it visible when toggled */
  .popup-menu.visible {
    display: block;
  }

  .popup-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
  }

  .popup-option:hover {
    background-color: #444;
  }
  
  
  /* Privacy & Ethics Bar */
  #privacyEthicsLink {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background-color: #172530;
    color: #fff;
    font-size: 14px;
    text-align: center;
    z-index: 1000; /* Ensures it remains above other elements */
  }

  
  #privacyEthicsLink a {
    text-decoration: none;
    color: silver;
    font-weight: bold;
  }
  
  #privacyEthicsLink a:hover {
    color: #aaa;
  }
  
  
  /* Support Bar (from second file) */
  #supportBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #172530;
    color: #ffdff7;
    padding: 10px 20px;
    font-size: 14px;
    width: 100%;
    margin-bottom: 10px;
  }
  
  #supportBar .support-link-wrapper {
    flex: 1;
    text-align: center;
  }
  
  #supportBar a {
    text-decoration: none;
    color: #ffdff7;
    font-weight: bold;
  }
  
  #supportBar a:hover {
    color: #d4a3cc;
  }
  
  .theme-switch-wrapper {
    flex: 0 0 auto;
    text-align: right;
  }
  
  #toggleIcon {
    max-height: 30px;
    cursor: pointer;
  }


  #hamburgerMenu {
    position: fixed !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 3000;
  }
  
  
  textarea {
    width: 100%;
    height: 80px;
    padding: 10px;
    font-size: 16px;
    background-color: #111018;
    color: white;
    resize: none;
    border: none;
  }
  
  /* Buttons (from second file) */
  button {
    margin-top: 10px;
    padding: 10px;
    background-color: #1e2b57;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #1e2b57;
  }


/* --- Slider visuals (simplified) --- */
.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  width: 100%;
}

.slider-row input[type="range"] {
  flex: 1;
}

.slider-endcap {
  width: 1.2em;
  text-align: center;
  color: #bbb;
  user-select: none;
}

/* Small value badges in labels */
.slider-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid silver;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 0.85em;
}


/* ─────────────────────────────────────────
   Dialogs: Best Results + Tier Upgrade
   (Shared look so they feel identical)
   ───────────────────────────────────────── */

   dialog#bestResultsDialog,
   dialog#tierUpgradeDialog,
   dialog#punctuationKeyDialog {
     border: 1px solid #5b3363;
     border-radius: 10px;
     padding: 16px 18px;
     background: #111018;
     color: #fff;
     max-width: 480px;
   }
   
   dialog::backdrop {
     background: rgba(0, 0, 0, 0.55);
   }
   
   dialog#bestResultsDialog h3,
   dialog#tierUpgradeDialog h3 {
     margin: 0 0 8px;
     color: #ffdff7;
   }
   
   dialog#bestResultsDialog ul,
   dialog#tierUpgradeDialog ul {
     margin: 8px 0 0 18px;
   }
   
   #bestResultsDialog .close-row,
   #tierUpgradeDialog .close-row {
     text-align: right;
     margin-top: 12px;
   }
   
   /* Buttons inside dialogs reuse your global button style,
      but we ensure they’re not tiny. */
   #bestResultsDialog button,
   #tierUpgradeDialog button {
     padding: 6px 14px;
   }
   
   /* Optional: highlight the feature name being blocked */
   .tier-feature-label {
     font-weight: bold;
     color: #ffdff7;
   }
   


  /* ─────────────────────────────────────────
   Word counter under Mimic text box
   ───────────────────────────────────────── */
  .word-counter {
    width: 100%;
    max-width: 900px;
    margin: 4px auto 16px auto;
    font-size: 12px;
    color: #cbd5e1;
    text-align: right;
  }

  .word-counter.over-limit {
    color: #ff6b6b;
  }

  /* Make disabled Generate button look disabled */
  #generateButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }


  
  /* Mobile Adjustments */
  @media (max-width: 768px) {
    .top-section {
      flex-direction: column;
      align-items: center;
    }
    .logo-container {
      width: 100%;
      height: auto;
    }

    .waveform-box {
      width: 100%;
      height: 100px; /* Reduced height for mobile */
    }
    .waveform-container {
      flex-direction: column;
      align-items: center;
    }

    
    .text-control {
      width: 80%;
      flex-direction: column;
    }
    .text-control textarea {
      width: calc(100% - 25px); /* Reduce width by 25px */
      height: 160px; /* Approximately 4 rows high */
      border-radius: 4px;
    }
    .text-control button {
      width: 100%;
      border-radius: 4px;
      margin-top: 10px;
    }
    .slider-controls {
      width: 80%;
      flex-direction: column;
      align-items: center;
    }
    #sidebar {
      width: 80%;
      transform: translateX(calc(-100% - var(--sidebar-hide-offset)));
    }
    #sidebar.active {
      transform: translateX(0);
    }
  }