* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 80px; /* 锚点定位时给导航栏留出位置 */
}


/* =========================================
   1. Global Styles (合并的公共样式)
   ========================================= */
.global-body {
    font-family: sans-serif;
    background-color: #F5F5F7;
}

/* =========================================
   Index Page Styles (首页独有样式)
   ========================================= */
/* 隐藏滚动条但允许滚动 */
.index-no-scrollbar::-webkit-scrollbar {
    display: none;
}
.index-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 评论气泡的小尖角效果 */
.index-comment-bubble {
    position: relative;
}

/* =========================================
   Post Page Styles (言论页与评论区优化)
   ========================================= */

.post-content p{
    text-indent: 2em; /* 首行缩进 */
    line-height: 1.8;
    font-size: 1.2em;
    /* 两端对齐 + 任意截断*/
    /* 中文排版必须两端对齐才好看，不然右边参差不齐的 */
    text-align: justify;
    word-break: break-all;
}

/* 1. 评论区基础容器 */
.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 2. 评论卡片设计 */
.comment-card {
    position: relative;
    transition: all 0.2s ease;
}

/* 3. 头像修复核心样式 (防止变形) */
.comment-avatar-img {
    object-fit: cover; /* 关键：裁剪图片保持比例 */
    flex-shrink: 0;    /* 关键：禁止被挤压 */
    width: 100%;
    height: 100%;
}


/* Markdown 内容样式模拟 (优化版) */
.post-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: #374151;
}
.post-prose p { margin-bottom: 0.75rem; }
.post-prose p:last-child { margin-bottom: 0; }
.post-prose img { max-width: 100%; border-radius: 0.5rem; }

/* 输入框动画 */
.post-input-animate { transition: all 0.2s; }




/* =========================================
   评论区盖楼优化 (无限层级不缩进方案)
   ========================================= */

/* 1. 基础子评论容器 (对应二级评论) */
/* 这是第一层缩进，让二级评论比一级评论往里缩一点 */
.comment-children {
    margin-top: 1rem;
    position: relative;
}

/* --- 桌面端设置 --- */
@media (min-width: 768px) {
    /* 二级评论：缩进 60px (对应头像宽度+间隙)，并加左侧线 */
    .comment-children {
        margin-left: 60px;
        padding-left: 0; /* 不需要padding，直接靠 margin 缩进 */
        border-left: 2px solid #F3F4F6; /* 灰色连接线 */
    }

    /* [核心代码] 三级及更深层评论：取消缩进 */
    /* 逻辑：如果一个 .comment-children 内部还有 .comment-children，
       那么内部的这个就不要再缩进了 */
    .comment-children .comment-children {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important; /* 深层评论不需要左侧线了，否则线会重叠 */
        margin-top: 1rem;
    }
}

/* --- 移动端设置 --- */
@media (max-width: 767px) {
    /* 移动端二级评论：只缩进一点点，保留宝贵的屏幕空间 */
    .comment-children {
        margin-left: 12px;
        padding-left: 0;
        border-left: 2px solid #F3F4F6;
    }

    /* 移动端三级及更深层评论：彻底不缩进 */
    .comment-children .comment-children {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }
}

/* =========================================
   Telegram Style Reactions (仿电报表态样式)
   ========================================= */

/* 1. 容器 */
.reaction-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
}

/* 2. 按钮基础样式 */
.reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;  /* 药丸形状的内边距 */
    background-color: #F3F4F6; /* 默认浅灰背景 */
    border: 1px solid transparent; /* 预留边框位置防止抖动 */
    border-radius: 9999px; /* 完全圆角 */
    cursor: pointer;
    user-select: none;

    /* 核心动画：贝塞尔曲线模拟物理回弹 */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. 字体样式 */
.reaction-emoji {
    font-size: 1.25rem; /* Emoji 稍微大一点 */
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
}

.reaction-count {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: #6B7280; /* 灰色数字 */
    font-family: 'Inter', sans-serif;
}

/* 4. 交互状态 (Hover) */
.reaction-btn:hover {
    background-color: #E5E7EB; /* 悬停稍微变深 */
    transform: scale(1.05);    /* 整体轻微放大 */
}

.reaction-btn:hover .reaction-emoji {
    transform: scale(1.1); /* Emoji 额外放大一点 */
}

.reaction-btn:active {
    transform: scale(0.95); /* 点击微缩 */
}

/* 5. 选中状态 (Active) - 核心样式 */
.reaction-btn.active {
    background-color: #EFF6FF; /* 极浅的蓝色背景 */
    border-color: #3B82F6;     /* 蓝色边框 */
}

.reaction-btn.active .reaction-count {
    color: #3B82F6; /* 数字变蓝 */
}


/* =========================================
   Device Type Badge Styles (设备标识样式)
   ========================================= */
