/*
 * Light by default.
 *
 * The dark theme is offered to people whose system asks for it and to nobody
 * else. A chat window is read for minutes at a time in whatever room the reader
 * happens to be in, and guessing wrong in the direction of dark is the guess
 * that hurts — a bright room with a dark page is harder to read than the
 * reverse.
 */
:root {
  --bg: #ffffff;
  --panel: #f7f7f8;
  --side: #fafafa;
  --line: #e4e4e7;
  --text: #18181b;
  --dim: #71717a;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --warn: #b45309;
  --danger: #dc2626;
  --radius: 12px;
  --side-w: 268px;
}

:root:not([data-theme='light']) {
  @media (prefers-color-scheme: dark) {
    --bg: #18181b;
    --panel: #232327;
    --side: #1c1c20;
    --line: #35353b;
    --text: #f4f4f5;
    --dim: #a1a1aa;
    --accent: #60a5fa;
    --accent-soft: #1e293b;
    --warn: #fbbf24;
    --danger: #f87171;
  }
}

:root[data-theme='dark'] {
  --bg: #18181b;
  --panel: #232327;
  --side: #1c1c20;
  --line: #35353b;
  --text: #f4f4f5;
  --dim: #a1a1aa;
  --accent: #60a5fa;
  --accent-soft: #1e293b;
  --warn: #fbbf24;
  --danger: #f87171;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Thai', sans-serif;
  /*
   * The page is exactly the window and never taller. The conversation scrolls
   * inside its own column so the composer stays put; letting the body scroll
   * makes the input box wander off-screen mid-conversation.
   */
  height: 100dvh;
  overflow: hidden;
}

#app { display: flex; height: 100dvh; }

/* ---------- sidebar ---------- */

.sidebar {
  width: var(--side-w);
  flex: none;
  background: var(--side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 4px;
  overflow-y: auto;
}

.side-top { display: flex; align-items: center; gap: 8px; padding: 0 6px 10px; }
.brand { font-weight: 700; font-size: 17px; }

.side-close { display: none; }

.side-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 8px 6px 6px;
}

.models { display: grid; gap: 4px; }

.model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
}

.model-row:hover { background: var(--panel); }

.model-row.chosen {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/*
 * A locked row is dimmed but still legible and still clickable — it explains
 * itself when tapped. Hiding it would remove the only reason somebody has to
 * pay, and greying it into unreadability would too.
 */
.model-row.locked { opacity: 0.6; }

.badge {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.model-info { display: grid; min-width: 0; }
.model-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.model-meta { font-size: 12px; color: var(--dim); }
.lock { font-size: 13px; margin-inline-start: auto; }

.side-foot { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }
.balance-row { display: grid; gap: 2px; padding: 0 6px; }
.side-note { margin: 0; padding: 0 6px; font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }

.balance {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
}
.balance.low { color: var(--danger); }

a.signin {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
}

/* ---------- main column ---------- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Only needed where the sidebar is hidden behind a button. */
.topbar { display: none; }
.spacer { flex: 1; }

.thread { flex: 1; overflow-y: auto; padding: 24px 16px 8px; }
.inner { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }

.msg { display: grid; gap: 5px; }
.who { font-size: 13px; color: var(--dim); font-weight: 600; }

.bubble {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--panel);
}

.msg.user .bubble { background: var(--accent-soft); }

/* The cursor that shows a reply is still arriving. */
.bubble.typing::after {
  content: '▍';
  color: var(--accent);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.cost { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }

.empty { color: var(--dim); text-align: center; padding: 56px 16px; display: grid; justify-items: center; gap: 2px; }
.empty .badge { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; margin-bottom: 12px; }
.empty h1 { font-size: 23px; margin: 0 0 4px; color: var(--text); }
.empty .model-now { font-weight: 600; color: var(--text); margin: 0; }
.empty .model-price { font-size: 13px; margin: 0 0 14px; }
.empty p { margin: 0; }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
}
.notice.bad { border-left-color: var(--danger); }
.notice p { margin: 0 0 8px; }
.notice a.signin { display: inline-block; }

/* ---------- composer ---------- */

.composer {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
}

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

.flash {
  max-width: 760px;
  margin: 0 auto 8px;
  font-size: 13px;
  color: var(--warn);
}

textarea {
  flex: 1;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  resize: none;
  max-height: 180px;
  min-height: 46px;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button.send {
  font: inherit;
  font-weight: 600;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
button.send:disabled { opacity: 0.45; cursor: default; }

/* ---------- narrow screens ---------- */

@media (max-width: 800px) {
  /*
   * The sidebar becomes a drawer rather than shrinking.
   *
   * A 268px column beside a chat leaves neither enough room on a phone, and a
   * squeezed version of both is worse than a full-width one of each.
   */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
    box-shadow: 0 0 40px rgb(0 0 0 / 0.18);
  }
  .sidebar.open { transform: none; }

  .side-close {
    display: block;
    margin-inline-start: auto;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border: 0;
    color: var(--dim);
    cursor: pointer;
    padding: 4px 8px;
  }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgb(0 0 0 / 0.35);
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    flex: none;
  }

  .menu {
    font: inherit;
    font-size: 19px;
    line-height: 1;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    padding: 4px 6px;
  }

  .topbar-model { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .balance { font-size: 15px; }

  .thread { padding: 14px 12px 4px; }
  .composer { padding-left: 12px; padding-right: 12px; }
  button.send { padding: 0 14px; }
}