/* Lebensorganisation — Cockpit v2
   15 English domains · scan-first card design · slim briefing
   Type: Geist + Geist Mono */

:root {
  --bg:        oklch(0.985 0.003 95);
  --surface:   oklch(1     0     0);
  --surface-2: oklch(0.975 0.004 95);
  --surface-3: oklch(0.955 0.006 95);
  --hairline:  oklch(0.910 0.005 95);
  --hairline-strong: oklch(0.855 0.006 95);
  --ink:       oklch(0.22  0.008 270);
  --ink-2:     oklch(0.42  0.008 270);
  --ink-3:     oklch(0.60  0.008 270);
  --ink-4:     oklch(0.76  0.005 270);

  --prio-0:  oklch(0.54 0.20 24);
  --prio-1:  oklch(0.68 0.17 58);
  --prio-2:  oklch(0.50 0.04 270);
  --prio-3:  oklch(0.72 0.02 270);

  /* 15 domain accents */
  --d-medical:    oklch(0.54 0.17 20);
  --d-admin:      oklch(0.50 0.13 252);
  --d-meals:      oklch(0.60 0.13 88);
  --d-pets:       oklch(0.62 0.14 55);
  --d-property:   oklch(0.54 0.12 185);
  --d-family:     oklch(0.55 0.14 320);
  --d-social:     oklch(0.52 0.13 290);
  --d-costs:      oklch(0.52 0.13 155);
  --d-career:     oklch(0.50 0.12 268);
  --d-rental:     oklch(0.54 0.10 225);
  --d-mobility:   oklch(0.62 0.15 45);
  --d-household:  oklch(0.62 0.11 78);
  --d-shopping:   oklch(0.55 0.13 200);
  --d-sport:      oklch(0.56 0.15 130);
  --d-travel:     oklch(0.53 0.14 215);

  --d-medical-tint:    oklch(0.965 0.028 20);
  --d-admin-tint:      oklch(0.965 0.022 252);
  --d-meals-tint:      oklch(0.970 0.022 88);
  --d-pets-tint:       oklch(0.970 0.024 55);
  --d-property-tint:   oklch(0.965 0.022 185);
  --d-family-tint:     oklch(0.965 0.024 320);
  --d-social-tint:     oklch(0.965 0.022 290);
  --d-costs-tint:      oklch(0.965 0.022 155);
  --d-career-tint:     oklch(0.965 0.020 268);
  --d-rental-tint:     oklch(0.965 0.018 225);
  --d-mobility-tint:   oklch(0.970 0.028 45);
  --d-household-tint:  oklch(0.970 0.020 78);
  --d-shopping-tint:   oklch(0.965 0.022 200);
  --d-sport-tint:      oklch(0.970 0.028 130);
  --d-travel-tint:     oklch(0.965 0.024 215);

  /* 5 "other" catch-all domains — desaturated tones per group */
  --d-life-other:           oklch(0.64 0.04 290);
  --d-life-other-tint:      oklch(0.974 0.010 290);
  --d-lifestyle-other:      oklch(0.64 0.04 150);
  --d-lifestyle-other-tint: oklch(0.974 0.010 150);
  --d-finance-other:        oklch(0.64 0.04 185);
  --d-finance-other-tint:   oklch(0.974 0.010 185);
  --d-health-other:         oklch(0.64 0.04 30);
  --d-health-other-tint:    oklch(0.974 0.010 30);
  --d-career-other:         oklch(0.64 0.04 268);
  --d-career-other-tint:    oklch(0.974 0.010 268);

  --radius: 8px;
  --shadow-card: 0 1px 0 var(--hairline), 0 1px 3px oklch(0.85 0.005 95 / 0.3);
  --shadow-pop: 0 12px 30px oklch(0.2 0.01 270 / 0.11), 0 2px 6px oklch(0.2 0.01 270 / 0.07);
}

