/*
 * ============================================================
 * mobile.css  —  手机端专属样式
 * 使用 html[data-device="mobile"] 高特异性前缀，
 * 可以在不依赖 !important 的情况下稳定覆盖 common.css。
 * data-device="mobile" 由 index.html 内联JS在渲染前同步设置。
 * ============================================================
 */

/* ============================================================
   SECTION 0 — 全局基础
   ============================================================ */
html[data-device="mobile"] {
    -webkit-text-size-adjust: 100%;
}

html[data-device="mobile"] body {
    overflow-x: hidden;
    width: 100%;
}

/* 触摸优化：禁用双击缩放 */
html[data-device="mobile"] input,
html[data-device="mobile"] select,
html[data-device="mobile"] textarea,
html[data-device="mobile"] button {
    touch-action: manipulation;
}

/* 防止iOS输入框字号<16px时自动缩放视口 */
html[data-device="mobile"] input[type="text"],
html[data-device="mobile"] input[type="email"],
html[data-device="mobile"] input[type="password"],
html[data-device="mobile"] input[type="number"],
html[data-device="mobile"] input[type="tel"],
html[data-device="mobile"] input[type="search"],
html[data-device="mobile"] textarea,
html[data-device="mobile"] select {
    font-size: 16px;
}

/* ============================================================
   SECTION 1 — 加载动画
   ============================================================ */
html[data-device="mobile"] #global-loading h2 {
    font-size: 18px;
}
html[data-device="mobile"] #loading-progress {
    width: 250px;
}

/* ============================================================
   SECTION 2 — 登录页
   ============================================================ */
html[data-device="mobile"] #login-page {
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 20px 16px env(safe-area-inset-bottom, 16px);
    box-sizing: border-box;
}

html[data-device="mobile"] .login-container {
    flex-direction: column;
    width: 100%;
    max-width: 440px;
    border-radius: 16px;
    overflow: hidden;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
}

/* 完全隐藏左侧蓝色介绍区 */
html[data-device="mobile"] .login-left {
    display: none;
}

html[data-device="mobile"] .login-right {
    padding: 28px 24px 20px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

html[data-device="mobile"] .login-right h2    { font-size: 22px; margin-bottom: 4px; }
html[data-device="mobile"] .login-right > p   { font-size: 13px; margin-bottom: 16px; }

html[data-device="mobile"] .login-tabs        { margin-bottom: 16px; }
html[data-device="mobile"] .login-tab         { padding: 10px 16px; font-size: 14px; }

/* 确保只有 active 的 form 显示 */
html[data-device="mobile"] .login-form         { display: none; }
html[data-device="mobile"] .login-form.active  { display: block; }

html[data-device="mobile"] .form-group        { margin-bottom: 12px; gap: 6px; }
html[data-device="mobile"] .login-actions     { margin-bottom: 14px; }
html[data-device="mobile"] .btn-login         { min-height: 48px; font-size: 16px; }
html[data-device="mobile"] .wechat-login-btn  { min-height: 48px; }
html[data-device="mobile"] .divider           { margin: 14px 0; }
html[data-device="mobile"] .register-link     { margin-top: 12px; font-size: 13px; }

/* 注册模态框：从底部弹出 */
html[data-device="mobile"] .register-modal-overlay {
    padding: 0;
    align-items: flex-end;
}
html[data-device="mobile"] .register-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
}
html[data-device="mobile"] .register-modal-header  { padding: 20px 20px 14px; }
html[data-device="mobile"] .register-modal-header h2 { font-size: 18px; }
html[data-device="mobile"] .register-modal-body    { padding: 16px 20px 32px; }

/* 成功/确认弹窗 */
html[data-device="mobile"] .success-modal-dialog {
    min-width: unset;
    width: calc(100vw - 40px);
    max-width: 100%;
    padding: 28px 20px;
}

/* ============================================================
   SECTION 3 — 主应用骨架（侧边栏 → 底部导航）
   ============================================================ */

