/* ============================================================
   KrBlog 全局样式
   ============================================================ */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 14px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 隐藏滚动条(横向滑动板块/轮播) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ---------- 公告横向跑马灯 ---------- */
@keyframes kr-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: kr-marquee 20s linear infinite;
}
.marquee-track:hover {
    animation-play-state: paused;
}

/* ---------- 发现页瀑布流 ---------- */
.waterfall {
    column-count: 2;
    column-gap: 10px;
}

/* ---------- 右下角悬浮发帖按钮 ---------- */
.fab {
    position: fixed;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 40;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, .45);
    font-size: 22px;
}
.fab:active {
    transform: scale(.92);
}

/* ---------- 底部Tab导航(固定) ---------- */
.bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 50;
    width: 100%;
    max-width: 28rem; /* 同 max-w-md */
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid #f1f5f9;
    padding-bottom: env(safe-area-inset-bottom);
}

/* 点赞心形动画 */
@keyframes kr-like-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.like-pop {
    animation: kr-like-pop .35s ease;
}

/* ---------- 图片查看器(Lightbox) ---------- */
.lightbox-mask {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lightbox-mask img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

/* ---------- 消息红点 ---------- */
.dot {
    position: absolute;
    top: 6px;
    right: 22%;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #ef4444;
    border: 2px solid #fff;
}

/* 通用渐变标题栏 */
.grad-bar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* 聊天气泡 */
.bubble-me {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
}
.bubble-other {
    background: #f1f5f9;
    color: #334155;
}

/* 帖子图片九宫格 */
.img-grid-1 img { border-radius: 12px; }
.img-grid-2 img,
.img-grid-3 img { border-radius: 8px; }

/* 输入框聚焦样式 */
.input-base {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
    outline: none;
    transition: border-color .15s;
}
.input-base:focus {
    border-color: #6366f1;
    background: #fff;
}

/* ---------- 页面加载动画(整屏遮罩) ---------- */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #6366f1, #8b5cf6);
    transition: opacity .45s ease;
    opacity: 1;
    /* 兜底：即使JS完全没执行，8秒后也自动淡出隐藏，保证页面永远不会被遮罩卡死 */
    animation: kr-loader-away .5s ease 8s forwards;
}
@keyframes kr-loader-away {
    to { opacity: 0; visibility: hidden; }
}
#page-loader.hide {
    opacity: 0;
    pointer-events: none;
}
/* 转圈加载环 */
@keyframes kr-spin {
    to { transform: rotate(360deg); }
}
.loader-ring {
    width: 46px;
    height: 46px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: kr-spin .8s linear infinite;
}
.loader-name {
    margin-top: 18px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    animation: kr-loader-pulse 1.2s ease-in-out infinite;
}
.loader-sub {
    margin-top: 6px;
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    letter-spacing: 1px;
}
@keyframes kr-loader-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* ---------- AJAX 顶部进度条 ---------- */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 10000;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    opacity: 0;
    transition: width .35s ease, opacity .3s ease;
    pointer-events: none;
}
#progress-bar.on {
    opacity: 1;
}