@import "tailwindcss";
@import "tw-animate-css";
@source "./**/*.{ts,tsx,css}";

:root {
  --oc-safe-area-top: 0px;
  --oc-safe-area-right: 0px;
  --oc-safe-area-bottom: 0px;
  --oc-safe-area-bottom-visual: 0px;
  --oc-safe-area-left: 0px;
  --ui-regular-font-weight: 400;
  --oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
  --oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
}

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

/* Suppress WebKit-specific hover/focus adornments on the chat textarea */
textarea[data-chat-input="true"] {
  -webkit-appearance: none;
  background: transparent !important;
  border: none;
  box-shadow: none;
}

textarea[data-chat-input="true"]:focus,
textarea[data-chat-input="true"]:focus-visible,
textarea[data-chat-input="true"]:hover {
  outline: none;
  border: none;
  box-shadow: none;
}

/* Match chat footer background to input in WebKit to avoid dual-tone hover/focus */
[data-chat-input="true"] + div[data-chat-input-footer="true"] {
  background: transparent !important;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;
}

/* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */
[data-scroll-shadow="true"] {
  --scroll-shadow-size: var(--scroll-shadow-size, 48px);
}

[data-scroll-shadow="true"][data-orientation="vertical"] {
  mask-mode: alpha;
}

[data-scroll-shadow="true"][data-orientation="vertical"][data-top-bottom-scroll="true"] {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--scroll-shadow-size),
    #000 calc(100% - var(--scroll-shadow-size)),
    transparent 100%
  );
}

[data-scroll-shadow="true"][data-orientation="vertical"][data-top-scroll="true"] {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--scroll-shadow-size),
    #000 100%
  );
}

[data-scroll-shadow="true"][data-orientation="vertical"][data-bottom-scroll="true"] {
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--scroll-shadow-size)),
    transparent 100%
  );
}