/* 主应用：上内容 + 下导航栏 */
html[data-device="mobile"] #main-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* 顶部安全区（刘海屏）*/
html[data-device="mobile"] #main-app::before {
    content: '';
    display: block;
    height: env(safe-area-inset-top, 0px);
    background: var(--card-bg, #fff);
    flex-shrink: 0;
}

/* ======== 侧边栏 → 底部固定导航栏 ======== */
html[data-device="mobile"] .sidebar {
    /* 收回侧边栏定位，变为底部栏 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: auto;
    min-height: unset;
    max-height: none;
    flex-direction: row;
    /* 边框 */
    border-right: none;
    border-top: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.10);
    /* 层叠 */
    z-index: 900;
    overflow: visible;
    /* iOS 安全区 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* 取消折叠过渡效果 */
    transition: none;
}

/* 折叠状态在手机端不生效 */
html[data-device="mobile"] .sidebar.collapsed {
    width: 100%;
    min-width: unset;
    overflow: visible;
}

/* 隐藏底部栏中不需要的侧边栏元素 */
html[data-device="mobile"] .sidebar .logo,
html[data-device="mobile"] .sidebar-toggle,
html[data-device="mobile"] .sidebar .admin-portal-link,
html[data-device="mobile"] .sidebar .user-info,
html[data-device="mobile"] .sidebar .user-menu-popup {
    display: none;
}

/* ======== 导航菜单 → 底部标签栏 ======== */
html[data-device="mobile"] .nav-menu {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    padding: 0;
    gap: 0;
    width: 100%;
    height: 56px;
    overflow: hidden;
    flex: 1;
}

/* 导航按钮 */
html[data-device="mobile"] .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 56px;
    min-width: 0;
    padding: 4px 2px 2px;
    border-radius: 0;
    border: none;
    background: transparent;
    gap: 2px;
    font-size: 10px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: color 0.2s;
}

html[data-device="mobile"] .nav-item .nav-icon {
    width: 22px;
    height: 22px;
    font-size: 20px;
    margin: 0;
}

