@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Font settings — overridden by app-layout via useSettings */
  --forge-font-size: 14px;

  /* Dark theme (default) — Forge design tokens, see forge-design.md
   * Surface ladder / ink / borders are DERIVED from --bg-page + --text-primary
   * via color-mix, so the whole UI re-skins when the theme engine injects
   * these two (see src/lib/preset-themes.ts & theme-provider). Percentages are
   * tuned so the default Forge theme matches the pre-derivation hex values. */
  --bg-page: #0B0B0E;
  --text-primary: #FAFAF9;

  /* Surface ladder — derived */
  --bg-surface:  color-mix(in oklch, var(--text-primary) 5%,  var(--bg-page));
  --bg-elevated: color-mix(in oklch, var(--text-primary) 7%,  var(--bg-page));
  --bg-hover:    color-mix(in oklch, var(--text-primary) 10%, var(--bg-page));
  --bg-active:   color-mix(in oklch, var(--text-primary) 14%, var(--bg-page));

  /* DESIGN.md surface ladder aliases (canonical names) */
  --canvas: var(--bg-page);
  --surface-1: var(--bg-surface);
  --surface-2: var(--bg-elevated);
  --surface-3: var(--bg-hover);
  --surface-4: var(--bg-active);

  /* Ink ladder — derived */
  --text-secondary: color-mix(in oklch, var(--text-primary) 60%, var(--bg-page));
  --text-tertiary:  color-mix(in oklch, var(--text-primary) 42%, var(--bg-page));
  --text-muted:     color-mix(in oklch, var(--text-primary) 28%, var(--bg-page));

  /* DESIGN.md ink aliases */
  --ink: var(--text-primary);
  --ink-muted: var(--text-secondary);
  --ink-subtle: var(--text-tertiary);
  --ink-tertiary: var(--text-muted);

  /* Borders — derived */
  --border-subtle: color-mix(in oklch, var(--text-primary) 13%, var(--bg-page));
  --border-strong: color-mix(in oklch, var(--text-primary) 20%, var(--bg-page));
  --hairline: var(--border-subtle);
  --hairline-strong: var(--border-strong);

  /* ── Brand & semantic accents (OKLCH, aligned to craft-agents palette) ──
   * Brand is purple (was indigo #6366F1). The `indigo` name is kept as a
   * back-compat alias — see COLOR_TOKENS.md migration roadmap.
   */
  --accent-indigo: oklch(0.65 0.20 293);   /* brand purple — dark */
  --accent-green: oklch(0.60 0.17 145);    /* success — dark */
  --accent-amber: oklch(0.70 0.16 70);     /* warning — dark */
  --accent-coral: oklch(0.70 0.19 22);     /* danger  — dark */

  /* DESIGN.md primary tokens — hover/subtle now derive from --primary */
  --primary: var(--accent-indigo);
  --primary-hover: oklch(0.70 0.19 293);
  --primary-active: oklch(0.58 0.22 293);
  --primary-subtle: color-mix(in oklch, var(--primary) 12%, transparent);
  --primary-ring: color-mix(in oklch, var(--primary) 35%, transparent);
  --on-primary: #FFFFFF;

  /* ── Derived neutral ramp (color-mix, auto-adapts to theme) ──
   * Mix foreground toward page background. Prefer bg-fg-5 (divider),
   * bg-fg-10 (elevated), text-fg-50 (muted text) in new code. Defined once
   * in :root; light theme overrides --foreground/--bg-page so these resolve
   * correctly without re-declaration.
   */
  --foreground: var(--text-primary);
  --fg-2:  color-mix(in oklch, var(--foreground) 2%,  var(--bg-page));
  --fg-3:  color-mix(in oklch, var(--foreground) 3%,  var(--bg-page));
  --fg-5:  color-mix(in oklch, var(--foreground) 5%,  var(--bg-page));
  --fg-10: color-mix(in oklch, var(--foreground) 10%, var(--bg-page));
  --fg-20: color-mix(in oklch, var(--foreground) 20%, var(--bg-page));
  --fg-30: color-mix(in oklch, var(--foreground) 30%, var(--bg-page));
  --fg-40: color-mix(in oklch, var(--foreground) 40%, var(--bg-page));
  --fg-50: color-mix(in oklch, var(--foreground) 50%, var(--bg-page));
  --fg-60: color-mix(in oklch, var(--foreground) 60%, var(--bg-page));
  --fg-70: color-mix(in oklch, var(--foreground) 70%, var(--bg-page));
  --fg-80: color-mix(in oklch, var(--foreground) 80%, var(--bg-page));
  --fg-90: color-mix(in oklch, var(--foreground) 90%, var(--bg-page));
  --fg-95: color-mix(in oklch, var(--foreground) 95%, var(--bg-page));

  /* RGB + opacity for multi-layer shadow border rings (craft-agents style) */
  --foreground-rgb: 250, 250, 249;         /* = --text-primary #FAFAF9 */
  --shadow-border-opacity: 0.15;           /* stronger ring in dark mode */
  --shadow-blur-opacity: 0.12;

  /* Elevation / focus — tinted shadows blend with dark canvas */
  --shadow-sm: 0 1px 2px rgba(10, 12, 30, 0.30);
  --shadow-md: 0 4px 12px -2px rgba(10, 12, 30, 0.40);
  --shadow-lg: 0 8px 32px -8px rgba(10, 12, 30, 0.50);
  --shadow-xl: 0 16px 48px -16px rgba(10, 12, 30, 0.60);
  --focus-ring: 0 0 0 2px var(--primary-ring);

  /* Hover elevation — used for cards/inputs on hover */
  --shadow-hover: 0 2px 8px -2px rgba(10, 12, 30, 0.35);

  /* Multi-layer shadows (craft-agents style): 1px foreground ring + soft blur.
   * Ring/blur opacities scale with theme via --shadow-*-opacity above. */
  --shadow-minimal:
    rgba(var(--foreground-rgb), 0.06) 0 0 0 1px,
    rgba(0, 0, 0, var(--shadow-blur-opacity)) 0 1px 1px -0.5px,
    rgba(0, 0, 0, var(--shadow-blur-opacity)) 0 3px 3px -1.5px;
  --shadow-modal:
    rgba(var(--foreground-rgb), 0.06) 0 0 0 1px,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.67)) 0 1px 1px -0.5px,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.67)) 0 3px 3px 0,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.33)) 0 6px 6px 0,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.33)) 0 12px 12px 0,
    rgba(0, 0, 0, calc(var(--shadow-blur-opacity) * 0.33)) 0 24px 24px 0;

  /* ── Semantic accent aliases (use in new code) ── */
  --accent-brand: var(--accent-indigo);
  --accent-success: var(--accent-green);
  --accent-warning: var(--accent-amber);
  --accent-danger: var(--accent-coral);
}

