/* ==========================================================================
   styles-forum-x.css — 论坛视觉层
   加载于 styles-part1.css 之后，用于全局覆盖旧论坛卡片流样式。
   所有图标为内联 SVG（.fx-ic），禁用 emoji / FontAwesome。
   ========================================================================== */

/* ---------- 变量（浅色，跟随主题主色 --primary） ---------- */
:root {
    --fx-bg: #ffffff;
    --fx-text: #0f1419;
    --fx-text-2: #536471;      /* 次级灰（handle/时间/图标） */
    --fx-border: #eff3f4;      /* timeline 分隔线 */
    --fx-hover: #f7f9f9;
    --fx-blue: #1d9bf0;        /* 论坛强调色：所有互动激活统一用蓝，无红绿 */
    --fx-green: #1d9bf0;       /* 统一为蓝 */
    --fx-red: #1d9bf0;         /* 统一为蓝 */
    --fx-quoted-border: #cfd9de;
}

/* ---------- Feed 容器：去掉灰底，纯白 timeline ---------- */
#forum-home-feed { background: var(--fx-bg) !important; }

/* ==========================================================================
   帖子卡片（timeline 信息流 · 左右布局）
   ========================================================================== */
.fx-post {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--fx-bg);
    border-bottom: 1px solid var(--fx-border);
    cursor: pointer;
    transition: background 0.12s;
    box-sizing: border-box;
    max-width: 100%;
}
.fx-post:active { background: var(--fx-hover); }

/* 左侧头像栏 */
.fx-post-avatar { flex-shrink: 0; }
.fx-post-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #e1e8ed;
}

/* 右侧内容区 */
.fx-post-main {
    flex: 1;
    min-width: 0;   /* 允许内部文本收缩换行 */
}

/* 头部：名字 蓝V @handle · 时间  ⋯ */
.fx-post-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
}
.fx-post-name {
    font-weight: 700;
    color: var(--fx-text);
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fx-post-name:active { text-decoration: underline; }
.fx-post-handle,
.fx-post-time,
.fx-post-dot {
    color: var(--fx-text-2);
    font-weight: 400;
    font-size: 15px;
}
.fx-post-handle { overflow: hidden; text-overflow: ellipsis; }
.fx-post-more {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--fx-text-2);
    padding: 2px;
    border-radius: 50%;
}
.fx-post-more:active { background: rgba(29,155,240,0.1); }

/* 蓝V认证 */
.fx-verified {
    width: 18px;
    height: 18px;
    fill: var(--fx-blue);
    flex-shrink: 0;
}

/* 板块小徽标（弱化） */
.fx-section-badge {
    display: inline-block;
    margin: 4px 0 2px;
    padding: 1px 8px;
    border-radius: 10px;
    background: rgba(29,155,240,0.1);
    color: var(--fx-blue);
    font-size: 12px;
}

/* 正文 */
.fx-post-text {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fx-text);
    word-break: break-word;
    white-space: pre-wrap;
}
.fx-post-title {
    font-weight: 700;
    font-size: 15.5px;
}