html[data-device="mobile"] .nav-item span:not(.nav-icon) {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

html[data-device="mobile"] .nav-item.active {
    color: var(--primary-color, #667eea);
    background: transparent;
    box-shadow: none;
}

/* 管理员菜单项手机上不显示（空间有限） */
html[data-device="mobile"] .nav-item.admin-nav-item {
    display: none;
}

/* ======== 主内容区 ======== */
html[data-device="mobile"] .main-content {
    flex: 1;
    width: 100%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* 底部留出导航栏 + 安全区高度 */
    padding-bottom: calc((56px + env(safe-area-inset-bottom, 0px)) / 0.85); 
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    min-height: 0;
    
    /* 🌟 全局缩放：使页面内所有元素等比例缩小至 85% */
    zoom: 0.85; 
}

/* ============================================================
   SECTION 4 — 仪表盘 Dashboard
   ============================================================ */
html[data-device="mobile"] .dashboard-container {
    padding: 12px;
}

html[data-device="mobile"] .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

html[data-device="mobile"] .dashboard-header .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

html[data-device="mobile"] .dashboard-header h1 {
    font-size: 20px;
    margin: 0;
}

html[data-device="mobile"] .date-info { display: none; }

html[data-device="mobile"] .time-range-selector {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

html[data-device="mobile"] .time-range-btn {
    padding: 8px 4px;
    font-size: 13px;
    text-align: center;
}

/* 统计卡片：2列网格，压缩间距和内边距 */
html[data-device="mobile"] .stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    min-height: unset;
}

html[data-device="mobile"] .stat-card {
    padding: 10px;
    gap: 8px;
    border-radius: 8px;
}

html[data-device="mobile"] .stat-icon  { font-size: 26px; }
html[data-device="mobile"] .stat-value { font-size: 20px; margin-bottom: 2px; }
html[data-device="mobile"] .stat-label { font-size: 11px; }

/* 主内容：单列 */
html[data-device="mobile"] .dashboard-main {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

html[data-device="mobile"] .dashboard-section {
    padding: 12px;
    border-radius: 10px;
}

html[data-device="mobile"] .section-header h2  { font-size: 15px; }
html[data-device="mobile"] .today-tasks-list   { max-height: 240px; }
html[data-device="mobile"] .task-item          { padding: 10px; gap: 8px; }
html[data-device="mobile"] .task-title         { font-size: 14px; margin-bottom: 4px; }
html[data-device="mobile"] .task-meta          { font-size: 12px; gap: 8px; }

/* 图表：单列，降低高度 */
html[data-device="mobile"] .dashboard-stats-charts {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

html[data-device="mobile"] .dashboard-stats-charts .chart-card    { padding: 10px; border-radius: 8px; }
html[data-device="mobile"] .dashboard-stats-charts .chart-card h3 { font-size: 13px; margin-bottom: 8px; }
html[data-device="mobile"] .dashboard-stats-charts .chart-wrapper  { height: 160px; }

/* 快速操作：4列 */
html[data-device="mobile"] .quick-actions { padding: 12px; border-radius: 10px; }
html[data-device="mobile"] .quick-actions h3 { font-size: 15px; margin-bottom: 10px; }
html[data-device="mobile"] .quick-action-buttons {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
html[data-device="mobile"] .quick-btn { padding: 10px 4px; gap: 4px; }
html[data-device="mobile"] .quick-btn span:first-child { font-size: 22px; }
html[data-device="mobile"] .quick-btn span:last-child  { font-size: 10px; }
html[data-device="mobile"] .quick-btn img.quick-btn-icon { width: 26px; height: 26px; }

/* ============================================================
   SECTION 5 — 计划管理 Tasks
   ============================================================ */
html[data-device="mobile"] .tasks-container {
    padding: 10px;
}

html[data-device="mobile"] .tasks-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

html[data-device="mobile"] .tasks-header h1 { font-size: 18px; }

html[data-device="mobile"] .header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}

/* 特别针对“新建计划”等主要按钮进行压缩 */
html[data-device="mobile"] .header-actions .btn-primary,
html[data-device="mobile"] .btn-add-task {
    padding: 6px 12px;
    font-size: 13px;
    height: 32px;
    border-radius: 16px;
}

/* ===== 手机端工具栏重排：弹叁筛选与结栏控件换行 ===== */
/* tasks-toolbar 䳌垂直 flex，各子行独占一行 */
html[data-device="mobile"] .tasks-toolbar,
html[data-device="mobile"] .task-toolbar {
    display: flex;
    flex-direction: column; /* 线排列！*/
    gap: 6px;
    padding: 6px 0;
    align-items: flex-start;
}

/* filter-buttons：全部筛选按钮左对齐横排，可滚动 */
html[data-device="mobile"] .filter-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    width: 100%;
    padding-bottom: 2px;
    justify-content: flex-start;
    align-items: center;
}

/* toolbar-right：将寻找框、时间选择、视图切换仍垂直排列 */
html[data-device="mobile"] .toolbar-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
    align-items: flex-start;
}

/* 隐藏搜索框和排序下拉（手机空间有限） */
html[data-device="mobile"] .sort-dropdown,
html[data-device="mobile"] .search-box {
    display: none;
}

/* 时间选择器：横线排列，可滚动 */
html[data-device="mobile"] .gantt-time-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}

/* 恢复"选择时间范围："、"显示单位："标签，但压缩字号 */
html[data-device="mobile"] .gantt-control-label {
    display: inline;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

html[data-device="mobile"] .gantt-time-range,
html[data-device="mobile"] .gantt-time-unit {
    font-size: 11px;
    height: 26px;
    padding: 2px 20px 2px 6px;
    flex-shrink: 0;
}

/* 视图切换按鈕行：紧凑按鈕 */
html[data-device="mobile"] .view-switcher {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-wrap: nowrap;
}

html[data-device="mobile"] .view-switch-btn {
    padding: 4px 8px;
    font-size: 14px;
    min-height: 28px;
    height: 28px;
}

/* 筛选按鈕统一压缩 */
html[data-device="mobile"] .filter-btn {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 28px;
    height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
}


/* 四象限：单列，减小间距 */
html[data-device="mobile"] .quadrant-container,
html[data-device="mobile"] .tasks-quadrant,
html[data-device="mobile"] .quadrant-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

/* 压缩任务卡片 */
html[data-device="mobile"] .task-card,
html[data-device="mobile"] .tasks-card {
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 6px;
}

/* 减小卡片内文字大小及头部间距 */
html[data-device="mobile"] .task-card-header,
html[data-device="mobile"] .tasks-card-header {
    margin-bottom: 4px;
    padding-bottom: 4px;
}
html[data-device="mobile"] .task-title { font-size: 13px; margin-bottom: 2px; line-height: 1.3; }
html[data-device="mobile"] .task-desc,
html[data-device="mobile"] .task-meta { font-size: 10px; }
html[data-device="mobile"] .task-status-badge { padding: 2px 4px; font-size: 9px; transform: scale(0.9); transform-origin: left center;}

/* ================== 计划管理列表/甘特图极限压缩 ================== */
html[data-device="mobile"] .tasks-gantt,
html[data-device="mobile"] .gantt-container {
    width: 100%;
    margin-top: 8px;
}
/* 左侧标题栏彻底缩窄 */
html[data-device="mobile"] .gantt-left-header,
html[data-device="mobile"] .gantt-body-left {
    width: 200px !important; /* 原为400px */
    flex: 0 0 200px !important;
}
/* 计划名称列 */
html[data-device="mobile"] .gantt-header-main,
html[data-device="mobile"] .gantt-cell-main-area {
    width: 140px !important; /* 原为290px */
}
/* 完成率列 */
html[data-device="mobile"] .gantt-header-completion,
html[data-device="mobile"] .gantt-cell-completion-area {
    width: 50px !important; /* 原为97px */
}
html[data-device="mobile"] .gantt-header-diagonal {
    width: 140px !important;
}
html[data-device="mobile"] .gantt-header-diagonal::before {
    margin-left: 140px !important;
}
/* 列表内字体极致压缩 */
html[data-device="mobile"] .task-name-text {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-device="mobile"] .gantt-cell-completion-area span {
    font-size: 10px !important;
}
html[data-device="mobile"] .diagonal-text-top,
html[data-device="mobile"] .diagonal-text-bottom {
    font-size: 10px !important;
}
html[data-device="mobile"] .gantt-left-cell {
    padding: 2px 4px !important;
}
html[data-device="mobile"] .gantt-bar-progress {
    height: 4px !important;
}
html[data-device="mobile"] .gantt-timeline-row {
    min-height: 28px !important;
}
html[data-device="mobile"] .gantt-tree-toggle {
    width: 14px !important;
    height: 14px !important;
    font-size: 10px !important;
    margin-right: 4px !important;
}

/* ===== 甘特图右侧时间轴可见性修复 ===== */
/* 整体容器允许水平滚动，让右侧时间轴内容可以被看到 */
html[data-device="mobile"] .tasks-gantt {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    display: block !important;
}
html[data-device="mobile"] .gantt-container {
    min-width: 500px; /* 确保甘特图至少有500px宽才能看到右侧 */
    overflow-x: visible !important;
}
/* 让甘特图的 header 和 body 都能完整显示 */
html[data-device="mobile"] .gantt-header {
    display: flex !important;
    flex-direction: row !important;
    min-width: 500px;
}
html[data-device="mobile"] .gantt-body {
    display: flex !important;
    flex-direction: row !important;
    min-width: 500px;
}
/* 右侧时间轴区域确保可见 */
html[data-device="mobile"] .gantt-body-right,
html[data-device="mobile"] .gantt-right-header {
    flex: 1 !important;
    min-width: 280px !important;
    overflow: visible !important;
    display: block !important;
}
/* ================================================================ */

/* 弹出抽屉/模态框：全屏 */
html[data-device="mobile"] .task-drawer { width: 100%; max-width: 100%; }

html[data-device="mobile"] .share-modal-dialog {
    width: calc(100vw - 32px);
    max-width: 100%;
    border-radius: 12px;
}

html[data-device="mobile"] .task-modal-dialog,
html[data-device="mobile"] .task-modal-container {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    border-radius: 0;
    margin: 0;
}

/* ============================================================
   SECTION 6 — AI 助手
   ============================================================ */
html[data-device="mobile"] .ai-page {
    flex-direction: column;
    height: calc(100dvh - 56px);
    gap: 0;
    min-height: unset;
}

html[data-device="mobile"] .ai-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

html[data-device="mobile"] .chat-card {
    border-radius: 0;
    flex: 1;
}

html[data-device="mobile"] .ai-header {
    padding: 8px 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 6px;
}

html[data-device="mobile"] .ai-header-title h1 { font-size: 16px; }
html[data-device="mobile"] .ai-header-title p   { font-size: 11px; }
html[data-device="mobile"] .ai-header-actions   { flex-wrap: wrap; gap: 4px; }
html[data-device="mobile"] .ai-header-btn       { padding: 4px 8px; font-size: 11px; }

/* 隐藏左侧历史记录侧栏 */
html[data-device="mobile"] .ai-sidebar,
html[data-device="mobile"] .ai-history-sidebar,
html[data-device="mobile"] .chat-history-sidebar {
    display: none;
}

html[data-device="mobile"] .chat-messages,
html[data-device="mobile"] .messages-container  { padding: 10px; font-size: 13px; }

/* 压缩聊天气泡 */
html[data-device="mobile"] .message-bubble,
html[data-device="mobile"] .chat-message-content {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
    line-height: 1.4;
}

html[data-device="mobile"] .chat-input-area,
html[data-device="mobile"] .ai-input-container,
html[data-device="mobile"] .input-area {
    padding: 8px 10px;
    min-height: auto;
}

html[data-device="mobile"] .chat-input-area textarea,
html[data-device="mobile"] .ai-input-container textarea,
html[data-device="mobile"] .input-area textarea {
    font-size: 14px;
    min-height: 36px;
    padding: 6px 10px;
}

html[data-device="mobile"] .btn-send {
    padding: 6px 10px;
    font-size: 13px;
    min-height: 36px;
}

/* ============================================================
   SECTION 7 — 番茄钟 Pomodoro
   ============================================================ */
html[data-device="mobile"] .pomodoro-container,
html[data-device="mobile"] .pomodoro-view {
    padding: 10px;
}

html[data-device="mobile"] .pomodoro-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}
html[data-device="mobile"] .pomodoro-header h1 { font-size: 18px; }

/* 整体缩品番茄钟以适应屏幕高度，并且垂直方向更紧凑 */
html[data-device="mobile"] .pomodoro-timer {
    scale: 0.8;
    transform-origin: top center;
    margin-bottom: 0px; 
}

/* ============================================================
   SECTION 8 — 工作组 Workgroup
   ============================================================ */
html[data-device="mobile"] .workgroup-container,
html[data-device="mobile"] .workgroup-layout {
    flex-direction: column;
    padding: 10px;
}

html[data-device="mobile"] .workgroup-sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 10px;
    flex-shrink: 0;
}

