@import "tailwindcss";

/* ── Design tokens: "Luminous Depth" ────────────────────────── */

@theme {
  /* Surface palette — blue-tinted darks */
  --color-surface-0: #07080e;
  --color-surface-1: #0e1019;
  --color-surface-2: #161924;
  --color-surface-3: #1e2233;
  --color-surface-4: #272b3d;
  --color-border: #1a1e2e;
  --color-border-subtle: #121520;

  /* Brand accents — derived from logo */
  --color-accent: #245CF9;
  --color-accent-hover: #4b7bfa;
  --color-accent-muted: rgba(36, 92, 249, 0.12);
  --color-accent-sky: #248CFD;
  --color-accent-indigo: #0E13A4;
  --color-accent-purple: #8A29E6;
  --color-accent-royal: #5A20E0;
  --color-accent-violet: #3615CF;

  /* Text palette */
  --color-text-primary: #e8eaf0;
  --color-text-secondary: #8b90a5;
  --color-text-muted: #4e5368;
  --color-text-accent: #7ba1fc;

  /* Status palette */
  --color-status-success: #34d399;
  --color-status-warning: #fbbf24;
  --color-status-error: #f87171;
  --color-status-info: #248CFD;

  /* Glow / glass effects */
  --color-border-glow: rgba(36, 92, 249, 0.25);
  --color-glass: rgba(14, 16, 25, 0.7);
  --color-glass-hover: rgba(22, 25, 36, 0.8);
  --color-glass-border: rgba(26, 30, 46, 0.6);

  /* Pill text */
  --text-pill: 0.6875rem;
  --text-pill--line-height: 1.2;
}

