/**
 * OTO 底部跟随横条
 *
 * 形态对齐主流博客主题的底部跟随横条（实测数值）：
 *   横条面板宽 = 正文容器宽并居中（本站对齐主题 .app 1720px/14px）
 *   高 4.5rem = 72px，圆角 --radius = 8px，padding-left 7rem = 112px（给突出的头像让位）
 *   最左 80×80 正圆头像，绝对定位，比横条顶端高出 28px
 *   所有工具按钮 2rem = 32px 见方、圆角 1rem ⇒ 正圆
 *   定位：桌面 sticky + bottom（跟随滚动，滚到页尾落回文档流）；≤650px 切 fixed 真贴底
 * 配色一律引用主题 :root 变量并带兜底，主题换肤自动跟随。
 */

/* ---------- 容器 ---------- */
#oto-bb.oto-bb {
    position: sticky;
    bottom: var(--oto-bb-gap, 20px);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    /* ★ 宽度与正文容器对齐并居中（不是铺满整屏）：
     *   可用宽度 = min(容器宽, 100%) - 两侧内边距，再用 margin:auto 居中。 */
    width: min(calc(var(--oto-bb-cw, 1720px) - 2 * var(--oto-bb-cp, 14px)), calc(100% - 2 * var(--oto-bb-cp, 14px)));
    height: var(--oto-bb-h, 72px);
    margin-left: auto;
    margin-right: auto;
    /* 左 112px 给突出的圆形头像让位；右 20px */
    padding: 0 20px 0 112px;
    border: 1px solid var(--line, #252c52);
    border-radius: var(--oto-bb-r, 8px);
    background: var(--bg2, #121629);
    background: color-mix(in srgb, var(--bg2, #121629) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .34);
    color: var(--txt, #f2f4fd);
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: height .35s ease, background .35s ease, border-color .35s ease;
}

html.oto-bb-fixed #oto-bb.oto-bb {
    position: fixed;
    left: 0;
    right: 0;
}

html.oto-bb-fixed body {
    padding-bottom: calc(var(--oto-bb-h, 72px) + var(--oto-bb-gap, 20px));
}

/* 主题右下角浮动工具条让位，别和横条叠在一起 */
html.oto-bb-sticky .side-toolbar,
html.oto-bb-fixed .side-toolbar {
    bottom: calc(var(--oto-bb-h, 72px) + var(--oto-bb-gap, 20px) + 16px);
}

/* ---------- 左：圆形大头像 / 站点信息 ---------- */
/* 大圆头像：绝对定位、正圆、比横条顶端高出 28px */
#oto-bb .oto-bb-avatar {
    position: absolute;
    left: 16px;
    bottom: 20px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg2, #121629);
    background: color-mix(in srgb, var(--bg2, #121629) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: pointer;
    /* 头像自身的 transition: .5s
     * （工具按钮那侧 JS 还会再延后 250ms 才缩，合起来是 250+500ms） */
    transition: width .5s, height .5s, padding .5s, bottom .5s, transform .5s;
    /* ★ 头像呼吸灯：默认 4s 一轮的彩色光圈，色序 红→绿→蓝→绿→红。
     *   时长走 --oto-bb-halo-t（后台可调）；色序与半径由 PHP 按后台配置生成一份**同名**关键帧，
     *   它插在 <link> 之后 ⇒ 文档序更靠后、直接覆盖下面这份默认值。 */
    animation: oto-bb-light var(--oto-bb-halo-t, 4s) ease-in-out infinite;
}

/* 默认关键帧：PHP 没覆盖时的兜底，也是「后台没改过」时的真实取值。 */
@keyframes oto-bb-light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

/* hover 到任一工具按钮时头像缩小（80px → 32px） */
html.oto-bb-tool-on #oto-bb .oto-bb-avatar {
    width: 32px;
    height: 32px;
    padding: 2px;
    bottom: 20px;
}

/* 反过来：鼠标直接停在大头像上（要展示站点信息）时，头像必须保持大尺寸，
 * 不能被上面那条 tool-on 规则压小 —— 所以这条写在后面，同权重后者胜。 */
html.oto-bb-info-on #oto-bb .oto-bb-avatar {
    width: 80px;
    height: 80px;
    padding: 5px;
}

/* ★ 头像 hover：放大 15% 并自转 720°（两整圈），鼠标移开再原路转回来 */
#oto-bb .oto-bb-avatar:hover,
#oto-bb .oto-bb-avatar:focus-visible {
    transform: scale(1.15) rotate(720deg);
}

/* 上面那条呼吸灯是 animation，animation 会盖掉 box-shadow ⇒ 键盘焦点改用 outline 才看得见 */
#oto-bb .oto-bb-avatar:focus-visible {
    outline: 2px solid var(--green, #3ddc97);
    outline-offset: 2px;
}

#oto-bb .oto-bb-logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#oto-bb .oto-bb-initial {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--green, #3ddc97);
}

