@import 'tailwindcss';
@import 'diff2html/bundles/css/diff2html.min.css';
@import 'highlight.js/styles/github-dark-dimmed.css';
@import './xterm.css';

@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-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);
  --color-celadon: var(--celadon);
  --color-celadon-foreground: var(--celadon-foreground);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.5rem;
  /* Light theme defaults — Catppuccin Latte */
  --background: hsl(220 23% 95%);
  --foreground: hsl(234 16% 35%);
  --card: hsl(220 22% 92%);
  --card-foreground: hsl(234 16% 35%);
  --popover: hsl(220 22% 92%);
  --popover-foreground: hsl(234 16% 35%);
  --primary: hsl(231 97% 72%);
  --primary-foreground: hsl(220 23% 95%);
  --secondary: hsl(223 16% 83%);
  --secondary-foreground: hsl(233 10% 47%);
  --muted: hsl(223 16% 83%);
  --muted-foreground: hsl(231 10% 59%);
  --accent: hsl(223 16% 83%);
  --accent-foreground: hsl(234 16% 35%);
  --destructive: hsl(347 87% 44%);
  --destructive-foreground: hsl(220 23% 95%);
  --border: hsl(225 14% 77%);
  --input: hsl(225 14% 77%);
  --ring: hsl(231 97% 72%);
  --chart-1: oklch(64.62% 0.171 250.71);
  --chart-2: oklch(60.04% 0.118 184.7);
  --chart-3: oklch(39.87% 0.07 227.39);
  --chart-4: oklch(74.37% 0.144 85.12);
  --chart-5: oklch(64.47% 0.222 41.12);
  --sidebar: hsl(220 21% 89%);
  --sidebar-foreground: hsl(233 10% 47%);
  --sidebar-primary: hsl(231 97% 72%);
  --sidebar-primary-foreground: hsl(220 23% 95%);
  --sidebar-accent: hsl(223 16% 83%);
  --sidebar-accent-foreground: hsl(234 16% 35%);
  --sidebar-border: hsl(225 14% 77%);
  --sidebar-ring: hsl(231 97% 72%);
}

.dark {
  /* Dark theme defaults — Catppuccin Mocha */
  --background: hsl(240 21% 15%);
  --foreground: hsl(226 64% 88%);
  --card: hsl(240 21% 12%);
  --card-foreground: hsl(226 64% 88%);
  --popover: hsl(240 21% 12%);
  --popover-foreground: hsl(226 64% 88%);
  --primary: hsl(232 97% 85%);
  --primary-foreground: hsl(240 23% 9%);
  --secondary: hsl(237 16% 23%);
  --secondary-foreground: hsl(228 24% 72%);
  --muted: hsl(237 16% 23%);
  --muted-foreground: hsl(230 13% 55%);
  --accent: hsl(237 16% 23%);
  --accent-foreground: hsl(226 64% 88%);
  --destructive: hsl(343 81% 75%);
  --destructive-foreground: hsl(240 23% 9%);
  --border: hsl(234 13% 31%);
  --input: hsl(234 13% 31%);
  --ring: hsl(232 97% 85%);
  --chart-1: oklch(70.34% 0.127 227.39);
  --chart-2: oklch(69.26% 0.128 184.7);
  --chart-3: oklch(98.48% 0.001 285.98);
  --chart-4: oklch(74.11% 0.164 68.11);
  --chart-5: oklch(65.91% 0.204 41.12);
  --sidebar: hsl(240 23% 9%);
  --sidebar-foreground: hsl(228 24% 72%);
  --sidebar-primary: hsl(232 97% 85%);
  --sidebar-primary-foreground: hsl(240 23% 9%);
  --sidebar-accent: hsl(237 16% 23%);
  --sidebar-accent-foreground: hsl(226 64% 88%);
  --sidebar-border: hsl(234 13% 31%);
  --sidebar-ring: hsl(232 97% 85%);
}

/* Session-specific semantic tokens */
:root {
  --streaming-cursor: hsl(231 97% 72%);
  --thinking-bg: hsl(223 16% 83%);
  --tool-bg: hsl(223 16% 83%);
  --compaction-bg: hsl(35 77% 95%);
  --compaction-border: hsl(35 77% 75%);
  --provider-claude: #fe640b;
  --provider-opencode: #179299;
  --provider-codex: #209fb5;
  --provider-terminal: #8c8fa1;
  --celadon: hsl(183 74% 35%);
  --celadon-foreground: hsl(220 23% 95%);
}

