/* =========================================================================
 * 顶部工具导航 + 最近访问
 * 复用父主题 header-tools 结构与 CSS 变量，仅做局部覆盖；
 * 颜色/圆角/阴影全部走主题变量，自动跟随明暗主题切换。
 * ========================================================================= */

/* ---------- 右侧工具导航 ---------- */
.sub-tools-nav {
    gap: 2px;
    align-items: center;
    margin-left: 8px;
}

.sub-tools-nav>li {
    position: relative;
}

/* 仅文字菜单项：排除父主题原生图标按钮（.header-icon-btn），
 * 否则这里的 padding / 字号 / 悬停底色会覆盖 .header-icon-btn > a（38×38、17px、无底色），
 * 造成新按钮与原生图标样式不一致。 */
.sub-tools-nav>li:not(.header-icon-btn)>a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--theme-border-radius-sm);
    color: var(--main-color);
    /* 字号与父主题主菜单 .header-nav .navbar-header（0.9375rem）保持一致 */
    font-size: 0.9375rem;
    line-height: 1.4;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.sub-tools-nav>li:not(.header-icon-btn)>a:hover,
.sub-tools-nav>li:not(.header-icon-btn)>a:focus {
    color: var(--focus-color);
    background: var(--muted-bg-color);
}

.sub-tools-nav>li:not(.header-icon-btn)>a .iconfont {
    /* 图标略小于图标按钮的 17px，与文字高度协调 */
    font-size: 16px;
}

/* 下拉面板：父主题默认右对齐，这里改为与菜单项左对齐 */
.header-tools.sub-tools-nav .sub-menu {
    left: 0;
    right: auto;
    min-width: 132px;
    margin-top: 6px;
}

.header-tools.sub-tools-nav .sub-menu a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--theme-border-radius-sm);
    color: var(--main-color);
    font-size: 13.5px;
    white-space: nowrap;
}

.header-tools.sub-tools-nav .sub-menu a:hover {
    color: var(--focus-color);
    background: var(--muted-bg-color);
}

/* 下拉项里不需要再显示箭头 */
.header-tools.sub-tools-nav .sub-menu .icon-arrow-b {
    display: none;
}

/* ---------- 最近访问 / 收藏本站按钮 ----------
 * 与父主题原生图标按钮完全同规格（.header-icon-btn > a：38×38、17px、margin 2px），
 * 父主题原生图标没有底色块，这里也不加背景，只在悬停/展开时变主题色，
 * 保持整排图标观感统一。
 */
.sub-recent-wrap,
.sub-bookmark-wrap {
    position: relative;
}

.sub-recent-wrap>a,
.sub-bookmark-wrap>a {
    color: inherit;
    transition: color .15s ease;
}

.sub-recent-wrap>a:hover,
.sub-recent-wrap>a[aria-expanded="true"],
.sub-bookmark-wrap>a:hover,
.sub-bookmark-wrap>a[aria-expanded="true"] {
    color: var(--focus-color);
}

/* 星标、时钟这两个字形在图标字体里的实际绘制尺寸偏小：
 * 实测在 17px 字号下，星标约 11px 高、时钟约 12px 高，而原生用户图标约 16px 高。
 * 这里按比例放大字号，使它们在 38×38 按钮中的视觉大小与原生图标一致。 */
.sub-bookmark-wrap>a .iconfont {
    font-size: 24px;
}

.sub-recent-wrap>a .iconfont {
    font-size: 22px;
}

/* ---------- 最近访问浮层 ---------- */
.sub-recent-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1001;
    display: none;
    width: 320px;
    padding: 14px;
    background: var(--main-bg-color);
    border: 1px solid var(--muted-bg-color);
    border-radius: var(--main-radius);
    box-shadow: 0 6px 24px var(--main-shadow);
    text-align: left;
}

.sub-recent-pop.is-open {
    display: block;
}

.sub-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-recent-title {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 600;
}