html.oto-bb-tool-on #oto-bb .oto-bb-initial {
    font-size: 14px;
}

#oto-bb .oto-bb-logo + .oto-bb-initial {
    display: none;
}

/* hover 时整条撑高并切出站点信息（72px → 112px） */
#oto-bb .oto-bb-info {
    display: none;
}

html.oto-bb-info-on #oto-bb.oto-bb {
    height: calc(var(--oto-bb-h, 72px) + 40px);
}

html.oto-bb-info-on #oto-bb .oto-bb-left,
html.oto-bb-info-on #oto-bb .oto-bb-right {
    display: none;
}

html.oto-bb-info-on #oto-bb .oto-bb-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

#oto-bb .oto-bb-info-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--txt, #f2f4fd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#oto-bb .oto-bb-info-desc {
    font-size: 12px;
    color: var(--dim2, #a2a8d2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 悬浮小标签（left: 56px，贴着缩小的头像右侧） */
#oto-bb .oto-bb-word {
    position: absolute;
    left: 56px;
    margin: 0;
    font-size: 13px;
    color: var(--dim2, #a2a8d2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

html.oto-bb-word-on #oto-bb .oto-bb-word {
    opacity: 1;
}

/* ---------- 中：工具组 ---------- */
#oto-bb .oto-bb-left {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* 工具按钮：32px 见方 + 16px 圆角 ⇒ 正圆 */
#oto-bb .oto-bb-btn {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dim, #c3c8ec);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--line, #252c52);
    transition: background .16s, color .16s, box-shadow .16s;
}

/* 选中态：主题色底 + 白字 */
#oto-bb .oto-bb-btn:hover,
#oto-bb .oto-bb-btn:focus-visible,
#oto-bb .oto-bb-btn.is-on {
    background: var(--green, #3ddc97);
    color: #fff;
    box-shadow: 0 0 0 1px var(--green, #3ddc97);
    outline: none;
}

#oto-bb .oto-bb-ico {
    display: grid;
    place-items: center;
    line-height: 0;
}

/* ---------- 弹层（风格 / 配色切换） ----------
 * ★ 用户两次要求：① 弹窗宽度与播放器一致；② 配色项横着一排显示；③ 像播放器那样「向上滑出」展开。
 * 所以这里对齐播放面板的做法：
 *   · left:0 贴横条左内缘 + max-width:680px（与播放面板同宽、同锚点）
 *   · 收起态 translateY(40px) → 打开态 translateY(0) 的 .55s 上滑（同一缓动）
 *   · 内部 .oto-bb-paints 改成 flex 一行横排（flex-wrap: nowrap），
 *     配色项多时横向滚动而不是换行竖排。 */
#oto-bb .oto-bb-pop {
    position: absolute;
    left: 0;
    right: auto;
    width: auto;
    max-width: 680px;
    bottom: 100%;
    z-index: 3;
    padding-bottom: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: opacity .25s ease,
                transform .55s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .55s;
}

#oto-bb .oto-bb-btn:hover > .oto-bb-pop,
#oto-bb .oto-bb-btn:focus-within > .oto-bb-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease,
                transform .55s cubic-bezier(.4, 0, .2, 1),
                visibility 0s;
}

