/*
 * 博客音乐播放器。
 *
 * 位置放在左下角：右下角已经被主题切换（bottom 86/160px）和回到顶部占着，
 * 左下角是空的，两边各一组悬浮控件也更平衡。
 *
 * 配色一律走站点既有的 --air-* 令牌，因此明暗主题自动跟随，不额外写一套。
 */

.blog-music {
    position: fixed;
    left: 28px;
    bottom: 28px;
    z-index: 9997;
    font-family: var(--air-font);
    color: var(--air-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------- 收起态：一枚会转的封面 ---------- */

.blog-music-bubble {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--air-line);
    border-radius: 50%;
    background-color: var(--air-surface);
    box-shadow: var(--air-shadow-soft);
    color: var(--air-muted);
    cursor: pointer;
    overflow: hidden;
    /* 不要过渡 border-color：它的值来自 --air-line，而 Chrome 对"过渡属性的值
       取自随主题变化的自定义属性"这种情况会把计算值冻在旧色上，切主题后边框
       一直停在上一个主题。改 background-color 长写也没用，只能不过渡它。 */
    transition: transform .2s ease, box-shadow .2s ease;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.blog-music-bubble:hover {
    transform: translateY(-2px);
    border-color: var(--air-primary);
    box-shadow: var(--air-shadow);
}

.blog-music-bubble:focus-visible {
    outline: 2px solid var(--air-primary);
    outline-offset: 3px;
}

.blog-music-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.blog-music-bubble .fa {
    font-size: 17px;
}

/* 播放时封面缓慢旋转；暂停时停在原地而不是跳回 0 度 */
.blog-music-bubble img,
.blog-music-cover img {
    animation: blog-music-spin 14s linear infinite;
    animation-play-state: paused;
}

.blog-music.is-playing .blog-music-bubble img,
.blog-music.is-playing .blog-music-cover img {
    animation-play-state: running;
}

@keyframes blog-music-spin {
    to { transform: rotate(360deg); }
}

/* ---------- 展开态 ---------- */

.blog-music-panel {
    display: none;
    width: 312px;
    padding: 16px;
    border: 1px solid var(--air-line);
    border-radius: var(--air-radius-md);
    background-color: var(--air-surface);
    box-shadow: var(--air-shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.blog-music.is-open .blog-music-panel {
    display: block;
    animation: blog-music-rise .22s ease both;
}

.blog-music.is-open .blog-music-bubble {
    display: none;
}

@keyframes blog-music-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.blog-music-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-music-cover {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--air-line);
    background-color: var(--air-surface-soft);
    color: var(--air-soft);
}

.blog-music-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.blog-music-meta {
    min-width: 0;
    flex: 1 1 auto;
}

.blog-music-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-music-artist {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--air-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-music-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--air-soft);
    cursor: pointer;
    font-size: 13px;
}

.blog-music-close:hover { color: var(--air-ink); background-color: var(--air-line-soft); }

/* ---------- 进度条 ---------- */

.blog-music-progress {
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-music-time {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--air-soft);
    min-width: 32px;
    text-align: center;
}

.blog-music-bar {
    position: relative;
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background-color: var(--air-line);
    cursor: pointer;
}

.blog-music-bar-played {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background-color: var(--air-primary);
}

.blog-music-bar-played::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--air-primary);
    transform: translateY(-50%) scale(0);
    transition: transform .15s ease;
}

.blog-music-bar:hover .blog-music-bar-played::after,
.blog-music-bar:focus-visible .blog-music-bar-played::after {
    transform: translateY(-50%) scale(1);
}

/* ---------- 控制区 ---------- */

.blog-music-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
}

