/* ============================================
   VEXAI CANVAS - PREMIUM WORKSPACE
   A world-class, unmatched canvas experience
   Glass morphism, fluid animations, premium UX
   ============================================ */

/* CSS Custom Properties for Canvas - Using App Theme Colors */
:root {
    /* Canvas-specific colors */
    --canvas-bg-primary: rgba(5, 5, 5, 0.98);
    --canvas-bg-secondary: rgba(10, 10, 10, 0.95);
    --canvas-bg-elevated: rgba(20, 20, 20, 0.9);
    --canvas-bg-glass: rgba(15, 15, 15, 0.7);
    
    /* Canvas accent - Electric Blue (matching app theme) */
    --canvas-accent-1: hsl(210, 100%, 60%);
    --canvas-accent-2: hsl(200, 100%, 55%);
    --canvas-accent-3: hsl(190, 90%, 60%);
    --canvas-gradient: linear-gradient(135deg, var(--canvas-accent-1), var(--canvas-accent-2));
    --canvas-gradient-vibrant: linear-gradient(135deg, hsl(210, 100%, 60%) 0%, hsl(190, 90%, 55%) 100%);
    --canvas-gradient-subtle: linear-gradient(135deg, hsla(210, 100%, 60%, 0.1), hsla(190, 90%, 60%, 0.1));
    
    /* Glow effects - Blue theme */
    --canvas-glow-primary: 0 0 40px hsla(210, 100%, 60%, 0.25);
    --canvas-glow-intense: 0 0 60px hsla(210, 100%, 60%, 0.35), 0 0 100px hsla(190, 90%, 60%, 0.15);
    --canvas-glow-subtle: 0 4px 20px hsla(210, 100%, 60%, 0.12);
    
    /* Borders */
    --canvas-border: rgba(255, 255, 255, 0.06);
    --canvas-border-hover: rgba(255, 255, 255, 0.12);
    --canvas-border-accent: hsla(210, 100%, 60%, 0.4);
    
    /* Timing functions - Professional, not bouncy */
    --canvas-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --canvas-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --canvas-ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
    --canvas-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   CANVAS WORKSPACE - Main Container
   ============================================ */
.canvas-workspace {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: 52%;
    max-width: 920px;
    min-width: 380px;
    background: var(--canvas-bg-primary);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-left: 1px solid var(--canvas-border);
    box-shadow: 
        -16px 0 48px rgba(0, 0, 0, 0.4),
        -2px 0 16px hsla(210, 100%, 60%, 0.08),
        inset 1px 0 0 rgba(255, 255, 255, 0.03);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    opacity: 0;
    transition: 
        transform 0.3s ease,
        opacity 0.25s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
}

.canvas-workspace::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, 
        hsla(210, 100%, 60%, 0.06) 0%, 
        transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.canvas-workspace.active {
    transform: translateX(0);
    opacity: 1;
}

.canvas-workspace.active::before {
    opacity: 1;
}

/* Canvas updated visual feedback */
.canvas-workspace.canvas-updated {
    animation: canvasWorkspaceUpdated 1.5s ease-out;
}

@keyframes canvasWorkspaceUpdated {
    0% {
        border-left-color: hsla(140, 70%, 50%, 0.8);
        box-shadow: 
            -16px 0 48px rgba(0, 0, 0, 0.4),
            -2px 0 16px hsla(140, 70%, 50%, 0.3),
            inset 1px 0 0 hsla(140, 70%, 50%, 0.5);
    }
    100% {
        border-left-color: var(--canvas-border);
        box-shadow: 
            -16px 0 48px rgba(0, 0, 0, 0.4),
            -2px 0 16px hsla(210, 100%, 60%, 0.08),
            inset 1px 0 0 rgba(255, 255, 255, 0.03);
    }
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .canvas-workspace {
        width: 55%;
    }
}

@media (max-width: 1200px) {
    .canvas-workspace {
        width: 60%;
    }
}

@media (max-width: 1024px) {
    .canvas-workspace {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .canvas-workspace {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        border-left: none;
        border-radius: 0;
    }
}

/* Main content adjustment when canvas opens */
.main-content-wrapper {
    transition: 
        margin-right 0.3s ease,
        filter 0.25s ease;
}

.main-content-wrapper.canvas-open {
    margin-right: 48%;
}

/* Fix message avatars when canvas is open - switch from absolute to inline */
.main-content-wrapper.canvas-open .message {
    flex-direction: row;
    gap: 0.75rem;
    padding-left: 0;
}

.main-content-wrapper.canvas-open .message-avatar {
    position: static;
    flex-shrink: 0;
    margin-top: 4px;
}

.main-content-wrapper.canvas-open .chat-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Reduce padding when canvas is open */
.main-content-wrapper.canvas-open .messages-list {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 1400px) {
    .main-content-wrapper.canvas-open {
        margin-right: 50%;
    }
}

@media (max-width: 1200px) {
    .main-content-wrapper.canvas-open {
        margin-right: 55%;
    }
}

@media (max-width: 1024px) {
    .main-content-wrapper.canvas-open {
        margin-right: 60%;
    }
}

@media (max-width: 768px) {
    .main-content-wrapper.canvas-open {
        margin-right: 0;
        filter: blur(4px) brightness(0.5);
        pointer-events: none;
    }
}

/* When sidebar is also open - further reduce canvas width */
.sidebar.active ~ .main-content-wrapper.canvas-open {
    margin-right: 42%;
}

@media (max-width: 1400px) {
    .sidebar.active ~ .main-content-wrapper.canvas-open {
        margin-right: 45%;
    }
}

@media (max-width: 1200px) {
    .sidebar.active ~ .main-content-wrapper.canvas-open {
        margin-right: 50%;
    }
}

/* ============================================
   CANVAS HEADER - Premium Glass Design
   ============================================ */
.canvas-header {
    padding: 16px 20px;
    background: var(--canvas-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--canvas-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-height: 64px;
    position: relative;
    z-index: 10;
}

.canvas-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        hsla(210, 100%, 60%, 0.3) 50%, 
        transparent 100%);
}

@media (max-width: 768px) {
    .canvas-header {
        padding: 12px 16px;
        min-height: 56px;
    }
}

/* Saved canvases button */
#canvas-saved-btn {
    background: var(--canvas-gradient-subtle);
    border: 1px solid var(--canvas-border);
}