/* 压缩工作组项尺寸 */
html[data-device="mobile"] .workgroup-friend-item,
html[data-device="mobile"] .friend-request-item {
    padding: 8px;
    gap: 8px;
    margin-bottom: 6px;
    border-radius: 8px;
}

html[data-device="mobile"] .workgroup-friend-avatar,
html[data-device="mobile"] .friend-request-avatar {
    width: 36px;
    height: 36px;
}

html[data-device="mobile"] .workgroup-friend-name { font-size: 14px; }
html[data-device="mobile"] .workgroup-friend-details { font-size: 11px; }

html[data-device="mobile"] .workgroup-main-content {
    width: 100%;
    flex: 1;
    padding: 10px 0 0;
}

/* ============================================================
   SECTION 9 — 个人设置 & 系统设置
   ============================================================ */
html[data-device="mobile"] .personal-settings-container,
html[data-device="mobile"] .settings-view,
html[data-device="mobile"] .system-settings-container {
    padding: 10px;
}

html[data-device="mobile"] .settings-header,
html[data-device="mobile"] .personal-settings-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
}

html[data-device="mobile"] .settings-header h1,
html[data-device="mobile"] .personal-settings-header h1 {
    font-size: 18px;
}

html[data-device="mobile"] .settings-layout,
html[data-device="mobile"] .personal-settings-layout {
    flex-direction: column;
    gap: 10px;
}

