/*!
 * toast.css —— 轻量操作反馈提示（零依赖，配合 toast.js 使用）
 *
 * 约定：
 *   1. 只做「反馈」，不改任何既有布局：toast 用 position: fixed 脱离文档流，
 *      不占位、不挤压、不产生滚动条。
 *   2. 只用 CSS 变量（--panel / --text / --border / --brand …），
 *      与页面其它卡片同一套主题，深色模式自动跟随。
 *   3. 尊重系统「减少动态效果」偏好：开了 reduced-motion 就没有位移与淡入。
 */
:root {
  --toast-z: 9999;
  --toast-gap: 10px;
  --toast-radius: 10px;
}

/* 容器：右下角固定，pointer-events: none 保证不挡住底下的按钮 */
#toast-layer {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--toast-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--toast-gap);
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  pointer-events: auto; /* toast 自身可点，便于手动关闭 */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--toast-radius);
  background: var(--panel, #fff);
  color: var(--text, #111);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  font-size: 13.5px;
  line-height: 1.5;
  /* 唯一的动效：出现/消失的淡入与轻微位移（非关键动画，可随时去掉） */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

.toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.toast__msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast__act {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 2px 4px;
  border-radius: 6px;
  color: var(--brand, #2563eb);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.toast__act:hover {
  background: var(--brand-soft, rgba(37, 99, 235, .08));
}

/* 语义色：与页面 .notice 的 success/error 保持一致的成功/失败观感 */
.toast--ok {
  border-color: var(--ok, #10b981);
  background: var(--ok-soft, rgba(16, 185, 129, .1));
  color: var(--ok-text, #065f46);
}

.toast--err {
  border-color: var(--error, #dc2626);
  background: var(--error-soft, rgba(220, 38, 38, .08));
  color: var(--error-text, #991b1b);
}

.toast:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
}

.toast__act:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
    transform: none;
  }
}

/* 窄屏：贴底通栏，避免遮住底部操作按钮 */
@media (max-width: 560px) {
  #toast-layer {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
    align-items: stretch;
  }
}