/* 用户帖子媒体：真实图从 IndexedDB 异步回填；文字伪装图始终按文本卡片展示 */
.fx-forum-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 14px;
}
.fx-forum-media-grid.fx-forum-media-count-1 { grid-template-columns: minmax(0, 1fr); }
.fx-forum-media-card {
    position: relative;
    min-width: 0;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-bg-2, #f5f7f9);
}
.fx-forum-media-count-1 .fx-forum-media-card { min-height: 180px; max-height: 360px; }
.fx-forum-real-image img {
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
    min-height: inherit;
    max-height: inherit;
    object-fit: cover;
    background: #f2f3f5;
}
.fx-forum-real-image.is-loaded img { opacity: 1; }
.fx-forum-media-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--fx-text-2);
    font-size: 13px;
    text-align: center;
    pointer-events: none;
}
.fx-forum-real-image.is-loaded .fx-forum-media-fallback { display: none; }
.fx-forum-real-image.is-error .fx-forum-media-fallback { color: #c24d4d; }
.fx-forum-media-fallback.is-retryable {
    cursor: pointer;
    pointer-events: auto;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fx-forum-media-fallback.is-retryable:focus-visible {
    outline: 2px solid var(--fx-blue, #1d9bf0);
    outline-offset: -4px;
}
.fx-forum-fake-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    color: #f6f7fb;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, #596579, #202733 58%, #11151d);
}
.fx-forum-fake-label {
    margin-bottom: 10px;
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-weight: 700;
}
.fx-forum-fake-description {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.fx-forum-media-grid.is-compact {
    margin-top: 7px;
    border-radius: 9px;
}
.fx-forum-media-card.is-compact { min-height: 82px; max-height: 140px; }
.fx-forum-media-card.is-compact .fx-forum-fake-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 发帖编辑器媒体控件 */
.forum-compose-media-tools {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.forum-compose-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d8dde3;
    border-radius: 9px;
    background: #fff;
    color: #394150;
    font-size: 13px;
    cursor: pointer;
}
.forum-compose-media-btn:disabled { opacity: .55; cursor: wait; }
.forum-compose-media-preview { margin-top: 8px; }
.forum-compose-media-preview:empty { display: none; }
.forum-compose-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.forum-compose-media-entry { position: relative; }
.forum-compose-media-entry .fx-forum-media-card { min-height: 100px; max-height: 180px; }
.forum-compose-media-remove {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(15,18,24,.78);
    color: #fff;
    cursor: pointer;
}
.forum-fake-image-editor {
    display: none;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #dde2e8;
    border-radius: 10px;
    background: #f7f8fa;
}
.forum-fake-image-editor.show { display: block; }
.forum-fake-image-editor textarea {
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #d5dae0;
    border-radius: 8px;
    resize: vertical;
    font: inherit;
}
.forum-fake-image-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* 翻译按钮 */
.fx-translate-wrap { margin: 6px 0 2px; }
.fx-translate-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 13px;
    color: var(--fx-blue);
    background: transparent;
    border-radius: 14px;
    cursor: pointer;
}
.fx-translate-btn:active { background: rgba(29,155,240,0.1); }

/* ==========================================================================
   互动栏（SVG 图标 · hover 变色）
   ========================================================================== */
.fx-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 425px;
    margin-top: 10px;
    color: var(--fx-text-2);
}
.fx-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--fx-text-2);
    cursor: pointer;
    transition: color 0.12s;
}
.fx-action b { font-weight: 400; min-width: 12px; }
.fx-ic {
    width: 18.75px;
    height: 18.75px;
    fill: currentColor;
    display: block;
    transition: fill 0.12s, transform 0.12s;
}
.fx-ic-filled { fill: currentColor; }

/* 各按钮激活/触摸配色 */
.fx-a-reply:active { color: var(--fx-blue); }
.fx-a-rt:active,
.fx-a-rt.active { color: var(--fx-green); }
.fx-a-like:active,
.fx-a-like.active { color: var(--fx-red); }
.fx-a-like.active .fx-ic { fill: var(--fx-red); }
.fx-a-view:active { color: var(--fx-blue); }
.fx-a-bm:active,
.fx-a-bm.active { color: var(--fx-blue); }
.fx-a-bm.active .fx-ic { fill: var(--fx-blue); }
.fx-a-share:active { color: var(--fx-blue); }

/* ==========================================================================
   引用帖子（嵌套卡片）
   ========================================================================== */
.fx-quoted {
    margin-top: 10px;
    border: 1px solid var(--fx-quoted-border);
    border-radius: 16px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.12s;
}
.fx-quoted:active { background: var(--fx-hover); }
.fx-quoted-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
}
.fx-quoted-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
.fx-quoted-name { font-weight: 700; color: var(--fx-text); }
.fx-quoted-handle,
.fx-quoted-time { color: var(--fx-text-2); }
.fx-quoted .fx-verified { width: 15px; height: 15px; }
.fx-quoted-text {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--fx-text);
    word-break: break-word;
}