[data-theme="light"] {
  --bg-page: #FFFFFF;
  --text-primary: #1A1A1E;

  /* Surface ladder — derived (light) */
  --bg-surface:  color-mix(in oklch, var(--text-primary) 4%,  var(--bg-page));
  --bg-elevated: color-mix(in oklch, var(--text-primary) 2%,  var(--bg-page));
  --bg-hover:    color-mix(in oklch, var(--text-primary) 7%,  var(--bg-page));
  --bg-active:   color-mix(in oklch, var(--text-primary) 10%, var(--bg-page));

  /* Ink ladder — derived (light) */
  --text-secondary: color-mix(in oklch, var(--text-primary) 65%, var(--bg-page));
  --text-tertiary:  color-mix(in oklch, var(--text-primary) 48%, var(--bg-page));
  --text-muted:     color-mix(in oklch, var(--text-primary) 35%, var(--bg-page));

  /* Borders — derived (light) */
  --border-subtle: color-mix(in oklch, var(--text-primary) 10%, var(--bg-page));
  --border-strong: color-mix(in oklch, var(--text-primary) 20%, var(--bg-page));

  --accent-indigo: oklch(0.58 0.22 293);   /* brand purple — light */
  --accent-green: oklch(0.55 0.17 145);    /* success — light */
  --accent-amber: oklch(0.75 0.16 70);     /* warning — light */
  --accent-coral: oklch(0.58 0.24 28);     /* danger  — light */

  /* Light theme primary states — darker hover/active for contrast on white.
   * subtle/ring inherit the color-mix formula from :root (auto-adapts). */
  --primary-hover: oklch(0.52 0.22 293);
  --primary-active: oklch(0.48 0.22 293);

  /* Lighter shadows on white canvas — warm tinted */
  --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.07);
  --shadow-md: 0 4px 12px -2px rgba(15, 17, 21, 0.11);
  --shadow-lg: 0 8px 32px -8px rgba(15, 17, 21, 0.15);
  --shadow-xl: 0 16px 48px -16px rgba(15, 17, 21, 0.19);
  --shadow-hover: 0 2px 8px -2px rgba(15, 17, 21, 0.09);

  /* Lighter shadow border rings (derived fg-* ramps auto-adapt via --foreground) */
  --foreground-rgb: 26, 26, 30;            /* = --text-primary #1A1A1E */
  --shadow-border-opacity: 0.08;           /* subtler ring in light mode */
  --shadow-blur-opacity: 0.06;

  /* ── Semantic accent aliases (use in new code) ── */
  --accent-brand: var(--accent-indigo);
  --accent-success: var(--accent-green);
  --accent-warning: var(--accent-amber);
  --accent-danger: var(--accent-coral);
}

