index.css

@import '@fortawesome/fontawesome-free/css/all.css';
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Configure custom variant for data-theme based switching */
@custom-variant light (&:where([data-theme=catppuccin-latte], [data-theme=catppuccin-latte] *));

/* Catppuccin Theme CSS Variables */
:root {
  /* Default to Catppuccin Mocha Colors */
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
}

/* Catppuccin Latte (Light) Theme */
[data-theme="catppuccin-latte"] {
  --ctp-base: #eff1f5;
  --ctp-mantle: #e6e9ef;
  --ctp-crust: #dce0e8;
  --ctp-text: #4c4f69;
  --ctp-subtext1: #5c5f77;
  --ctp-subtext0: #5c5f77;
  --ctp-surface2: #acb0be;
  --ctp-surface1: #bcc0cc;
  --ctp-surface0: #ccd0da;
  --ctp-overlay2: #6c6f85;
  --ctp-overlay1: #7c7f93;
  --ctp-overlay0: #7c7f93;
  --ctp-rosewater: #dc8a78;
  --ctp-flamingo: #dd7878;
  --ctp-pink: #ea76cb;
  --ctp-mauve: #8839ef;
  --ctp-red: #d20f39;
  --ctp-maroon: #e64553;
  --ctp-peach: #fe640b;
  --ctp-yellow: #df8e1d;
  --ctp-green: #40a02b;
  --ctp-teal: #179299;
  --ctp-sky: #04a5e5;
  --ctp-sapphire: #209fb5;
  --ctp-blue: #1e66f5;
  --ctp-lavender: #7287fd;
}

@layer base {
  body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--ctp-base);
    color: var(--ctp-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  code, pre, .font-mono {
    font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', monospace;
  }

  /* ENSURE PROPER THEME APPLICATION */
  html[data-theme="catppuccin-mocha"],
  body[data-theme="catppuccin-mocha"] {
    background-color: #1e1e2e !important;
    color: #cdd6f4 !important;
  }

  html[data-theme="catppuccin-latte"],
  body[data-theme="catppuccin-latte"] {
    background-color: #eff1f5 !important;
    color: #4c4f69 !important;
  }
  
  * {
    border-color: var(--ctp-surface1);
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--ctp-mantle);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--ctp-surface2);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--ctp-overlay0);
  }

  /* Titlebar styling */
  .titlebar {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0));
    box-shadow: 0 1px 0 0 var(--ctp-surface1), 0 4px 10px rgba(0,0,0,0.15);
    -webkit-user-select: none;
    user-select: none;
    -webkit-app-region: drag;
  }

  /* Modern toolbar container */
  .toolbar-container {
    background: var(--ctp-mantle);
  }

  /* macOS transparent titlebar - the sidebar section needs left padding for traffic lights */
  .macos-titlebar .sidebar-toolbar {
    padding-left: 72px;
  }

  /* Toolbar section grouping */
  .toolbar-section {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
  }

  /* Toolbar divider */
  .toolbar-divider {
    width: 1px;
    height: 16px;
    background-color: var(--ctp-surface1);
    margin: 0 4px;
  }

  /* Minimal icon button */
  .toolbar-icon-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.12s ease;
  }

  .toolbar-icon-btn:hover:not(:disabled) {
    background-color: var(--ctp-surface0);
  }

  .toolbar-icon-btn:active:not(:disabled) {
    background-color: var(--ctp-surface1);
  }

  .toolbar-icon-btn:disabled {
    cursor: not-allowed;
  }

  /* Run button - special styling */
  .toolbar-run-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 10px;
    background-color: var(--ctp-green);
    color: var(--ctp-crust);
    border: none;
    cursor: pointer;
    transition: all 0.12s ease;
  }

  .toolbar-run-btn:hover:not(:disabled) {
    background-color: var(--ctp-teal);
    transform: scale(1.05);
  }

  .toolbar-run-btn:active:not(:disabled) {
    transform: scale(0.98);
  }

  .toolbar-run-btn:disabled {
    cursor: not-allowed;
  }

  /* Legacy toolbar button styles (keep for compatibility) */
  .toolbar-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .toolbar-btn:hover:not(:disabled) {
    background-color: var(--ctp-surface1);
  }

  .toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Accent button (Run button) */
  .toolbar-btn-accent {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 11px;
    transition: all 0.15s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }

  .toolbar-btn-accent:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(166, 227, 161, 0.3);
  }

  .toolbar-btn-accent:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Dropdown item */
  .dropdown-item {
    width: 100%;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ctp-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.1s ease;
  }

  .dropdown-item:hover {
    background-color: var(--ctp-surface1);
  }

  /* Toolbar group styling */
  .toolbar-group {
    transition: background-color 0.15s ease;
  }

  .toolbar-group:hover {
    background-color: var(--ctp-surface1) !important;
  }

  /* Exclude interactive regions from drag
     Note: -webkit-app-region is not inherited. Ensure descendants are also excluded
     so clicks inside toolbar buttons reliably register instead of starting a drag. */
  .no-drag, .no-drag * {
    -webkit-app-region: no-drag !important;
    pointer-events: auto;
  }
}

