| |
| |
| |
|
|
| :root { |
| --bg: #0f172a; |
| --surface: #1e293b; |
| --surface-2: #263245; |
| --border: rgba(148, 163, 184, 0.12); |
| --text: #e2e8f0; |
| --text-muted: #94a3b8; |
| --primary: #2dd4bf; |
| --primary-dim: rgba(45, 212, 191, 0.15); |
| --error: #f87171; |
| --success: #4ade80; |
| --radius-sm: 0.375rem; |
| --radius-md: 0.5rem; |
| --radius-lg: 0.75rem; |
| --transition: 150ms cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| [data-theme="light"] { |
| --bg: #f8fafc; |
| --surface: #ffffff; |
| --surface-2: #f1f5f9; |
| --border: rgba(15, 23, 42, 0.1); |
| --text: #0f172a; |
| --text-muted: #64748b; |
| --primary: #0d9488; |
| --primary-dim: rgba(13, 148, 136, 0.12); |
| --error: #dc2626; |
| --success: #16a34a; |
| } |
|
|
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| html { |
| -webkit-font-smoothing: antialiased; |
| text-rendering: optimizeLegibility; |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| font-family: 'Inter', system-ui, sans-serif; |
| font-size: 0.9375rem; |
| background: var(--bg); |
| color: var(--text); |
| min-height: 100dvh; |
| line-height: 1.6; |
| } |
|
|
| button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; } |
| input, textarea { font: inherit; color: inherit; } |
|
|
| |
| |
| |
|
|
| .login-screen { |
| min-height: 100dvh; |
| display: grid; |
| place-items: center; |
| background: var(--bg); |
| padding: 1.5rem; |
| } |
|
|
| .login-card { |
| width: 100%; |
| max-width: 22rem; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 2rem 1.75rem; |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
|
|
| .brand-lockup { |
| text-align: center; |
| margin-bottom: 0.25rem; |
| } |
|
|
| .brand-word { |
| font-size: 2rem; |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| color: var(--primary); |
| } |
|
|
| .brand-lockup p { |
| font-size: 0.8125rem; |
| color: var(--text-muted); |
| margin-top: 0.25rem; |
| } |
|
|
| |
| .auth-tabs { |
| display: flex; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| overflow: hidden; |
| } |
|
|
| .auth-tab { |
| flex: 1; |
| padding: 0.45rem 0.5rem; |
| font-size: 0.8125rem; |
| font-weight: 500; |
| color: var(--text-muted); |
| background: transparent; |
| transition: background var(--transition), color var(--transition); |
| text-align: center; |
| } |
|
|
| .auth-tab.active { |
| background: var(--primary-dim); |
| color: var(--primary); |
| } |
|
|
| .auth-tab:not(.active):hover { |
| background: var(--surface-2); |
| color: var(--text); |
| } |
|
|
| .field { |
| display: flex; |
| flex-direction: column; |
| gap: 0.3rem; |
| font-size: 0.8125rem; |
| font-weight: 500; |
| color: var(--text-muted); |
| } |
|
|
| .field input { |
| padding: 0.55rem 0.75rem; |
| background: var(--surface-2); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| color: var(--text); |
| font-size: 0.9375rem; |
| transition: border-color var(--transition), box-shadow var(--transition); |
| outline: none; |
| } |
|
|
| .field input:focus { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px var(--primary-dim); |
| } |
|
|
| .error-text { |
| font-size: 0.8125rem; |
| color: var(--error); |
| padding: 0.4rem 0.6rem; |
| background: rgba(248, 113, 113, 0.1); |
| border-radius: var(--radius-sm); |
| border: 1px solid rgba(248, 113, 113, 0.2); |
| } |
|
|
| .auth-hint { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| text-align: center; |
| margin-top: 0.25rem; |
| } |
|
|
| .link-button { |
| background: none; |
| border: none; |
| padding: 0; |
| color: var(--primary); |
| font-size: inherit; |
| cursor: pointer; |
| text-decoration: underline; |
| text-underline-offset: 2px; |
| } |
|
|
| .link-button:hover { opacity: 0.8; } |
|
|
| |
| |
| |
|
|
| .primary-button { |
| padding: 0.6rem 1.25rem; |
| background: var(--primary); |
| color: #0f172a; |
| border-radius: var(--radius-sm); |
| font-weight: 600; |
| font-size: 0.9375rem; |
| transition: opacity var(--transition), transform var(--transition); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.4rem; |
| } |
|
|
| .primary-button:hover:not(:disabled) { opacity: 0.85; } |
| .primary-button:active:not(:disabled) { transform: scale(0.98); } |
| .primary-button:disabled { opacity: 0.4; cursor: not-allowed; } |
|
|
| .ghost-button { |
| padding: 0.4rem 0.75rem; |
| border-radius: var(--radius-sm); |
| font-size: 0.8125rem; |
| color: var(--text-muted); |
| display: flex; |
| align-items: center; |
| gap: 0.35rem; |
| transition: background var(--transition), color var(--transition); |
| } |
|
|
| .ghost-button:hover { background: var(--surface-2); color: var(--text); } |
|
|
| |
| |
| |
|
|
| .app-shell { |
| display: flex; |
| flex-direction: column; |
| height: 100dvh; |
| overflow: hidden; |
| } |
|
|
| .header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 1.25rem; |
| height: 3.25rem; |
| border-bottom: 1px solid var(--border); |
| background: var(--surface); |
| flex-shrink: 0; |
| gap: 1rem; |
| } |
|
|
| .brand-block { |
| display: flex; |
| align-items: baseline; |
| gap: 0.6rem; |
| } |
|
|
| .brand-block .brand-word { |
| font-size: 1.1rem; |
| font-weight: 800; |
| letter-spacing: 0.06em; |
| color: var(--primary); |
| } |
|
|
| .brand-block span { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| } |
|
|
| .header-actions { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
|
|
| .user-pill { |
| font-size: 0.75rem; |
| font-weight: 500; |
| padding: 0.3rem 0.65rem; |
| background: var(--primary-dim); |
| color: var(--primary); |
| border-radius: var(--radius-sm); |
| } |
|
|
| |
| |
| |
|
|
| .layout { |
| display: grid; |
| grid-template-columns: 16rem 1fr 16rem; |
| flex: 1; |
| overflow: hidden; |
| } |
|
|
| .panel { |
| display: flex; |
| flex-direction: column; |
| border-right: 1px solid var(--border); |
| overflow: hidden; |
| } |
|
|
| .right-panel { border-right: none; border-left: 1px solid var(--border); } |
| .center-panel { border-right: none; } |
|
|
| .panel-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0.65rem 1rem; |
| border-bottom: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
|
|
| .panel-heading h2 { |
| font-size: 0.8125rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: var(--text-muted); |
| } |
|
|
| .panel-heading span { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| } |
|
|
| |
| |
| |
|
|
| .agent-list { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0.4rem; |
| } |
|
|
| .agent-row { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| width: 100%; |
| padding: 0.45rem 0.6rem; |
| border-radius: var(--radius-sm); |
| font-size: 0.8125rem; |
| text-align: left; |
| transition: background var(--transition); |
| } |
|
|
| .agent-row:hover { background: var(--surface-2); } |
| .agent-row.selected { background: var(--primary-dim); color: var(--primary); } |
|
|
| .agent-dot, .health-dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| } |
|
|
| .status-ready { background: var(--success); } |
| .status-error { background: var(--error); } |
| .status-idle { background: var(--text-muted); } |
| .status-active { background: var(--primary); } |
|
|
| .agent-info { |
| padding: 0.75rem 1rem; |
| border-top: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
|
|
| .agent-info-header { |
| display: flex; |
| flex-direction: column; |
| gap: 0.15rem; |
| margin-bottom: 0.4rem; |
| } |
|
|
| .agent-info-header strong { font-size: 0.875rem; } |
| .agent-info-header span { font-size: 0.75rem; color: var(--text-muted); } |
| .agent-info p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; } |
|
|
| .connection-card { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.65rem 1rem; |
| border-top: 1px solid var(--border); |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| flex-shrink: 0; |
| } |
|
|
| |
| |
| |
|
|
| .chat-feed { |
| flex: 1; |
| overflow-y: auto; |
| padding: 1rem; |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| } |
|
|
| .chat-message { display: flex; } |
| .chat-message.user { justify-content: flex-end; } |
|
|
| .message-shell { max-width: 80%; display: flex; flex-direction: column; gap: 0.3rem; } |
| .chat-message.user .message-shell { align-items: flex-end; } |
|
|
| .user-bubble { |
| background: var(--primary); |
| color: #0f172a; |
| padding: 0.55rem 0.9rem; |
| border-radius: 1rem 1rem 0.25rem 1rem; |
| font-size: 0.9rem; |
| } |
|
|
| .user-bubble p { max-width: 100%; text-wrap: pretty; } |
|
|
| .markdown { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| padding: 0.65rem 0.9rem; |
| border-radius: 0.25rem 1rem 1rem 1rem; |
| font-size: 0.9rem; |
| line-height: 1.6; |
| } |
|
|
| .markdown p { margin-bottom: 0.5rem; } |
| .markdown p:last-child { margin-bottom: 0; } |
| .markdown code { |
| background: var(--surface-2); |
| padding: 0.1em 0.35em; |
| border-radius: 0.25rem; |
| font-size: 0.85em; |
| font-family: 'Fira Code', 'Cascadia Code', monospace; |
| } |
| .markdown pre { |
| background: var(--surface-2); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| padding: 0.75rem; |
| overflow-x: auto; |
| margin: 0.5rem 0; |
| } |
| .markdown pre code { background: none; padding: 0; } |
|
|
| .thinking { |
| font-size: 0.8125rem; |
| color: var(--text-muted); |
| font-style: italic; |
| padding: 0.4rem 0.6rem; |
| } |
|
|
| .cursor { |
| display: inline-block; |
| animation: blink 0.9s step-end infinite; |
| color: var(--primary); |
| margin-left: 2px; |
| } |
|
|
| @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } |
|
|
| .message-footer { |
| display: flex; |
| gap: 0.5rem; |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| padding: 0 0.25rem; |
| } |
|
|
| .tools-block { margin-top: 0.25rem; } |
|
|
| .tools-toggle { |
| display: flex; |
| align-items: center; |
| gap: 0.3rem; |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| padding: 0.2rem 0; |
| transition: color var(--transition); |
| } |
|
|
| .tools-toggle:hover { color: var(--text); } |
|
|
| .tools-list { |
| display: flex; |
| flex-direction: column; |
| gap: 0.3rem; |
| margin-top: 0.35rem; |
| } |
|
|
| .tool-row { |
| display: flex; |
| flex-direction: column; |
| gap: 0.1rem; |
| background: var(--surface-2); |
| border-radius: var(--radius-sm); |
| padding: 0.35rem 0.6rem; |
| font-size: 0.75rem; |
| } |
|
|
| .tool-row strong { color: var(--primary); } |
| .tool-row span { color: var(--text-muted); } |
|
|
| .skeleton-row { |
| height: 2rem; |
| background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); |
| background-size: 200% 100%; |
| animation: shimmer 1.4s ease-in-out infinite; |
| border-radius: var(--radius-sm); |
| margin: 0 1rem; |
| } |
|
|
| @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } |
|
|
| |
| |
| |
|
|
| .composer-frame { |
| padding: 0.75rem 1rem; |
| border-top: 1px solid var(--border); |
| flex-shrink: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 0.4rem; |
| } |
|
|
| .composer { |
| display: flex; |
| gap: 0.5rem; |
| align-items: flex-end; |
| } |
|
|
| .composer textarea { |
| flex: 1; |
| resize: none; |
| background: var(--surface-2); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 0.55rem 0.75rem; |
| font-size: 0.9rem; |
| line-height: 1.5; |
| color: var(--text); |
| outline: none; |
| transition: border-color var(--transition), box-shadow var(--transition); |
| max-height: 140px; |
| overflow-y: auto; |
| } |
|
|
| .composer textarea:focus { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px var(--primary-dim); |
| } |
|
|
| .send-button { |
| padding: 0.55rem 0.75rem; |
| flex-shrink: 0; |
| height: 2.35rem; |
| } |
|
|
| |
| |
| |
|
|
| .feed-list { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0.5rem; |
| display: flex; |
| flex-direction: column; |
| gap: 0.3rem; |
| } |
|
|
| .feed-row { |
| display: grid; |
| grid-template-columns: 1.5rem 1fr auto; |
| gap: 0.4rem; |
| align-items: start; |
| padding: 0.4rem 0.5rem; |
| border-radius: var(--radius-sm); |
| background: var(--surface-2); |
| font-size: 0.75rem; |
| } |
|
|
| .feed-icon { font-size: 1rem; line-height: 1; } |
| .feed-row strong { font-size: 0.75rem; } |
| .feed-row p { color: var(--text-muted); font-size: 0.7rem; margin-top: 0.1rem; } |
| .feed-row time { color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; } |
|
|
| .stats-card, .health-card { |
| padding: 0.65rem 1rem; |
| border-top: 1px solid var(--border); |
| flex-shrink: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 0.35rem; |
| } |
|
|
| .stat-row, .health-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| } |
|
|
| .stat-row span, .health-row span { color: var(--text-muted); } |
| .stat-row strong, .health-row strong { font-weight: 600; } |
|
|
| .health-row { gap: 0.4rem; justify-content: flex-start; } |
| .health-row span { flex: 1; } |
| .health-row strong { margin-left: auto; } |
|
|
| .muted { font-size: 0.75rem; color: var(--text-muted); padding: 0.75rem; text-align: center; } |
|
|
| |
| |
| |
|
|
| ::-webkit-scrollbar { width: 5px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } |
| ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } |
|
|
| |
| |
| |
|
|
| @media (max-width: 900px) { |
| .layout { grid-template-columns: 1fr; } |
| .left-panel, .right-panel { display: none; } |
| } |
|
|
