Implement collapsible sidebar deck and integrate official Resemble.AI mint-teal branding colors

index.html

@@ -7,7 +7,7 @@
     
     <!-- Meta tags for premium look and SEO -->
     <meta name="description" content="Generate highly expressive speech with voice cloning. Powered by LTX-2.3 and Resemble Perth watermarking.">
-    <meta name="theme-color" content="#0a0b10">
+    <meta name="theme-color" content="#07090e">
     
     <!-- Google Fonts: Outfit and Inter -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -16,22 +16,21 @@
     
     <style>
         :root {
-            --bg-color: #06070a;
-            --panel-bg: rgba(13, 15, 24, 0.7);
-            --panel-border: rgba(255, 255, 255, 0.05);
+            --bg-color: #05060a;
+            --panel-bg: rgba(11, 14, 23, 0.75);
+            --sidebar-bg: #0b0e17;
+            --panel-border: rgba(60, 208, 162, 0.08);
             --text-primary: #f8fafc;
             --text-secondary: #94a3b8;
-            --accent-orange: #ff6b35;
-            --accent-orange-hover: #ff8554;
-            --accent-orange-glow: rgba(255, 107, 53, 0.25);
-            --accent-purple: #8b5cf6;
-            --accent-purple-hover: #a78bfa;
-            --accent-purple-glow: rgba(139, 92, 246, 0.2);
+            --accent-mint: #3cd0a2;
+            --accent-mint-hover: #5fe2b9;
+            --accent-mint-glow: rgba(60, 208, 162, 0.2);
+            --accent-dark-slate: #1e293b;
             --accent-green: #10b981;
-            --radius-lg: 20px;
+            --radius-lg: 18px;
             --radius-md: 12px;
             --radius-sm: 8px;
-            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         * {
@@ -46,46 +45,149 @@
             font-family: 'Inter', sans-serif;
             min-height: 100vh;
             line-height: 1.5;
-            overflow-x: hidden;
+            overflow: hidden; /* Sidebar controls scrolling */
             position: relative;
-            display: flex;
-            flex-direction: column;
         }
 
-        /* Modern background radial glows */
+        /* Ambient glowing circles using Resemble AI branding colors */
         body::before {
             content: '';
             position: absolute;
             top: -10%;
-            left: 5%;
-            width: 50%;
-            height: 50%;
-            background: radial-gradient(circle, var(--accent-orange-glow) 0%, transparent 60%);
+            left: 10%;
+            width: 45%;
+            height: 45%;
+            background: radial-gradient(circle, var(--accent-mint-glow) 0%, transparent 60%);
             z-index: -1;
             filter: blur(80px);
             pointer-events: none;
-            opacity: 0.8;
+            opacity: 0.7;
         }
 
         body::after {
             content: '';
             position: absolute;
-            bottom: 5%;
+            bottom: -5%;
             right: 5%;
-            width: 45%;
-            height: 45%;
-            background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 60%);
+            width: 40%;
+            height: 40%;
+            background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 60%);
             z-index: -1;
             filter: blur(80px);
             pointer-events: none;
