/* ============================================================================
   Nova Command Centre — Dashboard Stylesheet
   Dark-mode, data-dense command centre aesthetic.
   ============================================================================ */

/* ── Neural background canvas ────────────────────────────────────────────── */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ── CSS Variables ────────────────────────────────────────────────────────── */
:root {
  /* Base palette — Bio Vector Light */
  --nova-bg:         #edfaf8;
  --nova-bg-raised:  rgba(248,255,254,0.95);
  --nova-bg-surface: rgba(238,252,248,0.9);
  --nova-bg-hover:   rgba(10,120,96,0.08);
  --nova-bg-active:  rgba(10,120,96,0.12);

  /* Text */
  --nova-text:        rgba(10,50,40,0.9);
  --nova-text-muted:  rgba(10,100,80,0.52);
  --nova-text-dim:    rgba(10,100,80,0.4);

  /* Borders */
  --nova-border:      rgba(10,120,96,0.16);
  --nova-border-light:rgba(10,120,96,0.1);

  /* Brand / accent — forest teal */
  --nova-accent:      #0a7860;
  --nova-accent-dim:  rgba(10,120,96,0.10);

  /* Status colours */
  --nova-green:   #22c55e;
  --nova-amber:   #f59e0b;
  --nova-red:     #ef4444;
  --nova-blue:    #0a7860;
  --nova-purple:  #7c3aed;  /* information state — purple */
  --nova-teal:    #0a7860;
  --nova-cyan:    #22c55e;
  --nova-orange:  #f97316;
  --nova-indigo:  #6d28d9;
  --nova-info:     #7c3aed;  /* semantic: information/neutral notice */
  --nova-info-dim: rgba(124,58,237,0.08);

  /* Sizing */
  --sidebar-width:      240px;
  --sidebar-collapsed:   60px;

  --topbar-height:       52px;
  --statusbar-height:    32px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

/* ── Dark theme overrides ─────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --nova-bg:           #011008;
  --nova-bg-raised:    rgba(2,18,12,0.97);
  --nova-bg-surface:   rgba(1,15,10,0.94);
  --nova-bg-hover:     rgba(60,216,180,0.06);
  --nova-bg-active:    rgba(60,216,180,0.11);
  --nova-text:         rgba(200,240,230,0.90);
  --nova-text-muted:   rgba(140,210,196,0.55);
  --nova-text-dim:     rgba(140,210,196,0.35);
  --nova-border:       rgba(60,216,180,0.13);
  --nova-border-light: rgba(60,216,180,0.08);
  --nova-accent:       #3cd8b4;
  --nova-accent-dim:   rgba(60,216,180,0.10);
}
html[data-theme="dark"] body {}
html[data-theme="dark"] a:hover { color: rgba(60,216,180,0.7); }
html[data-theme="dark"] .nova-sidebar.collapsed.hover-expanded { box-shadow: 8px 0 24px rgba(60,216,180,0.08); }

/* ── Theme toggle pill ──────────────────────────────────────────────────── */
.nova-theme-toggle-btn {
  border: 1px solid var(--nova-border);
  background: transparent;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.nova-theme-toggle-btn:hover {
  border-color: rgba(10,120,96,0.45);
  background: var(--nova-bg-hover);
  color: var(--nova-text);
}
html[data-theme="dark"] .nova-theme-toggle-btn:hover {
  border-color: rgba(60,216,180,0.38);
}

/* Pill track */
.nova-theme-switch {
  position: relative;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--nova-bg-hover);
  border: 1px solid var(--nova-border-light);
  transition: background 150ms ease, border-color 150ms ease;
}
/* Sliding indicator pill */
.nova-theme-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--nova-accent-dim);
  border: 1px solid var(--nova-border);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              background 220ms ease,
              border-color 220ms ease;
}
html[data-theme="dark"] .nova-theme-switch::before {
  transform: translateX(20px);
}

.nova-theme-icon-sun,
.nova-theme-icon-moon {
  position: relative;
  z-index: 1;
  display: block;
  transition: color 220ms ease, opacity 220ms ease;
}
/* Light mode: sun = current/active */
.nova-theme-icon-sun  { color: var(--nova-accent); opacity: 1; }
.nova-theme-icon-moon { color: var(--nova-text-muted); opacity: 0.45; }
/* Dark mode: moon = current/active */
html[data-theme="dark"] .nova-theme-icon-sun  { color: var(--nova-text-dim); opacity: 0.45; }
html[data-theme="dark"] .nova-theme-icon-moon { color: var(--nova-accent); opacity: 1; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--nova-bg);
  color: var(--nova-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
}

a       { color: var(--nova-accent); text-decoration: none; }
a:hover { color: rgba(10,120,96,0.7); }

/* ── Layout Grid ──────────────────────────────────────────────────────────── */
.nova-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* Scanline suppressed — Bio Vector Light has no CRT scanlines */
.nova-layout::before {
  display: none;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.nova-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--nova-bg-raised);
  border-right: 1px solid var(--nova-border);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-normal), min-width var(--transition-normal), left var(--transition-normal);
  z-index: 100;
  overflow: hidden;
}

.nova-sidebar.collapsed {
  width: var(--sidebar-collapsed);
  min-width: var(--sidebar-collapsed);
}

.nova-sidebar.pinned {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
}

.nova-sidebar.collapsed.hover-expanded {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  box-shadow: 8px 0 24px rgba(10,120,96,0.08);
}

.nova-sidebar.collapsed:not(.hover-expanded) .nova-nav-label,
.nova-sidebar.collapsed:not(.hover-expanded) .nova-logo-text,
.nova-sidebar.collapsed:not(.hover-expanded) .nova-sidebar-footer .nova-nav-label {
  display: none;
}

.nova-sidebar.collapsed:not(.hover-expanded) .nova-sidebar-header {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
}

.nova-sidebar.collapsed:not(.hover-expanded) .nova-nav-item {
  justify-content: center;
  padding: 10px 0;
}

.nova-sidebar.collapsed.hover-expanded .nova-sidebar-header {
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 16px 16px 12px;
}

.nova-sidebar.collapsed.hover-expanded .nova-nav-item {
  justify-content: flex-start;
  padding: 9px 12px;
}

/* Sidebar header */
.nova-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--nova-border);
}

.nova-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nova-logo-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.nova-logo-text {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nova-text);
}

.nova-sidebar-toggle {
  background: var(--nova-bg-hover);
  border: 1px solid var(--nova-border);
  color: var(--nova-text);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.nova-sidebar-toggle:hover {
  background: var(--nova-bg-active);
  color: var(--nova-accent);
  border-color: var(--nova-accent);
}

.nova-sidebar-toggle:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 2px;
}

/* Navigation */
.nova-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.nova-nav-section {
  padding: 0 8px;
}

.nova-nav-divider {
  height: 1px;
  background: var(--nova-border);
  margin: 8px 16px;
}

.nova-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--nova-text-muted);
  font-size: 0.875rem;
  font-weight: 450;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

/* Logout uses a POST form; keep layout identical to links. */
.nova-logout-form {
  margin: 0;
}

.nova-logout-btn {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.nova-sidebar-footer-toggle {
  width: 100%;
  margin-top: 8px;
  background: var(--nova-bg-hover);
  border: 1px solid var(--nova-border);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.nova-sidebar-footer-toggle:hover {
  background: var(--nova-bg-active);
  color: var(--nova-text);
  border-color: var(--nova-accent);
}

.nova-sidebar-footer-toggle:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 2px;
}

.nova-sidebar-footer-toggle .nova-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nova-sidebar-footer-toggle .nova-nav-icon svg {
  display: block;
}

.nova-nav-item:hover {
  background: var(--nova-bg-hover);
  color: var(--nova-text);
}

.nova-nav-item.is-active {
  background: var(--nova-accent-dim);
  color: var(--nova-accent);
  font-weight: 550;
}

.nova-nav-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.nova-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sidebar badge bubbles ────────────────────────────────────────────────── */
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--nova-accent);
  color: var(--nova-bg);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* Hide badges when sidebar is icon-only collapsed */
.nova-sidebar.collapsed:not(.hover-expanded) .sidebar-badge {
  display: none;
}

/* Sidebar footer */
.nova-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--nova-border);
  padding: 8px;
}

/* ── Main area ────────────────────────────────────────────────────────────── */
.nova-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#nova-page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.nova-topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--nova-bg-raised);
  border-bottom: 1px solid var(--nova-border);
  position: relative;
}

.nova-topbar-title h1 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nova-text);
  margin: 0;
}

.nova-topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.nova-topbar-center .nova-status-indicator {
  pointer-events: auto;
  font-size: 0.85rem;
  gap: 7px;
}

.nova-topbar-center .nova-status-dot {
  width: 10px;
  height: 10px;
}

.nova-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nova-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nova-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--nova-text-muted);
  cursor: pointer;
  padding: 4px;
}

/* Status indicator */
.nova-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.nova-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nova-status-dot.online  { background: var(--nova-green);  box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.nova-status-dot.offline { background: var(--nova-red);    box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.nova-status-dot.degraded{ background: var(--nova-amber);  box-shadow: 0 0 6px rgba(245,158,11,0.4); }

.nova-status-text {
  color: var(--nova-text-muted);
}

/* User badge */
.nova-user-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nova-accent-dim);
  color: var(--nova-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.nova-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  padding-bottom: calc(24px + var(--statusbar-height));
}

/* ── Status bar ───────────────────────────────────────────────────────────── */
.nova-statusbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: var(--statusbar-height);
  min-height: var(--statusbar-height);
  background: var(--nova-bg-raised);
  border-top: 1px solid var(--nova-border);
  display: flex;
  align-items: center;
  padding: 0 20px 0 calc(var(--sidebar-width) + 24px);
  font-size: 0.75rem;
  transition: padding-left var(--transition-normal);
}

.nova-sidebar.collapsed:not(.hover-expanded) ~ .nova-main .nova-statusbar {
  padding-left: calc(var(--sidebar-collapsed) + 24px);
}

.nova-statusbar-items {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nova-text-muted);
  width: 100%;
}

.nova-statusbar-label {
  color: var(--nova-text-dim);
}

.nova-statusbar-sep {
  color: var(--nova-border);
  user-select: none;
}

#sb-connection {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

#sb-connection .nova-status-dot {
  width: 6px;
  height: 6px;
}

/* ── Overlay (mobile) ─────────────────────────────────────────────────────── */
.nova-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
}

.nova-overlay.visible {
  display: block;
}

/* ── Placeholder pages ────────────────────────────────────────────────────── */
.nova-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.nova-placeholder-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.6;
}

.nova-placeholder h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--nova-text);
}

.nova-placeholder p {
  color: var(--nova-text-muted);
  font-size: 0.95rem;
  max-width: 400px;
}

.nova-placeholder .nova-badge {
  margin-top: 16px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--nova-accent-dim);
  color: var(--nova-accent);
  font-size: 0.8rem;
  font-weight: 500;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */


.nova-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nova-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Grid layouts ──────────────────────────────────────────────────────────── */
.nova-grid {
  display: grid;
  gap: 16px;
}

.nova-grid-2 { grid-template-columns: repeat(2, 1fr); }
.nova-grid-3 { grid-template-columns: repeat(3, 1fr); }
.nova-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Stat cards ────────────────────────────────────────────────────────────── */
.nova-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* ── Badges ────────────────────────────────────────────────────────────────── */
.nova-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
}

.nova-badge-green  { background: rgba(34,197,94,0.15);  color: var(--nova-green); }
.nova-badge-amber  { background: rgba(245,158,11,0.15); color: var(--nova-amber); }
.nova-badge-red    { background: rgba(239,68,68,0.15);  color: var(--nova-red); }
.nova-badge-blue   { background: rgba(59,130,246,0.15); color: var(--nova-blue); }
.nova-badge-purple { background: rgba(124,58,237,0.12); color: var(--nova-purple); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.nova-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--nova-border);
  background: var(--nova-bg-surface);
  color: var(--nova-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nova-btn:hover {
  background: var(--nova-bg-hover);
  border-color: var(--nova-text-dim);
}

.nova-btn-primary {
  background: var(--nova-accent);
  color: #fff;
  border-color: var(--nova-accent);
}

.nova-btn-primary:hover {
  background: #5a78e8;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
.nova-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.nova-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--nova-text-muted);
  border-bottom: 1px solid var(--nova-border);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.nova-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--nova-border-light);
  color: var(--nova-text);
}

.nova-table tr:hover td {
  background: var(--nova-bg-hover);
}

/* ── Forms (login) ─────────────────────────────────────────────────────────── */
.nova-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nova-bg);
}

.nova-login-card {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
}

.nova-login-card h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-align: center;
}

.nova-login-card .nova-login-sub {
  color: var(--nova-text-muted);
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 28px;
}

.nova-login-card label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--nova-text-muted);
  margin-bottom: 6px;
}

.nova-login-card input[type="text"],
.nova-login-card input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  background: var(--nova-bg-raised);
  color: var(--nova-text);
  font-size: 0.9rem;
  margin-bottom: 16px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.nova-login-card input:focus {
  border-color: var(--nova-accent);
}

.nova-login-card button[type="submit"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: var(--nova-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nova-login-card button[type="submit"]:hover {
  background: #5a78e8;
}

.nova-login-card .errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.nova-login-card .errorlist li {
  color: var(--nova-red);
  font-size: 0.85rem;
  padding: 6px 10px;
  background: rgba(239,68,68,0.1);
  border-radius: 4px;
  margin-bottom: 4px;
}

/* ── Toast / notifications ─────────────────────────────────────────────────── */
#nova-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: 320px;
}

.nova-toast {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--c-surface, var(--nova-bg-surface, #1a2a1f));
  border-left: 3px solid var(--c-accent, var(--nova-purple));
  border-top: 1px solid var(--nova-border);
  border-right: 1px solid var(--nova-border);
  border-bottom: 1px solid var(--nova-border);
  color: var(--nova-text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: default;
}
.nova-toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.nova-toast--success { border-left-color: #3cd8b4; }
.nova-toast--error   { border-left-color: #e05c5c; }
.nova-toast--info    { border-left-color: var(--c-accent, var(--nova-purple)); }
.nova-toast--warning { border-left-color: var(--nova-amber); }

.toast-title { display: block; font-weight: 600; font-size: 0.875rem; }
.toast-body  { display: block; font-size: 0.8rem; opacity: 0.75; margin-top: 0.2rem; }

/* ── Loading spinner ───────────────────────────────────────────────────────── */
.nova-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--nova-border);
  border-top-color: var(--nova-accent);
  border-radius: 50%;
  animation: nova-spin 0.6s linear infinite;
}

@keyframes nova-spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

/* Mobile: sidebar hidden, hamburger menu */
@media (max-width: 768px) {

  .nova-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    transition: left var(--transition-normal), width var(--transition-normal);
    box-shadow: none;
  }

  .nova-sidebar.mobile-open {
    left: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }

  .nova-sidebar.mobile-open .nova-nav-label,
  .nova-sidebar.mobile-open .nova-logo-text,
  .nova-sidebar.mobile-open .nova-sidebar-footer .nova-nav-label {
    display: inline;
  }

  .nova-sidebar.mobile-open .nova-sidebar-header {
    flex-direction: row;
    justify-content: space-between;
    padding: 16px 16px 12px;
  }

  .nova-sidebar.mobile-open .nova-nav-item {
    justify-content: flex-start;
    padding: 9px 12px;
  }

  .nova-mobile-toggle {
    display: block;
  }

  .nova-content {
    padding: 16px;
  }

  .nova-grid-2,
  .nova-grid-3,
  .nova-grid-4 {
    grid-template-columns: 1fr;
  }

  .nova-statusbar-items {
    overflow-x: auto;
    white-space: nowrap;
  }

  .nova-statusbar {
    padding-left: 20px;
  }

  /* Hide some status items on mobile */
  .nova-statusbar-items .nova-statusbar-sep:nth-child(4),
  .nova-statusbar-items .nova-statusbar-item:nth-child(5),
  .nova-statusbar-items .nova-statusbar-sep:nth-child(6),
  .nova-statusbar-items .nova-statusbar-item:nth-child(7) {
    display: none;
  }
}

/* ── Scrollbar styling ─────────────────────────────────────────────────────── */
.nova-content::-webkit-scrollbar,
.nova-nav::-webkit-scrollbar {
  width: 6px;
}

.nova-content::-webkit-scrollbar-track,
.nova-nav::-webkit-scrollbar-track {
  background: transparent;
}

.nova-content::-webkit-scrollbar-thumb,
.nova-nav::-webkit-scrollbar-thumb {
  background: var(--nova-border);
  border-radius: 3px;
}

.nova-content::-webkit-scrollbar-thumb:hover,
.nova-nav::-webkit-scrollbar-thumb:hover {
  background: var(--nova-text-dim);
}

/* ── Utility classes ───────────────────────────────────────────────────────── */
.nova-text-green  { color: var(--nova-green); }
.nova-text-amber  { color: var(--nova-amber); }
.nova-text-red    { color: var(--nova-red); }
.nova-text-blue   { color: var(--nova-blue); }
.nova-text-muted  { color: var(--nova-text-muted); }
.nova-text-dim    { color: var(--nova-text-dim); }

.nova-mt-4  { margin-top: 16px; }
.nova-mt-6  { margin-top: 24px; }
.nova-mb-4  { margin-bottom: 16px; }
.nova-mb-6  { margin-bottom: 24px; }
.nova-ml-2  { margin-left: 8px; }
.nova-gap-4 { gap: 16px; }

.nova-hidden        { display: none; }
/* Compound selectors needed: these elements define display (flex/inline-flex)
   later in the file, which would override the simple .nova-hidden rule. */
.nova-chat-scroll-btn.nova-hidden,
.nova-tab-badge.nova-hidden,
.nova-inbox-account-badge.nova-hidden { display: none; }
.nova-text-center   { text-align: center; }
.nova-text-xs       { font-size: 0.7rem; }
.nova-text-sm       { font-size: 0.75rem; }
.nova-text-base-sm  { font-size: 0.82rem; }
.nova-text-md       { font-size: 0.85rem; }
.nova-text-2xl      { font-size: 2rem; }
.nova-overflow-x    { overflow-x: auto; }
.nova-p-0           { padding: 0; }
.nova-flex-1        { flex: 1; }

/* ============================================================================
   Chat Interface
   ============================================================================ */

/* ── Chat container (full height) ──────────────────────────────────────── */
.nova-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height) - var(--statusbar-height) - 48px);
  position: relative;
}

/* ── Messages area ─────────────────────────────────────────────────────── */
.nova-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nova-chat-messages::-webkit-scrollbar       { width: 6px; }
.nova-chat-messages::-webkit-scrollbar-track  { background: transparent; }
.nova-chat-messages::-webkit-scrollbar-thumb  { background: var(--nova-border); border-radius: 3px; }

/* ── Load more ─────────────────────────────────────────────────────────── */
.nova-chat-load-more {
  text-align: center;
  padding: 8px 0 16px;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.nova-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 40px 20px;
}

.nova-chat-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.6;
}

.nova-chat-empty h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--nova-text);
}

