:root{--surface: #FAFAFA;--card: #FFFFFF;--border: #E5E7EB;--text-primary: #1F2937;--text-muted: #6B7280;--blue: #3B82F6;--green: #10B981;--amber: #F59E0B;--red: #EF4444;--purple: #8B5CF6}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--surface);color:var(--text-primary);min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}.header{background:var(--card);border-bottom:1px solid var(--border);padding:16px 24px}.header-content{max-width:1600px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header h1{font-size:20px;font-weight:600}.header-status{display:flex;align-items:center;gap:16px}.status-badge{padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.status-badge.disconnected{background:#fee2e2;color:#991b1b}.status-badge.connected{background:#d1fae5;color:#065f46}.status-badge.connecting{background:#fef3c7;color:#92400e}.timer{font-family:monospace;font-size:16px;color:var(--text-muted)}.main-content{flex:1;display:grid;grid-template-columns:300px 1fr 300px;gap:24px;padding:24px;max-width:1600px;margin:0 auto;width:100%}.panel{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 1px 3px #0000001a}.panel h2{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:12px;font-weight:500;margin-bottom:6px;color:var(--text-muted)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--surface)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #3b82f61a}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .15s ease;width:100%}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:#2563eb}.btn-success{background:var(--green);color:#fff}.btn-success:hover{background:#059669}.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:#dc2626}.btn:disabled{opacity:.5;cursor:not-allowed}.anomaly-info{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}.anomaly-info h3{font-size:13px;font-weight:600;margin-bottom:12px}.anomaly-info .btn{margin-top:12px}#anomaly-details{background:var(--surface);border-radius:8px;padding:12px;font-size:12px}#anomaly-details p{margin:4px 0}#anomaly-details strong{color:var(--text-muted)}.chat-container{height:500px;overflow-y:auto;padding:16px;background:var(--surface);border-radius:8px}.chat-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);text-align:center}.message{margin-bottom:16px;max-width:85%}.message.user{margin-left:auto}.message.assistant{margin-right:auto}.message-content{padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5}.message.user .message-content{background:var(--blue);color:#fff;border-bottom-right-radius:4px}.message.assistant .message-content{background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}.message-role{font-size:11px;color:var(--text-muted);margin-bottom:4px}.log-container{height:500px;overflow-y:auto}.log-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);text-align:center}.log-entry{padding:12px;border-bottom:1px solid var(--border);font-size:12px}.log-entry:last-child{border-bottom:none}.log-entry .timestamp{color:var(--text-muted);font-family:monospace;font-size:10px}.log-entry .event{margin-top:4px;font-weight:500}.log-entry .details{margin-top:4px;color:var(--text-muted)}.log-entry.tool{background:#10b9810d;border-left:3px solid var(--green)}.log-entry.error{background:#ef44440d;border-left:3px solid var(--red)}.footer{background:var(--card);border-top:1px solid var(--border);padding:12px 24px;text-align:center;font-size:12px;color:var(--text-muted);display:flex;justify-content:center;gap:16px}.hidden{display:none!important}@media (max-width: 1200px){.main-content{grid-template-columns:1fr}.panel{max-width:600px;margin:0 auto;width:100%}}