/* ============================================================================
   AXIOM AI 1.0 — "The Singularity" Results Display
   3-Tier Truth · Proof · Source
   ============================================================================ */

/* ============================================================================
   PIPELINE PROCESSING ANIMATION
   Step-by-step animated pipeline while waiting for AI response
   ============================================================================ */
#processing-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-lg);
  transition: opacity 0.35s ease;
}

#processing-container.active {
  display: flex;
}

#processing-container.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.35s ease;
}

/* --- Single pipeline step ------------------------------------------------ */
.pipeline-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 10px 16px;
  background: rgba(var(--accent-primary-rgb), 0.04);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateX(-20px);
  animation: pipeline-slide-in 0.35s var(--ease-decel) forwards;
}

@keyframes pipeline-slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Step icon ----------------------------------------------------------- */
.pipeline-step__icon {
  font-size: 13px;
  color: var(--verification-green);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Step body (label + detail) ------------------------------------------ */
.pipeline-step__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pipeline-step__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pipeline-step__detail {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Step status (checkmark) --------------------------------------------- */
.pipeline-step__status {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* Checkmark */
.pipeline-check {
  font-size: 13px;
  font-weight: 700;
  color: var(--verification-green);
  opacity: 0;
  transform: scale(0.5);
  animation: pipeline-check-in 0.3s var(--ease-spring) forwards;
}

@keyframes pipeline-check-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Loading state ------------------------------------------------------- */
.pipeline-loading {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-main);
  letter-spacing: 0.03em;
}

/* Spinner */
.pipeline-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--accent-primary-rgb), 0.2);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: pipeline-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes pipeline-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   RESULTS CONTAINER
   ============================================================================ */
.results-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg);
  scroll-padding-bottom: var(--chat-input-safe-area, 144px);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-glacial);
  pointer-events: none;
  background-color: transparent !important;
  position: relative;
  z-index: 10;
}

.results-container.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: fade-in-up 0.6s var(--ease-decel) forwards;
}

/* ============================================================================
   RESULT TIER — BASE STYLES
   Glass panel with coloured left border
   ============================================================================ */
.result-tier {
  position: relative;
  margin-bottom: var(--space-md);
  padding: var(--space-lg);
  background: var(--result-bg, rgba(51, 119, 255, 0.05));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(var(--accent-primary-rgb), 0.08);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: all var(--transition-base);

  /* Staggered tier reveal */
  opacity: 0;
  animation: tier-reveal 0.6s var(--ease-decel) forwards;
}

body.theme-light .result-tier,
body.theme-light .proof-chain {
  /* Vàng cờ Việt Nam — light mode friendly */
  background: #FFF7D6;
  border-color: rgba(191, 154, 0, 0.2);
  box-shadow: 0 8px 32px rgba(191, 154, 0, 0.08);
}

/* Force all text, lists, and MathJax inside LLM response to be dark blue in light mode */
body.theme-light .neo-result-block,
body.theme-light .neo-result-block p,
body.theme-light .neo-result-block li,
body.theme-light .neo-result-block span:not(.token):not(.hljs-keyword):not(.hljs-string):not(.hljs-comment):not(.hljs-function):not(.hljs-title),
body.theme-light .neo-result-block div,
body.theme-light .neo-result-block h1,
body.theme-light .neo-result-block h2,
body.theme-light .neo-result-block h3,
body.theme-light .neo-result-block h4,
body.theme-light .neo-result-block h5,
body.theme-light .neo-result-block h6,
body.theme-light .neo-result-block strong,
body.theme-light .neo-result-block em,
body.theme-light .neo-result-block .md-heading,
body.theme-light .neo-result-block .md-h1,
body.theme-light .neo-result-block .md-h2,
body.theme-light .neo-result-block .md-h3,
body.theme-light .neo-result-block .md-h4,
body.theme-light .neo-result-block .md-h5,
body.theme-light .neo-result-block .md-h6,
body.theme-light .neo-result-block .md-list li,
body.theme-light .neo-result-block .md-ordered-list,
body.theme-light .neo-result-block .md-ordered-list li,
body.theme-light .neo-result-block .md-answer-line {
  color: #000000 !important;
  font-weight: 500 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}

