/* ═══════════════════════════════════════════
   Words I Sort of Know — Audiovisual Styles
   ═══════════════════════════════════════════ */

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

:root {
  --bg: #0c0c0d;
  --accent: #8aad7a;
  --accent-dim: #5a7a4e;
  --c-alert: #c4a44a;
  --c-error: #d49060;
  --c-fill: #d49060;
  --c-info: #7a9aaa;
  --c-success: #7aaa7a;
  --c-cmd: #b8c8a8;
  --c-deploy: #7aaa7a;
  --c-session: #8a9a80;
  --c-dim: #606858;
  --c-prompt: #9ab08a;
  --c-transfer: #7a9aaa;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Shell ── */

.shell {
  width: 100%;
  height: 100%;
  position: relative;
}

.screen, #screen {
  width: 100%;
  height: 100%;
  position: relative;
}

.screen-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.screen-layer.active {
  opacity: 1;
}

/* ── Start Screen ── */

.start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 70;
}

.start-screen h1 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  font-size: clamp(1.6rem, 5vw, 3rem);
  color: #c8dbbe;
  letter-spacing: 0.06em;
  margin-bottom: 0.4em;
}

.start-byline {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  color: #555;
  letter-spacing: 0.15em;
  margin-bottom: 3rem;
}

.start-btn {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: #5a6b52;
  background: none;
  border: 1px solid #2a3228;
  border-radius: 8px;
  padding: 1em 3.5em;
  cursor: pointer;
  letter-spacing: 0.12em;
  transition: color 0.3s, border-color 0.3s;
}

.start-btn:hover {
  color: #c8dbbe;
  border-color: #5a6b52;
}

.start-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

/* ── Title Card ── */

.title-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 50;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.title-card.visible { opacity: 1; }

.title-card h1 {
  font-weight: 300;
  font-size: clamp(1.6rem, 5vw, 3rem);
  color: #c8dbbe;
  letter-spacing: 0.06em;
  margin-bottom: 0.5em;
}

.title-card .byline {
  font-weight: 400;
  font-size: clamp(0.7rem, 1.5vw, 0.9rem);
  color: #555;
  letter-spacing: 0.15em;
}

/* ── Section Card ── */