/* ==========================================================================
   详情页（主帖大字 + 独立统计行 + 楼中楼评论）
   ========================================================================== */
#forum-detail-body { background: var(--fx-bg) !important; }

.fx-detail-post {
    padding: 12px 16px 0;
    border-bottom: 1px solid var(--fx-border);
}
.fx-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fx-detail-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}
.fx-detail-idbox { flex: 1; min-width: 0; cursor: pointer; }
.fx-detail-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 15px;
    color: var(--fx-text);
}
.fx-detail-handle {
    font-size: 15px;
    color: var(--fx-text-2);
}
.fx-follow-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 999px;
    background: var(--fx-text);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.fx-follow-btn.followed {
    background: transparent;
    color: var(--fx-text);
    border: 1px solid var(--fx-quoted-border);
}
.fx-detail-body { padding: 12px 0 4px; }
.fx-detail-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--fx-text);
    margin-bottom: 6px;
}
.fx-detail-text {
    font-size: 17px;
    line-height: 1.55;
    color: var(--fx-text);
    word-break: break-word;
    white-space: pre-wrap;
}
.fx-detail-meta {
    padding: 14px 0;
    font-size: 14px;
    color: var(--fx-text-2);
    border-top: 1px solid var(--fx-border);
    margin-top: 14px;
}
.fx-detail-meta b { color: var(--fx-text); font-weight: 700; }
.fx-detail-counts {
    display: flex;
    gap: 20px;
    padding: 14px 0;
    font-size: 14px;
    color: var(--fx-text-2);
    border-top: 1px solid var(--fx-border);
}
.fx-detail-counts b { color: var(--fx-text); font-weight: 700; }
.fx-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 6px 0;
    border-top: 1px solid var(--fx-border);
    color: var(--fx-text-2);
}
.fx-detail-actions .fx-ic { width: 22px; height: 22px; }
.fx-detail-actions .fx-action { padding: 8px; border-radius: 50%; }

/* 评论区 · 楼中楼 */
.fx-comments { padding-bottom: 20px; }
.fx-comments-empty {
    text-align: center;
    color: var(--fx-text-2);
    font-size: 14px;
    padding: 30px 20px;
}
.fx-comment {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fx-border);
}
.fx-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
}
.fx-comment-main { flex: 1; min-width: 0; }
.fx-comment-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
}
.fx-comment-name { font-weight: 700; color: var(--fx-text); }
.fx-contact-badge { display:inline-block; margin-left:4px; padding:0 6px; font-size:10px; font-weight:600; color:#7c4dff; background:rgba(124,77,255,0.12); border-radius:4px; vertical-align:middle; }
.fx-comment-handle,
.fx-comment-time { color: var(--fx-text-2); }
.fx-comment-replyto {
    font-size: 13px;
    color: var(--fx-text-2);
    margin-top: 2px;
}
.fx-comment-replyto span { color: var(--fx-blue); }
.fx-comment-text {
    font-size: 15px;
    line-height: 1.45;
    color: var(--fx-text);
    margin-top: 2px;
    word-break: break-word;
}
.fx-comment-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 8px;
    color: var(--fx-text-2);
}
.fx-caction {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--fx-text-2);
    cursor: pointer;
}
.fx-caction .fx-ic { width: 16px; height: 16px; }
.fx-caction:active { color: var(--fx-blue); }
.fx-caction-like:active { color: var(--fx-red); }
.fx-caction-del:active { color: var(--fx-red); }

/* ==========================================================================
   深色模式（纯黑背景）
   与项目现有 dark-theme.css 的 body.theme-dark / html.dark 协同
   ========================================================================== */