/* 设置侧边导航 → 横向滚动标签，更紧凑 */
html[data-device="mobile"] .settings-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    width: 100%;
    gap: 4px;
}

html[data-device="mobile"] .settings-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 12px;
}

html[data-device="mobile"] .settings-content,
html[data-device="mobile"] .settings-panel {
    width: 100%;
    padding: 10px 0;
}

/* 压缩设置项表单 */
html[data-device="mobile"] .setting-item {
    padding: 10px 0;
}
html[data-device="mobile"] .setting-label { font-size: 13px; margin-bottom: 4px; }
html[data-device="mobile"] .setting-desc { font-size: 11px; }

/* ============================================================
   SECTION 10 — 回收站 & 其他页面
   ============================================================ */
html[data-device="mobile"] .trash-container {
    padding: 10px;
    overflow-x: visible !important; /* 允许按钮完整显示,不被裁剪 */
}
html[data-device="mobile"] .trash-header {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    overflow: visible !important; /* 允许按钮完整显示 */
}
html[data-device="mobile"] .trash-header h1 {
    font-size: 16px !important; /* 减小标题字号 */
}
html[data-device="mobile"] .trash-header h1 .emoji-icon {
    font-size: 16px !important; /* 减小图标大小 */
    margin-right: 4px;
}
html[data-device="mobile"] .trash-header h1 .gradient-text {
    font-size: 16px !important; /* 减小文字大小 */
}