#canvas-saved-btn:hover {
    background: var(--canvas-gradient);
    border-color: var(--canvas-accent-1);
    color: white;
    box-shadow: var(--canvas-glow-subtle);
}

/* Title Input - Sleek and modern */
.canvas-title-input {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #f0f0f5;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.3s var(--canvas-ease-smooth);
    letter-spacing: -0.01em;
}

.canvas-title-input:hover {
    background: rgba(255, 255, 255, 0.04);
}

.canvas-title-input:focus {
    background: hsla(210, 100%, 60%, 0.08);
    box-shadow: 
        0 0 0 2px hsla(210, 100%, 60%, 0.3),
        inset 0 0 20px hsla(210, 100%, 60%, 0.05);
}

.canvas-title-input::placeholder {
    color: #4a4a5a;
}

@media (max-width: 768px) {
    .canvas-title-input {
        font-size: 15px;
        padding: 8px 12px;
    }
}

/* Save Indicator - Floating pill */
.canvas-save-indicator {
    position: absolute;
    top: 50%;
    right: 140px;
    transform: translateY(-50%);
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    color: #10b981;
    font-size: 12px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 6px;
    z-index: 10;
    animation: saveIndicatorIn 0.4s ease;
    backdrop-filter: blur(10px);
}

.canvas-save-indicator.saving {
    background: hsla(210, 100%, 60%, 0.15);
    border-color: hsla(210, 100%, 60%, 0.3);
    color: var(--canvas-accent-1);
    display: flex;
}

.canvas-save-indicator.saved {
    display: flex;
}

.canvas-save-indicator i {
    font-size: 11px;
}

@keyframes saveIndicatorIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@media (max-width: 768px) {
    .canvas-save-indicator {
        right: 110px;
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* Header Actions */
.canvas-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Action Buttons - Premium glass style */
.canvas-action-btn {
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: #9ca3af;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--canvas-ease-smooth);
    font-size: 15px;
    position: relative;
    overflow: hidden;
}

.canvas-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--canvas-gradient);
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: inherit;
}

.canvas-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--canvas-border-hover);
    color: #f0f0f5;
    transform: translateY(-1px);
}

.canvas-action-btn:active {
    transform: translateY(0) scale(0.96);
}

@media (max-width: 768px) {
    .canvas-action-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 10px;
    }
}

/* Close button - Special styling */
.canvas-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.canvas-close-btn:hover::before {
    opacity: 0;
}

/* ============================================
   CANVAS TOOLBAR - Mode & Actions
   ============================================ */
.canvas-toolbar {
    padding: 12px 20px;
    background: rgba(15, 15, 22, 0.6);
    border-bottom: 1px solid var(--canvas-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    .canvas-toolbar {
        padding: 10px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }
}

/* Mode Toggle - Premium segmented control */
.canvas-mode-toggle {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--canvas-border);
    border-radius: 12px;
    padding: 4px;
}

.canvas-mode-btn {
    padding: 8px 18px;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s var(--canvas-ease-smooth);
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-mode-btn i {
    font-size: 12px;
    opacity: 0.8;
}

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

.canvas-mode-btn.active {
    background: var(--canvas-gradient);
    color: #fff;
    box-shadow: 
        0 4px 15px hsla(210, 100%, 60%, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.canvas-mode-btn.active i {
    opacity: 1;
}

@media (max-width: 768px) {
    .canvas-mode-btn {
        padding: 6px 14px;
        font-size: 12px;
    }
    
    .canvas-mode-btn i {
        display: none;
    }
}

/* Toolbar Actions */
.canvas-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Version Navigation */
.canvas-version-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--canvas-border);
    border-radius: 10px;
}

.canvas-version-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 12px;
}

.canvas-version-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #f0f0f5;
}

.canvas-version-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.canvas-version-info {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
}

@media (max-width: 768px) {
    .canvas-version-nav {
        display: none;
    }
}

/* ============================================
   CANVAS CONTENT AREA - Editor & Preview
   ============================================ */
.canvas-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, 
        rgba(10, 10, 15, 1) 0%, 
        rgba(8, 8, 12, 1) 100%);
    min-height: 0;
}

/* Custom scrollbar for editor */
.canvas-editor::-webkit-scrollbar {
    width: 10px;
}

.canvas-editor::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}

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

.canvas-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Editor Wrapper for Syntax Highlighting */
.canvas-editor-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* CodeMirror Container */
.canvas-codemirror-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* CodeMirror 5 Styling - Minimal overrides */
.canvas-codemirror-container .CodeMirror {
    height: 100%;
    background: transparent;
}

.canvas-codemirror-container .CodeMirror-gutters {
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.canvas-codemirror-container .CodeMirror-linenumber {
    color: rgba(255, 255, 255, 0.35);
}

.canvas-codemirror-container .CodeMirror-cursor {
    border-left: 2px solid #e5e5ec;
}

.canvas-codemirror-container .CodeMirror-selected {
    background: hsla(210, 100%, 60%, 0.3) !important;
}

.canvas-codemirror-container .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.03);
}

.canvas-codemirror-container .CodeMirror-matchingbracket {
    color: hsl(210, 100%, 60%) !important;
    font-weight: bold;
    background: rgba(59, 130, 246, 0.2);
    text-decoration: none;
}

/* Scrollbar styling */
.canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar,
.canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-track,
.canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

.canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Syntax Highlighting Overlay - DISABLED */
.canvas-highlight-overlay {
    display: none !important;
}

/* Editor Textarea (Fallback) */
.canvas-editor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: #e5e5ec;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    font-size: 14px;
    line-height: 1.75;
    resize: none;
    outline: none;
    letter-spacing: 0.01em;
    overflow: auto;
}

.canvas-editor-fallback {
    display: none;
}

/* Code mode - keep text visible */
.canvas-editor.code-mode {
    color: #e5e5ec;
    caret-color: #e5e5ec;
    background: transparent;
}

.canvas-editor::placeholder {
    color: #3f3f4a;
}

.canvas-editor.code-mode::placeholder {
    color: #3f3f4a;
}

.canvas-editor::selection {
    background: hsla(210, 100%, 60%, 0.3);
}

@media (max-width: 768px) {
    .canvas-editor,
    .canvas-highlight-overlay {
        padding: 20px;
        font-size: 13px;
        line-height: 1.7;
    }
}

/* Preview Container */
.canvas-preview-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    overflow: auto;
    z-index: 5;
    display: none;
}

.canvas-preview-container[style*="display: block"] {
    display: block;
}

.canvas-preview-content {
    padding: 36px;
    max-width: 800px;
    margin: 0 auto;
    color: #1a1a2e;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.8;
}

.canvas-preview-content h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0f0f1a;
    letter-spacing: -0.02em;
}

.canvas-preview-content h2 {
    font-size: 26px;
    font-weight: 600;
    margin-top: 36px;
    margin-bottom: 16px;
    color: #1a1a2e;
}

.canvas-preview-content p {
    margin-bottom: 18px;
    color: #374151;
}

.canvas-preview-content code {
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    color: hsl(210, 100%, 60%);
}

.canvas-preview-content pre {
    background: #1e1e2e;
    color: #e5e5ec;
    padding: 20px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid hsla(210, 100%, 60%, 0.2);
}

@media (max-width: 768px) {
    .canvas-preview-content {
        padding: 24px;
    }
    
    .canvas-preview-content h1 {
        font-size: 28px;
    }
    
    .canvas-preview-content h2 {
        font-size: 22px;
    }
}

/* Code Preview iframe */
.canvas-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: white;
    border: none;
    border-radius: 0;
    z-index: 5;
    display: none;
}

/* ============================================
   EXPORT MENU - Dropdown
   ============================================ */
.canvas-export-menu {
    position: absolute;
    top: 64px;
    right: 20px;
    background: rgba(20, 20, 30, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--canvas-border-hover);
    border-radius: 16px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    padding: 8px;
    min-width: 220px;
    z-index: 1001;
    display: none;
    transform-origin: top right;
    animation: menuDropIn 0.25s ease;
}

.canvas-export-menu.show {
    display: block;
}

@keyframes menuDropIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.canvas-export-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #d1d5db;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.canvas-export-item:hover {
    background: hsla(210, 100%, 60%, 0.15);
    color: #fff;
}

.canvas-export-item i {
    width: 20px;
    font-size: 15px;
    color: #6b7280;
    transition: color 0.2s ease;
}

.canvas-export-item:hover i {
    color: var(--canvas-accent-1);
}

@media (max-width: 768px) {
    .canvas-export-menu {
        right: 16px;
        min-width: 180px;
    }
    
    .canvas-export-item {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ============================================
   VCANVAS CARDS - Premium Artifacts in Chat
   ============================================ */
.vcanvas-indicator {
    margin: 20px 0;
    padding: 0;
    background: linear-gradient(135deg, 
        hsla(210, 100%, 60%, 0.06) 0%, 
        hsla(190, 90%, 60%, 0.06) 100%);
    border: 1px solid hsla(210, 100%, 60%, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Updated canvas indicator - highlight with green accent */
.vcanvas-indicator.vcanvas-updated {
    border-color: hsla(140, 70%, 50%, 0.4);
    background: linear-gradient(135deg, 
        hsla(140, 70%, 50%, 0.08) 0%, 
        hsla(160, 70%, 50%, 0.06) 100%);
    animation: canvasUpdatePulse 2s ease-out;
}

@keyframes canvasUpdatePulse {
    0% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 0 hsla(140, 70%, 50%, 0.4);
    }
    50% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px 4px hsla(140, 70%, 50%, 0.2);
    }
    100% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 0 hsla(140, 70%, 50%, 0);
    }
}

/* Update badge */
.vcanvas-update-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, hsla(140, 70%, 45%, 0.9), hsla(160, 70%, 45%, 0.9));
    color: white;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    animation: updateBadgePop 0.3s ease;
}

.vcanvas-update-badge i {
    font-size: 9px;
}

@keyframes updateBadgePop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.vcanvas-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--canvas-gradient-vibrant);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.vcanvas-indicator:hover {
    border-color: var(--canvas-accent-1);
    box-shadow: 0 8px 24px hsla(210, 100%, 60%, 0.2);
    transform: translateY(-2px);
}

.vcanvas-indicator:hover::before {
    opacity: 0.03;
}

/* Card Header */
.vcanvas-card-header {
    padding: 16px 20px;
    background: hsla(210, 100%, 60%, 0.08);
    border-bottom: 1px solid hsla(210, 100%, 60%, 0.12);
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

/* Icon with glow */
.vcanvas-icon {
    width: 42px;
    height: 42px;
    background: var(--canvas-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 17px;
    box-shadow: 0 4px 12px hsla(210, 100%, 60%, 0.3);
    position: relative;
}

.vcanvas-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--canvas-gradient);
    border-radius: inherit;
    opacity: 0.3;
    filter: blur(6px);
    z-index: -1;
}

.vcanvas-card-title {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary, #f0f0f5);
    letter-spacing: -0.01em;
}