.nova-chat-empty p {
  color: var(--nova-text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.nova-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 500px;
}

.nova-chat-suggestion {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 20px;
  padding: 8px 16px;
  color: var(--nova-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nova-chat-suggestion:hover {
  background: var(--nova-bg-hover);
  color: var(--nova-text);
  border-color: var(--nova-accent);
}

/* ── Message layout ────────────────────────────────────────────────────── */
.nova-chat-msg {
  display: flex;
  gap: 10px;
  padding: 4px 16px;
  max-width: 100%;
  animation: nova-msg-in 0.2s ease;
}

@keyframes nova-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nova-chat-msg-user {
  justify-content: flex-end;
}

.nova-chat-msg-nova {
  justify-content: flex-start;
}

/* ── Avatar ────────────────────────────────────────────────────────────── */
.nova-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Bubbles ───────────────────────────────────────────────────────────── */
.nova-chat-bubble {
  max-width: 680px;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.nova-chat-bubble-user {
  background: var(--nova-indigo);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.nova-chat-bubble-nova {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-bottom-left-radius: 4px;
}

/* ── Bubble header (agent info) ────────────────────────────────────────── */
.nova-chat-bubble-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.nova-chat-agent-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--nova-accent);
}

.nova-chat-source-badge,
.nova-chat-skill-badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
}

/* ── Bubble text (markdown content) ────────────────────────────────────── */
.nova-chat-bubble-text {
  overflow-wrap: break-word;
}

.nova-chat-bubble-text p {
  margin: 0 0 6px;
}

.nova-chat-bubble-text p:last-child {
  margin-bottom: 0;
}

.nova-chat-bubble-text ul,
.nova-chat-bubble-text ol {
  margin: 4px 0;
  padding-left: 20px;
}

.nova-chat-bubble-text li { margin-bottom: 2px; }

.nova-chat-bubble-text h2,
.nova-chat-bubble-text h3,
.nova-chat-bubble-text h4 {
  margin: 8px 0 4px;
  font-size: 0.95rem;
}

.nova-chat-bubble-text strong { font-weight: 650; }

.nova-chat-bubble-text a {
  color: var(--nova-accent);
  text-decoration: underline;
}

.nova-chat-bubble-user .nova-chat-bubble-text a {
  color: #c7d6ff;
}

/* Code in messages */
.nova-inline-code {
  background: rgba(0,0,0,0.25);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.82em;
}

.nova-chat-bubble-user .nova-inline-code {
  background: rgba(255,255,255,0.15);
}

.nova-code-block {
  background: #0d0f16;
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0;
  overflow-x: auto;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

.nova-chat-bubble-user .nova-code-block {
  background: rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.1);
}

/* Tables in messages */
.nova-md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 0.82rem;
}

.nova-md-table th,
.nova-md-table td {
  padding: 4px 8px;
  border: 1px solid var(--nova-border);
  text-align: left;
}

.nova-md-table th {
  background: rgba(0,0,0,0.2);
  font-weight: 600;
}

.nova-hr {
  border: none;
  border-top: 1px solid var(--nova-border);
  margin: 8px 0;
}

/* ── Bubble meta (timestamp, copy) ─────────────────────────────────────── */
.nova-chat-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.nova-chat-time {
  font-size: 0.7rem;
  color: var(--nova-text-dim);
}

.nova-chat-bubble-user .nova-chat-time {
  color: rgba(255,255,255,0.5);
}

.nova-chat-copy-btn {
  background: none;
  border: none;
  color: var(--nova-text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: all var(--transition-fast);
  opacity: 0;
}

.nova-chat-bubble-nova:hover .nova-chat-copy-btn {
  opacity: 1;
}

.nova-chat-copy-btn:hover {
  color: var(--nova-accent);
  background: var(--nova-accent-dim);
}

.nova-chat-copy-btn.copied {
  color: var(--nova-green);
  opacity: 1;
}

/* ── Structured data ───────────────────────────────────────────────────── */
.nova-chat-data {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  border: 1px solid var(--nova-border-light);
}

.nova-chat-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nova-chat-checklist li {
  padding: 3px 0;
  font-size: 0.85rem;
}

.nova-chat-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nova-chat-timeline-item {
  display: flex;
  gap: 10px;
  font-size: 0.85rem;
  padding: 3px 0;
}

.nova-chat-timeline-time {
  color: var(--nova-accent);
  font-weight: 600;
  min-width: 55px;
  flex-shrink: 0;
}

.nova-chat-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.nova-chat-data-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--nova-border-light);
}

.nova-chat-data-key {
  color: var(--nova-text-muted);
  font-weight: 500;
  white-space: nowrap;
  width: 1%;
}

/* ── Typing indicator ──────────────────────────────────────────────────── */
.nova-chat-typing-dots {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.nova-chat-typing-dots span {
  width: 8px;
  height: 8px;
  background: var(--nova-text-dim);
  border-radius: 50%;
  animation: nova-typing-bounce 1.4s infinite ease-in-out both;
}

.nova-chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.nova-chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes nova-typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Static typing indicator (#chat-typing-indicator) */
#chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  opacity: 0.7;
  font-size: 0.85rem;
  color: var(--nova-text-muted);
}

#chat-typing-indicator[hidden] { display: none; }

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nova-accent);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

.typing-label { margin-left: 0.25rem; }

/* ── Streaming cursor ──────────────────────────────────────────────────── */
.streaming-active::after {
  content: '▋';
  display: inline-block;
  animation: blink-cursor 0.7s step-end infinite;
  color: var(--nova-accent);
  margin-left: 1px;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Scroll-to-bottom button ───────────────────────────────────────────── */
.nova-chat-scroll-btn {
  position: absolute;
  bottom: 110px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  color: var(--nova-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: all var(--transition-fast);
  z-index: 10;
}

.nova-chat-scroll-btn:hover {
  background: var(--nova-bg-hover);
  color: var(--nova-text);
}

/* ── Command palette ───────────────────────────────────────────────────── */
.nova-chat-command-palette {
  position: absolute;
  bottom: 96px;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
  z-index: 20;
  margin: 0 16px;
}

.nova-chat-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nova-chat-command-item:hover,
.nova-chat-command-item.is-selected {
  background: var(--nova-bg-hover);
}

.nova-chat-command-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.nova-chat-command-cmd {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--nova-accent);
  min-width: 80px;
}

.nova-chat-command-desc {
  font-size: 0.82rem;
  color: var(--nova-text-muted);
}

/* ── Input area ────────────────────────────────────────────────────────── */
.nova-chat-input-area {
  padding: 12px 16px 8px;
  border-top: 1px solid var(--nova-border);
  background: var(--nova-bg-raised);
  flex-shrink: 0;
}

.nova-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--nova-bg);
  border: 1px solid var(--nova-border);
  border-radius: 10px;
  padding: 8px 12px;
  transition: border-color var(--transition-fast);
}

.nova-chat-input-wrap:focus-within {
  border-color: var(--nova-accent);
}

.nova-chat-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--nova-text);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 22px;
  resize: none;
  outline: none;
  max-height: 110px; /* ~5 lines */
}

.nova-chat-input::placeholder {
  color: var(--nova-text-dim);
}

.nova-chat-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--nova-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.nova-chat-send-btn:hover:not(:disabled) {
  background: #5a78e8;
}

.nova-chat-send-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.nova-chat-input-hint {
  text-align: center;
  padding-top: 6px;
  font-size: 0.7rem;
  color: var(--nova-text-dim);
}

/* ── Clear button in topbar ────────────────────────────────────────────── */
.nova-chat-clear-btn {
  margin-left: 12px;
  font-size: 0.75rem;
  padding: 4px 10px;
  gap: 4px;
  vertical-align: middle;
}

.nova-btn-sm {
  padding: 5px 12px;
  font-size: 0.8rem;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */

.nova-modal h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.nova-modal p {
  color: var(--nova-text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.nova-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Quick Chat Widget (Overview page) ─────────────────────────────────── */
.nova-quick-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nova-quick-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.nova-quick-chat-msg {
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.4;
}

.nova-quick-chat-msg-user {
  background: var(--nova-indigo);
  color: #fff;
  align-self: flex-end;
  max-width: 80%;
  border-bottom-right-radius: 2px;
}

.nova-quick-chat-msg-nova {
  background: var(--nova-bg-hover);
  color: var(--nova-text);
  align-self: flex-start;
  max-width: 80%;
  border-bottom-left-radius: 2px;
}

.nova-quick-chat-input-row {
  display: flex;
  gap: 6px;
}

.nova-quick-chat-input {
  flex: 1;
  background: var(--nova-bg);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--nova-text);
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.nova-quick-chat-input:focus {
  border-color: var(--nova-accent);
}

.nova-quick-chat-link {
  font-size: 0.8rem;
  text-align: right;
}

/* ── Chat responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nova-chat-bubble {
    max-width: 90%;
  }

  .nova-chat-msg {
    padding: 4px 8px;
  }

  .nova-chat-input-area {
    padding: 8px 8px 6px;
  }

  .nova-chat-command-palette {
    margin: 0 8px;
  }

  .nova-chat-suggestions {
    flex-direction: column;
    align-items: stretch;
  }

  .nova-chat-scroll-btn {
    bottom: 100px;
    right: 12px;
  }
}

/* ── Override content padding for chat page ─────────────────────────────── */
.nova-content:has(.nova-chat-container) {
  padding: 0;
  overflow: hidden;
}

/* ============================================================================
   Phase 3: Monitoring & Events Styles
   ============================================================================ */

/* ── Loading skeleton ──────────────────────────────────────────────────── */
.nova-loading-skeleton {
  height: 20px;
  background: linear-gradient(90deg, var(--nova-bg-hover) 25%, var(--nova-bg-active) 50%, var(--nova-bg-hover) 75%);
  background-size: 200% 100%;
  animation: nova-skeleton-shimmer 1.5s ease infinite;
  border-radius: 6px;
}

@keyframes nova-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Composable skeleton shapes ─────────────────────────────────────────
   Usage: <div class="skeleton skel-line medium"></div>
   Reuses the nova-skeleton-shimmer keyframe defined above.
   ────────────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--nova-bg-hover) 0%,
    var(--nova-bg-active) 50%,
    var(--nova-bg-hover) 100%
  );
  background-size: 200% 100%;
  animation: nova-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 0.35rem;
  color: transparent !important;
  user-select: none;
  display: block;
}
.skel-line        { height: 0.85em; margin-bottom: 0.4em; width: 100%; }
.skel-line.short  { width: 40%; }
.skel-line.medium { width: 65%; }
.skel-line.long   { width: 90%; }
.skel-block       { height: 4rem; }
.skel-avatar      { width: 2rem; height: 2rem; border-radius: 50%; }

/* ── System rows (key-value pairs) ─────────────────────────────────────── */
.nova-sys-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--nova-border-light);
}

.nova-sys-row:last-child {
  border-bottom: none;
}

/* ── Card link ─────────────────────────────────────────────────────────── */
.nova-card-link {
  font-size: 0.8rem;
  color: var(--nova-accent);
  text-decoration: none;
  white-space: nowrap;
}

.nova-card-link:hover {
  color: #93b0ff;
}

/* ── Empty state (mini, for widget cards) ──────────────────────────────── */
.nova-empty-mini {
  color: var(--nova-text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 16px 0;
}

/* ── Briefing container ────────────────────────────────────────────────── */
.nova-briefing-container {
  max-height: 240px;
  overflow-y: auto;
}

.nova-briefing-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--nova-text);
}

.nova-briefing-text strong { font-weight: 650; }
.nova-briefing-text em { font-style: italic; color: var(--nova-text-muted); }

/* ── Reminder rows ─────────────────────────────────────────────────────── */
.nova-reminder-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--nova-border-light);
  transition: opacity var(--transition-fast);
}

.nova-reminder-row:last-child { border-bottom: none; }

.nova-reminder-row.overdue {
  background: rgba(239,68,68,0.05);
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 4px;
}

.nova-reminder-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--nova-border);
  background: transparent;
  color: var(--nova-text-dim);
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.nova-reminder-check:hover {
  border-color: var(--nova-green);
  color: var(--nova-green);
  background: rgba(34,197,94,0.1);
}

.nova-reminder-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  min-width: 0;
  flex: 1;
}


/* ── Habit rows ────────────────────────────────────────────────────────── */
.nova-habit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--nova-border-light);
}

.nova-habit-row:last-child { border-bottom: none; }

.nova-habit-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.nova-habit-toggle:not(.done):hover {
  transform: scale(1.2);
}


/* ── Goal rows & progress bars ─────────────────────────────────────────── */
.nova-goal-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--nova-border-light);
}

.nova-goal-row:last-child { border-bottom: none; }


.nova-goal-name {
  font-size: 0.85rem;
  font-weight: 500;
}

.nova-goal-pct {
  font-size: 0.8rem;
  color: var(--nova-accent);
  font-weight: 600;
}

.nova-goal-target {
  font-size: 0.75rem;
  margin-top: 4px;
  display: block;
}


/* ── Event mini list (overview) ────────────────────────────────────────── */
.nova-events-mini-list {
  max-height: 300px;
  overflow-y: auto;
}

.nova-event-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--nova-border-light);
  font-size: 0.82rem;
}

.nova-event-mini:last-child { border-bottom: none; }

.nova-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nova-event-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.8rem;
}

.nova-event-time {
  font-size: 0.7rem;
  white-space: nowrap;
}

/* ── Background color utilities ────────────────────────────────────────── */
.nova-bg-green   { background: var(--nova-green); }
.nova-bg-amber   { background: var(--nova-amber); }
.nova-bg-red     { background: var(--nova-red); }
.nova-bg-blue    { background: var(--nova-blue); }
.nova-bg-purple  { background: var(--nova-purple); }
.nova-bg-teal    { background: var(--nova-teal); }
.nova-bg-cyan    { background: var(--nova-cyan); }
.nova-bg-orange  { background: var(--nova-orange); }
.nova-bg-indigo  { background: var(--nova-indigo); }
.nova-bg-gray    { background: var(--nova-text-dim); }

/* ── Agent mini (overview) ─────────────────────────────────────────────── */
.nova-agent-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--nova-border-light);
}

.nova-agent-mini:last-child { border-bottom: none; }

.nova-agent-mini-avatar {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.nova-agent-mini-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nova-agent-mini-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* ── Error count badge (overview) ──────────────────────────────────────── */
.nova-error-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  background: rgba(239,68,68,0.12);
  color: var(--nova-red);
  text-decoration: none;
}

.nova-error-count-badge:hover {
  background: rgba(239,68,68,0.2);
  color: var(--nova-red);
}

/* ── Filter bar ────────────────────────────────────────────────────────── */
.nova-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nova-filter-bar-right {
  margin-left: auto;
}

.nova-select,
.nova-input {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  color: var(--nova-text);
  padding: 6px 10px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.nova-select:focus,
.nova-input:focus {
  border-color: var(--nova-accent);
}

.nova-input-sm {
  padding: 5px 8px;
  font-size: 0.82rem;
  max-width: 180px;
}

.nova-select option,
.nova-select optgroup {
  background: var(--nova-bg-surface);
  color: var(--nova-text);
}

/* ── Events table ──────────────────────────────────────────────────────── */
.nova-events-table .nova-event-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nova-events-table .nova-event-data-preview {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Event row color highlights (left border) */
.nova-event-row-blue td:first-child   { border-left: 3px solid var(--nova-blue); }
.nova-event-row-purple td:first-child { border-left: 3px solid var(--nova-purple); }
.nova-event-row-indigo td:first-child { border-left: 3px solid var(--nova-indigo); }
.nova-event-row-cyan td:first-child   { border-left: 3px solid var(--nova-cyan); }
.nova-event-row-amber td:first-child  { border-left: 3px solid var(--nova-amber); }
.nova-event-row-red td:first-child    { border-left: 3px solid var(--nova-red); }
.nova-event-row-gray td:first-child   { border-left: 3px solid var(--nova-text-dim); }
.nova-event-row-green td:first-child  { border-left: 3px solid var(--nova-green); }
.nova-event-row-teal td:first-child   { border-left: 3px solid var(--nova-teal); }
.nova-event-row-orange td:first-child { border-left: 3px solid var(--nova-orange); }

.nova-event-detail td {
  background: var(--nova-bg-raised) !important;
  padding: 0 !important;
}

/* ── JSON viewer ───────────────────────────────────────────────────────── */
.nova-json-viewer {
  background: var(--nova-bg);
  border: 1px solid var(--nova-border-light);
  border-radius: 6px;
  padding: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-x: auto;
  max-height: 300px;
  color: var(--nova-text-muted);
  margin: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ── Event stats ───────────────────────────────────────────────────────── */
.nova-event-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nova-event-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nova-event-stat-label {
  width: 90px;
  font-size: 0.8rem;
  text-transform: capitalize;
  color: var(--nova-text-muted);
  flex-shrink: 0;
}

.nova-event-stat-bar {
  flex: 1;
  height: 8px;
  background: var(--nova-bg-hover);
  border-radius: 4px;
  overflow: hidden;
}

.nova-event-stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.nova-event-stat-count {
  width: 40px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nova-text);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.nova-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--nova-border);
  padding-bottom: 0;
}

.nova-tab {
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--nova-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nova-tab:hover {
  color: var(--nova-text);
}

.nova-tab.is-active {
  color: var(--nova-accent);
  border-bottom-color: var(--nova-accent);
}

.nova-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--nova-red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

/* ── Log level badges ──────────────────────────────────────────────────── */
.nova-log-level {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nova-log-level-debug   { background: rgba(139,92,246,0.15); color: var(--nova-purple); }
.nova-log-level-info    { background: rgba(59,130,246,0.15);  color: var(--nova-blue); }
.nova-log-level-warning { background: rgba(245,158,11,0.15); color: var(--nova-amber); }
.nova-log-level-error   { background: rgba(239,68,68,0.15);  color: var(--nova-red); }

/* ── Log rows ──────────────────────────────────────────────────────────── */
.nova-log-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nova-log-row:hover td {
  background: var(--nova-bg-hover);
}

.nova-log-detail td,
.nova-error-detail td {
  background: var(--nova-bg-raised) !important;
  padding: 0 !important;
}

.nova-log-detail-content {
  padding: 12px 16px;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nova-log-detail-content strong {
  color: var(--nova-text-muted);
  font-weight: 600;
}

/* ── Traceback ─────────────────────────────────────────────────────────── */
.nova-traceback {
  background: var(--nova-bg);
  border: 1px solid var(--nova-border-light);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  max-height: 240px;
  color: var(--nova-red);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin-top: 4px;
}

/* ── Error status badges ───────────────────────────────────────────────── */
.nova-error-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
}

.nova-error-status-open          { background: rgba(239,68,68,0.15);  color: var(--nova-red); }
.nova-error-status-investigating { background: rgba(245,158,11,0.15); color: var(--nova-amber); }
.nova-error-status-resolved      { background: rgba(34,197,94,0.15);  color: var(--nova-green); }
.nova-error-status-ignored       { background: rgba(90,98,120,0.2);   color: var(--nova-text-dim); }
.nova-error-status-agent-working-on-it { background: rgba(59,130,246,0.15); color: var(--nova-blue); }

/* ── Error action buttons ──────────────────────────────────────────────── */
.nova-error-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nova-error-status-btn {
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  text-transform: capitalize;
}

.nova-error-status-btn.is-active {
  background: var(--nova-accent);
  color: #fff;
  border-color: var(--nova-accent);
}

/* ── Status details (overview card) ────────────────────────────────────── */
.nova-status-details {
  margin-top: 4px;
}

/* ── Load average values ───────────────────────────────────────────────── */
.nova-load-value {
  font-weight: 600;
  font-size: 0.9rem;
}

/* ── Disk info ─────────────────────────────────────────────────────────── */
.nova-disk-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

/* ── Tags (for tooling allowlists) ─────────────────────────────────────── */
.nova-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.nova-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--nova-accent-dim);
  border: 1px solid var(--nova-border-light);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--nova-accent);
  white-space: nowrap;
}

/* ── Scheduler stats ───────────────────────────────────────────────────── */
.nova-scheduler-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.nova-sched-stat {
  text-align: center;
}

.nova-sched-stat .nova-stat-value {
  font-size: 1.4rem;
}

.nova-sched-stat .nova-stat-label {
  font-size: 0.72rem;
}

/* ── Badge additions ───────────────────────────────────────────────────── */
.nova-badge-cyan   { background: rgba(6,182,212,0.15);  color: var(--nova-cyan); }
.nova-badge-indigo { background: rgba(109,40,217,0.12); color: var(--nova-indigo); }
.nova-badge-teal   { background: rgba(20,184,166,0.15); color: var(--nova-teal); }
.nova-badge-orange { background: rgba(249,115,22,0.15); color: var(--nova-orange); }
.nova-badge-gray   { background: rgba(90,98,120,0.15);  color: var(--nova-text-dim); }

/* ── Responsive adjustments for monitoring ─────────────────────────────── */
@media (max-width: 768px) {
  .nova-scheduler-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .nova-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .nova-filter-bar-right {
    margin-left: 0;
  }

  .nova-input-sm {
    max-width: none;
  }

  .nova-events-table .nova-event-data-preview {
    max-width: 120px;
  }
}

