/* frontend\assets\favorite\css\favorite.css */
/* ---------- Favorite button (收藏) ---------- */
.favorite-button {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .78rem; font-weight: 600; line-height: 1.5;
    white-space: nowrap; text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.favorite-button:hover,
.favorite-button:focus-visible {
    color: var(--bs-primary);
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
    text-decoration: none;
}
.favorite-button .bi { font-size: .95rem; line-height: 1; }

.favorite-button.is-favorited {
    color: var(--bs-warning-text-emphasis);
    border-color: var(--bs-warning-border-subtle);
    background: var(--bs-warning-bg-subtle);
}
.favorite-button.is-favorited .bi { color: var(--bs-warning); }

.favorite-button--icon { padding: .2rem .38rem; }

/* 叠在封面或图片上：反色半透明底，明暗主题下都清晰。 */
.favorite-button--overlay {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    border-color: transparent;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}
.favorite-button--overlay:hover,
.favorite-button--overlay:focus-visible {
    border-color: transparent;
    background: rgba(0, 0, 0, .74);
    color: #fff;
}
.favorite-button--overlay.is-favorited {
    border-color: transparent;
    background: rgba(0, 0, 0, .74);
    color: var(--bs-warning);
}

/* 请求进行中禁用，避免连点把状态翻乱。 */
.favorite-button.is-busy { opacity: .55; pointer-events: none; }

/* 失败提示：抖动一下后由脚本移除该类，状态本身没有变化。 */
.favorite-button.has-error {
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
    animation: favorite-shake .3s ease;
}
@keyframes favorite-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* 整卡是一个链接的封面位，收藏按钮挂在链接之外、叠在卡片右上角。 */
.cover-list-cell { position: relative; }

/* 竖屏短视频右侧操作栏：沿用该栏自己的方块外观，覆盖默认胶囊样式（本表在 site.css 之后加载）。 */
.video-shorts-rail .favorite-button {
    flex-direction: column; gap: .2rem;
    width: 3.6rem; padding: .5rem 0;
    border: 0; border-radius: .85rem;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .68rem; line-height: 1.2;
}
.video-shorts-rail .favorite-button .bi { font-size: 1.2rem; }
.video-shorts-rail .favorite-button:hover,
.video-shorts-rail .favorite-button:focus-visible {
    border-color: transparent;
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.video-shorts-rail .favorite-button.is-favorited {
    border-color: transparent;
    background: rgba(255, 255, 255, .2);
    color: var(--bs-warning);
}
@media (max-width: 767.98px) {
    .video-shorts-rail .favorite-button { width: 3.4rem; }
}


/* frontend\assets\follow\css\follow.css */
/* ---------- Follow button (关注) ---------- */
.follow-button {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem;
    border: 1px solid var(--bs-success-border-subtle);
    border-radius: 999px;
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    font-size: .78rem; font-weight: 600; line-height: 1.5;
    white-space: nowrap; text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.follow-button:hover,
.follow-button:focus-visible {
    color: #fff;
    border-color: var(--bs-success);
    background: var(--bs-success);
    text-decoration: none;
}
.follow-button .bi { font-size: .95rem; line-height: 1; }
.follow-button [data-follow-label] { margin-left: .05rem; }

.follow-button.is-followed {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}
.follow-button.is-followed:hover,
.follow-button.is-followed:focus-visible {
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
}

.follow-button-count {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.follow-button-count:empty { display: none; }

.follow-button--icon { padding: .2rem .45rem; }

/* 请求进行中禁用，避免连点把状态翻乱。 */
.follow-button.is-busy { opacity: .55; pointer-events: none; }

/* 失败提示：抖动一下后由脚本移除该类，状态本身没有变化。 */
.follow-button.has-error {
    animation: follow-shake .3s ease;
}
@keyframes follow-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* 竖屏短视频右侧操作栏：沿用该栏自己的方块外观，覆盖默认胶囊样式（本表在 site.css 之后加载）。 */
.video-shorts-rail .follow-button {
    flex-direction: column; gap: .2rem;
    width: 3.6rem; padding: .5rem 0;
    border: 0; border-radius: .85rem;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .68rem; line-height: 1.2;
}
.video-shorts-rail .follow-button .bi { font-size: 1.2rem; }
.video-shorts-rail .follow-button:hover,
.video-shorts-rail .follow-button:focus-visible {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.video-shorts-rail .follow-button.is-followed {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.video-shorts-rail .follow-button.is-followed .bi { color: var(--bs-success); }
@media (max-width: 767.98px) {
    .video-shorts-rail .follow-button { width: 3.4rem; }
}

/* 评论行内的关注图标按钮与作者昵称保持间距。 */
.comment-item-head .follow-button { margin-left: .35rem; }


/* frontend\assets\imageviewer\css\imageviewer.css */
/* ---------- 看图模式（信息流图片大图查看，参考微博的看图体验） ---------- */

a[data-image-view] {
    display: block;
    min-width: 0;
    cursor: zoom-in;
}
a[data-image-view]:hover img { opacity: .9; }
a[data-image-view]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.image-viewer {
    position: fixed; inset: 0; z-index: 2050;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    /* 不透明度留一点余量就够了，再高会让页面里的白卡片透出来，反而发灰 */
    background: rgba(6, 8, 7, .985);
    color: #f4f7f5;
    animation: image-viewer-in .18s ease both;
}
.image-viewer[hidden] { display: none; }

.image-viewer-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    color: rgba(244, 247, 245, .78);
}

.image-viewer-tool,
.image-viewer-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #f4f7f5;
    cursor: pointer;
    transition: background-color .15s ease;
}
.image-viewer-tool { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.image-viewer-tool:hover,
.image-viewer-tool:focus-visible { background: rgba(255, 255, 255, .22); }

.image-viewer-arrow {
    position: absolute; top: 50%; z-index: 2;
    width: 2.75rem; height: 2.75rem;
    transform: translateY(-50%);
    font-size: 1.25rem;
}
.image-viewer-arrow:hover,
.image-viewer-arrow:focus-visible { background: rgba(255, 255, 255, .24); }
.image-viewer-prev { left: clamp(.5rem, 2vw, 1.5rem); }
.image-viewer-next { right: clamp(.5rem, 2vw, 1.5rem); }

.image-viewer-stage {
    position: relative;
    display: flex;
    min-height: 0;
    padding: 1rem clamp(3.5rem, 9vw, 6.5rem);
    overscroll-behavior: contain;
}
.image-viewer-img {
    flex: 0 0 auto; margin: auto;
    max-width: 100%; max-height: 100%;
    cursor: zoom-in;
    user-select: none; -webkit-user-select: none;
    transition: opacity .15s ease;
}
.image-viewer-stage.is-zoomed .image-viewer-img {
    max-width: none; max-height: none;
    cursor: zoom-out;
}
.image-viewer-stage.is-panning { cursor: grabbing; }

.image-viewer-spinner {
    position: absolute; top: 50%; left: 50%;
    width: 2rem; height: 2rem;
    display: none;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #f4f7f5;
    border-radius: 50%;
    animation: image-viewer-spin .8s linear infinite;
}
.image-viewer.is-loading .image-viewer-spinner { display: block; }
.image-viewer.is-loading .image-viewer-img { opacity: 0; }

.image-viewer-foot {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: .5rem 1rem 1rem;
}
.image-viewer-caption {
    max-width: 48rem; margin: 0;
    font-size: .875rem; text-align: center;
    color: rgba(244, 247, 245, .76);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.image-viewer-caption:empty { display: none; }

.image-viewer-thumbs {
    display: flex; gap: .5rem;
    max-width: 100%;
    padding: .25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.image-viewer-thumb {
    flex: 0 0 auto;
    width: 3.5rem; height: 3.5rem; padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    opacity: .5;
    cursor: pointer;
    overflow: hidden;
    transition: opacity .15s ease, border-color .15s ease;
}
.image-viewer-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-viewer-thumb:hover { opacity: .85; }
.image-viewer-thumb.is-active { opacity: 1; border-color: var(--bs-primary); }

.image-viewer.is-single .image-viewer-arrow,
.image-viewer.is-single .image-viewer-thumbs { display: none; }

.image-viewer :focus-visible { outline: 2px solid rgba(255, 255, 255, .65); outline-offset: 2px; }

@keyframes image-viewer-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes image-viewer-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 575.98px) {
    .image-viewer-arrow { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
    .image-viewer-stage { padding: .75rem 3rem; }
    .image-viewer-thumb { width: 2.75rem; height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .image-viewer,
    .image-viewer-img,
    .image-viewer-spinner { animation: none; transition: none; }
}


/* frontend\assets\like\css\like.css */
/* ---------- Like button (点赞) ---------- */
.like-button {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .78rem; font-weight: 600; line-height: 1.5;
    white-space: nowrap; text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.like-button:hover,
.like-button:focus-visible {
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
    text-decoration: none;
}
.like-button .bi { font-size: .95rem; line-height: 1; }

.like-button.is-liked {
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
}
.like-button.is-liked .bi { color: var(--bs-danger); }

.like-button-count {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.like-button-count:empty { display: none; }

.like-button--icon { padding: .2rem .45rem; }

/* 叠在封面或图片上：反色半透明底，明暗主题下都清晰。 */
.like-button--overlay {
    position: absolute; top: .5rem; left: .5rem; z-index: 2;
    border-color: transparent;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}
.like-button--overlay:hover,
.like-button--overlay:focus-visible {
    border-color: transparent;
    background: rgba(0, 0, 0, .74);
    color: #fff;
}
.like-button--overlay.is-liked {
    border-color: transparent;
    background: rgba(0, 0, 0, .74);
    color: #fff;
}
.like-button--overlay.is-liked .bi { color: var(--bs-danger); }

/* 点赞成功时心跳一下，让「数字 +1」这件事更容易被看见。 */
.like-button.is-liked .bi { animation: like-pop .32s ease; }
@keyframes like-pop {
    0% { transform: scale(.6); }
    55% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* 请求进行中禁用，避免连点把计数翻乱。 */
.like-button.is-busy { opacity: .55; pointer-events: none; }

/* 失败提示：抖动一下后由脚本移除该类，状态与计数本身没有变化。 */
.like-button.has-error {
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
    animation: like-shake .3s ease;
}
@keyframes like-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* 图集与视频卡片的元信息行原本只放一个按钮，加上点赞后窄屏放不下，允许换行避免横向溢出。 */
.gallery-meta,
.video-lib-body { flex-wrap: wrap; }

/* 竖屏短视频右侧操作栏：沿用该栏自己的方块外观，覆盖默认胶囊样式（本表在 site.css 之后加载）。 */
.video-shorts-rail .like-button {
    flex-direction: column; gap: .2rem;
    width: 3.6rem; padding: .5rem 0;
    border: 0; border-radius: .85rem;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .68rem; line-height: 1.2;
}
.video-shorts-rail .like-button .bi { font-size: 1.2rem; }
.video-shorts-rail .like-button:hover,
.video-shorts-rail .like-button:focus-visible {
    border-color: transparent;
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.video-shorts-rail .like-button.is-liked {
    border-color: transparent;
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.video-shorts-rail .like-button.is-liked .bi { color: var(--bs-danger); }
@media (max-width: 767.98px) {
    .video-shorts-rail .like-button { width: 3.4rem; }
}


/* frontend\assets\mention\css\mention.css */
/* ---------- @ 提及候选下拉 ---------- */
.mention-dropdown {
    position: fixed; z-index: 2000;
    max-height: 16rem; overflow-y: auto;
    padding: .3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18);
}
.mention-option {
    display: flex; align-items: baseline; gap: .5rem;
    width: 100%; padding: .4rem .6rem;
    border: 0; border-radius: .45rem;
    background: none; text-align: left; cursor: pointer;
    color: var(--bs-body-color); font-size: .9rem; line-height: 1.5;
}
.mention-option.is-active,
.mention-option:hover { background: var(--bs-primary-bg-subtle); }
.mention-option-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-option-handle { flex-shrink: 0; max-width: 45%; color: var(--bs-secondary-color); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* frontend\assets\share\css\share.css */
/* ---------- Share button (分享链接) ---------- */
.share-button {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .78rem; font-weight: 600; line-height: 1.5;
    white-space: nowrap; text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.share-button:hover,
.share-button:focus-visible {
    color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
    text-decoration: none;
}
.share-button .bi { font-size: .95rem; line-height: 1; }

.share-button.is-copied {
    color: var(--bs-success-text-emphasis);
    border-color: var(--bs-success-border-subtle);
    background: var(--bs-success-bg-subtle);
}

.share-button--icon { padding: .2rem .45rem; }

/* 竖屏短视频右侧操作栏：沿用该栏自己的方块外观，覆盖默认胶囊样式（本表在 site.css 之后加载）。 */
.video-shorts-rail .share-button {
    flex-direction: column; gap: .2rem;
    width: 3.6rem; padding: .5rem 0;
    border: 0; border-radius: .85rem;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .68rem; line-height: 1.2;
}
.video-shorts-rail .share-button .bi { font-size: 1.2rem; }
.video-shorts-rail .share-button:hover,
.video-shorts-rail .share-button:focus-visible {
    border-color: transparent;
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.video-shorts-rail .share-button.is-copied {
    border-color: transparent;
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
@media (max-width: 767.98px) {
    .video-shorts-rail .share-button { width: 3.4rem; }
}