@import "tailwindcss";
@import "tw-animate-css";

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

/* Custom xs breakpoint for extra small screens */
@custom-media --xs (min-width: 480px);
@media (min-width: 480px) {
  .xs\:inline { display: inline; }
  .xs\:flex { display: flex; }
  .xs\:hidden { display: none; }
  .xs\:block { display: block; }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-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-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --animate-shine: shine var(--duration) infinite linear;
  @keyframes shine {
  0% {
    background-position: 0% 0%;
    }
  50% {
    background-position: 100% 100%;
    }
  to {
    background-position: 0% 0%;
    }
  }
}

:root {
  --radius: 0.625rem;
  /* Shadcn Default Neutral Light Theme with Brainfish Primary */
  --background: oklch(1 0 0); /* Pure white */
  --foreground: oklch(0.145 0 0); /* Near black */
  --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.65 0.18 140); /* Brainfish vibrant green - single primary */
  --primary-foreground: oklch(0.985 0 0); /* White text on primary */
  --secondary: oklch(0.965 0 0); /* Neutral gray */
  --secondary-foreground: oklch(0.145 0 0);
  --muted: oklch(0.965 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.965 0 0);
  --accent-foreground: oklch(0.145 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.65 0.18 140); /* Focus ring matches primary */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.65 0.18 140); /* Same primary green */
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.965 0 0);
  --sidebar-accent-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.65 0.18 140);

  /* Custom header background color */
  --header-bg-custom: #a3e635;

  /* Inkeep-style colors for chat button */
  --inkeep-primary-text-bold: #171717;
  --gray-dark-600: #171717;
}

.dark {
  /* Shadcn Default Neutral Dark Theme with Brainfish Primary */
  --background: oklch(0.145 0 0); /* Near black */
  --foreground: oklch(0.985 0 0); /* Near white */
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.65 0.18 140); /* Same Brainfish green - single primary */
  --primary-foreground: oklch(0.145 0 0); /* Dark text on primary for contrast */
  --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(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.65 0.18 140); /* Focus ring matches primary */
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.145 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.65 0.18 140); /* Same primary green */
  --sidebar-primary-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.65 0.18 140);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  
  /* Prevent iOS zoom on input focus - ensure minimum 16px font size */
  @media screen and (max-width: 768px) {
    input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
  
  /* Custom scrollbar - light and thin */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
  
  .dark * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }
  
  /* Webkit scrollbar (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }
  
  .dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
  }
  
  .dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
  }
}

@layer utilities {
  .bg-inkeep-primary-text-bold {
    background-color: var(--inkeep-primary-text-bold);
  }
  .dark\:bg-gray-dark-600 {
    @apply dark:bg-[var(--gray-dark-600)];
  }
}

/* Custom spinner animations */
@keyframes spinner-wave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
  }
}

@keyframes spinner-bounce-smooth {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes spinner-orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

.animate-wave {
  animation: spinner-wave 1.2s ease-in-out infinite;
}

.animate-bounce-smooth {
  animation: spinner-bounce-smooth 1.4s ease-in-out infinite;
}

.animate-orbit {
  animation: spinner-orbit 1s linear infinite;
}

.animate-orbit-reverse {
  animation: spinner-orbit 1.5s linear infinite reverse;
}

.animate-glow {
  animation: spinner-glow 2s ease-in-out infinite;
}

/* ============================================
   Mermaid Diagram Dark Mode Overrides
   ============================================ */

/* Force all node shapes to have dark blue background */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  fill: #3b82f6 !important;
  stroke: #60a5fa !important;
}