@media (max-width: 1024px) {
  .nova-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================================
   Phase 4 — Skills & Agents
   ============================================================================ */

/* ── Category filter bar ─────────────────────────────────────────────────── */
.nova-category-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nova-category-btn {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  color: var(--nova-text-muted);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nova-category-btn:hover {
  border-color: var(--nova-accent);
  color: var(--nova-text);
}

.nova-category-btn.is-active {
  background: var(--nova-accent-dim);
  border-color: var(--nova-accent);
  color: var(--nova-accent);
}

.nova-category-count {
  font-size: 0.72rem;
  background: var(--nova-bg-hover);
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.nova-category-btn.is-active .nova-category-count {
  background: rgba(10,120,96,0.18);
}

.nova-category-desc p {
  padding: 8px 0;
}

/* ── View toggle buttons ─────────────────────────────────────────────────── */
.nova-btn-icon {
  padding: 6px;
  line-height: 0;
}

.nova-btn-icon.is-active {
  background: var(--nova-accent-dim);
  border-color: var(--nova-accent);
  color: var(--nova-accent);
}

/* ── Skills grid ─────────────────────────────────────────────────────────── */
.nova-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.nova-skill-card {
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  overflow: hidden;
}

.nova-skill-card:hover {
  border-color: var(--nova-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nova-skill-card-accent {
  width: 4px;
  flex-shrink: 0;
}

.nova-skill-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.nova-skill-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nova-skill-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.nova-skill-desc {
  font-size: 0.82rem;
  line-height: 1.4;
  flex: 1;
}

.nova-skill-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

/* ── Skills list / table ─────────────────────────────────────────────────── */
.nova-skills-list {
  overflow-x: auto;
}

.nova-skills-table .nova-skill-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nova-skills-table .nova-skill-row:hover {
  background: var(--nova-bg-hover);
}

/* ── Skill modal ─────────────────────────────────────────────────────────── */
.nova-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}

.nova-modal {
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.nova-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--nova-border);
}

.nova-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nova-modal-title-row h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

.nova-modal-close {
  background: none;
  border: none;
  color: var(--nova-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.nova-modal-close:hover {
  color: var(--nova-text);
}

.nova-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

/* ── Skill detail grid ───────────────────────────────────────────────────── */
.nova-skill-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--nova-bg-surface);
  border-radius: 8px;
  padding: 14px;
}

.nova-skill-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nova-detail-label {
  font-size: 0.72rem;
  color: var(--nova-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.nova-detail-value {
  font-size: 0.88rem;
  color: var(--nova-text);
}

/* ── Triggers ────────────────────────────────────────────────────────────── */
.nova-skill-triggers h3 {
  font-size: 0.95rem;
  font-weight: 600;
}

.nova-trigger-section {
  margin-top: 8px;
}

.nova-trigger-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.nova-trigger-tag {
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--nova-border);
  background: var(--nova-bg-surface);
}

.nova-trigger-cmd {
  border-color: var(--nova-accent);
  color: var(--nova-accent);
  background: var(--nova-accent-dim);
}

.nova-trigger-kw {
  color: var(--nova-green);
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}

.nova-trigger-pat {
  color: var(--nova-amber);
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
  font-family: monospace;
}

.nova-trigger-pat code {
  font-size: 0.75rem;
}

/* ── Try It section ──────────────────────────────────────────────────────── */
.nova-skill-tryit {
  background: var(--nova-bg-surface);
  border-radius: 8px;
  padding: 16px;
}

.nova-skill-tryit h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.nova-tryit-input-row {
  display: flex;
  gap: 8px;
}

.nova-tryit-input-row .nova-input {
  flex: 1;
}

.nova-btn-accent {
  background: var(--nova-accent);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.nova-btn-accent:hover {
  background: #5a7bf0;
}

.nova-btn-accent:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nova-tryit-result {
  margin-top: 12px;
  background: var(--nova-bg);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  padding: 14px;
  max-height: 300px;
  overflow-y: auto;
}

.nova-tryit-response {
  font-size: 0.88rem;
  line-height: 1.6;
}

.nova-tryit-error {
  color: var(--nova-red);
  font-size: 0.85rem;
}

/* ── Agent cards grid ────────────────────────────────────────────────────── */
/* (grid still used elsewhere — kept for backwards compat) */
.nova-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/* ── Agent network map ───────────────────────────────────────────────────── */
.nova-agent-map-card {
  overflow: hidden;
}

.nova-agent-map-container {
  background: var(--nova-bg-surface);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  position: relative;
  min-height: 480px;
}

/* SVG node hover / interaction */
.nova-map-node .nova-map-circle {
  transition: filter 0.15s ease, stroke-width 0.15s ease;
}
.nova-map-node:hover .nova-map-circle {
  filter: brightness(1.25);
  stroke-width: 2.5px;
}
.nova-map-node-selected .nova-map-circle {
  filter: brightness(1.2) url(#nova-map-glow-strong) !important;
}

/* Pulse animation for running agent rings */
@keyframes nova-map-ring-pulse {
  0%   { opacity: 0.9; r: 45; }
  50%  { opacity: 0.4; r: 50; }
  100% { opacity: 0.9; r: 45; }
}
.nova-map-node .nova-map-ring {
  animation: nova-map-ring-pulse 2s ease-in-out infinite;
}

/* Edge hover highlight */
.nova-map-edge:hover {
  stroke: rgba(108,138,255,0.9) !important;
  stroke-width: 2.5 !important;
}

/* ── Selected agent detail panel ─────────────────────────────────────────── */
.nova-agent-selected-panel {
  animation: nova-slide-in 0.2s ease;
}

@keyframes nova-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nova-agent-selected-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .nova-agent-selected-grid {
    grid-template-columns: 1fr;
  }
}



.nova-agent-card {
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 10px;
  padding: 20px;
  transition: border-color var(--transition-fast);
}

.nova-agent-card:hover {
  border-color: var(--nova-purple);
}

.nova-agent-card.nova-agent-terminal {
  border-color: rgba(239, 68, 68, 0.3);
}

.nova-agent-card.nova-agent-terminal:hover {
  border-color: var(--nova-red);
}

.nova-agent-card-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.nova-agent-emoji {
  font-size: 2.2rem;
  line-height: 1;
}

.nova-agent-card-title h3 {
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* ── Agent meta rows ─────────────────────────────────────────────────────── */
.nova-agent-meta {
  background: var(--nova-bg-surface);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
}

.nova-agent-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.82rem;
}

/* ── Agent tags (tools, skills, delegates) ───────────────────────────────── */
.nova-agent-tags {
  margin-top: 8px;
}

.nova-tag-list-scroll {
  max-height: 64px;
  overflow-y: auto;
}

.nova-tag-tool {
  background: rgba(245, 158, 11, 0.12);
  color: var(--nova-amber);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.nova-tag-skill {
  background: rgba(34, 197, 94, 0.08);
  color: var(--nova-green);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.nova-tag-delegate {
  background: var(--nova-accent-dim);
  color: var(--nova-accent);
  border: 1px solid rgba(10,120,96,0.22);
}

/* ── Delegation graph ────────────────────────────────────────────────────── */
.nova-delegation-graph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px 0;
}

.nova-deleg-tier {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.nova-deleg-node {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  padding: 10px 16px;
  transition: border-color var(--transition-fast);
}

.nova-deleg-node:hover {
  border-color: var(--nova-accent);
}

.nova-deleg-manager {
  border-color: rgba(10,120,96,0.4);
  background: var(--nova-accent-dim);
}

.nova-deleg-terminal {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
}

.nova-deleg-emoji {
  font-size: 1.4rem;
}

.nova-deleg-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.nova-deleg-node-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nova-deleg-sub {
  font-size: 0.72rem;
  color: var(--nova-text-muted);
}

.nova-deleg-arrows {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.nova-deleg-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.nova-deleg-vline {
  width: 2px;
  height: 16px;
  background: var(--nova-accent);
  opacity: 0.5;
}

.nova-deleg-hline {
  height: 2px;
  background: var(--nova-accent);
  opacity: 0.5;
  width: 100%;
  min-width: 200px;
}

.nova-deleg-vline-down {
  width: 2px;
  height: 12px;
  background: var(--nova-accent);
  opacity: 0.5;
}

/* ── Permission matrix ───────────────────────────────────────────────────── */
.nova-perm-table {
  width: 100%;
}

.nova-perm-table th,
.nova-perm-table td {
  text-align: center;
  padding: 10px 14px;
}

.nova-perm-table th:first-child,
.nova-perm-table td:first-child {
  text-align: left;
}

.nova-perm-header {
  text-transform: capitalize;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--nova-text-muted);
}

.nova-perm-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 0.85rem;
}

.nova-perm-cell {
  font-size: 1rem;
}

.nova-perm-yes {
  color: var(--nova-green);
  font-weight: 700;
}

.nova-perm-no {
  color: var(--nova-red);
  opacity: 0.5;
}

/* ── Debug panel ─────────────────────────────────────────────────────────── */
.nova-debug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.nova-debug-card {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  padding: 14px;
}

.nova-debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.nova-debug-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 0;
  font-size: 0.82rem;
  gap: 8px;
}

.nova-debug-row .nova-tag-list {
  justify-content: flex-end;
}

/* ── Card component enhancements ─────────────────────────────────────────── */


/* ── Phase 4 responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nova-skills-grid {
    grid-template-columns: 1fr;
  }

  .nova-agents-grid {
    grid-template-columns: 1fr;
  }

  .nova-debug-grid {
    grid-template-columns: 1fr;
  }

  .nova-skill-detail-grid {
    grid-template-columns: 1fr;
  }

  .nova-modal {
    max-width: 100%;
    margin: 8px;
    max-height: 90vh;
  }

  .nova-category-filter {
    gap: 6px;
  }

  .nova-category-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  .nova-deleg-tier {
    gap: 8px;
  }

  .nova-deleg-node {
    padding: 6px 10px;
  }

  .nova-perm-table th,
  .nova-perm-table td {
    padding: 8px 8px;
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .nova-tryit-input-row {
    flex-direction: column;
  }

  .nova-agent-card-hero {
    gap: 10px;
  }

  .nova-agent-emoji {
    font-size: 1.8rem;
  }
}

/* ============================================================================
   Agent Visualisation — Redesigned Execution Timeline & Cards
   ============================================================================ */

/* ── Overview row — live status cards ──────────────────────────────────── */
.av-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #48bb78;
  letter-spacing: 0.5px;
  cursor: default;
}

.av-live-pulse {
  animation: av-pulse 2s ease-in-out infinite;
}

@keyframes av-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.av-overview-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.av-agent-card {
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 14px;
  padding: 18px 16px 14px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.av-agent-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--av-accent, var(--nova-accent));
  opacity: 0.6;
  transition: opacity 0.2s;
}

.av-agent-card:hover {
  border-color: var(--av-accent, var(--nova-accent));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.av-agent-card:hover::before {
  opacity: 1;
}

.av-agent-card.is-selected {
  border-color: var(--av-accent, var(--nova-accent));
  box-shadow: 0 0 0 2px rgba(108,138,255,0.15), 0 8px 24px rgba(0,0,0,0.2);
}

.av-agent-card.is-running {
  animation: av-card-running 2s ease-in-out infinite;
}

@keyframes av-card-running {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
  50% { box-shadow: 0 0 0 4px rgba(96,165,250,0.15); }
}

.av-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.av-card-emoji {
  font-size: 1.6rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}

.av-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: capitalize;
  color: var(--nova-text);
}

.av-card-role {
  font-size: 0.72rem;
  color: var(--nova-text-muted);
  text-transform: capitalize;
}

.av-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.av-status-idle { background: rgba(107,114,128,0.12); color: #9ca3af; }
.av-status-running { background: rgba(96,165,250,0.12); color: #60a5fa; }
.av-status-completed { background: rgba(74,222,128,0.12); color: #4ade80; }
.av-status-error { background: rgba(248,113,113,0.12); color: #f87171; }
.av-status-cap_reached { background: rgba(251,191,36,0.12); color: #fbbf24; }

.av-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.av-status-dot.is-running {
  animation: av-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes av-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.av-card-stats {
  display: flex;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--nova-text-muted);
  border-top: 1px solid var(--nova-border);
  padding-top: 8px;
  margin-top: 4px;
}

.av-card-stat-val {
  font-weight: 600;
  color: var(--nova-text);
}

/* ── Map card ─────────────────────────────────────────────────────────── */
.av-map-card { overflow: hidden; }

.av-map-container {
  background: var(--nova-bg-surface);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

/* ── Hierarchical Flow (Design 2) ─────────────────────────────────── */
.av-hier-wrap {
  position: relative;
  padding: 28px 16px 8px;
}

.av-hier-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
}

.av-hier-tiers {
  position: relative;
  z-index: 1;
}

.av-hier-tier {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
}

.av-hier-spacer {
  height: 64px;
}

.av-hier-tier-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nova-text-dim, rgba(140,210,196,0.35));
  text-align: center;
  margin-bottom: 12px;
}

/* Agent card */
.av-hier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--nova-bg-raised, rgba(2,18,12,0.97));
  border: 1px solid var(--nova-border, rgba(60,216,180,0.13));
  border-radius: 14px;
  padding: 14px 16px 10px;
  min-width: 130px;
  max-width: 155px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.av-hier-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--av-node-color, var(--nova-accent, #3cd8b4));
  border-radius: 14px 14px 0 0;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.av-hier-card:hover {
  border-color: var(--av-node-color, var(--nova-accent, #3cd8b4));
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.av-hier-card:hover::before { opacity: 1; }

.av-hier-card.is-manager {
  min-width: 150px;
  max-width: 175px;
  padding: 16px 18px 12px;
}

.av-hier-card.is-selected {
  border-color: var(--av-node-color, var(--nova-accent, #3cd8b4));
  box-shadow: 0 0 0 3px rgba(60,216,180,0.15), 0 10px 28px rgba(0,0,0,0.3);
}
.av-hier-card.is-selected::before { opacity: 1; }

.av-hier-card.is-running {
  animation: av-hier-glow 2.4s ease-in-out infinite;
}
@keyframes av-hier-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
  50%       { box-shadow: 0 0 0 5px rgba(96,165,250,0.14); }
}

.av-hier-card-emoji {
  font-size: 1.85rem;
  line-height: 1;
  margin-bottom: 7px;
}
.av-hier-card-name {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: capitalize;
  text-align: center;
  color: var(--nova-text);
  white-space: nowrap;
}
.av-hier-card-role {
  font-size: 0.67rem;
  color: var(--nova-text-muted);
  text-align: center;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.av-hier-card-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.67rem;
  font-weight: 600;
  margin-top: 7px;
}
.av-hier-status-idle      { background: rgba(107,114,128,0.15); color: #9ca3af; }
.av-hier-status-running   { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.av-hier-status-completed { background: rgba(74,222,128,0.15);  color: #4ade80; }
.av-hier-status-error     { background: rgba(248,113,113,0.15); color: #f87171; }

.av-hier-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.av-hier-status-dot.is-running {
  animation: av-hier-dot 1.2s ease-in-out infinite;
}
@keyframes av-hier-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.55); }
}

.av-hier-card-stats {
  display: flex;
  gap: 8px;
  margin-top: 7px;
  border-top: 1px solid var(--nova-border, rgba(60,216,180,0.1));
  padding-top: 6px;
  width: 100%;
  justify-content: center;
  font-size: 0.67rem;
  color: var(--nova-text-muted);
}

/* SVG edges */
.av-hier-edge {
  fill: none;
  stroke: rgba(108,138,255,0.22);
  stroke-width: 1.5;
}
.av-hier-edge.is-running {
  stroke: rgba(96,165,250,0.5);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  animation: av-hier-dash 1.2s linear infinite;
}
.av-hier-edge.is-focused {
  stroke: rgba(108,138,255,0.65);
  stroke-width: 2.5;
}
/* Pipeline tier — slightly compact cards */
.av-hier-tier-pipeline .av-hier-card {
  min-width: 112px;
  max-width: 132px;
  padding: 11px 12px 9px;
}
.av-hier-tier-pipeline .av-hier-card-emoji { font-size: 1.5rem; }
.av-hier-tier-pipeline .av-hier-card-name  { font-size: 0.72rem; }

@keyframes av-hier-dash { to { stroke-dashoffset: -20; } }

/* ── Timeline container ──────────────────────────────────────────────── */
.av-timeline-container {
  padding: 20px;
}

.av-timeline-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--nova-text-muted);
  font-size: 0.88rem;
}

/* ── Execution card (one per recent agent execution) ─────────────────── */
.av-exec-card {
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.av-exec-card:hover {
  border-color: rgba(108,138,255,0.3);
}

.av-exec-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
}

.av-exec-header:hover {
  background: rgba(255,255,255,0.015);
}

.av-exec-agent-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  position: relative;
}

.av-exec-agent-ring {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  border: 2px solid;
  opacity: 0.4;
}

.av-exec-info {
  flex: 1;
  min-width: 0;
}

.av-exec-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--nova-text);
  margin-bottom: 2px;
  text-transform: capitalize;
}

.av-exec-subtitle {
  font-size: 0.76rem;
  color: var(--nova-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-exec-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.av-exec-time {
  font-size: 0.72rem;
  color: var(--nova-text-dim);
}

.av-exec-duration {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nova-text-muted);
  background: var(--nova-bg-surface);
  padding: 2px 6px;
  border-radius: 4px;
}

.av-exec-chevron {
  color: var(--nova-text-dim);
  font-size: 0.8rem;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 4px;
}

.av-exec-card.is-expanded .av-exec-chevron {
  transform: rotate(90deg);
}

/* ── Step-by-step timeline (inside expanded exec card) ── */
.av-steps {
  padding: 0 18px 16px;
  border-top: 1px solid var(--nova-border);
}

.av-step {
  position: relative;
  padding: 14px 0 14px 36px;
}

.av-step:not(:last-child) {
  border-left: 2px solid var(--nova-border);
  margin-left: 11px;
  padding-left: 25px;
}

.av-step:last-child {
  margin-left: 11px;
  padding-left: 25px;
}

.av-step-dot {
  position: absolute;
  left: -1px;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nova-bg-surface);
  border: 2px solid var(--nova-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  z-index: 1;
}

.av-step:not(:last-child) .av-step-dot { left: 0; }
.av-step:last-child .av-step-dot { left: 0; }

.av-step-dot.is-llm { border-color: #0a7860; color: #0a7860; background: rgba(10,120,96,0.10); }
.av-step-dot.is-tool { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.1); }
.av-step-dot.is-delegate { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.10); }
.av-step-dot.is-result { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.1); }
.av-step-dot.is-error { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.1); }

.av-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.av-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.av-step-label.is-llm { color: #0a7860; }
.av-step-label.is-tool { color: #f59e0b; }
.av-step-label.is-delegate { color: #22c55e; }
.av-step-label.is-result { color: #10b981; }
.av-step-label.is-error { color: #ef4444; }

.av-step-iter {
  font-size: 0.68rem;
  color: var(--nova-text-dim);
  background: var(--nova-bg-surface);
  padding: 1px 6px;
  border-radius: 4px;
}

.av-step-content {
  font-size: 0.82rem;
  color: var(--nova-text-muted);
  line-height: 1.55;
}

.av-step-content pre {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.78rem;
  overflow-x: auto;
  margin: 6px 0 0;
  color: var(--nova-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.av-step-tool-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245,158,11,0.1);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.2);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 500;
  font-family: monospace;
}

.av-step-delegate-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(34,197,94,0.08);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.2);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 500;
}

/* ── Tool calls grid inside a step ──────────────────── */
.av-tool-calls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.av-tool-call {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}

.av-tool-call:hover {
  border-color: rgba(245,158,11,0.4);
}

.av-tool-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.av-tool-call-args {
  font-size: 0.75rem;
  color: var(--nova-text-dim);
  font-family: monospace;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  padding: 6px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.av-tool-result {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--nova-border);
}

.av-tool-result-text {
  font-size: 0.75rem;
  color: var(--nova-text-muted);
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
  word-break: break-word;
}

/* Tool drawer (nested tool calls under LLM response) */
.av-tool-drawer {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--nova-border);
}

.av-tool-toggle-btn {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  color: #f59e0b;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: monospace;
  cursor: pointer;
  padding: 2px 9px;
  border-radius: 12px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.av-tool-toggle-btn:hover {
  background: rgba(245,158,11,0.18);
}
.av-tool-toggle-btn.is-open {
  background: rgba(245,158,11,0.14);
}

/* ── Detail panel ─────────────────────────────────────────────────────── */
.av-detail-panel {
  animation: av-slide-in 0.25s ease;
}

@keyframes av-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.av-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.av-detail-body {
  padding: 20px;
}

.av-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .av-detail-grid { grid-template-columns: 1fr; }
}

.av-detail-section {
  background: var(--nova-bg-surface);
  border-radius: 10px;
  padding: 14px;
}

.av-detail-section h4 {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nova-text-muted);
  margin-bottom: 10px;
}

.av-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.82rem;
}

.av-detail-row-label {
  color: var(--nova-text-muted);
}

.av-detail-row-value {
  font-weight: 500;
  color: var(--nova-text);
}

/* ── History (execution list) ──────────────────────────────────────────── */
.av-history-container {
  max-height: 480px;
  overflow-y: auto;
}

.av-history-list {
  display: flex;
  flex-direction: column;
}

.av-history-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--nova-border);
  transition: background 0.12s;
  cursor: pointer;
}

.av-history-row:last-child { border-bottom: none; }
.av-history-row:hover { background: rgba(255,255,255,0.02); }

.av-history-emoji {
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}

.av-history-info {
  flex: 1;
  min-width: 0;
}

.av-history-agent {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: capitalize;
}

.av-history-msg {
  font-size: 0.79rem;
  color: var(--nova-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.av-history-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.av-history-time {
  font-size: 0.7rem;
  color: var(--nova-text-dim);
}

.av-history-stats {
  display: flex;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--nova-text-muted);
}

.av-history-stat { display: flex; align-items: center; gap: 3px; }

.av-history-success { color: #4ade80; }
.av-history-failure { color: #f87171; }

/* ── Responsive tweaks ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .av-overview-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .av-exec-header {
    padding: 12px 14px;
  }
  .av-steps {
    padding: 0 14px 14px;
  }
  .av-history-row {
    padding: 10px 14px;
  }
}

@media (max-width: 480px) {
  .av-overview-row {
    grid-template-columns: 1fr;
  }
  .av-agent-card {
    padding: 14px 12px 10px;
  }
  .av-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Phase 5 — Data Management Styles
   ============================================================================ */

/* ── Common form / layout components ──────────────────────────────── */
.nova-form-group { margin-bottom: 14px; }
.nova-form-row { display: flex; gap: 8px; align-items: center; }
.nova-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.nova-label { display: block; font-size: 0.75rem; color: var(--text-secondary, #8b8fa3); margin-bottom: 4px; font-weight: 500; }
.nova-textarea { width: 100%; background: var(--card-bg, #1a1d27); border: 1px solid var(--border, #2a2d3a); border-radius: 6px; color: var(--text-primary, #e1e4ed); padding: 10px 12px; font-size: 0.85rem; resize: vertical; font-family: inherit; }
.nova-textarea:focus { outline: none; border-color: var(--accent, #5b8af5); box-shadow: 0 0 0 2px rgba(91, 138, 245, 0.15); }
.nova-select { background: var(--card-bg, #1a1d27); border: 1px solid var(--border, #2a2d3a); border-radius: 6px; color: var(--text-primary, #e1e4ed); padding: 6px 10px; font-size: 0.8rem; }
.nova-select-sm { padding: 4px 8px; font-size: 0.75rem; }
.nova-select:focus { outline: none; border-color: var(--accent, #5b8af5); }

/* Modal sizes */
.nova-modal-sm { max-width: 420px; }
.nova-modal-lg { max-width: 720px; }

/* Page actions in topbar */
.nova-page-actions { display: flex; gap: 8px; align-items: center; }

/* ── Button variants ──────────────────────────────────────────────── */
.nova-btn-success { background: #22c55e; color: #fff; border: none; }
.nova-btn-success:hover { background: #16a34a; }
.nova-btn-danger { background: transparent; color: #ef4444; border: 1px solid #ef4444; }
.nova-btn-danger:hover { background: #ef4444; color: #fff; }
.nova-btn-outline { background: transparent; color: var(--text-secondary, #8b8fa3); border: 1px solid var(--border, #2a2d3a); }
.nova-btn-outline:hover { border-color: var(--accent, #5b8af5); color: var(--accent, #5b8af5); }
.nova-btn-xs { font-size: 0.7rem; padding: 3px 8px; border-radius: 4px; }

/* ── Toggle switch ────────────────────────────────────────────────── */
.nova-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.nova-switch input { opacity: 0; width: 0; height: 0; }
.nova-switch-slider { position: absolute; cursor: pointer; inset: 0; background: #2a2d3a; border-radius: 11px; transition: 0.2s; }
.nova-switch-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.nova-switch input:checked + .nova-switch-slider { background: var(--accent, #5b8af5); }
.nova-switch input:checked + .nova-switch-slider::before { transform: translateX(18px); }

/* ── Toggle label ─────────────────────────────────────────────────── */
.nova-toggle-label { display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* ── Empty state ──────────────────────────────────────────────────── */
.nova-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }

/* ── Stats panel ──────────────────────────────────────────────────── */
.nova-stats-panel { background: var(--card-bg, #1a1d27); border: 1px solid var(--border, #2a2d3a); border-radius: 8px; padding: 16px; }
.nova-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.nova-stat-card { background: var(--bg-elevated, #12141c); border-radius: 6px; padding: 14px; text-align: center; }
.nova-stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--accent, #5b8af5); line-height: 1.1; }
.nova-stat-label { font-size: 0.7rem; color: var(--text-secondary, #8b8fa3); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Count badge ──────────────────────────────────────────────────── */
.nova-count-badge { font-size: 0.7rem; color: var(--text-secondary, #8b8fa3); font-weight: 400; margin-left: 6px; }

/* ── Priority badges ──────────────────────────────────────────────── */
.nova-priority-badge { font-size: 0.7rem; font-weight: 600; }
.nova-priority-badge.priority-high { color: #ef4444; }
.nova-priority-badge.priority-medium { color: #f59e0b; }
.nova-priority-badge.priority-low { color: #22c55e; }

/* ── Snooze options ───────────────────────────────────────────────── */
.nova-snooze-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════
   REMINDERS
   ══════════════════════════════════════════════════════════════════ */
.nova-reminder-group { margin-bottom: 20px; }
.nova-reminder-group-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #e1e4ed); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border, #2a2d3a); }
.nova-reminder-group.status-overdue .nova-reminder-group-title { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.nova-reminder-group.status-due-soon .nova-reminder-group-title { color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.nova-reminder-group.status-completed .nova-reminder-group-title { color: var(--text-secondary, #8b8fa3); }

.nova-reminder-card { display: flex; align-items: center; justify-content: space-between; background: var(--card-bg, #1a1d27); border: 1px solid var(--border, #2a2d3a); border-radius: 6px; padding: 10px 14px; margin-bottom: 6px; gap: 12px; transition: border-color 0.15s; }
.nova-reminder-card:hover { border-color: var(--accent, #5b8af5); }
.nova-reminder-card.is-completed { opacity: 0.5; }
.nova-reminder-card.is-completed .nova-reminder-msg { text-decoration: line-through; }

.nova-reminder-main { flex: 1; min-width: 0; }
.nova-reminder-msg { font-size: 0.85rem; color: var(--text-primary, #e1e4ed); display: block; margin-bottom: 4px; }
.nova-reminder-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nova-reminder-due { font-size: 0.7rem; color: var(--text-secondary, #8b8fa3); }
.nova-reminder-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   NOTES
   ══════════════════════════════════════════════════════════════════ */
.nova-notes-section { margin-bottom: 20px; }
.nova-notes-section-title { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary, #8b8fa3); margin: 0 0 10px; }
.nova-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }

.nova-note-card { background: var(--card-bg, #1a1d27); border: 1px solid var(--border, #2a2d3a); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s; }
.nova-note-card:hover { border-color: var(--accent, #5b8af5); }
.nova-note-card.is-pinned { border-color: #f59e0b; }
.nova-note-card.is-archived { opacity: 0.5; }

.nova-note-content { font-size: 0.82rem; color: var(--text-primary, #e1e4ed); line-height: 1.5; overflow-wrap: break-word; }
.nova-note-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.nova-note-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.nova-note-actions { display: flex; gap: 4px; }

/* ══════════════════════════════════════════════════════════════════
   HABITS
   ══════════════════════════════════════════════════════════════════ */
.nova-habits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

.nova-habit-card { background: var(--card-bg, #1a1d27); border: 1px solid var(--border, #2a2d3a); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; text-align: center; transition: border-color 0.15s, transform 0.15s; }
.nova-habit-card:hover { border-color: var(--accent, #5b8af5); }
.nova-habit-card.is-done-today { border-color: #22c55e; background: rgba(34, 197, 94, 0.04); }

.nova-habit-header { display: flex; justify-content: space-between; align-items: center; }
.nova-habit-name { font-size: 0.95rem; margin: 0; color: var(--text-primary, #e1e4ed); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nova-habit-streak { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem; color: var(--nova-amber); font-weight: 600; white-space: nowrap; }
.nova-habit-streak-num { font-size: 2rem; font-weight: 700; color: var(--accent, #5b8af5); }
.nova-habit-streak-fire { font-size: 1.2rem; }

.nova-habit-actions { display: flex; gap: 6px; justify-content: center; align-items: center; }
.nova-habit-done-btn { font-size: 0.85rem; padding: 8px 20px; border-radius: 8px; font-weight: 600; }

/* Completion animation */
@keyframes habitCompleteFlash { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 0 12px rgba(34,197,94,0); } 100% { box-shadow: none; } }
.habit-completed-anim { animation: habitCompleteFlash 0.8s ease; }

/* ══════════════════════════════════════════════════════════════════
   GOALS
   ══════════════════════════════════════════════════════════════════ */
.nova-goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.nova-goal-card { background: var(--card-bg, #1a1d27); border: 1px solid var(--border, #2a2d3a); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s; }
.nova-goal-card:hover { border-color: var(--accent, #5b8af5); }
.nova-goal-card.status-completed { opacity: 0.6; }
.nova-goal-card.status-abandoned { opacity: 0.4; }
.nova-goal-card.status-abandoned .nova-goal-title { text-decoration: line-through; }

.nova-goal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.nova-goal-title { font-size: 0.95rem; margin: 0; color: var(--text-primary, #e1e4ed); }
.nova-goal-desc { font-size: 0.78rem; margin: 0; line-height: 1.4; }

.nova-goal-progress { display: flex; align-items: center; gap: 10px; }
.nova-progress-bar { flex: 1; height: 8px; background: var(--border, #2a2d3a); border-radius: 4px; overflow: hidden; }
.nova-progress-fill { height: 100%; background: linear-gradient(90deg, #5b8af5, #22c55e); border-radius: 4px; transition: width 0.4s ease; }
.nova-progress-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary, #8b8fa3); min-width: 36px; text-align: right; }

.nova-goal-meta { min-height: 18px; }
.nova-goal-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Goal detail modal */
.nova-goal-detail-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border, #2a2d3a); }
.nova-goal-detail-section:last-child { border-bottom: none; }
.nova-goal-detail-section h4 { font-size: 0.85rem; margin: 0 0 10px; color: var(--text-primary, #e1e4ed); }

.nova-milestone-list { list-style: none; padding: 0; margin: 0; }
.nova-milestone-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.82rem; color: var(--text-primary, #e1e4ed); }
.nova-milestone-list li.is-completed { opacity: 0.5; text-decoration: line-through; }
.nova-milestone-list input[type="checkbox"] { accent-color: var(--accent, #5b8af5); }

.nova-checkin { padding: 8px 0; border-bottom: 1px solid rgba(42,45,58,0.5); font-size: 0.8rem; color: var(--text-primary, #e1e4ed); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════════════════════════════ */

/* ── Toolbar ──────────────────────────────────────────────────────── */
.nova-cal-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.nova-cal-nav-group {
  display: flex; align-items: center; gap: 2px;
}
.nova-cal-nav-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nova-cal-nav-btn:hover { background: var(--nova-bg-hover); }
.nova-cal-today-btn {
  font-size: 0.75rem; font-weight: 600; border-radius: 8px; padding: 4px 12px;
  border: 1px solid var(--nova-border); background: transparent;
  color: var(--nova-text-muted); cursor: pointer;
  transition: all var(--transition-fast);
}
.nova-cal-today-btn:hover { border-color: var(--nova-accent); color: var(--nova-accent); }
.nova-cal-heading {
  font-size: 1.05rem; font-weight: 700; color: var(--nova-text);
  margin: 0; letter-spacing: -0.02em; min-width: 180px;
}
.nova-cal-actions-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nova-cal-actions-right .nova-btn[aria-pressed="true"] {
  border-color: var(--nova-accent); color: var(--nova-accent);
  background: var(--nova-accent-dim);
}

/* ── View toggle pills ────────────────────────────────────────────── */
.nova-cal-view-toggle {
  display: flex; background: var(--nova-bg-surface); border-radius: 8px;
  padding: 3px; gap: 2px; border: 1px solid var(--nova-border);
}
.nova-cal-view-btn {
  font-size: 0.72rem; font-weight: 500; padding: 5px 14px; border: none;
  border-radius: 6px; cursor: pointer; background: transparent;
  color: var(--nova-text-muted);
  transition: all var(--transition-fast);
}
.nova-cal-view-btn:hover { color: var(--nova-text); background: var(--nova-bg-hover); }
.nova-cal-view-btn.is-active {
  background: var(--nova-accent); color: #fff; font-weight: 600;
  box-shadow: 0 1px 4px rgba(108,138,255,0.25);
}

/* ── Create button ────────────────────────────────────────────────── */
.nova-cal-create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; border-radius: 8px;
}

/* ── Bulk action toolbar ─────────────────────────────────────────── */
.nova-cal-bulk-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 12px 14px; border: 1px solid var(--nova-border);
  border-radius: 12px; background: var(--nova-bg-raised);
}
.nova-cal-bulk-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--nova-text);
}
.nova-cal-bulk-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.nova-cal-bulk-field {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--nova-text-muted);
}
.nova-cal-bulk-field .nova-input {
  width: 86px; min-width: 86px; padding: 6px 8px;
}

/* ── Layout: main + sidebar ───────────────────────────────────────── */
.nova-cal-layout {
  display: flex; gap: 16px; height: calc(100vh - 160px);
  min-height: 0;
}
.nova-cal-main {
  flex: 1; min-width: 0; overflow: auto;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.nova-cal-sidebar {
  width: 300px; min-width: 280px; flex-shrink: 0;
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 12px; display: flex; flex-direction: column;
  overflow: hidden;
  transition: opacity var(--transition-normal);
}
.nova-cal-sidebar-header {
  padding: 16px 18px 12px; border-bottom: 1px solid var(--nova-border);
  display: flex; justify-content: space-between; align-items: center;
}
.nova-cal-sidebar-header-text { display: flex; flex-direction: column; gap: 2px; }
.nova-cal-sidebar-header h3 {
  font-size: 0.9rem; font-weight: 700; color: var(--nova-text); margin: 0;
}
.nova-cal-sidebar-date {
  font-size: 0.72rem; color: var(--nova-text-muted); font-weight: 500;
}
.nova-cal-sidebar-body {
  flex: 1; overflow-y: auto; padding: 14px 16px;
}
/* Quick-add button in sidebar header */
.nova-cal-sidebar-add-btn {
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  font-size: 1.1rem; line-height: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nova-accent-dim); border: 1px solid var(--nova-accent);
  color: var(--nova-accent); cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nova-cal-sidebar-add-btn:hover {
  background: var(--nova-accent); color: #fff; transform: scale(1.1);
}
.nova-cal-sidebar-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 12px; text-align: center;
}
.nova-cal-sidebar-empty-icon { font-size: 2rem; margin-bottom: 8px; opacity: 0.5; }
.nova-cal-sidebar-empty p { font-size: 0.78rem; color: var(--nova-text-dim); margin: 0; }

/* ── Sidebar event cards ──────────────────────────────────────────── */
.nova-cal-sidebar-item {
  background: var(--nova-bg-surface); border: 1px solid var(--nova-border);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  cursor: default;
}
.nova-cal-sidebar-item:hover { border-color: var(--nova-accent); }
.nova-cal-sidebar-item.is-event { border-left: 3px solid var(--nova-accent); }
.nova-cal-sidebar-item.is-reminder { border-left: 3px solid var(--nova-amber); }
.nova-cal-sidebar-item-title {
  font-size: 0.85rem; font-weight: 600; color: var(--nova-text); margin-bottom: 4px;
}
.nova-cal-sidebar-item-location {
  font-size: 0.72rem; color: var(--nova-text-muted); margin-bottom: 5px;
}
.nova-cal-sidebar-item-meta {
  font-size: 0.7rem; color: var(--nova-text-muted); display: flex;
  align-items: center; gap: 8px;
}

/* ── Delete / Edit buttons in sidebar ────────────────────────────── */
.nova-cal-delete-btn, .nova-cal-edit-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--nova-text-dim); font-size: 0.85rem; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.nova-cal-edit-btn { margin-left: auto; }
.nova-cal-delete-btn { margin-left: 0; }
.nova-cal-delete-btn:hover {
  color: var(--nova-red); background: rgba(239,68,68,0.1);
}
.nova-cal-edit-btn:hover {
  color: var(--nova-accent); background: var(--nova-accent-dim);
}

/* ── Month View ───────────────────────────────────────────────────── */
.nova-calendar-month {
  width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
}
.nova-calendar-month th {
  font-size: 0.72rem; color: var(--nova-text-dim); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 12px 4px 10px; text-align: center;
  font-weight: 600; position: sticky; top: 0; background: var(--nova-bg);
  z-index: 1;
}
.nova-calendar-month td {
  border: 1px solid var(--nova-border-light); padding: 6px 6px 4px;
  vertical-align: top; height: 130px; background: var(--nova-bg-raised);
  position: relative; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.nova-calendar-month td:hover {
  background: var(--nova-bg-hover); border-color: var(--nova-border);
  z-index: 2;
}
.nova-calendar-month td.nova-cal-empty {
  background: transparent; border-color: transparent; cursor: default;
}
.nova-calendar-month td.nova-cal-empty:hover { background: transparent; }
.nova-calendar-month td.is-today {
  border-color: var(--nova-accent); background: rgba(108,138,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(108,138,255,0.15);
}
.nova-calendar-month td.is-selected {
  border-color: var(--nova-accent); background: rgba(108,138,255,0.1);
  box-shadow: 0 0 0 2px rgba(108,138,255,0.2);
  z-index: 3;
}

/* Day number */
.nova-cal-day-num {
  font-size: 0.85rem; font-weight: 600; color: var(--nova-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 4px;
  transition: all var(--transition-fast);
}
.nova-calendar-month td.is-today .nova-cal-day-num {
  background: var(--nova-accent); color: #fff; font-weight: 700;
}
.nova-calendar-month td:hover .nova-cal-day-num { color: var(--nova-text); }

/* Event dots row */
.nova-cal-dots { display: flex; gap: 3px; margin-bottom: 3px; flex-wrap: wrap; }
.nova-cal-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.nova-cal-dot.event-dot { background: var(--nova-accent); }
.nova-cal-dot.reminder-dot { background: var(--nova-amber); }

/* Event labels in cells */
.nova-cal-event-label {
  font-size: 0.72rem; font-weight: 500; color: #fff;
  background: var(--nova-accent); border-radius: 5px;
  padding: 3px 8px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; line-height: 1.4;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nova-cal-event-label:hover {
  transform: translateX(1px);
  box-shadow: 0 1px 4px rgba(108,138,255,0.3);
}
.nova-cal-event-label.is-pending-nova {
  opacity: 0.65;
  border-left: 3px solid var(--nova-amber) !important;
}
.nova-cal-editable-event.is-select-mode {
  position: relative;
}
.nova-cal-editable-event.is-select-mode::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8);
  background: transparent;
}
.nova-cal-editable-event.is-bulk-selected {
  box-shadow: 0 0 0 2px rgba(108,138,255,0.35);
  outline: 1px solid rgba(108,138,255,0.45);
}
.nova-cal-sidebar-item.is-bulk-selected {
  background: rgba(108,138,255,0.1);
  border-color: var(--nova-accent);
}
.nova-cal-editable-event.is-bulk-selected::after {
  background: #fff;
}
.nova-cal-reminder-label {
  font-size: 0.72rem; font-weight: 500; color: #fff;
  background: var(--nova-amber); border-radius: 5px;
  padding: 3px 8px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; line-height: 1.4;
}
.nova-cal-more-label {
  font-size: 0.6rem; color: var(--nova-text-dim); margin-top: 2px;
  cursor: pointer;
}
.nova-cal-more-label:hover { color: var(--nova-accent); }

/* ── Week view ────────────────────────────────────────────────────── */
.nova-calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.nova-cal-week-day {
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border-light);
  border-radius: 10px; min-height: 260px; display: flex; flex-direction: column;
  overflow: hidden; cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.nova-cal-week-day:hover {
  border-color: var(--nova-border); box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nova-cal-week-day.is-today {
  border-color: var(--nova-accent);
  box-shadow: inset 0 3px 0 0 var(--nova-accent);
}
.nova-cal-week-day.is-selected { border-color: var(--nova-accent); background: rgba(108,138,255,0.04); }
.nova-cal-week-header {
  font-size: 0.75rem; font-weight: 600; color: var(--nova-text-muted);
  padding: 10px 12px; border-bottom: 1px solid var(--nova-border-light);
  display: flex; justify-content: space-between; align-items: center;
}
.nova-cal-week-header-day {
  font-size: 1.2rem; font-weight: 700; color: var(--nova-text);
}
.nova-cal-week-header-day.is-today-num {
  background: var(--nova-accent); color: #fff; border-radius: 50%;
  width: 28px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.9rem;
}
.nova-cal-week-day.is-today .nova-cal-week-header-day {
  color: var(--nova-accent);
}
.nova-cal-week-body { padding: 8px 10px; flex: 1; overflow-y: auto; }
.nova-cal-week-empty {
  font-size: 0.7rem; color: var(--nova-text-dim); padding: 12px 0; text-align: center;
}

/* ── Event / reminder blocks (week & day) ─────────────────────────── */
.nova-cal-event-block {
  font-size: 0.72rem; font-weight: 500;
  background: var(--nova-accent-dim); color: var(--nova-accent);
  border-left: 3px solid var(--nova-accent);
  border-radius: 6px; padding: 6px 10px; margin-bottom: 6px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nova-cal-event-block:hover {
  background: rgba(108,138,255,0.2); transform: translateX(2px);
}
.nova-cal-event-time {
  font-weight: 700; margin-right: 6px; font-size: 0.68rem;
  opacity: 0.8;
}
.nova-cal-reminder-block {
  font-size: 0.72rem; font-weight: 500;
  background: rgba(245,158,11,0.1); color: var(--nova-amber);
  border-left: 3px solid var(--nova-amber);
  border-radius: 6px; padding: 6px 10px; margin-bottom: 6px;
  transition: background var(--transition-fast);
}
.nova-cal-reminder-block:hover { background: rgba(245,158,11,0.18); }

/* ── Day view ─────────────────────────────────────────────────────── */
.nova-calendar-day {
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border-light);
  border-radius: 12px; overflow: hidden;
}
.nova-cal-hour-row {
  display: flex; border-bottom: 1px solid var(--nova-border-light); min-height: 56px;
  transition: background var(--transition-fast);
}
.nova-cal-hour-row:hover { background: rgba(108,138,255,0.02); }
.nova-cal-hour-row:last-child { border-bottom: none; }
.nova-cal-hour-label {
  width: 64px; padding: 12px 12px; font-size: 0.7rem;
  color: var(--nova-text-dim); font-weight: 600; flex-shrink: 0;
  border-right: 1px solid var(--nova-border-light); text-align: right;
  user-select: none;
}
.nova-cal-hour-row.is-current-hour .nova-cal-hour-label { color: var(--nova-accent); }
.nova-cal-hour-content {
  flex: 1; padding: 4px 10px; display: flex; flex-wrap: wrap;
  gap: 4px; align-items: flex-start;
}
/* Current time indicator line */
.nova-cal-now-line {
  position: relative; width: 100%; height: 2px;
  background: var(--nova-red);
}
.nova-cal-now-line::before {
  content: ''; position: absolute; left: -5px; top: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--nova-red);
}

/* ── Event modal tweaks ───────────────────────────────────────────── */
.nova-cal-modal .nova-form-row { display: flex; gap: 14px; }
.nova-cal-modal .nova-textarea-sm { resize: vertical; min-height: 48px; }
.nova-cal-modal .nova-modal-body { padding: 20px; }

/* ── Empty state ──────────────────────────────────────────────────── */
.nova-cal-empty-state {
  text-align: center; padding: 60px 20px;
}
.nova-cal-empty-state .nova-empty-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.4; }
.nova-cal-empty-state h3 { font-size: 0.9rem; color: var(--nova-text-muted); margin-bottom: 6px; }
.nova-cal-empty-state p { font-size: 0.78rem; color: var(--nova-text-dim); }

/* ══════════════════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════════════════ */
.nova-settings-layout { max-width: 720px; }

.nova-card { background: var(--nova-bg-raised); border: 1px solid var(--nova-border); border-radius: 14px; overflow: hidden; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.nova-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--nova-border); margin-bottom: 16px; }
.nova-card-header h3 { margin: 0; font-size: 0.9rem; color: var(--nova-text); font-weight: 600; }
.nova-card-body { padding: 16px; }

.nova-settings-info-grid { display: grid; gap: 6px; }
.nova-info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(42,45,58,0.3); font-size: 0.8rem; }
.nova-info-label { color: var(--text-secondary, #8b8fa3); }
.nova-info-value { color: var(--text-primary, #e1e4ed); font-weight: 500; display: flex; align-items: center; gap: 6px; }

/* Markdown rendered content */
.nova-md-content { font-size: 0.82rem; color: var(--text-primary, #e1e4ed); line-height: 1.6; }
.nova-md-content strong { color: #fff; }
.nova-md-content code { background: rgba(91,138,245,0.1); padding: 1px 5px; border-radius: 3px; font-size: 0.78rem; }

/* ── Button group ─────────────────────────────────────────────────── */
.nova-btn-group { display: inline-flex; gap: 0; }
.nova-btn-group .nova-btn { border-radius: 0; }
.nova-btn-group .nova-btn:first-child { border-radius: 4px 0 0 4px; }
.nova-btn-group .nova-btn:last-child { border-radius: 0 4px 4px 0; }

/* ── Phase 5 responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nova-notes-grid { grid-template-columns: 1fr; }
  .nova-habits-grid { grid-template-columns: 1fr; }
  .nova-goals-grid { grid-template-columns: 1fr; }
  .nova-calendar-week { grid-template-columns: 1fr; }
  .nova-calendar-month td { height: auto; min-height: 56px; min-width: auto; }
  .nova-page-actions { flex-wrap: wrap; gap: 4px; }
  .nova-form-row { flex-direction: column; }
  .nova-settings-layout { max-width: 100%; }
  .nova-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .nova-cal-event-label, .nova-cal-reminder-label { display: none; }
  .nova-cal-layout { flex-direction: column; height: auto; }
  .nova-cal-sidebar { width: 100%; min-width: 0; max-height: 300px; }
  .nova-cal-heading { min-width: auto; font-size: 0.9rem; }
  .nova-cal-toolbar { gap: 8px; }
  .nova-cal-actions-right { margin-left: 0; flex-wrap: wrap; }
  .nova-cal-bulk-toolbar { align-items: stretch; }
  .nova-cal-bulk-actions { width: 100%; }
  .nova-reminder-card { flex-direction: column; align-items: flex-start; }
  .nova-reminder-actions { align-self: flex-end; }
}

@media (max-width: 480px) {
  .nova-filter-bar { flex-direction: column; gap: 8px; }
  .nova-habits-grid { grid-template-columns: 1fr; }
  .nova-stats-grid { grid-template-columns: 1fr; }
  .nova-habit-streak-num { font-size: 1.5rem; }
}

/* ============================================================================
   Phase 6 — Advanced Features Styles
   Inbox, Bookmarks, Digest, Webhooks, Universal Search, Offline, Welcome
   ============================================================================ */

/* ── Inbox ────────────────────────────────────────────────────────────── */

/* KPI Cards */
.inbox-kpis {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.kpi-card {
  flex: 1 1 0; min-width: 100px;
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 8px; padding: 14px 16px; text-align: center;
}
.kpi-value { display: block; font-size: 1.6rem; font-weight: 700; color: var(--nova-text); }
.kpi-label { display: block; font-size: 0.72rem; color: var(--nova-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.kpi-breakdown { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.account-badge {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px; border-radius: 10px;
  font-size: 0.68rem; font-weight: 600;
  border: 1px solid;
}

/* Account filter button accents (tab active states per account) */
.nova-inbox-account-tab[data-account="Personal"].is-active       { background: rgba(99,102,241,0.15); color: #6366f1; border-color: #6366f1; box-shadow: 0 0 0 1px rgba(99,102,241,0.25); }
.nova-inbox-account-tab[data-account="Find a Sign"].is-active    { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245,158,11,0.25); }
.nova-inbox-account-tab[data-account="Intelli AI"].is-active     { background: rgba(16,185,129,0.15); color: #10b981; border-color: #10b981; box-shadow: 0 0 0 1px rgba(16,185,129,0.25); }
.nova-inbox-account-tab[data-account="Sweeper Parts"].is-active  { background: rgba(249,115,22,0.15); color: #f97316; border-color: #f97316; box-shadow: 0 0 0 1px rgba(249,115,22,0.25); }
.nova-inbox-account-tab[data-account="Mike Trace Eng"].is-active { background: rgba(10,120,96,0.10); color: #0a7860; border-color: #0a7860; box-shadow: 0 0 0 1px rgba(10,120,96,0.25); }

/* Inbox list */
.nova-inbox-list { display: flex; flex-direction: column; gap: 2px; }

.nova-inbox-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 6px; transition: background var(--transition-fast);
  border-left: 3px solid transparent;
}
.nova-inbox-item:hover { background: var(--nova-bg-hover); }
.nova-inbox-item.handled { opacity: 0.55; }
.nova-inbox-item.unread {
  font-weight: 600;
  background: rgba(99,102,241,0.06);
  border-left-width: 4px;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.08);
}
.nova-inbox-item.unread .nova-inbox-sender { color: var(--nova-text); font-weight: 700; }
.nova-inbox-item.unread .nova-inbox-subject { color: var(--nova-text); font-weight: 500; }
.nova-inbox-item.unread .nova-inbox-item-text { color: var(--nova-text-muted); }
.nova-inbox-item.unread::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nova-accent);
  flex-shrink: 0;
}
.nova-inbox-item.unread .nova-inbox-item-content { padding-left: 14px; }
.nova-inbox-item.read {
  opacity: 0.72;
  background: transparent;
}
.nova-inbox-item.read .nova-inbox-sender { font-weight: 400; color: var(--nova-text-muted); }
.nova-inbox-item.read .nova-inbox-subject { color: var(--nova-text-dim); }

/* Account-specific left borders */
.nova-inbox-item[data-account="Personal"]       { border-left-color: #6366f1; }
.nova-inbox-item[data-account="Find a Sign"]    { border-left-color: #f59e0b; }
.nova-inbox-item[data-account="Intelli AI"]     { border-left-color: #10b981; }
.nova-inbox-item[data-account="Sweeper Parts"]  { border-left-color: #f97316; }
.nova-inbox-item[data-account="Mike Trace Eng"] { border-left-color: #0a7860; }

.nova-inbox-item-content { flex: 1; min-width: 0; }

.nova-inbox-item-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}

/* Account tag pill */
.nova-inbox-account-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 12px;
  font-size: 0.7rem; font-weight: 600;
  border: 1.5px solid;
}

.nova-inbox-priority { font-size: 0.75rem; flex-shrink: 0; }
.nova-inbox-category { font-size: 0.75rem; flex-shrink: 0; }

.nova-inbox-sender { font-size: 0.84rem; color: var(--nova-text); }
.nova-inbox-sender-line { margin-bottom: 3px; font-size: 0.84rem; }

.nova-inbox-subject {
  color: var(--nova-text-muted); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 300px; display: inline;
}

.nova-inbox-time {
  font-size: 0.72rem; color: var(--nova-text-dim);
  white-space: nowrap; flex-shrink: 0; margin-left: auto;
}

.nova-inbox-item-text {
  font-size: 0.82rem; color: var(--nova-text-muted);
  line-height: 1.4; margin-bottom: 4px;
}

.nova-inbox-item-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.nova-inbox-meta-tag {
  font-size: 0.7rem; color: var(--nova-text-dim);
  background: var(--nova-bg); padding: 1px 6px; border-radius: 4px;
}
.nova-inbox-meta-tag.action-req { color: var(--nova-amber); background: rgba(245,158,11,0.1); }
.nova-inbox-meta-tag.draft-ready { color: var(--nova-accent); background: rgba(99,102,241,0.1); }
.nova-inbox-meta-tag.handled-tag { color: var(--nova-green); background: rgba(34,197,94,0.1); }

/* Inbox detail */
.nova-inbox-detail-meta { margin-bottom: 16px; }
.nova-inbox-detail-section { margin-bottom: 16px; }
.nova-inbox-detail-section h4 { margin: 0 0 8px; font-size: 0.85rem; color: var(--nova-text); }
.nova-inbox-detail-text {
  font-size: 0.82rem; color: var(--nova-text-muted);
  background: var(--nova-bg); padding: 12px; border-radius: 6px;
  max-height: 300px; overflow-y: auto; line-height: 1.5;
}
.nova-inbox-detail-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--nova-border);
}
.nova-inbox-action-result { margin-top: 12px; }

/* ── Multi-inbox account tabs ────────────────────────────────────────── */
.nova-inbox-accounts {
  margin-bottom: 16px;
}

.nova-inbox-accounts-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nova-border);
  overflow-x: auto;
  scrollbar-width: thin;
  width: 100%;
}

.nova-inbox-account-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  color: var(--nova-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  position: relative;
}

.nova-inbox-account-tab:hover {
  background: var(--nova-bg-hover);
  color: var(--nova-text);
  border-color: var(--nova-border-light);
}

.nova-inbox-account-tab.is-active {
  background: var(--nova-bg-active);
  color: var(--nova-text);
  border-color: var(--nova-accent);
  box-shadow: 0 0 0 1px var(--nova-accent-dim);
}

.nova-inbox-account-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.nova-inbox-account-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.nova-inbox-account-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.nova-inbox-account-email {
  font-size: 0.7rem;
  color: var(--nova-text-dim);
  line-height: 1.2;
}

.nova-inbox-account-status {
  font-size: 0.65rem;
  flex-shrink: 0;
}
.nova-inbox-account-status.connected { color: var(--nova-green); }
.nova-inbox-account-status.pending   { color: var(--nova-text-dim); }

.nova-inbox-account-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--nova-red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .nova-inbox-accounts-tabs { gap: 4px; }
  .nova-inbox-account-tab { padding: 8px 12px; }
  .nova-inbox-account-email { display: none; }
}

/* ── Email detail additions ──────────────────────────────────────────── */
.nova-inbox-action-flag {
  margin-top: 6px; padding: 4px 8px; border-radius: 4px;
  font-size: 0.8rem; background: rgba(245,158,11,0.08);
  color: var(--nova-amber);
}

.nova-inbox-attachments {
  list-style: none; padding: 0; margin: 0;
  font-size: 0.82rem;
}
.nova-inbox-attachments li {
  padding: 4px 0; border-bottom: 1px solid var(--nova-border);
}
.nova-inbox-attachments li:last-child { border-bottom: none; }

.nova-inbox-draft {
  font-size: 0.82rem; color: var(--nova-text-muted);
  background: var(--nova-bg); padding: 12px; border-radius: 6px;
  white-space: pre-wrap; line-height: 1.5; margin-bottom: 8px;
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--nova-border);
}

/* ── Mark read/unread toggle on email tile ───────────────────────────── */
.nova-inbox-item {
  position: relative;
}
.nova-inbox-toggle-read {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--nova-bg);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  color: var(--nova-text-muted);
  font-size: 0.7rem;
  padding: 3px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
  z-index: 2;
  white-space: nowrap;
}
.nova-inbox-item:hover .nova-inbox-toggle-read,
.nova-inbox-toggle-read:focus {
  opacity: 1;
}
.nova-inbox-toggle-read:hover {
  background: var(--nova-bg-hover);
  color: var(--nova-text);
  border-color: var(--nova-border-light);
}

/* ── Mark all read/unread bulk bar ───────────────────────────────────── */
.nova-inbox-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.nova-inbox-bulk-actions .nova-btn {
  font-size: 0.75rem;
  padding: 4px 12px;
}

/* Toast container */
.inbox-toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
}

/* ── Inbox sort controls ─────────────────────────────────────────────── */
.nova-inbox-sort-group {
  display: flex; align-items: center; gap: 6px;
}

/* ── Inbox summary panel ─────────────────────────────────────────────── */
.nova-inbox-summary {
  margin-bottom: 16px;
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.nova-inbox-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--nova-bg-raised);
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
}
.nova-inbox-summary-header:hover {
  background: var(--nova-bg-hover);
}
.nova-inbox-summary.is-open .nova-inbox-summary-header {
  border-bottom-color: var(--nova-border);
}
.nova-inbox-summary-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nova-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nova-inbox-summary-toggle {
  font-size: 0.7rem;
  color: var(--nova-text-dim);
  transition: transform 0.2s;
}
.nova-inbox-summary.is-open .nova-inbox-summary-toggle {
  transform: rotate(180deg);
}
.nova-inbox-summary-body {
  display: none;
  padding: 14px 16px;
  font-size: 0.82rem;
  color: var(--nova-text-muted);
  line-height: 1.6;
}
.nova-inbox-summary.is-open .nova-inbox-summary-body {
  display: block;
}
.nova-inbox-summary-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--nova-text-dim); font-size: 0.8rem;
}
.nova-inbox-summary-loading .spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--nova-border);
  border-top-color: var(--nova-accent);
  border-radius: 50%;
  animation: nova-spin 0.6s linear infinite;
}
@keyframes nova-spin { to { transform: rotate(360deg); } }

/* ── Email count stats strip ─────────────────────────────────────────── */
.nova-inbox-stats-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--nova-text-dim);
  margin-bottom: 8px;
  padding: 6px 0;
}
.nova-inbox-stats-strip .stat {
  display: flex; align-items: center; gap: 4px;
}
.nova-inbox-stats-strip .stat-value {
  font-weight: 600; color: var(--nova-text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .inbox-kpis { gap: 8px; }
  .kpi-card { min-width: 80px; padding: 10px; }
  .kpi-value { font-size: 1.2rem; }
  .nova-inbox-subject { max-width: 160px; }
  .nova-inbox-detail-actions { flex-direction: column; }
  .nova-inbox-account-tab { padding: 8px 10px; gap: 6px; }
  .nova-inbox-summary-body { padding: 10px 12px; }
}

/* ── Alerts ──────────────────────────────────────────────────────────── */
.nova-alert {
  padding: 12px 16px; border-radius: 6px;
  font-size: 0.82rem; line-height: 1.5;
}
.nova-alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--nova-green); }
.nova-alert-error   { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--nova-red); }
.nova-alert-info    { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: var(--nova-blue); }

/* ── Bookmark button on chat ─────────────────────────────────────────── */
.nova-chat-bookmark-btn {
  background: none; border: none; color: var(--nova-text-dim);
  cursor: pointer; padding: 2px; border-radius: 3px;
  opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast);
}
.nova-chat-bubble-nova:hover .nova-chat-bookmark-btn { opacity: 1; }
.nova-chat-bookmark-btn:hover { color: var(--nova-amber); }
.nova-chat-bookmark-btn.bookmarked { color: var(--nova-amber); opacity: 1; }
.nova-chat-bookmark-btn.bookmarked svg { fill: var(--nova-amber); }

/* ── Digest viewer ───────────────────────────────────────────────────── */
.nova-digest-tabs {
  display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap;
}
.nova-digest-body {
  padding: 16px; background: var(--nova-bg);
  border-radius: 6px; max-height: 500px; overflow-y: auto;
}

/* ── Webhook cards ───────────────────────────────────────────────────── */
.nova-webhook-toolbar {
  display: flex; gap: 8px; margin-bottom: 16px;
}

.nova-webhook-card {
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 8px; padding: 16px; margin-bottom: 8px;
}

.nova-webhook-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}

.nova-webhook-name {
  font-weight: 600; font-size: 0.9rem; color: var(--nova-text);
}

.nova-webhook-meta { margin-bottom: 12px; }

.nova-webhook-actions {
  display: flex; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--nova-border);
}

.nova-webhook-events {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--nova-border);
}
.nova-webhook-event {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 0; font-size: 0.78rem; color: var(--nova-text-muted);
  border-bottom: 1px solid rgba(38,42,58,0.3);
}

.nova-text-mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }

.nova-webhook-create-form { animation: nova-slide-down 0.2s ease; }

.nova-flash-stack {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.nova-flash {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 10px;
  color: var(--nova-text);
  padding: 0.85rem 1rem;
}

.nova-flash--success {
  border-color: color-mix(in srgb, #4ade80 35%, var(--nova-border));
}

.nova-flash--error {
  border-color: color-mix(in srgb, #f87171 35%, var(--nova-border));
}

.nova-flash--warning {
  border-color: color-mix(in srgb, #fbbf24 35%, var(--nova-border));
}

/* ── Bookmark cards ──────────────────────────────────────────────────── */
.nova-bookmark-card {
  background: var(--nova-bg); border: 1px solid var(--nova-border);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 8px;
}
.nova-bookmark-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.nova-bookmark-label { font-weight: 600; font-size: 0.88rem; color: var(--nova-text); }
.nova-bookmark-msg {
  font-size: 0.8rem; color: var(--nova-text-muted); line-height: 1.4;
  padding: 4px 0;
}
.nova-bookmark-msg strong { color: var(--nova-text); }
.nova-bookmark-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--nova-border);
}
.nova-bookmark-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.nova-bookmark-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

.ov-workbench-card--plan,
.ov-workbench-card--shortcuts {
  min-height: 100%;
}

.ov-workbench-card-head--stack {
  align-items: flex-start;
}

.ov-workbench-note {
  margin: 0;
  color: var(--nova-text-muted);
  font-size: 0.9rem;
}

.ov-shortcut-list {
  display: grid;
  gap: 0.85rem;
}

.ov-shortcut-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--nova-border);
  background: var(--nova-bg);
}

.ov-shortcut-link {
  min-width: 0;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0.6rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.ov-shortcut-favicon {
  border-radius: 3px;
}

.ov-shortcut-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.ov-shortcut-label {
  font-weight: 600;
}

.ov-shortcut-url {
  color: var(--nova-text-muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.ov-shortcut-delete {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ov-shortcut-item {
    grid-template-columns: 1fr;
  }
}

/* ── Universal Search Modal ──────────────────────────────────────────── */
.nova-search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 15vh;
}

.nova-search-modal {
  width: 100%; max-width: 640px;
  background: var(--nova-bg-surface); border: 1px solid var(--nova-border);
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}

.nova-search-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--nova-border);
}

.nova-search-icon { color: var(--nova-text-dim); flex-shrink: 0; }

.nova-search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--nova-text); font-size: 1.05rem;
  font-family: inherit;
}
.nova-search-input::placeholder { color: var(--nova-text-dim); }

.nova-kbd, .nova-kbd-sm {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; border-radius: 4px;
  background: var(--nova-bg-hover); border: 1px solid var(--nova-border);
  color: var(--nova-text-dim); font-size: 0.7rem; font-family: inherit;
  line-height: 1;
}
.nova-kbd { padding: 3px 8px; font-size: 0.72rem; }

.nova-search-recent, .nova-search-results {
  max-height: 400px; overflow-y: auto; padding: 12px 0;
}

.nova-search-section-title {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--nova-text-dim); padding: 4px 20px 8px; font-weight: 600;
}

.nova-search-recent-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; cursor: pointer; font-size: 0.85rem;
  color: var(--nova-text-muted); transition: background var(--transition-fast);
}
.nova-search-recent-item:hover { background: var(--nova-bg-hover); color: var(--nova-text); }
.nova-search-recent-item svg { flex-shrink: 0; color: var(--nova-text-dim); }

.nova-search-group { padding: 4px 0; }
.nova-search-group-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--nova-text-dim); padding: 6px 20px 4px; font-weight: 600;
}

.nova-search-result {
  display: block; padding: 10px 20px; cursor: pointer;
  text-decoration: none; color: inherit;
  transition: background var(--transition-fast);
}
.nova-search-result:hover { background: var(--nova-bg-hover); }

.nova-search-result-title {
  font-size: 0.85rem; font-weight: 500; color: var(--nova-text);
  margin-bottom: 2px;
}

.nova-search-result-preview {
  font-size: 0.78rem; color: var(--nova-text-muted);
}

.nova-search-no-results {
  text-align: center; padding: 32px 20px;
  color: var(--nova-text-muted); font-size: 0.85rem;
}
.nova-search-no-results .nova-empty-icon { font-size: 2rem; margin-bottom: 8px; }

.nova-search-text-result { padding: 16px 20px; }

/* ── Search trigger button in topbar ─────────────────────────────────── */
.nova-search-trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--nova-bg-surface); border: 1px solid var(--nova-border);
  border-radius: 6px; padding: 6px 12px; cursor: pointer;
  color: var(--nova-text-dim); font-size: 0.82rem;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  font-family: inherit;
}
.nova-search-trigger:hover {
  border-color: var(--nova-accent); color: var(--nova-text-muted);
}
.nova-search-trigger svg { flex-shrink: 0; }
.nova-search-trigger-text { white-space: nowrap; }
.nova-kbd-sm { font-size: 0.65rem; padding: 1px 5px; margin-left: 4px; }

/* ── Nova Ask Bar — dashboard overrides ─────────────────────────────── */
.nova-topbar-wrapper--dashboard {
  max-width: 260px;
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.nova-topbar-wrapper--dashboard .nova-topbar-icon {
  position: absolute;
  left: 10px;
  display: flex;
  align-items: center;
  color: var(--nova-text-muted);
  z-index: 2;
  pointer-events: none;
}

.nova-topbar-input--dashboard {
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  color: var(--nova-text);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 6px 12px 6px 34px;
  width: 100%;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.nova-topbar-input--dashboard::placeholder {
  color: var(--nova-text-dim);
}

.nova-topbar-input--dashboard:focus {
  cursor: text;
  border-color: var(--nova-accent);
  box-shadow: 0 0 0 2px rgba(60, 216, 180, 0.12);
  background: var(--nova-bg-surface);
  color: var(--nova-text);
}

/* ==========================================================================
   Nova Chat Overlay — full-screen expanded chat panel
   Mirrors AIREP nova_inline_chat styling, adapted for dashboard variables.
   ========================================================================== */

/* ── Backdrop ──────────────────────────────────────────────────────────── */
.nova-topbar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1055;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nova-topbar-backdrop.visible {
  display: block;
  opacity: 1;
}

/* ── Chat overlay panel ────────────────────────────────────────────────── */
.nova-topbar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.01s ease, visibility 0.01s ease;
}

.nova-topbar-overlay.nova-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.01s ease, visibility 0.01s ease;
}

/* ── Ambient background ────────────────────────────────────────────────── */
.nova-topbar-chat-bg {
  position: absolute;
  inset: 0;
  background: var(--nova-bg);
  z-index: 0;
  pointer-events: none;
}

.nova-topbar-chat-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0, transparent 2px,
    rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.nova-topbar-chat-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 35% at 15% 8%, rgba(60, 216, 180, 0.06), transparent),
    radial-gradient(ellipse 45% 45% at 85% 92%, rgba(34, 232, 160, 0.04), transparent);
  pointer-events: none;
  z-index: 0;
  animation: novaOverlayAmbient 8s ease-in-out infinite alternate;
}

@keyframes novaOverlayAmbient {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ── Chat header ───────────────────────────────────────────────────────── */
.nova-topbar-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--nova-border);
  background: color-mix(in srgb, var(--nova-accent) 4%, var(--nova-bg));
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.nova-topbar-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--nova-accent);
  letter-spacing: 0.03em;
}

.nova-topbar-chat-title-icon {
  display: flex;
  align-items: center;
  animation: novaOverlayIconFloat 2.8s ease-in-out infinite;
}

@keyframes novaOverlayIconFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 0px transparent); }
  50%      { transform: translateY(-1.5px); filter: drop-shadow(0 0 5px var(--nova-accent)); }
}

.nova-topbar-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nova-bg-hover);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  color: var(--nova-text-muted);
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1;
}

.nova-topbar-close-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
}

/* ── Messages scroll area ──────────────────────────────────────────────── */
.nova-topbar-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  position: relative;
  z-index: 1;
  scroll-behavior: smooth;
}

.nova-topbar-messages::-webkit-scrollbar { width: 4px; }
.nova-topbar-messages::-webkit-scrollbar-thumb {
  background: var(--nova-border);
  border-radius: 4px;
}

/* ── Welcome screen ────────────────────────────────────────────────────── */
.nova-topbar-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 280px;
  text-align: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--nova-text-muted);
}

.nova-topbar-welcome-icon {
  color: var(--nova-accent);
  line-height: 1;
  display: flex;
  align-items: center;
  animation: novaOverlayWelcomePulse 3s ease-in-out infinite;
}

@keyframes novaOverlayWelcomePulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0px transparent); transform: scale(1); }
  50%      { filter: brightness(1.35) drop-shadow(0 0 14px rgba(60, 216, 180, 0.45)); transform: scale(1.06); }
}

.nova-topbar-welcome h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--nova-accent);
  margin: 8px 0 4px;
}

.nova-topbar-welcome p {
  font-size: 0.8rem;
  max-width: 340px;
  color: var(--nova-text-muted);
  margin: 0;
}

/* ── Suggestion chips ──────────────────────────────────────────────────── */
.nova-topbar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.nova-chip {
  background: var(--nova-accent-dim);
  border: 1px solid color-mix(in srgb, var(--nova-accent) 28%, transparent);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.78rem;
  color: var(--nova-accent);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}

.nova-chip:hover {
  background: color-mix(in srgb, var(--nova-accent) 18%, transparent);
  border-color: var(--nova-accent);
}

/* ── Message bubbles ───────────────────────────────────────────────────── */
.nova-topbar-msg {
  margin-bottom: 14px;
  animation: novaOverlayMsgIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes novaOverlayMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.nova-topbar-msg-user { text-align: right; }

.nova-topbar-msg-user .nova-topbar-msg-bubble {
  display: inline-block;
  max-width: 78%;
  background: linear-gradient(135deg, rgba(60, 216, 180, 0.18), rgba(34, 232, 160, 0.12));
  border: 1px solid rgba(60, 216, 180, 0.25);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--nova-text);
  text-align: left;
}

.nova-topbar-msg-ai .nova-topbar-msg-bubble {
  display: inline-block;
  max-width: 78%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--nova-border);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  color: var(--nova-text);
  text-align: left;
}

.nova-topbar-msg-label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--nova-text-muted);
}

.nova-topbar-msg-user .nova-topbar-msg-label { color: var(--nova-accent); }

/* ── Markdown rendered elements inside bubbles ─────────────────────────── */
.nova-topbar-msg-bubble h3.nova-md-h3,
.nova-topbar-msg-bubble h4.nova-md-h4 {
  margin: 8px 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nova-accent);
}

.nova-topbar-msg-bubble code {
  background: var(--nova-accent-dim);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.8em;
}

.nova-topbar-msg-bubble ul.nova-md-ul,
.nova-topbar-msg-bubble ol.nova-md-ol {
  margin: 6px 0;
  padding-left: 20px;
  font-size: 0.8125rem;
}

.nova-topbar-msg-bubble table.nova-md-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  margin: 8px 0;
  width: 100%;
}

.nova-topbar-msg-bubble table.nova-md-table td,
.nova-topbar-msg-bubble table.nova-md-table th {
  border: 1px solid var(--nova-border);
  padding: 4px 8px;
}

.nova-topbar-msg-bubble table.nova-md-table th {
  background: var(--nova-accent-dim);
  font-weight: 600;
}

/* ── Typing indicator ──────────────────────────────────────────────────── */
.nova-topbar-typing-indicator .nova-topbar-msg-bubble {
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nova-topbar-typing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nova-accent);
  animation: novaOverlayTypingBounce 1.2s ease-in-out infinite;
}

.nova-topbar-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.nova-topbar-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes novaOverlayTypingBounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.5; }
  40%           { transform: translateY(-6px); opacity: 1;   }
}

/* ── Slash command palette ─────────────────────────────────────────────── */
.nova-topbar-command-palette {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--nova-accent) 4%, var(--nova-bg));
  border: 1px solid var(--nova-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

.nova-topbar-command-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.nova-topbar-command-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.nova-topbar-command-item:hover,
.nova-topbar-command-item.selected {
  background: var(--nova-bg-hover);
}

.nova-topbar-command-name {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.82rem;
  color: var(--nova-accent);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 110px;
}

.nova-topbar-command-desc {
  font-size: 0.78rem;
  color: var(--nova-text-muted);
}

/* ── Input row ─────────────────────────────────────────────────────────── */
.nova-topbar-input-row {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--nova-border);
  background: color-mix(in srgb, var(--nova-bg) 85%, rgba(0, 0, 0, 0.5));
  position: relative;
  z-index: 2;
  align-items: flex-end;
  flex-shrink: 0;
}

.nova-topbar-chat-input {
  flex: 1;
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 12px;
  color: var(--nova-text);
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
  resize: none;
  min-height: 46px;
  max-height: 160px;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nova-topbar-chat-input:focus {
  border-color: var(--nova-accent);
  box-shadow: 0 0 0 2px rgba(60, 216, 180, 0.1);
}

.nova-topbar-chat-input::placeholder { color: var(--nova-text-dim); }

.nova-topbar-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nova-accent), #22e8a0);
  border: none;
  border-radius: 10px;
  color: #011008;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s;
  flex-shrink: 0;
  height: 42px;
  font-weight: 700;
}

.nova-topbar-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(60, 216, 180, 0.4);
}

.nova-topbar-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* CSS-only ring spinner for busy state */
.nova-topbar-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(1, 16, 8, 0.3);
  border-top-color: #011008;
  border-radius: 50%;
  animation: novaOverlaySpin 0.7s linear infinite;
}

@keyframes novaOverlaySpin {
  to { transform: rotate(360deg); }
}

/* ── Auth notice ───────────────────────────────────────────────────────── */
.nova-topbar-auth-notice {
  margin: 24px auto;
  max-width: 340px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--nova-accent) 25%, transparent);
  border-radius: 12px;
  background: var(--nova-accent-dim);
  text-align: center;
  font-size: 0.85rem;
  color: var(--nova-text);
}

.nova-topbar-auth-notice a {
  color: var(--nova-accent);
  text-decoration: underline;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.nova-topbar-chat-footer {
  padding: 7px 20px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--nova-text-dim);
  border-top: 1px solid var(--nova-border-light);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* ── Accessibility ─────────────────────────────────────────────────────── */
.nova-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nova-topbar-close-btn:focus-visible,
.nova-topbar-send-btn:focus-visible,
.nova-chip:focus-visible {
  outline: 2px solid var(--nova-accent);
  outline-offset: 2px;
}

/* ── Offline banner ──────────────────────────────────────────────────── */
.nova-offline-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(239,68,68,0.15); border-bottom: 1px solid rgba(239,68,68,0.3);
  color: var(--nova-red); padding: 8px 16px; font-size: 0.82rem;
  font-weight: 500; animation: nova-slide-down 0.3s ease;
}

/* ── Welcome overlay ─────────────────────────────────────────────────── */
.nova-welcome-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: center;
}

.nova-welcome-modal {
  background: var(--nova-bg-surface); border: 1px solid var(--nova-border);
  border-radius: 16px; padding: 32px 40px; max-width: 440px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: nova-fade-in 0.3s ease;
}

.nova-welcome-header {
  margin-bottom: 12px;
}
.nova-welcome-icon { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.nova-welcome-header h2 { margin: 0; font-size: 1.2rem; color: var(--nova-text); }
.nova-welcome-modal > p { color: var(--nova-text-muted); font-size: 0.85rem; margin: 0 0 20px; }

.nova-welcome-checklist {
  text-align: left; margin-bottom: 24px;
  background: var(--nova-bg); border-radius: 8px; padding: 12px 16px;
}

.nova-welcome-check {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 0.85rem; color: var(--nova-text);
}
.nova-welcome-check-icon { font-size: 1rem; min-width: 20px; text-align: center; }

.nova-welcome-actions { margin-top: 8px; }

/* ── Filter group ────────────────────────────────────────────────────── */
.nova-filter-group {
  display: flex; gap: 4px; flex-wrap: wrap;
}

.nova-filter-btn.is-active {
  background: var(--nova-accent-dim); color: var(--nova-accent);
  border-color: var(--nova-accent);
}

/* ── Green button variant ────────────────────────────────────────────── */
.nova-btn-green {
  background: rgba(34,197,94,0.15); color: var(--nova-green);
  border-color: rgba(34,197,94,0.3);
}
.nova-btn-green:hover { background: rgba(34,197,94,0.25); }
.nova-btn-green:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Empty state (reusable) ──────────────────────────────────────────── */
.nova-empty-state {
  text-align: center; padding: 40px 20px; color: var(--nova-text-muted);
}
.nova-empty-state .nova-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.nova-empty-state h3 { margin: 0 0 8px; color: var(--nova-text); font-size: 1rem; }
.nova-empty-state p { margin: 0 0 16px; font-size: 0.85rem; color: var(--text-secondary, #8b8fa3); }

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes nova-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nova-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Search input sizing variants ─────────────────────────────────────── */
.nova-search-input-sm  { flex: 1; max-width: 280px; }
.nova-search-input-md  { flex: 1; max-width: 320px; }
.nova-search-input-lg  { flex: 1; max-width: 360px; }

/* ── Loading skeleton with margin ────────────────────────────────────── */
.nova-loading-skeleton-m  { margin: 24px; }
.nova-loading-skeleton-ms { margin: 16px; }

/* ── Settings input width constraints ────────────────────────────────── */
.nova-input-w-sm  { max-width: 120px; }
.nova-input-w-md  { max-width: 160px; }
.nova-input-w-lg  { max-width: 200px; }

/* ── Form group sizing ───────────────────────────────────────────────── */
.nova-form-group-flex  { flex: 1; }
.nova-form-group-fixed { width: 140px; }

/* ── Calendar label (legacy compat) ──────────────────────────────────── */
.nova-cal-label {
  font-size: 0.85rem; font-weight: 600; min-width: 160px; text-align: center;
}

/* ── Quick-chat empty state ──────────────────────────────────────────── */
.nova-quick-chat-empty {
  font-size: 0.82rem; text-align: center; padding: 12px 0;
}

/* ── Login page helpers ──────────────────────────────────────────────── */
.nova-login-icon-wrap {
  text-align: center; margin-bottom: 8px;
}

.nova-login-error-box {
  margin: 20px 0; padding: 12px 16px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
}

.nova-login-error-box p {
  color: var(--nova-red); font-size: 0.85rem; margin: 0; text-align: center;
}

.nova-login-footer {
  text-align: center; margin-top: 20px;
}

.nova-login-footer a {
  font-size: 0.85rem; color: var(--nova-text-muted);
}

.nova-login-lockout-hint {
  color: var(--nova-text-dim); font-size: 0.78rem; text-align: center; margin-bottom: 16px;
}

/* ── Phase 6 responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nova-inbox-item { flex-direction: column; gap: 8px; }
  .nova-inbox-item-time { align-self: flex-end; }
  .nova-inbox-subject { max-width: 200px; }
  .nova-search-trigger-text { display: none; }
  .nova-search-trigger .nova-kbd-sm { display: none; }
  .nova-search-modal { max-width: 95vw; margin: 0 8px; }
  .nova-welcome-modal { padding: 24px 20px; margin: 0 12px; }
  .nova-webhook-card { padding: 12px; }
  .nova-inbox-detail-actions { flex-direction: column; }
}

@media (max-width: 480px) {
  .nova-search-overlay { padding-top: 5vh; }
  .nova-search-input { font-size: 0.9rem; }
  .nova-inbox-item-header { flex-direction: column; align-items: flex-start; gap: 2px; }
  .nova-inbox-status { margin-left: 0; }
}

/* ── Cost warning banner ─────────────────────────────────────────────── */
.nova-cost-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  line-height: 1.4;
}
.nova-cost-banner--warning {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #fbbf24;
}
.nova-cost-banner--exceeded {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.nova-cost-banner__icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.nova-cost-banner__message {
  flex: 1;
}
.nova-cost-banner__message strong {
  font-weight: 600;
}
.nova-cost-banner__link {
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0.85;
  text-decoration: underline;
  color: inherit;
}
.nova-cost-banner__link:hover {
  opacity: 1;
}

/* ── Project Health Tiles (shared partial) ────────────────────────────── */
.pt-tiles { margin-top: 0; }
.pt-tile { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pt-tile-header { display: flex; align-items: center; gap: 8px; }
.pt-tile-icon { font-size: 1.25rem; }
.pt-tile-name { font-size: 0.95rem; color: var(--text-primary, #e1e4ed); }

.pt-tile-statuses { display: flex; flex-direction: column; gap: 6px; }
.pt-status-row { display: flex; justify-content: space-between; align-items: center; }
.pt-status-label { font-size: 0.75rem; color: var(--text-secondary, #8b8fa3); text-transform: uppercase; letter-spacing: 0.3px; }
.pt-status-badge { font-size: 0.7rem; }
.pt-status-badge--ok { background: rgba(34,197,94,0.15); color: var(--nova-green, #22c55e); }
.pt-status-badge--fail { background: rgba(239,68,68,0.15); color: var(--nova-red, #ef4444); }
.pt-status-badge--unknown { background: rgba(107,114,128,0.1); color: var(--text-secondary, #8b8fa3); }

.pt-tile-queue { display: flex; justify-content: space-around; text-align: center; padding-top: 4px; border-top: 1px solid var(--border, #2a2d3a); }
.pt-queue-row { display: flex; flex-direction: column; gap: 2px; }
.pt-queue-count { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.pt-queue-count--pending { color: var(--text-secondary, #8b8fa3); }
.pt-queue-count--active { color: var(--nova-blue, #5b8af5); }
.pt-queue-count--done { color: var(--nova-green, #22c55e); }
.pt-queue-label { font-size: 0.65rem; color: var(--text-secondary, #8b8fa3); text-transform: uppercase; letter-spacing: 0.3px; }

.pt-tile-alerts { display: flex; flex-direction: column; gap: 4px; }
.pt-alert { font-size: 0.75rem; color: var(--nova-amber, #f59e0b); padding: 4px 8px; background: rgba(245,158,11,0.08); border-radius: 4px; }

/* ══════════════════════════════════════════════════════
   Agent Dashboard — New UI Components
   ══════════════════════════════════════════════════════ */

/* ── Timeline: min-height bump ─── */
.av-timeline-container { min-height: 900px; }

/* ── Task Tile Cards ──────────────────────────────────── */
.av-tile-card {
  border-left: 3px solid var(--nova-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.av-tile-card.is-active {
  border-left-color: #6c8aff;
  box-shadow: 0 0 0 1px rgba(108,138,255,0.12);
}
.av-tile-card[data-tile-project="nova"]    { border-left-color: #6c8aff; }
.av-tile-card[data-tile-project="airep"]   { border-left-color: #f59e0b; }
.av-tile-card[data-tile-project="website"] { border-left-color: #22c55e; }

.av-tile-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.av-tile-header:hover {
  background: rgba(255,255,255,0.015);
}
.av-tile-left {
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.av-tile-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.av-tile-project {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: capitalize;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.av-tile-info {
  flex: 1;
  min-width: 0;
}

.av-tile-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.av-tile-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--nova-text);
  line-height: 1.3;
}
.av-tile-category {
  font-size: 0.6rem;
  color: var(--nova-text-dim);
  background: var(--nova-bg-surface);
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.av-tile-priority {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--nova-text-muted);
  background: rgba(108,138,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
}

.av-tile-desc {
  font-size: 0.76rem;
  color: var(--nova-text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.85;
}

.av-tile-timestamps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2px;
}
.av-tile-ts {
  font-size: 0.7rem;
  color: var(--nova-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.av-tile-ts-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--nova-text-dim);
  opacity: 0.7;
}

.av-tile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}
.av-tile-meta-item {
  font-size: 0.68rem;
  color: var(--nova-text-dim);
}

.av-tile-id {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.62rem;
  color: var(--nova-text-dim);
  background: var(--nova-bg-surface);
  padding: 2px 5px;
  border-radius: 3px;
}

.av-tile-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6c8aff;
  animation: av-dot-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Tile expanded body ─── */
.av-tile-body {
  border-top: 1px solid var(--nova-border);
  padding: 0;
}

.av-tile-agents {
  padding: 12px 16px;
}
.av-tile-agents-header {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nova-text-dim);
  margin-bottom: 8px;
}

.av-tile-agent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.av-tile-agent-row:hover {
  background: rgba(255,255,255,0.02);
}
.av-tile-agent-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.av-tile-agent-name {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: capitalize;
}
.av-tile-agent-stat {
  font-size: 0.68rem;
  color: var(--nova-text-dim);
}

.av-tile-agent-scratchpad {
  padding: 0 8px 8px 42px;
}

/* ── Stage execution logs (tile expand) ──────────── */
.av-stage-log-container { padding: 0 0 8px 0; }

.av-stage-section {
  border-top: 1px solid var(--nova-border);
}
.av-stage-section:first-child { border-top: none; }

.av-stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 6px;
  cursor: default;
}
.av-stage-name {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nova-text-muted);
  flex-shrink: 0;
}
.av-stage-stat {
  font-size: 0.66rem;
  color: var(--nova-text-dim);
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  padding: 1px 5px;
}

.av-stage-logs { padding: 0 16px 10px; }

.av-log-entry {
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.av-log-entry.is-fail { border-left: 2px solid var(--nova-red, #ee0055); }

.av-log-label {
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nova-text-dim);
  padding: 5px 10px 3px;
  background: rgba(255,255,255,0.03);
}
.av-log-entry.av-log-agent_response .av-log-label { color: var(--nova-purple, #a78bfa); }
.av-log-entry.av-log-validation_output .av-log-label { color: var(--nova-green, #34d399); }
.av-log-entry.av-log-stage_error .av-log-label,
.av-log-entry.is-fail .av-log-label { color: var(--nova-red, #f87171); }
.av-log-entry.av-log-deploy_outcome .av-log-label { color: var(--nova-blue, #60a5fa); }
.av-log-entry.av-log-fix_attempt .av-log-label { color: var(--nova-amber, #fbbf24); }

.av-log-content-wrap { padding: 6px 10px 8px; }
.av-log-content {
  font-family: monospace;
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--nova-text);
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

.av-logs-empty {
  padding: 12px 16px;
  font-size: 0.78rem;
}

/* ── Responsive tile layout ─── */
@media (max-width: 640px) {
  .av-tile-header { flex-direction: column; gap: 8px; }
  .av-tile-left { flex-direction: column; gap: 6px; }
  .av-tile-timestamps { flex-direction: column; gap: 4px; }
  .av-tile-right { justify-content: flex-end; }
}

/* ── Pipeline controls bar ─── */
.av-pipeline-controls {
  border-bottom: 1px solid var(--nova-border);
  padding: 8px 20px;
  background: var(--nova-bg-raised, rgba(255,255,255,0.02));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.av-pipeline-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.av-pipeline-control-label {
  flex: 1;
  color: var(--nova-text-muted);
}
.av-pipeline-control-btns {
  display: flex;
  gap: 6px;
}
.nova-btn-xs {
  padding: 2px 8px;
  font-size: 0.72rem;
  border-radius: 5px;
}

/* ── Show-more button for scratchpad ─── */
.av-show-more-btn {
  background: none;
  border: none;
  color: var(--nova-accent, #0a7860);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  display: block;
  margin-top: 4px;
}
.av-show-more-btn:hover { text-decoration: underline; }

/* ── Detail panel tabs ─── */
.av-detail-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--nova-border);
}
.av-detail-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--nova-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.av-detail-tab.is-active {
  color: var(--nova-accent, #0a7860);
  border-bottom-color: var(--nova-accent, #0a7860);
}
.av-tab-panel { padding: 16px 18px; }

/* ── Edit tab ─── */
.av-edit-form { display: flex; flex-direction: column; gap: 16px; }
.av-edit-section h4 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nova-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.av-edit-file-section { margin-top: 12px; }
.av-edit-label {
  display: block;
  font-size: 0.76rem;
  color: var(--nova-text-muted);
  margin-bottom: 4px;
}
.av-edit-textarea {
  width: 100%;
  background: var(--nova-bg, #0d0f1a);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--nova-text);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.55;
}
.av-edit-textarea:focus { border-color: var(--nova-accent, #0a7860); outline: none; }
.av-edit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 4px;
}
.av-edit-status {
  font-size: 0.76rem;
  color: var(--nova-text-muted);
  flex: 1;
}

/* ── Chat tab ─── */
.av-chat-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 400px;
}
.av-chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.av-chat-empty {
  font-size: 0.82rem;
  padding: 24px 0;
  text-align: center;
}
.av-chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.av-chat-bubble-user {
  background: var(--nova-accent, #0a7860);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.av-chat-bubble-agent {
  background: var(--nova-bg-raised, rgba(255,255,255,0.04));
  border: 1px solid var(--nova-border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.av-chat-bubble-error {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  color: #f87171;
  align-self: flex-start;
  border-radius: 12px;
}
.av-chat-response-text { white-space: pre-wrap; }
.av-chat-response-meta {
  font-size: 0.7rem;
  color: var(--nova-text-muted);
  margin-top: 5px;
}
.av-chat-bubble-agent.av-chat-typing {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 16px;
}
.av-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nova-text-muted);
  animation: av-typing 1.2s ease-in-out infinite;
}
.av-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.av-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes av-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.av-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.av-chat-input {
  flex: 1;
  background: var(--nova-bg, #0d0f1a);
  border: 1px solid var(--nova-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--nova-text);
  font-family: inherit;
  resize: none;
  line-height: 1.5;
}
.av-chat-input:focus { border-color: var(--nova-accent, #0a7860); outline: none; }

/* ── History tabs ─── */
.av-history-tabs {
  display: flex;
  gap: 4px;
}
.av-history-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 12px;
  font-size: 0.82rem;
  color: var(--nova-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.av-history-tab.is-active {
  color: var(--nova-accent, #0a7860);
  border-bottom-color: var(--nova-accent, #0a7860);
}

/* ── History filter bar ─── */
.av-history-filter-bar {
  padding: 8px 18px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--nova-border);
}
.av-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.av-filter-chip {
  background: var(--nova-bg-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--nova-border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.74rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--nova-text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.av-filter-chip.is-active {
  border-color: var(--nova-accent, #0a7860);
  color: var(--nova-accent, #0a7860);
  background: rgba(108,138,255,0.08);
}
.av-filter-select {
  background: var(--nova-bg, #0d0f1a);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.76rem;
  color: var(--nova-text);
  font-family: inherit;
}

/* ── History row: colored left border + expand ─── */
.av-history-row { border-left: 3px solid transparent; }
.av-history-raw {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.av-history-raw pre {
  font-size: 0.7rem;
  white-space: pre-wrap;
  margin: 0;
  color: var(--nova-text-muted);
}
.av-history-expand-btn {
  background: none;
  border: 1px solid var(--nova-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.7rem;
  cursor: pointer;
  color: var(--nova-text-muted);
  font-family: inherit;
  line-height: 1.4;
}
.av-history-expand-btn:hover { color: var(--nova-text); border-color: var(--nova-text-muted); }

/* ── History row chevron ── */
.av-history-chevron {
  font-size: 0.6rem;
  color: var(--nova-text-dim);
  transition: transform 0.15s;
  margin-left: 4px;
  display: inline-block;
}
.av-history-chevron.is-open { transform: rotate(90deg); }

/* ── History row inline detail panel ── */
.av-history-detail {
  width: 100%;
  padding: 12px 16px;
  margin-top: 4px;
  border-top: 1px solid var(--nova-border);
  background: var(--nova-bg);
  border-radius: 0 0 8px 8px;
}
.av-history-chat-msg {
  margin-bottom: 10px;
}
.av-history-chat-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nova-text-dim);
  display: block;
  margin-bottom: 4px;
}
.av-history-chat-text {
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--nova-text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.av-history-chat-msg.is-user .av-history-chat-text {
  background: rgba(108,138,255,0.07);
  border: 1px solid rgba(108,138,255,0.18);
}
.av-history-chat-msg.is-agent .av-history-chat-text {
  background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border);
}
.av-history-chat-tools {
  margin-bottom: 8px;
}
.av-history-tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.av-history-tool-pill {
  font-size: 0.65rem;
  padding: 2px 7px;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 12px;
  color: #f59e0b;
}
.av-history-detail-stats {
  font-size: 0.72rem;
  color: var(--nova-text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--nova-border);
}

/* ── Exec title row: agent name + status badge on one line ── */
.av-exec-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.av-exec-title-row .av-exec-title {
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: capitalize;
}

/* ── Task description shown in timeline card header ── */
.av-exec-task {
  font-size: 0.78rem;
  color: var(--nova-text-muted);
  font-style: italic;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.9;
}

/* ── Inline steer box (replaces browser prompt()) ── */
.av-steer-box {
  padding: 10px 16px 12px;
  background: rgba(108,138,255,0.05);
  border-top: 1px solid rgba(108,138,255,0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: av-slide-in 0.18s ease;
}

.av-steer-input {
  width: 100%;
  background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border);
  border-radius: 6px;
  color: var(--nova-text);
  padding: 8px 10px;
  font-size: 0.82rem;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.av-steer-input:focus {
  outline: none;
  border-color: var(--nova-accent, #0a7860);
  box-shadow: 0 0 0 2px rgba(108,138,255,0.12);
}

.av-steer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================================
   Email Client — Full three-panel layout (ec- prefix)
   ============================================================================ */

.ec-hidden { display: none !important; }

/* ── Account tabs ──────────────────────────────────────────────────────── */
.ec-accounts { padding: 0 12px; border-bottom: 1px solid var(--nova-border); flex-shrink: 0; }
.ec-accounts-tabs {
  display: flex; gap: 4px; padding: 6px 0; overflow-x: auto; scrollbar-width: thin;
}
.ec-account-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px; background: transparent; border: 1px solid transparent;
  border-radius: 6px; color: var(--nova-text-muted); cursor: pointer;
  font-size: 0.78rem; white-space: nowrap; transition: all var(--transition-fast);
  position: relative;
}
.ec-account-tab:hover { background: var(--nova-bg-hover); color: var(--nova-text); }
.ec-account-tab.is-active {
  background: var(--nova-accent-dim); color: var(--nova-accent);
  border-color: var(--nova-accent);
}
.ec-account-icon { font-size: 0.9rem; }
.ec-account-label { font-weight: 500; }
.ec-account-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--nova-red); color: #fff; font-size: 0.6rem; font-weight: 700;
}

/* Per-account active accent colours */
.ec-account-tab[data-account="Personal"].is-active       { background: rgba(99,102,241,0.15); color: #6366f1; border-color: #6366f1; }
.ec-account-tab[data-account="Find a Sign"].is-active    { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: #f59e0b; }
.ec-account-tab[data-account="Intelli AI"].is-active     { background: rgba(16,185,129,0.15); color: #10b981; border-color: #10b981; }
.ec-account-tab[data-account="Sweeper Parts"].is-active  { background: rgba(249,115,22,0.15); color: #f97316; border-color: #f97316; }
.ec-account-tab[data-account="Mike Trace Eng"].is-active { background: rgba(10,120,96,0.10); color: #0a7860; border-color: #0a7860; }

/* ── KPI strip ─────────────────────────────────────────────────────────── */
.ec-kpi-strip {
  display: flex; gap: 0; padding: 3px 16px;
  border-bottom: 1px solid var(--nova-border);
  background: var(--nova-bg); flex-shrink: 0;
}
.ec-kpi {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 14px; border-right: 1px solid var(--nova-border-light);
}
.ec-kpi:last-child { border-right: none; }
.ec-kpi-val { font-size: 0.88rem; font-weight: 700; color: var(--nova-text); }
.ec-kpi-lbl { font-size: 0.65rem; color: var(--nova-text-dim); text-transform: uppercase; letter-spacing: 0.4px; }

/* ── Three-panel body ──────────────────────────────────────────────────── */
.ec-body {
  display: grid;
  grid-template-columns: 160px 680px 1fr;
  flex: 1; min-height: 0; overflow: hidden;
}

/* ── Folder sidebar ────────────────────────────────────────────────────── */
.ec-folders {
  border-right: 1px solid var(--nova-border);
  overflow-y: auto; padding: 8px 0;
  background: var(--nova-bg-raised);
}
.ec-folders-list { display: flex; flex-direction: column; gap: 1px; }
.ec-folder {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; background: transparent; border: none;
  color: var(--nova-text-muted); cursor: pointer; font-size: 0.8rem;
  text-align: left; width: 100%; transition: all var(--transition-fast);
}
.ec-folder:hover { background: var(--nova-bg-hover); color: var(--nova-text); }
.ec-folder.is-active {
  background: var(--nova-accent-dim); color: var(--nova-accent); font-weight: 600;
}
.ec-folder-icon { font-size: 0.85rem; width: 20px; text-align: center; flex-shrink: 0; }
.ec-folder-name { flex: 1; }
.ec-folder-count {
  font-size: 0.68rem; font-weight: 700; color: var(--nova-accent);
  min-width: 16px; text-align: right;
}
.ec-folders-labels {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--nova-border);
}
.ec-folders-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 5px; background: none; border: none;
  border-bottom: 1px solid var(--nova-border-light);
  color: var(--nova-text-dim); cursor: pointer; font-size: 0.85rem;
  transition: all var(--transition-fast);
}
.ec-folders-toggle:hover { color: var(--nova-text); background: var(--nova-bg-hover); }
.ec-folders.is-collapsed { width: 0; min-width: 0; overflow: hidden; padding: 0; border-right: none; }

/* ── Email list panel ──────────────────────────────────────────────────── */
.ec-list-panel {
  border-right: 1px solid var(--nova-border);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--nova-bg);
}
.ec-list-toolbar {
  padding: 8px 10px; border-bottom: 1px solid var(--nova-border);
  flex-shrink: 0;
}
.ec-search {
  width: 100%; padding: 6px 10px; margin-bottom: 6px;
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 6px; color: var(--nova-text); font-size: 0.8rem;
  outline: none; transition: border-color var(--transition-fast);
}
.ec-search:focus { border-color: var(--nova-accent); }
.ec-search::placeholder { color: var(--nova-text-dim); }
.ec-search-wrap { position: relative; margin-bottom: 6px; }
.ec-search-wrap .ec-search { margin-bottom: 0; padding-right: 28px; }
.ec-search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--nova-text-dim);
  cursor: pointer; font-size: 1rem; padding: 0 4px; line-height: 1;
  transition: color var(--transition-fast);
}
.ec-search-clear:hover { color: var(--nova-text); }
.ec-list-filters { display: flex; gap: 6px; align-items: center; }
.ec-select {
  padding: 3px 6px; background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 4px; color: var(--nova-text-muted); font-size: 0.72rem;
  outline: none; cursor: pointer;
}
.ec-list-count { font-size: 0.7rem; color: var(--nova-text-dim); margin-left: auto; }

.ec-list-scroll { flex: 1; overflow-y: auto; }
.ec-list-loading {
  padding: 32px; text-align: center;
  color: var(--nova-text-dim); font-size: 0.82rem;
}

/* Skeleton loading */
@keyframes ec-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ec-skeleton-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--nova-border-light);
}
.ec-skeleton-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(90deg, var(--nova-bg-raised) 25%, var(--nova-bg-hover) 50%, var(--nova-bg-raised) 75%);
  background-size: 800px 100%;
  animation: ec-shimmer 1.4s infinite linear;
}
.ec-skeleton-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.ec-skeleton-row {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, var(--nova-bg-raised) 25%, var(--nova-bg-hover) 50%, var(--nova-bg-raised) 75%);
  background-size: 800px 100%;
  animation: ec-shimmer 1.4s infinite linear;
}
.ec-skeleton-sender { width: 45%; }
.ec-skeleton-subject { width: 80%; }
.ec-skeleton-snippet { width: 60%; }

/* Archive search banner */
.ec-search-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: rgba(108,138,255,0.08);
  border-bottom: 1px solid var(--nova-accent);
  font-size: 0.78rem; color: var(--nova-text-muted);
  flex-shrink: 0; position: sticky; top: 0; z-index: 10;
}
.ec-search-banner-back {
  padding: 3px 10px; background: var(--nova-accent-dim);
  border: 1px solid var(--nova-accent); border-radius: 4px;
  color: var(--nova-accent); cursor: pointer; font-size: 0.74rem;
  transition: all var(--transition-fast);
}
.ec-search-banner-back:hover { background: var(--nova-accent); color: #fff; }

/* Email list items */
.ec-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; cursor: pointer; position: relative;
  border-bottom: 1px solid var(--nova-border-light);
  transition: background var(--transition-fast);
}
.ec-item:hover { background: var(--nova-bg-hover); }
.ec-item.is-selected { background: var(--nova-accent-dim); }
.ec-item.is-unread { font-weight: 600; }
.ec-item.is-read { opacity: 0.7; }
.ec-item.is-handled { opacity: 0.5; }

@keyframes ec-item-arrive {
  0%   { transform: translateY(-8px); opacity: 0; background: transparent; }
  40%  { transform: translateY(0); opacity: 1; }
  50%  { background: color-mix(in srgb, var(--nova-accent, #3cd8b4) 10%, transparent); }
  100% { background: transparent; }
}
.ec-item.ec-item-new { animation: ec-item-arrive 3s ease forwards; }

/* Email row arrival — two-phase CSS transition (Section 9) */
.email-row-new {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.email-row-visible {
  opacity: 1;
  transform: translateY(0);
}

.ec-item-body { flex: 1; min-width: 0; }
.ec-item-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; user-select: none;
}
.ec-item-row1 {
  display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.ec-item-sender {
  font-size: 0.8rem; color: var(--nova-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.ec-item.is-unread .ec-item-sender { font-weight: 700; }
.ec-item-time {
  font-size: 0.68rem; color: var(--nova-text-dim); white-space: nowrap; flex-shrink: 0;
}
.ec-item-subject {
  font-size: 0.78rem; color: var(--nova-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.ec-item.is-unread .ec-item-subject { color: var(--nova-text); font-weight: 500; }
.ec-item-snippet {
  font-size: 0.74rem; color: var(--nova-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-item-tags {
  display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap;
}
.ec-item-tag {
  font-size: 0.62rem; padding: 1px 5px; border-radius: 3px;
  background: var(--nova-bg-surface); color: var(--nova-text-dim);
}
.ec-item-tag.tag-account {
  font-weight: 600; border: 1px solid;
}
.ec-item-tag.tag-priority-urgent { color: var(--nova-red); background: rgba(239,68,68,0.1); }
.ec-item-tag.tag-priority-high { color: var(--nova-orange); background: rgba(249,115,22,0.1); }
.ec-item-tag.tag-attach { color: var(--nova-text-muted); }
.ec-item-tag.tag-action { color: var(--nova-amber); background: rgba(245,158,11,0.1); }
.ec-item-tag.tag-starred { color: var(--nova-amber); }
.ec-item-tag.tag-handled { color: var(--nova-green); background: rgba(34,197,94,0.1); }

/* Inline actions on hover */
.ec-item-actions {
  position: absolute; right: 8px; top: 8px;
  display: flex; gap: 2px; opacity: 0.25;
  transition: opacity var(--transition-fast);
}
.ec-item:hover .ec-item-actions { opacity: 1; }
.ec-item-action {
  padding: 2px 6px; background: var(--nova-bg-surface); border: 1px solid var(--nova-border);
  border-radius: 4px; cursor: pointer; font-size: 0.72rem; color: var(--nova-text-muted);
  transition: all var(--transition-fast);
}
.ec-item-action:hover { background: var(--nova-bg-active); color: var(--nova-text); }
.ec-item-action.is-starred { color: var(--nova-amber); }
.ec-item-action svg { display: block; }

/* Account-specific left borders — thicker for unread */
.ec-item[data-account="Personal"]                     { border-left: 2px solid #6366f1; }
.ec-item[data-account="Find a Sign"]                  { border-left: 2px solid #f59e0b; }
.ec-item[data-account="Intelli AI"]                   { border-left: 2px solid #10b981; }
.ec-item[data-account="Sweeper Parts"]                { border-left: 2px solid #f97316; }
.ec-item[data-account="Mike Trace Eng"]               { border-left: 2px solid #0a7860; }
.ec-item.is-unread[data-account="Personal"]           { border-left: 5px solid #6366f1; background: rgba(99,102,241,0.04); }
.ec-item.is-unread[data-account="Find a Sign"]        { border-left: 5px solid #f59e0b; background: rgba(245,158,11,0.04); }
.ec-item.is-unread[data-account="Intelli AI"]         { border-left: 5px solid #10b981; background: rgba(16,185,129,0.04); }
.ec-item.is-unread[data-account="Sweeper Parts"]      { border-left: 5px solid #f97316; background: rgba(249,115,22,0.04); }
.ec-item.is-unread[data-account="Mike Trace Eng"]     { border-left: 5px solid #0a7860; background: rgba(10,120,96,0.04); }

/* ── Reading pane ──────────────────────────────────────────────────────── */
.ec-reading-pane {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--nova-bg); overflow-y: auto;
}
.ec-reading-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; color: var(--nova-text-dim); gap: 8px; padding: 32px;
}
.ec-reading-empty-icon { font-size: 3rem; opacity: 0.3; }
.ec-reading-empty-text { font-size: 0.9rem; }
.ec-reading-empty-hint { font-size: 0.75rem; }
.ec-reading-empty-hint kbd {
  padding: 1px 6px; background: var(--nova-bg-surface); border: 1px solid var(--nova-border);
  border-radius: 3px; font-size: 0.72rem;
}

.ec-reading-content { display: flex; flex-direction: column; flex: 1; }

.ec-reading-header {
  padding: 16px 20px; border-bottom: 1px solid var(--nova-border); flex-shrink: 0;
}
.ec-reading-subject {
  font-size: 1.1rem; font-weight: 700; color: var(--nova-text);
  margin-bottom: 8px; line-height: 1.3;
}
.ec-reading-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; color: var(--nova-text-muted);
}
.ec-reading-meta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ec-reading-meta-label { color: var(--nova-text-dim); min-width: 40px; }
.ec-reading-meta-value { color: var(--nova-text); }
.ec-reading-meta-badges { display: flex; gap: 6px; margin-top: 4px; }
.ec-reading-badge {
  font-size: 0.68rem; padding: 2px 8px; border-radius: 10px;
  background: var(--nova-bg-surface); color: var(--nova-text-muted);
  border: 1px solid var(--nova-border);
}

/* Email body */
.ec-reading-body {
  flex: 1; padding: 16px 20px; min-height: 200px;
}
.ec-reading-body iframe {
  width: 100%; border: none; min-height: 200px; background: transparent;
}
.ec-reading-body-text {
  font-size: 0.84rem; line-height: 1.6; color: var(--nova-text);
  white-space: pre-wrap; word-wrap: break-word;
}

/* Attachments */
.ec-reading-attachments {
  padding: 12px 20px; border-top: 1px solid var(--nova-border);
}
.ec-reading-attachments h4 {
  font-size: 0.78rem; color: var(--nova-text-muted); margin-bottom: 8px;
}
.ec-attachment-list { display: flex; gap: 8px; flex-wrap: wrap; }
.ec-attachment {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border); border-radius: 6px;
  font-size: 0.78rem; color: var(--nova-accent); cursor: pointer;
  transition: all var(--transition-fast); text-decoration: none;
}
.ec-attachment:hover { background: var(--nova-bg-hover); border-color: var(--nova-accent); }
.ec-attachment-size { color: var(--nova-text-dim); font-size: 0.7rem; }

/* Actions bar */
.ec-reading-actions {
  display: flex; align-items: center; gap: 6px; padding: 10px 20px; flex-wrap: wrap;
  border-top: 1px solid var(--nova-border); flex-shrink: 0;
}
.ec-action-group { display: flex; gap: 6px; flex-wrap: wrap; }
.ec-action-divider {
  width: 1px; height: 24px; background: var(--nova-border);
  align-self: center; flex-shrink: 0; margin: 0 2px;
}
.ec-action-btn {
  padding: 5px 14px; background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border); border-radius: 6px;
  color: var(--nova-text-muted); cursor: pointer; font-size: 0.78rem;
  transition: all var(--transition-fast);
}
.ec-action-btn:hover { background: var(--nova-bg-hover); color: var(--nova-text); border-color: var(--nova-accent); }
.ec-action-btn.is-primary { background: var(--nova-accent); color: #fff; border-color: var(--nova-accent); }
.ec-action-btn.is-primary:hover { opacity: 0.9; }

/* Thread view */
.ec-thread-container { padding: 12px 20px; }
.ec-thread-msg {
  border: 1px solid var(--nova-border); border-radius: 8px;
  margin-bottom: 8px; overflow: hidden;
  transition: all var(--transition-fast);
}
.ec-thread-msg-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  background: var(--nova-bg-raised);
  transition: background var(--transition-fast);
}
.ec-thread-msg-header:hover { background: var(--nova-bg-hover); }
.ec-thread-msg-sender { font-size: 0.82rem; font-weight: 600; color: var(--nova-text); flex: 1; }
.ec-thread-msg-date { font-size: 0.72rem; color: var(--nova-text-dim); }
.ec-thread-msg-snippet { font-size: 0.74rem; color: var(--nova-text-dim); margin-left: 8px; }
.ec-thread-msg-body {
  display: none; padding: 14px; font-size: 0.84rem;
  line-height: 1.6; color: var(--nova-text);
}
.ec-thread-msg.is-expanded .ec-thread-msg-body { display: block; }
.ec-thread-msg.is-expanded .ec-thread-msg-snippet { display: none; }

/* Inline reply/forward */
.ec-reading-reply { padding: 12px 20px; border-top: 1px solid var(--nova-border); }
.ec-reply-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 0.82rem; color: var(--nova-text-muted);
}
.ec-reply-to-field {
  flex: 1; padding: 4px 8px; background: var(--nova-bg-raised);
  border: 1px solid var(--nova-border); border-radius: 4px;
  color: var(--nova-text); font-size: 0.8rem; outline: none;
}
.ec-reply-to-field:focus { border-color: var(--nova-accent); }
.ec-reply-editor {
  min-height: 120px; padding: 10px; margin-bottom: 8px;
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 6px; color: var(--nova-text); font-size: 0.84rem;
  line-height: 1.5; outline: none;
}
.ec-reply-editor:focus { border-color: var(--nova-accent); }
.ec-reply-actions { display: flex; gap: 8px; }

/* ── Compose window ────────────────────────────────────────────────────── */
.ec-compose-window {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(900px, calc(100vw - 48px));
  height: 82vh; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-bottom: none; border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.5); z-index: 500;
  animation: ec-slide-up 0.2s ease;
}
@keyframes ec-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.ec-compose-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--nova-bg-active);
  border-radius: 10px 10px 0 0; cursor: default; flex-shrink: 0;
}
.ec-compose-title { font-size: 0.84rem; font-weight: 600; color: var(--nova-text); }
.ec-compose-close {
  background: none; border: none; color: var(--nova-text-muted); cursor: pointer;
  font-size: 1.1rem; padding: 0 4px; transition: color var(--transition-fast);
}
.ec-compose-close:hover { color: var(--nova-text); }
.ec-compose-minimize {
  background: none; border: none; color: var(--nova-text-muted); cursor: pointer;
  font-size: 1rem; padding: 0 4px; transition: color var(--transition-fast);
}
.ec-compose-minimize:hover { color: var(--nova-text); }
.ec-compose-window.is-minimized .ec-compose-fields,
.ec-compose-window.is-minimized .ec-compose-toolbar,
.ec-compose-window.is-minimized .ec-compose-editor,
.ec-compose-window.is-minimized .ec-compose-footer { display: none; }
.ec-compose-window.is-minimized .ec-compose-header { cursor: pointer; }

.ec-compose-fields { padding: 10px 16px 0; flex-shrink: 0; }
.ec-compose-field {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px solid var(--nova-border-light);
}
.ec-compose-field-label { font-size: 0.78rem; color: var(--nova-text-dim); min-width: 40px; }
.ec-compose-field-input {
  flex: 1; padding: 4px 0; background: transparent; border: none;
  color: var(--nova-text); font-size: 0.82rem; outline: none;
}
.ec-compose-field-input::placeholder { color: var(--nova-text-dim); }

.ec-compose-account-select {
  padding: 3px 8px; background: var(--nova-bg); border: 1px solid var(--nova-border);
  border-radius: 4px; color: var(--nova-text-muted); font-size: 0.72rem;
  outline: none; cursor: pointer;
}

.ec-compose-toolbar {
  display: flex; gap: 4px; padding: 6px 16px;
  border-bottom: 1px solid var(--nova-border-light); flex-shrink: 0;
}
.ec-compose-tool {
  padding: 3px 8px; background: transparent; border: 1px solid transparent;
  border-radius: 4px; color: var(--nova-text-dim); cursor: pointer;
  font-size: 0.78rem; transition: all var(--transition-fast);
}
.ec-compose-tool:hover { background: var(--nova-bg-hover); color: var(--nova-text); border-color: var(--nova-border); }

.ec-compose-editor {
  flex: 1; padding: 12px 16px; min-height: 300px;
  overflow-y: auto; font-size: 0.84rem; line-height: 1.6;
  color: var(--nova-text); outline: none;
}

.ec-compose-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--nova-border); flex-shrink: 0;
}

/* Contact autocomplete */
.ec-contact-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 600; max-height: 200px; overflow-y: auto;
}
.ec-contact-option {
  padding: 6px 12px; cursor: pointer; font-size: 0.8rem; color: var(--nova-text);
  transition: background var(--transition-fast);
}
.ec-contact-option:hover { background: var(--nova-bg-hover); }
.ec-contact-option-email { font-size: 0.72rem; color: var(--nova-text-dim); margin-left: 6px; }

.ec-contact-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin: 2px; background: var(--nova-bg-surface);
  border: 1px solid var(--nova-border); border-radius: 12px;
  font-size: 0.74rem; color: var(--nova-text);
}
.ec-contact-chip-remove {
  cursor: pointer; color: var(--nova-text-dim); font-size: 0.8rem;
  margin-left: 2px; transition: color var(--transition-fast);
}
.ec-contact-chip-remove:hover { color: var(--nova-red); }

/* ── Keyboard shortcuts overlay ────────────────────────────────────────── */
.ec-shortcuts-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
}
.ec-shortcuts-modal {
  background: var(--nova-bg-raised); border: 1px solid var(--nova-border);
  border-radius: 12px; padding: 24px; max-width: 520px; width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.ec-shortcuts-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ec-shortcuts-header h3 { font-size: 1rem; color: var(--nova-text); }
.ec-shortcuts-close {
  background: none; border: none; color: var(--nova-text-muted);
  cursor: pointer; font-size: 1.3rem;
}
.ec-shortcuts-body { display: flex; gap: 32px; }
.ec-shortcuts-col { flex: 1; }
.ec-shortcuts-col h4 { font-size: 0.82rem; color: var(--nova-text); margin-bottom: 8px; }
.ec-shortcut {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; font-size: 0.8rem; color: var(--nova-text-muted);
}
.ec-shortcut kbd {
  padding: 1px 6px; background: var(--nova-bg); border: 1px solid var(--nova-border);
  border-radius: 3px; font-size: 0.72rem; color: var(--nova-text);
  min-width: 22px; text-align: center;
}
.ec-shortcut span { flex: 1; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.ec-toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
}
.ec-toast {
  padding: 8px 16px; border-radius: 6px; font-size: 0.8rem;
  color: #fff; animation: ec-slide-up 0.2s ease;
}
.ec-toast-success { background: var(--nova-green); }
.ec-toast-error { background: var(--nova-red); }
.ec-toast-info { background: var(--nova-blue); }

/* ── Mobile responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ec-body { grid-template-columns: 1fr; }
  .ec-folders { display: none; }
  .ec-list-panel { border-right: none; }
  .ec-reading-pane {
    position: fixed; inset: 0; z-index: 200;
    background: var(--nova-bg); display: none;
  }
  .ec-reading-pane.is-mobile-open { display: flex; }
  .ec-reading-pane .ec-mobile-back {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px; background: var(--nova-bg-raised);
    border-bottom: 1px solid var(--nova-border);
    cursor: pointer; font-size: 0.82rem; color: var(--nova-accent);
  }
  .ec-compose-window { width: 100%; left: 0; right: 0; transform: none; max-width: 100%; }
  .ec-shortcuts-body { flex-direction: column; gap: 16px; }
}
@media (min-width: 961px) {
  .ec-body { grid-template-columns: 160px 680px 1fr; }
  .ec-mobile-back { display: none !important; }
  .ec-reading-pane { display: flex !important; }
}
@media (max-width: 640px) {
  .ec-accounts-tabs { gap: 2px; }
  .ec-account-tab { padding: 4px 8px; font-size: 0.72rem; }
  .ec-account-label { display: none; }
}


/* ── Bio Vector Light Typography ─────────────────────────────────────────── */
.nova-content h1,
.nova-content h2,
.nova-content h3,
.nova-sidebar-section-title,
.nova-topbar-title {
  color: #0a7860;
  /* No text-shadow — Bio Vector Light uses clean ink, not glow */
}

.nova-content h3 {
  letter-spacing: 0.07em;
}

/* Data labels — monospace uppercase tracking */
.nova-stat-label,
.nova-metric-label,
.nova-kicker,
.nova-status-label,
.ov-eyebrow,
.ov-zone-kicker,
.ov-widget-kicker {
  font-family: monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(10,120,96,0.55);
}

/* Metric values — solid ink, no glow */
.nova-stat-value strong,
.nova-metric strong,
.kc-stat-value {
  color: #0a7860;
  font-family: monospace;
}

/* ── Shared utility classes ──────────────────────────────────────────────── */

/* Flex */
.nova-flex         { display: flex; }
.nova-flex-center  { display: flex; align-items: center; }
.nova-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nova-flex-end     { display: flex; justify-content: flex-end; }
.nova-flex-wrap    { flex-wrap: wrap; }
.nova-ml-auto      { margin-left: auto; }

/* Gap */
.nova-gap-1 { gap: 4px; }
.nova-gap-2 { gap: 6px; }
.nova-gap-3 { gap: 8px; }
.nova-gap-4 { gap: 10px; }
.nova-gap-5 { gap: 12px; }

/* Display / text */
.nova-hidden   { display: none; }
.nova-nowrap   { white-space: nowrap; }
.nova-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Colour */
.nova-text-warning { color: var(--nova-amber, #f0a020); }

/* Button — danger variant */
.nova-btn-danger { color: var(--nova-red, #ef4444); border-color: var(--nova-red, #ef4444); }

/* Content flush (removes nova-content padding for full-bleed pages) */
.nova-content--flush { padding: 0 !important; overflow: hidden !important; }

/* Grid modifiers */
.nova-grid--flush      { gap: 0; }
.nova-stat-card--flush { margin: 0; border-radius: 0; }

/* Chart containers */
.nova-chart-wrap     { position: relative; }
.nova-chart-wrap--sm { height: 200px; }
.nova-chart-wrap--md { height: 220px; }

/* Form helpers */
.nova-label-hint  { font-size: 0.75rem; color: var(--nova-text-muted, rgba(255,255,255,0.45)); }
.nova-color-input { height: 2.5rem; padding: 0.25rem; }

/* Agent view — reserve space for async content to prevent CLS */
.av-overview-row   { min-height: 120px; }
.av-map-container  { min-height: 480px; }
.av-timeline-container { min-height: 200px; }
.av-history-container  { min-height: 200px; }

/* Agent view — skeleton sizing */
.agents-skeleton-sm     { height: 120px; border-radius: 12px; }
.agents-map-skeleton    { height: 480px; border-radius: 0; }
.agents-skeleton-margin { margin: 20px; }
.agents-stop-badge      { margin-left: 4px; font-size: 0.65rem; }

/* Ghost ideas — stat skeleton */
.ghost-stat-skeleton { height: 52px; border-radius: 0; }

/* Ghost idea card animations */
.ghost-card-new {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ghost-card-visible {
  opacity: 1;
  transform: translateY(0);
}
.ghost-card-exiting {
  opacity: 0;
  transform: translateX(60px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   Agent Dashboard — Attempt Grouping
   ══════════════════════════════════════════════════════ */

/* Group card body — holds attempt rows when expanded */
.av-group-body {
  border-top: 1px solid var(--nova-border);
}

/* Individual attempt row within a group */
.av-attempt-row {
  border-top: 1px solid var(--nova-border);
}
.av-attempt-row:first-child {
  border-top: none;
}

/* Attempt row header — clickable to expand agents + logs */
.av-attempt-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.av-attempt-header:hover {
  background: rgba(255,255,255,0.02);
}

/* "Attempt N" label */
.av-attempt-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--nova-text-muted);
  min-width: 72px;
  flex-shrink: 0;
}

/* Inline timestamps within attempt row */
.av-attempt-timestamps {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

/* Attempt body — expanded content area for agents + logs */
.av-attempt-body {
  border-top: 1px solid var(--nova-border);
  background: rgba(0,0,0,0.02);
}

/* Chevron rotation when attempt row is expanded */
.av-attempt-row.is-expanded > .av-attempt-header .av-exec-chevron {
  transform: rotate(90deg);
}

/* Active attempt pulse indicator */
.av-attempt-row.is-active .av-attempt-label {
  color: #6c8aff;
}

/* Responsive: stack attempt row on mobile */
@media (max-width: 640px) {
  .av-attempt-header { flex-wrap: wrap; }
  .av-attempt-timestamps { flex-direction: column; gap: 4px; }
}