@keyframes spin-once {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes oc-migrate-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes gradient-shimmer {
  0% {
    stop-color: currentColor;
  }
  50% {
    stop-color: color-mix(in srgb, currentColor 60%, white 40%);
  }
  100% {
    stop-color: currentColor;
  }
}

@keyframes shimmer-position {
  0% {
    x: -100%;
  }
  100% {
    x: 100%;
  }
}

/* Safari/WebKit fixes for buttons and SVG icons */
/* Remixicon puts fill="currentColor" on root SVG which WebKit renders as background */
button svg.remixicon,
[role="button"] svg.remixicon,
button svg,
[role="button"] svg {
  background: none !important;
  background-color: transparent !important;
  /* Override inline fill attribute on SVG root */
  fill: none !important;
  /* Ensure SVG uses CSS rendering, not native */
  shape-rendering: geometricPrecision;
}

/* GPU acceleration for non-spinning SVGs */
button svg:not(.animate-spin),
[role="button"] svg:not(.animate-spin) {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Fix SVG elements inside buttons - remove any rect/circle backgrounds */
button svg rect,
button svg circle,
[role="button"] svg rect,
[role="button"] svg circle {
  fill: none !important;
}

/* Ensure SVG paths/shapes inherit color properly */
button svg.remixicon path,
button svg.remixicon circle[fill],
[role="button"] svg.remixicon path,
[role="button"] svg.remixicon circle[fill],
button svg path,
[role="button"] svg path {
  fill: currentColor !important;
}

/* Safari/WebKit animation fixes - outside @layer for higher specificity */
.animate-spin {
  animation: webkit-spin 1s linear infinite !important;
  will-change: transform !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Specific SVG spinner fixes for WebKit */
svg.animate-spin {
  /* Use CSS box as transform reference for proper centering with scaled SVGs */
  transform-box: fill-box !important;
  transform-origin: 50% 50% !important;
  background: none !important;
  background-color: transparent !important;
  overflow: visible !important;
  /* Ensure SVG content is centered */
  display: block !important;
}

@keyframes webkit-spin {
  0% {
    transform: translateZ(0) rotate(0deg);
  }
  100% {
    transform: translateZ(0) rotate(360deg);
  }
}

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

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

/* Semantic Typography System Classes */
@layer components {
  /* Semantic typography classes - font-size only */
  .typography-markdown {
    font-size: var(--text-markdown);
  }

  .typography-code {
    font-size: var(--text-code);
  }

  .typography-ui-header {
    font-size: var(--text-ui-header);
  }

  .typography-ui-label {
    font-size: var(--text-ui-label);
  }

  .typography-meta {
    font-size: var(--text-meta);
  }

  .typography-micro {
    font-size: var(--text-micro);
  }

  .chat-column {
    width: min(100%, 56rem);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
  }

  @media (min-width: 1024px) {
    .chat-column {
      padding-inline: clamp(1.25rem, 2.5vw, 2rem);
    }
  }

  /* FadeInOnReveal handles all animations - no custom CSS needed */

   /* Heading typography - all use markdown size, differentiated by weight/color */

  .typography-h1 {
    font-size: var(--text-markdown);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    font-weight: var(--h1-font-weight);
  }

  .typography-h2 {
    font-size: var(--text-markdown);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    font-weight: var(--h2-font-weight);
  }

  .typography-h3 {
    font-size: var(--text-markdown);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    font-weight: var(--h3-font-weight);
  }

  /* UI element typography - mapped to semantic variables */
  .typography-ui-button {
    font-size: var(--text-ui-label);
    line-height: var(--ui-button-line-height);
    letter-spacing: var(--ui-button-letter-spacing);
    font-weight: var(--ui-button-font-weight);
  }

  .typography-ui-caption {
    font-size: var(--text-micro);
    line-height: var(--ui-caption-line-height);
    letter-spacing: var(--ui-caption-letter-spacing);
    font-weight: var(--ui-caption-font-weight);
  }

  /* Markdown typography - all use semantic markdown size */
  .typography-markdown-body {
    font-size: var(--text-markdown);
    line-height: var(--markdown-body-line-height);
    letter-spacing: var(--markdown-body-letter-spacing);
    font-weight: var(--markdown-body-font-weight);
  }

  .typography-markdown-h1 {
    font-size: var(--text-markdown);
    line-height: var(--markdown-h1-line-height);
    letter-spacing: var(--markdown-h1-letter-spacing);
    font-weight: var(--markdown-h1-font-weight);
  }

  .typography-markdown-h2 {
    font-size: var(--text-markdown);
    line-height: var(--markdown-h2-line-height);
    letter-spacing: var(--markdown-h2-letter-spacing);
    font-weight: var(--markdown-h2-font-weight);
  }

  .typography-markdown-h3 {
    font-size: var(--text-markdown);
    line-height: var(--markdown-h3-line-height);
    letter-spacing: var(--markdown-h3-letter-spacing);
    font-weight: var(--markdown-h3-font-weight);
  }

  .typography-markdown-h4 {
    font-size: var(--text-markdown);
    line-height: var(--markdown-h4-line-height);
    letter-spacing: var(--markdown-h4-letter-spacing);
    font-weight: var(--markdown-h4-font-weight);
  }

  .animate-spin-once {
    animation: spin-once 0.5s linear forwards;
  }

}

:root {
  /* Default Light Theme */
  --background: oklch(0.97 0.02 85); /* Warm sand background */
  --foreground: oklch(0.25 0.02 40); /* Dark warm text */
  --card: oklch(0.99 0.01 90); /* Bright sand card */
  --card-foreground: oklch(0.25 0.02 40); /* Dark warm text */
  --popover: oklch(0.99 0.01 90); /* Bright sand popover */
  --popover-foreground: oklch(0.25 0.02 40); /* Dark warm text */
  --primary: oklch(0.65 0.2 55); /* Primary accent - orange */
  --primary-foreground: oklch(0.99 0.01 90); /* Light text on primary */
  --secondary: oklch(0.92 0.02 80); /* Light sand */
  --secondary-foreground: oklch(0.25 0.02 40); /* Dark warm text */
  --muted: oklch(0.9 0.015 75); /* Muted sand */
  --muted-foreground: oklch(0.45 0.02 50); /* Medium warm text */
  --accent: oklch(0.92 0.02 80); /* Light sand accent */
  --accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
  --destructive: oklch(0.55 0.25 25); /* Warm red */
  --destructive-foreground: oklch(0.99 0.01 90); /* Light text */
  --border: oklch(0.85 0.02 70); /* Warm border */
  --input: oklch(0.88 0.02 75); /* Input background */
  --ring: oklch(0.65 0.2 55); /* Focus ring color */
  --radius: 0.625rem;
  --chart-1: oklch(0.58 0.15 230); /* Blue */
  --chart-2: oklch(0.58 0.15 145); /* Oasis green */
  --chart-3: oklch(0.65 0.2 55); /* Orange */
  --chart-4: oklch(0.55 0.18 30); /* Rose */
  --chart-5: oklch(0.6 0.16 85); /* Golden sand */
  --sidebar: oklch(0.95 0.02 80); /* Slightly darker sand */
  --sidebar-foreground: oklch(0.25 0.02 40); /* Dark warm text */
  --sidebar-primary: oklch(0.65 0.2 55); /* Primary accent */
  --sidebar-primary-foreground: oklch(0.99 0.01 90); /* Light text */
  --sidebar-accent: oklch(0.9 0.02 75); /* Light sand accent */
  --sidebar-accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
  --sidebar-border: oklch(0.85 0.02 70); /* Warm border */
  --sidebar-ring: oklch(0.65 0.2 55); /* Focus ring */
}

.dark {
  /* Default Dark Theme - using OKLCH color space */
  --background: oklch(0.16 0.01 30); /* #151313 */
  --foreground: oklch(0.85 0.02 90); /* #cdccc3 */
  --card: oklch(0.19 0.01 40); /* #1C1B1A */
  --card-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
  --popover: oklch(0.24 0.01 40); /* #282726 */
  --popover-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
  --primary: oklch(0.77 0.17 85); /* #edb449 - golden sand */
  --primary-foreground: oklch(0.16 0.01 30); /* #151313 */
  --secondary: oklch(0.29 0.01 40); /* #343331 */
  --secondary-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
  --muted: oklch(0.33 0.01 40); /* #403E3C */
  --muted-foreground: oklch(0.75 0.02 80); /* #b6b4ab */
  --accent: oklch(0.29 0.01 40); /* #343331 */
  --accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
  --destructive: oklch(0.65 0.15 30); /* #d98678 */
  --destructive-foreground: oklch(0.9 0.02 80); /* #e1dcd0 */
  --border: oklch(0.31 0.01 35); /* #393836 */
  --input: oklch(0.33 0.01 40); /* #403E3C */
  --ring: oklch(0.77 0.17 85); /* #edb449 */
  --chart-1: oklch(0.68 0.12 230); /* #5aa9d9 - blue */
  --chart-2: oklch(0.68 0.12 145); /* #81af6c - green */
  --chart-3: oklch(0.7 0.13 95); /* #c2974d - yellow */
  --chart-4: oklch(0.65 0.14 45); /* #d8886d - coral */
  --chart-5: oklch(0.68 0.12 55); /* #d29470 - orange */
  --sidebar: oklch(0.16 0.01 30); /* #151313 */
  --sidebar-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
  --sidebar-primary: oklch(0.77 0.17 85); /* #edb449 */
  --sidebar-primary-foreground: oklch(0.16 0.01 30); /* #151313 */
  --sidebar-accent: oklch(0.24 0.01 40); /* #282726 */
  --sidebar-accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
  --sidebar-border: oklch(0.31 0.01 35); /* #393836 */
  --sidebar-ring: oklch(0.77 0.17 85); /* #edb449 */
}

* {
  border-color: hsl(var(--border));
}

:root * {
  border-color: rgba(194, 151, 77, 0.2); /* Warm golden sand borders for light mode */
}

.dark * {
  border-color: rgba(57, 56, 54, 0.5); /* #393836 at 50% opacity */
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --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-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-status-success: var(--status-success);
  --color-status-warning: var(--status-warning);
  --color-status-error: var(--status-error);
  --color-status-info: var(--status-info);
  --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);

  /* Markdown typography variables */
  --markdown-body-font-size: var(--text-markdown);
  --markdown-body-line-height: var(--markdown-body-line-height);
  --markdown-h1-font-size: var(--text-markdown);
  --markdown-h1-line-height: var(--markdown-h1-line-height);
  --markdown-h2-font-size: var(--text-markdown);
  --markdown-h2-line-height: var(--markdown-h2-line-height);
  --markdown-h3-font-size: var(--text-markdown);
  --markdown-h3-line-height: var(--markdown-h3-line-height);
  --markdown-h4-font-size: var(--text-markdown);
  --markdown-h4-line-height: var(--markdown-h4-line-height);
  --markdown-h5-font-size: var(--text-markdown);
  --markdown-h5-line-height: var(--markdown-h5-line-height);
  --markdown-h6-font-size: var(--text-markdown);
  --markdown-h6-line-height: var(--markdown-h6-line-height);
  --markdown-list-font-size: var(--text-markdown);
  --markdown-list-line-height: var(--markdown-list-line-height);
  --markdown-code-block-font-size: var(--text-code);
  --markdown-code-block-line-height: var(--markdown-code-block-line-height);

  /* Markdown color variables */
  --markdown-heading1: var(--markdown-heading1);
  --markdown-heading2: var(--markdown-heading2);
  --markdown-heading3: var(--markdown-heading3);
  --markdown-heading4: var(--markdown-heading4);
  --markdown-link: var(--markdown-link);
  --markdown-link-hover: var(--markdown-link-hover);
  --markdown-list-marker: var(--markdown-list-marker);
  --markdown-inline-code: var(--markdown-inline-code);
  --markdown-inline-code-bg: var(--markdown-inline-code-bg);
  --markdown-blockquote: var(--markdown-blockquote);
  --markdown-blockquote-border: var(--markdown-blockquote-border);

  /* Markdown spacing defaults */
  --markdown-paragraph-spacing: 0.35rem;
  --markdown-heading-primary-top: 0.75rem;
  --markdown-heading-primary-bottom: 0.35rem;
  --markdown-heading-secondary-top: 0.6rem;
  --markdown-heading-secondary-bottom: 0.3rem;
  --markdown-blockquote-spacing: 0.6rem;
  --markdown-blockquote-padding: 0.75rem;
  --markdown-divider-spacing: 0.85rem;
  --markdown-table-spacing: 0.9rem;
  --markdown-heading1-size: var(--text-markdown);
  --markdown-heading2-size: var(--text-markdown);
  --markdown-heading3-size: var(--text-markdown);
  --markdown-heading4-size: var(--text-markdown);
  --markdown-heading5-size: var(--text-markdown);
  --markdown-heading6-size: var(--text-markdown);
  --font-sans: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
  --font-heading: var(--font-sans);
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
  --font-family-sans: var(--font-sans);
  --font-family-mono: var(--font-mono);
}

@layer base {
  * {
    @apply border-border outline-none;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-weight: var(--ui-regular-font-weight, 400);
  }

  .font-sans {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
  }

  .font-mono,
  code,
  pre {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Liberation Mono', Menlo, monospace) !important;
  }

  /* Remove focus rings globally */
  *:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
}

/* Custom scrollbar styles */
*::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  background: transparent;
  -webkit-appearance: none;
}

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

*::-webkit-scrollbar-thumb {
  background: var(--oc-scrollbar-thumb);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--oc-scrollbar-thumb-hover);
  background-clip: padding-box;
}

