/* MailHub Local — Shared components
   徽章、状态点、状态徽章、附件卡片、按钮、表单字段、toast 等。
*/

/* 主色高亮（导航选中项） */
.surface-highlight {
  background-color: color-mix(in oklab, var(--mail-primary) 10%, transparent);
  color: var(--mail-primary);
}

/* 未读小圆点 */
.unread-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--mail-radius-pill);
  background-color: var(--mail-primary);
  flex-shrink: 0;
}

/* 状态徽章 */
.status-badge {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--mail-radius-pill);
  font-size: 0.75rem; font-weight: 500; line-height: 1.25rem;
}
.status-success {
  background-color: color-mix(in oklab, var(--mail-state-success) 12%, transparent);
  color: var(--mail-state-success);
}
.status-info {
  background-color: color-mix(in oklab, var(--mail-state-info) 12%, transparent);
  color: var(--mail-state-info);
}
.status-warning {
  background-color: color-mix(in oklab, var(--mail-state-warning) 12%, transparent);
  color: var(--mail-state-warning);
}
.status-error {
  background-color: color-mix(in oklab, var(--mail-state-error) 12%, transparent);
  color: var(--mail-state-error);
}
.status-muted {
  background-color: var(--mail-muted);
  color: var(--mail-muted-foreground);
}

/* 未读数徽章（侧边栏/标题） */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; padding: 0 0.375rem;
  border-radius: var(--mail-radius-pill);
  font-size: 0.75rem; font-weight: 500; line-height: 1.25rem;
  background-color: var(--mail-primary);
  color: var(--mail-primary-foreground);
}
.count-badge.muted { background-color: var(--mail-muted); color: var(--mail-muted-foreground); }

/* 附件卡片 */
.attachment-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem; border-radius: var(--mail-radius-lg);
  border: 1px solid var(--mail-border);
  background-color: var(--mail-card);
  transition: background-color 150ms ease;
}
.attachment-card:hover { background-color: var(--mail-muted); }
.attachment-icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--mail-radius-md);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* 表单字段 */
.form-field {
  width: 100%;
  border-radius: var(--mail-radius-md);
  border: 1px solid var(--mail-border);
  background-color: var(--mail-surface);
  color: var(--mail-ink);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem; line-height: 1.25rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-field::placeholder { color: var(--mail-ink-3); }
.form-field:focus {
  outline: none;
  border-color: var(--mail-primary);
  box-shadow: 0 0 0 2px var(--mail-ring);
}
.form-field:invalid:not(:placeholder-shown) { border-color: var(--mail-state-error); }
.form-label {
  display: block; font-size: 0.875rem; font-weight: 500;
  color: var(--mail-ink); margin-bottom: 0.25rem;
}

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: var(--mail-radius-md);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  border: 1px solid transparent;
}
.btn-primary {
  background-color: var(--mail-primary); color: var(--mail-primary-foreground);
}
.btn-primary:hover { background-color: var(--mail-primary-700); }
.btn-outline {
  background-color: var(--mail-card); color: var(--mail-foreground);
  border-color: var(--mail-border);
}
.btn-outline:hover { background-color: var(--mail-muted); }
.btn-danger {
  background-color: var(--mail-card); color: var(--mail-destructive);
  border-color: var(--mail-border);
}
.btn-danger:hover { background-color: color-mix(in oklab, var(--mail-destructive) 5%, transparent); }
.btn-ghost {
  background-color: transparent; color: var(--mail-muted-foreground);
}
.btn-ghost:hover { background-color: var(--mail-muted); color: var(--mail-foreground); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* toast 提示 */
#toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 100;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 240px; max-width: 360px;
  padding: 0.625rem 0.875rem;
  border-radius: var(--mail-radius-md);
  background-color: var(--mail-popover);
  color: var(--mail-popover-foreground);
  border: 1px solid var(--mail-border);
  box-shadow: var(--mail-shadow-2);
  font-size: 0.875rem;
  animation: toast-in 0.18s ease;
}
.toast.error { border-color: var(--mail-state-error); color: var(--mail-state-error); }
.toast.success { border-color: var(--mail-state-success); color: var(--mail-state-success); }
@keyframes toast-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* ====== 草稿相关（composer 内嵌） ====== */

