:root { --bg:#fff; --fg:#111; --muted:#777; --line:#e5e5e5; --me:#e8f0fe; --ai:#f4f4f4; --err:#fde8e8; }
@media (prefers-color-scheme: dark) { :root { --bg:#111; --fg:#eee; --muted:#999; --line:#333; --me:#1e2a44; --ai:#1d1d1d; --err:#3a1d1d; } }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.45 system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--fg); }
a { color: inherit; }
header.top { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); }
header .brand { font-weight:700; text-decoration:none; }
header nav { display:flex; gap:1rem; align-items:center; }
main { max-width: 820px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.2rem; margin: .5rem 0 1rem; }
.btn, button.link { font: inherit; cursor:pointer; }
.btn { background:var(--fg); color:var(--bg); border:0; border-radius:8px; padding:.5rem 1rem; text-decoration:none; display:inline-block; }
.btn.small { padding:.25rem .6rem; }
button.link { background:none; border:0; text-decoration:underline; color:inherit; padding:0; }
input[type=text], textarea { width:100%; font:inherit; padding:.5rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
form.inline { display:flex; gap:.5rem; align-items:center; }
form.inline input { max-width: 260px; }
.list { list-style:none; padding:0; }
.list li { padding:.6rem 0; border-bottom:1px solid var(--line); display:flex; gap:.6rem; flex-wrap:wrap; align-items:baseline; }
.tags { color:var(--muted); font-size:.85rem; }
.meta { color:var(--muted); font-size:.75rem; margin-left:auto; }
.conv-head { display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; }
.title-form { flex:1; min-width: 200px; }
.title-form .title-input { font-size: 1.2rem; font-weight: 600; border-color: transparent; background: transparent; padding: .3rem .4rem; max-width: none; }
.title-form .title-input:hover, .title-form .title-input:focus { border-color: var(--line); background: var(--bg); }
.title-form .btn.small { opacity: 0; }
.title-form:hover .btn.small, .title-form .title-input:focus ~ .btn.small { opacity: 1; }
.messages { display:flex; flex-direction:column; gap:.6rem; padding-bottom: 7rem; }
.msg { max-width: 92%; padding:.6rem .8rem; border-radius:12px; background:var(--ai); }
.msg.user { align-self:flex-end; background:var(--me); }
.msg.error { background:var(--err); }
.msg .body p { margin:0 0 .5rem; } .msg .body p:last-child { margin:0; }
.msg .meta { margin: .25rem 0 0; }
.composer { position:fixed; bottom:0; left:0; right:0; background:var(--bg); border-top:1px solid var(--line); padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); display:flex; gap:.5rem; align-items:flex-end; }
.composer textarea { flex:1; max-width: 700px; margin-left:auto; }
.composer .btn { margin-right:auto; }
.error { color:#c00; }
.msg.thinking, .msg.tool, .msg.system { background: transparent; border: 1px dashed var(--line); font-size: .8rem; color: var(--muted); padding: .3rem .6rem; max-width: 100%; }
.msg.thinking summary, .msg.tool summary, .msg.system summary { cursor: pointer; }
.msg .role { font-weight: 600; text-transform: uppercase; font-size: .65rem; letter-spacing: .05em; margin-right: .4rem; }
.msg pre { white-space: pre-wrap; word-break: break-word; margin: .3rem 0 0; font-size: .75rem; max-height: 16rem; overflow: auto; }