[data-theme="dark"] {
  --bg:        oklch(0.165 0.008 270);
  --surface:   oklch(0.205 0.008 270);
  --surface-2: oklch(0.225 0.008 270);
  --surface-3: oklch(0.255 0.008 270);
  --hairline:  oklch(0.300 0.008 270);
  --hairline-strong: oklch(0.370 0.008 270);
  --ink:       oklch(0.960 0.005 95);
  --ink-2:     oklch(0.780 0.005 95);
  --ink-3:     oklch(0.580 0.008 270);
  --ink-4:     oklch(0.400 0.008 270);

  /* "other" domain tints — dark mode */
  --d-life-other-tint:      oklch(0.26 0.04 290);
  --d-lifestyle-other-tint: oklch(0.26 0.04 150);
  --d-finance-other-tint:   oklch(0.26 0.04 185);
  --d-health-other-tint:    oklch(0.26 0.04 30);
  --d-career-other-tint:    oklch(0.26 0.04 268);

  --d-medical-tint:    oklch(0.28 0.06 20);
  --d-admin-tint:      oklch(0.28 0.05 252);
  --d-meals-tint:      oklch(0.28 0.05 88);
  --d-pets-tint:       oklch(0.28 0.05 55);
  --d-property-tint:   oklch(0.28 0.05 185);
  --d-family-tint:     oklch(0.28 0.05 320);
  --d-social-tint:     oklch(0.28 0.05 290);
  --d-costs-tint:      oklch(0.28 0.05 155);
  --d-career-tint:     oklch(0.28 0.04 268);
  --d-rental-tint:     oklch(0.28 0.04 225);
  --d-mobility-tint:   oklch(0.28 0.06 45);
  --d-household-tint:  oklch(0.28 0.04 78);
  --d-shopping-tint:   oklch(0.28 0.05 200);
  --d-sport-tint:      oklch(0.28 0.06 130);
  --d-travel-tint:     oklch(0.28 0.05 215);

  --shadow-card: 0 1px 0 oklch(0.14 0.008 270), 0 1px 3px oklch(0.10 0.008 270 / 0.5);
  --shadow-pop: 0 12px 28px oklch(0.05 0.01 270 / 0.5), 0 2px 6px oklch(0.05 0.01 270 / 0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }

/* ── Layout ─────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--side-w, 220px) 4px 1fr var(--chat-w, 360px);
  height: 100vh;
  width: 100vw;
}
.app[data-chat-closed="true"] { grid-template-columns: var(--side-w, 220px) 4px 1fr 0; }

/* ── Sidebar resize handle ───────────────── */
.sidebar-resize-handle {
  grid-column: 2;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle[data-dragging="true"] {
  background: var(--hairline-strong);
}

/* ── Sidebar ─────────────────────────────── */
.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.brand-mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.brand-ver  { font-size: 10.5px; color: var(--ink-3); font-family: "Geist Mono", monospace; }

.nav-section { padding: 10px 6px 6px; flex-shrink: 0; }
.nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 4px 8px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12.5px; color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.nav-item:hover { background: var(--surface-3); color: var(--ink); }
.nav-item[data-active="true"] {
  background: var(--surface); color: var(--ink);
  font-weight: 500; box-shadow: var(--shadow-card);
}
.nav-count {
  margin-left: auto;
  font-family: "Geist Mono", monospace;
  font-size: 10.5px; color: var(--ink-4);
}
.nav-item[data-active="true"] .nav-count { color: var(--ink-3); }

/* Domain list — scrollable */
.domain-scroll {
  overflow-y: auto;
  flex: 1;
  padding: 0 6px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.domain-nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 8px 5px;
}
.d-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px; color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.d-item:hover { background: var(--surface-3); color: var(--ink); }
.d-item[data-active="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-card); }
.d-item[data-dim="true"] { opacity: 0.45; }
.d-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.d-num   { font-family: "Geist Mono", monospace; font-size: 9.5px; color: var(--ink-4); letter-spacing: 0.04em; flex-shrink: 0; margin-left: 4px; }
.d-count { font-family: "Geist Mono", monospace; font-size: 10.5px; color: var(--ink-4); flex-shrink: 0; margin-left: 2px; }

.sidebar-footer {
  border-top: 1px solid var(--hairline);
  padding: 10px 10px;
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--d-admin), var(--d-family));
  color: #fff; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
}
.user-name { font-size: 12.5px; font-weight: 500; }
.user-meta { font-size: 10.5px; color: var(--ink-3); }

/* ── Email Panel ─────────────────────────── */
.email-panel {
  flex-shrink: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-panel-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 2px 0 2px 2px;
}
.email-panel-hint {
  font-size: 11px; color: var(--ink-3); line-height: 1.4;
}
.email-panel-hint code {
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 3px;
}
.email-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  width: 100%;
}
.email-btn:hover:not(:disabled) {
  background: var(--hairline);
  color: var(--ink);
}
.email-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.email-spinner {
  width: 13px; height: 13px;
  border: 1.5px solid var(--ink-4);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.email-summary {
  font-size: 11px; color: var(--ink-3); line-height: 1.4;
  padding: 0 2px;
}
.email-error {
  font-size: 11px; color: var(--prio-0); line-height: 1.4;
  padding: 0 2px;
}
.email-summary-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 11px; color: var(--ink-3); line-height: 1.4;
  padding: 3px 4px; border-radius: 4px;
  cursor: pointer;
  background: none; border: none;
  width: 100%; text-align: left;
  transition: background .12s;
}
.email-summary-btn:hover { background: var(--surface-3); color: var(--ink-2); }
.email-summary-see {
  font-size: 10px; color: var(--ink-4);
  flex-shrink: 0;
}

