fix tạm lỗi cài đặt AI prompt

app/templates/index.html

@@ -12,8 +12,17 @@
     <script src="/static/js/services/api.js"></script>
     <script src="/static/js/services/audioEngine.js"></script>
     <script src="/static/js/services/storage.js"></script>
+    <script src="/static/js/services/aiGateway.js"></script>
     <script src="/static/js/app.precompiled.js" defer></script>
     <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; 
@@ -42,6 +51,126 @@
         .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;
+        }
     </style>
 </head>
 <body class="h-screen w-screen flex flex-col">