body.theme-dark,
html.dark body,
body.dark {
    --fx-bg: #000000;
    --fx-text: #e7e9ea;
    --fx-text-2: #71767b;
    --fx-border: #2f3336;
    --fx-hover: #0a0a0a;
    --fx-quoted-border: #333639;
}
body.theme-dark .fx-post-avatar img,
body.dark .fx-post-avatar img { background: #16181c; }

/* 详情页底部固定栏（AI评论 + 回复输入框） */
.fx-detail-bottombar {
    border-top: 1px solid var(--fx-border);
    background: var(--fx-bg);
}
.fx-gen-comment {
    color: var(--fx-blue) !important;
    font-size: 13px;
    white-space: nowrap;
}
.fx-detail-bottombar .forum-detail-act-input input { border-radius: 999px; }
.fx-detail-bottombar .forum-detail-act-input button {
    background: var(--fx-blue);
    border-radius: 999px;
    font-weight: 700;
    color: #fff;
}
body.theme-dark .fx-detail-bottombar {
    background: #000 !important;
    border-top-color: var(--fx-border) !important;
}
body.theme-dark .fx-detail-bottombar .forum-detail-act-input input {
    background: #202327 !important;
    color: var(--fx-text) !important;
}

/* 关注按钮深色 */
body.theme-dark .fx-follow-btn { background: #eff3f4; color: #000; }
body.theme-dark .fx-follow-btn.followed {
    background: transparent;
    color: var(--fx-text);
    border-color: #536471;
}

/* ==========================================================================
   论坛顶部导航：顶栏 + 板块栏 + Feed Tabs
   覆盖旧的绿色主题，改为白底 + 蓝色指示器
   ========================================================================== */
/* 顶栏 */
#forum-tab-home .nav-bar {
    background: var(--fx-bg) !important;
    border-bottom: 1px solid var(--fx-border) !important;
    color: var(--fx-text) !important;
}
#forum-tab-home .nav-bar .nav-title {
    font-weight: 800 !important;
    color: var(--fx-text) !important;
}
#forum-tab-home .nav-bar .nav-icon i { color: var(--fx-text) !important; }

/* 板块选择横向滚动栏：去绿，改深色胶囊 */
#forum-section-bar {
    background: var(--fx-bg) !important;
    border-bottom: none !important;
    padding: 4px 12px !important;
}
#forum-section-bar .forum-section-tab {
    background: transparent !important;
    color: var(--fx-text-2) !important;
    border: 1px solid var(--fx-border) !important;
    font-weight: 600 !important;
}
#forum-section-bar .forum-section-tab.active {
    background: var(--fx-text) !important;   /* 选中黑底白字 */
    color: var(--fx-bg) !important;
    border-color: var(--fx-text) !important;
}

/* Feed Tabs：推荐/关注/发现 —— 均分 + 底部蓝色指示器 */
#forum-tab-home .forum-feed-tabs {
    display: flex !important;
    background: var(--fx-bg) !important;
    border-bottom: 1px solid var(--fx-border) !important;
    padding: 0 !important;
    position: sticky;
    top: 0;
    z-index: 5;
}
#forum-tab-home .forum-feed-tab {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--fx-text-2) !important;
    background: transparent !important;
    border: none !important;
    position: relative;
    transition: background 0.12s;
}
#forum-tab-home .forum-feed-tab:active { background: var(--fx-hover) !important; }
#forum-tab-home .forum-feed-tab.active {
    color: var(--fx-text) !important;
    font-weight: 800 !important;
}
/* 选中项底部蓝色指示条 */
#forum-tab-home .forum-feed-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 56px;
    max-width: 60%;
    height: 4px;
    border-radius: 999px;
    background: var(--fx-blue);
}

/* Feed 容器背景改纯白 */
#forum-tab-home #forum-home-feed { background: var(--fx-bg) !important; }