/* Remove any background highlights from text markers */
body.theme-light .proof-step__label,
body.theme-light .tier-truth .truth-answer {
  background-color: transparent !important;
}

/* Ensure MathJax formulas inherit the dark black color */
body.theme-light .neo-result-block mjx-container,
body.theme-light .neo-result-block mjx-container[jax="SVG"],
body.theme-light .neo-result-block mjx-container:not([display="true"]) {
  color: #000000 !important;
  font-weight: 500 !important;
}

/* User query text */
body.theme-light .user-query-block .marker-highlight {
  color: #000000 !important;
  font-weight: 500 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
  background-color: transparent !important;
}

.result-tier:nth-child(1) { animation-delay: 100ms; }
.result-tier:nth-child(2) { animation-delay: 250ms; }
.result-tier:nth-child(3) { animation-delay: 400ms; }

.result-tier:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.15);
  box-shadow:
    var(--glass-shadow),
    0 0 25px rgba(var(--accent-primary-rgb), 0.04);
}

.result-tier:last-child {
  margin-bottom: 0;
}

/* --- Subtle background gradient per tier --------------------------------- */
.result-tier::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  opacity: 0.04;
  transition: opacity var(--transition-base);
}

.result-tier:hover::before {
  opacity: 0.07;
}

/* ── Tier: TRUTH ─────────────────────────────────────────────────────────── */
.result-tier.tier-truth {
  border-left-color: var(--accent-primary);
}

.result-tier.tier-truth::before {
  background: linear-gradient(
    90deg,
    rgba(var(--accent-primary-rgb), 1),
    transparent
  );
}

/* ── Tier: PROOF ─────────────────────────────────────────────────────────── */
.result-tier.tier-proof {
  border-left-color: var(--accent-secondary);
}

.result-tier.tier-proof::before {
  background: linear-gradient(
    90deg,
    rgba(var(--accent-secondary-rgb), 1),
    transparent
  );
}

/* ── Tier: SOURCE ────────────────────────────────────────────────────────── */
.result-tier.tier-source {
  border-left-color: var(--verification-green);
}

.result-tier.tier-source::before {
  background: linear-gradient(
    90deg,
    rgba(var(--verification-rgb), 1),
    transparent
  );
}

/* ============================================================================
   TIER HEADER
   Icon + Label row
   ============================================================================ */
.tier-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 0;
}

.tier-header__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

.tier-header__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tier-truth .tier-header__label { color: var(--accent-primary); }
.tier-proof .tier-header__label { color: var(--accent-secondary); }
.tier-source .tier-header__label { color: var(--verification-green); }

.tier-header__badge {
  margin-left: auto;
}

/* ============================================================================
   TIER CONTENT
   ============================================================================ */
.tier-content {
  padding-top: var(--space-md);
}

/* --- Truth Tier: Large Answer Text --------------------------------------- */
.tier-truth .truth-answer {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tier-truth .truth-answer--highlight {
  color: var(--accent-primary);
  text-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.2);
}

.tier-truth .truth-context {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================================================
   PROOF CHAIN
   Clean readable text block for mathematical derivations
   ============================================================================ */
.proof-chain {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px;
  background: var(--result-bg, var(--sidebar-bg));
  border: 1px solid rgba(var(--accent-secondary-rgb), 0.12);
  border-radius: 8px;
  position: relative;
  overflow: visible;
}

/* Subtle left accent bar */
.proof-chain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--accent-secondary),
    rgba(var(--accent-secondary-rgb), 0.2)
  );
  border-radius: var(--radius-pill);
}

/* --- Individual Proof Step (now a paragraph) ----------------------------- */
.proof-step {
  padding: 0;
  opacity: 0;
  animation: proof-step-in 0.3s var(--ease-decel) forwards;
}

.proof-step:nth-child(1) { animation-delay: 50ms; }
.proof-step:nth-child(2) { animation-delay: 100ms; }
.proof-step:nth-child(3) { animation-delay: 150ms; }
.proof-step:nth-child(4) { animation-delay: 200ms; }
.proof-step:nth-child(5) { animation-delay: 250ms; }
.proof-step:nth-child(6) { animation-delay: 300ms; }
.proof-step:nth-child(7) { animation-delay: 350ms; }
.proof-step:nth-child(8) { animation-delay: 400ms; }

