*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--surface: #1a1a1a;--surface-2: #242424;--border: #2e2e2e;--text: #e8e8e8;--text-muted: #888;--accent: #7c6aff;--accent-dim: #3d3566;--user-bg: #1e1e2e;--error: #e05c5c;--free: #4caf82}html,body{height:100%;background:var(--bg);color:var(--text);font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh;max-width:860px;margin:0 auto}#header{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}#model-select{flex:1;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 28px 6px 10px;font-family:inherit;font-size:13px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23888' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:0}#model-select:focus{outline:1px solid var(--accent)}#model-select option{background:var(--surface-2)}#btn-clear{background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:6px;padding:6px 12px;font-family:inherit;font-size:12px;cursor:pointer;white-space:nowrap;flex-shrink:0}#btn-clear:hover{border-color:var(--text-muted);color:var(--text)}#messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}#messages::-webkit-scrollbar{width:4px}#messages::-webkit-scrollbar-track{background:transparent}#messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.message{display:flex;flex-direction:column;max-width:85%}.message.user{align-self:flex-end;align-items:flex-end}.message.assistant{align-self:flex-start;align-items:flex-start}.message-role{font-size:11px;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}.message-body{background:var(--surface);border-radius:8px;padding:10px 14px;white-space:pre-wrap;word-break:break-word;border:1px solid var(--border);line-height:1.65}.message.user .message-body{background:var(--user-bg);border-color:var(--accent-dim)}.message.assistant .message-body{background:var(--surface)}.message-body.error{color:var(--error);border-color:var(--error)}.message-body.thinking{color:var(--text-muted);font-style:italic}details.reasoning{margin-bottom:8px;font-size:12px}details.reasoning summary{cursor:pointer;color:var(--text-muted);user-select:none;padding:4px 0}details.reasoning .reasoning-content{margin-top:6px;padding:8px 12px;background:var(--surface-2);border-left:2px solid var(--border);color:var(--text-muted);white-space:pre-wrap;word-break:break-word;font-size:12px}#input-bar{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg);align-items:flex-end;flex-shrink:0}#input-bar textarea{flex:1;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-family:inherit;font-size:14px;line-height:1.5;resize:none;min-height:40px;max-height:200px;overflow-y:auto;field-sizing:content}#input-bar textarea:focus{outline:1px solid var(--accent)}#input-bar textarea::placeholder{color:var(--text-muted)}#btn-send{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-family:inherit;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;height:40px;align-self:flex-end}#btn-send:hover{filter:brightness(1.15)}#btn-send:disabled{opacity:.5;cursor:default;filter:none}#btn-send.stop{background:var(--surface-2);color:var(--error);border:1px solid var(--error)}#status{font-size:11px;color:var(--text-muted);padding:0 16px 8px;min-height:20px;flex-shrink:0}#status.streaming{color:var(--accent)}#status.error{color:var(--error)}#empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);gap:8px;pointer-events:none;user-select:none}#empty-state .title{font-size:18px;color:var(--text)}#empty-state .subtitle{font-size:13px}