.device-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;                  /* 图标和文字的间距 */
    padding: 2px 6px;          /* 内边距 */
    background-color: #F9FAFB; /* 浅灰背景 (gray-50) */
    border: 1px solid #F3F4F6; /* 边框颜色 (gray-100) */
    border-radius: 4px;        /* 圆角 */
    color: #9CA3AF;            /* 文字颜色 (gray-400) */
    font-size: 0.75rem;        /* 默认字体大小 12px */
    line-height: 1;
    user-select: none;         /* 禁止选中 */
    cursor: default;
    white-space: nowrap;       /* 禁止换行 */
    transition: all 0.2s ease;
    vertical-align: middle;
}

/* 悬停效果 (可选) */
.device-type-badge:hover {
    color: #4B5563;            /* 悬停加深文字 */
    background-color: #F3F4F6; /* 悬停加深背景 */
    border-color: #E5E7EB;
}

.device-type-icon {
    width: 12px;
    height: 12px;
    display: block;
}

/* --- 移动端适配 (小于 768px) --- */
@media (max-width: 767px) {
    .device-type-badge {
        padding: 1px 4px;      /* 减小内边距 */
        font-size: 0.625rem;   /* 字体缩小到约 10px */
        border-radius: 3px;
        gap: 0;                /* 移动端没有图标，不需要间距 */
    }

    /* 移动端隐藏图标，节省空间 */
    .device-type-icon {
        display: none;
    }
}


/* =========================================
   表情包贴图化 (Sticker Style) - 最终适配版
   ========================================= */

/* 1. 评论内容区显示的表情：始终保持 100x100 大图 */
.emoji-img {
    width: 120px !important;
    height: 100% !important;
    max-width: 100% !important; /* 防止在极小屏幕撑破容器 */
    vertical-align: middle !important;
    margin: 4px !important;
    border-radius: 4px;
    display: inline-block;
}

/* 2. 表情选择面板 - 基础样式 (默认电脑端) */
#emoji-picker {
    width: 350px !important;    /* 电脑端宽度，容纳4列 */
    max-width: 90vw;            /* 兜底：不超过视口90% */
}

#emoji-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 电脑端 4 列 */
    gap: 10px !important;
}

/* 面板内的预览图：为了方便点击，设置稍大一点 (如 60px) */
/* 注意：这里不要设为 100px，否则面板放不下几个 */
#emoji-list img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
    margin: 0 auto; /* 居中 */
}


/* 3. 手机端独立适配 (屏幕小于 768px) */
@media (max-width: 767px) {

    .emoji-img {
        margin: 2px !important;
    }

    /* 缩小面板总宽度，适应窄屏手机 */
    #emoji-picker {
        width: 260px !important;
    }

    /* 强制改为 3 列 */
    #emoji-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* 手机端预览图稍微缩小一点点以防挤压 */
    #emoji-list img {
        width: 55px !important;
        height: 55px !important;
    }
}

/* =========================================
   表情包分类 Tabs 样式
   ========================================= */

/* Tab 按钮基础样式 */
.emoji-tab-btn {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280; /* gray-500 */
    background-color: transparent;
    border-radius: 99px;
    white-space: nowrap; /* 禁止换行 */
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0; /* 防止被压缩 */
}

/* Tab 悬停 */
.emoji-tab-btn:hover {
    background-color: #F3F4F6; /* gray-100 */
    color: #374151;
}

/* Tab 选中高亮状态 */
.emoji-tab-btn.active {
    background-color: #EFF6FF; /* blue-50 */
    color: #3B82F6;            /* blue-600 */
    font-weight: 700;
}

/* 隐藏 Tab 栏的滚动条 (Chrome/Safari) */
#emoji-tabs::-webkit-scrollbar {
    height: 0px;
    background: transparent;
}
/* 隐藏 Tab 栏的滚动条 (Firefox) */
#emoji-tabs {
    scrollbar-width: none;
}


/* =========================================
   Index Pagination (首页分页美化)
   ========================================= */

/* 基础按钮样式 */
.index-pagination li a,
.index-pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;      /* 44px */
    height: 2.75rem;         /* 44px */
    padding: 0 10px;         /* 左右内边距 */
    background-color: #ffffff;
    border: 1px solid #F3F4F6; /* gray-100 */
    border-radius: 0.75rem;  /* 圆角 12px */
    color: #6B7280;          /* gray-500 */
    font-size: 0.875rem;     /* 14px */
    font-weight: 600;
    text-decoration: none;   /* 去掉下划线 */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 悬停效果：上浮 + 变蓝 + 阴影 */
.index-pagination li a:hover {
    border-color: #BFDBFE;   /* blue-200 */
    background-color: #EFF6FF; /* blue-50 */
    color: #2563EB;          /* blue-600 */
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.15);
}

/* 激活状态 (当前页)：深蓝背景 */
.index-pagination li.active a,
.index-pagination li.active span {
    background-color: #2563EB; /* blue-600 */
    border-color: #2563EB;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    cursor: default;
    pointer-events: none; /* 禁止重复点击 */
    transform: scale(1.05);
}

/* 上一页/下一页：宽度自适应 */
.index-pagination li.prev a,
.index-pagination li.next a {
    width: auto;
    padding: 0 1.25rem; /* 左右加宽 */
}