@keyframes proof-step-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.proof-step__label {
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.72;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  margin: 0;
  text-align: justify;
}

/* Markdown Headings */
.md-heading {
  margin-top: 1.35em;
  margin-bottom: 0.65em;
  color: var(--accent-primary);
  font-weight: 600;
  line-height: 1.3;
}
.md-h1 { font-size: 1.35em; border-bottom: 1px solid rgba(0, 212, 255, 0.2); padding-bottom: 0.35em; }
.md-h2 { font-size: 1.18em; }
.md-h3 { font-size: 1.04em; color: rgba(255, 255, 255, 0.95); }
.md-h4 { font-size: 1em; color: rgba(255, 255, 255, 0.85); }
.md-h5 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0; }
.md-h6 { font-size: 0.85em; font-style: italic; opacity: 0.8; }


/* Last step = conclusion, highlighted */
.proof-step:last-child .proof-step__label {
  font-weight: 600;
  color: var(--accent-primary);
}

/* MathJax rendering — line-height isolation */
mjx-container {
  line-height: 1.2 !important;
}

.proof-step__label mjx-container[jax="SVG"] {
  color: var(--text-main);
}

.proof-step__label mjx-container[display="true"] {
  display: block;
  margin: 14px 0 18px !important;
  padding: 14px 16px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(0, 212, 255, 0.045);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 8px;
  text-align: center;
}

.proof-step__label mjx-container[display="true"] svg {
  max-width: none;
}

.proof-step__label mjx-container:not([display="true"]) {
  padding: 0 2px;
  vertical-align: -0.12em;
}

.proof-step__label br + br {
  display: block;
  content: "";
  margin-top: 0.45em;
}

/* Display math block wrapper */
.math-display-block {
  display: block;
  margin: 14px 0;
  text-align: center;
}

/* Markdown code block (triple backtick) */
.markdown-code-block {
  display: block;
  margin: 12px 0;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-main);
  overflow-x: auto;
  white-space: pre;
}

/* Inline code */
.markdown-code {
  padding: 2px 6px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--accent-primary);
}

/* Markdown list */
.md-list {
  margin: 8px 0;
  padding-left: 22px;
  list-style-type: disc;
}

.md-list li {
  margin: 4px 0;
  line-height: 1.6;
}

/* Answer line highlight */
.md-answer-line {
  margin: 14px 0 6px;
  padding: 10px 16px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 8px;
  font-weight: 600;
  color: var(--accent-primary);
}

/* --- Action Toolbar (Gemini-style copy bar) ------------------------------ */
.neo-action-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0 4px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.neo-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.neo-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.neo-action-btn:active {
  transform: scale(0.95);
}

.neo-action-btn.copied {
  color: var(--accent-primary, #00d4ff);
  background: rgba(0, 212, 255, 0.08);
}

.neo-action-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.neo-action-label {
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --- Proof Arrow (hidden) ------------------------------------------------ */
.proof-arrow {
  display: none;
}

/* --- Math Fractions ------------------------------------------------------ */
.math-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 2px;
  line-height: 1;
}

.math-frac sup {
  font-size: 0.75em;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 1px;
}

.math-frac sub {
  font-size: 0.75em;
  line-height: 1;
  padding-top: 1px;
}

/* ============================================================================
   SOURCE BADGES
   Inline pills showing data sources: ROM, Wolfram, Internet
   ============================================================================ */
.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: rgba(var(--accent-primary-rgb), 0.04);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.12);
  border-radius: var(--radius-pill);
  cursor: default;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.source-badge:hover {
  background: rgba(var(--accent-primary-rgb), 0.1);
}

.source-badge__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

.source-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

/* ── ROM (Internal Knowledge) ────────────────────────────────────────────── */
.source-badge.rom {
  color: var(--accent-secondary);
  border-color: rgba(var(--accent-secondary-rgb), 0.25);
  background: rgba(var(--accent-secondary-rgb), 0.05);
}

.source-badge.rom .source-badge__dot {
  background: var(--accent-secondary);
  box-shadow: 0 0 6px var(--accent-secondary);
}

.source-badge.rom:hover {
  background: rgba(var(--accent-secondary-rgb), 0.12);
  border-color: rgba(var(--accent-secondary-rgb), 0.4);
}

