* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
.topbar { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: var(--topbar); color: var(--topbar-fg); position: sticky; top: 0; }
.topbar .spacer { flex: 1; }
.bot-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.topbar #copyLink, .topbar a { font: inherit; padding: .35rem .7rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: var(--topbar-fg); cursor: pointer; text-decoration: none; }
.topbar a:hover, .topbar #copyLink:hover { background: rgba(255,255,255,.25); }

/* .chrome (flags + theme swatches) is styled centrally in tokens.css */

.wrap { max-width: 760px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; height: calc(100vh - 56px); }
.chat { flex: 1; overflow-y: auto; padding: .4rem; }
.msg { margin: .5rem 0; padding: .5rem .7rem; border-radius: 10px; white-space: pre-wrap; max-width: 85%; }
.msg .who { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .15rem; }
.msg.assistant { background: var(--assistant); margin-right: auto; }
.msg.user { background: var(--user); margin-left: auto; border-left: 4px solid var(--border); }
.msg.error { background: var(--error-bg); color: var(--error-fg); }
.starters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.starters button { font: inherit; font-size: .85rem; padding: .3rem .6rem; border: 1px solid var(--border); background: var(--panel); color: var(--fg); border-radius: 999px; cursor: pointer; }
.input { display: flex; gap: .5rem; margin-top: .5rem; }
.input textarea { flex: 1; padding: .5rem; font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--fg); resize: vertical; }
.input button { padding: .5rem 1.1rem; font: inherit; font-weight: 600; border: none; border-radius: 8px; background: var(--primary); color: var(--primary-fg); cursor: pointer; }

/* iPad / touch */
@media (max-width: 1024px) {
  .topbar { flex-wrap: wrap; row-gap: .4rem; }
  .input textarea, .input button, .starters button { font-size: 16px; } /* prevents iOS zoom */
  .input button { min-height: 42px; }
  .msg { max-width: 92%; }
}