@import "tailwindcss";

/* ─── OpenYak — Codex-aligned defaults ─── */

:root {
  /* Surface */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F6F6F6;
  --surface-tertiary: #EFEFEF;
  --surface-chat: #FFFFFF;

  /* Text */
  --text-primary: #1A1C1F;
  --text-secondary: #5F6368;
  --text-tertiary: #8A8F98;

  /* Border */
  --border-default: #E3E4E7;
  --border-heavy: #D2D5DA;
  --border-subtle: rgba(26, 28, 31, 0.08);

  /* Code block surfaces (light theme uses dark code blocks like ChatGPT/Claude) */
  --code-block-bg: #2F2F2F;
  --code-block-header: #3B3B3B;
  --code-block-border: #4A4A4A;
  --code-block-text: #D4D4D4;
  --code-block-text-hover: #FFFFFF;
  --code-block-success: #4EC9B0;

  /* Brand */
  --brand-primary: #339CFF;
  --brand-primary-hover: #238EFF;
  --brand-primary-text: #FFFFFF;

  /* Semantic */
  --color-success: #22C55E;
  --color-warning: #EAB308;
  --color-destructive: #EF4444;

  /* Sidebar */
  --sidebar-bg: #F7F7F8;
  /* Translucent bg over macOS vibrancy / unpredictable wallpapers. Light mode
     needs high alpha so dark text stays readable regardless of what's behind. */
  --sidebar-translucent-bg: rgba(247, 247, 248, 0.88);
  --sidebar-hover: #EEEEF0;
  --sidebar-active: #E7E9ED;
  --sidebar-active-shadow: 0 1px 2px rgba(26, 28, 31, 0.05);
  --sidebar-active-border: rgba(26, 28, 31, 0.05);

  /* User message bubble */
  --user-bubble-bg: #F4F5F7;

  /* Ring */
  --ring: #339CFF;

  /* Radius */
  --radius: 0.625rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);

  /* Switch */
  --switch-checked: #171717;

  /* Tool colors */
  --tool-pending: #EAB308;
  --tool-running: #171717;
  --tool-completed: #22C55E;
  --tool-error: #EF4444;

  /* Prose — content styling */
  --prose-body: #212121;
  --prose-link: #2563EB;
  --prose-accent: #3B82F6;
  --prose-blockquote-bg: rgba(59, 130, 246, 0.04);
  --prose-marker: #A3A3A3;

  /* Typography scale */
  --ui-font-size-base: 13px;
  --ui-code-font-size-base: 12px;
  --ui-size-3xs: max(10px, calc(var(--ui-font-size-base) - 3px));
  --ui-size-2xs: max(11px, calc(var(--ui-font-size-base) - 2px));
  --ui-size-xs: max(12px, calc(var(--ui-font-size-base) - 1px));
  --ui-size-sm: var(--ui-font-size-base);
  --ui-size-md: calc(var(--ui-font-size-base) + 1px);
  --ui-size-lg: calc(var(--ui-font-size-base) + 3px);
  --ui-size-xl: calc(var(--ui-font-size-base) + 5px);
  --ui-size-qr: 6px;
  --ui-line-qr: 7px;
  --ui-line-tight: 1.3;
  --ui-line-snug: 1.4;
  --ui-line-normal: 1.55;
  --ui-font-overline: var(--ui-size-xs);
  --ui-font-caption: var(--ui-size-xs);
  --ui-font-body: var(--ui-size-sm);
  --ui-font-title-sm: var(--ui-size-md);
  --ui-font-title: var(--ui-size-lg);
  --ui-font-title-lg: var(--ui-size-xl);
}

.dark {
  /* Surface */
  --surface-primary: #181818;
  --surface-secondary: #202020;
  --surface-tertiary: #292929;
  --surface-chat: #181818;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #C2C2C2;
  --text-tertiary: #95979D;

  /* Border */
  --border-default: #313131;
  --border-heavy: #404040;
  --border-subtle: rgba(255, 255, 255, 0.065);

  /* Code block surfaces */
  --code-block-bg: #1b1b1b;
  --code-block-header: #222222;
  --code-block-border: #323232;
  --code-block-text: #d8d8d8;
  --code-block-text-hover: #f8f9fb;
  --code-block-success: #55d6a6;

  /* Brand */
  --brand-primary: #339CFF;
  --brand-primary-hover: #4AA8FF;
  --brand-primary-text: #FFFFFF;

  /* Semantic */
  --color-success: #3ed08f;
  --color-warning: #d7b565;
  --color-destructive: #e86d73;

  /* Sidebar */
  --sidebar-bg: #252525;
  /* Dark mode keeps the low-alpha vibrancy aesthetic (wallpaper shows through). */
  --sidebar-translucent-bg: rgba(37, 37, 37, 0.20);
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-active: rgba(255, 255, 255, 0.09);
  --sidebar-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  --sidebar-active-border: rgba(255, 255, 255, 0.04);

  /* User message bubble / composer family */
  --user-bubble-bg: #232323;

  /* Ring */
  --ring: #339CFF;

  /* Switch */
  --switch-checked: #339CFF;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 10px 24px -14px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 64px -30px rgba(0, 0, 0, 0.58);

  /* Prose */
  --prose-body: #e8e8e8;
  --prose-link: #8ab4ff;
  --prose-accent: #9fc1ff;
  --prose-blockquote-bg: rgba(138, 180, 255, 0.06);
  --prose-marker: #727272;
}

