*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:#0f0f0f;color:#e8e8e8;min-height:100vh}.app{max-width:720px;margin:0 auto;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.25rem;min-height:100vh}header{display:flex;align-items:center;justify-content:space-between;gap:1rem}h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:#fff}.status{font-size:.8rem;padding:.25rem .6rem;border-radius:999px;border:1px solid currentColor;text-transform:lowercase}.status.connected{color:#4ade80}.status.connecting{color:#facc15}.status.disconnected{color:#9ca3af}.status.error{color:#f87171}.setup{display:flex;flex-direction:column;gap:.75rem;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:.75rem;padding:1.25rem}.field{display:flex;flex-direction:column;gap:.3rem;position:relative}.field.inline{flex-direction:row;align-items:center;gap:1.25rem}.field label{font-size:.78rem;color:#9ca3af;font-weight:500}.field .hint{color:#4b5563;font-weight:400}input[type=text],input:not([type=checkbox]):not([type=number]){background:#111;border:1px solid #2a2a2a;border-radius:.4rem;color:#e8e8e8;padding:.5rem .6rem;font-size:.875rem;outline:none;width:100%;transition:border-color .15s}input:focus{border-color:#4b5563}input.num{width:60px;text-align:center}.regen{position:absolute;right:.5rem;bottom:.4rem;background:none;border:none;color:#6b7280;cursor:pointer;font-size:1rem;padding:0 .25rem;line-height:1}.regen:hover{color:#e8e8e8}button{cursor:pointer;border:none;border-radius:.4rem;font-size:.875rem;padding:.5rem 1rem;transition:opacity .15s}button:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#3b82f6;color:#fff;font-weight:600}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-secondary{background:#1f2937;color:#d1d5db}.btn-secondary:hover:not(:disabled){background:#374151}.chat{display:flex;flex-direction:column;gap:.75rem;flex:1}.messages{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:.75rem;padding:1rem;min-height:240px;max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.message{display:flex;gap:.5rem;align-items:flex-end}.message.me{justify-content:flex-end}.message.them{justify-content:flex-start}.message .ts{font-size:.7rem;color:#4b5563;white-space:nowrap}.bubble{background:#1f2937;border-radius:.5rem;padding:.4rem .75rem;font-size:.875rem;max-width:75%;word-break:break-word}.me .bubble{background:#1e3a5f;color:#bfdbfe}.input-row{display:flex;gap:.5rem}.input-row input{flex:1}.log-panel{background:#111;border:1px solid #1f1f1f;border-radius:.75rem;overflow:hidden}.log-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;border-bottom:1px solid #1f1f1f;font-size:.78rem;color:#6b7280}.log-header button{background:none;border:1px solid #2a2a2a;color:#6b7280;padding:.15rem .5rem;font-size:.72rem;border-radius:.3rem}.log-header button:hover{color:#e8e8e8;border-color:#4b5563}.log-body{padding:.5rem .75rem;max-height:160px;overflow-y:auto;font-family:ui-monospace,monospace;font-size:.72rem;display:flex;flex-direction:column;gap:.15rem}.log-entry{display:flex;gap:.5rem;color:#6b7280}.log-entry.error{color:#f87171}.log-entry.success{color:#4ade80}.log-entry.recv{color:#818cf8}.log-entry.send{color:#60a5fa}.log-entry.warn{color:#facc15}.ts{color:#4b5563;white-space:nowrap}.empty{color:#4b5563;font-size:.8rem;text-align:center;padding:1rem 0}