/* ── Email Scan Modal ────────────────────── */
.escan-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: oklch(0.1 0.01 270 / 0.45);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.escan-box {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  width: 500px; max-width: 96vw;
  display: flex; flex-direction: column;
  max-height: 82vh;
  overflow: hidden;
}
.escan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.escan-title { font-size: 14px; font-weight: 600; }
/* Scanning spinner panel */
.escan-scanning {
  display: flex; align-items: center; gap: 14px;
  padding: 28px 22px;
  flex-shrink: 0;
}
/* Stats row */
.escan-stats {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px 6px;
  font-size: 12px; color: var(--ink-3);
  flex-shrink: 0;
}
.escan-dot { color: var(--ink-4); }
.escan-stat-green { color: oklch(0.55 0.16 145); font-weight: 600; }
/* Review hint */
.escan-review-hint {
  padding: 2px 18px 10px;
  font-size: 11.5px; color: var(--ink-3);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
/* Proposed action rows */
.escan-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
.escan-empty {
  padding: 20px 18px;
  font-size: 13px; color: var(--ink-3);
  text-align: center; line-height: 1.6;
}
.escan-action-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--hairline);
}
.escan-action-row:last-child { border-bottom: none; }
.escan-action-body { flex: 1; min-width: 0; }
.escan-action-text {
  font-size: 13px; color: var(--ink);
  line-height: 1.4; margin-bottom: 3px;
}
.escan-action-source {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.escan-action-del {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 4px; font-size: 11px;
  color: var(--ink-4); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  transition: background .1s, color .1s;
  margin-top: 1px;
}
.escan-action-del:hover { background: oklch(0.94 0.03 20); color: var(--prio-0); }
/* Details section (collapsible) */
.escan-details-wrap {
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
.escan-details-toggle {
  width: 100%; padding: 8px 18px;
  text-align: left; font-size: 11.5px; color: var(--ink-3);
  background: none; border: none; cursor: pointer;
}
.escan-details-toggle:hover { color: var(--ink-2); }
/* Per-email status rows (inside collapsible) */
.escan-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 18px;
  border-bottom: 1px solid var(--hairline);
}
.escan-row:last-child { border-bottom: none; }
.escan-folder {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; flex-shrink: 0;
  padding: 1px 5px; border-radius: 3px;
  background: var(--surface-2); color: var(--ink-3);
  width: 36px; text-align: center;
}
.escan-folder[data-folder="sent"] { background: oklch(0.97 0.01 240); color: oklch(0.45 0.08 240); }
[data-theme="dark"] .escan-folder[data-folder="sent"] { background: oklch(0.27 0.03 240); color: oklch(0.65 0.08 240); }
.escan-subject {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.escan-icon { flex-shrink: 0; width: 20px; text-align: center; font-size: 13px; font-weight: 700; }
.escan-action { color: oklch(0.55 0.16 145); }
.escan-none   { color: var(--ink-4); }
.escan-seen   { color: var(--hairline-strong); font-weight: 400; }
/* Done state */
.escan-done {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 32px 18px;
  text-align: center; flex-shrink: 0;
}
.escan-done-tick {
  font-size: 28px; color: oklch(0.55 0.16 145);
  line-height: 1;
}
/* Footer */
.escan-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center;
  flex-shrink: 0;
}
/* Minimised chip — fixed at bottom-centre */
.escan-chip {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  box-shadow: var(--shadow-pop);
  padding: 8px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; cursor: pointer;
  transition: box-shadow .15s;
}
.escan-chip:hover { box-shadow: var(--shadow-pop), 0 0 0 2px var(--hairline-strong); }
.escan-chip-expand { font-size: 10px; color: var(--ink-4); margin-left: 4px; }

/* ── Bulk selection ──────────────────────── */
.toolbar-bulk {
  display: flex; align-items: center;
  gap: 8px; padding: 8px 16px;
  background: oklch(0.97 0.01 240 / 0.6);
  border-bottom: 1px solid oklch(0.88 0.02 240);
  flex-shrink: 0;
}
[data-theme="dark"] .toolbar-bulk {
  background: oklch(0.235 0.02 240 / 0.6);
  border-bottom-color: oklch(0.32 0.02 240);
}
.bulk-select-all {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; cursor: pointer; user-select: none;
}
.bulk-checkbox {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .1s, border-color .1s;
}
.bulk-checkbox.checked {
  background: var(--ink); border-color: var(--ink);
}
.bulk-checkbox.checked::after {
  content: "✓"; font-size: 9px; color: var(--bg); font-weight: 700;
}
.bulk-checkbox.partial {
  background: var(--ink-3); border-color: var(--ink-3);
}
.bulk-checkbox.partial::after {
  content: "−"; font-size: 11px; color: var(--bg); font-weight: 700;
}
/* Checkbox on card */
.item-bulk-check {
  display: flex; align-items: center; padding: 0 10px 0 12px;
  flex-shrink: 0;
}
.item[data-done] .bulk-checkbox { opacity: 0.45; }

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

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.crumb { font-size: 12.5px; color: var(--ink-3); }
.crumb b { color: var(--ink); font-weight: 500; }
.crumb-sep { margin: 0 5px; color: var(--ink-4); }
.spacer { flex: 1; }
.search-bar {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  padding: 5px 9px;
  width: 280px;
  color: var(--ink-3); font-size: 12.5px;
}
.search-bar kbd {
  font-family: "Geist Mono", monospace; font-size: 10px;
  background: var(--surface-3); border-radius: 3px;
  padding: 1px 5px; color: var(--ink-3); margin-left: auto;
}
.icon-btn {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center; color: var(--ink-3);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }

/* Briefing — slim status bar */
.briefing {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  flex-shrink: 0;
}
.briefing-date {
  font-size: 12px; color: var(--ink-3);
  font-family: "Geist Mono", monospace;
  flex-shrink: 0;
}
.briefing-divider { width: 1px; height: 14px; background: var(--hairline-strong); flex-shrink: 0; }
.bstat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}
.bstat-num {
  font-family: "Geist Mono", monospace;
  font-weight: 600; font-size: 13px;
}
.bstat-num.critical { color: var(--prio-0); }
.bstat-num.warning  { color: var(--prio-1); }
.bstat-num.ok       { color: var(--d-costs); }
.bstat-label { color: var(--ink-3); }
.bstat-sep { color: var(--ink-4); font-size: 11px; }
.briefing-greet {
  margin-left: auto;
  font-size: 12px; color: var(--ink-3);
}
.briefing-greet b { color: var(--ink-2); font-weight: 500; }

/* Sort toolbar */
.toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.tabs {
  display: flex; align-items: center; gap: 1px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 7px; padding: 2px;
}
.tab {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px; color: var(--ink-3);
}
.tab[data-active="true"] {
  background: var(--surface); color: var(--ink);
  font-weight: 500; box-shadow: var(--shadow-card);
}
.toolbar-info { font-size: 12px; color: var(--ink-3); }
.toolbar-info b { color: var(--ink-2); font-weight: 500; }
.toolbar-right { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.btn-ghost {
  font-size: 12px; padding: 4px 9px;
  border-radius: 6px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }

/* ── Queue ─────────────────────────────── */
.queue {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 60px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px 5px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-4);
}
.group-head:first-child { padding-top: 4px; }
.group-head .gl { flex: 1; height: 1px; background: var(--hairline); }
.group-head .gc { font-family: "Geist Mono", monospace; color: var(--ink-4); }

/* ── Item card ─────────────────────────────── */
.item {
  display: flex; align-items: stretch;
  /* --card-bg is set per-card via inline style from taskColors() in JS.
     It's an explicit OKLCH color matching the stripe hue so the tint is
     always blue / orange / grey — never drifted by color-mix hue interpolation. */
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-bottom: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .1s ease, box-shadow .12s ease, background .15s ease;
}
.item:hover { border-color: var(--hairline-strong); }
.item[data-focused="true"] {
  border-color: color-mix(in oklch, var(--stripe-color, var(--ink-3)) 36%, var(--hairline));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--stripe-color, var(--ink-3)) 10%, transparent);
}

/* ── Left stripe: width scales with importance (via --stripe-w set per-card in JS) ── */
.item-stripe {
  width: var(--stripe-w, 3px);
  flex-shrink: 0;
  background: var(--stripe-color, var(--hairline-strong));
  transition: width .1s ease;
}

/* ── Done / cancelled tasks: dimmed title ── */
.item[data-importance]:has(.item-detail)  {}  /* noop — keep specificity consistent */
.item[data-done="true"] .item-title,
.item[data-importance][data-prio="3"] .item-title { color: var(--ink-2); font-weight: 400; }

/* Inner layout */
.item-inner {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

/* Collapsed row */
.item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px;
  min-height: 46px;
}
.item[data-expanded="true"] .item-row {
  padding-bottom: 9px;
}

.item-title {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item[data-expanded="true"] .item-title {
  white-space: normal; overflow: visible; text-overflow: unset;
}
/* importance=1 tasks get slightly softer title (low-stakes, no rush) */
.item[data-importance="1"] .item-title { color: var(--ink-2); font-weight: 400; }

.item-meta {
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
}

.item-domain {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
}

.item-dl {
  font-family: "Geist Mono", monospace;
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
}
.item-dl.overdue { color: var(--prio-0); font-weight: 600; }
.item-dl.soon    { color: var(--prio-1); font-weight: 500; }

/* Mode indicator dot */
.mode-pip {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.mode-pip[data-mode="approval"]   { background: var(--prio-1); box-shadow: 0 0 0 2px color-mix(in oklch, var(--prio-1) 20%, transparent); }
.mode-pip[data-mode="autonomous"] { background: var(--d-costs); }
.mode-pip[data-mode="waiting"]    { background: var(--ink-4); border: 1px solid var(--ink-3); }

/* ── Urgency bar — 4 stacked boxes, filled count = urgency level ─────────
   Color progression is independent of the stripe hue so the two signals
   (importance = tint/stripe, urgency = bar) never visually merge.
   ─────────────────────────────────────────────────────────────────────── */
.urgency-bar {
  display: flex; gap: 2px; align-items: center; flex-shrink: 0;
}
.urg-box {
  width: 4px; height: 11px; border-radius: 1.5px;
  background: var(--hairline-strong);
  transition: background .15s ease;
}
/* Filled boxes: neutral → amber → red as urgency increases */
.urgency-bar[data-level="1"] .urg-box[data-filled] { background: var(--ink-4); }
.urgency-bar[data-level="2"] .urg-box[data-filled] { background: var(--ink-3); }
.urgency-bar[data-level="3"] .urg-box[data-filled] { background: var(--prio-1); }
.urgency-bar[data-level="4"] .urg-box[data-filled] { background: var(--prio-0); }

/* Approve quick-action */
.item-approve {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px;
  background: var(--ink); color: var(--bg);
  border-radius: 5px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.item-approve:hover { opacity: 0.82; }

/* Expand toggle */
.item-chevron {
  width: 24px; height: 24px; border-radius: 5px;
  display: grid; place-items: center; color: var(--ink-4);
  flex-shrink: 0;
}
.item-chevron:hover { background: var(--surface-3); color: var(--ink-2); }
.item-chevron svg { transition: transform .15s ease; }
.item[data-expanded="true"] .item-chevron svg { transform: rotate(90deg); }

/* Expanded detail */
.item-detail {
  display: none;
  padding: 0 12px 12px 12px;
  border-top: 1px solid var(--hairline);
}
.item[data-expanded="true"] .item-detail { display: block; padding-top: 11px; }

.item-summary {
  font-size: 13px; color: var(--ink-2);
  line-height: 1.65; margin: 0 0 8px;
  text-wrap: pretty;
}
.item-source-line {
  font-family: "Geist Mono", monospace;
  font-size: 11px; color: var(--ink-3);
  margin-bottom: 12px;
  display: flex; gap: 10px; align-items: center;
}
.item-source-line .sep { color: var(--ink-4); }

/* Proposal grid */
.proposal {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 7px; padding: 10px 12px;
  margin-bottom: 10px;
}
.proposal-head {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.proposal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}
.prop-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px; padding: 9px 11px;
  cursor: pointer;
}
.prop-card:hover { border-color: var(--hairline-strong); }
.prop-card[data-selected="true"] {
  border-color: var(--stripe-color, var(--ink));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--stripe-color, var(--ink)) 15%, transparent);
}
.pc-tag  { font-size: 10px; color: var(--ink-3); font-family: "Geist Mono", monospace; margin-bottom: 3px; }
.pc-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.pc-meta  { font-size: 11px; color: var(--ink-3); margin-top: 5px; }

/* Rationale */
.rationale {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.55;
  margin-bottom: 10px;
}
.rationale-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); margin-top: 5px; flex-shrink: 0; }

/* Full action row */
.item-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 4px;
}

/* ── Domain reclassify button ───────────────────── */
.domain-reclassify-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 5px; border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.domain-reclassify-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--ink-3); }

/* ── Domain picker overlay ──────────────────────── */
.domain-picker-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: oklch(0.2 0.01 270 / 0.35);
  backdrop-filter: blur(1px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.domain-picker {
  width: min(420px, 92vw);
  max-height: 72vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.domain-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px; font-weight: 600; color: var(--ink);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.dp-group { padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.dp-group:last-child { border-bottom: none; }
.dp-group-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 4px 14px 3px;
}
.dp-option {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 14px;
  background: transparent; border: none; color: var(--ink-2);
  font-size: 12.5px; text-align: left; cursor: pointer;
}
.dp-option:hover { background: var(--surface-2); color: var(--ink); }
.dp-option[data-active="true"] {
  background: var(--surface-3); color: var(--ink); font-weight: 500;
}
.dp-label { flex: 1; }
.dp-num { font-family: "Geist Mono", monospace; font-size: 10px; color: var(--ink-4); }
.btn {
  font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface); color: var(--ink);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { opacity: 0.85; }
.btn.ghost { border-color: transparent; color: var(--ink-3); }
.btn.ghost:hover { color: var(--ink); background: var(--surface-3); }
.btn.danger { color: var(--prio-0); border-color: transparent; }
.btn.danger:hover { background: color-mix(in oklch, var(--prio-0) 8%, var(--surface)); }
.btn.danger-ghost { color: var(--prio-0); border-color: color-mix(in oklch, var(--prio-0) 30%, transparent); }
.btn.danger-ghost:hover { background: color-mix(in oklch, var(--prio-0) 8%, var(--surface)); border-color: var(--prio-0); }
.btn.small { padding: 3px 8px; font-size: 11px; }

/* ── Reschedule inline row ───────────────── */
.reschedule-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-top: 4px;
  background: var(--surface-2); border-radius: 7px;
  border: 1px solid var(--hairline);
}
.reschedule-row input[type="datetime-local"] {
  flex: 1; min-width: 0;
  font-size: 12px; font-family: var(--mono); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 5px; padding: 4px 8px;
}
.reschedule-row input[type="datetime-local"]:focus {
  outline: none; border-color: var(--ink-3);
}

/* ── Chat rail ─────────────────────────────── */
.chat {
  border-left: 1px solid var(--hairline);
  background: var(--surface);
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}
.app[data-chat-closed="true"] .chat { display: none; }

.chat-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.chat-toprow {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px;
}
.chat-title { font-size: 12px; font-weight: 500; color: var(--ink-3); }

.chat-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 8px; padding: 2px;
}
.chat-toggle button {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px; color: var(--ink-3); font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.chat-toggle button[data-active="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.chat-ctx {
  margin-top: 9px;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--ink-3); min-height: 18px;
}
.ctx-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  background: var(--ctx-tint, var(--surface-3));
  color: var(--ctx-color, var(--ink-2));
  border-radius: 999px; font-size: 10.5px; font-weight: 500;
}

.chat-stream {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.msg { max-width: 92%; }
.msg.user { margin-left: auto; }
.msg-bubble {
  padding: 8px 11px;
  border-radius: 11px; border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--ink);
  font-size: 12.5px; line-height: 1.55;
}
.msg.user .msg-bubble {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink); border-bottom-right-radius: 3px;
}
.msg.bot  .msg-bubble { border-bottom-left-radius: 3px; }
.msg-meta {
  font-family: "Geist Mono", monospace;
  font-size: 10px; color: var(--ink-4);
  margin: 3px 4px 0;
}

.suggestions {
  padding: 6px 14px 0;
  display: flex; flex-wrap: wrap; gap: 5px;
  flex-shrink: 0;
}
.suggestion {
  font-size: 11px; padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px; color: var(--ink-2);
}
.suggestion:hover { background: var(--surface-3); color: var(--ink); }

.composer {
  padding: 9px 12px 12px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
.composer-box {
  display: flex; align-items: flex-end; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 7px 7px 7px 11px;
}
.composer-box:focus-within {
  border-color: var(--hairline-strong);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ink) 5%, transparent);
}
.composer textarea {
  flex: 1; border: 0; outline: 0; resize: none;
  background: transparent; font-size: 12.5px; line-height: 1.45;
  min-height: 20px; max-height: 100px; padding: 2px 0;
}
.composer textarea::placeholder { color: var(--ink-3); }
.send-btn {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center; flex-shrink: 0;
}
.send-btn:disabled { background: var(--hairline-strong); cursor: not-allowed; }
.composer-hint {
  margin-top: 5px;
  font-size: 10px; color: var(--ink-4);
  display: flex; gap: 8px; font-family: "Geist Mono", monospace;
  align-items: center;
}
.composer-hint kbd {
  background: var(--surface-3); border-radius: 3px;
  padding: 1px 4px; color: var(--ink-3);
}
.composer-hint .chat-scope { margin-left: auto; }

