:root {
  --ink: #1c1915;
  --paper: #f6f1e7;
  --side: #17140f;
  --side-text: #f3eadc;
  --muted: #8d8478;
  --line: #e3dac8;
  --copper: #b85a28;
  --user: #f4e1d0;
  --danger: #9d2c2c;
  --shadow: 0 18px 50px rgba(40, 28, 14, 0.12);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.card, dialog { width: min(420px, 100%); background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.mark { letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); font-size: 12px; margin: 0; }
h1, h2 { font-family: Palatino, "Palatino Linotype", Georgia, serif; font-weight: 500; margin: 8px 0; }
.lede, .hint { color: #5e564c; }
label { display: block; margin: 14px 0; font-size: 14px; }
input, textarea, select { width: 100%; margin-top: 6px; border: 1px solid #d9d0c2; background: #fff; border-radius: 10px; padding: 10px 12px; }
.check { display: flex; gap: 8px; align-items: center; }
.check input { width: auto; margin: 0; }
button, .quiet { border: 0; border-radius: 999px; padding: 10px 16px; background: var(--ink); color: #fff; }
.quiet, .side button, #menu, #stop { background: transparent; color: inherit; border: 1px solid currentColor; }
.error { color: var(--danger); }
.shell { height: 100dvh; display: grid; grid-template-columns: 280px 1fr; }
.side { background: var(--side); color: var(--side-text); display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 0; }
.side-top, .side-bottom, .room-top, .composer-row, .dialog-row { display: flex; gap: 8px; align-items: center; }
.side-top { justify-content: space-between; }
.side-bottom { flex-wrap: wrap; }
.side input { background: #241f18; border-color: #3a332a; color: var(--side-text); }
#chats { overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 1; }
.chat { text-align: left; border: 0; background: transparent; color: inherit; border-radius: 10px; padding: 8px 10px; }
.chat.active { background: #2b251c; }
.room { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; min-height: 0; }
.room-top { padding: 12px 16px; border-bottom: 1px solid var(--line); }
#menu { display: none; }
#title, #model { border: 0; background: transparent; width: auto; margin: 0; }
#title { flex: 1; font-family: Palatino, Georgia, serif; font-size: 20px; }
#model { max-width: 180px; }
.transcript { overflow: auto; padding: 28px 8vw 12px; }
.msg { max-width: 760px; margin: 0 auto 22px; }
.msg.user { background: var(--user); border-radius: 16px; padding: 12px 16px; }
.msg.assistant { font-family: Palatino, "Palatino Linotype", Georgia, serif; font-size: 18px; line-height: 1.5; }
.msg pre { background: #221e19; color: #f6f1e7; border-radius: 12px; padding: 12px; overflow: auto; }
.msg code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; }
.msg p { margin: 0 0 0.7em; }
.msg h1, .msg h2, .msg h3 { margin: 0.6em 0; }
.empty { max-width: 680px; margin: 12vh auto 0; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestions button { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.tools { display: flex; gap: 8px; margin-top: 8px; }
.tools button { padding: 4px 10px; font-size: 13px; }
.composer { padding: 8px 8vw 20px; }
.composer textarea { width: 100%; resize: none; min-height: 52px; max-height: 180px; border-radius: 16px; }
.composer-row { justify-content: flex-end; margin-top: 8px; }
.status { color: var(--copper); margin: 0 0 8px; }
#stop { color: var(--danger); border-color: var(--danger); }
dialog::backdrop { background: rgba(23, 20, 15, 0.45); }
@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); z-index: 2; transform: translateX(-105%); transition: transform 0.2s ease; }
  .side.open { transform: none; }
  #menu { display: inline-flex; }
  .transcript, .composer { padding-left: 16px; padding-right: 16px; }
}