/* Base code styles */
code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* Code blocks use different fonts based on mode */
code,
pre,
.shiki,
.shiki code,
.mono-enabled code,
.mono-enabled pre,
.mono-enabled .shiki,
.mono-enabled .shiki code {
  font-family:
    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace !important;
  /* Font size is defined in .shiki */
}
.shiki {
  margin: 0 !important;
  padding: 0.75rem !important;
  width: 100% !important;
  overflow-x: auto !important;
  position: relative !important;
}

.shiki .line {
  display: inline-block !important;
  line-height: 1.5 !important;
  min-height: 1.5em !important;
  padding-right: 1rem;
  padding-left: 1rem !important;
  margin-left: -1rem !important;
  margin-right: -0.75rem !important;
  width: calc(
    100% + 1.75rem
  ) !important; /* Full width + left margin + right margin */
}

/* Ensure the code doesn't get additional styling */
.shiki code {
  background: transparent !important;
  padding: 0 !important;
  counter-reset: step;
  counter-increment: step 0;
}
.has-diff {
  /* Line numbers */
  & .show-line-numbers .shiki .line::before {
    content: counter(step);
    counter-increment: step;
    margin-right: 1rem;
    display: inline-block;
    text-align: right;
    color: rgba(115, 138, 148, 0.4);
  }
}
.show-line-numbers .shiki .line::before {
  content: counter(step);
  counter-increment: step;
  margin-right: var(--line-number-padding, 1rem);
  width: 1rem;
  display: inline-block;
  text-align: right;
  color: rgba(115, 138, 148, 0.4);
}

.show-line-numbers .has-diff.shiki .line::before {
  margin-right: 2rem;
}

.shiki .line.diff.add span:first-child::before,
.shiki .line.diff.remove span:first-child::before {
  margin-left: -1rem;
  display: inline-flex;
  width: 1rem;
}

.shiki .highlighted {
  background-color: rgba(124, 58, 237, 0.108) !important;
}
.shiki .line.diff.add {
  background-color: #409b4533 !important;
}

.shiki .line.diff.add span:first-child::before {
  color: var(--color-primary) !important;
  --shiki-dark: var(--color-primary) !important;
  content: "+";
}
.shiki .line.diff.remove {
  background-color: color-mix(
    in oklch,
    var(--color-destructive) 20%,
    transparent
  );
}

.shiki .line.diff.remove span:first-child::before {
  color: var(--color-destructive) !important;
  --shiki-dark: var(--color-destructive) !important;
  content: "-";
}

html.dark .shiki .highlighted {
  background-color: rgba(138, 92, 246, 0.209) !important; /* Dark mode purple */
}

html.dark .shiki {
  background-color: var(--shiki-dark-bg) !important;
}

html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* Machine mode: use page background instead of code block background */
.machine-mode-code .shiki {
  background-color: hsl(var(--background)) !important;
}

html.dark .machine-mode-code .shiki {
  background-color: hsl(var(--background)) !important;
}

/* App background code blocks (span details, etc.) */
.app-bg-code .shiki {
  background-color: hsl(var(--background)) !important;
}

html.dark .app-bg-code .shiki {
  background-color: hsl(var(--background)) !important;
}

/* Docs code blocks use page background */
.code-block-wrapper .shiki {
  background-color: var(--background) !important;
}

html.dark .code-block-wrapper .shiki {
  background-color: var(--background) !important;
}

/* Machine mode: word wrap for better readability */
.machine-mode-code .shiki,
.machine-mode-code .shiki code {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.machine-mode-code .shiki .line {
  white-space: pre-wrap !important;
}

/* Compact markdown styling for trace panel messages */
.trace-markdown h1,
.trace-markdown h2,
.trace-markdown h3,
.trace-markdown h4,
.trace-markdown h5,
.trace-markdown h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.trace-markdown h1 {
  font-size: 1rem;
}

.trace-markdown p {
  margin-bottom: 0.5rem;
}

.trace-markdown ul,
.trace-markdown ol {
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

.trace-markdown code:not(.shiki code) {
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  background-color: hsl(var(--muted));
}

/* Use page background for code blocks in trace messages (assistant) */
.trace-markdown .shiki {
  background-color: hsl(var(--background)) !important;
  font-size: 0.75rem !important;
}

html.dark .trace-markdown .shiki {
  background-color: hsl(var(--background)) !important;
}

/* User message code blocks: solid card background for proper syntax highlighting */
.is-user .code-block-wrapper {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

html.dark .is-user .code-block-wrapper {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

.is-user .code-block-wrapper .highlight-container,
.is-user .code-block-wrapper .highlight-container > div {
  background-color: #ffffff !important;
}

html.dark .is-user .code-block-wrapper .highlight-container,
html.dark .is-user .code-block-wrapper .highlight-container > div {
  background-color: #1f2937 !important;
}

.is-user .shiki,
.is-user .shiki code,
.is-user pre.shiki {
  background-color: #ffffff !important;
}

html.dark .is-user .shiki,
html.dark .is-user .shiki code,
html.dark .is-user pre.shiki {
  background-color: #1f2937 !important;
}

/* User message inline code: semi-transparent background */
.is-user .trace-markdown code:not(.shiki code) {
  background-color: rgba(255, 255, 255, 0.2);
}