/* ─── Base Styles ─── */

@layer base {
  * {
    border-color: var(--border-default);
  }

  html {
    height: 100%;
    overflow: hidden;
  }

  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, var(--font-cjk), sans-serif;
    font-size: var(--ui-size-sm);
    line-height: var(--ui-line-normal);
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .dark body {
    background: var(--surface-chat);
  }

  /* macOS vibrancy mode: body/html are transparent so NSVisualEffectView
     (applied natively by window-vibrancy crate) shows through anything with
     partial alpha. The sidebar and settings-sidebar use alpha bg + backdrop
     blur, so they now reveal the desktop wallpaper. The main content area
     still has its own opaque surface via the `.vibrancy-opaque` class below. */
  html.macos-vibrancy,
  html.macos-vibrancy body,
  html.macos-vibrancy.dark body {
    background: transparent;
  }

  .macos-vibrancy .vibrancy-opaque {
    background: var(--surface-chat);
  }

  /* On macOS the sidebar's blur is supplied by NSVisualEffectView underneath
     the transparent window. A CSS `backdrop-filter: blur(...)` layered on top
     of that fights with the native material during window drag — the extra
     Chromium compositor layer can't keep up, producing a visible flicker of
     the sidebar tint. Cancel the CSS blur on macOS; Windows/Linux keep it. */
  .macos-vibrancy .sidebar-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ─── Scrollbar Styling ─── */

  /* Overlay scrollbar (Chromium/Tauri): does not take layout width */
  .scrollbar-auto::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  .scrollbar-auto::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
  }

  /* Light theme: thumb visible when scrolling or when hovering over scrollable element */
  .scrollbar-auto:hover::-webkit-scrollbar-thumb,
  .scrollbar-auto:focus-within::-webkit-scrollbar-thumb,
  .scrollbar-auto.scrolling::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
  }

  .scrollbar-auto:hover::-webkit-scrollbar-thumb:hover,
  .scrollbar-auto:focus-within::-webkit-scrollbar-thumb:hover,
  .scrollbar-auto.scrolling::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
  }

  /* Dark theme: scrollbar colors */
  .dark .scrollbar-auto:hover::-webkit-scrollbar-thumb,
  .dark .scrollbar-auto:focus-within::-webkit-scrollbar-thumb,
  .dark .scrollbar-auto.scrolling::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
  }

  .dark .scrollbar-auto:hover::-webkit-scrollbar-thumb:hover,
  .dark .scrollbar-auto:focus-within::-webkit-scrollbar-thumb:hover,
  .dark .scrollbar-auto.scrolling::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
  }

  /* Firefox: thin semi-transparent scrollbar by default (invisible) */
  .scrollbar-auto {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  /* Firefox: show scrollbar when element has .scrolling class */
  .scrollbar-auto:hover,
  .scrollbar-auto:focus-within,
  .scrollbar-auto.scrolling {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  }

  .dark .scrollbar-auto:hover,
  .dark .scrollbar-auto:focus-within,
  .dark .scrollbar-auto.scrolling {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  /* Mobile: hide scrollbar entirely on touch devices */
  @media (pointer: coarse) {
    .scrollbar-auto::-webkit-scrollbar {
      display: none;
    }

    .scrollbar-auto {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
  }

  /* ─── Focus Ring (Accessibility) ─── */

  button:focus-visible,
  [role="button"]:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
}

@layer utilities {
  .text-ui-overline {
    font-size: var(--ui-font-overline);
    line-height: var(--ui-line-tight);
  }

  .text-ui-caption {
    font-size: var(--ui-font-caption);
    line-height: var(--ui-line-snug);
  }

  .text-ui-body {
    font-size: var(--ui-font-body);
    line-height: var(--ui-line-normal);
  }

  .text-ui-title-sm {
    font-size: var(--ui-font-title-sm);
    line-height: var(--ui-line-snug);
  }

  .text-ui-title {
    font-size: var(--ui-font-title);
    line-height: var(--ui-line-snug);
  }

  .text-ui-title-lg {
    font-size: var(--ui-font-title-lg);
    line-height: var(--ui-line-snug);
  }

  .text-ui-3xs {
    font-size: var(--ui-size-3xs);
    line-height: var(--ui-line-tight);
  }

  .text-ui-2xs {
    font-size: var(--ui-size-2xs);
    line-height: var(--ui-line-snug);
  }

  .text-ui-xs {
    font-size: var(--ui-size-xs);
    line-height: var(--ui-line-snug);
  }

  .text-ui-sm {
    font-size: var(--ui-size-sm);
    line-height: var(--ui-line-normal);
  }

  .text-ui-md {
    font-size: var(--ui-size-md);
    line-height: var(--ui-line-normal);
  }

  .text-ui-lg {
    font-size: var(--ui-size-lg);
    line-height: var(--ui-line-snug);
  }

  .text-ui-xl {
    font-size: var(--ui-size-xl);
    line-height: var(--ui-line-snug);
  }

  .text-ui-code {
    font-size: var(--ui-code-font-size-base);
    line-height: var(--ui-line-snug);
  }

  .text-ui-qr {
    font-size: var(--ui-size-qr);
    line-height: var(--ui-line-qr);
  }

  .text-xs {
    font-size: var(--ui-size-xs);
    line-height: var(--ui-line-snug);
  }

  .text-sm {
    font-size: var(--ui-size-sm);
    line-height: var(--ui-line-normal);
  }

  .text-base {
    font-size: var(--ui-size-md);
    line-height: var(--ui-line-normal);
  }

  .text-lg {
    font-size: var(--ui-size-lg);
    line-height: var(--ui-line-snug);
  }

  .text-xl {
    font-size: var(--ui-size-xl);
    line-height: var(--ui-line-snug);
  }
}

/* ─── Hide Scrollbar Utility ─── */

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* ─── Code Block ─── */

pre code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* ─── Syntax Highlighting (Light Theme) ─── */

:root {
  --code-bg: #1E1E1E;
  --code-text: #D4D4D4;
  --code-comment: #6A9955;
  --code-keyword: #569CD6;
  --code-string: #CE9178;
  --code-function: #DCDCAA;
  --code-variable: #9CDCFE;
  --code-number: #B5CEA8;
  --code-operator: #D4D4D4;
  --code-class: #4EC9B0;
  --code-tag: #569CD6;
  --code-attr-name: #9CDCFE;
  --code-attr-value: #CE9178;
  --code-builtin: #4EC9B0;
  --code-regex: #D16969;
  --code-deleted: #F44747;
  --code-inserted: #89D185;
}

.dark {
  --code-bg: #1E1E1E;
  --code-text: #D4D4D4;
  --code-comment: #6A9955;
  --code-keyword: #569CD6;
  --code-string: #CE9178;
  --code-function: #DCDCAA;
  --code-variable: #9CDCFE;
  --code-number: #B5CEA8;
  --code-operator: #D4D4D4;
  --code-class: #4EC9B0;
  --code-tag: #569CD6;
  --code-attr-name: #9CDCFE;
  --code-attr-value: #CE9178;
  --code-builtin: #4EC9B0;
  --code-regex: #D16969;
  --code-deleted: #F44747;
  --code-inserted: #89D185;
}

/* Highlight.js Theme — VS Code Dark+ inspired */
.hljs {
  color: var(--code-text);
  background: transparent;
}

/* Comments */
.hljs-comment,
.hljs-quote {
  color: var(--code-comment);
  font-style: italic;
}

/* Keywords */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
  color: var(--code-keyword);
}

/* Strings */
.hljs-string {
  color: var(--code-string);
}

/* Functions */
.hljs-function .hljs-title,
.hljs-title.function_ {
  color: var(--code-function);
}

/* Variables */
.hljs-variable,
.hljs-template-variable,
.hljs-params {
  color: var(--code-variable);
}

/* Numbers */
.hljs-number,
.hljs-built_in {
  color: var(--code-number);
}

/* Classes, Types */
.hljs-class .hljs-title,
.hljs-title.class_,
.hljs-type,
.hljs-built_in {
  color: var(--code-class);
}

/* HTML/XML Tags */
.hljs-tag {
  color: var(--code-tag);
}

/* HTML/XML Attribute Names */
.hljs-attr,
.hljs-attribute {
  color: var(--code-attr-name);
}

/* Operators */
.hljs-operator,
.hljs-punctuation {
  color: var(--code-operator);
}

/* Constants, Built-ins */
.hljs-meta,
.hljs-meta .hljs-keyword {
  color: var(--code-builtin);
}

/* RegExp */
.hljs-regexp {
  color: var(--code-regex);
}

/* Diff additions */
.hljs-addition {
  color: var(--code-inserted);
  background-color: rgba(137, 209, 133, 0.1);
}

/* Diff deletions */
.hljs-deletion {
  color: var(--code-deleted);
  background-color: rgba(244, 71, 71, 0.1);
}

/* Emphasis */
.hljs-emphasis {
  font-style: italic;
}

/* Strong */
.hljs-strong {
  font-weight: bold;
}

/* ─── Markdown Prose ─── */

.prose {
  max-width: none;
  font-family: inherit;
  font-size: var(--ui-size-sm);
  line-height: 1.65;
  color: var(--prose-body);
}

/* First/last child margin reset */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* ── Paragraphs & Vertical Rhythm ── */

.prose p {
  margin-top: 0;
  margin-bottom: 0.75em;
}

/* Adjacent-sibling rhythm: tighten related content, loosen between sections */
.prose p + p { margin-top: 0.2em; }
.prose p + ul,
.prose p + ol { margin-top: -0.1em; }
.prose blockquote + p,
.prose pre + p { margin-top: 0.75em; }

/* ── Headings ── */

.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--text-primary);
  line-height: 1.4;
}

