/**
 * 统一右上角提示外观（2026-10-07）
 *
 * 把系统里所有提示都变成「环境已就绪」那张卡片的样子：
 *   · React 侧 sonner：[data-sonner-toaster] / [data-sonner-toast]
 *   · mf-next 侧 mf-toast.js：.mf-toast
 *   · 启动面板自带的 MatrixToast：.mf-toast-v2（本来就是同一套设计，只对齐变量）
 *
 * 视觉：330px / min-height 76px / radius 14 / 细边 + 柔影 / 32px 圆形图标 /
 *       标题 14px 600 + 描述 12.5px muted / 底部 4s 倒计时线（hover 暂停）。
 */

:root {
  --mf-toast-w: 330px;
  --mf-toast-radius: 14px;
  --mf-toast-bg: var(--shell-card, #ffffff);
  --mf-toast-border: var(--shell-border, #e2e8f0);
  --mf-toast-title: var(--shell-fg, #0f172a);
  --mf-toast-desc: var(--shell-muted-fg, #64748b);
  --mf-toast-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
  --mf-toast-success: #22c55e;
  --mf-toast-error: #ef4444;
  --mf-toast-warn: #f59e0b;
}

@keyframes mf-toast-line {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ─────────────── sonner（React 全局提示） ─────────────── */
[data-sonner-toaster] {
  --width: var(--mf-toast-w) !important;
  --gap: 10px !important;
  --offset-top: 64px !important;
  --offset-right: 22px !important;
}

[data-sonner-toast] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: var(--mf-toast-w) !important;
  min-height: 76px !important;
  padding: 14px 16px !important;
  border-radius: var(--mf-toast-radius) !important;
  background: var(--mf-toast-bg) !important;
  border: 1px solid var(--mf-toast-border) !important;
  box-shadow: var(--mf-toast-shadow) !important;
  overflow: hidden !important;
  color: var(--mf-toast-title) !important;
}

[data-sonner-toast][data-type="success"] {
  background: #f2fbf5 !important;
  border-color: #bbf0cd !important;
}

[data-sonner-toast][data-type="error"] {
  background: #fef4f4 !important;
  border-color: #f5c2c2 !important;
}

[data-sonner-toast][data-type="warning"] {
  background: #fffaf0 !important;
  border-color: #f7dfae !important;
}

[data-sonner-toast][data-type="info"] {
  background: #f4f8ff !important;
  border-color: #cfe0fb !important;
}

[data-sonner-toast] [data-icon] {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: var(--mf-toast-success) !important;
}

[data-sonner-toast][data-type="error"] [data-icon] { background: var(--mf-toast-error) !important; }
[data-sonner-toast][data-type="warning"] [data-icon] { background: var(--mf-toast-warn) !important; }
[data-sonner-toast][data-type="info"] [data-icon] { background: rgb(var(--app-primary-rgb, 37 99 235)) !important; }

[data-sonner-toast] [data-icon] svg {
  width: 16px !important;
  height: 16px !important;
  color: #ffffff !important;
  fill: currentColor !important;
}

[data-sonner-toast] [data-content] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

[data-sonner-toast] [data-title] {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--mf-toast-title) !important;
}

[data-sonner-toast] [data-description] {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--mf-toast-desc) !important;
  opacity: 1 !important;
}

[data-sonner-toast] [data-close-button] {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  transform: none !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mf-toast-desc) !important;
}

[data-sonner-toast] [data-close-button]:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--mf-toast-title) !important;
}

/* 底部倒计时线：4s（hover 暂停，与 sonner 自身计时口径一致） */
[data-sonner-toast]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: var(--mf-toast-success);
  animation: mf-toast-line 4s linear forwards;
}

[data-sonner-toast][data-type="error"]::after { background: var(--mf-toast-error); }
[data-sonner-toast][data-type="warning"]::after { background: var(--mf-toast-warn); }
[data-sonner-toast][data-type="info"]::after { background: rgb(var(--app-primary-rgb, 37 99 235)); }
[data-sonner-toast]:hover::after { animation-play-state: paused; }
[data-sonner-toast][data-expanded="true"]::after { animation-play-state: paused; }

