/**
 * PZNotify - 高级通知提示组件样式
 * 萍乡中学校园论坛 - 符合项目设计规范
 * 
 * 特性:
 * - 10+ 种提示类型
 * - 6 种显示位置
 * - 5 种动画效果
 * - 深色模式支持
 * - 响应式设计
 * - 进度条显示
 * - 操作按钮支持
 */

/* ============================================
   基础变量
   ============================================ */
:root {
  /* 提示类型颜色 */
  --pzn-success: var(--pz-green-500, #3D6A4C);
  --pzn-success-bg: var(--pz-green-50, #F0FDF4);
  --pzn-success-border: var(--pz-green-200, #BBF7D0);
  
  --pzn-error: var(--pz-red-500, #C14D3D);
  --pzn-error-bg: var(--pz-red-50, #FEF2F2);
  --pzn-error-border: var(--pz-red-200, #FECACA);
  
  --pzn-warning: var(--pz-red-400, #F87171);
  --pzn-warning-bg: var(--pz-red-50, #FEF2F2);
  --pzn-warning-border: var(--pz-red-100, #FEE2E2);
  
  --pzn-info: var(--pz-purple-500, #B03A72);
  --pzn-info-bg: var(--pz-purple-50, #FDF2F8);
  --pzn-info-border: var(--pz-purple-200, #FBCFE8);
  
  --pzn-primary: var(--pz-purple-500, #B03A72);
  --pzn-primary-bg: var(--pz-purple-50, #FDF2F8);
  --pzn-primary-border: var(--pz-purple-200, #FBCFE8);
  
  --pzn-secondary: var(--neutral-500, #71707A);
  --pzn-secondary-bg: var(--neutral-100, #F4F3F6);
  --pzn-secondary-border: var(--neutral-200, #E5E4E8);
  
  --pzn-gold: var(--pz-gold-500, #D1AC34);
  --pzn-gold-bg: #FFFBEB;
  --pzn-gold-border: #FDE68A;
  
  --pzn-study: var(--pz-green-500, #3D6A4C);
  --pzn-study-bg: var(--pz-green-50, #F0FDF4);
  
  /* 尺寸变量 */
  --pzn-radius: var(--radius-md, 8px);
  --pzn-radius-lg: var(--radius-lg, 12px);
  --pzn-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  --pzn-shadow-xl: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
  
  /* 动画时长 */
  --pzn-duration-fast: 150ms;
  --pzn-duration-base: 250ms;
  --pzn-duration-slow: 350ms;
}

/* 深色模式变量 */
[data-theme="dark"] {
  --pzn-success: var(--pz-green-400, #4ADE80);
  --pzn-success-bg: var(--pz-green-900, #213A28);
  --pzn-success-border: var(--pz-green-700, #2F523A);
  
  --pzn-error: var(--pz-red-400, #F87171);
  --pzn-error-bg: var(--pz-red-900, #722E25);
  --pzn-error-border: var(--pz-red-700, #9A3E31);
  
  --pzn-warning: var(--pz-red-300, #FCA5A5);
  --pzn-warning-bg: var(--pz-red-900, #722E25);
  --pzn-warning-border: var(--pz-red-700, #9A3E31);
  
  --pzn-info: var(--pz-purple-400, #F472B6);
  --pzn-info-bg: var(--pz-purple-900, #642242);
  --pzn-info-border: var(--pz-purple-700, #8A2E5A);
  
  --pzn-primary: var(--pz-purple-400, #F472B6);
  --pzn-primary-bg: var(--pz-purple-900, #642242);
  --pzn-primary-border: var(--pz-purple-700, #8A2E5A);
  
  --pzn-secondary: var(--neutral-400, #A1A0AA);
  --pzn-secondary-bg: var(--neutral-800, #27262B);
  --pzn-secondary-border: var(--neutral-700, #44434A);
  
  --pzn-gold: var(--pz-gold-500, #D1AC34);
  --pzn-gold-bg: #451A03;
  --pzn-gold-border: #92400E;
}

/* ============================================
   通知容器
   ============================================ */
.pz-notify-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  pointer-events: none;
  max-width: 100%;
  box-sizing: border-box;
}

/* 六个定位位置 */
.pz-notify-container[data-position="top-left"] {
  top: 0;
  left: 0;
  align-items: flex-start;
}

.pz-notify-container[data-position="top-center"] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.pz-notify-container[data-position="top-right"] {
  top: 0;
  right: 0;
  align-items: flex-end;
}

.pz-notify-container[data-position="bottom-left"] {
  bottom: 0;
  left: 0;
  align-items: flex-start;
  flex-direction: column-reverse;
}

.pz-notify-container[data-position="bottom-center"] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}

.pz-notify-container[data-position="bottom-right"] {
  bottom: 0;
  right: 0;
  align-items: flex-end;
  flex-direction: column-reverse;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .pz-notify-container {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100%;
    padding: 8px;
    align-items: stretch !important;
  }
  
  .pz-notify-container[data-position^="bottom"] {
    flex-direction: column-reverse;
  }
}

/* ============================================
   通知项基础样式
   ============================================ */
.pz-notify {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 44px 14px 16px;
  background: var(--bg-tertiary, #FFFFFF);
  border-radius: var(--pzn-radius);
  box-shadow: var(--pzn-shadow);
  border-left: 4px solid transparent;
  min-width: 280px;
  max-width: 400px;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  transition: all var(--pzn-duration-base) ease;
}

@media (max-width: 640px) {
  .pz-notify {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
}

/* 通知类型样式 */
.pz-notify[data-type="success"] {
  border-left-color: var(--pzn-success);
  background: var(--pzn-success-bg);
}

.pz-notify[data-type="error"] {
  border-left-color: var(--pzn-error);
  background: var(--pzn-error-bg);
}

.pz-notify[data-type="warning"] {
  border-left-color: var(--pzn-warning);
  background: var(--pzn-warning-bg);
}

.pz-notify[data-type="info"] {
  border-left-color: var(--pzn-info);
  background: var(--pzn-info-bg);
}

.pz-notify[data-type="primary"] {
  border-left-color: var(--pzn-primary);
  background: var(--pzn-primary-bg);
}

.pz-notify[data-type="secondary"] {
  border-left-color: var(--pzn-secondary);
  background: var(--pzn-secondary-bg);
}

.pz-notify[data-type="gold"] {
  border-left-color: var(--pzn-gold);
  background: var(--pzn-gold-bg);
}

.pz-notify[data-type="study"] {
  border-left-color: var(--pzn-study);
  background: var(--pzn-study-bg);
}

/* 无图标模式 */
.pz-notify[data-type="plain"] {
  border-left-color: var(--neutral-300, #D4D3D9);
}

/* ============================================
   图标样式
   ============================================ */
.pz-notify__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.pz-notify__icon svg {
  width: 14px;
  height: 14px;
}

/* 各类型图标颜色 */
.pz-notify[data-type="success"] .pz-notify__icon {
  color: var(--pzn-success);
}

.pz-notify[data-type="error"] .pz-notify__icon {
  color: var(--pzn-error);
}

.pz-notify[data-type="warning"] .pz-notify__icon {
  color: var(--pzn-warning);
}

.pz-notify[data-type="info"] .pz-notify__icon,
.pz-notify[data-type="primary"] .pz-notify__icon {
  color: var(--pzn-primary);
}

.pz-notify[data-type="secondary"] .pz-notify__icon {
  color: var(--pzn-secondary);
}

.pz-notify[data-type="gold"] .pz-notify__icon {
  color: var(--pzn-gold);
}

.pz-notify[data-type="study"] .pz-notify__icon {
  color: var(--pzn-study);
}

/* ============================================
   内容区域
   ============================================ */
.pz-notify__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pz-notify__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #44434A);
  line-height: 1.4;
  margin: 0;
}

.pz-notify__message {
  font-size: 13px;
  color: var(--text-secondary, #55545C);
  line-height: 1.5;
  margin: 0;
  word-wrap: break-word;
}

/* 深色模式文字 */
[data-theme="dark"] .pz-notify__title {
  color: var(--neutral-100, #F4F3F6);
}

[data-theme="dark"] .pz-notify__message {
  color: var(--neutral-300, #D4D3D9);
}

/* ============================================
   关闭按钮
   ============================================ */
.pz-notify__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-400, #A1A0AA);
  border-radius: 6px;
  transition: all var(--pzn-duration-fast) ease;
  padding: 0;
}

.pz-notify__close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-primary, #44434A);
}

.pz-notify__close svg {
  width: 18px;
  height: 18px;
}

[data-theme="dark"] .pz-notify__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--neutral-200, #E5E4E8);
}

/* ============================================
   进度条
   ============================================ */
.pz-notify__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.3;
  transition: width 100ms linear;
}

.pz-notify[data-type="success"] .pz-notify__progress {
  color: var(--pzn-success);
}

.pz-notify[data-type="error"] .pz-notify__progress {
  color: var(--pzn-error);
}

.pz-notify[data-type="warning"] .pz-notify__progress {
  color: var(--pzn-warning);
}

.pz-notify[data-type="info"] .pz-notify__progress,
.pz-notify[data-type="primary"] .pz-notify__progress {
  color: var(--pzn-primary);
}

/* ============================================
   操作按钮
   ============================================ */
.pz-notify__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.pz-notify__btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all var(--pzn-duration-fast) ease;
  border: none;
  background: transparent;
}

.pz-notify__btn--primary {
  background: var(--pzn-primary);
  color: white;
}

.pz-notify__btn--primary:hover {
  background: var(--pz-purple-600, #9D3466);
}

.pz-notify__btn--secondary {
  background: var(--neutral-100, #F4F3F6);
  color: var(--text-secondary, #55545C);
}

.pz-notify__btn--secondary:hover {
  background: var(--neutral-200, #E5E4E8);
}

[data-theme="dark"] .pz-notify__btn--secondary {
  background: var(--neutral-700, #44434A);
  color: var(--neutral-200, #E5E4E8);
}

[data-theme="dark"] .pz-notify__btn--secondary:hover {
  background: var(--neutral-600, #55545C);
}

/* ============================================
   动画效果
   ============================================ */

/* 滑入动画 */
.pz-notify--slide-enter {
  animation: pzn-slide-in var(--pzn-duration-base) ease forwards;
}

.pz-notify--slide-leave {
  animation: pzn-slide-out var(--pzn-duration-base) ease forwards;
}

@keyframes pzn-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pzn-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* 淡入动画 */
.pz-notify--fade-enter {
  animation: pzn-fade-in var(--pzn-duration-base) ease forwards;
}

.pz-notify--fade-leave {
  animation: pzn-fade-out var(--pzn-duration-base) ease forwards;
}

@keyframes pzn-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pzn-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 弹跳动画 */
.pz-notify--bounce-enter {
  animation: pzn-bounce-in var(--pzn-duration-slow) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.pz-notify--bounce-leave {
  animation: pzn-bounce-out var(--pzn-duration-base) ease forwards;
}

@keyframes pzn-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pzn-bounce-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* 缩放动画 */
.pz-notify--scale-enter {
  animation: pzn-scale-in var(--pzn-duration-base) ease forwards;
}

.pz-notify--scale-leave {
  animation: pzn-scale-out var(--pzn-duration-base) ease forwards;
}

@keyframes pzn-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pzn-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* 翻转动画 */
.pz-notify--flip-enter {
  animation: pzn-flip-in var(--pzn-duration-slow) ease forwards;
}

.pz-notify--flip-leave {
  animation: pzn-flip-out var(--pzn-duration-base) ease forwards;
}

@keyframes pzn-flip-in {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}

@keyframes pzn-flip-out {
  from {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
  }
}

/* ============================================
   模态框样式
   ============================================ */
.pz-notify-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--pzn-duration-base) ease;
}

.pz-notify-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.pz-notify-modal {
  background: var(--bg-tertiary, #FFFFFF);
  border-radius: var(--pzn-radius-lg);
  box-shadow: var(--pzn-shadow-xl);
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform var(--pzn-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pz-notify-modal-overlay.active .pz-notify-modal {
  transform: scale(1) translateY(0);
}

/* 模态框头部 */
.pz-notify-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 0;
}

.pz-notify-modal__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pz-notify-modal__icon svg {
  width: 24px;
  height: 24px;
}

.pz-notify-modal__icon--success {
  background: var(--pzn-success-bg);
  color: var(--pzn-success);
}

.pz-notify-modal__icon--error {
  background: var(--pzn-error-bg);
  color: var(--pzn-error);
}

.pz-notify-modal__icon--warning {
  background: var(--pzn-warning-bg);
  color: var(--pzn-warning);
}

.pz-notify-modal__icon--info {
  background: var(--pzn-info-bg);
  color: var(--pzn-info);
}

.pz-notify-modal__icon--confirm {
  background: var(--pzn-primary-bg);
  color: var(--pzn-primary);
}

.pz-notify-modal__title-wrap {
  flex: 1;
}

.pz-notify-modal__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #44434A);
  margin: 0;
  line-height: 1.4;
}

.pz-notify-modal__subtitle {
  font-size: 13px;
  color: var(--text-muted, #71707A);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* 模态框内容 */
.pz-notify-modal__body {
  padding: 12px 20px 20px 80px;
}

.pz-notify-modal__message {
  font-size: 14px;
  color: var(--text-secondary, #55545C);
  line-height: 1.6;
  margin: 0;
}

/* 输入框 */
.pz-notify-modal__input-wrap {
  margin-top: 12px;
}

.pz-notify-modal__input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--neutral-200, #E5E4E8);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-primary, #FAF9FB);
  color: var(--text-primary, #44434A);
  box-sizing: border-box;
  transition: border-color var(--pzn-duration-fast) ease;
}

.pz-notify-modal__input:focus {
  outline: none;
  border-color: var(--pzn-primary);
}

[data-theme="dark"] .pz-notify-modal__input {
  background: var(--neutral-800, #27262B);
  border-color: var(--neutral-700, #44434A);
  color: var(--neutral-100, #F4F3F6);
}

/* 模态框底部 */
.pz-notify-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 20px;
}

.pz-notify-modal__btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all var(--pzn-duration-fast) ease;
  border: none;
}

.pz-notify-modal__btn--cancel {
  background: var(--neutral-100, #F4F3F6);
  color: var(--text-secondary, #55545C);
}

.pz-notify-modal__btn--cancel:hover {
  background: var(--neutral-200, #E5E4E8);
}

.pz-notify-modal__btn--confirm {
  background: var(--pzn-primary);
  color: white;
}

.pz-notify-modal__btn--confirm:hover {
  background: var(--pz-purple-600, #9D3466);
}

.pz-notify-modal__btn--danger {
  background: var(--pzn-error);
  color: white;
}

.pz-notify-modal__btn--danger:hover {
  background: var(--pz-red-600, #AD4537);
}

[data-theme="dark"] .pz-notify-modal__btn--cancel {
  background: var(--neutral-700, #44434A);
  color: var(--neutral-200, #E5E4E8);
}

[data-theme="dark"] .pz-notify-modal__btn--cancel:hover {
  background: var(--neutral-600, #55545C);
}

/* 深色模式模态框 */
[data-theme="dark"] .pz-notify-modal {
  background: var(--neutral-800, #27262B);
}

[data-theme="dark"] .pz-notify-modal__title {
  color: var(--neutral-100, #F4F3F6);
}

[data-theme="dark"] .pz-notify-modal__message {
  color: var(--neutral-300, #D4D3D9);
}

/* ============================================
   加载遮罩
   ============================================ */
.pz-notify-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all var(--pzn-duration-base) ease;
}

.pz-notify-loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.pz-notify-loading {
  background: var(--bg-tertiary, #FFFFFF);
  padding: 32px 48px;
  border-radius: var(--pzn-radius-lg);
  box-shadow: var(--pzn-shadow-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: scale(0.9);
  transition: transform var(--pzn-duration-base) ease;
}

.pz-notify-loading-overlay.active .pz-notify-loading {
  transform: scale(1);
}

.pz-notify-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--neutral-200, #E5E4E8);
  border-top-color: var(--pzn-primary);
  border-radius: 50%;
  animation: pzn-spin 1s linear infinite;
}

@keyframes pzn-spin {
  to {
    transform: rotate(360deg);
  }
}

.pz-notify-loading__text {
  font-size: 14px;
  color: var(--text-secondary, #55545C);
  font-weight: 500;
}

[data-theme="dark"] .pz-notify-loading {
  background: var(--neutral-800, #27262B);
}

[data-theme="dark"] .pz-notify-loading__text {
  color: var(--neutral-300, #D4D3D9);
}

[data-theme="dark"] .pz-notify-loading__spinner {
  border-color: var(--neutral-700, #44434A);
  border-top-color: var(--pz-purple-400, #F472B6);
}

/* ============================================
   徽章计数器
   ============================================ */
.pz-notify-badge {
  position: fixed;
  z-index: 9998;
  background: var(--pzn-error);
  color: white;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: pzn-badge-pulse 2s infinite;
}

@keyframes pzn-badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ============================================
   消息中心面板
   ============================================ */
.pz-notify-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg-tertiary, #FFFFFF);
  border-radius: var(--pzn-radius-lg);
  box-shadow: var(--pzn-shadow-xl);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--pzn-duration-base) ease;
  display: flex;
  flex-direction: column;
}

.pz-notify-center.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.pz-notify-center__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--neutral-200, #E5E4E8);
}

.pz-notify-center__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #44434A);
  margin: 0;
}

.pz-notify-center__actions {
  display: flex;
  gap: 8px;
}

.pz-notify-center__btn {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  border: none;
  background: var(--neutral-100, #F4F3F6);
  color: var(--text-secondary, #55545C);
  transition: all var(--pzn-duration-fast) ease;
}

.pz-notify-center__btn:hover {
  background: var(--neutral-200, #E5E4E8);
}

.pz-notify-center__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.pz-notify-center__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--pzn-duration-fast) ease;
}

.pz-notify-center__item:hover {
  background: var(--neutral-100, #F4F3F6);
}

.pz-notify-center__item.unread {
  background: var(--pzn-info-bg);
}

.pz-notify-center__item.unread:hover {
  background: var(--pz-purple-100, #FCE7F3);
}

.pz-notify-center__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pz-notify-center__icon svg {
  width: 18px;
  height: 18px;
}

.pz-notify-center__content {
  flex: 1;
  min-width: 0;
}

.pz-notify-center__msg-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #44434A);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pz-notify-center__msg-text {
  font-size: 12px;
  color: var(--text-muted, #71707A);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pz-notify-center__time {
  font-size: 11px;
  color: var(--neutral-400, #A1A0AA);
  white-space: nowrap;
}

.pz-notify-center__empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted, #71707A);
}

.pz-notify-center__empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}

[data-theme="dark"] .pz-notify-center {
  background: var(--neutral-800, #27262B);
}

[data-theme="dark"] .pz-notify-center__header {
  border-color: var(--neutral-700, #44434A);
}

[data-theme="dark"] .pz-notify-center__title {
  color: var(--neutral-100, #F4F3F6);
}

[data-theme="dark"] .pz-notify-center__btn {
  background: var(--neutral-700, #44434A);
  color: var(--neutral-300, #D4D3D9);
}

[data-theme="dark"] .pz-notify-center__btn:hover {
  background: var(--neutral-600, #55545C);
}

[data-theme="dark"] .pz-notify-center__item:hover {
  background: var(--neutral-700, #44434A);
}

[data-theme="dark"] .pz-notify-center__msg-title {
  color: var(--neutral-100, #F4F3F6);
}

[data-theme="dark"] .pz-notify-center__msg-text {
  color: var(--neutral-400, #A1A0AA);
}

/* ============================================
   悬浮通知按钮
   ============================================ */
.pz-notify-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pzn-primary);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  transition: all var(--pzn-duration-base) ease;
}

.pz-notify-fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
  background: var(--pz-purple-600, #9D3466);
}

.pz-notify-fab svg {
  width: 24px;
  height: 24px;
}

.pz-notify-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--pzn-error);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-primary, #FAF9FB);
}

/* ============================================
   工具类
   ============================================ */
.pz-notify--no-icon .pz-notify__icon {
  display: none;
}

.pz-notify--no-progress .pz-notify__progress {
  display: none;
}

.pz-notify--no-close .pz-notify__close {
  display: none;
}

/* 悬停暂停进度条 */
.pz-notify--pause-on-hover:hover .pz-notify__progress {
  animation-play-state: paused;
}