/* =========================================================================
   any-listen 移动端适配层  (mobile.css)
   ------------------------------------------------------------------------
   目标：把桌面双栏 Web 播放器改造成主流音乐 App 的移动端形态
     · 全屏铺满，去桌面圆角/阴影
     · 底部 Tab 栏（导航项由 JS 从侧栏搬过来，保留原生路由）
     · 侧栏 -> 左滑抽屉（汉堡按钮开启）
     · 迷你播放条 + 顶部细进度条，点击展开全屏播放页
     · 全屏播放页纵向排列：封面 -> 歌曲信息 -> 歌词 -> 控制条
     · 在线资源页：音源改为横向滚动 chip，歌曲行改为两行卡片
   仅作用于 max-width: 820px，桌面端零影响。
   ========================================================================= */

/* 移动端外壳（Tab 栏 / 遮罩 / 汉堡 / 发现页）默认隐藏：
   桌面端及 JS 尚未接管时都不该出现在页面里，只有下面的媒体查询才启用 */
#al-tabbar,
#al-backdrop,
#al-menu-btn,
#al-discover,
#al-discover-tab { display: none; }

@media (max-width: 820px) {

  /* ---------------------------------------------------------------------
     0. 全局：铺满 + 触控优化
     --------------------------------------------------------------------- */
  html {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
  }
  body { overscroll-behavior: none; }
  * { -webkit-tap-highlight-color: transparent; }

  html.web:not(.fullscreen) { padding: 0 !important; height: 100vh !important; height: 100dvh !important; }
  /* 应用用 JS 给 #body 写入桌面尺寸的内联样式（left/top:8px + 固定 px 宽高），
     这里用 !important 强制铺满，无视 JS 的测量结果 */
  html.web:not(.fullscreen) #body {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  html.web:not(.fullscreen) #root { border-radius: 0 !important; box-shadow: none !important; }
  html.web.fullscreen { min-width: 0 !important; min-height: 0 !important; }

  #root:before { opacity: .96; }

  /* ---------------------------------------------------------------------
     1. 布局骨架：#app-main 保持单列，侧栏脱离文档流成为抽屉
     --------------------------------------------------------------------- */
  /* #app-main 原本 z-index:1，会自建堆叠上下文，把抽屉的 z-index 困在里面，
     导致抽屉被遮罩(#al-backdrop,z55)盖住。这里降为 auto，让抽屉参与全局层级 */
  html.web:not(.fullscreen) #app-main.svelte-1iyt27a { z-index: auto !important; }
  .aside.svelte-bk42pb {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    display: flex !important;
    width: 80vw !important;
    max-width: 19rem !important;
    /* 原侧栏是文档流内的，靠 app 背景透出层次；改成浮层后必须不透明 */
    background-color: var(--color-content-background) !important;
    background-image: linear-gradient(var(--color-app-background), var(--color-app-background));
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 0 28px rgba(0, 0, 0, .5);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
  }
  .aside.svelte-bk42pb.al-drawer-open { transform: translateX(0); }

  /* 抽屉遮罩 */
  #al-backdrop {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 55;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.32, .72, 0, 1);
  }
  #al-backdrop.al-open { opacity: 1; pointer-events: auto; }

  /* 抽屉里的 logo 区压缩 */
  .aside-logo.svelte-zhhu9c { padding: 1rem 1.25rem .5rem !important; }

  /* ---------------------------------------------------------------------
     2. 底部 Tab 栏
     --------------------------------------------------------------------- */
  #al-tabbar {
    position: fixed;
    right: 0; bottom: 0; left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    height: calc(3.25rem + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--color-app-background);
    border-top: 1px solid rgba(128, 128, 128, .16);
    backdrop-filter: blur(14px);
  }
  #al-tabbar > .aside-nav.svelte-lq7vmc {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 0 !important;
    /* 让位给左侧的「发现」入口，与原生导航项等分剩余宽度 */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0 !important;
  }
  #al-tabbar li.nav-item.svelte-lq7vmc {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }
  #al-tabbar .link.svelte-lq7vmc {
    flex-flow: column nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  #al-tabbar .link.active.svelte-lq7vmc { color: var(--color-primary) !important; }
  #al-tabbar .link.svelte-lq7vmc:active { opacity: .6 !important; }
  #al-tabbar .left.svelte-lq7vmc {
    flex-flow: column nowrap !important;
    align-items: center !important;
    gap: 2px;
  }
  #al-tabbar .icon.svelte-lq7vmc { height: 1.375rem !important; }
  #al-tabbar .icon.svelte-lq7vmc > svg { height: 1.375rem !important; }
  #al-tabbar .nav-name.svelte-lq7vmc {
    max-width: 100%;
    font-size: .6875rem !important;
    line-height: 1.1 !important;
  }
  #al-tabbar .right.svelte-lq7vmc { display: none !important; }

  /* ---------------------------------------------------------------------
     3. 顶栏 + 汉堡按钮
     --------------------------------------------------------------------- */
  .toolbar.svelte-zdpopk {
    height: 3rem !important;
    padding-top: env(safe-area-inset-top);
  }
  .toolbar .left.svelte-zdpopk {
    margin-left: 2.75rem !important;
    margin-right: .25rem !important;
  }
  /* 搜索框铺满（内联 style 上的自定义属性用 !important 覆盖） */
  .toolbar .left > svelte-css-wrapper {
    --width: 100% !important;
    --min-width: 0 !important;
    --max-width: none !important;
  }
  .toolbar .search-input.svelte-h78o9f {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 2.25rem !important;
  }
  .toolbar .search-input.svelte-h78o9f .content,
  .toolbar .search-input.svelte-h78o9f .form { height: 2.25rem !important; }
  /* 移动端不需要“最大化窗口” */
  .toolbar .control.svelte-1ikdf46 .btn.fullscreen { display: none !important; }
  .toolbar .control.svelte-1ikdf46 { height: 2.25rem !important; align-self: center !important; }
  .toolbar .control.svelte-1ikdf46 .btn {
    width: 2.5rem !important;
    height: 2.25rem !important;
  }

  #al-menu-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top) + .25rem);
    left: .3125rem;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--color-font);
    background: none;
    border: none;
    cursor: pointer;
  }
  #al-menu-btn svg { width: 1.375rem; height: 1.375rem; }

  /* 导航尚未渲染时（登录页/加载中）不显示移动端外壳 */
  html.al-no-nav #al-tabbar,
  html.al-no-nav #al-menu-btn { display: none !important; }

  /* ---------------------------------------------------------------------
     4. 迷你播放条：底部悬浮在 Tab 栏之上
     --------------------------------------------------------------------- */
  .player.svelte-1m4rvoi {
    flex: none !important;
    height: 3.625rem !important;
    margin-bottom: calc(3.25rem + env(safe-area-inset-bottom));
    contain: none !important;
  }
  /* 顶部细进度条（由 JS 写入 --al-progress） */
  .player.svelte-1m4rvoi:before {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    width: var(--al-progress, 0%);
    height: 2px;
    content: "";
    background-color: var(--color-primary);
    border-radius: 0 2px 2px 0;
  }
  .player .bg.svelte-1m4rvoi {
    border-radius: 0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .18) !important;
    opacity: .96 !important;
  }
  .player-inner.svelte-1m4rvoi { padding-right: .25rem !important; }
  /* 右侧的进度/音量/收藏等全部隐藏，改为迷你条 */
  .player .side.right.svelte-bmoqpd { display: none !important; }
  /* 封面 */
  .player .container.svelte-1p7atnh {
    padding: .375rem .5rem .375rem .75rem !important;
  }
  .player .container.svelte-1p7atnh .btn { height: 100% !important; }
  /* 歌名 + 演唱者 */
  .player .container.svelte-3s10tz .name.svelte-3s10tz {
    font-size: .8125rem !important;
    padding: 0 0 .125rem !important;
  }
  .player .container.svelte-3s10tz .status-text.svelte-3s10tz {
    height: auto !important;
    font-size: .75rem !important;
    padding-bottom: 0 !important;
  }
  /* 上一曲 / 播放 / 下一曲：加大点击区域 */
  .player .container.svelte-1lcpi14 {
    gap: .25rem !important;
    padding: 0 .25rem 0 0 !important;
  }
  .player .container.svelte-1lcpi14 .btn.svelte-1lcpi14 {
    padding: .5rem !important;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
  }

  /* 播放页打开时隐藏汉堡与 Tab 栏 */
  html.al-detail-open #al-menu-btn,
  html.al-detail-open #al-tabbar { display: none !important; }

  /* ---------------------------------------------------------------------
     5. 全屏播放页（黑胶 + 歌词）
     --------------------------------------------------------------------- */
  .play-detail.svelte-gyz3k6 {
    z-index: 100 !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 0 !important;
  }
  .play-detail .header.svelte-1fcbdnl { flex: 0 0 2.75rem !important; }
  .play-detail .header.svelte-1fcbdnl .control-btn button.svelte-1fcbdnl {
    width: 2.75rem !important;
    height: 2.75rem !important;
    /* 基座图标色是 --color-450(155)，叠在模糊封面上偏浅，压深一档 */
    color: var(--color-700) !important;
  }
  .play-detail .player-detail-main.svelte-12q3ze9 {
    flex-flow: column nowrap !important;
  }
  /* 上半：封面 + 歌曲信息 */
  .play-detail .left-info.svelte-zgeewk {
    flex: none !important;
    width: 100% !important;
    padding: .25rem 1.25rem 0 !important;
    contain: none !important;
    --content-width: 100%;
    overflow: visible !important;
  }
  .play-detail .cover.svelte-vr70ec {
    width: 60vw !important;
    max-width: 15rem !important;
    height: 60vw;
    max-height: 15rem;
    margin: 0 auto;
    padding: 0 !important;
  }
  .play-detail .info.svelte-mr0a10 {
    flex: none !important;
    width: 100% !important;
    margin-top: .75rem !important;
    text-align: center;
    overflow: visible !important;
  }
  .play-detail .info.svelte-mr0a10 p { font-size: .9375rem !important; }
  /* 下半：歌词 */
  .play-detail .right-lyric.svelte-1xyitmc {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0;
  }
  /* 底部控制条 */
  .play-detail .footer.svelte-1pfmp52 {
    flex: none !important;
    height: auto !important;
    contain: none !important;
  }
  .play-detail .footer-content.svelte-1pfmp52 {
    padding: 0 .875rem .375rem !important;
  }
  .play-detail .middle-play-progress.svelte-fs2km2 { width: 100% !important; }
  .play-detail .control.svelte-1pfmp52 .side.svelte-1pfmp52 { flex: 1 !important; }
  .play-detail .play-status.svelte-1hk5lhd { position: static !important; }
  /* 动态背景：基座歌词行用 --color-300(188) 这种偏浅的灰，
     叠在模糊封面(+.7 白罩)上几乎读不出来；改用主题深灰。
     选择器只到 .line-content 这一层，基座"当前行高亮"的更具体规则依旧优先 */
  .play-detail .right-lyric.svelte-1xyitmc .line-content .font-lrc {
    color: var(--color-800);
  }
  /* 歌词行基座只留 1px 左内边距（右侧那 46.8px 是给译文列预留的），
     手机上是贴着屏幕左缘的；补足留白并居中，与上方居中歌曲信息一致 */
  .play-detail .right-lyric .line-content {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    text-align: center;
  }

  /* ---------------------------------------------------------------------
     6. 在线资源页：音源横向 chip + 歌曲行卡片化
     --------------------------------------------------------------------- */
  .online-search-music.svelte-1s5szoh {
    flex-flow: column nowrap !important;
    padding-top: 0 !important;
  }
  .source-list.svelte-1o6kt82 {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 .5rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .source-list.svelte-1o6kt82::-webkit-scrollbar { display: none; height: 0; }
  .source-list.svelte-1o6kt82 .list:where(.svelte-1o6kt82) {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: .5rem !important;
    height: auto !important;
    padding: .375rem .75rem !important;
  }
  .source-list.svelte-1o6kt82 .list-item:where(.svelte-1o6kt82) {
    flex: none !important;
    display: block !important;
    padding: 0 .875rem !important;
    font-size: .8125rem !important;
    line-height: 2rem !important;
    white-space: nowrap;
    background-color: var(--color-primary-light-300-alpha-700) !important;
    border-radius: 1rem !important;
  }
  /* 本主题下 --color-primary-font 与 --color-primary 同值，直接用白字保证对比 */
  .source-list.svelte-1o6kt82 .list-item.active:where(.svelte-1o6kt82) {
    color: #fff !important;
    background-color: var(--color-primary) !important;
  }

  /* 隐藏桌面表格列头 */
  .header.svelte-18cpb8z { display: none !important; }
  /* 顶部操作按钮行 */
  .header.svelte-vxiqxt { padding: 0 .625rem .375rem !important; }
  /* 列表容器铺满 */
  .container.svelte-g577j0 { margin: 0 !important; }
  .container.svelte-19emjl6 { min-height: 0; }

  /* 歌曲行 -> 两行卡片（封面 | 歌名 / 艺术家） */
  .container.svelte-1iie4bd {
    display: grid !important;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: .625rem !important;
    row-gap: 0 !important;
    height: auto !important;
    min-height: 3.75rem;
    padding: .5rem .625rem !important;
  }
  .container.svelte-1iie4bd > .pic.svelte-1iie4bd {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.75rem !important;
    height: 2.75rem !important;
    align-self: center;
  }
  .container.svelte-1iie4bd > .name-cell.svelte-1iie4bd {
    grid-column: 2;
    grid-row: 1;
    overflow: visible !important;
  }
  /* 只保留第一个非歌名单元格（艺术家），专辑与时长隐藏 */
  .container.svelte-1iie4bd > .list-item-cell.svelte-1iie4bd:not(.name-cell)
    ~ .list-item-cell.svelte-1iie4bd:not(.name-cell) {
    display: none !important;
  }
  .container.svelte-1iie4bd > .list-item-cell.svelte-1iie4bd:not(.name-cell) {
    grid-column: 2;
    grid-row: 2;
    font-size: .75rem;
    color: var(--color-font-label);
    opacity: .85;
  }
  .container.svelte-1iie4bd .name-left.svelte-1iie4bd {
    flex-flow: row nowrap !important;
    align-items: center;
    min-width: 0;
  }
  .container.svelte-1iie4bd .name-left.svelte-1iie4bd > .name.svelte-1iie4bd {
    flex: 0 1 auto;
    min-width: 0;
    font-size: .875rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 音源已在顶部 chip 选中，行内只留音质标签 */
  .container.svelte-1iie4bd .name-left.svelte-1iie4bd > .label.svelte-1iie4bd {
    flex: none;
    margin-left: .375rem;
  }
  .container.svelte-1iie4bd .name-left.svelte-1iie4bd > .label.svelte-1iie4bd .badge.primary {
    display: none !important;
  }
  .container.svelte-1iie4bd .name-right.svelte-1iie4bd { margin: 0 0 0 .5rem !important; }
  .container.svelte-1iie4bd .name-right.svelte-1iie4bd .btn { padding: .5rem !important; }

  /* ---------------------------------------------------------------------
     7. 「发现」入口与发现页
     --------------------------------------------------------------------- */
  /* Tab 栏左侧入口（自己构建，不依赖 Svelte 类名） */
  #al-tabbar > #al-discover-tab {
    flex: 0 0 20%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    padding: 0;
    color: var(--color-font);
    background: none;
    border: none;
    cursor: pointer;
  }
  #al-discover-tab .al-ic {
    display: flex;
    align-items: center;
    height: 1.375rem;
  }
  #al-discover-tab .al-ic > svg { width: 1.375rem; height: 1.375rem; }
  #al-discover-tab .al-nm { font-size: .6875rem; line-height: 1.1; }
  #al-discover-tab:active { opacity: .6; }
  #al-discover-tab.al-active { color: var(--color-primary); }

  #al-discover {
    position: fixed;
    top: 0; right: 0; left: 0;
    /* 底部让开 迷你播放条(3.625rem) + Tab 栏(3.25rem) */
    bottom: calc(6.875rem + env(safe-area-inset-bottom));
    z-index: 45;
    display: flex;
    flex-flow: column nowrap;
    /* --color-app-background 只有 .1 透明度（基座靠 #root 垫底），
       浮层必须自己垫一层不透明底色，再叠 app 色调，做法同侧栏抽屉 */
    background-color: var(--color-content-background);
    background-image: linear-gradient(var(--color-app-background), var(--color-app-background));
    padding-top: env(safe-area-inset-top);
    transform: translateY(6%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.32, .72, 0, 1);
  }
  #al-discover.al-open { opacity: 1; transform: none; pointer-events: auto; }

  #al-discover .al-dc-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    padding: 0 1rem;
  }
  #al-discover .al-dc-head h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }
  #al-discover .al-dc-auto {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--color-font-label);
  }
  #al-discover .al-dc-auto input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-primary);
  }

  #al-discover .al-dc-src {
    flex: none;
    display: flex;
    gap: .5rem;
    padding: 0 1rem .5rem;
  }
  #al-discover .al-dc-srcbtn {
    padding: 0 .75rem;
    font-size: .75rem;
    line-height: 1.75rem;
    color: var(--color-font);
    background-color: var(--color-primary-light-300-alpha-700);
    border: none;
    border-radius: .875rem;
  }
  #al-discover .al-dc-srcbtn.al-active {
    color: #fff;
    background-color: var(--color-primary);
  }

  #al-discover .al-dc-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 1rem 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #al-discover .al-dc-sec { margin-bottom: 1.25rem; }
  #al-discover .al-dc-sec h3 {
    margin: 0 0 .5rem .125rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-font-label);
  }
  #al-discover .al-dc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  #al-discover .al-dc-chip {
    padding: 0 .875rem;
    font-size: .8125rem;
    line-height: 2.125rem;
    color: var(--color-font);
    background-color: var(--color-primary-light-300-alpha-700);
    border: none;
    border-radius: 1.0625rem;
  }
  #al-discover .al-dc-chip:active {
    color: #fff;
    background-color: var(--color-primary);
  }

  /* 通用：隐藏原生滚动条，避免移动端出现桌面滚动条 */
  .hide-scrollbar::-webkit-scrollbar { display: none; }
}

/* 极窄屏（<= 360px）再压一档 */
@media (max-width: 360px) {
  .player .container.svelte-1lcpi14 .btn.svelte-1lcpi14 { min-width: 2.5rem; padding: .375rem !important; }
  .play-detail .cover.svelte-vr70ec { width: 68vw !important; height: 68vw; }
}