/* ============================================================
 *  小黄书 · 沉浸式视频流 feed.css
 *  作用域：body.feed-page
 *  独立样式，不污染站内其他页面
 * ============================================================ */

/* ============================================================
   全局：去掉移动端点击时的蓝色高亮
   ------------------------------------------------------------
   Android Chrome 默认会给可点击元素加一层浅蓝色遮罩
   （rgba(51,181,229,0.4)）。视频流里整屏都是可点区域，
   不关掉的话点哪儿都闪一下蓝，很出戏。
   注意只关高亮、不动 user-select，评论文字仍可正常选中复制。
   ============================================================ */
body.feed-page,
body.feed-page * {
    -webkit-tap-highlight-color: transparent;
}

body.feed-page {
    padding-bottom: 0 !important;
    margin: 0;
    background: #000;
    overflow: hidden;
    overscroll-behavior: none;
    --feed-white: #fff;
    --feed-fade: rgba(255, 255, 255, 0.72);
    --feed-faint: rgba(255, 255, 255, 0.5);
}

/* 视频流保留底部导航栏，只隐藏滚动横幅与版权信息 */
body.feed-page .marquee-banner,
body.feed-page .footer { display: none !important; }

/* footer.php 里的占位 <main>，仅用于闭合 </main>，不参与布局 */
body.feed-page .feed-main-placeholder { display: none !important; }

/* ============================================================
   底部导航栏：适配深色沉浸主题
   ------------------------------------------------------------
   站内导航栏默认是白底浅色，这里改成半透明深色 + 毛玻璃，
   让它和视频画面融合，而不是生硬的一条白条。
   ============================================================ */
@media (max-width: 768px) {
    body.feed-page .bottom-tabbar {
        background: rgba(18, 18, 20, 0.82) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    body.feed-page .tab-item { color: rgba(255, 255, 255, 0.52) !important; }
    body.feed-page .tab-item.active { color: #fff !important; }
    body.feed-page .tab-item span { font-weight: 600; }
    /* 视频页自身那一格用主色强调 */
    body.feed-page .tab-item.active svg { stroke: #ff2442; }
    /* 未读角标保持主色 */
    body.feed-page .tab-badge {
        background: #ff2442;
        color: #fff;
    }
}

/* 视频流页面去掉 body 的底部内边距（导航栏由 fixed 定位处理） */
@media (max-width: 768px) {
    body.feed-page { padding-bottom: 0 !important; }
}

/* ============================================================
   滚动容器与每一屏
   ------------------------------------------------------------
   底部要给站内导航栏让位，否则视频会被导航栏压住一部分。
   移动端导航栏高 58px（见 style.css），这里用 CSS 变量统一。
   ============================================================ */
body.feed-page {
    /* 移动端导航栏高度；桌面端导航栏是 display:none，所以置 0 */
    --feed-navbar-h: 0px;
    --feed-safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 768px) {
    body.feed-page { --feed-navbar-h: 58px; }
}

/* 底部提示条（如分页加载中）也要上移，避免被导航栏遮住 */
body.feed-page .feed-end-tip {
    bottom: calc(var(--feed-navbar-h) + var(--feed-safe-bottom) + 16px);
}

.feed-stage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--feed-navbar-h) + var(--feed-safe-bottom));
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #000;
    z-index: 100;
    touch-action: pan-y;
}
.feed-stage::-webkit-scrollbar { display: none; }

.feed-screen {
    position: relative;
    width: 100%;
    /* 高度以 .feed-stage 为基准（stage 已扣除底部导航栏），
       所以这里只能用 100%，不能用 100dvh —— 否则会高出导航栏那么多 */
    height: 100%;
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   视频本体
   ============================================================ */
.feed-video-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.feed-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
    cursor: pointer;
}

.feed-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.28s ease;
    z-index: 1;
}
.feed-screen.is-ready .feed-poster { opacity: 0; }

/* 中央播放图标（暂停时淡入） */
.feed-play-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 3;
}
.feed-play-indicator svg {
    width: 30px;
    height: 30px;
    fill: rgba(255, 255, 255, 0.94);
    margin-left: 3px;
}
.feed-screen.is-paused .feed-play-indicator {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 加载中的环形进度 */
.feed-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 2.5px solid rgba(255, 255, 255, 0.24);
    border-top-color: #fff;
    border-radius: 50%;
    animation: feed-spin 0.78s linear infinite;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.2s;
}
.feed-screen.is-loading .feed-spinner { opacity: 1; }
.feed-screen.is-ready .feed-spinner { opacity: 0; }
/* 暂停时不要显示转圈（那是暂停，不是加载） */
.feed-screen.is-paused.is-loading .feed-spinner { opacity: 0; }
@keyframes feed-spin { to { transform: rotate(360deg); } }

