/* AI Code Review IDE - Frontend Styles */

/* CRITICAL: Prevent horizontal scroll caused by 100vw including scrollbar width */
html:has(.ai-code-review-ide-container),
body:has(.ai-code-review-ide-container) {
    overflow-x: hidden !important;
}

/* Fallback for browsers without :has() support */
body.has-ai-ide {
    overflow-x: hidden !important;
}

/* Main Container - Full viewport width using calc() technique */
.ai-code-review-ide-container {
    display: flex;
    flex-direction: column;
    /* Full viewport width that works across all browsers */
    width: 100vw;
    max-width: 100vw;
    /* Break out of centered container using calc() */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Reset any padding from parent */
    padding-left: 0;
    padding-right: 0;
    /* Visual styling */
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    min-height: 600px;
    position: relative;
}

/* Fullscreen Toggle Class */
.ai-code-review-ide-container.ai-ide-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 999999 !important;
    max-width: none !important;
    transform: none !important;
}

/* Prevent body scrolling when IDE is in fullscreen */
body:has(.ai-code-review-ide-container.ai-ide-fullscreen),
html:has(.ai-code-review-ide-container.ai-ide-fullscreen) {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Fallback for browsers without :has() support */
body.ai-ide-fullscreen-active {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Account for WordPress admin bar in fullscreen */
.admin-bar .ai-code-review-ide-container.ai-ide-fullscreen {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .ai-code-review-ide-container.ai-ide-fullscreen {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }
}

/* Force IDE container to be able to break out of parent constraints */
/* Note: JavaScript handles the actual positioning via stretchIDE() */
.ai-code-review-ide-container:not(.ai-ide-fullscreen) {
    max-width: none !important;
    box-sizing: border-box;
}

/* Ensure no parent constraints apply - override theme styles */
.entry-content .ai-code-review-ide-container:not(.ai-ide-fullscreen),
.site-content .ai-code-review-ide-container:not(.ai-ide-fullscreen),
article .ai-code-review-ide-container:not(.ai-ide-fullscreen),
.wp-block-post-content .ai-code-review-ide-container:not(.ai-ide-fullscreen),
.page-content .ai-code-review-ide-container:not(.ai-ide-fullscreen),
main .ai-code-review-ide-container:not(.ai-ide-fullscreen) {
    max-width: none !important;
}

/* Force parent containers to allow overflow for the stretch effect */
/* This helps in themes that constrain content width */
.entry-content:has(.ai-code-review-ide-container),
.site-content:has(.ai-code-review-ide-container),
article:has(.ai-code-review-ide-container),
.wp-block-post-content:has(.ai-code-review-ide-container),
.page-content:has(.ai-code-review-ide-container),
main:has(.ai-code-review-ide-container),
.content-area:has(.ai-code-review-ide-container) {
    overflow: visible !important;
    max-width: none !important;
}

/* Dark Theme (Default) */
.ai-code-review-ide-container.ai-ide-theme-dark {
    background: linear-gradient(135deg, #1a1a1a 0%, #1e1e1e 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Light Theme */
.ai-code-review-ide-container.ai-ide-theme-light {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.ai-ide-header {
    background: linear-gradient(135deg, #2d2d30 0%, #252526 100%);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
}

.ai-ide-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.ai-ide-title {
    font-size: 19px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    letter-spacing: -0.4px;
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ai-ide-theme-dark .ai-ide-title {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ai-ide-theme-light .ai-ide-title {
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.ai-ide-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4a9eff 0%, #357abd 100%);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4),
        0 2px 4px rgba(74, 158, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-ide-icon:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(74, 158, 255, 0.5),
        0 3px 6px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ai-ide-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.ai-ide-theme-selector,
.ai-ide-language-selector {
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    min-width: 140px;
    height: 40px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ai-ide-theme-selector {
    min-width: 110px;
}

/* Dark theme selectors */
.ai-ide-theme-dark .ai-ide-theme-selector,
.ai-ide-theme-dark .ai-ide-language-selector {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #e8e8e8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ai-ide-theme-dark .ai-ide-theme-selector option,
.ai-ide-theme-dark .ai-ide-language-selector option,
.ai-ide-theme-dark .ai-ide-language-selector optgroup {
    background-color: #252526;
    color: #e8e8e8;
}

.ai-ide-theme-dark .ai-ide-theme-selector:hover,
.ai-ide-theme-dark .ai-ide-language-selector:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

/* Light theme selectors */
.ai-ide-theme-light .ai-ide-theme-selector,
.ai-ide-theme-light .ai-ide-language-selector {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-ide-theme-light .ai-ide-theme-selector:hover,
.ai-ide-theme-light .ai-ide-language-selector:hover {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

.ai-ide-theme-selector:focus,
.ai-ide-language-selector:focus {
    border-color: #4a9eff;
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.ai-ide-btn {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 120px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.01em;
}

.ai-ide-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.ai-ide-btn:hover::before {
    width: 300px;
    height: 300px;
}

.ai-ide-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ai-ide-btn-primary {
    background: linear-gradient(135deg, #4a9eff 0%, #357abd 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.35),
        0 2px 4px rgba(74, 158, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ai-ide-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #5aaeff 0%, #458acd 100%);
    box-shadow: 0 6px 16px rgba(74, 158, 255, 0.45),
        0 3px 6px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.ai-ide-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3),
        inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ai-ide-btn-secondary {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-ide-theme-dark .ai-ide-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #e8e8e8;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ai-ide-theme-dark .ai-ide-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.ai-ide-theme-light .ai-ide-btn-secondary {
    background: #ffffff;
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ai-ide-theme-light .ai-ide-btn-secondary:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}

.ai-ide-btn-secondary:active:not(:disabled) {
    transform: translateY(0);
}

.ai-ide-main-content {
    display: flex;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    width: 100%;
    transition: background 0.3s ease;
    align-items: stretch;
}

.ai-ide-theme-dark .ai-ide-main-content {
    background: #1e1e1e;
}

.ai-ide-theme-light .ai-ide-main-content {
    background: #ffffff;
}

.ai-ide-editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #3c3c3c;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
    height: 100%;
    min-height: 0;
}

.ai-ide-theme-dark .ai-ide-editor-panel {
    background: #1e1e1e;
    border-right-color: #3c3c3c;
}

.ai-ide-theme-light .ai-ide-editor-panel {
    background: #ffffff;
    border-right-color: #ddd;
}

.ai-ide-editor-toolbar {
    padding: 12px 20px;
    border-bottom: 1px solid #3c3c3c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.ai-ide-theme-dark .ai-ide-editor-toolbar {
    background: #252526;
    border-bottom-color: #3c3c3c;
    color: #cccccc;
}

.ai-ide-theme-light .ai-ide-editor-toolbar {
    background: #f8f9fa;
    border-bottom-color: #ddd;
    color: #333;
}

.ai-ide-file-name {
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    transition: color 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-file-name {
    color: #d4d4d4;
}

.ai-ide-theme-light .ai-ide-file-name {
    color: #333;
}

.ai-ide-file-name::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a9eff'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.8;
}

/* Make file name clickable to rename */
.ai-ide-file-name {
    cursor: pointer;
}

.ai-ide-file-name:hover {
    color: #60a5fa;
}

/* Inline input for renaming file */
.ai-ide-file-name-input {
    font-weight: 500;
    font-size: 13px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #60a5fa;
    border-radius: 4px;
    color: #d4d4d4;
    padding: 4px 8px;
    outline: none;
    min-width: 150px;
}

.ai-ide-line-count {
    font-size: 12px;
    color: #858585;
    font-weight: 500;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.ai-ide-code-editor {
    display: none;
}

.CodeMirror {
    flex: 1;
    font-size: 14px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    line-height: 1.6;
    cursor: text !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    transition: background 0.3s ease, color 0.3s ease;
    min-height: 0;
}

.ai-ide-theme-dark .CodeMirror {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

.ai-ide-theme-light .CodeMirror {
    background: #ffffff !important;
    color: #333 !important;
}

.CodeMirror-scroll {
    cursor: text !important;
    pointer-events: auto !important;
    transition: background 0.3s ease;
}

.ai-ide-theme-dark .CodeMirror-scroll {
    background: #1e1e1e;
}

.ai-ide-theme-light .CodeMirror-scroll {
    background: #ffffff;
}

.CodeMirror-cursor {
    pointer-events: none !important;
}

.CodeMirror-readonly .CodeMirror-cursor {
    display: none !important;
}

.CodeMirror-readonly {
    pointer-events: none !important;
}

.CodeMirror-gutters {
    border-right: 1px solid #3c3c3c;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    backdrop-filter: blur(5px);
}

.ai-ide-theme-dark .CodeMirror-gutters {
    background: linear-gradient(180deg, #252526 0%, #1e1e1e 100%) !important;
    border-right-color: rgba(255, 255, 255, 0.08);
    color: #858585;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.ai-ide-theme-light .CodeMirror-gutters {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-right-color: rgba(0, 0, 0, 0.08);
    color: #666;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.02);
}

.CodeMirror-linenumber {
    color: #858585 !important;
    padding: 0 10px 0 6px;
    min-width: 24px;
    text-align: right;
    font-weight: 500;
    transition: color 0.2s ease;
}

.CodeMirror-linenumber:hover {
    color: #cccccc !important;
}

.ai-ide-theme-light .CodeMirror-linenumber {
    color: #999 !important;
}

.ai-ide-theme-light .CodeMirror-linenumber:hover {
    color: #666 !important;
}

.CodeMirror-cursor {
    border-left: 2px solid #aeafad;
    border-left-width: 2px;
    margin-left: -1px;
}

.CodeMirror-cursor.CodeMirror-overwrite {
    border-left: 0;
    border-bottom: 1px solid #aeafad;
}

.CodeMirror-selected {
    background: #264f78 !important;
}

.CodeMirror-focused .CodeMirror-selected {
    background: #214283 !important;
}

.CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
    background: #214283;
}

.CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.03) !important;
}

.CodeMirror-matchingbracket {
    background: rgba(0, 122, 204, 0.3) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 122, 204, 0.5);
    border-radius: 2px;
}

.CodeMirror-nonmatchingbracket {
    background: rgba(255, 0, 0, 0.2) !important;
    color: #f48771 !important;
}

.CodeMirror-foldgutter-open:after {
    content: '\25BE';
    color: #858585;
    font-size: 12px;
}

.CodeMirror-foldgutter-folded:after {
    content: '\25B8';
    color: #858585;
    font-size: 12px;
}

.CodeMirror-foldgutter {
    width: 15px;
}

/* Syntax highlighting colors - IDE-like */
.CodeMirror .cm-keyword {
    color: #c586c0 !important;
    font-weight: 500;
}

.CodeMirror .cm-def {
    color: #4ec9b0 !important;
}

.CodeMirror .cm-variable {
    color: #9cdcfe !important;
}

.CodeMirror .cm-variable-2 {
    color: #4fc1ff !important;
}

.CodeMirror .cm-variable-3 {
    color: #4ec9b0 !important;
}

.CodeMirror .cm-string {
    color: #ce9178 !important;
}

.CodeMirror .cm-string-2 {
    color: #6a9955 !important;
}

.CodeMirror .cm-number {
    color: #b5cea8 !important;
}

.CodeMirror .cm-atom {
    color: #569cd6 !important;
}

.CodeMirror .cm-operator {
    color: #d4d4d4 !important;
}

.CodeMirror .cm-comment {
    color: #6a9955 !important;
    font-style: italic;
}

.CodeMirror .cm-meta {
    color: #569cd6 !important;
}

.CodeMirror .cm-tag {
    color: #569cd6 !important;
}

.CodeMirror .cm-attribute {
    color: #92c5f7 !important;
}

.CodeMirror .cm-property {
    color: #9cdcfe !important;
}

.CodeMirror .cm-qualifier {
    color: #d7ba7d !important;
}

.CodeMirror .cm-builtin {
    color: #4ec9b0 !important;
}

.CodeMirror .cm-type {
    color: #4ec9b0 !important;
}

.CodeMirror .cm-function {
    color: #dcdcaa !important;
}

.CodeMirror .cm-header {
    color: #569cd6 !important;
}

.CodeMirror .cm-link {
    color: #569cd6 !important;
    text-decoration: underline;
}

.CodeMirror .cm-error {
    color: #f48771 !important;
    background: rgba(244, 135, 113, 0.1);
}

/* Scrollbar styling */
.CodeMirror-scrollbar-filler {
    background: #1e1e1e;
}

.CodeMirror .CodeMirror-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.CodeMirror .CodeMirror-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.CodeMirror .CodeMirror-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.CodeMirror .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

.CodeMirror .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Selection highlight */
.CodeMirror-selectedtext {
    background: #214283 !important;
}

/* Active line highlight */
.CodeMirror-activeline .CodeMirror-linenumber {
    color: #cccccc !important;
    font-weight: 600;
}

/* Search matches */
.CodeMirror-searching {
    background: rgba(255, 255, 0, 0.3) !important;
}

.CodeMirror-searching.CodeMirror-searching {
    border-bottom: 1px solid #ffd700;
}

/* Overlay scrollbars */
.CodeMirror-overlay {
    background: rgba(0, 0, 0, 0.1);
}

/* Ensure syntax highlighting takes precedence over theme */
.CodeMirror .cm-keyword,
.CodeMirror .cm-def,
.CodeMirror .cm-variable,
.CodeMirror .cm-variable-2,
.CodeMirror .cm-variable-3,
.CodeMirror .cm-string,
.CodeMirror .cm-string-2,
.CodeMirror .cm-number,
.CodeMirror .cm-atom,
.CodeMirror .cm-operator,
.CodeMirror .cm-comment,
.CodeMirror .cm-meta,
.CodeMirror .cm-tag,
.CodeMirror .cm-attribute,
.CodeMirror .cm-property,
.CodeMirror .cm-qualifier,
.CodeMirror .cm-builtin,
.CodeMirror .cm-type,
.CodeMirror .cm-function,
.CodeMirror .cm-header,
.CodeMirror .cm-link,
.CodeMirror .cm-error {
    font-weight: inherit !important;
}

/* Additional IDE features */
.CodeMirror .CodeMirror-lines {
    padding: 12px 0;
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
    padding: 0 12px;
}

/* Indent guides */
.CodeMirror .CodeMirror-line {
    position: relative;
}

/* Better focus state */
.CodeMirror-focused {
    outline: none;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Whitespace visualization (optional - can be enabled) */
.CodeMirror .cm-tab {
    border-left: 1px dotted rgba(255, 255, 255, 0.1);
    margin-left: -1px;
}

/* Better bracket matching */
.CodeMirror-matchingtag {
    background: rgba(0, 122, 204, 0.2) !important;
    border-bottom: 1px solid rgba(0, 122, 204, 0.5);
}

.ai-ide-review-panel {
    width: 45%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background 0.3s ease;
    height: 100%;
    min-height: 0;
    align-self: stretch;
}

.ai-ide-theme-dark .ai-ide-review-panel {
    background: linear-gradient(135deg, #252526 0%, #2a2a2a 100%);
}

.ai-ide-theme-light .ai-ide-review-panel {
    background: #f8f9fa;
}

.ai-ide-review-header {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.ai-ide-theme-dark .ai-ide-review-header {
    background: linear-gradient(135deg, #2d2d30 0%, #252526 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.ai-ide-theme-light .ai-ide-review-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
}

.ai-ide-review-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    transition: background 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-header::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.ai-ide-theme-light .ai-ide-review-header::after {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.ai-ide-review-header h2 {
    font-size: 15px;
    margin: 0 0 6px 0;
    font-weight: 600;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-header h2 {
    color: #ffffff;
}

.ai-ide-theme-light .ai-ide-review-header h2 {
    color: #333;
}

.ai-ide-review-header h2::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #4a9eff 0%, #357abd 100%);
    border-radius: 2px;
}

.ai-ide-review-status {
    font-size: 12px;
    font-weight: 400;
    transition: color 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-status {
    color: #a0a0a0;
}

.ai-ide-theme-light .ai-ide-review-status {
    color: #666;
}

.ai-ide-review-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: thin;
    transition: background 0.3s ease, scrollbar-color 0.3s ease;
    min-height: 0;
}

.ai-ide-theme-dark .ai-ide-review-content {
    background: #1e1e1e;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.ai-ide-theme-light .ai-ide-review-content {
    background: #ffffff;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.ai-ide-review-content::-webkit-scrollbar {
    width: 8px;
}

.ai-ide-review-content::-webkit-scrollbar-track {
    background: transparent;
}

.ai-ide-theme-dark .ai-ide-review-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.ai-ide-theme-dark .ai-ide-review-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ai-ide-theme-light .ai-ide-review-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.ai-ide-theme-light .ai-ide-review-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.ai-ide-review-placeholder {
    text-align: center;
    padding: 60px 20px;
    transition: color 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-placeholder {
    color: #6a6a6a;
}

.ai-ide-theme-light .ai-ide-review-placeholder {
    color: #999;
}

.ai-ide-review-placeholder svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.4;
    stroke: #4a9eff;
    filter: drop-shadow(0 2px 4px rgba(74, 158, 255, 0.2));
}

.ai-ide-review-placeholder h3 {
    color: #b0b0b0;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.ai-ide-review-placeholder p {
    color: #858585;
    font-size: 13px;
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

.ai-ide-review-result {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-ide-review-section {
    margin-bottom: 20px;
    padding: 22px;
    border-radius: 12px;
    border-left: 4px solid #4a9eff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-section {
    background: linear-gradient(135deg, rgba(45, 45, 48, 0.7) 0%, rgba(37, 37, 38, 0.7) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ai-ide-theme-light .ai-ide-review-section {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ai-ide-review-section:hover {
    transform: translateY(-2px);
}

.ai-ide-theme-dark .ai-ide-review-section:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ai-ide-theme-light .ai-ide-review-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.ai-ide-review-section h3 {
    font-size: 14px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.2px;
    transition: color 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-section h3 {
    color: #ffffff;
}

.ai-ide-theme-light .ai-ide-review-section h3 {
    color: #333;
}

.ai-ide-review-section h3 svg,
.ai-ide-review-section h3 .ai-ide-icon-inline {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ai-ide-review-section p {
    line-height: 1.7;
    margin-bottom: 10px;
    font-size: 13px;
    transition: color 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-section p {
    color: #d0d0d0;
}

.ai-ide-theme-light .ai-ide-review-section p {
    color: #555;
}

.ai-ide-review-section ul,
.ai-ide-review-section ol {
    margin-left: 24px;
    line-height: 1.8;
    font-size: 13px;
    transition: color 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-review-section ul,
.ai-ide-theme-dark .ai-ide-review-section ol {
    color: #d0d0d0;
}

.ai-ide-theme-light .ai-ide-review-section ul,
.ai-ide-theme-light .ai-ide-review-section ol {
    color: #555;
}

.ai-ide-review-section li {
    margin-bottom: 6px;
}

.ai-ide-severity-high {
    border-left-color: #ff6b6b;
}

.ai-ide-theme-dark .ai-ide-severity-high {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.12) 0%, rgba(37, 37, 38, 0.7) 100%);
}

.ai-ide-theme-light .ai-ide-severity-high {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, #ffffff 100%);
    border-color: rgba(255, 107, 107, 0.2);
}

.ai-ide-severity-medium {
    border-left-color: #ffd93d;
}

.ai-ide-theme-dark .ai-ide-severity-medium {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.12) 0%, rgba(37, 37, 38, 0.7) 100%);
}

.ai-ide-theme-light .ai-ide-severity-medium {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.08) 0%, #ffffff 100%);
    border-color: rgba(255, 217, 61, 0.2);
}

.ai-ide-severity-low {
    border-left-color: #6bcf7f;
}

.ai-ide-theme-dark .ai-ide-severity-low {
    background: linear-gradient(135deg, rgba(107, 207, 127, 0.12) 0%, rgba(37, 37, 38, 0.7) 100%);
}

.ai-ide-theme-light .ai-ide-severity-low {
    background: linear-gradient(135deg, rgba(107, 207, 127, 0.08) 0%, #ffffff 100%);
    border-color: rgba(107, 207, 127, 0.2);
}

.ai-ide-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.ai-ide-badge-error {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
    box-shadow: 0 1px 3px rgba(255, 107, 107, 0.2);
}

.ai-ide-badge-warning {
    background: rgba(255, 217, 61, 0.15);
    color: #ffd93d;
    border: 1px solid rgba(255, 217, 61, 0.3);
    box-shadow: 0 1px 3px rgba(255, 217, 61, 0.2);
}

.ai-ide-badge-success {
    background: rgba(107, 207, 127, 0.15);
    color: #6bcf7f;
    border: 1px solid rgba(107, 207, 127, 0.3);
    box-shadow: 0 1px 3px rgba(107, 207, 127, 0.2);
}

.ai-ide-badge-info {
    background: rgba(74, 158, 255, 0.15);
    color: #4a9eff;
    border: 1px solid rgba(74, 158, 255, 0.3);
    box-shadow: 0 1px 3px rgba(74, 158, 255, 0.2);
}

.ai-ide-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #4a9eff;
    flex-direction: column;
    gap: 16px;
}

.ai-ide-spinner {
    width: 44px;
    height: 44px;
    border: 3.5px solid rgba(74, 158, 255, 0.15);
    border-top-color: #4a9eff;
    border-right-color: rgba(74, 158, 255, 0.5);
    border-radius: 50%;
    animation: spin 0.75s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    box-shadow: 0 0 20px rgba(74, 158, 255, 0.2);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.ai-ide-code-snippet {
    padding: 12px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    margin: 12px 0;
    overflow-x: auto;
    transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.ai-ide-theme-dark .ai-ide-code-snippet {
    background: rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #4a9eff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ai-ide-theme-light .ai-ide-code-snippet {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    border-left: 3px solid #4a9eff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-ide-stats-bar {
    padding: 14px 20px;
    background: linear-gradient(135deg, #2d2d30 0%, #252526 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ai-ide-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d0d0d0;
    font-weight: 500;
}

.ai-ide-stat-value {
    font-weight: 700;
    color: #4a9eff;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ai-ide-review-panel {
        width: 40%;
    }
}

@media (max-width: 1024px) {
    .ai-ide-main-content {
        flex-direction: column;
    }

    .ai-ide-editor-panel,
    .ai-ide-review-panel {
        width: 100%;
        border-right: none;
    }

    .ai-ide-editor-panel {
        min-height: 400px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .ai-ide-review-panel {
        min-height: 300px;
    }
}

@media (max-width: 1440px) {
    .ai-code-review-ide-container {
        max-width: calc(100% - 40px);
        margin: 20px auto;
    }
}

@media (max-width: 768px) {
    .ai-code-review-ide-container {
        max-width: calc(100% - 20px);
        margin: 15px auto;
        border-radius: 6px;
    }

    .ai-ide-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 18px;
        gap: 12px;
    }

    .ai-ide-title {
        font-size: 16px;
        width: 100%;
    }

    .ai-ide-header-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .ai-ide-language-selector {
        width: 100%;
        min-width: auto;
    }

    .ai-ide-btn {
        flex: 1;
        min-width: auto;
        width: 100%;
        font-size: 12px;
        padding: 10px 14px;
    }

    .ai-ide-main-content {
        min-height: 500px;
    }

    .ai-ide-editor-panel {
        min-height: 350px;
    }

    .ai-ide-review-panel {
        min-height: 250px;
    }

    .ai-ide-editor-toolbar {
        padding: 8px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ai-ide-file-name {
        font-size: 12px;
    }

    .ai-ide-line-count {
        font-size: 11px;
    }

    .CodeMirror {
        font-size: 13px;
    }

    .ai-ide-review-header {
        padding: 12px 16px;
    }

    .ai-ide-review-header h2 {
        font-size: 14px;
    }

    .ai-ide-review-status {
        font-size: 11px;
    }

    .ai-ide-review-content {
        padding: 16px;
    }

    .ai-ide-review-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .ai-ide-review-section h3 {
        font-size: 13px;
    }

    .ai-ide-review-section p {
        font-size: 12px;
    }

    .ai-ide-stats-bar {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 16px;
    }

    .ai-ide-stat {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .ai-ide-header {
        padding: 12px 16px;
    }

    .ai-ide-title {
        font-size: 15px;
    }

    .ai-ide-icon {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .ai-ide-btn {
        font-size: 11px;
        padding: 8px 12px;
        height: 36px;
    }

    .ai-ide-main-content {
        min-height: 450px;
    }

    .ai-ide-editor-panel {
        min-height: 300px;
    }

    .ai-ide-review-panel {
        min-height: 200px;
    }

    .ai-ide-editor-toolbar {
        padding: 6px 12px;
    }

    .ai-ide-review-content {
        padding: 12px;
    }

    .ai-ide-review-placeholder {
        padding: 40px 16px;
    }

    .ai-ide-review-placeholder svg {
        width: 48px;
        height: 48px;
    }

    .ai-ide-review-placeholder h3 {
        font-size: 16px;
    }

    .ai-ide-review-placeholder p {
        font-size: 12px;
    }

    .ai-ide-notification {
        right: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
        font-size: 12px;
        padding: 12px 16px;
    }
}

/* Notification */
.ai-ide-notification {
    position: fixed;
    top: 60px;
    right: 24px;
    border-radius: 10px;
    padding: 16px 24px;
    font-size: 13px;
    font-weight: 600;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-ide-theme-dark .ai-ide-notification {
    background: linear-gradient(135deg, #2d2d30 0%, #252526 100%);
    border: 1px solid rgba(107, 207, 127, 0.3);
    color: #6bcf7f;
}

.ai-ide-theme-light .ai-ide-notification {
    background: transparent;
    border: none;
    color: #15803D;
    box-shadow: none;
}

.ai-ide-notification {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-ide-theme-dark .ai-ide-notification.error {
    border-color: rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
}

.ai-ide-theme-light .ai-ide-notification.error {
    border-color: rgba(255, 107, 107, 0.4);
    color: #d32f2f;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.ai-ide-notification.hiding {
    animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Icon replacements */
.ai-ide-icon-inline {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Template items */
.ai-ide-template-item {
    transition: all 0.2s ease;
}

.ai-ide-template-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.ai-ide-template-item h3 {
    color: #4a9eff;
    margin-bottom: 12px;
}

/* Language selector optgroups */
.ai-ide-language-selector optgroup {
    font-weight: 600;
    color: #4a9eff;
}

.ai-ide-language-selector option {
    font-weight: 400;
    color: #e0e0e0;
}

/* Tabs */
.ai-ide-panel-tabs {
    display: flex;
    border-bottom: 1px solid #3c3c3c;
    background: #252526;
}

.ai-ide-tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: #858585;
    padding: 10px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.ai-ide-tab-btn:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.05);
}

.ai-ide-tab-btn.active {
    color: #fff;
    border-bottom-color: #007acc;
}

.ai-ide-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

/* Chat Interface */
.ai-ide-chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #1e1e1e;
}

.ai-ide-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ai-ide-chat-message {
    display: flex;
    gap: 10px;
    max-width: 90%;
}

.ai-ide-chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-ide-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #3c3c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ccc;
}

.ai-ide-chat-message.user .ai-ide-chat-avatar {
    background: #007acc;
    color: #fff;
}

.ai-ide-chat-bubble {
    background: #2d2d2d;
    padding: 10px 14px;
    border-radius: 12px;
    border-top-left-radius: 2px;
    color: #e0e0e0;
    font-size: 13px;
    line-height: 1.5;
}

.ai-ide-chat-message.user .ai-ide-chat-bubble {
    background: #007acc;
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 2px;
}

.ai-ide-chat-input-area {
    padding: 15px;
    border-top: 1px solid #3c3c3c;
    display: flex;
    gap: 10px;
    background: #252526;
}

#aiIdeChatInput {
    flex: 1;
    background: #3c3c3c;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    padding: 8px 12px;
    resize: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    max-height: 100px;
}

#aiIdeChatInput:focus {
    outline: none;
    border-color: #007acc;
}

#aiIdeChatSendBtn {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: #007acc;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

#aiIdeChatSendBtn:hover {
    background: #0062a3;
}

/* History List */
.ai-ide-history-list {
    padding: 10px;
    overflow-y: auto;
    height: 100%;
}

.ai-ide-history-item {
    background: rgba(17, 24, 39, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.ai-ide-history-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(17, 24, 39, 0.92);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ai-ide-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ai-ide-history-action {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.ai-ide-history-time {
    font-size: 12px;
    color: #a3aab8;
    font-weight: 500;
}

.ai-ide-history-preview {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.ai-ide-history-actions {
    display: flex;
    gap: 8px;
}

.ai-ide-history-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #b0b0c0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-history-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.ai-ide-history-btn.view-results {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.ai-ide-history-btn.view-results:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

/* --- History Tab Premium Redesign --- */

/* Search & Filter Bar */
.ai-ide-history-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}

.ai-ide-history-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
}

.ai-ide-history-search svg {
    color: #6b7280;
    flex-shrink: 0;
}

.ai-ide-history-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #e5e7eb;
    font-size: 13px;
}

.ai-ide-history-search input::placeholder {
    color: #6b7280;
}

.ai-ide-history-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-ide-history-filter {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-history-filter:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

.ai-ide-history-filter.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

/* Date Group Headers */
.ai-ide-history-group {
    margin-bottom: 16px;
}

.ai-ide-history-group-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 6px 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Premium History Card */
.ai-ide-history-card {
    position: relative;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.ai-ide-history-card:hover {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

/* Selected state with left rail */
.ai-ide-history-card.is-selected {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 12px 32px rgba(0, 0, 0, 0.4);
}

.ai-ide-history-card.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: #3b82f6;
    border-radius: 0 4px 4px 0;
}

/* Card Header */
.ai-ide-history-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ai-ide-history-title {
    font-size: 14px;
    font-weight: 650;
    color: #e5e7eb;
    letter-spacing: 0.2px;
}

.ai-ide-history-timestamp {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Action Badge */
.ai-ide-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
    margin-bottom: 10px;
}

.ai-ide-history-badge.review {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

.ai-ide-history-badge.security {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.ai-ide-history-badge.format {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.25);
    color: #d8b4fe;
}

.ai-ide-history-badge.template {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}

.ai-ide-history-badge.syntax {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

/* Code Preview */
.ai-ide-history-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.4;
    color: #cbd5e1;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

/* Quick Actions (hover reveal) */
.ai-ide-history-quick-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 140ms ease, max-height 200ms ease, margin-top 200ms ease, padding-top 200ms ease;
}

.ai-ide-history-card:hover .ai-ide-history-quick-actions {
    opacity: 1;
    max-height: 60px;
}

.ai-ide-history-quick-btn {
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-history-quick-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.ai-ide-history-quick-btn.primary {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.ai-ide-history-quick-btn.primary:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Empty state */
.ai-ide-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.ai-ide-history-empty svg {
    margin-bottom: 25px;
    z-index: 100;
}

/* --- Refined Controls (Toolbar) --- */
.viz-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.viz-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.viz-control-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

.viz-control-label {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.viz-btn-mode {
    background: transparent;
    /* Toggle style */
    border: 1px solid transparent;
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.viz-btn-mode:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.viz-btn-mode.active {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
    font-weight: 600;
}

.viz-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #cbd5e1;
    cursor: pointer;
    user-select: none;
}

.viz-toggle input {
    accent-color: #3b82f6;
}

.viz-search-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 8px;
    color: #fff;
    font-size: 0.8rem;
    width: 140px;
    transition: width 0.2s;
}

.viz-search-input:focus {
    width: 180px;
    border-color: #3b82f6;
    outline: none;
}


/* Dropdown Menu */
.ai-ide-dropdown-container {
    position: relative;
    display: inline-block;
    /* Prevent browser extensions from interfering */
    pointer-events: auto;
    user-select: none;
}

.ai-ide-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 220px;
    background: #1e1e22;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 10000;
    margin-top: 8px;
    padding: 8px 0;
    /* Prevent browser extensions from interfering */
    pointer-events: auto;
    user-select: none;
}

.ai-ide-dropdown-menu.show {
    display: block;
}

.ai-ide-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    background: none;
    border: none;
    color: #e0e0e0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    transition: background 0.15s ease;
    white-space: nowrap;
    /* Prevent browser extensions from interfering */
    pointer-events: auto;
    user-select: none;
    /* Prevent text selection that might trigger extensions */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ai-ide-dropdown-item:hover {
    background: rgba(74, 158, 255, 0.15);
    color: #fff;
}

/* Empty State */
.ai-ide-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    text-align: center;
    padding: 20px;
}

.ai-ide-empty-state svg {
    margin-bottom: 15px;
    color: #444;
}

/* Agentic Tools Styles */
.ai-ide-agent-tool-container {
    padding: 20px;
    overflow-y: auto;
    height: 100%;
}

.ai-ide-agent-tool-container h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff;
    font-size: 16px;
}

.ai-ide-description {
    color: #888;
    margin-bottom: 20px;
    font-size: 13px;
}

.ai-ide-form-group {
    margin-bottom: 15px;
}

.ai-ide-form-group label {
    display: block;
    margin-bottom: 5px;
    color: #ccc;
    font-size: 13px;
    font-weight: 600;
}

.ai-ide-textarea {
    width: 100%;
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    color: #d4d4d4;
    padding: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    resize: vertical;
}

.ai-ide-textarea:focus {
    outline: none;
    border-color: #007acc;
}

.ai-ide-result-box {
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    padding: 15px;
    margin-top: 15px;
    position: relative;
}

.ai-ide-result-box pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: #d4d4d4;
}

.ai-ide-copy-btn-small {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 4px 8px;
    font-size: 11px;
}

/* Override absolute positioning for buttons in the actions bar */
.ai-ide-result-actions .ai-ide-copy-btn-small {
    position: static;
    font-size: 13px;
    padding: 8px 12px;
}

.ai-ide-debug-content {
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    border-radius: 4px;
    padding: 15px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: #d4d4d4;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Chat Styles */
.ai-ide-chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.ai-ide-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-ide-chat-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
}

.ai-ide-chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-ide-chat-message.system {
    align-self: flex-start;
}

.ai-ide-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4a9eff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.ai-ide-chat-bubble {
    background: #3c3c3c;
    padding: 12px 16px;
    border-radius: 12px;
    color: #e8e8e8;
    line-height: 1.5;
    font-size: 14px;
}

.ai-ide-chat-message.user .ai-ide-chat-bubble {
    background: #4a9eff;
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-ide-chat-message.system .ai-ide-chat-bubble {
    background: #3c3c3c;
    border-bottom-left-radius: 4px;
}

.ai-ide-theme-light .ai-ide-chat-bubble {
    background: #f1f3f5;
    color: #333;
}

.ai-ide-theme-light .ai-ide-chat-message.user .ai-ide-chat-bubble {
    background: #4a9eff;
    color: white;
}

.ai-ide-chat-input-area {
    padding: 16px;
    border-top: 1px solid #3c3c3c;
    display: flex;
    gap: 10px;
    background: #252526;
}

.ai-ide-theme-light .ai-ide-chat-input-area {
    border-top-color: #ddd;
    background: #f8f9fa;
}

.ai-ide-chat-input-area textarea {
    flex: 1;
    background: #1e1e1e;
    border: 1px solid #3c3c3c;
    border-radius: 8px;
    padding: 10px;
    color: #e8e8e8;
    resize: none;
    height: 40px;
    font-family: inherit;
}

.ai-ide-theme-light .ai-ide-chat-input-area textarea {
    background: #ffffff;
    border-color: #ddd;
    color: #333;
}

.ai-ide-chat-input-area button {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #4a9eff;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-ide-chat-input-area button:hover {
    background: #357abd;
}

/* ========================================
   UI/UX IMPROVEMENTS - Phase 1, 2, 3
   ======================================== */

/* Enhanced Empty State */
.ai-ide-empty-state-enhanced {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 300px;
}

.ai-ide-empty-icon {
    margin-bottom: 20px;
    opacity: 0.7;
    color: #4a9eff;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.ai-ide-empty-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
}

.ai-ide-theme-dark .ai-ide-empty-title {
    color: #e8e8e8;
}

.ai-ide-theme-light .ai-ide-empty-title {
    color: #1a1a1a;
}

.ai-ide-empty-description {
    font-size: 14px;
    margin: 0 0 24px 0;
    max-width: 280px;
    line-height: 1.5;
}

.ai-ide-theme-dark .ai-ide-empty-description {
    color: #9ca3af;
}

.ai-ide-theme-light .ai-ide-empty-description {
    color: #6b7280;
}

.ai-ide-empty-cta {
    font-size: 15px;
    padding: 14px 32px;
    min-width: 180px;
    height: 48px;
    margin-bottom: 20px;
}

.ai-ide-empty-secondary-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.ai-ide-empty-divider {
    color: #4b5563;
    font-size: 12px;
}

.ai-ide-btn-ghost {
    background: transparent;
    border: none;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ai-ide-theme-dark .ai-ide-btn-ghost {
    color: #9ca3af;
}

.ai-ide-theme-light .ai-ide-btn-ghost {
    color: #6b7280;
}

.ai-ide-btn-ghost:hover {
    background: rgba(74, 158, 255, 0.1);
    color: #4a9eff;
}

.ai-ide-empty-helper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    padding: 10px 16px;
    border-radius: 20px;
}

.ai-ide-theme-dark .ai-ide-empty-helper {
    background: rgba(255, 255, 255, 0.05);
    color: #6b7280;
}

.ai-ide-theme-light .ai-ide-empty-helper {
    background: rgba(0, 0, 0, 0.03);
    color: #9ca3af;
}

.ai-ide-helper-timing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.ai-ide-helper-separator {
    opacity: 0.5;
}

/* Status Bar */
.ai-ide-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 16px;
    font-size: 12px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-ide-theme-dark .ai-ide-status-bar {
    background: linear-gradient(135deg, #1e1e1e 0%, #252526 100%);
    color: #9ca3af;
}

.ai-ide-theme-light .ai-ide-status-bar {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #6b7280;
    border-top-color: rgba(0, 0, 0, 0.08);
}

.ai-ide-status-left,
.ai-ide-status-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ai-ide-status-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
    cursor: default;
}

.ai-ide-status-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ai-ide-theme-light .ai-ide-status-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.ai-ide-status-item .status-icon {
    font-size: 11px;
}

.ai-ide-status-item.status-success {
    color: #10b981;
}

.ai-ide-status-item.status-warning {
    color: #f59e0b;
}

.ai-ide-status-item.status-error {
    color: #ef4444;
}

.ai-ide-status-item.status-running {
    color: #4a9eff;
}

/* Button Groups with Separators */
.ai-ide-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-ide-toolbar-divider {
    width: 1px;
    height: 24px;
    margin: 0 8px;
}

.ai-ide-theme-dark .ai-ide-toolbar-divider {
    background: rgba(255, 255, 255, 0.15);
}

.ai-ide-theme-light .ai-ide-toolbar-divider {
    background: rgba(0, 0, 0, 0.12);
}

/* Destructive Button (Clear) */
.ai-ide-btn-destructive {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-ide-theme-dark .ai-ide-btn-destructive {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.ai-ide-theme-dark .ai-ide-btn-destructive:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.ai-ide-theme-light .ai-ide-btn-destructive {
    background: rgba(239, 68, 68, 0.05);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

.ai-ide-theme-light .ai-ide-btn-destructive:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Accessibility - Enhanced Focus Rings */
.ai-ide-btn:focus-visible,
.ai-ide-tab-btn:focus-visible,
.ai-ide-theme-selector:focus-visible,
.ai-ide-language-selector:focus-visible {
    outline: 2px solid #4a9eff;
    outline-offset: 2px;
}

/* Improved Tab Contrast */
.ai-ide-tab-btn {
    color: #a3a3a3;
}

.ai-ide-theme-light .ai-ide-tab-btn {
    color: #737373;
}

/* Undo Toast */
.ai-ide-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10001;
    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ai-ide-theme-dark .ai-ide-undo-toast {
    background: linear-gradient(135deg, #2d2d30 0%, #252526 100%);
    color: #e8e8e8;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-ide-theme-light .ai-ide-undo-toast {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.ai-ide-undo-toast button {
    background: #4a9eff;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ai-ide-undo-toast button:hover {
    background: #357abd;
}

.ai-ide-undo-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #4a9eff;
    border-radius: 0 0 10px 10px;
    animation: shrink 5s linear forwards;
}

@keyframes slideInUp {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes shrink {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Resizable Panel with Drag Handle */
.ai-ide-panel-resizer {
    width: 6px;
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.ai-ide-theme-dark .ai-ide-panel-resizer {
    background: #3c3c3c;
}

.ai-ide-theme-light .ai-ide-panel-resizer {
    background: #ddd;
}

.ai-ide-panel-resizer:hover,
.ai-ide-panel-resizer.resizing {
    background: #4a9eff;
}

.ai-ide-panel-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 40px;
    border-left: 1px dotted rgba(255, 255, 255, 0.3);
    border-right: 1px dotted rgba(255, 255, 255, 0.3);
}

/* Focus Mode */
.ai-ide-focus-mode .ai-ide-review-panel,
.ai-ide-focus-mode .ai-ide-panel-resizer {
    display: none;
}

.ai-ide-focus-mode .ai-ide-editor-panel {
    border-right: none;
}

.ai-ide-focus-btn {
    min-width: auto;
    width: 40px;
    padding: 0;
}

/* Selection Toolbar */
.ai-ide-selection-toolbar {
    position: absolute;
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.15s ease;
}

.ai-ide-theme-dark .ai-ide-selection-toolbar {
    background: #2d2d30;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-ide-theme-light .ai-ide-selection-toolbar {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ai-ide-selection-btn {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-theme-dark .ai-ide-selection-btn {
    background: transparent;
    color: #e0e0e0;
}

.ai-ide-theme-dark .ai-ide-selection-btn:hover {
    background: rgba(74, 158, 255, 0.2);
    color: #4a9eff;
}

.ai-ide-theme-light .ai-ide-selection-btn {
    background: transparent;
    color: #333;
}

.ai-ide-theme-light .ai-ide-selection-btn:hover {
    background: rgba(74, 158, 255, 0.1);
    color: #357abd;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Export Dropdown */
.ai-ide-export-menu {
    min-width: 220px;
}

.ai-ide-dropdown-item svg {
    margin-right: 8px;
}

/* Review Summary Header */
.ai-ide-review-summary {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-ide-theme-dark .ai-ide-review-summary {
    background: rgba(74, 158, 255, 0.05);
}

.ai-ide-theme-light .ai-ide-review-summary {
    background: rgba(74, 158, 255, 0.03);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.ai-ide-review-summary .summary-total {
    font-size: 16px;
    font-weight: 600;
}

.ai-ide-theme-dark .ai-ide-review-summary .summary-total {
    color: #e8e8e8;
}

.ai-ide-theme-light .ai-ide-review-summary .summary-total {
    color: #1a1a1a;
}

.ai-ide-summary-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-ide-filter-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-theme-dark .ai-ide-filter-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #a0a0a0;
    border-color: rgba(255, 255, 255, 0.1);
}

.ai-ide-theme-dark .ai-ide-filter-btn:hover,
.ai-ide-theme-dark .ai-ide-filter-btn.active {
    background: rgba(74, 158, 255, 0.15);
    color: #4a9eff;
    border-color: rgba(74, 158, 255, 0.3);
}

.ai-ide-theme-light .ai-ide-filter-btn {
    background: rgba(0, 0, 0, 0.04);
    color: #666;
    border-color: rgba(0, 0, 0, 0.1);
}

.ai-ide-theme-light .ai-ide-filter-btn:hover,
.ai-ide-theme-light .ai-ide-filter-btn.active {
    background: rgba(74, 158, 255, 0.1);
    color: #357abd;
    border-color: rgba(74, 158, 255, 0.3);
}

/* Issue Item - Clickable */
.ai-ide-issue-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-issue-item:hover {
    transform: translateX(4px);
}

.ai-ide-issue-item .issue-line-link {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

.ai-ide-theme-dark .ai-ide-issue-item .issue-line-link {
    background: rgba(74, 158, 255, 0.15);
    color: #4a9eff;
}

.ai-ide-theme-light .ai-ide-issue-item .issue-line-link {
    background: rgba(74, 158, 255, 0.1);
    color: #357abd;
}

/* Code Highlight Marker */
.ai-ide-highlight-line {
    background: rgba(74, 158, 255, 0.15) !important;
    border-left: 3px solid #4a9eff !important;
}

/* More Menu Button */
.ai-ide-more-menu-btn {
    min-width: 40px;
    width: 40px;
    padding: 0;
    font-size: 18px;
    letter-spacing: 1px;
}

/* ========================================
   PROFESSIONAL POLISH - Premium UI Refinement
   ======================================== */

/* --- Two-Tone Dark Backgrounds --- */
.ai-ide-theme-dark.ai-code-review-ide-container {
    background: #0d0d0f;
}

.ai-ide-theme-dark .ai-ide-header {
    background: #141418;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-ide-theme-dark .ai-ide-main-content {
    background: #0d0d0f;
}

.ai-ide-theme-dark .ai-ide-editor-panel {
    background: #0d0d0f;
}

.ai-ide-theme-dark .ai-ide-review-panel {
    background: #141418;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-ide-theme-dark .ai-ide-status-bar {
    background: #0a0a0c;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ai-ide-theme-dark .ai-ide-panel-tabs {
    background: #18181c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Pill/Segmented Button Group --- */
.ai-ide-pill-group {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.ai-ide-pill-group .ai-ide-pill-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ai-ide-pill-group .ai-ide-pill-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e0e0e0;
}

.ai-ide-pill-group .ai-ide-pill-btn.active {
    background: rgba(74, 158, 255, 0.15);
    color: #4a9eff;
}

.ai-ide-pill-group .ai-ide-pill-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Primary CTA Enhancement --- */
.ai-ide-btn-primary.ai-ide-btn-hero {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #4a9eff 0%, #2d7fd3 100%);
    box-shadow:
        0 4px 12px rgba(74, 158, 255, 0.4),
        0 0 0 1px rgba(74, 158, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ai-ide-btn-primary.ai-ide-btn-hero:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 6px 20px rgba(74, 158, 255, 0.5),
        0 0 0 1px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* --- Icon-Only Buttons --- */
.ai-ide-btn-icon {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-ide-btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.12);
}

.ai-ide-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* Home button specific styles */
a.ai-ide-home-btn {
    text-decoration: none;
    margin-right: 12px;
}

a.ai-ide-home-btn:hover {
    color: #60a5fa;
}

/* --- Right Panel Surface --- */
.ai-ide-review-panel {
    display: flex;
    flex-direction: column;
}

.ai-ide-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-ide-panel-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #e8e8e8;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Results Summary Card --- */
.ai-ide-results-summary {
    padding: 16px 20px;
    background: rgba(74, 158, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-ide-summary-count {
    font-size: 24px;
    font-weight: 700;
    color: #e8e8e8;
    margin-bottom: 12px;
}

.ai-ide-summary-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-ide-severity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.ai-ide-severity-badge.critical {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.ai-ide-severity-badge.high {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.ai-ide-severity-badge.medium {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.ai-ide-severity-badge.low {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* --- Filter Chips --- */
.ai-ide-filter-chips {
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-ide-chip {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
}

.ai-ide-chip.active {
    background: rgba(74, 158, 255, 0.15);
    color: #4a9eff;
    border-color: rgba(74, 158, 255, 0.3);
}

/* --- Findings List --- */
.ai-ide-findings-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Finding Item - Premium Card Surface */
.ai-ide-finding-item {
    position: relative;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(17, 24, 39, 0.75);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.ai-ide-finding-item:hover {
    background: rgba(17, 24, 39, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

/* Selected state */
.ai-ide-finding-item.is-selected {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18), 0 18px 45px rgba(0, 0, 0, 0.45);
    background: rgba(17, 24, 39, 0.98);
}

/* Focus state for keyboard nav */
.ai-ide-finding-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.55), 0 18px 45px rgba(0, 0, 0, 0.45);
}

/* Severity wash on card (subtle) */
.ai-ide-finding-item.critical {
    background-image: linear-gradient(180deg, rgba(239, 68, 68, 0.06), rgba(0, 0, 0, 0));
}

.ai-ide-finding-item.high {
    background-image: linear-gradient(180deg, rgba(249, 115, 22, 0.06), rgba(0, 0, 0, 0));
}

.ai-ide-finding-item.medium {
    background-image: linear-gradient(180deg, rgba(245, 158, 11, 0.06), rgba(0, 0, 0, 0));
}

.ai-ide-finding-item.low {
    background-image: linear-gradient(180deg, rgba(34, 197, 94, 0.06), rgba(0, 0, 0, 0));
}

.ai-ide-finding-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

/* Severity Indicator -> Left Rail */
.ai-ide-finding-indicator {
    width: 4px;
    height: auto;
    align-self: stretch;
    border-radius: 999px;
    margin-top: 0;
    flex-shrink: 0;
    opacity: 0.95;
}

.ai-ide-finding-indicator.critical {
    background: #ef4444;
}

.ai-ide-finding-indicator.high {
    background: #f97316;
}

.ai-ide-finding-indicator.medium {
    background: #f59e0b;
}

.ai-ide-finding-indicator.low {
    background: #22c55e;
}

/* Finding Title - Stronger hierarchy */
.ai-ide-finding-title {
    font-size: 14px;
    font-weight: 650;
    color: #e5e7eb;
    letter-spacing: 0.2px;
    line-height: 1.2;
    flex: 1;
}

/* Finding Meta - More readable */
.ai-ide-finding-meta {
    font-size: 12px;
    color: #a3aab8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    margin-top: 6px;
}

/* Line Badge - Chip style */
.ai-ide-finding-line {
    background: rgba(74, 158, 255, 0.14);
    color: #93c5fd;
    border: 1px solid rgba(74, 158, 255, 0.28);
    padding: 3px 8px;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
}

/* Fix Suggestion - Callout style */
.ai-ide-finding-fix {
    margin-left: 0;
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.5;
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

/* --- Progress Stepper --- */
.ai-ide-progress-stepper {
    padding: 24px 20px;
}

.ai-ide-progress-title {
    font-size: 14px;
    font-weight: 600;
    color: #e8e8e8;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-ide-progress-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ai-ide-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #6b7280;
}

.ai-ide-step.completed {
    color: #22c55e;
}

.ai-ide-step.active {
    color: #4a9eff;
}

.ai-ide-step.pending {
    color: #4b5563;
}

.ai-ide-step-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.ai-ide-step.active .ai-ide-step-icon {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.ai-ide-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.ai-ide-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4a9eff, #2dd4bf);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.ai-ide-progress-fill.indeterminate {
    width: 30%;
    animation: indeterminate 1.5s ease-in-out infinite;
}

@keyframes indeterminate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* --- Empty State Refinement --- */
.ai-ide-empty-state-pro {
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ai-ide-empty-icon-large {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    opacity: 0.3;
    color: #4a9eff;
}

.ai-ide-empty-title-pro {
    font-size: 16px;
    font-weight: 600;
    color: #e8e8e8;
    margin: 0 0 8px 0;
}

.ai-ide-empty-desc-pro {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 24px 0;
    max-width: 260px;
    line-height: 1.5;
}

.ai-ide-empty-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    text-align: left;
}

.ai-ide-empty-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #9ca3af;
}

.ai-ide-empty-feature svg {
    width: 14px;
    height: 14px;
    color: #22c55e;
}

.ai-ide-empty-tip {
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
}

.ai-ide-empty-tip kbd {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', monospace;
    font-size: 11px;
    color: #9ca3af;
}

/* --- Micro-Interactions --- */
.ai-ide-btn:not(:disabled):active {
    transform: translateY(0) scale(0.98);
}

.ai-ide-btn-secondary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Smooth tab transitions */
.ai-ide-tab-btn {
    position: relative;
    transition: all 0.2s ease;
}

.ai-ide-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #4a9eff;
    transition: all 0.2s ease;
    transform: translateX(-50%);
}

.ai-ide-tab-btn.active::after {
    width: 100%;
}

/* --- Consistent 8px Spacing --- */
.ai-ide-header-actions {
    gap: 8px;
}

.ai-ide-btn-group {
    gap: 4px;
}

.ai-ide-toolbar-divider {
    margin: 0 8px;
}

/* --- Tooltip Enhancement --- */
[title] {
    position: relative;
}

.ai-ide-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f1f23;
    color: #e8e8e8;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-ide-tooltip kbd {
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 6px;
    font-size: 10px;
}

/* --- Header Refinement --- */
.ai-ide-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Workspace/file name */
.ai-ide-workspace-name {
    font-size: 13px;
    color: #6b7280;
    margin-left: 8px;
}

.ai-ide-workspace-name::before {
    content: '·';
    margin-right: 8px;
    color: #4b5563;
}

/* --- Light Theme Overrides --- */
.ai-ide-theme-light .ai-ide-pill-group {
    background: rgba(0, 0, 0, 0.04);
}

.ai-ide-theme-light .ai-ide-pill-btn {
    color: #6b7280;
}

.ai-ide-theme-light .ai-ide-pill-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
}

.ai-ide-theme-light .ai-ide-pill-btn.active {
    background: rgba(74, 158, 255, 0.1);
    color: #2563eb;
}

.ai-ide-theme-light .ai-ide-btn-icon {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: #374151;
}

.ai-ide-theme-light .ai-ide-btn-icon:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111827;
}

.ai-ide-theme-light .ai-ide-finding-title {
    color: #111827;
}

.ai-ide-theme-light .ai-ide-empty-title-pro {
    color: #111827;
}

.ai-ide-theme-light .ai-ide-summary-count {
    color: #111827;
}

/* === COMPREHENSIVE LIGHT THEME IMPROVEMENTS === */
/* Following GitHub Light / VS Code Light+ principles */

/* Header - keep dark for contrast */
.ai-ide-theme-light .ai-ide-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    border-bottom: 1px solid #334155;
}

.ai-ide-theme-light .ai-ide-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Main content area - off-white to reduce glare */
.ai-ide-theme-light .ai-ide-main-content {
    background: #F1F5F9;
}

/* Editor panel - layered surface */
.ai-ide-theme-light .ai-ide-editor-panel {
    background: #FAFAFA;
    border-right: 1px solid #E2E8F0;
}

.ai-ide-theme-light .ai-ide-editor-toolbar {
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
}

.ai-ide-theme-light .ai-ide-file-name {
    color: #0F172A;
    font-weight: 600;
}

.ai-ide-theme-light .ai-ide-line-count {
    color: #64748B;
}

/* === CODEMIRROR PROFESSIONAL LIGHT THEME === */

/* Editor background - off-white */
.ai-ide-theme-light .CodeMirror {
    background: #F8FAFC !important;
    color: #0F172A !important;
    font-family: 'Fira Code', 'SF Mono', 'Consolas', monospace;
}

/* Gutter - tinted background for visual column */
.ai-ide-theme-light .CodeMirror-gutters {
    background: #F1F5F9 !important;
    border-right: 1px solid #E2E8F0 !important;
}

/* Line numbers - stronger contrast */
.ai-ide-theme-light .CodeMirror-linenumber {
    color: #64748B !important;
    font-weight: 500;
}

/* Active line number - extra prominent */
.ai-ide-theme-light .CodeMirror-activeline .CodeMirror-linenumber {
    color: #0F172A !important;
    font-weight: 600;
}

/* Active line highlight - soft blue */
.ai-ide-theme-light .CodeMirror-activeline-background {
    background: #EEF2FF !important;
}

/* Selection highlight - blue 200 */
.ai-ide-theme-light .CodeMirror-selected {
    background: #BFDBFE !important;
}

.ai-ide-theme-light .CodeMirror-focused .CodeMirror-selected {
    background: #BFDBFE !important;
}

/* Cursor - strong visible */
.ai-ide-theme-light .CodeMirror-cursor {
    border-left: 2px solid #0F172A !important;
}

/* Bracket matching - soft yellow */
.ai-ide-theme-light .CodeMirror-matchingbracket {
    background: #FEF9C3 !important;
    color: #0F172A !important;
    font-weight: bold;
    outline: 1px solid #FDE68A;
}

.ai-ide-theme-light .CodeMirror-nonmatchingbracket {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

/* Find/Search matches */
.ai-ide-theme-light .CodeMirror-searching {
    background: #FDE68A !important;
    outline: 1px solid #F59E0B;
}

/* === SEMANTIC SYNTAX HIGHLIGHTING === */

/* Default text - near black */
.ai-ide-theme-light .cm-s-default .cm-variable,
.ai-ide-theme-light .CodeMirror .cm-variable {
    color: #0F172A !important;
}

/* Keywords - strong purple */
.ai-ide-theme-light .cm-s-default .cm-keyword,
.ai-ide-theme-light .CodeMirror .cm-keyword {
    color: #6D28D9 !important;
    font-weight: 600;
}

/* Strings - readable green */
.ai-ide-theme-light .cm-s-default .cm-string,
.ai-ide-theme-light .CodeMirror .cm-string,
.ai-ide-theme-light .cm-s-default .cm-string-2,
.ai-ide-theme-light .CodeMirror .cm-string-2 {
    color: #15803D !important;
}

/* Numbers - amber/brown */
.ai-ide-theme-light .cm-s-default .cm-number,
.ai-ide-theme-light .CodeMirror .cm-number {
    color: #B45309 !important;
}

/* Functions/Methods - strong blue */
.ai-ide-theme-light .cm-s-default .cm-def,
.ai-ide-theme-light .CodeMirror .cm-def,
.ai-ide-theme-light .cm-s-default .cm-property,
.ai-ide-theme-light .CodeMirror .cm-property {
    color: #1D4ED8 !important;
}

/* Types/Classes - teal */
.ai-ide-theme-light .cm-s-default .cm-type,
.ai-ide-theme-light .CodeMirror .cm-type,
.ai-ide-theme-light .cm-s-default .cm-builtin,
.ai-ide-theme-light .CodeMirror .cm-builtin,
.ai-ide-theme-light .cm-s-default .cm-tag,
.ai-ide-theme-light .CodeMirror .cm-tag {
    color: #0F766E !important;
}

/* Comments - cool gray, italic */
.ai-ide-theme-light .cm-s-default .cm-comment,
.ai-ide-theme-light .CodeMirror .cm-comment {
    color: #64748B !important;
    font-style: italic;
}

/* Operators/Punctuation - slate */
.ai-ide-theme-light .cm-s-default .cm-operator,
.ai-ide-theme-light .CodeMirror .cm-operator,
.ai-ide-theme-light .cm-s-default .cm-punctuation,
.ai-ide-theme-light .CodeMirror .cm-punctuation,
.ai-ide-theme-light .cm-s-default .cm-bracket,
.ai-ide-theme-light .CodeMirror .cm-bracket {
    color: #334155 !important;
}

/* Attributes - orange */
.ai-ide-theme-light .cm-s-default .cm-attribute,
.ai-ide-theme-light .CodeMirror .cm-attribute {
    color: #C2410C !important;
}

/* Atoms/Constants - purple */
.ai-ide-theme-light .cm-s-default .cm-atom,
.ai-ide-theme-light .CodeMirror .cm-atom {
    color: #7C3AED !important;
}

/* Meta/Decorators - gray */
.ai-ide-theme-light .cm-s-default .cm-meta,
.ai-ide-theme-light .CodeMirror .cm-meta {
    color: #475569 !important;
}

/* Errors */
.ai-ide-theme-light .cm-s-default .cm-error,
.ai-ide-theme-light .CodeMirror .cm-error {
    color: #DC2626 !important;
    text-decoration: underline wavy #DC2626;
}

/* Variable-2 (special vars) */
.ai-ide-theme-light .cm-s-default .cm-variable-2,
.ai-ide-theme-light .CodeMirror .cm-variable-2 {
    color: #1E40AF !important;
}

/* Variable-3 (types in some modes) */
.ai-ide-theme-light .cm-s-default .cm-variable-3,
.ai-ide-theme-light .CodeMirror .cm-variable-3 {
    color: #0F766E !important;
}

/* Qualifier */
.ai-ide-theme-light .cm-s-default .cm-qualifier,
.ai-ide-theme-light .CodeMirror .cm-qualifier {
    color: #6D28D9 !important;
}

/* Links */
.ai-ide-theme-light .cm-s-default .cm-link,
.ai-ide-theme-light .CodeMirror .cm-link {
    color: #2563EB !important;
    text-decoration: underline;
}

/* Headers (for markdown etc) */
.ai-ide-theme-light .cm-s-default .cm-header,
.ai-ide-theme-light .CodeMirror .cm-header {
    color: #1E3A8A !important;
    font-weight: bold;
}

/* === INDENT GUIDES & WHITESPACE === */
.ai-ide-theme-light .CodeMirror-ruler {
    border-left: 1px solid #E2E8F0;
}

/* Review panel */
.ai-ide-theme-light .ai-ide-review-panel {
    background: #FAFAFA;
    border-left: 1px solid #E2E8F0;
}

/* Tabs */
.ai-ide-theme-light .ai-ide-panel-tabs {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.ai-ide-theme-light .ai-ide-tab-btn {
    color: #64748b;
    font-weight: 500;
}

.ai-ide-theme-light .ai-ide-tab-btn:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.04);
}

.ai-ide-theme-light .ai-ide-tab-btn.active {
    color: #0f172a;
    font-weight: 600;
    background: #ffffff;
    box-shadow: 0 -2px 0 #3b82f6 inset;
}

/* Review header */
.ai-ide-theme-light .ai-ide-review-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ai-ide-theme-light .ai-ide-review-header h2 {
    color: #0f172a;
    font-weight: 700;
}

.ai-ide-theme-light .ai-ide-status {
    color: #64748b;
    background: transparent;
}

/* Review content */
.ai-ide-theme-light .ai-ide-review-content {
    background: #ffffff;
    color: #1e293b;
}

/* Review sections */
.ai-ide-theme-light .ai-ide-review-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ai-ide-theme-light .ai-ide-review-section:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.ai-ide-theme-light .ai-ide-review-section h3 {
    color: #0f172a;
    font-weight: 600;
}

.ai-ide-theme-light .ai-ide-review-section p {
    color: #334155;
    line-height: 1.6;
}

.ai-ide-theme-light .ai-ide-review-section ul,
.ai-ide-theme-light .ai-ide-review-section ol {
    color: #334155;
}

/* Code snippets */
.ai-ide-theme-light .ai-ide-code-snippet {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
}

/* Severity badges */
.ai-ide-theme-light .ai-ide-severity-high {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.ai-ide-theme-light .ai-ide-severity-medium {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.ai-ide-theme-light .ai-ide-severity-low {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Buttons */
.ai-ide-theme-light .ai-ide-btn-secondary {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.ai-ide-theme-light .ai-ide-btn-secondary:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}

/* Pill group */
.ai-ide-theme-light .ai-ide-pill-group {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.ai-ide-theme-light .ai-ide-pill-btn {
    color: #e2e8f0;
}

.ai-ide-theme-light .ai-ide-pill-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.ai-ide-theme-light .ai-ide-pill-btn.active {
    background: #3b82f6;
    color: #ffffff;
}

/* Language selector in header */
.ai-ide-theme-light .ai-ide-language-selector {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.ai-ide-theme-light .ai-ide-language-selector:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Light theme dropdown options */
.ai-ide-theme-light .ai-ide-language-selector option,
.ai-ide-theme-light .ai-ide-language-selector optgroup {
    background: #ffffff;
    color: #0F172A;
}

.ai-ide-theme-light .ai-ide-language-selector optgroup {
    font-weight: 600;
    color: #1D4ED8;
}

.ai-ide-theme-light .ai-ide-language-selector option {
    font-weight: 400;
    padding: 8px 12px;
}

.ai-ide-theme-light .ai-ide-language-selector option:hover,
.ai-ide-theme-light .ai-ide-language-selector option:checked {
    background: #EEF2FF;
}

/* Chat */
.ai-ide-theme-light .ai-ide-chat-container {
    background: #ffffff;
}

.ai-ide-theme-light .ai-ide-chat-messages {
    background: #f8fafc;
}

.ai-ide-theme-light .ai-ide-chat-bubble {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.ai-ide-theme-light .ai-ide-chat-message.user .ai-ide-chat-bubble {
    background: #3b82f6;
    color: #ffffff;
    border: none;
}

.ai-ide-theme-light .ai-ide-chat-input-area {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.ai-ide-theme-light .ai-ide-chat-input-area textarea {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #1e293b;
}

.ai-ide-theme-light .ai-ide-chat-input-area textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Empty state */
.ai-ide-theme-light .ai-ide-empty-state-pro {
    color: #64748b;
}

.ai-ide-theme-light .ai-ide-empty-icon-large {
    stroke: #94a3b8;
}

.ai-ide-theme-light .ai-ide-empty-title-pro {
    color: #0f172a !important;
}

.ai-ide-theme-light .ai-ide-empty-desc-pro {
    color: #64748b;
}

.ai-ide-theme-light .ai-ide-empty-feature {
    color: #475569;
}

.ai-ide-theme-light .ai-ide-empty-feature svg {
    stroke: #22c55e;
}

.ai-ide-theme-light .ai-ide-empty-tip {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.ai-ide-theme-light .ai-ide-empty-tip kbd {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Dropdown menus */
.ai-ide-theme-light .ai-ide-dropdown-menu {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.ai-ide-theme-light .ai-ide-dropdown-item {
    color: #374151;
}

.ai-ide-theme-light .ai-ide-dropdown-item:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Toolbar divider */
.ai-ide-theme-light .ai-ide-toolbar-divider {
    background: rgba(255, 255, 255, 0.2);
}

/* Filter chips */
.ai-ide-theme-light .ai-ide-chip {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.ai-ide-theme-light .ai-ide-chip:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.ai-ide-theme-light .ai-ide-chip.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Finding items */
.ai-ide-theme-light .ai-ide-finding-item {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ai-ide-theme-light .ai-ide-finding-item:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ai-ide-theme-light .ai-ide-finding-item.is-selected {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Severity wash on light theme cards */
.ai-ide-theme-light .ai-ide-finding-item.critical {
    background-image: linear-gradient(180deg, rgba(239, 68, 68, 0.04), rgba(255, 255, 255, 0));
}

.ai-ide-theme-light .ai-ide-finding-item.high {
    background-image: linear-gradient(180deg, rgba(249, 115, 22, 0.04), rgba(255, 255, 255, 0));
}

.ai-ide-theme-light .ai-ide-finding-item.medium {
    background-image: linear-gradient(180deg, rgba(245, 158, 11, 0.04), rgba(255, 255, 255, 0));
}

.ai-ide-theme-light .ai-ide-finding-item.low {
    background-image: linear-gradient(180deg, rgba(34, 197, 94, 0.04), rgba(255, 255, 255, 0));
}

.ai-ide-theme-light .ai-ide-finding-title {
    color: #0F172A !important;
}

.ai-ide-theme-light .ai-ide-finding-meta {
    color: #64748B;
}

.ai-ide-theme-light .ai-ide-finding-line {
    background: rgba(59, 130, 246, 0.1);
    color: #1D4ED8;
    border-color: rgba(59, 130, 246, 0.25);
}

.ai-ide-theme-light .ai-ide-finding-fix {
    background: rgba(59, 130, 246, 0.05);
    color: #334155;
    border-color: #E2E8F0;
}

/* Results summary */
.ai-ide-theme-light .ai-ide-results-summary {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.ai-ide-theme-light .ai-ide-summary-count {
    color: #0f172a !important;
    font-weight: 700;
}

/* Notification */
.ai-ide-theme-light .ai-ide-notification {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #0F172A;
    font-weight: 500;
}

.ai-ide-theme-light .ai-ide-notification.success {
    color: #15803D;
    border-left: none;
}

.ai-ide-theme-light .ai-ide-notification.error {
    border-left: 4px solid #ef4444;
}

/* === CUSTOM SCROLLBARS === */

/* Main container scrollbar */
.ai-code-review-ide-container {
    overflow: auto;
}

/* Scrollbar styling for all scrollable areas */
.ai-code-review-ide-container *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ai-code-review-ide-container *::-webkit-scrollbar-track {
    background: #1a1a1f;
    border-radius: 5px;
}

.ai-code-review-ide-container *::-webkit-scrollbar-thumb {
    background: #3d3d47;
    border-radius: 5px;
    border: 2px solid #1a1a1f;
}

.ai-code-review-ide-container *::-webkit-scrollbar-thumb:hover {
    background: #52525e;
}

/* Editor panel scroll */
.ai-ide-editor-panel {
    overflow: hidden;
}

.ai-ide-editor-wrapper {
    overflow: auto;
    flex: 1;
}

/* CodeMirror scrollbar */
.ai-code-review-ide-container .CodeMirror-vscrollbar::-webkit-scrollbar,
.ai-code-review-ide-container .CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.ai-code-review-ide-container .CodeMirror-vscrollbar::-webkit-scrollbar-track,
.ai-code-review-ide-container .CodeMirror-hscrollbar::-webkit-scrollbar-track {
    background: #1e1e22;
}

.ai-code-review-ide-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.ai-code-review-ide-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: #4a4a54;
    border-radius: 5px;
}

.ai-code-review-ide-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.ai-code-review-ide-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background: #5a5a66;
}

/* Review panel scroll */
.ai-ide-review-content {
    overflow-y: auto !important;
    overflow-x: hidden;
}

.ai-ide-review-content::-webkit-scrollbar {
    width: 10px;
}

.ai-ide-review-content::-webkit-scrollbar-track {
    background: #18181c;
}

.ai-ide-review-content::-webkit-scrollbar-thumb {
    background: #3d3d47;
    border-radius: 5px;
}

.ai-ide-review-content::-webkit-scrollbar-thumb:hover {
    background: #52525e;
}

/* Chat messages scroll */
.ai-ide-chat-messages {
    overflow-y: auto !important;
}

.ai-ide-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.ai-ide-chat-messages::-webkit-scrollbar-track {
    background: #1a1a1f;
}

.ai-ide-chat-messages::-webkit-scrollbar-thumb {
    background: #3d3d47;
    border-radius: 4px;
}

/* Light theme scrollbars */
.ai-ide-theme-light *::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.ai-ide-theme-light *::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 2px solid #f1f5f9;
}

.ai-ide-theme-light *::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ai-ide-theme-light .CodeMirror-vscrollbar::-webkit-scrollbar-track,
.ai-ide-theme-light .CodeMirror-hscrollbar::-webkit-scrollbar-track {
    background: #f8fafc;
}

.ai-ide-theme-light .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.ai-ide-theme-light .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

.ai-ide-theme-light .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.ai-ide-theme-light .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.ai-ide-theme-light .ai-ide-review-content::-webkit-scrollbar-track {
    background: #ffffff;
}

.ai-ide-theme-light .ai-ide-review-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
}

.ai-ide-theme-light .ai-ide-review-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Firefox scrollbar styling */
.ai-code-review-ide-container * {
    scrollbar-width: thin;
    scrollbar-color: #3d3d47 #1a1a1f;
}

.ai-ide-theme-light * {
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* === CHAT CODE ACTION BUTTONS === */

.ai-ide-chat-code-wrapper {
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1f;
    border: 1px solid #2d2d35;
}

.ai-ide-chat-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #252530;
    border-bottom: 1px solid #2d2d35;
}

.ai-ide-chat-code-lang {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #8b8b9a;
    letter-spacing: 0.5px;
}

.ai-ide-chat-code-actions {
    display: flex;
    gap: 6px;
}

.ai-ide-chat-code-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #b0b0c0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-chat-code-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.ai-ide-chat-code-btn.ai-ide-code-apply {
    color: #60d394;
    border-color: rgba(96, 211, 148, 0.3);
}

.ai-ide-chat-code-btn.ai-ide-code-apply:hover {
    background: rgba(96, 211, 148, 0.15);
    border-color: rgba(96, 211, 148, 0.5);
}

.ai-ide-chat-code-btn.ai-ide-code-insert {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.3);
}

.ai-ide-chat-code-btn.ai-ide-code-insert:hover {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.5);
}

.ai-ide-chat-code-btn.success {
    color: #22c55e !important;
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.15) !important;
}

.ai-ide-chat-code-btn svg {
    flex-shrink: 0;
}

/* Code block inside wrapper */
.ai-ide-chat-code-wrapper .ai-ide-code-snippet {
    margin: 0;
    border-radius: 0;
    border: none;
    max-height: 300px;
    overflow-y: auto;
}

.ai-ide-chat-code-wrapper .ai-ide-code-snippet code {
    display: block;
    padding: 12px;
    white-space: pre;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.5;
}

/* Light theme adjustments */
.ai-ide-theme-light .ai-ide-chat-code-wrapper {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.ai-ide-theme-light .ai-ide-chat-code-header {
    background: #f1f5f9;
    border-bottom-color: #e2e8f0;
}

.ai-ide-theme-light .ai-ide-chat-code-lang {
    color: #64748b;
}

.ai-ide-theme-light .ai-ide-chat-code-btn {
    color: #475569;
    background: #ffffff;
    border-color: #d1d5db;
}

.ai-ide-theme-light .ai-ide-chat-code-btn:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
}

.ai-ide-theme-light .ai-ide-chat-code-btn.ai-ide-code-apply {
    color: #059669;
    border-color: #a7f3d0;
}

.ai-ide-theme-light .ai-ide-chat-code-btn.ai-ide-code-apply:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.ai-ide-theme-light .ai-ide-chat-code-btn.ai-ide-code-insert {
    color: #2563eb;
    border-color: #bfdbfe;
}

.ai-ide-theme-light .ai-ide-chat-code-btn.ai-ide-code-insert:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

.ai-ide-theme-light .ai-ide-chat-code-wrapper .ai-ide-code-snippet {
    background: #1e293b;
    color: #e2e8f0;
}

/* === CHAT HEADER & NEW CHAT BUTTON === */

.ai-ide-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #1a1a1f;
    border-bottom: 1px solid #2d2d35;
}

.ai-ide-chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
}

.ai-ide-chat-title svg {
    stroke: #4a9eff;
}

.ai-ide-new-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #b0b0c0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-new-chat-btn:hover {
    background: rgba(74, 158, 255, 0.15);
    border-color: rgba(74, 158, 255, 0.3);
    color: #4a9eff;
}

.ai-ide-new-chat-btn svg {
    transition: transform 0.2s ease;
}

.ai-ide-new-chat-btn:hover svg {
    transform: rotate(90deg);
}

/* Light theme */
.ai-ide-theme-light .ai-ide-chat-header {
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
}

.ai-ide-theme-light .ai-ide-chat-title {
    color: #0F172A;
}

.ai-ide-theme-light .ai-ide-chat-title svg {
    stroke: #1D4ED8;
}

.ai-ide-theme-light .ai-ide-new-chat-btn {
    color: #475569;
    background: #ffffff;
    border-color: #D1D5DB;
}

.ai-ide-theme-light .ai-ide-new-chat-btn:hover {
    background: #EEF2FF;
    border-color: #3B82F6;
    color: #1D4ED8;
}

/* ============================================
   n8n Generator Premium Styles
   ============================================ */

/* Template Cards Grid */
.ai-ide-n8n-templates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ai-ide-n8n-template-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.ai-ide-n8n-template-card:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.ai-ide-n8n-template-card.selected {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.6);
}

.ai-ide-n8n-template-icon {
    font-size: 24px;
    margin-bottom: 6px;
}

.ai-ide-n8n-template-title {
    font-size: 12px;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 3px;
}

.ai-ide-n8n-template-desc {
    font-size: 10px;
    color: #9ca3af;
}

/* Guided Mode */
.ai-ide-n8n-guided-mode {
    margin-bottom: 16px;
}

.ai-ide-n8n-guided-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #9ca3af;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-n8n-guided-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
}

.ai-ide-n8n-guided-toggle svg {
    transition: transform 0.2s ease;
}

.ai-ide-n8n-guided-toggle.expanded svg {
    transform: rotate(180deg);
}

.ai-ide-n8n-guided-content {
    padding: 16px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.ai-ide-n8n-guided-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

/* Example Chips */
.ai-ide-n8n-examples {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ai-ide-n8n-example-chip {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-n8n-example-chip:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Generation Controls */
.ai-ide-n8n-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-top: 12px;
}

.ai-ide-n8n-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-ide-n8n-control-group>label {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ai-ide-n8n-toggle-group {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.ai-ide-n8n-toggle {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 500;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-n8n-toggle:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
}

.ai-ide-n8n-toggle.active {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.ai-ide-n8n-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e5e7eb;
    cursor: pointer;
}

.ai-ide-n8n-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

.ai-ide-n8n-hint {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #e5e7eb !important;
    margin-left: 8px;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Output Panel */
.ai-ide-n8n-output-panel {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

/* Validation Status */
.ai-ide-n8n-validation-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-ide-n8n-status-icon {
    font-size: 16px;
}

.ai-ide-n8n-status-text {
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
}

.ai-ide-n8n-validation-status.valid {
    background: rgba(34, 197, 94, 0.1);
}

.ai-ide-n8n-validation-status.valid .ai-ide-n8n-status-text {
    color: #86efac;
}

.ai-ide-n8n-validation-status.error {
    background: rgba(239, 68, 68, 0.1);
}

.ai-ide-n8n-validation-status.error .ai-ide-n8n-status-text {
    color: #fca5a5;
}

/* Output Tabs */
.ai-ide-n8n-output-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.1);
}

.ai-ide-n8n-output-tab {
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-n8n-output-tab:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.03);
}

.ai-ide-n8n-output-tab.active {
    color: #93c5fd;
    border-bottom-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

/* Output Content */
.ai-ide-n8n-output-content {
    display: none;
    padding: 16px;
}

.ai-ide-n8n-output-content.active {
    display: block;
}

/* Output Actions */
.ai-ide-n8n-output-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ai-ide-n8n-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-n8n-action-btn:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.ai-ide-n8n-action-btn svg {
    flex-shrink: 0;
}

/* JSON Output */
.ai-ide-n8n-json-output {
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px;
    margin: 0;
    max-height: 350px;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #e5e7eb;
}

/* Explanation & Setup Tabs */
.ai-ide-n8n-explanation,
.ai-ide-n8n-setup-steps {
    font-size: 13px;
    line-height: 1.6;
    color: #d1d5db;
}

.ai-ide-n8n-explanation h4,
.ai-ide-n8n-setup-steps h4 {
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.ai-ide-n8n-explanation ul,
.ai-ide-n8n-setup-steps ul {
    margin: 0;
    padding-left: 20px;
}

.ai-ide-n8n-explanation li,
.ai-ide-n8n-setup-steps li {
    margin-bottom: 8px;
}

.ai-ide-n8n-setup-step {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 10px;
}

.ai-ide-n8n-setup-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    margin-right: 10px;
}

.ai-ide-n8n-credential {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fcd34d;
    margin: 4px 4px 4px 0;
}

/* Refinement Area */
.ai-ide-n8n-refinement {
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-ide-n8n-refinement>label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ai-ide-n8n-refinement-row {
    display: flex;
    gap: 10px;
}

.ai-ide-n8n-refinement-row input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 13px;
}

.ai-ide-n8n-refinement-row input::placeholder {
    color: #6b7280;
}

/* Responsive */
@media (max-width: 600px) {
    .ai-ide-n8n-templates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-ide-n8n-guided-row {
        grid-template-columns: 1fr;
    }

    .ai-ide-n8n-controls {
        flex-direction: column;
    }
}

/* ============================================
   n8n Workflow Graph Lite Preview
   ============================================ */

/* Flow Summary Banner */
.ai-ide-n8n-flow-summary {
    display: none;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    font-size: 13px;
    color: #e5e7eb;
    line-height: 1.5;
}

.ai-ide-n8n-flow-summary.visible {
    display: block;
}

.ai-ide-n8n-flow-summary strong {
    color: #93c5fd;
}

.ai-ide-n8n-flow-summary .ai-ide-n8n-credential {
    margin: 0 2px;
}

/* Preview Wrapper */
.ai-ide-n8n-preview-wrapper {
    position: relative;
    display: flex;
    height: 400px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

/* Zoom Controls */
.ai-ide-n8n-zoom-controls {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.ai-ide-n8n-zoom-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #9ca3af;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-ide-n8n-zoom-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #e5e7eb;
}

/* Canvas Container */
.ai-ide-n8n-canvas-container {
    flex: 1;
    overflow: auto;
    position: relative;
}

.ai-ide-n8n-canvas {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    padding: 40px;
    transform-origin: 0 0;
    transition: transform 0.2s ease;
}

/* SVG Edges Layer */
.ai-ide-n8n-edges-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.ai-ide-n8n-edge {
    fill: none;
    stroke: rgba(147, 197, 253, 0.4);
    stroke-width: 2;
    transition: stroke 0.15s ease;
}

.ai-ide-n8n-edge.highlighted {
    stroke: #3b82f6;
    stroke-width: 3;
}

.ai-ide-n8n-edge-arrow {
    fill: rgba(147, 197, 253, 0.6);
}

/* Node Cards */
.ai-ide-n8n-node {
    position: absolute;
    width: 180px;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.ai-ide-n8n-node:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.ai-ide-n8n-node.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ai-ide-n8n-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ai-ide-n8n-node-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 14px;
}

.ai-ide-n8n-node-icon.trigger {
    background: rgba(34, 197, 94, 0.2);
}

.ai-ide-n8n-node-icon.action {
    background: rgba(59, 130, 246, 0.2);
}

.ai-ide-n8n-node-icon.logic {
    background: rgba(168, 85, 247, 0.2);
}

.ai-ide-n8n-node-icon.output {
    background: rgba(245, 158, 11, 0.2);
}

.ai-ide-n8n-node-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-ide-n8n-node-type {
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-ide-n8n-node-params {
    font-size: 10px;
    color: #9ca3af;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    max-height: 40px;
    overflow: hidden;
}

.ai-ide-n8n-node-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ai-ide-n8n-node-badge {
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 4px;
}

.ai-ide-n8n-node-badge.trigger {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.ai-ide-n8n-node-badge.needs-creds {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.ai-ide-n8n-node-badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.ai-ide-n8n-node-badge.branch {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
}

/* Node Details Drawer */
.ai-ide-n8n-node-drawer {
    width: 0;
    background: rgba(15, 23, 42, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: width 0.25s ease;
    display: flex;
    flex-direction: column;
}

.ai-ide-n8n-node-drawer.open {
    width: 320px;
}

.ai-ide-n8n-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.ai-ide-n8n-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
}

.ai-ide-n8n-drawer-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.ai-ide-n8n-drawer-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

.ai-ide-n8n-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.ai-ide-n8n-drawer-section {
    margin-bottom: 16px;
}

.ai-ide-n8n-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ai-ide-n8n-drawer-params {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: #d1d5db;
    max-height: 150px;
    overflow-y: auto;
}

.ai-ide-n8n-drawer-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-ide-n8n-drawer-tip {
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 12px;
    color: #93c5fd;
}

/* Empty Preview State */
.ai-ide-n8n-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    text-align: center;
    padding: 40px;
}

.ai-ide-n8n-preview-empty svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Param Chips */
.ai-ide-n8n-param-chip {
    display: inline-block;
    padding: 2px 6px;
    margin: 2px 2px 2px 0;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 4px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #93c5fd;
}

/* Response Badge */
.ai-ide-n8n-node-badge.response {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.ai-ide-n8n-node-badge.action {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.ai-ide-n8n-node-icon.response {
    background: rgba(16, 185, 129, 0.2);
}

/* Edge Labels */
.ai-ide-n8n-edge.edge-true {
    stroke: rgba(34, 197, 94, 0.6);
}

.ai-ide-n8n-edge.edge-false {
    stroke: rgba(245, 158, 11, 0.6);
}

.ai-ide-n8n-edge-label {
    font-size: 10px;
    font-weight: 700;
    fill: #9ca3af;
}

.ai-ide-n8n-edge-label.label-true {
    fill: #86efac;
}

.ai-ide-n8n-edge-label.label-false {
    fill: #fcd34d;
}

/* Two-Level Validation Status */
.ai-ide-n8n-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-ide-n8n-status-row.runtime {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Node Hover Effects */
.ai-ide-n8n-node:hover~.ai-ide-n8n-edges-layer .ai-ide-n8n-edge {
    opacity: 0.3;
}

.ai-ide-n8n-canvas:hover .ai-ide-n8n-edge {
    transition: opacity 0.15s ease;
}

/* ============================================
   Security Review Panel
   ============================================ */

.ai-ide-n8n-security-review {
    padding: 20px;
}

.ai-ide-n8n-security-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-ide-n8n-security-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    border: 3px solid rgba(34, 197, 94, 0.5);
}

.ai-ide-n8n-security-score.good {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}

.ai-ide-n8n-security-score.good .score-value {
    color: #86efac;
}

.ai-ide-n8n-security-score.warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
}

.ai-ide-n8n-security-score.warning .score-value {
    color: #fcd34d;
}

.ai-ide-n8n-security-score.critical {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}

.ai-ide-n8n-security-score.critical .score-value {
    color: #fca5a5;
}

.ai-ide-n8n-security-score .score-value {
    font-size: 28px;
    font-weight: 700;
    color: #86efac;
    line-height: 1;
}

.ai-ide-n8n-security-score .score-label {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
}

.ai-ide-n8n-security-summary {
    font-size: 16px;
    font-weight: 600;
    color: #e5e7eb;
}

.ai-ide-n8n-security-findings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.ai-ide-n8n-security-finding {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.ai-ide-n8n-security-finding.critical {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.ai-ide-n8n-security-finding.warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.ai-ide-n8n-security-finding.info {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
}

.ai-ide-n8n-security-finding.success {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.1);
}

.ai-ide-n8n-security-finding .finding-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.ai-ide-n8n-security-finding .finding-title {
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 2px;
}

.ai-ide-n8n-security-finding .finding-desc {
    font-size: 12px;
    color: #9ca3af;
}

.ai-ide-n8n-security-empty {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 40px;
}

.ai-ide-n8n-security-recommendations h4 {
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 12px;
}

.ai-ide-n8n-recommendation {
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 12px;
    color: #93c5fd;
    margin-bottom: 8px;
}

/* ============================================
   Hover Highlighting System
   ============================================ */

/* Baseline edge styles with transitions */
.ai-ide-n8n-edge {
    opacity: 0.55;
    stroke-width: 1.6;
    transition: opacity 120ms ease, stroke-width 120ms ease;
}

/* Dim everything when hovering a node */
.ai-ide-n8n-canvas.is-hovering .ai-ide-n8n-edge {
    opacity: 0.15;
}

/* Highlighted/active edges */
.ai-ide-n8n-edge.is-active {
    opacity: 0.95 !important;
    stroke-width: 2.6;
}

/* Node states */
.ai-ide-n8n-node {
    transition: opacity 120ms ease, box-shadow 120ms ease, outline 120ms ease;
}

.ai-ide-n8n-node.is-active {
    outline: 2px solid rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
    z-index: 10;
}

.ai-ide-n8n-node.is-dim {
    opacity: 0.45;
}

/* Pointer events strategy */
.ai-ide-n8n-edges-layer {
    pointer-events: none;
}

.ai-ide-n8n-edge {
    pointer-events: stroke;
}

/* Label background pills */
.ai-ide-n8n-label-bg {
    fill: rgba(30, 41, 59, 0.9);
}

.ai-ide-n8n-label-bg.bg-true {
    fill: rgba(22, 101, 52, 0.85);
}

.ai-ide-n8n-label-bg.bg-false {
    fill: rgba(180, 83, 9, 0.85);
}

/* ============================================
   Visualization View Controls
   ============================================ */

.viz-section {
    position: relative;
}

.viz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.viz-header h3 {
    margin: 0;
}

.viz-view-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.viz-view-selector {
    display: flex;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.viz-view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.viz-view-btn:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
}

.viz-view-btn.active {
    color: #fff;
    background: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
}

.viz-view-btn svg {
    opacity: 0.7;
}

.viz-view-btn.active svg {
    opacity: 1;
}

.viz-toggles {
    display: flex;
    gap: 12px;
}

.viz-toggle-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6b7280;
    transition: background 0.15s ease;
}

.viz-toggle-dot.error {
    background: #ef4444;
}

.viz-toggle-dot.future {
    background: #3b82f6;
}

.viz-toggle input:not(:checked)+.viz-toggle-dot {
    background: #374151 !important;
}

.viz-toggle input:not(:checked)~span:last-child {
    opacity: 0.5;
}

.viz-canvas-wrapper {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    width: 100%;
}

.viz-mode-mindmap .viz-canvas-wrapper {
    overflow: visible;
}


/* Hide nodes based on toggles */
.viz-hide-errors .viz-group-errors,
.viz-hide-errors .viz-node.error,
.viz-hide-errors .edgePath[data-to-error="true"] {
    display: none;
}

.viz-hide-future .viz-group-future,
.viz-hide-future .viz-node.future,
.viz-hide-future .edgePath[data-to-future="true"] {
    display: none;
}

/* ============================================
   Custom Graph Renderer (Hierarchy/Metro View)
   ============================================ */

.viz-canvas {
    position: relative;
    padding: 20px 20px 20px 60px;
    /* Extra left padding for the "Spine" */
    background: #0f172a;
    /* Flat professional background */
    border-radius: 8px;
    min-height: 500px;
    overflow-x: auto;
}

.viz-edges-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.viz-edges-layer path {
    vector-effect: non-scaling-stroke;
}

.viz-nodes-layer {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Card Layout (API First) --- */
.viz-node {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 240px;
    max-width: 320px;
    /* Wider for API paths */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 20;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: row;
    /* For hover actions */
    justify-content: space-between;
}

.viz-node-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    /* Text truncation */
}

/* Hover Actions (Jump Button) */
.viz-node-actions {
    display: none;
    /* Hidden by default */
    padding-left: 8px;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 8px;
}

.viz-node:hover .viz-node-actions {
    display: flex;
}

.viz-action-btn {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}

.viz-action-btn:hover {
    background: #2563eb;
}


.viz-node-header {
    display: flex;
    flex-direction: column;
    /* Stack Title and Subtext */
    gap: 2px;
}

.viz-node-title {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* API Method Colors */
.viz-method-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.viz-method-GET {
    color: #3b82f6;
}

.viz-method-POST {
    color: #22c55e;
}

.viz-method-PUT {
    color: #f59e0b;
}

.viz-method-DELETE {
    color: #ef4444;
}

.viz-node-subtext {
    font-size: 0.75rem;
    color: #94a3b8;
    font-family: 'Consolas', 'Monaco', monospace;
    opacity: 0.9;
}

/* Structured Error Body */
.viz-error-body {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 0.75rem;
    border-left: 2px solid rgba(239, 68, 68, 0.5);
}

.viz-err-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.viz-err-row:last-child {
    margin-bottom: 0;
}

.viz-err-label {
    color: #fca5a5;
    font-weight: 600;
    font-size: 0.7rem;
    min-width: 40px;
}

.viz-err-code {
    font-family: monospace;
    color: #fee2e2;
}

/* Search States */
.viz-node.dimmed {
    opacity: 0.2;
    filter: grayscale(1);
    pointer-events: none;
    /* Let clicks pass through */
}

.viz-node.highlighted {
    opacity: 1;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    z-index: 50;
}

.viz-edge.dimmed {
    opacity: 0.05 !important;
}

.viz-group {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    transition: opacity 0.3s ease;
}

.viz-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.95);
    padding: 8px 0;
    z-index: 30;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.viz-group-title {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.viz-group-badge {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.viz-group-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.05);
}

/* Specific Group Styling */
.viz-group-errors {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.05);
}

.viz-group-errors .viz-group-title {
    color: #f87171;
}

.viz-group-future {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.05);
}

.viz-group-future .viz-group-title {
    color: #60a5fa;
}

/* ============================================
   Refined Node Cards (API/Metro Style)
   ============================================ */

.viz-node {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 280px;
    max-width: 400px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.viz-node-header {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Method Badges */
.viz-method-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 44px;
    text-align: center;
}

.viz-method-GET {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.viz-method-POST {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.viz-method-PUT {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.viz-method-DELETE {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.viz-method-PATCH {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
}

/* Chip Container */
.viz-node-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.viz-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.viz-chip.status-200 {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.2);
}

.viz-chip.status-400 {
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.2);
}

.viz-chip.status-500 {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.2);
}

.viz-chip.auth {
    color: #d8b4fe;
    border-color: rgba(168, 85, 247, 0.2);
}


/* Hover & Interaction States */
.viz-node:hover {
    transform: translateY(-2px);
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    z-index: 50;
}

.viz-node.viz-highlighted {
    border-color: #3b82f6;
    background: #1e293b;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    z-index: 50;
}

.viz-node.viz-dimmed {
    opacity: 0.3;
    filter: grayscale(0.5);
    pointer-events: none;
}

/* ============================================
   Refined Visualization Styles (Metro Map Polish)
   ============================================ */

/* Visible Spine Lane */
.viz-spine {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 30px;
    /* Matches spineX in JS */
    width: 2px;
    background: rgba(148, 163, 184, 0.14);
    /* slate-400-ish */
    border-radius: 999px;
    z-index: 5;
    /* below edges layer (10), above bg */
    pointer-events: none;
}

.viz-spine-lane {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    width: 50px;
    /* gutter width */
    background: rgba(2, 6, 23, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    z-index: 4;
    pointer-events: none;
}

/* Edges */
.viz-edge {
    fill: none;
    stroke: currentColor;
    /* Inherit from color property */
    color: rgba(148, 163, 184, 0.85);
    /* Default slate color */
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.18s ease, stroke-width 0.18s ease, color 0.18s ease;
    opacity: 0.45;
}

.viz-edge.viz-highlighted {
    color: rgba(59, 130, 246, 0.95);
    /* blue-500 */
    stroke-width: 2.6;
    opacity: 1;
    z-index: 40;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.35));
}

.viz-edge.viz-error-edge {
    color: rgba(239, 68, 68, 0.95);
    /* red-500 */
    stroke-dasharray: 4 4;
    opacity: 0.7;
}

.viz-edge.viz-spine-edge {
    opacity: 0.22;
    stroke-width: 1.4;
    color: rgba(148, 163, 184, 0.75);
}

.viz-edge.viz-dimmed {
    opacity: 0.05;
}

/* Hover Dimming Pattern */
.viz-canvas.is-hovering .viz-edge {
    opacity: 0.12;
}

.viz-canvas.is-hovering .viz-edge.viz-highlighted {
    opacity: 1;
}

/* Errors Mode: Hide non-error edges */
.viz-canvas.viz-mode-errors .viz-edge:not(.viz-error-edge) {
    opacity: 0 !important;
}

/* Optional: keep a tiny bit of context */
.viz-canvas.viz-mode-errors .viz-edge.viz-context {
    opacity: 0.06 !important;
}

/* Compact Errors Section in Error Mode */
.viz-mode-errors .viz-group-errors {
    min-height: unset;
    padding-bottom: 18px;
    display: flex;
    justify-content: center;
}

.viz-mode-errors .viz-group-errors .viz-group-nodes {
    justify-content: center;
}

/* ============================================
   Mini Legend
   ============================================ */

.viz-legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    gap: 16px;
    z-index: 50;
    font-size: 0.75rem;
    color: #94a3b8;
    pointer-events: none;
}

.viz-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.viz-legend-line {
    width: 20px;
    height: 2px;
    border-radius: 1px;
}

.viz-legend-flow {
    background: #475569;
}

.viz-legend-error {
    background: #ef4444;
    border-top: 2px dashed #ef4444;
    height: 0;
}

.viz-legend-future {
    background: #3b82f6;
    opacity: 0.5;
}

/* ============================================
   View Modes
   ============================================ */

/* Execution Mode: Dim errors, hide future */
.viz-mode-execution .viz-group-errors {
    opacity: 0.5;
}

.viz-mode-execution .viz-group-future {
    display: none;
}

/* Errors Mode: Dim main, highlight errors */
.viz-mode-errors .viz-group-main {
    opacity: 0.3;
}

.viz-mode-errors .viz-group-errors {
    opacity: 1;
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
}

/* Nodes (Methods) */
.viz-node {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 10px;
    position: relative;
    transition: all 0.15s ease;
}

.viz-node:hover {
    border-color: #64748b;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.viz-node-header {
    font-family: monospace;
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
}

.viz-node-details {
    margin-top: 6px;
    font-size: 11px;
    color: #94a3b8;
    padding-left: 8px;
    border-left: 2px solid #334155;
}

.viz-node-detail {
    margin-bottom: 2px;
}

/* Node Types */
.viz-node.error {
    background: rgba(69, 10, 10, 0.4);
    border-color: #7f1d1d;
}

.viz-node.error .viz-node-header {
    color: #f87171;
}

.viz-node.future {
    background: rgba(30, 58, 138, 0.4);
    border-color: #1e3a8a;
    border-style: dashed;
}

.viz-node.future .viz-node-header {
    color: #60a5fa;
}

/* Collapse Button */
.viz-collapse-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all 0.2s ease;
}

.viz-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Node collapse button in mindmap */
.viz-mode-mindmap .viz-node-collapse-btn {
    margin-left: 0;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    flex-shrink: 0;
}

.viz-mode-mindmap .viz-node-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.viz-code-indicator {
    font-size: 0.9em;
    opacity: 0.7;
    flex-shrink: 0;
    margin-right: 4px;
}

.viz-node[data-source="code"] {
    border-left: 2px solid rgba(59, 130, 246, 0.5);
}

.viz-node[data-source="code"]:hover {
    border-left-color: rgba(59, 130, 246, 0.8);
}

.viz-mode-mindmap .viz-node-collapsed {
    min-height: auto;
    opacity: 0.9;
}

.viz-mode-mindmap .viz-node-collapsed .viz-node-content {
    display: none !important;
}

.viz-mode-mindmap .viz-node-content {
    margin-top: 8px;
    transition: opacity 0.2s ease, max-height 0.3s ease;
}

.viz-mode-mindmap .viz-node-collapsed:hover {
    opacity: 1;
}

/* Ensure edges are visible and properly styled */
.viz-mode-mindmap .viz-edges-layer path {
    stroke-width: 2px;
    stroke-opacity: 0.6;
}

.viz-mode-mindmap .viz-edges-layer path.viz-edge-major {
    stroke-width: 3px !important;
    stroke-opacity: 0.9 !important;
}

.viz-mode-mindmap .viz-edges-layer path.viz-edge-minor {
    stroke-width: 2px !important;
    stroke-opacity: 0.7 !important;
}

/* ============================================
   Execution Flow View
   ============================================ */

.viz-view-execution .viz-node {
    opacity: 0.4;
    filter: grayscale(0.6);
    transition: all 0.3s ease;
}

.viz-view-execution .viz-edge {
    opacity: 0.2;
    stroke: #475569;
}

/* Highlight "Main Execution" and its children */
.viz-view-execution .viz-group[data-id="main"],
.viz-view-execution .viz-group[data-id="main"] .viz-node {
    opacity: 1;
    filter: none;
}

.viz-view-execution .viz-group[data-id="main"] {
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

.viz-view-execution .viz-group[data-id="main"] .viz-group-header {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.viz-view-execution .viz-group[data-id="main"] .viz-group-title {
    color: #60a5fa;
}

/* Highlight edges connected to main flow */
.viz-edge.viz-highlight-edge {
    opacity: 1 !important;
    stroke: #60a5fa !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.5));
}

/* =========================================
   View Mode: Errors
   ========================================= */
.viz-mode-errors .viz-group:not(.viz-group-errors) {
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.viz-mode-errors .viz-group-errors {
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
    background: rgba(69, 10, 10, 0.2);
}

.viz-mode-errors .viz-node.error {
    background: rgba(69, 10, 10, 0.6);
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

/* Error Edges */
.viz-edge.viz-error-edge {
    stroke: #ef4444;
    stroke-width: 2px;
    stroke-dasharray: 4;
    animation: flowError 30s linear infinite;
}

@keyframes flowError {
    to {
        stroke-dashoffset: -100;
    }
}

/* ============================================
   Mind Map View Mode Styles
   ============================================ */

.viz-node-root {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #64748b;
    padding: 18px 26px;
    border-radius: 14px;
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(100, 116, 139, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 100;
    /* Ensure Root is above edges */
    width: 220px;
    /* Fixed width for better anchor calculation */
    text-align: center;
    position: absolute;
    /* Enforce absolute positioning */
    backdrop-filter: blur(8px);
}

.viz-node-root .viz-node-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

.viz-node-category {
    background: rgba(30, 41, 59, 0.98);
    /* Higher opacity to hide lines behind */
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-left: 5px solid #3b82f6;
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 90;
    /* Ensure Category is above edges */
    width: 260px;
    /* Fixed width for layout anchors */
    position: absolute;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(6px);
}

.viz-node-category:hover {
    transform: translateY(-2px) translateX(3px);
    box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-left-width: 6px;
}

.viz-node-category.collapsed {
    opacity: 0.85;
    background: rgba(30, 41, 59, 1);
    border-left-width: 4px;
    transform: scale(0.98);
}

.viz-node-category.collapsed:hover {
    opacity: 1;
    transform: scale(1) translateY(-2px) translateX(3px);
}

.viz-node-category[data-cat="api"] {
    border-left-color: #22c55e;
}

.viz-node-category[data-cat="state"] {
    border-left-color: #f59e0b;
}

.viz-node-category[data-cat="core"] {
    border-left-color: #3b82f6;
}

.viz-node-category[data-cat="errors"] {
    border-left-color: #ef4444;
}

.viz-node-category[data-cat="roadmap"] {
    border-left-color: #a855f7;
    border-style: dashed;
}

.viz-node-category .viz-node-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.viz-count-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.viz-mindmap-item {
    background: rgba(15, 23, 42, 0.95);
    /* High opacity */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Lighter border */
    z-index: 80;
    /* Fixed width is set inline (320px) but good to have fallback */
    min-width: 250px;
    border-radius: 8px;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Ensure edges in Mind Map are visible */
.viz-mode-mindmap .viz-spine-lane,
.viz-mode-mindmap .viz-spine {
    display: none;
}

/* Dependency Edges (Mind Map) */
.viz-edge-dependency {
    stroke: #64748b;
    stroke-width: 2;
    stroke-dasharray: 5 5;
    opacity: 0.4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    /* Let clicks pass through to nodes */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Active/Highlight States */
.viz-edge-dependency:hover,
.viz-canvas.is-hovering .viz-edge-dependency.viz-highlighted {
    opacity: 1;
    stroke: #60a5fa;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.5));
    z-index: 110;
    /* Bring on top when highlighted */
    stroke-dasharray: none;
}

.viz-hide-dependencies .viz-edge-dependency {
    display: none;
}

/* Zoom Controls */
.viz-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.viz-btn-zoom {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    min-width: 32px;
    transition: all 0.15s ease;
}

.viz-btn-zoom:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
}

.viz-zoom-level {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    min-width: 45px;
    text-align: center;
}

/* Improved Mindmap Styling */
.viz-mode-mindmap {
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}

.viz-mode-mindmap .viz-canvas {
    overflow: visible;
    position: relative;
    background: radial-gradient(ellipse at top left, rgba(15, 23, 42, 0.3) 0%, transparent 50%);
    transition: transform 0.1s ease-out;
}

.viz-mode-mindmap .viz-node,
.viz-mode-mindmap .viz-controls,
.viz-mode-mindmap .viz-legend {
    user-select: auto;
    -webkit-user-select: auto;
    pointer-events: auto;
}

.viz-mode-mindmap .viz-node-root {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(100, 116, 139, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 2px solid #64748b;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.viz-mode-mindmap .viz-node-root:hover {
    box-shadow: 0 14px 40px -6px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(100, 116, 139, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-3px) scale(1.02);
    border-color: #94a3b8;
}

.viz-mode-mindmap .viz-node-category {
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-left-width: 5px;
}

.viz-mode-mindmap .viz-node-category:hover {
    box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px) translateX(3px);
    border-left-width: 6px;
}

.viz-mode-mindmap .viz-mindmap-item {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.viz-mode-mindmap .viz-mindmap-item:hover {
    box-shadow: 0 6px 18px -2px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(4px) scale(1.02);
    background: rgba(15, 23, 42, 1);
}

/* Enhanced edge rendering */
.viz-mode-mindmap .viz-edges-layer {
    pointer-events: none;
    z-index: 5;
}

.viz-mode-mindmap .viz-edges-layer path {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Make major edges (root to category) more prominent */
.viz-mode-mindmap .viz-edges-layer path[stroke="#64748b"],
.viz-mode-mindmap .viz-edges-layer path.viz-edge-major {
    stroke-width: 3px !important;
    stroke-opacity: 0.9 !important;
    filter: drop-shadow(0 2px 3px rgba(100, 116, 139, 0.3));
}

/* Make minor edges (category to item) visible but subtle */
.viz-mode-mindmap .viz-edges-layer path[stroke="#475569"],
.viz-mode-mindmap .viz-edges-layer path.viz-edge-minor {
    stroke-width: 2px !important;
    stroke-opacity: 0.7 !important;
}

/* Mindmap node header improvements */
.viz-mode-mindmap .viz-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.viz-mode-mindmap .viz-node-icon {
    font-size: 1.2em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease;
}

.viz-mode-mindmap .viz-node-category:hover .viz-node-icon,
.viz-mode-mindmap .viz-node-root:hover .viz-node-icon {
    transform: scale(1.1);
}

/* Better spacing for mindmap items */
.viz-mode-mindmap .viz-mindmap-item .viz-node-header {
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
}

.viz-mode-mindmap .viz-mindmap-item .viz-node-title {
    font-weight: 500;
    color: #e2e8f0;
}

/* ========================================
   FILE LIBRARY PANEL
   ======================================== */

.ai-ide-library-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

.ai-ide-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-ide-library-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
}

.ai-ide-library-actions {
    display: flex;
    gap: 8px;
}

.ai-ide-btn-small {
    padding: 6px 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-btn-small:hover {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

.ai-ide-library-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Login Required State */
.ai-ide-library-login-required {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #6b7280;
    padding: 40px;
}

.ai-ide-library-login-required svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.ai-ide-library-login-required h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #9ca3af;
}

.ai-ide-library-login-required p {
    margin: 0 0 20px;
    font-size: 14px;
    max-width: 280px;
}

/* Folder List */
.ai-ide-library-folders {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-ide-library-folder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: #9ca3af;
    font-size: 13px;
    transition: all 0.2s ease;
}

.ai-ide-library-folder:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.ai-ide-library-folder.active {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

.ai-ide-library-folder svg {
    opacity: 0.7;
}

/* File List */
.ai-ide-library-files {
    flex: 1;
    overflow-y: auto;
}

.ai-ide-library-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-library-file:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(96, 165, 250, 0.3);
}

.ai-ide-library-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.ai-ide-library-file-icon {
    color: #60a5fa;
    flex-shrink: 0;
}

.ai-ide-library-file-name {
    font-size: 13px;
    color: #e2e8f0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-ide-library-file-meta {
    font-size: 11px;
    color: #6b7280;
}

.ai-ide-library-file-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ai-ide-library-file:hover .ai-ide-library-file-actions {
    opacity: 1;
}

.ai-ide-library-file-actions button {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #6b7280;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-ide-library-file-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.ai-ide-library-file-actions button.delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Empty State */
.ai-ide-library-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #6b7280;
    padding: 40px;
}

.ai-ide-library-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.ai-ide-library-empty p {
    margin: 0;
    font-size: 14px;
}

.ai-ide-library-hint {
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #4b5563 !important;
}

/* Modal Overlay */
.ai-ide-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

.ai-ide-modal {
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ai-ide-modal h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #e2e8f0;
}

.ai-ide-modal p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #9ca3af;
}

.ai-ide-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ===================================
   AUDIT LOG STYLES (Admin Only)
   =================================== */

.ai-ide-audit-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow-y: auto;
}

.ai-ide-audit-header h2 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #fff;
}

.ai-ide-audit-header .ai-ide-description {
    margin: 0;
    font-size: 13px;
    color: #9ca3af;
}

.ai-ide-audit-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-ide-audit-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-ide-audit-filter-group label {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

.ai-ide-audit-filter-group input[type="date"] {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #e2e8f0;
}

.ai-ide-audit-filter-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

.ai-ide-audit-logs {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    max-height: 400px;
}

.ai-ide-audit-entry {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.ai-ide-audit-entry:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.ai-ide-audit-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 12px;
}

.ai-ide-audit-user {
    color: #60a5fa;
    font-weight: 600;
}

.ai-ide-audit-time {
    color: #9ca3af;
}

.ai-ide-audit-ip {
    color: #6b7280;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
}

.ai-ide-audit-message {
    font-size: 13px;
    color: #e2e8f0;
    margin-bottom: 6px;
    line-height: 1.5;
}

.ai-ide-audit-message strong {
    color: #9ca3af;
    font-weight: 500;
}

.ai-ide-audit-response {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.ai-ide-audit-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0;
}

.ai-ide-audit-pagination span {
    font-size: 13px;
    color: #9ca3af;
}

.ai-ide-audit-actions {
    display: flex;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-ide-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.ai-ide-btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.ai-ide-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #9ca3af;
    font-size: 14px;
}

.ai-ide-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #f87171;
    font-size: 14px;
}

/* Tab Content Panels - ensure proper display */
.ai-ide-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    overflow-y: auto;
}

/* Audit Log Tab - ensure content fills space */
#aiIdeTabAuditLog {
    height: 100%;
}

#aiIdeTabAuditLog .ai-ide-audit-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#aiIdeTabAuditLog .ai-ide-audit-logs {
    flex: 1;
    min-height: 200px;
    max-height: none;
    overflow-y: auto;
}