:root { --bg0: #020206; --bg1: #080c14; --bg2: #0c1120; --line: #1c2333; --text: #f1f2f6; --muted: #9aa1b5; --accent: #f59e0b; --accent2: #c084fc; --danger: #f87171; --warn: #fbbf24; --ok: #34d399; --font-display: -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace; } /* Light theme: token-level overrides. ares-panel.js stamps data-ares-theme="light" on from the server-persisted user preference (PATCH /api/auth/me, cached in localStorage for instant apply); dark stays the default. Components style through the tokens, so most pages need no per-rule light variants. */ html[data-ares-theme="light"] { --bg0: #f6f7fb; --bg1: #eef0f6; --bg2: #ffffff; --line: #d7dbe7; --text: #171a23; --muted: #5b6272; --accent: #d97706; --accent2: #7c3aed; --danger: #dc2626; --warn: #b45309; --ok: #047857; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: radial-gradient(1200px 600px at 10% -10%, rgba(168, 85, 247, 0.14) 0%, transparent 55%), radial-gradient(900px 500px at 100% 0%, rgba(245, 158, 11, 0.10) 0%, transparent 50%), linear-gradient(180deg, #050810 0%, var(--bg0) 100%); color: var(--text); font: 14px/1.45 var(--font-display); } html[data-ares-theme="light"], html[data-ares-theme="light"] body { background: radial-gradient(1200px 600px at 10% -10%, rgba(124, 58, 237, 0.07) 0%, transparent 55%), radial-gradient(900px 500px at 100% 0%, rgba(217, 119, 6, 0.06) 0%, transparent 50%), linear-gradient(180deg, #eef0f6 0%, var(--bg0) 100%); } html[data-ares-theme="light"] nav { background: rgba(255, 255, 255, 0.92); } /* Vultify mark: a "V" converging on a pulsing emerald core -- idle breathing animation reads as "alive", hover intensifies it. Ported verbatim from vultify-website's styles.css so the mark behaves identically wherever it appears across the Ares/Vultify surface. */ .vultify-mark { overflow: visible; flex-shrink: 0; transition: filter 0.3s ease; } .vultify-mark .vm-ring { transform-origin: 32px 32px; opacity: 0.18; animation: vm-ring-breathe 3.6s ease-in-out infinite; } .vultify-mark .vm-core { transform-origin: 32px 44px; filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.85)); animation: vm-core-pulse 3.6s ease-in-out infinite; } @keyframes vm-core-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.22); opacity: 1; } } @keyframes vm-ring-breathe { 0%, 100% { opacity: 0.12; r: 25; } 50% { opacity: 0.32; r: 27; } } .brand-link:hover .vultify-mark { filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.55)); } .brand-link:hover .vultify-mark .vm-core, .brand-link:hover .vultify-mark .vm-ring { animation-duration: 1.1s; } @media (prefers-reduced-motion: reduce) { .vultify-mark .vm-ring, .vultify-mark .vm-core { animation: none; } } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.04; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; } .shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } nav { border-right: 1px solid var(--line); background: rgba(5, 8, 16, 0.92); padding: 20px 14px; position: sticky; top: 0; height: 100vh; } .brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .brand-row .vultify-mark { margin-bottom: 0; } .brand { font-size: 1.35rem; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0; } .brand span { color: var(--muted); font-size: 0.7rem; display: block; letter-spacing: 0.14em; } .killswitch-box { margin-bottom: 14px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); } .btn-kill { width: 100%; padding: 10px 12px; border: none; border-radius: 6px; background: #ef4444; color: #fff; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; } .btn-kill:hover { background: #dc2626; } .btn-kill.triggered { background: #16a34a; } .btn-kill.triggered:hover { background: #15803d; } .killswitch-status { margin-top: 6px; font-size: 0.7rem; color: var(--muted); text-align: center; } .killswitch-status.triggered { color: #ef4444; font-weight: 600; } nav button { width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 10px 12px; margin: 4px 0; border-radius: 8px; cursor: pointer; } nav button.active, nav button:hover { color: var(--text); border-color: var(--line); background: var(--bg2); } .mobile-topbar { display: none; } #nav-backdrop { display: none; } main { padding: 24px 28px 48px; } h1 { margin: 0 0 6px; font-size: 1.6rem; } .sub { color: var(--muted); margin-bottom: 20px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .card { background: linear-gradient(180deg, var(--bg1), var(--bg2)); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .card h3 { margin: 0 0 8px; font-size: 1.05rem; } .meta { color: var(--muted); font-size: 0.85rem; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent2); } .badge.ver { color: var(--accent); } .badge-pending { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 600; vertical-align: middle; } .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; } button.btn, .btn { background: var(--accent); color: #15120a; border: none; border-radius: 8px; padding: 8px 12px; font-weight: 600; cursor: pointer; } button.btn.secondary { background: var(--bg2); color: var(--text); border: 1px solid var(--line); } button.btn.danger { background: var(--danger); color: #1a0a0a; } .btn.ok { background: var(--ok); color: #052e1c; } input, select, textarea { width: 100%; background: var(--bg0); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; margin: 6px 0 12px; font: inherit; } textarea { min-height: 90px; font-family: var(--font-mono); font-size: 12px; } label { color: var(--muted); font-size: 0.85rem; } .panel { display: none; } .panel.active { display: block; animation: fade 0.25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; } th { color: var(--muted); font-weight: 500; } .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--muted); } .status-dot.ok { background: var(--ok); } .status-dot.bad { background: var(--danger); } .status-dot.warn { background: var(--warn); } .mono { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; } .flash { margin-top: 10px; color: var(--accent2); } .chat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; min-height: 70vh; } .chat-sidebar { max-height: 75vh; overflow: auto; } .chat-session-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .chat-session-item { text-align: left; width: 100%; background: var(--bg0); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; } .chat-session-item.active, .chat-session-item:hover { border-color: var(--accent); } .chat-session-item .meta { display: block; margin-top: 4px; } .chat-main { display: flex; flex-direction: column; min-height: 70vh; max-height: 75vh; } .chat-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 8px; } .chat-messages { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 12px; } .chat-bubble { max-width: 92%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg0); white-space: pre-wrap; } .chat-bubble.user { align-self: flex-end; border-color: #3a2a52; } .chat-bubble.assistant { align-self: flex-start; border-color: #4a3a1a; } .chat-bubble.tool { align-self: stretch; max-width: 100%; background: transparent; padding: 0; border: none; } .chat-bubble .role { font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .tool-trace { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin: 4px 0; font-family: var(--font-mono); font-size: 12px; } .tool-trace summary { cursor: pointer; color: var(--accent2); } .tool-trace pre { margin: 8px 0 0; white-space: pre-wrap; color: var(--muted); max-height: 180px; overflow: auto; } .chat-composer { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; } .chat-composer textarea { margin-bottom: 8px; min-height: 70px; } /* Overview analytics */ .overview-filter { width: auto; min-width: 140px; padding: 6px 10px; } .overview-stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .stat-card h3 { font-size: 1.8rem; margin: 0; color: var(--accent); } .stat-row { display: flex; gap: 18px; flex-wrap: wrap; } .insights-list { margin-top: 10px; } .insight-item { padding: 8px 10px; margin: 4px 0; border-left: 3px solid var(--accent2); background: rgba(192, 132, 252, 0.08); font-size: 0.9rem; } .activity-timeline { max-height: 320px; overflow-y: auto; margin-top: 8px; } .activity-row { display: grid; grid-template-columns: 100px 100px 80px 1fr 12px; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .activity-time { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; } .activity-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-kind { color: var(--muted); font-size: 0.78rem; } .agent-metrics { display: flex; gap: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent2); } .integrations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; } .integration-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg0); } .integration-card.active { border-color: var(--accent2); } .integration-status.ok { color: var(--ok); } .integration-status.warn { color: var(--warn); } .integration-status.muted { color: var(--muted); } .integration-card a { color: var(--accent); text-decoration: none; } .integration-card a:hover { text-decoration: underline; } .appr-detail { padding: 8px 4px 12px; } .appr-detail .meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; } .appr-detail .meta a { color: var(--accent2); } .appr-detail pre { font-family: var(--font-mono); font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow-y: auto; overflow-x: auto; margin: 4px 0 10px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg1); } .diff-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .diff-old { border-left: 3px solid var(--danger); } .diff-new { border-left: 3px solid var(--ok); } .appr-json { color: var(--muted); } @media (max-width: 820px) { .shell { grid-template-columns: 1fr; } /* Slim always-visible top bar: hamburger + brand + duplicate STOP. This is the one thing that must never be hidden behind the drawer. */ .mobile-topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; padding: 10px 12px; background: rgba(5, 8, 16, 0.96); border-bottom: 1px solid var(--line); } .nav-toggle-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); cursor: pointer; } .nav-toggle-btn span { display: block; width: 16px; height: 2px; margin: 0 auto; background: var(--text); border-radius: 2px; } .mobile-topbar-brand { flex: 1; color: var(--accent); font-size: 1rem; letter-spacing: 0.08em; } .btn-kill-mobile { width: auto; padding: 8px 16px; font-size: 0.8rem; } /* Dimming backdrop, only intercepts clicks while the drawer is open. */ #nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 35; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .shell.nav-open #nav-backdrop { opacity: 1; pointer-events: auto; } /* Off-canvas drawer: same