:root {
  color-scheme: dark;
  --bg: #0a0a0d;
  --fg: #ffffff;
  --dim: #7c847e;
  --green: #39ff6a;
  --magenta: #ff2fd0;
  --cyan: #39e9ff;
  --yellow: #fff23d;
  --line: #26302a;
  --danger: #ff5f6a;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Space Mono', 'Courier New', monospace;
}

.chat-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.messages {
  flex: 1;
  overflow: hidden; /* no scrollbar — old text is pruned from the DOM instead, see trimOverflow() */
  padding: 16px;
  font-family: 'Space Mono', 'Courier New', monospace;
  text-align: justify;
  line-height: 1.6;
}

.msg {
  font-size: 0.98rem;
  word-break: break-word;
}

.letter {
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: transform;
  /* A space that is the ENTIRE content of an inline-block collapses to zero
     width (normal CSS whitespace trimming applies within its own internal
     line) — pre stops that collapse so word gaps stay visible. */
  white-space: pre;
}

.msg.color-green { color: var(--green); }
.msg.color-magenta { color: var(--magenta); }
.msg.color-cyan { color: var(--cyan); }
.msg.color-yellow { color: var(--yellow); }

.msg.system {
  color: var(--danger);
  font-style: italic;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.chat-form input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
}
.chat-form input:focus { outline: none; border-color: var(--green); }

.chat-form button,
#image-button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
}
.chat-form button[type="submit"]:hover { border-color: var(--green); color: var(--green); }
#image-button:hover { border-color: var(--magenta); color: var(--magenta); }
#image-button:disabled { opacity: 0.5; cursor: default; }