/* v61 移动端适配补丁 - 修复语言切换器遮挡 + 整体适配优化 */

/* ============ 语言切换器在手机端只显示国旗,小尺寸 ============ */
@media (max-width: 720px) {
  #yj-lang-switcher {
    top: 10px !important;
    right: 10px !important;
    z-index: 9500 !important;       /* 比 tabbar 99000 低,但比正常内容高 */
  }
  #yj-lang-switcher .yj-lang-btn {
    padding: 6px 9px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.85) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
  }
  /* 隐藏中文名 + 三角箭头, 只留国旗 */
  #yj-lang-switcher .yj-lang-name,
  #yj-lang-switcher .yj-lang-caret {
    display: none !important;
  }
  #yj-lang-switcher .yj-lang-flag {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  /* 弹出菜单适配 */
  #yj-lang-switcher .yj-lang-menu {
    top: 44px !important;
    right: 0 !important;
    min-width: 140px !important;
    max-height: 60vh !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.16) !important;
  }
}

/* ============ 主页右上角「进入」按钮给语言切换器让位置 ============ */
@media (max-width: 720px) {
  /* 给主页顶部 auth-area 右侧留一个 50px 的安全区域,避开语言图标 */
  body > div.brand,
  body header.brand,
  .brand .auth-area,
  .brand .top-actions,
  .brand .write-letter {
    padding-right: 50px !important;
  }
  /* 「进 入」按钮缩小一点,别太挤 */
  .brand .write-letter,
  body .write-letter {
    font-size: 12px !important;
    margin-right: 8px !important;
    padding: 4px 8px !important;
    letter-spacing: .15em !important;
  }
}

/* ============ 主页 nav 在手机上 改成横向滑动卡片 (避免太占高度) ============ */
@media (max-width: 720px) {
  .side-left {
    padding: 12px 16px 18px !important;
  }
  .side-left ul,
  .side-left .nav-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .side-left .nav-item {
    padding: 14px 6px !important;
    border: 1px solid rgba(60,50,40,.12) !important;
    border-bottom: 1px solid rgba(60,50,40,.12) !important;
    border-radius: 6px !important;
    background: #fff !important;
    text-align: center !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .side-left .nav-item .nav-cn {
    font-size: 12px !important;
    letter-spacing: .15em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .side-left .nav-item .nav-tip {
    font-size: 9.5px !important;
    color: #A8A395 !important;
    letter-spacing: .1em !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
    display: block !important;
  }
}

/* ============ 主页内容字号下沉,主标题 / 卡片更紧凑 ============ */
@media (max-width: 720px) {
  .brand h1,
  .brand .brand-title {
    font-size: 26px !important;
    letter-spacing: .15em !important;
  }
  .brand .brand-sub {
    font-size: 12px !important;
    letter-spacing: .25em !important;
  }
  /* hero 部分缩短 */
  .hero,
  .me-hero,
  .user-page-hero {
    padding: 24px 16px !important;
  }
}

/* ============ post / chat / 各个内嵌 nav 给底部留 tabbar 空间 ============ */
@media (max-width: 720px) {
  body.yj-mtabbar-on {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  /* 输入栏类型(写心情、发消息)需要悬浮在 tabbar 之上 */
  .compose-bar,
  .post-edit-bar,
  .chat-input-bar {
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============ 角色聊天页 / 编辑页 不要被 tabbar 占空间 ============ */
@media (max-width: 720px) {
  body.yj-mtabbar-on .ch-c {
    padding-bottom: 0 !important;
  }
  .ch-c-input {
    bottom: 0 !important;
  }
}

/* ============ 主页 v60 老的 grid-template-areas 适配 ============ */
@media (max-width: 980px) {
  /* 把 hero 和 brand 区分开,brand 给一个 padding-right 避开语言切换器 */
  .brand,
  body > header,
  body > .top-bar {
    padding-right: 56px !important;
  }
}

/* ============ 修一些固定按钮的 z-index, 不要遮挡 tabbar 弹层 ============ */
.yj-mtabbar { z-index: 99000 !important; }
.yj-mmask   { z-index: 99100 !important; }
.yj-mpanel  { z-index: 99101 !important; }
#yj-lang-switcher { z-index: 9500 !important; }
.now-card { z-index: auto !important; }