/* ── Wolfram (Computational) ─────────────────────────────────────────────── */
.source-badge.wolfram {
  color: var(--warning-amber);
  border-color: rgba(var(--warning-rgb), 0.25);
  background: rgba(var(--warning-rgb), 0.05);
}

.source-badge.wolfram .source-badge__dot {
  background: var(--warning-amber);
  box-shadow: 0 0 6px var(--warning-amber);
}

.source-badge.wolfram:hover {
  background: rgba(var(--warning-rgb), 0.12);
  border-color: rgba(var(--warning-rgb), 0.4);
}

/* Wolfram verification sweep effect */
.source-badge.wolfram.verified {
  position: relative;
  overflow: hidden;
}

.source-badge.wolfram.verified::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--warning-rgb), 0.2) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: verification-sweep 2s ease-in-out;
  pointer-events: none;
}

/* ── Internet (Live Search) ──────────────────────────────────────────────── */
.source-badge.internet {
  color: var(--verification-green);
  border-color: rgba(var(--verification-rgb), 0.25);
  background: rgba(var(--verification-rgb), 0.05);
}

.source-badge.internet .source-badge__dot {
  background: var(--verification-green);
  box-shadow: 0 0 6px var(--verification-green);
}

.source-badge.internet:hover {
  background: rgba(var(--verification-rgb), 0.12);
  border-color: rgba(var(--verification-rgb), 0.4);
}

/* ============================================================================
   CONFIDENCE BAR
   Horizontal bar showing confidence percentage
   ============================================================================ */
.confidence-meter {
  margin-top: var(--space-md);
}

.confidence-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(var(--accent-primary-rgb), 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.confidence-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--error-red) 0%,
    var(--warning-amber) 40%,
    var(--accent-secondary) 70%,
    var(--verification-green) 100%
  );
  transition: width 1s var(--ease-decel);
  position: relative;
}

/* Animated shimmer on the fill */
.confidence-bar__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: verification-sweep 3s ease-in-out infinite;
}

.confidence-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.confidence-label__text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.confidence-label__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-primary);
}

/* Colour the value based on confidence level */
.confidence-label__value.high   { color: var(--verification-green); }
.confidence-label__value.medium { color: var(--warning-amber); }
.confidence-label__value.low    { color: var(--error-red); }

/* ============================================================================
   PROCESSING STEPS
   Live feed of what the AI is doing
   ============================================================================ */
.processing-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.processing-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  opacity: 0.3;
  transition: all var(--transition-base);
}

/* ── Active — currently processing ───────────────────────────────────────── */
.processing-step.active {
  opacity: 1;
}

.processing-step.active .processing-step__icon {
  color: var(--accent-primary);
}

.processing-step.active .processing-step__spinner {
  display: block;
}

.processing-step.active .processing-step__check {
  display: none;
}

/* ── Done — completed ────────────────────────────────────────────────────── */
.processing-step.done {
  opacity: 1;
}

.processing-step.done .processing-step__text {
  color: var(--verification-green);
}

.processing-step.done .processing-step__spinner {
  display: none;
}

.processing-step.done .processing-step__check {
  display: block;
  color: var(--verification-green);
}

/* ── Error — failed step ─────────────────────────────────────────────────── */
.processing-step.error {
  opacity: 1;
}

.processing-step.error .processing-step__text {
  color: var(--error-red);
}

.processing-step.error .processing-step__spinner {
  display: none;
}

.processing-step.error .processing-step__check {
  display: block;
  color: var(--error-red);
}

/* --- Step Icon Container ------------------------------------------------- */
.processing-step__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* --- Spinner ------------------------------------------------------------- */
.processing-step__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--accent-primary-rgb), 0.2);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-circle);
  animation: processing-spin 0.8s linear infinite;
}

/* --- Check Icon ---------------------------------------------------------- */
.processing-step__check {
  display: none;
  width: 14px;
  height: 14px;
}

.processing-step__check svg {
  width: 100%;
  height: 100%;
}

.processing-step__check path {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}

.processing-step.done .processing-step__check path {
  animation: checkmark-draw 0.4s ease forwards;
}

/* --- Step Text ----------------------------------------------------------- */
.processing-step__text {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  transition: color var(--transition-base);
}

