/* ── Toast ── */
.toast-enter { animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { border: 2px solid #374151; border-top-color: #6366f1; border-radius: 50%; width: 20px; height: 20px; animation: spin 0.6s linear infinite; display: inline-block; }

/* ── Tab styling ── */
.tab-active { border-bottom: 2px solid #6366f1; color: #e0e7ff; }
.modal-overlay { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
pre { white-space: pre-wrap; word-break: break-word; }

/* ── Document list ── */
.doc-card { transition: all 0.15s ease; }
.doc-card:hover { border-color: #374151; }
.doc-card.active { border-color: #6366f1; }

/* ── Outline sidebar ── */
.outline-item {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--writer-text-muted);
  transition: all 0.1s;
}
.outline-item:hover { color: var(--writer-text); background: var(--writer-selection); }

/* ── CmdK palette ── */
#cmdk-palette {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
#cmdk-input::placeholder { color: #6b7280; }
.cmdk-section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  padding: 8px 12px 4px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: #d1d5db;
}
.cmdk-item:hover,
.cmdk-item.is-selected {
  background: #1f2937;
  color: #f3f4f6;
}
.cmdk-item.disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Tag pills ── */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
  cursor: pointer;
  transition: all 0.15s;
}
.tag-pill:hover {
  background: rgba(99,102,241,0.25);
}

/* ── Scrollbar ── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Animations ── */
.fade-in { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }