/**
 * 文章徽标样式
 * ---------------------------------------------------------------
 * 1. 详情页：胶囊徽标内联于标题文字之后
 * 2. 列表卡片：左上角子分类 / 右上角状态
 * 3. 前台写文章页面：徽标编辑器 + 本篇不显示画廊开关
 * 主色调：#d10f45 玫红系（固定，不跟随主题色）
 *
 * @package xd_badges_gallery
 */

/* =========================================================
   胶囊徽标基础样式
   ========================================================= */
.xd-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 11px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
}

.xd-pill-badge .xd-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

/* 文字独立成项，与白点一起被 flex 垂直居中；0.5px 修正中文字形视觉偏上 */
.xd-pill-label {
    display: inline-block;
    line-height: 1;
    position: relative;
    top: 0.5px;
}

/* 自动状态色：最新=玫红 #d10f45，已更新=深蓝 #2563eb */
/* 已更新：深蓝 */
.xd-pill-badge--updated {
    background: #2563eb;
    box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.55);
}

/* 最新/新发布：玫红 */
.xd-pill-badge--latest {
    background: #d10f45;
    box-shadow: 0 2px 8px -2px rgba(209, 15, 69, 0.55);
}

/* 手动徽标预设色（theme 为偏深橙色系；其余保留为可选项） */
.xd-pill-badge--theme {
    background: #e98220;
    box-shadow: 0 2px 8px -2px rgba(233, 130, 32, 0.55);
}
.xd-pill-badge--red {
    background: #f5535e;
    box-shadow: 0 2px 8px -2px rgba(245, 83, 94, 0.6);
}
.xd-pill-badge--green {
    background: #22c55e;
    box-shadow: 0 2px 8px -2px rgba(34, 197, 94, 0.6);
}
.xd-pill-badge--blue {
    background: #3b82f6;
    box-shadow: 0 2px 8px -2px rgba(59, 130, 246, 0.6);
}
.xd-pill-badge--orange {
    background: #f59e0b;
    box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.6);
}
.xd-pill-badge--purple {
    background: #a855f7;
    box-shadow: 0 2px 8px -2px rgba(168, 85, 247, 0.6);
}

/* =========================================================
   详情页：标题文字后内联
   ========================================================= */
.article-title .xd-pill-badge {
    margin-left: 10px;
    position: relative;
    top: -2px;
}

/* =========================================================
   列表卡片角标
   ========================================================= */
.xd-card-cat-badge,
.xd-card-status-badge {
    position: absolute;
    top: 10px;
    z-index: 3;
}

/* 左上角：子分类（黑色半透明） */
.xd-card-cat-badge {
    left: 10px;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    font-size: 11.5px;
    font-weight: 600;
    /* 行高等于高度：单行文字垂直绝对居中，不依赖匿名 flex 文本对齐 */
    line-height: 22px;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    background: rgba(17, 19, 24, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s ease;
}

.xd-card-cat-badge:hover {
    background: rgba(17, 19, 24, 0.82);
}

/* 右上角：状态徽标（比标题徽标小一号，精确居中） */
.xd-card-status-badge {
    right: 10px;
    height: 22px;
    padding: 0 9px;
    font-size: 11.5px;
    gap: 4px;
}

.xd-card-status-badge .xd-pill-dot {
    width: 6px;
    height: 6px;
}

/* 卡片上取消标题徽标的 0.5px 视觉偏移，纯数学居中 */
.xd-card-status-badge .xd-pill-label {
    top: 0;
    line-height: 22px;
}

/* =========================================================
   卡片信息行：保留主题 meta_left（作者+时间），
   左侧插入容量
   ========================================================= */

/* 信息行：默认一行布局 */
.posts-item .item-meta {
    flex-wrap: nowrap !important;
}

/* 容量不收缩 */
.xd-meta-size {
    flex: 0 0 auto;
}

/* 空间不足时（JS 加 .xd-meta-wrap）：时间换到第二行居中 */
.posts-item .xd-meta-wrap {
    flex-wrap: wrap !important;
}
.posts-item .xd-meta-wrap .xd-meta-time,
.posts-item .xd-meta-wrap .meta-author {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
}

/* 容量：icon + 文字 垂直居中，强制覆盖主题 svg 基线偏移 */
.xd-meta-size {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 20px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0 !important;
}

.xd-meta-size svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
    margin: 0;
}

/* 左侧：容量 */
.xd-meta-size {
    color: #6b7280;
}

