/* ============================================
   Media Section - 3-Column Editor Layout
   ============================================ */

.editor-layout {
    display: grid;
    grid-template-columns: 60px 1fr 350px;
    gap: 0;
    height: 500px;
    background: #0d0d10;
    border-radius: 12px;
    overflow: hidden;
}

/* Column 1: Line Numbers */
.editor-line-numbers {
    background: #15151a;
    border-right: 1px solid var(--border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

.editor-line-numbers span {
    display: block;
    height: 24px;
    line-height: 24px;
    color: #3f3f46;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    text-align: right;
    padding: 0 12px;
    user-select: none;
}

/* Column 2: Code Editor */
.editor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.code-editor-mockup {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0d0d10;
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.editor-header {
    background: #15151a;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.window-controls {
    display: flex;
    gap: 6px;
}

.control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.control.close { background: #FF5F57; }
.control.minimize { background: #FEBC2E; }
.control.maximize { background: #28C840; }

.editor-tabs {
    display: flex;
    gap: 4px;
    margin-left: 16px;
}

.tab {
    font-size: 13px;
    padding: 4px 12px;
    background: rgba(38, 38, 43, 0.5);
    border-radius: 6px;
}

.tab.active {
    background: rgba(168, 85, 247, 0.1);
    color: #A855F7;
}

.tab-overflow {
    font-size: 12px;
    padding: 4px 8px;
}

.editor-content {
    flex: 1;
    padding: 20px;
    overflow: auto;
}

.code-content {
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    line-height: 24px;
}

.kw { color: #F472B6; }
.imp { color: #60A5FA; }
.cls { color: #A78BFA; }
.str { color: #34D399; }
.op { color: #9CA3AF; }
.fn { color: #FBBF24; }
.arg { color: #60A5FA; }
.type { color: #60A5FA; }

/* Column 3: Sidebar (AI Suggestion + Terminal) */
.editor-sidebar {
    background: #15151a;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-suggestion {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
}

.suggestion-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(168, 85, 247, 0.2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #A855F7;
    margin-bottom: 12px;
}

.ai-suggestion pre {
    margin: 0;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    line-height: 1.7;
}

.ai-suggestion code {
    color: var(--text);
}

.terminal-output {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
}

.terminal-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.terminal-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.terminal-lines .line {
    display: flex;
    gap: 8px;
}

.terminal-lines .line.success { color: #34D399; }
.terminal-lines .line.info { color: #60A5FA; }
.terminal-lines .line.warning { color: #FBBF24; }

/* Responsive for editor layout */
@media (max-width: 1200px) {
    .editor-layout {
        grid-template-columns: 50px 1fr 300px;
        height: 450px;
    }
}

@media (max-width: 1024px) {
    .editor-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 600px;
    }
    
    .editor-line-numbers {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    
    .editor-line-numbers span {
        display: inline-block;
        width: auto;
        margin: 0 4px;
    }
    
    .editor-sidebar {
        border-left: none;
        border-top: 1px solid var(--border);
    }
    
    .ai-suggestion {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 768px) {
    .editor-layout {
        min-height: 500px;
    }
    
    .editor-header {
        padding: 10px 12px;
    }
    
    .editor-content {
        padding: 16px;
    }
    
    .ai-suggestion,
    .terminal-output {
        padding: 16px;
    }
}