@layer components {
  /* Button styles */
  .btn-primary {
    @apply px-4 py-2 rounded font-medium transition-colors;
    background-color: var(--ctp-mauve);
    color: var(--ctp-base);
  }
  
  .btn-primary:hover {
    background-color: var(--ctp-lavender);
  }
  
  .btn-secondary {
    @apply px-4 py-2 rounded font-medium transition-colors;
    background-color: var(--ctp-surface0);
    color: var(--ctp-text);
    border: 1px solid var(--ctp-surface1);
  }
  
  .btn-secondary:hover {
    background-color: var(--ctp-surface1);
    border-color: var(--ctp-surface2);
  }

  .btn-success {
    @apply px-4 py-2 rounded font-medium transition-colors;
    background-color: var(--ctp-green);
    color: var(--ctp-base);
  }
  
  .btn-success:hover {
    background-color: var(--ctp-teal);
  }

  .btn-warning {
    @apply px-4 py-2 rounded font-medium transition-colors;
    background-color: var(--ctp-yellow);
    color: var(--ctp-base);
  }
  
  .btn-warning:hover {
    background-color: var(--ctp-peach);
  }

  .btn-danger {
    @apply px-4 py-2 rounded font-medium transition-colors;
    background-color: var(--ctp-red);
    color: var(--ctp-base);
  }
  
  .btn-danger:hover {
    background-color: var(--ctp-maroon);
  }

  /* Input styles */
  .input-primary {
    @apply px-3 py-2 rounded border transition-colors;
    background-color: var(--ctp-surface0);
    border-color: var(--ctp-surface1);
    color: var(--ctp-text);
  }
  
  .input-primary:focus {
    outline: none;
    border-color: var(--ctp-mauve);
    box-shadow: 0 0 0 2px rgba(203, 166, 247, 0.2);
  }
  
  .input-primary::placeholder {
    color: var(--ctp-overlay0);
  }

  /* Panel styles */
  .panel {
    background-color: var(--ctp-mantle);
    border: 1px solid var(--ctp-surface1);
  }
  
  .panel-header {
    @apply px-4 py-1 border-b;
    background-color: var(--ctp-surface0);
    border-color: var(--ctp-surface1);
    color: var(--ctp-subtext1);
  }

  /* Special overrides for light theme to improve contrast */
  [data-theme="catppuccin-latte"] .panel-header {
    color: var(--ctp-text);
  }

  /* Tab bar styles */
  .tabs-bar {
    scrollbar-width: thin;
    scrollbar-color: var(--ctp-surface2) transparent;
  }

  .tabs-bar::-webkit-scrollbar {
    height: 4px;
  }

  .tabs-bar::-webkit-scrollbar-track {
    background: transparent;
  }

  .tabs-bar::-webkit-scrollbar-thumb {
    background: var(--ctp-surface2);
    border-radius: 2px;
  }

  .tab-item:hover:not(.tab-active) {
    background-color: var(--ctp-surface0);
  }

  .tab-item .tab-close:hover {
    background-color: var(--ctp-surface2);
    color: var(--ctp-red);
  }

  .tab-active .tab-close {
    opacity: 0.5;
  }

  .tab-active:hover .tab-close {
    opacity: 1;
  }

  /* Status bar gradient animation */
  .status-bar {
    background-size: 200% 100%;
    animation: statusbar-gradient 8s ease infinite;
  }

  @keyframes statusbar-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  /* Smooth panel transitions */
  .panel-transition {
    transition: width 0.2s ease, opacity 0.2s ease;
  }

  /* Focus ring for accessibility */
  .focus-ring:focus-visible {
    outline: 2px solid var(--ctp-mauve);
    outline-offset: 2px;
  }

  /* Animate-in utility classes */
  .animate-in {
    animation-fill-mode: both;
  }

  .fade-in {
    animation-name: fadeIn;
    animation-duration: 0.15s;
  }

  .slide-in-from-top-2 {
    animation-name: slideInFromTop;
    animation-duration: 0.15s;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideInFromTop {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Glow effect for active elements */
  .glow-green {
    box-shadow: 0 0 10px var(--ctp-green), 0 0 20px rgba(166, 227, 161, 0.3);
  }

  /* Debug status indicator animation */
  @keyframes debug-status-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.1);
    }
  }

  .debug-status-icon-pulse {
    animation: debug-status-pulse 1.5s ease-in-out infinite;
    display: inline-block;
  }

  /* Fix file tree text visibility in light theme */
  [data-theme="catppuccin-latte"] .text-gray-400,
  [data-theme="catppuccin-latte"] .text-gray-500,
  [data-theme="catppuccin-latte"] .text-gray-600 {
    color: var(--ctp-subtext1);
  }

  /* Fix context menu and dialogs in light theme */
  [data-theme="catppuccin-latte"] .bg-gray-800 {
    background-color: var(--ctp-surface0);
  }

  [data-theme="catppuccin-latte"] .bg-gray-700 {
    background-color: var(--ctp-surface1);
  }

  [data-theme="catppuccin-latte"] .text-gray-300 {
    color: var(--ctp-text);
  }

  [data-theme="catppuccin-latte"] .border-gray-600,
  [data-theme="catppuccin-latte"] .border-gray-700 {
    border-color: var(--ctp-surface1);
  }

  /* Fix specific inline styles in light theme */
  [data-theme="catppuccin-latte"] [style*="color: var(--ctp-overlay0)"] {
    color: var(--ctp-overlay1) !important;
  }

  /* ================================================================
   * Settings Panel - CSS hover/focus 替代 JS handler
   * ================================================================ */

  .settings-input {
    background-color: var(--ctp-surface0);
    border-color: var(--ctp-surface1);
    color: var(--ctp-text);
  }

  .settings-input:focus {
    border-color: var(--ctp-blue);
    outline: none;
  }

  .settings-close-btn:hover {
    color: var(--ctp-text);
  }

  .settings-nav-btn:hover {
    background-color: var(--ctp-surface0);
  }

  .settings-reset-btn:hover {
    background-color: var(--ctp-maroon);
  }

  .settings-theme-card:hover {
    border-color: var(--ctp-surface1);
  }

  /* ================================================================
   * Catppuccin 按钮 - CSS hover 替代 JS handler
   * ================================================================ */

  .btn-ctp-blue {
    background-color: var(--ctp-blue);
    color: var(--ctp-base);
  }
  .btn-ctp-blue:hover {
    background-color: var(--ctp-sapphire);
  }

  .btn-ctp-green {
    background-color: var(--ctp-green);
    color: var(--ctp-base);
  }
  .btn-ctp-green:hover {
    background-color: var(--ctp-teal);
  }

  .btn-ctp-mauve {
    background-color: var(--ctp-mauve);
    color: var(--ctp-base);
  }
  .btn-ctp-mauve:hover {
    background-color: var(--ctp-lavender);
  }

  .btn-ctp-red {
    background-color: var(--ctp-red);
    color: var(--ctp-base);
  }
  .btn-ctp-red:hover {
    background-color: var(--ctp-maroon);
  }

  .btn-ctp-surface2 {
    background-color: var(--ctp-surface2);
    color: var(--ctp-text);
  }
  .btn-ctp-surface2:hover {
    background-color: var(--ctp-overlay0);
  }

  .hover-text-bright:hover {
    color: var(--ctp-text);
  }
}

