@zaclinley/dsh-mailharbor 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.7.2
+
+### Patch Changes
+
+- 2206fb9: Clear project actions and a project manager.
+
+  - The "加入项目" dialog is a two-mode choice: "加入已有项目" (no new project) or
+    "新建项目" (creates one); the primary button says which action it performs.
+  - A "项目" button in the mail toolbar opens a manager with rename, open folder
+    and delete. Delete removes the MailHarbor record and unlinks its tasks; the
+    project folder and DSH workspace stay on disk, as the dialog states.
+
 ## 0.7.1
 
 ### Patch Changes

package/lib/client.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/client/styles.css
-var styles_default = "/* MailHarbor panel + settings.\n   Tokens come from the DSH shell (dark by default); fallbacks match the\n   default dark theme so the panel also renders in a bare host page.\n   Component rules are all scoped under `.mailharbor` and the generic element\n   reset lives in `:where()` so it cannot outrank a component class. */\n\n.mailharbor {\n  --m-bg: var(--dsw-alias-bg-base, #151517);\n  --m-bg-1: var(--dsw-alias-bg-layer-1, #232324);\n  --m-bg-2: var(--dsw-alias-bg-layer-2, #2c2c2e);\n  --m-bg-3: var(--dsw-alias-bg-layer-3, #353638);\n  --m-line: var(--dsw-alias-border-l2, #ffffff1f);\n  --m-line-soft: var(--dsw-alias-border-l1, #ffffff0f);\n  --m-line-strong: var(--dsw-alias-border-l3, #ffffff29);\n  --m-text: var(--dsw-alias-label-primary, #f9fafb);\n  --m-text-2: var(--dsw-alias-label-secondary, #cfd3d6);\n  --m-text-3: var(--dsw-alias-label-tertiary, #adb2b8);\n  --m-caption: var(--dsw-alias-label-caption, #81858c);\n  --m-accent: #5686fe;\n  --m-accent-soft: rgba(86, 134, 254, 0.14);\n  --m-primary-bg: var(--dsw-alias-brand-primary, #f9fafb);\n  --m-primary-fg: var(--dsw-alias-label-primary-foreground, #0f1115);\n  --m-hover: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n  --m-danger: #f25a5a;\n  --m-ok: #3fbf7f;\n  --m-warn: var(--dsw-alias-state-warn-label, #dd8629);\n  --m-radius: 8px;\n  --m-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-size: 13px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n\n.mailharbor *,\n.mailharbor *::before,\n.mailharbor *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- base controls ---------- */\n\n.mailharbor :where(button) {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.mailharbor button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 30px;\n  padding: 0 12px;\n  border-radius: var(--m-radius);\n  border: 1px solid transparent;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  font-weight: 500;\n  white-space: nowrap;\n  transition:\n    background 120ms ease,\n    color 120ms ease,\n    border-color 120ms ease;\n}\n\n.mailharbor button:hover:not(:disabled) {\n  background: var(--m-hover);\n  color: var(--m-text);\n}\n\n.mailharbor button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n\n.mailharbor button.primary {\n  background: var(--m-primary-bg);\n  color: var(--m-primary-fg);\n  border-color: transparent;\n}\n\n.mailharbor button.primary:hover:not(:disabled) {\n  background: var(--m-primary-bg);\n  filter: brightness(0.94);\n  color: var(--m-primary-fg);\n}\n\n.mailharbor button.ghost {\n  border-color: var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor button.ghost:hover:not(:disabled) {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor button.subtle {\n  color: var(--m-text-3);\n  padding: 0 8px;\n}\n\n.mailharbor button.icon {\n  width: 30px;\n  padding: 0;\n}\n\n.mailharbor button.danger {\n  color: var(--m-danger);\n}\n\n.mailharbor input,\n.mailharbor select,\n.mailharbor textarea {\n  font: inherit;\n  color: var(--m-text);\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  padding: 0 10px;\n  height: 32px;\n  min-width: 0;\n}\n\n.mailharbor textarea {\n  height: auto;\n  padding: 8px 10px;\n  resize: vertical;\n  line-height: 1.6;\n}\n\n.mailharbor select {\n  padding-right: 26px;\n  appearance: none;\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--m-text-3) 50%),\n    linear-gradient(135deg, var(--m-text-3) 50%, transparent 50%);\n  background-position:\n    calc(100% - 15px) 14px,\n    calc(100% - 10px) 14px;\n  background-size:\n    5px 5px,\n    5px 5px;\n  background-repeat: no-repeat;\n}\n\n.mailharbor ::placeholder {\n  color: var(--m-caption);\n}\n\n.mailharbor input:focus-visible,\n.mailharbor select:focus-visible,\n.mailharbor textarea:focus-visible,\n.mailharbor button:focus-visible,\n.mailharbor [contenteditable='true']:focus-visible {\n  outline: 2px solid rgba(86, 134, 254, 0.55);\n  outline-offset: -1px;\n}\n\n.mailharbor .spacer {\n  flex: 1;\n}\n\n.mailharbor .muted {\n  color: var(--m-text-3);\n}\n\n.mailharbor .small {\n  font-size: 12px;\n}\n\n.mailharbor .badge {\n  display: inline-flex;\n  align-items: center;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 500;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n}\n\n.mailharbor .badge.ok {\n  background: rgba(63, 191, 127, 0.16);\n  color: var(--m-ok);\n}\n\n.mailharbor .badge.warn {\n  background: rgba(221, 134, 41, 0.16);\n  color: var(--m-warn);\n}\n\n.mailharbor .error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.1);\n  border-bottom: 1px solid rgba(242, 90, 90, 0.2);\n  font-size: 12.5px;\n}\n\n/* ---------- shell ---------- */\n\n.mailharbor-topbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n  flex: none;\n}\n\n.mailharbor-account {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  max-width: 220px;\n  padding: 4px 8px 4px 4px;\n  border-radius: 999px;\n  border: 1px solid transparent;\n  cursor: default;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-account .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.mailharbor-account select {\n  height: 26px;\n  background: transparent;\n  border-color: transparent;\n  font-weight: 500;\n}\n\n.mailharbor-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  position: relative;\n}\n\n.mailharbor button.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-list {\n  display: flex;\n  flex-direction: column;\n  width: 360px;\n  flex: none;\n  border-right: 1px solid var(--m-line-soft);\n  min-height: 0;\n}\n\n.mailharbor-reader {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (max-width: 1000px) {\n  .mailharbor-list {\n    width: 300px;\n  }\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='reader'] .mailharbor-list {\n  display: none;\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='list'] .mailharbor-reader {\n  display: none;\n}\n\n/* ---------- segmented control ---------- */\n\n.mailharbor-segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border-radius: 9px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-segment button {\n  height: 26px;\n  padding: 0 12px;\n  border-radius: 7px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-segment button:hover:not(.active) {\n  color: var(--m-text-2);\n  background: transparent;\n}\n\n.mailharbor-segment button.active {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n/* ---------- list ---------- */\n\n.mailharbor-filters {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-filters select {\n  width: 128px;\n  flex: none;\n  font-size: 12px;\n}\n\n.mailharbor-filters input[type='search'] {\n  flex: 1;\n  height: 30px;\n  font-size: 12.5px;\n}\n\n.mailharbor-rows {\n  flex: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.mailharbor-row {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  width: 100%;\n  padding: 10px 14px;\n  border: 0;\n  border-bottom: 1px solid var(--m-line-soft);\n  border-left: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n  user-select: none;\n}\n\n.mailharbor-row:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-row.selected {\n  background: var(--m-accent-soft);\n  border-left-color: var(--m-accent);\n}\n\n.mailharbor-row .line-1,\n.mailharbor-row .line-2 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  width: 100%;\n}\n\n.mailharbor-row .from {\n  font-weight: 600;\n  font-size: 12.5px;\n  color: var(--m-text-2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-row .date {\n  margin-left: auto;\n  color: var(--m-caption);\n  font-size: 11px;\n  flex: none;\n}\n\n.mailharbor-row .subject {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n.mailharbor-row .snippet {\n  color: var(--m-caption);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.mailharbor-row.unread .from,\n.mailharbor-row.unread .subject {\n  color: var(--m-text);\n}\n\n.mailharbor-row .dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--m-accent);\n  flex: none;\n}\n\n.mailharbor-row .paperclip {\n  color: var(--m-caption);\n  flex: none;\n  display: inline-flex;\n}\n\n.mailharbor-list-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  flex: none;\n}\n\n.mailharbor-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 48px 24px;\n  color: var(--m-text-3);\n  text-align: center;\n}\n\n.mailharbor-empty svg {\n  opacity: 0.5;\n}\n\n.mailharbor-empty .title {\n  color: var(--m-text-2);\n  font-size: 13px;\n  font-weight: 500;\n}\n\n/* ---------- reader ---------- */\n\n.mailharbor-reader-head {\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mailharbor-reader-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mailharbor-reader-title h2 {\n  margin: 0;\n  font-size: 17px;\n  line-height: 1.35;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  word-break: break-word;\n}\n\n.mailharbor-reader-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px 10px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-reader-meta .who {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--m-text-2);\n}\n\n.mailharbor-reader-meta .who strong {\n  color: var(--m-text);\n  font-weight: 600;\n}\n\n.mailharbor-reader-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mailharbor-reader-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 14px 18px 18px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-reader-body iframe {\n  flex: 1;\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mailharbor-reader-body pre {\n  flex: 1;\n  overflow: auto;\n  margin: 0;\n  padding: 20px 22px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n  color: #171a21;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-attachments {\n  padding: 10px 18px;\n  border-top: 1px solid var(--m-line-soft);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: none;\n  background: var(--m-bg);\n}\n\n.mailharbor-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  font-size: 12px;\n  text-decoration: none;\n  color: var(--m-text-2);\n  max-width: 260px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-attachment:hover {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor-attachment .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ---------- AI rail ---------- */\n\n.mailharbor-ai {\n  display: flex;\n  flex-direction: column;\n  width: 340px;\n  flex: none;\n  min-height: 0;\n  border-left: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n}\n\n.mailharbor-ai-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 46px;\n  padding: 0 8px 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-head strong {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mailharbor-ai-confirm {\n  display: inline-flex;\n  gap: 2px;\n}\n\n.mailharbor-ai-context {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 9px 14px 10px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-context strong {\n  font-size: 12.5px;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-ai-warn {\n  padding: 8px 14px;\n  color: var(--m-warn);\n  background: rgba(221, 134, 41, 0.1);\n  font-size: 12px;\n  flex: none;\n}\n\n.mailharbor-ai-quick {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-quick button {\n  flex: 1;\n  padding: 0 6px;\n}\n\n.mailharbor-ai-list {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px 14px;\n}\n\n.mailharbor-ai-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 30px 12px;\n  text-align: center;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-empty .title {\n  color: var(--m-text-2);\n  font-weight: 500;\n  font-size: 12.5px;\n}\n\n.mailharbor-ai-card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n  overflow: hidden;\n}\n\n.mailharbor-ai-card.generating {\n  opacity: 0.7;\n}\n\n.mailharbor-ai-card-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 8px 7px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-card-head > span:first-child {\n  color: var(--m-text-2);\n  font-weight: 600;\n}\n\n.mailharbor-ai-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 10px 12px;\n}\n\n.mailharbor-ai-summary section h4 {\n  margin: 0 0 3px;\n  font-size: 11px;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mailharbor-ai-summary section p {\n  margin: 0;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-text {\n  padding: 10px 12px;\n  max-height: 320px;\n  overflow: auto;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-card-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n  padding: 6px 8px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-ai-card-actions button {\n  height: 26px;\n  padding: 0 8px;\n  font-size: 11.5px;\n}\n\n.mailharbor-ai-ask {\n  display: flex;\n  gap: 6px;\n  padding: 10px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-ask input {\n  flex: 1;\n  height: 32px;\n}\n\n.mailharbor-ai-error {\n  color: var(--m-danger);\n  font-size: 12px;\n  padding: 0 2px;\n}\n\n@media (max-width: 1280px) {\n  .mailharbor-ai {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: min(420px, 94%);\n    z-index: 6;\n    border-left: 1px solid var(--m-line);\n    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);\n  }\n}\n\n/* ---------- AI summary ---------- */\n\n.mailharbor-divider {\n  width: 1px;\n  height: 18px;\n  margin: 0 4px;\n  background: var(--m-line);\n}\n\n.mailharbor-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mailharbor-summary section h4 {\n  margin: 0 0 6px;\n  font-size: 11.5px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-summary section p {\n  margin: 0;\n  white-space: pre-wrap;\n  line-height: 1.75;\n  color: var(--m-text);\n}\n\n/* ---------- modal / forms ---------- */\n\n.mailharbor-portal {\n  position: fixed;\n  inset: 0;\n  z-index: 80;\n  height: auto;\n  background: transparent;\n  pointer-events: none;\n}\n\n.mailharbor-portal .mailharbor-modal-mask {\n  pointer-events: auto;\n}\n\n.mailharbor-modal-mask {\n  position: fixed;\n  inset: 0;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(2px);\n}\n\n.mailharbor-modal {\n  display: flex;\n  flex-direction: column;\n  width: min(720px, 100%);\n  max-height: 86vh;\n  overflow: hidden;\n  border: 1px solid var(--m-line);\n  border-radius: 14px;\n  background: var(--m-bg-1);\n  color: var(--m-text);\n  box-shadow: var(--m-shadow);\n}\n\n.mailharbor-modal > header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 52px;\n  padding: 0 14px 0 18px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.mailharbor-modal .content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 18px;\n  overflow: auto;\n}\n\n.mailharbor-modal > footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.mailharbor-field > input,\n.mailharbor-field > select,\n.mailharbor-field > textarea,\n.mailharbor-card > textarea {\n  width: 100%;\n  min-width: 0;\n}\n\n.mailharbor-field > label {\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 10px;\n  min-width: 0;\n}\n\n.mailharbor-grid.three {\n  grid-template-columns: minmax(0, 2fr) minmax(72px, 90px) auto;\n  align-items: end;\n  min-width: 0;\n}\n\n.mailharbor-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.mailharbor-toggle input[type='checkbox'] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--m-accent);\n}\n\n/* ---------- composer ---------- */\n\n.mailharbor-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-wrap: wrap;\n  padding: 6px;\n  border: 1px solid var(--m-line-soft);\n  border-bottom: 0;\n  border-radius: 10px 10px 0 0;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-toolbar button {\n  height: 26px;\n  padding: 0 9px;\n  border-radius: 6px;\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-toolbar button:hover {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n.mailharbor-editor {\n  min-height: 240px;\n  max-height: 44vh;\n  overflow: auto;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 0 0 10px 10px;\n  background: #fff;\n  color: #171a21;\n  outline: none;\n  font-size: 13.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-editor:empty::before {\n  content: attr(data-placeholder);\n  color: #9aa0ab;\n}\n\n/* ---------- inline confirm ---------- */\n\n.mailharbor-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  border: 1px solid var(--m-line);\n  background: var(--m-bg-2);\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n/* ---------- selection / extraction ---------- */\n\n.mailharbor-selectbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  margin: 0 12px 8px;\n  border: 1px solid var(--m-accent-soft);\n  border-radius: 9px;\n  background: var(--m-accent-soft);\n}\n\n.mailharbor-selectbar select {\n  height: 28px;\n  max-width: 200px;\n}\n\n.mailharbor-row.selectable input[type='checkbox'] {\n  width: 15px;\n  height: 15px;\n  flex: none;\n  accent-color: var(--m-accent);\n}\n\n.mailharbor-extract-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 9px 10px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 9px;\n  background: var(--m-bg-1);\n  cursor: pointer;\n}\n\n.mailharbor-extract-row input {\n  margin-top: 2px;\n  accent-color: var(--m-accent);\n}\n\n.mailharbor-extract-row > span {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 6px 12px;\n  margin: 0;\n  font-size: 12.5px;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n\n/* ---------- tasks panel ---------- */\n\n.mailharbor .chip {\n  height: 26px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: 999px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor .chip.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n.tasks-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 18px 20px 48px;\n  width: 100%;\n  max-width: 940px;\n  margin: 0 auto;\n}\n\n.tasks-overview {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));\n  gap: 12px;\n}\n\n.tasks-progress,\n.tasks-project {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  padding: 12px 14px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n  min-width: 0;\n}\n\n.tasks-progress-head,\n.tasks-project-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  min-width: 0;\n}\n\n.tasks-project-head .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12.5px;\n  font-weight: 500;\n}\n\n.tasks-bar {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  overflow: hidden;\n}\n\n.tasks-bar span {\n  display: block;\n  height: 100%;\n  border-radius: 999px;\n  background: var(--m-accent);\n  transition: width 200ms ease;\n}\n\n.tasks-bar.small {\n  height: 4px;\n}\n\n.tasks-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.tasks-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.tasks-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n}\n\n.tasks-row input[type='checkbox'] {\n  width: 16px;\n  height: 16px;\n  flex: none;\n  accent-color: var(--m-accent);\n}\n\n.tasks-row .tasks-title {\n  flex: 1;\n  min-width: 0;\n  height: auto;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  text-align: left;\n  border: 0;\n  background: transparent;\n}\n\n.tasks-row .tasks-title:hover {\n  background: transparent;\n}\n\n.tasks-row .tasks-title > span:first-child {\n  font-size: 13px;\n  color: var(--m-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n.tasks-row.done .tasks-title > span:first-child {\n  color: var(--m-text-3);\n  text-decoration: line-through;\n}\n\n.tasks-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.tasks-meta .due.overdue {\n  color: var(--m-danger);\n}\n\n.tasks-list-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* ---------- markdown ---------- */\n\n.mailharbor-markdown {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  font-size: 12.5px;\n  line-height: 1.68;\n  overflow-wrap: anywhere;\n}\n\n.mailharbor-markdown > *:first-child {\n  margin-top: 0;\n}\n\n.mailharbor-markdown > *:last-child {\n  margin-bottom: 0;\n}\n\n.mailharbor-markdown p {\n  margin: 0;\n  white-space: pre-wrap;\n}\n\n.mailharbor-markdown h1,\n.mailharbor-markdown h2,\n.mailharbor-markdown h3,\n.mailharbor-markdown h4,\n.mailharbor-markdown h5,\n.mailharbor-markdown h6 {\n  margin: 4px 0 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--m-text);\n}\n\n.mailharbor-markdown ul,\n.mailharbor-markdown ol {\n  margin: 0;\n  padding-left: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.mailharbor-markdown li::marker {\n  color: var(--m-text-3);\n}\n\n.mailharbor-markdown a {\n  color: var(--m-accent);\n  text-decoration: none;\n}\n\n.mailharbor-markdown a:hover {\n  text-decoration: underline;\n}\n\n.mailharbor-markdown code {\n  padding: 1px 4px;\n  border-radius: 4px;\n  background: var(--m-bg-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11.5px;\n}\n\n.mailharbor-markdown pre {\n  margin: 0;\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  overflow: auto;\n}\n\n.mailharbor-markdown pre code {\n  padding: 0;\n  background: transparent;\n}\n\n.mailharbor-markdown blockquote {\n  margin: 0;\n  padding-left: 10px;\n  border-left: 2px solid var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor-markdown hr {\n  width: 100%;\n  margin: 4px 0;\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n/* ---------- composer AI ---------- */\n\n.mailharbor-toolbar button.ai {\n  color: var(--m-accent);\n}\n\n.mailharbor-compose-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.mailharbor-versions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  padding-top: 8px;\n}\n\n.mailharbor-versions .chip {\n  height: 22px;\n  padding: 0 8px;\n  border: 1px solid var(--m-line);\n  border-radius: 999px;\n  color: var(--m-text-3);\n  font-size: 11px;\n}\n\n.mailharbor-versions .chip.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n/* ---------- settings ---------- */\n\n.mailharbor.mailharbor-settings-page {\n  height: auto;\n  min-height: 100%;\n  overflow: visible;\n}\n\n.mailharbor-settings {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  padding: 18px 20px 48px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  overflow-x: hidden;\n}\n\n.mailharbor-settings > * {\n  min-width: 0;\n}\n\n.mailharbor-settings h2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.mailharbor-settings h3 {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.mailharbor-account-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.mailharbor-account-row .meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mailharbor-account-row .meta strong {\n  font-weight: 600;\n}\n\n.mailharbor-account-row .meta span {\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor .avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  border-radius: 50%;\n  background: var(--m-accent-soft);\n  color: var(--m-accent);\n  font-weight: 600;\n}\n\n.mailharbor-log {\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  color: var(--m-text-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.6;\n  max-height: 220px;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: minmax(120px, 170px) 1fr;\n  gap: 6px 14px;\n  font-size: 12px;\n  margin: 0;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  color: var(--m-text-2);\n  word-break: break-all;\n}\n\n.mailharbor hr {\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n  margin: 2px 0;\n}\n\n/* ---------- conversation rows ---------- */\n\n.mailharbor-thread {\n  display: flex;\n  flex-direction: column;\n}\n\n.mailharbor-row.compact {\n  padding-top: 6px;\n  padding-bottom: 6px;\n  padding-left: 34px;\n  background: var(--m-bg);\n}\n\n.mailharbor-row.compact .line-1 {\n  opacity: 0.85;\n}\n\n.mailharbor-row.compact .snippet {\n  -webkit-line-clamp: 1;\n}\n\n.mailharbor .to-label {\n  font-size: 10.5px;\n  color: var(--m-text-3);\n  flex: none;\n}\n\n.mailharbor .thread-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n  font-size: 10.5px;\n  flex: none;\n}\n\n.mailharbor .thread-count:hover {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-account {\n  height: auto;\n  padding: 3px 8px 3px 3px;\n  border-radius: 8px;\n  gap: 8px;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n/* ---------- mailbox sidebar ---------- */\n\n.mailharbor-side {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  width: 214px;\n  flex: none;\n  padding: 10px 8px;\n  overflow: auto;\n  border-right: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n}\n\n.mailharbor-side-section {\n  padding: 12px 8px 4px;\n  font-size: 10.5px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: 8px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  text-align: left;\n  flex: none;\n}\n\n.mailharbor-side-item:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-side-item.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-side-item .name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-side-item .sub {\n  display: block;\n  font-size: 10.5px;\n  color: var(--m-text-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor-side-item .count {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item svg {\n  flex: none;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item.active svg {\n  color: var(--m-accent);\n}\n\n@media (max-width: 900px) {\n  .mailharbor-side {\n    display: none;\n  }\n}\n\n/* ---------- task board ---------- */\n\n.tasks-board-wrap {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px 18px 40px;\n}\n\n.tasks-summary {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.tasks-summary-main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n}\n\n.tasks-summary-labels {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n}\n\n.tasks-stats {\n  display: flex;\n  gap: 18px;\n}\n\n.tasks-stat {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 42px;\n}\n\n.tasks-stat strong {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--m-text);\n}\n\n.tasks-stat span {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.tasks-stat.danger strong {\n  color: var(--m-danger);\n}\n\n.tasks-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.tasks-board {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 14px;\n  align-items: start;\n}\n\n.task-column {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 140px;\n  padding: 8px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.task-column-head {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 2px 4px 6px;\n}\n\n.task-column-head strong {\n  font-size: 12.5px;\n  font-weight: 600;\n}\n\n.task-column-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  color: var(--m-text-3);\n  font-size: 10.5px;\n}\n\n.task-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 999px;\n  background: var(--m-text-3);\n}\n\n.task-dot.NEEDS-ACTION {\n  background: #8a8f98;\n}\n\n.task-dot.IN-PROCESS {\n  background: var(--m-accent);\n}\n\n.task-dot.COMPLETED {\n  background: var(--m-ok);\n}\n\n.task-dot.CANCELLED {\n  background: var(--m-danger);\n  opacity: 0.7;\n}\n\n.task-column-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 60px;\n}\n\n.task-column-empty {\n  padding: 18px 8px;\n  text-align: center;\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  border: 1px dashed var(--m-line-soft);\n  border-radius: 9px;\n}\n\n.task-card {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 11px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg);\n  cursor: grab;\n  transition:\n    border-color 120ms ease,\n    box-shadow 120ms ease;\n}\n\n.task-card:hover {\n  border-color: var(--m-line);\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);\n}\n\n.task-card.dragging {\n  opacity: 0.5;\n}\n\n.task-card-top {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n}\n\n.task-card-title {\n  flex: 1;\n  min-width: 0;\n  font-size: 12.5px;\n  line-height: 1.45;\n  color: var(--m-text);\n  overflow-wrap: anywhere;\n}\n\n.task-priority {\n  width: 3px;\n  height: 14px;\n  margin-top: 2px;\n  border-radius: 999px;\n  background: transparent;\n  flex: none;\n}\n\n.task-priority.p5 {\n  background: #d9a441;\n}\n\n.task-priority.p9 {\n  background: var(--m-danger);\n}\n\n.task-card-delete {\n  width: 18px;\n  height: 18px;\n  flex: none;\n  border-radius: 5px;\n  color: var(--m-text-3);\n  opacity: 0;\n}\n\n.task-card:hover .task-card-delete {\n  opacity: 1;\n}\n\n.task-card-notes {\n  margin: 0;\n  font-size: 11.5px;\n  line-height: 1.55;\n  color: var(--m-text-3);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.task-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-size: 10.5px;\n  color: var(--m-text-3);\n}\n\n.task-due,\n.task-owner,\n.task-project,\n.task-priority-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 5px;\n  background: var(--m-bg-2);\n}\n\n.task-due.overdue {\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.12);\n}\n\n.task-project {\n  color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.task-source {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 5px;\n  color: var(--m-text-3);\n  font-size: 10.5px;\n}\n\n.task-source:hover {\n  background: var(--m-hover);\n  color: var(--m-text-2);\n}\n\n@media (max-width: 1180px) {\n  .tasks-board {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 720px) {\n  .tasks-board {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n/* ---------- AI search ---------- */\n\n.mailharbor-ai-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 12px 8px;\n  padding: 7px 10px;\n  border-radius: 8px;\n  background: var(--m-accent-soft);\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-ai-search.searching {\n  background: var(--m-bg-2);\n  color: var(--m-text-3);\n}\n\n/* ---------- task editor ---------- */\n\n.mailharbor-tasks .mailharbor-modal {\n  max-width: 760px;\n}\n\n.task-editor {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 230px;\n  gap: 18px;\n}\n\n.task-editor-main {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n}\n\n.task-editor-title input {\n  width: 100%;\n  height: 38px;\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.task-editor-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.task-editor-section label,\n.task-editor-field label {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.task-editor-section textarea {\n  width: 100%;\n  resize: vertical;\n}\n\n.task-editor-side {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n  align-self: start;\n}\n\n.task-editor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.task-editor-field input,\n.task-editor-field select {\n  width: 100%;\n}\n\n.task-priority-picker {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 4px;\n  padding: 3px;\n  border: 1px solid var(--m-line);\n  border-radius: 8px;\n  background: var(--m-bg);\n}\n\n.task-priority-picker button {\n  height: 26px;\n  border-radius: 6px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.task-priority-picker button.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.task-editor-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n}\n";
+var styles_default = "/* MailHarbor panel + settings.\n   Tokens come from the DSH shell (dark by default); fallbacks match the\n   default dark theme so the panel also renders in a bare host page.\n   Component rules are all scoped under `.mailharbor` and the generic element\n   reset lives in `:where()` so it cannot outrank a component class. */\n\n.mailharbor {\n  --m-bg: var(--dsw-alias-bg-base, #151517);\n  --m-bg-1: var(--dsw-alias-bg-layer-1, #232324);\n  --m-bg-2: var(--dsw-alias-bg-layer-2, #2c2c2e);\n  --m-bg-3: var(--dsw-alias-bg-layer-3, #353638);\n  --m-line: var(--dsw-alias-border-l2, #ffffff1f);\n  --m-line-soft: var(--dsw-alias-border-l1, #ffffff0f);\n  --m-line-strong: var(--dsw-alias-border-l3, #ffffff29);\n  --m-text: var(--dsw-alias-label-primary, #f9fafb);\n  --m-text-2: var(--dsw-alias-label-secondary, #cfd3d6);\n  --m-text-3: var(--dsw-alias-label-tertiary, #adb2b8);\n  --m-caption: var(--dsw-alias-label-caption, #81858c);\n  --m-accent: #5686fe;\n  --m-accent-soft: rgba(86, 134, 254, 0.14);\n  --m-primary-bg: var(--dsw-alias-brand-primary, #f9fafb);\n  --m-primary-fg: var(--dsw-alias-label-primary-foreground, #0f1115);\n  --m-hover: var(--dsw-alias-interactive-bg-hover, #ffffff14);\n  --m-danger: #f25a5a;\n  --m-ok: #3fbf7f;\n  --m-warn: var(--dsw-alias-state-warn-label, #dd8629);\n  --m-radius: 8px;\n  --m-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-size: 13px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n\n.mailharbor *,\n.mailharbor *::before,\n.mailharbor *::after {\n  box-sizing: border-box;\n}\n\n/* ---------- base controls ---------- */\n\n.mailharbor :where(button) {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  margin: 0;\n  cursor: pointer;\n}\n\n.mailharbor button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 30px;\n  padding: 0 12px;\n  border-radius: var(--m-radius);\n  border: 1px solid transparent;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  font-weight: 500;\n  white-space: nowrap;\n  transition:\n    background 120ms ease,\n    color 120ms ease,\n    border-color 120ms ease;\n}\n\n.mailharbor button:hover:not(:disabled) {\n  background: var(--m-hover);\n  color: var(--m-text);\n}\n\n.mailharbor button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n\n.mailharbor button.primary {\n  background: var(--m-primary-bg);\n  color: var(--m-primary-fg);\n  border-color: transparent;\n}\n\n.mailharbor button.primary:hover:not(:disabled) {\n  background: var(--m-primary-bg);\n  filter: brightness(0.94);\n  color: var(--m-primary-fg);\n}\n\n.mailharbor button.ghost {\n  border-color: var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor button.ghost:hover:not(:disabled) {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor button.subtle {\n  color: var(--m-text-3);\n  padding: 0 8px;\n}\n\n.mailharbor button.icon {\n  width: 30px;\n  padding: 0;\n}\n\n.mailharbor button.danger {\n  color: var(--m-danger);\n}\n\n.mailharbor input,\n.mailharbor select,\n.mailharbor textarea {\n  font: inherit;\n  color: var(--m-text);\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  padding: 0 10px;\n  height: 32px;\n  min-width: 0;\n}\n\n.mailharbor textarea {\n  height: auto;\n  padding: 8px 10px;\n  resize: vertical;\n  line-height: 1.6;\n}\n\n.mailharbor select {\n  padding-right: 26px;\n  appearance: none;\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--m-text-3) 50%),\n    linear-gradient(135deg, var(--m-text-3) 50%, transparent 50%);\n  background-position:\n    calc(100% - 15px) 14px,\n    calc(100% - 10px) 14px;\n  background-size:\n    5px 5px,\n    5px 5px;\n  background-repeat: no-repeat;\n}\n\n.mailharbor ::placeholder {\n  color: var(--m-caption);\n}\n\n.mailharbor input:focus-visible,\n.mailharbor select:focus-visible,\n.mailharbor textarea:focus-visible,\n.mailharbor button:focus-visible,\n.mailharbor [contenteditable='true']:focus-visible {\n  outline: 2px solid rgba(86, 134, 254, 0.55);\n  outline-offset: -1px;\n}\n\n.mailharbor .spacer {\n  flex: 1;\n}\n\n.mailharbor .muted {\n  color: var(--m-text-3);\n}\n\n.mailharbor .small {\n  font-size: 12px;\n}\n\n.mailharbor .badge {\n  display: inline-flex;\n  align-items: center;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  font-size: 10.5px;\n  font-weight: 500;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n}\n\n.mailharbor .badge.ok {\n  background: rgba(63, 191, 127, 0.16);\n  color: var(--m-ok);\n}\n\n.mailharbor .badge.warn {\n  background: rgba(221, 134, 41, 0.16);\n  color: var(--m-warn);\n}\n\n.mailharbor .error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.1);\n  border-bottom: 1px solid rgba(242, 90, 90, 0.2);\n  font-size: 12.5px;\n}\n\n/* ---------- shell ---------- */\n\n.mailharbor-topbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 52px;\n  padding: 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n  flex: none;\n}\n\n.mailharbor-account {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  max-width: 220px;\n  padding: 4px 8px 4px 4px;\n  border-radius: 999px;\n  border: 1px solid transparent;\n  cursor: default;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-account .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.mailharbor-account select {\n  height: 26px;\n  background: transparent;\n  border-color: transparent;\n  font-weight: 500;\n}\n\n.mailharbor-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  position: relative;\n}\n\n.mailharbor button.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-list {\n  display: flex;\n  flex-direction: column;\n  width: 360px;\n  flex: none;\n  border-right: 1px solid var(--m-line-soft);\n  min-height: 0;\n}\n\n.mailharbor-reader {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (max-width: 1000px) {\n  .mailharbor-list {\n    width: 300px;\n  }\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='reader'] .mailharbor-list {\n  display: none;\n}\n\n.mailharbor-narrow .mailharbor-body[data-mode='list'] .mailharbor-reader {\n  display: none;\n}\n\n/* ---------- segmented control ---------- */\n\n.mailharbor-segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  border-radius: 9px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-segment button {\n  height: 26px;\n  padding: 0 12px;\n  border-radius: 7px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-segment button:hover:not(.active) {\n  color: var(--m-text-2);\n  background: transparent;\n}\n\n.mailharbor-segment button.active {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n/* ---------- list ---------- */\n\n.mailharbor-filters {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-filters select {\n  width: 128px;\n  flex: none;\n  font-size: 12px;\n}\n\n.mailharbor-filters input[type='search'] {\n  flex: 1;\n  height: 30px;\n  font-size: 12.5px;\n}\n\n.mailharbor-rows {\n  flex: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.mailharbor-row {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  width: 100%;\n  padding: 10px 14px;\n  border: 0;\n  border-bottom: 1px solid var(--m-line-soft);\n  border-left: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  text-align: left;\n  cursor: pointer;\n  user-select: none;\n}\n\n.mailharbor-row:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-row.selected {\n  background: var(--m-accent-soft);\n  border-left-color: var(--m-accent);\n}\n\n.mailharbor-row .line-1,\n.mailharbor-row .line-2 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  width: 100%;\n}\n\n.mailharbor-row .from {\n  font-weight: 600;\n  font-size: 12.5px;\n  color: var(--m-text-2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-row .date {\n  margin-left: auto;\n  color: var(--m-caption);\n  font-size: 11px;\n  flex: none;\n}\n\n.mailharbor-row .subject {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n.mailharbor-row .snippet {\n  color: var(--m-caption);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.mailharbor-row.unread .from,\n.mailharbor-row.unread .subject {\n  color: var(--m-text);\n}\n\n.mailharbor-row .dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--m-accent);\n  flex: none;\n}\n\n.mailharbor-row .paperclip {\n  color: var(--m-caption);\n  flex: none;\n  display: inline-flex;\n}\n\n.mailharbor-list-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  flex: none;\n}\n\n.mailharbor-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 48px 24px;\n  color: var(--m-text-3);\n  text-align: center;\n}\n\n.mailharbor-empty svg {\n  opacity: 0.5;\n}\n\n.mailharbor-empty .title {\n  color: var(--m-text-2);\n  font-size: 13px;\n  font-weight: 500;\n}\n\n/* ---------- reader ---------- */\n\n.mailharbor-reader-head {\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mailharbor-reader-title {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mailharbor-reader-title h2 {\n  margin: 0;\n  font-size: 17px;\n  line-height: 1.35;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  word-break: break-word;\n}\n\n.mailharbor-reader-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px 10px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor-reader-meta .who {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--m-text-2);\n}\n\n.mailharbor-reader-meta .who strong {\n  color: var(--m-text);\n  font-weight: 600;\n}\n\n.mailharbor-reader-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mailharbor-reader-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 14px 18px 18px;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-reader-body iframe {\n  flex: 1;\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mailharbor-reader-body pre {\n  flex: 1;\n  overflow: auto;\n  margin: 0;\n  padding: 20px 22px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  background: #fff;\n  border-radius: 10px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n  color: #171a21;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 12.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-attachments {\n  padding: 10px 18px;\n  border-top: 1px solid var(--m-line-soft);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: none;\n  background: var(--m-bg);\n}\n\n.mailharbor-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: var(--m-radius);\n  font-size: 12px;\n  text-decoration: none;\n  color: var(--m-text-2);\n  max-width: 260px;\n  background: var(--m-bg-1);\n}\n\n.mailharbor-attachment:hover {\n  border-color: var(--m-line-strong);\n  color: var(--m-text);\n}\n\n.mailharbor-attachment .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ---------- AI rail ---------- */\n\n.mailharbor-ai {\n  display: flex;\n  flex-direction: column;\n  width: 340px;\n  flex: none;\n  min-height: 0;\n  border-left: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n}\n\n.mailharbor-ai-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 46px;\n  padding: 0 8px 0 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-head strong {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.mailharbor-ai-confirm {\n  display: inline-flex;\n  gap: 2px;\n}\n\n.mailharbor-ai-context {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 9px 14px 10px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-context strong {\n  font-size: 12.5px;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-ai-warn {\n  padding: 8px 14px;\n  color: var(--m-warn);\n  background: rgba(221, 134, 41, 0.1);\n  font-size: 12px;\n  flex: none;\n}\n\n.mailharbor-ai-quick {\n  display: flex;\n  gap: 6px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-quick button {\n  flex: 1;\n  padding: 0 6px;\n}\n\n.mailharbor-ai-list {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px 14px;\n}\n\n.mailharbor-ai-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 30px 12px;\n  text-align: center;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-empty .title {\n  color: var(--m-text-2);\n  font-weight: 500;\n  font-size: 12.5px;\n}\n\n.mailharbor-ai-card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n  overflow: hidden;\n}\n\n.mailharbor-ai-card.generating {\n  opacity: 0.7;\n}\n\n.mailharbor-ai-card-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 8px 7px 12px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-ai-card-head > span:first-child {\n  color: var(--m-text-2);\n  font-weight: 600;\n}\n\n.mailharbor-ai-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 10px 12px;\n}\n\n.mailharbor-ai-summary section h4 {\n  margin: 0 0 3px;\n  font-size: 11px;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.mailharbor-ai-summary section p {\n  margin: 0;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-text {\n  padding: 10px 12px;\n  max-height: 320px;\n  overflow: auto;\n  white-space: pre-wrap;\n  font-size: 12.5px;\n  line-height: 1.65;\n  color: var(--m-text);\n}\n\n.mailharbor-ai-card-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n  padding: 6px 8px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-ai-card-actions button {\n  height: 26px;\n  padding: 0 8px;\n  font-size: 11.5px;\n}\n\n.mailharbor-ai-ask {\n  display: flex;\n  gap: 6px;\n  padding: 10px 12px;\n  border-top: 1px solid var(--m-line-soft);\n  flex: none;\n}\n\n.mailharbor-ai-ask input {\n  flex: 1;\n  height: 32px;\n}\n\n.mailharbor-ai-error {\n  color: var(--m-danger);\n  font-size: 12px;\n  padding: 0 2px;\n}\n\n@media (max-width: 1280px) {\n  .mailharbor-ai {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: min(420px, 94%);\n    z-index: 6;\n    border-left: 1px solid var(--m-line);\n    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);\n  }\n}\n\n/* ---------- AI summary ---------- */\n\n.mailharbor-divider {\n  width: 1px;\n  height: 18px;\n  margin: 0 4px;\n  background: var(--m-line);\n}\n\n.mailharbor-summary {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.mailharbor-summary section h4 {\n  margin: 0 0 6px;\n  font-size: 11.5px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-summary section p {\n  margin: 0;\n  white-space: pre-wrap;\n  line-height: 1.75;\n  color: var(--m-text);\n}\n\n/* ---------- modal / forms ---------- */\n\n.mailharbor-portal {\n  position: fixed;\n  inset: 0;\n  z-index: 80;\n  height: auto;\n  background: transparent;\n  pointer-events: none;\n}\n\n.mailharbor-portal .mailharbor-modal-mask {\n  pointer-events: auto;\n}\n\n.mailharbor-modal-mask {\n  position: fixed;\n  inset: 0;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(2px);\n}\n\n.mailharbor-modal {\n  display: flex;\n  flex-direction: column;\n  width: min(720px, 100%);\n  max-height: 86vh;\n  overflow: hidden;\n  border: 1px solid var(--m-line);\n  border-radius: 14px;\n  background: var(--m-bg-1);\n  color: var(--m-text);\n  box-shadow: var(--m-shadow);\n}\n\n.mailharbor-modal > header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 52px;\n  padding: 0 14px 0 18px;\n  border-bottom: 1px solid var(--m-line-soft);\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.mailharbor-modal .content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 18px;\n  overflow: auto;\n}\n\n.mailharbor-modal > footer {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n.mailharbor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.mailharbor-field > input,\n.mailharbor-field > select,\n.mailharbor-field > textarea,\n.mailharbor-card > textarea {\n  width: 100%;\n  min-width: 0;\n}\n\n.mailharbor-field > label {\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 10px;\n  min-width: 0;\n}\n\n.mailharbor-grid.three {\n  grid-template-columns: minmax(0, 2fr) minmax(72px, 90px) auto;\n  align-items: end;\n  min-width: 0;\n}\n\n.mailharbor-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.mailharbor-toggle input[type='checkbox'] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--m-accent);\n}\n\n/* ---------- composer ---------- */\n\n.mailharbor-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-wrap: wrap;\n  padding: 6px;\n  border: 1px solid var(--m-line-soft);\n  border-bottom: 0;\n  border-radius: 10px 10px 0 0;\n  background: var(--m-bg-2);\n}\n\n.mailharbor-toolbar button {\n  height: 26px;\n  padding: 0 9px;\n  border-radius: 6px;\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-toolbar button:hover {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n.mailharbor-editor {\n  min-height: 240px;\n  max-height: 44vh;\n  overflow: auto;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 0 0 10px 10px;\n  background: #fff;\n  color: #171a21;\n  outline: none;\n  font-size: 13.5px;\n  line-height: 1.7;\n}\n\n.mailharbor-editor:empty::before {\n  content: attr(data-placeholder);\n  color: #9aa0ab;\n}\n\n/* ---------- inline confirm ---------- */\n\n.mailharbor-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 8px;\n  border: 1px solid var(--m-line);\n  background: var(--m-bg-2);\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n/* ---------- selection / extraction ---------- */\n\n.mailharbor-selectbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  margin: 0 12px 8px;\n  border: 1px solid var(--m-accent-soft);\n  border-radius: 9px;\n  background: var(--m-accent-soft);\n}\n\n.mailharbor-selectbar select {\n  height: 28px;\n  max-width: 200px;\n}\n\n.mailharbor-row.selectable input[type='checkbox'] {\n  width: 15px;\n  height: 15px;\n  flex: none;\n  accent-color: var(--m-accent);\n}\n\n.mailharbor-extract-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 9px 10px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 9px;\n  background: var(--m-bg-1);\n  cursor: pointer;\n}\n\n.mailharbor-extract-row input {\n  margin-top: 2px;\n  accent-color: var(--m-accent);\n}\n\n.mailharbor-extract-row > span {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 6px 12px;\n  margin: 0;\n  font-size: 12.5px;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n\n/* ---------- tasks panel ---------- */\n\n.mailharbor .chip {\n  height: 26px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: 999px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.mailharbor .chip.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n.tasks-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 18px 20px 48px;\n  width: 100%;\n  max-width: 940px;\n  margin: 0 auto;\n}\n\n.tasks-overview {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));\n  gap: 12px;\n}\n\n.tasks-progress,\n.tasks-project {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  padding: 12px 14px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n  min-width: 0;\n}\n\n.tasks-progress-head,\n.tasks-project-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  min-width: 0;\n}\n\n.tasks-project-head .name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12.5px;\n  font-weight: 500;\n}\n\n.tasks-bar {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  overflow: hidden;\n}\n\n.tasks-bar span {\n  display: block;\n  height: 100%;\n  border-radius: 999px;\n  background: var(--m-accent);\n  transition: width 200ms ease;\n}\n\n.tasks-bar.small {\n  height: 4px;\n}\n\n.tasks-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.tasks-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.tasks-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n}\n\n.tasks-row input[type='checkbox'] {\n  width: 16px;\n  height: 16px;\n  flex: none;\n  accent-color: var(--m-accent);\n}\n\n.tasks-row .tasks-title {\n  flex: 1;\n  min-width: 0;\n  height: auto;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  text-align: left;\n  border: 0;\n  background: transparent;\n}\n\n.tasks-row .tasks-title:hover {\n  background: transparent;\n}\n\n.tasks-row .tasks-title > span:first-child {\n  font-size: 13px;\n  color: var(--m-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n}\n\n.tasks-row.done .tasks-title > span:first-child {\n  color: var(--m-text-3);\n  text-decoration: line-through;\n}\n\n.tasks-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.tasks-meta .due.overdue {\n  color: var(--m-danger);\n}\n\n.tasks-list-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n/* ---------- markdown ---------- */\n\n.mailharbor-markdown {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  font-size: 12.5px;\n  line-height: 1.68;\n  overflow-wrap: anywhere;\n}\n\n.mailharbor-markdown > *:first-child {\n  margin-top: 0;\n}\n\n.mailharbor-markdown > *:last-child {\n  margin-bottom: 0;\n}\n\n.mailharbor-markdown p {\n  margin: 0;\n  white-space: pre-wrap;\n}\n\n.mailharbor-markdown h1,\n.mailharbor-markdown h2,\n.mailharbor-markdown h3,\n.mailharbor-markdown h4,\n.mailharbor-markdown h5,\n.mailharbor-markdown h6 {\n  margin: 4px 0 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--m-text);\n}\n\n.mailharbor-markdown ul,\n.mailharbor-markdown ol {\n  margin: 0;\n  padding-left: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.mailharbor-markdown li::marker {\n  color: var(--m-text-3);\n}\n\n.mailharbor-markdown a {\n  color: var(--m-accent);\n  text-decoration: none;\n}\n\n.mailharbor-markdown a:hover {\n  text-decoration: underline;\n}\n\n.mailharbor-markdown code {\n  padding: 1px 4px;\n  border-radius: 4px;\n  background: var(--m-bg-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11.5px;\n}\n\n.mailharbor-markdown pre {\n  margin: 0;\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  overflow: auto;\n}\n\n.mailharbor-markdown pre code {\n  padding: 0;\n  background: transparent;\n}\n\n.mailharbor-markdown blockquote {\n  margin: 0;\n  padding-left: 10px;\n  border-left: 2px solid var(--m-line);\n  color: var(--m-text-2);\n}\n\n.mailharbor-markdown hr {\n  width: 100%;\n  margin: 4px 0;\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n}\n\n/* ---------- composer AI ---------- */\n\n.mailharbor-toolbar button.ai {\n  color: var(--m-accent);\n}\n\n.mailharbor-compose-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.mailharbor-versions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  padding-top: 8px;\n}\n\n.mailharbor-versions .chip {\n  height: 22px;\n  padding: 0 8px;\n  border: 1px solid var(--m-line);\n  border-radius: 999px;\n  color: var(--m-text-3);\n  font-size: 11px;\n}\n\n.mailharbor-versions .chip.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n/* ---------- settings ---------- */\n\n.mailharbor.mailharbor-settings-page {\n  height: auto;\n  min-height: 100%;\n  overflow: visible;\n}\n\n.mailharbor-settings {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  padding: 18px 20px 48px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  overflow-x: hidden;\n}\n\n.mailharbor-settings > * {\n  min-width: 0;\n}\n\n.mailharbor-settings h2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n.mailharbor-settings h3 {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--m-text-3);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.mailharbor-card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.mailharbor-account-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.mailharbor-account-row .meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.mailharbor-account-row .meta strong {\n  font-weight: 600;\n}\n\n.mailharbor-account-row .meta span {\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor .avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  border-radius: 50%;\n  background: var(--m-accent-soft);\n  color: var(--m-accent);\n  font-weight: 600;\n}\n\n.mailharbor-log {\n  padding: 10px 12px;\n  border-radius: 8px;\n  background: var(--m-bg);\n  border: 1px solid var(--m-line-soft);\n  color: var(--m-text-2);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.6;\n  max-height: 220px;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n\n.mailharbor-kv {\n  display: grid;\n  grid-template-columns: minmax(120px, 170px) 1fr;\n  gap: 6px 14px;\n  font-size: 12px;\n  margin: 0;\n}\n\n.mailharbor-kv dt {\n  color: var(--m-text-3);\n}\n\n.mailharbor-kv dd {\n  margin: 0;\n  color: var(--m-text-2);\n  word-break: break-all;\n}\n\n.mailharbor hr {\n  border: 0;\n  border-top: 1px solid var(--m-line-soft);\n  margin: 2px 0;\n}\n\n/* ---------- conversation rows ---------- */\n\n.mailharbor-thread {\n  display: flex;\n  flex-direction: column;\n}\n\n.mailharbor-row.compact {\n  padding-top: 6px;\n  padding-bottom: 6px;\n  padding-left: 34px;\n  background: var(--m-bg);\n}\n\n.mailharbor-row.compact .line-1 {\n  opacity: 0.85;\n}\n\n.mailharbor-row.compact .snippet {\n  -webkit-line-clamp: 1;\n}\n\n.mailharbor .to-label {\n  font-size: 10.5px;\n  color: var(--m-text-3);\n  flex: none;\n}\n\n.mailharbor .thread-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  color: var(--m-text-2);\n  font-size: 10.5px;\n  flex: none;\n}\n\n.mailharbor .thread-count:hover {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-account {\n  height: auto;\n  padding: 3px 8px 3px 3px;\n  border-radius: 8px;\n  gap: 8px;\n}\n\n.mailharbor-account:hover {\n  background: var(--m-hover);\n}\n\n/* ---------- mailbox sidebar ---------- */\n\n.mailharbor-side {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  width: 214px;\n  flex: none;\n  padding: 10px 8px;\n  overflow: auto;\n  border-right: 1px solid var(--m-line-soft);\n  background: var(--m-bg);\n}\n\n.mailharbor-side-section {\n  padding: 12px 8px 4px;\n  font-size: 10.5px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: 8px;\n  color: var(--m-text-2);\n  font-size: 12.5px;\n  text-align: left;\n  flex: none;\n}\n\n.mailharbor-side-item:hover {\n  background: var(--m-hover);\n}\n\n.mailharbor-side-item.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.mailharbor-side-item .name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-side-item .sub {\n  display: block;\n  font-size: 10.5px;\n  color: var(--m-text-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mailharbor-side-item .count {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item svg {\n  flex: none;\n  color: var(--m-text-3);\n}\n\n.mailharbor-side-item.active svg {\n  color: var(--m-accent);\n}\n\n@media (max-width: 900px) {\n  .mailharbor-side {\n    display: none;\n  }\n}\n\n/* ---------- task board ---------- */\n\n.tasks-board-wrap {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px 18px 40px;\n}\n\n.tasks-summary {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 14px 16px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.tasks-summary-main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n}\n\n.tasks-summary-labels {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n}\n\n.tasks-stats {\n  display: flex;\n  gap: 18px;\n}\n\n.tasks-stat {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 42px;\n}\n\n.tasks-stat strong {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--m-text);\n}\n\n.tasks-stat span {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.tasks-stat.danger strong {\n  color: var(--m-danger);\n}\n\n.tasks-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.tasks-board {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 14px;\n  align-items: start;\n}\n\n.task-column {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 140px;\n  padding: 8px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n}\n\n.task-column-head {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 2px 4px 6px;\n}\n\n.task-column-head strong {\n  font-size: 12.5px;\n  font-weight: 600;\n}\n\n.task-column-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  background: var(--m-bg-3);\n  color: var(--m-text-3);\n  font-size: 10.5px;\n}\n\n.task-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 999px;\n  background: var(--m-text-3);\n}\n\n.task-dot.NEEDS-ACTION {\n  background: #8a8f98;\n}\n\n.task-dot.IN-PROCESS {\n  background: var(--m-accent);\n}\n\n.task-dot.COMPLETED {\n  background: var(--m-ok);\n}\n\n.task-dot.CANCELLED {\n  background: var(--m-danger);\n  opacity: 0.7;\n}\n\n.task-column-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 60px;\n}\n\n.task-column-empty {\n  padding: 18px 8px;\n  text-align: center;\n  color: var(--m-text-3);\n  font-size: 11.5px;\n  border: 1px dashed var(--m-line-soft);\n  border-radius: 9px;\n}\n\n.task-card {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 11px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg);\n  cursor: grab;\n  transition:\n    border-color 120ms ease,\n    box-shadow 120ms ease;\n}\n\n.task-card:hover {\n  border-color: var(--m-line);\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);\n}\n\n.task-card.dragging {\n  opacity: 0.5;\n}\n\n.task-card-top {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n}\n\n.task-card-title {\n  flex: 1;\n  min-width: 0;\n  font-size: 12.5px;\n  line-height: 1.45;\n  color: var(--m-text);\n  overflow-wrap: anywhere;\n}\n\n.task-priority {\n  width: 3px;\n  height: 14px;\n  margin-top: 2px;\n  border-radius: 999px;\n  background: transparent;\n  flex: none;\n}\n\n.task-priority.p5 {\n  background: #d9a441;\n}\n\n.task-priority.p9 {\n  background: var(--m-danger);\n}\n\n.task-card-delete {\n  width: 18px;\n  height: 18px;\n  flex: none;\n  border-radius: 5px;\n  color: var(--m-text-3);\n  opacity: 0;\n}\n\n.task-card:hover .task-card-delete {\n  opacity: 1;\n}\n\n.task-card-notes {\n  margin: 0;\n  font-size: 11.5px;\n  line-height: 1.55;\n  color: var(--m-text-3);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.task-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  font-size: 10.5px;\n  color: var(--m-text-3);\n}\n\n.task-due,\n.task-owner,\n.task-project,\n.task-priority-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 5px;\n  background: var(--m-bg-2);\n}\n\n.task-due.overdue {\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.12);\n}\n\n.task-project {\n  color: var(--m-accent);\n  background: var(--m-accent-soft);\n}\n\n.task-source {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  height: 22px;\n  padding: 0 6px;\n  border-radius: 5px;\n  color: var(--m-text-3);\n  font-size: 10.5px;\n}\n\n.task-source:hover {\n  background: var(--m-hover);\n  color: var(--m-text-2);\n}\n\n@media (max-width: 1180px) {\n  .tasks-board {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 720px) {\n  .tasks-board {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n/* ---------- AI search ---------- */\n\n.mailharbor-ai-search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 12px 8px;\n  padding: 7px 10px;\n  border-radius: 8px;\n  background: var(--m-accent-soft);\n  color: var(--m-text-2);\n  font-size: 12px;\n}\n\n.mailharbor-ai-search.searching {\n  background: var(--m-bg-2);\n  color: var(--m-text-3);\n}\n\n/* ---------- task editor ---------- */\n\n.mailharbor-tasks .mailharbor-modal {\n  max-width: 760px;\n}\n\n.task-editor {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 230px;\n  gap: 18px;\n}\n\n.task-editor-main {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n}\n\n.task-editor-title input {\n  width: 100%;\n  height: 38px;\n  font-size: 15px;\n  font-weight: 500;\n}\n\n.task-editor-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.task-editor-section label,\n.task-editor-field label {\n  font-size: 11px;\n  color: var(--m-text-3);\n}\n\n.task-editor-section textarea {\n  width: 100%;\n  resize: vertical;\n}\n\n.task-editor-side {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n  align-self: start;\n}\n\n.task-editor-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  min-width: 0;\n}\n\n.task-editor-field input,\n.task-editor-field select {\n  width: 100%;\n}\n\n.task-priority-picker {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 4px;\n  padding: 3px;\n  border: 1px solid var(--m-line);\n  border-radius: 8px;\n  background: var(--m-bg);\n}\n\n.task-priority-picker button {\n  height: 26px;\n  border-radius: 6px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.task-priority-picker button.active {\n  background: var(--m-accent-soft);\n  color: var(--m-text);\n}\n\n.task-editor-foot {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n}\n\n/* ---------- project manager ---------- */\n\n.project-manager {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.project-manager-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n}\n\n.project-manager-main {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.project-manager-main strong {\n  font-size: 13px;\n}\n\n.project-manager-main .small {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-manager-main input {\n  width: 100%;\n  height: 28px;\n}\n\n.project-manager-actions {\n  display: flex;\n  gap: 4px;\n  flex: none;\n  align-items: center;\n}\n";
 
 // src/client/icon.tsx
 var import_react = require("react");