/* Force all node text to be white */
.mermaid .node .label,
.mermaid .nodeLabel,
.mermaid .node text,
.mermaid .label text,
.mermaid text.nodeLabel,
.mermaid .flowchart-label text {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Cluster/subgraph styling */
.mermaid .cluster rect {
  fill: #1f2937 !important;
  stroke: #4b5563 !important;
}

.mermaid .cluster text,
.mermaid .cluster .nodeLabel {
  fill: #e5e7eb !important;
}

/* Edge/arrow styling */
.mermaid .edgePath path,
.mermaid .flowchart-link {
  stroke: #94a3b8 !important;
}

.mermaid marker path {
  fill: #94a3b8 !important;
}

/* Edge labels */
.mermaid .edgeLabel text,
.mermaid .edgeLabel {
  fill: #e5e7eb !important;
  color: #e5e7eb !important;
}

.mermaid .edgeLabel rect {
  fill: #1e1e1e !important;
  opacity: 0.8 !important;
}

/* Sequence diagram specific */
.mermaid .actor {
  fill: #3b82f6 !important;
  stroke: #60a5fa !important;
}

.mermaid .actor text {
  fill: #ffffff !important;
}

.mermaid .messageText {
  fill: #e5e7eb !important;
}

.mermaid line.messageLine0,
.mermaid line.messageLine1 {
  stroke: #94a3b8 !important;
}

/* Notes in sequence diagrams */
.mermaid .note {
  fill: #374151 !important;
  stroke: #4b5563 !important;
}

.mermaid .noteText {
  fill: #e5e7eb !important;
}

/* Loop boxes */
.mermaid .loopText text {
  fill: #e5e7eb !important;
}

.mermaid .loopLine {
  stroke: #4b5563 !important;
}

/* Activation boxes */
.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
  fill: #3b82f6 !important;
  stroke: #60a5fa !important;
}

/* ============================================
   Prose Typography - Headers
   ============================================ */

/* Header configuration variables */
:root {
  --docs-h1-size: 2.25rem;
  --docs-h1-weight: 700;
  --docs-h1-line-height: 1.2;
  --docs-h1-margin-top: 0;
  --docs-h1-margin-bottom: 1.5rem;
  
  --docs-h2-size: 1.875rem;
  --docs-h2-weight: 600;
  --docs-h2-line-height: 1.3;
  --docs-h2-margin-top: 2.5rem;
  --docs-h2-margin-bottom: 1rem;
  --docs-h2-border: 1px solid var(--border);
  
  --docs-h3-size: 1.5rem;
  --docs-h3-weight: 600;
  --docs-h3-line-height: 1.4;
  --docs-h3-margin-top: 2rem;
  --docs-h3-margin-bottom: 0.75rem;
  
  --docs-h4-size: 1.25rem;
  --docs-h4-weight: 600;
  --docs-h4-line-height: 1.4;
  --docs-h4-margin-top: 1.5rem;
  --docs-h4-margin-bottom: 0.5rem;
  
  --docs-h5-size: 1.125rem;
  --docs-h5-weight: 600;
  --docs-h5-line-height: 1.5;
  --docs-h5-margin-top: 1.25rem;
  --docs-h5-margin-bottom: 0.5rem;
  
  --docs-h6-size: 1rem;
  --docs-h6-weight: 600;
  --docs-h6-line-height: 1.5;
  --docs-h6-margin-top: 1rem;
  --docs-h6-margin-bottom: 0.5rem;
}

.docs-prose h1,
.docs-prose.prose h1,
.docs-prose.prose-sm h1 {
  font-size: var(--docs-h1-size) !important;
  font-weight: var(--docs-h1-weight) !important;
  line-height: var(--docs-h1-line-height) !important;
  margin-top: var(--docs-h1-margin-top) !important;
  margin-bottom: var(--docs-h1-margin-bottom) !important;
  color: var(--foreground) !important;
  letter-spacing: -0.025em;
}

.docs-prose h2,
.docs-prose.prose h2,
.docs-prose.prose-sm h2 {
  font-size: var(--docs-h2-size) !important;
  font-weight: var(--docs-h2-weight) !important;
  line-height: var(--docs-h2-line-height) !important;
  margin-top: var(--docs-h2-margin-top) !important;
  margin-bottom: var(--docs-h2-margin-bottom) !important;
  padding-bottom: 0.5rem;
  border-bottom: var(--docs-h2-border);
  color: var(--foreground) !important;
  letter-spacing: -0.02em;
}

.docs-prose h3,
.docs-prose.prose h3,
.docs-prose.prose-sm h3 {
  font-size: var(--docs-h3-size) !important;
  font-weight: var(--docs-h3-weight) !important;
  line-height: var(--docs-h3-line-height) !important;
  margin-top: var(--docs-h3-margin-top) !important;
  margin-bottom: var(--docs-h3-margin-bottom) !important;
  color: var(--foreground) !important;
  letter-spacing: -0.015em;
}

