neoagent 1.6.0 → 2.0.0

package/server/public/css/styles.css

@@ -1,963 +0,0 @@
-/* ══════════════════════════════════════════
-   NeoAgent  ·  Design System  ·  v2
-   ══════════════════════════════════════════ */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
-
-/* ── design tokens ── */
-:root {
-  /* backgrounds */
-  --bg-0: #07070f;
-  --bg-1: #0c0c18;
-  --bg-2: #111120;
-  --bg-3: #181828;
-  --bg-4: #1e1e32;
-  --bg-5: #262640;
-
-  /* contextual aliases */
-  --bg-primary: var(--bg-0);
-  --bg-secondary: var(--bg-1);
-  --bg-tertiary: var(--bg-2);
-  --bg-card: var(--bg-3);
-  --bg-hover: var(--bg-5);
-  --bg-input: var(--bg-1);
-  --bg-modal: rgba(14, 14, 26, .96);
-  --bg-toast: rgba(18, 18, 32, .92);
-  --bg-logs: rgba(5, 10, 18, .8);
-
-  /* borders */
-  --border: rgba(255, 255, 255, .07);
-  --border-light: rgba(255, 255, 255, .13);
-
-  /* text */
-  --text-primary: #eaeaf4;
-  --text-secondary: #8080a8;
-  --text-muted: #4d4d6a;
-
-  /* accent */
-  --accent: #6366f1;
-  --accent-hover: #818cf8;
-  --accent-dim: rgba(99, 102, 241, .12);
-  --accent-glow: rgba(99, 102, 241, .28);
-  --accent-muted: rgba(99, 102, 241, .15);
-
-  /* semantic */
-  --success: #22c55e;
-  --warning: #f59e0b;
-  --error: #ef4444;
-  --info: #3b82f6;
-
-  /* layout */
-  --sidebar-width: 220px;
-  --header-height: 56px;
-
-  /* shape */
-  --radius: 8px;
-  --radius-lg: 14px;
-  --radius-xl: 20px;
-
-  /* shadow */
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
-  --shadow: 0 8px 32px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
-
-  /* motion */
-  --ease-out: cubic-bezier(.16, 1, .3, 1);
-  --ease-in: cubic-bezier(.7, 0, .84, 0);
-  --t-fast: 100ms;
-  --t-mid: 200ms;
-  --t-slow: 360ms;
-  --transition: var(--t-mid) var(--ease-out);
-
-  color-scheme: dark;
-}
-
-[data-theme="light"] {
-  /* backgrounds */
-  --bg-0: #f5f5fa;
-  --bg-1: #eeeef6;
-  --bg-2: #e5e5f0;
-  --bg-3: #dcdcec;
-  --bg-4: #d0d0e0;
-  --bg-5: #c8c8da;
-
-  --bg-primary: var(--bg-0);
-  --bg-secondary: var(--bg-1);
-  --bg-tertiary: var(--bg-2);
-  --bg-card: var(--bg-3);
-  --bg-hover: var(--bg-5);
-  --bg-input: var(--bg-1);
-  --bg-modal: rgba(240, 240, 250, .97);
-  --bg-toast: rgba(235, 235, 248, .95);
-  --bg-logs: rgba(228, 228, 240, .9);
-
-  /* borders */
-  --border: rgba(0, 0, 0, .08);
-  --border-light: rgba(0, 0, 0, .15);
-
-  /* text */
-  --text-primary: #1a1a2e;
-  --text-secondary: #4a4a6a;
-  --text-muted: #8080a0;
-
-  /* accent — same hue, keep brand consistent */
-  --accent: #5254cc;
-  --accent-hover: #6366f1;
-  --accent-dim: rgba(82, 84, 204, .12);
-  --accent-glow: rgba(82, 84, 204, .22);
-  --accent-muted: rgba(82, 84, 204, .12);
-
-  /* shadow — lighter for light mode */
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
-  --shadow: 0 8px 32px rgba(0, 0, 0, .12);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .18);
-
-  color-scheme: light;
-}
-
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html,
-body {
-  height: 100%;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-  background: var(--bg-0);
-  color: var(--text-primary);
-  font-size: 14px;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  color: var(--accent);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--accent-hover);
-}
-
-button,
-input,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
-::selection {
-  background: var(--accent);
-  color: white;
-}
-
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, .1);
-  border-radius: 99px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, .2);
-}
-
-/* ── Buttons ── */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 8px 16px;
-  border-radius: var(--radius);
-  border: 1px solid transparent;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background var(--t-fast, 100ms), border-color var(--t-fast, 100ms), transform var(--t-fast, 100ms), box-shadow var(--t-fast, 100ms);
-  white-space: nowrap;
-  font-size: 13px;
-  user-select: none;
-  position: relative;
-}
-
-.btn:active {
-  transform: scale(.96);
-}
-
-.btn-primary {
-  background: var(--accent);
-  color: white;
-  border-color: var(--accent);
-  box-shadow: 0 2px 10px rgba(99, 102, 241, .3);
-}
-
-.btn-primary:hover {
-  background: var(--accent-hover);
-  border-color: var(--accent-hover);
-  box-shadow: 0 4px 18px rgba(99, 102, 241, .45);
-}
-
-.btn-secondary {
-  background: rgba(255, 255, 255, .04);
-  color: var(--text-primary);
-  border-color: var(--border);
-}
-
-.btn-secondary:hover {
-  background: rgba(255, 255, 255, .08);
-  border-color: var(--border-light);
-}
-
-.btn-danger {
-  background: transparent;
-  color: var(--error);
-  border-color: var(--error);
-}
-
-.btn-danger:hover {
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.btn-ghost {
-  background: transparent;
-  color: var(--text-secondary);
-  border: none;
-  padding: 6px 10px;
-}
-
-.btn-ghost:hover {
-  color: var(--text-primary);
-  background: rgba(255, 255, 255, .06);
-}
-
-.btn-sm {
-  padding: 4px 10px;
-  font-size: 12px;
-}
-
-.btn-lg {
-  padding: 12px 24px;
-  font-size: 15px;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ── Inputs ── */
-
-.input,
-.textarea,
-.select {
-  width: 100%;
-  padding: 9px 13px;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text-primary);
-  transition: border-color var(--t-fast, 100ms), box-shadow var(--t-fast, 100ms);
-  outline: none;
-}
-
-.input:focus,
-.textarea:focus,
-.select:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-dim, rgba(99, 102, 241, .12));
-}
-
-.input::placeholder,
-.textarea::placeholder {
-  color: var(--text-muted);
-}
-
-.textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.form-group {
-  margin-bottom: 16px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 5px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: .4px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-}
-
-.settings-inline-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.settings-info-wrap {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 15px;
-  height: 15px;
-  border-radius: 999px;
-  border: 1px solid var(--border-light);
-  color: var(--text-secondary);
-  font-size: 10px;
-  line-height: 1;
-  cursor: help;
-  text-transform: none;
-}
-
-.settings-info-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.settings-info-pop {
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 240px;
-  max-width: 280px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--border-light);
-  background: var(--bg-modal);
-  color: var(--text-primary);
-  font-size: 11px;
-  font-weight: 400;
-  letter-spacing: 0;
-  text-transform: none;
-  line-height: 1.4;
-  white-space: normal;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 120ms ease;
-  z-index: 2;
-}
-
-.settings-info-wrap:hover .settings-info-pop,
-.settings-info-wrap:focus .settings-info-pop,
-.settings-info-wrap:focus-within .settings-info-pop {
-  opacity: 1;
-}
-
-.settings-token-box {
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 12px;
-  background: rgba(255, 255, 255, .02);
-  color: var(--text-secondary);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-/* ── Cards ── */
-
-.card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  transition: border-color var(--t-mid, 200ms), box-shadow var(--t-mid, 200ms);
-}
-
-.card:hover {
-  border-color: var(--border-light);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.card-title {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-/* ── Badge / Tag ── */
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 100px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.badge-success {
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--success);
-}
-
-.badge-warning {
-  background: rgba(245, 158, 11, 0.15);
-  color: var(--warning);
-}
-
-.badge-error {
-  background: rgba(239, 68, 68, 0.15);
-  color: var(--error);
-}
-
-.badge-info {
-  background: rgba(59, 130, 246, 0.15);
-  color: var(--info);
-}
-
-.badge-neutral {
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-}
-
-/* ── Toast / Notification ── */
-
-.toast-container {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  pointer-events: none;
-}
-
-.toast {
-  padding: 12px 18px;
-  border-radius: var(--radius-lg);
-  background: var(--bg-toast);
-  backdrop-filter: blur(20px) saturate(1.4);
-  -webkit-backdrop-filter: blur(20px) saturate(1.4);
-  border: 1px solid var(--border-light);
-  box-shadow: var(--shadow);
-  font-size: 13px;
-  pointer-events: all;
-  animation: toastIn 200ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
-  max-width: 380px;
-}
-
-.toast.removing {
-  animation: toastOut 120ms ease-in both;
-}
-
-.toast-success {
-  border-left: 3px solid var(--success);
-}
-
-.toast-error {
-  border-left: 3px solid var(--error);
-}
-
-.toast-info {
-  border-left: 3px solid var(--info);
-}
-
-@keyframes toastIn {
-  from {
-    transform: translateX(110%) scale(.9);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0) scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes toastOut {
-  from {
-    transform: translateX(0) scale(1);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateX(60%) scale(.9);
-    opacity: 0;
-  }
-}
-
-/* ── Modal ── */
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, .68);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 5000;
-  animation: fadeIn 120ms ease both;
-}
-
-.modal {
-  background: var(--bg-modal);
-  backdrop-filter: blur(24px) saturate(1.3);
-  -webkit-backdrop-filter: blur(24px) saturate(1.3);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-xl);
-  width: 90%;
-  max-width: 600px;
-  max-height: 80vh;
-  overflow-y: auto;
-  box-shadow: var(--shadow-lg);
-  animation: modalIn 200ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h2 {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.modal-body {
-  padding: 24px;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 24px;
-  border-top: 1px solid var(--border);
-}
-
-.settings-update-panel {
-  margin-top: 18px;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 14px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
-}
-
-.settings-update-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.settings-update-title {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: .6px;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-}
-
-.settings-update-progress-wrap {
-  width: 100%;
-  height: 8px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, .08);
-  overflow: hidden;
-}
-
-.settings-update-progress-bar {
-  height: 100%;
-  width: 0%;
-  background: linear-gradient(90deg, #22c55e, #06b6d4);
-  border-radius: inherit;
-  transition: width 240ms ease;
-}
-
-.settings-update-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.settings-update-meta {
-  margin-top: 6px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.settings-update-section {
-  margin-top: 12px;
-}
-
-.settings-update-label {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: .4px;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-}
-
-.settings-update-changelog {
-  margin: 0;
-  padding-left: 18px;
-  max-height: 110px;
-  overflow-y: auto;
-  font-size: 12px;
-  color: var(--text-primary);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.settings-update-empty {
-  list-style: none;
-  margin-left: -18px;
-  color: var(--text-muted);
-}
-
-.settings-update-logs {
-  margin: 0;
-  padding: 10px;
-  background: var(--bg-logs);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--text-secondary);
-  max-height: 140px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-@keyframes modalIn {
-  from {
-    transform: translateY(14px) scale(.96);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0) scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-/* ── Tabs ── */
-
-.tabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 20px;
-}
-
-.tab {
-  padding: 10px 20px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  border-bottom: 2px solid transparent;
-  font-weight: 500;
-  transition: all var(--transition);
-  font-size: 13px;
-}
-
-.tab:hover {
-  color: var(--text-primary);
-}
-
-.tab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-
-/* ── Code Block ── */
-
-.code-block {
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px;
-  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
-  font-size: 12.5px;
-  line-height: 1.6;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* ── Empty State ── */
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 64px 24px;
-  color: var(--text-muted);
-  text-align: center;
-  gap: 8px;
-}
-
-.empty-state svg {
-  opacity: .25;
-  margin-bottom: 8px;
-}
-
-.empty-state p {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-
-/* ── Spinner ── */
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 600ms linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ── Markdown Content ── */
-
-.md-content h1,
-.md-content h2,
-.md-content h3 {
-  margin: 16px 0 8px;
-}
-
-.md-content h1 {
-  font-size: 20px;
-}
-
-.md-content h2 {
-  font-size: 17px;
-}
-
-.md-content h3 {
-  font-size: 15px;
-}
-
-.md-content p {
-  margin-bottom: 8px;
-}
-
-.md-content ul,
-.md-content ol {
-  padding-left: 24px;
-  margin-bottom: 8px;
-}
-
-.md-content code {
-  background: var(--bg-2, #111120);
-  padding: 2px 6px;
-  border-radius: 5px;
-  font-family: 'JetBrains Mono', 'SF Mono', monospace;
-  font-size: 12.5px;
-  color: var(--accent-hover);
-}
-
-.md-content pre {
-  background: var(--bg-primary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px;
-  overflow-x: auto;
-  margin-bottom: 12px;
-}
-
-.md-content pre code {
-  background: none;
-  padding: 0;
-}
-
-.md-content blockquote {
-  border-left: 3px solid var(--accent);
-  padding-left: 14px;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-/* ── Utility ── */
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.gap-3 {
-  gap: 12px;
-}
-
-.gap-4 {
-  gap: 16px;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-sm {
-  font-size: 13px;
-}
-
-.text-xs {
-  font-size: 11px;
-}
-
-.text-muted {
-  color: var(--text-secondary);
-}
-
-.font-mono {
-  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hidden {
-  display: none !important;
-}
-
-.mt-1 {
-  margin-top: 4px;
-}
-
-.mt-2 {
-  margin-top: 8px;
-}
-
-.mt-4 {
-  margin-top: 16px;
-}
-
-.mb-2 {
-  margin-bottom: 8px;
-}
-
-.mb-4 {
-  margin-bottom: 16px;
-}
-
-.p-4 {
-  padding: 16px;
-}
-
-.gap-1 {
-  gap: 4px;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.rounded {
-  border-radius: var(--radius);
-}
-
-/* ── ANIMATIONS (global) ── */
-
-@keyframes pulse {
-
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .35;
-  }
-}
-
-@keyframes fadeSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-in {
-  animation: fadeSlideUp 200ms cubic-bezier(.16, 1, .3, 1) both;
-}