.vcanvas-card-badge {
    padding: 6px 14px;
    background: hsla(210, 100%, 60%, 0.2);
    color: var(--canvas-accent-3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

@media (max-width: 768px) {
    .vcanvas-card-header {
        padding: 14px 16px;
        gap: 12px;
    }
    
    .vcanvas-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    
    .vcanvas-card-title {
        font-size: 15px;
    }
    
    .vcanvas-card-badge {
        padding: 4px 10px;
        font-size: 10px;
    }
}

/* Card Body */
.vcanvas-card-body {
    padding: 18px 20px;
}

.vcanvas-preview-text {
    font-size: 13px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.7;
    max-height: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(0, 0, 0, 0.25);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

@media (max-width: 768px) {
    .vcanvas-card-body {
        padding: 14px 16px;
    }
    
    .vcanvas-preview-text {
        font-size: 12px;
        padding: 14px;
        max-height: 120px;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}

/* Card Footer */
.vcanvas-card-footer {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Open in Canvas Button - Professional CTA */
.vcanvas-open-btn {
    flex: 1;
    padding: 14px 22px;
    background: var(--canvas-gradient);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px hsla(210, 100%, 60%, 0.3);
    position: relative;
    overflow: hidden;
}

.vcanvas-open-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        transparent 50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vcanvas-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px hsla(210, 100%, 60%, 0.4);
}

.vcanvas-open-btn:hover::before {
    opacity: 1;
}

.vcanvas-open-btn:active {
    transform: translateY(0);
}

.vcanvas-open-btn i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.vcanvas-open-btn:hover i {
    transform: translateX(3px);
}

/* Copy Button */
.vcanvas-copy-btn {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, #9ca3af);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.vcanvas-copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #f0f0f5);
}

.vcanvas-copy-btn:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .vcanvas-card-footer {
        gap: 10px;
    }
    
    .vcanvas-open-btn {
        padding: 12px 18px;
        font-size: 13px;
    }
    
    .vcanvas-copy-btn {
        padding: 12px 14px;
    }
}

/* ============================================
   SAVED CANVASES MODAL - Premium Dialog
   ============================================ */
.saved-canvases-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s var(--canvas-ease-smooth);
    padding: 20px;
}

.saved-canvases-modal.active {
    opacity: 1;
    visibility: visible;
}

.saved-canvases-content {
    background: linear-gradient(180deg, 
        rgba(20, 20, 30, 0.98) 0%, 
        rgba(15, 15, 22, 0.98) 100%);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    max-width: 680px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s ease;
}

.saved-canvases-modal.active .saved-canvases-content {
    transform: scale(1) translateY(0);
}

@media (max-width: 768px) {
    .saved-canvases-content {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 20px;
    }
}

/* Modal Header */
.saved-canvases-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--canvas-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.saved-canvases-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        hsla(210, 100%, 60%, 0.3) 50%, 
        transparent 100%);
}

.saved-canvases-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #f0f0f5;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.saved-canvases-header h2 i {
    color: var(--canvas-accent-1);
}

.modal-close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: #6b7280;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-size: 16px;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

@media (max-width: 768px) {
    .saved-canvases-header {
        padding: 20px;
    }
    
    .saved-canvases-header h2 {
        font-size: 18px;
    }
}

/* Modal List */
.saved-canvases-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.saved-canvases-list::-webkit-scrollbar {
    width: 6px;
}

.saved-canvases-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Saved Canvas Item */
.saved-canvas-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--canvas-border);
    border-radius: 16px;
    margin-bottom: 14px;
    transition: all 0.3s var(--canvas-ease-smooth);
    cursor: pointer;
}

