@import 'tailwindcss';
@import 'tw-animate-css';
@import '@xterm/xterm/css/xterm.css';
@import './rich-markdown-editor.css';
@import './markdown-preview.css';
@import './terminal.css';

@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

/* ── Light Mode ──────────────────────────────────────── */

:root {
  --font-mono:
    'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', Menlo, Consolas, 'Liberation Mono',
    monospace;
  --radius: 0.625rem;
  --background: #fff;
  --editor-surface: #ffffff;
  --foreground: #0a0a0a;
  --card: #fff;
  --card-foreground: #0a0a0a;
  --popover: #fff;
  --popover-foreground: #0a0a0a;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e40014;
  --destructive-foreground: #fcf3f3;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --chart-1: var(--color-blue-300);
  --chart-2: var(--color-blue-500);
  --chart-3: var(--color-blue-600);
  --chart-4: var(--color-blue-700);
  --chart-5: var(--color-blue-800);
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;
  --git-decoration-added: #587c0c;
  --git-decoration-modified: #895503;
  --git-decoration-deleted: #ad0707;
  --git-decoration-renamed: #007acc;
  --git-decoration-untracked: #007100;
  --git-decoration-copied: #007acc;
}

/* ── Dark Mode ───────────────────────────────────────── */

.dark {
  --background: #0a0a0a;
  --editor-surface: #1e1e1e;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #e5e5e5;
  --primary-foreground: #171717;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --accent: #404040;
  --accent-foreground: #fafafa;
  --destructive: #ff6568;
  --destructive-foreground: #df2225;
  --border: rgb(255 255 255 / 0.07);
  --input: rgb(255 255 255 / 0.15);
  --ring: #737373;
  --chart-1: var(--color-blue-300);
  --chart-2: var(--color-blue-500);
  --chart-3: var(--color-blue-600);
  --chart-4: var(--color-blue-700);
  --chart-5: var(--color-blue-800);
  --sidebar: #171717;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #1447e6;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: rgb(255 255 255 / 0.07);
  --sidebar-ring: #525252;
  --git-decoration-added: #81b88b;
  --git-decoration-modified: #e2c08d;
  --git-decoration-deleted: #c74e39;
  --git-decoration-renamed: #73c991;
  --git-decoration-untracked: #73c991;
  --git-decoration-copied: #73c991;
}

/* ── Base Layer ──────────────────────────────────────── */

@layer base {
  *,
  *::before,
  *::after {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    font-family:
      'Geist',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      sans-serif;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ul {
    list-style: none;
  }

  button:not(:disabled) {
    cursor: pointer;
  }

  button:disabled {
    cursor: default;
  }
}

/* ── Sleek scrollbar (VS Code-like) ─────────────────── */

.scrollbar-sleek {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted-foreground, #737373) 34%, transparent) transparent;
}

.scrollbar-sleek::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

.scrollbar-sleek::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-foreground, #737373) 28%, transparent);
  border: 3px solid transparent;
  border-radius: 0;
  background-clip: padding-box;
  min-height: 28px;
}

.scrollbar-sleek::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--muted-foreground, #737373) 48%, transparent);
}

