@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,600;1,7..72,300;1,7..72,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; }

:root {
  /* Dark defaults — from main site's oklch dark palette (hue 55) */
  /* ground-d: oklch(0.16 0.025 55), rule-d: oklch(0.28 0.02 55) */
  --bg: #1f1c14;
  --surface: #28241a;
  --surface-2: #302c22;
  --border: #3a3630;
  --border-2: #4a4538;
  /* text-d: oklch(0.82 0.02 55), text-2-d: oklch(0.50 0.025 55) */
  --text: #cec8b8;
  --text-2: #7a7468;
  --text-3: #585248;
  /* gold-d: oklch(0.65 0.17 55), gold-bright-d: oklch(0.75 0.19 55) */
  --accent: #c89830;
  --accent-dim: #8a6e2a;
  --user: #6b9fd4;
  --user-bg: #6b9fd408;
  --user-border: #6b9fd430;
  --claude: #7abd7a;
  --claude-bg: #7abd7a06;
  --claude-border: #7abd7a25;
  --think: #9b7acc;
  --think-bg: #9b7acc06;
  --think-border: #9b7acc20;
  --tool: #d4a843;
  --tool-bg: #d4a84306;
  --tool-border: #d4a84320;
  --sub: #cc7a6b;
  --sub-bg: #cc7a6b06;
  --sub-border: #cc7a6b20;
  --sys: #4a4640;
  --del: #d4434320;
  --add: #43d46320;
  --font-body: 'Literata', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
  scrollbar-color: var(--border-2) transparent;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* --- Drop Zone --- */

.drop-zone {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 1000;
  transition: background 0.3s;
}

.drop-zone.drag-over {
  background: var(--surface);
}

.drop-zone.drag-over .drop-zone-inner {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

.drop-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 4rem;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.drop-zone-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.drop-zone-hint {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-2);
}

.drop-zone-hint code {
  color: var(--text);
}

.drop-zone-fallback {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.2s;
}

.drop-zone-fallback:hover {
  color: var(--text-2);
}

.drop-zone-fallback input {
  display: none;
}

/* --- State --- */

.hidden {
  display: none !important;
}

/* --- Header --- */

.trace-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.trace-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.trace-meta {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-3);
  letter-spacing: 0.03em;
}

.trace-meta span { white-space: nowrap; }
.trace-meta .sep { color: var(--border-2); }

/* --- Minimap --- */

.minimap {
  position: fixed;
  right: 0.5rem;
  top: 3.5rem;
  bottom: 0.5rem;
  width: 4px;
  z-index: 90;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.3s, width 0.3s;
  cursor: pointer;
}
.minimap:hover { opacity: 1; width: 6px; }

.minimap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Main stream --- */

.stream {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem 1.5rem;
}

/* --- Event base --- */

.ev {
  position: relative;
  margin-bottom: 1px;
  border-left: 2px solid var(--border);
  margin-left: 4.5rem;
  transition: background 0.2s;
}

.ev:hover {
  background: var(--surface);
}

.ev-gutter {
  position: absolute;
  left: -4.7rem;
  top: 0.55rem;
  width: 4.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  user-select: none;
}

.ev-num {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 300;
  color: var(--text-3);
  line-height: 1;
}

.ev-gutter time {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 300;
  color: var(--text-3);
  line-height: 1.4;
}

.ev-main {
  padding: 0.5rem 0.8rem;
  min-width: 0;
}

.ev-content {
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ev-type-mark {
  position: absolute;
  right: -0.5rem;
  top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.2s;
  user-select: none;
}
.ev:hover .ev-type-mark { opacity: 1; }

/* --- User --- */

.ev-user {
  border-left-color: var(--user-border);
  background: var(--user-bg);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  scroll-margin-top: 4rem;
}
.ev-user:first-child { margin-top: 0; }

.ev-user .ev-content {
  font-weight: 400;
  color: var(--user);
  font-size: 0.95rem;
}

.ev-user .ev-type-mark { color: var(--user); }

.turn-anchor {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.15s;
  display: block;
  margin-bottom: 0.2rem;
}
.turn-anchor:hover { color: var(--user); }
.ev-user:target .turn-anchor { color: var(--user); }
.ev-user:target {
  background: var(--user-bg);
  box-shadow: inset 0 0 0 1px var(--user-border);
}

/* --- Assistant --- */

.ev-assistant {
  border-left-color: var(--claude-border);
  background: var(--claude-bg);
}

.ev-assistant .ev-content {
  color: var(--text);
}

.ev-assistant .ev-type-mark { color: var(--claude); }

/* --- Thinking --- */

.ev-thinking {
  border-left-color: var(--think-border);
  display: block;
  margin-left: 4.5rem;
  margin-bottom: 1px;
}

.ev-thinking > summary {
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: background 0.2s;
}
.ev-thinking > summary:hover { background: var(--surface); }
.ev-thinking > summary::-webkit-details-marker { display: none; }

.ev-thinking > summary .ev-gutter {
  top: 0.35rem;
}

.ev-thinking .ev-main {
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.thinking-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--think);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.thinking-meta {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-3);
}

