agent-orcha 0.0.5 → 0.0.8

package/dist/public/styles.css

@@ -0,0 +1,2777 @@
+/* ═══════════════════════════════════════════════════════
+   Agent Orcha — Linear-inspired dark UI
+   ═══════════════════════════════════════════════════════ */
+
+/* ─── 1. Reset & Base ─── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  background: var(--bg);
+  color: var(--text-1);
+  line-height: 1.5;
+  min-height: 100vh;
+}
+::selection { background: rgba(94, 106, 210, 0.3); }
+button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
+input, textarea, select { font: inherit; color: inherit; }
+a { color: var(--accent); }
+ul, ol { list-style: none; }
+img { display: block; max-width: 100%; }
+
+/* ─── 2. Design Tokens ─── */
+:root {
+  /* Surfaces */
+  --bg:             #1b1c28;
+  --sidebar:        #14151f;
+  --surface:        #25262f;
+  --surface-dim:    rgba(37, 38, 47, 0.5);
+  --surface-30:     rgba(37, 38, 47, 0.3);
+  --hover:          #2f303a;
+  --hover-40:       rgba(47, 48, 58, 0.4);
+  --hover-80:       rgba(47, 48, 58, 0.8);
+  --overlay:        rgba(0, 0, 0, 0.5);
+  --overlay-heavy:  rgba(0, 0, 0, 0.7);
+
+  /* Borders */
+  --border:         #2e2f3a;
+  --border-subtle:  rgba(255, 255, 255, 0.06);
+  --border-dim:     rgba(46, 47, 58, 0.5);
+  --border-40:      rgba(46, 47, 58, 0.4);
+  --border-60:      rgba(46, 47, 58, 0.6);
+
+  /* Text */
+  --text-1:   #e8e8ec;
+  --text-2:   #8f8f96;
+  --text-3:   #5c5c64;
+
+  /* Accent */
+  --accent:         #5e6ad2;
+  --accent-hover:   #4f5bc3;
+  --accent-dim:     rgba(94, 106, 210, 0.15);
+  --accent-20:      rgba(94, 106, 210, 0.2);
+  --accent-10:      rgba(94, 106, 210, 0.1);
+  --accent-5:       rgba(94, 106, 210, 0.05);
+  --accent-80:      rgba(94, 106, 210, 0.8);
+  --accent-shadow:  rgba(94, 106, 210, 0.2);
+
+  /* Status */
+  --green:  #4da675;
+  --orange: #f2994a;
+  --red:    #d9534f;
+  --cyan:   #26b5ce;
+
+  /* Semantic palette */
+  --blue-400:    #60a5fa;
+  --blue-300:    #93c5fd;
+  --green-400:   #4ade80;
+  --green-300:   #86efac;
+  --green-500:   #22c55e;
+  --amber-400:   #fbbf24;
+  --amber-300:   #fcd34d;
+  --purple-400:  #a78bfa;
+  --purple-300:  #c4b5fd;
+  --red-400:     #f87171;
+  --red-300:     #fca5a5;
+  --cyan-400:    #22d3ee;
+  --orange-400:  #fb923c;
+  --orange-300:  #fdba74;
+  --yellow-400:  #facc15;
+  --yellow-300:  #fde047;
+  --teal-400:    #2dd4bf;
+
+  /* Spacing */
+  --sp-0: 0;
+  --sp-0h: 0.125rem;
+  --sp-1: 0.25rem;
+  --sp-1h: 0.375rem;
+  --sp-2: 0.5rem;
+  --sp-2h: 0.625rem;
+  --sp-3: 0.75rem;
+  --sp-4: 1rem;
+  --sp-5: 1.25rem;
+  --sp-6: 1.5rem;
+  --sp-8: 2rem;
+  --sp-10: 2.5rem;
+  --sp-12: 3rem;
+  --sp-16: 4rem;
+
+  /* Radii */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
+  --shadow-xl: 0 12px 36px rgba(0,0,0,0.6);
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --text-2xs: 0.625rem;
+  --text-xs:  0.75rem;
+  --text-sm:  0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg:  1rem;
+  --text-xl:  1.125rem;
+  --text-2xl: 1.5rem;
+
+  /* Transitions */
+  --fast: 150ms ease;
+
+  /* Layout */
+  --sidebar-w: 12rem;
+}
+
+/* ─── 3. Typography ─── */
+.text-2xs { font-size: var(--text-2xs); }
+.text-xs  { font-size: var(--text-xs); }
+.text-sm  { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg  { font-size: var(--text-lg); }
+.text-xl  { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-4xl { font-size: 2.25rem; }
+
+.font-medium   { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold     { font-weight: 700; }
+.font-mono     { font-family: var(--font-mono); }
+
+.uppercase      { text-transform: uppercase; }
+.tracking-wider { letter-spacing: 0.05em; }
+.leading-relaxed { line-height: 1.625; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+.whitespace-pre { white-space: pre; }
+.whitespace-nowrap { white-space: nowrap; }
+.break-words { overflow-wrap: break-word; }
+.break-all { word-break: break-all; }
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.no-underline { text-decoration: none; }
+.italic { font-style: italic; }
+
+/* ─── 4. Layout Primitives ─── */
+.flex         { display: flex; }
+.flex-col     { flex-direction: column; }
+.flex-1       { flex: 1 1 0%; }
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-wrap    { flex-wrap: wrap; }
+.inline-flex  { display: inline-flex; }
+.items-center { align-items: center; }
+.items-start  { align-items: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-start   { justify-content: flex-start; }
+.justify-end     { justify-content: flex-end; }
+.grid { display: grid; }
+.grid-auto {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--sp-3);
+}
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.flex-nowrap { flex-wrap: nowrap; }
+.min-w-max { min-width: max-content; }
+
+/* ─── 5. Utilities ─── */
+
+/* Display */
+.hidden  { display: none !important; }
+.block   { display: block; }
+.inline-block { display: inline-block; }
+
+/* Position */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed    { position: fixed; }
+.inset-0  { inset: 0; }
+.inset-y-0 { top: 0; bottom: 0; }
+
+/* Z-index */
+.z-20 { z-index: 20; }
+.z-30 { z-index: 30; }
+.z-40 { z-index: 40; }
+.z-50 { z-index: 50; }
+
+/* Size */
+.w-full  { width: 100%; }
+.h-full  { height: 100%; }
+.h-screen { height: 100vh; }
+.min-w-0 { min-width: 0; }
+.min-h-0 { min-height: 0; }
+.max-w-md { max-width: 28rem; }
+.max-w-lg { max-width: 32rem; }
+.max-w-xl { max-width: 36rem; }
+
+/* Overflow */
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-x-hidden { overflow-x: hidden; }
+
+/* Gaps */
+.gap-1  { gap: var(--sp-1); }
+.gap-1h { gap: var(--sp-1h); }
+.gap-2  { gap: var(--sp-2); }
+.gap-2h { gap: var(--sp-2h); }
+.gap-3  { gap: var(--sp-3); }
+.gap-4  { gap: var(--sp-4); }
+.gap-6  { gap: var(--sp-6); }
+
+/* Space-y (vertical spacing between children) */
+.space-y-0h > * + * { margin-top: var(--sp-0h); }
+.space-y-1 > * + * { margin-top: var(--sp-1); }
+.space-y-2 > * + * { margin-top: var(--sp-2); }
+.space-y-3 > * + * { margin-top: var(--sp-3); }
+.space-y-4 > * + * { margin-top: var(--sp-4); }
+.space-y-6 > * + * { margin-top: var(--sp-6); }
+
+/* Cursor */
+.text-right { text-align: right; }
+.col-span-full { grid-column: 1 / -1; }
+.pointer-events-none { pointer-events: none; }
+
+.cursor-pointer     { cursor: pointer; }
+.cursor-not-allowed { cursor: not-allowed; }
+.select-none { user-select: none; }
+.resize-none { resize: none; }
+
+/* Transitions */
+.transition-colors   { transition: color var(--fast), background-color var(--fast), border-color var(--fast); }
+.transition-all      { transition: all var(--fast); }
+.transition-opacity  { transition: opacity var(--fast); }
+.transition-transform { transition: transform var(--fast); }
+
+/* Opacity */
+.opacity-0  { opacity: 0; }
+.opacity-50 { opacity: 0.5; }
+.opacity-70 { opacity: 0.7; }
+.opacity-90 { opacity: 0.9; }
+
+/* Color utilities */
+.text-primary   { color: var(--text-1); }
+.text-secondary { color: var(--text-2); }
+.text-muted     { color: var(--text-3); }
+.text-accent    { color: var(--accent); }
+.text-white     { color: #fff; }
+.text-red       { color: var(--red-400); }
+.text-green     { color: var(--green-400); }
+.text-blue      { color: var(--blue-400); }
+.text-amber     { color: var(--amber-400); }
+.text-purple    { color: var(--purple-400); }
+.text-cyan      { color: var(--cyan-400); }
+.text-orange    { color: var(--orange-400); }
+.text-yellow    { color: var(--yellow-400); }
+.text-green-500 { color: var(--green-500); }
+.text-blue-300  { color: var(--blue-300); }
+.text-green-300 { color: var(--green-300); }
+.text-red-300   { color: var(--red-300); }
+.text-purple-300 { color: var(--purple-300); }
+.text-amber-300 { color: var(--amber-300); }
+.text-orange-300 { color: var(--orange-300); }
+.text-yellow-300 { color: var(--yellow-300); }
+.text-teal   { color: var(--teal-400); }
+.text-gray   { color: var(--text-2); }
+
+.bg-base    { background: var(--bg); }
+.bg-surface { background: var(--surface); }
+.bg-surface-dim { background: var(--surface-dim); }
+.bg-surface-30 { background: var(--surface-30); }
+.bg-sidebar { background: var(--sidebar); }
+.bg-hover   { background: var(--hover); }
+.bg-accent  { background: var(--accent); }
+.bg-accent-dim { background: var(--accent-dim); }
+.bg-transparent { background: transparent; }
+.bg-overlay { background: var(--overlay); }
+.bg-overlay-heavy { background: var(--overlay-heavy); }
+
+.border-default { border-color: var(--border); }
+.border-subtle  { border-color: var(--border-subtle); }
+.border-dim     { border-color: var(--border-dim); }
+.border-accent  { border-color: var(--accent); }
+.border-transparent { border-color: transparent; }
+
+/* Group hover pattern */
+.group:hover .group-hover-visible { opacity: 1; }
+
+/* Margin */
+.mt-1 { margin-top: var(--sp-1); }
+.mt-2 { margin-top: var(--sp-2); }
+.mt-3 { margin-top: var(--sp-3); }
+.mt-4 { margin-top: var(--sp-4); }
+.mt-6 { margin-top: var(--sp-6); }
+.mb-1 { margin-bottom: var(--sp-1); }
+.mb-2 { margin-bottom: var(--sp-2); }
+.mb-3 { margin-bottom: var(--sp-3); }
+.mb-4 { margin-bottom: var(--sp-4); }
+.mb-5 { margin-bottom: var(--sp-5); }
+.mb-6 { margin-bottom: var(--sp-6); }
+.ml-1 { margin-left: var(--sp-1); }
+.ml-2 { margin-left: var(--sp-2); }
+.ml-3 { margin-left: var(--sp-3); }
+.mr-1 { margin-right: var(--sp-1); }
+.mr-2 { margin-right: var(--sp-2); }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.mx-2 { margin-left: var(--sp-2); margin-right: var(--sp-2); }
+
+/* Padding */
+.p-1 { padding: var(--sp-1); }
+.p-2 { padding: var(--sp-2); }
+.p-3 { padding: var(--sp-3); }
+.p-4 { padding: var(--sp-4); }
+.p-5 { padding: var(--sp-5); }
+.p-6 { padding: var(--sp-6); }
+.p-8 { padding: var(--sp-8); }
+.px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
+.px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
+.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
+.px-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }
+.py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
+.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
+.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
+.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
+.py-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
+.pt-3 { padding-top: var(--sp-3); }
+.pt-4 { padding-top: var(--sp-4); }
+.pb-2 { padding-bottom: var(--sp-2); }
+.pb-6 { padding-bottom: var(--sp-6); }
+.py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
+
+/* Border */
+.border     { border: 1px solid var(--border); }
+.border-b   { border-bottom: 1px solid var(--border); }
+.border-l   { border-left: 1px solid var(--border); }
+.border-r   { border-right: 1px solid var(--border); }
+.border-t   { border-top: 1px solid var(--border); }
+.rounded    { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-2xl { border-radius: var(--radius-2xl); }
+.rounded-full { border-radius: var(--radius-full); }
+
+/* Shadow */
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-xl { box-shadow: var(--shadow-xl); }
+
+/* ─── 6. Shared Components ─── */
+
+/* Card (sidebar list items) */
+.card {
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  padding: var(--sp-2h) var(--sp-3);
+  border: 1px solid var(--border);
+  transition: background var(--fast), border-color var(--fast);
+}
+.card:hover { background: var(--surface-dim); }
+.card.active {
+  background: var(--hover);
+  border-color: var(--accent);
+}
+
+/* Panel (bordered surface container) */
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+}
+.panel-dim {
+  background: var(--surface-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+}
+.panel-sm {
+  background: var(--surface-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-3);
+}
+
+/* Badge */
+.badge {
+  display: inline-block;
+  font-size: var(--text-xs);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+}
+.badge-accent  { background: var(--accent-20); color: var(--accent); }
+.badge-blue    { background: rgba(96, 165, 250, 0.2); color: var(--blue-400); }
+.badge-green   { background: rgba(74, 222, 128, 0.2); color: var(--green-400); }
+.badge-red     { background: rgba(248, 113, 113, 0.2); color: var(--red-400); }
+.badge-purple  { background: rgba(167, 139, 250, 0.2); color: var(--purple-400); }
+.badge-amber   { background: rgba(251, 191, 36, 0.2); color: var(--amber-400); }
+.badge-orange  { background: rgba(251, 146, 60, 0.2); color: var(--orange-400); }
+.badge-yellow  { background: rgba(250, 204, 21, 0.2); color: var(--yellow-400); }
+.badge-cyan    { background: rgba(34, 211, 238, 0.2); color: var(--cyan-400); }
+.badge-gray    { background: var(--hover); color: var(--text-2); }
+.badge-emerald { background: rgba(16, 185, 129, 0.2); color: #34d399; }
+.badge-pill    { border-radius: var(--radius-full); padding: 2px 8px; }
+
+/* Status-colored outline badges (for knowledge, monitor) */
+.badge-outline-blue   { background: rgba(30, 58, 138, 0.5); color: var(--blue-300); border: 1px solid rgba(29, 78, 216, 0.5); }
+.badge-outline-green  { background: rgba(20, 83, 45, 0.5); color: var(--green-300); border: 1px solid rgba(22, 101, 52, 0.5); }
+.badge-outline-red    { background: rgba(127, 29, 29, 0.5); color: var(--red-300); border: 1px solid rgba(153, 27, 27, 0.5); }
+.badge-outline-purple { background: rgba(88, 28, 135, 0.5); color: var(--purple-300); border: 1px solid rgba(107, 33, 168, 0.5); }
+.badge-outline-orange { background: rgba(124, 45, 18, 0.5); color: var(--orange-300); border: 1px solid rgba(154, 52, 18, 0.5); }
+.badge-outline-amber  { background: rgba(120, 53, 15, 0.5); color: var(--amber-300); border: 1px solid rgba(146, 64, 14, 0.5); }
+
+/* Status dot */
+.status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+.status-dot-active, .status-dot-indexed { background: var(--green); }
+.status-dot-idle, .status-dot-not_indexed { background: var(--text-3); }
+.status-dot-warning { background: var(--orange); }
+.status-dot-error { background: var(--red); }
+.status-dot-loading, .status-dot-indexing {
+  background: transparent;
+  border: 2px solid var(--orange);
+  border-top-color: transparent;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-2h) var(--sp-5);
+  border-radius: var(--radius-lg);
+  font-weight: 500;
+  font-size: var(--text-sm);
+  transition: background var(--fast), opacity var(--fast);
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-accent {
+  background: var(--accent);
+  color: #fff;
+}
+.btn-accent:hover:not(:disabled) { background: var(--accent-hover); }
+.btn-accent:disabled { background: var(--hover); }
+.btn-sm {
+  padding: var(--sp-1h) var(--sp-3);
+  font-size: var(--text-xs);
+}
+.btn-danger {
+  background: rgba(248, 113, 113, 0.2);
+  color: var(--red-400);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+}
+.btn-danger:hover { background: rgba(248, 113, 113, 0.3); }
+.btn-amber {
+  background: rgba(251, 191, 36, 0.2);
+  color: var(--amber-400);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+}
+.btn-amber:hover:not(:disabled) { background: rgba(251, 191, 36, 0.3); }
+.btn-blue {
+  background: rgba(96, 165, 250, 0.2);
+  color: var(--blue-400);
+  border: 1px solid rgba(96, 165, 250, 0.3);
+}
+.btn-blue:hover:not(:disabled) { background: rgba(96, 165, 250, 0.3); }
+.btn-indigo {
+  background: rgba(99, 102, 241, 0.2);
+  color: #818cf8;
+}
+.btn-indigo:hover:not(:disabled) { background: rgba(99, 102, 241, 0.3); }
+.btn-green {
+  background: rgba(74, 222, 128, 0.2);
+  color: var(--green-400);
+}
+.btn-ghost {
+  color: var(--text-2);
+  padding: var(--sp-2);
+}
+.btn-ghost:hover { color: var(--text-1); }
+
+/* Inputs */
+.input, .select, .textarea {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-2h) var(--sp-4);
+  color: var(--text-1);
+  transition: border-color var(--fast);
+}
+.input:focus, .select:focus, .textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-20);
+}
+.input::placeholder, .textarea::placeholder { color: var(--text-3); }
+
+/* Section title (uppercase labels) */
+.section-title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Empty state */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sp-12) var(--sp-4);
+  color: var(--text-3);
+  text-align: center;
+}
+
+/* Divider */
+.divider {
+  border: none;
+  border-top: 1px solid var(--border-dim);
+}
+
+/* ─── 7. App Shell ─── */
+.app-shell {
+  display: flex;
+  height: 100vh;
+}
+
+#app-sidebar {
+  background: var(--sidebar);
+  border-right: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: var(--sidebar-w);
+  position: relative;
+}
+
+.sidebar-brand {
+  padding: var(--sp-4);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2h);
+}
+.sidebar-logo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.sidebar-brand span {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-1);
+  letter-spacing: 0.03em;
+}
+.mobile-logo {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.sidebar-footer {
+  padding: var(--sp-2) var(--sp-3);
+  border-top: 1px solid var(--border-subtle);
+}
+.sidebar-footer #app-version {
+  font-size: 10px;
+  display: block;
+  margin-top: var(--sp-1);
+  color: rgba(255, 255, 255, 0.2);
+}
+
+.app-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.app-mobile-header {
+  display: none;
+  align-items: center;
+  padding: var(--sp-2) var(--sp-4);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.app-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  padding: var(--sp-5) var(--sp-6);
+}
+
+/* Auth overlay */
+.auth-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--overlay-heavy);
+}
+.auth-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 var(--sp-4);
+  padding: var(--sp-6);
+}
+.auth-card h2 {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--text-1);
+  margin-bottom: var(--sp-4);
+}
+.auth-card .auth-error {
+  display: none;
+  color: var(--red);
+  font-size: var(--text-sm);
+  margin-bottom: var(--sp-3);
+}
+.auth-card .auth-error.visible { display: block; }
+
+/* LLM setup modal */
+.llm-setup-modal {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 28rem;
+  margin: 0 var(--sp-4);
+  padding: var(--sp-8);
+  text-align: center;
+}
+.llm-setup-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-full);
+  background: var(--accent-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto var(--sp-5);
+}
+
+/* Sidebar backdrop (mobile) */
+#sidebar-backdrop {
+  display: none;
+}
+#sidebar-backdrop.open {
+  display: block;
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  background: var(--overlay);
+  animation: fadeIn 0.15s ease-out;
+}
+
+/* ─── 8. NavBar ─── */
+#app-sidebar nav {
+  padding: var(--sp-1) 6px;
+}
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2h);
+  width: 100%;
+  padding: 6px var(--sp-3);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-2);
+  border-radius: 5px;
+  margin: 1px 0;
+  transition: color var(--fast), background var(--fast);
+}
+.tab-btn:hover {
+  color: var(--text-1);
+  background: rgba(255, 255, 255, 0.04);
+}
+.tab-btn.active {
+  color: var(--text-1);
+  background: rgba(255, 255, 255, 0.07);
+}
+.tab-btn .tab-icon {
+  font-size: 11px;
+  width: 16px;
+  text-align: center;
+  opacity: 0.7;
+}
+
+/* ─── 9. LogViewer ─── */
+.log-panel {
+  background: var(--sidebar);
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: height 0.25s ease;
+}
+.log-panel-closed { height: 36px; }
+.log-panel-open { height: 250px; }
+.log-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  height: 36px;
+  min-height: 36px;
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.log-header:hover { background: rgba(255, 255, 255, 0.03); }
+.log-header-left, .log-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.log-chevron {
+  font-size: 10px;
+  color: var(--text-3);
+  transition: transform 0.25s ease;
+}
+.log-chevron-open { transform: rotate(180deg); }
+.log-terminal-icon { font-size: 11px; color: var(--accent); }
+.log-title { font-size: 12px; color: var(--text-2); font-weight: 500; }
+.log-btn {
+  color: var(--text-3);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+.log-btn:hover { color: var(--text-1); background: var(--surface); }
+.log-autoscroll-active { color: var(--accent); }
+.log-body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+  padding: 4px 0;
+}
+.log-body::-webkit-scrollbar { width: 6px; }
+.log-body::-webkit-scrollbar-track { background: transparent; }
+.log-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.log-line {
+  padding: 0 12px;
+  white-space: pre;
+  color: var(--text-2);
+}
+.log-line:hover { background: rgba(255, 255, 255, 0.03); }
+.log-trace { color: var(--text-3); }
+.log-debug { color: var(--text-3); }
+.log-info  { color: var(--text-2); }
+.log-warn  { color: #f9e2af; }
+.log-error { color: #f38ba8; }
+.log-fatal { color: #f38ba8; font-weight: 600; }
+
+/* ─── Shared view border ─── */
+.view-panel {
+  border: 1px solid var(--border-60);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+}
+
+/* ─── 10. AgentsView (Chat) ─── */
+.agent-shell {
+  display: flex;
+  height: 100%;
+  position: relative;
+  border: 1px solid var(--border-60);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--bg);
+}
+
+.agent-sidebar {
+  width: 16rem;
+  flex-shrink: 0;
+  background: rgba(27, 28, 40, 0.6);
+  border-right: 1px solid var(--border-60);
+  display: flex;
+  flex-direction: column;
+}
+.agent-sidebar .new-chat-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  padding: var(--sp-2h) var(--sp-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-1);
+  transition: background var(--fast);
+}
+.agent-sidebar .new-chat-btn:hover { background: var(--hover); }
+.agent-sidebar .sidebar-bottom-action { padding-bottom: 10px; }
+.agent-sidebar .sidebar-secondary-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  padding: var(--sp-1h) var(--sp-2);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-xs);
+  color: var(--text-2);
+  border: 1px dashed var(--border-60);
+  background: transparent;
+  transition: background var(--fast), color var(--fast);
+}
+.agent-sidebar .sidebar-secondary-btn:hover {
+  background: var(--hover);
+  color: var(--text-1);
+  border-color: var(--text-2);
+}
+
+.new-agent-option {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  text-align: left;
+  transition: background var(--fast), border-color var(--fast);
+  width: 100%;
+}
+.new-agent-option:hover {
+  background: var(--hover);
+  border-color: var(--text-2);
+}
+.new-agent-option-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: var(--text-sm);
+  flex-shrink: 0;
+}
+.new-agent-option-icon.bg-blue { background: var(--blue-400); }
+.new-agent-option-icon.bg-green { background: var(--green); }
+
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 30;
+}
+.sidebar-backdrop.visible { display: block; }
+.sidebar-toggle-btn {
+  display: none;
+  color: var(--text-2);
+  padding: var(--sp-1);
+  margin-left: calc(-1 * var(--sp-1));
+  transition: color var(--fast);
+}
+.sidebar-toggle-btn:hover { color: var(--text-1); }
+
+.session-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sp-2);
+  padding: var(--sp-2h) var(--sp-3);
+  cursor: pointer;
+  border-radius: var(--radius-lg);
+  margin-bottom: 2px;
+  transition: background var(--fast);
+  border-left: 2px solid transparent;
+}
+.session-item:hover { background: var(--hover-40); }
+.session-item.active {
+  background: var(--hover-80);
+}
+.session-item .session-delete-btn {
+  flex-shrink: 0;
+  color: var(--text-3);
+  opacity: 0;
+  padding: var(--sp-1);
+  margin-top: 2px;
+  transition: opacity var(--fast);
+}
+.session-item .session-delete-btn:hover { color: var(--red-400); }
+.session-item:hover .session-delete-btn { opacity: 1; }
+
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.chat-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-3) var(--sp-5);
+  border-bottom: 1px solid var(--border-40);
+  font-size: var(--text-sm);
+}
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sp-4);
+  padding-right: var(--sp-2);
+  padding-bottom: var(--sp-6);
+}
+.chat-messages > * + * { margin-top: var(--sp-4); }
+
+.chat-input-area {
+  padding: var(--sp-3);
+  padding-top: 0;
+}
+.chat-input-wrap {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--border-60);
+  border-radius: var(--radius-2xl);
+  transition: border-color var(--fast);
+}
+.chat-input-wrap:focus-within { border-color: var(--border); }
+.chat-input-wrap textarea {
+  width: 100%;
+  background: transparent;
+  padding: var(--sp-3) 3.5rem var(--sp-3) 2.75rem;
+  color: var(--text-1);
+  resize: none;
+  border: none;
+  outline: none;
+  max-height: 200px;
+}
+.chat-input-wrap textarea::placeholder { color: var(--text-3); }
+.chat-input-actions {
+  position: absolute;
+  bottom: var(--sp-2);
+  display: flex;
+  align-items: center;
+}
+.chat-input-actions.left { left: var(--sp-2); }
+.chat-input-actions.right { right: var(--sp-2); gap: var(--sp-2); }
+
+.send-btn {
+  background: var(--accent);
+  color: #fff;
+  padding: var(--sp-2);
+  border-radius: var(--radius-lg);
+  transition: background var(--fast);
+  box-shadow: 0 4px 12px var(--accent-shadow);
+}
+.send-btn:hover:not(:disabled) { background: var(--accent-hover); }
+.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.attach-btn {
+  color: var(--text-3);
+  padding: 6px;
+  border-radius: var(--radius-lg);
+  transition: color var(--fast), background var(--fast);
+}
+.attach-btn:hover { color: var(--text-1); background: var(--hover); }
+
+/* Response bubbles */
+.response-wrapper { /* wrapper for bubble + status/stats bars */ }
+.response-bubble-inner {
+  max-width: 56rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-3xl);
+  padding: var(--sp-3) var(--sp-5);
+  color: var(--text-1);
+  font-size: 15px;
+  line-height: 1.625;
+  position: relative;
+}
+.response-bubble-inner.loading { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
+.response-bubble-inner.error {
+  background: rgba(217, 83, 79, 0.1);
+  border-color: rgba(217, 83, 79, 0.2);
+  color: var(--red-400);
+}
+.user-bubble {
+  max-width: 56rem;
+  background: var(--surface);
+  border: 1px solid transparent;
+  border-radius: var(--radius-3xl);
+  padding: var(--sp-3) var(--sp-5);
+  color: var(--text-1);
+  font-size: 15px;
+  line-height: 1.625;
+}
+
+/* Tool pills */
+.tool-invocations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: var(--sp-2);
+}
+.tool-pill {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(27, 28, 40, 0.5);
+  border: 1px solid var(--border-60);
+  border-radius: var(--radius-full);
+  padding: var(--sp-1) var(--sp-2h);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--text-2);
+}
+.tool-pill.done {
+  background: rgba(27, 28, 40, 0.3);
+  border-color: var(--border-dim);
+  color: var(--text-3);
+  cursor: pointer;
+  transition: background var(--fast), border-color var(--fast);
+}
+.tool-pill.done:hover {
+  background: rgba(27, 28, 40, 0.6);
+  border-color: var(--border);
+}
+.tool-pill.thinking { color: var(--purple-400); }
+.tool-invocation-details {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: var(--sp-1);
+  z-index: 50;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 400px;
+  max-width: 90vw;
+}
+.tool-invocation-details.visible { display: block; }
+.tool-invocation-details.fixed { position: fixed; padding: var(--sp-3); }
+.tool-detail-section {
+  padding: var(--sp-3);
+}
+.tool-detail-section + .tool-detail-section {
+  border-top: 1px solid var(--border-dim);
+}
+.tool-detail-section h4 {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-2);
+  margin-bottom: var(--sp-1);
+}
+.tool-detail-pre {
+  font-size: var(--text-xs);
+  color: var(--text-2);
+  background: rgba(27, 28, 40, 0.6);
+  border-radius: var(--radius-md);
+  padding: var(--sp-2);
+  overflow-x: auto;
+  max-height: 12rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Stream status bars */
+.stream-status-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin-top: 6px;
+  margin-left: var(--sp-1);
+  font-size: var(--text-xs);
+  color: var(--text-2);
+}
+.status-dot-pulse {
+  width: 8px;
+  height: 8px;
+  background: var(--accent);
+  border-radius: var(--radius-full);
+  animation: pulse-dot 1.5s ease-in-out infinite;
+}
+.stream-cancel-btn {
+  margin-left: auto;
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  padding: 2px var(--sp-2);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  transition: color var(--fast), border-color var(--fast);
+}
+.stream-cancel-btn:hover { color: var(--text-1); }
+
+.stream-stats-bar {
+  display: none;
+  align-items: center;
+  gap: var(--sp-3);
+  margin-top: 6px;
+  margin-left: var(--sp-1);
+  font-size: var(--text-xs);
+  color: var(--text-3);
+}
+.stream-stats-bar.visible { display: flex; }
+.stream-stats-bar .divider { color: var(--border); }
+
+/* Loading dots */
+.loading-dots {
+  display: flex;
+  gap: var(--sp-1);
+}
+.loading-dots > div {
+  width: 8px;
+  height: 8px;
+  background: var(--accent);
+  border-radius: var(--radius-full);
+  animation: bounce 0.6s infinite alternate;
+}
+.loading-dots > div:nth-child(2) { animation-delay: 0.2s; }
+.loading-dots > div:nth-child(3) { animation-delay: 0.4s; }
+
+/* Attachment preview */
+.attachment-preview {
+  display: none;
+  flex-wrap: wrap;
+  gap: var(--sp-2);
+  padding: 0 var(--sp-2) var(--sp-2);
+}
+.attachment-preview.visible { display: flex; }
+.attachment-pill {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  background: rgba(27, 28, 40, 0.6);
+  border: 1px solid var(--border-dim);
+  border-radius: var(--radius-lg);
+  padding: 6px var(--sp-2);
+  font-size: var(--text-xs);
+  color: var(--text-2);
+}
+.attachment-pill img {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+}
+.attachment-name { max-width: 120px; }
+.attachment-remove {
+  color: var(--text-3);
+  margin-left: var(--sp-1);
+  transition: color var(--fast);
+}
+.attachment-remove:hover { color: var(--text-1); }
+.attachment-thumb {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-dim);
+}
+
+/* Sample questions */
+.monitor-scroll-panel { max-height: 24rem; }
+
+.sample-questions-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--sp-2);
+  max-width: 42rem;
+  margin-top: var(--sp-4);
+}
+.sample-question-chip {
+  background: var(--surface);
+  border: 1px solid var(--border-60);
+  color: var(--text-1);
+  font-size: var(--text-sm);
+  padding: var(--sp-2) var(--sp-4);
+  border-radius: var(--radius-2xl);
+  transition: border-color var(--fast);
+  text-align: left;
+}
+.sample-question-chip:hover { border-color: var(--border); }
+
+/* Copy button (on assistant messages) */
+.copy-btn {
+  position: absolute;
+  bottom: -24px;
+  left: 0;
+  color: var(--text-3);
+  padding: var(--sp-1);
+  opacity: 0;
+  transition: opacity var(--fast);
+}
+.copy-btn:hover { color: var(--text-1); }
+.group:hover .copy-btn { opacity: 1; }
+
+/* New session modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--overlay-heavy);
+  animation: fadeIn 0.15s ease-out;
+}
+.modal-content {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-xl);
+  overflow: hidden;
+  animation: slideUp 0.2s ease-out;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sp-4) var(--sp-5);
+  border-bottom: 1px solid var(--border);
+}
+.modal-section-label {
+  padding: var(--sp-2) var(--sp-4);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.modal-content-sm {
+  width: 420px;
+  max-width: 90vw;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+.modal-close-btn {
+  color: var(--text-2);
+  padding: var(--sp-1);
+  transition: color var(--fast);
+}
+.modal-close-btn:hover { color: var(--text-1); }
+.modal-pick-item {
+  width: 100%;
+  text-align: left;
+  padding: var(--sp-3) var(--sp-4);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  transition: background var(--fast);
+  border-bottom: 1px solid var(--border-dim);
+}
+.modal-pick-item:hover { background: var(--hover); }
+
+/* ─── 11. StandaloneChat ─── */
+.standalone-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-width: 56rem;
+  margin: 0 auto;
+}
+.standalone-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-4) var(--sp-5);
+  border-bottom: 1px solid var(--border-40);
+}
+.standalone-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sp-4);
+  padding-right: var(--sp-2);
+  padding-bottom: var(--sp-6);
+}
+.standalone-messages > * + * { margin-top: var(--sp-4); }
+
+/* Mobile floating action button */
+.mobile-fab {
+  display: none;
+  position: fixed;
+  bottom: var(--sp-4);
+  right: var(--sp-4);
+  z-index: 20;
+  background: var(--accent);
+  color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-lg);
+  align-items: center;
+  justify-content: center;
+}
+
+/* Step diagram nodes */
+.step-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--radius-lg);
+  min-width: 100px;
+  text-align: center;
+  transition: all var(--fast);
+}
+.step-node-default { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); }
+.step-node-active  { background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.3); }
+.step-node-done    { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); }
+.step-node-input   { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); min-width: 80px; }
+
+/* Interrupt prompt */
+.interrupt-prompt {
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+}
+
+/* ─── 13. KnowledgeView ─── */
+.kb-shell {
+  display: flex;
+  height: 100%;
+  gap: var(--sp-4);
+  border: 1px solid var(--border-60);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+}
+.kb-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 18rem;
+  flex-shrink: 0;
+  overflow-y: auto;
+  padding-right: var(--sp-2);
+}
+.kb-detail {
+  flex: 1;
+  overflow-y: auto;
+  padding-left: var(--sp-4);
+  border-left: 1px solid var(--border-dim);
+}
+.stat-card {
+  background: var(--surface-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-3);
+  text-align: center;
+}
+.stat-card .stat-value {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--text-1);
+}
+
+/* Progress bar */
+.progress-track {
+  width: 100%;
+  background: var(--bg);
+  border-radius: var(--radius-full);
+  height: 8px;
+}
+.progress-fill {
+  background: var(--accent);
+  height: 8px;
+  border-radius: var(--radius-full);
+  transition: width 0.3s ease;
+}
+
+/* ─── 14. MonitorView ─── */
+.monitor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--sp-4);
+  border-bottom: 1px solid var(--border-dim);
+}
+.monitor-filters {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+.task-row {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: var(--sp-3);
+  cursor: pointer;
+  transition: background var(--fast), border-color var(--fast);
+}
+.task-row:hover { background: var(--surface-dim); }
+.task-row.active {
+  border-color: rgba(94, 106, 210, 0.6);
+  background: var(--accent-5);
+}
+
+/* Details summary (used in monitor, knowledge) */
+details summary {
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-2);
+  transition: color var(--fast);
+}
+details summary:hover { color: var(--text-1); }
+details[open] summary .chevron-icon { transform: rotate(90deg); }
+
+.monitor-event {
+  display: flex;
+  gap: var(--sp-2);
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border-dim);
+}
+.monitor-event-time {
+  color: var(--text-3);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+  width: 4rem;
+}
+
+/* ─── 15. McpView ─── */
+.mcp-tabs {
+  display: flex;
+  gap: var(--sp-2);
+  padding-bottom: var(--sp-4);
+  border-bottom: 1px solid var(--border);
+}
+.mcp-tab {
+  padding: var(--sp-2) var(--sp-4);
+  border-radius: var(--radius-lg);
+  font-weight: 500;
+  transition: background var(--fast), color var(--fast);
+}
+.mcp-tab.active { background: var(--accent); color: #fff; }
+.mcp-tab:not(.active) {
+  background: var(--surface);
+  color: var(--text-2);
+}
+.mcp-tab:not(.active):hover { background: var(--hover); }
+
+.mcp-accordion {
+  background: var(--surface-30);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--sp-4);
+}
+.mcp-accordion-header {
+  padding: var(--sp-4);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background var(--fast);
+}
+.mcp-accordion-header:hover { background: var(--surface-dim); }
+
+.mcp-tool-card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-3);
+  cursor: pointer;
+  transition: border-color var(--fast);
+}
+.mcp-tool-card:hover { border-color: var(--accent); }
+.mcp-tool-card .tool-name { color: var(--accent); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--sp-1); }
+
+/* ─── 16. LocalLlmView ─── */
+
+/* Server panel */
+.llm-server-panel {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.llm-server-header {
+  background: var(--surface);
+  padding: var(--sp-3) var(--sp-4);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.llm-server-details {
+  background: var(--surface-dim);
+  padding: var(--sp-2) var(--sp-4);
+  border-top: 1px solid var(--border-dim);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-4);
+  font-size: 11px;
+  color: var(--text-2);
+  flex-wrap: wrap;
+}
+.llm-server-section {
+  border-top: 1px solid var(--border);
+}
+.llm-section-content {
+  padding: var(--sp-3) var(--sp-4);
+}
+
+/* Pulse indicator (for running model status) */
+.llm-pulse {
+  position: relative;
+  display: inline-flex;
+  height: 10px;
+  width: 10px;
+  flex-shrink: 0;
+}
+.llm-pulse::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-full);
+  opacity: 0.75;
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+.llm-pulse::after {
+  content: '';
+  position: relative;
+  display: inline-flex;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--radius-full);
+}
+.llm-pulse-green::before, .llm-pulse-green::after { background: var(--green-400); }
+.llm-pulse-blue::before, .llm-pulse-blue::after { background: var(--blue-400); }
+.llm-pulse-off {
+  display: inline-flex;
+  height: 10px;
+  width: 10px;
+  border-radius: var(--radius-full);
+  background: var(--text-3);
+  flex-shrink: 0;
+}
+
+/* Model cards */
+.llm-model-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+  transition: border-color var(--fast), background var(--fast);
+}
+.llm-model-card:hover { border-color: rgba(251, 191, 36, 0.5); }
+.llm-model-card.active-chat { border-color: var(--amber-400); background: rgba(251, 191, 36, 0.05); }
+.llm-model-card.active-emb  { border-color: var(--blue-400); background: rgba(96, 165, 250, 0.05); }
+
+/* Model grid */
+.llm-model-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: var(--sp-3);
+}
+@media (min-width: 768px)  { .llm-model-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 1024px) { .llm-model-grid { grid-template-columns: repeat(3, 1fr); } }
+
+/* Recommended model grid */
+.llm-rec-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: var(--sp-3);
+}
+@media (min-width: 768px) { .llm-rec-grid { grid-template-columns: repeat(2, 1fr); } }
+
+/* Recommended model card */
+.llm-rec-card {
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+}
+.llm-rec-card-amber { border: 1px solid rgba(251, 191, 36, 0.3); }
+.llm-rec-card-blue  { border: 1px solid rgba(96, 165, 250, 0.3); }
+
+/* Download bar */
+.llm-download-bar {
+  width: 8rem;
+  background: var(--bg);
+  border-radius: var(--radius-full);
+  height: 6px;
+  overflow: hidden;
+}
+.llm-download-fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width 0.3s ease;
+}
+.llm-download-fill-amber { background: var(--amber-400); }
+
+/* Memory bar */
+.llm-mem-bar {
+  flex: 1;
+  background: var(--bg);
+  border-radius: var(--radius-full);
+  height: 6px;
+}
+.llm-mem-fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width var(--fast);
+}
+.llm-mem-green { background: var(--green); }
+.llm-mem-amber { background: var(--amber-400); }
+.llm-mem-red   { background: var(--red-400); }
+
+/* Model setting sliders */
+.llm-sliders-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border);
+}
+.llm-slider-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+.llm-slider-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+.llm-slider-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.625rem;
+    color: var(--text-muted);
+    opacity: 0.6;
+}
+.llm-range {
+    --range-color: var(--green);
+    --range-fill: 0%;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 4px;
+    border-radius: var(--radius-full);
+    background: linear-gradient(to right, var(--range-color) var(--range-fill), var(--bg) var(--range-fill));
+    outline: none;
+    cursor: pointer;
+}
+.llm-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--range-color);
+    cursor: pointer;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+}
+.llm-range::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--range-color);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+}
+.llm-slider-warning {
+    font-size: 0.75rem;
+    padding: 0.375rem 0.625rem;
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+}
+.llm-slider-warning::before {
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+    content: "\f071";
+    font-size: 0.625rem;
+}
+.llm-slider-warning-amber {
+    color: var(--amber-400);
+    background: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.2);
+}
+.llm-slider-warning-red {
+    color: var(--red-400);
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+/* Thinking toggle */
+.llm-thinking-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.625rem 0;
+    border-top: 1px solid var(--border);
+}
+.llm-toggle {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+.llm-toggle input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
+    z-index: 1;
+}
+.llm-toggle-slider {
+    position: absolute;
+    inset: 0;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    transition: background 0.2s, border-color 0.2s;
+    pointer-events: none;
+}
+.llm-toggle-slider::before {
+    content: "";
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--hover);
+    transition: transform 0.2s, background 0.2s;
+}
+.llm-toggle input:checked + .llm-toggle-slider {
+    background: rgba(168, 85, 247, 0.2);
+    border-color: rgba(168, 85, 247, 0.4);
+}
+.llm-toggle input:checked + .llm-toggle-slider::before {
+    transform: translateX(16px);
+    background: #a855f7;
+}
+
+/* Download alert cards */
+.llm-alert {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-3) var(--sp-4);
+}
+.llm-alert-amber   { border-color: rgba(251, 191, 36, 0.3); }
+.llm-alert-warning  { border-color: rgba(234, 179, 8, 0.3); }
+
+/* Activate error */
+.activate-error {
+  margin-top: var(--sp-2);
+  padding: var(--sp-2) var(--sp-3);
+  font-size: var(--text-xs);
+  color: var(--red-400);
+  background: rgba(248, 113, 113, 0.1);
+  border: 1px solid rgba(248, 113, 113, 0.2);
+  border-radius: var(--radius-lg);
+}
+
+/* HuggingFace search results */
+.hf-result-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-3) var(--sp-4);
+}
+
+/* RAM warning badge */
+.ram-warning-badge {
+  font-size: var(--text-xs);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: rgba(248, 113, 113, 0.2);
+  color: var(--red-400);
+  flex-shrink: 0;
+}
+
+/* Capability badges */
+.cap-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+.cap-badge-tools  { background: rgba(74, 222, 128, 0.15); color: var(--green-400); }
+.cap-badge-vision { background: rgba(96, 165, 250, 0.15); color: var(--blue-400); }
+.cap-badge-think  { background: rgba(167, 139, 250, 0.15); color: var(--purple-400); }
+
+/* HF select (inline in result rows) */
+.hf-select {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-1) var(--sp-2);
+  font-size: var(--text-xs);
+  color: var(--text-1);
+  font-family: var(--font-mono);
+}
+.hf-select:focus { outline: none; border-color: var(--accent); }
+
+/* Copy URL feedback */
+.llm-icon-dim { color: rgba(251, 191, 36, 0.5); }
+
+/* ─── Brand Icons ─── */
+.llm-brand-icon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: -0.125em;
+}
+
+/* ─── Provider Switcher ─── */
+.llm-provider-tabs {
+  display: flex;
+  gap: var(--sp-2);
+}
+.llm-provider-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  padding: var(--sp-2h) var(--sp-3);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-2);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  transition: all 0.15s;
+  cursor: pointer;
+  position: relative;
+}
+.llm-provider-tab:hover { border-color: var(--text-3); color: var(--text-1); }
+.llm-provider-tab.active {
+  border-color: var(--accent);
+  background: var(--accent-10);
+  color: var(--text-1);
+}
+.llm-provider-tab .default-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green-400);
+  flex-shrink: 0;
+}
+@media (max-width: 640px) {
+  .llm-provider-tabs { flex-wrap: wrap; }
+  .llm-provider-tab { flex: 0 0 calc(50% - var(--sp-1)); }
+}
+
+/* ─── Cloud Provider Config ─── */
+.llm-cloud-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+.llm-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-1h);
+}
+.llm-form-label {
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-2);
+}
+.llm-form-hint {
+  font-size: 0.65rem;
+  color: var(--text-3);
+}
+.llm-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sp-3);
+}
+@media (max-width: 640px) {
+  .llm-form-row { grid-template-columns: 1fr; }
+}
+.llm-key-status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+.llm-key-status-set {
+  background: rgba(74, 222, 128, 0.15);
+  color: var(--green-400);
+}
+.llm-key-status-env {
+  background: rgba(96, 165, 250, 0.15);
+  color: var(--blue-400);
+}
+.llm-key-status-missing {
+  background: rgba(248, 113, 113, 0.15);
+  color: var(--red-400);
+}
+.llm-default-banner {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-2h) var(--sp-3);
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(74, 222, 128, 0.3);
+  background: rgba(74, 222, 128, 0.05);
+  font-size: var(--text-xs);
+  color: var(--green-400);
+}
+.llm-config-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  padding: var(--sp-4);
+}
+.llm-named-configs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.llm-named-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  padding: var(--sp-2h) var(--sp-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  font-size: var(--text-sm);
+}
+.llm-named-row .name { font-weight: 500; color: var(--text-1); min-width: 80px; }
+.llm-named-row .model { color: var(--text-2); font-family: var(--font-mono); font-size: var(--text-xs); flex: 1; }
+
+/* ─── Engine Selector ─── */
+.llm-engine-tabs {
+  display: flex;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-4);
+}
+.llm-engine-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  padding: var(--sp-2) var(--sp-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-2);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  transition: all var(--fast);
+  cursor: pointer;
+  position: relative;
+}
+.llm-engine-tab:hover { border-color: var(--text-3); color: var(--text-1); }
+.llm-engine-tab.active {
+  border-color: var(--accent);
+  background: var(--accent-10);
+  color: var(--text-1);
+}
+.llm-engine-tab.unavailable {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.llm-engine-tab .engine-status {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.llm-engine-tab .engine-status.connected { background: var(--green); }
+.llm-engine-tab .engine-status.disconnected { background: var(--text-3); }
+@media (max-width: 640px) {
+  .llm-engine-tabs { flex-wrap: wrap; }
+  .llm-engine-tab { flex: 0 0 calc(50% - var(--sp-1)); }
+}
+/* ─── 17. IdeView ─── */
+.ide-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.ide-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  padding: var(--sp-2) var(--sp-4);
+  flex-shrink: 0;
+}
+.ide-main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  border: 1px solid var(--border);
+  border-top: none;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  overflow: hidden;
+}
+.ide-tree {
+  width: 15rem;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+}
+.ide-tree-header {
+  padding: var(--sp-2) var(--sp-3);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ide-editor {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+}
+
+/* Tree items */
+.tree-item {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--text-1);
+}
+.tree-item:hover { background: var(--hover); }
+.tree-item.active-file { background: var(--hover); color: #fff; }
+.tree-depth-0 { padding-left: 8px; }
+.tree-depth-1 { padding-left: 24px; }
+.tree-depth-2 { padding-left: 40px; }
+.tree-depth-3 { padding-left: 56px; }
+.tree-depth-4 { padding-left: 72px; }
+.tree-depth-5 { padding-left: 88px; }
+
+.tree-menu-btn {
+  opacity: 0;
+  padding: 0 var(--sp-1);
+  color: var(--text-3);
+  transition: opacity var(--fast);
+}
+.tree-item:hover .tree-menu-btn { opacity: 1; }
+.tree-menu-btn:hover { color: var(--text-1); }
+
+/* Context menu */
+.context-menu {
+  position: fixed;
+  z-index: 50;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: var(--sp-1) 0;
+  min-width: 100px;
+}
+.context-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 6px var(--sp-3);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  color: var(--text-1);
+  transition: background var(--fast);
+}
+.context-item:hover { background: var(--hover); }
+.context-item.danger { color: var(--red-400); }
+
+/* Mode toggle */
+.mode-toggle {
+  display: flex;
+  align-items: center;
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.mode-toggle-btn {
+  padding: var(--sp-1) var(--sp-2h);
+  font-size: var(--text-xs);
+  transition: background var(--fast), color var(--fast);
+  color: var(--text-3);
+}
+.mode-toggle-btn.active {
+  background: var(--hover);
+  color: #fff;
+}
+
+/* Inline rename input */
+.inline-tree-input {
+  background: var(--hover);
+  border: 1px solid var(--blue-400);
+  color: #fff;
+  font-size: var(--text-sm);
+  border-radius: var(--radius-sm);
+  padding: 0 var(--sp-1);
+  outline: none;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Toast */
+.ide-toast {
+  position: fixed;
+  bottom: var(--sp-4);
+  right: var(--sp-4);
+  z-index: 50;
+  color: #fff;
+  font-size: var(--text-sm);
+  padding: var(--sp-2) var(--sp-4);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  background: var(--accent);
+}
+.ide-toast.error { background: var(--red); }
+
+/* Create resource modal */
+.create-modal-input {
+  display: flex;
+  align-items: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.create-modal-input span {
+  padding: var(--sp-2) var(--sp-3);
+  font-size: var(--text-sm);
+  color: var(--text-3);
+  background: var(--hover);
+  border-right: 1px solid var(--border);
+}
+.create-modal-input span:last-child {
+  border-right: none;
+  border-left: 1px solid var(--border);
+}
+.create-modal-input input {
+  flex: 1;
+  padding: var(--sp-2) var(--sp-3);
+  background: transparent;
+  color: #fff;
+  font-size: var(--text-sm);
+  border: none;
+  outline: none;
+}
+
+/* Resource dropdown */
+.resource-dropdown {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 50;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--sp-1) 0;
+  margin-top: var(--sp-1);
+  min-width: 140px;
+}
+.resource-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 6px var(--sp-3);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  color: var(--text-1);
+  transition: background var(--fast);
+}
+.resource-dropdown-item:hover { background: var(--hover); }
+
+/* ─── 18. GraphView ─── */
+.graph-canvas {
+  background: radial-gradient(ellipse at center, #1f2030 0%, #14151f 100%);
+}
+#graphContainer {
+  width: 100%;
+  height: 100%;
+}
+.graph-sidebar {
+  position: absolute;
+  top: var(--sp-2);
+  right: var(--sp-2);
+  width: 16rem;
+  max-height: 18rem;
+  overflow-y: auto;
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+  opacity: 0.9;
+  padding: var(--sp-3);
+}
+.graph-prop {
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-1) var(--sp-2);
+  border: 1px solid var(--border);
+}
+
+/* ─── 19. LlmView ─── */
+.llm-output {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+  min-height: 200px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--text-1);
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+/* ─── 20. AgentComposer ─── */
+.composer-root {
+  overflow-y: auto;
+  height: 100%;
+  padding: var(--sp-4);
+}
+.composer-root > * + * { margin-top: var(--sp-4); }
+
+.composer-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-4);
+}
+.composer-section h3 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-1);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-3);
+}
+.composer-field label {
+  display: block;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-1);
+  margin-bottom: var(--sp-2);
+}
+.composer-field .help-text {
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  margin-top: var(--sp-1);
+}
+.composer-label {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  margin-bottom: var(--sp-1);
+}
+.composer-input-field {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-2) var(--sp-3);
+  font-size: var(--text-sm);
+  color: var(--text-1);
+  outline: none;
+  transition: border-color var(--fast);
+}
+.composer-input-field:focus { border-color: var(--accent); }
+.composer-input-sm {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--sp-1) var(--sp-2);
+  font-size: var(--text-xs);
+  color: var(--text-1);
+  outline: none;
+  transition: border-color var(--fast);
+}
+.composer-input-sm:focus { border-color: var(--accent); }
+.composer-input-field.error { border-color: var(--red-400); }
+.composer-sub-card {
+  background: var(--surface-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--sp-3);
+}
+.composer-add-btn {
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  transition: color var(--fast);
+}
+.composer-add-btn:hover { color: var(--text-1); }
+.composer-remove-btn {
+  font-size: var(--text-xs);
+  color: var(--text-3);
+  transition: color var(--fast);
+}
+.composer-remove-btn:hover { color: var(--red-400); }
+.cron-preset-btn {
+  padding: 2px 6px;
+  font-size: 10px;
+  color: var(--text-3);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  transition: color var(--fast), border-color var(--fast);
+}
+.cron-preset-btn:hover { color: var(--text-1); }
+.var-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  padding: 2px var(--sp-2);
+  border-radius: var(--radius-sm);
+  background: rgba(20, 83, 45, 0.5);
+  color: var(--green-300);
+  border: 1px solid rgba(22, 101, 52, 0.5);
+}
+
+/* Tool picker (inline variant used by composer) */
+.tool-picker-inline {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  margin-top: var(--sp-2);
+}
+.tool-picker-inline-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+}
+.tool-picker-inline-tab {
+  flex: 1;
+  padding: var(--sp-1) var(--sp-2);
+  font-size: var(--text-xs);
+  text-align: center;
+  color: var(--text-3);
+  transition: color var(--fast), background var(--fast);
+}
+.tool-picker-inline-tab.active {
+  color: var(--text-1);
+  background: var(--surface);
+}
+.tool-picker-inline-tab:not(.active):hover {
+  color: var(--text-2);
+}
+.tool-picker-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sp-1) var(--sp-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+}
+.tool-picker-item.available {
+  color: var(--text-2);
+  cursor: pointer;
+}
+.tool-picker-item.available:hover { background: var(--surface); }
+.tool-picker-item.added { color: var(--text-3); }
+.tool-picker-list { max-height: 9rem; overflow-y: auto; }
+
+/* Tool chips (prefix-colored) */
+.tool-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  padding: 2px var(--sp-2);
+  border-radius: var(--radius-sm);
+  border: 1px solid;
+}
+.tool-chip-mcp       { background: rgba(30, 58, 138, 0.5); color: var(--blue-300); border-color: rgba(29, 78, 216, 0.5); }
+.tool-chip-knowledge { background: rgba(88, 28, 135, 0.5); color: var(--purple-300); border-color: rgba(107, 33, 168, 0.5); }
+.tool-chip-function  { background: rgba(113, 63, 18, 0.5); color: var(--yellow-300); border-color: rgba(133, 77, 14, 0.5); }
+.tool-chip-builtin   { background: rgba(20, 83, 45, 0.5); color: var(--green-300); border-color: rgba(22, 101, 52, 0.5); }
+.tool-chip-sandbox   { background: rgba(124, 45, 18, 0.5); color: var(--orange-300); border-color: rgba(154, 52, 18, 0.5); }
+.tool-chip-workspace { background: var(--surface); color: var(--text-2); border-color: var(--border); }
+
+/* Tool picker overlay */
+.tool-picker-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--overlay-heavy);
+}
+.tool-picker {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  width: 600px;
+  max-width: 90vw;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tool-picker-tabs {
+  display: flex;
+  gap: var(--sp-1);
+  padding: var(--sp-3) var(--sp-4);
+  border-bottom: 1px solid var(--border);
+}
+.tool-picker-tab {
+  padding: var(--sp-1h) var(--sp-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  transition: background var(--fast), color var(--fast);
+}
+.tool-picker-tab.active { background: var(--accent); color: #fff; }
+.tool-picker-tab:not(.active) { color: var(--text-2); }
+.tool-picker-tab:not(.active):hover { background: var(--hover); }
+
+/* ─── 21. Markdown Content ─── */
+.markdown-content { line-height: 1.6; }
+.markdown-content h1 { font-size: 1.5em; font-weight: 700; margin: 0.5em 0; }
+.markdown-content h2 { font-size: 1.3em; font-weight: 600; margin: 0.5em 0; }
+.markdown-content h3 { font-size: 1.1em; font-weight: 600; margin: 0.5em 0; }
+.markdown-content p { margin: 0.5em 0; }
+.markdown-content ul, .markdown-content ol { margin: 0.5em 0; padding-left: 1.5em; }
+.markdown-content li { margin: 0.25em 0; }
+.markdown-content code {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+.markdown-content pre {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1em;
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+.markdown-content pre code { background: none; padding: 0; }
+.markdown-content a { color: var(--accent); text-decoration: underline; }
+.markdown-content a:hover { color: #7c85e0; }
+.markdown-content blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1em;
+  color: var(--text-2);
+  margin: 0.5em 0;
+}
+.markdown-content table { border-collapse: collapse; margin: 0.5em 0; }
+.markdown-content th, .markdown-content td { border: 1px solid var(--border); padding: 0.5em; }
+.markdown-content th { background: rgba(255, 255, 255, 0.05); font-weight: 600; }
+
+/* ─── 22. Scrollbar ─── */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-sm); }
+::-webkit-scrollbar-thumb:hover { background: #3f404a; }
+
+.custom-scrollbar::-webkit-scrollbar { width: 6px; }
+.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+/* ─── 23. Animations & Keyframes ─── */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes slideInLeft {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes bounce {
+  from { transform: translateY(0); }
+  to { transform: translateY(-6px); }
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+@keyframes orca-swim {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  30% { transform: translateY(-10px) rotate(-1.5deg); }
+  70% { transform: translateY(10px) rotate(1.5deg); }
+}
+
+.animate-spin  { animation: spin 0.6s linear infinite; }
+.spinner-sm {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: var(--radius-full);
+  animation: spin 0.6s linear infinite;
+}
+.animate-bounce { animation: bounce 0.6s infinite alternate; }
+.animate-pulse { animation: pulse 2s ease-in-out infinite; }
+.animate-pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }
+.animation-delay-200 { animation-delay: 0.2s; }
+.animation-delay-400 { animation-delay: 0.4s; }
+.fade-in { animation: fadeIn 0.3s ease-out; }
+.sidebar-open { animation: slideInLeft 0.2s ease-out; }
+
+/* ─── Welcome Orca ─── */
+.welcome-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 2rem;
+}
+.welcome-orca {
+  width: 200px;
+  height: 140px;
+  animation: orca-swim 4s ease-in-out infinite;
+  filter: drop-shadow(0 0 12px rgba(94, 106, 210, 0.3));
+}
+.welcome-orca .orca-body {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  opacity: 0.7;
+}
+.welcome-orca .orca-detail {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1;
+  opacity: 0.4;
+}
+.welcome-orca .orca-eye {
+  fill: var(--accent);
+  opacity: 0.8;
+}
+.welcome-orca .orca-patch {
+  fill: rgba(94, 106, 210, 0.08);
+  stroke: var(--accent);
+  stroke-width: 0.8;
+  opacity: 0.4;
+}
+.welcome-text {
+  color: #8f8fbe;
+  font-size: 0.95rem;
+  opacity: 0.7;
+  text-align: center;
+  letter-spacing: 0.05em;
+}
+
+/* Session reset banner */
+.session-reset-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0;
+  margin: 8px 0;
+}
+.session-reset-line {
+  flex: 1;
+  height: 1px;
+  background: rgba(94, 106, 210, 0.2);
+}
+.session-reset-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--accent);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+  opacity: 0.8;
+}
+
+/* Tools popover (chat header) */
+.tools-badge-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+.tools-popover {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 6px 0;
+  min-width: 180px;
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 50;
+  box-shadow: var(--shadow-md);
+}
+.tools-popover::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  width: 8px;
+  height: 8px;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+.tools-badge-wrapper:hover .tools-popover { display: block; }
+.tools-popover-item {
+  padding: 4px 12px;
+  font-size: var(--text-xs);
+  color: var(--text-1);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+.tools-popover-item:hover { background: var(--hover); }
+
+/* Mobile sidebar toggle (floating button) */
+.mobile-sidebar-toggle {
+  display: none;
+  position: fixed;
+  bottom: var(--sp-4);
+  right: var(--sp-4);
+  z-index: 20;
+  background: var(--accent);
+  color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-lg);
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── 24. Responsive ─── */
+@media (max-width: 767px) {
+  #app-sidebar {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 40;
+  }
+  #app-sidebar.open {
+    display: flex;
+    animation: slideInLeft 0.2s ease-out;
+  }
+  .app-mobile-header { display: flex; }
+  .app-content { padding: var(--sp-4); }
+
+  /* Agent sidebar */
+  .agent-sidebar {
+    display: none;
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 40;
+  }
+  .agent-sidebar.open {
+    display: flex;
+    animation: slideInLeft 0.2s ease-out;
+  }
+
+  /* Chat header mobile padding */
+  .chat-header { padding-left: var(--sp-3); padding-right: var(--sp-3); }
+  .sidebar-toggle-btn { display: block; }
+
+  /* Sidebar-based views */
+  .wf-sidebar,
+  .kb-sidebar { display: none; }
+  .wf-sidebar.visible,
+  .kb-sidebar.visible { display: flex; }
+
+  .mobile-sidebar-toggle { display: flex; }
+}
+
+@media (min-width: 768px) {
+  .md-hidden { display: none; }
+  .md-flex { display: flex; }
+  .md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .md-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .md-px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
+}
+
+@media (min-width: 1024px) {
+  .lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}