:root {
  color-scheme: dark;
  font-family: "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --font-display: "Outfit Variable", "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Gradient presets */
  --gradient-brand: linear-gradient(135deg, #245CF9, #8A29E6);
  --gradient-brand-hover: linear-gradient(135deg, #4b7bfa, #a04ff0);
  --gradient-surface: linear-gradient(180deg, #0e1019, #07080e);
  --gradient-glow: radial-gradient(ellipse at center, rgba(36, 92, 249, 0.06), transparent 70%);
  --gradient-border: linear-gradient(135deg, #245CF9, #3615CF);
}

/* ── Light mode overrides ────────────────────────────────────── */

[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — cool-tinted whites */
  --color-surface-0: #f8f9fc;
  --color-surface-1: #f0f1f6;
  --color-surface-2: #e6e8f0;
  --color-surface-3: #d8dbe6;
  --color-surface-4: #c8cdd9;
  --color-border: #dfe1ea;
  --color-border-subtle: #eeeff4;

  /* Text — deep blue-blacks */
  --color-text-primary: #0f1729;
  --color-text-secondary: #5a6078;
  --color-text-muted: #9298ad;
  --color-text-accent: #245CF9;

  /* Glass — light translucency */
  --color-glass: rgba(240, 241, 246, 0.75);
  --color-glass-hover: rgba(230, 232, 240, 0.8);
  --color-glass-border: rgba(223, 225, 234, 0.6);
  --color-border-glow: rgba(36, 92, 249, 0.2);
  --color-accent-muted: rgba(36, 92, 249, 0.08);

  /* Gradients — lighter versions */
  --gradient-glow: radial-gradient(ellipse at center, rgba(36, 92, 249, 0.04), transparent 70%);
  --gradient-surface: linear-gradient(180deg, #f0f1f6, #f8f9fc);

  /* Remap Tailwind zinc scale for light mode */
  --color-zinc-50: #0f1729;
  --color-zinc-100: #1e2233;
  --color-zinc-200: #3a3f54;
  --color-zinc-300: #5a6078;
  --color-zinc-400: #7a7f94;
  --color-zinc-500: #8b90a5;
  --color-zinc-600: #9298ad;
  --color-zinc-700: #c8cdd9;
  --color-zinc-800: #dfe1ea;
  --color-zinc-900: #f0f1f6;
  --color-zinc-950: #f8f9fc;

  --color-black: #000000;
  --color-white: #ffffff;
}

/* ── Global base styles ──────────────────────────────────────── */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-surface-0);
  color: var(--color-text-primary);
}

#root {
  min-height: 100vh;
}

/* ── Scrollbar ───────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 5px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--color-surface-4);
}

/* ── Window drag regions ─────────────────────────────────────── */

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

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

/* ── Utility classes ─────────────────────────────────────────── */

.glass-surface {
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-glass-border);
}

.glow-border {
  border: 1px solid var(--color-border-glow);
  box-shadow: 0 0 12px rgba(36, 92, 249, 0.08), inset 0 0 12px rgba(36, 92, 249, 0.04);
}

.brand-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-gradient-bg {
  background: var(--gradient-brand);
}

.brand-gradient-bg:hover {
  background: var(--gradient-brand-hover);
}

.font-display {
  font-family: var(--font-display);
}

.font-mono {
  font-family: var(--font-mono);
}

/* ── Thinking dots animation ─────────────────────────────────── */

@keyframes thinking-dot {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.thinking-dot {
  animation: thinking-dot 1.6s ease-in-out infinite;
}

.thinking-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.thinking-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Flowing gradient wave for thinking state */
@keyframes thinking-wave {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.thinking-wave {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(36, 92, 249, 0.3) 25%,
    rgba(138, 41, 230, 0.3) 50%,
    rgba(36, 140, 253, 0.3) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: thinking-wave 3s ease-in-out infinite;
}

/* ── Auto-resize textarea ────────────────────────────────────── */

.auto-resize-textarea {
  field-sizing: content;
  min-height: 44px;
  max-height: 200px;
}

/* ── Markdown composer (Lexical) ─────────────────────────────── */

.markdown-composer-content {
  position: relative;
}

.markdown-composer-editable {
  min-height: 52px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 16px 4px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-primary);
  outline: none;
  cursor: text;
}

.markdown-composer-editable[contenteditable="false"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.markdown-composer-placeholder {
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  pointer-events: none;
  user-select: none;
}

/* Paragraphs */
.mc-p {
  margin: 0;
}

/* Headings */
.mc-h1, .mc-h2, .mc-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}
.mc-h1 { font-size: 1.1em; }
.mc-h2 { font-size: 1.05em; }
.mc-h3 { font-size: 1em; }

/* Inline formatting */
.mc-bold { font-weight: 600; }
.mc-italic { font-style: italic; }
.mc-strikethrough { text-decoration: line-through; }
.mc-underline { text-decoration: underline; }
.mc-inline-code {
  background: rgba(30, 34, 51, 0.7);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* Lists */
.mc-ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 2px 0;
}
.mc-ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin: 2px 0;
}
.mc-li {
  margin: 1px 0;
}

/* Blockquote */
.mc-blockquote {
  border-left: 3px solid var(--color-surface-4);
  padding-left: 0.75em;
  color: var(--color-text-secondary);
  margin: 2px 0;
}

/* Code block */
.mc-code-block {
  display: block;
  background: rgba(7, 8, 14, 0.8);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 26px 12px 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  white-space: pre-wrap;
  tab-size: 2;
  margin: 4px 0;
  overflow-x: auto;
}

/* Language selector overlays */
.mc-code-overlays-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.mc-code-lang-overlay {
  position: absolute;
  pointer-events: auto;
  user-select: none;
}

.mc-code-lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 10px;
  padding: 2px 18px 2px 6px;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b90a5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 10px;
}

.mc-code-lang-select:hover {
  border-color: var(--color-surface-4);
  color: var(--color-text-primary);
}

.mc-code-lang-select:focus {
  border-color: var(--color-border-glow);
}

