@flame0510/project-aether 1.1.9

package/app/globals.css

@@ -0,0 +1,1474 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  /* Design tokens (semantic) */
+  --font-mono-stack: var(--font-mono, "JetBrains Mono"), monospace;
+  --font-serif-stack: var(--font-serif, "Instrument Serif"), serif;
+
+  /* Breakpoint tokens (Bootstrap v5) */
+  --bp-sm: 576px;
+  --bp-md: 768px;
+  --bp-lg: 992px;
+  --bp-xl: 1200px;
+  --bp-xxl: 1400px;
+
+  --color-bg-950: #0A0A0B;
+  --color-bg-900: #111114;
+  --color-bg-800: #18181c;
+  --color-border-700: #222228;
+  --color-text-100: #E8E8E8;
+  --color-text-400: #888;
+  --color-text-500: #4b5563;
+  --color-accent-500: #925BFC;
+  --color-accent-700: #6d4fa0;
+  --color-success-500: #22c55e;
+  --color-danger-500: #ef4444;
+  --color-warning-500: #f59e0b;
+  --color-info-500: #818cf8;
+  --color-blue-400: #60a5fa;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+
+  /* Backward-compatible aliases */
+  --bg: var(--color-bg-950);
+  --bg2: var(--color-bg-900);
+  --bg3: var(--color-bg-800);
+  --violet: var(--color-accent-500);
+  --violet-dim: var(--color-accent-700);
+  --violet-bg: rgba(146, 91, 252, 0.08);
+  --text: var(--color-text-100);
+  --text-dim: var(--color-text-400);
+  --green: var(--color-success-500);
+  --red: var(--color-danger-500);
+  --yellow: var(--color-warning-500);
+  --info: var(--color-info-500);
+  --blue: var(--color-blue-400);
+  --gray: var(--color-text-500);
+  --border: var(--color-border-700);
+}
+
+html, body { height: 100%; height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-mono-stack); overflow: hidden; }
+
+  .agent-btn {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    padding: 3px 10px;
+    border: 1px solid var(--border);
+    background: var(--bg3);
+    color: var(--text-dim);
+    border-radius: 0;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+  }
+  .agent-btn:hover { border-color: var(--violet-dim); color: var(--text); }
+  .agent-btn.active { border-color: var(--violet); color: var(--violet); background: #1a1030; }
+
+  .node circle { stroke-width: 2; transition: r 0.3s; }
+  .node.active circle { stroke: var(--green); fill: #0d2818; }
+  .node.idle circle { stroke: var(--gray); fill: #111; }
+  .node.completed circle { stroke: #4b5563; fill: #0a0a0b; }
+  .node.grace { opacity: 0.35; transition: opacity 1s ease-out; }
+  .node.error circle { stroke: var(--red); fill: #1a0a0a; }
+  .node.working circle { stroke: var(--green); fill: #0d2818; }
+  .node.virtual circle { stroke: var(--violet); fill: #120d06; stroke-dasharray: 4,3; }
+
+  .node text { font-family: 'JetBrains Mono', monospace; fill: var(--text); font-size: 10px; }
+
+  .link { fill: none; stroke: var(--border); stroke-width: 1.5; }
+  .link.virtual-link { stroke: var(--violet-dim); stroke-dasharray: 4,3; stroke-opacity: 0.5; }
+
+  @keyframes glow {
+    0%, 100% { filter: drop-shadow(0 0 4px #22c55e88); }
+    50% { filter: drop-shadow(0 0 12px #22c55ecc); }
+  }
+  .node.active, .node.working { animation: glow 2s ease-in-out infinite; }
+
+/* ── APP SHELL ─────────────────────────────────────────────────── */
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
+}
+
+.app-shell__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+.app-shell__content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── SIDEBAR ────────────────────────────────────────────────────── */
+.sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  background: var(--color-bg-900);
+  border-right: 1px solid var(--color-border-700);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar__logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--color-border-700);
+  height: 48px;
+  flex-shrink: 0;
+}
+
+.sidebar__eye { flex-shrink: 0; }
+
+.sidebar__title {
+  font-family: var(--font-serif-stack);
+  font-size: 16px;
+  letter-spacing: 3px;
+  color: var(--color-accent-500);
+}
+
+.sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  gap: 0;
+}
+
+.sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--color-text-400);
+  text-decoration: none;
+  border-radius: 0;
+  transition: color 0.12s, background 0.12s;
+  border-left: 2px solid transparent;
+}
+
+.sidebar__item:hover {
+  color: var(--color-text-100);
+  background: var(--color-bg-800);
+}
+
+.sidebar__item--active {
+  color: var(--color-accent-500);
+  background: var(--violet-bg);
+  border-left-color: var(--color-accent-500);
+}
+
+.sidebar__bottom {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar__item--logout {
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 12px 16px;
+  color: var(--text-dim);
+}
+.sidebar__item--logout:hover {
+  color: var(--color-text-100);
+  background: var(--color-bg-800);
+}
+
+.sidebar__footer {
+  padding: 12px 16px;
+  font-size: 10px;
+  color: var(--text-dim);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-mono);
+  opacity: 0.6;
+  line-height: 1.4;
+}
+
+.sidebar__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ── MOBILE TOP BAR ─────────────────────────────────────────────── */
+.mobile-topbar {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 190;
+  background: var(--color-bg-900);
+  border-bottom: 1px solid var(--color-border-700);
+  flex-direction: column;
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+.mobile-topbar--open {
+  max-height: calc(100dvh - 54px - env(safe-area-inset-bottom, 0px));
+  overflow-y: auto;
+  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
+  border-bottom: 1px solid var(--color-border-700);
+}
+
+.mobile-topbar__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  padding-left: 0;
+  padding-right: 0;
+  flex-shrink: 0;
+}
+
+.mobile-topbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 0 12px;
+}
+
+.mobile-topbar__brand img {
+  width: 20px;
+  height: 20px;
+  display: block;
+  object-fit: contain;
+}
+
+.mobile-topbar__brand span {
+  font-family: var(--font-serif-stack);
+  font-size: 15px;
+  letter-spacing: 3px;
+  color: var(--color-accent-500);
+}
+
+.mobile-topbar__menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--color-text-100);
+  cursor: pointer;
+  padding: 12px;
+  line-height: 0;
+}
+
+/* ── MOBILE DRAWER ──────────────────────────────────────────────── */
+.mobile-drawer__wrapper {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease;
+}
+
+.mobile-topbar--open .mobile-drawer__wrapper {
+  max-height: 1000px; /* large enough to fit all items */
+}
+
+.mobile-drawer {
+  background: var(--color-bg-900);
+  padding: 4px 0;
+}
+
+.mobile-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  top: calc(48px + env(safe-area-inset-top, 0px));
+  background: rgba(0,0,0,0.55);
+  z-index: 189;
+}
+
+/* ── RESPONSIVE ─────────────────────────────────────────────────── */
+@media (max-width: 767px) {
+  html, body { height: 100svh; }
+  .app-shell { height: 100svh; max-height: 100svh; }
+  .sidebar--desktop { display: none !important; }
+  .mobile-topbar { display: flex; }
+  .app-shell__body {
+    width: 100%;
+    flex-direction: column;
+  }
+  .app-shell__content {
+    width: 100%;
+    padding-top: 48px;
+    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/* ── DASHBOARD CLIENT CLASSES ──────────────────────────────────── */
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  font-family: var(--font-mono-stack);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+  height: 48px;
+  flex-shrink: 0;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo img {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.logo span {
+  font-family: var(--font-serif-stack);
+  font-size: 20px;
+  letter-spacing: 4px;
+  color: var(--violet);
+}
+
+.meta {
+  display: flex;
+  gap: 24px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.meta > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.meta-label {
+  font-size: 9px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+
+.meta-value {
+  font-size: 12px;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.meta-value.cost {
+  color: var(--violet);
+  font-weight: 700;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.toolbar::-webkit-scrollbar { height: 3px; }
+.toolbar::-webkit-scrollbar-thumb { background: var(--violet-dim); border-radius: 0; }
+
+.toolbar-label {
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  white-space: nowrap;
+  margin-right: 4px;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.layout--cockpit {
+  display: block;
+  overflow: hidden;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.panel h2 {
+  padding: 8px 16px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  color: var(--violet);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+  text-transform: uppercase;
+  flex-shrink: 0;
+  font-weight: normal;
+}
+
+.graph-panel {
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.graph-shell {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.graph-shell svg {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+}
+
+.graph-shell svg:active {
+  cursor: grabbing;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  user-select: none;
+}
+
+.empty-state-icon {
+  font-size: 32px;
+  color: var(--violet, #925BFC);
+  opacity: 0.25;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+.empty-state-msg {
+  color: var(--text-dim, #89a1ad);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+
+.graph-tooltip {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  background: var(--surface, #16181c);
+  border: 1px solid var(--border, #2a2f3a);
+  border-radius: 0;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--text, #d6e2e8);
+  line-height: 1.6;
+  pointer-events: none;
+  max-width: 260px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  white-space: nowrap;
+}
+
+.side {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+.feed-panel {
+  flex: 1.5;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.feed-panel > div {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+  min-height: 0;
+}
+
+.feed-panel > div::-webkit-scrollbar { width: 4px; }
+.feed-panel > div::-webkit-scrollbar-track { background: var(--bg2); }
+.feed-panel > div::-webkit-scrollbar-thumb { background: var(--violet-dim); border-radius: 0; }
+
+.feed-time { color: var(--text-dim); font-size: 10px; flex-shrink: 0; width: 52px; margin-right: 4px; }
+.feed-type { color: var(--violet); font-weight: 700; font-size: 10px; flex-shrink: 0; margin-right: 6px; text-transform: uppercase; min-width: 40px; }
+.feed-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
+
+.feed-item {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 4px 16px;
+  font-size: 10px;
+  line-height: 1.5;
+  border-bottom: 1px solid var(--color-border-700);
+}
+
+.cost-panel {
+  border-top: 1px solid var(--border);
+  background: var(--bg2);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cost-panel > div {
+  padding: 8px 16px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.cost-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 16px; font-size: 10px; border-bottom: 1px solid var(--color-border-700); }
+.cost-row:last-child { border-bottom: none; }
+
+.cost-row .k { color: var(--text-dim); font-size: 10px; }
+.cost-row .v { color: var(--violet); font-weight: 700; }
+
+@media (max-width: 991px) { .screenshot-btn-desktop { display: none; } }
+
+/* Skeleton loaders */
+.skeleton {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(90deg, rgba(255,255,255,0.045), rgba(255,255,255,0.09), rgba(255,255,255,0.045));
+  background-size: 220% 100%;
+  animation: skeleton-shimmer 1.35s ease-in-out infinite;
+  border-radius: 0;
+  color: transparent !important;
+  will-change: background-position;
+}
+.skeleton--text { height: 1em; min-width: 72px; vertical-align: -0.12em; }
+.skeleton--metric { height: 30px; width: 92px; }
+.skeleton--pill { height: 18px; width: 72px; border-radius: 999px; }
+.skeleton--line { height: 10px; width: 100%; }
+.skeleton--card { min-height: 110px; border: 1px solid var(--border); background: var(--bg2); border-radius: 0; padding: 16px; }
+@keyframes skeleton-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
+@keyframes progress-indeterminate { 0% { width: 0%; margin-left: 0; } 50% { width: 40%; margin-left: 30%; } 100% { width: 0%; margin-left: 100%; } }
+
+/* Rev4a UI system primitives */
+.ui-page { min-height: 100%; background: var(--bg); color: var(--text); padding: 24px 20px 40px; overflow: auto; }
+.ui-page__inner { margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
+.ui-page-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
+.ui-eyebrow, .ui-kicker { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
+.ui-eyebrow { color: var(--violet); font-size: 12px; margin-bottom: 6px; }
+.ui-kicker--accent { color: var(--violet); }
+.ui-page-title { margin: 0; font-family: var(--font-serif-stack); font-size: 34px; font-weight: 400; }
+.ui-page-description { margin: 10px 0 0; color: var(--text-dim); max-width: 760px; line-height: 1.5; font-size: 13px; }
+.ui-surface { border: 1px solid var(--border); background: var(--bg2); border-radius: 0; padding: 16px; min-height: 110px; }
+.ui-surface--panel { border-radius: 0; min-height: 0; padding: 0; overflow: hidden; }
+.ui-surface--subtle { background: rgba(255,255,255,0.015); }
+.ui-tone--accent { border-color: var(--violet-dim); }
+.ui-tone--success { border-color: #255b3f; }
+.ui-tone--warning { border-color: #7c5a1a; }
+.ui-tone--danger { border-color: #7f1d1d; }
+.ui-muted { color: var(--text-dim); }
+.ui-metric-value { margin-top: 14px; font-size: 26px; font-weight: 800; color: var(--text); }
+.ui-tone--danger .ui-metric-value { color: var(--red); }
+.ui-metric-subtitle { margin-top: 8px; font-size: 11px; }
+.ui-card-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
+.ui-health { font-size: 10px; text-transform: uppercase; font-weight: 700; }
+.ui-health--ok { color: var(--green); }
+.ui-health--warning { color: #f59e0b; }
+.ui-health--error { color: var(--red); }
+.ui-key-values { display: grid; gap: 8px; }
+.ui-key-value { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
+.ui-key-value > span:last-child { color: var(--text); text-align: right; }
+.ui-pill { border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,0.02); border-radius: 999px; padding: 2px 8px; font-size: 10px; letter-spacing: 0.04em; }
+.ui-pill.ui-tone--success { border-color: #255b3f; color: #5ee9a0; background: rgba(34,197,94,0.08); }
+.ui-pill.ui-tone--warning { border-color: #7c5a1a; color: #f6c66b; background: rgba(245,158,11,0.08); }
+.ui-pill.ui-tone--danger { border-color: #7f1d1d; color: #fca5a5; background: rgba(239,68,68,0.08); }
+.ui-pill.ui-tone--accent { border-color: var(--violet-dim); color: var(--violet); background: rgba(146,91,252,0.08); }
+.ui-pill.ui-tone--info { border-color: rgba(99,102,241,0.28); color: #818cf8; background: rgba(99,102,241,0.12); }
+.ui-tone--info { border-color: rgba(99,102,241,0.28); }
+
+.cockpit { overflow: auto; height: 100%; padding: 20px; }
+.cockpit__metrics { display: grid; grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
+.cockpit__health-row { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; }
+.cockpit__health { font-size: 34px; text-transform: uppercase; font-weight: 800; }
+.cockpit__health--ok { color: var(--green); }
+.cockpit__health--warning { color: #f59e0b; }
+.cockpit__health--error { color: var(--red); }
+.cockpit__main { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; }
+.cockpit__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.cockpit__recommendations { display: flex; flex-direction: column; gap: 10px; list-style: none; }
+.cockpit__recommendation { padding-left: 10px; color: var(--text); font-size: 12px; line-height: 1.5; border-left: 2px solid var(--border); }
+.cockpit__recommendation--warning { border-left-color: #f59e0b; }
+.cockpit__recommendation--error { border-left-color: var(--red); }
+.cockpit__recommendation--info, .cockpit__recommendation--ok { border-left-color: var(--green); }
+.cockpit__recommendation-head { display: flex; justify-content: space-between; gap: 8px; }
+.cockpit__recommendation-head span { color: var(--text-dim); font-size: 10px; text-transform: uppercase; }
+.cockpit__quick-links { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
+
+.cockpit__feed-section { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+@media (max-width: 900px) { .cockpit__feed-section { grid-template-columns: 1fr; } }
+.ui-link { color: var(--violet); text-decoration: none; }
+.ui-link:hover { text-decoration: underline; }
+@media (max-width: 991px) {
+  .cockpit__metrics, .cockpit__main, .cockpit__checks { grid-template-columns: 1fr; }
+}
+
+/* ── Floating actions container (Wizard + Pulse) ──────────────── */
+.floating-actions {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  right: 24px;
+  z-index: 9000;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  pointer-events: none;
+}
+
+/* Desktop: pulse always on the right */
+@media (min-width: 768px) {
+  .floating-actions {
+    left: 224px;
+    justify-content: flex-end;
+    gap: 0;
+  }
+}
+
+.floating-actions__left {
+  pointer-events: auto;
+  display: flex;
+}
+
+.floating-actions__right {
+  pointer-events: auto;
+  display: flex;
+}
+
+/* Wizard visible only on mobile (sidebar handles it on desktop) */
+@media (min-width: 768px) {
+  .floating-actions__left { display: none; }
+}
+
+/* Hide sidebar wizard link on mobile */
+.sidebar__nav a[href="/wizard"] {
+  display: none;
+}
+@media (min-width: 768px) {
+  .sidebar__nav a[href="/wizard"] {
+    display: flex;
+    color: var(--violet);
+  }
+}
+
+/* On desktop, offset Pulse to not overlap sidebar */
+@media (min-width: 768px) {
+  .floating-actions {
+    left: 224px; /* sidebar ~200px + 24px spacing */
+  }
+}
+
+.floating-actions > * {
+  pointer-events: auto;
+}
+
+.floating-actions .ochat__trigger {
+  position: static;
+  border: 1px solid var(--border);
+}
+
+/* Wizard button: wider to fit icon + label */
+.floating-actions .ochat__trigger:first-child {
+  width: auto;
+  gap: 6px;
+  padding: 0 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 11px;
+  font-family: var(--font-mono-stack);
+}
+
+.floating-actions__label {
+  white-space: nowrap;
+}
+
+.floating-actions__badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  width: 10px;
+  height: 10px;
+  border-radius: 0;
+  background: #fbbf24;
+  box-shadow: 0 0 6px rgba(251,191,36,0.6);
+  border: 2px solid var(--bg2);
+}
+
+@media (max-width: 640px) {
+  .floating-actions {
+    bottom: 16px;
+    left: 16px;
+    right: 16px;
+  }
+}
+
+@media (max-width: 900px) {
+  .floating-actions {
+    bottom: 70px !important;
+  }
+}
+
+/* ── PulseChat widget ──────────────────────────────────────────── */
+.ochat__trigger {
+  position: static;
+  width: 44px;
+  height: 44px;
+  background: var(--bg2);
+  color: var(--violet);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(0,0,0,.5);
+  transition: background .15s;
+}
+.floating-actions .ochat__trigger {
+  border: 1px solid var(--border);
+}
+.ochat__trigger:hover { background: var(--bg3); }
+
+.ochat__panel {
+  position: fixed;
+  bottom: 78px;
+  right: 24px;
+  z-index: 9001;
+  width: 340px;
+  max-height: 520px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  border-radius: 0;
+  background: var(--bg2);
+  box-shadow: 0 8px 32px rgba(0,0,0,.7);
+  overflow: hidden;
+}
+
+.ochat__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg3);
+  flex-shrink: 0;
+}
+.ochat__header-title {
+  font-size: 10px;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+}
+.ochat__close {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+}
+.ochat__close:hover { color: var(--text); }
+
+.ochat__clear {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 3px 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0;
+  font-size: 9px;
+  transition: all 0.15s;
+  line-height: 1;
+}
+.ochat__clear:hover {
+  color: var(--violet);
+  border-color: var(--violet);
+}
+
+.ochat__messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.55;
+}
+.ochat__empty {
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.6;
+}
+.ochat__msg {
+  max-width: 90%;
+  padding: 7px 10px;
+  border-radius: 0;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.ochat__msg--user {
+  align-self: flex-end;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+.ochat__msg--assistant {
+  align-self: flex-start;
+  background: transparent;
+  color: var(--text);
+  border: 1px solid transparent;
+}
+.ochat__cursor {
+  display: inline-block;
+  width: 6px;
+  height: 12px;
+  background: var(--violet);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: blink .8s step-end infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+.ochat__footer {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--bg3);
+  flex-shrink: 0;
+}
+.ochat__input {
+  flex: 1;
+  resize: none;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  color: var(--text);
+  font-family: var(--font-mono-stack);
+  font-size: 11px;
+  line-height: 1.5;
+  padding: 5px 8px;
+  max-height: 80px;
+  overflow-y: auto;
+}
+.ochat__input:focus { outline: none; border-color: var(--violet); }
+.ochat__input::placeholder { color: var(--text-dim); }
+.ochat__input:disabled { opacity: .5; }
+.ochat__send {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 0;
+  border: 1px solid var(--violet);
+  background: transparent;
+  color: var(--violet);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background .15s;
+}
+.ochat__send:hover:not(:disabled) { background: var(--violet); color: var(--bg); }
+.ochat__send:disabled { opacity: .35; cursor: default; }
+
+@media (max-width: 575px) {
+  .ochat__panel { width: calc(100vw - 32px); right: 16px; }
+  .ochat__trigger { right: 16px; bottom: 16px; }
+}
+
+/* ============================================================== */
+/*  UI Components  —  Button, Input, Select, Modal, Toast          */
+/* ============================================================== */
+
+/* ── Button ────────────────────────────────────────────────── */
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 0;
+  border: 1px solid var(--border);
+  font-family: var(--font-mono-stack);
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
+  white-space: nowrap;
+  flex-shrink: 0;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.ui-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.ui-btn--sm { font-size: 10px; padding: 6px 12px; }
+.ui-btn--md { font-size: 11px; padding: 8px 16px; }
+
+.ui-btn--primary {
+  background: var(--violet);
+  border-color: var(--violet);
+  color: #111;
+}
+.ui-btn--primary:hover:not(:disabled) {
+  background: var(--violet-hover, #7B4FD4);
+}
+
+.ui-btn--secondary {
+  background: var(--bg3);
+  color: var(--text);
+}
+.ui-btn--secondary:hover:not(:disabled) {
+  background: #222;
+}
+
+.ui-btn--danger {
+  border-color: var(--red);
+  color: var(--red);
+  background: transparent;
+}
+.ui-btn--danger:hover:not(:disabled) {
+  background: rgba(239,68,68,0.08);
+}
+
+.ui-btn--ghost {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text-dim);
+}
+.ui-btn--ghost:hover:not(:disabled) {
+  color: var(--text);
+  background: var(--bg3);
+}
+
+.ui-btn--success {
+  border-color: var(--green);
+  color: var(--green);
+  background: transparent;
+}
+.ui-btn--success:hover:not(:disabled) {
+  background: rgba(34,197,94,0.08);
+}
+
+/* ── Input / Select ────────────────────────────────────────── */
+.ui-field { display: flex; flex-direction: column; gap: 4px; }
+.ui-field__label { font-size: 12px; color: var(--text-dim); }
+.ui-field__error { font-size: 11px; color: var(--red); }
+
+.ui-input,
+.ui-select {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 0;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: var(--font-mono-stack);
+  transition: border-color 0.12s;
+}
+.ui-input:focus,
+.ui-select:focus { border-color: var(--violet); }
+.ui-input--error,
+.ui-select--error { border-color: var(--red); }
+.ui-input::placeholder { color: #555; }
+
+/* ── Modal ─────────────────────────────────────────────────── */
+.ui-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.65);
+  padding: 20px;
+}
+.ui-modal {
+  width: 100%;
+  max-height: 85vh;
+  background: #111;
+  border: 1px solid var(--border);
+  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.ui-modal__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.ui-modal__title {
+  font-size: 12px;
+  color: var(--violet);
+  font-family: var(--font-mono-stack);
+}
+.ui-modal__close {
+  background: transparent;
+  border: none;
+  color: #888;
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+}
+.ui-modal__body {
+  flex: 1;
+  overflow: auto;
+  padding: 14px;
+}
+
+/* ── Toast ─────────────────────────────────────────────────── */
+.ui-toast-container {
+  position: fixed;
+  bottom: 80px;
+  right: 24px;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+.ui-toast {
+  padding: 12px 20px;
+  border-radius: 0;
+  font-size: 13px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  pointer-events: auto;
+  animation: ui-toast-in 0.3s ease;
+  font-family: var(--font-mono-stack);
+}
+@keyframes ui-toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.ui-toast--success {
+  background: #1a3a1a;
+  border: 1px solid var(--green);
+  color: #bbf7d0;
+}
+.ui-toast--error {
+  background: #3a1a1a;
+  border: 1px solid var(--red);
+  color: #fecaca;
+}
+.ui-toast--info {
+  background: #1a1a3a;
+  border: 1px solid #818cf8;
+  color: #c7d2fe;
+}
+
+@media (max-width: 767px) {
+  .ui-toast-container { right: 16px; left: 16px; bottom: 70px; }
+  .ui-toast { font-size: 12px; padding: 10px 16px; }
+}
+
+/* ── Spinner ──────────────────────────────────────────────────── */
+.ui-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(146,91,252,0.2);
+  border-top-color: var(--violet);
+  border-radius: 50%;
+  animation: ui-spin 0.7s linear infinite;
+}
+.ui-spinner--lg {
+  width: 36px;
+  height: 36px;
+  border-width: 3px;
+}
+@keyframes ui-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Filter Bar ──────────────────────────────────────────────── */
+.ui-filter-bar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 8px 0;
+}
+
+/* ── Property List ───────────────────────────────────────────── */
+.ui-property-list {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  font-size: 11px;
+}
+.ui-property-label {
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+.ui-property-value[data-tone="dim"] {
+  color: #555;
+}
+.ui-property-value[data-tone="success"] {
+  color: var(--green);
+}
+.ui-property-value[data-tone="warning"] {
+  color: var(--yellow);
+}
+.ui-property-value[data-tone="danger"] {
+  color: var(--red);
+}
+.ui-property-value[data-tone="accent"] {
+  color: var(--violet);
+}
+
+/* ── Crons page ──────────────────────────────────────────────── */
+.crons-page {
+  flex: 1;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-mono-stack);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.crons-header {
+  height: 48px;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.crons-header__title {
+  font-family: var(--font-serif-stack);
+  font-size: 20px;
+  letter-spacing: 4px;
+  color: var(--violet);
+}
+.crons-header__meta {
+  font-size: 10px;
+  color: var(--gray);
+}
+.crons-mobile-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+}
+
+/* ── Containers page ─────────────────────────────────────────── */
+.container-terminal-link {
+  border: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--violet);
+  font-size: 10px;
+  padding: 4px 8px;
+  text-decoration: none;
+}
+.container-terminal-link:hover {
+  background: var(--bg3);
+}
+
+/* ── Gateway page ────────────────────────────────────────────── */
+.gateway-tab {
+  flex: 1;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-dim);
+  font-family: var(--font-mono-stack);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  text-transform: capitalize;
+  transition: color 0.12s, border-color 0.12s;
+}
+.gateway-tab--active {
+  color: var(--violet);
+  border-bottom-color: var(--violet);
+  font-weight: 600;
+}
+.gateway-tab:hover {
+  color: var(--text);
+}
+.gateway-agent-select {
+  width: 100%;
+  padding: 9px 10px;
+  border-radius: 0;
+  border: 1px solid var(--border);
+  background: var(--surface, var(--bg));
+  color: var(--text);
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  font-family: var(--font-mono-stack);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+  transition: border-color 0.15s;
+}
+.gateway-agent-select:focus {
+  border-color: var(--violet);
+}
+.gateway-agent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.gateway-agent-dot--ok { background: var(--green); }
+.gateway-agent-dot--err { background: var(--red); }
+
+/* ── Shared message classes ──────────────────────────────────── */
+.msg-success {
+  padding: 8px 12px;
+  border-radius: 0;
+  font-size: 12px;
+  background: rgba(var(--green-rgb,34,197,94),0.1);
+  color: var(--green);
+}
+.msg-error {
+  padding: 8px 12px;
+  border-radius: 0;
+  font-size: 12px;
+  background: rgba(var(--red-rgb,239,68,68),0.1);
+  color: var(--red);
+}
+
+/* --- Mobile Bottom Navigation --- */
+.mobile-bottom-nav {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .mobile-bottom-nav {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 54px;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    background: var(--color-bg-900, #0d0d0d);
+    border-top: 1px solid var(--color-border-700, #2a2a2a);
+    z-index: 250;
+    box-sizing: border-box;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .mobile-bottom-nav::-webkit-scrollbar { display: none; }
+
+  .mobile-bottom-nav__scroll {
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+    padding: 0 4px;
+    align-items: center;
+    height: 100%;
+  }
+  @media (min-width: 576px) {
+    .mobile-bottom-nav__scroll { justify-content: center; }
+  }
+
+  .mobile-bottom-nav__item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 44px;
+    text-decoration: none;
+    color: #666;
+    font-family: var(--font-mono-stack, monospace);
+    transition: color 0.2s;
+    padding: 6px 10px;
+    border-radius: 0;
+    flex-shrink: 0;
+    touch-action: manipulation;
+  }
+
+  .mobile-bottom-nav__item:active {
+    background: rgba(255,255,255,0.05);
+  }
+
+  .mobile-bottom-nav__icon svg {
+    display: block;
+    opacity: 0.7;
+  }
+  .mobile-bottom-nav__item--active .mobile-bottom-nav__icon svg {
+    opacity: 1;
+  }
+
+  .mobile-bottom-nav__item--active {
+    color: var(--violet, #925BFC);
+  }
+
+  .mobile-bottom-nav__label {
+    font-size: 8px;
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    white-space: nowrap;
+  }
+
+  /* Padding bottom per non coprire contenuti — handled by .app-shell__content */
+
+  /* Chat button alzato sopra la bottom navbar */
+  .ochat__trigger {
+    bottom: 70px !important;
+  }
+  .ochat__panel {
+    bottom: 124px !important;
+  }
+}
+
+/* ── Design System — extra classes ──────────────────────────── */
+.error-state {
+  color: var(--red);
+  padding: 32px 16px;
+  font-family: var(--font-mono-stack);
+  font-size: 11px;
+  text-align: center;
+}
+.ui-select-workspace {
+  background: var(--bg3);
+  color: var(--violet);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  font-size: 11px;
+  padding: 3px 8px;
+  font-family: var(--font-mono-stack);
+  max-width: 220px;
+  cursor: pointer;
+  outline: none;
+}
+
+/* ── List item buttons (sidebar items, agent list, provider select) ─── */
+
+/* ── Pulse animation for in-progress indicators ─────────────── */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Update banner */
+.update-banner {
+  flex-shrink: 0;
+  background: linear-gradient(135deg, rgba(146,91,252,0.14) 0%, rgba(146,91,252,0.04) 100%);
+  border-bottom: 1px solid rgba(146,91,252,0.22);
+  z-index: 50;
+  width: 100%;
+}
+.update-banner__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 16px;
+  font-size: 11px;
+  color: var(--text-dim);
+  line-height: 1.3;
+  height: 48px;
+}
+.update-banner__text {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4em;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.update-banner__label {
+  color: var(--violet);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 10px;
+}
+.update-banner__version {
+  font-weight: 500;
+  font-size: 11px;
+  font-family: var(--font-mono-stack);
+}
+.update-banner__sep {
+  font-size: 10px;
+  opacity: 0.35;
+}
+.update-banner__ok {
+  color: var(--green);
+  font-size: 11px;
+}
+.update-banner__err {
+  color: var(--red);
+  font-size: 11px;
+}
+.update-banner__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}