.saved-canvas-item:hover {
    background: hsla(210, 100%, 60%, 0.08);
    border-color: hsla(210, 100%, 60%, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.saved-canvas-icon {
    width: 52px;
    height: 52px;
    background: var(--canvas-gradient);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: white;
    box-shadow: 
        0 6px 20px hsla(210, 100%, 60%, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.saved-canvas-info {
    flex: 1;
    min-width: 0;
}

.saved-canvas-title {
    font-size: 16px;
    font-weight: 600;
    color: #f0f0f5;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-canvas-meta {
    font-size: 13px;
    color: #6b7280;
}

.saved-canvas-open-btn {
    padding: 12px 26px;
    background: var(--canvas-gradient);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px hsla(210, 100%, 60%, 0.35);
    flex-shrink: 0;
}

.saved-canvas-open-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px hsla(210, 100%, 60%, 0.45);
}

@media (max-width: 768px) {
    .saved-canvases-list {
        padding: 16px;
    }
    
    .saved-canvas-item {
        padding: 14px;
        gap: 14px;
    }
    
    .saved-canvas-icon {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }
    
    .saved-canvas-title {
        font-size: 14px;
    }
    
    .saved-canvas-meta {
        font-size: 12px;
    }
    
    .saved-canvas-open-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px hsla(210, 100%, 60%, 0.3);
    }
    50% {
        box-shadow: 0 0 40px hsla(210, 100%, 60%, 0.5);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Loading shimmer effect */
.canvas-loading {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ============================================
   THEME VARIATIONS
   ============================================ */

/* Light Theme */
[data-theme="light"] .canvas-workspace {
    --canvas-bg-primary: rgba(255, 255, 255, 0.98);
    --canvas-bg-secondary: rgba(248, 249, 250, 0.95);
    --canvas-bg-glass: rgba(255, 255, 255, 0.8);
    --canvas-border: rgba(0, 0, 0, 0.06);
    --canvas-border-hover: rgba(0, 0, 0, 0.1);
    background: var(--canvas-bg-primary);
}

[data-theme="light"] .canvas-header {
    background: var(--canvas-bg-glass);
}

[data-theme="light"] .canvas-title-input {
    color: #1a1a2e;
}

[data-theme="light"] .canvas-title-input:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .canvas-title-input:focus {
    background: hsla(210, 100%, 60%, 0.08);
}

[data-theme="light"] .canvas-editor {
    color: #1a1a2e;
}

[data-theme="light"] .canvas-editor::placeholder {
    color: #9ca3af;
}

[data-theme="light"] .canvas-toolbar {
    background: rgba(248, 249, 250, 0.8);
}

[data-theme="light"] .canvas-export-menu {
    background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .canvas-export-item {
    color: #374151;
}

[data-theme="light"] .canvas-content {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

[data-theme="light"] .canvas-action-btn {
    background: rgba(0, 0, 0, 0.03);
    color: #6b7280;
}

[data-theme="light"] .canvas-action-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1a1a2e;
}

[data-theme="light"] .canvas-mode-btn {
    color: #6b7280;
}

[data-theme="light"] .canvas-mode-btn:hover {
    color: #1a1a2e;
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .canvas-mode-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .saved-canvases-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.98) 100%);
}

[data-theme="light"] .saved-canvases-header h2,
[data-theme="light"] .saved-canvas-title {
    color: #1a1a2e;
}

[data-theme="light"] .saved-canvas-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .saved-canvas-item:hover {
    background: hsla(210, 100%, 60%, 0.08);
}

/* Lemonade Theme */
[data-theme="lemonade"] .canvas-workspace {
    --canvas-accent-1: #84cc16;
    --canvas-accent-2: #65a30d;
    --canvas-accent-3: #a3e635;
    --canvas-gradient: linear-gradient(135deg, #84cc16, #65a30d);
}

[data-theme="lemonade"] .canvas-mode-btn.active {
    background: var(--canvas-gradient);
}

[data-theme="lemonade"] .vcanvas-open-btn,
[data-theme="lemonade"] .saved-canvas-open-btn,
[data-theme="lemonade"] .saved-canvas-icon,
[data-theme="lemonade"] .vcanvas-icon {
    background: var(--canvas-gradient);
    box-shadow: 0 6px 20px rgba(132, 204, 22, 0.35);
}

[data-theme="lemonade"] .vcanvas-indicator {
    background: linear-gradient(135deg, rgba(132, 204, 22, 0.06) 0%, rgba(101, 163, 13, 0.06) 100%);
    border-color: rgba(132, 204, 22, 0.2);
}

[data-theme="lemonade"] .vcanvas-indicator:hover {
    border-color: #84cc16;
    box-shadow: 0 12px 40px rgba(132, 204, 22, 0.25);
}

[data-theme="lemonade"] .vcanvas-card-header {
    background: rgba(132, 204, 22, 0.08);
    border-bottom-color: rgba(132, 204, 22, 0.12);
}

[data-theme="lemonade"] .vcanvas-card-badge {
    background: rgba(132, 204, 22, 0.2);
    color: #a3e635;
}

[data-theme="lemonade"] .canvas-header::after,
[data-theme="lemonade"] .saved-canvases-header::after {
    background: linear-gradient(90deg, transparent 0%, rgba(132, 204, 22, 0.3) 50%, transparent 100%);
}

[data-theme="lemonade"] .canvas-title-input:focus {
    background: rgba(132, 204, 22, 0.08);
    box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.3);
}

[data-theme="lemonade"] .canvas-workspace::before {
    background: linear-gradient(180deg, rgba(132, 204, 22, 0.08) 0%, transparent 100%);
}

/* Icecream Theme */
[data-theme="icecream"] .canvas-workspace {
    --canvas-accent-1: #ec4899;
    --canvas-accent-2: #f472b6;
    --canvas-accent-3: #f9a8d4;
    --canvas-gradient: linear-gradient(135deg, #ec4899, #f472b6);
}

[data-theme="icecream"] .canvas-mode-btn.active {
    background: var(--canvas-gradient);
}

[data-theme="icecream"] .vcanvas-open-btn,
[data-theme="icecream"] .saved-canvas-open-btn,
[data-theme="icecream"] .saved-canvas-icon,
[data-theme="icecream"] .vcanvas-icon {
    background: var(--canvas-gradient);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35);
}

[data-theme="icecream"] .vcanvas-indicator {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.06) 0%, rgba(244, 114, 182, 0.06) 100%);
    border-color: rgba(236, 72, 153, 0.2);
}

[data-theme="icecream"] .vcanvas-indicator:hover {
    border-color: #ec4899;
    box-shadow: 0 12px 40px rgba(236, 72, 153, 0.25);
}

[data-theme="icecream"] .vcanvas-card-header {
    background: rgba(236, 72, 153, 0.08);
    border-bottom-color: rgba(236, 72, 153, 0.12);
}

[data-theme="icecream"] .vcanvas-card-badge {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
}

[data-theme="icecream"] .canvas-header::after,
[data-theme="icecream"] .saved-canvases-header::after {
    background: linear-gradient(90deg, transparent 0%, rgba(236, 72, 153, 0.3) 50%, transparent 100%);
}

[data-theme="icecream"] .canvas-title-input:focus {
    background: rgba(236, 72, 153, 0.08);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3);
}

[data-theme="icecream"] .canvas-workspace::before {
    background: linear-gradient(180deg, rgba(236, 72, 153, 0.08) 0%, transparent 100%);
}

/* ============================================
   KEYBOARD SHORTCUTS TOOLTIP
   ============================================ */
.canvas-shortcuts-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--canvas-border);
    border-radius: 12px;
    color: #9ca3af;
    font-size: 12px;
    display: flex;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.canvas-workspace:hover .canvas-shortcuts-hint {
    opacity: 1;
    visibility: visible;
}

.canvas-shortcut-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.canvas-shortcut-key kbd {
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    color: #d1d5db;
}

@media (max-width: 768px) {
    .canvas-shortcuts-hint {
        display: none;
    }
}

/* ============================================
   FOCUS & ACCESSIBILITY
   ============================================ */