/* --- Step Duration ------------------------------------------------------- */
.processing-step__duration {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================================================
   EMPTY STATE / NO RESULTS
   ============================================================================ */
.results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
}

.results-empty__icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  opacity: 0.4;
  margin-bottom: var(--space-md);
}

.results-empty__text {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ============================================================================
   RESULT ACTIONS — Copy, Share, Expand
   ============================================================================ */
.result-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--accent-primary-rgb), 0.06);
}

.result-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.result-action-btn:hover {
  color: var(--text-secondary);
  border-color: rgba(var(--accent-primary-rgb), 0.25);
  background: rgba(var(--accent-primary-rgb), 0.05);
}

.result-action-btn__icon {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

/* ============================================================================
   VERIFICATION BANNER
   Appears when Wolfram / external source confirms the answer
   ============================================================================ */
.verification-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  background: rgba(var(--verification-rgb), 0.05);
  border: 1px solid rgba(var(--verification-rgb), 0.15);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.verification-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--verification-rgb), 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: verification-sweep 2.5s ease-in-out;
  pointer-events: none;
}

.verification-banner__icon {
  width: 16px;
  height: 16px;
  color: var(--verification-green);
  flex-shrink: 0;
}

.verification-banner__text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--verification-green);
  letter-spacing: 0.04em;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .results-container {
    max-width: 90%;
  }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .results-container {
    max-width: 100%;
    padding: var(--space-md);
  }

  .result-tier {
    padding: var(--space-md);
    max-width: 100%;
  }


  .tier-truth .truth-answer {
    font-size: var(--fs-lg);
  }

  /* Proof chain mobile */
  .proof-chain {
    padding: var(--space-sm) var(--space-md);
  }

  .proof-step__label {
    font-size: var(--fs-xs);
    line-height: 1.7;
  }

  /* Source badges wrap */
  .source-list {
    gap: var(--space-xs);
  }

  .source-badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* Processing steps */
  .processing-step__text {
    font-size: var(--fs-xs);
  }

  .processing-step__duration {
    display: none;
  }

  /* Result actions */
  .result-actions {
    flex-wrap: wrap;
  }
}

/* ── Small Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .result-tier {
    padding: var(--space-sm) var(--space-md);
    border-left-width: 2px;
  }

  .tier-truth .truth-answer {
    font-size: var(--fs-md);
  }

  .tier-header__label {
    font-size: 10px;
  }

  .confidence-meter {
    margin-top: var(--space-sm);
  }
}

/* ============================================================================
   PROCESSING OVERLAY
   Shown while AI is processing
   ============================================================================ */
.neo-processing-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.neo-processing-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.neo-processing-overlay__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(var(--accent-primary-rgb), 0.15);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: processing-spin 0.8s linear infinite;
}

.neo-processing-overlay__label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Proof step used as simple text span in JS */
.proof-step .proof-step__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-primary);
}

/* ============================================================================
   GEOMETRY SVG DIAGRAM
   ============================================================================ */
.neo-geometry-svg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 10, 30, 0.5);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.15);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(var(--accent-primary-rgb), 0.05);
  animation: fade-in-up 0.8s var(--ease-decel) forwards;
}

.neo-geometry-svg__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-primary);
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  background: rgba(var(--accent-primary-rgb), 0.04);
}

.neo-geometry-svg__title svg {
  opacity: 0.8;
  flex-shrink: 0;
}

.neo-geometry-svg__content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  min-height: 200px;
}

.neo-geometry-svg__content svg {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
}

