danielsanga/personalagent-integration
0
1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');2 3:root {4 --bg-base: #0d0f14;5 --bg-surface: #13161e;6 --bg-elevated: #1a1e2a;7 --bg-input: #1e2330;8 --border: rgba(255,255,255,0.07);9 --border-bright: rgba(255,255,255,0.13);10 11 --accent: #6366f1;12 --accent-glow: rgba(99,102,241,0.25);13 --accent-hover: #818cf8;14 15 --success: #22c55e;16 --warning: #f59e0b;17 --danger: #ef4444;18 19 --text-primary: #f0f2ff;20 --text-secondary:#8b92a5;21 --text-muted: #4b5168;22 23 --radius-sm: 6px;24 --radius-md: 12px;25 --radius-lg: 18px;26 --radius-xl: 24px;27}28 29*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }30 31html { scroll-behavior: smooth; }32 33body {34 background: var(--bg-base);35 color: var(--text-primary);36 font-family: 'Inter', system-ui, sans-serif;37 font-size: 15px;38 line-height: 1.6;39 -webkit-font-smoothing: antialiased;40 -moz-osx-font-smoothing: grayscale;41 min-height: 100vh;42}43 44a { color: inherit; text-decoration: none; }45 46/* ── Scrollbar ─────────────────────────────────────────── */47::-webkit-scrollbar { width: 6px; height: 6px; }48::-webkit-scrollbar-track { background: transparent; }49::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 99px; }50 51/* ── Layout shell ──────────────────────────────────────── */52.shell {53 display: flex;54 height: 100vh;55 overflow: hidden;56}57 58/* ── Sidebar ───────────────────────────────────────────── */59.sidebar {60 width: 240px;61 flex-shrink: 0;62 background: var(--bg-surface);63 border-right: 1px solid var(--border);64 display: flex;65 flex-direction: column;66 padding: 20px 0;67 gap: 4px;68}69 70.sidebar-logo {71 display: flex;72 align-items: center;73 gap: 10px;74 padding: 0 20px 20px;75 border-bottom: 1px solid var(--border);76 margin-bottom: 8px;77}78 79.logo-icon {80 width: 32px; height: 32px;81 background: linear-gradient(135deg, var(--accent), #a78bfa);82 border-radius: var(--radius-sm);83 display: flex; align-items: center; justify-content: center;84 font-size: 16px;85 box-shadow: 0 0 16px var(--accent-glow);86 flex-shrink: 0;87}88 89.logo-text {90 font-size: 14px;91 font-weight: 600;92 color: var(--text-primary);93 letter-spacing: -0.01em;94}95.logo-text span { color: var(--text-secondary); font-weight: 400; }96 97.nav-item {98 display: flex;99 align-items: center;100 gap: 10px;101 margin: 0 12px;102 padding: 9px 12px;103 border-radius: var(--radius-sm);104 color: var(--text-secondary);105 font-size: 13.5px;106 font-weight: 500;107 cursor: pointer;108 transition: all 0.15s ease;109 border: none;110 background: none;111 width: calc(100% - 24px);112 text-align: left;113 text-decoration: none;114}115 116.nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }117.nav-item.active { background: var(--accent-glow); color: var(--accent-hover); }118 119.nav-badge {120 margin-left: auto;121 background: var(--danger);122 color: white;123 font-size: 10px;124 font-weight: 700;125 padding: 1px 6px;126 border-radius: 99px;127}128 129.sidebar-footer {130 margin-top: auto;131 padding: 12px 20px 0;132 border-top: 1px solid var(--border);133}134 135.status-dot {136 display: inline-flex;137 align-items: center;138 gap: 6px;139 font-size: 12px;140 color: var(--text-muted);141}142 143.dot {144 width: 7px; height: 7px;145 border-radius: 50%;146 background: var(--success);147 box-shadow: 0 0 6px var(--success);148 animation: pulse 2s infinite;149}150 151@keyframes pulse {152 0%, 100% { opacity: 1; }153 50% { opacity: 0.4; }154}155 156/* ── Main area ─────────────────────────────────────────── */157.main {158 flex: 1;159 display: flex;160 flex-direction: column;161 overflow: hidden;162}163 164/* ── Chat layout ───────────────────────────────────────── */165.chat-layout {166 flex: 1;167 display: flex;168 flex-direction: column;169 overflow: hidden;170}171 172.chat-header {173 padding: 16px 28px;174 border-bottom: 1px solid var(--border);175 display: flex;176 align-items: center;177 gap: 12px;178 background: var(--bg-surface);179 flex-shrink: 0;180}181 182.chat-header h1 {183 font-size: 15px;184 font-weight: 600;185 color: var(--text-primary);186}187 188.chat-header p {189 font-size: 12px;190 color: var(--text-muted);191}192 193/* ── Messages ──────────────────────────────────────────── */194.messages {195 flex: 1;196 overflow-y: auto;197 padding: 28px;198 display: flex;199 flex-direction: column;200 gap: 20px;201}202 203.message {204 display: flex;205 gap: 12px;206 max-width: 780px;207 animation: fadeUp 0.2s ease;208}209 210.message.user { flex-direction: row-reverse; align-self: flex-end; }211 212@keyframes fadeUp {213 from { opacity: 0; transform: translateY(8px); }214 to { opacity: 1; transform: translateY(0); }215}216 217.avatar {218 width: 32px; height: 32px;219 border-radius: 50%;220 display: flex; align-items: center; justify-content: center;221 font-size: 14px;222 flex-shrink: 0;223 margin-top: 2px;224}225 226.avatar.agent { background: linear-gradient(135deg, var(--accent), #a78bfa); box-shadow: 0 0 12px var(--accent-glow); }227.avatar.user { background: var(--bg-elevated); border: 1px solid var(--border-bright); }228 229.bubble {230 background: var(--bg-elevated);231 border: 1px solid var(--border);232 border-radius: var(--radius-lg);233 padding: 12px 16px;234 font-size: 14px;235 line-height: 1.65;236 color: var(--text-primary);237 max-width: 100%;238}239 240.message.user .bubble {241 background: linear-gradient(135deg, #3730a3, var(--accent));242 border-color: transparent;243 border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);244}245 246.bubble-meta {247 font-size: 11px;248 color: var(--text-muted);249 margin-top: 4px;250}251 252.message.user .bubble-meta { text-align: right; }253 254/* Plan card inside bubble */255.plan-card {256 margin-top: 10px;257 background: var(--bg-input);258 border: 1px solid var(--border-bright);259 border-radius: var(--radius-md);260 overflow: hidden;261}262 263.plan-card-header {264 padding: 8px 14px;265 font-size: 11px;266 font-weight: 600;267 letter-spacing: 0.06em;268 text-transform: uppercase;269 color: var(--text-muted);270 border-bottom: 1px solid var(--border);271 background: rgba(255,255,255,0.02);272}273 274.plan-step {275 padding: 10px 14px;276 display: flex;277 align-items: flex-start;278 gap: 10px;279 border-bottom: 1px solid var(--border);280 font-size: 13px;281}282 283.plan-step:last-child { border-bottom: none; }284 285.step-pill {286 font-size: 10px;287 font-weight: 700;288 padding: 2px 8px;289 border-radius: 99px;290 white-space: nowrap;291 flex-shrink: 0;292}293 294.step-pill.read { background: rgba(34,197,94,0.15); color: var(--success); }295.step-pill.write { background: rgba(245,158,11,0.15); color: var(--warning); }296.step-pill.approved { background: rgba(34,197,94,0.15); color: var(--success); }297.step-pill.pending { background: rgba(245,158,11,0.15); color: var(--warning); }298 299.step-desc { color: var(--text-secondary); flex: 1; }300 301/* Approval inline buttons */302.approval-actions {303 margin-top: 12px;304 display: flex;305 gap: 8px;306}307 308/* ── Input bar ─────────────────────────────────────────── */309.input-bar {310 padding: 16px 28px 20px;311 border-top: 1px solid var(--border);312 background: var(--bg-surface);313 flex-shrink: 0;314}315 316.input-wrap {317 display: flex;318 gap: 10px;319 align-items: flex-end;320 background: var(--bg-input);321 border: 1px solid var(--border-bright);322 border-radius: var(--radius-lg);323 padding: 10px 14px;324 transition: border-color 0.15s;325}326 327.input-wrap:focus-within {328 border-color: var(--accent);329 box-shadow: 0 0 0 3px var(--accent-glow);330}331 332.input-wrap textarea {333 flex: 1;334 background: none;335 border: none;336 outline: none;337 color: var(--text-primary);338 font-size: 14px;339 font-family: inherit;340 resize: none;341 line-height: 1.5;342 max-height: 160px;343 min-height: 24px;344}345 346.input-wrap textarea::placeholder { color: var(--text-muted); }347 348.send-btn {349 width: 36px; height: 36px;350 border-radius: var(--radius-sm);351 background: var(--accent);352 border: none;353 color: white;354 cursor: pointer;355 display: flex; align-items: center; justify-content: center;356 font-size: 16px;357 flex-shrink: 0;358 transition: background 0.15s, transform 0.1s, box-shadow 0.15s;359}360 361.send-btn:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 0 12px var(--accent-glow); }362.send-btn:active:not(:disabled) { transform: scale(0.93); }363.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }364 365.input-hint {366 margin-top: 8px;367 font-size: 11px;368 color: var(--text-muted);369 text-align: center;370}371 372/* ── Spinner / typing ──────────────────────────────────── */373.typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }374.typing span {375 width: 6px; height: 6px;376 background: var(--text-muted);377 border-radius: 50%;378 animation: bounce 1.2s infinite;379}380.typing span:nth-child(2) { animation-delay: 0.15s; }381.typing span:nth-child(3) { animation-delay: 0.3s; }382 383@keyframes bounce {384 0%, 80%, 100% { transform: translateY(0); }385 40% { transform: translateY(-5px); }386}387 388/* ── Buttons ───────────────────────────────────────────── */389.btn {390 display: inline-flex; align-items: center; gap: 6px;391 padding: 8px 16px;392 border-radius: var(--radius-sm);393 font-size: 13px;394 font-weight: 600;395 font-family: inherit;396 cursor: pointer;397 border: none;398 transition: all 0.15s;399}400 401.btn-success {402 background: rgba(34,197,94,0.15);403 color: var(--success);404 border: 1px solid rgba(34,197,94,0.3);405}406.btn-success:hover { background: rgba(34,197,94,0.25); }407 408.btn-danger {409 background: rgba(239,68,68,0.12);410 color: var(--danger);411 border: 1px solid rgba(239,68,68,0.25);412}413.btn-danger:hover { background: rgba(239,68,68,0.22); }414 415.btn-primary {416 background: var(--accent);417 color: white;418}419.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 12px var(--accent-glow); }420 421.btn:disabled { opacity: 0.4; cursor: not-allowed; }422 423/* ── Dashboard layout ──────────────────────────────────── */424.dashboard-layout {425 flex: 1;426 overflow-y: auto;427 padding: 32px 36px;428 display: flex;429 flex-direction: column;430 gap: 28px;431}432 433.page-title {434 font-size: 22px;435 font-weight: 700;436 color: var(--text-primary);437 letter-spacing: -0.02em;438}439 440.page-subtitle { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }441 442.section-title {443 font-size: 12px;444 font-weight: 700;445 letter-spacing: 0.07em;446 text-transform: uppercase;447 color: var(--text-muted);448 margin-bottom: 12px;449}450 451.card {452 background: var(--bg-surface);453 border: 1px solid var(--border);454 border-radius: var(--radius-lg);455 overflow: hidden;456}457 458.card-row {459 padding: 16px 20px;460 display: flex;461 align-items: center;462 gap: 14px;463 border-bottom: 1px solid var(--border);464}465 466.card-row:last-child { border-bottom: none; }467 468.card-icon {469 width: 38px; height: 38px;470 border-radius: var(--radius-sm);471 display: flex; align-items: center; justify-content: center;472 font-size: 18px;473 flex-shrink: 0;474}475 476.icon-warning { background: rgba(245,158,11,0.12); }477.icon-success { background: rgba(34,197,94,0.12); }478.icon-info { background: rgba(99,102,241,0.12); }479 480.card-row-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }481.card-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }482 483.card-row-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }484 485/* Stat row */486.stat-grid {487 display: grid;488 grid-template-columns: repeat(3, 1fr);489 gap: 14px;490}491 492.stat-card {493 background: var(--bg-surface);494 border: 1px solid var(--border);495 border-radius: var(--radius-lg);496 padding: 20px;497}498 499.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }500.stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-top: 4px; letter-spacing: -0.03em; }501.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }502 503/* ── Empty state ───────────────────────────────────────── */504.empty-state {505 padding: 40px;506 text-align: center;507 color: var(--text-muted);508 font-size: 13.5px;509}510 511/* ── Welcome banner ────────────────────────────────────── */512.welcome-banner {513 background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(167,139,250,0.08));514 border: 1px solid rgba(99,102,241,0.2);515 border-radius: var(--radius-xl);516 padding: 28px 32px;517 display: flex;518 gap: 20px;519 align-items: flex-start;520}521 522.welcome-emoji { font-size: 40px; line-height: 1; flex-shrink: 0; }523.welcome-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }524.welcome-desc { font-size: 13.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.6; }525 526.suggestions {527 margin-top: 16px;528 display: flex;529 flex-wrap: wrap;530 gap: 8px;531}532 533.suggestion-chip {534 padding: 6px 14px;535 background: var(--bg-elevated);536 border: 1px solid var(--border-bright);537 border-radius: 99px;538 font-size: 12.5px;539 color: var(--text-secondary);540 cursor: pointer;541 transition: all 0.15s;542 font-family: inherit;543}544 545.suggestion-chip:hover {546 background: var(--accent-glow);547 border-color: rgba(99,102,241,0.4);548 color: var(--accent-hover);549}550 551/* ── Monospace result ──────────────────────────────────── */552.result-block {553 margin-top: 10px;554 background: var(--bg-base);555 border: 1px solid var(--border);556 border-radius: var(--radius-md);557 padding: 12px 14px;558 font-family: 'JetBrains Mono', monospace;559 font-size: 12px;560 color: var(--text-secondary);561 overflow-x: auto;562 white-space: pre-wrap;563 word-break: break-word;564 max-height: 320px;565 overflow-y: auto;566}567 568/* ── Utilities ─────────────────────────────────────────── */569.flex-center { display: flex; align-items: center; }570.gap-8 { gap: 8px; }571.gap-12 { gap: 12px; }572.mt-4 { margin-top: 4px; }573.mt-8 { margin-top: 8px; }574