/* ─────────────────────────────────────────
   Hullwave · Rebuilt layout + aesthetics
   (Reordered only — styles unchanged)
   ───────────────────────────────────────── */

/* =========================================================
   1) Root variables
   ========================================================= */
   :root{
    /* leave room for your welded top/bottom bars */
    --hw-safe-top: 64px;
    --hw-safe-bottom: 48px;
  
    --hw-bg: #05030b;
    --hw-panel: rgba(15, 15, 25, 0.96);
    --hw-panel-2: rgba(10, 10, 20, 0.92);
    --hw-ink: #f5f5f5;
    --hw-muted: rgba(245,245,245,0.72);
  
    --hw-stroke: rgba(255,255,255,0.08);
    --hw-stroke-2: rgba(255,255,255,0.12);
  
    --hw-radius: 14px;
    --hw-shadow: 0 18px 55px rgba(0,0,0,0.55);
  }
  
  /* =========================================================
     2) Base
     ========================================================= */

    .hullwave-body{
        margin: 0;
        padding: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--hw-bg);
        color: var(--hw-ink);
    
        width: 100%;
    
        /* ✅ critical: prevent any global "body { display:flex }" from collapsing the app */
        display: block;
    }
  
  
      .hullwave-app {
        /* ✅ this is the critical fix */
        width: 100%;
        max-width: 1400px;
      
        margin: 0 auto;
      
        /* keep your existing padding */
        padding-left: 16px;
        padding-right: 16px;
        padding-top: calc(16px + var(--hw-safe-top));
        padding-bottom: calc(16px + var(--hw-safe-bottom));
      
        box-sizing: border-box;
      }
  
  /* =========================================================
     3) Fixed bars (Support / Hamburger / Privacy)
     ========================================================= */
  
  /* ---------- TOP: Support Bar (fixed) ---------- */
  #supportBar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    background-color: #172530;
    color: #d0d0d0;
    padding: 10px 20px;
    font-size: 14px;
  
    z-index: 9999;
  }
  
  #supportBar a{
    text-decoration: none;
    color: #d0d0d0;
    font-weight: bold;
  }
  
  #supportBar a:hover{
    color: #f0f0f0;
  }
  
  .support-link-wrapper{
    flex: 1;
    text-align: center;
  }
  
  .theme-switch-wrapper{
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
  }
  
  #toggleIcon{
    max-height: 30px;
    cursor: pointer;
  }
  
  /* =========================================================
     Hullwave: Hamburger Menu
     ========================================================= */
  #hamburgerMenu{
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 10000;
  }
  
  #hamburgerIcon{
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  
  #menuDropdown{
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
  
    width: 250px;
    background-color: #172530;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  
    z-index: 10001;
  }
  
  #menuDropdown.show{
    display: block;
  }
  
  #menuDropdown ul{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  #menuDropdown li{
    padding: 10px 20px;
    border: 1px solid #888;
    color: white;
  }
  
  #menuDropdown li:last-child{
    border-bottom: none;
  }
  
  /* Skýr had a special rule for nth-child(5); it’s brittle if you change menu items.
     If you still want a “separator” style, consider giving that <li> a class instead. */
  /* #menuDropdown li:nth-child(5){
    color: white;
    font-style: italic;
  } */
  
  #menuDropdown a{
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
  }
  
  #menuDropdown img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  
  /* ---------- BOTTOM: Privacy & Ethics Bar (fixed) ---------- */
  #privacyEthicsLink{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  
    text-align: center;
    padding: 10px 0;
    background-color: #172530;
    color: #d0d0d0;
    font-size: 14px;
  
    z-index: 9999;
  }
  
  #privacyEthicsLink a{
    text-decoration: none;
    color: #d0d0d0;
    font-weight: bold;
  }
  
  #privacyEthicsLink a:hover{
    color: #d0d0d0;
  }
  
  /* ---------- Mobile tweaks (optional) ---------- */
  @media (max-width: 480px){
    #supportBar{
      padding: 10px 12px;
      font-size: 13px;
    }
    #menuDropdown{
      width: 240px;
    }
  }
  
  /* =========================================================
     4) Header
     ========================================================= */
  .hullwave-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
  }
  
  .hw-logo{
    width: min(560px, 55vw);
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,0.55));
    opacity: 0.95;
  }
  
  .hw-title {
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: 0.2px;
  }
  
  .hw-subtitle {
    opacity: 0.75;
    font-size: 0.92rem;
    line-height: 1.25rem;
    margin-top: 2px;
  }
  
  /* =========================================================
     5) Panels
     ========================================================= */
  .hw-panel {
    background: var(--hw-panel);
    border-radius: var(--hw-radius);
    padding: 14px 16px 16px;
    box-shadow: var(--hw-shadow);
    border: 1px solid var(--hw-stroke);
  }
  
  .hw-panel-primary{
    background: linear-gradient(180deg, rgba(22,22,34,0.96), rgba(14,14,24,0.96));
    border: 1px solid rgba(255,255,255,0.10);
  }
  
  .hw-panel-title {
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
  }
  
  .hw-panel-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 10px;
  }
  
  .hw-muted{
    font-size: 0.85rem;
    opacity: 0.75;
  }
  .hw-muted-tight{ margin-top: 2px; }
  
  /* =========================================================
     6) Layout: frames
     ========================================================= */
     .hw-layout{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
          "primary"
          "secondary";
        gap: 14px;
      
        justify-items: stretch;
        align-items: stretch;
      }
      
  
      #hw-frame-primary{
        grid-area: primary;
        width: 100%;
        justify-self: stretch;
      }
      
  #hw-frame-secondary{ grid-area: secondary; }
  
  /* =========================================================
     7) Fields
     ========================================================= */
  .hw-field { margin-bottom: 10px; }
  
  .hw-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 520;
    margin-bottom: 4px;
  }
  
  .hw-help {
    font-size: 0.75rem;
    opacity: 0.75;
  }
  
  .hw-help.center { text-align: center; }
  
  .hw-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 8px;
  }
  
  .hw-row-top { align-items: flex-start; }
  
  .hw-row-between{
    justify-content: space-between;
    align-items: center;
  }
  
  .hw-field-small { flex: 0 0 160px; }
  .hw-flex-grow { flex: 1 1 auto; }
  
  .hw-range-value {
    font-size: 0.8rem;
    margin-top: 2px;
    opacity: 0.9;
  }
  
  /* =========================================================
     8) Inputs
     ========================================================= */
  input[type="text"],
  input[type="number"],
  select,
  textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(5, 5, 12, 0.88);
    color: inherit;
    font-family: inherit;
    font-size: 0.92rem;
  }
  
  textarea { resize: vertical; }
  input[type="range"] { width: 100%; }
  
  /* File input styling (keeps your same input element) */
  input[type="file"]{
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.22);
    background: rgba(5,5,10,0.55);
    color: rgba(245,245,245,0.85);
  }
  
  /* =========================================================
     9) Buttons
     ========================================================= */
  .hw-btn {
    border-radius: 999px;
    padding: 8px 14px;
    border: none;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.15s;
  }
  
  .hw-btn-primary {
    background: linear-gradient(135deg, #ff6b3c, #ffb347);
    color: #05030b;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 26px rgba(0, 0, 0, 0.65);
  }
  
  .hw-btn-secondary {
    background: rgba(40, 40, 60, 0.92);
    color: #f5f5f5;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
  }
  
  .hw-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.70);
  }
  
  .hw-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75);
  }
  
  .hw-btn-full { width: 100%; margin-top: 6px; }
  
  .hw-btn--sm {
    padding: 6px 12px;
    font-size: 0.84rem;
  }
  
  /* Primary action strip */
  .hw-primary-actions{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* =========================================================
     10) Tabs
     ========================================================= */
  .hw-divider{
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 10px 0 12px;
  }
  
  .hw-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding-bottom: 6px;
  }
  
  .hw-tab {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    opacity: 0.9;
  }
  
  .hw-tab-active {
    border-bottom-color: #ff8547;
    color: #ffb47c;
    opacity: 1;
  }
  
  .hw-tab-panel { display: none; }
  .hw-tab-panel-active { display: block; }
  
  /* ─────────────────────────────
     Main Tabs (Text-to-Music / Settings / Library)
     Separate from Settings' internal .hw-tabs system
     ───────────────────────────── */
  .hw-main-tabs{
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding-bottom: 6px;
  }
  
  .hw-main-tab{
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.90rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    opacity: 0.88;
  }
  
  .hw-main-tab-active{
    border-bottom-color: #ff8547;
    color: #ffb47c;
    opacity: 1;
  }
  
  .hw-main-panel{ display: none; }
  .hw-main-panel-active{ display: block; }
  
  /* Optional: keep the secondary panel from getting insanely tall */
  #hw-frame-secondary{
    /* lets internal areas scroll if needed */
  }
  
  #hw-frame-secondary .hw-gallery{
    max-height: 520px; /* keep your existing library behavior */
  }
  
  /* =========================================================
     11) Checkboxes / radios
     ========================================================= */
  .hw-checkbox-inline {
    font-size: 0.82rem;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  
  .hw-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
  }
  
  .hw-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .hw-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.86rem;
  }
  
  /* =========================================================
     12) Accordion
     ========================================================= */
  .hw-accordion {
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--hw-panel-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .hw-accordion > summary {
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 0.92rem;
    font-weight: 650;
  }
  
  .hw-accordion-body {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  
/* =========================================================
   13) Player (clean, single source of truth)
   ========================================================= */

   .hw-player{
    width: 100%;
    min-width: 0;
  }
  
  /* filename + download */
  .hw-player-row{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  
  .hw-player-filename{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .hw-player-actions{
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  
  /* centered play row */
  .hw-player-controls{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 10px;
  }
  
  #playBtn{
    width: min(560px, 90%);
    max-width: 620px;
    text-align: center;
  }
  
  /* waveform */
  .hw-player-wave{
    width: 100%;
    height: 140px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(5, 5, 10, 0.65);
    overflow: hidden;
  }
  
  .hw-waveform-canvas{
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    touch-action: none;
  }
  
  
  /* =========================================================
     14) Generate ⇄ Progress slot
     ========================================================= */
  .hw-generate-slot{
    margin-top: 12px;
  }
  
  /* When progress shows, button hides (JS will toggle .hw-hidden) */
  #hw-generate-btn.hw-hidden{
    display: none !important;
  }
  
  /* Progress bar */
  .hw-progress { margin-top: 12px; }
  
  .hw-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
  }
  
  .hw-progress-label { font-size: 0.9rem; opacity: 0.9; }
  .hw-progress-pct   { font-size: 0.82rem; opacity: 0.8; white-space: nowrap; }
  
  .hw-progress-track {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.08);
  }
  
  .hw-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b3c, #ffb347);
    transition: width 0.15s linear;
  }
  
  /* =========================================================
     15) Gallery
     ========================================================= */
  .hw-gallery-actions{
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }
  
  .hw-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 520px;
    overflow: auto;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(5, 5, 10, 0.65);
  }
  
  .hw-file {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(25, 25, 40, 0.65);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
  }
  
  .hw-file__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
  }
  
  .hw-file__meta {
    font-size: 0.78rem;
    opacity: 0.75;
    white-space: nowrap;
  }
  
  .hw-file__actions {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
  }
  
  .hw-status {
    font-size: 0.85rem;
    margin-top: 10px;
    min-height: 16px;
    opacity: 0.9;
  }
  
  .hw-status--pending { color: #ffd27f; }
  .hw-status--error   { color: #ff8282; }
  .hw-status--success { color: #9fffa5; }
  
  .hw-hidden { display: none !important; }
  
  /* =========================================================
     16) Params JSON viewer
     ========================================================= */
  .hw-code-block{
    margin: 10px 0 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(5, 5, 10, 0.72);
    max-height: 420px;
    overflow: auto;
  }
  
  .hw-code-block code{
    display: block;
    white-space: pre;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.82rem;
    line-height: 1.25rem;
    color: rgba(245,245,245,0.92);
  }
  
  /* =========================================================
     17) Responsive (tablet)
     ========================================================= */
     @media (max-width: 1024px) {
        :root{
          --hw-safe-top: 56px;
          --hw-safe-bottom: 72px;
        }
      
        .hullwave-header{
          grid-template-columns: 1fr;
        }
      
        .hw-logo{
          width: min(520px, 85vw);
          margin: 0 auto;
        }
      
        /* FIX: keep Hullwave’s real 2-panel grid on narrow screens */
        .hw-layout{
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas:
            "primary"
            "secondary";
        }
      
        .hw-player-filename{ max-width: 58%; }
        .hw-player-wave{ height: 130px; }
      }
      
  
  /* =========================================================
     18) MOBILE + OVERFLOW FIX PACK
     (this must be LAST)
     ========================================================= */
  
  /* 1) Stop mystery horizontal scroll */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* 2) Critical: make grid/flex children allowed to shrink */
  .hullwave-app,
  .hullwave-main,
  .hw-layout,
  .hw-panel,
  .hw-main-panels,
  .hw-main-panel,
  .hw-player,
  .hw-player-row,
  .hw-player-wave,
  .hw-gallery,
  .hw-file,
  .hw-row,
  .hw-field,
  textarea,
  input,
  select {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  
  
  /* If any long tokens exist (filenames, JSON, etc.) */
  .hw-file__name,
  .hw-player-filename,
  .hw-code-block code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  
  /* 3) Make main layout never exceed viewport */
  .hw-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  
  /* 4) Tabs: allow scroll instead of forcing width */
  .hw-main-tabs,
  .hw-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .hw-main-tabs::-webkit-scrollbar,
  .hw-tabs::-webkit-scrollbar {
    display: none;
  }
  
  /* 5) Keep fixed bars from causing layout jitter on tiny screens */
  #supportBar {
    padding-left: 12px;
    padding-right: 12px;
  }
  #privacyEthicsLink {
    padding-left: 10px;
    padding-right: 10px;
  }
  
/* =========================================================
   PHONE LAYOUT (<= 640px) — player width first
   ========================================================= */
   @media (max-width: 640px){

    .hw-player-row{
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: stretch;
    }
  
    .hw-player-actions{
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }
  
    #playBtn{
      width: 100%;
      max-width: 360px;
    }
  
    #hw-download-btn{
      width: 100%;
      max-width: 360px;
      text-align: center;
    }
  
    .hw-player-wave{
      height: 120px;
    }
  }
  
  
  /* =========================================================
     TINY PHONES (<= 380px)
     ========================================================= */
  @media (max-width: 380px){
    .hw-title{ font-size: 1.1rem; }
    .hw-subtitle{ font-size: 0.86rem; }
    .hw-panel{ padding: 12px; }
  }