#oto-bb .oto-bb-paints {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: none;
    width: 100%;
    overflow-x: auto;
    padding: 10px;
    border: 1px solid var(--line, #252c52);
    border-radius: 10px;
    background: var(--bg2, #121629);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

#oto-bb .oto-bb-paint-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid var(--line, #252c52);
    border-radius: 8px;
    background: var(--card, #161b33);
    color: var(--dim, #c3c8ec);
    font-size: 12px;
    cursor: pointer;
    transition: .16s;
}

#oto-bb .oto-bb-paint-item:hover {
    border-color: var(--green, #3ddc97);
    color: var(--txt, #f2f4fd);
}

#oto-bb .oto-bb-paint-item.is-on {
    border-color: var(--green, #3ddc97);
    color: var(--green, #3ddc97);
}

#oto-bb .oto-bb-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* ---------- 播放器（原生 <audio>，全部自绘，无第三方库） ----------
 * 面板是横条的直接子节点（.oto-bb-music-panel），不是挂在按钮里的小卡片
 * —— 挂在按钮里就只能「从按钮往右长一张 300px 的卡」，宽度怎么调都对不上；
 * 窄屏时还会被顶到屏幕外（实测面板 x=-184，封面/播放键全被切掉）。
 * ★ 宽度 = **播放器自身内容宽度**（自适应，不再铺满整条横条）：left:0 贴着横条左内缘、
 *   right:auto + width:auto 让它按内容收缩到「刚好包住播放器」；窄屏（≤650px）改回铺满通栏。
 *   内部 .oto-bb-player 用 max-width 兜住，桌面最多约 680px，一行排开不挤。
 * 开合由前台挂 html.oto-bb-music-on（悬停 / 聚焦音乐按钮）+ 「固定」常驻（见 JS）。
 * ★ 开合是「向上滑出」的动画：默认压在横条下方 20px、透明，打开时滑回原位并淡入；
 *   过渡拉到 .6s 让滑出手感明显（之前 .32s 太快、几乎看不出在动）；
 *   visibility 的延迟关闭配合 transform，收起时先滑下去再隐藏。 */
#oto-bb .oto-bb-music-panel {
    position: absolute;
    left: 0;
    right: auto;
    width: auto;
    max-width: 100%;
    bottom: calc(100% + 6px);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    /* ★ 滑出起点压在横条下方 40px（之前 20px 太短、几乎看不出在动）；
     *   opacity 比 transform 先到位（.25s vs .55s），这样面板在「还离终点一段距离」时就已可见，
     *   用户能完整看到它从下方滑上来的过程，而不是只在终点闪一下。 */
    transform: translateY(40px);
    transition: opacity .25s ease,
                transform .55s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .55s;
}

html.oto-bb-music-on #oto-bb .oto-bb-music-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .25s ease,
                transform .55s cubic-bezier(.4, 0, .2, 1),
                visibility 0s;
}

/* 面板内部排成**一行**：封面+曲名 | 进度条 | 控制键。
 * 宽度由内容决定（不写死 px），max-width 兜住桌面最多约 680px，超出时头衔自动省略；
 * 这样面板=「刚好包住播放器」的小弹层，而不是铺满整条横条。 */
#oto-bb .oto-bb-player {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    box-sizing: border-box;
    max-width: 680px;
    padding: 12px 16px;
    border: 1px solid var(--line, #252c52);
    border-radius: var(--oto-bb-r, 8px);
    background: var(--bg2, #121629);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, .45);
}

#oto-bb .oto-bb-pl-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

#oto-bb .oto-bb-pl-head {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 320px;
}

#oto-bb .oto-bb-pl-cover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--card, #161b33) center/cover no-repeat;
    color: var(--dim, #c3c8ec);
    overflow: hidden;
}

#oto-bb .oto-bb-pl-cover.has-img svg {
    display: none;
}

#oto-bb .oto-bb-pl-meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

#oto-bb .oto-bb-pl-title,
#oto-bb .oto-bb-pl-artist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#oto-bb .oto-bb-pl-title {
    color: var(--txt, #f2f4fd);
    font-size: 13px;
}

#oto-bb .oto-bb-pl-artist {
    color: var(--dim, #c3c8ec);
    font-size: 11px;
    opacity: .75;
}

/* 列表开关：跟在控制键那一组的末尾 */
#oto-bb .oto-bb-pl-tg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line, #252c52);
    border-radius: 8px;
    background: transparent;
    color: var(--dim, #c3c8ec);
    cursor: pointer;
    transition: .16s;
}

#oto-bb .oto-bb-pl-tg:hover,
#oto-bb .oto-bb-player.is-list-open .oto-bb-pl-tg {
    border-color: var(--green, #3ddc97);
    color: var(--green, #3ddc97);
}

/* 进度条：面板里最宽的一根，把左右间距吃掉（这是「宽面板」该有的样子） */
#oto-bb .oto-bb-pl-seekrow {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

#oto-bb .oto-bb-pl-time {
    flex: 0 0 auto;
    color: var(--dim, #c3c8ec);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

#oto-bb .oto-bb-pl-seek {
    position: relative;
    flex: 1 1 auto;
    height: 14px;
    cursor: pointer;
    touch-action: none;
}

#oto-bb .oto-bb-pl-seek::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--line, #252c52);
}

#oto-bb .oto-bb-pl-seek-in {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--green, #3ddc97);
}

#oto-bb .oto-bb-pl-seek:focus-visible {
    outline: none;
}

