/**
 * Canonical base design tokens for the platform — the single source of truth
 * for every surface: the desktop/mobile app imports this file (layered into
 * `base`) and extends it with desktop-only tokens in apps/tauri/src/globals.css;
 * miniapp frames receive it through miniapp-theme.css and the SDK style build.
 *
 * Tokens only — no element styles, no color-scheme (frame-level concerns live
 * in miniapp-frame.css so the desktop's own document defaults stay untouched).
 *
 * The dark selector is class-based (`.dark`) so nested story/test wrappers
 * work, plus root-scoped `[data-theme='dark']` for miniapp frames. Do NOT
 * bare-match `[data-theme='dark']` at any depth: desktop elements carry
 * data-theme attributes for asset selection (see miniapp-package-icon.tsx)
 * and must not flip their subtree.
 */

:root {
  --app-font-size: 16px;
  --message-attachment-gallery-aspect: 2 / 1;
  --message-attachment-gallery-max-width: 34.375rem; /* 550px - two-column image mosaic */
  --message-attachment-preview-max-height: 21.875rem; /* 350px - inline image preview */
  --message-attachment-single-max-width: 34.375rem; /* 550px - natural-aspect inline image */
  --message-attachment-tile-aspect: 5 / 3;

  --background: hsl(0 0% 100%);
  --foreground: hsl(240 3.7% 15.9%);
  --card: oklch(1 0 0);
  --card-foreground: var(--foreground);
  --popover: hsl(0 0% 100%);
  --popover-foreground: var(--foreground);
  --popover-accent: hsl(240 4.8% 95.9%);
  --tooltip-chrome: hsl(240 3.7% 15.9%);
  --tooltip-chrome-foreground: hsl(0 0% 100%);

  --primary: #155dfc;
  --primary-foreground: oklch(0.95 0.02 300);
  --primary-hover: #1447e6;
  --primary-accent: hsl(214 100% 97%);
  --primary-accent-foreground: hsl(221 83% 53%);
  --secondary: hsl(0 0% 100%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --secondary-hover: hsl(240 4.8% 95.9%);
  --muted: hsl(240 4.9% 96.1%);
  --muted-foreground: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);

  --destructive: hsl(0 72% 51%);
  --destructive-foreground: hsl(0 0% 100%);
  --destructive-hover: hsl(0 84% 60%);
  --destructive-accent: hsl(0 84.2% 95%);
  --destructive-accent-foreground: var(--destructive);
  --warning: oklch(75% 0.15 90);
  --warning-foreground: oklch(30% 0.08 85);
  --warning-accent: oklch(95% 0.02 90);
  --warning-accent-foreground: var(--warning);
  --success: oklch(69.59% 0.0596 162.48);
  --success-foreground: oklch(37.8% 0.0292 168.94);
  --success-accent: oklch(95% 0.02 162);
  --success-accent-foreground: var(--success);
  --info: oklch(70% 0.15 200);
  --info-foreground: oklch(20% 0.05 200);
  --info-accent: oklch(95% 0.02 200);
  --info-accent-foreground: var(--info);
  --github-state-open: #1f883d;
  --github-state-open-foreground: #ffffff;
  --github-state-merged: #8250df;
  --github-state-merged-foreground: #ffffff;
  --github-state-closed: #cf222e;
  --github-state-closed-foreground: #ffffff;
  --github-state-draft: #59636e;
  --github-state-draft-foreground: #ffffff;

  --border: hsl(240 5.9% 90%);
  --border-focus: hsl(221 83% 53%);
  --border-error: var(--destructive);
  --input: hsl(240 5.9% 90%);
  --input-background: hsl(0 0% 100%);
  --input-border-focus: hsl(221 83% 53%);
  --input-border-error: var(--destructive);
  --ring: hsl(221 83% 53%);
  --ring-focus: rgb(147 197 253 / 50%);

  --text-secondary: rgb(9 9 11 / 64%);
  --text-tertiary: rgb(9 9 11 / 48%);
  --text-subheader: rgb(9 9 11 / 88%);
  --text-contrast: hsl(0 0% 100%);
  --interactive-default: transparent;
  --interactive-hover: rgb(9 9 11 / 6%);
  --interactive-active: rgb(9 9 11 / 10%);
  --interactive-focus: rgb(147 197 253 / 50%);
  --interactive-card-hover: hsl(0 0% 98%);

  --surface-border-1: rgb(9 9 11 / 8%);
  --surface-border-2: rgb(9 9 11 / 12%);
  --workspace-divider: rgb(9 9 11 / 6%);
  --surface-level-1: #fafafa;
  --surface-level-1-border: transparent;
  --surface-level-2: hsl(0 0% 100%);
  --surface-level-minus-1: rgb(9 9 11 / 4%);
  --surface-tag: rgb(9 9 11 / 6%);

  --sidebar: hsl(240 4.8% 95.9%);
  --sidebar-foreground: hsl(240 5.9% 10%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 5.9% 90%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(240 5.9% 90%);
  --sidebar-ring: hsl(240 5.9% 90%);
  --sidebar-surface: rgb(255 255 255 / 82%);

  --button-tertiary-default: rgb(9 9 11 / 6%);
  --button-tertiary-hover: hsl(240 4.9% 83.9%);
  --button-borderless-default: transparent;
  --button-borderless-hover: rgb(9 9 11 / 8%);
  --button-borderless-active: hsl(214 95% 93%);
  --icon-active: hsl(221 83% 53%);
  --icon-secondary: hsl(240 3.8% 46.1%);

  --radius: 0.5rem;
  --z-popover: 200;
  --z-modal: 200;
  --z-tooltip: 250;
  --scrollbar-thumb: rgb(9 9 11 / 22%);
  --scrollbar-thumb-hover: rgb(9 9 11 / 34%);

  --shadow-surface-sm-value:
    0 0 0 1px rgb(9 9 11 / 8%), 0 2px 4px -1px rgb(9 9 11 / 8%),
    0 1px 2px rgb(9 9 11 / 7%);
  --shadow-surface-md-value:
    0 0 0 1px rgb(9 9 11 / 8%), 0 3px 6px -1px rgb(9 9 11 / 12%),
    0 1px 3px rgb(9 9 11 / 8%);
  --shadow-popover-value:
    0 0 0 1px rgb(9 9 11 / 8%), 0 4px 6px -1px rgb(9 9 11 / 12%),
    0 2px 4px -2px rgb(9 9 11 / 12%);
  --shadow-button-primary-value: inset 0 2px 0 rgb(255 255 255 / 16%);
  --shadow-button-secondary-value:
    0 0 0 1px rgb(9 9 11 / 12%), 0 2px 4px -1.5px rgb(9 9 11 / 16%);
  --shadow-button-secondary-hover-value:
    0 0 0 1px rgb(9 9 11 / 24%), 0 3px 6px -1px rgb(9 9 11 / 12%),
    0 1px 3px rgb(9 9 11 / 8%);
  --shadow-button-outline-value: inset 0 0 0 1px var(--input);
  --shadow-button-outline-hover-value: inset 0 0 0 1px var(--border);
  --shadow-input-rest-value: var(--shadow-surface-sm-value);
  --shadow-input-focus-value:
    0 0 0 3px var(--ring-focus), 0 1px 2px rgb(9 9 11 / 6%);
}

.dark,
:root[data-theme='dark'] {
  --background: oklch(21.03% 0.0023 285.89);
  --foreground: oklch(98.48% 0 0);
  --card: hsl(240 4.2% 18.8%);
  --card-foreground: var(--foreground);
  --popover: hsl(240 4.2% 18.8%);
  --popover-foreground: var(--foreground);
  --popover-accent: var(--sidebar);
  --tooltip-chrome: hsl(0 0% 100%);
  --tooltip-chrome-foreground: hsl(240 3.7% 15.9%);

  --primary-foreground: hsl(0 0% 100%);
  --primary-accent: hsl(224 64% 33%);
  --primary-accent-foreground: var(--foreground);
  --secondary: hsl(240 4.4% 21.4%);
  --secondary-foreground: var(--foreground);
  --secondary-hover: hsl(240 5.3% 26.1%);
  --muted: oklch(24.48% 0.0023 285.98);
  --muted-foreground: oklch(71.19% 0.0051 286.07);
  --accent: oklch(30.27% 0.0071 285.97);
  --accent-foreground: var(--foreground);

  --destructive-foreground: oklch(98.48% 0 0);
  --destructive-accent: oklch(30% 0.03 15);
  --warning-accent: oklch(30% 0.08 85);
  --success: oklch(50.81% 0.042 165.61);
  --success-foreground: var(--foreground);
  --success-accent: oklch(30% 0.03 165);
  --info: oklch(65% 0.12 200);
  --info-foreground: var(--foreground);
  --info-accent: oklch(30% 0.03 200);
  --github-state-open: #238636;
  --github-state-open-foreground: #ffffff;
  --github-state-merged: #8957e5;
  --github-state-merged-foreground: #ffffff;
  --github-state-closed: #da3633;
  --github-state-closed-foreground: #ffffff;
  --github-state-draft: #6e7681;
  --github-state-draft-foreground: #ffffff;

  --border: rgb(255 255 255 / 16%);
  --input: oklch(30.27% 0.0071 285.97);
  --input-background: #3f3f46;
  --ring-focus: rgb(29 78 216 / 60%);

  --text-secondary: rgb(250 250 250 / 64%);
  --text-tertiary: rgb(250 250 250 / 48%);
  --text-subheader: rgb(255 255 255 / 88%);
  --interactive-hover: rgb(255 255 255 / 10%);
  --interactive-active: rgb(255 255 255 / 20%);
  --interactive-focus: rgb(29 78 216 / 60%);
  --interactive-card-hover: hsl(240 3.7% 15.9%);

  --surface-border-1: rgb(255 255 255 / 8%);
  --surface-border-2: rgb(255 255 255 / 12%);
  --workspace-divider: rgb(255 255 255 / 4.5%);
  --surface-level-1: hsl(240 5% 8%);
  --surface-level-1-border: rgb(255 255 255 / 16%);
  --surface-level-2: hsl(240 4.2% 18.8%);
  --surface-level-minus-1: #09090b;
  --surface-tag: rgb(255 255 255 / 8%);

  --sidebar: var(--surface-level-minus-1);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--foreground);
  --sidebar-primary-foreground: oklch(21.03% 0.0023 285.89);
  --sidebar-accent: oklch(24.48% 0.0023 285.98);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: oklch(37.05% 0.0048 285.8);
  --sidebar-ring: oklch(37.05% 0.0048 285.8);
  --sidebar-surface: rgb(0 0 0 / 70%);

  --button-tertiary-default: rgb(255 255 255 / 8%);
  --button-tertiary-hover: rgb(255 255 255 / 22%);
  --button-borderless-default: transparent;
  --button-borderless-hover: rgb(255 255 255 / 12%);
  --button-borderless-active: hsl(224 64% 33%);
  --scrollbar-thumb: rgb(255 255 255 / 24%);
  --scrollbar-thumb-hover: rgb(255 255 255 / 36%);

  --shadow-surface-sm-value:
    0 2px 4px rgb(9 9 11 / 8%), 0 1px 2px rgb(9 9 11 / 7%),
    inset 0 0 0 1px rgb(255 255 255 / 6%);
  --shadow-surface-md-value:
    0 4px 8px -2px rgb(9 9 11 / 16%), 0 2px 4px rgb(9 9 11 / 12%),
    inset 0 0 0 1px rgb(255 255 255 / 8%);
  --shadow-popover-value:
    0 1px 4px rgb(9 9 11 / 24%), inset 0 0 0 1px rgb(255 255 255 / 6%);
  --shadow-button-secondary-value:
    0 0 0 1px rgb(9 9 11 / 32%), 0 2px 4px -1.5px rgb(9 9 11 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 16%);
  --shadow-button-secondary-hover-value:
    inset 0 0 0 1px rgb(255 255 255 / 5%), 0 3px 6px rgb(9 9 11 / 54%),
    0 1px 3px rgb(9 9 11 / 40%);
  --shadow-input-rest-value: inset 0 0 0 0.5px var(--border);
  --shadow-input-focus-value:
    0 0 0 3px var(--ring-focus), 0 1px 2px rgb(0 0 0 / 20%);

  --shimmer-duration: 2s;

  /* Dense metadata text — one step below Tailwind's text-xs (12px). Gutter
     timestamps, micro-badges, compact counts. Named for its role rather than
     its scale position because both @theme blocks that expose it as
     `text-2xs` need a base token with a different name to point at. */
  --font-size-metadata: 0.625rem; /* 10px */
}