/* ============================================================
   首次进页的全屏加载动画
   ============================================================ */
.feed-pageloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;                    /* 首次加载时导航栏也一起盖住 */
    z-index: 500;                 /* 高于 stage / topbar / toast */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #000;
    opacity: 1;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* JS 就绪后加 is-done → 淡出并让出点击 */
.feed-pageloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.feed-pageloader-ring {
    width: 46px;
    height: 46px;
    border: 3px solid rgba(255, 255, 255, 0.16);
    border-top-color: #ff2442;    /* 与站点主色一致 */
    border-radius: 50%;
    animation: feed-spin 0.8s linear infinite;
}

.feed-pageloader-text {
    color: rgba(255, 255, 255, 0.52);
    font-size: 13.5px;
    letter-spacing: 0.5px;
    animation: feed-loader-pulse 1.6s ease-in-out infinite;
}
@keyframes feed-loader-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    .feed-pageloader-ring { animation-duration: 1.8s; }
    .feed-pageloader-text { animation: none; opacity: 0.7; }
}

/* 双击爱心爆裂动效 */
.feed-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    margin: -55px 0 0 -55px;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
}
.feed-burst svg { width: 100%; height: 100%; fill: #ff2e4d; }
.feed-burst.play { animation: feed-burst 0.85s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes feed-burst {
    0%   { opacity: 0; transform: scale(0.2) rotate(-18deg); }
    32%  { opacity: 1; transform: scale(1.22) rotate(6deg); }
    52%  { transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.9) translateY(-46px); }
}

/* ============================================================
   底部播放进度条（可拖动）
   ------------------------------------------------------------
   结构分三层，各司其职：
     .feed-progress        触摸热区，视觉上透明，负责接手指
     .feed-progress-track  看得见的细线，平时 2.5px
     .feed-progress-knob   拖拽时的圆点

   为什么热区要单独做一层？
   进度条视觉上只有 2.5px，手指根本按不准（触摸目标建议至少 44px）。
   所以把它包在一个 26px 高的透明容器里，视觉不变但好按很多。
   ============================================================ */
.feed-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;                 /* 触摸热区高度，视觉上不可见 */
    display: flex;
    align-items: flex-end;
    z-index: 6;
    cursor: pointer;
    touch-action: none;           /* 拖动进度条时不要触发页面滚动/翻页 */
    /* 默认就能接事件 —— 之前这里是 pointer-events:none，
       导致下面那段「点击进度条跳转」的 JS 从来没生效过 */
}

.feed-progress-track {
    position: relative;
    width: 100%;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.16);
    transition: height 0.16s ease, background 0.16s ease;
}

.feed-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ff2e4d, #ff7b8f);
    border-radius: 0 3px 3px 0;
    transition: width 0.12s linear;
}

/* 拖拽圆点：平时不存在感，按住时才出现 */
.feed-progress-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
    transform: translateY(-50%) scale(0);
    transition: transform 0.16s ease;
    pointer-events: none;
}

/* 拖拽中的整体状态：条变粗、圆点弹出 */
.feed-progress.is-dragging .feed-progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.24);
}
.feed-progress.is-dragging .feed-progress-knob {
    transform: translateY(-50%) scale(1);
}

/* 拖动时进度条不要有过渡，否则会跟不上手指 */
.feed-progress.is-dragging .feed-progress-bar {
    transition: none;
}

/* 时间气泡：拖拽时浮在进度条上方 */
.feed-progress-time {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 3px 9px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;   /* 数字等宽，拖动时不会左右抖 */
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.feed-progress.is-dragging .feed-progress-time {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 桌面端用鼠标时有 hover 反馈，条稍微变粗一点，暗示"这里可以拖" */
@media (hover: hover) and (pointer: fine) {
    .feed-progress:hover .feed-progress-track {
        height: 5px;
    }
    .feed-progress:hover .feed-progress-knob {
        transform: translateY(-50%) scale(1);
    }
}

/* 不支持拖动定位的浏览器（极少见），保持旧行为不至于报错 */
.feed-progress.is-disabled {
    pointer-events: none;
}

/* ============================================================
   顶部：返回 + 标题 + 页码
   ============================================================ */
.feed-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 8;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}
.feed-topbar > * { pointer-events: auto; }

.feed-back {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.32);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.16s;
}
.feed-back:hover { background: rgba(0, 0, 0, 0.52); }
.feed-back:active { transform: scale(0.92); }
.feed-back svg { width: 19px; height: 19px; stroke: #fff; }

.feed-topbar-title {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.92;
}

.feed-counter {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(0, 0, 0, 0.32);
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   底部信息区：作者 / 文案 / 标签
   ============================================================ */
.feed-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 54px 76px calc(20px + env(safe-area-inset-bottom, 0px)) 15px;
    z-index: 7;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62));
    pointer-events: none;
}
.feed-info > * { pointer-events: auto; }