/* Reset margins for card titles */
.docs-card h3,
.docs-card .docs-card-title,
.docs-prose .docs-card h3,
.docs-prose .docs-card .docs-card-title {
  font-size: 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

.docs-prose h4,
.docs-prose.prose h4,
.docs-prose.prose-sm h4 {
  font-size: var(--docs-h4-size) !important;
  font-weight: var(--docs-h4-weight) !important;
  line-height: var(--docs-h4-line-height) !important;
  margin-top: var(--docs-h4-margin-top) !important;
  margin-bottom: var(--docs-h4-margin-bottom) !important;
  color: var(--foreground) !important;
}

.docs-prose h5,
.docs-prose.prose h5,
.docs-prose.prose-sm h5 {
  font-size: var(--docs-h5-size) !important;
  font-weight: var(--docs-h5-weight) !important;
  line-height: var(--docs-h5-line-height) !important;
  margin-top: var(--docs-h5-margin-top) !important;
  margin-bottom: var(--docs-h5-margin-bottom) !important;
  color: var(--foreground) !important;
}

.docs-prose h6,
.docs-prose.prose h6,
.docs-prose.prose-sm h6 {
  font-size: var(--docs-h6-size) !important;
  font-weight: var(--docs-h6-weight) !important;
  line-height: var(--docs-h6-line-height) !important;
  margin-top: var(--docs-h6-margin-top) !important;
  margin-bottom: var(--docs-h6-margin-bottom) !important;
  color: var(--muted-foreground) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* First heading in content should have no top margin */
.docs-prose > h1:first-child,
.docs-prose > h2:first-child,
.docs-prose > h3:first-child,
.docs-prose > h4:first-child,
.docs-prose > h5:first-child,
.docs-prose > h6:first-child {
  margin-top: 0;
}

/* Anchor links on headers */
.docs-prose h1 a,
.docs-prose h2 a,
.docs-prose h3 a,
.docs-prose h4 a,
.docs-prose h5 a,
.docs-prose h6 a {
  color: inherit;
  text-decoration: none;
}

.docs-prose h1 a:hover,
.docs-prose h2 a:hover,
.docs-prose h3 a:hover,
.docs-prose h4 a:hover,
.docs-prose h5 a:hover,
.docs-prose h6 a:hover {
  text-decoration: underline;
}

/* ============================================
   Prose Typography - Lists
   ============================================ */

/* List configuration variables */
:root {
  --docs-list-margin: 1.25rem 0;
  --docs-list-padding-left: 1.5rem;
  --docs-list-item-margin: 0.5rem 0;
  --docs-list-item-padding-left: 0.375rem;
  --docs-list-nested-margin-top: 0.5rem;
  --docs-list-bullet-color: var(--muted-foreground);
  --docs-list-number-color: var(--muted-foreground);
}

/* Unordered lists */
.docs-prose ul,
.docs-prose.prose ul,
.docs-prose.prose-sm ul {
  list-style-type: disc !important;
  margin: var(--docs-list-margin) !important;
  padding-left: var(--docs-list-padding-left) !important;
}

.docs-prose ul li,
.docs-prose.prose ul li,
.docs-prose.prose-sm ul li {
  margin: var(--docs-list-item-margin) !important;
  padding-left: var(--docs-list-item-padding-left) !important;
  color: var(--foreground) !important;
}

.docs-prose ul li::marker,
.docs-prose.prose ul li::marker,
.docs-prose.prose-sm ul li::marker {
  color: var(--docs-list-bullet-color) !important;
}

/* Nested unordered lists */
.docs-prose ul ul,
.docs-prose.prose ul ul,
.docs-prose.prose-sm ul ul {
  list-style-type: circle !important;
  margin-top: var(--docs-list-nested-margin-top) !important;
  margin-bottom: 0 !important;
}

.docs-prose ul ul ul,
.docs-prose.prose ul ul ul,
.docs-prose.prose-sm ul ul ul {
  list-style-type: square !important;
}

/* Ordered lists */
.docs-prose ol,
.docs-prose.prose ol,
.docs-prose.prose-sm ol {
  list-style-type: decimal !important;
  margin: var(--docs-list-margin) !important;
  padding-left: var(--docs-list-padding-left) !important;
}

.docs-prose ol li,
.docs-prose.prose ol li,
.docs-prose.prose-sm ol li {
  margin: var(--docs-list-item-margin) !important;
  padding-left: var(--docs-list-item-padding-left) !important;
  color: var(--foreground) !important;
}

.docs-prose ol li::marker,
.docs-prose.prose ol li::marker,
.docs-prose.prose-sm ol li::marker {
  color: var(--docs-list-number-color) !important;
  font-weight: 500 !important;
}

/* Nested ordered lists */
.docs-prose ol ol,
.docs-prose.prose ol ol,
.docs-prose.prose-sm ol ol {
  list-style-type: lower-alpha !important;
  margin-top: var(--docs-list-nested-margin-top) !important;
  margin-bottom: 0 !important;
}

.docs-prose ol ol ol,
.docs-prose.prose ol ol ol,
.docs-prose.prose-sm ol ol ol {
  list-style-type: lower-roman !important;
}

/* Mixed nested lists */
.docs-prose ul ol,
.docs-prose ol ul {
  margin-top: var(--docs-list-nested-margin-top);
  margin-bottom: 0;
}

/* Task/Checkbox lists */
.docs-prose ul.contains-task-list {
  list-style-type: none;
  padding-left: 0;
}

.docs-prose ul.contains-task-list li {
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.docs-prose ul.contains-task-list input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

/* Definition lists */
.docs-prose dl {
  margin: var(--docs-list-margin);
}

.docs-prose dt {
  font-weight: 600;
  color: var(--foreground);
  margin-top: 1rem;
}

.docs-prose dt:first-child {
  margin-top: 0;
}

.docs-prose dd {
  margin-left: var(--docs-list-padding-left);
  margin-top: 0.25rem;
  color: var(--muted-foreground);
}

/* ============================================
   Prose Typography - Paragraphs & Links
   ============================================ */

:root {
  --docs-paragraph-margin: 1rem 0;
  --docs-paragraph-line-height: 1.75;
  --docs-link-color: var(--primary);
  --docs-link-hover-color: var(--primary);
}

.docs-prose p,
.docs-prose.prose p,
.docs-prose.prose-sm p {
  margin: var(--docs-paragraph-margin) !important;
  line-height: var(--docs-paragraph-line-height) !important;
  color: var(--foreground) !important;
}

.docs-prose p:first-child,
.docs-prose.prose p:first-child,
.docs-prose.prose-sm p:first-child {
  margin-top: 0 !important;
}

.docs-prose p:last-child,
.docs-prose.prose p:last-child,
.docs-prose.prose-sm p:last-child {
  margin-bottom: 0 !important;
}

.docs-prose a,
.docs-prose.prose a,
.docs-prose.prose-sm a {
  color: var(--docs-link-color) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s ease;
}

.docs-prose a:hover,
.docs-prose.prose a:hover,
.docs-prose.prose-sm a:hover {
  color: var(--docs-link-hover-color) !important;
  text-decoration-thickness: 2px !important;
}

/* Remove underline from card links */
.docs-card-link {
  text-decoration: none !important;
  display: block;
}

.docs-card-link:hover {
  text-decoration: none !important;
}

/* Ensure card links in prose don't get link styling */
.docs-prose .docs-card-link,
.docs-prose.prose .docs-card-link,
.docs-prose.prose-sm .docs-card-link {
  text-decoration: none !important;
  color: inherit !important;
}

.docs-prose .docs-card-link:hover,
.docs-prose.prose .docs-card-link:hover,
.docs-prose.prose-sm .docs-card-link:hover {
  text-decoration: none !important;
  color: inherit !important;
}

/* Strong and emphasis */
.docs-prose strong,
.docs-prose.prose strong,
.docs-prose.prose-sm strong {
  font-weight: 600 !important;
  color: var(--foreground) !important;
}

.docs-prose em,
.docs-prose.prose em,
.docs-prose.prose-sm em {
  font-style: italic !important;
}

/* Blockquotes */
.docs-prose blockquote,
.docs-prose.prose blockquote,
.docs-prose.prose-sm blockquote {
  margin: 1.5rem 0 !important;
  padding: 0.5rem 0 0.5rem 1rem !important;
  border-left: 4px solid var(--primary) !important;
  background-color: var(--muted) !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
}

.docs-prose blockquote p,
.docs-prose.prose blockquote p,
.docs-prose.prose-sm blockquote p {
  color: var(--muted-foreground) !important;
  font-style: italic !important;
}

/* Horizontal rule */
.docs-prose hr,
.docs-prose.prose hr,
.docs-prose.prose-sm hr {
  margin: 2rem 0 !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
}

/* ============================================
   Prose Table Styles
   ============================================ */

/* Table configuration variables */
:root {
  --docs-table-border: 1px solid var(--border);
  --docs-table-border-radius: 0.5rem;
  --docs-table-header-bg: var(--muted);
  --docs-table-row-hover: var(--muted);
  --docs-table-cell-padding: 0.75rem 1rem;
}

.docs-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  border: var(--docs-table-border);
  border-radius: var(--docs-table-border-radius);
  overflow: hidden;
}

.docs-prose thead {
  background-color: var(--docs-table-header-bg);
}

.docs-prose th {
  padding: var(--docs-table-cell-padding);
  text-align: left;
  font-weight: 600;
  color: var(--foreground);
  border-bottom: var(--docs-table-border);
  border-right: var(--docs-table-border);
}

.docs-prose th:last-child {
  border-right: none;
}

.docs-prose td {
  padding: var(--docs-table-cell-padding);
  border-bottom: var(--docs-table-border);
  border-right: var(--docs-table-border);
  color: var(--muted-foreground);
}

.docs-prose td:last-child {
  border-right: none;
}

.docs-prose tbody tr:last-child td {
  border-bottom: none;
}

.docs-prose tbody tr:hover {
  background-color: var(--docs-table-row-hover);
}

/* Responsive table wrapper */
.docs-prose .table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
}

/* Borderless table variant - add class "borderless" to table */
.docs-prose table.borderless,
.docs-prose table[data-borderless] {
  border: none;
  border-radius: 0;
}

.docs-prose table.borderless th,
.docs-prose table.borderless td,
.docs-prose table[data-borderless] th,
.docs-prose table[data-borderless] td {
  border-right: none;
}

/* ============================================
   Code Block Syntax Highlighting (rehype-pretty-code)
   ============================================ */

/* Code block container */
[data-rehype-pretty-code-figure] {
  margin: 1rem 0;
}

/* Pre element styles */
[data-rehype-pretty-code-figure] pre {
  padding: 1rem 0;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.7;
  border: 1px solid var(--border);
}

/* Code element inside pre */
[data-rehype-pretty-code-figure] pre > code {
  display: grid;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
}

/* Inline code (not in pre) */
:not(pre) > code {
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  background-color: var(--muted);
  font-size: 0.875em;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
}

/* Inline code figures from rehype-pretty-code - keep them inline */
[data-rehype-pretty-code-figure]:not(:has(pre)) {
  display: inline !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

[data-rehype-pretty-code-figure]:not(:has(pre)) code {
  display: inline !important;
  padding: 0.2em 0.4em !important;
  border-radius: 0.25rem !important;
  background-color: var(--muted) !important;
  font-size: 0.875em !important;
  font-family: var(--font-geist-mono), ui-monospace, monospace !important;
  color: inherit !important;
}

/* Remove line highlighting styles from inline code */
[data-rehype-pretty-code-figure]:not(:has(pre)) [data-line] {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-rehype-pretty-code-figure]:not(:has(pre)) [data-highlighted-line] {
  background: transparent !important;
  box-shadow: none !important;
}

/* Code block with title - wrapper styling like CodeGroup */
[data-rehype-pretty-code-figure]:has([data-rehype-pretty-code-title]) {
  border-radius: 0.75rem;
  border: 1px solid rgb(39, 39, 42);
  overflow: hidden;
  background-color: #1a1a1a;
  margin: 1rem 0;
  position: relative;
}

[data-rehype-pretty-code-figure]:has([data-rehype-pretty-code-title]) pre {
  border: none !important;
  border-radius: 0 !important;
  margin: 0;
  background-color: #1a1a1a !important;
}

/* Title text as tab - matches CodeGroup tab */
[data-rehype-pretty-code-title] {
  display: inline-block;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  padding: 0.625rem 1rem;
  margin: 0;
  position: relative;
  white-space: nowrap;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

/* Green underline - matches CodeGroup tab indicator */
[data-rehype-pretty-code-title]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  background-color: rgb(16, 185, 129);
  border-radius: 9999px;
}

/* Code copy button header wrapper */
.code-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #262626;
  padding-right: 0.5rem;
}

/* Copy button styling - matches CodeGroup */
.code-copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.25rem;
  color: rgb(113, 113, 122);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
  flex-shrink: 0;
}

