frontend/app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Theme Variables ─────────────────────────────────────────────────────── */

/* DARK (default) */
:root,
[data-theme="dark"] {
  --void: #05060d;
  --surface-1: #0a0c16;
  --surface-2: #0e1121;
  --surface-3: #131729;
  --surface-4: #191e32;
  --surface-5: #1f263b;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text-primary: #e8eaf0;
  --text-secondary: #8892a4;
  --text-muted: #4a5568;
  --accent: #7c3aed;
  --accent-bright: #8b5cf6;
  --accent-glow: rgba(124,58,237,0.25);
}

/* AMOLED */
[data-theme="amoled"] {
  --void: #000000;
  --surface-1: #050505;
  --surface-2: #0a0a0a;
  --surface-3: #0f0f0f;
  --surface-4: #141414;
  --surface-5: #1a1a1a;
  --border: rgba(255,255,255,0.05);
  --border-hover: rgba(255,255,255,0.10);
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --text-muted: #444444;
  --accent: #6d28d9;
  --accent-bright: #7c3aed;
  --accent-glow: rgba(109,40,217,0.3);
}

/* NEON */
[data-theme="neon"] {
  --void: #020010;
  --surface-1: #06001a;
  --surface-2: #0a0025;
  --surface-3: #0e0030;
  --surface-4: #130040;
  --surface-5: #180050;
  --border: rgba(139,92,246,0.2);
  --border-hover: rgba(139,92,246,0.4);
  --text-primary: #f0e8ff;
  --text-secondary: #a78bfa;
  --text-muted: #6d28d9;
  --accent: #a855f7;
  --accent-bright: #d946ef;
  --accent-glow: rgba(168,85,247,0.4);
}

/* GLASS */
[data-theme="glass"] {
  --void: #1a1a2e;
  --surface-1: rgba(255,255,255,0.05);
  --surface-2: rgba(255,255,255,0.08);
  --surface-3: rgba(255,255,255,0.1);
  --surface-4: rgba(255,255,255,0.12);
  --surface-5: rgba(255,255,255,0.15);
  --border: rgba(255,255,255,0.12);
  --border-hover: rgba(255,255,255,0.2);
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --accent: #818cf8;
  --accent-bright: #a5b4fc;
  --accent-glow: rgba(129,140,248,0.3);
}

/* Shorthand aliases */
:root {
  --purple: var(--accent);
  --purple-bright: var(--accent-bright);
  --purple-glow: var(--accent-glow);
  --blue: #3b82f6;
  --blue-bright: #60a5fa;
  --cyan: #22d3ee;
  --green: #22c55e;
  --amber: #f59e0b;
  --pink: #ec4899;
  --red: #ef4444;
}

/* ─── Base Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ─── Mono Font ───────────────────────────────────────────────────────────── */
code, pre, .font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ─── Glass Morphism ──────────────────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.07);
}
.glass-hover:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.glass-purple {
  background: rgba(124,58,237,0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(124,58,237,0.2);
}
.glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
}

/* ─── Card ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s;
}
.card:hover { border-color: var(--border-hover); }

/* ─── Nav Item ────────────────────────────────────────────────────────────── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: transparent;
  white-space: nowrap;
}
.nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.nav-item.active {
  background: rgba(124,58,237,0.12);
  color: var(--accent-bright);
  border: 1px solid rgba(124,58,237,0.2);
}

/* ─── Button ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  color: #fff;
  box-shadow: 0 0 20px rgba(124,58,237,0.3);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
}
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

/* ─── Input ───────────────────────────────────────────────────────────────── */
.input {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {
  border-color: rgba(124,58,237,0.4);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.input::placeholder { color: var(--text-muted); }

/* ─── Badge / Pill ────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.badge-green { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.badge-red { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.badge-yellow { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.badge-purple { background: rgba(124,58,237,0.12); color: #a78bfa; border: 1px solid rgba(124,58,237,0.2); }
.badge-cyan { background: rgba(34,211,238,0.12); color: #22d3ee; border: 1px solid rgba(34,211,238,0.2); }

/* ─── Toggle Switch ───────────────────────────────────────────────────────── */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  border: none;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: left 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Computer Use Panel (Manus-style) ────────────────────────────────────── */
.computer-use-panel {
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  height: 100%;
  overflow-y: auto;
  width: 360px;
  flex-shrink: 0;
}
.computer-use-step {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.computer-use-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

/* ─── Status Dot ──────────────────────────────────────────────────────────── */
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-dot.online { background: #22c55e; box-shadow: 0 0 6px #22c55e88; }
.status-dot.offline { background: #ef4444; }
.status-dot.pending { background: #f59e0b; animation: pulse 1.5s infinite; }

/* ─── Code Block ──────────────────────────────────────────────────────────── */
.code-block {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e2e8f0;
}

/* ─── Animations ──────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in { animation: fadeIn 0.2s ease forwards; }
.animate-slide-in { animation: slideIn 0.2s ease forwards; }
.animate-blink { animation: blink 1s infinite; }
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ─── Streaming cursor ────────────────────────────────────────────────────── */
.streaming-cursor::after {
  content: '▋';
  color: var(--accent-bright);
  animation: blink 1s infinite;
  margin-left: 2px;
}

/* ─── Prose (Markdown) ────────────────────────────────────────────────────── */
.prose-god {
  line-height: 1.75;
  font-size: 14px;
  color: var(--text-primary);
}
.prose-god h1,.prose-god h2,.prose-god h3 {
  font-weight: 700;
  color: #fff;
  margin: 1.2em 0 0.5em;
}
.prose-god h1 { font-size: 1.5em; }
.prose-god h2 { font-size: 1.25em; }
.prose-god h3 { font-size: 1.1em; }
.prose-god p { margin-bottom: 0.8em; }
.prose-god code {
  background: var(--surface-3);
  color: #c4b5fd;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
}
.prose-god pre {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  overflow-x: auto;
  margin: 0.8em 0;
}
.prose-god pre code { background: none; padding: 0; color: #e2e8f0; font-size: 0.87em; }
.prose-god ul,.prose-god ol { padding-left: 1.5em; margin-bottom: 0.8em; }
.prose-god li { margin-bottom: 0.3em; }
.prose-god strong { color: #fff; font-weight: 600; }
.prose-god blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1em;
  color: var(--text-secondary);
  margin: 0.8em 0;
}
.prose-god a { color: var(--accent-bright); text-decoration: underline; }
.prose-god hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }

/* ─── Neon glow effects ───────────────────────────────────────────────────── */
[data-theme="neon"] .card {
  box-shadow: 0 0 0 1px rgba(168,85,247,0.15), inset 0 0 20px rgba(168,85,247,0.05);
}
[data-theme="neon"] .nav-item.active {
  box-shadow: 0 0 12px rgba(168,85,247,0.3);
}
[data-theme="neon"] .btn-primary {
  box-shadow: 0 0 20px rgba(168,85,247,0.5);
}

/* ─── Glass theme backdrop ────────────────────────────────────────────────── */
[data-theme="glass"] body {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
[data-theme="glass"] .card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}