/* 手机端可读性与触控基线（≤640px）
 *
 * 这一层只做三件事，不动布局结构：
 *   1. 字号下限：可见文字 ≥11px，正文类 ≥13px
 *   2. 输入控件 ≥16px：低于 16px 时 iOS Safari 聚焦会自动放大整页
 *   3. 触控热区 ≥44×44：视觉尺寸不变，用伪元素把热区向外扩
 *
 * 必须最后加载（排在 toolbox.css 之后），才能覆盖各文件 @media 块里的旧值。
 * 新增此文件时已同步 server.py 的静态白名单，否则 404。
 */

@media (max-width: 640px) {
  /* ---------- 1. 字号下限 ---------- */
  .mobile-nav-item {
    font-size: 11px;
  }

  .task-title {
    font-size: 13px;
  }

  .identity-tag {
    font-size: 11px;
    padding: 4px 7px;
  }

  .section-heading h2 {
    font-size: 16px;
  }

  .ai-card-head h2 {
    font-size: 16px;
  }

  .ai-status {
    font-size: 11px;
    padding: 3px 7px;
  }

  .ai-description,
  .ai-summary {
    font-size: 12px;
  }

  .plan-name {
    font-size: 13px;
  }

  .plan-desc {
    font-size: 11px;
    max-width: none;
  }

  .plan-metric span {
    font-size: 11px;
  }

  .plan-metric strong {
    font-size: 13px;
  }

  .plan-percent {
    font-size: 11px;
  }

  .stat-label,
  .stat-caption {
    font-size: 11px;
  }

  .filter-pill {
    font-size: 11px;
    padding: 6px 9px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .search-result-meta {
    font-size: 12px;
  }

  .toast {
    font-size: 13px;
  }

  /* ---------- 2. 输入控件 16px，避免 iOS 聚焦缩放 ---------- */
  .search-wrap input,
  .ai-chat-input,
  .quick-add-input,
  .text-input,
  .select-input,
  .textarea-input {
    font-size: 16px;
  }

  /* ---------- 3. 触控热区 ≥44×44（视觉不变） ---------- */
  .task-check {
    position: relative;
  }

  .task-check::after {
    content: "";
    position: absolute;
    inset: -11px;
  }

  .row-arrow {
    position: relative;
  }

  .row-arrow::after {
    content: "";
    position: absolute;
    inset: -8px -10px;
  }

  .mini-icon-button {
    position: relative;
  }

  .mini-icon-button::after {
    content: "";
    position: absolute;
    inset: -9px;
  }

  .top-actions .icon-button {
    position: relative;
  }

  .top-actions .icon-button::after {
    content: "";
    position: absolute;
    inset: -4px;
  }

  .modal-close {
    width: 44px;
    height: 44px;
  }

  /* ---------- 4. 不再整块隐藏信息 ---------- */
  /* 截止时间：手机上原本 display:none，等于信息丢失。
     改为保留但压缩字号，标题靠 flex 收缩让位。 */
  .task-due {
    display: inline-flex;
    font-size: 11px;
  }

  /* 通知入口：手机上原本被隐藏，通知不可达。 */
  .top-actions .notification-action {
    display: grid;
  }

  /* ---------- 5. 待办行改两行：标题独占第一行，时间/身份/操作排第二行 ----------
     原来所有元素挤在一行，task-due 一恢复就把标题压成「提交…」这种三个字。 */
  .task-row {
    flex-wrap: wrap;
    row-gap: 3px;
    align-items: center;
    padding: 9px 1px;
  }

  .task-check {
    flex: 0 0 auto;
  }

  .task-title {
    flex: 1 1 calc(100% - 60px);
    min-width: 0;
    font-size: 13px;
  }

  .row-arrow {
    order: 3;
    flex: 0 0 auto;
  }

  .task-due {
    order: 4;
    flex: 0 0 auto;
    margin-left: 21px;
  }

  .identity-tag {
    order: 5;
    flex: 0 0 auto;
  }

  .task-actions {
    order: 6;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* ---------- 6. 账号设备卡：手机上不再 fixed 浮在内容上 ----------
     入口改到「我的 → 账号与设备」。 */
  #trustedCurrentDevice {
    display: none !important;
  }

  /* ---------- 7. 画布工具栏：不占一整行 ---------- */
  .canvas-toolbar {
    margin: 8px 0;
    gap: 6px;
    font-size: 12px;
  }

  .canvas-toolbar [data-canvas-profile] {
    display: none;
  }

  .canvas-toolbar .button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  /* ---------- 8. 首屏高度：hero 与卡片内边距压缩 ----------
     hero 在 390×844 上原本吃掉约 112px，滚动后毫无信息量。 */
  .hero {
    min-height: 0;
    padding: 15px 18px;
    margin-bottom: 10px;
    border-radius: 15px;
  }

  .hero h1 {
    font-size: 23px;
    letter-spacing: -0.03em;
    margin-bottom: 3px;
  }

  .hero p {
    font-size: 12px;
    max-width: none;
  }

  .page-title {
    font-size: 23px;
  }

  .card {
    border-radius: 15px;
  }

  .section-card {
    padding: 13px 12px 10px;
  }

  .ai-card {
    padding: 14px 13px;
    gap: 10px;
  }

  /* ---------- 9. 底部留白：固定底栏会吃掉最后一屏的内容 ---------- */
  .main-content {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- 10. 布局工具栏：手机压成一行矮条 ---------- */
  .main-content > .wb-layout-bar {
    position: relative;
    z-index: 3;
    margin: -26px 0 6px;
    min-height: 38px;
    padding: 4px 8px;
    gap: 6px;
  }

  .wb-layout-bar .wb-layout-scope,
  .wb-layout-bar .wb-layout-status {
    display: none;
  }

  .wb-layout-bar .wb-layout-btn {
    min-height: 28px;
    padding: 0 9px;
    font-size: 12px;
  }

  /* ---------- 11. 弹窗：手机上改成底部抽屉 ----------
     原来居中卡片顶部留 89px 空白，内容还被裁。 */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal-card {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .modal-card.wide-modal {
    width: 100%;
    max-width: none;
  }

  .modal-card .modal-title,
  .modal-card h2 {
    font-size: 19px;
  }

  /* ---------- 12. 底栏中央 ⊕：降低凸起与阴影，别让它压过其余 5 项 ---------- */
  .mobile-add {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-top: -9px;
    box-shadow: 0 3px 9px rgba(222, 172, 96, 0.25);
  }

  .mobile-add svg {
    width: 19px;
    height: 19px;
  }

  /* ---------- 13. 顶栏瘦身：手机上只留 铃铛/主题/添加；工具箱与设置收进底栏 ---------- */
  .top-actions .theme-toggle {
    display: grid;
  }
  .top-actions .toolbox-action,
  .top-actions #topSettings {
    display: none;
  }
  .mobile-nav {
    justify-content: space-around;
  }
  .mobile-nav-item {
    flex: 1 1 0;
    min-width: 0;
  }

  /* ---------- 14. 主题三选一：两列留一个孤格，改成三等分一行 ---------- */
  .theme-switcher {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .theme-switcher .locale-choice {
    padding: 8px 6px;
    font-size: 12px;
    text-align: center;
  }

  /* ---------- 15. 通知中心 ----------
     该面板内部是相对外层卡片做绝对定位的，强行改成底部抽屉会让列表溢出面板
     （实测内容压到面板外、与底层待办行视觉重叠），此处只做安全区留白。 */
  .notification-center {
    max-height: 80dvh;
    overflow-y: auto;
  }
}