/* Coder's palette, ported from the CLI's TUI theme
 * (`openagents/crates/openagents-cli/src/coder/markdown/theme.rs`).
 *
 * One amber on one near-black. Elements differ by *intensity* — the four
 * opacities the TUI composites over the background — and by effect, never by
 * hue. A second hue would change what Coder looks like, which is the one
 * thing this stylesheet must not do.
 */

:root,
[data-webtui-theme="coder"] {
  --amber: #ffb000; /* 100%, TEXT_COLOR */
  --amber-75: #c18600; /* 75%, USER_TEXT_COLOR */
  --amber-50: #835b00; /* 50%, DIM_TEXT_COLOR */
  --amber-25: #463100; /* 25%, MODEL_TEXT_COLOR */
  --near-black: #080600; /* BACKGROUND_COLOR */

  --background0: var(--near-black);
  --background1: var(--near-black);
  --background2: var(--near-black);
  --background3: var(--near-black);
  --foreground0: var(--amber);
  --foreground1: var(--amber-50);
  --foreground2: var(--amber-25);

  --font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --font-size: 14px;
  --line-height: 1.3;
  --box-border-width: 1px;
  --box-border-color: var(--amber);
}

html,
body {
  background: var(--near-black);
  color: var(--amber);
  word-break: normal;
}

/* The terminal frame: transcript takes the space left over, the composer sits
 * on it, and the status row is the last line — the CLI's three-constraint
 * vertical layout, in the same order.
 *
 * Width is a character count, not a pixel count: a terminal is as wide as the
 * columns it holds, and 100 columns is about where a line of prose stops being
 * comfortable to read. The border makes it a window rather than a page, so the
 * screen is Coder's terminal sitting on the desktop, not a document filling
 * the browser. */
#screen {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 2lh);
  width: min(100ch, calc(100vw - 2ch));
  margin: 1lh auto;
  border: 1px solid var(--amber-25);
  padding: 0 1ch;
  gap: 0;
  overflow: hidden;
}

/* The composer is narrower than the view above it, the way a prompt is
 * narrower than the scrollback it sits under. */
#composer,
#status {
  width: min(88ch, 100%);
  margin: 0 auto;
}

#transcript {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding-top: 1lh;
}

#transcript::-webkit-scrollbar {
  display: none;
}

#log,
#live {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Rendered prose. The model writes markdown, so a finished block is real
 * elements rather than asterisks — still in the terminal's grid, still on the
 * amber ladder, so it reads as the CLI and not as a web page. Row rhythm is
 * kept in `lh` units, and nothing here changes the type size: a heading is
 * bold, not bigger, the way a TUI marks one. */
.md {
  white-space: normal;
}

.md > :first-child {
  margin-top: 0;
}

.md > :last-child {
  margin-bottom: 0;
}

.md p,
.md ul,
.md ol,
.md pre,
.md table,
.md blockquote {
  margin: 0 0 1lh;
}

.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
  font-size: inherit;
  font-weight: bold;
  margin: 1lh 0 0;
  color: var(--amber);
}

.md ul,
.md ol {
  padding-left: 3ch;
}

.md li {
  margin: 0;
}

.md code {
  font: inherit;
  color: var(--amber);
}

.md pre {
  white-space: pre-wrap;
  border-left: 1px solid var(--amber-50);
  padding-left: 1ch;
}

.md pre code {
  color: var(--amber-75);
}

.md strong {
  color: var(--amber);
  font-weight: bold;
}

.md em {
  font-style: italic;
}

.md blockquote {
  border-left: 1px solid var(--amber-50);
  padding-left: 1ch;
  color: var(--amber-50);
}

.md table {
  border-collapse: collapse;
}

.md th,
.md td {
  border: 1px solid var(--amber-25);
  padding: 0.2lh 1ch;
  text-align: left;
  vertical-align: top;
}

.md th {
  color: var(--amber);
  font-weight: bold;
}

.md hr {
  border: none;
  border-top: 1px solid var(--amber-25);
  margin: 1lh 0;
}

/* The dim lane keeps its 50% intensity even where markdown asks for emphasis:
 * reasoning is supporting text, and a bold word in it must not read louder
 * than the answer it supports. */
.md.dim,
.md.dim * {
  color: var(--amber-50);
}

/* Intensity, not colour. */
.agent,
.tool-head {
  color: var(--amber);
}
.you {
  color: var(--amber-75);
}
.dim,
.out,
.system,
.diff {
  color: var(--amber-50);
}
.rail {
  color: var(--amber);
}
.error {
  color: var(--amber);
  font-weight: bold;
}
.done {
  color: var(--amber-50);
}

/* The welcome card: the CLI's startup box at the top of the transcript, with
 * its title in the border and its labels at half intensity. */
#welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1ch;
}

#welcome > div {
  width: 100%;
}

/* A title in the top border, the way a ratatui block draws it. */
.boxtitle {
  display: flex;
  height: 1lh;
}

#welcome .boxtitle {
  justify-content: center;
}

.boxtitle [is-~="badge"] {
  color: var(--amber);
}

#welcome .label {
  color: var(--amber-50);
}

#welcome .value {
  color: var(--amber);
}

/* The composer: a bordered box holding the `>` marker and the caret, exactly
 * where the TUI puts it. */
#composer {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 1lh;
}

#composer .marker {
  color: var(--amber);
  padding-right: 1ch;
  user-select: none;
}

#composer textarea {
  flex: 1 1 auto;
  background: transparent;
  color: var(--amber);
  border: none;
  font: inherit;
  line-height: inherit;
  resize: none;
  overflow: hidden;
  padding: 0;
  caret-color: var(--amber);
  caret-shape: block;
}

#composer textarea::placeholder {
  color: var(--amber-25);
}

/* The status row: supporting context under the composer, at the same 50%
 * intensity the CLI uses, credit-and-activity left, lane right. */
#status {
  display: flex;
  justify-content: space-between;
  gap: 1ch;
  color: var(--amber-50);
  padding: 0 1ch 0.4lh;
  white-space: pre;
  overflow: hidden;
}

#status .right {
  color: var(--amber-50);
  flex: 0 0 auto;
}

/* The run controls sit between the two fields, as text: a button here is a
 * word on the status row, not a widget on it. */
#status .controls {
  flex: 1 1 auto;
  text-align: center;
}

#status .controls button {
  font: inherit;
  color: var(--amber-50);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

#status .controls button:hover {
  color: var(--amber);
}

/* Sign-in, kept in the same frame so the first screen is already Coder. */
#gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  gap: 1lh;
}

#gate form {
  display: flex;
  align-items: center;
  gap: 1ch;
}

#gate input {
  background: transparent;
  color: var(--amber);
  border: none;
  font: inherit;
  caret-color: var(--amber);
  caret-shape: block;
  width: 32ch;
}

#gate input::placeholder {
  color: var(--amber-25);
}

button {
  background: transparent;
  color: var(--amber);
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

button:hover {
  color: var(--amber-75);
}

a,
a:visited {
  color: var(--amber);
  text-decoration: underline;
}