/* Typing indicator */
.typing { display: inline-flex; gap: 3px; align-items: center; }
.typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3);
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink {
  0%, 80%, 100% { opacity: .2; }
  40%           { opacity: 1;  }
}

/* Toast */
.toast-wrap {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 5px;
  z-index: 300; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--bg);
  font-size: 12px; padding: 7px 12px;
  border-radius: 7px; box-shadow: var(--shadow-pop);
  animation: toast-in .16s ease-out;
  white-space: nowrap;
}
@keyframes toast-in {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ── Firing reminder banner ──────────────────────────────── */
.reminder-banners {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.reminder-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--card-bg, var(--surface));
  border-bottom: 1px solid color-mix(in oklch, var(--stripe-color, var(--prio-1)) 30%, var(--hairline));
  animation: banner-in .18s ease-out;
}
@keyframes banner-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.banner-bell {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
}
.banner-body {
  flex: 1;
  min-width: 0;
}
.banner-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-meta {
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.banner-dismiss {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--prio-1) 40%, var(--hairline));
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.banner-dismiss:hover {
  background: color-mix(in oklch, var(--prio-1) 8%, var(--surface));
}
.banner-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.banner-snooze {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Geist Mono", monospace;
}
.banner-snooze:hover { background: var(--surface-3); color: var(--ink); }
.banner-recur {
  font-family: "Geist Mono", monospace;
  font-size: 9.5px;
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* ── Recurrence badge on item cards ─────────────────── */
.recur-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: "Geist Mono", monospace;
  font-size: 9.5px;
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* ── ⌘K Search overlay ──────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 18vh;
  animation: overlay-in .12s ease-out;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.search-box {
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: search-box-in .14s ease-out;
}
@keyframes search-box-in {
  from { transform: translateY(-10px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
.search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.search-kbd {
  font-family: "Geist Mono", monospace;
  font-size: 10px; color: var(--ink-4);
  background: var(--surface-3); border: 1px solid var(--hairline-strong);
  border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 15px; color: var(--ink); font-family: "Geist", sans-serif;
}
.search-results {
  max-height: 360px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
.search-empty {
  padding: 24px; text-align: center;
  font-size: 13px; color: var(--ink-4);
}
.search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result[data-active="true"] {
  background: var(--surface-2);
}
.sr-status {
  font-family: "Geist Mono", monospace; font-size: 9.5px;
  color: var(--ink-4); background: var(--surface-3);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 1px 7px; flex-shrink: 0;
}
.sr-title { flex: 1; font-size: 13px; color: var(--ink); font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-domain { font-size: 11px; color: var(--ink-3); flex-shrink: 0; }

/* ── Extract tasks modal ────────────────────────────── */
.extract-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  animation: overlay-in .12s ease-out;
}
.extract-box {
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  animation: search-box-in .14s ease-out;
}
.extract-box h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.extract-box p  { font-size: 12px; color: var(--ink-3); margin: 0; }
.extract-textarea {
  width: 100%; min-height: 140px; resize: vertical;
  font-size: 12.5px; font-family: "Geist", sans-serif; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  border-radius: 7px; padding: 10px 12px; outline: none;
  box-sizing: border-box;
}
.extract-textarea:focus { border-color: var(--ink-3); }
.extract-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Push notification bell button ──────────────────── */
.push-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--hairline);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.push-bell:hover { background: var(--surface-3); color: var(--ink); }
.push-bell[data-active="true"] { color: var(--prio-1); border-color: color-mix(in oklch, var(--prio-1) 40%, var(--hairline)); }
.push-bell-dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--prio-1);
}

/* ── Reminder history ───────────────────────────────────── */
.history-pane {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 60px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.history-year {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 12px 0 6px;
}
.history-month {
  margin-left: 0;
  margin-bottom: 6px;
}
.history-month-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 6px 0 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.history-day-group {
  margin-bottom: 8px;
}
.history-day-label {
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  color: var(--ink-4);
  padding: 3px 0;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  margin-bottom: 4px;
}
.history-item-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.history-item-time {
  font-family: "Geist Mono", monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.history-empty {
  text-align: center;
  color: var(--ink-3);
  padding: 50px 20px;
  font-size: 13px;
}

/* Empty state */
.empty {
  text-align: center; color: var(--ink-3);
  padding: 50px 20px; font-size: 13px;
}

/* ── Floating email draft window (email_send) ─────────────────────────────── */
.draft-window-overlay {
  position: fixed; inset: 0; z-index: 320;
  background: oklch(0.2 0.01 270 / 0.38);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 9vh;
}
.draft-window {
  width: min(620px, 94vw);
  max-height: 82vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 0 16px 16px;
}
.draft-window-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.draft-rationale { font-size: 12px; color: var(--ink-3); margin: 4px 0 10px; line-height: 1.5; }
.draft-sensitive {
  font-size: 13px; color: var(--prio-0); background: oklch(0.54 0.20 24 / 0.08);
  border: 1px solid oklch(0.54 0.20 24 / 0.3); border-radius: 8px;
  padding: 12px 14px; margin: 12px 0; line-height: 1.55;
}
.draft-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.draft-field > span { font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; }
.draft-field input, .draft-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 7px; font-family: inherit; resize: vertical;
}
.draft-field input:focus, .draft-field textarea:focus {
  outline: none; border-color: var(--hairline-strong); background: var(--surface);
}
.draft-field .draft-to { color: var(--ink-2); background: var(--surface-3); cursor: default; }
.draft-window-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.draft-window-hint { margin-top: 8px; font-size: 10.5px; color: var(--ink-4); }

/* ── Auto-deadline badge ──────────────────────────────────────────────────── */
.dl-auto-badge {
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-4); background: var(--surface-3);
  border: 1px solid var(--hairline); border-radius: 4px;
  padding: 1px 4px; margin-left: 2px; text-transform: uppercase;
}

/* ── Chat: file upload chips + attach button ──────────────────────────────── */
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.file-chip {
  font-size: 11px; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--ink-2); cursor: pointer;
}
.file-chip:hover:not(:disabled) { border-color: var(--hairline-strong); color: var(--ink); }
.file-chip:disabled { opacity: 0.5; cursor: default; }
.attach-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: none; cursor: pointer;
  font-size: 15px; color: var(--ink-3); align-self: flex-end;
}
.attach-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.attach-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Calendar view (sidebar "Calendar") ───────────────────────────────────── */
.cal-pane { display: flex; flex-direction: column; }
.cal-range-btn {
  font-size: 11px; padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-3);
}
.cal-range-btn[data-active] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-card); }
.cal-agenda { padding: 10px 2px; display: flex; flex-direction: column; gap: 14px; }
.cal-day-head {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 0 5px; border-bottom: 1px solid var(--hairline); margin-bottom: 5px;
}
.cal-event {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 8px; border-radius: 7px;
}
.cal-event:hover { background: var(--surface-2); }
.cal-event-time { font-size: 11.5px; color: var(--ink-3); min-width: 64px; flex-shrink: 0; }
.cal-event-title { font-size: 13px; color: var(--ink); flex: 1; }
.cal-event-cal { font-size: 10.5px; color: var(--ink-4); background: var(--surface-3);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 7px; }
.cal-permission {
  margin: 16px 2px; padding: 16px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.cal-permission-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cal-permission-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

/* ── Settings view (sidebar "Settings") ───────────────────────────────────── */
.set-pane { display: flex; flex-direction: column; }
.set-grid { display: flex; flex-direction: column; gap: 12px; padding: 12px 2px; }
.set-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 14px 16px; box-shadow: var(--shadow-card);
}
.set-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.set-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hairline);
}
.set-badge[data-c="ok"]   { color: var(--d-costs, #2e7d52); background: oklch(0.56 0.15 150 / 0.12); border-color: oklch(0.56 0.15 150 / 0.35); }
.set-badge[data-c="warn"] { color: var(--prio-1); background: oklch(0.68 0.17 58 / 0.12); border-color: oklch(0.68 0.17 58 / 0.35); }
.set-badge[data-c="off"]  { color: var(--ink-4); background: var(--surface-3); }
.set-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.set-note { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: 6px; padding: 6px 9px; }
.set-ok { font-size: 13px; color: oklch(0.52 0.15 150); font-weight: 500; margin-top: 10px; }
.set-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.set-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.set-field > span { color: var(--ink-3); }
.set-mask { color: var(--ink-4); font-style: normal; font-family: var(--mono, monospace); font-size: 11px; }
.set-field input {
  padding: 7px 10px; font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 7px;
}
.set-field input:focus { outline: none; border-color: var(--hairline-strong); background: var(--surface); }
.set-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.set-msg { font-size: 11.5px; color: var(--ink-3); }
.set-footnote { font-size: 10.5px; color: var(--ink-4); padding: 6px 2px 16px; }