/* 草稿保存状态 chip：dot + 文本 + 可选时间 */
.draft-status-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500; line-height: 1.25rem;
  background-color: var(--mail-muted);
  color: var(--mail-muted-foreground);
  white-space: nowrap; max-width: 100%;
}
.draft-status-chip .dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background-color: currentColor; flex-shrink: 0;
}
.draft-status-chip.saving   { color: var(--mail-state-warning); }
.draft-status-chip.saved    { color: var(--mail-state-success); }
.draft-status-chip.error    { color: var(--mail-state-error); }
.draft-status-chip.dirty    { color: var(--mail-muted-foreground); }
.draft-status-chip.saving .dot { animation: dot-pulse 1s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* 草稿内嵌抽屉：在 composer 右侧滑入，桌面不遮挡表单，手机端覆盖。
   结构：父 #composer-mask > .bg-card 相对定位，内放 #c-drawer（绝对定位） */
#composer-mask > div { position: relative; }
#c-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 85vw;
  background-color: var(--mail-card);
  border-left: 1px solid var(--mail-border);
  border-top-right-radius: var(--mail-radius-lg);
  border-bottom-right-radius: var(--mail-radius-lg);
  box-shadow: -8px 0 30px -10px rgba(17,24,39,0.18);
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: flex; flex-direction: column;
  z-index: 2;
  overflow: hidden;
}
#c-drawer.open { transform: translateX(0); }
#c-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--mail-border);
  flex-shrink: 0;
}
#c-drawer-header h3 {
  font-size: 0.875rem; font-weight: 600; color: var(--mail-foreground); margin: 0;
}
#c-drawer-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 0.625rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
#c-drawer-empty {
  padding: 2rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem;
  color: var(--mail-muted-foreground); font-size: 0.875rem; text-align: center;
}
.c-drawer-item {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--mail-border);
  background-color: var(--mail-background);
  border-radius: var(--mail-radius-md);
  cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}
.c-drawer-item:hover {
  border-color: color-mix(in oklab, var(--mail-primary) 35%, var(--mail-border));
  background-color: color-mix(in oklab, var(--mail-primary) 4%, transparent);
}
.c-drawer-item .head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.25rem;
  margin-bottom: 0.125rem;
}
.c-drawer-item .subject {
  font-size: 0.875rem; font-weight: 600; color: var(--mail-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0;
}
.c-drawer-item .mode-chip {
  font-size: 0.6875rem; font-weight: 600;
  padding: 0.0625rem 0.375rem; border-radius: 9999px;
  flex-shrink: 0;
}
.c-drawer-item .mode-chip.new      { background: color-mix(in srgb, var(--mail-primary) 10%, transparent); color: var(--mail-primary); }
.c-drawer-item .mode-chip.reply    { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; }
.c-drawer-item .mode-chip.replyAll { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; }
.c-drawer-item .mode-chip.forward  { background: color-mix(in srgb, #0891b2 12%, transparent); color: #0891b2; }
.c-drawer-item .meta {
  font-size: 0.75rem; color: var(--mail-muted-foreground);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.25rem;
}
.c-drawer-item .meta .to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-drawer-item .actions {
  margin-top: 0.5rem;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.375rem;
}
.c-drawer-item .actions button {
  padding: 0.1875rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--mail-radius-sm);
  border: 1px solid var(--mail-border);
  background: var(--mail-card);
  color: var(--mail-foreground);
  cursor: pointer;
}
.c-drawer-item .actions button:hover { background: var(--mail-muted); }
.c-drawer-item .actions button.del {
  color: var(--mail-destructive);
  border-color: color-mix(in oklab, var(--mail-destructive) 40%, var(--mail-border));
}
.c-drawer-item .actions button.del:hover {
  background-color: color-mix(in oklab, var(--mail-destructive) 6%, transparent);
}

/* composer 顶栏的"草稿(N)"按钮 */
.c-draft-list-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem; font-weight: 500;
  border-radius: var(--mail-radius-pill);
  background-color: var(--mail-muted);
  color: var(--mail-foreground);
  border: 1px solid var(--mail-border);
  cursor: pointer;
}
.c-draft-list-btn:hover {
  background-color: color-mix(in oklab, var(--mail-primary) 8%, var(--mail-muted));
  color: var(--mail-primary);
  border-color: color-mix(in oklab, var(--mail-primary) 40%, var(--mail-border));
}
.c-draft-list-btn .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: 9999px;
  background-color: var(--mail-primary);
  color: var(--mail-primary-foreground);
  font-size: 0.6875rem; font-weight: 600;
}

/* 响应式：小屏抽屉变覆盖层，避免挤压表单 */
@media (max-width: 768px) {
  #c-drawer {
    width: 88vw; max-width: 360px;
    top: 0; right: 0; left: auto; bottom: 0;
    border-radius: 0;
  }
}

/* 顶栏保存草稿按钮（和取消/发送同一行） */
.c-save-draft-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem; font-weight: 500;
  border-radius: var(--mail-radius-md);
  background-color: var(--mail-card); color: var(--mail-foreground);
  border: 1px solid var(--mail-border);
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.c-save-draft-btn:hover {
  background-color: color-mix(in oklab, var(--mail-primary) 8%, var(--mail-card));
  color: var(--mail-primary);
  border-color: color-mix(in oklab, var(--mail-primary) 45%, var(--mail-border));
}