.feed-author-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.feed-author-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-width: 0;
}
.feed-author-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    background: #ff2e4d;
}
.feed-author-avatar-text {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3a55, #ff2442);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}
.feed-author-meta { min-width: 0; }
.feed-author-name {
    display: block;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}
.feed-author-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.62);
}

.feed-follow-btn {
    flex-shrink: 0;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #ff2e4d;
    background: transparent;
    color: #ff2e4d;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.22, .61, .36, 1);
    white-space: nowrap;
}
.feed-follow-btn:active { transform: scale(0.94); }
.feed-follow-btn.is-following {
    border-color: rgba(255, 255, 255, 0.34);
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}
.feed-follow-btn.is-following:hover {
    border-color: #ff2e4d;
    color: #ff2e4d;
}

.feed-title {
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.feed-desc {
    color: var(--feed-fade);
    font-size: 13.5px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    transition: -webkit-line-clamp 0.2s;
}
.feed-desc.is-expanded { -webkit-line-clamp: 12; }

.feed-desc-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.feed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.feed-tag {
    font-size: 12px;
    color: #ffb3c1;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.feed-tag:active { opacity: 0.7; }

/* ============================================================
   右侧操作栏
   ============================================================ */
.feed-actions {
    position: absolute;
    right: 9px;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    z-index: 9;
}

.feed-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    /* 点击高亮已在文件顶部全局关闭 */
}
.feed-action svg {
    width: 31px;
    height: 31px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1.5px 4px rgba(0, 0, 0, 0.55));
    transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1);
}
.feed-action:active svg { transform: scale(0.86); }
.feed-action-count {
    font-size: 11.5px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* 已点赞 / 已收藏 状态 */
.feed-action.is-active svg { animation: feed-pop 0.36s cubic-bezier(.34, 1.56, .64, 1); }
.feed-action-like.is-active svg { fill: #ff2e4d; stroke: #ff2e4d; }
.feed-action-favorite.is-active svg { fill: #ffc107; stroke: #ffc107; }
@keyframes feed-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 头像按钮 */
.feed-action-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
    text-decoration: none;
}
.feed-action-avatar img,
.feed-action-avatar .feed-avatar-text {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.8px solid #fff;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.4);
    background: #ff2e4d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
}
.feed-avatar-plus {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #ff2e4d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid #000;
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
                background 0.25s ease;
}
.feed-action-avatar.is-following .feed-avatar-plus {
    transform: translateX(-50%) rotate(45deg) scale(0.82);
    background: rgba(120, 120, 120, 0.85);
}

/* ============================================================
   评论抽屉
   ============================================================ */
.feed-drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    z-index: 200;
}
.feed-drawer-mask.show { opacity: 1; visibility: visible; }

.feed-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68vh;
    max-height: 620px;
    background: #1c1c1f;
    border-radius: 18px 18px 0 0;
    transform: translateY(102%);
    transition: transform 0.32s cubic-bezier(.32, .72, .24, 1);
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.feed-drawer.show { transform: translateY(0); }

@media (min-width: 769px) {
    .feed-drawer {
        left: auto;
        right: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        max-height: none;
        width: 420px;
        border-radius: 18px 0 0 18px;
        transform: translateX(102%);
    }
    .feed-drawer.show { transform: translateX(0); }
}

.feed-drawer-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.feed-drawer-title {
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
}
.feed-drawer-title em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    margin-left: 3px;
}
.feed-drawer-close {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feed-drawer-close:active { transform: translateY(-50%) scale(0.9); }

.feed-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 15px 14px;
    overscroll-behavior: contain;
}

