/* Notion + Canva inspired interaction polish */
.top-bar {
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84));
}

[data-theme="dark"] .top-bar {
  background: linear-gradient(180deg, rgba(15,23,42,0.94), rgba(15,23,42,0.85));
}

.workspace-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-card-border);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--color-surface);
}

.workspace-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
}

.nav-section {
  border: 1px solid transparent;
  border-radius: 10px;
  padding-bottom: 4px;
}

.nav-section .nav-section-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-section .nav-section-title::after {
  content: '▾';
  font-size: 11px;
  opacity: 0.7;
}

.nav-section.is-collapsed .nav-item {
  display: none;
}

.nav-section.is-collapsed .nav-section-title::after {
  content: '▸';
}

.page.active {
  animation: pageIn 220ms ease;
}

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

.canvas-presets {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-card-border);
  padding: 8px 12px;
  background: var(--color-surface);
}

.canvas-preset-chip {
  border: 1px solid var(--color-card-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 10px;
}

.canvas-preset-chip:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}

@media (max-width: 960px) {
  .top-bar-right {
    gap: 6px;
  }

  .workspace-status {
    display: none;
  }
}