/* ── Palette Definitions ────────────────────────────────────────────────────── */
:root, [data-palette="default"] {
  --bg: #f4f4f5; --surface: #ffffff; --surface2: #fafafa;
  --border: #e4e4e7; --text: #18181b; --text-2: #52525b; --text-3: #a1a1aa;
  --accent: #2563eb; --accent-h: #1d4ed8; --accent-fg: #ffffff;
  --tag-bg: rgba(37,99,235,0.09); --tag-text: #1e40af;
  --edited-bg: rgba(217,119,6,0.09); --edited-text: #92400e;
  --ai-bg: rgba(37,99,235,0.05); --ai-border: rgba(37,99,235,0.18);
  --success-bg: rgba(22,163,74,0.1); --success-text: #166534;
  --error-bg: rgba(220,38,38,0.1); --error-text: #991b1b;
}
[data-palette="ocean"] {
  --bg: #f0f9ff; --surface: #ffffff; --surface2: #f8fbff;
  --border: #bae6fd; --text: #0c4a6e; --text-2: #0369a1; --text-3: #7dd3fc;
  --accent: #0284c7; --accent-h: #0369a1; --accent-fg: #ffffff;
  --tag-bg: rgba(2,132,199,0.1); --tag-text: #0369a1;
  --edited-bg: rgba(217,119,6,0.09); --edited-text: #92400e;
  --ai-bg: rgba(2,132,199,0.05); --ai-border: rgba(2,132,199,0.18);
  --success-bg: rgba(22,163,74,0.1); --success-text: #166534;
  --error-bg: rgba(220,38,38,0.1); --error-text: #991b1b;
}
[data-palette="forest"] {
  --bg: #f0fdf4; --surface: #ffffff; --surface2: #f7fdf9;
  --border: #bbf7d0; --text: #14532d; --text-2: #166534; --text-3: #86efac;
  --accent: #16a34a; --accent-h: #15803d; --accent-fg: #ffffff;
  --tag-bg: rgba(22,163,74,0.1); --tag-text: #15803d;
  --edited-bg: rgba(217,119,6,0.09); --edited-text: #92400e;
  --ai-bg: rgba(22,163,74,0.05); --ai-border: rgba(22,163,74,0.18);
  --success-bg: rgba(22,163,74,0.1); --success-text: #166534;
  --error-bg: rgba(220,38,38,0.1); --error-text: #991b1b;
}
[data-palette="sunset"] {
  --bg: #fff7ed; --surface: #ffffff; --surface2: #fffbf5;
  --border: #fed7aa; --text: #431407; --text-2: #9a3412; --text-3: #fdba74;
  --accent: #ea580c; --accent-h: #c2410c; --accent-fg: #ffffff;
  --tag-bg: rgba(234,88,12,0.1); --tag-text: #c2410c;
  --edited-bg: rgba(217,119,6,0.09); --edited-text: #92400e;
  --ai-bg: rgba(234,88,12,0.05); --ai-border: rgba(234,88,12,0.18);
  --success-bg: rgba(22,163,74,0.1); --success-text: #166534;
  --error-bg: rgba(220,38,38,0.1); --error-text: #991b1b;
}
[data-palette="lavender"] {
  --bg: #faf5ff; --surface: #ffffff; --surface2: #fdf9ff;
  --border: #e9d5ff; --text: #2e1065; --text-2: #5b21b6; --text-3: #c4b5fd;
  --accent: #7c3aed; --accent-h: #6d28d9; --accent-fg: #ffffff;
  --tag-bg: rgba(124,58,237,0.1); --tag-text: #6d28d9;
  --edited-bg: rgba(217,119,6,0.09); --edited-text: #92400e;
  --ai-bg: rgba(124,58,237,0.05); --ai-border: rgba(124,58,237,0.18);
  --success-bg: rgba(22,163,74,0.1); --success-text: #166534;
  --error-bg: rgba(220,38,38,0.1); --error-text: #991b1b;
}
[data-palette="dark"] {
  --bg: #09090b; --surface: #18181b; --surface2: #27272a;
  --border: #3f3f46; --text: #fafafa; --text-2: #a1a1aa; --text-3: #52525b;
  --accent: #818cf8; --accent-h: #6366f1; --accent-fg: #ffffff;
  --tag-bg: rgba(129,140,248,0.12); --tag-text: #a5b4fc;
  --edited-bg: rgba(251,191,36,0.1); --edited-text: #fcd34d;
  --ai-bg: rgba(129,140,248,0.07); --ai-border: rgba(129,140,248,0.2);
  --success-bg: rgba(74,222,128,0.1); --success-text: #4ade80;
  --error-bg: rgba(248,113,113,0.1); --error-text: #f87171;
}

/* ── Color Utilities ─────────────────────────────────────────────────────────── */
.bg-app      { background-color: var(--bg); }
.bg-surface  { background-color: var(--surface); }
.bg-surface2 { background-color: var(--surface2); }
.text-primary   { color: var(--text); }
.text-secondary { color: var(--text-2); }
.text-muted     { color: var(--text-3); }
.border-base    { border-color: var(--border); }
.btn-accent     { background-color: var(--accent); color: var(--accent-fg); transition: background-color .15s; }
.btn-accent:hover { background-color: var(--accent-h); }
.text-accent    { color: var(--accent); }
.bg-tag         { background-color: var(--tag-bg); color: var(--tag-text); }
.bg-edited      { background-color: var(--edited-bg); color: var(--edited-text); }
.bg-ai-surface  { background-color: var(--ai-bg); border-color: var(--ai-border); }
.bg-success     { background-color: var(--success-bg); color: var(--success-text); }
.bg-error       { background-color: var(--error-bg); color: var(--error-text); }
.label-active   { background-color: var(--tag-bg) !important; color: var(--text-2) !important; font-weight: 500; }
.input-base {
  background-color: var(--surface2);
  border-color: var(--border);
  color: var(--text);
  transition: border-color .15s;
}
.input-base:focus { border-color: var(--accent); outline: none; }
.input-base::placeholder { color: var(--text-3); }

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: none; width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .6s linear infinite; flex-shrink: 0;
}
.htmx-indicator { display: none; }
.htmx-indicator.htmx-request { display: inline-flex; align-items: center; gap: .35rem; }
.htmx-indicator.htmx-request .spinner { display: inline-block; }

/* ── Note body clamp ─────────────────────────────────────────────────────────── */
.note-body-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

[x-cloak] { display: none !important; }

/* ── Timeline Feed ───────────────────────────────────────────────────────────── */
.timeline-feed::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 0;
  width: 1px;
  background-color: var(--border);
  z-index: 0;
}

.note-dot {
  border-color: var(--border);
  background-color: var(--surface);
}
.group:hover .note-dot {
  border-color: var(--accent);
  background-color: var(--accent);
}
.note-dot-active {
  border-color: var(--accent);
  background-color: var(--accent);
}

.note-discovered-border {
  padding-left: 0.5rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 2px;
}

.note-task-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 10px;
  font-weight: 500;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.note-actions {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}
.group:hover .note-actions {
  max-height: 2rem;
  margin-top: 0.25rem;
  opacity: 1;
}