.scrollbar-sleek::-webkit-scrollbar-thumb:active {
  background-color: color-mix(in srgb, var(--foreground, #171717) 36%, transparent);
}

.scrollbar-sleek-parent:hover .scrollbar-sleek,
.scrollbar-sleek:hover {
  scrollbar-color: color-mix(in srgb, var(--muted-foreground, #737373) 48%, transparent) transparent;
}

/* ── Editor-style scrollbar (matches Monaco) ────────── */

.scrollbar-editor {
  scrollbar-width: thin;
  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
}

.scrollbar-editor::-webkit-scrollbar {
  width: 14px;
}

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

.scrollbar-editor::-webkit-scrollbar-thumb {
  background: rgba(121, 121, 121, 0.4);
  border: 3px solid transparent;
  border-radius: 7px;
  background-clip: padding-box;
}

.scrollbar-editor::-webkit-scrollbar-thumb:hover {
  background: rgba(121, 121, 121, 0.7);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Hide tab-strip scrollbars to prevent drag-time scrollbar flashes */
.terminal-tab-strip {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.terminal-tab-strip::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ── Layout ──────────────────────────────────────────── */

#root {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ── Titlebar ────────────────────────────────────────── */

.titlebar {
  height: 42px;
  min-height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--bg-titlebar, var(--card));
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
  user-select: none;
}

/* Why: workspace view still needs a full titlebar-height strip above the
   sidebar so the native macOS traffic lights and sidebar chrome sit in the
   same vertical band they use in settings/landing. The center and right
   workspace columns are offset separately to align with this 42px baseline. */
.titlebar-left {
  height: 42px;
  min-height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-titlebar, var(--card));
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
  user-select: none;
}

.titlebar-traffic-light-pad {
  width: calc(80px / var(--ui-zoom-factor, 1));
  flex-shrink: 0;
}

.sidebar-toggle {
  -webkit-app-region: no-drag;
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 150ms;
}

.sidebar-toggle:hover {
  background: var(--accent);
  color: var(--foreground);
}

.sidebar-toggle:disabled {
  cursor: default;
  opacity: 0.45;
}

.sidebar-toggle:disabled:hover {
  background: none;
  color: var(--muted-foreground);
}

.titlebar-agent-badge {
  -webkit-app-region: no-drag;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  margin-right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  color: var(--foreground);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.titlebar-agent-badge:hover {
  background: var(--accent);
  border-color: var(--border);
}

.titlebar-agent-badge-idle {
  opacity: 0.55;
}

.titlebar-agent-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #16a34a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 18%, transparent);
}

.titlebar-agent-badge-dot-idle {
  background: var(--muted-foreground);
  box-shadow: none;
}

.titlebar-agent-badge-count {
  min-width: 1ch;
}

.titlebar-agent-badge-label {
  color: var(--muted-foreground);
  font-weight: 500;
}

/* ─── Agent hover card (titlebar badge popover) ───────────────────── */

.titlebar-agent-hovercard {
  width: auto;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 0 0;
}

.titlebar-agent-hovercard-header {
  padding: 0 12px 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.titlebar-agent-hovercard-header-with-list {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.titlebar-agent-hovercard-hide {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 12px 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  color: var(--muted-foreground);
  font-size: 11px;
  cursor: pointer;
  border-radius: 0;
}

.titlebar-agent-hovercard-hide:hover {
  color: var(--foreground);
  background: var(--accent);
}

.titlebar-agent-hovercard-list {
  display: flex;
  flex-direction: column;
}

.titlebar-agent-hovercard-worktree {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: none;
  border: none;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  width: 100%;
}

.titlebar-agent-hovercard-worktree:hover {
  background: var(--accent);
}

.titlebar-agent-hovercard-agent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 12px 3px 24px;
  font-size: 12px;
  color: var(--muted-foreground);
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.titlebar-agent-hovercard-agent:hover {
  background: var(--accent);
  color: var(--foreground);
}

.titlebar-agent-hovercard-agent-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titlebar-agent-hovercard-agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #16a34a;
}

.titlebar-agent-hovercard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.titlebar-agent-hovercard-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.titlebar-agent-hovercard-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16a34a;
}

.titlebar-icon-button {
  -webkit-app-region: no-drag;
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 4px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 150ms;
}

.titlebar-icon-button:hover {
  background: var(--accent);
  color: var(--foreground);
}

.titlebar-icon-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.titlebar-icon-button:disabled:hover {
  background: none;
  color: var(--muted-foreground);
}

.editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 6px 14px;
  background: var(--editor-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  flex-shrink: 0;
}

.editor-header-text {
  min-width: 0;
  flex: 1;
}

.editor-header-path {
  display: block;
  padding: 0;
  max-width: 100%;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  font-family:
    ui-monospace,
    SFMono-Regular,
    SF Mono,
    Menlo,
    Consolas,
    monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.editor-header-path:hover,
.editor-header-path:focus-visible {
  color: var(--foreground);
}

.editor-header-path-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.editor-header-copy-toast {
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  pointer-events: none;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  color: var(--foreground);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.editor-header-copy-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Content ─────────────────────────────────────────── */

.content-area {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────── */

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border, var(--border));
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 200ms ease;
}

@keyframes settings-shell-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.settings-view-shell {
  animation: settings-shell-enter 180ms ease-out;
}

.sidebar.collapsed {
  width: 0;
  border-right: none;
  overflow: hidden;
}

.sidebar-header {
  padding: 12px 16px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.worktree-list {
  padding: 0 4px;
}

.worktree-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms;
}

.worktree-item:hover {
  background: var(--accent);
}

.worktree-item.active {
  background: var(--accent);
}

.worktree-branch {
  font-size: 13px;
  font-family: inherit;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.worktree-path {
  font-size: 11px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Misc ────────────────────────────────────────────── */

.number-input-clean {
  appearance: textfield;
}

.number-input-clean::-webkit-outer-spin-button,
.number-input-clean::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Landing ─────────────────────────────────────────── */

.landing {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.landing-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--muted-foreground);
  letter-spacing: -0.02em;
}

.landing-action {
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms;
}

.landing-action:hover {
  background: var(--accent);
}

.landing-hint {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* ── fix: ensure Monaco find widget layout is not reversed ── */
.monaco-editor .find-widget,
.monaco-editor .find-widget .monaco-inputbox,
.monaco-editor .find-widget .matchesCount {
  direction: ltr !important;
  flex-direction: row !important;
}

.monaco-editor .find-widget .button,
.monaco-editor .find-widget .monaco-button,
.monaco-editor .find-widget .monaco-find-input .controls .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Specifically for the expand/collapse button icon which is often a nested 'i' or '::before' */
.monaco-editor .find-widget .button.expand {
  width: 16px !important;
  height: 16px !important;
}

.monaco-editor .find-widget .button > .codicon,
.monaco-editor .find-widget .button > i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.monaco-editor .monaco-search-result-highlight {
  background: color-mix(in srgb, var(--warning, #f59e0b) 34%, transparent);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning, #f59e0b) 52%, transparent);
}

/* ── Update card animations ───────────────────────────────────────── */

@keyframes update-card-enter {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes update-card-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate-update-card-enter {
  animation: update-card-enter 200ms ease-out both;
}

.animate-update-card-exit {
  animation: update-card-exit 150ms ease-in both;
}
