@zaclinley/dsh-mailharbor 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.10.0
+
+### Minor Changes
+
+- 7709209: More room for the mail body, scrollable summaries, and tighter AI summaries.
+
+  - Reader header: recipients/cc collapse under a "详情" toggle; the meta row is a
+    single line; attachments are a compact horizontal strip. Thread cards have a
+    one-line header and a body capped at ~42vh instead of a fixed 380px.
+  - Long AI summaries scroll inside their card (max-height + overflow), as do
+    reply/answer cards.
+  - Summary prompt is much stricter: total ≤180 characters, ≤3 action bullets,
+    ≤5 key facts, ≤2 reply points only for direct recipients; the host also trims
+    the output deterministically.
+
+## 0.9.1
+
+### Patch Changes
+
+- e300651: Stop suggesting a reply to mail you were only copied on.
+
+  - The summary prompt now receives your role (直接收件人 / 仅抄送 / 发件人 / 不在名单)
+    and is told to skip reply suggestions unless you are a direct recipient.
+  - For non-recipients the host also removes a reply-suggestion section the model
+    still writes, so summaries stay deterministic.
+  - The summary card hides "用这些要点回复" and shows "未建议回复" in that case.
+
 ## 0.9.0
 
 ### Minor 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\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\n/* ---------- task editor v2 ---------- */\n\n.task-editor-v2 {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.task-editor-head {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.task-editor-head .task-title-input {\n  width: 100%;\n  height: 42px;\n  padding: 0 12px;\n  border-radius: 10px;\n  border: 1px solid var(--m-line);\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.task-editor-head .task-title-input:focus {\n  outline: none;\n  border-color: var(--m-accent);\n}\n\n.task-status-picker {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 4px;\n  padding: 4px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n}\n\n.task-status-picker button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 30px;\n  border-radius: 7px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.task-status-picker button:hover {\n  background: var(--m-hover);\n}\n\n.task-status-picker button.active {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n.task-editor-columns {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 250px;\n  gap: 18px;\n}\n\n.task-editor-col {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n}\n\n.task-editor-col textarea {\n  width: 100%;\n  resize: vertical;\n  min-height: 120px;\n}\n\n.task-editor-col.side {\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-label {\n  font-size: 11px;\n  color: var(--m-text-3);\n  margin-top: 2px;\n}\n\n.task-hint {\n  margin: 0;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.task-hint.danger {\n  color: var(--m-danger);\n  white-space: normal;\n}\n\n.task-source-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.task-due {\n  position: relative;\n}\n\n.task-due-trigger {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: 8px;\n  background: var(--m-bg);\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n.task-due-trigger.empty {\n  color: var(--m-text-3);\n}\n\n.task-due-trigger span {\n  flex: 1;\n  text-align: left;\n}\n\n.task-due-popover {\n  position: absolute;\n  z-index: 20;\n  top: calc(100% + 6px);\n  left: 0;\n  width: 250px;\n  padding: 10px;\n  border: 1px solid var(--m-line);\n  border-radius: 10px;\n  background: var(--m-bg-2);\n  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.task-due-quick {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 5px;\n}\n\n.task-due-quick button {\n  height: 28px;\n  border-radius: 7px;\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line-soft);\n  font-size: 11.5px;\n  color: var(--m-text-2);\n}\n\n.task-due-quick button.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n.task-due-popover input[type='date'] {\n  width: 100%;\n}\n\n.task-due-foot {\n  display: flex;\n  justify-content: space-between;\n}\n\n.task-priority-picker {\n  display: grid;\n  grid-template-columns: repeat(4, 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: 28px;\n  border-radius: 6px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n  border: 1px solid transparent;\n}\n\n.task-priority-picker button.p3 {\n  color: #5aa7f0;\n}\n\n.task-priority-picker button.p5 {\n  color: #d9a441;\n}\n\n.task-priority-picker button.p9 {\n  color: var(--m-danger);\n}\n\n.task-priority-picker button.active {\n  background: var(--m-bg-3);\n  border-color: var(--m-line);\n  color: var(--m-text);\n}\n\n.task-priority-picker button.p9.active {\n  background: rgba(242, 90, 90, 0.16);\n  border-color: rgba(242, 90, 90, 0.35);\n  color: var(--m-danger);\n}\n\n.task-priority-picker button.p5.active {\n  background: rgba(217, 164, 65, 0.16);\n  border-color: rgba(217, 164, 65, 0.35);\n  color: #d9a441;\n}\n\n.task-priority-picker button.p3.active {\n  background: rgba(90, 167, 240, 0.16);\n  border-color: rgba(90, 167, 240, 0.35);\n  color: #5aa7f0;\n}\n\n.task-priority.p3 {\n  background: #5aa7f0;\n}\n\n.task-priority-label.p9 {\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.12);\n}\n\n.task-priority-label.p5 {\n  color: #d9a441;\n  background: rgba(217, 164, 65, 0.12);\n}\n\n.task-priority-label.p3 {\n  color: #5aa7f0;\n  background: rgba(90, 167, 240, 0.12);\n}\n\n@media (max-width: 720px) {\n  .task-editor-columns {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n.mailharbor-spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: mailharbor-spin 0.7s linear infinite;\n  opacity: 0.8;\n  vertical-align: -2px;\n  flex: none;\n}\n\n@keyframes mailharbor-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.extract-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.extract-title {\n  width: 100%;\n  height: 30px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.extract-meta {\n  display: grid;\n  grid-template-columns: 150px 110px minmax(0, 1fr);\n  gap: 6px;\n}\n\n.extract-meta input,\n.extract-meta select {\n  height: 28px;\n  font-size: 11.5px;\n  width: 100%;\n}\n\n.extract-owner {\n  width: 100%;\n}\n\n@media (max-width: 720px) {\n  .extract-meta {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n/* ---------- conversation reading ---------- */\n\n.mailharbor-thread-view {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px 18px 32px;\n  background: var(--m-bg);\n}\n\n.mailharbor-thread-hint {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px 2px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-thread-msg {\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n  overflow: hidden;\n}\n\n.mailharbor-thread-msg.selected {\n  border-color: var(--m-accent);\n  box-shadow: 0 0 0 1px var(--m-accent-soft);\n}\n\n.mailharbor-thread-head {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  height: auto;\n  padding: 9px 12px;\n  text-align: left;\n  border-radius: 0;\n}\n\n.mailharbor-thread-head:hover {\n  background: var(--m-hover);\n}\n\n.thread-who {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.thread-who strong {\n  font-size: 12.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.thread-to {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-thread-preview {\n  padding: 0 14px 10px 47px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-thread-body {\n  padding: 0 12px 12px;\n}\n\n.mailharbor-thread-frame {\n  height: 380px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 8px;\n  overflow: hidden;\n  background: #fff;\n}\n\n.mailharbor-thread-frame iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: #fff;\n}\n\n.thread-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 4px 12px;\n}\n\n@media (max-width: 900px) {\n  .thread-to {\n    display: none;\n  }\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  max-height: min(44vh, 380px);\n  overflow: auto;\n  overscroll-behavior: contain;\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: min(44vh, 320px);\n  overflow: auto;\n  overscroll-behavior: contain;\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\n/* ---------- task editor v2 ---------- */\n\n.task-editor-v2 {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.task-editor-head {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.task-editor-head .task-title-input {\n  width: 100%;\n  height: 42px;\n  padding: 0 12px;\n  border-radius: 10px;\n  border: 1px solid var(--m-line);\n  background: var(--m-bg);\n  color: var(--m-text);\n  font-size: 16px;\n  font-weight: 500;\n}\n\n.task-editor-head .task-title-input:focus {\n  outline: none;\n  border-color: var(--m-accent);\n}\n\n.task-status-picker {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 4px;\n  padding: 4px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 10px;\n  background: var(--m-bg-1);\n}\n\n.task-status-picker button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 30px;\n  border-radius: 7px;\n  color: var(--m-text-3);\n  font-size: 12px;\n}\n\n.task-status-picker button:hover {\n  background: var(--m-hover);\n}\n\n.task-status-picker button.active {\n  background: var(--m-bg-3);\n  color: var(--m-text);\n}\n\n.task-editor-columns {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 250px;\n  gap: 18px;\n}\n\n.task-editor-col {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n}\n\n.task-editor-col textarea {\n  width: 100%;\n  resize: vertical;\n  min-height: 120px;\n}\n\n.task-editor-col.side {\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-label {\n  font-size: 11px;\n  color: var(--m-text-3);\n  margin-top: 2px;\n}\n\n.task-hint {\n  margin: 0;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.task-hint.danger {\n  color: var(--m-danger);\n  white-space: normal;\n}\n\n.task-source-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.task-due {\n  position: relative;\n}\n\n.task-due-trigger {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  width: 100%;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--m-line);\n  border-radius: 8px;\n  background: var(--m-bg);\n  color: var(--m-text-2);\n  font-size: 12.5px;\n}\n\n.task-due-trigger.empty {\n  color: var(--m-text-3);\n}\n\n.task-due-trigger span {\n  flex: 1;\n  text-align: left;\n}\n\n.task-due-popover {\n  position: absolute;\n  z-index: 20;\n  top: calc(100% + 6px);\n  left: 0;\n  width: 250px;\n  padding: 10px;\n  border: 1px solid var(--m-line);\n  border-radius: 10px;\n  background: var(--m-bg-2);\n  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.task-due-quick {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 5px;\n}\n\n.task-due-quick button {\n  height: 28px;\n  border-radius: 7px;\n  background: var(--m-bg-1);\n  border: 1px solid var(--m-line-soft);\n  font-size: 11.5px;\n  color: var(--m-text-2);\n}\n\n.task-due-quick button.active {\n  background: var(--m-accent-soft);\n  border-color: transparent;\n  color: var(--m-text);\n}\n\n.task-due-popover input[type='date'] {\n  width: 100%;\n}\n\n.task-due-foot {\n  display: flex;\n  justify-content: space-between;\n}\n\n.task-priority-picker {\n  display: grid;\n  grid-template-columns: repeat(4, 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: 28px;\n  border-radius: 6px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n  border: 1px solid transparent;\n}\n\n.task-priority-picker button.p3 {\n  color: #5aa7f0;\n}\n\n.task-priority-picker button.p5 {\n  color: #d9a441;\n}\n\n.task-priority-picker button.p9 {\n  color: var(--m-danger);\n}\n\n.task-priority-picker button.active {\n  background: var(--m-bg-3);\n  border-color: var(--m-line);\n  color: var(--m-text);\n}\n\n.task-priority-picker button.p9.active {\n  background: rgba(242, 90, 90, 0.16);\n  border-color: rgba(242, 90, 90, 0.35);\n  color: var(--m-danger);\n}\n\n.task-priority-picker button.p5.active {\n  background: rgba(217, 164, 65, 0.16);\n  border-color: rgba(217, 164, 65, 0.35);\n  color: #d9a441;\n}\n\n.task-priority-picker button.p3.active {\n  background: rgba(90, 167, 240, 0.16);\n  border-color: rgba(90, 167, 240, 0.35);\n  color: #5aa7f0;\n}\n\n.task-priority.p3 {\n  background: #5aa7f0;\n}\n\n.task-priority-label.p9 {\n  color: var(--m-danger);\n  background: rgba(242, 90, 90, 0.12);\n}\n\n.task-priority-label.p5 {\n  color: #d9a441;\n  background: rgba(217, 164, 65, 0.12);\n}\n\n.task-priority-label.p3 {\n  color: #5aa7f0;\n  background: rgba(90, 167, 240, 0.12);\n}\n\n@media (max-width: 720px) {\n  .task-editor-columns {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n.mailharbor-spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: mailharbor-spin 0.7s linear infinite;\n  opacity: 0.8;\n  vertical-align: -2px;\n  flex: none;\n}\n\n@keyframes mailharbor-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.extract-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.extract-title {\n  width: 100%;\n  height: 30px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.extract-meta {\n  display: grid;\n  grid-template-columns: 150px 110px minmax(0, 1fr);\n  gap: 6px;\n}\n\n.extract-meta input,\n.extract-meta select {\n  height: 28px;\n  font-size: 11.5px;\n  width: 100%;\n}\n\n.extract-owner {\n  width: 100%;\n}\n\n@media (max-width: 720px) {\n  .extract-meta {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n/* ---------- conversation reading ---------- */\n\n.mailharbor-thread-view {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px 18px 32px;\n  background: var(--m-bg);\n}\n\n.mailharbor-thread-hint {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 4px 2px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n}\n\n.mailharbor-thread-msg {\n  border: 1px solid var(--m-line-soft);\n  border-radius: 12px;\n  background: var(--m-bg-1);\n  overflow: hidden;\n}\n\n.mailharbor-thread-msg.selected {\n  border-color: var(--m-accent);\n  box-shadow: 0 0 0 1px var(--m-accent-soft);\n}\n\n.mailharbor-thread-head {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  height: auto;\n  padding: 9px 12px;\n  text-align: left;\n  border-radius: 0;\n}\n\n.mailharbor-thread-head:hover {\n  background: var(--m-hover);\n}\n\n.thread-who {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.thread-who strong {\n  font-size: 12.5px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.thread-to {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-thread-preview {\n  padding: 0 14px 10px 47px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mailharbor-thread-body {\n  padding: 0 12px 12px;\n}\n\n.mailharbor-thread-frame {\n  height: 380px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 8px;\n  overflow: hidden;\n  background: #fff;\n}\n\n.mailharbor-thread-frame iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  background: #fff;\n}\n\n.thread-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 4px 12px;\n}\n\n@media (max-width: 900px) {\n  .thread-to {\n    display: none;\n  }\n}\n\n/* ---------- compact reader ---------- */\n\n.mailharbor-reader-head {\n  padding: 10px 16px 8px;\n  gap: 6px;\n}\n\n.mailharbor-reader-title h2 {\n  font-size: 15px;\n}\n\n.mailharbor-reader-meta.compact {\n  gap: 10px;\n  align-items: center;\n}\n\n.mailharbor-reader-meta.compact .who {\n  gap: 6px;\n}\n\n.mailharbor-reader-recipients {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 14px;\n  font-size: 11.5px;\n  color: var(--m-text-3);\n  padding: 0 2px;\n}\n\n.mailharbor-reader-actions {\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.mailharbor-reader-actions button {\n  height: 28px;\n  padding: 0 8px;\n}\n\n.mailharbor-attachments.compact {\n  display: flex;\n  gap: 6px;\n  padding: 6px 16px;\n  overflow-x: auto;\n  border-top: 1px solid var(--m-line-soft);\n  flex-wrap: nowrap;\n}\n\n.mailharbor-attachments.compact .mailharbor-attachment {\n  flex: none;\n  padding: 4px 8px;\n  border: 1px solid var(--m-line-soft);\n  border-radius: 6px;\n  max-width: 260px;\n}\n\n.mailharbor-reader-body {\n  flex: 1;\n  min-height: 0;\n}\n\n.thread-who {\n  flex-direction: row;\n  align-items: baseline;\n  gap: 6px;\n  min-width: 0;\n}\n\n.thread-who strong {\n  max-width: 45%;\n}\n\n.thread-who .small {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.thread-date {\n  flex: none;\n}\n\n.mailharbor button.mailharbor-thread-head {\n  justify-content: flex-start;\n  padding: 7px 10px;\n  gap: 8px;\n}\n\n.mailharbor-thread-preview {\n  padding: 0 12px 8px 40px;\n}\n\n.mailharbor-thread-frame {\n  height: clamp(220px, 42vh, 420px);\n}\n";
 
 // src/client/icon.tsx
 var import_react = require("react");
