@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));

/*
 * OpenJarvis design tokens.
 * Zinc/slate neutrals, blue accent. Light default, dark via class or system pref.
 */

@layer base {
  :root {
    --color-bg: #f9f9f9;
    --color-bg-secondary: #f4f4f5;
    --color-bg-tertiary: #e4e4e7;
    --color-surface: #ffffff;
    --color-sidebar: rgba(250, 250, 250, 0.85);
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-subtle: rgba(0, 0, 0, 0.04);

    --color-text: #09090b;
    --color-text-secondary: #71717a;
    --color-text-tertiary: #a1a1aa;
    --color-text-inverse: #fafafa;

    --color-accent: #0891b2;
    --color-accent-hover: #0e7490;
    --color-accent-subtle: rgba(8, 145, 178, 0.08);
    --color-accent-glow: rgba(8, 145, 178, 0.25);

    --color-accent-amber: #f59e0b;
    --color-accent-amber-hover: #d97706;
    --color-accent-amber-subtle: rgba(245, 158, 11, 0.1);
    --color-accent-purple: #8b5cf6;
    --color-accent-purple-hover: #7c3aed;
    --color-accent-purple-subtle: rgba(139, 92, 246, 0.1);
    --color-accent-blue-subtle: rgba(8, 145, 178, 0.08);

    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-error: #dc2626;

    --color-code-bg: #f4f4f5;
    --color-input-bg: #ffffff;
    --color-input-border: #d4d4d8;

    --color-user-bubble: #0891b2;
    --color-user-bubble-text: #ffffff;
    --color-on-accent: #ffffff;
    --color-disabled-bg: #e4e4e7;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --sidebar-width: 260px;
    --chat-max-width: 720px;

    --font-display: 'Chakra Petch', 'Space Grotesk', system-ui, sans-serif;
    --font-hud: 'IBM Plex Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

    color-scheme: light;
  }

  .dark {
    --color-bg: #0a0a0b;
    --color-bg-secondary: #121214;
    --color-bg-tertiary: #18181b;
    --color-surface: #121214;
    --color-sidebar: rgba(12, 12, 14, 0.72);
    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-subtle: rgba(255, 255, 255, 0.05);

    --color-text: #ededef;
    --color-text-secondary: #8d8d93;
    --color-text-tertiary: #5c5c63;
    --color-text-inverse: #0a0a0b;

    --color-accent: #22d3ee;
    --color-accent-hover: #67e8f9;
    --color-accent-subtle: rgba(34, 211, 238, 0.1);
    --color-accent-glow: rgba(34, 211, 238, 0.3);

    --color-accent-amber: #f5a524;
    --color-accent-amber-hover: #fbbf24;
    --color-accent-amber-subtle: rgba(245, 165, 36, 0.12);
    --color-accent-purple: #b794ff;
    --color-accent-purple-hover: #c9b0ff;
    --color-accent-purple-subtle: rgba(183, 148, 255, 0.12);
    --color-accent-blue-subtle: rgba(79, 209, 255, 0.12);

    --color-success: #3ddc97;
    --color-warning: #f5a524;
    --color-error: #ff6b6b;

    --color-code-bg: #0c121a;
    --color-input-bg: #0c121a;
    --color-input-border: rgba(79, 209, 255, 0.12);

    --color-user-bubble: rgba(79, 209, 255, 0.14);
    --color-user-bubble-text: #e6f1ff;
    --color-on-accent: #070b11;
    --color-disabled-bg: #121a24;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 14px -2px rgb(0 0 0 / 0.5), 0 0 0 1px rgba(79, 209, 255, 0.04);
    --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgba(79, 209, 255, 0.06);

    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --color-bg: #0a0a0b;
      --color-bg-secondary: #121214;
      --color-bg-tertiary: #18181b;
      --color-surface: #121214;
      --color-sidebar: rgba(12, 12, 14, 0.72);
      --color-border: rgba(255, 255, 255, 0.09);
      --color-border-subtle: rgba(255, 255, 255, 0.05);

      --color-text: #ededef;
      --color-text-secondary: #8d8d93;
      --color-text-tertiary: #5c5c63;
      --color-text-inverse: #0a0a0b;

      --color-accent: #22d3ee;
      --color-accent-hover: #67e8f9;
      --color-accent-subtle: rgba(34, 211, 238, 0.1);
      --color-accent-glow: rgba(34, 211, 238, 0.3);

      --color-accent-amber: #f5a524;
      --color-accent-amber-hover: #fbbf24;
      --color-accent-amber-subtle: rgba(245, 165, 36, 0.12);
      --color-accent-purple: #b794ff;
      --color-accent-purple-hover: #c9b0ff;
      --color-accent-purple-subtle: rgba(183, 148, 255, 0.12);
      --color-accent-blue-subtle: rgba(79, 209, 255, 0.12);

      --color-success: #3ddc97;
      --color-warning: #f5a524;
      --color-error: #ff6b6b;

      --color-code-bg: #0c121a;
      --color-input-bg: #0c121a;
      --color-input-border: rgba(79, 209, 255, 0.12);

      --color-user-bubble: rgba(79, 209, 255, 0.14);
      --color-user-bubble-text: #e6f1ff;
      --color-on-accent: #070b11;
      --color-disabled-bg: #121a24;

      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
      --shadow-md: 0 4px 14px -2px rgb(0 0 0 / 0.5), 0 0 0 1px rgba(79, 209, 255, 0.04);
      --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.7), 0 0 0 1px rgba(79, 209, 255, 0.06);

      color-scheme: dark;
    }
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body, #root {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background-color: var(--color-accent);
    color: white;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
  }
}

