:root {
  --bg: #292d34;
  --panel: #333842;
  --fg: #c8ccd2;
  --dim: #838b96;
  --dimmer: #5c636d;
  /* primary accent (class names still read "orange" for brevity; the value is teal) */
  --orange: #5fb0a4;
  --orange-hi: #74c3b6;
  --green: #8fae72;
  --blue: #7fa0c4;
  --yellow: #dccd2b;
  --red: #c47878;
  --sel: #3a3f49;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: "SF Mono", "SFMono-Regular", ui-monospace, "Menlo", "Cascadia Code",
    "Consolas", monospace;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#term {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 16px 22px;
}

#scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--dimmer) transparent;
}
#scroll::-webkit-scrollbar { width: 8px; }
#scroll::-webkit-scrollbar-thumb { background: var(--dimmer); border-radius: 4px; }

/* ---- line building blocks ---- */
.line { display: block; }
.dim { color: var(--dim); }
.dimmer { color: var(--dimmer); }
.orange { color: var(--orange); }
.orange-hi { color: var(--orange-hi); }
.green { color: var(--green); }
.blue { color: var(--blue); }
.yellow { color: var(--yellow); }
.red { color: var(--red); }
.fg { color: var(--fg); }
.italic { font-style: italic; }
.think { color: var(--dim); font-style: italic; }

/* ---- Claude Code welcome box ---- */
.cc-box {
  position: relative;
  border: 1px solid var(--orange);
  border-radius: 6px;
  padding: 14px 16px 12px;
  margin: 6px 0 10px;
}
.cc-title {
  position: absolute;
  top: -0.72em;
  left: 12px;
  background: var(--bg);
  padding: 0 6px;
  color: var(--orange);
}
.cc-cols { display: flex; gap: 26px; flex-wrap: wrap; }
.cc-left { flex: 0 0 auto; min-width: 250px; }
/* the 260px basis makes the right column wrap below the mascot on narrow
   screens instead of being squeezed into a sliver */
.cc-right { flex: 1 1 260px; min-width: 0; }
.cc-mascot {
  color: var(--orange-hi);
  text-align: center;
  margin: 4px 0 8px;
  line-height: 1.05;
}
.cc-center { text-align: center; }
.cc-hr {
  border: none;
  border-top: 1px solid var(--dimmer);
  margin: 8px 0;
  opacity: 0.5;
}
.link {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link:hover { border-bottom-color: var(--orange); }

/* ---- submitted user prompt block ---- */
.userblock {
  background: var(--panel);
  border-radius: 5px;
  padding: 8px 12px;
  margin: 8px 0;
  white-space: pre-wrap;
}
.userblock .umark { color: var(--dim); }

/* ---- menu ---- */
.menu-title { color: var(--yellow); }
/* hanging indent: wrapped lines align under the label, not the arrow */
.menu-row {
  display: block;
  padding: 0 2px 0 5ch;
  text-indent: -5ch;
  border-radius: 3px;
  cursor: pointer;
}
.menu-row.active { background: var(--sel); }
.menu-row .arrow { color: var(--orange); }
/* the label column: aligned descriptions on wide screens, natural flow on narrow */
.menu-row .mlabel { display: inline-block; min-width: 21ch; text-indent: 0; }
@media (max-width: 600px) {
  .menu-row .mlabel { min-width: 0; }
}
.menu-foot { color: var(--dimmer); }

/* logged decision line */
.logged .lbullet { color: var(--orange); }

/* ---- tool call ---- */
.tool .tbullet { color: var(--orange); }
.tool .targ { color: var(--blue); }

/* ---- dock (bottom) ---- */
#dock { flex: 0 0 auto; padding-top: 6px; }

.status {
  padding: 2px 2px 8px;
  display: flex;
  align-items: baseline;
  min-height: 1.5em;
  cursor: pointer; /* tapping the breath line ends the session (no esc on touch) */
}
/* a single dot that quietly breathes: brightens on the inhale, fades on the exhale */
#spin {
  flex: 0 0 auto;
  margin-right: 8px;
  color: var(--orange);
  opacity: 0.12;
  transition: opacity 4s ease-in-out;
}
#sline .verb { color: var(--fg); }
#sline .count { color: var(--dim); font-variant-numeric: tabular-nums; }
#sline .meta { color: var(--dim); }
#sline .barfill { color: var(--orange); opacity: 0.8; }
#sline .baremp { color: var(--dimmer); opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  #spin { transition: none; opacity: 0.7; }
}

.pbox {
  border: 1px solid var(--dimmer);
  border-radius: 6px;
  padding: 6px 11px;
  display: flex;
  align-items: baseline;
}
.pbox .pchar { color: var(--dim); margin-right: 9px; }
#pinput { color: var(--fg); white-space: pre-wrap; }
/* the input is decorative: the placeholder and caret only change while a prompt auto-types */
.phint { color: var(--dimmer); font-style: italic; }
.pbox.typing .phint { display: none; }

/* inactive chrome under the input */
.pstatus {
  padding: 6px 4px 0;
  line-height: 1.6;
  color: var(--dim);
}
.pstatus .modeon { color: var(--orange); }

/* blinking caret — only while a prompt is auto-typing */
.caret {
  display: none;
  width: 0.55ch;
  background: var(--fg);
  color: var(--bg);
  animation: blink 1.1s steps(1) infinite;
}
.pbox.typing .caret { display: inline-block; }
@keyframes blink { 50% { opacity: 0; } }

.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}