/* ==========================================================================
   usermenu.css —— 顶栏「更多」菜单 / 浏览记录 / 我的收藏 / 文章收藏按钮
   · 顶栏搜索框右侧的菜单按钮 + 下拉面板（电脑端、手机端同一套结构）
   · 浏览记录、我的收藏使用 localStorage 存储，无需登录、无后端改动
   · 文章页标题下方「作者 / 时间 / 反馈」一行最右侧的「收藏」按钮
   依赖 hnyszy.bundle.min.css 里的配色变量（--brand / --border 等），
   组件自身都写了兜底色，脱离顶栏也能正常显示。
   ========================================================================== */

/* ---------------- 〇、让顶栏能"压得住"页面内容 ----------------
   手机端下拉菜单会被吸顶标签栏、列表内容盖住，原因不在下拉层本身（它已经是
   z-index:300），而在顶栏：
   1) 主题脚本会给 .mb-topbar 加 transform / will-change（形成层叠上下文）；
   2) 手机端首页/分类页把顶栏设成 position:static —— 静态定位下 z-index 不生效，
      这个层叠上下文等于 z-index:auto，于是整块顶栏（含下拉层）被后面的内容
      （.mhome-tabs 是 sticky + z-index:80）盖住。
   解法：手机端保持"不吸顶"但改成 relative 让 z-index 生效，并把顶栏层级提到
   900（高于标签栏 80、右下角浮动入口 200，低于弹层 10000）。 */
.mb-topbar {
    z-index: 900;
}

body.mhome-page .mb-topbar,
body.mnav-page .mb-topbar {
    position: relative;
    z-index: 900;
}

