/* =============================================================
   TeamChat — App Polish Layer
   用途: 消除「网页感」，增强原生 App 质感
   加载顺序: 放在 responsive.css 之后（最后加载）
   ============================================================= */

/* ===== 1. 禁止非内容区域的文字选中 (App 不让你选 UI) ===== */
.sidebar,
.chat-header,
.input-area,
.members-panel-header,
.sidebar-header,
.sidebar-footer,
.modal h3,
.modal h4,
.modal button,
.channel-item,
.member-item,
.btn-icon,
.emoji-btn,
.send-btn,
.attach-btn,
.chain-btn,
.voice-btn,
.plus-btn {
  -webkit-user-select: none;
  user-select: none;
}
/* 消息内容和输入框保留可选 */
.msg-content,
.msg-bubble,
.input-area textarea,
.modal input,
.modal textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ===== 2. 自定义滚动条 (告别粗大的浏览器默认滚动条) ===== */
.messages,
.channel-list,
.members-list,
.modal,
.fm-list,
.bg-grid,
.emoji-picker-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
}
.messages::-webkit-scrollbar,
.channel-list::-webkit-scrollbar,
.members-list::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.fm-list::-webkit-scrollbar,
.bg-grid::-webkit-scrollbar,
.emoji-picker-grid::-webkit-scrollbar {
  width: 5px;
}
.messages::-webkit-scrollbar-track,
.channel-list::-webkit-scrollbar-track,
.members-list::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.fm-list::-webkit-scrollbar-track {
  background: transparent;
}
.messages::-webkit-scrollbar-thumb,
.channel-list::-webkit-scrollbar-thumb,
.members-list::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.fm-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 10px;
}
/* 暗色区域用亮色滚动条 */
.channel-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
}
.channel-list {
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

/* ===== 3. 触控反馈 — 所有可点击元素 ===== */
.channel-item,
.member-item,
.msg-menu .menu-item,
.load-more {
  transition: background .15s, transform .1s;
}
.channel-item:active,
.member-item:active,
.msg-menu .menu-item:active,
.load-more:active {
  transform: scale(.97);
}

/* 按钮触控缩放 */
.send-btn,
.attach-btn,
.chain-btn,
.emoji-btn,
.voice-btn,
.plus-btn,
.modal button,
.chain-join-btn,
.chat-header-right .btn-icon,
.sidebar-header .btn-icon,
.sidebar-footer .btn-icon {
  transition: background .15s, transform .08s, opacity .15s;
}
.send-btn:active,
.attach-btn:active,
.chain-btn:active,
.emoji-btn:active,
.voice-btn:active,
.plus-btn:active,
.modal button:active,
.chain-join-btn:active,
.chat-header-right .btn-icon:active,
.sidebar-header .btn-icon:active,
.sidebar-footer .btn-icon:active {
  transform: scale(.92);
  opacity: .8;
}

/* ===== 4. 弹窗入场动画 + 毛玻璃背景 ===== */
.modal-overlay {
  background: rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fadeIn .2s ease;
}
.modal {
  animation: modalSlideUp .25s cubic-bezier(.32,.72,.37,1.12);
  transform-origin: center bottom;
}
@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== 5. 图片预览入场动画 ===== */
.image-modal {
  animation: fadeIn .2s ease;
}
.image-modal img {
  animation: imgZoomIn .25s cubic-bezier(.32,.72,.37,1.12);
}
@keyframes imgZoomIn {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== 6. 右键/长按菜单入场 ===== */
.msg-menu {
  animation: menuPop .15s cubic-bezier(.32,.72,.37,1.12);
  transform-origin: top left;
}
@keyframes menuPop {
  from {
    opacity: 0;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== 7. Emoji 选择器 & 加号菜单入场 ===== */
.emoji-picker {
  animation: pickerSlideUp .2s cubic-bezier(.32,.72,.37,1.12);
  transform-origin: bottom left;
}
.plus-menu {
  animation: pickerSlideUp .2s cubic-bezier(.32,.72,.37,1.12);
  transform-origin: bottom right;
}
@keyframes pickerSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== 8. iOS safe area 支持 ===== */
@supports (padding: env(safe-area-inset-top)) {

  /* --- 顶部: 状态栏避让 --- */
  .chat-header {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .sidebar-header {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .login-page {
    padding-top: env(safe-area-inset-top);
  }

  /* --- 底部: home indicator 避让 + 消除留白 --- */
  .input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .login-card {
    margin-bottom: env(safe-area-inset-bottom);
  }

  /* 让底部安全区显示为输入栏同色，而不是 body 灰底 */
  .main-area::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom);
    background: #f7f7f8;
    z-index: 10;
    pointer-events: none;
  }
}

/* ===== 9. 移动端优化 — 消灭一切「网页」痕迹 ===== */
/* 禁止长按弹出系统菜单 (UI元素上) */
.sidebar,
.chat-header,
.input-area .send-btn,
.input-area .voice-btn,
.input-area .plus-btn,
.input-area .emoji-btn,
.channel-item {
  -webkit-touch-callout: none;
}

/* 消灭 iOS 上的点击高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ===== 10. 频道切换 & 聊天区域过渡 ===== */
.messages-wrapper {
  transition: opacity .15s ease;
}

/* ===== 11. 侧边栏遮罩层过渡 (不要瞬间出现) ===== */
.sidebar-overlay {
  transition: opacity .3s ease;
  opacity: 0;
  pointer-events: none;
}
.sidebar-overlay.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* ===== 12. 输入框聚焦时的精致过渡 ===== */
.input-area textarea {
  transition: box-shadow .2s;
}

/* ===== 13. 成员面板过渡 (桌面端展开/收起) ===== */
.members-panel {
  transition: width .25s ease, opacity .2s ease;
  overflow: hidden;
}

/* ===== 14. 通知栏展开/收起 (扁平: 无入场动画) ===== */
/* .notice-expanded animation removed */

/* ===== 15. 回复条入场 (扁平: 无入场动画) ===== */
/* .reply-bar animation removed */

/* ===== 16. 被踢出浮层优化 ===== */
.kicked-overlay {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: fadeIn .3s ease;
}
.kicked-card {
  animation: modalSlideUp .3s cubic-bezier(.32,.72,.37,1.12);
}

/* ===== 17. 聊天header下方的分割线 (扁平: 保留 layout.css 里的 1px 阴影) ===== */
/* (intentionally removed) */

/* ===== 18. 输入区上方分割 (扁平: 保留 chat.css 里的 1px 阴影) ===== */
/* (intentionally removed) */

/* ===== 19. 消息日期分隔线 (扁平: 无入场动画) ===== */
.date-divider {
  -webkit-user-select: none;
  user-select: none;
}

/* ===== 20. 发送按钮状态增强 ===== */
.send-btn:disabled,
.send-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}

/* ===== 21. 移动端：侧边栏打开时 body 不滚动 ===== */
/* body 已全局 position:fixed，此 class 仅做语义保留 */
body.sidebar-locked {
  overflow: hidden;
}

/* ===== 21b. 聊天区域 touch-action 锁定 ===== */
/* 只允许纵向滑动，防止双击/捏合触发 viewport 偏移 */
.messages-wrapper,
.messages,
.main-area {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* ===== 22. 骨架屏闪光效果 (给加载状态用) ===== */
@keyframes shimmer {
  0%   { background-position: -200% 0 }
  100% { background-position: 200% 0 }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* ===== 23. 频道项未读加粗 ===== */
.channel-item.has-unread .ch-name {
  font-weight: 700;
  color: #fff;
}

/* ===== 24. 成员面板 - 抽屉触控反馈 ===== */
.members-close-btn{
  transition: background .15s, transform .08s, opacity .15s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.members-close-btn:active{
  transform: scale(.9);
  opacity: .75;
}
.members-overlay{
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.members-panel-header{
  -webkit-user-select: none;
  user-select: none;
}