/* FAB 发帖按钮：绿改蓝 */
#forum-tab-home .forum-fab-post,
#forum-tab-home .forum-fab.forum-fab-post {
    background: var(--fx-blue) !important;
}

/* ---------- 顶部导航深色模式 ---------- */
body.theme-dark #forum-tab-home .nav-bar,
body.theme-dark #forum-section-bar,
body.theme-dark #forum-tab-home .forum-feed-tabs,
body.theme-dark #forum-tab-home #forum-home-feed {
    background: #000 !important;
    border-bottom-color: var(--fx-border) !important;
}
body.theme-dark #forum-tab-home .nav-bar .nav-title,
body.theme-dark #forum-tab-home .nav-bar .nav-icon i,
body.theme-dark #forum-tab-home .forum-feed-tab.active { color: var(--fx-text) !important; }
body.theme-dark #forum-section-bar .forum-section-tab {
    color: var(--fx-text-2) !important;
    border-color: var(--fx-border) !important;
}
body.theme-dark #forum-section-bar .forum-section-tab.active {
    background: var(--fx-text) !important;
    color: #000 !important;
    border-color: var(--fx-text) !important;
}

/* ==========================================================================
   论坛顶栏 (fx-topbar)
   ========================================================================== */
.fx-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    height: 53px !important;
    background: var(--fx-bg) !important;
    border-bottom: 1px solid var(--fx-border) !important;
    box-sizing: border-box;
}
.fx-topbar-avatar {
    width: 32px; height: 32px; flex-shrink: 0; cursor: pointer;
}
.fx-topbar-avatar img {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    background: #e1e8ed; border: none;
}
.fx-topbar-logo {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 17px; color: var(--fx-text);
}
.fx-topbar-logo .fx-ic { fill: var(--fx-text); }
.fx-topbar-action {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%; color: var(--fx-text);
}
.fx-topbar-action:active { background: rgba(29,155,240,0.1); }
.fx-topbar-action .fx-ic { fill: var(--fx-text); }

/* ==========================================================================
   论坛底部导航 4-tab (fx-bottom-nav)
   ========================================================================== */
.fx-bottom-nav {
    display: flex !important;
    background: var(--fx-bg) !important;
    border-top: 1px solid var(--fx-border) !important;
    padding: 0 !important;
    height: 53px !important;
}
.fx-bottom-nav .forum-bottom-item {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.fx-bottom-nav .forum-bottom-item span {
    display: none !important;  /* 隐藏所有文字标签 */
}
.fx-bottom-nav .forum-bottom-item i {
    display: none !important;  /* 隐藏所有FA图标 */
}
.fx-nav-ic {
    width: 26px !important; height: 26px !important;
    fill: var(--fx-text) !important;
    transition: fill 0.12s;
}
.fx-bottom-nav .forum-bottom-item:active { background: var(--fx-hover) !important; }
.fx-bottom-nav .forum-bottom-item.active .fx-nav-ic {
    fill: var(--fx-text) !important;
}
/* 红点 */
.fx-bottom-nav .forum-msg-dot {
    position: absolute !important;
    top: 10px !important; right: calc(50% - 16px) !important;
    width: 8px !important; height: 8px !important;
    background: var(--fx-blue) !important;
    border-radius: 50% !important;
    border: 2px solid var(--fx-bg) !important;
}

/* ==========================================================================
   论坛侧滑抽屉 Drawer
   ========================================================================== */
.fx-drawer-mask {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: 6000;
    display: none;
    transition: background 0.25s;
}
.fx-drawer-mask.show {
    display: block;
    background: rgba(0,0,0,0.4);
}
.fx-drawer {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 80vw;
    background: var(--fx-bg);
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.fx-drawer-mask:not(.show) .fx-drawer {
    transform: translateX(-100%);
}
.fx-drawer.closing {
    transform: translateX(-100%) !important;
}
.fx-drawer-content {
    padding-bottom: 40px;
}

/* 抽屉头部 */
.fx-drawer-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--fx-border);
}
.fx-drawer-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; cursor: pointer; background: #e1e8ed;
}
.fx-drawer-name {
    font-size: 17px; font-weight: 800; color: var(--fx-text);
    margin-top: 10px; line-height: 1.2;
}
.fx-drawer-handle {
    font-size: 15px; color: var(--fx-text-2); margin-top: 2px;
}
.fx-drawer-stats {
    display: flex; gap: 16px; margin-top: 12px;
    font-size: 14px; color: var(--fx-text-2);
}
.fx-drawer-stats b { color: var(--fx-text); font-weight: 700; }