/* 压缩回收站列表项 */
html[data-device="mobile"] .trash-item {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
}
html[data-device="mobile"] .trash-item-title { font-size: 14px; }
html[data-device="mobile"] .trash-item-meta { font-size: 11px; }

/* 修复"清空回收站"按钮溢出问题 */
html[data-device="mobile"] .trash-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px; /* 减小间距 */
    position: relative !important; /* 确保定位上下文 */
    z-index: 10 !important; /* 提升层级,避免被下方元素遮挡 */
}
html[data-device="mobile"] .trash-info #trash-count {
    font-size: 12px !important; /* 减小"共X项"的字号 */
    flex-shrink: 1; /* 允许文字在必要时压缩 */
}
/* 提升特异性，覆盖 common.css 里的 #clear-all-btn 等高特异性限制 */
html[data-device="mobile"] .trash-container .trash-header .trash-info .btn-danger.btn-sm,
html[data-device="mobile"] .trash-container .trash-header .trash-info button.btn-danger.btn-sm,
html[data-device="mobile"] #clear-all-btn,
html[data-device="mobile"] #clear-all-btn.btn-danger.btn-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important; /* 强制不换行 */
    word-break: keep-all !important;
    height: auto !important;
    min-height: 32px !important;
    flex-shrink: 0 !important; /* 防止按钮被压缩导致换行 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    position: relative !important; /* 确保按钮在独立的层叠上下文 */
    z-index: 20 !important; /* 更高的z-index,确保在最上层 */
}
html[data-device="mobile"] #clear-all-btn .btn-text,
html[data-device="mobile"] .trash-container .trash-header .trash-info .btn-danger.btn-sm .btn-text {
    white-space: nowrap !important; /* 文本不换行 */
}

