:root {
  color-scheme: light dark;
  --brand: #375623;
  --brand-text: #ffffff;
  --bg: #f4f7f1;
  --surface: #ffffff;
  --mine: #e2efda;
  --text: #1c2518;
  --muted: #5f6b57;
  --line: #d5dfcd;
  --error: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a11;
    --surface: #1f281a;
    --mine: #2e4220;
    --text: #e8efe3;
    --muted: #a3b09a;
    --line: #36432e;
    --error: #ff9c94;
  }
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

[hidden] { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }

button {
  background: var(--brand);
  border: 0;
  border-radius: 10px;
  color: var(--brand-text);
  cursor: pointer;
  min-height: 44px;
  padding: 0 16px;
}

button:disabled { opacity: .5; cursor: default; }

button.quiet {
  background: transparent;
  color: inherit;
  min-height: 36px;
  padding: 0 8px;
}

input, textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.error { color: var(--error); font-size: 14px; margin: 0; }
.error:empty { display: none; }

.login {
  display: grid;
  gap: 14px;
  margin: 12vh auto 0;
  max-width: 360px;
  padding: 0 16px;
}

.login h1 { color: var(--brand); margin: 0; text-align: center; }
.login label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }

.chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  margin: 0 auto;
  max-width: 820px;
}

.top {
  align-items: center;
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
}

.top nav { display: flex; flex-shrink: 0; }
.pc { display: block; font-size: 13px; opacity: .85; }

.messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px;
}

.bubble {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: min(88%, 640px);
  overflow-wrap: anywhere;
  padding: 8px 12px;
  white-space: pre-wrap;
}

.bubble.user { align-self: flex-end; background: var(--mine); border-color: transparent; }

.bubble.system {
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.bubble.failed { border-color: var(--error); }

.meta { color: var(--muted); display: block; font-size: 12px; margin-top: 4px; }

.file {
  color: inherit;
  display: block;
  font-weight: 600;
  margin-top: 4px;
  text-decoration: underline;
}

.composer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
}

.composer .row { align-items: end; display: flex; gap: 8px; }

.composer textarea { flex: 1; max-height: 160px; resize: none; }

.composer progress { width: 100%; }

.attach {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 22px;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.attach input { height: 1px; opacity: 0; position: absolute; width: 1px; }

.files { color: var(--muted); font-size: 14px; }

dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  max-width: min(560px, calc(100vw - 32px));
}

dialog::backdrop { background: rgb(0 0 0 / .45); }

dialog h2 { margin-top: 0; }

pre {
  background: var(--bg);
  border-radius: 8px;
  font-size: 12px;
  overflow-wrap: anywhere;
  padding: 10px;
  white-space: pre-wrap;
}

.row-end { display: flex; gap: 8px; justify-content: flex-end; }