:root {
  --demo-glow: radial-gradient(circle at 12% 4%, rgba(255,255,255,0.5), transparent 45%), radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 50%);
}

body {
  background-image: var(--bg-gradient), var(--demo-glow);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  backdrop-filter: blur(10px);
}

.card {
  animation: demoFadeIn .28s ease;
}

@keyframes demoFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#industry_toggle {
  min-width: 132px;
}

#fab_panel {
  backdrop-filter: blur(12px);
}

canvas {
  width: 100%;
  display: block;
}

/* Compact dashboard charts so the first fold feels balanced */
body[data-page="dashboard"] #chart_bar,
body[data-page="dashboard"] #chart_line,
body[data-page="dashboard"] #chart_donut {
  height: 118px !important;
}

body[data-page="dashboard"] #status_mix_list {
  display: grid;
  gap: 8px;
}

body[data-page="dashboard"] #donut_legend {
  gap: 6px;
}

body[data-page="dashboard"] #chart_line_title,
body[data-page="dashboard"] #chart_bar_title,
body[data-page="dashboard"] #chart_donut_title,
body[data-page="dashboard"] #status_mix_title {
  margin-bottom: 2px;
}

.file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

.file-row + .file-row {
  margin-top: 8px;
}

.file-row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent) inset;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.file-drop {
  border: 1px dashed color-mix(in srgb, var(--primary) 32%, var(--border));
  border-radius: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--text);
}

.kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.kanban-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kanban-card {
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 10px;
  padding: 8px;
  font-size: 12px;
  background: color-mix(in srgb, var(--card) 98%, transparent);
}

.timeline {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
}

.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 4px;
}

.status-row {
  display: grid;
  gap: 6px;
}

.status-row + .status-row {
  margin-top: 10px;
}

.status-row .meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.progress {
  height: 8px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.card-head .segmented button {
  border-radius: 0;
}

.hint-card {
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
}

.people-card {
  padding: 14px;
}

.people-card .type {
  font-size: 11px;
  color: var(--muted);
}

.detail-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
}

.detail-panel h4 {
  margin: 6px 0;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.clickable-row.is-selected {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.clickable-card {
  cursor: pointer;
  border: 1px solid var(--border);
}

.clickable-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 56%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent) inset;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.feature-tile {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
}

.feature-tile h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.feature-tile p {
  margin: 0;
}

.board-hero-card {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 48%),
    radial-gradient(circle at 8% 16%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 46%),
    color-mix(in srgb, var(--card) 95%, transparent);
}

.board-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 12px;
}

.board-narrative,
.board-decision-pack {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.board-narrative-text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.board-panels {
  margin-top: 10px;
}

.board-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.board-signal-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--card) 95%, transparent);
}

.board-signal-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

.ai-ops-panel {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 55%),
    radial-gradient(circle at 12% 90%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 50%),
    color-mix(in srgb, var(--card) 94%, transparent);
}

.ai-ops-kpis {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ai-ops-kpis > div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
}

.ai-ops-kpis strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.nova-grid {
  display: grid;
  grid-template-columns: minmax(230px, 250px) minmax(0, 1fr) minmax(280px, 320px);
  gap: 18px;
  align-items: stretch;
}

.nova-panel {
  height: 100%;
}

.nova-session-item {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  padding: 10px;
  cursor: pointer;
}

.nova-session-item + .nova-session-item {
  margin-top: 8px;
}

.nova-session-item.active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent) inset;
}

.nova-thread {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  max-height: 520px;
  overflow: auto;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 46%),
    color-mix(in srgb, var(--card) 95%, transparent);
}

.nova-msg {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  animation: demoFadeIn .22s ease;
}

.nova-msg.user {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.nova-msg.ai {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.nova-msg.ai h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.nova-msg.ai p {
  margin: 0 0 8px;
}

.nova-msg.ai ul {
  margin: 0 0 10px 18px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.nova-msg.ai code {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  font-size: 12px;
}

.nova-hero {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 45%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%),
    color-mix(in srgb, var(--card) 96%, transparent);
}

.nova-focus-shell {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}

.compact-head .section-title {
  font-size: 14px;
}

.compact-head .muted.tiny {
  margin-top: 2px;
}

.nova-command-layout {
  display: grid;
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(250px, 290px);
  gap: 14px;
  align-items: stretch;
}

.nova-side-left,
.nova-side-right,
.nova-core {
  height: 100%;
}

.nova-core {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background:
    radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
    color-mix(in srgb, var(--card) 96%, transparent);
}

.nova-core-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.nova-core-head h1 {
  margin: 8px 0 6px;
  font-size: 24px;
  line-height: 1.15;
}

body[data-page="novaai"] .nova-thread {
  min-height: 56vh;
  max-height: 62vh;
}

body[data-page="novaai"] .nova-msg {
  font-size: 12.5px;
}

body[data-page="novaai"] #ai_quick_actions .pill {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.nova-composer {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.nova-composer input {
  width: 100%;
}

.nova-prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.nova-prompt-grid .pill {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.nova-msg.typing {
  border-style: dashed;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 70%, var(--text));
  opacity: 0.25;
  animation: typingPulse 1s ease-in-out infinite;
}

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

.typing-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes typingPulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.demo-banner {
  border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border));
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: color-mix(in srgb, #7a4b00 90%, var(--text));
}

.profile-map {
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 52%),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 45%),
    var(--card);
  padding: 10px;
}

.profile-map svg {
  width: 100%;
  height: 240px;
  display: block;
}

.profile-topbar {
  border-bottom: 1px solid var(--border);
}