/* 确保提示框不遮挡按钮 */
html[data-device="mobile"] .trash-tips {
    position: relative !important;
    z-index: 1 !important; /* 低于按钮的z-index */
    margin-top: 12px !important; /* 增加与header的间距 */
}



/* ============================================================
   SECTION 11 — 悬浮按钮位置（避免被导航栏遮挡且彼此错开）
   ============================================================ */
/* 提醒项最靠下 - 提高位置避免遮挡输入框 */
html[data-device="mobile"] .reminder-widget {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 80px) !important;
    transform-origin: bottom right;
    transform: scale(0.85);
    right: 12px !important;
}
/* 好友按钮居中 - 向上移动 */
html[data-device="mobile"] .workgroup-friend-button {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 140px) !important;
    transform-origin: bottom right;
    transform: scale(0.85);
    right: 12px !important;
}
/* AI助手最靠上 - 向上移动 */
html[data-device="mobile"] .ai-shortcut-button {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 200px) !important;
    transform-origin: bottom right;
    transform: scale(0.85);
    right: 12px !important;
}

/* ============================================================
   SECTION 12 — 通用 Card & 弹窗
   ============================================================ */
html[data-device="mobile"] .card {
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 10px;
}

html[data-device="mobile"] .custom-confirm-dialog {
    min-width: unset;
    width: calc(100vw - 40px);
    max-width: 380px;
    padding: 22px;
}

html[data-device="mobile"] .empty-state  { padding: 40px 16px; }
html[data-device="mobile"] .empty-icon   { font-size: 48px; }
html[data-device="mobile"] .empty-state p { font-size: 14px; }

/* 表格水平滚动 */
html[data-device="mobile"] .admin-table-container,
html[data-device="mobile"] .task-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   SECTION 13 — 横屏手机
   ============================================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
    html[data-device="mobile"] .sidebar {
        width: 60px;
        height: 100%;
        max-height: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        border-top: none;
        border-right: 1px solid var(--border-color, #e5e7eb);
        padding-bottom: 0;
    }
    html[data-device="mobile"] .nav-menu {
        flex-direction: column;
        height: auto;
        flex: 1;
        justify-content: flex-start;
        padding-top: 8px;
    }
    html[data-device="mobile"] .nav-item {
        height: 48px;
        width: 60px;
        flex: 0 0 auto;
    }
    html[data-device="mobile"] .nav-item span:not(.nav-icon) {
        display: none;
    }
    html[data-device="mobile"] .main-content {
        padding-bottom: 0;
        padding-left: 60px;
    }
}

/* ============================================================
   手机端 — 工作组好友弹窗同比例缩小
   ============================================================ */
/* 弹窗整体缩放为 70% */
html[data-device="mobile"] .workgroup-friend-overlay > div,
html[data-device="mobile"] #workgroup-friend-modal > div:first-child {
    zoom: 0.70;
    transform-origin: top center;
    max-width: calc(100vw / 0.70); /* zoom补偿，避免宽度溢出 */
    width: 90vw;
}

/* 弹窗容器本身撑满屏幕 / 对齐居中 */
html[data-device="mobile"] .workgroup-friend-overlay {
    align-items: flex-start !important;
    padding-top: 8px !important;
}

/* 好友标题压缩 */
html[data-device="mobile"] .workgroup-friend-title {
    font-size: 16px !important;
    padding: 10px 14px !important;
}

/* 标签栏 */
html[data-device="mobile"] .workgroup-friend-tabs {
    gap: 4px !important;
    padding: 0 10px !important;
}

html[data-device="mobile"] .workgroup-friend-tab {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* 好友列表项 */
html[data-device="mobile"] .workgroup-friend-list-item {
    padding: 8px 12px !important;
    gap: 10px !important;
}

html[data-device="mobile"] .workgroup-friend-avatar-img {
    width: 38px !important;
    height: 38px !important;
}

html[data-device="mobile"] .workgroup-friend-name {
    font-size: 14px !important;
}

html[data-device="mobile"] .workgroup-friend-info {
    font-size: 11px !important;
}