/* ============================================================================
 * 统一通知样式 notify.css —— 与 notify.js 配套
 * 颜色全部引用 --c-* token（由 assets/css/style.css 提供）
 * 仅用 SVG 描边图标，禁 emoji。
 * ========================================================================== */

/* ---------- 宿主容器（toast 层）---------- */
.notify-host {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  z-index: 4000;
  pointer-events: none;
}

/* ---------- 单条通知（白卡 + 圆形彩色图标 chip + 两行文案，与系统消息/通知中心一致）---------- */
.notify-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 240px;
  max-width: 88vw;
  box-sizing: border-box;
  padding: 14px 14px 14px 14px;
  background: var(--c-bg, #ffffff);
  color: var(--c-text, #1f2329);
  border: 1px solid var(--c-border, #e5e5e5);
  border-radius: var(--c-radius-md, 14px);
  box-shadow: var(--c-shadow-raised, 0 8px 24px rgba(15, 23, 42, 0.14));
  font-size: 14px;
  line-height: 1.45;
  pointer-events: auto;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.notify-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.notify-item.hide {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
}

/* 圆形彩色图标 chip（与通知中心 .notif-ico / 系统消息模块视觉对齐） */
.notify-ic {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ntf-tone, var(--c-info)) 14%, #fff);
  color: var(--ntf-tone, var(--c-info));
}
.notify-ic .notify-svg {
  width: 20px;
  height: 20px;
}

/* 文本主体：标题（加粗）+ 可选描述（muted 小字） */
.notify-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 4px;
}
.notify-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text, #1f2329);
  word-break: break-word;
}
.notify-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-2, #8a8f99);
  word-break: break-word;
}

.notify-action {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 4px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--ntf-tone, var(--c-info));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.notify-action:active {
  opacity: 0.7;
}

/* 关闭按钮（SVG 描边 ×，非 emoji） */
.notify-close {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  margin: -2px -2px 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--c-text-2, #8a8f99);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.notify-close:hover {
  background: color-mix(in srgb, var(--c-text-2, #8a8f99) 12%, #fff);
  color: var(--c-text, #1f2329);
}
.notify-close svg {
  width: 16px;
  height: 16px;
}

/* 底部进度条：展示自动消失剩余时间 */
.notify-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--ntf-tone, var(--c-info));
  opacity: 0.5;
  transform-origin: left center;
  transform: scaleX(0);
  animation: notify-progress-shrink linear forwards;
  animation-play-state: paused;
}
.notify-progress.run {
  animation-play-state: running;
}
@keyframes notify-progress-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ---------- 语义色映射（tone -> 具体 --c-* 语义色）---------- */
.notify-tone-success { --ntf-tone: var(--c-success, #2ba471); }
.notify-tone-warning { --ntf-tone: var(--c-warning, #e37318); }
.notify-tone-danger  { --ntf-tone: var(--c-danger, #e54545); }
.notify-tone-info    { --ntf-tone: var(--c-info, #0b6e94); }

/* ---------- 统一确认弹层（替代原生 confirm）---------- */
.notify-confirm-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 10002;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.notify-confirm-mask.show {
  opacity: 1;
}
.notify-confirm-card {
  width: min(86vw, 360px);
  box-sizing: border-box;
  padding: 20px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--ntf-tone, var(--c-warning));
  border-radius: var(--c-radius-lg, 16px);
  box-shadow: var(--c-shadow-raised, 0 10px 30px rgba(0, 0, 0, 0.2));
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}
.notify-confirm-mask.show .notify-confirm-card {
  transform: translateY(0) scale(1);
}
.notify-confirm-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
}
.notify-confirm-msg {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-2);
}
.notify-confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: flex-end;
}
.notify-confirm-btn {
  padding: 9px 18px;
  font-size: 14px;
  border-radius: var(--c-radius-md, 12px);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.notify-confirm-btn:active {
  opacity: 0.75;
}
.notify-confirm-ok {
  background: var(--ntf-tone, var(--c-info));
  border-color: transparent;
  color: #ffffff;
}
.notify-confirm-cancel {
  color: var(--c-text-2);
}

/* 安全区域适配（刘海屏底部按钮） */
@supports (padding: env(safe-area-inset-bottom)) {
  .notify-confirm-actions {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ---------- 空态 / 错误态图标（统一 SVG 描边，替代 emoji，符合铁律）---------- */
.empty-icon,
.msg-error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-icon svg,
.msg-error-icon svg {
  width: 48px;
  height: 48px;
  color: var(--c-text-2);
}
.msg-error-icon svg {
  color: var(--c-warning);
}

/* 其它空态 / 状态图标容器（统一 SVG 描边，替代 emoji） */
.mybiz-empty-ico,
.detail-off-ico {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mybiz-empty-ico svg,
.detail-off-ico svg {
  width: 48px;
  height: 48px;
  color: var(--c-text-2);
}
.detail-off-ico svg {
  width: 28px;
  height: 28px;
  color: var(--c-warning);
}