styles.css

/*
 * Hide flag icons in language switcher
 */

/* Hide flag image in the language button (CDN flags) */
img[src*="cloudfront.net/flags"] {
  display: none !important;
}

/* Hide colored circle indicator in the language button */
button[aria-haspopup="menu"] > div:first-child {
  display: none !important;
}

/* Hide colored circle indicators in dropdown menu items */
[role="menuitem"] > div:first-child {
  display: none !important;
}

/*
 * Fix box-drawing character alignment in code blocks.
 *
 * JetBrains Mono (Mintlify default) renders box-drawing chars (─│┌┐└┘)
 * wider than ASCII, causing ~2px misalignment on wide diagrams.
 * Menlo renders them at equal width.
 */
pre code {
  font-family: Menlo, Monaco, "Courier New", monospace !important;
}

/*
 * CJK-aligned ASCII-art diagrams.
 *
 * Problem: In browser monospace fonts, CJK characters render at ~1.7× ASCII
 * width instead of the terminal-standard 2×. This breaks box-drawing alignment
 * in diagrams that mix Chinese text with ASCII borders (│┌┐└┘─).
 *
 * Solution: Use <pre class="cjk-diagram"> with each CJK char wrapped in
 * <b> tags. CSS forces each <b> to display:inline-block;width:2ch, which
 * locks every CJK character to exactly 2 monospace ASCII character widths.
 * Works with any monospace font on any OS/browser.
 */
pre.cjk-diagram {
  display: block !important; /* Override Mintlify's display:flex on <pre> */
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 24px;
  font-family: Menlo, Monaco, "Courier New", monospace;
  overflow-x: auto;
  white-space: pre;
  margin: 16px 0;
  background: #f8f8f8;
  color: #1e1e1e;
}

.dark pre.cjk-diagram {
  background: #1e1e1e;
  color: #d4d4d4;
}

pre.cjk-diagram b {
  display: inline-block;
  width: 2ch;
  text-align: center;
  font-weight: normal;
}

/*
 * Terminal Demo Component (showcase/terminal-demo)
 * All classes prefixed with td- to avoid style leaks.
 */

/* ── Layout ── */
.td-wrap { position: relative; max-width: 56rem; margin: 2rem auto; padding: 0 1rem; }
.td-inner { position: relative; }
.td-glow {
  position: absolute; inset: -24px; border-radius: 16px;
  opacity: 0.5; filter: blur(64px); pointer-events: none;
  background: radial-gradient(at 50% 0%, rgba(139,92,246,0.08), transparent 70%);
}

/* ── Terminal window ── */
.td-window {
  position: relative; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}