.dark {
  --streaming-cursor: hsl(232 97% 85%);
  --thinking-bg: hsl(237 16% 23%);
  --tool-bg: hsl(237 16% 23%);
  --compaction-bg: hsl(41 86% 15%);
  --compaction-border: hsl(41 86% 25%);
  --provider-claude: #fab387;
  --provider-opencode: #94e2d5;
  --provider-codex: #74c7ec;
  --provider-terminal: #7f849c;
  --celadon: hsl(170 57% 73%);
  --celadon-foreground: hsl(240 23% 9%);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }

  /* Native-feeling scrollbars — thin, transparent, theme-aware */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
  }

  *:hover {
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
  }

  /* WebKit scrollbar styling (Electron/Chromium) */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.25);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.45);
  }

  ::-webkit-scrollbar-thumb:active {
    background: rgba(128, 128, 128, 0.6);
  }

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

/* Catppuccin icons use Macchiato palette (pastel colors).
   On light backgrounds they wash out — darken and boost saturation. */
:root .catppuccin-icon {
  filter: brightness(0.7) saturate(1.6);
}
.dark .catppuccin-icon {
  filter: none;
}

/* Electron window drag utilities */
.drag-region {
  -webkit-app-region: drag;
}

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

/* Prevent text selection during resize operations */
.resize-active {
  user-select: none;
}

/* diff2html styles */
.diff-viewer {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 12px;
}

.diff-viewer .d2h-empty,
.diff-viewer .d2h-error {
  padding: 2rem;
  text-align: center;
  color: var(--muted-foreground);
}

.diff-viewer .d2h-error {
  color: var(--destructive);
}

/* Scroll containment — prevent diff table from overflowing */
.diff-viewer .d2h-file-diff {
  overflow: hidden;
  position: relative;
}

/* Dark mode overrides for diff2html — uses theme-aware CSS custom properties */
.dark .diff-viewer .d2h-wrapper {
  background-color: transparent;
}

.dark .diff-viewer .d2h-file-header {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--border));
}

.dark .diff-viewer .d2h-file-header,
.dark .diff-viewer .d2h-file-name {
  color: hsl(var(--foreground));
}

.dark .diff-viewer .d2h-code-line,
.dark .diff-viewer .d2h-code-side-line {
  background-color: hsl(var(--background));
}

.dark .diff-viewer .d2h-code-linenumber {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}

/* Dark mode — added lines: green tinted background (text color from syntax highlighting) */
.dark .diff-viewer .d2h-ins {
  background-color: rgba(46, 160, 67, 0.15);
}

.dark .diff-viewer .d2h-ins .d2h-code-line-ctn {
  background-color: rgba(46, 160, 67, 0.15);
}

/* Dark mode — removed lines: red tinted background (text color from syntax highlighting) */
.dark .diff-viewer .d2h-del {
  background-color: rgba(248, 81, 73, 0.15);
}

.dark .diff-viewer .d2h-del .d2h-code-line-ctn {
  background-color: rgba(248, 81, 73, 0.15);
}

/* Dark mode — word-level inline diff highlights (<ins>/<del> within code lines).
   diff2html defaults to bright light-mode colors (#97f295 / #ffb6ba) because
   our .dark class doesn't match its built-in .d2h-dark-color-scheme. Override. */
.dark .diff-viewer .d2h-code-line ins,
.dark .diff-viewer .d2h-code-side-line ins {
  background-color: rgba(46, 160, 67, 0.3);
  border-radius: 0.2em;
}

.dark .diff-viewer .d2h-code-line del,
.dark .diff-viewer .d2h-code-side-line del {
  background-color: rgba(248, 81, 73, 0.3);
  border-radius: 0.2em;
}

.dark .diff-viewer .d2h-info {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}

.dark .diff-viewer .d2h-file-diff {
  border-color: hsl(var(--border));
}

.dark .diff-viewer .d2h-diff-table {
  border-color: hsl(var(--border));
}

.dark .diff-viewer .d2h-diff-tbody tr {
  border-color: hsl(var(--border));
}