/* 抽屉内评论样式：适配暗色底 */
.feed-drawer-body .comment-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 13px 0;
}
.feed-drawer-body .comment-content { color: rgba(255, 255, 255, 0.9); }
.feed-drawer-body .comment-user { color: rgba(255, 255, 255, 0.96); }
.feed-drawer-body .comment-text { color: rgba(255, 255, 255, 0.84); }
.feed-drawer-body .comment-time { color: rgba(255, 255, 255, 0.38); }
.feed-drawer-body .comment-like-btn,
.feed-drawer-body .comment-reply-btn { color: rgba(255, 255, 255, 0.55); }
.feed-drawer-body .comment-like-btn.liked { color: #ff2e4d; }
.feed-drawer-body .comment-like-btn.liked svg { fill: #ff2e4d; }
.feed-drawer-body .comment-replies {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 9px;
    padding: 8px 10px;
}
.feed-drawer-body .reply-name { color: rgba(255, 255, 255, 0.62); }
.feed-drawer-body .reply-text { color: rgba(255, 255, 255, 0.86); }
.feed-drawer-body .reply-textarea {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #fff;
    border-radius: 9px;
    padding: 8px 10px;
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    resize: none;
}
.feed-drawer-body .reply-textarea::placeholder { color: rgba(255, 255, 255, 0.34); }

.feed-comments-empty {
    text-align: center;
    padding: 60px 0;
    color: rgba(255, 255, 255, 0.34);
    font-size: 14px;
}
.feed-comments-loading {
    text-align: center;
    padding: 46px 0;
    color: rgba(255, 255, 255, 0.36);
    font-size: 13.5px;
}

.feed-drawer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #1c1c1f;
}
.feed-comment-input {
    flex: 1;
    min-height: 38px;
    max-height: 96px;
    padding: 9px 14px;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s;
}
.feed-comment-input:focus { border-color: rgba(255, 46, 77, 0.55); }
.feed-comment-input::placeholder { color: rgba(255, 255, 255, 0.34); }

.feed-comment-send {
    flex-shrink: 0;
    height: 38px;
    padding: 0 19px;
    border-radius: 19px;
    border: none;
    background: linear-gradient(135deg, #ff3a55, #ff2442);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s, opacity 0.2s;
}
.feed-comment-send:active { transform: scale(0.95); }
.feed-comment-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   Toast
   ============================================================ */
.feed-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(0, 0, 0, 0.86);
    color: #fff;
    font-size: 13.5px;
    padding: 11px 19px;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(.34, 1.4, .64, 1),
                visibility 0.24s;
    z-index: 400;
    max-width: 76vw;
    text-align: center;
    line-height: 1.5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}
.feed-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.feed-toast.has-action { pointer-events: auto; padding: 14px 20px 12px; }
.feed-toast-action {
    display: block;
    margin: 9px auto 0;
    padding: 6px 20px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ff3a55, #ff2442);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ============================================================
   空状态 / 底部提示 / 骨架屏
   ============================================================ */
.feed-empty {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--feed-navbar-h) + var(--feed-safe-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: #0e0e10;
    z-index: 110;
    text-align: center;
    padding: 24px;
}
.feed-empty-icon {
    width: 82px;
    height: 82px;
    border-radius: 26px;
    background: rgba(255, 46, 77, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
}
.feed-empty h3 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}
.feed-empty p {
    color: rgba(255, 255, 255, 0.42);
    font-size: 13.5px;
    margin: 0;
    line-height: 1.7;
}
.feed-empty-actions { display: flex; gap: 11px; margin-top: 6px; }
.feed-empty-btn {
    padding: 10px 24px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ff3a55, #ff2442);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s;
}
.feed-empty-btn:active { transform: scale(0.95); }
.feed-empty-btn.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.feed-end-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100dvh;
    color: rgba(255, 255, 255, 0.36);
    font-size: 14px;
    text-align: center;
    padding: 0 40px;
    line-height: 1.8;
}
.feed-end-tip a { color: #ff6b81; text-decoration: none; }

/* ============================================================
   桌面端适配（居中手机比例容器）
   ============================================================ */
@media (min-width: 769px) {
    body.feed-page { background: #09090b; }

    .feed-stage {
        max-width: 460px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 62px rgba(0, 0, 0, 0.75);
    }
    .feed-drawer-mask { background: rgba(0, 0, 0, 0.42); }
}

/* 极窄屏收窄间距 */
@media (max-width: 360px) {
    .feed-actions { right: 5px; gap: 15px; }
    .feed-action svg { width: 28px; height: 28px; }
    .feed-info { padding-right: 66px; }
    .feed-action-avatar,
    .feed-action-avatar img,
    .feed-action-avatar .feed-avatar-text { width: 40px; height: 40px; }
}

/* 横屏时压缩底部信息 */
@media (orientation: landscape) and (max-height: 500px) {
    .feed-info { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .feed-actions { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 13px; }
    .feed-action svg { width: 26px; height: 26px; }
    .feed-title { -webkit-line-clamp: 1; }
    .feed-desc { -webkit-line-clamp: 1; }
}

/* 无障碍：尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .feed-burst.play { animation: none; }
    .feed-action.is-active svg { animation: none; }
    .feed-spinner { animation-duration: 1.6s; }
}