@@ -187,6 +187,15 @@ var api = {
   syncTasks: (accountId) => request("tasks/sync", { method: "POST", body: JSON.stringify({ accountId }) }),
   projects: () => request("projects"),
   pickDirectory: () => request("projects/pick-directory", { method: "POST" }),
+  updateProject: (id, name) => request(`projects/${encodeURIComponent(id)}`, {
+    method: "PATCH",
+    body: JSON.stringify({ name })
+  }),
+  deleteProject: (id) => request(
+    `projects/${encodeURIComponent(id)}`,
+    { method: "DELETE" }
+  ),
+  openProject: (id) => request(`projects/${encodeURIComponent(id)}/open`, { method: "POST" }),
   projectFor: (accountId, key) => request(`projects/for${query({ accountId: accountId ?? null, key })}`),
   createProject: (payload) => request("projects", {
     method: "POST",
@@ -2210,6 +2219,12 @@ function MailPanel() {
   const [pickerTarget, setPickerTarget] = (0, import_react9.useState)("");
   const [pickerNewName, setPickerNewName] = (0, import_react9.useState)("");
   const [pickerBusy, setPickerBusy] = (0, import_react9.useState)(false);
+  const [pickerMode, setPickerMode] = (0, import_react9.useState)("existing");
+  const [managerOpen, setManagerOpen] = (0, import_react9.useState)(false);
+  const [managerProjects, setManagerProjects] = (0, import_react9.useState)([]);
+  const [managerRename, setManagerRename] = (0, import_react9.useState)(null);
+  const [managerConfirm, setManagerConfirm] = (0, import_react9.useState)("");
+  const [managerBusy, setManagerBusy] = (0, import_react9.useState)(false);
   const [aiSearching, setAiSearching] = (0, import_react9.useState)(false);
   const [aiRequest, setAiRequest] = (0, import_react9.useState)(null);
   const [tick, setTick] = (0, import_react9.useState)(0);
@@ -2294,9 +2309,11 @@ function MailPanel() {
     });
     setPickerNewName(selected.subject.replace(/^(re|fwd):\s*/i, "").slice(0, 80));
     setPickerTarget("");
-    void api.projects().then((list) => {
+    void Promise.all([api.projects(), api.projectFor(selected.accountId, key)]).then(([list, linked]) => {
       setPickerProjects(list.items);
-      setPickerTarget(list.items[0]?.id ?? "");
+      const current = linked.project?.id ?? list.items[0]?.id ?? "";
+      setPickerTarget(current);
+      setPickerMode(current === "" ? "new" : "existing");
     }).catch((caught) => setError(errorText5(caught)));
   };
   const saveProjectPick = async () => {
@@ -2304,7 +2321,7 @@ function MailPanel() {
     setPickerBusy(true);
     setError("");
     try {
-      if (pickerTarget !== "") {
+      if (pickerMode === "existing" && pickerTarget !== "") {
         await api.addProjectMessage(pickerTarget, {
           accountId: projectPicker.accountId,
           key: projectPicker.key,
@@ -2314,7 +2331,7 @@ function MailPanel() {
         notice("\u5DF2\u52A0\u5165\u9879\u76EE");
       } else {
         const name = pickerNewName.trim();
-        if (name === "") throw new Error("\u5148\u9009\u62E9\u4E00\u4E2A\u9879\u76EE\uFF0C\u6216\u586B\u5199\u65B0\u9879\u76EE\u540D\u79F0");
+        if (name === "") throw new Error("\u8BF7\u586B\u5199\u65B0\u9879\u76EE\u540D\u79F0");
         const settings = await api.settings();
         const created = await api.createProject({
           accountId: projectPicker.accountId,
@@ -2339,6 +2356,28 @@ ${projectPicker.subject}`,
       setPickerBusy(false);
     }
   };
+  const openManager = () => {
+    setManagerOpen(true);
+    setManagerConfirm("");
+    setManagerRename(null);
+    void api.projects().then((list) => setManagerProjects(list.items)).catch((caught) => setError(errorText5(caught)));
+  };
+  const managerAction = async (operation) => {
+    setManagerBusy(true);
+    setError("");
+    try {
+      await operation();
+      const list = await api.projects();
+      setManagerProjects(list.items);
+      setManagerRename(null);
+      setManagerConfirm("");
+      setTick((value) => value + 1);
+    } catch (caught) {
+      setError(errorText5(caught));
+    } finally {
+      setManagerBusy(false);
+    }
+  };
   const toggleSide = () => {
     setSideOpen((open) => {
       try {
@@ -2889,6 +2928,12 @@ ${projectPicker.subject}`,
         (0, import_react9.createElement)(Icon, { name: "archive" }),
         "\u5907\u4EFD"
       ),
+      (0, import_react9.createElement)(
+        "button",
+        { className: "ghost", onClick: openManager, title: "\u9879\u76EE\u7BA1\u7406" },
+        (0, import_react9.createElement)(Icon, { name: "folder" }),
+        "\u9879\u76EE"
+      ),
       (0, import_react9.createElement)(
         "button",
         {
@@ -3263,6 +3308,120 @@ ${projectPicker.subject}`,
         backup.output.length === 0 ? "\uFF08\u7B49\u5F85\u8F93\u51FA\u2026\uFF09" : backup.output.join("\n")
       )
     ) : null,
+    managerOpen ? (0, import_react9.createElement)(
+      Modal,
+      {
+        title: "\u9879\u76EE\u7BA1\u7406",
+        onClose: () => setManagerOpen(false),
+        wide: true,
+        footer: (0, import_react9.createElement)(
+          "div",
+          { className: "task-editor-foot" },
+          (0, import_react9.createElement)(
+            "span",
+            { className: "small muted" },
+            "\u5220\u9664\u53EA\u79FB\u9664 MailHarbor \u7684\u9879\u76EE\u8BB0\u5F55\uFF0C\u6587\u4EF6\u5939\u4E0E DSH \u5DE5\u4F5C\u7A7A\u95F4\u4F1A\u4FDD\u7559\u3002"
+          ),
+          (0, import_react9.createElement)("span", { className: "spacer" }),
+          (0, import_react9.createElement)("button", { className: "ghost", onClick: () => setManagerOpen(false) }, "\u5173\u95ED")
+        )
+      },
+      managerProjects.length === 0 ? (0, import_react9.createElement)(
+        "p",
+        { className: "small muted" },
+        "\u8FD8\u6CA1\u6709\u9879\u76EE\u3002\u53EF\u4EE5\u4ECE\u4E00\u5C01\u90AE\u4EF6\u7684\u300C\u52A0\u5165\u9879\u76EE \u2192 \u65B0\u5EFA\u9879\u76EE\u300D\u5F00\u59CB\u3002"
+      ) : (0, import_react9.createElement)(
+        "div",
+        { className: "project-manager" },
+        managerProjects.map(
+          (project) => (0, import_react9.createElement)(
+            "div",
+            { key: project.id, className: "project-manager-row" },
+            (0, import_react9.createElement)(
+              "div",
+              { className: "project-manager-main" },
+              managerRename?.id === project.id ? (0, import_react9.createElement)("input", {
+                value: managerRename.name,
+                autoFocus: true,
+                onChange: (event) => setManagerRename({ id: project.id, name: event.target.value }),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" && managerRename.name.trim() !== "") {
+                    void managerAction(
+                      () => api.updateProject(project.id, managerRename.name.trim())
+                    );
+                  }
+                }
+              }) : (0, import_react9.createElement)("strong", null, project.name),
+              (0, import_react9.createElement)(
+                "span",
+                { className: "small muted" },
+                `${String(project.messages.length)} \u5C01\u6765\u6E90\u90AE\u4EF6 \xB7 ${project.path}`
+              )
+            ),
+            (0, import_react9.createElement)(
+              "div",
+              { className: "project-manager-actions" },
+              managerRename?.id === project.id ? (0, import_react9.createElement)(
+                "button",
+                {
+                  className: "primary small",
+                  disabled: managerBusy || managerRename.name.trim() === "",
+                  onClick: () => void managerAction(
+                    () => api.updateProject(project.id, managerRename.name.trim())
+                  )
+                },
+                "\u4FDD\u5B58\u540D\u79F0"
+              ) : (0, import_react9.createElement)(
+                "button",
+                {
+                  className: "ghost small",
+                  onClick: () => setManagerRename({ id: project.id, name: project.name })
+                },
+                "\u91CD\u547D\u540D"
+              ),
+              (0, import_react9.createElement)(
+                "button",
+                {
+                  className: "ghost small",
+                  onClick: () => {
+                    void api.openProject(project.id).catch((caught) => setError(errorText5(caught)));
+                  }
+                },
+                "\u6253\u5F00\u6587\u4EF6\u5939"
+              ),
+              managerConfirm === project.id ? (0, import_react9.createElement)(
+                "span",
+                { style: { display: "inline-flex", gap: "6px" } },
+                (0, import_react9.createElement)(
+                  "button",
+                  {
+                    className: "ghost small danger",
+                    disabled: managerBusy,
+                    onClick: () => void managerAction(async () => {
+                      await api.deleteProject(project.id);
+                      notice("\u9879\u76EE\u5DF2\u5220\u9664\uFF08\u6587\u4EF6\u5939\u4FDD\u7559\uFF09");
+                    })
+                  },
+                  "\u786E\u8BA4\u5220\u9664"
+                ),
+                (0, import_react9.createElement)(
+                  "button",
+                  { className: "ghost small", onClick: () => setManagerConfirm("") },
+                  "\u53D6\u6D88"
+                )
+              ) : (0, import_react9.createElement)(
+                "button",
+                {
+                  className: "ghost small danger",
+                  onClick: () => setManagerConfirm(project.id)
+                },
+                "\u5220\u9664"
+              )
+            )
+          )
+        )
+      )
+    ) : null,
     projectPicker !== null ? (0, import_react9.createElement)(
       Modal,
       {
@@ -3271,30 +3430,50 @@ ${projectPicker.subject}`,
         footer: (0, import_react9.createElement)(
           "div",
           { style: { display: "flex", gap: "8px", width: "100%", alignItems: "center" } },
-          (0, import_react9.createElement)("span", { className: "small muted" }, "\u628A\u8FD9\u5C01\u90AE\u4EF6\u5173\u8054\u5230\u4E00\u4E2A\u9879\u76EE"),
+          (0, import_react9.createElement)("button", { className: "subtle", onClick: openManager }, "\u7BA1\u7406\u9879\u76EE\u2026"),
           (0, import_react9.createElement)("span", { className: "spacer" }),
           (0, import_react9.createElement)("button", { className: "ghost", onClick: () => setProjectPicker(null) }, "\u53D6\u6D88"),
           (0, import_react9.createElement)(
             "button",
             { className: "primary", disabled: pickerBusy, onClick: () => void saveProjectPick() },
-            pickerBusy ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+            pickerBusy ? "\u4FDD\u5B58\u4E2D\u2026" : pickerMode === "new" ? "\u521B\u5EFA\u5E76\u52A0\u5165" : "\u52A0\u5165\u9879\u76EE"
           )
         )
       },
       (0, import_react9.createElement)(
         "div",
-        { style: { display: "flex", flexDirection: "column", gap: "10px" } },
-        pickerProjects.length === 0 ? (0, import_react9.createElement)("p", { className: "small muted" }, "\u8FD8\u6CA1\u6709\u9879\u76EE\uFF0C\u5728\u4E0B\u9762\u65B0\u5EFA\u4E00\u4E2A\u3002") : (0, import_react9.createElement)(
+        { style: { display: "flex", flexDirection: "column", gap: "12px" } },
+        (0, import_react9.createElement)(
+          "div",
+          { className: "mailharbor-segment", role: "tablist" },
+          (0, import_react9.createElement)(
+            "button",
+            {
+              className: pickerMode === "existing" ? "active" : "",
+              disabled: pickerProjects.length === 0,
+              onClick: () => setPickerMode("existing")
+            },
+            "\u52A0\u5165\u5DF2\u6709\u9879\u76EE"
+          ),
+          (0, import_react9.createElement)(
+            "button",
+            {
+              className: pickerMode === "new" ? "active" : "",
+              onClick: () => setPickerMode("new")
+            },
+            "\u65B0\u5EFA\u9879\u76EE"
+          )
+        ),
+        pickerMode === "existing" ? (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-field" },
-          (0, import_react9.createElement)("label", null, "\u9009\u62E9\u5DF2\u6709\u9879\u76EE"),
+          (0, import_react9.createElement)("label", null, "\u9879\u76EE"),
           (0, import_react9.createElement)(
             "select",
             {
               value: pickerTarget,
               onChange: (event) => setPickerTarget(event.target.value)
             },
-            (0, import_react9.createElement)("option", { value: "" }, "\u4E0D\u52A0\u5165\u5DF2\u6709\u9879\u76EE"),
             pickerProjects.map(
               (project) => (0, import_react9.createElement)(
                 "option",
@@ -3302,23 +3481,24 @@ ${projectPicker.subject}`,
                 `${project.name} \xB7 ${project.messages.length} \u5C01`
               )
             )
-          )
-        ),
-        (0, import_react9.createElement)(
+          ),
+          (0, import_react9.createElement)("p", { className: "small muted" }, "\u53EA\u4F1A\u628A\u5F53\u524D\u90AE\u4EF6\u52A0\u5165\u8FD9\u4E2A\u9879\u76EE\uFF0C\u4E0D\u4F1A\u65B0\u5EFA\u9879\u76EE\u3002")
+        ) : (0, import_react9.createElement)(
           "div",
           { className: "mailharbor-field" },
-          (0, import_react9.createElement)("label", null, pickerProjects.length === 0 ? "\u65B0\u5EFA\u9879\u76EE" : "\u6216\u65B0\u5EFA\u9879\u76EE"),
+          (0, import_react9.createElement)("label", null, "\u65B0\u9879\u76EE\u540D\u79F0"),
           (0, import_react9.createElement)("input", {
             value: pickerNewName,
             placeholder: "\u9879\u76EE\u540D\u79F0",
             onChange: (event) => setPickerNewName(event.target.value)
-          })
+          }),
+          (0, import_react9.createElement)(
+            "p",
+            { className: "small muted" },
+            "\u4F1A\u521B\u5EFA\u65B0\u7684\u9879\u76EE\u6587\u4EF6\u5939\uFF0C\u5E76\u628A\u5F53\u524D\u90AE\u4EF6\u4F5C\u4E3A\u7B2C\u4E00\u5C01\u6765\u6E90\u90AE\u4EF6\u3002"
+          )
         ),
-        (0, import_react9.createElement)(
-          "p",
-          { className: "small muted" },
-          pickerTarget === "" ? "\u4FDD\u5B58\u65F6\u4F1A\u7528\u4E0A\u9762\u7684\u540D\u79F0\u521B\u5EFA\u9879\u76EE\uFF0C\u5E76\u628A\u5F53\u524D\u90AE\u4EF6\u52A0\u8FDB\u53BB\u3002" : "\u4FDD\u5B58\u540E\u8FD9\u5C01\u90AE\u4EF6\u4F1A\u51FA\u73B0\u5728\u9879\u76EE\u7684\u6765\u6E90\u90AE\u4EF6\u5217\u8868\u91CC\u3002"
-        )
+        (0, import_react9.createElement)("p", { className: "small muted" }, `\u6765\u6E90\u90AE\u4EF6\uFF1A${projectPicker.subject}`)
       )
     ) : null,
     extraction !== null ? (0, import_react9.createElement)(
@@ -4644,7 +4824,7 @@ function TaskEditor({
 }
 
 // src/client/index.tsx
-var VERSION = "0.7.1";
+var VERSION = "0.7.2";
 var inject = ["slots"];
 var PANEL_ID = "mailharbor";
 var TASKS_PANEL_ID = "mailharbor-tasks";