/* 抽屉菜单项 */
.fx-drawer-menu {
    padding: 8px 0;
}
.fx-drawer-item {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px;
    font-size: 15px; font-weight: 500;
    color: var(--fx-text);
    cursor: pointer;
    transition: background 0.12s;
}
.fx-drawer-item:active { background: var(--fx-hover); }
.fx-drawer-item .fx-ic {
    width: 22px; height: 22px; fill: var(--fx-text); flex-shrink: 0;
}
.fx-drawer-item.active {
    color: var(--fx-blue);
}
.fx-drawer-item.active .fx-ic { fill: var(--fx-blue); }
.fx-drawer-divider {
    height: 1px; background: var(--fx-border); margin: 4px 0;
}
.fx-drawer-section-title {
    padding: 8px 24px 4px; font-size: 13px; color: var(--fx-text-2);
    font-weight: 600;
}
.fx-drawer-accounts { padding: 4px 0 12px; }

/* ==========================================================================
   论坛搜索页
   ========================================================================== */
.fx-search-bar-wrap {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    background: var(--fx-hover,#eff3f4);
    border-radius: 999px;
    padding: 0 14px;
    height: 38px;
    margin: 0 12px;
    border: 2px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}
.fx-search-bar-wrap:focus-within {
    border-color: var(--fx-blue);
    background: var(--fx-bg);
}
.fx-search-bar-wrap input {
    flex: 1; border: none; outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--fx-text);
    padding: 0;
}
.fx-search-bar-wrap input::placeholder { color: var(--fx-text-2); }

#forum-search-feed { background: var(--fx-bg) !important; }

/* 热搜条目样式覆盖 */
.forum-trending-section {
    background: var(--fx-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.forum-trending-item {
    border-bottom: 1px solid var(--fx-border) !important;
}

/* ==========================================================================
   论坛通知页
   ========================================================================== */
.fx-notif-tabs {
    display: flex;
    background: var(--fx-bg);
    border-bottom: 1px solid var(--fx-border);
    position: sticky; top: 0; z-index: 5;
}
.fx-notif-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 16px 0;
    font-size: 15px; font-weight: 600;
    color: var(--fx-text-2);
    background: transparent;
    border: none; cursor: pointer;
    position: relative;
    transition: background 0.12s;
}
.fx-notif-tab:active { background: var(--fx-hover); }
.fx-notif-tab.active {
    color: var(--fx-text);
    font-weight: 800;
}
.fx-notif-tab.active::after {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 0; width: 56px; max-width: 60%;
    height: 4px; border-radius: 999px;
    background: var(--fx-blue);
}

/* 通知卡片 */
.fx-notif-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fx-border);
    cursor: pointer;
    transition: background 0.12s;
}
.fx-notif-card:active { background: var(--fx-hover); }
.fx-notif-icon-wrap {
    width: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.fx-notif-icon-wrap .fx-ic {
    width: 20px; height: 20px; fill: var(--fx-blue);
}
.fx-notif-avatar {
    width: 36px; height: 36px;
    border-radius: 50%; object-fit: cover;
    flex-shrink: 0; background: #e1e8ed;
}
.fx-notif-body { flex: 1; min-width: 0; }
.fx-notif-text {
    font-size: 15px; line-height: 1.4;
    color: var(--fx-text);
}
.fx-notif-text b { font-weight: 700; }
.fx-notif-time {
    font-size: 13px; color: var(--fx-text-2); margin-top: 2px;
}

/* ==========================================================================
   论坛私信列表
   ========================================================================== */
#forum-tab-msg .scroll-y { background: var(--fx-bg) !important; }

/* Loading spinner (替代 fa-spinner) */
.fx-loading-spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--fx-border);
    border-top-color: var(--fx-blue);
    border-radius: 50%;
    animation: fx-spin 0.6s linear infinite;
    margin: 0 auto;
}
@keyframes fx-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   深色模式 · 新增组件
   ========================================================================== */