.section-card {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.section-card.visible { opacity: 1; }

.section-card h2 {
  font-weight: 300;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  color: var(--accent);
  letter-spacing: 0.1em;
}

/* ── Transport Controls ── */

.transport {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.shell:hover .transport { opacity: 1; pointer-events: auto; }

.play-btn {
  background: none;
  border: none;
  color: #555;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.3rem;
  transition: color 0.2s;
}
.play-btn:hover { color: #999; }

.progress-track {
  flex: 1;
  height: 3px;
  background: #222;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--accent-dim);
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.time-display {
  font-size: 0.7rem;
  color: #555;
  min-width: 3rem;
  text-align: right;
}

/* ═══════════════════════════
   Liam — Claude Code Terminal
   ═══════════════════════════ */

.liam-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000000;
  color: #c0c0c0;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(15px, 2.5vw, 18px);
  line-height: 1.65;
  position: relative;
}

.liam-topbar {
  height: 3px;
  background: #8B4513;
  flex-shrink: 0;
}

.liam-clock {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 12px;
  color: #555;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 5;
}

.liam-output {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 0;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.liam-output-inner {
  padding-bottom: 40px;
}

/* Hide scrollbar but keep scrollable */
.liam-output::-webkit-scrollbar { width: 0; }
.liam-output { scrollbar-width: none; }

/* AI Response — green bullet */
.liam-response {
  margin: 12px 0;
  line-height: 1.65;
}

.liam-bullet {
  color: var(--accent);
  font-size: 10px;
  vertical-align: middle;
}

/* User input — gray bar */
.liam-user-input {
  background: #2d2d2d;
  padding: 6px 12px;
  margin: 8px 0;
  border-radius: 2px;
}

/* Tool call — green header + indented output */
.liam-tool-call {
  margin: 12px 0;
}

.liam-tool-header {
  color: var(--c-success);
  font-weight: 500;
}

/* Color overrides for event-style log lines */
.liam-tool-header.c-alert { color: var(--c-alert); }
.liam-tool-header.c-error { color: var(--c-error); }
.liam-tool-header.c-fill { color: var(--c-fill); }
.liam-tool-header.c-info { color: var(--c-info); }
.liam-tool-header.c-success { color: var(--c-success); }
.liam-tool-header.c-cmd { color: var(--c-cmd); }
.liam-tool-header.c-deploy { color: var(--c-deploy); }
.liam-tool-header.c-transfer { color: var(--c-transfer); }
.liam-tool-header.c-session { color: var(--c-session); }
.liam-tool-header.c-prompt { color: var(--c-prompt); }
.liam-tool-header.c-y { color: var(--accent); }

.liam-tool-bullet {
  font-size: 10px;
}

.liam-tool-output {
  color: #888;
  padding-left: 4px;
}

/* File read indicator */
.liam-file-read {
  color: #555;
  font-size: 12px;
  margin: 4px 0;
}

/* Code/system blocks */
.liam-code-block {
  margin: 12px 0;
  padding: 10px 14px;
  background: #0a0a0a;
  border-left: 2px solid #1a2218;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.55;
}

.liam-code-line { white-space: pre-wrap; word-break: break-word; }
.liam-code-line.c-alert { color: var(--c-alert); }
.liam-code-line.c-error { color: var(--c-error); }
.liam-code-line.c-fill { color: var(--c-fill); }
.liam-code-line.c-info { color: var(--c-info); }
.liam-code-line.c-success { color: var(--c-success); }
.liam-code-line.c-cmd { color: var(--c-cmd); }
.liam-code-line.c-deploy { color: var(--c-deploy); }
.liam-code-line.c-transfer { color: var(--c-transfer); }
.liam-code-line.c-session { color: var(--c-session); }
.liam-code-line.c-prompt { color: var(--c-prompt); }
.liam-code-line.c-y { color: var(--accent); font-weight: 500; }

/* Thinking indicator — inline in output flow */
.liam-thinking {
  display: flex;
  align-items: center;
  margin: 12px 0 0 0;
  height: 20px;
}

.liam-thinking.active {
  opacity: 1;
}

/* Thinking circle — JS-driven conic gradient */
.liam-thinking .clock-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #333;
}

.liam-thinking .thinking-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #8aad7a;
  opacity: 0.4;
  margin-left: 8px;
  white-space: nowrap;
}

/* ═══════════════════════════
   Caleb — Obsidian Editor
   ═══════════════════════════ */

.caleb-screen {
  width: 100%;
  height: 100%;
  display: flex;
  background: #111114;
  color: #d4d4d4;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  line-height: 1.8;
}

.caleb-sidebar {
  width: 220px;
  background: #0e0e11;
  border-right: 1px solid #1e1e22;
  padding: 16px 12px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #555;
}

.caleb-sidebar-title {
  color: #777;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.caleb-file {
  padding: 3px 8px;
  margin: 2px 0;
  border-radius: 3px;
  cursor: default;
}

.caleb-file.active {
  background: #1a1a1e;
  color: #aaa;
}

.caleb-file-icon { color: #555; margin-right: 6px; }

.caleb-editor {
  flex: 1;
  padding: 32px 40px 0;
  overflow-y: auto;
}

.caleb-editor-inner {
  padding-bottom: 40px;
}

.caleb-prose {
  margin-bottom: 1.4em;
}

.caleb-editor::-webkit-scrollbar { width: 0; }
.caleb-editor { scrollbar-width: none; }

/* Embedded app blocks */
.caleb-embed {
  margin: 20px 0;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.caleb-embed-pager {
  background: #1a0a0a;
  border: 1px solid #4a2020;
  border-left: 3px solid #c44a4a;
  padding: 12px 16px;
  color: #d49060;
}

.caleb-embed-pager .pager-title {
  color: #c44a4a;
  font-weight: 500;
  margin-bottom: 6px;
}

.caleb-embed-log {
  background: #0a0a0c;
  border: 1px solid #1e1e22;
  padding: 10px 14px;
  max-height: 200px;
  overflow-y: auto;
  color: #8a9a80;
  line-height: 1.5;
}

.caleb-embed-cli {
  background: #0a0a0a;
  border: 1px solid #1e1e22;
  border-radius: 6px;
  padding: 12px 16px;
  color: #b8c8a8;
  line-height: 1.5;
}

.caleb-cursor-inline {
  color: #d4d4d4;
  animation: blink 1s step-end infinite;
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .liam-screen { font-size: 12px; }
  .liam-code-block { font-size: 11px; padding: 8px 10px; }
  .caleb-sidebar { width: 0; display: none; }
  .caleb-editor { padding: 20px 16px; font-size: 14px; }
}