.code-copy-button:hover {
  color: rgb(212, 212, 216);
  background-color: rgba(113, 113, 122, 0.2);
}

.code-copy-button:focus {
  outline: none;
}

.code-copy-button:focus-visible {
  ring: 2px;
  ring-color: rgba(var(--primary), 0.5);
}

/* Floating copy button for code blocks without title */
.code-copy-button-floating {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s;
}

[data-rehype-pretty-code-figure]:hover .code-copy-button-floating,
pre:hover .code-copy-button-floating {
  opacity: 1;
}

/* Pre after title - connects to header */
[data-rehype-pretty-code-title] + pre {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  margin-top: 0;
}

/* Line numbers */
code[data-line-numbers] {
  counter-reset: line;
}

code[data-line-numbers] > [data-line]::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 1.5rem;
  margin-right: 1.5rem;
  text-align: right;
  color: var(--muted-foreground);
  opacity: 0.5;
}

/* Line styling */
[data-line] {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Line highlighting */
[data-highlighted-line] {
  background-color: rgba(16, 185, 129, 0.1);
  box-shadow: inset 2px 0 0 rgb(16, 185, 129);
}

/* Word highlighting */
[data-highlighted-chars] {
  background-color: rgba(255, 255, 0, 0.2);
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
}

/* Diff highlighting */
[data-diff-add] {
  background-color: rgba(34, 197, 94, 0.15);
}

[data-diff-remove] {
  background-color: rgba(239, 68, 68, 0.15);
}

/* Code block background - dark theme to match CodeGroup */
[data-rehype-pretty-code-figure] pre {
  background-color: #1a1a1a;
  border-color: #3f3f46;
}

/* Code blocks with titles get different border radius */
[data-rehype-pretty-code-title] + pre {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* Standalone code blocks (no title) */
[data-rehype-pretty-code-figure]:not(:has([data-rehype-pretty-code-title])) pre {
  border-radius: 0.75rem;
  background-color: #1a1a1a !important;
  border: 1px solid rgb(39, 39, 42) !important;
}

/* Scroll margin for agent navigation */
[id] {
  scroll-margin-top: 80px;
}

/* ============================================
   Custom Mode Page Styles (Landing Pages)
   ============================================ */

/* Custom mode pages should fill the entire content area */
.docs-page-custom {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure custom content children stretch to fill width */
.docs-custom-content {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* All direct children of custom content should be full width */
.docs-custom-content > * {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Landing page components should not have prose constraints */
.docs-custom-content .landing-hero,
.docs-custom-content .landing-section {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* When viewing a custom mode page, the content area should have no background */
.docs-content-area:has(.docs-page-custom) {
  background: transparent !important;
  padding: 0 !important;
}

/* Ensure the main header doesn't shrink */
.docs-main-header {
  flex-shrink: 0 !important;
  width: 100% !important;
}

/* Ensure docs-main container maintains width and doesn't collapse */
.docs-main {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Ensure docs-layout children don't cause layout shifts */
.docs-layout {
  display: flex !important;
}

.docs-layout > .docs-sidebar {
  flex-shrink: 0 !important;
}

/* Prevent content area from affecting parent layout */
.docs-content-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Remove any default margins from sections in custom pages */
.docs-custom-content section {
  margin: 0;
}

/* Ensure Hero sections fill entire width */
.landing-hero {
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Section components fill entire width */
.landing-section {
  width: 100%;
  margin: 0;
}

/* ============================================
   Agent Popup Button Animations
   ============================================ */

/* Scale in animation for popup button appearing */
@keyframes popup-scale-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Scale out animation for popup button disappearing */
@keyframes popup-scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}

.agent-popup-enter {
  animation: popup-scale-in 0.2s ease-out forwards;
}

.agent-popup-exit {
  animation: popup-scale-out 0.15s ease-in forwards;
}

/* Suggestions container slide up animation */
@keyframes suggestions-slide-up {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.agent-suggestions-enter {
  animation: suggestions-slide-up 0.3s ease-out forwards;
}

/* Individual suggestion item staggered animation */
@keyframes suggestion-fade-in {
  from {
    transform: translateX(10px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.agent-suggestion-item {
  animation: suggestion-fade-in 0.2s ease-out forwards;
  animation-fill-mode: both;
}