-            opacity: 0.6;
+            opacity: 0.5;
+        }
+
+        /* Base Page Layout */
+        .app-layout {
+            display: flex;
+            width: 100vw;
+            height: 100vh;
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* ── Collapsible Sidebar ── */
+        .sidebar {
+            width: 360px;
+            height: 100%;
+            background-color: var(--sidebar-bg);
+            border-right: 1px solid var(--panel-border);
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            z-index: 100;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
+            flex-shrink: 0;
+        }
+
+        .sidebar.collapsed {
+            margin-left: -360px;
+            transform: translateX(-100%);
+        }
+
+        .sidebar-header {
+            padding: 20px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+        }
+
+        .sidebar-title {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: #ffffff;
+            letter-spacing: 0.5px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .sidebar-close-btn {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 4px;
+        }
+
+        .sidebar-close-btn:hover {
+            color: #ffffff;
+            transform: scale(1.1);
+        }
+
+        .sidebar-scrollable {
+            flex: 1;
+            overflow-y: auto;
+            padding: 24px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        /* Scrollbar styles for sidebar */
+        .sidebar-scrollable::-webkit-scrollbar {
+            width: 5px;
+        }
+
+        .sidebar-scrollable::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .sidebar-scrollable::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+
+        .sidebar-scrollable::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        /* ── Main Workspace Area ── */
+        .content-area {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            position: relative;
+            transition: var(--transition);
         }
 
-        .container {
+        /* Main Scrollable wrapper */
+        .content-container {
             width: 100%;
-            max-width: 1200px;
+            max-width: 840px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 24px 20px 60px 20px;
             display: flex;
             flex-direction: column;
             gap: 24px;
@@ -98,6 +200,7 @@
             text-align: center;
             padding: 20px 0 10px 0;
             gap: 12px;
+            position: relative;
         }
 
         .logo-area {
@@ -118,38 +221,49 @@
 
         h1 {
             font-family: 'Outfit', sans-serif;
-            font-size: 2.5rem;
+            font-size: 2.4rem;
             font-weight: 800;
-            background: linear-gradient(135deg, #ffffff 40%, #ffa580 80%, #cfa0f7 100%);
+            background: linear-gradient(135deg, #ffffff 40%, var(--accent-mint) 80%, #76ecd4 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             letter-spacing: -0.5px;
         }
 
+        .brand-badge {
+            font-size: 0.75rem;
+            font-weight: 600;
+            background: rgba(60, 208, 162, 0.1);
+            color: var(--accent-mint);
+            border: 1px solid rgba(60, 208, 162, 0.2);
+            padding: 3px 8px;
+            border-radius: 30px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
         .subtitle {
-            font-size: 1rem;
+            font-size: 0.95rem;
             color: var(--text-secondary);
             font-weight: 400;
-            max-width: 500px;
         }
 
         .ltx-banner {
-            background: rgba(22, 28, 45, 0.4);
+            background: rgba(22, 28, 45, 0.3);
             border: 1px solid var(--panel-border);
-            border-left: 3px solid var(--accent-orange);
+            border-left: 3px solid var(--accent-mint);
             border-radius: var(--radius-md);
             padding: 12px 18px;
             color: #cbd5e1;
-            font-size: 0.85rem;
-            line-height: 1.6;
-            max-width: 800px;
+            font-size: 0.82rem;
+            line-height: 1.5;
             text-align: left;
-            backdrop-filter: blur(12px);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            width: 100%;
         }
 
         .ltx-banner a {
-            color: #ff9a6c;
+            color: var(--accent-mint);
             font-weight: 600;
             text-decoration: none;
             transition: var(--transition);
@@ -160,76 +274,44 @@
             text-decoration: underline;
         }
 
-        /* 2-Column Responsive Workspace */
-        main {
-            display: grid;
-            grid-template-columns: 1.2fr 1fr;
-            gap: 24px;
-            align-items: start;
-        }
-
-        @media (max-width: 960px) {
-            main {
-                grid-template-columns: 1fr;
-            }
-            h1 {
-                font-size: 2rem;
-            }
-            .logo-emoji {
-                font-size: 1.8rem;
-            }
+        /* Sliding Toggle Controls Button */
+        .btn-toggle-sidebar {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--panel-border);
+            color: #ffffff;
+            font-size: 0.85rem;
+            font-weight: 600;
+            padding: 10px 16px;
+            border-radius: 30px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: var(--transition);
+            outline: none;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         }
 
-        @media (max-width: 576px) {
-            .container {
-                padding: 12px;
-                gap: 16px;
-            }
-            header {
-                padding: 10px 0;
-            }
-            .ltx-banner {
-                font-size: 0.8rem;
-                padding: 10px 14px;
-            }
+        .btn-toggle-sidebar:hover {
+            background: rgba(60, 208, 162, 0.05);
+            border-color: var(--accent-mint);
+            transform: translateY(-1px);
         }
 
-        .card {
+        /* ── Modern Script Panels (Main Area) ── */
+        .main-panel {
             background: var(--panel-bg);
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-lg);
             padding: 24px;
             backdrop-filter: blur(20px);
-            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
+            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
             display: flex;
             flex-direction: column;
             gap: 20px;
             transition: var(--transition);
         }
 
-        .card:hover {
-            border-color: rgba(255, 255, 255, 0.08);
-        }
-
-        @media (max-width: 576px) {
-            .card {
-                padding: 18px;
-                gap: 16px;
-            }
-        }
-
-        .card-header {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.25rem;
-            font-weight: 600;
-            color: #ffffff;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            padding-bottom: 12px;
-        }
-
         .form-group {
             display: flex;
             flex-direction: column;
@@ -237,8 +319,8 @@
         }
 
         .form-label {
-            font-size: 0.8rem;
-            font-weight: 600;
+            font-size: 0.78rem;
+            font-weight: 700;
             text-transform: uppercase;
             letter-spacing: 0.8px;
             color: var(--text-secondary);
@@ -249,7 +331,7 @@
 
         .label-badge {
             font-size: 0.75rem;
-            color: var(--accent-orange);
+            color: var(--accent-mint);
             text-transform: none;
             font-weight: 400;
             letter-spacing: 0;
@@ -257,61 +339,56 @@
 
         .textarea-custom {
             width: 100%;
-            background: rgba(10, 11, 18, 0.7);
+            background: rgba(5, 7, 12, 0.8);
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 14px 16px;
+            padding: 16px;
             color: var(--text-primary);
             font-family: 'Inter', sans-serif;
-            font-size: 0.95rem;
-            line-height: 1.5;
+            font-size: 1rem;
+            line-height: 1.6;
             resize: vertical;
-            min-height: 120px;
+            min-height: 140px;
             outline: none;
             transition: var(--transition);
         }
 
         .textarea-custom:focus {
-            border-color: var(--accent-orange);
-            box-shadow: 0 0 12px var(--accent-orange-glow);
-            background: rgba(10, 11, 18, 0.9);
+            border-color: var(--accent-mint);
+            box-shadow: 0 0 15px var(--accent-mint-glow);
+            background: rgba(5, 7, 12, 0.95);
         }
 
-        /* Modernized Flat Upload Block */
+        /* Reference Uploader Inside Sidebar */
         .upload-zone {
-            border: 2px dashed rgba(255, 255, 255, 0.1);
+            border: 2px dashed rgba(60, 208, 162, 0.2);
             border-radius: var(--radius-md);
-            padding: 20px;
+            padding: 18px;
             text-align: center;
             cursor: pointer;
-            background: rgba(255, 255, 255, 0.01);
+            background: rgba(60, 208, 162, 0.01);
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 8px;
+            gap: 6px;
             transition: var(--transition);
-            min-height: 100px;
+            min-height: 90px;
             justify-content: center;
         }
 
         .upload-zone:hover, .upload-zone.dragover {
-            border-color: var(--accent-purple);
-            background: rgba(139, 92, 246, 0.04);
+            border-color: var(--accent-mint);
+            background: rgba(60, 208, 162, 0.04);
         }
 
         .upload-icon {
-            font-size: 1.8rem;
-            color: var(--text-secondary);
+            font-size: 1.6rem;
+            color: var(--accent-mint);
             transition: var(--transition);
         }
 
-        .upload-zone:hover .upload-icon {
-            transform: translateY(-2px);
-            color: var(--accent-purple);
-        }
-
         .upload-text {
-            font-size: 0.85rem;
+            font-size: 0.8rem;
             color: var(--text-secondary);
         }
 
@@ -320,17 +397,12 @@
             font-weight: 500;
         }
 
-        .hidden-input {
-            display: none;
-        }
-
-        /* Styled Uploaded Capsule */
         .file-capsule {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background: rgba(139, 92, 246, 0.08);
-            border: 1px solid rgba(139, 92, 246, 0.2);
+            background: rgba(60, 208, 162, 0.06);
+            border: 1px solid rgba(60, 208, 162, 0.2);
             padding: 10px 14px;
             border-radius: var(--radius-md);
             width: 100%;
@@ -340,7 +412,7 @@
             display: flex;
             align-items: center;
             gap: 10px;
-            font-size: 0.85rem;
+            font-size: 0.82rem;
             font-weight: 500;
             overflow: hidden;
             white-space: nowrap;
@@ -351,7 +423,7 @@
             background: none;
             border: none;
             color: var(--text-secondary);
-            font-size: 1rem;
+            font-size: 0.95rem;
             cursor: pointer;
             transition: var(--transition);
             padding: 2px;
@@ -365,55 +437,27 @@
             transform: scale(1.1);
         }
 
-        /* Modern Slider Accoridon Panels */
-        .settings-accordion {
-            background: rgba(255, 255, 255, 0.01);
-            border: 1px solid var(--panel-border);
-            border-radius: var(--radius-md);
-            overflow: hidden;
-        }
-
-        .accordion-header {
-            background: none;
-            border: none;
-            padding: 14px 18px;
-            color: #ffffff;
-            font-weight: 600;
-            font-size: 0.9rem;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            outline: none;
-            transition: var(--transition);
-        }
-
-        .accordion-header:hover {
-            background: rgba(255, 255, 255, 0.03);
-        }
-
-        .accordion-icon {
-            font-size: 0.75rem;
-            transition: var(--transition);
-            color: var(--text-secondary);
-        }
-
-        .accordion-body {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease-out;
-            padding: 0 18px;
+        /* Modernized Sidebar Dashboard Items */
+        .settings-block {
             display: flex;
             flex-direction: column;
             gap: 16px;
+            background: rgba(255, 255, 255, 0.01);
+            border: 1px solid rgba(255, 255, 255, 0.03);
+            padding: 16px;
+            border-radius: var(--radius-md);
         }
 
-        .accordion-body.open {
-            max-height: 520px;
-            padding-bottom: 20px;
-            border-top: 1px solid rgba(255, 255, 255, 0.03);
-            padding-top: 16px;
+        .settings-block-title {
+            font-family: 'Outfit', sans-serif;
+            font-size: 0.85rem;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+            text-transform: uppercase;
+            color: #ffffff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+            padding-bottom: 8px;
+            margin-bottom: 4px;
         }
 
         .slider-group {
@@ -431,18 +475,17 @@
         }
 
         .slider-value {
-            color: #ffffff;
+            color: var(--accent-mint);
             font-weight: 700;
             font-family: monospace;
         }
 
-        /* Custom Slider Tracks */
         input[type="range"] {
             -webkit-appearance: none;
             width: 100%;
-            height: 5px;
+            height: 4px;
             background: rgba(255, 255, 255, 0.06);
-            border-radius: 3px;
+            border-radius: 2px;
             outline: none;
             cursor: pointer;
         }
@@ -452,8 +495,8 @@
             width: 14px;
             height: 14px;
             border-radius: 50%;
-            background: var(--accent-orange);
-            box-shadow: 0 0 8px var(--accent-orange-glow);
+            background: var(--accent-mint);
+            box-shadow: 0 0 8px var(--accent-mint-glow);
             transition: var(--transition);
         }
 
@@ -462,7 +505,7 @@
             background: #ffffff;
         }
 
-        /* Seed Controls */
+        /* Seed Elements */
         .seed-row {
             display: flex;
             gap: 8px;
@@ -471,51 +514,51 @@
 
         .input-seed {
             flex: 1;
-            background: rgba(10, 11, 18, 0.7);
-            border: 1px solid var(--panel-border);
+            background: rgba(5, 7, 12, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.04);
             border-radius: var(--radius-sm);
-            padding: 10px 14px;
+            padding: 8px 12px;
             color: var(--text-primary);
             font-family: monospace;
             outline: none;
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             transition: var(--transition);
-            height: 40px;
+            height: 38px;
         }
 
         .input-seed:focus {
-            border-color: var(--accent-orange);
+            border-color: var(--accent-mint);
         }
 
         .btn-seed-random {
             background: rgba(255, 255, 255, 0.03);
-            border: 1px solid var(--panel-border);
+            border: 1px solid rgba(255, 255, 255, 0.04);
             border-radius: var(--radius-sm);
             color: var(--text-primary);
-            height: 40px;
-            width: 40px;
+            height: 38px;
+            width: 38px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: var(--transition);
-            font-size: 0.95rem;
+            font-size: 0.9rem;
         }
 
         .btn-seed-random:hover {
-            background: rgba(255, 255, 255, 0.08);
-            border-color: rgba(255, 255, 255, 0.15);
+            background: rgba(60, 208, 162, 0.05);
+            border-color: var(--accent-mint);
         }
 
-        /* Premium Floating Generate Button */
+        /* Glowing Resemble Green Button */
         .btn-generate {
-            background: linear-gradient(135deg, var(--accent-orange) 0%, #ff8e53 100%);
+            background: linear-gradient(135deg, var(--accent-mint) 0%, #2ac596 100%);
             border: none;
             border-radius: var(--radius-md);
-            color: #ffffff;
+            color: #07090e;
             font-family: 'Outfit', sans-serif;
             font-size: 1.05rem;
-            font-weight: 700;
+            font-weight: 800;
             padding: 14px;
             cursor: pointer;
             transition: var(--transition);
@@ -523,13 +566,15 @@
             align-items: center;
             justify-content: center;
             gap: 10px;
-            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.2);
+            box-shadow: 0 6px 20px var(--accent-mint-glow);
             min-height: 48px;
+            letter-spacing: 0.3px;
         }
 
         .btn-generate:hover:not(:disabled) {
             transform: translateY(-1.5px);
-            box-shadow: 0 10px 25px rgba(255, 107, 53, 0.35);
+            box-shadow: 0 10px 25px rgba(60, 208, 162, 0.4);
+            background: linear-gradient(135deg, var(--accent-mint-hover) 0%, var(--accent-mint) 100%);
         }
 
         .btn-generate:active:not(:disabled) {
@@ -537,15 +582,15 @@
         }
 
         .btn-generate:disabled {
-            background: #1b1c26;
-            color: #4e526a;
+            background: #161a24;
+            color: #3b4255;
             cursor: not-allowed;
             box-shadow: none;
         }
 
-        /* Right Panel: Output & Controls */
+        /* ── Output Lounge (Visual Player Deck) ── */
         .output-wrapper {
-            background: rgba(10, 11, 18, 0.5);
+            background: rgba(5, 7, 12, 0.5);
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
             padding: 20px;
@@ -553,7 +598,7 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            min-height: 160px;
+            min-height: 140px;
             position: relative;
         }
 
@@ -569,13 +614,14 @@
         .empty-icon {
             font-size: 2.2rem;
             opacity: 0.4;
+            color: var(--accent-mint);
         }
 
         .empty-text {
             font-size: 0.85rem;
         }
 
-        /* Highly Responsive Audio Player Layout */
+        /* Glowing Custom Player Layout */
         .audio-player {
             width: 100%;
             display: flex;
@@ -585,13 +631,13 @@
 
         .visualizer-box {
             width: 100%;
-            height: 50px;
-            background: linear-gradient(90deg, rgba(139, 92, 246, 0.04) 0%, rgba(255, 107, 53, 0.04) 100%);
+            height: 44px;
+            background: linear-gradient(90deg, rgba(60, 208, 162, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
             border-radius: var(--radius-sm);
             display: flex;
             align-items: center;
             justify-content: center;
-            border: 1px solid rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(60, 208, 162, 0.04);
             overflow: hidden;
         }
 
@@ -604,8 +650,8 @@
 
         .wave-bar {
             width: 3px;
-            height: 6px;
-            background: var(--accent-purple);
+            height: 5px;
+            background: var(--accent-mint);
             border-radius: 1px;
             transition: var(--transition);
         }
@@ -615,14 +661,14 @@
         }
 
         @keyframes playWave {
-            0% { height: 6px; }
-            100% { height: 32px; }
+            0% { height: 5px; }
+            100% { height: 28px; }
         }
 
-        .wave-bar:nth-child(2n) { background: var(--accent-orange); animation-delay: 0.15s; }
+        .wave-bar:nth-child(2n) { background: #5fe2b9; animation-delay: 0.15s; }
         .wave-bar:nth-child(3n) { animation-delay: 0.3s; }
         .wave-bar:nth-child(4n) { animation-delay: 0.45s; }
-        .wave-bar:nth-child(5n) { background: var(--accent-purple); animation-delay: 0.6s; }
+        .wave-bar:nth-child(5n) { background: var(--accent-mint); animation-delay: 0.6s; }
 
         .player-row {
             display: flex;
@@ -661,12 +707,18 @@
         }
 
         .time-lbl {
-            font-size: 0.75rem;
+            font-size: 0.72rem;
             color: var(--text-secondary);
             font-family: monospace;
             min-width: 32px;
         }
 
+        /* Secondary progress slider bar track styling */
+        .progress-box input[type="range"]::-webkit-slider-thumb {
+            background: #ffffff;
+            box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
+        }
+
         .deck-footer {
             display: flex;
             align-items: center;
@@ -682,15 +734,19 @@
             display: flex;
             align-items: center;
             gap: 6px;
-            max-width: 100px;
+            max-width: 90px;
             flex-shrink: 0;
         }
 
         .vol-icon {
-            font-size: 0.85rem;
+            font-size: 0.8rem;
             color: var(--text-secondary);
         }
 
+        .vol-slider input[type="range"]::-webkit-slider-thumb {
+            background: var(--text-secondary);
+        }
+
         .speed-deck {
             display: flex;
             align-items: center;
@@ -699,10 +755,10 @@
 
         .btn-speed {
             background: rgba(255, 255, 255, 0.02);
-            border: 1px solid var(--panel-border);
+            border: 1px solid rgba(255, 255, 255, 0.04);
             border-radius: 6px;
             color: var(--text-secondary);
-            font-size: 0.7rem;
+            font-size: 0.68rem;
             font-weight: 600;
             padding: 3px 6px;
             cursor: pointer;
@@ -710,9 +766,9 @@
         }
 
         .btn-speed.active, .btn-speed:hover {
-            background: rgba(255, 255, 255, 0.08);
-            color: #ffffff;
-            border-color: rgba(255, 255, 255, 0.2);
+            background: rgba(60, 208, 162, 0.06);
+            color: var(--accent-mint);
+            border-color: rgba(60, 208, 162, 0.2);
         }
 
         .btn-download-wav {
@@ -720,7 +776,7 @@
             border: 1px solid var(--panel-border);
             border-radius: var(--radius-sm);
             color: #ffffff;
-            font-size: 0.8rem;
+            font-size: 0.78rem;
             font-weight: 600;
             padding: 6px 12px;
             text-decoration: none;
@@ -731,8 +787,9 @@
         }
 
         .btn-download-wav:hover {
-            background: #ffffff;
-            color: var(--bg-color);
+            background: var(--accent-mint);
+            color: #07090e;
+            border-color: var(--accent-mint);
             transform: translateY(-1px);
         }
 
@@ -753,33 +810,35 @@
             }
         }
 
-        /* Elegant Alert & Queues */
+        /* Synchronizer Status Alert */
         .status-alert {
             display: flex;
             align-items: center;
             gap: 10px;
-            font-size: 0.85rem;
+            font-size: 0.82rem;
             font-weight: 500;
             padding: 10px 14px;
             border-radius: var(--radius-md);
             border: 1px solid transparent;
             display: none;
+            margin-bottom: 12px;
+            width: 100%;
         }
 
         .status-alert.success {
-            background: rgba(16, 185, 129, 0.06);
+            background: rgba(16, 185, 129, 0.04);
             border-color: rgba(16, 185, 129, 0.15);
             color: var(--accent-green);
         }
 
         .status-alert.info {
-            background: rgba(139, 92, 246, 0.06);
-            border-color: rgba(139, 92, 246, 0.15);
-            color: #a78bfa;
+            background: rgba(60, 208, 162, 0.04);
+            border-color: rgba(60, 208, 162, 0.15);
+            color: #8bead0;
         }
 
         .status-alert.error {
-            background: rgba(239, 68, 68, 0.06);
+            background: rgba(239, 68, 68, 0.04);
             border-color: rgba(239, 68, 68, 0.15);
             color: #f87171;
         }
@@ -793,39 +852,21 @@
             animation: spin 0.8s linear infinite;
         }
 
-        /* Clean Selector Capsules for Quick Demos */
-        .demo-deck {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
 
+        /* Demo deck scrollable inside sidebar */
         .demo-capsules {
             display: flex;
             flex-direction: column;
             gap: 8px;
-            max-height: 240px;
-            overflow-y: auto;
-            padding-right: 2px;
-        }
-
-        .demo-capsules::-webkit-scrollbar {
-            width: 4px;
-        }
-
-        .demo-capsules::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.01);
-            border-radius: 2px;
-        }
-
-        .demo-capsules::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 2px;
         }
 
         .demo-pill {
             background: rgba(255, 255, 255, 0.01);
-            border: 1px solid var(--panel-border);
+            border: 1px solid rgba(255, 255, 255, 0.04);
             border-radius: var(--radius-md);
             padding: 10px 14px;
             cursor: pointer;
@@ -838,24 +879,24 @@
         }
 
         .demo-pill:hover {
-            background: rgba(255, 255, 255, 0.03);
-            border-color: rgba(255, 255, 255, 0.12);
-            transform: translateX(1px);
+            background: rgba(60, 208, 162, 0.02);
+            border-color: rgba(60, 208, 162, 0.15);
+            transform: translateX(2px);
         }
 
         .demo-pill.active {
-            border-color: var(--accent-orange);
-            background: rgba(255, 107, 53, 0.03);
+            border-color: var(--accent-mint);
+            background: rgba(60, 208, 162, 0.03);
         }
 
         .demo-pill-title {
-            font-size: 0.85rem;
+            font-size: 0.82rem;
             font-weight: 600;
             color: #ffffff;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            max-width: 180px;
+            max-width: 170px;
         }
 
         .pill-labels {
@@ -872,49 +913,49 @@
             text-transform: uppercase;
         }
 
-        .pill-badge-male { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
-        .pill-badge-female { background: rgba(236, 72, 153, 0.1); color: #f472b6; }
-        .pill-badge-long { background: rgba(139, 92, 246, 0.1); color: #c084fc; }
-
-        /* Minimalist Accordion Guide */
-        .guide-deck {
-            border-top: 1px solid rgba(255, 255, 255, 0.04);
-            padding-top: 16px;
-        }
+        .pill-badge-male { background: rgba(59, 130, 246, 0.08); color: #60a5fa; }
+        .pill-badge-female { background: rgba(236, 72, 153, 0.08); color: #f472b6; }
+        .pill-badge-long { background: rgba(139, 92, 246, 0.08); color: #c084fc; }
 
+        /* Guide container inside sidebar */
         .guide-header {
-            font-size: 0.85rem;
-            font-weight: 600;
+            font-size: 0.82rem;
+            font-weight: 700;
             color: #ffffff;
             cursor: pointer;
             display: flex;
             justify-content: space-between;
             align-items: center;
             user-select: none;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+            padding-bottom: 8px;
+            margin-bottom: 4px;
         }
 
         .guide-body {
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            font-size: 0.8rem;
+            font-size: 0.78rem;
             color: var(--text-secondary);
             display: flex;
             flex-direction: column;
-            gap: 10px;
-            line-height: 1.5;
+            gap: 12px;
+            line-height: 1.55;
         }
 
         .guide-body.open {
             max-height: 380px;
-            margin-top: 10px;
+            margin-top: 12px;
         }
 
         .guide-block-title {
             color: #ffffff;
             font-weight: 600;
             margin-bottom: 2px;
-            font-size: 0.8rem;
+            font-size: 0.78rem;
         }
 
         .guide-list {
@@ -924,6 +965,26 @@
             gap: 3px;
         }
 
+        /* ── Sidebar backdrop overlay (mobile and smaller desktops) ── */
+        .sidebar-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            z-index: 90;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+
+        .sidebar-overlay.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
         footer {
             margin-top: auto;
             text-align: center;
@@ -932,230 +993,131 @@
             color: var(--text-secondary);
             border-top: 1px solid rgba(255, 255, 255, 0.03);
         }
+
+        /* ── Mobile and Tablet Adaptations ── */
+        @media (max-width: 992px) {
+            .sidebar {
+                position: fixed;
+                top: 0;
+                left: 0;
+                height: 100%;
+                z-index: 1000;
+            }
+            .sidebar.collapsed {
+                margin-left: 0;
+                transform: translateX(-100%);
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            .logo-emoji {
+                font-size: 1.8rem;
+            }
+        }
+
+        @media (min-width: 993px) {
+            .sidebar-close-btn {
+                display: none; /* Only show toggle trigger on desktop */
+            }
+        }
     </style>
 </head>
 <body>
 
-    <div class="container">
-        <header>
-            <div class="logo-area">
-                <span class="logo-emoji">🎭</span>
-                <h1>DramaBox</h1>
+    <div class="app-layout">
+        
+        <!-- Left collapsing sidebar with configuration parameters & demos -->
+        <aside id="app-sidebar" class="sidebar">
+            <div class="sidebar-header">
+                <span class="sidebar-title">🎛️ Control Deck</span>
+                <button id="btn-close-sidebar" class="sidebar-close-btn" title="Close Panel">✕</button>
             </div>
-            <div class="subtitle">Expressive TTS with Voice Cloning</div>
             
-            <div class="ltx-banner">
-                🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2" target="_blank">LTX-2</a> by 
-                <a href="https://huggingface.co/Lightricks" target="_blank">Lightricks</a>. 
-                <strong>DramaBox</strong> is <strong>Resemble AI's</strong> expressive TTS, 
-                trained on top of the LTX-2.3 audio branch under the LTX-2 Community License. 
-                Huge thanks to the Lightricks team for open-sourcing the base.
-            </div>
-        </header>
-
-        <main>
-            <!-- Left Side: Custom Configuration Card -->
-            <section class="card">
-                <div class="card-header">
-                    <span>🪄</span> Input Board
-                </div>
-
-                <!-- Textarea Script -->
+            <div class="sidebar-scrollable">
+                <!-- Reference Audio Uploader -->
                 <div class="form-group">
-                    <div class="form-label">
-                        <span>Script Prompt</span>
-                        <span class="label-badge">Double quotes for dialogue, standard text for style</span>
-                    </div>
-                    <textarea 
-                        id="scene-prompt" 
-                        class="textarea-custom" 
-                        placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'
-                    ></textarea>
-                </div>
-
-                <!-- Modern Reference File Uploader -->
-                <div class="form-group">
-                    <div class="form-label">
-                        <span>Timbre Reference (Optional)</span>
-                        <span>10s+ file</span>
-                    </div>
-                    
+                    <span class="form-label">Voice Reference (Optional)</span>
                     <div id="dropzone" class="upload-zone">
                         <span class="upload-icon">📤</span>
                         <div class="upload-text">
                             <strong>Drop file</strong> or click to choose<br>
-                            <span>Supports WAV, MP3, etc.</span>
+                            <span>WAV, MP3, etc. (10s+)</span>
                         </div>
                     </div>
                     <input type="file" id="audio-file" class="hidden-input" accept="audio/*">
                 </div>
 
-                <!-- Dynamic Accordion Panel -->
-                <div class="settings-accordion">
-                    <button type="button" class="accordion-header" id="accordion-toggle">
-                        <span>⚙️ Settings Dashboard</span>
-                        <span class="accordion-icon" id="accordion-arrow">▼</span>
-                    </button>
+                <!-- Settings Dashboard Parameters -->
+                <div class="settings-block">
+                    <div class="settings-block-title">Synthesis Parameters</div>
                     
-                    <div class="accordion-body" id="accordion-panel">
-                        <!-- CFG Scale -->
-                        <div class="slider-group">
-                            <div class="slider-meta">
-                                <span>CFG Scale</span>
-                                <span class="slider-value" id="val-cfg">2.5</span>
-                            </div>
-                            <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">
-                        </div>
-
-                        <!-- STG Scale -->
-                        <div class="slider-group">
-                            <div class="slider-meta">
-                                <span>STG Scale</span>
-                                <span class="slider-value" id="val-stg">1.5</span>
-                            </div>
-                            <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">
-                        </div>
-
-                        <!-- Duration factor -->
-                        <div class="slider-group">
-                            <div class="slider-meta">
-                                <span>Breathing Room Factor</span>
-                                <span class="slider-value" id="val-dur">1.10</span>
-                            </div>
-                            <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">
-                        </div>
-
-                        <!-- Target Length -->
-                        <div class="slider-group">
-                            <div class="slider-meta">
-                                <span>Fixed duration (s) - 0 = Auto</span>
-                                <span class="slider-value" id="val-gendur">0.0</span>
-                            </div>
-                            <input type="range" id="gendur" min="0.0" max="60.0" step="1.0" value="0.0">
+                    <!-- CFG Scale -->
+                    <div class="slider-group">
+                        <div class="slider-meta">
+                            <span>CFG Scale</span>
+                            <span class="slider-value" id="val-cfg">2.5</span>
                         </div>
+                        <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">
+                    </div>
 
-                        <!-- Reference window -->
-                        <div class="slider-group">
-                            <div class="slider-meta">
-                                <span>Reference window (s)</span>
-                                <span class="slider-value" id="val-refdur">10.0</span>
-                            </div>
-                            <input type="range" id="refdur" min="3.0" max="30.0" step="1.0" value="10.0">
+                    <!-- STG Scale -->
+                    <div class="slider-group">
+                        <div class="slider-meta">
+                            <span>STG Scale</span>
+                            <span class="slider-value" id="val-stg">1.5</span>
                         </div>
+                        <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">
+                    </div>
 
-                        <!-- Seed Input -->
-                        <div class="form-group">
-                            <span class="form-label">Seed Value</span>
-                            <div class="seed-row">
-                                <input type="number" id="seed" class="input-seed" value="42">
-                                <button type="button" id="btn-random-seed" class="btn-seed-random" title="Randomize Seed">🎲</button>
-                            </div>
+                    <!-- Duration Scale Factor -->
+                    <div class="slider-group">
+                        <div class="slider-meta">
+                            <span>Breathing Factor</span>
+                            <span class="slider-value" id="val-dur">1.10</span>
                         </div>
+                        <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">
                     </div>
-                </div>
-
-                <!-- Generate Click -->
-                <button id="btn-generate" class="btn-generate">
-                    <span>⚡</span> Generate Speech
-                </button>
-            </section>
-
-            <!-- Right Side: Status, Player, Demos & Guides -->
-            <section class="card">
-                <div class="card-header">
-                    <span>🔊</span> Output Lounge
-                </div>
-
-                <!-- State alerts -->
-                <div id="status-box" class="status-alert">
-                    <div class="alert-spinner"></div>
-                    <span id="status-text">Synchronizing Engine...</span>
-                </div>
 
-                <!-- Audio visualizer & controller -->
-                <div class="output-wrapper">
-                    <audio id="audio-element" style="display:none;"></audio>
-                    
-                    <!-- Default Screen -->
-                    <div id="output-empty-state" class="empty-placeholder">
-                        <span class="empty-icon">🎚️</span>
-                        <span class="empty-text">Formulate a script above to voice speech</span>
+                    <!-- Target Generation Time -->
+                    <div class="slider-group">
+                        <div class="slider-meta">
+                            <span>Fixed duration (s) - 0 = Auto</span>
+                            <span class="slider-value" id="val-gendur">0.0</span>
+                        </div>
+                        <input type="range" id="gendur" min="0.0" max="60.0" step="1.0" value="0.0">
                     </div>
 
-                    <!-- Audio Player Deck -->
-                    <div id="custom-player" class="audio-player" style="display: none;">
-                        <div class="visualizer-box">
-                            <div class="visualizer-wave">
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                                <span class="wave-bar"></span>
-                            </div>
-                        </div>
-                        
-                        <div class="player-row">
-                            <button type="button" id="player-play" class="btn-play">▶</button>
-                            <div class="progress-box">
-                                <span id="player-current-time" class="time-lbl">00:00</span>
-                                <input type="range" id="player-progress" min="0" max="100" value="0">
-                                <span id="player-duration" class="time-lbl">00:00</span>
-                            </div>
+                    <!-- Reference Window -->
+                    <div class="slider-group">
+                        <div class="slider-meta">
+                            <span>Reference Window (s)</span>
+                            <span class="slider-value" id="val-refdur">10.0</span>
                         </div>
+                        <input type="range" id="refdur" min="3.0" max="30.0" step="1.0" value="10.0">
+                    </div>
 
-                        <div class="deck-footer">
-                            <!-- Volume slider -->
-                            <div class="vol-slider">
-                                <span class="vol-icon">🔊</span>
-                                <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8">
-                            </div>
-
-                            <!-- Speeds selector -->
-                            <div class="speed-deck">
-                                <button type="button" class="btn-speed" data-speed="0.8">0.8x</button>
-                                <button type="button" class="btn-speed active" data-speed="1.0">1.0x</button>
-                                <button type="button" class="btn-speed" data-speed="1.2">1.2x</button>
-                                <button type="button" class="btn-speed" data-speed="1.5">1.5x</button>
-                            </div>
-
-                            <!-- Direct WAV file downloading -->
-                            <a id="player-download" class="btn-download-wav" href="#" download="dramabox_audio.wav">
-                                <span>📥</span> Download
-                            </a>
+                    <!-- Seed Controls -->
+                    <div class="form-group">
+                        <span class="form-label">Seed Value</span>
+                        <div class="seed-row">
+                            <input type="number" id="seed" class="input-seed" value="42">
+                            <button type="button" id="btn-random-seed" class="btn-seed-random" title="Randomize Seed">🎲</button>
                         </div>
                     </div>
                 </div>
 
-                <!-- Custom Selector Capsules for Quick Demos -->
-                <div class="demo-deck">
-                    <div class="form-label" style="margin-bottom: 2px;">
-                        <span>Quick Demos</span>
-                        <span>Click to pre-populate</span>
-                    </div>
+                <!-- Quick Examples Selector -->
+                <div class="form-group">
+                    <span class="form-label">Quick Demos</span>
                     <div class="demo-capsules" id="examples-container">
                         <!-- Loaded dynamically -->
                     </div>
                 </div>
 
-                <!-- Minimalist Guide Accordion -->
-                <div class="guide-deck">
+                <!-- Accordion Guide -->
+                <div class="form-group">
                     <div class="guide-header" id="guide-toggle">
-                        <span>📖 Prompt Structure Guide</span>
+                        <span>📖 Prompt Guide</span>
                         <span class="accordion-icon" id="guide-arrow">▼</span>
                     </div>
                     
@@ -1165,30 +1127,157 @@
                             <p><code>&lt;description&gt;, "&lt;dialogue&gt;" &lt;movement/breath&gt; "&lt;more dialogue&gt;"</code></p>
                         </div>
                         <div>
-                            <div class="guide-block-title">Inside Quotes (Model pronounces)</div>
+                            <div class="guide-block-title">Inside Quotes (Spoken)</div>
                             <ul class="guide-list">
-                                <li>Spoken transcript: <code>"We have achieved full takeoff."</code></li>
+                                <li>Dialogue transcript: <code>"We are in position."</code></li>
                                 <li>Phonetic expressions: <code>"Hahaha"</code>, <code>"Mmmm"</code>, <code>"Ugh"</code>, <code>"Argh"</code></li>
                             </ul>
                         </div>
                         <div>
-                            <div class="guide-block-title">Outside Quotes (Stage Directions)</div>
+                            <div class="guide-block-title">Outside Quotes (Pacing)</div>
                             <ul class="guide-list">
-                                <li>Pacing/acting styles: <code>She sighs deeply.</code>, <code>A long pause.</code></li>
+                                <li>Action details: <code>She sighs deeply.</code>, <code>A long pause.</code></li>
                                 <li>Tonal delivery: <code>His voice cracks.</code>, <code>He clears his throat.</code></li>
                             </ul>
                         </div>
                     </div>
                 </div>
-            </section>
-        </main>
-    </div>
+            </div>
+        </aside>
+
+        <!-- Sidebar backdrop overlay (mobile and smaller screen viewports) -->
+        <div id="sidebar-overlay" class="sidebar-overlay"></div>
+
+        <!-- Main workspace containing editing space and glowing outputs -->
+        <div class="content-area">
+            <div class="content-container">
+                <header>
+                    <div class="logo-area">
+                        <span class="logo-emoji">🎭</span>
+                        <h1>DramaBox</h1>
+                        <span class="brand-badge">Resemble.AI</span>
+                    </div>
+                    <div class="subtitle">Expressive TTS with Voice Cloning</div>
+                    
+                    <!-- Sliding Collapsible Trigger -->
+                    <button id="btn-toggle-sidebar" class="btn-toggle-sidebar" title="Toggle Dashboard Panel">
+                        <span class="toggle-icon">🎛️</span>
+                        <span class="toggle-text">Show Control Deck & Demos</span>
+                    </button>
+                </header>
+
+                <!-- State Alerts (Connecting / Queuing states) -->
+                <div id="status-box" class="status-alert">
+                    <div class="alert-spinner"></div>
+                    <span id="status-text">Connecting to DramaBox API...</span>
+                </div>
+
+                <main class="main-panel">
+                    <!-- Script Prompt Input -->
+                    <div class="form-group">
+                        <div class="form-label">
+                            <span>Script Prompt</span>
+                            <span class="label-badge">Double quotes for dialogue, standard text for style</span>
+                        </div>
+                        <textarea 
+                            id="scene-prompt" 
+                            class="textarea-custom" 
+                            placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'
+                        ></textarea>
+                    </div>
+
+                    <!-- Synthesize Trigger -->
+                    <button id="btn-generate" class="btn-generate">
+                        <span>⚡</span> Generate Speech
+                    </button>
 
-    <footer>
-        &copy; 2026 DramaBox. Generative speech outputs are invisibly watermarked with Resemble Perth.
-    </footer>
+                    <!-- Output Deck -->
+                    <div class="output-wrapper">
+                        <audio id="audio-element" style="display:none;"></audio>
+                        
+                        <!-- Empty Placeholder -->
+                        <div id="output-empty-state" class="empty-placeholder">
+                            <span class="empty-icon">🎛️</span>
+                            <span class="empty-text">Formulate a script above to voice speech</span>
+                        </div>
+
+                        <!-- Elegant Audio Deck -->
+                        <div id="custom-player" class="audio-player" style="display: none;">
+                            <div class="visualizer-box">
+                                <div class="visualizer-wave">
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                    <span class="wave-bar"></span>
+                                </div>
+                            </div>
+                            
+                            <div class="player-row">
+                                <button type="button" id="player-play" class="btn-play">▶</button>
+                                <div class="progress-box">
+                                    <span id="player-current-time" class="time-lbl">00:00</span>
+                                    <input type="range" id="player-progress" min="0" max="100" value="0">
+                                    <span id="player-duration" class="time-lbl">00:00</span>
+                                </div>
+                            </div>
 
-    <!-- Gradio Connection Module -->
+                            <div class="deck-footer">
+                                <!-- Volume -->
+                                <div class="vol-slider">
+                                    <span class="vol-icon">🔊</span>
+                                    <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8">
+                                </div>
+
+                                <!-- Speed control indicators -->
+                                <div class="speed-deck">
+                                    <button type="button" class="btn-speed" data-speed="0.8">0.8x</button>
+                                    <button type="button" class="btn-speed active" data-speed="1.0">1.0x</button>
+                                    <button type="button" class="btn-speed" data-speed="1.2">1.2x</button>
+                                    <button type="button" class="btn-speed" data-speed="1.5">1.5x</button>
+                                </div>
+
+                                <!-- Downloader WAV -->
+                                <a id="player-download" class="btn-download-wav" href="#" download="dramabox_audio.wav">
+                                    <span>📥</span> Download
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </main>
+
+                <div class="ltx-banner" style="margin-top: 12px;">
+                    🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2" target="_blank">LTX-2</a> by 
+                    <a href="https://huggingface.co/Lightricks" target="_blank">Lightricks</a>. 
+                    <strong>DramaBox</strong> is <strong>Resemble AI's</strong> expressive TTS, 
+                    trained on top of the LTX-2.3 audio branch under the LTX-2 Community License. 
+                    Huge thanks to the Lightricks team for open-sourcing the base.
+                </div>
+
+                <footer>
+                    &copy; 2026 DramaBox. Audio output watermarked with Resemble Perth.
+                </footer>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- Gradio API script module -->
     <script type="module">
         import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
@@ -1288,6 +1377,11 @@
         let selectedAudioFilename = "";
 
         // UI nodes
+        const sidebar = document.getElementById("app-sidebar");
+        const sidebarOverlay = document.getElementById("sidebar-overlay");
+        const btnToggleSidebar = document.getElementById("btn-toggle-sidebar");
+        const btnCloseSidebar = document.getElementById("btn-close-sidebar");
+
         const statusBox = document.getElementById("status-box");
         const statusText = document.getElementById("status-text");
         const btnGenerate = document.getElementById("btn-generate");
@@ -1296,11 +1390,6 @@
         const dropzone = document.getElementById("dropzone");
         const audioFileInput = document.getElementById("audio-file");
         
-        // Accordion Nodes
-        const accordionToggle = document.getElementById("accordion-toggle");
-        const accordionPanel = document.getElementById("accordion-panel");
-        const accordionArrow = document.getElementById("accordion-arrow");
-        
         // Settings sliders
         const sliderCfg = document.getElementById("cfg");
         const valCfg = document.getElementById("val-cfg");
@@ -1333,6 +1422,30 @@
         const guideBody = document.getElementById("guide-body");
         const guideArrow = document.getElementById("guide-arrow");
 
+        // --- Sidebar collapsers ---
+        function toggleSidebar() {
+            const isCollapsed = sidebar.classList.toggle("collapsed");
+            sidebarOverlay.classList.toggle("active", !isCollapsed);
+            
+            const btnText = btnToggleSidebar.querySelector(".toggle-text");
+            btnText.innerText = isCollapsed ? "Show Control Deck & Demos" : "Hide Control Deck & Demos";
+        }
+
+        btnToggleSidebar.addEventListener("click", toggleSidebar);
+        btnCloseSidebar.addEventListener("click", toggleSidebar);
+        sidebarOverlay.addEventListener("click", toggleSidebar);
+
+        // Collapse by default on load under 992px
+        if (window.innerWidth <= 992) {
+            sidebar.classList.add("collapsed");
+            sidebarOverlay.classList.remove("active");
+        } else {
+            // Start open on desktop
+            sidebar.classList.remove("collapsed");
+            const btnText = btnToggleSidebar.querySelector(".toggle-text");
+            btnText.innerText = "Hide Control Deck & Demos";
+        }
+
         // Simple alert helper
         function updateStatus(message, type = "info", showSpinner = true) {
             statusBox.style.display = "flex";
@@ -1365,11 +1478,6 @@
         }
 
         // Accordion animations
-        accordionToggle.addEventListener("click", () => {
-            const isOpen = accordionPanel.classList.toggle("open");
-            accordionArrow.innerText = isOpen ? "▲" : "▼";
-        });
-
         guideToggle.addEventListener("click", () => {
             const isOpen = guideBody.classList.toggle("open");
             guideArrow.innerText = isOpen ? "▲" : "▼";
@@ -1428,7 +1536,7 @@
                 <div class="file-capsule">
                     <div class="file-info">
                         <span>🎵</span>
-                        <span style="overflow: hidden; text-overflow: ellipsis;">${filename}</span>
+                        <span style="overflow: hidden; text-overflow: ellipsis; max-width: 190px;">${filename}</span>
                     </div>
                     <button type="button" class="btn-clear" id="btn-clear-upload" title="Remove voice file">✕</button>
                 </div>
@@ -1447,7 +1555,7 @@
                 <span class="upload-icon">📤</span>
                 <div class="upload-text">
                     <strong>Drop file</strong> or click to choose<br>
-                    <span>Supports WAV, MP3, etc.</span>
+                    <span>WAV, MP3, etc. (10s+)</span>
                 </div>
             `;
         }
@@ -1499,6 +1607,11 @@
 
                 const filename = ex.voice.substring(ex.voice.lastIndexOf('/') + 1);
                 loadExampleVoice(ex.voice, filename);
+                
+                // On mobile, automatically collapse sidebar when selecting a demo so they see the generator
+                if (window.innerWidth <= 992) {
+                    toggleSidebar();
+                }
             });
 
             examplesContainer.appendChild(pill);
@@ -1600,7 +1713,7 @@
 
             try {
                 btnGenerate.disabled = true;
-                btnGenerate.innerHTML = `<div class="alert-spinner"></div> Voice Synthesis...`;
+                btnGenerate.innerHTML = `<div class="alert-spinner"></div> Synthesizing...`;
                 updateStatus("Checking models & processing queues...", "info");
 
                 let uploadedFileData = null;