/* ==========================================================================
   PR Workspace & Chat - 全局流畅过渡动画与质感微交互 (Transitions & Polish)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 模态弹窗与浮层系统 (最高层级置顶 + 平滑毛玻璃景深)
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(15, 23, 42, 0.44) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10000 !important; /* 规范：弹窗必须在最顶层避免遮挡 */
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.24s ease,
              visibility 0.24s !important;
}

.modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal {
  background: #ffffff !important;
  border-radius: var(--radius-lg, 16px) !important;
  width: 90% !important;
  max-width: 680px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  transform: scale(0.96) translateY(12px) !important;
  opacity: 0 !important;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease !important;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

.modal-close {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.18s ease,
              color 0.18s ease !important;
}

.modal-close:hover {
  transform: rotate(90deg) scale(1.08) !important;
}

/* --------------------------------------------------------------------------
   2. 按钮系统 (规范：按钮文字默认居中 + 弹性按压微反馈)
   -------------------------------------------------------------------------- */
.btn {
  justify-content: center !important; /* 规范：按钮文字默认居中 */
  text-align: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn:active {
  transform: scale(0.97) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.32) !important;
}

.btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

.btn-secondary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* --------------------------------------------------------------------------
   3. 视图与 Tab 切换平滑过渡 (取代整页震动)
   -------------------------------------------------------------------------- */
.tab {
  position: relative !important;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tab::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: var(--primary, #6366f1) !important;
  transform: scaleX(0) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tab.active::after {
  transform: scaleX(1) !important;
}

/* Tab 视图区域淡入与小幅升起，消除整屏抖动 */
.scroll-container,
.notes-grid,
.todos-container,
.cloud-table-wrap,
.stat-grid {
  animation: tabViewFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes tabViewFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   4. 卡片与列表悬浮交互微动效
   -------------------------------------------------------------------------- */
.requirement-item {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease,
              border-color 0.2s ease !important;
}

.requirement-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.1),
              0 0 0 1px rgba(99, 102, 241, 0.18) !important;
}

.note-card {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease !important;
}

.note-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px -6px rgba(15, 23, 42, 0.12) !important;
}

.todo-item {
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}

.todo-item:hover {
  transform: translateX(2px) !important;
}

.todo-checkbox:active {
  transform: scale(0.85);
  transition: transform 0.12s ease;
}

/* --------------------------------------------------------------------------
   5. 聊天系统：丝滑无闪烁骨架屏 (Shimmer Skeleton Stream)
   -------------------------------------------------------------------------- */
#chatMessages {
  overflow-anchor: auto !important; /* 关键：原生滚动锚定，历史翻页零跳动 */
}

.chat-skeleton-stream {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 18px 24px !important;
  margin-top: auto !important; /* 靠底贴合，和真实消息流位置一致，切换时零跳变 */
  width: 100% !important;
  animation: chatSkeletonFadeIn 0.2s ease-out !important;
}

@keyframes chatSkeletonFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.chat-skeleton-bubble {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  max-width: 72% !important;
}

.chat-skeleton-bubble.incoming {
  align-self: flex-start !important;
}

.chat-skeleton-bubble.outgoing {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
}

.chat-skeleton-bubble .sk-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(148, 163, 184, 0.18) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.chat-skeleton-bubble .sk-content {
  height: 38px !important;
  border-radius: 16px !important;
  background: rgba(148, 163, 184, 0.14) !important;
  position: relative !important;
  overflow: hidden !important;
}

.chat-skeleton-bubble.incoming .sk-content {
  border-bottom-left-radius: 4px !important;
}

.chat-skeleton-bubble.outgoing .sk-content {
  border-bottom-right-radius: 4px !important;
  background: rgba(99, 102, 241, 0.15) !important;
}

.chat-skeleton-bubble .sk-content.w-35 { width: 140px !important; }
.chat-skeleton-bubble .sk-content.w-45 { width: 180px !important; }
.chat-skeleton-bubble .sk-content.w-55 { width: 230px !important; }
.chat-skeleton-bubble .sk-content.w-60 { width: 270px !important; }
.chat-skeleton-bubble .sk-content.w-70 { width: 330px !important; }
.chat-skeleton-bubble .sk-content.w-80 { width: 390px !important; }

/* 优雅流动微光 Shimmer */
.chat-skeleton-bubble .sk-avatar::after,
.chat-skeleton-bubble .sk-content::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-100%) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  ) !important;
  animation: chatSkeletonShimmer 1.5s infinite !important;
}

@keyframes chatSkeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}

/* 顶部加载更早消息的指示器 */
.chat-load-more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 0 !important;
  min-height: 36px !important;
}

.chat-load-more-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: var(--text-light, #94a3b8) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
}

.chat-spinner-mini {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(148, 163, 184, 0.25) !important;
  border-top-color: var(--primary, #6366f1) !important;
  border-radius: 50% !important;
  animation: chatSpin 0.75s linear infinite !important;
}

@keyframes chatSpin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   6. 聊天会话列表与单条新消息入场
   -------------------------------------------------------------------------- */
.chat-item {
  transition: background-color 0.18s ease,
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease !important;
}

.chat-item:hover {
  transform: translateX(2px) !important;
}

.chat-item.active {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(224, 231, 255, 0.75) 100%) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.08) !important;
}

/* 仅新单条消息入场动效（消除历史批量加载时的 50 个气泡集体晃动） */
.chat-message.chat-msg-enter {
  animation: chatBubbleSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes chatBubbleSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 回到底部浮动按钮 */
.chat-jump-latest-btn {
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s ease,
              box-shadow 0.2s ease !important;
}

.chat-jump-latest-btn:hover {
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18) !important;
}

/* --------------------------------------------------------------------------
   7. 全局 Toast 提示丝滑弹出动效
   -------------------------------------------------------------------------- */
.app-toast,
.chat-toast {
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-toast.show,
.chat-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* --------------------------------------------------------------------------
   8. 针对低特效模式（Intel Mac / 移动低能耗）保持极速纯粹性能
   -------------------------------------------------------------------------- */
html.low-effects *,
html.desktop-mac *,
html.mobile-low-power * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.low-effects .chat-skeleton-stream,
html.mobile-low-power .chat-skeleton-stream {
  animation: none !important;
}

html.low-effects .chat-skeleton-bubble .sk-avatar::after,
html.low-effects .chat-skeleton-bubble .sk-content::after,
html.mobile-low-power .chat-skeleton-bubble .sk-avatar::after,
html.mobile-low-power .chat-skeleton-bubble .sk-content::after {
  animation: none !important;
  display: none !important;
}

html.low-effects .chat-message.chat-msg-enter,
html.desktop-mac .chat-message.chat-msg-enter,
html.mobile-low-power .chat-message.chat-msg-enter {
  animation: none !important;
}