.xd-meta-size .xd-meta-size-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
}

/* 主题时间：替换为时钟图标后的样式（覆盖 .icon-circle::before 圆点） */
.xd-meta-time {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    height: 20px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0 !important;
    white-space: nowrap;
}

.xd-meta-time::before {
    content: none !important;
    display: none;
    margin: 0;
}

.xd-meta-time svg {
    width: 1em;
    height: 1em;
    display: block;
    margin: 0;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
}

/* 最近更新高亮 */
.xd-meta-time--fresh {
    color: #ff7e4a;
    font-weight: 600;
}

.xd-meta-time--fresh svg {
    stroke: #ff7e4a;
}

/* =========================================================
   封面右下角：两行堆叠 —— 第一行版本，第二行评论/浏览/点赞
   ========================================================= */
.xd-cover-stack {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

/* 第一行：版本信息胶囊 */
.xd-cover-version {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
    background: #0284c7;
    box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.xd-cover-version .xd-card-version-icon {
    flex-shrink: 0;
}

.xd-cover-version .xd-cover-version-text {
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* 第二行：评论/浏览/点赞（实色半透明底，不用毛玻璃避免虚化） */
.xd-cover-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    pointer-events: auto;
}

.xd-cover-stats item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    line-height: 1;
}

.xd-cover-stats item a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.xd-cover-stats svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: block;
    margin: 0;
    fill: currentColor;
}

/* 版本信息已移至封面右下角（见 .xd-cover-version） */

/* =========================================================
   前台写文章页面：徽标编辑器
   ========================================================= */
.xd-badge-editor {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    border-radius: 10px;
    background: var(--main-bg-color, #fff);
}

.xd-badge-editor__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--key-color, inherit);
}

.xd-badge-editor__hint {
    font-size: 12px;
    color: var(--muted-color, #8b93a7);
    margin: 0 0 14px;
}

.xd-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.xd-badge-text-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    border-radius: 6px;
    background: var(--body-bg-color, #f5f6f7);
    color: var(--key-color, #333);
    font-size: 14px;
}

.xd-badge-text-input:focus {
    outline: none;
    border-color: #d10f45;
}

.xd-color-picker {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.xd-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
    transition: transform 0.15s ease;
}

.xd-color-dot.active {
    border-color: var(--key-color, #333);
    transform: scale(1.15);
}

.xd-badge-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(245, 83, 94, 0.12);
    color: #f5535e;
    font-size: 15px;
    cursor: pointer;
}

.xd-badge-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px dashed #d10f45;
    background: transparent;
    color: #d10f45;
    font-size: 13px;
    cursor: pointer;
}

/* 本篇不显示画廊开关行 */
.xd-gallery-disable-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    font-size: 13.5px;
    color: var(--key-color, inherit);
    cursor: pointer;
}

.xd-gallery-disable-row input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.xd-live-preview {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    min-height: 24px;
}

.xd-live-preview .xd-lp-label {
    font-size: 12px;
    color: var(--muted-color, #8b93a7);
    margin-bottom: 8px;
}

.xd-live-preview .xd-pill-badge {
    margin: 0 6px 6px 0;
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 768px) {
    .article-title .xd-pill-badge {
        height: 21px;
        padding: 0 9px;
        font-size: 11.5px;
        margin-left: 7px;
    }

    .xd-card-cat-badge {
        height: 20px;
        padding: 0 8px;
        font-size: 11px;
        line-height: 20px;
    }

    .xd-card-status-badge {
        height: 20px;
        padding: 0 8px;
        font-size: 11px;
    }

    .xd-card-status-badge .xd-pill-label {
        line-height: 20px;
    }

    /* 信息行：移动端缩小字号和间距 */
    .xd-meta-size,
    .xd-meta-time {
        font-size: 11px;
        gap: 2px;
    }

    /* 封面右下角堆叠缩小 */
    .xd-cover-stack {
        right: 8px;
        bottom: 8px;
        gap: 4px;
    }

    .xd-cover-version {
        height: 20px;
        padding: 0 8px;
        font-size: 10.5px;
        line-height: 20px;
    }

    .xd-cover-stats {
        padding: 2px 7px;
        font-size: 11px;
        gap: 6px;
    }

    .xd-badge-row {
        flex-wrap: wrap;
    }

    .xd-color-picker {
        width: 100%;
        overflow-x: auto;
    }
}