.back-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

.back-cta:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
}

.profile-hero {
  border-left: 3px solid color-mix(in srgb, var(--primary) 58%, transparent);
}

.value-panel {
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
}

.value-reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.value-reason {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.map-shell {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 260px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.map-shell iframe {
  border: 0;
  width: 100%;
  min-height: 260px;
  display: block;
}

/* Keep all top-level app rows perfectly aligned */
.app-content main > section.dash-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 320px);
  gap: 18px;
  align-items: stretch;
}

.app-content main > section.dash-row > .card {
  width: auto !important;
  min-width: 0 !important;
  height: 100%;
}

/* Equalized metric tiles */
.dash-summary {
  align-items: stretch;
}

.dash-summary > .card {
  height: 100%;
}

/* Consistent card internals */
.card-head {
  align-items: flex-start;
  gap: 12px;
}

.kanban {
  align-items: stretch;
}

.kanban-col {
  height: 100%;
}

.timeline {
  gap: 10px;
}

/* Remove jitter from mixed content heights */
.stack {
  gap: 8px;
}

/* Data toolbars: keep search/filter/actions compact vs global .row defaults */
body[data-page="incidents"] .card-head > .row,
body[data-page="clients"] .card-head > .row,
body[data-page="people"] .card-head > .row,
body[data-page="records"] .card-head > .row,
body[data-page="dashboard"] .card-head > .row,
body[data-page="risk"] .card-head > .row {
  margin-bottom: 0;
  gap: 8px;
  align-items: center;
}

body[data-page="clients"] #client_search,
body[data-page="clients"] #client_filter,
body[data-page="people"] #people_search,
body[data-page="people"] #people_filter,
body[data-page="records"] #search_input,
body[data-page="records"] #status_filter,
body[data-page="dashboard"] #search_input,
body[data-page="dashboard"] #status_filter,
body[data-page="risk"] #risk_filter,
body[data-page="incidents"] #incident_search,
body[data-page="incidents"] #incident_filter {
  flex: 0 1 220px;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
}

body[data-page="clients"] #add_client,
body[data-page="people"] #add_person,
body[data-page="records"] #add_record,
body[data-page="risk"] #add_risk,
body[data-page="incidents"] #add_incident {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .app-topbar {
    display: none !important;
  }

  .app-content main > section.dash-row {
    grid-template-columns: 1fr;
  }

  .value-reasons {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .board-hero-grid,
  .board-panel-grid {
    grid-template-columns: 1fr;
  }

  .kanban {
    grid-template-columns: 1fr;
  }

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

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

  .nova-core {
    order: 1;
  }

  .nova-side-left {
    order: 2;
  }

  .nova-side-right {
    order: 3;
  }

  .nova-core-head {
    flex-direction: column;
  }

  body[data-page="novaai"] .nova-thread {
    min-height: 44vh;
    max-height: 52vh;
  }

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

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

  body[data-page="incidents"] .card-head > .row,
  body[data-page="clients"] .card-head > .row,
  body[data-page="people"] .card-head > .row,
  body[data-page="records"] .card-head > .row,
  body[data-page="dashboard"] .card-head > .row,
  body[data-page="risk"] .card-head > .row {
    width: 100%;
  }

  body[data-page="clients"] #client_search,
  body[data-page="clients"] #client_filter,
  body[data-page="people"] #people_search,
  body[data-page="people"] #people_filter,
  body[data-page="records"] #search_input,
  body[data-page="records"] #status_filter,
  body[data-page="dashboard"] #search_input,
  body[data-page="dashboard"] #status_filter,
  body[data-page="risk"] #risk_filter,
  body[data-page="incidents"] #incident_search,
  body[data-page="incidents"] #incident_filter {
    flex: 1 1 100%;
    width: 100%;
  }

  body[data-page="clients"] #add_client,
  body[data-page="people"] #add_person,
  body[data-page="records"] #add_record,
  body[data-page="risk"] #add_risk,
  body[data-page="incidents"] #add_incident {
    flex: 1 1 100%;
    width: 100%;
  }

  #fab_panel {
    right: 16px;
    left: 16px;
    min-width: auto;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 14px;
  }

  .app-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .card {
    border-radius: 12px;
  }

  .card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .file-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .file-drop {
    padding: 10px;
  }

  body[data-page="clients"] #client_search,
  body[data-page="clients"] #client_filter,
  body[data-page="people"] #people_search,
  body[data-page="people"] #people_filter,
  body[data-page="records"] #search_input,
  body[data-page="records"] #status_filter,
  body[data-page="dashboard"] #search_input,
  body[data-page="dashboard"] #status_filter,
  body[data-page="risk"] #risk_filter,
  body[data-page="incidents"] #incident_search,
  body[data-page="incidents"] #incident_filter {
    padding: 10px 12px;
    font-size: 14px;
  }

  body[data-page="clients"] #add_client,
  body[data-page="people"] #add_person,
  body[data-page="records"] #add_record,
  body[data-page="risk"] #add_risk,
  body[data-page="incidents"] #add_incident {
    padding: 10px 12px;
    font-size: 13px;
  }

  body[data-page="novaai"] .nova-core-head h1 {
    font-size: 20px;
  }

  body[data-page="novaai"] .nova-thread {
    min-height: 54vh;
    max-height: 60vh;
    padding: 10px;
  }

  body[data-page="novaai"] .nova-msg {
    padding: 8px;
    font-size: 12px;
  }

  #ai_quick_actions .pill,
  #ai_session_list .nova-session-item {
    width: 100%;
  }

}