/* ============================================================
   X-Chat 移动端完全重写 UI
   ============================================================
   策略:
   - 桌面侧边栏(64px)替换为"汉堡按钮 + 左侧滑出抽屉"
   - 聊天页:会话列表全屏→选中后聊天区全屏+顶部返回按钮
   - 所有页面全宽适配,不依赖 !important 覆盖
   - 使用 100dvh 兼容 PWA/浏览器动态视口
   - 触控友好:所有导航/按钮点击区域 ≥ 44px
   ============================================================ */

@media (max-width: 768px) {
  /* --- 基础重置 --- */
  html { font-size: 14px; }

  /* iOS 输入框自动放大修复:
     字号 <16px 时 Safari 聚焦输入框会强制放大页面,失焦后不自动复原。
     所有输入控件统一 ≥16px,从根源上阻止自动放大。 */
  input, textarea, select {
    font-size: 16px !important;
  }
  /* 输入聚焦时页面不因内容变化抖动 */
  input:focus, textarea:focus, select:focus {
    font-size: 16px !important;
  }
  body {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  /* --- 隐藏桌面侧边栏(64px窄边栏),移动端由抽屉接管 --- */
  .xchat-sidebar {
    display: none !important;
  }

  /* 通用业务页面容器:单列布局,主区占满全屏 */
  .app-shell {
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .app-main {
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ================================================================
     移动端常驻左侧导航栏(替代抽屉/汉堡)
     策略:固定 64px 宽图标导航栏常驻屏幕左侧,触控友好(≥48px 点击区),
     主内容区整体右移留出导航栏空间。前台与后台页面通用。
     ================================================================ */

  /* --- 常驻导航栏容器 --- */
  .xchat-mobile-drawer {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    background: var(--work-surface, #fff);
    border-right: 1px solid var(--work-line, #e5e7eb);
    z-index: 1000;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* 品牌区:小 logo 图标,常驻不占空间 */
  .xchat-mobile-drawer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    flex-shrink: 0;
    font-size: 0;
    border-bottom: 1px solid var(--work-line, #e5e7eb);
  }
  .xchat-mobile-drawer-brand::before {
    content: 'X';
    font-size: 16px;
    font-weight: 800;
    color: var(--work-primary, #10b981);
  }

  /* 登录者信息区(头像 + 名字,点击进设置页) */
  .xchat-mobile-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 2px 8px;
    border-bottom: 1px solid var(--work-line, #e5e7eb);
    text-decoration: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .xchat-mobile-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--work-primary-100, #e0e7ff);
    color: var(--work-primary-700, #4338ca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
  }
  .xchat-mobile-user-name {
    max-width: 56px;
    font-size: 10px;
    font-weight: 500;
    color: var(--work-ink-2, #4b5563);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.2;
  }

  .xchat-mobile-drawer-nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .xchat-mobile-drawer-footer {
    flex-shrink: 0;
    padding: 6px 4px;
    border-top: 1px solid var(--work-line, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* 导航项:图标在上、文字在下,竖向布局 */
  .xchat-mobile-nav-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: 10px;
    color: var(--work-ink-2, #4b5563);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    line-height: 1.2;
  }
  .xchat-mobile-nav-item svg, .xchat-mobile-nav-item i {
    width: 22px; height: 22px;
    flex-shrink: 0;
  }
  .xchat-mobile-nav-item:active { background: var(--work-surface-2, #f3f4f6); }
  .xchat-mobile-nav-item.active {
    color: var(--work-primary, #10b981);
    background: var(--work-primary-50, #ecfdf5);
    font-weight: 600;
  }
  /* 未读红点:定位到图标右上角 */
  .xchat-mobile-nav-item .nav-unread-dot {
    position: absolute;
    top: 3px;
    right: 12px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #fff;
    box-shadow: 0 0 3px rgba(239,68,68,0.7);
    margin: 0;
    flex-shrink: 0;
  }

  /* --- 主内容区右移留出导航栏(64px) --- */
  .app-shell,
  .work-shell,
  .admin-shell,
  .admin-body {
    padding-left: 64px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* 页面头部:恢复正常内边距(导航栏已由容器右移让位) */
  .page-header {
    height: 52px !important;
    padding: 0 12px !important;
    flex-shrink: 0;
  }

  .page-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px !important;
    min-height: 0;
  }

  /* ================================================================
     聊天页(work-shell)
     ================================================================ */
  .work-shell {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 会话列表:全屏显示,选中聊天后隐藏 */
  .work-conv-list {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: none !important;
    overflow: hidden;
  }
  .work-conv-list.hidden-mobile {
    display: none !important;
  }

  .conv-header {
    height: 52px !important;
    padding: 0 12px !important;
    flex-shrink: 0;
  }

  .conv-search {
    padding: 8px 12px !important;
    flex-shrink: 0;
  }

  .conv-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .conv-item {
    padding: 10px 12px !important;
  }

  .conv-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
  }

  /* 聊天主区域:默认隐藏,选中后全屏显示 */
  .chat-main {
    display: none !important;
    width: 100% !important;
    flex: 1 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .chat-main.visible-mobile {
    display: flex !important;
  }

  .chat-header {
    height: 52px !important;
    padding: 0 12px !important;
    flex-shrink: 0;
  }

  .chat-header-info {
    gap: 8px !important;
  }

  /* 移动端返回按钮(侧边栏图标 + 返回) */
  .chat-header-info::before {
    content: '←';
    display: inline-flex;
    width: 32px;
    height: 32px;
    background: var(--work-surface-2, #f9fafb);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--work-ink, #111827);
  }

  .chat-header-info.mobile-back::before {
    /* 由 JS 处理:点击触发返回 */
  }

  /* 消息滚动区 */
  .message-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px 12px !important;
    -webkit-overflow-scrolling: touch;
  }

  .message { max-width: 88% !important; }
  .bubble { font-size: 14px !important; padding: 10px 12px !important; }
  .bubble img { max-width: 180px !important; max-height: 180px !important; }

  .message-body { gap: 2px !important; }

  .input-bar {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-shrink: 0;
  }

  .input-text {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  .input-send, .input-attach {
    width: 38px !important;
    height: 38px !important;
  }

  .image-preview-item { width: 64px !important; height: 64px !important; }

  /* ================================================================
     通讯录(contacts.html)
     ================================================================ */
  .contacts-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ================================================================
     群组页(group.html)
     ================================================================ */
  .group-grid {
    grid-template-columns: 1fr !important;
  }

  .group-card {
    padding: 12px !important;
  }

  .group-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  .group-actions {
    flex-wrap: nowrap !important;
  }

  .group-actions .btn-primary, .group-actions .btn-secondary {
    flex: 1 !important;
    font-size: 13px !important;
    height: 34px !important;
    padding: 0 10px !important;
    justify-content: center !important;
  }

  /* ================================================================
     工作组页(workgroup.html)
     ================================================================ */
  .workgroup-card {
    padding: 12px !important;
  }

  /* ================================================================
     设置页(settings.html)
     ================================================================ */
  .settings-grid { grid-template-columns: 1fr !important; }
  .profile-row { flex-direction: column !important; align-items: flex-start !important; }

  .card { padding: 12px !important; }

  /* ================================================================
     管理后台
     ================================================================ */
  .admin-shell {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .admin-body {
    flex-direction: column !important;
    height: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .admin-main, .admin-content {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0;
  }
  .admin-header { height: 52px !important; padding: 0 12px !important; flex-shrink: 0; }
  .admin-title { font-size: 16px !important; }

  /* 管理后台桌面侧边栏在手机上隐藏,由抽屉导航接管 */
  .xchat-admin-sidebar {
    display: none !important;
  }

  .xchat-admin-sidebar-footer { display: none !important; }

  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-value { font-size: 20px !important; }

  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .orders-table { font-size: 12px !important; min-width: 480px !important; }
  .orders-table th, .orders-table td { padding: 6px 8px !important; }

  .filter-bar { flex-wrap: wrap !important; gap: 8px !important; }
  .filter-bar .select, .filter-bar input { flex: 1 1 auto !important; min-width: 100px !important; }

  /* 管理后台员工页 tab */
  .tab-bar { flex-wrap: wrap !important; }
  .tab-btn { flex: 1 1 auto !important; font-size: 13px !important; padding: 8px 12px !important; }

  .modal-card { width: 95% !important; max-width: none !important; margin: 12px !important; }

  /* 弹窗避让常驻左侧导航栏(64px):
     1) 所有全屏弹窗遮罩层级提高到侧边栏(z-index:1000)之上;
     2) 弹窗容器右移 64px,内容在侧边栏右侧空间居中,不再被遮挡。 */
  .modal,
  .modal-overlay,
  .group-info-modal,
  .expense-modal,
  .voice-call-modal,
  .xchat-dialog-root {
    z-index: 2000 !important;
    padding-left: 64px !important;
  }
  /* 通讯录好友申请弹窗层级固定 10001(桌面端一致),不被上面的通用对话框规则压到 2000 */
  .xchat-friend-modal {
    z-index: 10001 !important;
  }
  /* 来电浮层层级已高于侧边栏,仅做内容避让 */
  #xchat-call-overlay {
    padding-left: 64px !important;
  }

  /* ================================================================
     弹窗 / 对话框
     ================================================================ */
  .group-info-card { max-width: none !important; width: 95% !important; }
  .group-members-list { grid-template-columns: repeat(3, 1fr) !important; }

  .xchat-dialog { width: 92% !important; max-width: 320px !important; padding: 20px 18px 16px !important; }

  .toast { top: 12px !important; right: 12px !important; font-size: 13px !important; padding: 10px 14px !important; }

  /* ================================================================
     通用容器
     ================================================================ */
  .chart-card, .table-card {
    padding: 12px !important;
  }

  .chart-wrap { height: 180px !important; }

  .tab-btn {
    white-space: nowrap !important;
  }
}

/* 极小屏额外优化 */
@media (max-width: 420px) {
  .message { max-width: 92% !important; }
  .bubble img { max-width: 140px !important; max-height: 140px !important; }
  .group-members-list { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   移动端安全区适配(挖孔屏/刘海/底部 Home 条)
   依赖 viewport-fit=cover(所有页面已带),env() 在 iOS 11.2+ / Android WebView 可用。
   - 顶部:各页面头部、左侧常驻导航栏避开摄像头/状态栏
   - 底部:输入栏、抽屉底部避开屏幕圆弧/手势条
   ================================================================ */
@supports (padding: env(safe-area-inset-top)) {
  /* 左侧常驻导航栏:整体下移避开顶部挖孔 */
  .xchat-mobile-drawer {
    padding-top: env(safe-area-inset-top);
  }
  .xchat-mobile-drawer-brand {
    height: calc(52px + env(safe-area-inset-top));
  }
  .xchat-mobile-drawer-footer {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  /* 各页面头部:高度 = 52px + 顶部安全区,内容居中且避开摄像头 */
  .page-header,
  .conv-header,
  .chat-header,
  .admin-header {
    height: calc(52px + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top) !important;
  }

  /* 聊天输入栏:底部避开 Home 条/屏幕圆弧 */
  .input-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }

  /* 登录页:居中卡片上下避开挖孔与 Home 条 */
  .login-page {
    padding-top: calc(var(--work-s-4) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(var(--work-s-4) + env(safe-area-inset-bottom)) !important;
  }

  /* 图片预览:移动端内嵌于聊天区(标题与输入框之间),不再全屏遮挡。
      top/bottom 由 JS 按 .chat-header / .input-bar 实际高度动态设置,
      CSS 只负责覆盖消息区内的定位与按钮布局。 */
  #imageViewer.image-viewer {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.88);
    border-radius: 0;
    z-index: 900;
  }
  #imageViewer .image-viewer-zoombox {
    max-width: 100%;
    max-height: 100%;
  }
  #imageViewer img {
    max-width: 92%;
    max-height: 100%;
  }
  #imageViewer .image-viewer-close,
  #imageViewer .image-viewer-tool {
    position: absolute;
    top: 10px;
  }
  #imageViewer .image-viewer-close { right: 10px; }
  #imageViewer .image-viewer-tool.download { right: 62px; }
  #imageViewer .image-viewer-tool.copy { right: 114px; }
  #imageViewer .image-viewer-tool.zoom { right: 166px; }
  #imageViewer .image-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  #imageViewer .image-viewer-nav.prev { left: 10px; }
  #imageViewer .image-viewer-nav.next { right: 10px; }

  /* 来电浮层为居中卡片(inset:0 flex 居中),无需顶部偏移 */

  /* PWA 安装横幅已带 safe-area-inset-bottom,无需重复 */
}

/* 桌面端不应用安全区(env 在桌面浏览器为 0,无害,但显式声明以免污染) */
@media (min-width: 769px) {
  .xchat-mobile-drawer { padding-top: 0; }
}