/* Light mode adjustments */
body.theme-light .neo-geometry-svg {
  background: rgba(240, 245, 250, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.theme-light .neo-geometry-svg__title {
  color: #1a1a2e;
  border-bottom-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

body.theme-light .neo-geometry-svg__content svg text {
  fill: #1a1a2e !important;
}

body.theme-light .neo-geometry-svg__content svg line,
body.theme-light .neo-geometry-svg__content svg polygon,
body.theme-light .neo-geometry-svg__content svg polyline,
body.theme-light .neo-geometry-svg__content svg path {
  stroke: #333 !important;
}

body.theme-light .neo-geometry-svg__content svg circle {
  fill: #3377ff !important;
  stroke: #3377ff !important;
}

/* ============================================================================
   IMAGE GENERATION
   ============================================================================ */
.neo-image-wrapper {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative; /* For absolute positioning of the download button */
  display: inline-block; /* Keep wrapper hugging the image */
  text-align: center;
}

.neo-generated-image {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(var(--accent-primary-rgb), 0.15);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
  animation: fade-in-up 0.8s var(--ease-decel) forwards;
  display: block;
  cursor: zoom-in;
}

.neo-image-download-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background-color: rgba(30, 30, 30, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0.8;
  z-index: 10;
}

.neo-image-download-btn:hover {
  background-color: rgba(60, 60, 60, 0.9);
  opacity: 1;
  transform: scale(1.05);
}

.neo-image-download-btn svg {
  width: 18px;
  height: 18px;
}

/* ============================================================================
   MATHJAX — Dark Theme Overrides
   ============================================================================ */
mjx-container {
  color: var(--text-primary) !important;
}

mjx-container[display="true"] {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: rgba(var(--accent-primary-rgb), 0.05);
  border-left: 3px solid var(--accent-primary);
  border-radius: 6px;
  overflow-x: auto;
}

/* Ensure math in proof steps looks good */
.proof-step mjx-container {
  font-size: 1.05em;
}

.truth-answer mjx-container[display="true"] {
  background: rgba(var(--accent-primary-rgb), 0.08);
}

/* ============================================================================
   ACADEMIC ANSWER LAYOUT
   Long math answers from Neo AI should read like a structured solution, not a
   compact pipeline log. These rules intentionally override the legacy mono
   proof-step styles above.
   ============================================================================ */
.neo-result-block {
}

.proof-chain {
  gap: 18px;
  padding: clamp(18px, 3vw, 34px);
}

.proof-step--structured {
  padding: 0;
}

.proof-step .proof-step__label,
.proof-step__label {
  font-family: var(--font-body);
  font-size: clamp(0.96rem, 1.4vw, 1.06rem);
  font-weight: 400;
  line-height: 1.78;
  color: var(--text-main);
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-align: justify;
}

.proof-step__label strong {
  color: var(--text-main);
  font-weight: 700;
}

.proof-step__label em {
  color: var(--text-main);
}

.proof-step__label .md-heading {
  display: block;
  margin: 1.35rem 0 0.7rem;
  color: var(--accent-primary);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
}

.proof-step__label .md-heading:first-child {
  margin-top: 0;
}

.proof-step__label .md-h1,
.proof-step__label .md-h2 {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.18);
}

.proof-step__label .md-h1 { font-size: 1.34rem; }
.proof-step__label .md-h2 { font-size: 1.22rem; }
.proof-step__label .md-h3 { font-size: 1.12rem; color: var(--text-main); }

.proof-step__label .md-list {
  margin: 0.65rem 0 1rem;
  padding-left: 1.35rem;
  color: var(--text-main);
}

.proof-step__label .md-list li {
  margin: 0.45rem 0;
  padding-left: 0.15rem;
}

.proof-step__label .md-answer-line {
  display: block;
  margin: 1rem 0 0.25rem;
  padding: 12px 14px;
  color: var(--text-main);
  font-weight: 700;
  background: rgba(var(--verification-rgb), 0.08);
  border: 1px solid rgba(var(--verification-rgb), 0.18);
  border-left: 3px solid var(--verification-green);
  border-radius: 8px;
}

.proof-step:last-child .proof-step__label {
  color: var(--text-main);
  font-weight: 400;
}

.proof-step__label mjx-container[display="true"],
.proof-step mjx-container[display="true"] {
  margin: 0.9rem 0 1.05rem !important;
  padding: 14px 16px;
  background: rgba(var(--accent-primary-rgb), 0.055);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.14);
  border-left: 3px solid var(--accent-primary);
  border-radius: 8px;
  text-align: center;
}

.proof-step__label mjx-container:not([display="true"]),
.proof-step mjx-container:not([display="true"]) {
  padding: 0 2px;
  color: var(--text-main) !important;
}

@media (max-width: 640px) {
  .results-container {
    padding: 12px;
  }

  .proof-chain {
    padding: 16px 14px 16px 18px;
  }

  .proof-step .proof-step__label,
  .proof-step__label {
    font-size: 0.95rem;
    line-height: 1.68;
  }

  .proof-step__label .md-h1 { font-size: 1.14rem; }
  .proof-step__label .md-h2 { font-size: 1.06rem; }
  .proof-step__label .md-h3 { font-size: 1rem; }

  .proof-step__label mjx-container[display="true"],
  .proof-step mjx-container[display="true"] {
    padding: 12px 10px;
  }
}

/* ============================================================================
   GEMINI REFERENCE POLISH
   Match the simpler reference screenshot: flat dark article, soft blue headings,
   no equation boxes, clear verification spacing.
   ============================================================================ */
.results-container {
  max-width: 1080px;
}

.proof-chain {
  padding: clamp(26px, 4vw, 44px) clamp(24px, 4.5vw, 52px);
  background: var(--result-bg, var(--chat-bg));
  border: 0;
  border-left: 2px solid rgba(94, 211, 179, 0.5);
  border-radius: 0;
  box-shadow: none;
  text-align: justify;
}

.proof-step + .proof-step {
  margin-top: 1.25rem;
}

.proof-step .proof-step__label,
.proof-step__label {
  max-width: 940px;
  font-size: clamp(1.02rem, 1.15vw, 1.1rem);
  line-height: 1.9;
  color: var(--text-main);
}

.proof-step__label .md-heading {
  margin: 1.85rem 0 0.9rem;
  color: var(--accent-primary);
  font-size: 1.2rem;
  font-weight: 750;
}

.proof-step__label .md-heading:first-child {
  margin-top: 0;
}

.proof-step__label strong {
  color: var(--text-main);
  font-weight: 700;
}

.proof-step__label mjx-container[display="true"],
.proof-step mjx-container[display="true"],
mjx-container[display="true"] {
  margin: 0.32rem 0 0.55rem !important;
  padding: 0;
  text-align: left;
  overflow-x: auto;
}

.proof-step__label mjx-container[jax="SVG"],
.proof-step mjx-container[jax="SVG"] {
  color: var(--text-main) !important;
}

.proof-step__label mjx-container[display="true"] svg,
.proof-step mjx-container[display="true"] svg {
  max-width: 100%;
}

.proof-step__label br + br {
  margin-top: 0.9em;
}

.proof-step__label .md-answer-line {
  margin-top: 1.35rem;
  padding: 0;
  color: var(--accent-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.neo-action-toolbar {
  opacity: 0.62;
}

.neo-action-toolbar:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .proof-chain {
    padding: 22px 18px 24px 22px;
  }

  .proof-step .proof-step__label,
  .proof-step__label {
    font-size: 1rem;
    line-height: 1.78;
  }

  .proof-step__label .md-heading {
    font-size: 1.08rem;
  }
}

/* ============================================================================
   GEMINI-LIKE READING MODE
   Cleaner answer presentation: article-first, less dashboard chrome.
   ============================================================================ */
.neo-result-block {
  margin-bottom: 40px;
}

.proof-chain {
  gap: 0;
  padding: clamp(20px, 3.2vw, 38px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    var(--result-bg, var(--chat-bg));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.02);
}

.proof-chain::before {
  display: none;
}

.proof-step {
  margin: 0;
}

.proof-step + .proof-step {
  margin-top: 0.95rem;
}

.proof-step .proof-step__label,
.proof-step__label {
  font-size: clamp(1rem, 1.2vw, 1.075rem);
  line-height: 1.82;
  color: var(--text-main);
}

.proof-step__label .md-heading {
  margin: 1.65rem 0 0.75rem;
  color: var(--text-main);
  font-weight: 700;
}

.proof-step__label .md-heading:first-child {
  margin-top: 0;
}

.proof-step__label .md-h1,
.proof-step__label .md-h2 {
  border-bottom: none;
  padding-bottom: 0;
}

.proof-step__label .md-h1 { font-size: 1.36rem; }
.proof-step__label .md-h2 { font-size: 1.26rem; }
.proof-step__label .md-h3 { font-size: 1.15rem; }

.proof-step__label .md-list {
  margin: 0.6rem 0 1rem;
  padding-left: 1.45rem;
}

.proof-step__label .md-list li {
  margin: 0.32rem 0;
}

/* Highlighted Ordered Lists (1, 2, 3...) */
.proof-step__label .md-ordered-list {
  margin: 0.8rem 0 1.2rem;
  padding-left: 0;
  list-style: none;
  counter-reset: md-counter;
}

.proof-step__label .md-ordered-list li {
  margin: 0.8rem 0;
  padding-left: 2.2rem;
  position: relative;
}

.proof-step__label .md-ordered-list li::before {
  content: counter(md-counter);
  counter-increment: md-counter;
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--accent-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3);
}

body.theme-light .proof-step__label .md-ordered-list li::before {
  background: #2563eb; /* Bold blue for contrast on light mode */
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.proof-step__label mjx-container[display="true"],
.proof-step mjx-container[display="true"],
mjx-container[display="true"] {
  margin: 0.55rem 0 0.7rem !important;
  padding: 0.15rem 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  text-align: center;
  box-shadow: none;
}

.proof-step__label mjx-container:not([display="true"]),
.proof-step mjx-container:not([display="true"]) {
  padding: 0 1px;
}

.proof-step__label .md-answer-line {
  margin: 1.15rem 0 0;
  padding: 0.9rem 1rem;
  background: rgba(49, 196, 141, 0.075);
  border: 1px solid rgba(49, 196, 141, 0.18);
  border-left: 3px solid var(--verification-green);
  border-radius: 10px;
}

.neo-action-toolbar {
  max-width: min(1000px, 100%);
  margin-bottom: 40px;
  margin: 14px auto 0;
  border-top-color: rgba(255, 255, 255, 0.045);
}

@media (max-width: 640px) {
  .proof-chain {
    padding: 18px 16px;
    border-radius: 10px;
  }

  .proof-step .proof-step__label,
  .proof-step__label {
    font-size: 1.1rem;
    line-height: 1.72;
  }

  .proof-step__label .md-heading {
    margin-top: 1.35rem;
  }
}


/* ============================================================================
   User Query Block
   ============================================================================ */
.user-query-block {
  background: rgba(var(--accent-primary-rgb), 0.15); /* Accent for Dark Mode */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-main);
  padding: 16px 24px;
  border-radius: 20px;
  border-bottom-right-radius: 4px;
  margin: 0 0 24px auto;
  max-width: 80%;
  width: fit-content;
  font-size: 1.15rem; /* Slightly smaller for cleaner look */
  line-height: 1.6;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), inset 0 0 12px rgba(var(--accent-primary-rgb), 0.05);
  white-space: pre-wrap;
  word-wrap: break-word;
}