.dark {
  --oc-scrollbar-thumb: oklch(0.6 0.02 80 / 0.3);
  --oc-scrollbar-thumb-hover: oklch(0.6 0.02 80 / 0.5);
}

[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: padding-box;
}

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

[data-scrollbar="chat"].chat-scroll,
.chat-scroll {
  scrollbar-gutter: stable both-edges;
}

html:not(.dark) .chat-scroll {
  color-scheme: dark;
}

[data-scrollbar="chat"]::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  background: transparent !important;
  -webkit-appearance: none;
}

[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar,
.chat-scroll::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

[data-scrollbar="chat"]::-webkit-scrollbar-track {
  background: transparent !important;
}

[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-track,
.chat-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
  background: var(--oc-scrollbar-thumb) !important;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb,
.chat-scroll::-webkit-scrollbar-thumb {
  background: var(--oc-scrollbar-thumb) !important;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-scrollbar="chat"]::-webkit-scrollbar-thumb:hover {
  background: var(--oc-scrollbar-thumb-hover) !important;
  background-clip: padding-box;
}

[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb:hover,
.chat-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--oc-scrollbar-thumb-hover) !important;
  background-clip: padding-box;
}

[data-scrollbar="chat"]::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Hide native scrollbars for overlay targets (all browsers) */
.overlay-scrollbar-target {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.overlay-scrollbar-target::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Firefox scrollbar support */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--oc-scrollbar-thumb) transparent;
}