#oto-bb .oto-bb-pl-seek:focus-visible::before {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .16);
}

#oto-bb .oto-bb-pl-ctrl {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

#oto-bb .oto-bb-pl-ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--dim, #c3c8ec);
    cursor: pointer;
    transition: .16s;
}

#oto-bb .oto-bb-pl-ib:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--green, #3ddc97);
}

#oto-bb .oto-bb-pl-ib.is-main {
    width: 34px;
    height: 34px;
    border-color: var(--green, #3ddc97);
    color: var(--green, #3ddc97);
}

/* 播放模式（顺序 / 单曲循环 / 随机）与固定：选中态用主题色 + 淡底色，一眼看出当前是哪个。
 * 三个模式互斥（点哪个另外两个就灭），固定是独立开关。 */
#oto-bb .oto-bb-pl-ib[aria-pressed="true"],
#oto-bb .oto-bb-pl-tg[aria-pressed="true"] {
    border-color: var(--green, #3ddc97);
    background: rgba(61, 220, 151, .14);
    color: var(--green, #3ddc97);
}

/* 播放/暂停两个图标叠在同一个按钮里，用状态类切换 */
#oto-bb .oto-bb-ic-pause {
    display: none;
}

#oto-bb .oto-bb-player.is-playing .oto-bb-ic-play {
    display: none;
}

#oto-bb .oto-bb-player.is-playing .oto-bb-ic-pause {
    display: inline-flex;
}

/* 播不了的时候把原因写在面板里一行（以前是静默显示 --:--，用户完全不知道为啥） */
#oto-bb .oto-bb-pl-err {
    flex: 1 0 100%;
    margin: 0;
    color: #ff8f8f;
    font-size: 11.5px;
    line-height: 1.5;
}

/* 播放列表：占满面板一整行 ⇒ 面板是「往上长」，不会顶到横条 */
#oto-bb .oto-bb-pl-list {
    display: none;
    flex: 1 0 100%;
    max-height: 132px;
    margin: 0;
    padding: 4px 0 0;
    overflow-y: auto;
    border-top: 1px solid var(--line, #252c52);
    list-style: none;
}

#oto-bb .oto-bb-player.is-list-open .oto-bb-pl-list {
    display: block;
}

#oto-bb .oto-bb-pl-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--dim, #c3c8ec);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

#oto-bb .oto-bb-pl-item:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--txt, #f2f4fd);
}

#oto-bb .oto-bb-pl-item.is-on {
    color: var(--green, #3ddc97);
}

#oto-bb .oto-bb-pl-n {
    flex: 0 0 16px;
    width: 16px;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

#oto-bb .oto-bb-pl-nm {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#oto-bb .oto-bb-pl-by {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .6;
}

/* 只有一首时，上一首 / 下一首 / 列表开关都没有意义 */
#oto-bb .oto-bb-player.is-single #oto-bb-prev,
#oto-bb .oto-bb-player.is-single #oto-bb-next,
#oto-bb .oto-bb-player.is-single #oto-bb-pl-tg {
    display: none;
}

/* ★ 播放中匀速自转（10s linear infinite）：
 * 正在播放时唱片图标匀速自转（10s 一圈），暂停/播完即停在当前角度。 */
#oto-bb .oto-bb-music.is-playing .oto-bb-ico svg {
    animation: oto-bb-spin 10s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes oto-bb-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ---------- 公告轮播 ---------- */
/* 右侧区域：左侧一条细分隔线、高度 50% */
#oto-bb .oto-bb-notice {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    height: 50%;
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding-left: 14px;
    border-left: 1px solid var(--line, #252c52);
    overflow: hidden;
}

#oto-bb .oto-bb-notice-vp {
    width: 100%;
    height: 30px;
    overflow: hidden;
}

