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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>SonicForge Studio - Professional DAW Editor</title>
    <script>
        // ── Chặn BROWSER ZOOM toàn trang ──
        // UI dùng px cố định cho item/button/label — browser zoom (Ctrl+wheel,
        // Ctrl+plus/minus/0, pinch) scale TOÀN BỘ làm control phóng to theo.
        // Chặn ở capture phase bằng preventDefault() (KHÔNG stopPropagation —
        // các vùng zoom chuyên dụng: timeline, piano roll, canvas, EQ vẫn nhận
        // event và tự xử lý zoom nội dung của chúng).
        document.addEventListener('wheel', function (e) {
            if (e.ctrlKey || e.metaKey) e.preventDefault();
        }, { capture: true, passive: false });
        document.addEventListener('keydown', function (e) {
            if ((e.ctrlKey || e.metaKey) && ['+', '-', '=', '_', '0'].indexOf(e.key) !== -1) {
                e.preventDefault();
            }
        }, { capture: true });
        // Pinch zoom (Safari/WebKit gesture events)
        document.addEventListener('gesturestart', function (e) { e.preventDefault(); }, { passive: false });
        document.addEventListener('gesturechange', function (e) { e.preventDefault(); }, { passive: false });
    </script>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <!-- Bug #11: vendor local — trước đây load CDN (unpkg/cdn.tailwindcss/cdnjs) →
    desktop Tauri offline trắng màn hình. Các file này nằm /static/vendor/. -->
    <script src="/static/vendor/tailwindcdn.js"></script>
    <script src="/static/vendor/lucide.min.js"></script>
    <link rel="stylesheet" href="/static/vendor/fontawesome.min.css">
    <script src="/static/vendor/react.production.min.js"></script>
    <script src="/static/vendor/react-dom.production.min.js"></script>
    <script src="/static/js/services/fluidsynthLoader.js?v=202607271245"></script>
    <script src="/static/js/services/runtime.js?v=202608101800"></script>
    <script src="/static/js/services/api.js?v=202608101800"></script>
    <script src="/static/js/services/audioEngine.js?v=202607271016"></script>
    <script src="/static/js/services/storage.js?v=202608038200"></script>
    <script src="/static/js/services/soundfontStorage.js?v=202607271016"></script>
    <script src="/static/js/services/soundfontPlayer.js?v=202608101800"></script>
    <script src="/static/js/services/nativeBridgeService.js?v=202608112200"></script>
    <script src="/static/js/services/bridgeAudioNode.js?v=202608121700"></script>
    <script src="/static/js/services/unifiedMidiRouter.js?v=202608112200"></script>
    <script src="/static/js/services/audioRoutingEngine.js?v=202608112200"></script>
    <script src="/static/js/services/aiGateway.js?v=202608037200"></script>
    <script src="/static/js/services/dawCommandDispatcher.js?v=202607271016"></script>
    <script src="/static/js/services/pianoRollTabService.js?v=202607272044"></script>
    <script src="/static/js/services/ghostNoteExtractor.js?v=202607271727"></script>
    <script src="/static/js/services/midiExtractor.js?v=202607281052"></script>
    <script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
    <script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script>
    <script src="/static/js/app.precompiled.js?v=202608141030" 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;
            /* Theme (Preferences) — có thể override bằng data-theme trên <html> */
            --sf-bg: #1e1e1e;
            --sf-panel: #262626;
            --sf-header: #2e2e2e;
            --sf-border: #181818;
            --sf-accent: #00ffcc;
        }

        /* ── THEME presets (Tools → Preferences) ── */
        html[data-theme="dark"] {
            --sf-bg: #1e1e1e; --sf-panel: #262626; --sf-header: #2e2e2e; --sf-border: #181818; --sf-accent: #00ffcc;
        }
        html[data-theme="midnight"] {
            --sf-bg: #0f172a; --sf-panel: #1e293b; --sf-header: #1e293b; --sf-border: #0f172a; --sf-accent: #38bdf8;
        }
        html[data-theme="forest"] {
            --sf-bg: #111c15; --sf-panel: #1b2a1e; --sf-header: #1e2d21; --sf-border: #0c1510; --sf-accent: #34d399;
        }
        html[data-theme="violet"] {
            --sf-bg: #170f26; --sf-panel: #221537; --sf-header: #251640; --sf-border: #110a1c; --sf-accent: #a78bfa;
        }
        html[data-theme="graphite"] {
            --sf-bg: #18181b; --sf-panel: #232327; --sf-header: #27272a; --sf-border: #101012; --sf-accent: #e4e4e7;
        }

        /* Áp theme lên các vùng chính của app shell */
        .daw-app-shell { background-color: var(--sf-bg) !important; }
        .daw-panel { background-color: var(--sf-panel) !important; }
        .daw-header { background-color: var(--sf-header) !important; }
        body { background-color: var(--sf-bg) !important; }
        ::-webkit-scrollbar-thumb { background: var(--sf-accent); }

        /* ── BUTTON FONT SIZE (Tools → Preferences) ── */
        html[data-btnfont="sm"] button { font-size: 10px !important; }
        html[data-btnfont="md"] button { font-size: 12px !important; }
        html[data-btnfont="lg"] button { font-size: 14px !important; }

        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;
        }

        /* Ozone Mastering Module Styles */
        .oz-panel {
            background: linear-gradient(180deg, #131822 0%, #0d1118 100%);
            border: 1px solid rgba(255, 255, 255, 0.07);
        }
        .oz-card {
            background: #18202c;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.15s ease;
        }
        .oz-card-active {
            background: #1e2a3a;
            border-color: #38bdf8;
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
        }
        .knob-container { touch-action: none; user-select: none; }
        .knob-dial {
            transition: transform 0.05s ease-out;
            box-shadow: inset 0 1px 3px rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.8);
        }
        .oz-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
        .oz-scrollbar::-webkit-scrollbar-track { background: #080b12; }
        .oz-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }
        .oz-scrollbar::-webkit-scrollbar-thumb:hover { background: #334155; }
        .oz-font-mono { font-family: 'JetBrains Mono', monospace; }

        /* Master & Track Strip Console Styles (from md/47, md/48) */
        .strip-bg {
            background: linear-gradient(180deg, #2f2f2f 0%, #222222 100%);
            border: 1px solid #141414;
            box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.8);
        }
        .strip-bg-track {
            background: linear-gradient(180deg, #2c2c2c 0%, #1e1e1e 100%);
            border: 1px solid #111111;
            box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.85);
        }

        .fader-track {
            background: #121212;
            box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9), 1px 1px 0 rgba(255,255,255,0.05);
        }
        .fader-track-bg {
            background: #101010;
            box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9), 1px 1px 0 rgba(255,255,255,0.05);
        }

        /* DAW Metallic Button */
        .btn-daw {
            background: linear-gradient(180deg, #444 0%, #2a2a2a 100%);
            border: 1px solid #1a1a1a;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.5);
            transition: all 0.1s ease;
        }
        .btn-daw:hover {
            background: linear-gradient(180deg, #555 0%, #333 100%);
        }
        .btn-daw:active {
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
            transform: translateY(0.5px);
        }

        /* Teal Active State (FX & Power Button) */
        .btn-teal-active {
            background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
            border-color: #34d399 !important;
            color: #ffffff !important;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
        }

        /* Mute Active State */
        .btn-mute-active {
            background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%) !important;
            border-color: #f87171 !important;
            color: #ffffff !important;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
        }

        /* Solo Active State */
        .btn-solo-active {
            background: linear-gradient(180deg, #eab308 0%, #854d0e 100%) !important;
            border-color: #fde047 !important;
            color: #000000 !important;
            box-shadow: 0 0 8px rgba(234, 179, 8, 0.6) !important;
        }

        /* Mono Active State */
        .btn-mono-active {
            background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
            border-color: #60a5fa !important;
            color: #ffffff !important;
        }

        /* Record Arm Active State */
        .btn-arm-active {
            background: radial-gradient(circle, #ef4444 0%, #7f1d1d 100%) !important;
            border-color: #fca5a5 !important;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.9), inset 0 1px 2px rgba(255,255,255,0.8) !important;
            animation: pulse-red 1.2s infinite alternate;
        }

        @keyframes pulse-red {
            0% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
            100% { box-shadow: 0 0 16px rgba(239, 68, 68, 1); }
        }

        /* Custom Vertical Range Fader Slider */
        input[type=range].fader-slider {
            -webkit-appearance: none;
            appearance: none;
            writing-mode: vertical-lr;
            direction: rtl;
            background: transparent;
            cursor: pointer;
            margin: 0;
            padding: 0;
            flex: 1;
            min-height: 20px;
            width: 100%;
        }
        input[type=range].fader-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 24px;
            width: 22px;
            background: linear-gradient(180deg, #e2e8f0 0%, #64748b 45%, #1e293b 50%, #94a3b8 100%);
            border: 1px solid #000000;
            border-radius: 2px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.9);
        }
        input[type=range].fader-slider::-moz-range-thumb {
            height: 24px;
            width: 22px;
            background: linear-gradient(180deg, #e2e8f0 0%, #64748b 45%, #1e293b 50%, #94a3b8 100%);
            border: 1px solid #000000;
            border-radius: 2px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.9);
        }

        /* Media Explorer: horizontal volume slider + selected file row */
        input[type=range].me-fader-slider {
            -webkit-appearance: none;
            appearance: none;
            background: #111;
            height: 6px;
            border-radius: 3px;
            border: 1px solid #555;
            cursor: pointer;
        }
        input[type=range].me-fader-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 12px;
            background: linear-gradient(180deg, #e2e8f0 0%, #64748b 50%, #1e293b 100%);
            border: 1px solid #000;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
            cursor: pointer;
        }
        .file-row-selected {
            background-color: #3399ff !important;
            color: #ffffff !important;
        }
        .file-row-selected .file-icon { color: #ffffff !important; }
    </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>