.blog-music-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--air-muted);
    cursor: pointer;
    /* FA4 的 step-backward / step-forward advance 只有 0.57em，
       字号给小了画出来就是根细条，所以这里比常规图标钮再大一号 */
    font-size: 15px;
    /* 只过渡 color。背景色来自 --air-primary / --air-line-soft，一旦把它列进
       transition，Chrome 就会在主题切换后把计算值冻在旧色上——实测暗色下
       播放键背景一直停在亮色主色，而同样用这个变量、没有过渡的
       进度条却正常。写成 background-color 长写也不解决，只能不过渡它。
       代价只是 hover 的底色变化没有淡入，几乎看不出来。 */
    transition: color .15s ease;
}

.blog-music-btn:hover { color: var(--air-ink); background-color: var(--air-line-soft); }
.blog-music-btn:focus-visible { outline: 2px solid var(--air-primary); outline-offset: 2px; }
.blog-music-btn.is-active { color: var(--air-primary); }

.blog-music-play {
    width: 40px;
    height: 40px;
    font-size: 15px;
    color: #fff;
    background-color: var(--air-primary);
    box-shadow: var(--air-shadow-soft);
}

.blog-music-play:hover { color: #fff; filter: brightness(1.06); }

/* ---------- 播放列表 ---------- */

.blog-music-list {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--air-line-soft);
    max-height: 208px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.blog-music.is-list-open .blog-music-list { display: block; }

.blog-music-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--air-radius-sm);
    background-color: transparent;
    color: var(--air-muted);
    cursor: pointer;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.5;
}

.blog-music-item:hover { background-color: var(--air-line-soft); color: var(--air-ink); }

.blog-music-item.is-current {
    color: var(--air-primary);
    background-color: var(--air-primary-soft);
    font-weight: 700;
}

.blog-music-index {
    flex: 0 0 18px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--air-soft);
    text-align: right;
}

.blog-music-item.is-current .blog-music-index { color: var(--air-primary); }

.blog-music-item-name {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-music-item-artist {
    flex: 0 0 auto;
    max-width: 76px;
    font-size: 11px;
    font-weight: 400;
    color: var(--air-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 窄屏 ---------- */

/* ---------- 窄屏 ----------
 *
 * 触控目标放大到 44px：桌面上 32px 的圆钮用鼠标点没问题，手指点就偏小了
 * （44px 是 iOS/Android 都推荐的下限）。进度条也从 4px 加粗到 6px 并垫高
 * 可点区域，否则在手机上很难拖准。
 */
@media (max-width: 768px) {
    .blog-music {
        left: 16px;
        bottom: 16px;
    }

    .blog-music-bubble {
        width: 52px;
        height: 52px;
    }

    .blog-music-bubble .fa { font-size: 19px; }

    .blog-music-panel {
        width: min(320px, calc(100vw - 32px));
        padding: 18px;
    }

    .blog-music-close {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .blog-music-btn {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    .blog-music-play {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .blog-music-controls {
        gap: 2px;
        margin-top: 10px;
    }

    .blog-music-progress { margin: 16px 0 4px; }

    /* 条本身 6px，再用上下 padding 把可点区域垫到 18px，
       背景只画在 content box 上，视觉厚度不变 */
    .blog-music-bar {
        /* 站点全局是 border-box，padding 会被算进 height，垫不出可点区域，
           这里显式改回 content-box：6px 条 + 上下各 6px = 18px 可点高度 */
        box-sizing: content-box;
        height: 6px;
        padding: 6px 0;
        background-clip: content-box;
        background-color: var(--air-line);
    }

    .blog-music-bar-played {
        top: 6px;
        height: 6px;
    }

    .blog-music-bar-played::after {
        width: 14px;
        height: 14px;
        right: -7px;
        transform: translateY(-50%) scale(1);
    }

    .blog-music-time { font-size: 12px; min-width: 36px; }

    .blog-music-item {
        padding: 11px 8px;
        font-size: 13.5px;
    }

    .blog-music-list { max-height: 200px; }
}

/* 矮屏（横屏手机、小平板）再收一收列表，别把面板顶出视口 */
@media (max-height: 700px) {
    .blog-music-list { max-height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-music-bubble img,
    .blog-music-cover img { animation: none !important; }

    .blog-music.is-open .blog-music-panel { animation: none; }
}