#oto-bb .oto-bb-notice-list {
    transition: transform .5s ease;
}

#oto-bb .oto-bb-notice-item {
    display: block;
    height: 30px;
    overflow: hidden;
    color: var(--dim2, #a2a8d2);
    font-size: 13px;
    line-height: 30px;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .16s;
}

#oto-bb a.oto-bb-notice-item:hover {
    color: var(--green, #3ddc97);
}

/* ---------- 右：置顶 / 登录（同一格，互斥显示） ---------- */
#oto-bb .oto-bb-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    margin-left: 10px;
}

/* 置顶按钮：32×32 正圆，里面只放百分比数字 */
#oto-bb .oto-bb-top {
    width: 32px;
    height: 32px;
    padding: 0;
}

#oto-bb .oto-bb-num {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--dim, #c3c8ec);
}

#oto-bb .oto-bb-top:hover .oto-bb-num,
#oto-bb .oto-bb-top:focus-visible .oto-bb-num {
    color: #fff;
}

#oto-bb .oto-bb-login.is-in {
    color: var(--green, #3ddc97);
}

#oto-bb .oto-bb-uavatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

#oto-bb .oto-bb-login.is-in:hover .oto-bb-uavatar {
    box-shadow: 0 0 0 1px #fff inset;
}

/* 播放器未配置音频时的提示：跟面板一样铺满横条宽度、贴在横条正上方 */
#oto-bb .oto-bb-pl-empty {
    padding: 13px 16px;
    border-radius: var(--oto-bb-r, 8px);
    background: var(--bg2, #121629);
    border: 1px solid var(--line, #252c52);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, .45);
    color: var(--txt, #f2f4fd);
    font-size: 13px;
    text-align: center;
}

#oto-bb .oto-bb-pl-empty span {
    margin-left: 8px;
    font-size: 11.5px;
    color: var(--dim2, #a2a8d2);
}

#oto-bb .oto-bb-pl-empty code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--hi, #212952);
    color: var(--green, #3ddc97);
    font-size: 11px;
}

#oto-bb [hidden] {
    display: none !important;
}

/* ---------- 窄屏 ≤650px：铺满 + 贴底 + 无圆角 ---------- */
@media (max-width: 650px) {
    #oto-bb.oto-bb {
        /* 窄屏：width:100%; height:51px; position:fixed; left:0; bottom:0;
         *       padding-left:0; border-radius:0（不再是居中卡片，而是通栏贴底） */
        width: 100%;
        height: 51px;
        margin-left: 0;
        margin-right: 0;
        padding: 0 12px;
        gap: 6px;
        justify-content: space-between;
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .28);
    }

    html.oto-bb-sticky #oto-bb.oto-bb,
    html.oto-bb-fixed #oto-bb.oto-bb {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }

    html.oto-bb-sticky body,
    html.oto-bb-fixed body {
        padding-bottom: 51px;
    }

    html.oto-bb-sticky .side-toolbar,
    html.oto-bb-fixed .side-toolbar {
        bottom: 67px;
    }

    /* 窄屏把大头像 / 悬浮小标签一并 display:none!important */
    #oto-bb .oto-bb-avatar,
    #oto-bb .oto-bb-word,
    #oto-bb .oto-bb-info {
        display: none !important;
    }

    html.oto-bb-info-on #oto-bb.oto-bb {
        height: 51px;
    }

    html.oto-bb-info-on #oto-bb .oto-bb-left {
        display: flex;
    }

    /* 配色弹层：窄屏横条通栏 ⇒ 弹层也通栏（left:0+right:0 拉满，max-width 放开），
     * 内部仍是横排（auto 横向滚动）。与播放面板窄屏行为一致。 */
    #oto-bb .oto-bb-pop {
        left: 0;
        right: 0;
        max-width: none;
    }

    #oto-bb .oto-bb-paints {
        max-width: none;
    }

    /* 播放面板跟着横条走（横条通栏 ⇒ 面板也通栏），这里只把内部压紧：
     * 第一行「封面+曲名 | 控制键」，进度条换行独占第二行。 */
    #oto-bb .oto-bb-pl-main {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    #oto-bb .oto-bb-pl-head {
        max-width: none;
    }

    #oto-bb .oto-bb-pl-seekrow {
        order: 3;
        flex: 1 0 100%;
    }

    /* 窄屏面板改回铺满通栏（横条本身就是满宽的）：left:0+right:0 拉满，max-width 放开 */
    #oto-bb .oto-bb-music-panel {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #oto-bb.oto-bb,
    #oto-bb .oto-bb-btn,
    #oto-bb .oto-bb-pop,
    #oto-bb .oto-bb-music-panel,
    #oto-bb .oto-bb-notice-list {
        transition: none !important;
    }

    /* 头像：光圈呼吸灯 + 自转都关掉，只保留不会引起眩晕的轻微放大 */
    #oto-bb .oto-bb-avatar {
        animation: none !important;
        transition: none !important;
    }

    #oto-bb .oto-bb-avatar:hover,
    #oto-bb .oto-bb-avatar:focus-visible {
        transform: scale(1.15);
    }

    #oto-bb .oto-bb-music.is-playing .oto-bb-ico svg {
        animation: none;
    }
}

