*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--surface: #14141f;--surface2: #1e1e2e;--border: #2a2a3d;--text: #e8e8f0;--text-muted: #8888a0;--accent: #6c5ce7;--accent-hover: #7d6ff0;--success: #00b894;--danger: #e17055;--warning: #fdcb6e;--radius: 12px}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{height:100%;display:flex;flex-direction:column}.screen{display:none;flex-direction:column;height:100%}.screen.active{display:flex}.login-card{max-width:400px;margin:auto;padding:2rem;text-align:center}.logo{font-size:3rem;margin-bottom:1rem}.login-card h1{font-size:1.5rem;margin-bottom:.5rem}.subtitle{color:var(--text-muted);margin-bottom:2rem}.form-group{text-align:left;margin-bottom:1rem}.form-group label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.4rem}.form-group input{width:100%;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:1rem}.privacy-note{margin-top:1.5rem;font-size:.75rem;color:var(--text-muted);line-height:1.6}.btn-primary{background:var(--accent);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius);font-size:1rem;cursor:pointer;width:100%;transition:background .2s}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:.6rem 1.2rem;border-radius:var(--radius);cursor:pointer}.btn-danger{background:var(--danger);color:#fff;border:none;padding:.6rem 1.2rem;border-radius:var(--radius);cursor:pointer}.icon-btn{background:none;border:none;font-size:1.3rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:background .2s}.icon-btn:hover{background:var(--surface2)}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--surface);border-bottom:1px solid var(--border)}.top-bar h2{font-size:1.1rem}.status-badge{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);display:inline-block}.dot.online{background:var(--success)}.dot.offline{background:var(--danger)}.dot.running{background:var(--success);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.agent-status-panel{padding:.5rem 1rem;background:var(--surface);border-bottom:1px solid var(--border)}.status-grid{display:flex;flex-wrap:wrap;gap:.75rem}.status-item{font-size:.75rem;color:var(--text-muted);display:flex;align-items:center;gap:.3rem}.chat-area{flex:1;overflow-y:auto;padding:1rem}.welcome-message{text-align:center;padding:2rem 1rem}.welcome-message h3{color:var(--text-muted);font-weight:400;margin-bottom:1.5rem}.example-commands{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.example-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:.5rem 1rem;border-radius:20px;font-size:.85rem;cursor:pointer;transition:all .2s}.example-btn:hover{border-color:var(--accent);color:var(--accent)}.message{margin-bottom:.75rem;max-width:85%;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message.user{margin-left:auto}.message.assistant{margin-right:auto}.message-bubble{padding:.75rem 1rem;border-radius:var(--radius);font-size:.95rem;line-height:1.5}.message.user .message-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}.message.assistant .message-bubble{background:var(--surface2);border-bottom-left-radius:4px}.message.system .message-bubble{background:transparent;color:var(--text-muted);font-size:.85rem;text-align:center}.task-progress{padding:.75rem 1rem;background:var(--surface);border-top:1px solid var(--border)}.task-progress h4{font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem}#task-steps{list-style:none;font-size:.85rem}#task-steps li{padding:.25rem 0;color:var(--text-muted)}#task-steps li.done{color:var(--success)}#task-steps li.active{color:var(--warning)}.confirmation-dialog{padding:1rem;background:var(--surface2);border-top:1px solid var(--border);text-align:center}.confirmation-buttons{display:flex;gap:.75rem;justify-content:center;margin-top:.75rem}.input-bar{display:flex;gap:.5rem;padding:.75rem 1rem;background:var(--surface);border-top:1px solid var(--border);align-items:center}#message-input{flex:1;padding:.75rem 1rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:1rem}.send-btn{width:auto;padding:.75rem 1.25rem}@media(min-width:768px){#main-screen{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto auto 1fr auto auto}.top-bar,.agent-status-panel{grid-column:1 / -1}.chat-area{grid-column:2;grid-row:3}.task-progress,.confirmation-dialog{grid-column:2}.input-bar{grid-column:1 / -1}}