.scrollbar-hidden {
  scrollbar-width: none !important;
}

.scrollbar-hidden::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.dark * {
  scrollbar-color: oklch(0.6 0.02 80 / 0.3) transparent;
}

/* Overlay scrollbar styling (custom thumb) */
.overlay-scrollbar {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.overlay-scrollbar--dense,
.overlay-scrollbar--bottom-right,
.overlay-scrollbar--zero,
.overlay-scrollbar--flush {
  /* no-op: positioning handled inline */
}

.overlay-scrollbar__thumb {
  pointer-events: auto;
  position: absolute;
  width: 6px;
  background: var(--oc-scrollbar-thumb);
  border-radius: 9999px;
  opacity: 0.8;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  will-change: transform, height;
}

.overlay-scrollbar__thumb:hover,
.overlay-scrollbar__thumb:active {
  background: var(--oc-scrollbar-thumb-hover);
  opacity: 1;
}

.overlay-scrollbar__thumb--horizontal {
  height: 6px;
  margin: 0;
}

.overlay-scrollbar__thumb--vertical {
  margin: 0;
}

/* Pierre diff viewer styling */
.pierre-diff-wrapper {
  --diffs-font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  --diffs-font-size: var(--text-code, 13px);
  --diffs-line-height: 1.5;
  --diffs-tab-size: 2;
  --diffs-header-font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  --diffs-min-number-column-width: 4ch;
  --diffs-gap-inline: 0;
  --diffs-gap-block: 0;
}

/* WebKit scroll rendering optimizations */
/* Note: avoid will-change and contain as they break resize behavior */
.pierre-diff-wrapper,
.pierre-diff-wrapper diffs-container {
  /* Force GPU compositing layer */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* WebKit touch scroll optimization */
  -webkit-overflow-scrolling: touch;
}

.pierre-diff-wrapper diffs-container {
  display: block;
}

/* Agent color system using theme variables */
@layer components {
  /* Agent color variants - each maps to theme colors */
  .agent-primary {
    --agent-color: var(--primary);
    --agent-color-bg: var(--primary);
  }

  .agent-info {
    --agent-color: var(--status-info);
    --agent-color-bg: var(--status-info);
  }

  .agent-keyword {
    --agent-color: var(--syntax-keyword);
    --agent-color-bg: var(--syntax-keyword);
  }

  .agent-success {
    --agent-color: var(--status-success);
    --agent-color-bg: var(--status-success);
  }

  .agent-function {
    --agent-color: var(--syntax-function);
    --agent-color-bg: var(--syntax-function);
  }

  .agent-number {
    --agent-color: var(--syntax-number);
    --agent-color-bg: var(--syntax-number);
  }

  .agent-type {
    --agent-color: var(--syntax-type);
    --agent-color-bg: var(--syntax-type);
  }

  .agent-warning {
    --agent-color: var(--status-warning);
    --agent-color-bg: var(--status-warning);
  }

  .agent-variable {
    --agent-color: var(--syntax-variable);
    --agent-color-bg: var(--syntax-variable);
  }

  /* Apply colors with opacity for badges */
  .agent-badge {
    background: rgb(from var(--agent-color-bg) r g b / 0.1);
    border: 1px solid rgb(from var(--agent-color) r g b / 0.2);
    color: var(--agent-color);
  }

  .agent-badge:hover {
    background: rgb(from var(--agent-color-bg) r g b / 0.15);
    border-color: rgb(from var(--agent-color) r g b / 0.3);
  }

  /* Agent dot indicator */
  .agent-dot {
    background: var(--agent-color);
  }

  /* Agent list item */
  .agent-list-item:hover {
    background: rgb(from var(--agent-color-bg) r g b / 0.05);
  }

  .agent-list-item.active {
    background: rgb(from var(--agent-color-bg) r g b / 0.1);
    border-color: rgb(from var(--agent-color) r g b / 0.2);
  }
}

/* Mobile Adaptations - All Devices */

/* Set global device type variables */
:root {
  --is-mobile: 0;
  --device-type: 'desktop';
  --font-scale: 1;
}

@media (max-width: 1024px) {
:root.mobile-pointer:not(.desktop-runtime) {
    --is-mobile: 1;
    --device-type: 'mobile';
    --font-scale: 0.9;
  }
}

/* Utility classes for device-specific styling */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  :root.mobile-pointer:not(.desktop-runtime) .desktop-only {
    display: none !important;
  }

  :root.desktop-runtime .mobile-only {
    display: none !important;
  }

  :root.mobile-pointer:not(.desktop-runtime) .mobile-only {
    display: block !important;
  }
}