@@ -690,9 +690,11 @@ function summaryBlocks(text) {
 }
 function suggestionsOf(summary) {
   const match = /建议回复要点[：:]?\s*\n([\s\S]*)$/.exec(summary);
-  if (match === null) return "\u6839\u636E\u8FD9\u5C01\u90AE\u4EF6\u5199\u4E00\u5C01\u5F97\u4F53\u7684\u56DE\u590D\u3002";
+  if (match === null) return null;
+  const body = (match[1] ?? "").trim();
+  if (body === "") return null;
   return `\u6839\u636E\u8FD9\u4E9B\u5EFA\u8BAE\u5199\u56DE\u590D\uFF1A
-${(match[1] ?? "").trim()}`;
+${body}`;
 }
 var KIND_LABEL = {
   summary: "AI \u6458\u8981",
@@ -1054,15 +1056,18 @@ ${card.output}`
           (0, import_react5.createElement)(
             "div",
             { className: "mailharbor-ai-card-actions" },
-            card.kind === "summary" ? (0, import_react5.createElement)(
-              "button",
-              {
-                className: "ghost",
-                disabled: generating !== null,
-                onClick: () => void generate("reply", { instruction: suggestionsOf(card.output) })
-              },
-              "\u7528\u8FD9\u4E9B\u8981\u70B9\u56DE\u590D"
-            ) : null,
+            card.kind === "summary" ? (() => {
+              const suggestion = suggestionsOf(card.output);
+              return suggestion === null ? (0, import_react5.createElement)("span", { className: "small muted" }, "\u672A\u5EFA\u8BAE\u56DE\u590D") : (0, import_react5.createElement)(
+                "button",
+                {
+                  className: "ghost",
+                  disabled: generating !== null,
+                  onClick: () => void generate("reply", { instruction: suggestion })
+                },
+                "\u7528\u8FD9\u4E9B\u8981\u70B9\u56DE\u590D"
+              );
+            })() : null,
             card.kind === "reply" || card.kind === "translate" ? (0, import_react5.createElement)(
               "button",
               { className: "ghost", onClick: () => onInsert(replyInit(card)) },
@@ -1988,6 +1993,7 @@ function Reader({
   const [loadImages, setLoadImages] = (0, import_react8.useState)(false);
   const [details, setDetails] = (0, import_react8.useState)({});
   const [expanded, setExpanded] = (0, import_react8.useState)([detail.id]);
+  const [detailOpen, setDetailOpen] = (0, import_react8.useState)(false);
   const selectedCard = (0, import_react8.useRef)(null);
   const [busy, setBusy] = (0, import_react8.useState)(false);
   const [error, setError] = (0, import_react8.useState)("");
@@ -2059,24 +2065,34 @@ function Reader({
           (0, import_react8.createElement)(Icon, { name: "check" })
         )
       ),
-      (0, import_react8.createElement)(
+      threaded ? null : (0, import_react8.createElement)(
         "div",
-        { className: "mailharbor-reader-meta" },
+        { className: "mailharbor-reader-meta compact" },
         (0, import_react8.createElement)(
           "span",
           { className: "who" },
           (0, import_react8.createElement)(Avatar, { email: detail.from.address, size: 22 }),
           (0, import_react8.createElement)("strong", null, detail.from.name !== "" ? detail.from.name : detail.from.address),
-          detail.from.name !== "" ? (0, import_react8.createElement)("span", null, `<${detail.from.address}>`) : null
+          detail.from.name !== "" ? (0, import_react8.createElement)("span", { className: "small muted" }, detail.from.address) : null
         ),
-        (0, import_react8.createElement)("span", null, longDate(detail.date)),
-        detail.backedUp === false ? (0, import_react8.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null
+        (0, import_react8.createElement)("span", { className: "small muted" }, longDate(detail.date)),
+        detail.backedUp === false ? (0, import_react8.createElement)("span", { className: "badge warn" }, "\u672A\u5907\u4EFD") : null,
+        (0, import_react8.createElement)(
+          "button",
+          {
+            className: "subtle small",
+            onClick: () => setDetailOpen(!detailOpen),
+            title: "\u6536\u4EF6\u4EBA\u4E0E\u6284\u9001"
+          },
+          detailOpen ? "\u6536\u8D77\u8BE6\u60C5" : "\u8BE6\u60C5",
+          (0, import_react8.createElement)(Icon, { name: detailOpen ? "chevronLeft" : "chevronRight", size: 12 })
+        )
       ),
-      (0, import_react8.createElement)(
+      threaded || !detailOpen ? null : (0, import_react8.createElement)(
         "div",
-        { className: "mailharbor-reader-meta" },
-        (0, import_react8.createElement)("span", null, `\u6536\u4EF6\u4EBA: ${addressLine(detail.to) || "\u2014"}`),
-        detail.cc.length === 0 ? null : (0, import_react8.createElement)("span", null, `\u6284\u9001: ${addressLine(detail.cc)}`)
+        { className: "mailharbor-reader-recipients" },
+        (0, import_react8.createElement)("span", null, `\u6536\u4EF6\u4EBA\uFF1A${addressLine(detail.to) || "\u2014"}`),
+        detail.cc.length === 0 ? null : (0, import_react8.createElement)("span", null, `\u6284\u9001\uFF1A${addressLine(detail.cc)}`)
       ),
       (0, import_react8.createElement)(
         "div",
@@ -2165,14 +2181,9 @@ function Reader({
               "span",
               { className: "thread-who" },
               (0, import_react8.createElement)("strong", null, who.name !== "" ? who.name : who.address),
-              (0, import_react8.createElement)("span", { className: "small muted" }, who.address)
-            ),
-            (0, import_react8.createElement)(
-              "span",
-              { className: "small muted thread-to" },
-              sentItem ? `\u53D1\u7ED9 ${addressLine(item.to)}` : `\u53D1\u7ED9 ${addressLine(item.to)}`
+              (0, import_react8.createElement)("span", { className: "small muted" }, `\u53D1\u7ED9 ${addressLine(item.to)}`)
             ),
-            (0, import_react8.createElement)("span", { className: "small muted" }, longDate(item.date)),
+            (0, import_react8.createElement)("span", { className: "small muted thread-date" }, longDate(item.date)),
             expandedItem ? (0, import_react8.createElement)(Icon, { name: "chevronLeft", size: 14 }) : (0, import_react8.createElement)(Icon, { name: "chevronRight", size: 14 })
           ),
           expandedItem ? (0, import_react8.createElement)(
@@ -2210,9 +2221,9 @@ function Reader({
         referrerPolicy: "no-referrer"
       }) : (0, import_react8.createElement)("pre", null, detail.text !== "" ? detail.text : "\uFF08\u65E0\u6B63\u6587\uFF09")
     ),
-    detail.attachments.length === 0 ? null : (0, import_react8.createElement)(
+    threaded || detail.attachments.length === 0 ? null : (0, import_react8.createElement)(
       "div",
-      { className: "mailharbor-attachments" },
+      { className: "mailharbor-attachments compact" },
       detail.attachments.map(
         (file) => (0, import_react8.createElement)(
           "a",
@@ -5191,7 +5202,7 @@ function TaskEditor({
 }
 
 // src/client/index.tsx
-var VERSION = "0.9.0";
+var VERSION = "0.10.0";
 var inject = ["slots"];
 var PANEL_ID = "mailharbor";
 var TASKS_PANEL_ID = "mailharbor-tasks";