/* ==========================================================================
 * 走动小人（纯装饰，可在后台关掉）
 *   它骑在横条上沿来回踱步：横向从最左圆头像右侧走到横条右端再折返，每秒一步。
 *   位置全部由前台脚本按横条实时几何算（left/top 内联），这里只管形态与状态动画。
 *   z-index 99 = 压在横条（45）之上，所以它压过横条上沿那 20 多像素是能看见的。
 * ========================================================================== */
#oto-bb-walker {
    position: fixed;
    /* 未就位前先藏在屏幕外，避免首帧闪一下 */
    top: 999px;
    left: -160px;
    z-index: 99;
    display: none;
    /* 宽度写死成图片宽：fixed 元素默认 shrink-to-fit，拖到屏幕右缘时会被挤扁 */
    width: var(--oto-bb-walk-w, 64px);
    line-height: 0;
    cursor: grab;
    touch-action: none;
    will-change: left, top, transform;
}

#oto-bb-walker.is-on {
    display: block;
}

#oto-bb-walker .oto-bb-walker-img {
    display: block;
    width: var(--oto-bb-walk-w, 64px);
    height: auto;
    /* 图片本身不吃鼠标事件：拖拽由外层容器接管 */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 走位中：左/上 1s 线性 → 每秒那一步变成连续滑行；转角 1.5s 缓入缓出 */
#oto-bb-walker.is-floating {
    transition: left 1s linear, top 1s linear, transform 1.5s ease !important;
}

/* 横条正在变尺寸（鼠标碰 LOGO 撑高 / 拉窗口）：临时摘掉 top 的过渡，让小人的竖线
 * 贴着条沿一起走。撑高只有 .35s，留着 1s 的过渡会让它晚一拍跟上、看着像飘过去。 */
#oto-bb-walker.is-riding {
    transition: left 1s linear, transform 1.5s ease !important;
}

/* 被拖起来：去掉过渡（跟手），并轻微左右摆 */
#oto-bb-walker.is-dragging {
    cursor: grabbing;
    transition: none !important;
    animation: oto-bb-walk-swing .8s linear infinite;
}

/* 松手：只让「高度」带回弹地落回原线，横向瞬间归位到允许范围内 */
#oto-bb-walker.is-dropping {
    transition: top .8s cubic-bezier(.795, .21, .535, 1.235) !important;
}

@keyframes oto-bb-walk-swing {
    0% {
        transform: rotate(-7deg);
    }

    50% {
        transform: rotate(7deg);
    }

    100% {
        transform: rotate(-7deg);
    }
}

/* 弹层 / 播放面板打开时把小人沉到横条后面，别从上面踩过去
 * （:has 不支持时该行直接失效，无副作用；播放面板那行走 JS 挂的类） */
html:has(#oto-bb .oto-bb-btn:hover > .oto-bb-pop) #oto-bb-walker,
html:has(#oto-bb .oto-bb-btn:focus-within > .oto-bb-pop) #oto-bb-walker,
html.oto-bb-music-on #oto-bb-walker {
    z-index: 1;
}

/* 窄屏不显示（横条本身已经变成贴底满宽，没地方走） */
@media (max-width: 650px) {
    #oto-bb-walker {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #oto-bb-walker.is-floating,
    #oto-bb-walker.is-riding,
    #oto-bb-walker.is-dropping {
        transition: none !important;
    }

    #oto-bb-walker.is-dragging {
        animation: none !important;
    }
}