.thinking-body {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--think);
  opacity: 0.7;
  padding: 0.5rem 0.8rem 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 30rem;
  overflow-y: auto;
  border-left: 1px dashed var(--think-border);
  margin-left: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--think-border) transparent;
}

/* Expand indicator */
.ev-thinking > summary::after {
  content: '+';
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-3);
  transition: transform 0.2s;
}
.ev-thinking[open] > summary::after {
  content: '\2212';
}

/* --- Tool use --- */

.ev-tool {
  border-left-color: var(--tool-border);
  background: var(--tool-bg);
}

.tool-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.tool-name {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--tool);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tool-path {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-2);
  background: none;
  padding: 0;
}

.tool-cmd {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.35rem 0.6rem;
  margin: 0.15rem 0;
  overflow-x: auto;
}

.tool-cmd code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--accent);
  background: none;
  padding: 0;
}

.tool-result {
  margin-top: 0.25rem;
}

.tool-result > summary {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
  padding: 0.15rem 0;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.tool-result > summary:hover { color: var(--text-2); }
.tool-result > summary::-webkit-details-marker { display: none; }
.tool-result > summary::before { content: '\25b8  '; font-size: 0.5rem; }
.tool-result[open] > summary::before { content: '\25be  '; }

.tool-result pre {
  margin-top: 0.15rem;
  overflow-x: auto;
  max-height: 20rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.tool-result code {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.45;
  background: none;
  padding: 0;
}

.diff {
  margin: 0.2rem 0;
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.45;
}

.diff-del, .diff-add {
  padding: 0.25rem 0.5rem 0.25rem 1.5rem;
  white-space: pre-wrap;
  word-break: break-all;
  position: relative;
}

.diff-marker {
  position: absolute;
  left: 0.5rem;
  font-weight: 500;
}

.diff-del {
  background: var(--del);
  color: #e08080;
}
.diff-add {
  background: var(--add);
  color: #80c880;
}

.task-type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sub);
  background: var(--sub-border);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  margin-right: 0.3rem;
}

/* --- Subagent --- */

.ev-subagent {
  border-left-color: var(--sub-border);
  display: block;
  margin-left: 4.5rem;
  margin-bottom: 1px;
}

.ev-subagent > summary {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: background 0.2s;
}
.ev-subagent > summary:hover { background: var(--surface); }
.ev-subagent > summary::-webkit-details-marker { display: none; }

.ev-subagent > summary .ev-gutter { top: 0.45rem; }

.ev-subagent .ev-main {
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.subagent-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--sub);
  font-style: italic;
}

.ev-subagent > summary::after {
  content: '+';
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-3);
}
.ev-subagent[open] > summary::after { content: '\2212'; }

.subagent-body {
  padding: 0.3rem 0.8rem 0.8rem;
  border-left: 1px dashed var(--sub-border);
  margin-left: 0.4rem;
}

.subagent-prompt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--text-2);
  padding: 0.35rem 0.6rem;
  margin-bottom: 0.3rem;
  background: var(--surface);
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}

.sub-msg {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 300;
  padding: 0.2rem 0.5rem;
  margin: 2px 0;
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-2);
}
.sub-out { border-left: 2px solid var(--claude-border); }
.sub-in { border-left: 2px solid var(--tool-border); }

/* --- System --- */