/* ---------------- 一、顶栏「更多」按钮 ---------------- */
.mb-user {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.mb-user-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border, #E4EBF5);
    border-radius: 9px;
    background: var(--bg-soft, #F5F8FD);
    color: var(--text-2, #4E5C70);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mb-user-btn:hover,
.mb-user-btn:focus-visible,
.mb-user.is-open .mb-user-btn {
    background: #fff;
    border-color: var(--brand, #1A6DFF);
    color: var(--brand, #1A6DFF);
    outline: none;
}

.mb-user-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ---------------- 二、下拉面板 ---------------- */
.mb-user-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    width: 160px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border, #E4EBF5);
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(16, 40, 81, .14);
    box-sizing: border-box;
    display: none;
    /* 移动端点击不出现 300ms 延迟的蓝色高亮 */
    -webkit-tap-highlight-color: transparent;
}

.mb-user.is-open .mb-user-pop {
    display: block;
    animation: mbUserPop .16s ease;
}

@keyframes mbUserPop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.mb-user-pop > a,
.mb-user-pop > button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text, #16202E);
    font-family: inherit;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}

.mb-user-pop > a:hover,
.mb-user-pop > button:hover {
    background: var(--bg-soft, #F5F8FD);
    color: var(--brand, #1A6DFF);
}

.mb-user-pop svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------- 三、浏览记录 / 我的收藏 弹层 ---------------- */
.hn-panel-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(11, 20, 35, .42);
    -webkit-tap-highlight-color: transparent;
}

.hn-panel-mask.open {
    display: flex;
}

.hn-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 76vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(11, 20, 35, .25);
    overflow: hidden;
    animation: hnPanelIn .18s ease;
}

@keyframes hnPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.hn-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #EEF2F8;
}

.hn-panel-hd h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #16202E;
}

.hn-panel-close {
    padding: 0 2px;
    border: 0;
    background: none;
    color: #98A3B4;
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.hn-panel-close:hover {
    color: #FF4000;
}

/* 列表沿用首页信息流的排法：标题占满左侧、时间靠右、单行省略。
   这里不复用 .list-a 类，因为 .list-a 自带 font-size:0 + overflow:hidden，
   会把弹层的纵向滚动一起干掉，所以按同样的字号/颜色/间距自己写一套。 */
.hn-panel-list {
    flex: 1;
    margin: 0;
    padding: 0 16px 12px;
    list-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.hn-panel-list li {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin-top: 13px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f6f8;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.65;
}

.hn-panel-list li:last-child {
    border-bottom: 0;
}

.hn-panel-list .hn-item {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    overflow: hidden;
    color: #22303F;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hn-panel-list .hn-item:hover {
    color: #ff4000;
}

/* 时间：与首页一致，12px 灰字，当天浏览/收藏的用主题的红色 */
.hn-panel-list .hn-item-time {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 10px;
    color: #888;
    font-size: 12px;
    line-height: 1.9;
    white-space: nowrap;
}

.hn-panel-list .hn-item-time.red {
    color: #ff1500;
}

/* 超出 20 篇时的提示行 */
.hn-panel-list li.hn-panel-more {
    display: block;
    margin: 14px 0 0;
    padding-bottom: 0;
    border-bottom: 0;
    color: #A3ADBB;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

.hn-panel-empty {
    padding: 44px 16px;
    color: #A3ADBB;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

/* 收藏列表底部提示条：说明数据只保存在本机浏览器，只在「我的收藏」出现 */
.hn-panel-tip {
    display: none;
    padding: 9px 16px;
    border-top: 1px solid #FFE1A8;
    background: #FFF8E6;
    color: #8A5A00;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.hn-panel-ft {
    display: none;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #EEF2F8;
}

.hn-panel-ft.on {
    display: flex;
}

.hn-panel-ft button {
    flex: 1;
    padding: 9px 0;
    border: 1px solid #E4EBF5;
    border-radius: 8px;
    background: #fff;
    color: #6B7789;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.hn-panel-ft button:hover {
    background: #F5F8FD;
}

.hn-panel-ft .hn-clear {
    color: #FF4000;
    border-color: #FFD9CE;
}

.hn-panel-ft .hn-clear:hover {
    background: #FFF3EF;
}

/* ---------------- 四、文章页「收藏」按钮 ---------------- */
/* 位置：文章标题下方「作者 / 时间 / 反馈」那一行的最右侧（模板 .info.info-post 内）。
   观感与左边的「反馈」按钮完全一致：12px 灰字 + 12px 描边图标、无边框、悬停变橙。 */

/* 元信息行改成 flex 排：元素之间统一 10px 间距。
   原来是每个 span 自带 margin:0 10px，两个元素之间实际空 20px，改成 flex gap 后紧凑一半；
   margin 去掉两侧 -10px 的负边距（那是给旧 span 边距做视觉补偿用的）。 */
.main-left .info.info-post {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 10px;
    margin: 16px 0;
}

.main-left .info.info-post > span {
    margin: 0;
}

/* 「反馈」按钮自带 margin-left:10px，与 flex gap 叠加会变成 20px，这里清零；
   同时去掉左右内边距，四个元素之间的视觉间隔才统一等于 10px 的 gap。 */
.info-post .post-copy-btn {
    margin-left: 0;
    padding: 2px 0;
}

.hn-fav-btn {
    display: inline-flex;
    align-items: center;
    /* 图标画布已裁到图形边界（见下面 .hn-fav-ico 的 viewBox），
       图标与「收藏」两个字之间的额外间距已经归零 */
    gap: 0;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #888;
    font-family: inherit;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s;
    -webkit-tap-highlight-color: transparent;
}

/* 行内 gap 只有 10px，收藏图标贴着「反馈」两个字会显得挤；
   这里单独再加 5px（合计 15px），作者/时间/反馈之间保持 10px 不变 */
.info-post .hn-fav-btn {
    margin-left: 5px;
}

/* 星形图标的画布按图形实际边界裁切（viewBox="1 1 22 21"），宽高比接近 1:1，
   所以给 12×12——画布贴合图形，四周没有透明边，不会出现"图标离文字很远"的错觉；
   描边 1.8 在 12px 尺寸下约 1px 实线，比 2 更清爽，不会糊成一团。 */
.hn-fav-btn .hn-fav-ico {
    width: 12px;
    height: 12px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.hn-fav-btn:hover {
    color: #ff4000;
}

/* 已收藏：文字变橙 + 图标由描边变实心，尺寸/位置完全不变，不会跳动 */
.hn-fav-btn.is-on {
    color: #ff4000;
}

.hn-fav-btn.is-on .hn-fav-ico {
    fill: currentColor;
}

.hn-fav-btn.is-pop {
    animation: hnFavPop .3s ease;
}

@keyframes hnFavPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.14); }
    100% { transform: scale(1); }
}

/* ---------------- 五、响应式微调 ---------------- */
@media screen and (max-width: 939px) {
    .mb-user-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .mb-user-btn svg {
        width: 17px;
        height: 17px;
    }

    .mb-user-pop {
        width: 150px;
    }
}

@media screen and (max-width: 360px) {
    .mb-user-pop {
        width: 142px;
    }

    /* 极窄屏：四个元素再挤一点，尽量保持一行 */
    .main-left .info.info-post {
        gap: 2px 6px;
    }

    .hn-panel {
        max-height: 82vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mb-user-pop,
    .hn-panel,
    .hn-fav-btn.is-pop {
        animation: none;
    }
}