<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SonicForge Studio - Professional DAW Editor</title>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
    <script type="importmap">
      {
        "imports": {
          "spessasynth_core": "https://cdn.jsdelivr.net/npm/spessasynth_core@latest/dist/index.js"
        }
      }
    </script>
    <script type="module">
      import { WorkletSynthesizer } from 'https://cdn.jsdelivr.net/npm/spessasynth_lib@4.3.1/dist/index.js';
      window.SpessaSynthClass = WorkletSynthesizer;
      window.__SpessaSynthCDN = 'https://cdn.jsdelivr.net/npm/spessasynth_lib@4.3.1/dist/';
      console.log('[SonicSF] SpessaSynth library loaded from CDN.');
    </script>
    <script src="/static/js/services/api.js?v=202607271016"></script>
    <script src="/static/js/services/audioEngine.js?v=202607271016"></script>
    <script src="/static/js/services/storage.js?v=202607271016"></script>
    <script src="/static/js/services/soundfontStorage.js?v=202607271016"></script>
    <script src="/static/js/services/soundfontPlayer.js?v=202607271016"></script>
    <script src="/static/js/services/aiGateway.js?v=202607271016"></script>
    <script src="/static/js/services/dawCommandDispatcher.js?v=202607271016"></script>
    <script src="/static/js/app.precompiled.js?v=202607271016" defer></script>
    <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
    <style>
        :root {
            --right-sidebar-width: 320px;
            --bottom-strip-height: 220px;
            --top-bar-height: 80px;
            --status-bar-height: 25px;
            --panel-border-color: #2a2a2a;
        }

        body {
            background-color: #1a1a1a;
            color: #c0c0c0;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            overflow: hidden;
            user-select: none;
        }

        .daw-bg {
            background-color: #1e1e1e;
        }

        .daw-panel {
            background-color: #262626;
        }

        .daw-header {
            background-color: #2e2e2e;
        }

        .daw-border {
            border-color: #181818;
        }

        .daw-track-active {
            background-color: #333333;
        }

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #141414;
        }

        ::-webkit-scrollbar-thumb {
            background: #3a3a3a;
            border: 2px solid #141414;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #4a4a4a;
        }

        .knob-container {
            position: relative;
            width: 28px;
            height: 28px;
        }

        .knob-dial {
            transform-origin: center;
            transition: transform 0.1s ease;
        }

        .selection-interactive-box {
            min-width: 4px;
        }

        .no-scrollbar {
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
            /* Safari and Chrome */
        }

        /* Fullscreen Fixed App Shell */
        .daw-app-shell {
            display: flex;
            flex-direction: column;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #121212;
            color: #e0e0e0;
        }

        /* Middle Section holding Main Workspace and Right Sidebar */
        .daw-body-container {
            display: flex;
            flex: 1;
            height: calc(100vh - var(--top-bar-height) - var(--bottom-strip-height) - var(--status-bar-height));
            position: relative;
            overflow: hidden;
        }

        /* Auto-expanding Main Workspace */
        .daw-main-workspace {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        /* Right Sidebar with Width controlled via CSS Variable */
        .daw-right-sidebar {
            width: var(--right-sidebar-width);
            min-width: 200px;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            background-color: #1a1a1a;
            border-left: 1px solid var(--panel-border-color);
        }

        /* Vertically stacked child Panels in Right Sidebar */
        .sidebar-panel {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #1e1e1e;
            border-bottom: 1px solid var(--panel-border-color);
        }

        #panel-media-explorer {
            height: 50%;
            /* Default 50/50 split */
            min-height: 100px;
        }

        #panel-ai {
            flex: 1;
            /* Fills remaining height */
            min-height: 100px;
        }

        /* BOTTOM ROW: Enables Horizontal Scrolling */
        .daw-bottom-strip {
            height: var(--bottom-strip-height);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding: 8px;
            overflow-x: auto;
            /* Enables horizontal scroll when panels overflow */
            overflow-y: hidden;
            background-color: #161616;
            border-top: 1px solid var(--panel-border-color);
            white-space: nowrap;
        }

        /* Optimized custom horizontal scrollbar for DAW styling */
        .daw-bottom-strip::-webkit-scrollbar {
            height: 8px;
        }

        .daw-bottom-strip::-webkit-scrollbar-thumb {
            background: #3a3a3a;
            border-radius: 4px;
        }

        .daw-bottom-strip::-webkit-scrollbar-thumb:hover {
            background: #00ffcc;
        }

        /* Sub-panels inside the bottom strip */
        .bottom-panel {
            flex: 0 0 auto;
            /* Prevents shrinking, locks content dimensions */
            width: 320px;
            height: 100%;
            background-color: #222;
            border: 1px solid #333;
            border-radius: 6px;
            box-sizing: border-box;
        }

        /* RESIZER HANDLES */
        .resizer-col-handle {
            width: 5px;
            cursor: ew-resize;
            /* Horizontal resize cursor */
            background: transparent;
            transition: background 0.2s;
            z-index: 10;
        }

        .resizer-col-handle:hover,
        .resizer-col-handle:active {
            background: #00ffcc;
        }

        .resizer-row-handle {
            height: 5px;
            cursor: ns-resize;
            /* Vertical resize cursor */
            background: transparent;
            transition: background 0.2s;
            z-index: 10;
        }

        .resizer-row-handle:hover,
        .resizer-row-handle:active {
            background: #00ffcc;
        }

        /* Disable mouse pointer events on SVG icons to prevent SVGAnimatedString className type errors in event listeners */
        svg, i[data-lucide] {
            pointer-events: none;
        }
    </style>
</head>

<body class="h-screen w-screen flex flex-col">
    <div id="root" class="h-full w-full flex flex-col"></div>
</body>

</html>