/* ── Forge type scale (DESIGN.md §3) ───────────────────────────────────────
 * Canonical 8-tier scale. New code SHOULD prefer these classes over
 * `text-[XXpx]`. Existing `text-[XXpx]` usages remain valid via Tailwind's
 * arbitrary value syntax — these are additive, not replacements.
 *
 * Tier         Font / size / weight / line-height                    Use
 * display-xl   serif 56  / 400 / 1.06  / -2.0px                       hero
 * display-lg   serif 40  / 400 / 1.10  / -1.2px                       hero
 * display-md   serif 28  / 400 / 1.15  / -0.6px                       hero / empty
 * heading-lg   sans  18  / 600 / 1.30  / -0.2px                       panel title
 * heading-md   sans  15  / 600 / 1.35  / 0                            card title
 * heading-sm   sans  13  / 600 / 1.40  / 0                            inline title
 * body-md      sans  14  / 400 / 1.65                                 default body
 * body-sm      sans  13  / 400 / 1.60                                 dense body
 * body-xs      sans  12  / 400 / 1.50                                 meta / helper
 * caption      sans  11  / 500 / 1.40  / 0.4px / UPPERCASE            section eyebrow
 * meta         sans  11  / 400 / 1.40                                 timestamp
 * mono-md      mono  13  / 400 / 1.55                                 terminal
 * mono-sm      mono  12  / 400 / 1.50                                 inline code
 */
