* { box-sizing: border-box; }
/* scene phase palettes: js/ui.js sets body[data-phase] from the clock.
   Defaults double as the day phase and the no-JS look. */
:root {
  --sky-hi: #3a2a14; --sky-lo: #201409;
  --ink: #e8b96b; --glow: rgba(232, 185, 107, 0.25);
}
body[data-phase="dawn"]   { --sky-hi: #46281c; --sky-lo: #241216;
                            --ink: #eec990; --glow: rgba(238, 201, 144, 0.28); }
body[data-phase="sunset"] { --sky-hi: #5c2610; --sky-lo: #200d07;
                            --ink: #f0b070; --glow: rgba(240, 176, 112, 0.3); }
body[data-phase="night"]  { --sky-hi: #151b2c; --sky-lo: #080a10;
                            --ink: #b9c4d8; --glow: rgba(185, 196, 216, 0.25); }
html, body {
  margin: 0; padding: 0; height: 100vh; height: 100dvh;
  background: radial-gradient(ellipse at 50% 20%, var(--sky-hi) 0%, var(--sky-lo) 70%);
  font-family: monospace, monospace;
  color: var(--ink);
  transition: color 2s;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }
.stage { flex: 0 0 auto; text-align: center; padding: 8px 0 2px;
         max-height: 52vh; max-height: 52dvh; overflow: hidden; }
pre#art {
  font-size: min(10px, 1.08vw); line-height: 1.02; /* 1.02 mirrored in ui.js fitArt() */
  color: var(--ink); margin: 0 auto; white-space: pre;
  text-align: left; display: inline-block;
  text-shadow: 0 0 10px var(--glow);
  transition: color 2s, text-shadow 2s;
}
.caption { color: #8a6a3d; font-size: 12px; letter-spacing: 3px;
           margin-top: 6px; text-transform: uppercase; }
.chat {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 760px; margin: 0 auto;
}
.msg { max-width: 82%; padding: 9px 12px; font-size: 14px; line-height: 1.45; }
.me { align-self: flex-end; background: #4a3619;
      border-radius: 14px 14px 4px 14px; color: #f3d9a4; }
.kat { align-self: flex-start; background: #14100a; border: 1px solid #8a6a3d;
       border-radius: 4px; color: #e8b96b;
       box-shadow: 0 0 12px rgba(232,185,107,0.08) inset; }
.kat .who { display: block; font-size: 10px; letter-spacing: 2px;
            color: #8a6a3d; margin-bottom: 4px; text-transform: uppercase; }
/* suggestion chips: outlined siblings of the input bar. An empty row
   collapses to nothing, so the stage and chat keep their space. */
.chips {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; width: 100%; max-width: 760px;
  margin: 0 auto; padding: 0 12px;
}
.chips:not(:empty) { padding-top: 8px; }
.chips button {
  background: #14100a; border: 1px solid #8a6a3d; border-radius: 14px;
  color: #e8b96b; font-family: inherit; font-size: 13px;
  padding: 7px 13px; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 0 12px rgba(232, 185, 107, 0.08) inset;
}
.chips button:active { background: #4a3619; color: #f3d9a4; }
.bar {
  flex: 0 0 auto; display: flex; gap: 8px; justify-content: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #171008; border-top: 1px solid #3a2a14;
}
.bar input {
  flex: 1; min-width: 0; max-width: 660px;
  background: #241a0e; border: 1px solid #5a4526; border-radius: 10px;
  color: #f3d9a4; font-family: inherit; font-size: 16px;
  padding: 12px 14px; outline: none;
}
.bar input::placeholder { color: #7a5f38; }
.bar input:focus { border-color: #b8905a; }
.bar button {
  background: #8a6a3d; border: none; border-radius: 10px;
  color: #201409; font-family: inherit; font-weight: bold; font-size: 15px;
  padding: 12px 18px; cursor: pointer; touch-action: manipulation;
}
.bar button:active { background: #b8905a; }