.prose h1 {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 2.25em;
  margin-bottom: 0.6em;
}

.prose h2 {
  font-size: 1.25em;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-top: 2em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, var(--border-default), transparent) 1;
}

.prose h3 {
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}

.prose h4 {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 1.4em;
  margin-bottom: 0.35em;
}

/* Headings pull toward their content below */
.prose h1 + p, .prose h1 + ul, .prose h1 + ol { margin-top: 0; }
.prose h2 + p, .prose h2 + ul, .prose h2 + ol { margin-top: 0; }
.prose h3 + p, .prose h3 + ul, .prose h3 + ol { margin-top: 0; }
.prose h4 + p, .prose h4 + ul, .prose h4 + ol { margin-top: 0; }

/* ── Lists ── */

.prose ul {
  list-style-type: disc;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  padding-left: 1.75em;
}

.prose ol {
  list-style-type: decimal;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  padding-left: 1.75em;
}

.prose li {
  margin-bottom: 0.4em;
}

.prose li::marker {
  color: var(--prose-marker);
}

.prose ol li::marker {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

/* Nested lists — additional indent + tighter rhythm + marker variation */
.prose li > ul, .prose li > ol {
  margin-top: 0.3em;
  margin-bottom: 0.2em;
  padding-left: 1.5em;
}

.prose li > ul { list-style-type: circle; }
.prose li > ul ul { list-style-type: square; }

/* Paragraphs inside list items are tighter */
.prose li > p {
  margin-bottom: 0.35em;
}

.prose li:last-child {
  margin-bottom: 0;
}

/* ── Inline styles ── */

.prose strong {
  font-weight: 600;
  color: var(--text-primary);
}

.prose em {
  font-style: italic;
  color: var(--text-secondary);
}

/* ── Inline code ── */

.prose code:not(pre code) {
  background: var(--surface-tertiary);
  padding: 0.2em 0.4em;
  border-radius: 0.3rem;
  font-size: 0.85em;
}

/* ── Code blocks ── */

.prose pre {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .prose pre {
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  .prose pre:hover,
  .prose pre:active {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ── Links ── */

.prose a {
  color: var(--prose-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--prose-link) 40%, transparent);
  transition: text-decoration-color 0.15s ease;
}

.prose a:hover {
  text-decoration-color: var(--prose-link);
}

/* ── Blockquotes ── */

.prose blockquote {
  border-left: 3px solid var(--prose-accent);
  padding: 0.75em 1em;
  margin: 1.25em 0;
  background: var(--prose-blockquote-bg);
  border-radius: 0 0.5rem 0.5rem 0;
  color: var(--text-secondary);
}

.prose blockquote p {
  margin-bottom: 0.4em;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Horizontal Rule ── */

.prose hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-default) 20%, var(--border-default) 80%, transparent);
  margin: 2em 0;
}

/* ── Weak-structure text (compact paragraphs) ── */

.prose p.prose-compact + p.prose-compact {
  margin-top: -0.15em;
}

.prose p.prose-kv {
  margin-bottom: 0.5em;
}

.prose p.prose-kv + p.prose-kv {
  margin-top: -0.2em;
}

/* ── Tables (fallback for non-wrapped) ── */

.prose table {
  border-collapse: collapse;
  width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 1em;
}

.prose th,
.prose td {
  border: 1px solid var(--border-default);
  padding: 0.5rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}

.prose th {
  background: var(--surface-tertiary);
  font-weight: 600;
  border-bottom-width: 2px;
  border-bottom-color: var(--border-heavy);
}

.prose tbody tr:nth-child(even) {
  background: var(--surface-secondary);
}

/* ── Table wrapper (component-provided rounded container) ── */

.prose-table-wrapper {
  font-size: 1em;
}

.prose-table-wrapper table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.prose-table-wrapper th,
.prose-table-wrapper td {
  border: none;
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  padding: 0.5rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}

.prose-table-wrapper th:last-child,
.prose-table-wrapper td:last-child {
  border-right: none;
}

.prose-table-wrapper tr:last-child td {
  border-bottom: none;
}

.prose-table-wrapper th {
  background: var(--surface-tertiary);
  font-weight: 600;
  border-bottom: 2px solid var(--border-heavy);
}

.prose-table-wrapper tbody tr:nth-child(even) {
  background: var(--surface-secondary);
}

@media (min-width: 640px) {
  .prose th,
  .prose td,
  .prose-table-wrapper th,
  .prose-table-wrapper td {
    white-space: normal;
  }
}

/* ─── Animations ─── */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Streaming cursor — blinks at end of last paragraph */
.streaming-cursor > *:last-child {
  display: inline !important;
}
.streaming-cursor::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--text-primary);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 1s step-end infinite;
}