.text-display-xl {
  font-family: var(--font-heading), Georgia, 'Times New Roman', serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -2px;
}
.text-display-lg {
  font-family: var(--font-heading), Georgia, 'Times New Roman', serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.2px;
}
.text-display-md {
  font-family: var(--font-heading), Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.6px;
}
.text-heading-lg {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.text-heading-md {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.text-heading-sm {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.text-body-md {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}
.text-body-sm {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}
.text-body-xs {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.text-caption {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.text-meta {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}
.text-mono-md {
  font-family: var(--font-mono), 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
.text-mono-sm {
  font-family: var(--font-mono), 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

/* Animation utility classes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes expandWidth {
  from { width: 0; opacity: 0; }
}

@keyframes collapseHeight {
  from { max-height: var(--expand-from, 300px); }
  to { max-height: 0; }
}

.animate-fade-in {
  animation: fadeIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-scale-in {
  animation: scaleIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-down {
  animation: slideDown 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-expand-width {
  animation: expandWidth 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Staggered fade-in with translateY for list items */
@keyframes staggerFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-item {
  animation: staggerFadeIn 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 30ms; }
.stagger-item:nth-child(3) { animation-delay: 60ms; }
.stagger-item:nth-child(4) { animation-delay: 90ms; }
.stagger-item:nth-child(5) { animation-delay: 120ms; }
.stagger-item:nth-child(6) { animation-delay: 150ms; }
.stagger-item:nth-child(7) { animation-delay: 180ms; }
.stagger-item:nth-child(8) { animation-delay: 210ms; }
.stagger-item:nth-child(9) { animation-delay: 240ms; }
.stagger-item:nth-child(10) { animation-delay: 270ms; }

/* Message bubble entry — spring-like feel */
@keyframes messageIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-message-in {
  animation: messageIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Panel slide-in from right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-slide-in-right {
  animation: slideInRight 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Tool executing — subtle pulsing border glow */
@keyframes toolPulse {
  0%, 100% { border-color: color-mix(in oklch, var(--accent-indigo) 30%, transparent); }
  50% { border-color: color-mix(in oklch, var(--accent-indigo) 60%, transparent); }
}
.tool-executing {
  animation: toolPulse 2s ease-in-out infinite;
}

/* Sidebar panel width transition — disabled during drag resize for instant feedback */
.sidebar-transition {
  transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.resizing .sidebar-transition,
.sidebar-transition.resizing {
  transition: none !important;
}

/* Chevron rotation transition */
.chevron-transition {
  transition: transform 150ms ease-in-out;
}

/* Collapsible section height transition */
.collapsible-section {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease-in-out;
}

.collapsible-section.open {
  grid-template-rows: 1fr;
}

.collapsible-section > div {
  overflow: hidden;
}

/* File tree drag-and-drop highlight (applied via direct DOM, not React state) */
.drop-target {
  box-shadow: inset 0 0 0 1px var(--accent-indigo);
  background: color-mix(in oklch, var(--accent-indigo) 10%, transparent);
}

/* ── Skip-to-content link (a11y) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--accent-indigo);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ── Noise texture overlay ── */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* ── Typography utilities ── */
.max-ch {
  max-width: 65ch;
}

/* ── Reduced motion support ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Ambient glow background for centered layouts ── */
.ambient-glow {
  background-image: radial-gradient(
    ellipse 60% 50% at 50% 30%,
    color-mix(in oklch, var(--accent-indigo) 4%, transparent) 0%,
    transparent 70%
  );
}

/* ── Unified popover/dropdown surface (craft-agents style) ──
 * Borderless; the 1px ring inside --shadow-modal defines the edge.
 * Use on floating panels: dropdowns, menus, popovers. */
.popover-styled {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-radius: 8px;
  border: none;
  box-shadow: var(--shadow-modal);
}

@layer base {
  body {
    @apply bg-page text-primary font-body;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Keyboard-only focus ring for all interactive elements */
  button:focus-visible,
  a:focus-visible,
  [role='button']:focus-visible,
  [tabindex]:not([tabindex='-1']):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: inherit;
  }

  /* Electron title bar drag region */
  .titlebar-drag {
    -webkit-app-region: drag;
  }

  .titlebar-no-drag {
    -webkit-app-region: no-drag;
  }

  /* Scrollbar styling for dark theme */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }

  /* Press feedback for all buttons and interactive elements */
  button:not(:disabled),
  [role='button']:not(:disabled) {
    transition: transform 100ms ease, background-color 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
  }
  button:not(:disabled):active:not(:focus-visible),
  [role='button']:not(:disabled):active:not(:focus-visible) {
    transform: scale(0.97);
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Input focus transition */
  input, textarea, select {
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  /* Skeleton loading pulse */
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--bg-elevated) 25%,
      var(--bg-hover) 50%,
      var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 4px;
  }

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

  /* ── CodeMirror 6 (scoped to .cm-editor-forge) ───────────────────────── */
  .cm-editor-forge .cm-editor {
    height: 100%;
    font-family: var(--font-mono), 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.55;
  }

  .cm-editor-forge .cm-editor.cm-focused {
    outline: none;
  }

  .cm-editor-forge .cm-scroller {
    font-family: inherit;
    line-height: inherit;
  }

  /* Gutter */
  .cm-editor-forge .cm-gutters {
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    font-size: 12px;
  }

  .cm-editor-forge .cm-lineNumbers .cm-gutterElement {
    padding: 0 8px 0 12px;
    min-width: 32px;
    color: var(--text-muted);
  }

  .cm-editor-forge .cm-activeLineGutter {
    background: color-mix(in oklch, var(--accent-indigo) 6%, transparent);
    color: var(--text-secondary);
  }

  .cm-editor-forge .cm-activeLine {
    background: color-mix(in oklch, var(--accent-indigo) 4%, transparent);
  }

  /* Fold gutter */
  .cm-editor-forge .cm-foldGutter .cm-gutterElement {
    padding: 0 4px;
    cursor: pointer;
    color: var(--text-muted);
  }

  .cm-editor-forge .cm-foldGutter .cm-gutterElement:hover {
    color: var(--text-secondary);
  }

  /* Selection (CodeMirror inlines its own style, so !important is required) */
  .cm-editor-forge .cm-selectionBackground {
    background: color-mix(in oklch, var(--accent-indigo) 20%, transparent) !important;
  }

  .cm-editor-forge .cm-focused .cm-selectionBackground {
    background: color-mix(in oklch, var(--accent-indigo) 25%, transparent) !important;
  }

  /* Cursor */
  .cm-editor-forge .cm-cursor {
    border-left: 2px solid var(--accent-indigo);
  }

  /* Matching bracket */
  .cm-editor-forge .cm-matchingBracket {
    background: color-mix(in oklch, var(--accent-indigo) 15%, transparent);
    border-bottom: 1px solid var(--accent-indigo);
  }

  .cm-editor-forge .cm-nonmatchingBracket {
    background: color-mix(in oklch, var(--accent-coral) 15%, transparent);
    border-bottom: 1px solid var(--accent-coral);
  }

  /* Tooltip / autocomplete */
  .cm-editor-forge .cm-tooltip {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    font-size: 12px;
  }

  .cm-editor-forge .cm-tooltip.cm-tooltip-autocomplete > ul {
    font-family: var(--font-mono), 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 12px;
  }

  .cm-editor-forge .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  /* Search panel */
  .cm-editor-forge .cm-panel.cm-search {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 12px;
  }

  .cm-editor-forge .cm-panel.cm-search input {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 2px 6px;
  }

  .cm-editor-forge .cm-panel.cm-search button {
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-primary);
    padding: 2px 8px;
  }

  .cm-editor-forge .cm-panel.cm-search button:hover {
    background: var(--bg-active);
  }

  /* Scrollbar theming within CodeMirror */
  .cm-editor-forge .cm-scroller::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .cm-editor-forge .cm-scroller::-webkit-scrollbar-track {
    background: transparent;
  }

  .cm-editor-forge .cm-scroller::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
  }

  .cm-editor-forge .cm-scroller::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }
}