/* General mobile improvements for all mobile devices */
@media (max-width: 1024px) {
  /* Override CSS custom properties for mobile */
  :root.mobile-pointer:not(.desktop-runtime) {
    --text-markdown: 1rem;
    --text-code: 0.875rem;
    --text-ui-header: 0.9375rem;
    --text-ui-label: 0.875rem;
    --text-meta: 0.875rem;
    --text-micro: 0.8125rem;
  }

  /* Force override with higher specificity */
  :root.mobile-pointer:not(.desktop-runtime) * {
    --text-markdown: 1rem !important;
    --text-code: 0.875rem !important;
    --text-ui-header: 0.9375rem !important;
    --text-ui-label: 0.875rem !important;
    --text-meta: 0.875rem !important;
    --text-micro: 0.8125rem !important;
  }

  /* Additional override for elements using typography classes */
  :root.mobile-pointer:not(.desktop-runtime) .typography-markdown,
  :root.mobile-pointer:not(.desktop-runtime) .typography-code,
  :root.mobile-pointer:not(.desktop-runtime) .typography-ui-header,
  :root.mobile-pointer:not(.desktop-runtime) .typography-ui-label,
  :root.mobile-pointer:not(.desktop-runtime) .typography-meta,
  :root.mobile-pointer:not(.desktop-runtime) .typography-micro {
    font-size: unset !important;
  }

  /* Fix font size for tool displays */
  :root.mobile-pointer:not(.desktop-runtime) [class*="tool"],
  :root.mobile-pointer:not(.desktop-runtime) [class*="code"] {
    --text-code: 0.875rem !important;
    font-size: var(--text-code) !important;
  }

  /* Improve touch targets for mobile */
  :root.mobile-pointer:not(.desktop-runtime) button,
  :root.mobile-pointer:not(.desktop-runtime) .btn,
  :root.mobile-pointer:not(.desktop-runtime) [role="button"] {
    min-height: 36px;
    min-width: 36px;
  }

  /* Improve input field touch targets */
  :root.mobile-pointer:not(.desktop-runtime) input,
  :root.mobile-pointer:not(.desktop-runtime) textarea,
  :root.mobile-pointer:not(.desktop-runtime) select {
    min-height: 36px;
  }

  /* Fix mobile text inputs */
  :root.mobile-pointer:not(.desktop-runtime) input[type="text"],
  :root.mobile-pointer:not(.desktop-runtime) input[type="search"],
  :root.mobile-pointer:not(.desktop-runtime) input[type="email"],
  :root.mobile-pointer:not(.desktop-runtime) input[type="password"],
  :root.mobile-pointer:not(.desktop-runtime) textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
  }

  /* Prevent keyboard on non-input elements */
  :root.mobile-pointer:not(.desktop-runtime)
    button:not([type="submit"]):not([type="button"]):not([type="reset"]),
  :root.mobile-pointer:not(.desktop-runtime) .btn,
  :root.mobile-pointer:not(.desktop-runtime) [role="button"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Specific fix for session buttons */
  :root.mobile-pointer:not(.desktop-runtime) button[inputmode="none"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
  }

  /* Improve mobile spacing */
  :root.mobile-pointer:not(.desktop-runtime) .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  :root.mobile-pointer:not(.desktop-runtime) .py-2 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Fix mobile scroll containers */
  :root.mobile-pointer:not(.desktop-runtime) .overflow-hidden {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Fix mobile viewport height */
  :root.mobile-pointer:not(.desktop-runtime),
  :root.mobile-pointer:not(.desktop-runtime) body {
    height: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
  }

  /* Fix main layout container */
  :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
    height: 100vh;
    height: -webkit-fill-available;
    min-height: 0;
  }

  /* Fix header positioning */
  :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Fix main content area */
  :root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
    min-height: 0;
    flex: 1;
  }

  /* Fix chat container */
  :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-full {
    height: 100%;
    min-height: 0;
  }

  /* Ensure proper flex behavior */
  :root.mobile-pointer:not(.desktop-runtime) .flex.flex-col {
    min-height: 0;
  }

  /* Mobile sidebar positioning */
  :root.mobile-pointer:not(.desktop-runtime) .mobile-sidebar-top {
    top: var(--header-height, 3rem);
    height: calc(100vh - var(--header-height, 3rem));
  }

  /* Set header height variable */
  :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
    --header-height: 3rem;
  }

  /* For mobile devices with larger header */
  @media (max-width: 768px) {
    :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
      --header-height: 3.5rem;
    }
  }

  /* For tablet devices */
  @media (min-width: 769px) and (max-width: 1024px) {
    :root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
      --header-height: 3.25rem;
    }
  }
}