.canvas-action-btn:focus-visible,
.canvas-mode-btn:focus-visible,
.vcanvas-open-btn:focus-visible,
.vcanvas-copy-btn:focus-visible {
    outline: 2px solid var(--canvas-accent-1);
    outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .canvas-workspace,
    .canvas-workspace *,
    .vcanvas-indicator,
    .saved-canvases-modal,
    .saved-canvases-content {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   CANVAS FOOTER - Quick Actions Bar
   ============================================ */
.canvas-footer {
    padding: 12px 20px;
    background: var(--canvas-bg-glass);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--canvas-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.canvas-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-footer-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--canvas-border);
    color: #9ca3af;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.canvas-footer-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--canvas-border-hover);
    color: #f0f0f5;
}

.canvas-footer-btn i {
    font-size: 12px;
}

.canvas-footer-btn.primary {
    background: var(--canvas-gradient);
    border-color: transparent;
    color: white;
}

.canvas-footer-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px hsla(210, 100%, 60%, 0.35);
}

/* Word/Character Count */
.canvas-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #6b7280;
}

.canvas-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.canvas-stat-value {
    color: #9ca3af;
    font-weight: 500;
}

@media (max-width: 768px) {
    .canvas-footer {
        padding: 10px 16px;
    }
    
    .canvas-footer-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .canvas-stats {
        display: none;
    }
}

/* ============================================
   AI SUGGESTIONS PANEL
   ============================================ */
.canvas-ai-panel {
    position: absolute;
    bottom: 80px;
    left: 20px;
    right: 20px;
    background: rgba(20, 20, 30, 0.98);
    backdrop-filter: blur(30px);
    border: 1px solid var(--canvas-border-hover);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    display: none;
    animation: slideUpFade 0.3s ease;
}

