@polderlabs/bizar 3.23.1 → 4.2.0

package/bizar-dash/src/web/styles/mobile.css

@@ -0,0 +1,1960 @@
+/* ─────────────────────────────────────────────────────────────────────
+   Bizar Dashboard — Mobile styles (v3.5.0)
+   Phone-first: 320px-768px wide. Bottom nav. Sticky composer.
+   ───────────────────────────────────────────────────────────────────── */
+
+/* v3.21.x — Mobile chat stylesheet must be imported BEFORE all other
+   rules (CSS @import ordering rule). */
+@import './mobile-chat.css';
+
+/* ─── Theme tokens (mirror main.css) ─────────────────────────────── */
+:root {
+  /* Surfaces */
+  --bg: #0b0e14;
+  --bg-elev: #12161f;
+  --bg-elev-2: #1a1f2b;
+  --bg-elev-3: #232a39;
+  --surface: var(--bg-elev);
+  --surface-2: var(--bg-elev-2);
+
+  /* Borders */
+  --border: #232a39;
+  --border-strong: #2d3648;
+
+  /* Text */
+  --text: #c9d1d9;
+  --text-muted: #6e7681;
+  --text-dim: #484f58;
+  --text-strong: #f0f6fc;
+
+  /* Accent (violet) */
+  --accent: #8b5cf6;
+  --accent-bg: rgba(139, 92, 246, 0.12);
+  --accent-border: rgba(139, 92, 246, 0.4);
+  --accent-2: #a78bfa;
+
+  /* Status */
+  --success: #3fb950;
+  --warning: #d29922;
+  --error: #f85149;
+  --info: #58a6ff;
+
+  /* Fonts */
+  --font-sans: 'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+
+  /* Mobile constants */
+  --mobile-tap-target: 44px;
+  --mobile-nav-height: 56px;
+  --mobile-topbar-height: 48px;
+  --mobile-padding: 16px;
+  --mobile-font-base: 16px;
+}
+
+/* ─── Reset ──────────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  touch-action: manipulation;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--mobile-font-base);
+  line-height: 1.5;
+  background: var(--bg);
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+  overscroll-behavior: none;
+}
+
+button,
+[role="button"],
+a,
+input,
+select,
+textarea {
+  touch-action: manipulation;
+}
+
+input,
+textarea,
+select {
+  user-select: text;
+  -webkit-user-select: text;
+  font-size: var(--mobile-font-base);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+code,
+.mono {
+  font-family: var(--font-mono);
+}
+
+/* ─── App shell ──────────────────────────────────────────────────────── */
+.mobile-app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  padding-top: env(safe-area-inset-top, 0);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  overscroll-behavior: none;
+}
+
+/* ─── Top bar ───────────────────────────────────────────────────────── */
+.mobile-topbar {
+  height: var(--mobile-topbar-height);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--mobile-padding);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.mobile-topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mobile-logo {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.mobile-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-strong);
+}
+
+.mobile-topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.mobile-icon-btn {
+  width: var(--mobile-tap-target);
+  height: var(--mobile-tap-target);
+  min-width: var(--mobile-tap-target);
+  min-height: var(--mobile-tap-target);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+  padding: 0;
+}
+
+.mobile-icon-btn:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+
+.mobile-icon-btn:active {
+  background: var(--bg-elev-3);
+}
+
+.mobile-icon-btn-danger {
+  color: var(--error);
+}
+
+/* ─── Content area ───────────────────────────────────────────────────── */
+.mobile-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding: var(--mobile-padding);
+  padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-padding) + env(safe-area-inset-bottom, 0));
+}
+
+.mobile-view {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.mobile-view-footer {
+  padding: 24px 0;
+  text-align: center;
+}
+
+/* ─── Bottom nav ────────────────────────────────────────────────────── */
+.mobile-bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0));
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: stretch;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+  z-index: 50;
+}
+
+.mobile-nav-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  min-height: var(--mobile-tap-target);
+  padding: 8px 4px;
+  transition: color 120ms ease;
+}
+
+.mobile-nav-btn-active {
+  color: var(--accent);
+}
+
+.mobile-nav-label {
+  font-size: 10px;
+  font-weight: 500;
+}
+
+/* ─── Loading ────────────────────────────────────────────────────────── */
+.mobile-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  height: 100dvh;
+  gap: 12px;
+  color: var(--text-muted);
+}
+
+/* ─── Stats grid ─────────────────────────────────────────────────────── */
+.mobile-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.mobile-stat {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+}
+
+.mobile-stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1;
+}
+
+.mobile-stat-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+/* ─── Sections ───────────────────────────────────────────────────────── */
+.mobile-section {
+  margin-bottom: 20px;
+}
+
+.mobile-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* ─── Cards ───────────────────────────────────────────────────────────── */
+.mobile-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px;
+  margin-bottom: 12px;
+}
+
+.mobile-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* ─── Agent card ─────────────────────────────────────────────────────── */
+.mobile-agent-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.mobile-agent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.mobile-agent-dot[data-status="working"],
+.mobile-agent-dot[data-status="doing"] {
+  background: var(--success);
+  animation: pulse-dot 1.6s ease-in-out infinite;
+}
+
+.mobile-agent-dot[data-status="error"],
+.mobile-agent-dot[data-status="stuck"] {
+  background: var(--error);
+}
+
+.mobile-agent-dot[data-status="idle"] {
+  background: var(--text-dim);
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.mobile-agent-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-agent-name {
+  font-size: 14px;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.mobile-agent-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+/* ─── Task card ──────────────────────────────────────────────────────── */
+.mobile-task-card {
+  width: 100%;
+  padding: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+}
+
+.mobile-task-actions {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.priority-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.task-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-title {
+  font-size: 14px;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.task-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+/* ─── Tasks toolbar ───────────────────────────────────────────────────── */
+.mobile-tasks-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.mobile-search-input {
+  flex: 1;
+  height: var(--mobile-tap-target);
+  padding: 0 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--mobile-font-base);
+  outline: none;
+}
+
+.mobile-search-input:focus {
+  border-color: var(--accent);
+}
+
+.mobile-empty-inline {
+  font-size: 13px;
+  color: var(--text-muted);
+  padding: 4px 0;
+}
+
+.mobile-empty-compact {
+  padding: 24px 16px;
+}
+
+/* ─── Settings ───────────────────────────────────────────────────────── */
+.mobile-setting-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.mobile-setting-row:last-child {
+  border-bottom: none;
+}
+
+.mobile-setting-label {
+  font-size: 14px;
+  color: var(--text);
+}
+
+.mobile-setting-value {
+  font-size: 14px;
+  color: var(--text-muted);
+  text-align: right;
+}
+
+/* ─── More tab list items ────────────────────────────────────────────── */
+.mobile-list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.mobile-list-icon {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.mobile-list-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-list-title {
+  font-size: 14px;
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.mobile-list-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.mobile-list-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  background: var(--bg-elev-3);
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.mobile-list-badge[data-status="working"],
+.mobile-list-badge[data-status="doing"] {
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--success);
+}
+
+.mobile-list-badge[data-status="error"],
+.mobile-list-badge[data-status="stuck"] {
+  background: rgba(248, 81, 73, 0.15);
+  color: var(--error);
+}
+
+.badge-on {
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--success);
+}
+
+.badge-off {
+  background: var(--bg-elev-3);
+  color: var(--text-dim);
+}
+
+.mobile-active-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  background: var(--accent-bg);
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+/* ─── Empty state ────────────────────────────────────────────────────── */
+.mobile-empty {
+  text-align: center;
+  padding: 48px 20px;
+  color: var(--text-muted);
+}
+
+.mobile-empty svg {
+  margin-bottom: 12px;
+  opacity: 0.4;
+}
+
+.mobile-empty p {
+  margin: 0 0 6px;
+}
+
+.muted {
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* ─── Buttons ─────────────────────────────────────────────────────────── */
+.mobile-btn {
+  min-height: var(--mobile-tap-target);
+  min-width: var(--mobile-tap-target);
+  padding: 12px 20px;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 500;
+  border: none;
+  background: var(--accent);
+  color: white;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: opacity 120ms ease;
+  text-decoration: none;
+}
+
+.mobile-btn:active {
+  opacity: 0.7;
+}
+
+.mobile-btn-secondary {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.mobile-more-footer {
+  padding: 16px 0;
+  border-top: 1px solid var(--border);
+  margin-top: 8px;
+}
+
+.mobile-more-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: var(--accent);
+  font-size: 14px;
+  text-decoration: none;
+  min-height: var(--mobile-tap-target);
+  padding: 12px;
+}
+
+/* ─── Dark mode ───────────────────────────────────────────────────────── */
+[data-theme="dark"] .mobile-app {
+  background: #0d1117;
+}
+
+/* ─── Light mode ──────────────────────────────────────────────────────── */
+[data-theme="light"] {
+  --bg: #ffffff;
+  --bg-elev: #f6f8fa;
+  --bg-elev-2: #eaeef2;
+  --bg-elev-3: #d0d7de;
+  --surface: var(--bg-elev);
+  --surface-2: var(--bg-elev-2);
+  --border: #d0d7de;
+  --border-strong: #afb8c1;
+  --text: #1f2328;
+  --text-muted: #656d76;
+  --text-dim: #8c959f;
+  --text-strong: #1f2328;
+
+  /* v3.5.6 — Accent override. The :root block sets --accent: #8b5cf6
+     (a dark-mode violet) which looks harsh on a white background.
+     Match the desktop main.css light-mode value (#7c3aed) so the
+     mobile dashboard stays visually consistent with desktop. Without
+     this override, mobile light mode shows a too-bright purple accent
+     everywhere --accent is used (links, buttons, focus rings, etc.). */
+  --accent: #7c3aed;
+  --accent-2: #6d28d9;
+  --accent-bg: rgba(124, 58, 237, 0.08);
+  --accent-border: rgba(124, 58, 237, 0.3);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   NEW MOBILE STYLES (v3.6 — comprehensive mobile parity)
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* ─── Bottom sheet ─────────────────────────────────────────────────── */
+.mobile-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 100;
+  display: flex;
+  align-items: flex-end;
+  animation: sheet-fade-in 150ms ease;
+}
+
+@keyframes sheet-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.mobile-sheet {
+  width: 100%;
+  background: var(--surface);
+  border-radius: 16px 16px 0 0;
+  max-height: 85vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  animation: sheet-slide-up 200ms cubic-bezier(0.32, 0.72, 0, 1);
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes sheet-slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+.mobile-sheet-handle {
+  width: 36px;
+  height: 4px;
+  background: var(--border-strong);
+  border-radius: 2px;
+  margin: 10px auto 0;
+  flex-shrink: 0;
+}
+
+.mobile-sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px 8px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.mobile-sheet-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-strong);
+  margin: 0;
+}
+
+.mobile-sheet-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+.mobile-sheet-actions {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  display: flex;
+  gap: 8px;
+}
+
+/* ─── Full-screen modal ────────────────────────────────────────────── */
+.mobile-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--bg);
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  animation: modal-fade-in 150ms ease;
+}
+
+@keyframes modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.mobile-modal {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mobile-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.mobile-modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-strong);
+  margin: 0;
+}
+
+.mobile-modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+.mobile-modal-actions {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  display: flex;
+  gap: 8px;
+}
+
+/* ─── Search modal ─────────────────────────────────────────────────── */
+.mobile-search-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.mobile-search-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0 14px;
+  height: var(--mobile-tap-target);
+}
+
+.mobile-search-field {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--mobile-font-base);
+}
+
+.mobile-search-scopes {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.mobile-scope-chip {
+  min-height: var(--mobile-tap-target);
+  padding: 10px 14px;
+  border-radius: 16px;
+  font-size: 13px;
+  font-weight: 500;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.mobile-scope-chip.active {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+.mobile-search-results {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.mobile-search-group {
+  margin-bottom: 16px;
+}
+
+.mobile-search-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.mobile-search-result-item {
+  padding: 10px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.mobile-search-result-title {
+  font-size: 14px;
+  font-weight: 500;
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.mobile-search-result-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.mobile-search-loading {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+/* ─── Notifications ────────────────────────────────────────────────── */
+.mobile-notif-btn {
+  position: relative;
+}
+
+.mobile-notif-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  min-width: 16px;
+  height: 16px;
+  background: var(--error);
+  color: white;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+.mobile-notif-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mobile-notif-item {
+  width: 100%;
+  min-height: var(--mobile-tap-target);
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  position: relative;
+}
+
+.mobile-notif-item.unread {
+  border-color: var(--accent-border);
+}
+
+.mobile-notif-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.mobile-notif-icon.severity-success { background: rgba(63, 185, 80, 0.15); color: var(--success); }
+.mobile-notif-icon.severity-error { background: rgba(248, 81, 73, 0.15); color: var(--error); }
+.mobile-notif-icon.severity-warning { background: rgba(210, 153, 34, 0.15); color: var(--warning); }
+.mobile-notif-icon.severity-info { background: rgba(88, 166, 255, 0.15); color: var(--info); }
+
+.mobile-notif-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-notif-title {
+  font-size: 14px;
+  font-weight: 500;
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.mobile-notif-text {
+  font-size: 13px;
+  color: var(--text-muted);
+  display: block;
+  margin-top: 2px;
+}
+
+.mobile-notif-time {
+  font-size: 11px;
+  color: var(--text-dim);
+  display: block;
+  margin-top: 4px;
+}
+
+.mobile-notif-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex-shrink: 0;
+  margin-top: 6px;
+}
+
+/* ─── Project selector ─────────────────────────────────────────────── */
+.mobile-project-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  min-height: var(--mobile-tap-target);
+  min-width: var(--mobile-tap-target);
+  padding: 10px 8px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.mobile-project-btn:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+
+.mobile-project-name {
+  max-width: 120px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.mobile-project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mobile-project-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.mobile-project-item.active {
+  border-color: var(--accent-border);
+}
+
+.mobile-project-status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.mobile-project-status[data-status="active"] { background: var(--success); }
+.mobile-project-status[data-status="error"] { background: var(--error); }
+
+.mobile-project-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-project-item-name {
+  font-size: 14px;
+  font-weight: 500;
+  display: block;
+}
+
+.mobile-project-item-path {
+  font-size: 11px;
+  color: var(--text-muted);
+  display: block;
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono);
+}
+
+/* ─── Back button ─────────────────────────────────────────────────── */
+.mobile-back-btn {
+  position: fixed;
+  top: calc(var(--mobile-topbar-height) + 8px);
+  left: 12px;
+  z-index: 60;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  min-height: var(--mobile-tap-target);
+  padding: 10px 14px;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+/* ─── Kanban tabs ─────────────────────────────────────────────────── */
+.mobile-kanban-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-kanban-tab {
+  min-height: var(--mobile-tap-target);
+  padding: 10px 14px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 120ms ease;
+  flex-shrink: 0;
+}
+
+.mobile-kanban-tab.active {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+.mobile-tasks-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.mobile-filter-select {
+  min-height: var(--mobile-tap-target);
+  padding: 0 10px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+/* ─── FAB ─────────────────────────────────────────────────────────── */
+.mobile-fab {
+  position: fixed;
+  bottom: calc(var(--mobile-nav-height) + 80px + env(safe-area-inset-bottom, 0));
+  right: 20px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
+  z-index: 30;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.mobile-fab:active {
+  transform: scale(0.94);
+  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+}
+
+/* ─── Task detail ────────────────────────────────────────────────── */
+.mobile-task-detail-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mobile-task-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mobile-task-detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mobile-task-status-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 12px;
+  text-transform: capitalize;
+}
+
+.mobile-task-status-badge.status-queued { background: rgba(88, 166, 255, 0.15); color: var(--info); }
+.mobile-task-status-badge.status-doing { background: rgba(63, 185, 80, 0.15); color: var(--success); }
+.mobile-task-status-badge.status-blocked { background: rgba(248, 81, 73, 0.15); color: var(--error); }
+.mobile-task-status-badge.status-done { background: rgba(63, 185, 80, 0.15); color: var(--success); }
+
+.mobile-task-priority {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 12px;
+  text-transform: capitalize;
+}
+
+.mobile-task-priority.priority-high { background: rgba(248, 81, 73, 0.15); color: var(--error); }
+.mobile-task-priority.priority-normal { background: rgba(88, 166, 255, 0.15); color: var(--info); }
+.mobile-task-priority.priority-low { background: var(--bg-elev-3); color: var(--text-dim); }
+
+.mobile-task-detail-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-strong);
+  margin: 0;
+}
+
+.mobile-task-detail-desc {
+  font-size: 14px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.mobile-task-detail-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.mobile-task-detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.mobile-task-detail-row:last-child {
+  border-bottom: none;
+}
+
+.mobile-task-detail-row span:first-child {
+  color: var(--text-muted);
+}
+
+.mobile-task-detail-row span:last-child {
+  color: var(--text);
+  font-weight: 500;
+}
+
+/* ─── Task form ───────────────────────────────────────────────────── */
+.mobile-task-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mobile-field-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.mobile-input {
+  width: 100%;
+  min-height: var(--mobile-tap-target);
+  padding: 10px 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--mobile-font-base);
+  outline: none;
+  transition: border-color 120ms ease;
+}
+
+.mobile-input:focus {
+  border-color: var(--accent);
+}
+
+.mobile-input-sm {
+  min-height: var(--mobile-tap-target);
+  padding: 8px 12px;
+}
+
+/* ─── Agent detail ────────────────────────────────────────────────── */
+.mobile-agent-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mobile-agent-detail-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mobile-agent-detail-status-text {
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+.mobile-agent-detail-desc {
+  font-size: 14px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+/* ─── Canvas ──────────────────────────────────────────────────────── */
+.mobile-view-canvas {
+  padding-bottom: 80px;
+}
+
+.mobile-canvas-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 12px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+
+.mobile-canvas-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mobile-canvas-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-strong);
+}
+
+.mobile-canvas-status {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  text-transform: capitalize;
+}
+
+.mobile-canvas-status[data-status="approved"],
+.mobile-canvas-status[data-status="done"] {
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--success);
+}
+
+.mobile-canvas-status[data-status="in-progress"],
+.mobile-canvas-status[data-status="doing"] {
+  background: rgba(88, 166, 255, 0.15);
+  color: var(--info);
+}
+
+.mobile-canvas-status[data-status="draft"] {
+  background: var(--bg-elev-3);
+  color: var(--text-dim);
+}
+
+.mobile-canvas-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.mobile-canvas-comment-count {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: var(--accent);
+  color: white;
+  font-size: 9px;
+  font-weight: 700;
+  border-radius: 6px;
+  padding: 1px 4px;
+  min-width: 14px;
+  text-align: center;
+}
+
+.mobile-canvas-elements {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mobile-canvas-element {
+  background: var(--surface);
+  border: 2px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.mobile-canvas-element.selected {
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+.mobile-canvas-el-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+}
+
+.mobile-canvas-el-type {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.mobile-canvas-el-status {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--bg-elev-3);
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.mobile-canvas-el-title {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 8px 12px;
+  color: var(--text-strong);
+}
+
+.mobile-canvas-el-content {
+  font-size: 13px;
+  color: var(--text-muted);
+  padding: 0 12px 8px;
+  line-height: 1.4;
+}
+
+.mobile-canvas-el-comments {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.mobile-canvas-comments {
+  margin-top: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.mobile-canvas-comments-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.mobile-canvas-comments-header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.mobile-canvas-comment-list {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.mobile-canvas-comment {
+  margin-bottom: 12px;
+}
+
+.mobile-canvas-comment-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.mobile-canvas-comment-head .mono {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.mobile-canvas-comment-head .muted {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-left: auto;
+}
+
+.mobile-canvas-comment-text {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.mobile-canvas-comment-input {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border-top: 1px solid var(--border);
+}
+
+.mobile-canvas-comment-input .mobile-input {
+  flex: 1;
+}
+
+/* ─── Activity enhancements ─────────────────────────────────────────── */
+.mobile-activity-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.mobile-event-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin-bottom: 4px;
+  cursor: pointer;
+}
+
+.mobile-event-kind {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: var(--bg-elev-3);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.mobile-event-msg {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.mobile-event-time {
+  font-size: 11px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+/* ─── Submit hero ─────────────────────────────────────────────────── */
+.mobile-submit-hero {
+  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-elev) 100%);
+  border: 1px solid var(--accent-border);
+  border-radius: 16px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.mobile-submit-input {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--mobile-font-base);
+  resize: none;
+  outline: none;
+  margin-bottom: 12px;
+}
+
+.mobile-submit-input:focus {
+  border-color: var(--accent);
+}
+
+.mobile-submit-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mobile-submit-chips {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.mobile-submit-chip {
+  min-height: var(--mobile-tap-target);
+  padding: 10px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.mobile-submit-chip:hover {
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+/* ─── More nav ────────────────────────────────────────────────────── */
+.mobile-more-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.mobile-more-nav-item:hover {
+  border-color: var(--accent-border);
+  background: var(--bg-elev-2);
+}
+
+.mobile-more-nav-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--bg-elev-2);
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.mobile-more-nav-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-more-nav-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-strong);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mobile-more-nav-count {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 7px;
+  border-radius: 10px;
+  background: var(--bg-elev-3);
+  color: var(--text-muted);
+}
+
+.mobile-more-nav-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: block;
+  margin-top: 2px;
+}
+
+.mobile-more-nav-arrow {
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+/* ─── Config ─────────────────────────────────────────────────────── */
+.mobile-config-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.mobile-config-row {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.mobile-config-row:last-child {
+  border-bottom: none;
+}
+
+.mobile-config-key {
+  flex: 0 0 104px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mobile-config-key .mono {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text);
+  word-break: break-all;
+}
+
+.mobile-config-type {
+  font-size: 10px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+}
+
+.mobile-config-value {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-config-value .mobile-input {
+  min-height: var(--mobile-tap-target);
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
+/* ─── Toggle switch ────────────────────────────────────────────────── */
+.mobile-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  width: 44px;
+  height: 24px;
+}
+
+.mobile-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.mobile-toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-elev-3);
+  border-radius: 12px;
+  transition: background 200ms ease;
+}
+
+.mobile-toggle-slider::before {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 200ms ease;
+}
+
+.mobile-toggle input:checked + .mobile-toggle-slider {
+  background: var(--accent);
+}
+
+.mobile-toggle input:checked + .mobile-toggle-slider::before {
+  transform: translateX(20px);
+}
+
+/* ─── Theme buttons ────────────────────────────────────────────────── */
+.mobile-theme-btns {
+  display: flex;
+  gap: 6px;
+}
+
+.mobile-theme-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: var(--mobile-tap-target);
+  padding: 10px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.mobile-theme-btn.active {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+/* ─── Accent swatches ─────────────────────────────────────────────── */
+.mobile-accent-swatches {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mobile-accent-swatch {
+  width: var(--mobile-tap-target);
+  height: var(--mobile-tap-target);
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 120ms ease;
+}
+
+.mobile-accent-swatch:hover {
+  transform: scale(1.1);
+}
+
+.mobile-accent-swatch.active {
+  border-color: white;
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+/* ─── Settings save bar ────────────────────────────────────────────── */
+.mobile-settings-save-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 10px 16px;
+  background: var(--warning);
+  color: #000;
+  font-size: 13px;
+  font-weight: 500;
+  margin: calc(-1 * var(--mobile-padding));
+  margin-bottom: 12px;
+}
+
+/* ─── List item interactive ──────────────────────────────────────── */
+.mobile-list-item-interactive {
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.mobile-list-item-interactive:hover {
+  border-color: var(--accent-border);
+  background: var(--bg-elev-2);
+}
+
+.mobile-list-item-interactive:active {
+  opacity: 0.8;
+}
+
+.mobile-list-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.mobile-list-status-dot[data-status="working"],
+.mobile-list-status-dot[data-status="doing"] {
+  background: var(--success);
+}
+
+.mobile-list-status-dot[data-status="error"],
+.mobile-list-status-dot[data-status="stuck"] {
+  background: var(--error);
+}
+
+.mobile-list-status-dot[data-status="idle"] {
+  background: var(--text-dim);
+}
+
+.mobile-list-badge.badge-accent {
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+
+.mobile-list-badge.badge-warning {
+  background: rgba(210, 153, 34, 0.15);
+  color: var(--warning);
+}
+
+/* ─── Danger button ─────────────────────────────────────────────── */
+.mobile-btn-danger {
+  background: var(--error);
+  color: white;
+}
+
+.mobile-btn-danger:active {
+  opacity: 0.8;
+}
+
+.mobile-artifact-iframe {
+  width: 100%;
+  min-height: min(70dvh, 560px);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: white;
+}
+
+@media (max-width: 420px) {
+  .mobile-config-key,
+  .mobile-config-value {
+    flex-basis: 100%;
+  }
+
+  .mobile-task-detail-row {
+    flex-direction: column;
+  }
+
+  .mobile-task-detail-row span:first-child,
+  .mobile-task-detail-row span:last-child {
+    flex: none;
+    text-align: left;
+  }
+}
+
+/* ─── Reduce motion ──────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}