/* Link */
.mc-link {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Syntax highlighting tokens ──────────────────────────────── */

.mc-tok-comment   { color: #5a6078; font-style: italic; }
.mc-tok-keyword   { color: #b07ef5; }
.mc-tok-string    { color: #6ee7b7; }
.mc-tok-number    { color: #f9c846; }
.mc-tok-boolean   { color: #f9c846; }
.mc-tok-constant  { color: #f9c846; }
.mc-tok-function  { color: #7ba1fc; }
.mc-tok-builtin   { color: #5ccbee; }
.mc-tok-operator  { color: #e8a0c8; }
.mc-tok-punctuation { color: #8b90a5; }
.mc-tok-property  { color: #65b8f7; }
.mc-tok-variable  { color: #f5a0a0; }
.mc-tok-tag       { color: #f07070; }
.mc-tok-attr      { color: #f0b070; }
.mc-tok-atrule    { color: #b07ef5; }
.mc-tok-selector  { color: #6ee7b7; }
.mc-tok-regex     { color: #f0d860; }
.mc-tok-symbol    { color: #f9c846; }
.mc-tok-namespace { color: #f07070; opacity: 0.8; }
.mc-tok-deleted   { color: #f5a0a0; text-decoration: line-through; }
.mc-tok-inserted  { color: #6ee7b7; }

/* ── React Flow overrides ────────────────────────────────────── */

.react-flow__node {
  font-family: inherit;
}

.react-flow__edge-path {
  stroke: var(--color-surface-4);
  stroke-width: 1.5;
}

.react-flow__edge.selected .react-flow__edge-path {
  stroke: #245CF9;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(36, 92, 249, 0.4));
}

.react-flow__edge.animated .react-flow__edge-path {
  stroke-dasharray: 5;
  animation: reactflow-dash 0.5s linear infinite;
}

@keyframes reactflow-dash {
  to {
    stroke-dashoffset: -10;
  }
}

.react-flow__controls {
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.react-flow__controls button {
  background: var(--color-surface-1);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  width: 28px;
  height: 28px;
}

.react-flow__controls button:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

.react-flow__minimap {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

/* ── Sidebar running-session pulse ───────────────────────────── */

@keyframes sidebar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.sidebar-pulse {
  animation: sidebar-pulse 2s ease-in-out infinite;
}

/* Flowing accent bar for running sessions */
@keyframes accent-flow {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 200%; }
}

.accent-flow {
  background: linear-gradient(
    180deg,
    #245CF9 0%,
    #8A29E6 50%,
    #245CF9 100%
  );
  background-size: 100% 200%;
  animation: accent-flow 3s ease-in-out infinite;
}

/* ── Ambient glow effect ─────────────────────────────────────── */

@keyframes ambient-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.ambient-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: ambient-pulse 6s ease-in-out infinite;
}

/* ── Command palette ──────────────────────────────────────────── */

@keyframes palette-enter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.palette-enter {
  animation: palette-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes palette-backdrop-enter {
  from { opacity: 0; }
}

.palette-backdrop-enter {
  animation: palette-backdrop-enter 0.15s ease-out;
}

/* ── Overlay transitions ─────────────────────────────────────── */

@keyframes overlay-backdrop-in {
  from { opacity: 0; }
}

@keyframes overlay-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
}

@keyframes overlay-slide-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

.overlay-backdrop-enter {
  animation: overlay-backdrop-in 0.18s ease-out;
}

.overlay-panel-enter {
  animation: overlay-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-slide-enter {
  animation: overlay-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Chat message appearance ─────────────────────────────────── */

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.message-enter {
  animation: message-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Message action toolbar ──────────────────────────────────── */

@keyframes msg-actions-in {
  from {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }
}

.msg-actions-enter {
  animation: msg-actions-in 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Sidebar session item ────────────────────────────────────── */

@keyframes session-item-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

.session-item-enter {
  animation: session-item-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Approval banner slide ───────────────────────────────────── */

@keyframes banner-slide-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.banner-slide-enter {
  animation: banner-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Update banner slide-up ──────────────────────────────────── */

@keyframes update-banner-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}

.update-banner-enter {
  animation: update-banner-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Turn activity panel ─────────────────────────────────────── */

@keyframes turn-activity-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.turn-activity-enter {
  animation: turn-activity-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes turn-activity-row-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

.turn-activity-row {
  animation: turn-activity-row-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes intent-divider-in {
  from {
    opacity: 0;
    transform: scaleX(0.7);
  }
}

.turn-activity-row[role="separator"] {
  animation: intent-divider-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Timeline spine connecting activity items */
.activity-timeline-spine > .turn-activity-row:not([role="separator"]) {
  position: relative;
}

.activity-timeline-spine > .turn-activity-row:not([role="separator"]):not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px; /* center of the 16px (w-4) icon column */
  top: 22px; /* below the icon center */
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  opacity: 0.25;
  pointer-events: none;
}

/* ── Batch selection animations ──────────────────────────────── */

@keyframes selection-checkbox-in {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes selection-checkbox-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}

.selection-checkbox-enter {
  animation: selection-checkbox-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.selection-checkbox-exit {
  animation: selection-checkbox-out 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes checkbox-check {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.checkbox-check {
  animation: checkbox-check 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes batch-action-bar-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.batch-action-bar-enter {
  animation: batch-action-bar-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes undo-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes undo-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

.undo-toast-enter {
  animation: undo-toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.undo-toast-exit {
  animation: undo-toast-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ── Respect reduced motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .palette-enter,
  .palette-backdrop-enter,
  .overlay-backdrop-enter,
  .overlay-panel-enter,
  .overlay-slide-enter,
  .message-enter,
  .msg-actions-enter,
  .session-item-enter,
  .banner-slide-enter,
  .update-banner-enter,
  .turn-activity-enter,
  .turn-activity-row,
  .turn-activity-row[role="separator"],
  .qp-panel-enter,
  .qp-response-enter,
  .qp-actions-enter,
  .qp-dropdown-enter {
    animation: none;
  }

  .selection-checkbox-enter,
  .selection-checkbox-exit,
  .checkbox-check,
  .batch-action-bar-enter,
  .undo-toast-enter,
  .undo-toast-exit {
    animation: none;
  }

  .qp-border-streaming {
    animation: none;
    border-color: var(--color-accent);
  }
}

/* ── Quick Prompt — Glass Command Bar ────────────────────────── */

/* Override body/root backgrounds when inside the quickprompt window so the
   transparent BrowserWindow doesn't show a colored rectangle behind the
   rounded panel. The data attribute is set on the <body> in quickprompt.html. */
body[data-quickprompt],
body[data-quickprompt] #root {
  background: transparent !important;
  min-height: 0 !important;
}

html:has(body[data-quickprompt]) {
  background: transparent !important;
}

.qp-container {
  background: transparent;
}

.qp-panel {
  background: var(--color-surface-1);
  /* No box-shadow — on Windows transparent windows, shadows paint visibly
     on the transparent canvas and create a visible dark rectangle. */
  transition: border-color 0.3s ease;
}

/* Border states */
.qp-border-idle {
  border: 1px solid var(--color-glass-border);
}

.qp-border-complete {
  border: 1px solid var(--color-border-glow);
}

/* Animated breathing border during streaming */
@keyframes qp-border-breathe {
  0%, 100% {
    border-color: rgba(36, 92, 249, 0.35);
  }
  50% {
    border-color: rgba(138, 41, 230, 0.4);
  }
}

.qp-border-streaming {
  border: 1px solid rgba(36, 92, 249, 0.35);
  animation: qp-border-breathe 2.5s ease-in-out infinite;
}

/* Panel entrance animation */
@keyframes qp-panel-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
}

.qp-panel-enter {
  animation: qp-panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Response area entrance */
@keyframes qp-response-in {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: min(55vh, 520px);
  }
}

.qp-response-enter {
  animation: qp-response-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Action bar entrance */
@keyframes qp-actions-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.qp-actions-enter {
  animation: qp-actions-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

/* Dropdown entrance — opens downward */
@keyframes qp-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.qp-dropdown-enter {
  animation: qp-dropdown-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Markdown prose styles ───────────────────────────────────── */

.markdown-content {
  line-height: 1.7;
  word-break: break-word;
}

.markdown-content > *:first-child {
  margin-top: 0;
}

.markdown-content > *:last-child {
  margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.35;
}

.markdown-content h1 { font-size: 1.125rem; }
.markdown-content h2 { font-size: 1rem; }
.markdown-content h3 { font-size: 0.9375rem; }

.markdown-content p {
  margin-top: 0.625em;
  margin-bottom: 0.625em;
}

.markdown-content ul,
.markdown-content ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
}

.markdown-content ul { list-style-type: disc; }
.markdown-content ol { list-style-type: decimal; }

.markdown-content li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.markdown-content li > p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.markdown-content blockquote {
  border-left: 3px solid var(--color-surface-4);
  padding-left: 1em;
  color: var(--color-text-secondary);
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  font-size: 0.875rem;
}

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

.markdown-content th {
  background: var(--color-surface-1);
  font-weight: 600;
  color: var(--color-text-primary);
}

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

.markdown-content strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.markdown-content em {
  font-style: italic;
}

.markdown-content img {
  max-width: 100%;
  border-radius: 0.5rem;
}

.markdown-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.25rem;
  padding: 0.15em 0.35em;
  color: var(--color-text-primary);
}

.markdown-content pre {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.875em 1em;
  overflow-x: auto;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.markdown-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
}

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

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