/* iOS PWA Adaptations */

/* Phase 1: iOS PWA safe area handling - Enhanced positioning approach */
@media (display-mode: standalone) {
  /* iOS-specific safe area handling with CSS variable support */
  @supports (-webkit-touch-callout: none) {
    /* Safe area handling for fixed positioned elements */
    :root {
      --oc-safe-area-top: env(safe-area-inset-top, 0);
      --oc-safe-area-right: env(safe-area-inset-right, 0);
      --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
      --oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
      --oc-safe-area-left: env(safe-area-inset-left, 0);
    }

    .header-safe-area {
      padding-top: var(--oc-safe-area-top);
    }

    .main-content-safe-area {
      padding-top: 0;
      padding-bottom: 0;
      padding-left: var(--oc-safe-area-left);
      padding-right: var(--oc-safe-area-right);
    }

    /* Safe area for bottom fixed/bottom-0 elements */
    .bottom-safe-area {
      padding-bottom: var(--oc-safe-area-bottom-visual) !important;
    }

    /* Ensure proper body spacing for iOS */
    body {
      min-height: 100vh;
      min-height: -webkit-fill-available;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Fix iOS viewport issues */
    .flex.flex-col.h-screen {
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }

    /* Prevent content overlap in iOS */
    .flex-1.overflow-hidden {
      position: relative;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Update header height for iOS */
    .header-safe-area {
      --header-height: 4.5rem;
    }

    .mobile-sidebar-top {
      --header-height: 4.5rem;
    }

    /* Mobile typography improvements */
    .typography-markdown {
      font-size: 1rem !important;
    }

    .typography-code {
      font-size: 0.875rem !important;
    }

    .typography-ui-header {
      font-size: 0.9375rem !important;
    }

    .typography-ui-label {
      font-size: 0.875rem !important;
    }

    .typography-meta {
      font-size: 0.875rem !important;
    }

    .typography-micro {
      font-size: 0.8125rem !important;
    }

    /* Fix font size for tool displays */
    [class*="tool"], [class*="code"] {
      font-size: 0.875rem !important;
    }
  }

  /* Fallback for non-iOS standalone mode */
  @supports not (-webkit-touch-callout: none) {
    :root {
      --oc-safe-area-top: env(safe-area-inset-top, 0);
      --oc-safe-area-right: env(safe-area-inset-right, 0);
      --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
      --oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px);
      --oc-safe-area-left: env(safe-area-inset-left, 0);
    }

    .header-safe-area {
      padding-top: var(--oc-safe-area-top);
    }

    .main-content-safe-area {
      padding-top: 0;
      padding-bottom: 0;
      padding-left: var(--oc-safe-area-left);
      padding-right: var(--oc-safe-area-right);
    }

    .bottom-safe-area {
      padding-bottom: var(--oc-safe-area-bottom-visual) !important;
    }
  }
}

/* Phase 6: Home indicator blur gradient fix */
@media (display-mode: standalone) and (max-width: 768px) {
  .pwa-dialog-content {
    --pwa-dialog-padding: clamp(0.75rem, 3vw, 1.25rem);
    top: calc(50% + (var(--oc-safe-area-top, 0px) * 0.22));
    max-height: calc(100vh - var(--oc-safe-area-top, 0px) - var(--oc-safe-area-bottom-visual, 0px) - 20px);
    padding: var(--pwa-dialog-padding);
    padding-top: calc(var(--pwa-dialog-padding) + (var(--oc-safe-area-top, 0px) * 0.35));
    --tw-translate-y: calc(-50% + (var(--oc-safe-area-top, 0px) * 0.6));
    row-gap: clamp(0.75rem, 2vw, 1.25rem);
  }

  .pwa-dialog-content.pwa-compact {
    --pwa-dialog-padding: clamp(0.5rem, 2vw, 0.85rem);
    row-gap: clamp(0.45rem, 1.5vw, 0.8rem);
  }

  .pwa-dialog-content [data-slot="dialog-close"] {
    top: calc(0.25rem + (var(--oc-safe-area-top, 0px) * 0.35));
    right: var(--pwa-dialog-padding);
  }

  .pwa-dialog-content.pwa-compact [data-slot="dialog-close"] {
    top: calc(0.2rem + (var(--oc-safe-area-top, 0px) * 0.3));
  }

  .pwa-dialog-content .settings-page-body {
    max-width: 100%;
    padding: 0.75rem 1rem;
    row-gap: 0;
  }

  .pwa-dialog-content .settings-page-body > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.85rem;
  }

  .pwa-dialog-content .directory-dialog-body {
    padding: 0.5rem 0.75rem;
  }

  .pwa-dialog-content .directory-dialog-body .directory-grid {
    gap: 0.6rem;
  }

  .pwa-overlay-panel {
    margin-bottom: max(var(--oc-safe-area-bottom-visual, 0px), 12px);
    padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) * 0.4);
  }

  .pwa-overlay-panel .pwa-overlay-scroll {
    padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) + 12px);
  }
}