body.theme-light .user-query-block {
  /* Vàng cờ Việt Nam — light mode friendly (deeper) */
  background: #FFEEA3;
  color: #1a1a1a;
  font-weight: 400;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  border: 1px solid rgba(191, 154, 0, 0.25);
  box-shadow: 0 4px 16px rgba(191, 154, 0, 0.1);
}

/* Images inside user query bubble */
.query-images-strip {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.query-image-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(51, 119, 255, 0.25);
  cursor: zoom-in;
  transition: transform 0.2s, border-color 0.2s;
}
.query-image-thumb:hover {
  transform: scale(1.08);
  border-color: #3377ff;
}


/* Typing Indicator - Messenger Style */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 16px 0 24px 12px;
  min-height: 24px;
  opacity: 1 !important; /* Force visibility over portal.css rule */
}

.typing-indicator span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bcc0c4;
  -webkit-animation: sizeWave 1.2s infinite ease-in-out;
  animation: sizeWave 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.typing-indicator span:nth-child(3) {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

@-webkit-keyframes sizeWave {
  0%, 100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    background: #ffffff;
    opacity: 1;
  }
  33% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    background: #888c90;
    opacity: 0.4;
  }
  66% {
    -webkit-transform: scale(1);
    transform: scale(1);
    background: #bcc0c4;
    opacity: 0.7;
  }
}

@keyframes sizeWave {
  0%, 100% {
    transform: scale(1.5);
    background: #ffffff;
    opacity: 1;
  }
  33% {
    transform: scale(0.5);
    background: #888c90;
    opacity: 0.4;
  }
  66% {
    transform: scale(1);
    background: #bcc0c4;
    opacity: 0.7;
  }
}

@keyframes typing-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes typing-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}