/* ═══════════════════════════════════════════════════════════════════════════ ETERNAL™ — Design System v3.0 "Ember Noir" ARCHITECTURE ───────────────────────────────────────────────────────────────────────── Gold is the constant thread across every module. Each module declares its signature colour via a class on : canvas/eternal-canvas.html → memory/memory.html → agents/agents.html → tools/tools.html → settings/settings.html → splash-content-types.html → The shell (eternal-shell.html) does NOT load this file — it is self-contained. All modules link: MODULE COLOUR MAP ───────────────────────────────────────────────────────────────────────── Canvas → Crimson red + dark orange creation, command Memory → Deep purple + indigo glow knowledge, recall Agents → Steel grey + cyan highlight autonomous execution Income → Gold + electric green wealth engine Admin → Electric cyan + soft blue overview, control Projects → Cyan-blue + purple edge structured creation Tools → Neon green + acid lime utilities, action Vault → Black / graphite + green pulse security, secrecy Living → Warm tan + soft gold life, home, human Settings → Bronze + cool blue configuration, tuning All share: --gold as highlight / heading accent --crimson as danger / destructive near-black void backgrounds JetBrains Mono throughout ═══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap'); /* ══════════════════════════════════════════════════════════ BASE TOKENS — shared by every module ══════════════════════════════════════════════════════════ */ :root { /* Depths */ --void: #06060e; --abyss: #09090f; --deep: #0d0a0c; --surface: #120d10; --raised: #191014; --overlay: #201318; /* Borders (gold-tinted so everything reads as one family) */ --border-dim: rgba(201,168,76,0.07); --border-mid: rgba(201,168,76,0.13); --border-hi: rgba(201,168,76,0.22); /* ── GOLD — the constant ── */ --gold: rgb(255, 215, 0); --gold-dim: rgb(230, 194, 0); --gold-mid: rgb(255, 223, 64); --gold-glow: rgba(232,201,106,0.25); --gold-trace: rgba(232,201,106,0.07); /* ── Crimson / ember (danger, destructive, close btn) ── */ --crimson: #b22222; --crimson-mid: #d42525; --crimson-hi: #ff3333; --crimson-glow: rgba(139,26,26,0.35); --ember: #ff4a1a; --ember-glow: rgba(255,74,26,0.2); /* Text */ --text-hi: #ffffff; --text-mid: #e0e0e0; --text-lo: #b0b0b0; --text-ghost: #808080; /* Status */ --status-online: #4a9a6a; --status-offline: #9a3a3a; --status-pending: #c9a84c; /* Typography */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-mono: 'JetBrains Mono', monospace; --font-body: 'JetBrains Mono', monospace; /* Layout */ --titlebar-h: 40px; --nav-w: 58px; --sidebar-w: 220px; --statusbar-h: 24px; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; /* Motion */ --ease: cubic-bezier(0.22,1,0.36,1); --ease-fast: cubic-bezier(0.4,0,0.2,1); /* ── Module accent (default = gold; overridden below) ── */ --acc: #c9a84c; --acc-hi: #e8c96a; --acc-dim: rgba(201,168,76,0.55); --acc-glow: rgba(201,168,76,0.5); --acc-soft: rgba(201,168,76,0.15); --acc-border: rgba(201,168,76,0.2); --acc-surface: rgba(201,168,76,0.07); --acc-trace: rgba(201,168,76,0.04); /* Legacy aliases — used by older module code that references these names */ --violet: var(--acc); --violet-dim: var(--acc-dim); --teal: var(--acc); --teal-dim: var(--acc-dim); } /* ══════════════════════════════════════════════════════════ MODULE ACCENT OVERRIDES Each module body class injects its canonical colour family. These vars now drive: - interactive highlights - borders / surfaces - icon glow / module headers - active nav state ══════════════════════════════════════════════════════════ */ /* CANVAS — Crimson red + dark orange */ body.mod-canvas { --acc: #8f1438; --acc-hi: #c12c55; --acc-dim: rgba(143,20,56,0.62); --acc-glow: rgba(244,198,77,0.48); --acc-soft: rgba(244,198,77,0.14); --acc-border: rgba(143,20,56,0.28); --acc-surface: rgba(143,20,56,0.10); --acc-trace: rgba(244,198,77,0.06); --module-accent: #f4c64d; --module-glow: rgba(244,198,77,0.52); --module-glow-bg:rgba(143,20,56,0.12); --violet: #8f1438; --teal: #f4c64d; } /* ADMIN — Electric cyan + soft blue */ body.mod-admin { --acc: #22c4d4; --acc-hi: #6ee7f0; --acc-dim: rgba(34,196,212,0.60); --acc-glow: rgba(150,200,255,0.42); --acc-soft: rgba(150,200,255,0.12); --acc-border: rgba(34,196,212,0.24); --acc-surface: rgba(34,196,212,0.08); --acc-trace: rgba(150,200,255,0.05); --module-accent: #22c4d4; --module-glow: rgba(150,200,255,0.46); --module-glow-bg:rgba(120,185,255,0.06); --violet: #22c4d4; --teal: #22c4d4; --teal-dim: rgba(34,196,212,0.60); } /* MEMORY — Deep purple + indigo glow */ body.mod-memory { --acc: #9b6cf5; --acc-hi: #c4a0ff; --acc-dim: rgba(155,108,245,0.60); --acc-glow: rgba(99,102,241,0.45); --acc-soft: rgba(99,102,241,0.12); --acc-border: rgba(155,108,245,0.24); --acc-surface: rgba(155,108,245,0.08); --acc-trace: rgba(99,102,241,0.05); --module-accent: #9b6cf5; --module-glow: rgba(99,102,241,0.46); --module-glow-bg:rgba(99,102,241,0.06); --violet: #9b6cf5; --violet-dim: rgba(155,108,245,0.60); --teal: #9b6cf5; } /* AGENTS — Steel grey + cyan highlight */ body.mod-agents { --acc: #6b7280; --acc-hi: #9ca3af; --acc-dim: rgba(107,114,128,0.60); --acc-glow: rgba(34,196,212,0.44); --acc-soft: rgba(34,196,212,0.12); --acc-border: rgba(34,196,212,0.24); --acc-surface: rgba(107,114,128,0.08); --acc-trace: rgba(34,196,212,0.05); --module-accent: #9ca3af; --module-glow: rgba(34,196,212,0.46); --module-glow-bg:rgba(34,196,212,0.05); --violet: #6b7280; --teal: #22c4d4; --teal-dim: rgba(34,196,212,0.60); } /* INCOME — Gold + electric green */ body.mod-income { --acc: #e8c96a; --acc-hi: #ffd86f; --acc-dim: rgba(232,201,106,0.64); --acc-glow: rgba(57,255,20,0.42); --acc-soft: rgba(57,255,20,0.13); --acc-border: rgba(232,201,106,0.26); --acc-surface: rgba(232,201,106,0.09); --acc-trace: rgba(68,153,255,0.06); --module-accent: #39ff14; --module-glow: rgba(68,153,255,0.42); --module-glow-bg:rgba(57,255,20,0.08); --violet: #e8c96a; --teal: #39ff14; --teal-dim: rgba(68,153,255,0.58); } /* PROJECTS — Cyan-blue + purple edge */ body.mod-projects { --acc: #ff8c42; --acc-hi: #ffb36e; --acc-dim: rgba(255,140,66,0.62); --acc-glow: rgba(244,198,77,0.48); --acc-soft: rgba(244,198,77,0.14); --acc-border: rgba(255,140,66,0.28); --acc-surface: rgba(255,140,66,0.10); --acc-trace: rgba(244,198,77,0.06); --module-accent: #f4c64d; --module-glow: rgba(255,168,82,0.50); --module-glow-bg:rgba(255,140,66,0.12); --violet: #ff8c42; --violet-dim: rgba(255,140,66,0.62); --teal: #f4c64d; --teal-dim: rgba(244,198,77,0.60); } /* TOOLS — Neon green + acid lime */ body.mod-tools { --acc: #39ff14; --acc-hi: #9cff57; --acc-dim: rgba(57,255,20,0.60); --acc-glow: rgba(170,255,0,0.42); --acc-soft: rgba(170,255,0,0.12); --acc-border: rgba(57,255,20,0.24); --acc-surface: rgba(57,255,20,0.06); --acc-trace: rgba(170,255,0,0.04); --module-accent: #39ff14; --module-glow: rgba(170,255,0,0.44); --module-glow-bg:rgba(170,255,0,0.06); --violet: #39ff14; --teal: #39ff14; --teal-dim: rgba(57,255,20,0.60); } /* VAULT — Black / graphite + green pulse */ body.mod-vault { --acc: #111111; --acc-hi: #2a2a2a; --acc-dim: rgba(42,42,42,0.68); --acc-glow: rgba(0,255,120,0.40); --acc-soft: rgba(0,255,120,0.10); --acc-border: rgba(0,255,120,0.20); --acc-surface: rgba(17,17,17,0.62); --acc-trace: rgba(0,255,120,0.05); --module-accent: #2a2a2a; --module-glow: rgba(0,255,120,0.44); --module-glow-bg:rgba(0,255,120,0.05); --violet: #111111; --teal: #00ff78; --teal-dim: rgba(0,255,120,0.60); } /* LIVING — Warm tan + soft gold */ body.mod-living { --acc: #d2a679; --acc-hi: #f0c27b; --acc-dim: rgba(210,166,121,0.60); --acc-glow: rgba(232,201,106,0.42); --acc-soft: rgba(232,201,106,0.12); --acc-border: rgba(210,166,121,0.24); --acc-surface: rgba(210,166,121,0.08); --acc-trace: rgba(232,201,106,0.05); --module-accent: #d2a679; --module-glow: rgba(232,201,106,0.44); --module-glow-bg:rgba(232,201,106,0.06); --violet: #d2a679; --teal: #e8c96a; } /* SETTINGS — Bronze + cool blue */ body.mod-settings { --acc: #22c4d4; --acc-hi: #6ee7f0; --acc-dim: rgba(34,196,212,0.62); --acc-glow: rgba(244,198,77,0.42); --acc-soft: rgba(244,198,77,0.12); --acc-border: rgba(34,196,212,0.26); --acc-surface: rgba(34,196,212,0.09); --acc-trace: rgba(244,198,77,0.05); --module-accent: #f4c64d; --module-glow: rgba(34,196,212,0.46); --module-glow-bg:rgba(34,196,212,0.08); --violet: #22c4d4; --teal: #22c4d4; --teal-dim: rgba(34,196,212,0.60); } /* TOOLS — alternate utility font */ body.mod-tools { --font-display: 'Syne', 'Cormorant Garamond', serif; } /* ══════════════════════════════════════════════════════════ AMBIENT BACKGROUND Base is crimson/gold nebula. Each module overlays its accent as a secondary glow on the opposite corner. ══════════════════════════════════════════════════════════ */ body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 65% 40% at 12% 6%, rgba(139,26,26,0.1) 0%, transparent 58%), radial-gradient(ellipse 45% 35% at 88% 94%, var(--acc-trace) 0%, transparent 55%), radial-gradient(ellipse 30% 50% at 55% 45%, rgba(139,26,26,0.05) 0%, transparent 55%), radial-gradient(ellipse 75% 22% at 50% 100%, rgba(255,74,26,0.03) 0%, transparent 50%); } /* Grain */ body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.4; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════════════════ */ /* Module accent bar — thin stripe at top of each module */ body.mod-canvas::after, body.mod-admin::after, body.mod-memory::after, body.mod-agents::after, body.mod-income::after, body.mod-projects::after, body.mod-tools::after, body.mod-vault::after, body.mod-living::after, body.mod-settings::after, body.mod-content::after { content:''; position:fixed; top:0; left:0; right:0; height:2px; z-index:99999; background:linear-gradient(90deg, transparent, var(--acc), var(--gold-dim), var(--acc), transparent); opacity:0.7; } /* ── TITLE BAR ────────────────────────────────────────────────────────────── */ .title-bar { position:fixed; top:0; left:0; right:0; height:var(--titlebar-h); background:rgba(6,6,14,0.94); border-bottom:1px solid var(--border-dim); display:flex; align-items:center; -webkit-app-region:drag; z-index:10000; backdrop-filter:blur(24px) saturate(1.4); } .tb-logo { width:var(--nav-w); display:flex; align-items:center; justify-content:center; -webkit-app-region:no-drag; flex-shrink:0; } .tb-logo-word { font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); text-shadow:0 0 20px var(--gold-glow); } .tb-center { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; } .tb-module-name { font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-mid); } .tb-sep { color:var(--text-ghost); font-size:9px; } .tb-breadcrumb { font-size:10px; color:var(--gold-dim); letter-spacing:0.04em; opacity:0.7; } .tb-win-controls { display:flex; align-items:center; gap:2px; padding-right:14px; -webkit-app-region:no-drag; flex-shrink:0; } .tb-win-btn { width:28px; height:28px; border-radius:6px; border:none; background:transparent; color:rgba(255,255,255,0.18); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; transition:background 0.15s, color 0.15s; } .tb-win-btn:hover { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.5); } .tb-win-btn.close:hover { background:rgba(139,26,26,0.3); color:var(--ember); } /* ── NAV RAIL ─────────────────────────────────────────────────────────────── */ .nav-rail { position:fixed; top:var(--titlebar-h); left:0; bottom:0; width:var(--nav-w); background:rgba(9,9,15,0.88); border-right:1px solid var(--border-dim); display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:2px; z-index:9999; backdrop-filter:blur(20px); } .nav-btn { width:40px; height:40px; border-radius:10px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-ghost); transition:all 0.2s var(--ease); position:relative; -webkit-app-region:no-drag; flex-shrink:0; } .nav-btn svg, .nav-btn img { transition:opacity 0.2s, filter 0.2s; } .nav-btn img { width:22px; height:22px; object-fit:cover; border-radius:4px; opacity:0.45; } .nav-btn svg { width:20px; height:20px; opacity:0.45; } .nav-btn:hover { background:rgba(201,168,76,0.07); color:var(--text-mid); } .nav-btn:hover svg, .nav-btn:hover img { opacity:0.8; } .nav-btn.active { background:linear-gradient(135deg, var(--acc-surface), rgba(201,168,76,0.05)); color:var(--acc-hi); box-shadow:inset 0 0 0 1px var(--acc-border), 0 0 12px var(--acc-trace); } .nav-btn.active img { opacity:0.95; filter:drop-shadow(0 0 5px var(--acc-soft)); } .nav-btn.active svg { opacity:1; } .nav-btn.active::before { content:''; position:absolute; left:0; top:25%; bottom:25%; width:2px; background:linear-gradient(to bottom, var(--acc), var(--gold-dim)); border-radius:0 2px 2px 0; box-shadow:0 0 8px var(--acc-soft); } /* Tooltip */ .nav-btn::after { content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); background:var(--surface); border:1px solid var(--border-mid); color:var(--text-mid); font-size:11px; letter-spacing:0.04em; padding:5px 10px; border-radius:6px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.15s; z-index:99999; box-shadow:0 4px 20px rgba(0,0,0,0.5); } .nav-btn:hover::after { opacity:1; } .nav-spacer { flex:1; } .nav-divider { width:26px; height:1px; background:var(--border-dim); margin:6px 0; flex-shrink:0; } /* Ensure buttons and interactive elements are visible */ .nav-btn, .quick-btn, .tool-card, .dash-card { background: var(--surface) !important; border: 1px solid var(--border-mid) !important; } .nav-btn:hover, .quick-btn:hover, .tool-card:hover, .dash-card:hover { border-color: var(--gold) !important; box-shadow: 0 0 10px var(--gold-glow) !important; } /* ── MODULE FRAME ─────────────────────────────────────────────────────────── */ .module-frame { position:fixed; top:var(--titlebar-h); left:var(--nav-w); right:0; bottom:var(--statusbar-h); display:none; } .module-frame.active { display:block; } .module-frame iframe { width:100%; height:100%; border:none; background:var(--void); } /* Loading state */ .frame-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:var(--void); z-index:2; transition:opacity 0.3s ease; } .loading-orb { width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 32% 28%, rgba(255,255,200,0.8) 0%, var(--gold-dim) 18%, var(--crimson) 55%, #2a0505 100%); box-shadow:0 0 20px var(--gold-glow), 0 0 50px var(--crimson-glow); animation:loadOrb 1.8s ease-in-out infinite; } @keyframes loadOrb { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} } .loading-label { font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-lo); animation:loadLabel 1.8s ease-in-out infinite; } @keyframes loadLabel { 0%,100%{opacity:.35} 50%{opacity:.9} } /* ── STATUS BAR ───────────────────────────────────────────────────────────── */ .status-bar { position:fixed; bottom:0; left:var(--nav-w); right:0; height:var(--statusbar-h); background:rgba(6,6,14,0.94); border-top:1px solid var(--border-dim); display:flex; align-items:center; padding:0 16px; gap:16px; z-index:9998; pointer-events:none; backdrop-filter:blur(12px); } .sb-item { display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--text-ghost); letter-spacing:0.05em; } .sb-dot { width:5px; height:5px; border-radius:50%; background:var(--text-ghost); flex-shrink:0; transition:background 0.4s, box-shadow 0.4s; } .sb-dot.online { background:var(--status-online); box-shadow:0 0 6px rgba(74,154,106,0.6); animation:dotPulse 2.5s ease-in-out infinite; } .sb-dot.offline { background:var(--status-offline); } @keyframes dotPulse { 0%,100%{opacity:1} 50%{opacity:0.55} } .sb-sep { width:1px; height:12px; background:var(--border-dim); } .sb-spacer { flex:1; } /* ── CANVAS LAYOUT ────────────────────────────────────────────────────────── */ .canvas-workspace { display:flex; height:100%; overflow:hidden; position:relative; z-index:2; } /* Improve sidebar visibility */ .canvas-sidebar { background: rgba(20, 20, 30, 0.9) !important; border-right: 1px solid var(--gold-dim) !important; } .sidebar-item { color: var(--text-mid) !important; } .sidebar-item:hover { background: rgba(201, 168, 76, 0.15) !important; color: var(--gold) !important; } .sidebar-item.active { background: rgba(201, 168, 76, 0.25) !important; color: var(--gold) !important; border: 1px solid var(--gold-dim) !important; } .sidebar-section-label { font-size:9.5px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-ghost); padding:0 16px 8px; margin-top:4px; } .sidebar-item { display:flex; align-items:center; gap:10px; padding:8px 16px; margin:1px 8px; border-radius:var(--radius-sm); font-size:13px; color:var(--text-lo); cursor:pointer; transition:all 0.18s var(--ease); } .sidebar-item:hover { background:var(--overlay); color:var(--text-mid); } .sidebar-item.active { background:linear-gradient(135deg, var(--acc-surface), rgba(201,168,76,0.04)); color:var(--gold-dim); box-shadow:inset 0 0 0 1px var(--acc-border); } .sidebar-item .s-icon { font-size:14px; width:18px; text-align:center; flex-shrink:0; } .sidebar-spacer { flex:1; } .sidebar-user { display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--border-dim); } .sidebar-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--crimson), var(--gold-dim)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--void); flex-shrink:0; box-shadow:0 0 12px var(--crimson-glow); } .sidebar-user-name { font-size:12px; font-weight:500; color:var(--text-mid); } .sidebar-user-status { font-size:9px; color:var(--status-online); letter-spacing:0.06em; } .canvas-content { flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; } .canvas-topbar { height:44px; background:rgba(9,9,14,0.65); border-bottom:1px solid var(--border-dim); display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; backdrop-filter:blur(12px); } .topbar-time { font-size:11px; color:var(--text-lo); letter-spacing:0.08em; margin-left:auto; } .model-badge { font-size:9.5px; letter-spacing:0.06em; padding:3px 8px; border-radius:4px; background:var(--acc-trace); border:1px solid var(--acc-border); color:var(--acc); } /* ── VIEWS ─────────────────────────────────────────────────────────────────── */ .view-panel { display:none; flex:1; overflow-y:auto; padding:32px; } .view-panel.active { display:block; } /* ── DASHBOARD ─────────────────────────────────────────────────────────────── */ .dash-greeting { font-family:var(--font-display); font-size:36px; font-weight:300; color:var(--text-hi); letter-spacing:0.02em; margin-bottom:4px; } .dash-greeting span { color:var(--gold); font-style:italic; } .dash-sub { font-size:11px; color:var(--text-lo); letter-spacing:0.1em; margin-bottom:36px; } .dash-section-title { font-size:10px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-ghost); margin-bottom:14px; margin-top:32px; border-bottom:1px solid var(--border-dim); padding-bottom:8px; } .dash-section-title:first-of-type { margin-top:0; } .quick-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; } .quick-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--radius-md); border:1px solid var(--border-mid); background:var(--surface); color:var(--text-mid); font-family:var(--font-mono); font-size:12px; font-weight:400; cursor:pointer; transition:all 0.2s var(--ease); letter-spacing:0.01em; } .quick-btn:hover { background:var(--raised); border-color:var(--acc-border); color:var(--gold); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px var(--acc-trace); } .quick-btn .qicon { font-size:15px; } .dash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; } .dash-card { background:var(--surface); border:1px solid var(--border-dim); border-radius:var(--radius-lg); padding:20px; cursor:pointer; transition:all 0.25s var(--ease); position:relative; overflow:hidden; } .dash-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--acc-trace), transparent 60%); opacity:0; transition:opacity 0.25s; } .dash-card:hover { border-color:var(--acc-border); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,0.4); } .dash-card:hover::before { opacity:1; } .dash-card-icon { font-size:24px; margin-bottom:12px; display:block; } .dash-card-title { font-size:13px; font-weight:500; color:var(--text-hi); margin-bottom:6px; } .dash-card-desc { font-size:11.5px; color:var(--text-lo); line-height:1.5; } /* ── CHAT ──────────────────────────────────────────────────────────────────── */ .chat-view { display:flex; flex-direction:column; height:100%; } .chat-messages { flex:1; overflow-y:auto; padding:24px 32px; display:flex; flex-direction:column; gap:24px; } .chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; } .chat-empty-orb { width:64px; height:64px; border-radius:50%; background:radial-gradient(135deg, var(--acc-soft), var(--gold-trace)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:500; color:var(--gold); box-shadow:0 0 40px var(--gold-glow), 0 0 80px var(--acc-soft), inset 0 0 0 1px var(--acc-border); animation:cPulse 3s ease-in-out infinite; } @keyframes cPulse { 0%,100%{opacity:.7;transform:scale(.97)} 50%{opacity:1;transform:scale(1.03)} } .chat-empty-title { font-family:var(--font-display); font-size:22px; font-weight:300; color:var(--text-mid); font-style:italic; } .chat-empty-hint { font-size:12px; color:var(--text-ghost); text-align:center; max-width:280px; line-height:1.6; } .msg { display:flex; gap:14px; max-width:700px; } .msg.user { flex-direction:row-reverse; align-self:flex-end; } .msg-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; } .msg.assistant .msg-avatar { background:linear-gradient(135deg, var(--acc-soft), var(--gold-trace)); border:1px solid var(--acc-border); color:var(--gold); font-family:var(--font-display); box-shadow:0 0 16px var(--acc-soft); } .msg.user .msg-avatar { background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.18); color:var(--gold-dim); } .msg-bubble { border-radius:var(--radius-lg); padding:14px 18px; font-size:13.5px; line-height:1.65; letter-spacing:0.01em; max-width:calc(100% - 48px); } .msg.assistant .msg-bubble { background:var(--surface); border:1px solid var(--border-dim); color:var(--text-mid); border-bottom-left-radius:var(--radius-sm); } .msg.user .msg-bubble { background:linear-gradient(135deg, var(--acc-surface), var(--gold-trace)); border:1px solid var(--acc-border); color:var(--text-hi); border-bottom-right-radius:var(--radius-sm); } .msg-bubble strong { color:var(--gold); font-weight:500; } .msg-bubble code { font-family:var(--font-mono); font-size:12px; background:rgba(0,0,0,0.35); border:1px solid var(--border-dim); border-radius:4px; padding:1px 5px; color:var(--acc-hi); } /* ── CHAT INPUT ────────────────────────────────────────────────────────────── */ .chat-input-area { padding:16px 24px 20px; border-top:1px solid var(--border-dim); background:rgba(6,6,14,0.65); backdrop-filter:blur(16px); } .chat-input-row { display:flex; align-items:flex-end; gap:10px; background:var(--surface); border:1px solid var(--border-mid); border-radius:var(--radius-xl); padding:8px 8px 8px 18px; transition:border-color 0.2s, box-shadow 0.2s; } .chat-input-row:focus-within { border-color:var(--acc-border); box-shadow:0 0 0 3px var(--acc-trace), 0 8px 32px rgba(0,0,0,0.3); } .chat-input { flex:1; background:transparent; border:none; outline:none; color:var(--text-hi); font-family:var(--font-mono); font-size:13.5px; line-height:1.5; resize:none; max-height:160px; min-height:24px; padding:6px 0; } .chat-input::placeholder { color:var(--text-ghost); } .chat-send-btn { width:36px; height:36px; border-radius:var(--radius-md); border:none; background:linear-gradient(135deg, var(--acc), var(--gold-dim)); color:var(--void); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; transition:all 0.2s var(--ease); flex-shrink:0; box-shadow:0 2px 12px var(--acc-soft); } .chat-send-btn:hover { transform:scale(1.06); box-shadow:0 4px 20px var(--acc-glow); } .chat-input-meta { display:flex; align-items:center; gap:12px; margin-top:8px; padding:0 4px; } .input-meta-hint { font-size:9.5px; color:var(--text-ghost); letter-spacing:0.06em; } /* ── STREAMING ─────────────────────────────────────────────────────────────── */ .streaming-dots { display:inline-flex; align-items:center; gap:4px; padding:8px 0; } .streaming-dots span { width:5px; height:5px; border-radius:50%; background:var(--gold-dim); animation:sDot 1.4s ease-in-out infinite; } .streaming-dots span:nth-child(2) { animation-delay:0.2s; background:var(--acc); } .streaming-dots span:nth-child(3) { animation-delay:0.4s; } @keyframes sDot { 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} } /* ── CODE BLOCKS ───────────────────────────────────────────────────────────── */ .code-block { background:#04040a; border:1px solid rgba(139,26,26,0.2); border-radius:10px; margin:12px 0; overflow:hidden; position:relative; box-shadow:0 0 0 1px var(--gold-trace), 0 4px 24px rgba(0,0,0,0.5), 0 0 60px rgba(139,26,26,0.05); font-family:var(--font-mono); font-size:13px; } .cb-header { display:flex; align-items:center; gap:8px; padding:8px 14px; background:linear-gradient(180deg,#0a0710 0%,#060510 100%); border-bottom:1px solid rgba(139,26,26,0.15); } .cb-dots { display:flex; gap:5px; } .cb-dot { width:8px; height:8px; border-radius:50%; } .cb-dot:nth-child(1) { background:var(--crimson); box-shadow:0 0 4px var(--crimson-glow); } .cb-dot:nth-child(2) { background:var(--gold-dim); box-shadow:0 0 4px var(--gold-glow); } .cb-dot:nth-child(3) { background:rgba(201,168,76,0.2); } .cb-lang { font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(201,168,76,0.45); margin-left:auto; } .cb-copy { font-size:10px; color:var(--text-lo); cursor:pointer; padding:2px 6px; border-radius:3px; transition:all 0.15s; } .cb-copy:hover { color:var(--gold); background:var(--overlay); } .cb-body { padding:14px; overflow-x:auto; line-height:1.65; color:var(--text-mid); white-space:pre; } /* Syntax */ .cb-body .kw { color:var(--acc-hi); } .cb-body .st { color:var(--gold); } .cb-body .cm { color:var(--text-ghost); font-style:italic; } .cb-body .fn { color:var(--gold-dim); } .cb-body .nu { color:#f9a55a; } /* ── AGENT CARDS ────────────────────────────────────────────────────────────── */ .agent-card { background:var(--surface); border:1px solid var(--border-dim); border-radius:var(--radius-lg); padding:16px; margin-bottom:8px; cursor:pointer; transition:all 0.2s var(--ease); position:relative; overflow:hidden; } .agent-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--acc-trace), transparent 60%); opacity:0; transition:opacity 0.2s; } .agent-card:hover { border-color:var(--acc-border); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.3); } .agent-card:hover::before { opacity:1; } .agent-card.active { border-color:var(--acc); box-shadow:0 0 20px var(--acc-soft), inset 0 0 0 1px var(--acc-trace); } .agent-card.active::before { opacity:1; } .ac-icon { font-size:22px; margin-bottom:8px; } .ac-name { font-size:13px; font-weight:500; color:var(--text-hi); margin-bottom:3px; } .ac-tone { font-size:10.5px; color:var(--text-lo); line-height:1.4; margin-bottom:8px; } .ac-mode { display:inline-block; font-size:8.5px; padding:2px 7px; border-radius:4px; background:var(--acc-surface); border:1px solid var(--acc-border); color:var(--acc); letter-spacing:0.07em; text-transform:uppercase; } /* ── MESSAGE ROWS (agents module) ─────────────────────────────────────────── */ .msg-row { display:flex; gap:10px; } .msg-row.user { flex-direction:row-reverse; } .msg-av { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; } .msg-row.ai .msg-av { background:linear-gradient(135deg,var(--acc-soft),var(--gold-trace)); border:1px solid var(--acc-border); } .msg-row.user .msg-av { background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.18); color:var(--gold-dim); } .msg-body { max-width:calc(100% - 42px); } .msg-meta { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; } .msg-name { font-size:11px; font-weight:500; color:var(--text-mid); } .msg-time { font-size:9px; color:var(--text-ghost); } .msg-text { background:var(--surface); border:1px solid var(--border-dim); border-radius:12px; padding:10px 14px; font-size:13px; color:var(--text-mid); line-height:1.6; border-bottom-left-radius:4px; white-space:pre-wrap; word-break:break-word; } .msg-row.user .msg-text { background:linear-gradient(135deg,var(--acc-surface),var(--gold-trace)); border-color:var(--acc-border); color:var(--text-hi); border-bottom-left-radius:12px; border-bottom-right-radius:4px; } .msg-footer { font-size:9px; color:var(--text-ghost); margin-top:4px; } /* ── TOOL CARDS ────────────────────────────────────────────────────────────── */ .tool-card { background:var(--surface); border:1px solid var(--border-dim); border-radius:var(--radius-lg); padding:20px; cursor:pointer; transition:all 0.22s var(--ease); position:relative; overflow:hidden; } .tool-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--acc-trace),transparent 60%); opacity:0; transition:opacity 0.22s; } .tool-card:hover { border-color:var(--acc-border); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,0.4); } .tool-card:hover::before { opacity:1; } .tool-card.active { border-color:var(--acc); box-shadow:0 0 20px var(--acc-soft); } .tc-icon { font-size:22px; margin-bottom:10px; } .tc-name { font-size:13px; font-weight:500; color:var(--text-hi); margin-bottom:5px; } .tc-desc { font-size:11px; color:var(--text-lo); line-height:1.5; margin-bottom:10px; } .tc-status { display:inline-flex; align-items:center; gap:5px; font-size:9px; letter-spacing:0.06em; padding:3px 8px; border-radius:4px; } .tc-status.online { background:rgba(74,154,106,0.12); border:1px solid rgba(74,154,106,0.22); color:var(--status-online); } .tc-status.offline { background:rgba(139,26,26,0.1); border:1px solid rgba(139,26,26,0.2); color:var(--crimson-mid); } .tc-status.pending { background:var(--acc-surface); border:1px solid var(--acc-border); color:var(--acc); } /* ── SETTINGS ROWS ─────────────────────────────────────────────────────────── */ .setting-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.03); } .setting-row:last-child { border-bottom:none; } .setting-info { flex:1; } .setting-name { font-size:13px; color:var(--text-hi); margin-bottom:3px; font-weight:500; } .setting-desc { font-size:11px; color:var(--text-lo); line-height:1.4; } .setting-value { font-size:10.5px; color:var(--gold-dim); letter-spacing:0.04em; flex-shrink:0; margin-left:16px; } .status-pill { display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:0.06em; padding:4px 10px; border-radius:5px; } .status-pill.online { background:rgba(74,154,106,0.1); border:1px solid rgba(74,154,106,0.22); color:var(--status-online); } .status-pill.offline { background:rgba(139,26,26,0.1); border:1px solid rgba(139,26,26,0.2); color:var(--crimson-mid); } .status-pill.active { background:var(--acc-surface); border:1px solid var(--acc-border); color:var(--acc); } .status-pill .sp-dot { width:5px; height:5px; border-radius:50%; background:currentColor; } .status-pill.online .sp-dot { animation:dotPulse 2.5s ease-in-out infinite; } .ver-badge { font-size:11px; color:var(--text-lo); background:var(--surface); border:1px solid var(--border-dim); border-radius:5px; padding:3px 10px; } /* ── INPUTS (shared) ───────────────────────────────────────────────────────── */ input, textarea, select { background:var(--raised); border:1px solid var(--border-mid); border-radius:var(--radius-sm); color:var(--text-hi); font-family:var(--font-mono); font-size:12px; outline:none; transition:border-color 0.2s, box-shadow 0.2s; } input:focus, textarea:focus { border-color:var(--acc-border); box-shadow:0 0 0 3px var(--acc-trace); } input::placeholder, textarea::placeholder { color:var(--text-ghost); } /* Agent module input overrides */ .input-row { display:flex; gap:8px; background:var(--surface); border:1px solid var(--border-mid); border-radius:var(--radius-xl); padding:6px 6px 6px 14px; transition:border-color 0.2s; } .input-row:focus-within { border-color:var(--acc-border); box-shadow:0 0 0 3px var(--acc-trace); } #inputBox { flex:1; background:transparent; border:none; outline:none; color:var(--text-hi); font-family:var(--font-mono); font-size:13px; line-height:1.5; resize:none; max-height:120px; min-height:22px; padding:4px 0; } #inputBox::placeholder { color:var(--text-ghost); } #sendBtn { background:linear-gradient(135deg, var(--acc), var(--gold-dim)); border:none; border-radius:var(--radius-md); color:var(--void); font-family:var(--font-mono); font-weight:500; font-size:12px; padding:0 16px; cursor:pointer; white-space:nowrap; transition:opacity 0.2s; min-height:34px; box-shadow:0 2px 10px var(--acc-soft); } #sendBtn:hover { opacity:0.9; } #sendBtn:disabled { opacity:0.35; cursor:default; } .input-hint { font-size:9.5px; color:var(--text-ghost); margin-top:6px; } .input-hint kbd { background:var(--deep); border:1px solid var(--border-dim); padding:1px 5px; border-radius:3px; font-size:8.5px; } /* ── SCROLLBARS ────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width:4px; height:4px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--acc-border); border-radius:2px; } ::-webkit-scrollbar-thumb:hover { background:var(--acc-dim); } /* ── TOASTS ─────────────────────────────────────────────────────────────────── */ .toast-container { position:fixed; top:calc(var(--titlebar-h) + 12px); right:16px; z-index:99999; display:flex; flex-direction:column; gap:8px; pointer-events:none; } .toast { background:var(--surface); border:1px solid var(--border-mid); border-left:2px solid var(--gold-dim); border-radius:10px; padding:10px 16px; font-size:12px; color:var(--text-mid); letter-spacing:0.02em; box-shadow:0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--gold-trace); animation:toastIn 0.3s var(--ease), toastOut 0.3s ease 3.7s forwards; display:flex; align-items:center; gap:10px; backdrop-filter:blur(16px); } .toast-dot { width:6px; height:6px; border-radius:50%; background:var(--gold-dim); flex-shrink:0; } @keyframes toastIn { from{opacity:0;transform:translateX(16px) scale(0.96)} to{opacity:1;transform:none} } @keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateY(-8px) scale(0.96)} } /* ── KB HINT ────────────────────────────────────────────────────────────────── */ .kb-hint { position:fixed; bottom:32px; left:calc(var(--nav-w) + 16px); font-size:9px; letter-spacing:0.1em; color:var(--text-ghost); pointer-events:none; z-index:9997; opacity:0.45; } /* ── SELECTION ──────────────────────────────────────────────────────────────── */ ::selection { background:var(--acc-soft); color:var(--text-hi); } /* ── ANIMATIONS ─────────────────────────────────────────────────────────────── */ @keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } .animate-fadeup { animation:fadeUp 0.4s var(--ease) forwards; } .animate-fadein { animation:fadeIn 0.3s ease forwards; } /* ═══════════════════════════════════════════════════════════════════════════ ETERNAL — Module Icon Header System Add to eternal-design-system.css OR paste into each module's