.canvas-ai-panel.active {
    display: block;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

.canvas-ai-title i {
    color: var(--canvas-accent-1);
}

.canvas-ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.canvas-ai-chip {
    padding: 8px 14px;
    background: hsla(210, 100%, 60%, 0.1);
    border: 1px solid hsla(210, 100%, 60%, 0.2);
    border-radius: 20px;
    color: var(--canvas-accent-3);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.canvas-ai-chip:hover {
    background: hsla(210, 100%, 60%, 0.2);
    border-color: var(--canvas-accent-1);
    transform: translateY(-1px);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.canvas-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.canvas-empty-icon {
    width: 80px;
    height: 80px;
    background: var(--canvas-gradient-subtle);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.canvas-empty-icon i {
    font-size: 32px;
    color: var(--canvas-accent-1);
}

.canvas-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: #f0f0f5;
    margin-bottom: 8px;
}

.canvas-empty-desc {
    font-size: 14px;
    color: #6b7280;
    max-width: 300px;
    line-height: 1.6;
}

/* ============================================
   RESIZE HANDLE
   ============================================ */
.canvas-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    transition: background 0.2s ease;
    z-index: 100;
}

.canvas-resize-handle:hover,
.canvas-resize-handle.active {
    background: var(--canvas-accent-1);
}

.canvas-resize-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.canvas-resize-handle:hover::before {
    opacity: 1;
}

@media (max-width: 768px) {
    .canvas-resize-handle {
        display: none;
    }
}

/* ============================================
   CODEMIRROR SYNTAX HIGHLIGHTING - THEME AWARE
   Complete token coverage for all languages
   ============================================ */

/* Dark Theme (Default) - Material Darker */
.canvas-codemirror-container .cm-s-material-darker.CodeMirror,
.canvas-codemirror-container .CodeMirror {
    background: #212121;
    color: #EEFFFF;
}
.canvas-codemirror-container .cm-s-material-darker .CodeMirror-gutters,
.canvas-codemirror-container .CodeMirror-gutters {
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.canvas-codemirror-container .cm-s-material-darker .CodeMirror-linenumber,
.canvas-codemirror-container .CodeMirror-linenumber {
    color: rgba(255, 255, 255, 0.35);
}

/* Dark theme - ALL syntax tokens with HIGH SPECIFICITY to override CDN */
.canvas-codemirror-container .cm-s-material-darker span.cm-comment,
.canvas-codemirror-container .CodeMirror span.cm-comment { color: #546E7A !important; font-style: italic; }
.canvas-codemirror-container .cm-s-material-darker span.cm-string,
.canvas-codemirror-container .CodeMirror span.cm-string { color: #C3E88D !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-string-2,
.canvas-codemirror-container .CodeMirror span.cm-string-2 { color: #89DDFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-number,
.canvas-codemirror-container .CodeMirror span.cm-number { color: #F78C6C !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-keyword,
.canvas-codemirror-container .CodeMirror span.cm-keyword { color: #C792EA !important; font-weight: 500; }
.canvas-codemirror-container .cm-s-material-darker span.cm-operator,
.canvas-codemirror-container .CodeMirror span.cm-operator { color: #89DDFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-variable,
.canvas-codemirror-container .CodeMirror span.cm-variable { color: #EEFFFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-variable-2,
.canvas-codemirror-container .CodeMirror span.cm-variable-2 { color: #82AAFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-variable-3,
.canvas-codemirror-container .CodeMirror span.cm-variable-3 { color: #DECB6B !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-def,
.canvas-codemirror-container .CodeMirror span.cm-def { color: #82AAFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-property,
.canvas-codemirror-container .CodeMirror span.cm-property { color: #80CBC4 !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-atom,
.canvas-codemirror-container .CodeMirror span.cm-atom { color: #F78C6C !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-type,
.canvas-codemirror-container .CodeMirror span.cm-type { color: #FFCB6B !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-builtin,
.canvas-codemirror-container .CodeMirror span.cm-builtin { color: #82AAFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-qualifier,
.canvas-codemirror-container .CodeMirror span.cm-qualifier { color: #FFCB6B !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-link,
.canvas-codemirror-container .CodeMirror span.cm-link { color: #82AAFF !important; text-decoration: underline; }
.canvas-codemirror-container .cm-s-material-darker span.cm-error,
.canvas-codemirror-container .CodeMirror span.cm-error { color: #FF5370 !important; background: rgba(255, 83, 112, 0.1); }
/* HTML/XML tokens - VIBRANT and DISTINCT */
.canvas-codemirror-container .cm-s-material-darker span.cm-tag,
.canvas-codemirror-container .CodeMirror span.cm-tag { color: #FF5370 !important; font-weight: 500; }
.canvas-codemirror-container .cm-s-material-darker span.cm-tag.cm-bracket,
.canvas-codemirror-container .CodeMirror span.cm-tag.cm-bracket { color: #89DDFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-attribute,
.canvas-codemirror-container .CodeMirror span.cm-attribute { color: #FFCB6B !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-bracket,
.canvas-codemirror-container .CodeMirror span.cm-bracket { color: #89DDFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-meta,
.canvas-codemirror-container .CodeMirror span.cm-meta { color: #89DDFF !important; }
/* Markdown tokens */
.canvas-codemirror-container .cm-s-material-darker span.cm-header,
.canvas-codemirror-container .CodeMirror span.cm-header { color: #89DDFF !important; font-weight: bold; }
.canvas-codemirror-container .cm-s-material-darker span.cm-strong,
.canvas-codemirror-container .CodeMirror span.cm-strong { font-weight: bold; color: #EEFFFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-em,
.canvas-codemirror-container .CodeMirror span.cm-em { font-style: italic; color: #C3E88D !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-url,
.canvas-codemirror-container .CodeMirror span.cm-url { color: #82AAFF !important; text-decoration: underline; }
.canvas-codemirror-container .cm-s-material-darker span.cm-hr,
.canvas-codemirror-container .CodeMirror span.cm-hr { color: #546E7A !important; }
/* CSS tokens */
.canvas-codemirror-container .cm-s-material-darker span.cm-callee,
.canvas-codemirror-container .CodeMirror span.cm-callee { color: #82AAFF !important; }
/* Python/Ruby tokens */
.canvas-codemirror-container .cm-s-material-darker span.cm-punctuation,
.canvas-codemirror-container .CodeMirror span.cm-punctuation { color: #89DDFF !important; }
/* Rust/Go tokens */
.canvas-codemirror-container .cm-s-material-darker span.cm-macro,
.canvas-codemirror-container .CodeMirror span.cm-macro { color: #82AAFF !important; }
.canvas-codemirror-container .cm-s-material-darker span.cm-lifetime,
.canvas-codemirror-container .CodeMirror span.cm-lifetime { color: #FFCB6B !important; }

/* Light Theme - Override material-darker completely */
[data-theme="light"] .canvas-codemirror-container .cm-s-material-darker.CodeMirror,
[data-theme="light"] .canvas-codemirror-container .CodeMirror {
    background: #FAFAFA !important;
    color: #546E7A !important;
}
[data-theme="light"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-gutters,
[data-theme="light"] .canvas-codemirror-container .CodeMirror-gutters {
    background: rgba(0, 0, 0, 0.04) !important;
    border-right-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-linenumber,
[data-theme="light"] .canvas-codemirror-container .CodeMirror-linenumber {
    color: rgba(0, 0, 0, 0.35) !important;
}
[data-theme="light"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-cursor,
[data-theme="light"] .canvas-codemirror-container .CodeMirror-cursor {
    border-left-color: #1a1a2e !important;
}
[data-theme="light"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-selected,
[data-theme="light"] .canvas-codemirror-container .CodeMirror-selected {
    background: rgba(97, 130, 184, 0.25) !important;
}
[data-theme="light"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-activeline-background,
[data-theme="light"] .canvas-codemirror-container .CodeMirror-activeline-background {
    background: rgba(0, 0, 0, 0.03) !important;
}
/* Light theme syntax tokens - complete coverage */
[data-theme="light"] .canvas-codemirror-container span.cm-comment { color: #90A4AE !important; font-style: italic; }
[data-theme="light"] .canvas-codemirror-container span.cm-string { color: #91B859 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-string-2 { color: #91B859 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-number { color: #F76D47 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-keyword { color: #7C4DFF !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-operator { color: #39ADB5 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-variable { color: #546E7A !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-variable-2 { color: #546E7A !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-variable-3 { color: #546E7A !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-def { color: #6182B8 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-property { color: #6182B8 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-atom { color: #F76D47 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-type { color: #E2931D !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-builtin { color: #6182B8 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-qualifier { color: #E2931D !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-link { color: #6182B8 !important; text-decoration: underline; }
[data-theme="light"] .canvas-codemirror-container span.cm-error { color: #E53935 !important; }
/* HTML/XML tokens */
[data-theme="light"] .canvas-codemirror-container span.cm-tag { color: #E53935 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-tag.cm-bracket { color: #39ADB5 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-attribute { color: #7C4DFF !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-bracket { color: #39ADB5 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-meta { color: #F76D47 !important; }
/* Markdown tokens */
[data-theme="light"] .canvas-codemirror-container span.cm-header { color: #6182B8 !important; font-weight: bold; }
[data-theme="light"] .canvas-codemirror-container span.cm-strong { font-weight: bold; }
[data-theme="light"] .canvas-codemirror-container span.cm-em { font-style: italic; }
[data-theme="light"] .canvas-codemirror-container span.cm-url { color: #6182B8 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-hr { color: #90A4AE !important; }
/* CSS tokens */
[data-theme="light"] .canvas-codemirror-container span.cm-callee { color: #6182B8 !important; }
/* Python/Ruby/Rust tokens */
[data-theme="light"] .canvas-codemirror-container span.cm-punctuation { color: #39ADB5 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-macro { color: #6182B8 !important; }
[data-theme="light"] .canvas-codemirror-container span.cm-lifetime { color: #E2931D !important; }

/* Lemonade Theme - Warm Sunset Override */
[data-theme="lemonade"] .canvas-codemirror-container .cm-s-material-darker.CodeMirror,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror {
    background: #FFF8E7 !important;
    color: #5D4E37 !important;
}
[data-theme="lemonade"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-gutters,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-gutters {
    background: rgba(180, 120, 60, 0.06) !important;
    border-right-color: rgba(180, 120, 60, 0.1) !important;
}
[data-theme="lemonade"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-linenumber,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-linenumber {
    color: rgba(120, 80, 40, 0.4) !important;
}
[data-theme="lemonade"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-cursor,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-cursor {
    border-left-color: #5D4037 !important;
}
[data-theme="lemonade"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-selected,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-selected {
    background: rgba(245, 124, 0, 0.25) !important;
}
[data-theme="lemonade"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-activeline-background,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-activeline-background {
    background: rgba(180, 120, 60, 0.05) !important;
}
/* Lemonade theme syntax tokens - complete coverage */
[data-theme="lemonade"] .canvas-codemirror-container span.cm-comment { color: #A1887F !important; font-style: italic; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-string { color: #689F38 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-string-2 { color: #689F38 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-number { color: #E65100 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-keyword { color: #D84315 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-operator { color: #F57C00 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-variable { color: #5D4037 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-variable-2 { color: #5D4037 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-variable-3 { color: #5D4037 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-def { color: #1565C0 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-property { color: #00838F !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-atom { color: #E65100 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-type { color: #EF6C00 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-builtin { color: #1565C0 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-qualifier { color: #EF6C00 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-link { color: #1565C0 !important; text-decoration: underline; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-error { color: #D32F2F !important; }
/* HTML/XML tokens */
[data-theme="lemonade"] .canvas-codemirror-container span.cm-tag { color: #C62828 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-tag.cm-bracket { color: #EF6C00 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-attribute { color: #6A1B9A !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-bracket { color: #EF6C00 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-meta { color: #AD1457 !important; }
/* Markdown tokens */
[data-theme="lemonade"] .canvas-codemirror-container span.cm-header { color: #C62828 !important; font-weight: bold; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-strong { font-weight: bold; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-em { font-style: italic; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-url { color: #1565C0 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-hr { color: #A1887F !important; }
/* CSS tokens */
[data-theme="lemonade"] .canvas-codemirror-container span.cm-callee { color: #1565C0 !important; }
/* Python/Ruby/Rust tokens */
[data-theme="lemonade"] .canvas-codemirror-container span.cm-punctuation { color: #F57C00 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-macro { color: #1565C0 !important; }
[data-theme="lemonade"] .canvas-codemirror-container span.cm-lifetime { color: #EF6C00 !important; }

/* Icecream Theme - Catppuccin Mocha Override */
[data-theme="icecream"] .canvas-codemirror-container .cm-s-material-darker.CodeMirror,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror {
    background: #1E1E2E !important;
    color: #CDD6F4 !important;
}
[data-theme="icecream"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-gutters,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-gutters {
    background: rgba(0, 0, 0, 0.2) !important;
    border-right-color: rgba(150, 130, 180, 0.15) !important;
}
[data-theme="icecream"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-linenumber,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-linenumber {
    color: rgba(180, 170, 210, 0.4) !important;
}
[data-theme="icecream"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-cursor,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-cursor {
    border-left-color: #F5E0DC !important;
}
[data-theme="icecream"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-selected,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-selected {
    background: rgba(203, 166, 247, 0.3) !important;
}
[data-theme="icecream"] .canvas-codemirror-container .cm-s-material-darker .CodeMirror-activeline-background,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-activeline-background {
    background: rgba(150, 130, 180, 0.08) !important;
}
/* Icecream theme syntax tokens - complete coverage */
[data-theme="icecream"] .canvas-codemirror-container span.cm-comment { color: #6C7086 !important; font-style: italic; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-string { color: #A6E3A1 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-string-2 { color: #A6E3A1 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-number { color: #FAB387 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-keyword { color: #CBA6F7 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-operator { color: #89DCEB !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-variable { color: #CDD6F4 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-variable-2 { color: #CDD6F4 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-variable-3 { color: #CDD6F4 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-def { color: #89B4FA !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-property { color: #94E2D5 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-atom { color: #FAB387 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-type { color: #F9E2AF !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-builtin { color: #89B4FA !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-qualifier { color: #F9E2AF !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-link { color: #89B4FA !important; text-decoration: underline; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-error { color: #F38BA8 !important; }
/* HTML/XML tokens */
[data-theme="icecream"] .canvas-codemirror-container span.cm-tag { color: #F38BA8 !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-tag.cm-bracket { color: #89DCEB !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-attribute { color: #F9E2AF !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-bracket { color: #89DCEB !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-meta { color: #F5C2E7 !important; }
/* Markdown tokens */
[data-theme="icecream"] .canvas-codemirror-container span.cm-header { color: #89B4FA !important; font-weight: bold; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-strong { font-weight: bold; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-em { font-style: italic; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-url { color: #89B4FA !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-hr { color: #6C7086 !important; }
/* CSS tokens */
[data-theme="icecream"] .canvas-codemirror-container span.cm-callee { color: #89B4FA !important; }
/* Python/Ruby/Rust tokens */
[data-theme="icecream"] .canvas-codemirror-container span.cm-punctuation { color: #89DCEB !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-macro { color: #89B4FA !important; }
[data-theme="icecream"] .canvas-codemirror-container span.cm-lifetime { color: #F9E2AF !important; }

/* Scrollbar styling per theme */
[data-theme="light"] .canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
[data-theme="light"] .canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
[data-theme="lemonade"] .canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: rgba(150, 130, 180, 0.25);
}

[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
[data-theme="icecream"] .canvas-codemirror-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 130, 180, 0.4);
}