@media (display-mode: standalone) {
  /* Home indicator blur overlay */
  body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--oc-safe-area-bottom-visual, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)));
    background: linear-gradient(
      to top,
      var(--background) 0%,
      var(--background) 30%,
      rgba(from var(--background) r g b / 0.8) 60%,
      rgba(from var(--background) r g b / 0.3) 85%,
      transparent 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    pointer-events: none;
  }

  /* Fallback for browsers without rgba(from ...) support */
  @supports not (color: rgba(from white r g b / 0.5)) {
    body::after {
      background: linear-gradient(
        to top,
        var(--background) 0%,
        var(--background) 30%,
        rgba(21, 19, 19, 0.8) 60%,  /* Dark theme fallback */
        rgba(21, 19, 19, 0.3) 85%,
        transparent 100%
      );
    }

    /* Light theme fallback */
    :root body::after {
      background: linear-gradient(
        to top,
        var(--background) 0%,
        var(--background) 30%,
        rgba(248, 247, 243, 0.8) 60%,  /* Light theme fallback */
        rgba(248, 247, 243, 0.3) 85%,
        transparent 100%
      );
    }
  }
}

/* ============================================
   Streamdown Styles
   Minimal overrides - fonts only, using Streamdown defaults
   ============================================ */

/* VS Code webviews can inject default pre/code/blockquote backgrounds; tool input/output should inherit the card surface. */
.tool-input-surface pre,
.tool-input-surface code,
.tool-input-surface blockquote,
.tool-input-text {
  background: transparent !important;
  background-color: transparent !important;
}

