:root { --ink:#141414; --mute:#6b6b6b; --line:#e2e2e2; --bg:#fff; }
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* App shell: header and input stay put, only the conversation scrolls.
   100dvh rather than 100vh so a mobile address bar does not clip the input. */
html { height:100%; }
body { display:flex; flex-direction:column; height:100vh; height:100dvh;
  position:relative; }

.top, .bottom { flex:none; background:var(--bg); }
.top    { border-bottom:1px solid var(--line); }
.bottom { border-top:1px solid var(--line); }

.middle { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; }

/* One column width, shared by all three regions. */
.bar, .thread { max-width:680px; margin:0 auto; padding:0 20px; }
.top .bar { display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:12px; padding-bottom:12px; }
.bottom .bar { padding-top:14px; padding-bottom:12px; }

.tools { display:flex; align-items:center; gap:12px; }
.logo { display:flex; align-items:center; gap:10px; margin:0;
  letter-spacing:-.01em; }
.logo .mark { display:block; height:38px; width:auto; }
.logo .word { font:600 22px/1 Georgia, "Times New Roman", serif; letter-spacing:-.02em; }

.langs { display:flex; gap:4px; margin:0; font-size:13px; letter-spacing:.04em; }
.langs a, .langs span { padding:3px 8px; border-radius:6px; text-decoration:none;
  color:var(--mute); }
.langs a:hover { color:var(--ink); background:#f4f4f4; }
.langs .on { color:var(--ink); background:#f0f0f0; }

.ask { display:flex; gap:8px; }
#q {
  flex:1; padding:14px 16px; font:inherit; color:inherit;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
#q:focus { outline:none; border-color:var(--ink); }
#go {
  padding:14px 22px; font:inherit; cursor:pointer; color:#fff;
  background:var(--ink); border:1px solid var(--ink); border-radius:10px;
}
#go[disabled] { opacity:.45; cursor:default; }

.thread { padding-top:22px; padding-bottom:22px; }

.turn { display:flex; margin-bottom:18px; }
.turn.you { justify-content:flex-end; }

.bubble { max-width:82%; padding:12px 16px; border-radius:18px; }
.turn.you .bubble { background:#f2f2f2; border-bottom-right-radius:6px; }
.turn.gran .bubble { background:#fff; border:1px solid var(--line);
  border-bottom-left-radius:6px; }

.face { flex:none; width:34px; height:34px; margin-right:10px; border-radius:50%;
  border:1px solid var(--line); background:#fff; }

.when { margin:2px 0 0 46px; font-size:12px; color:var(--mute); }
.turn.you + .when { margin:2px 0 0; text-align:right; }

.capped { margin:0 0 12px; padding:10px 14px; font-size:14px; color:var(--mute);
  background:#fafafa; border:1px solid var(--line); border-radius:10px; }
.again.inline { display:block; margin-top:10px; }
/* Before the first question this should read as a search page, not a chat:
   big centred logo, box beneath it, everything pulled to the middle. Once a
   conversation starts the .start class comes off and it becomes the app
   layout above. */
body.start { justify-content:center; }
body.start .top,
body.start .bottom { border:none; }
body.start .middle { flex:0 0 auto; }
body.start .top .bar { justify-content:center; padding-bottom:4px; }
body.start .logo { flex-direction:column; gap:14px; }
body.start .logo .mark { height:92px; }
body.start .logo .word { font-size:44px; }
body.start .thread { padding:0; }
body.start .bottom .bar { padding-top:26px; }
body.start .tools { position:absolute; top:16px; right:20px; }

.fineprint { margin:10px 0 0; font-size:12px; color:var(--mute); text-align:center; }

@media (max-width:520px) {
  .logo .mark { height:32px; }
  .logo .word { font-size:19px; }
  body.start .logo { gap:10px; }
  body.start .logo .mark { height:60px; }
  body.start .logo .word { font-size:29px; }
  body.start .tools { top:12px; right:14px; }
  .top .bar, .bottom .bar, .thread { padding-left:14px; padding-right:14px; }
  .again { font-size:12px; padding:6px 9px; }
  .fineprint { font-size:11px; }
}
.answer { white-space:pre-wrap; }
.again { margin:0; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer;
  color:var(--mute); background:none; border:1px solid var(--line); border-radius:8px;
  white-space:nowrap; }
.again:hover { color:var(--ink); border-color:var(--ink); }
.src { font-size:12px; color:var(--mute); text-decoration:none;
  border-bottom:1px solid var(--line); white-space:nowrap; }
.src:hover { color:var(--ink); border-color:var(--ink); }
.note, .err { color:var(--mute); }
.err { color:#a11; }