/**
 * VS Code CSS custom properties with fallbacks.
 * Prefixed with --ch- (CodeHydra) to avoid conflicts.
 *
 * Variables use var(--vscode-*, fallback) pattern:
 * - In code-server: VS Code injects --vscode-* variables
 * - In standalone: Fallback values are used
 *
 * Light/dark themes only change fallback values via @media query.
 *
 * VSCODE-ELEMENTS COMPATIBILITY:
 * The @vscode-elements/elements library reads --vscode-* variables directly.
 * In code-server context, VS Code injects these. In standalone mode, we provide
 * fallback values below so vscode-elements render correctly during development.
 */

:root {
  /*
   * VSCode variable fallbacks for @vscode-elements/elements.
   * These are only used when VS Code hasn't injected its own values.
   * In code-server context, these are overridden by VS Code's theme.
   */
  --vscode-foreground: #e4e4e8;
  --vscode-editor-background: #16161a;
  --vscode-panel-border: rgba(255, 255, 255, 0.06);
  --vscode-settings-textInputBackground: #0e0e10;
  --vscode-settings-textInputBorder: rgba(255, 255, 255, 0.06);
  --vscode-settings-textInputForeground: #e4e4e8;
  --vscode-button-background: #6c8cff;
  --vscode-button-foreground: #ffffff;
  --vscode-button-hoverBackground: #8aa4ff;
  --vscode-button-secondaryBackground: #24242c;
  --vscode-button-secondaryForeground: #9898a4;
  --vscode-button-secondaryHoverBackground: #2c2c36;
  --vscode-focusBorder: #6c8cff;
  --vscode-errorForeground: #f87171;
  --vscode-badge-background: #24242c;
  --vscode-badge-foreground: #e4e4e8;
  --vscode-progressBar-background: #6c8cff;
  --vscode-settings-checkboxBackground: #0e0e10;
  --vscode-settings-checkboxBorder: rgba(255, 255, 255, 0.12);
  --vscode-settings-checkboxForeground: #e4e4e8;
  --vscode-icon-foreground: #9898a4;

  /* Core colors */
  --ch-foreground: var(--vscode-foreground, #e4e4e8);
  --ch-background: var(--vscode-editor-background, #16161a);

  /* Surface layering */
  --ch-surface-0: #0e0e10;
  --ch-surface-1: #16161a;
  --ch-surface-2: #1c1c22;
  --ch-surface-3: #24242c;
  --ch-surface-4: #2c2c36;

  /* Border colors */
  --ch-border: var(--vscode-panel-border, rgba(255, 255, 255, 0.06));
  --ch-input-border: var(--vscode-settings-textInputBorder, rgba(255, 255, 255, 0.06));
  --ch-input-hover-border: rgba(255, 255, 255, 0.12);

  /* Button colors */
  --ch-button-bg: var(--vscode-button-background, #6c8cff);
  --ch-button-fg: var(--vscode-button-foreground, #ffffff);
  --ch-button-hover-bg: var(--vscode-button-hoverBackground, #8aa4ff);
  --ch-button-disabled-bg: #24242c;
  --ch-button-disabled-fg: #6c6c78;

  /* Input colors */
  --ch-input-bg: var(--vscode-settings-textInputBackground, #0e0e10);
  --ch-input-disabled-bg: #1c1c22;
  --ch-input-disabled-fg: #6c6c78;

  /* Focus/selection colors */
  --ch-focus-border: var(--vscode-focusBorder, #6c8cff);
  --ch-list-active-bg: var(--vscode-list-activeSelectionBackground, rgba(108, 140, 255, 0.12));
  --ch-list-active-fg: var(--vscode-list-activeSelectionForeground, #e4e4e8);
  --ch-list-hover-bg: var(--vscode-list-hoverBackground, #24242c);

  /* Error colors */
  --ch-error-fg: var(--vscode-errorForeground, #f87171);
  --ch-error-bg: var(--vscode-inputValidation-errorBackground, rgba(248, 113, 113, 0.12));

  /* Semantic colors */
  --ch-success: var(--vscode-terminal-ansiGreen, #4ade80);
  --ch-danger: var(--vscode-errorForeground, #f14c4c);
  --ch-warning: var(--vscode-editorWarning-foreground, #cca700);

  /* Agent status colors (reference semantic colors) */
  --ch-agent-idle: var(--ch-success);
  --ch-agent-busy: var(--ch-danger);

  /* Overlay/shadow colors */
  --ch-overlay-bg: rgba(0, 0, 0, 0.6);
  --ch-shadow-color: rgba(0, 0, 0, 0.3);
  --ch-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --ch-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);
  --ch-overlay-blur: blur(8px);

  /* Accent muted (for active/selected backgrounds) */
  --ch-accent-muted: rgba(108, 140, 255, 0.12);

  /* Status dot glow */
  --ch-status-glow-idle: 0 0 6px rgba(74, 222, 128, 0.4);
  --ch-status-glow-busy: 0 0 6px rgba(248, 113, 113, 0.4);

  /* Border radius */
  --ch-radius-sm: 6px;
  --ch-radius-md: 10px;
  --ch-radius-lg: 14px;

  /* Logo backdrop opacity */
  --ch-logo-backdrop-opacity: 0.15;

  /* Icon sizes */
  --ch-icon-size-small: 12px;
  --ch-icon-size-default: 16px;
  --ch-icon-size-medium: 14px;
  --ch-icon-size-large: 48px;

  /* Layout variables (theme-independent) */
  --ch-sidebar-width: 250px;
  --ch-sidebar-minimized-width: 20px;
  --ch-sidebar-transition: 150ms ease-out;
  --ch-dialog-max-width: 480px;

  /* Z-index layers */
  --ch-z-sidebar-minimized: 1;
  --ch-z-sidebar-expanded: 950;
}

/* ============================================================================
 * Global Dialog Styles
 * Shared styles for dialog components to reduce CSS duplication.
 * ============================================================================ */

/* Dialog title - consistent h2 styling across all dialogs */
.ch-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ch-foreground);
}

/* Alert box - used for errors, warnings in dialogs */
.ch-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--ch-error-bg);
  border-radius: var(--ch-radius-sm);
  font-size: 13px;
  color: var(--ch-error-fg);
}

/* Alert box icon container */
.ch-alert-box-icon {
  --vscode-icon-foreground: var(--ch-error-fg);
  flex-shrink: 0;
}

/* Form field container - consistent spacing */
.ch-form-field {
  margin-bottom: 16px;
}

/* Form label - consistent label styling */
.ch-form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--ch-foreground);
}

/* Status message - informational text with reduced opacity */
.ch-status-message {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--ch-foreground);
  opacity: 0.8;
}

/* Dialog paragraph - standard text in dialogs */
.ch-dialog-text {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--ch-foreground);
}

/* Checkbox row - container for checkbox with spacing */
.ch-checkbox-row {
  margin-bottom: 16px;
}

/**
 * Light theme overrides.
 * Only fallback values change - VS Code variable references stay the same.
 *
 * Selected via [data-theme="light"] on :root, set by the renderer in response
 * to the api:ui:theme event pushed from main (driven by Electron's nativeTheme).
 */
:root[data-theme="light"] {
  /*
     * VSCode variable fallbacks for light theme.
     * Used by @vscode-elements/elements in standalone mode.
     */
  --vscode-foreground: #1a1a24;
  --vscode-editor-background: #ffffff;
  --vscode-panel-border: rgba(0, 0, 0, 0.08);
  --vscode-settings-textInputBackground: #f4f4f8;
  --vscode-settings-textInputBorder: rgba(0, 0, 0, 0.08);
  --vscode-settings-textInputForeground: #1a1a24;
  --vscode-button-background: #4b6de8;
  --vscode-button-foreground: #ffffff;
  --vscode-button-hoverBackground: #3a5cd6;
  --vscode-button-secondaryBackground: #ededf2;
  --vscode-button-secondaryForeground: #5c5c6e;
  --vscode-button-secondaryHoverBackground: #e0e0e8;
  --vscode-focusBorder: #4b6de8;
  --vscode-errorForeground: #dc3545;
  --vscode-badge-background: #ededf2;
  --vscode-badge-foreground: #1a1a24;
  --vscode-progressBar-background: #4b6de8;
  --vscode-settings-checkboxBackground: #f4f4f8;
  --vscode-settings-checkboxBorder: rgba(0, 0, 0, 0.15);
  --vscode-settings-checkboxForeground: #1a1a24;
  --vscode-icon-foreground: #5c5c6e;

  /* Core colors */
  --ch-foreground: var(--vscode-foreground, #1a1a24);
  --ch-background: var(--vscode-editor-background, #ffffff);

  /* Surface layering (light) */
  --ch-surface-0: #f4f4f8;
  --ch-surface-1: #ffffff;
  --ch-surface-2: #ffffff;
  --ch-surface-3: #ededf2;
  --ch-surface-4: #e0e0e8;

  /* Border colors */
  --ch-border: var(--vscode-panel-border, rgba(0, 0, 0, 0.08));
  --ch-input-border: var(--vscode-settings-textInputBorder, rgba(0, 0, 0, 0.08));
  --ch-input-hover-border: rgba(0, 0, 0, 0.15);

  /* Button colors */
  --ch-button-disabled-bg: #ededf2;
  --ch-button-disabled-fg: #9494a4;

  /* Input colors */
  --ch-input-bg: var(--vscode-settings-textInputBackground, #f4f4f8);
  --ch-input-disabled-bg: #f4f4f8;
  --ch-input-disabled-fg: #9494a4;

  /* Focus/selection colors */
  --ch-focus-border: var(--vscode-focusBorder, #4b6de8);
  --ch-list-active-bg: var(--vscode-list-activeSelectionBackground, rgba(75, 109, 232, 0.1));
  --ch-list-active-fg: var(--vscode-list-activeSelectionForeground, #1a1a24);
  --ch-list-hover-bg: var(--vscode-list-hoverBackground, #ededf2);

  /* Error colors */
  --ch-error-fg: var(--vscode-errorForeground, #dc3545);
  --ch-error-bg: var(--vscode-inputValidation-errorBackground, rgba(220, 53, 69, 0.08));

  /* Semantic colors */
  --ch-success: var(--vscode-terminal-ansiGreen, #1a9a4e);
  --ch-danger: var(--vscode-errorForeground, #dc3545);
  --ch-warning: var(--vscode-editorWarning-foreground, #b07d00);

  /* Overlay/shadow colors */
  --ch-overlay-bg: rgba(0, 0, 0, 0.2);
  --ch-shadow-color: rgba(0, 0, 0, 0.1);
  --ch-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ch-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.15);

  /* Accent muted (light) */
  --ch-accent-muted: rgba(75, 109, 232, 0.1);

  /* Status dot glow (light) */
  --ch-status-glow-idle: 0 0 6px rgba(26, 154, 78, 0.3);
  --ch-status-glow-busy: 0 0 6px rgba(220, 53, 69, 0.3);
}
