/* ============================================================
   MOBILE LAYOUT — 全新规划 (≤ 880px)
   
   PC 端（> 880px）：左侧边栏 + 右侧主内容，保持原有设计
   
   移动端布局规划：
   - 3 个底部标签：首页 / 任务 / 宠物
     （去掉"我的"——小朋友切换和资料合并到首页顶部）
   - Header：压缩为单行 Logo + 右侧 日期/退出
   - 首页：孩子选择横向滑条 → 资料卡 → 陪伴中心
   - 任务：学科/家务/自定义任务 + 记录
   - 宠物：宠物展示 + 领养
   - 新用户：显示空引导态提示添加小朋友
   ============================================================ */

/* 桌面端默认：底部导航不显示 */
.mobile-nav { display: none; }

/* ============================================================
   移动端断点
   ============================================================ */
@media (max-width: 880px) {

  /* ── 全局基础 ── */
  body {
    padding-bottom: 68px; /* 底部导航高度 */
  }

  /* ── Header：修复为单行紧凑排版 ── */
  .top-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
    border-radius: 20px !important;
  }

  /* Brand 左侧：图标 + 文字横排，不允许换行 */
  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  .brand-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }

  .brand-icon {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
    font-size: 1.4rem !important;
  }

  .brand-icon__image {
    width: 36px !important;
    height: 36px !important;
  }

  /* h1 单行不换行，溢出隐藏 */
  .brand h1 {
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Tagline 移动端隐藏，节省空间 */
  .tagline {
    display: none !important;
  }

  /* Header 右侧：日期 + 退出，收缩不换行 */
  .header-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }

  #datePill {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    white-space: nowrap;
  }

  #btnLogout {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    white-space: nowrap;
  }

  /* ── 主布局：单列 ── */
  .layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /* ── 底部导航：3 个标签 ── */
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 252, 247, 0.96);
    border-top: 1px solid rgba(180, 150, 100, 0.15);
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    z-index: 1000;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 -4px 20px rgba(120, 80, 30, 0.08);
  }

  .app--locked .mobile-nav {
    display: none !important;
  }

  .mobile-nav__btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 6px 0;
    transition: color 0.18s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav__btn span {
    font-size: 1.4rem;
    line-height: 1;
  }

  .mobile-nav__btn:active {
    transform: scale(0.88);
  }

  /* 激活状态 */
  body[data-mobile-tab="home"]  .mobile-nav__btn[data-mobile-tab="home"],
  body[data-mobile-tab="tasks"] .mobile-nav__btn[data-mobile-tab="tasks"],
  body[data-mobile-tab="pets"]  .mobile-nav__btn[data-mobile-tab="pets"] {
    color: #44c8b1;
    font-weight: 600;
  }

  /* ── 桌面侧边栏：移动端隐藏（改为首页内联展示） ── */
  .panel--kids {
    display: none !important;
  }

  /* ── 主面板：始终显示 ── */
  .panel--main {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* ── 桌面 tab 切换不用了 ── */
  .tabs {
    display: none !important;
  }

  /* ── 任务和宠物面板：默认隐藏 ── */
  #panelTasks,
  #panelPets {
    display: none !important;
  }

  /* ============================================================
     首页 (home tab)
     显示：小朋友横向选择条 + 资料卡 + 陪伴中心
     ============================================================ */
  body[data-mobile-tab="home"] .mobile-home-section {
    display: block !important;
  }

  body[data-mobile-tab="home"] .mobile-my-section {
    display: none !important;
  }

  body[data-mobile-tab="home"] #panelTasks,
  body[data-mobile-tab="home"] #panelPets {
    display: none !important;
  }

  /* 首页：显示"我的"资料卡（头像+积分+等级） */
  body[data-mobile-tab="home"] .mobile-my-section {
    display: none !important;
  }

  /* 首页 kid-profile-card 和 score-row 都显示 */
  body[data-mobile-tab="home"] .kid-profile-card {
    display: block !important;
  }

  body[data-mobile-tab="home"] .score-row {
    display: flex !important;
  }

  /* ── 小朋友选择条：显示在顶部（首页用 panel--kids inline 替代） ── */
  /* 移动端，在 main-content 内部，首页时把 panel--kids inline 显示 */
  body[data-mobile-tab="home"] .panel--kids {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
  }

  /* kid-list 在首页：横向滚动条，pills 样式 */
  body[data-mobile-tab="home"] .kid-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 2px 8px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body[data-mobile-tab="home"] .kid-list::-webkit-scrollbar {
    display: none;
  }

  body[data-mobile-tab="home"] .kid-row {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: auto !important;
    width: auto !important;
  }

  body[data-mobile-tab="home"] .kid-item {
    min-width: 120px !important;
    max-width: 160px !important;
    flex-direction: row;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap;
    gap: 8px;
  }

  body[data-mobile-tab="home"] .kid-item__avatar {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
  }

  body[data-mobile-tab="home"] .kid-item__copy strong {
    font-size: 0.85rem !important;
  }

  body[data-mobile-tab="home"] .kid-item__copy small {
    font-size: 0.7rem !important;
  }

  /* 首页 panel-head（成长主角 + 添加按钮）：显示 */
  body[data-mobile-tab="home"] .panel-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 4px;
    margin-bottom: 4px !important;
  }

  body[data-mobile-tab="home"] .panel-head h2 {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  /* 隐藏首页内的 kid-form（移到专门页面） */
  body[data-mobile-tab="home"] .kid-form {
    display: none !important;
  }

  /* ============================================================
     任务页 (tasks tab)
     ============================================================ */
  body[data-mobile-tab="tasks"] .mobile-home-section,
  body[data-mobile-tab="tasks"] .mobile-my-section,
  body[data-mobile-tab="tasks"] .kid-profile-card,
  body[data-mobile-tab="tasks"] .score-row {
    display: none !important;
  }

  body[data-mobile-tab="tasks"] #panelTasks {
    display: block !important;
  }

  body[data-mobile-tab="tasks"] #panelPets {
    display: none !important;
  }

  body[data-mobile-tab="tasks"] .panel--kids {
    display: none !important;
  }

  /* ============================================================
     宠物页 (pets tab)
     ============================================================ */
  body[data-mobile-tab="pets"] .mobile-home-section,
  body[data-mobile-tab="pets"] .mobile-my-section,
  body[data-mobile-tab="pets"] .kid-profile-card,
  body[data-mobile-tab="pets"] .score-row {
    display: none !important;
  }

  body[data-mobile-tab="pets"] #panelTasks {
    display: none !important;
  }

  body[data-mobile-tab="pets"] #panelPets {
    display: block !important;
  }

  body[data-mobile-tab="pets"] .panel--kids {
    display: none !important;
  }

  /* ============================================================
     陪伴中心卡片：优化（首页）
     ============================================================ */
  .companion-dashboard {
    margin-top: 12px;
  }

  .dashboard-title {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
  }

  .hero-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    min-height: 90px !important;
    border-radius: 18px !important;
    cursor: pointer;
  }

  .hero-card-icon {
    font-size: 2.2rem !important;
    flex-shrink: 0 !important;
    line-height: 1;
  }

  .hero-card-text h3 {
    font-size: 1rem !important;
    margin: 0 0 4px !important;
  }

  .hero-card-text p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: var(--text-muted);
  }

  /* ============================================================
     资料卡 & 积分在首页的样式
     ============================================================ */
  .kid-profile-card {
    padding: 1rem !important;
  }

  .kid-profile-card__hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .kid-profile-card__media {
    flex-direction: row !important;
    gap: 12px !important;
  }

  .kid-profile-stats {
    justify-items: start !important;
  }

  .score-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ============================================================
     公告栏：移动端紧凑
     ============================================================ */
  .announcement-bar {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }

  /* ============================================================
     主内容区域的内边距
     ============================================================ */
  .main-content {
    gap: 10px !important;
    padding: 0 !important;
  }

  /* ============================================================
     任务卡片在移动端
     ============================================================ */
  .task-group {
    margin-bottom: 12px;
  }

  .task-group h3 {
    font-size: 0.85rem;
  }

  /* ============================================================
     宠物卡片在移动端：文字增大可读性
     ============================================================ */
  .pet-slot__name {
    font-size: 0.9rem !important;
  }

  .pet-slot__meta {
    font-size: 0.75rem !important;
  }

  /* ============================================================
     空引导态（新用户）
     ============================================================ */
  .empty-state {
    padding: 2rem 1.5rem !important;
    text-align: center;
  }

  .empty-state p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
  }
  /* ===== FIX FOR KID-FORM ON MOBILE ===== */
  body .kid-form:not(.hidden) {
    display: flex !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    background: #fff;
    z-index: 99999;
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5), 0 10px 40px rgba(0,0,0,0.3) !important;
    border: none;
    max-height: 90vh;
    overflow-y: auto;
  }
}