body.theme-dark .fx-topbar,
body.theme-dark .fx-bottom-nav,
body.theme-dark .fx-notif-tabs,
body.theme-dark #forum-search-feed,
body.theme-dark #forum-tab-msg .scroll-y {
    background: #000 !important;
    border-color: var(--fx-border) !important;
}
body.theme-dark .fx-topbar { border-bottom-color: var(--fx-border) !important; }
body.theme-dark .fx-bottom-nav { border-top-color: var(--fx-border) !important; }
body.theme-dark .fx-search-bar-wrap {
    background: #202327 !important;
}
body.theme-dark .fx-search-bar-wrap input {
    color: var(--fx-text) !important;
}
body.theme-dark .fx-drawer {
    background: #000 !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.6);
}
body.theme-dark .fx-drawer-mask.show {
    background: rgba(91,112,131,0.4);
}
body.theme-dark .fx-bottom-nav .forum-msg-dot {
    border-color: #000 !important;
}
body.theme-dark .fx-topbar-avatar img {
    background: #16181c;
}
body.theme-dark .fx-notif-avatar {
    background: #16181c;
}

/* ==========================================================================
   [FIX-全局主题污染论坛 2026-07-11] 主题隔离
   需求：全局主题（可爱/韩式/极简）只应作用于聊天等界面，论坛应始终保持独立视觉风格。
   根因：cute/korean/mono 主题CSS在本文件之后加载，用 body.theme-xxx #layer-forum
        的 !important 规则覆盖了论坛的 nav-bar / 变量 / 模态框配色。
   修复：用更高特异性（html 前缀）+ !important 把论坛容器内的关键视觉重置回论坛风格，
        并重置论坛作用域内的 CSS 变量，避免主题变量渗透。
   注意：dark 主题是论坛主动支持的深色皮肤（上方已有 .theme-dark 规则），此处仅
        排除 cute/korean/mono 三种"非论坛"主题，不影响 dark。
   ========================================================================== */
html body.theme-cute #layer-forum,
html body.theme-korean #layer-forum,
html body.theme-mono #layer-forum {
    --fx-bg: #ffffff;
    --fx-text: #0f1419;
    --fx-text-2: #536471;
    --fx-border: #eff3f4;
    --fx-hover: #f7f9f9;
    --fx-blue: #1d9bf0;
    --fx-green: #1d9bf0;
    --fx-red: #1d9bf0;
    --fx-quoted-border: #cfd9de;
    --primary: #1d9bf0;
    background: #ffffff !important;
}
/* 顶栏 nav-bar 恢复白底（覆盖 mono 的 --mo-bg-elevated 等） */
html body.theme-cute #layer-forum > .nav-bar,
html body.theme-korean #layer-forum > .nav-bar,
html body.theme-mono #layer-forum > .nav-bar,
html body.theme-cute #layer-forum .fx-topbar,
html body.theme-korean #layer-forum .fx-topbar,
html body.theme-mono #layer-forum .fx-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--fx-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
}
html body.theme-cute #layer-forum > .nav-bar .nav-title,
html body.theme-korean #layer-forum > .nav-bar .nav-title,
html body.theme-mono #layer-forum > .nav-bar .nav-title {
    color: var(--fx-text) !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
}
html body.theme-cute #layer-forum > .nav-bar .nav-icon,
html body.theme-korean #layer-forum > .nav-bar .nav-icon,
html body.theme-mono #layer-forum > .nav-bar .nav-icon {
    color: var(--fx-text) !important;
}
/* 论坛帖子/个人页容器背景恢复白 */
html body.theme-cute #layer-forum #forum-home-feed,
html body.theme-korean #layer-forum #forum-home-feed,
html body.theme-mono #layer-forum #forum-home-feed,
html body.theme-cute #layer-forum-user-profile,
html body.theme-korean #layer-forum-user-profile,
html body.theme-mono #layer-forum-user-profile {
    background: #ffffff !important;
}