.sub-recent-clear {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-color);
    font-size: 12.5px;
    cursor: pointer;
    transition: color .15s ease;
}

.sub-recent-clear:hover {
    color: var(--focus-color);
}

.sub-recent-hint {
    margin: 4px 0 10px;
    color: var(--muted-color);
    font-size: 11.5px;
    line-height: 1.5;
}

.sub-recent-tabs {
    display: flex;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--muted-bg-color);
}

.sub-recent-tab {
    padding: 3px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--muted-bg-color);
    color: var(--muted-color);
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.sub-recent-tab:hover {
    color: var(--focus-color);
}

.sub-recent-tab.is-active {
    border-color: var(--focus-color);
    background: transparent;
    color: var(--focus-color);
}

.sub-recent-list {
    max-height: 340px;
    margin-top: 6px;
    overflow-y: auto;
}

.sub-recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--muted-bg-color);
}

.sub-recent-item:last-child {
    border-bottom: 0;
}

.sub-recent-item>a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--main-color);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s ease;
}

.sub-recent-item>a:hover {
    color: var(--focus-color);
}

.sub-recent-meta {
    flex: 0 0 auto;
    color: var(--muted-color);
    font-size: 11.5px;
    white-space: nowrap;
}

.sub-recent-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 0 18px;
    color: var(--muted-color);
    font-size: 12.5px;
}

.sub-recent-empty .iconfont {
    font-size: 26px;
    opacity: .55;
}

/* ---------- 我的收藏浮层 ---------- */
.sub-bookmark-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1001;
    display: none;
    width: 300px;
    padding: 14px;
    background: var(--main-bg-color);
    border: 1px solid var(--muted-bg-color);
    border-radius: var(--main-radius);
    box-shadow: 0 6px 24px var(--main-shadow);
    text-align: left;
}

.sub-bookmark-pop.is-open {
    display: block;
}

.sub-bookmark-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-bookmark-title {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 600;
}

.sub-bookmark-clear {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-color);
    font-size: 12.5px;
    cursor: pointer;
    transition: color .15s ease;
}

.sub-bookmark-clear:hover {
    color: var(--focus-color);
}

/* 收藏列表 */
.sub-fav-list {
    max-height: 340px;
    margin-top: 8px;
    overflow-y: auto;
}

.sub-fav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--muted-bg-color);
}

.sub-fav-item:last-child {
    border-bottom: 0;
}

.sub-fav-item>a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--main-color);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s ease;
}

.sub-fav-item>a:hover {
    color: var(--focus-color);
}

.sub-fav-del {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted-color);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.sub-fav-del:hover {
    color: var(--focus-color);
    background: var(--muted-bg-color);
}

.sub-fav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 0 18px;
    color: var(--muted-color);
    font-size: 12.5px;
}

.sub-fav-empty .iconfont {
    font-size: 26px;
    opacity: .55;
}

.sub-fav-hint {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--muted-bg-color);
    color: var(--muted-color);
    font-size: 11.5px;
    line-height: 1.7;
}

.sub-bookmark-pop kbd {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid var(--muted-bg-color);
    border-radius: 4px;
    background: var(--muted-bg-color);
    color: var(--main-color);
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.7;
}

/* ---------- 收藏点击后的站内提示条 ---------- */
.sub-fav-toast {
    position: fixed;
    top: calc(var(--main-nav-hight) + 10px);
    right: 24px;
    z-index: 1200;
    max-width: 340px;
    padding: 9px 14px;
    border: 1px solid var(--muted-bg-color);
    border-radius: var(--theme-border-radius-sm);
    background: var(--main-bg-color);
    box-shadow: 0 8px 24px var(--main-shadow);
    color: var(--main-color);
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.sub-fav-toast.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 移动端 ---------- */
@media (max-width: 991.98px) {

    /* 工具导航本身由 d-none d-lg-flex 控制；浮层不显示 */
    .sub-recent-pop,
    .sub-bookmark-pop {
        display: none !important;
    }
}