.td-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #1c1a2e;
}
.td-dots { display: flex; gap: 7px; }
.td-dot { width: 11px; height: 11px; border-radius: 50%; }
.td-dot-r { background: #ff5f57; }
.td-dot-y { background: #febc2e; }
.td-dot-g { background: #28c840; }

.td-body {
  height: 280px; overflow-y: auto; background: #13111e; padding: 20px;
  padding-bottom: 160px; /* Large bottom padding so content starts mid-terminal */
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13px; line-height: 28px;
}
.td-body::-webkit-scrollbar { width: 6px; }
.td-body::-webkit-scrollbar-track { background: transparent; }
.td-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* ── Line animation ── */
.td-line {
  opacity: 0; transform: translateY(4px);
  animation: tdFadeIn 0.4s ease-out forwards;
}
@keyframes tdFadeIn { to { opacity: 1; transform: translateY(0); } }

/* ── User input lines — visually distinct with purple left border ── */
.td-line-user {
  margin: 6px -8px 0; padding: 2px 8px 2px calc(8px - 2px); color: #fff;
  border-left: 2px solid rgba(167,139,250,0.4);
  background: rgba(139,92,246,0.08); border-radius: 4px;
}
.td-line-user .td-prompt { color: #34d399; font-weight: bold; }
.td-line-user .td-cmd {
  color: #c4b5fd; /* purple-300, stands out for slash commands */
}

/* ── AI output lines ── */
.td-line-ai { color: #d4d4d4; }
.td-line-ai .td-bullet { color: #34d399; }

/* ── Sub-result lines (indented └) ── */
.td-line-sub { color: #a3a3a3; padding-left: 18px; }
.td-line-sub .td-bullet { color: #737373; }

/* ── Tool call styling (Bash, etc.) ── */
.td-tool-name { color: #34d399; font-weight: 500; }
.td-tool-args { color: #a3a3a3; }
.td-link { color: #38bdf8; }
.td-success { color: #34d399; }
.td-dim { color: #737373; }

/* ── Sub-agent calls (research, implement, check) — bold name, subtle indent ── */
.td-line-agent {
  color: #d4d4d4;
  padding-left: 4px;
}
.td-agent-icon { color: #a78bfa; font-size: 10px; } /* purple-400, matches accent */
.td-agent-name { color: #fff; font-weight: 700; letter-spacing: 0.01em; }
.td-agent-desc { color: #a3a3a3; font-weight: 400; }

/* ── Loading/status lines (agent sub-output) ── */
.td-line-loading {
  padding-left: 18px; color: #737373;
  opacity: 0;
  animation: tdFadeIn 0.4s ease-out forwards;
}

/* ── Highlighted line (key result) ── */
.td-highlight {
  margin: 0 -8px; padding: 0 8px 0 calc(8px - 2px);
  border-left: 2px solid rgba(167,139,250,0.4);
  background: rgba(139,92,246,0.12); border-radius: 4px;
}

/* ── Cursor ── */
.td-cursor {
  display: inline-block; width: 2px; height: 1.1em;
  margin-left: 1px; background: #fff; vertical-align: text-bottom;
  animation: tdBlink 1s step-end infinite;
}
@keyframes tdBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ── Staggered line delays (~29s total) ──
   user → 0.6s → AI reply;  AI→AI 1.0-1.4s;  before next user 1.5-1.7s */
.td-d0  { animation-delay: 0.5s; }   /* ❯ /trellis:start */
.td-d1  { animation-delay: 1.1s; }   /*   ● Loaded (+0.6) */
.td-d2  { animation-delay: 1.8s; }   /*   ● What would you like... (+0.7) */
.td-d3  { animation-delay: 2.8s; }   /* ❯ Add Gemini CLI... (+1.0) */
.td-d4  { animation-delay: 3.4s; }   /*   ● Bash(task.py create) (+0.6) */
.td-d5  { animation-delay: 4.6s; }   /*   ▶ research(...) (+1.2) */
.td-d6  { animation-delay: 6.6s; }   /*   └ Done (36 tools) (+1.2 after load) */
.td-d7  { animation-delay: 8.0s; }   /*   ● Bash(add-context) (+1.4) */
.td-d8  { animation-delay: 9.2s; }   /*   └ 6 spec files (+1.2) */
.td-d9  { animation-delay: 10.4s; }  /*   ● Bash(task.py start) (+1.2) */
.td-d10 { animation-delay: 12.0s; }  /*   ▶ implement(...) (+1.6) */
.td-d11 { animation-delay: 14.0s; }  /*   └ Done (99 tools) (+1.2 after load) */
.td-d12 { animation-delay: 15.3s; }  /*   ● TypeCheck/Lint/Tests (+1.3) */
.td-d13 { animation-delay: 16.8s; }  /*   ▶ check(...) (+1.5) */
.td-d14 { animation-delay: 18.8s; }  /*   └ Found 1 issue (+1.2 after load) */
.td-d15 { animation-delay: 21.5s; }  /* ❯ /trellis:update-spec (+1.7 after fix) */
.td-d16 { animation-delay: 22.1s; }  /*   ● Read(...) (+0.6) */
.td-d17 { animation-delay: 23.3s; }  /*   ● Update(...) (+1.2) */
.td-d18 { animation-delay: 24.3s; }  /* ❯ /trellis:record-session (+1.0) */
.td-d19 { animation-delay: 24.9s; }  /*   ● Bash(archive) (+0.6) */
.td-d20 { animation-delay: 26.1s; }  /*   ● Bash(add_session) (+1.2) */
.td-d21 { animation-delay: 27.1s; }  /*   └ Task archived (+1.0) */
.td-d22 { animation-delay: 28.3s; }  /* ❯ █ (+1.2) */

/* ── Progress timeline ── */
.td-timeline {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; padding: 20px 8px;
  margin-top: 24px; user-select: none;
}
.td-timeline-track {
  position: absolute; left: 8px; right: 8px;
  top: 50%; height: 1px; transform: translateY(-50%);
  background: rgba(255,255,255,0.10);
}
.td-timeline-fill {
  position: absolute; left: 8px; right: 8px; top: 50%; height: 1px;
  transform: translateY(-50%) scaleX(0); transform-origin: left;
  background: rgba(167,139,250,0.4);
  animation: tdFill 28.3s ease-out 0.5s forwards;
}
/* Keyframes synced to phase starts (total 29.0s):
   0.5/6=0, 2.8/6=1, 4.6/6=2, 12.0/6=3, 16.8/6=4, 21.5/6=5, 25.0/6=6 */
@keyframes tdFill {
  0%{transform:translateY(-50%) scaleX(0)}
  1.7%{transform:translateY(-50%) scaleX(0)}
  9.7%{transform:translateY(-50%) scaleX(0.167)}
  15.9%{transform:translateY(-50%) scaleX(0.333)}
  41.4%{transform:translateY(-50%) scaleX(0.5)}
  57.9%{transform:translateY(-50%) scaleX(0.667)}
  74.1%{transform:translateY(-50%) scaleX(0.833)}
  85.9%{transform:translateY(-50%) scaleX(1)}
  100%{transform:translateY(-50%) scaleX(1)}
}

.td-step-dot {
  position: relative; z-index: 10; width: 8px; height: 8px;
  border-radius: 50%; background: rgba(167,139,250,0.5);
  border: none; padding: 0; cursor: pointer;
  opacity: 0; animation: tdDotIn 0.3s ease-out forwards;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.td-step-dot:hover {
  transform: scale(1.75); background: rgba(196,181,253,0.6);
}
@keyframes tdDotIn { to { opacity: 1; } }

/* Dot appearance delays — synced to first terminal line of each phase */
.td-step-dot:nth-child(3) { animation-delay: 0.5s; }
.td-step-dot:nth-child(4) { animation-delay: 2.8s; }
.td-step-dot:nth-child(5) { animation-delay: 4.6s; }
.td-step-dot:nth-child(6) { animation-delay: 12.0s; }
.td-step-dot:nth-child(7) { animation-delay: 16.8s; }
.td-step-dot:nth-child(8) { animation-delay: 21.5s; }
.td-step-dot:nth-child(9) { animation-delay: 24.3s; }

.td-step-dot:last-child {
  animation: tdDotIn 0.3s ease-out forwards, tdDotGlow 0.5s ease-out 27.1s forwards;
}
@keyframes tdDotGlow {
  to { transform: scale(1.5); background: #a78bfa; box-shadow: 0 0 12px rgba(167,139,250,0.3); }
}

/* Manual mode dot states (set by JS on click) */
.td-dot-done { opacity: 1 !important; background: rgba(167,139,250,0.5); }
.td-dot-current {
  opacity: 1 !important; transform: scale(1.5);
  background: #a78bfa; box-shadow: 0 0 12px rgba(167,139,250,0.3);
}
.td-dot-future { opacity: 1 !important; background: rgba(167,139,250,0.25); }

/* ── Descriptions (below timeline, stacked) ── */
.td-descs {
  position: relative; min-height: 56px; padding: 0 8px;
}
.td-desc {
  position: absolute; top: 0; left: 8px; right: 8px;
  opacity: 0;
}
.td-desc-title {
  font-size: 15px; font-weight: 600; color: #7c3aed; margin: 0; /* purple-600 */
}
.dark .td-desc-title { color: #a78bfa; } /* purple-400 in dark mode */
.td-desc-text {
  font-size: 14px; line-height: 1.7; color: #3f3f46; margin: 4px 0 0 0; /* zinc-700, tinted neutral */
}
.dark .td-desc-text { color: #d4d4d8; } /* zinc-300 */

/* Auto-play mode: descriptions fade in/out in sequence */
@keyframes tdDescShow {
  0% { opacity: 0; transform: translateY(4px); }
  10% { opacity: 1; transform: translateY(0); }
  88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes tdDescStay {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Desc delays synced to first terminal line of each phase.
   Duration = time until next phase starts. */
.td-desc-0 { animation: tdDescShow 2.3s ease forwards; animation-delay: 0.5s; }    /* 0.5→2.8 */
.td-desc-1 { animation: tdDescShow 1.8s ease forwards; animation-delay: 2.8s; }   /* 2.8→4.6 */
.td-desc-2 { animation: tdDescShow 7.4s ease forwards; animation-delay: 4.6s; }   /* 4.6→12.0 */
.td-desc-3 { animation: tdDescShow 4.8s ease forwards; animation-delay: 12.0s; }  /* 12.0→16.8 */
.td-desc-4 { animation: tdDescShow 4.7s ease forwards; animation-delay: 16.8s; }  /* 16.8→21.5 */
.td-desc-5 { animation: tdDescShow 3.5s ease forwards; animation-delay: 21.5s; }  /* 21.5→25.0 */
.td-desc-6 { animation: tdDescStay 4.0s ease forwards; animation-delay: 24.3s; }  /* 24.3→end */

/* When dots are clicked, JS adds this class to kill all CSS desc animations */
.td-descs-ctrl .td-desc {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}
.td-descs-ctrl .td-desc-active {
  opacity: 1 !important;
  display: block !important;
  transform: translateY(0);
}