@keyframes progress-slide {
  0% { width: 0%; margin-left: 0%; }
  50% { width: 40%; margin-left: 30%; }
  100% { width: 0%; margin-left: 100%; }
}

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

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--text-tertiary) 0%,
    var(--text-secondary) 40%,
    var(--text-tertiary) 60%,
    var(--text-tertiary) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.5s ease-in-out infinite;
}

.shimmer-icon {
  animation: shimmer-opacity 2s ease-in-out infinite;
}

@keyframes shimmer-opacity {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Mermaid Diagrams ─── */

.mermaid-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.mermaid-container svg {
  max-width: 100%;
  height: auto;
}

/* Override mermaid default styles to match theme */
.mermaid-container .node rect,
.mermaid-container .node circle,
.mermaid-container .node polygon {
  stroke: var(--border-heavy) !important;
}

.mermaid-container text {
  fill: var(--text-primary) !important;
}

.mermaid-container .edgeLabel {
  background-color: var(--surface-primary) !important;
  color: var(--text-secondary) !important;
}

/* Ensure good contrast on hover/focus */
.mermaid-container .node:hover rect,
.mermaid-container .node:hover circle {
  filter: brightness(1.1);
}

/* ─── DOCX Preview ─── */
.docx-preview-container {
  padding: 16px;
  min-height: 100%;
}
.docx-preview-container .docx-wrapper {
  background: white !important;
  padding: 0 !important;
}
.docx-preview-container .docx-wrapper > section.docx {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 16px;
  padding: 40px 50px !important;
}

/* ─── XLSX Preview ─── */
.xlsx-preview-container {
  padding: 0;
  min-height: 100%;
}
.xlsx-preview-container table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--ui-code-font-size-base);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text-primary);
}
.xlsx-preview-container th,
.xlsx-preview-container td {
  border: 1px solid var(--border-default);
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
}
.xlsx-preview-container th {
  background: var(--surface-tertiary);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.xlsx-preview-container tr:nth-child(even) {
  background: var(--surface-secondary);
}
.xlsx-preview-container tr:hover {
  background: var(--surface-tertiary);
}

/* ─── CSV Preview ─── */
.csv-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--ui-code-font-size-base);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text-primary);
}
.csv-table th,
.csv-table td {
  border: 1px solid var(--border-default);
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
}
.csv-table th {
  background: var(--surface-tertiary);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  user-select: none;
}
.csv-table th:hover {
  background: var(--border-default);
}
.csv-table tr:nth-child(even) {
  background: var(--surface-tertiary);
}
.csv-table tbody tr:hover {
  background: var(--border-default);
}

/* ─── Sidebar Title Scroll ─── */

@keyframes scroll-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--scroll-distance)); }
}

@utility animate-scroll-text {
  animation: scroll-text var(--scroll-duration, 2s) linear forwards;
}

/* ─── Reduced Motion (Accessibility) ─── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .streaming-cursor::after {
    animation: none;
  }

  .shimmer-text {
    animation: none;
    -webkit-text-fill-color: var(--text-secondary);
  }
}
