/* ===== MOBILE RESPONSIVE ===== */

/* ===== Tablet (≤1023px) ===== */
@media (max-width: 1023px) {
  #lp { width: 200px; }
  #dt { width: 280px; }
  .top-act { gap: 3px; }
  .tb { padding: 3px 8px; font-size: 12px; }
}

/* ===== Mobile (≤768px) ===== */
@media (max-width: 768px) {
  /* --- 登录页 --- */
  #loginPage {
    overflow-y: auto;
    padding: 16px 0;
  }
  #loginPage .login-box {
    width: 92%;
    max-width: 380px;
    padding: 24px 18px;
    margin: 0 auto;
  }
  .logo-icon { font-size: 36px; }
  .logo-title { font-size: 20px; }
  .logo-sub { font-size: 12px; }
  .login-box .lfg { margin-bottom: 12px; }
  .login-box .lfg label { font-size: 13px; }
  .login-box input, .login-box select {
    padding: 10px 10px 10px 32px;
    font-size: 15px;
  }
  .login-btn { padding: 12px; font-size: 15px; margin-top: 6px; }
  .login-hint { font-size: 12px; line-height: 1.6; }
  .login-accounts .acc { font-size: 12px; padding: 3px 0; }
  .login-accounts .acc b { font-size: 12px; }

  /* --- 顶部栏 --- */
  #topbar {
    padding: 0 6px;
    height: 40px;
    gap: 4px;
    overflow: hidden;
  }
  .logo { font-size: 13px; white-space: nowrap; }
  .logo span[data-i18n="app.title.short"] { display: inline; }
  .crumbs { display: none; }

  /* 顶部按钮：仅显示关键按钮，文字隐藏仅显图标 */
  .top-act { gap: 2px; }
  .top-act .tb {
    padding: 4px 6px;
    font-size: 13px;
    border: none;
    background: transparent;
  }
  /* 隐藏不常用按钮 */
  #btnAddSH, #btnAddRel, .top-act .tb[onclick="Modals.open('addOrg')"],
  .top-act .tb[onclick="Modals.open('addProj')"],
  #btnAdmin, #btnSchedule, #btnRTM, #btnLang,
  .top-act .tb[onclick="Modals.open('settings')"] {
    display: none;
  }
  /* 关键按钮保留图标 */
  #btnBulletin { padding: 4px 6px; font-size: 15px; }
  #btnIssue { padding: 4px 6px; font-size: 15px; }
  #btnChat { padding: 4px 6px; font-size: 15px; position: relative; }
  #btnLP { padding: 4px 8px; font-size: 16px; }

  /* 用户区域精简 */
  .user-menu .user-name { display: none; }
  .user-menu .avatar { width: 26px; height: 26px; font-size: 13px; }
  .user-menu { padding: 0; }

  /* 未读消息徽标 */
  #btnChat .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
  }

  /* --- 搜索栏 --- */
  #searchbar { padding: 4px 8px; gap: 6px; }
  .sbox { flex: 1; }
  .sbox input { font-size: 14px; padding: 6px 6px 6px 26px; }
  .sftags { display: none; }
  .sadv { display: none; font-size: 12px; }

  /* --- 主布局 --- */
  #main {
    flex-direction: column;
    height: calc(100vh - 80px);
  }

  /* --- 左侧面板（底部弹出） --- */
  #lp {
    position: fixed;
    bottom: 44px;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    z-index: 15;
    border-right: none;
    border-top: 1px solid var(--border);
    transition: height .3s;
    background: var(--bg2);
  }
  #lp.mobile-show { height: 55vh; }
  .lptabs { padding: 0 8px; }
  .lptab { padding: 8px 6px; font-size: 13px; }
  .lpbody { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* --- 图形区域 --- */
  #ga { flex: 1; }

  /* --- 详情面板（底部弹出） --- */
  #dt {
    position: fixed;
    bottom: 44px;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transform: none;
    transition: height .3s;
    z-index: 16;
  }
  #dt.show {
    height: 65vh;
    transform: none;
  }
  #dt .dt-header {
    padding: 10px 14px;
  }
  #dt .dt-header h3 { font-size: 15px; }
  #dt .dt-header .dt-close { font-size: 20px; padding: 4px 8px; }
  #dt .dt-body {
    padding: 10px 14px;
    -webkit-overflow-scrolling: touch;
  }
  /* 详情面板字段自适应 */
  .fg { flex-direction: column; gap: 2px; margin-bottom: 8px; }
  .fg .fl { font-size: 12px; color: var(--text3); }
  .fg .fv { font-size: 14px; }
  /* 详情面板操作按钮 */
  .dt-actions { flex-wrap: wrap; gap: 6px; }
  .dt-actions .tb { font-size: 13px; padding: 6px 12px; }

  /* --- 底部导航栏 --- */
  #bottomTabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 6px 0;
    padding-bottom: env(safe-area-inset-bottom, 6px);
    background: var(--bg2);
    border-top: 1px solid var(--border);
  }
  .btab {
    font-size: 11px;
    padding: 4px 0;
  }
  .btab span { display: block; }
  .btab .btab-ico { font-size: 18px; display: block; margin-bottom: 2px; }

  /* --- 图形工具栏 --- */
  #lgd { display: none; }
  #gtb {
    top: 4px;
    left: 4px;
    gap: 3px;
    flex-wrap: wrap;
  }
  #gtb .tb { padding: 4px 8px; font-size: 12px; }
  #gst {
    top: 4px;
    right: 4px;
    font-size: 11px;
    max-width: 120px;
  }

  /* --- 列表项触摸优化 --- */
  .lpi {
    padding: 12px 10px;
    min-height: 48px;
  }
  .lpi .av { width: 36px; height: 36px; font-size: 15px; }
  .lpi .nm { font-size: 15px; }
  .lpi .tl { font-size: 12px; }

  /* --- 弹窗 --- */
  .mdl {
    width: 95%;
    max-width: 380px;
    max-height: 88vh;
    margin: 0 auto;
  }
  .mdl-body { padding: 14px; }
  .mdl-body .fg { margin-bottom: 10px; }
  .mdl-body label { font-size: 13px; }
  .mdl-body input, .mdl-body select, .mdl-body textarea {
    font-size: 14px;
    padding: 8px 10px;
  }
  .mdl-footer { padding: 10px 14px; }
  .mdl-footer .tb { font-size: 14px; padding: 8px 16px; }

  /* --- 高级搜索 --- */
  #as {
    width: 92%;
    left: 4%;
    transform: none;
  }

  /* --- 聊天面板 --- */
  #chatPanel {
    width: 100%;
    right: 0;
    border-radius: 0;
  }
  #chatPanel.show { right: 0; }
  .chat-head { padding: 10px 12px; }
  .chat-head h4 { font-size: 15px; }
  #chatMessages { padding: 8px 10px; }
  .chat-msg { margin-bottom: 8px; }
  .chat-bubble {
    max-width: 75%;
    font-size: 14px;
    padding: 8px 12px;
  }
  .chat-input-bar { padding: 8px; gap: 4px; }
  .chat-tool { padding: 6px; font-size: 18px; }
  #chatInput { font-size: 14px; padding: 8px 10px; }

  /* --- 问题跟踪/公告栏面板 --- */
  #issuePanel, #bulletinPanel {
    width: 100%;
    right: 0;
    border-radius: 0;
  }
  #issuePanel.show, #bulletinPanel.show { right: 0; }

  /* --- 进度表/需求跟踪面板 --- */
  #schedulePanel, #rtmPanel {
    width: 100%;
    right: 0;
    border-radius: 0;
  }
  #schedulePanel.show, #rtmPanel.show { right: 0; }

  /* --- 表格水平滚动 --- */
  .table-wrap, table {
    -webkit-overflow-scrolling: touch;
  }

  /* --- Toast 通知 --- */
  #toastContainer {
    top: 44px;
    left: 8px;
    right: 8px;
    max-width: none;
  }
  .toast {
    font-size: 13px;
    padding: 10px 14px;
  }

  /* --- 右键菜单 --- */
  #chatCtxMenu {
    min-width: 120px;
  }
  #chatCtxMenu .ctx-item { font-size: 14px; padding: 10px 14px; }

  /* --- 表情选择器 --- */
  #emojiPicker {
    width: calc(100vw - 16px);
    max-width: 340px;
    bottom: 60px;
  }
  .emoji-grid {
    grid-template-columns: repeat(7, 1fr);
    max-height: 200px;
  }
  .emoji-item { font-size: 20px; padding: 4px; }
  .emoji-cat-btn { font-size: 11px !important; padding: 3px 6px !important; }

  /* --- 用户下拉菜单 --- */
  .user-dropdown {
    position: fixed;
    top: 40px;
    right: 4px;
    width: 200px;
  }
  .ud-item { font-size: 13px; padding: 10px 14px; }
}