/* Monaco editor custom decorations for Ruff diagnostics */

/* Error styles (red) */
.ruff-error-decoration {
  background-color: rgba(243, 139, 168, 0.15) !important;
  border-bottom: 2px wavy var(--ctp-red) !important;
  text-decoration: underline wavy var(--ctp-red) !important;
}

.ruff-error-glyph {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f38ba8' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM7 4h2v5H7V4zm0 6h2v2H7v-2z'/%3E%3C/svg%3E") center center no-repeat !important;
  background-size: 14px 14px !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.ruff-error-line {
  background-color: rgba(243, 139, 168, 0.1) !important;
  border-left: 3px solid var(--ctp-red) !important;
  width: 3px !important;
  margin-left: 3px !important;
}

/* Warning styles (yellow/peach) */
.ruff-warning-decoration {
  background-color: rgba(249, 226, 175, 0.15) !important;
  border-bottom: 2px wavy var(--ctp-yellow) !important;
  text-decoration: underline wavy var(--ctp-yellow) !important;
}

.ruff-warning-glyph {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f9e2af' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.964 0L.746 12.8a1.13 1.13 0 0 0 .982 1.7h12.544a1.13 1.13 0 0 0 .982-1.7L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E") center center no-repeat !important;
  background-size: 14px 14px !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.ruff-warning-line {
  background-color: rgba(249, 226, 175, 0.1) !important;
  border-left: 3px solid var(--ctp-yellow) !important;
  width: 3px !important;
  margin-left: 3px !important;
}

/* Info styles (blue) */
.ruff-info-decoration {
  background-color: rgba(135, 206, 235, 0.15) !important;
  border-bottom: 2px wavy var(--ctp-blue) !important;
  text-decoration: underline wavy var(--ctp-blue) !important;
}

.ruff-info-glyph {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2387ceeb' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm1 4H7v2h2V5zM7 7h2v6H7V7z'/%3E%3C/svg%3E") center center no-repeat !important;
  background-size: 14px 14px !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.ruff-info-line {
  background-color: rgba(135, 206, 235, 0.1) !important;
  border-left: 3px solid var(--ctp-blue) !important;
  width: 3px !important;
  margin-left: 3px !important;
}

/* Hover tooltip enhancement */
.monaco-hover-content {
  max-width: 400px !important;
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border: 1px solid var(--ctp-surface1) !important;
}

.monaco-hover .hover-row .contents {
  padding: 8px 12px !important;
}

/* Problems widget styling */
.monaco-editor .zone-widget .zone-widget-container {
  border: 1px solid var(--ctp-surface1) !important;
  background-color: var(--ctp-surface0) !important;
}

.monaco-editor .zone-widget .zone-widget-container.error {
  border-color: var(--ctp-red) !important;
}

.monaco-editor .zone-widget .zone-widget-container.warning {
  border-color: var(--ctp-yellow) !important;
}

.monaco-editor .zone-widget .zone-widget-container.info {
  border-color: var(--ctp-blue) !important;
}

/* COMPLETE Monaco Editor CSS-Only Theme Override */

/* CATPPUCCIN MOCHA THEME - TARGETED Monaco Editor BACKGROUNDS */
[data-theme="catppuccin-mocha"] .monaco-editor,
[data-theme="catppuccin-mocha"] .monaco-editor .monaco-editor-background,
[data-theme="catppuccin-mocha"] .monaco-editor .view-lines,
[data-theme="catppuccin-mocha"] .monaco-editor .monaco-scrollable-element,
[data-theme="catppuccin-mocha"] .monaco-editor .overflow-guard,
[data-theme="catppuccin-mocha"] .monaco-editor .editor-scrollable,
[data-theme="catppuccin-mocha"] .monaco-editor .margin,
[data-theme="catppuccin-mocha"] .monaco-editor .margin-view-overlays,
[data-theme="catppuccin-mocha"] .monaco-editor .glyph-margin,
body[data-theme="catppuccin-mocha"] .monaco-editor,
body[data-theme="catppuccin-mocha"] .monaco-editor .monaco-editor-background,
body[data-theme="catppuccin-mocha"] .monaco-editor .view-lines,
body[data-theme="catppuccin-mocha"] .monaco-editor .monaco-scrollable-element,
body[data-theme="catppuccin-mocha"] .monaco-editor .overflow-guard {
  background-color: #1e1e2e !important;
  background: #1e1e2e !important;
}

/* CATPPUCCIN LATTE THEME - TARGETED Monaco Editor BACKGROUNDS */
[data-theme="catppuccin-latte"] .monaco-editor,
[data-theme="catppuccin-latte"] .monaco-editor .monaco-editor-background,
[data-theme="catppuccin-latte"] .monaco-editor .view-lines,
[data-theme="catppuccin-latte"] .monaco-editor .monaco-scrollable-element,
[data-theme="catppuccin-latte"] .monaco-editor .overflow-guard,
[data-theme="catppuccin-latte"] .monaco-editor .editor-scrollable,
[data-theme="catppuccin-latte"] .monaco-editor .margin,
[data-theme="catppuccin-latte"] .monaco-editor .margin-view-overlays,
[data-theme="catppuccin-latte"] .monaco-editor .glyph-margin,
body[data-theme="catppuccin-latte"] .monaco-editor,
body[data-theme="catppuccin-latte"] .monaco-editor .monaco-editor-background,
body[data-theme="catppuccin-latte"] .monaco-editor .view-lines,
body[data-theme="catppuccin-latte"] .monaco-editor .monaco-scrollable-element,
body[data-theme="catppuccin-latte"] .monaco-editor .overflow-guard {
  background-color: #eff1f5 !important;
  background: #eff1f5 !important;
}

/* FORCE Monaco Editor Container Background */
[data-theme="catppuccin-mocha"] .monaco-editor-container,
[data-theme="catppuccin-mocha"] div[data-uri*="monaco-editor"] {
  background-color: #1e1e2e !important;
}

[data-theme="catppuccin-latte"] .monaco-editor-container,
[data-theme="catppuccin-latte"] div[data-uri*="monaco-editor"] {
  background-color: #eff1f5 !important;
}

/* LINE NUMBERS - Enhanced */
[data-theme="catppuccin-mocha"] .monaco-editor .line-numbers {
  color: #6c7086 !important;
  background-color: #1e1e2e !important;
}

[data-theme="catppuccin-latte"] .monaco-editor .line-numbers {
  color: #9ca0b0 !important;
  background-color: #eff1f5 !important;
}

/* TEXT CONTENT OVERRIDE */
[data-theme="catppuccin-mocha"] .monaco-editor .view-line,
[data-theme="catppuccin-mocha"] .monaco-editor .view-lines {
  color: #cdd6f4 !important;
}

[data-theme="catppuccin-latte"] .monaco-editor .view-line,
[data-theme="catppuccin-latte"] .monaco-editor .view-lines {
  color: #4c4f69 !important;
}

/* SELECTION AND CURSOR COLORS - Enhanced */
[data-theme="catppuccin-mocha"] .monaco-editor .selected-text,
[data-theme="catppuccin-mocha"] .monaco-editor .focused .selected-text,
[data-theme="catppuccin-mocha"] .monaco-editor .view-line span.inline-selected-text {
  background-color: #585b70 !important;
}

[data-theme="catppuccin-mocha"] .monaco-editor .cursor {
  background-color: #f5e0dc !important;
  border-color: #f5e0dc !important;
}

[data-theme="catppuccin-latte"] .monaco-editor .selected-text,
[data-theme="catppuccin-latte"] .monaco-editor .focused .selected-text,
[data-theme="catppuccin-latte"] .monaco-editor .view-line span.inline-selected-text {
  background-color: #acb0be !important;
}

[data-theme="catppuccin-latte"] .monaco-editor .cursor {
  background-color: #dc8a78 !important;
  border-color: #dc8a78 !important;
}

/* AGGRESSIVE BACKGROUND OVERRIDE */
[data-theme="catppuccin-latte"] * {
  background-color: inherit;
}

[data-theme="catppuccin-latte"] .monaco-editor *[style*="background"],
[data-theme="catppuccin-latte"] .monaco-editor *[style*="background-color"] {
  background-color: #eff1f5 !important;
}

[data-theme="catppuccin-mocha"] .monaco-editor *[style*="background"],
[data-theme="catppuccin-mocha"] .monaco-editor *[style*="background-color"] {
  background-color: #1e1e2e !important;
}

/* FORCE REMOVAL OF ANY WHITE/LIGHT BACKGROUNDS - Enhanced */
.monaco-editor [style*="background-color: rgb(255, 255, 255)"],
.monaco-editor [style*="background-color: #ffffff"],
.monaco-editor [style*="background: rgb(255, 255, 255)"],
.monaco-editor [style*="background: #ffffff"],
[data-theme="catppuccin-latte"] .monaco-editor [style*="background-color: rgb(30, 30, 46)"],
[data-theme="catppuccin-latte"] .monaco-editor [style*="background-color: #1e1e2e"] {
  background-color: inherit !important;
  background: inherit !important;
}

/* ADDITIONAL MONACO OVERRIDES FOR LATTE */
[data-theme="catppuccin-latte"] .monaco-editor .monaco-menu,
[data-theme="catppuccin-latte"] .monaco-editor .monaco-action-bar,
[data-theme="catppuccin-latte"] .monaco-editor .suggest-widget,
[data-theme="catppuccin-latte"] .monaco-editor .parameter-hints-widget {
  background-color: #e6e9ef !important;
  color: #4c4f69 !important;
}

[data-theme="catppuccin-latte"] .monaco-editor .monaco-list-row {
  background-color: transparent !important;
  color: #4c4f69 !important;
}

[data-theme="catppuccin-latte"] .monaco-editor .monaco-list-row:hover {
  background-color: #ccd0da !important;
}

/* Breakpoint decoration styles */
.breakpoint-glyph {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f38ba8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3C/svg%3E") center center no-repeat !important;
  background-size: 14px 14px !important;
  margin-left: 2px !important;
  cursor: pointer !important;
}

.breakpoint-glyph:hover {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f38ba8' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23cba6f7' stroke-width='1'/%3E%3C/svg%3E") center center no-repeat !important;
  background-size: 16px 16px !important;
}

/* ========================================
   Monaco Editor - Ensure Text Selectable
   ======================================== */

/* CRITICAL: Override Monaco's .no-user-select class with higher specificity */
/* Ensure Monaco Editor content is selectable and copyable */
.monaco-editor,
.monaco-editor.no-user-select,
.monaco-editor .no-user-select,
.monaco-editor *,
.monaco-editor .view-lines,
.monaco-editor .view-line,
.monaco-editor .lines-content,
.monaco-editor .view-lines > .view-line > span,
.monaco-editor .view-lines > .view-line > span > span {
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text !important;
}

/* Allow pointer events on editor content */
.monaco-editor .view-lines,
.monaco-editor .lines-content {
  pointer-events: auto !important;
}

/* CRITICAL FIX: Force Monaco's selection layer to be visible
   Monaco renders selection using div layers with specific classes */
.monaco-editor .view-lines .view-line .cslr,
.monaco-editor .selected-text,
.monaco-editor .view-overlays .current-line,
.monaco-editor .view-overlays .selections-layer .selection {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Force selection background color directly on Monaco's selection divs */
[data-theme="catppuccin-mocha"] .monaco-editor .view-overlays .selections-layer > div,
[data-theme="catppuccin-mocha"] .monaco-editor .selections-layer > div {
  background-color: rgba(137, 180, 250, 0.40) !important;
}

[data-theme="catppuccin-latte"] .monaco-editor .view-overlays .selections-layer > div,
[data-theme="catppuccin-latte"] .monaco-editor .selections-layer > div {
  background-color: rgba(30, 102, 245, 0.35) !important;
}

/* Note: Monaco Editor uses its own internal selection rendering system.
   Selection colors are controlled via the theme's colors object, not CSS.
   CSS ::selection pseudo-elements do NOT work with Monaco Editor.
   However, we can force styles on Monaco's selection layer divs. */