/* VSCode: tool cards should honor semantic code sizing, even when syntax themes inject sizes. */
:root.vscode-runtime .tool-input-surface,
:root.vscode-runtime .tool-output-surface {
  font-size: var(--text-code) !important;
}

:root.vscode-runtime .tool-input-surface code,
:root.vscode-runtime .tool-input-surface pre,
:root.vscode-runtime .tool-output-surface code,
:root.vscode-runtime .tool-output-surface pre {
  font-size: inherit !important;
}

/* Model/agent controls: agent label hides before model label. */
@container model-controls (max-width: 11rem) {
  .model-controls__agent-label {
    display: none;
  }
}

@container model-controls (max-width: 9rem) {
  .model-controls__model-label {
    display: none;
  }
}

/* VS Code side panel: collapse earlier to save horizontal space. */
@container model-controls (max-width: 9rem) {
  :root.vscode-runtime .model-controls__agent-label {
    display: none;
  }
}

@container model-controls (max-width: 10rem) {
  :root.vscode-runtime .model-controls__model-label {
    display: none;
  }
}

/* Text font: IBM Plex Sans */
.streamdown-content {
  font-family: var(--font-sans);
  font-size: var(--text-markdown);
}

/* Tool markdown should render at code size to match tool card typography. */
.streamdown-content.streamdown-tool {
  font-size: var(--text-code) !important;
}

.streamdown-content.streamdown-tool code,
.streamdown-content.streamdown-tool pre {
  font-size: inherit !important;
}

/* Code font: IBM Plex Mono */
.streamdown-content code,
.streamdown-content pre {
  font-family: var(--font-mono);
}

/* Streamdown code blocks: ensure light/dark Shiki vars work even when Tailwind doesn't scan Streamdown's internal class names. */
.streamdown-content [data-streamdown="code-block-body"] {
  background-color: var(--shiki-light-bg, transparent);
  color: var(--shiki-light, inherit);
}

.dark .streamdown-content [data-streamdown="code-block-body"] {
  background-color: var(--shiki-dark-bg, var(--shiki-light-bg, transparent));
  color: var(--shiki-dark, var(--shiki-light, inherit));
}

.dark .streamdown-content [data-streamdown="code-block-body"] span[style*="--shiki-dark"] {
  color: var(--shiki-dark) !important;
}

/* Fix list styling - override Tailwind reset */
.streamdown-content ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.5em;
}

.streamdown-content ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5em;
}

.streamdown-content li {
  display: list-item;
}

/* Reduce code block header height */
[data-streamdown="code-block-header"] {
  padding: 0.375rem 0.75rem;
}

/* Disable Streamdown's code block virtualization (content-visibility) to avoid late height changes that break scroll-to-bottom. */
.streamdown-content [data-streamdown="code-block"] {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}