/* ===== Small Mobile (≤480px) ===== */
@media (max-width: 480px) {
  /* 登录页 */
  .login-box { padding: 18px 14px !important; }
  .logo-title { font-size: 18px; }
  .logo-sub { font-size: 11px; }
  .login-box input, .login-box select { font-size: 14px; }

  /* 顶部栏 */
  #topbar { height: 38px; padding: 0 4px; }
  .logo { font-size: 12px; }
  .top-act .tb { padding: 4px 4px; font-size: 14px; }

  /* 底部导航 */
  .btab { font-size: 10px; }

  /* 详情面板 */
  #dt.show { height: 70vh; }

  /* 聊天气泡 */
  .chat-bubble { max-width: 80%; font-size: 13px; }

  /* 弹窗 */
  .mdl { width: 96%; }

  /* 表格 */
  th, td { padding: 6px 8px; font-size: 13px; }
}

/* ===== Extra Small (≤360px) ===== */
@media (max-width: 360px) {
  .logo span[data-i18n="app.title.short"] { font-size: 11px; }
  .top-act .tb { padding: 3px 3px; }
  #btnBulletin, #btnIssue { display: none; }
  .login-accounts .acc b { font-size: 11px; }
  .btab { font-size: 9px; }
}

/* ===== 横屏适配 ===== */
@media (max-width: 768px) and (orientation: landscape) {
  #lp.mobile-show { height: 70vh; }
  #dt.show { height: 75vh; }
  #chatPanel { max-width: 480px; }
}