body { font-family: system-ui, sans-serif; margin:0; padding:0; background:#f7f7fb; }
.chat-container { max-width:720px; margin:20px auto; border-radius:8px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.06); overflow:hidden; display:flex; flex-direction:column; height:80vh; }
.chat { padding:12px; flex:1; overflow:auto; }
select, button[type="button"] { padding:6px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; }
#stopBtn { background:#ef4444; color:#fff; border-color:#ef4444; }
#exportBtn { background:#10b981; color:#fff; border-color:#10b981; }
form { display:flex; padding:10px; gap:8px; border-top:1px solid #eee; }
input { flex:1; padding:10px; border:1px solid #ddd; border-radius:6px; }
button { padding:10px 14px; border-radius:6px; border:none; background:#2563eb; color:#fff; cursor: pointer; }
button:hover { background:#1d4ed8; }
.bubble { padding:10px 12px; margin:6px 0; border-radius:10px; max-width:75%; }
.bubble.user { margin-left:auto; background:#e0f2fe; }
.bubble.assistant { margin-right:auto; background:#eef2ff; }
.bubble.system { text-align:center; background:transparent; color:#666; font-style:italic; }
/* formatter preview styles */
.cf-prose { white-space: pre-wrap; line-height: 1.6; margin-bottom: 10px; color:#111827; }
.cf-preview { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.cf-file { border:1px solid #e5e7eb; border-radius:8px; margin:10px 0; overflow:hidden; }
.cf-file__name { background:#f3f4f6; font-weight:600; padding:6px 10px; border-bottom:1px solid #e5e7eb; }
.cf-code { margin:0; padding:10px; background:#0b1020; color:#d1d5db; overflow:auto; }