/**
 * Named animation for the AI text shimmer. A @keyframes declares no selector
 * and styles no element, so it does not break the tokens-only rule above — and
 * this is the one stylesheet both the desktop app and the miniapp frame
 * receive, so the definition cannot drift between them. Components apply it
 * with an arbitrary-value utility plus `motion-reduce:`.
 */
@keyframes shimmer-sweep {
  from {
    background-position: 100% center;
  }

  to {
    background-position: 0% center;
  }
}

/**
 * Frame-level styles for portable miniapps rendered in an isolated document:
 * color-scheme, browser defaults, scrollbars, and the platform utility classes
 * shared components rely on. The desktop app never imports this file — it has
 * its own document defaults in apps/tauri/src/globals.css. Tokens live in the
 * sibling theme.css (the canonical base token source for all surfaces).
 */

:root {
  color-scheme: light;
}

:root.dark,
:root[data-theme='dark'] {
  color-scheme: dark;
}

/* Match the platform base layer so uncolored shared borders use the token. */
@layer base {
  *,
  ::before,
  ::after {
    border-color: var(--border);
  }
}

/* Shared Button's primary treatment relies on this platform utility. */
.btn-primary-shine {
  position: relative;
  overflow: hidden;
}

.btn-primary-shine::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 48%), transparent);
  content: '';
  mix-blend-mode: overlay;
  pointer-events: none;
}

.btn-primary-shine:hover::before {
  background: linear-gradient(180deg, rgb(255 255 255 / 32%), transparent);
}

.btn-primary-shine:active::before {
  display: none;
}

.code-block-light {
  display: block;
}

.code-block-dark {
  display: none;
}

.dark .code-block-light {
  display: none;
}

.dark .code-block-dark {
  display: block;
}

/* Browser-safe document defaults for isolated miniapp surfaces. */
*,
::before,
::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  font-size: var(--app-font-size);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/**
 * Full-page miniapps scroll inside the host-owned block size. Body scrolling
 * stays disabled by the generated surface document so the host shell never
 * competes with app content for wheel, keyboard, or touch input.
 */
.tap-surface-scroll-root {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

button:not(:disabled),
[role='button']:not([aria-disabled='true']) {
  cursor: pointer;
  touch-action: manipulation;
}

::selection {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
}

* {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

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