.dark [data-sonner-toast][data-type="success"] { background: rgba(34, 197, 94, 0.10) !important; border-color: rgba(34, 197, 94, 0.32) !important; }
.dark [data-sonner-toast][data-type="error"] { background: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.32) !important; }
.dark [data-sonner-toast][data-type="warning"] { background: rgba(245, 158, 11, 0.10) !important; border-color: rgba(245, 158, 11, 0.32) !important; }
.dark [data-sonner-toast][data-type="info"] { background: rgba(37, 99, 235, 0.12) !important; border-color: rgba(37, 99, 235, 0.32) !important; }

/* ─────────────── mf-next/mf-toast.js（模块侧提示） ─────────────── */
#mf-toast-host {
  position: fixed !important;
  top: 64px !important;
  right: 22px !important;
  z-index: 4300 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  pointer-events: none !important;
}

.mf-toast {
  position: relative !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: var(--mf-toast-w) !important;
  min-height: 76px !important;
  padding: 14px 16px !important;
  border-radius: var(--mf-toast-radius) !important;
  background: var(--mf-toast-bg) !important;
  border: 1px solid var(--mf-toast-border) !important;
  box-shadow: var(--mf-toast-shadow) !important;
  color: var(--mf-toast-title) !important;
  overflow: hidden !important;
}

.mf-toast--success { background: #f2fbf5 !important; border-color: #bbf0cd !important; }
.mf-toast--error, .mf-toast--warn { background: #fef4f4 !important; border-color: #f5c2c2 !important; }
.mf-toast--info { background: #f4f8ff !important; border-color: #cfe0fb !important; }

.dark .mf-toast--success { background: rgba(34, 197, 94, 0.10) !important; border-color: rgba(34, 197, 94, 0.32) !important; }
.dark .mf-toast--error, .dark .mf-toast--warn { background: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.32) !important; }
.dark .mf-toast--info { background: rgba(37, 99, 235, 0.12) !important; border-color: rgba(37, 99, 235, 0.32) !important; }

.mf-toast__icon {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: var(--mf-toast-success) !important;
}

.mf-toast--error .mf-toast__icon, .mf-toast--warn .mf-toast__icon { background: var(--mf-toast-error) !important; }
.mf-toast--info .mf-toast__icon { background: rgb(var(--app-primary-rgb, 37 99 235)) !important; }

.mf-toast__icon svg { width: 16px !important; height: 16px !important; }

.mf-toast__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--mf-toast-title) !important;
}

.mf-toast__count {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--mf-toast-desc) !important;
}

.mf-toast::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: var(--mf-toast-success);
  animation: mf-toast-line 4s linear forwards;
}

.mf-toast--error::after, .mf-toast--warn::after { background: var(--mf-toast-error); }
.mf-toast--info::after { background: rgb(var(--app-primary-rgb, 37 99 235)); }
.mf-toast:hover::after { animation-play-state: paused; }

/* ─────────────── 启动面板自带 MatrixToast 对齐 ─────────────── */
.mf-toast-v2-host { top: 64px !important; right: 22px !important; }

/* ─────────────── AI 助手内嵌提示（右下）对齐 ─────────────── */
.mfai-toast {
  right: 22px !important;
  bottom: 22px !important;
  width: var(--mf-toast-w) !important;
  padding: 14px 16px !important;
  border-radius: var(--mf-toast-radius) !important;
  box-shadow: var(--mf-toast-shadow) !important;
}
.mfai-toast__title { font-size: 14px !important; font-weight: 600 !important; }
.mfai-toast__body { margin-top: 3px !important; font-size: 12.5px !important; }

.mf-toast__close {
  flex: 0 0 auto !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--mf-toast-desc) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
.mf-toast__close:hover { background: rgba(15, 23, 42, 0.06) !important; color: var(--mf-toast-title) !important; }