/* Syntax highlighting theme (highlight.js) */
@layer components {
  .hljs {
    display: block;
    background: var(--color-code-bg) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-md);
    padding: 1rem !important;
    font-size: 0.8125rem;
    line-height: 1.6;
    overflow-x: auto;
  }

  .code-block-wrapper .hljs {
    border-radius: 0;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-literal,
  .hljs-section,
  .hljs-link { color: #7c3aed; }
  .dark .hljs-keyword,
  .dark .hljs-selector-tag,
  .dark .hljs-literal,
  .dark .hljs-section,
  .dark .hljs-link { color: #a78bfa; }

  .hljs-string,
  .hljs-title,
  .hljs-name,
  .hljs-type,
  .hljs-attribute,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-addition,
  .hljs-variable,
  .hljs-template-tag,
  .hljs-template-variable { color: #059669; }
  .dark .hljs-string,
  .dark .hljs-title,
  .dark .hljs-name,
  .dark .hljs-type,
  .dark .hljs-attribute,
  .dark .hljs-symbol,
  .dark .hljs-bullet,
  .dark .hljs-addition,
  .dark .hljs-variable,
  .dark .hljs-template-tag,
  .dark .hljs-template-variable { color: #34d399; }

  .hljs-comment,
  .hljs-quote,
  .hljs-deletion,
  .hljs-meta { color: #a1a1aa; }

  .hljs-number,
  .hljs-regexp,
  .hljs-built_in,
  .hljs-params { color: #d97706; }
  .dark .hljs-number,
  .dark .hljs-regexp,
  .dark .hljs-built_in,
  .dark .hljs-params { color: #fbbf24; }

  .hljs-function { color: #2563eb; }
  .dark .hljs-function { color: #60a5fa; }

  /* Markdown prose styling */
  .prose {
    line-height: 1.55;
    font-size: 0.875rem;
  }

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

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

  .prose code:not(pre code) {
    background: var(--color-code-bg);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-family: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  }

  .prose pre {
    margin: 0.75em 0;
    border-radius: var(--radius-md);
    overflow-x: auto;
    position: relative;
  }

  .prose .code-block-wrapper pre {
    margin: 0;
    border-radius: 0;
    background: var(--color-code-bg);
  }

  .prose pre code {
    font-family: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  }

  .prose ul, .prose ol {
    padding-left: 1.5em;
    margin-bottom: 0.75em;
  }

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

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

  .prose h1, .prose h2, .prose h3, .prose h4 {
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
    letter-spacing: -0.01em;
  }

  .prose h1 { font-size: 1.375em; }
  .prose h2 { font-size: 1.2em; }
  .prose h3 { font-size: 1.075em; }

  .prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75em 0;
    font-size: 0.875em;
  }

  .prose th, .prose td {
    border: 1px solid var(--color-border);
    padding: 0.5em 0.75em;
    text-align: left;
  }

  .prose th {
    background: var(--color-bg-secondary);
    font-weight: 600;
  }

  .prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .prose a:hover {
    color: var(--color-accent-hover);
  }

  .prose hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1em 0;
  }

  /* System Pulse animations */
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }

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

  /* HUD ambient animations (CSS-only — kept out of JS for zero-cost continuous motion) */
  @keyframes hud-breathe {
    0%, 100% { box-shadow: 0 0 0 1px var(--color-border), 0 0 0 0 var(--color-accent-glow); }
    50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 24px -4px var(--color-accent-glow); }
  }

  @keyframes hud-sweep {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes hud-reticle {
    0%   { transform: rotate(0deg);   opacity: 0.4; }
    50%  { opacity: 0.9; }
    100% { transform: rotate(360deg); opacity: 0.4; }
  }

  .hud-label {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
  }

  .hud-title {
    font-weight: 600;
  }

  .hud-mono {
    font-variant-numeric: tabular-nums;
  }

  .hud-panel {
    position: relative;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface) 92%, transparent),
      var(--color-surface)
    );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
  }

  .hud-panel:hover {
    border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
  }

  .data-skeleton {
    position: relative;
    overflow: hidden;
    pointer-events: none;
  }

  .data-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--color-text) 6%, transparent) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: hud-sweep 1.6s linear infinite;
  }

  .hud-shimmer {
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--color-accent) 18%, transparent) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: hud-sweep 2.4s linear infinite;
  }

  .hud-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 42%),
      radial-gradient(circle at 85% 110%, color-mix(in srgb, var(--color-accent-purple) 8%, transparent), transparent 46%),
      linear-gradient(to bottom, transparent, transparent);
  }

  .hud-backdrop::before {
    /* faint grid */
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    opacity: 0.45;
  }

  .hud-backdrop::after {
    /* noise grain */
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.82 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: screen;
    opacity: 0.5;
  }

  .hud-reticle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }

  .hud-reticle::before,
  .hud-reticle::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--color-accent);
  }

  .hud-reticle::before {
    inset: 0;
    opacity: 0.4;
    border-style: dashed;
    animation: hud-reticle 6s linear infinite;
  }

  .hud-reticle::after {
    inset: 6px;
    opacity: 0.6;
    animation: hud-breathe 2.6s ease-in-out infinite;
  }

  /* Additional motion */
  @keyframes hud-grid-drift {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 48px 48px, 48px 48px; }
  }

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

  @keyframes hud-heartbeat {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 var(--color-accent-glow); }
    40%      { transform: scale(1.3); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent); }
  }


  /* Activate slow grid drift on backdrop */
  .hud-backdrop::before {
    animation: hud-grid-drift 60s linear infinite;
  }

  /* Live heartbeat dot — use next to hud-label for alive indicator */
  .hud-heartbeat {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: hud-heartbeat 1.6s ease-in-out infinite;
  }

  /* Blinking caret — place after titles */
  .hud-caret {
    display: inline-block;
    width: 0.5ch;
    height: 0.85em;
    margin-left: 0.25ch;
    background: var(--color-accent);
    vertical-align: text-bottom;
    animation: hud-blink 1.1s steps(1, end) infinite;
  }

  /* HUD panel header — static hairline (no animation) */
  .hud-panel > h3,
  .hud-panel-head {
    position: relative;
  }

  .hud-panel > h3::after,
  .hud-panel-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    opacity: 0.35;
  }

  @media (prefers-reduced-motion: reduce) {
    .hud-shimmer,
    .hud-reticle::before,
    .hud-reticle::after,
    .hud-backdrop::before,
    .hud-scan-beam::before,
    .hud-heartbeat,
    .hud-caret,
    .hud-panel > h3::after,
    .hud-panel-head::after {
      animation: none !important;
    }
  }
}
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
@theme inline {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* shadcn component tokens — namespaced to avoid collision with OpenJarvis design tokens */
  --color-cn-sidebar-ring: var(--sidebar-ring);
  --color-cn-sidebar-border: var(--sidebar-border);
  --color-cn-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-cn-sidebar-accent: var(--sidebar-accent);
  --color-cn-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-cn-sidebar-primary: var(--sidebar-primary);
  --color-cn-sidebar-foreground: var(--sidebar-foreground);
  --color-cn-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-cn-input: var(--input);
  --color-cn-border: var(--border);
  --color-destructive: var(--destructive);
  --color-cn-accent-foreground: var(--accent-foreground);
  --color-cn-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  /* Keep project radius tokens — don't override with shadcn calc values */
}

/* Deep Research timeline — pending-step shimmer */
@keyframes openjarvis-research-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(420%); }
}
.research-shimmer {
  animation: openjarvis-research-shimmer 1.6s ease-in-out infinite;
}

/* Sync progress pulse — fires on each items_synced bump so the
   "12,450 / 99,840" label visibly breathes between polls. */
@keyframes openjarvis-sync-bump {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}
.sync-bump {
  animation: openjarvis-sync-bump 400ms ease-out;
}

/* Deep Research inline citation pills — small rounded chips that flow
   with the surrounding text and link out to the cited email. */
.research-citation {
  display: inline-block;
  vertical-align: baseline;
  margin: 0 1px;
  padding: 0 6px;
  min-width: 1.25em;
  text-align: center;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  /* Keep the pill from inheriting prose link styles (underline, bold). */
  border-bottom: none;
}
.research-citation:hover {
  color: var(--color-on-accent, #ffffff);
  background: var(--color-accent);
  text-decoration: none;
}