body {
            display: grid;
            grid-template-rows: auto 1fr auto;
            height: 100vh;
            margin: 0;
        }
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-left: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        #top-bar {
            grid-row: 1;
            width: 100%;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }

        #main-content {
            grid-row: 2;
            display: grid;
            grid-template-columns: 300px 1fr;
            overflow: hidden;
        }

        #file-tree {
            grid-column: 1;
            overflow-y: auto;
            height: 100%;
            border-right: 1px solid #ddd;
            padding-left: 5px;
            font-size: 12px;
        }

        #file-tree h4 {
            font-size: 14px;
            margin-top: 10px;
        }

        #editor {
            grid-column: 2;
            padding: 10px;
            overflow-y: auto;
            height: 100%;
        }

        #api-section {
            grid-row: 3;
            position: relative;
            padding: 10px;
            background-color: #f8f9fa;
            border-top: 1px solid #ddd;
        }

        #api-prompt {
            width: 100%;
            margin-bottom: 10px;
        }

        #api-response {
            white-space: pre-wrap;
        }

        #editor-area {
            width: 100%;
            height: calc(100vh - 200px);
        }

        .code-block {
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 10px;
            position: relative;
        }

        .copy-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
        }

        #files li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        #files li.directory {
            font-weight: bold;
            cursor: pointer;
        }

        #files li.directory::before {
            content: '📁 ';
        }

        #files li:not(.directory)::before {
            content: '📄 ';
        }

        .code-block {
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 15px;
            position: relative;
        }

        .code-block pre {
            margin: 0;
            padding: 15px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .code-block .copy-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
        }

        .code-block .copy-btn:hover {
            background-color: #0056b3;
        }

        #files ul {
            display: none; /* Hide all subdirectories by default */
            margin-left: 20px; /* Indent subdirectories */
        }

        #files li.directory.expanded > ul {
            display: block; /* Show subdirectories when parent is expanded */
        }

        /* Add expand/collapse indicators */
        #files li.directory > span:before {
            content: '▶';
            display: inline-block;
            margin-right: 5px;
            transition: transform 0.2s;
        }

        #files li.directory.expanded > span:before {
            transform: rotate(90deg);
        }
        
        /* Frequently used files section */
        #frequently-used-files {
            margin: 10px 0;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border: 1px solid #e9ecef;
        }
        
        #frequently-used-files h5 {
            font-size: 13px;
            margin-top: 0;
            margin-bottom: 8px;
            color: #495057;
            font-weight: bold;
        }
        
        #frequently-used-files ul {
            margin: 0;
            padding: 0;
            display: block !important;
        }
        
        .frequent-file {
            padding: 4px 8px;
            margin-bottom: 4px;
            background-color: #e9ecef;
            border-radius: 3px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .frequent-file:hover {
            background-color: #dee2e6;
        }
        
        .frequent-file .file-name {
            flex-grow: 1;
            margin: 0 5px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 170px;
        }
        
        .frequent-file .badge {
            font-size: 10px;
            background-color: #6c757d;
            color: white;
            padding: 2px 5px;
            border-radius: 10px;
        }
        
        .frequent-file::before {
            content: '📄 ';
        }