/* ==========================================================================
   [FIX-个人界面论坛风格 2026-07-11] 论坛个人主页（我的 / NPC）
   需求：个人界面应使用统一论坛视觉。原实现（styles-part2.css）用3列网格堆帖子，
        按钮/统计样式偏普通。本节用 styles-forum-x.css 高优先级覆盖为论坛时间线观感：
        · Banner 更克制；关注按钮=黑底胶囊；已关注=白底描边
        · 帖子区 3 列网格 → 纵向时间线信息流
   ========================================================================== */
#layer-forum-user-profile .forum-profile-banner {
    height: 140px !important;
    background: linear-gradient(135deg, #1d9bf0 0%, #0f6fb8 100%) !important;
}
#layer-forum-user-profile .forum-profile-avatar-wrap img {
    width: 80px !important;
    height: 80px !important;
    border: 4px solid #fff !important;
}
#layer-forum-user-profile .forum-profile-actions button {
    border-radius: 9999px !important;
    font-weight: 700 !important;
    padding: 7px 18px !important;
    border: 1px solid #cfd9de !important;
    background: #fff !important;
    color: #0f1419 !important;
}
#layer-forum-user-profile .forum-profile-actions button.primary {
    background: #0f1419 !important;
    color: #fff !important;
    border-color: #0f1419 !important;
}
#layer-forum-user-profile .forum-profile-actions button.following {
    background: #fff !important;
    color: #0f1419 !important;
    border-color: #cfd9de !important;
}
#layer-forum-user-profile .forum-profile-name {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f1419 !important;
}
#layer-forum-user-profile .forum-profile-id {
    color: #536471 !important;
}
#layer-forum-user-profile .forum-profile-bio {
    color: #0f1419 !important;
    line-height: 1.5 !important;
}
#layer-forum-user-profile .forum-profile-stats {
    gap: 20px !important;
    border-top: none !important;
    padding-top: 8px !important;
}
#layer-forum-user-profile .forum-profile-stats .stat {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 4px !important;
    text-align: left !important;
}
#layer-forum-user-profile .forum-profile-stats .stat-num {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f1419 !important;
}
#layer-forum-user-profile .forum-profile-stats .stat-label {
    font-size: 14px !important;
    color: #536471 !important;
    margin-top: 0 !important;
}
#layer-forum-user-profile .forum-profile-tabs .tab {
    color: #536471 !important;
    font-weight: 600 !important;
}
#layer-forum-user-profile .forum-profile-tabs .tab.active {
    color: #0f1419 !important;
    border-bottom: 3px solid #1d9bf0 !important;
}
/* 帖子区：3 列网格 → 纵向时间线信息流 */
#layer-forum-user-profile .forum-profile-posts {
    padding: 0 !important;
}
#layer-forum-user-profile .forum-profile-post-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}
#layer-forum-user-profile .forum-profile-post-grid .grid-item {
    aspect-ratio: auto !important;
    display: block !important;
    background: #fff !important;
    color: #0f1419 !important;
    text-align: left !important;
    padding: 0 !important;
    border-bottom: 1px solid #eff3f4 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}
#layer-forum-user-profile .forum-profile-post-grid .grid-item > div:first-child {
    padding: 12px 16px !important;
}