html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

body {
  position: relative;
}

/* 宽度自适应：填满屏幕，不限制430px */
.app-container,
.service {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
  will-change: auto;
}

/* 固定底栏跟随容器宽度 */
.bottom-nav,
.chat-footer,
.bottom-actions {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  will-change: auto;
}

/* 聊天页：顶部客服栏吸附固定 + 底部输入框固定，均不可缩放 */
.chat-header {
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: #f5f5f5;
}

.chat-footer,
.input-wrap.fixed-bottom,
.bottom-input {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

input,
textarea,
select,
button {
  font-size: 16px;
}

/* GPU 加速 */
.bottom-nav,
.chat-footer,
.bottom-actions,
.app-container,
.service,
.nav-item,
.func-item,
.trade-item,
.msg-row,
.session-item,
.quick-card,
.link-item,
.user-item,
.capsule-btn {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 滚动平滑 */
* {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* 点击反馈零延迟 + 丝滑过渡 */
button,
a,
[onclick],
.nav-item,
.msg-item,
.func-item,
.trade-item,
.stat-item,
.activity-col,
.capsule-btn,
.tab-item,
.session-item,
.quick-card,
.link-btn,
.user-row .u-chat {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease, box-shadow 0.18s ease;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 按下缩放反馈 */
button:active,
a:active,
.quick-card:active,
.func-item:active,
.trade-item:active,
.stat-item:active,
.activity-col:active,
.nav-item:active,
.capsule-btn:active {
  transform: scale(0.96) translateZ(0);
  -webkit-transform: scale(0.96) translateZ(0);
}

/* 页面淡入动画 */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-container,
.main-wrap {
  animation: pageFadeIn 0.25s ease-out;
}

/* 弹窗丝滑出现 */
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-mask.active .modal-box,
.device-modal.active .device-modal-box,
.small-modal.active .small-modal-box,
.big-modal.active .big-modal-box {
  animation: modalSlideIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

/* 卡片悬浮效果（桌面端） */
@media (hover: hover) {
  .quick-card:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 6px 20px rgba(102,126,234,0.15);
  }
  button:hover:not(:disabled) {
    opacity: 0.92;
  }
}

/* 头像加载骨架占位 */
img.avatar-skeleton {
  background: linear-gradient(90deg,#e8e8e8 25%,#f0f0f0 50%,#e8e8e8 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.2s ease-in-out infinite !important;
}
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
img.avatar-loaded {
  animation: avatarFadeIn 0.3s ease-out;
}
@keyframes avatarFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Toast 丝滑 */
.toast {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}