.ev-system {
  border-left-color: var(--border);
  display: block;
  margin-left: 4.5rem;
  margin-bottom: 1px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.ev-system:hover { opacity: 0.8; }

.ev-system > summary {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.2rem 0.8rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.ev-system > summary::-webkit-details-marker { display: none; }
.ev-system > summary .ev-gutter { top: 0.25rem; }
.ev-system .ev-main { padding: 0.2rem 0; }

.system-body {
  padding: 0.3rem 0.8rem;
  overflow-x: auto;
  max-height: 15rem;
  overflow-y: auto;
}
.system-body code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--text-3);
  background: none;
}

/* --- Utilities --- */

.dim {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-3);
  letter-spacing: 0.03em;
}

code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--surface-2);
  padding: 0.05rem 0.25rem;
  border-radius: 2px;
}

pre {
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Syntax highlighting overrides --- */

.hljs { background: transparent; padding: 0; }

/* --- Correction tape --- */

.redacted {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.1em 0.35em;
  border-radius: 2px;
  white-space: nowrap;
  background: #2a2520;
  color: #6a6258;
  border: 1px solid #3a352e;
  text-decoration: line-through;
  text-decoration-color: #4a4438;
  text-decoration-thickness: 1px;
}

/* --- Scroll progress bar --- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  z-index: 200;
  width: 0%;
  transition: width 0.1s;
}

/* --- Filter controls --- */

.filters {
  display: flex;
  gap: 0.1rem;
  padding: 0.15rem;
  background: var(--surface);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
  text-transform: uppercase;
}
.filter-btn:hover { color: var(--text-2); }
.filter-btn.active { color: var(--text); background: var(--border); }
.filter-btn[data-type="user"].active { color: var(--user); }
.filter-btn[data-type="assistant"].active { color: var(--claude); }
.filter-btn[data-type="thinking"].active { color: var(--think); }
.filter-btn[data-type="tool"].active { color: var(--tool); }
.filter-btn[data-type="subagent"].active { color: var(--sub); }

/* --- Save button --- */

.save-btn {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
  white-space: nowrap;
}
.save-btn:hover { color: var(--text-2); border-color: var(--border-2); }

/* --- Responsive --- */

@media (max-width: 640px) {
  .ev { margin-left: 2.5rem; }
  .ev-thinking, .ev-subagent, .ev-system { margin-left: 2.5rem; }
  .ev-gutter { left: -2.7rem; width: 2.2rem; }
  .ev-gutter time { display: none; }
  .stream { padding: 1rem 0.75rem 3rem; }
  .trace-header { padding: 0.6rem 0.75rem; }
  .trace-meta .hide-mobile { display: none; }
  .minimap { display: none; }
  .drop-zone-inner { padding: 2rem 1.5rem; }
}

/* --- Light mode --- */

@media (prefers-color-scheme: light) {
  :root {
    /* Backgrounds — from main site's oklch(0.96 0.012 55) warm ground */
    --bg: #f5f3ef;
    --surface: #ece9e3;
    --surface-2: #e3e0d8;
    /* Borders — from main site's oklch(0.84 0.02 55) rule */
    --border: #d3cfc6;
    --border-2: #c0bab0;
    /* Text — from main site's oklch(0.15 0.02 55) / oklch(0.45 0.025 55) */
    --text: #1f1c14;
    --text-2: #6b6358;
    --text-3: #9a9488;
    /* Gold accent — from main site's oklch(0.48 0.16 55) */
    --accent: #8a6e1a;
    --accent-dim: #b89a3a;
    /* Event type colors — darker for light bg readability */
    --user: #2868a8;
    --user-bg: #2868a80c;
    --user-border: #2868a828;
    --claude: #2a7830;
    --claude-bg: #2a78300a;
    --claude-border: #2a783022;
    --think: #6a3ca0;
    --think-bg: #6a3ca00a;
    --think-border: #6a3ca01c;
    --tool: #8a6e1a;
    --tool-bg: #8a6e1a0a;
    --tool-border: #8a6e1a1c;
    --sub: #a84838;
    --sub-bg: #a848380a;
    --sub-border: #a848381c;
    --sys: #9a9488;
    --del: #fce8e8;
    --add: #e4f4e4;
  }

  .diff-del { color: #982020; }
  .diff-add { color: #207828; }

  .redacted {
    background: #e8e2d8;
    color: #a09888;
    border-color: #d4cec4;
    text-decoration-color: #c0b8ac;
  }

  html { scrollbar-color: var(--border) transparent; }
}