/* Ensure line numbers and content align properly */
.diff-viewer .d2h-code-line-ctn {
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Split view specific adjustments */
.diff-viewer .d2h-file-side-diff {
  width: 50%;
}

/* Scope highlight.js styles to only apply inside diff viewer */
.diff-viewer .d2h-code-line-ctn.hljs {
  background: transparent;
  padding: 0;
}

/*
 * Fix syntax highlighting contrast on diff backgrounds.
 * Some hljs token colors clash with the green/red diff tints:
 *   - Red keywords (#f47067) disappear on red deletion backgrounds
 *   - Green entity tags (#8ddb8c) disappear on green addition backgrounds
 *   - Orange built-ins (#f69d50) have low contrast on red backgrounds
 * We override only the clashing tokens on each diff line type, shifting
 * them to a higher-contrast color while keeping full syntax highlighting
 * on context lines.
 */

/* --- Added lines (green background): neutralize green-ish tokens --- */
.dark .diff-viewer .d2h-ins .d2h-code-line-ctn .hljs-name,
.dark .diff-viewer .d2h-ins .d2h-code-line-ctn .hljs-selector-tag,
.dark .diff-viewer .d2h-ins .d2h-code-line-ctn .hljs-selector-pseudo,
.dark .diff-viewer .d2h-ins .d2h-code-line-ctn .hljs-quote {
  /* green #8ddb8c -> light cyan, still visible on green bg */
  color: #6cb6ff;
}

.dark .diff-viewer .d2h-ins .d2h-code-line-ctn .hljs-addition {
  color: #adbac7;
  background-color: transparent;
}

/* --- Deleted lines (red background): neutralize red/orange tokens --- */
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-doctag,
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-keyword,
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-meta .hljs-keyword,
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-template-tag,
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-template-variable,
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-type,
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-variable.language_ {
  /* red #f47067 -> light pink, readable on red bg */
  color: #ffb4a8;
}

.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-built_in,
.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-symbol {
  /* orange #f69d50 -> light peach, readable on red bg */
  color: #f0c999;
}

.dark .diff-viewer .d2h-del .d2h-code-line-ctn .hljs-deletion {
  color: #adbac7;
  background-color: transparent;
}

/* --- Light mode: same clashes apply with lighter backgrounds --- */
.diff-viewer .d2h-ins .d2h-code-line-ctn .hljs-addition {
  background-color: transparent;
}

.diff-viewer .d2h-del .d2h-code-line-ctn .hljs-deletion {
  background-color: transparent;
}

/* Marquee scroll animation for overflow text on hover */
@keyframes marquee-scroll {
  0%,
  20% {
    transform: translateX(0);
  }
  80%,
  100% {
    transform: translateX(var(--scroll-distance));
  }
}

/* Indeterminate progress bar bounce animation for agent working indicator.
   6-phase bouncing worm: grow → slide → shrink → grow → slide back → shrink.
   Uses left/right on position:absolute to animate width + position together. */
@keyframes progress-bounce {
  0% {
    left: 0;
    right: 100%;
  }
  12% {
    left: 0;
    right: 75%;
  }
  38% {
    left: 75%;
    right: 0;
  }
  50% {
    left: 100%;
    right: 0;
  }
  62% {
    left: 75%;
    right: 0;
  }
  88% {
    left: 0;
    right: 75%;
  }
  100% {
    left: 0;
    right: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bounce-bar {
    animation: none !important;
    left: 37.5%;
    right: 37.5%;
    opacity: 0.7;
  }
}

/* PR review comment HTML body styling (GitHub bodyHTML) */
.pr-comment-html p {
  margin: 0.25em 0;
}
.pr-comment-html code {
  font-size: 0.85em;
  padding: 0.15em 0.35em;
  border-radius: 4px;
  background: var(--muted);
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.pr-comment-html pre {
  margin: 0.5em 0;
  padding: 0.5em 0.75em;
  border-radius: 6px;
  background: var(--muted);
  overflow-x: auto;
  font-size: 0.85em;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.pr-comment-html pre code {
  padding: 0;
  background: none;
}
.pr-comment-html a {
  color: var(--primary);
  text-decoration: underline;
}
.pr-comment-html ul,
.pr-comment-html ol {
  padding-left: 1.25em;
  margin: 0.25em 0;
}
.pr-comment-html blockquote {
  border-left: 3px solid var(--border);
  padding-left: 0.75em;
  margin: 0.25em 0;
  color: var(--muted-foreground);
}
.pr-comment-html strong {
  font-weight: 600;
}
.pr-comment-html em {
  font-style: italic;
}
.pr-comment-html img {
  max-width: 100%;
  border-radius: 4px;
}
.pr-comment-html details {
  margin: 0.5em 0;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.pr-comment-html details summary {
  cursor: pointer;
  padding: 0.25em 0.5em;
  font-size: 0.9em;
  color: var(--muted-foreground);
  user-select: none;
}
.pr-comment-html details summary:hover {
  color: var(--foreground);
}
.pr-comment-html details[open] > summary {
  border-bottom: 1px solid var(--border);
}
.pr-comment-html details > *:not(summary) {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
