/* ===== 统一展开/下拉箭头（与储物「批量操作」一致：CSS 三角，避免字体渲染偏位）===== */
.ui-disclosure-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    opacity: 0.6;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.ui-disclosure-caret--after { margin-left: var(--space-6); }
.ui-disclosure-caret--before { margin-right: var(--space-6); }
.ui-disclosure-caret.is-open,
.header-more-btn[aria-expanded="true"] .header-more-arrow,
details[open] > summary .ui-disclosure-caret,
.insc-pending-item--expanded .ui-disclosure-caret,
.csel.is-open .ui-disclosure-caret,
.pf-foot-toggle.is-open .ui-disclosure-caret,
.rp-limit.is-open .ui-disclosure-caret,
.encounter-archetype.is-open .ui-disclosure-caret,
.sa-slot:has(> .sa-tier-menu.open) .sa-wash .ui-disclosure-caret {
    transform: rotate(180deg);
}
/* 折叠侧向：三角朝右（树形分组用） */
.ui-disclosure-caret.is-side {
    transform: rotate(-90deg);
}

/* ===== 稀有跑马灯公告（#6330：事件槽 / 留言槽可并行） ===== */
.marquee-banner-content {
    position: relative;
    padding: var(--space-6) var(--space-16);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-gold) 15%, transparent) 0%, color-mix(in srgb, var(--accent-gold) 30%, transparent) 50%, color-mix(in srgb, var(--accent-gold) 15%, transparent) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
    color: var(--text-gold);
    font-size: var(--font-body-lg);
    font-weight: bold;
    letter-spacing: 1px;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 0 0 5px color-mix(in srgb, var(--accent-gold) 40%, transparent);
}
/* 仙缘留言槽：碧青区分，不与掉落/坐化事件混排 */
.marquee-banner-content--message {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-jade) 12%, transparent) 0%, color-mix(in srgb, var(--accent-jade) 26%, transparent) 50%, color-mix(in srgb, var(--accent-jade) 12%, transparent) 100%);
    border-bottom-color: color-mix(in srgb, var(--accent-jade) 28%, transparent);
    color: var(--text-jade);
    text-shadow: 0 0 5px color-mix(in srgb, var(--accent-jade) 35%, transparent);
    font-size: var(--font-body);
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    /* 滚动由 JS Web Animations 驱动。不要在 CSS 里挂 infinite，
       否则喂药 / ×N 引发整页样式重算时浏览器会把动画重开。 */
    will-change: transform;
    backface-visibility: hidden;
}

/* 后台 / 系统省电：停无限动画，少合成与 GPU 唤醒（烫手主因之一） */
html.page-hidden .header-more-btn.has-unread::after,
body.page-hidden .header-more-btn.has-unread::after {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    .marquee-text,
    .header-more-btn.has-unread::after {
        animation: none !important;
    }
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ===== 游戏页 ===== */
:root {
    --lv-chat-keyboard-inset: 0px;
    --lv-chat-visual-height: 100dvh;
    --lv-chat-visual-top: 0px;
}

.game-page {
    overflow: hidden;
}

.game-wrapper {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* --- Header --- */
/* 顶栏：宣纸底 + 身份 chip + 双 cluster（底部分隔线已去掉，与主区更顺）
   --header-action-h：功能入口 cluster 与「更多」外框统一高度 */
.game-header {
    --header-action-h: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    padding: 0 var(--space-16) 0 var(--space-14);
    height: 52px;
    min-width: 0;
    /* 必须 visible：「更多」下拉挂在 header 内 absolute，hidden 会整块裁掉 */
    overflow: visible;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, transparent), var(--bg-secondary));
    border-bottom: none;
    flex-shrink: 0;
    position: relative;
}

.game-header::after {
    content: none;
    display: none;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    /* 只占内容宽、不抢中间空白；剩余宽度交给 header-right 铺功能入口。
       可收缩(shrink)以免极窄屏时间芯片盖住「更多」。 */
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 72px); /* 至少留给「更多」完整可点 */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.header-logo-block {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    flex-shrink: 0;
}

.header-logo-mark {
    width: 4px;
    height: 20px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    background: linear-gradient(
        180deg,
        var(--accent-gold),
        color-mix(in srgb, var(--accent-gold) 35%, transparent)
    );
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 18%, transparent);
}

.header-logo {
    font-family: var(--font-display);
    font-size: var(--font-page-title);
    font-weight: 500;
    line-height: 1;
    color: var(--text-gold);
    letter-spacing: 4px;
}

.header-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    /* 与 header-left 一致：不 stretch 出空 flex 空白 */
    flex: 0 1 auto;
    overflow: hidden;
}

.header-realm {
    display: inline-flex;
    align-items: center;
    height: 24px;
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--text-jade);
    padding: 0 var(--space-10);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 22%, transparent);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}

.header-gametime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    height: 24px;
    /* #6768：与境界胶囊同一字号，避免并排时一边大一边小 */
    font-size: var(--font-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-gold);
    /* 左右等距，避免胶囊内字贴边 */
    padding: 0 var(--space-10);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 20%, transparent);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    min-width: 0;
    /* 默认不收缩：优先完整灵历，逼右侧先收功能入口 */
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* 仅在入口收尽仍不够时，才允许时间芯片收缩 */
.game-header.is-header-tight .header-gametime,
.game-header.is-header-mini-time .header-gametime {
    flex: 0 1 auto;
}

.header-gametime.is-night {
    color: var(--craft-gold-soft);
    background: color-mix(in srgb, var(--craft-gold-bright) 15%, transparent);
    border-color: color-mix(in srgb, var(--craft-gold-bright) 20%, transparent);
}
.header-gametime__mark {
    flex: 0 0 auto;
    font-size: var(--font-label);
    line-height: 1;
    opacity: 0.92;
}
.header-gametime__txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-wb-status {
    display: inline-flex;
    align-items: center;
    height: 24px;
    font-size: var(--font-caption);
    padding: 0 var(--space-8);
    background: color-mix(in srgb, var(--jimo-crimson) 12%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--jimo-crimson) 28%, transparent);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.2s;
}

.header-wb-status:hover {
    background: color-mix(in srgb, var(--jimo-crimson) 22%, transparent);
}

.header-wb-status.hidden {
    display: none;
}

.header-right {
    display: flex;
    align-items: center;
    /* 吃掉 header 剩余宽度；内部入口由 layoutHeaderNav 按实际宽收进「更多」 */
    justify-content: flex-end;
    gap: var(--space-8);
    flex: 1 1 0%;
    min-width: 72px; /* 窄屏至少保住「更多」槽宽 */
    position: relative;
    /* 高于 header-left：避免时间芯片盖住更多按钮（视觉/点击） */
    z-index: 2;
}

/* 顶栏入口：吃满 header-right 可用宽，整组贴右（靠「更多」一侧）。
   flex:1 让中间空白真正落到按钮区；空间不足时从 DOM 右侧（低频）收进「更多」。 */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-6);
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.header-nav-cluster.is-empty {
    display: none;
}

.header-nav.is-empty {
    display: none;
}

.header-nav-cluster--primary {
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-gold) 18%, transparent);
}

.header-nav-cluster--systems {
    background: color-mix(in srgb, var(--accent-jade) 4%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-jade) 14%, transparent);
}

.header-nav-cluster--extra {
    background: color-mix(in srgb, var(--accent-orange) 4%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-orange) 14%, transparent);
}

.header-btn-group {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    box-sizing: border-box;
    height: var(--header-action-h);
    min-height: var(--header-action-h);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    border-radius: var(--radius-md);
}

.header-btn-group:last-of-type {
    border-right: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
}

/* 与 .header-more-btn 同高：吃满 cluster，避免被通用 .btn-icon min-height 撑破 */
.game-header .header-btn-group .btn-icon,
.header-btn-group .btn-icon {
    border: none;
    padding: 0 var(--space-10);
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    min-width: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-btn-group .btn-icon:hover {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold);
    border: none;
}

.header-btn-group .btn-icon.active {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold);
    border: none;
    box-shadow: none;
}

/* 顶栏入口全部外露时由 layoutHeaderNav 挂上，隐藏「更多」整块（含按钮与下拉） */
.header-more-wrap.is-header-more-empty {
    display: none;
}

.header-more-wrap {
    position: relative;
    flex: 0 0 auto;
    z-index: 1203; /* 高于侧栏/遮罩与左侧 meta，保证手机端「更多」可点可见 */
    isolation: isolate;
}

/* 未读红点锚定；具体视觉样式见 .game-header .header-more-btn.btn-icon */
.header-more-btn {
    position: relative;
}

/* 用 .game-header 提高优先级；高度与功能入口 cluster 共用 --header-action-h */
.game-header .header-more-btn.btn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    box-sizing: border-box;
    height: var(--header-action-h);
    min-height: var(--header-action-h);
    min-width: 0;
    padding: 0 var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-gold);
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card));
    color: var(--text-gold);
    font-weight: 700;
}

.game-header .header-more-btn .header-more-arrow {
    color: color-mix(in srgb, var(--text-gold) 70%, transparent);
}

.game-header .header-more-btn.btn-icon:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--bg-card));
    color: var(--text-gold);
}

.game-header .header-more-btn.btn-icon[aria-expanded="true"] {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 16%, var(--bg-card));
}

.game-header .header-more-btn.btn-icon[aria-expanded="true"] .header-more-arrow {
    color: var(--text-gold);
}

.game-header > .header-left > .btn-toggle-player {
    box-sizing: border-box;
    height: var(--header-action-h);
    min-height: var(--header-action-h);
    padding: 0 var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 92%, transparent);
    background: var(--bg-card);
    font-size: var(--font-label);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.game-header > .header-left > .btn-toggle-player:hover {
    border-color: var(--border-gold);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
}

/* "更多"按钮的未读红点：
   1) 传音/聊天未读 —— 仅当聊天入口被收纳进更多时
   2) 已收纳入口角标（宗门审批/仓库、武道、飞鸿、反馈、神庭等）
   由 refreshHeaderMoreUnread 统一汇聚；聊天外露时红点打在 #chatBtn 上。 */
.header-more-btn.has-unread::after,
#chatBtn.has-unread::after,
.header-more-item[data-header-overflow="chat"].has-unread::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    background: var(--accent-crimson, var(--accent-crimson));
    border-radius: 50%;
    animation: court-badge-pulse 1.5s ease-in-out infinite;
}

#chatBtn,
.header-more-item[data-header-overflow="chat"] {
    position: relative;
}

.header-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1202;
    display: grid;
    grid-template-columns: repeat(2, minmax(72px, 1fr));
    gap: var(--space-6) var(--space-8);
    min-width: 218px;
    padding: var(--space-10);
    /* 实色底板（字面色 + 变量双写，防主题变量被冲成透明） */
    background: var(--bg-card);
    background-color: var(--bg-card);
    background-image: none;
    border: 1px solid rgba(138, 94, 30, 0.35);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    opacity: 1;
}

/* 挂到 body 的 fixed 态：永远盖在页面之上、自带实色底 */
.header-more-menu.is-header-more-fixed,
#headerMoreMenu.is-header-more-fixed {
    position: fixed !important;
    z-index: 10050 !important;
    display: grid !important;
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    background-image: none !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36) !important;
    border: 1px solid rgba(138, 94, 30, 0.4) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* 定位中：全透明，避免 absolute 默认位 / 0,0 闪一帧 */
.header-more-menu.is-header-more-preparing,
#headerMoreMenu.is-header-more-preparing {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
}
.header-more-menu.is-header-more-fixed:not(.hidden):not(.is-header-more-preparing),
#headerMoreMenu.is-header-more-fixed:not(.hidden):not(.is-header-more-preparing) {
    opacity: 1 !important;
    visibility: visible !important;
}

html.theme-dark .header-more-menu,
html.theme-dark .header-more-menu.is-header-more-fixed,
html.theme-dark #headerMoreMenu.is-header-more-fixed {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border-color: rgba(203, 168, 102, 0.35) !important;
}

html.theme-excel .header-more-menu,
html.theme-excel .header-more-menu.is-header-more-fixed,
html.theme-excel #headerMoreMenu.is-header-more-fixed {
    background: var(--text-on-jade) !important;
    background-color: var(--text-on-jade) !important;
    border-color: #c5c5c5 !important;
    border-radius: var(--radius-xs) !important;
}

.header-more-menu.hidden {
    display: none !important;
}

.header-more-item {
    position: relative;
    width: 100%;
    justify-content: center;
    min-height: 36px;
    padding: var(--space-8) var(--space-10) var(--space-8) var(--space-12);
    /* 条目实色底 */
    background: var(--bg-card-hover) !important;
    background-color: var(--bg-card-hover) !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    color: #2a2a26;
}

/* #7558：条目 overflow:hidden，角标必须落在内部，不得负定位 */
.header-more-item .friend-btn-badge,
.header-more-item .court-task-badge,
.header-more-item .court-anchor-badge {
    top: 2px;
    right: 2px;
    z-index: 2;
}

html.theme-dark .header-more-item {
    background: #222a32 !important;
    background-color: #222a32 !important;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

html.theme-excel .header-more-item {
    background: #f3f2f1 !important;
    background-color: #f3f2f1 !important;
    border-color: #d0d0d0;
    color: #000000;
}

.header-more-item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--header-more-accent, transparent);
    opacity: 0.8;
}

/* 分区标题：默认隐藏，组内有溢出项时由 layoutHeaderNav 加 is-header-overflow 显示 */
.header-more-section {
    grid-column: 1 / -1;
    display: none;
    align-items: center;
    gap: var(--space-6);
    min-height: 18px;
    margin: var(--space-4) 0 calc(-1 * var(--space-2));
    padding: var(--space-6) var(--space-2) 0;
    border-top: 1px solid color-mix(in srgb, var(--accent-orange) 16%, transparent);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.2;
    font-weight: 600;
}

.header-more-section.is-header-overflow {
    display: flex;
}

.header-more-section::before {
    content: "";
    width: 6px;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--header-more-accent, var(--text-gold));
}

.header-more-section--trail,
.header-more-item--trail {
    --header-more-accent: var(--accent-jade);
}

.header-more-section--trade,
.header-more-item--trade {
    --header-more-accent: var(--accent-gold);
}

.header-more-section--social,
.header-more-item--social {
    --header-more-accent: var(--ghost-purple-muted);
}

.header-more-section--support,
.header-more-item--support {
    --header-more-accent: var(--accent-orange);
}

.header-more-item--danger {
    --header-more-accent: var(--text-danger);
    color: var(--text-danger);
}

.header-more-mobile-item {
    display: none !important;
}

.header-more-mobile-item.is-header-overflow {
    display: inline-flex !important;
}

/* 有溢出项时加宽「更多」网格，贴近原先窄屏菜单密度 */
.header-more-menu.has-overflow-entries {
    width: min(344px, calc(100vw - 20px));
    max-height: min(560px, calc(100vh - 76px));
    overflow-y: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
}

.header-player-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 0 0 auto;
    min-width: 0;
}
/* 顶栏空间不足时由 layoutHeaderNav 挂上，优先藏道名+道侣，避免挤占左侧境界/时间 */
.header-player-card.is-space-collapsed {
    display: none !important;
}
.header-player-name {
    font-size: var(--font-body);
    color: var(--text-secondary);
    margin-right: 0;
    padding: var(--space-4) var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex: 0 0 auto;
    max-width: 7.5em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.header-companion {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    max-width: 8em;
    min-height: 22px;
    padding: 0 var(--space-6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--beihuang-purple) 40%, transparent);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--beihuang-purple) 14%, transparent);
    color: var(--text-purple);
    font-family: inherit;
    font-size: var(--font-micro);
    line-height: 1;
    cursor: pointer;
}
.header-companion[hidden] {
    display: none !important;
}
.header-companion:hover {
    border-color: var(--border-gold);
    color: var(--text-gold);
}
/* 顶栏空间不足时由 layoutHeaderNav 挂上，优先藏道名，避免挤占左侧境界/时间 */
.header-player-name.is-space-collapsed {
    display: none !important;
}
.header-player-name:hover {
    color: var(--text-gold);
    border-color: var(--border-gold);
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
}
.stat-value-clickable {
    cursor: pointer;
    transition: color 0.2s;
}
.stat-value-clickable:hover {
    color: var(--text-gold);
}

.btn-icon {
    padding: var(--space-6) var(--space-14);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-serif);
    font-size: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    border-color: var(--accent-gold);
    color: var(--text-gold);
}

.btn-icon.active {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border-color: var(--accent-gold);
    color: var(--text-gold);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

/* --- Body --- */
.game-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* --- Player Panel --- */
.player-panel {
    width: 240px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    padding: var(--space-16);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    flex-shrink: 0;
    /* 仍可滚动，不显示滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.player-panel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.player-panel .panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    /* 角色侧栏宽 240px，比通用侧栏(360+)窄一截，沿用全局 16px 标题会显得偏大、
     * 题签下划也跟着变粗。缩到 13px / 字间距 1px，与 stat-label 等属性文字协调。
     * 字色/字重仍继承全局 .panel-title (text-gold / 600)。 */
    font-size: var(--font-body);
    letter-spacing: 1px;
}

/* 角色栏分区标题：沿用册封条短下划，不再用左轨金竖标 */
.player-panel .panel-title-label {
    flex: 0 1 auto;
    white-space: nowrap;
}

.player-panel .panel-title-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

/* 运行态 chip 贴「角色信息」标题右（姓名旁只留性别） */
.player-panel .panel-title-status-edge {
    flex: 0 1 auto;
    max-width: 48%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.player-panel .panel-title-status-edge[hidden] {
    display: none !important;
}

.player-panel .panel-title-status-edge .stat-name-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-panel .panel-title--role .player-panel-close {
    flex: 0 0 auto;
    margin-left: 0;
}

.panel-title-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* 法相标题三按钮固定右栏，避免挤错位 */
.player-panel #equipGridContainer .panel-title {
    flex-wrap: nowrap;
}

/* 法相穿搭标题：只占文字宽度，下划线才会是「题签短下划」而不是通栏。
 * 之前用 flex:1 1 auto 让标题撑满左侧剩余空间，导致 border-bottom 跟着拉到接近整行宽
 * （玩家反馈「法相穿搭横线还是很长」）。三按钮靠 margin-left:auto 推到右侧。 */
.player-panel #equipGridContainer .panel-title-link--text {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-panel #equipGridContainer .panel-title-actions {
    flex: 0 0 auto;
    margin-left: auto;
    gap: var(--space-4);
}

.player-panel #equipGridContainer .panel-title-action--icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
}

/* 标题右侧的内联入口（如灵石标题旁的"流水"），轻量文字按钮风格，不喧宾夺主 */
.panel-title-link {
    margin-left: auto;
    padding: var(--space-2) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 30%, transparent);
    border-radius: var(--radius-sm); /* 4px · 标题旁小钮 */
    background: transparent;
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-caption);
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.panel-title-link:hover {
    border-color: color-mix(in srgb, var(--craft-gold) 65%, transparent);
    background: color-mix(in srgb, var(--craft-gold) 10%, transparent);
}

/* 当整个标题文字本身是可点击入口时（如"法相穿搭"标题可点击跳转），
   用 --text 修饰去掉按钮感（无边框/无 padding/不靠右），让标题视觉与
   "属性""灵石"等纯标题一致，仅保留 pointer 与 hover 下划线提示其可点。 */
.panel-title-link--text {
    margin-left: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    border-radius: 0;
    transition: opacity 0.15s;
}
.panel-title-link--text:hover {
    border: none;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: 0.85;
}

.panel-title-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 22px;
    min-width: 0;
    font: inherit;
    font-size: var(--font-caption);
    line-height: 1;
    letter-spacing: 0;
    color: var(--accent-orange);
    padding: var(--space-4) var(--space-6);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 40%, transparent);
    border-radius: var(--radius-sm); /* 4px · 与标题旁小钮一致 */
    cursor: pointer;
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.panel-title-action svg {
    flex: none;
}

.panel-title-action:hover {
    background: color-mix(in srgb, var(--craft-gold) 18%, transparent);
}

.panel-title-action--repair {
    color: var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}

.panel-title-action--repair:hover {
    background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
}

/* 纯图标按钮：方形紧凑，宽度恒定，不挤压标题文字。 */
.panel-title-action--icon {
    position: relative;
    padding: var(--space-4);
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    flex: none;
}

/* 一键切换按钮右上角的套号角标（1/2），表示当前穿的是第几套。 */
.panel-title-action--icon .swap-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--accent-orange, var(--accent-orange));
    color: #fff;
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 1.5px var(--bg-panel, var(--text-primary));
    pointer-events: none;
}

/* 修复按钮的破损数角标，沿用翠绿主题色。 */
.panel-title-action--icon .swap-badge--repair {
    background: var(--accent-jade, var(--accent-jade));
}

.panel-section {
    margin-bottom: var(--space-16);
    padding-bottom: 0;
    border-bottom: none; /* 侧栏/面板分区不再用底部分割线，靠间距分层 */
}

.panel-section:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* 角色侧栏：明确去掉分区底线与渐隐线，只留区块间距 */
.player-panel .panel-section {
    margin-bottom: var(--space-20);
    padding-bottom: 0;
    border-bottom: none;
    background-image: none;
}
.player-panel .panel-section:last-child {
    margin-bottom: 0;
}

.player-panel-samsara-entry {
    padding: 0;
    margin: var(--space-4) 0 var(--space-12);
    border-bottom: none; /* 与侧栏分区一致：不再用分割线 */
}

/* 角色侧栏全宽入口钮：圆角/高度统一为 --radius-md（8px）· 36px
   覆盖：突破 / 玄筹阁 / 轮回 / 加群讨论（含气运摘要框） */
.player-panel :is(
    .btn-xuanchou-entry,
    .player-panel-samsara-btn,
    .btn-action.btn-samsara.player-panel-samsara-btn,
    .btn-join-group,
    #breakthroughArea .bt-area-btn,
    .btn-action.btn-breakthrough.bt-area-btn,
    #breakthroughArea .bt-area-material
) {
    border-radius: var(--radius-md);
    box-sizing: border-box;
}
.player-panel :is(
    .btn-xuanchou-entry,
    .player-panel-samsara-btn,
    .btn-action.btn-samsara.player-panel-samsara-btn,
    .btn-join-group,
    #breakthroughArea .bt-area-btn,
    .btn-action.btn-breakthrough.bt-area-btn
) {
    min-height: 36px;
}

/* 轮回：扁平描边（对齐玄筹阁入口 / modal-btn--gold） */
.player-panel-samsara-btn,
.btn-action.btn-samsara.player-panel-samsara-btn {
    width: 100%;
    min-height: 36px;
    padding: var(--space-8) var(--space-12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-body);
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.player-panel-samsara-btn:hover,
.btn-action.btn-samsara.player-panel-samsara-btn:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    color: var(--text-gold);
}
.player-panel-samsara-btn:active,
.btn-action.btn-samsara.player-panel-samsara-btn:active {
    opacity: 0.88;
}

.player-panel-samsara-btn svg {
    flex: 0 0 auto;
    opacity: 0.9;
}

.panel-server-credit {
    text-align: center;
    font-size: var(--font-caption);
    color: var(--text-muted);
    padding: var(--space-8) 0 var(--space-4);
    margin-top: var(--space-4);
    border-top: none; /* 去掉轮回下方第二条分割线 */
    opacity: 0.6;
    transition: opacity 0.2s;
}

/* 左栏底部：加群讨论 + 赞助 */
.player-panel-footer {
    margin-top: var(--space-10);
    padding-bottom: var(--space-16);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
}

.btn-join-group {
    width: 100%;
    min-height: 36px;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade);
    font-family: var(--font-serif);
    font-size: var(--font-body);
    font-weight: 600;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    cursor: pointer;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    box-sizing: border-box;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.btn-join-group:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 55%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
}

.btn-join-group:active {
    opacity: 0.88;
}

.btn-join-group__ico {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-caption);
    font-weight: 800;
    letter-spacing: 0;
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
}

/* 加群讨论 · 已收敛到 gc-dialog[data-tone="jade"] 共享壳（game-dialog.css 接管）。
   原 game-layout.css:1097-1142 自定义同构壳（padding/圆角/flex/max-height/__head/__body/__foot）
   已删除——和 gc-dialog 重复造轮子。HTML 现用 gc-dialog class + gc-head + gc-mid。
   gc-head 补了 × 关闭钮（旧版只能点 overlay 关）。业务卡样式 1144+ 全保留不动。 */

.join-group-channel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 70%, var(--bg-card));
    padding: var(--space-12);
}

.join-group-channel + .join-group-channel {
    margin-top: var(--space-10);
}

.join-group-channel__hd {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}

.join-group-channel__mark {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-micro);
    font-weight: 800;
    letter-spacing: 0;
    color: #fff;
    flex: 0 0 auto;
}

.join-group-channel__mark--qq {
    background: color-mix(in srgb, #1296db 88%, #0a2a3a);
}

.join-group-channel__mark--wx {
    background: color-mix(in srgb, #07a85a 88%, #0a2a1a);
}

.join-group-channel__name {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
}

.join-group-channel__tag {
    margin-left: auto;
    font-size: var(--font-micro);
    font-weight: 700;
    color: var(--text-muted);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
}

.join-group-qq-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.join-group-qq-num {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-title);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}

.join-group-copy-btn {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.join-group-copy-btn:hover {
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

.join-group-copy-btn.is-done {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade);
}

.join-group-hint {
    margin: var(--space-8) 0 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.55;
}

.join-group-wx {
    text-align: center;
}

.join-group-wx-qr {
    width: min(168px, 62%);
    height: auto;
    max-height: none;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #fff;
    padding: 0;
    display: block;
    margin: 0 auto;
}

/* 注：原 @media (max-width:640px) 的 join-group 窄屏覆盖已删——
   gc-dialog + gc-head + gc-mid 的默认响应式已够用；
   且旧 __head padding:var(--space-16) var(--space-14) 0 会破坏 gc-head 右侧 var(--space-48) 的 × 关闭钮位置。 */

.panel-server-credit:hover {
    opacity: 1;
}

.panel-server-credit a {
    color: var(--text-jade);
    text-decoration: none;
}

.panel-server-credit a:hover {
    text-decoration: underline;
    color: var(--text-gold);
}

/* B · 册封条：题签短下划 + 无通栏金线；标题字用 .panel-title-label 承载下划 */
.panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-family: var(--font-display, var(--font-serif));
    font-size: var(--font-title);
    font-weight: 600;
    color: var(--text-gold);
    letter-spacing: 2px;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-10);
    border-bottom: none;
    background-image: none;
    position: sticky;
    top: -16px;
    background: var(--bg-panel);
    z-index: 10;
    margin-top: calc(-1 * var(--space-16));
    margin-left: calc(-1 * var(--space-16));
    margin-right: calc(-1 * var(--space-16));
    padding-top: var(--space-14);
    padding-left: var(--space-16);
    padding-right: var(--space-16);
}

.panel-title-label {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 40px);
    padding-bottom: var(--space-6);
    border-bottom: 2px solid color-mix(in srgb, var(--accent-gold) 55%, transparent);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 道友 / 师徒共用顶栏入口：原标题原位变为轻量双签，私聊时顶栏仍常驻。 */
.social-panel-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

body.game-page .social-panel-switch__tab {
    appearance: none;
    min-width: 48px;
    min-height: 34px;
    margin: 0;
    padding: var(--space-2) var(--space-8) var(--space-6);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    font-family: var(--font-display, var(--font-serif));
    font-size: var(--font-action);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 2px;
    cursor: pointer;
}

body.game-page .social-panel-switch__tab:not(.is-active):hover,
body.game-page .social-panel-switch__tab:not(.is-active):focus-visible {
    color: var(--text-primary);
    border-bottom-color: color-mix(in srgb, var(--border-color) 82%, transparent);
    outline: none;
}

body.game-page .social-panel-switch__tab.is-active,
body.game-page .social-panel-switch__tab.is-active:disabled {
    opacity: 1;
    color: var(--text-gold);
    border-bottom-color: color-mix(in srgb, var(--accent-gold) 65%, transparent);
    cursor: default;
}

/* 可点标题（如法相穿搭）同样用题签短下划 */
.panel-title > .panel-title-link--text {
    padding-bottom: var(--space-6);
    border-bottom: 2px solid color-mix(in srgb, var(--accent-gold) 55%, transparent);
    line-height: 1.2;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    font-size: var(--font-body);
    gap: var(--space-8);
}

.stat-row--name {
    align-items: flex-start;
}

.stat-label {
    color: var(--text-muted);
    flex-shrink: 0;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 仙缘：月卡日俸未领时的小红点（挂在数值右上角） */
#statAdPoints {
    position: relative;
    padding-right: var(--space-8);
}
#statAdPoints.has-dot {
    overflow: visible;
}
#statAdPoints.has-dot::after,
#statSpirit.has-dot::after,
.msb-spirit.has-dot::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-crimson, var(--accent-crimson));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-panel, #fff) 80%, transparent);
    animation: court-badge-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}
#statSpirit,
.msb-spirit {
    position: relative;
}
#statSpirit.has-dot,
.msb-spirit.has-dot {
    overflow: visible;
}

.stat-row[class*="toxin-state-"] {
    margin: var(--space-2) calc(-1 * var(--space-4)) 0;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 22%, transparent);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
}

.toxin-state-low .toxin-text {
    color: var(--text-gray);
}

.toxin-state-mid .toxin-text {
    color: var(--text-gold);
}

.toxin-state-high .toxin-text {
    color: var(--accent-orange);
}

.toxin-state-critical .toxin-text {
    color: var(--text-red);
}

.toxin-state-critical {
    border-color: color-mix(in srgb, var(--text-red) 34%, transparent);
    background: color-mix(in srgb, var(--text-red) 10%, transparent);
}

.stat-name-value {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.8;
}

.stat-name-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-name-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    font-size: var(--font-micro);
    line-height: 1.2;
    letter-spacing: 0;
}

.stat-name-chip--gender {
    color: var(--accent-jade);
    background: var(--bg-glass-jade);
    border: 1px solid var(--border-jade);
}

.stat-name-chip--empty {
    color: var(--text-muted);
    background: var(--glass-white-2);
    border: 1px solid var(--border-color);
}

.stat-name-chip--protector {
    color: var(--text-gold);
    background: color-mix(in srgb, var(--craft-gold-bright) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--craft-gold-bright) 40%, transparent);
}

.stat-name-chip--meditating {
    color: var(--text-purple);
    background: color-mix(in srgb, var(--beihuang-purple) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--beihuang-purple) 40%, transparent);
}

.stat-name-chip--companion {
    color: var(--text-purple);
    background: color-mix(in srgb, var(--beihuang-purple) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--beihuang-purple) 40%, transparent);
    cursor: pointer;
}

.realm-text {
    color: var(--text-jade);
}

.hp-text {
    color: var(--danger-color);
}

.atk-text {
    color: var(--craft-gold-bright);
}

.def-text {
    color: color-mix(in srgb, var(--craft-gold) 50%, var(--text-muted));
}

.spirit-text {
    color: var(--accent-purple);
}

.luck-text {
    color: var(--accent-jade);
}

.mp-text {
    color: var(--accent-blue);
}

.stone-lower {
    color: var(--accent-gold);
    font-weight: 600;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
}
.currency-bar__label {
    color: var(--text-muted);
    flex-shrink: 0;
}
.currency-bar__value {
    color: var(--accent-gold);
    font-weight: 600;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

.progress-bar-container {
    position: relative;
    height: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-top: var(--space-8);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.progress-bar {
    height: 100%;
    background: var(--gradient-jade);
    border-radius: var(--radius-md);
    width: 0%;
    transition: width 0.5s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-micro);
    color: var(--text-primary);
    font-weight: 600;
}

/* --- 侧栏突破区（修为条下方） ---
 * action-bar v6 重写时旧 .btn-action / .btn-breakthrough / .bt-area-* 被冲掉，
 * 导致角色面板突破按钮退化为浏览器默认样式、提示无底板。此处单独恢复侧栏样式，
 * 不回写全局 .btn-action，以免干扰底栏主操作。 */
#breakthroughArea {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-8);
    width: 100%;
    box-sizing: border-box;
}
#breakthroughArea[style*="display: none"],
#breakthroughArea[style*="display:none"] {
    display: none !important;
}
/* 突破：扁平描边（对齐 modal-btn--gold，无渐变/无投影） */
.btn-action.btn-breakthrough.bt-area-btn,
#breakthroughArea .bt-area-btn {
    position: relative;
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, opacity 0.12s ease;
    white-space: nowrap;
}
.btn-action.btn-breakthrough.bt-area-btn:hover,
#breakthroughArea .bt-area-btn:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    box-shadow: none;
}
.btn-action.btn-breakthrough.bt-area-btn:active,
#breakthroughArea .bt-area-btn:active {
    opacity: 0.88;
    transform: none;
    box-shadow: none;
}
#breakthroughArea .bt-area-info {
    font-style: normal;
    font-size: var(--font-body);
    margin-left: var(--space-2);
    cursor: pointer;
    opacity: 0.88;
    color: inherit;
}
/* 气运/辅材摘要框：扁平描边（对齐 modal 浅 tint，实线非虚线、无投影） */
#breakthroughArea .bt-area-material {
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-gold);
    text-align: center;
    padding: var(--space-6) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 38%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    box-sizing: border-box;
    box-shadow: none;
    filter: none;
}
/* 天劫/清溢警示：扁平朱砂描边 */
#breakthroughArea .bt-area-material--warn {
    color: var(--text-danger, var(--accent-crimson));
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 40%, transparent);
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 10%, transparent);
    box-shadow: none;
}
#breakthroughArea .bt-area-detail-btn {
    margin-left: var(--space-6);
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-8);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold);
    font: inherit;
    font-size: var(--font-caption);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    vertical-align: middle;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#breakthroughArea .bt-area-detail-btn:hover {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
}
#breakthroughArea.bt-area--preview .bt-area-material {
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--border-color) 100%, transparent);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

/* 业务尺寸：PC 常驻传音默认宽；拖动手柄写入 html --chat-inline-width */
html {
    --chat-inline-width: 336px;
}

/* --- Main Panel --- */
.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* 默认（PC/平板）：日志 | 常驻传音并排（老布局）
   手机 ≤768：见下方 media，中部双签 修炼日志|传音 */
.log-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* 中部双签：仅手机显示，PC/平板隐藏 */
.log-mid-tabs {
    display: none;
    flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    background: color-mix(in srgb, var(--bg-secondary, var(--bg-panel)) 92%, transparent);
}

.log-mid-tab {
    flex: 1;
    margin: 0;
    /* 方案 A · 疏朗分层：略增高，与下方频道胶囊拉开主次 */
    padding: var(--space-10) 0 var(--space-10);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted, var(--text-secondary));
    font-family: inherit;
    font-size: var(--font-label);
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    line-height: 1.3;
    transition: color 0.15s ease, background 0.15s ease;
}

.log-mid-tab:hover {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-card) 55%, transparent);
}

.log-mid-tab.active {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
    background: var(--bg-card, var(--bg-panel));
}

.log-mid-tab.active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 2px;
    background: var(--accent-gold, var(--text-gold));
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

/* PC/平板：中部 body 横排，日志 + 传音并排 */
.log-mid-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.log-mid-pane {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

/*
 * PC/平板忽略手机签的 [hidden]：两侧都必须 display:flex !important。
 * 旧实现只给 --chat 写了 !important，手机在「传音」签时给 --log 打了 hidden，
 * 拖宽窗口后日志栏仍 display:none，只剩传音筒铺满，像「传音始终最上层且 resize 不变」。
 */
.log-mid-pane--log {
    flex: 1 1 auto;
    align-items: stretch;
    display: flex !important;
}

.log-mid-pane--log > .log-panel,
.log-mid-pane--log > .world-boss-panel,
.log-mid-pane--log > .npc-panel {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* PC 默认展示传音侧栏；[hidden] 仅手机签切换使用，≥769 用 !important 压过 */
.log-mid-pane--chat {
    flex: 0 0 var(--chat-inline-width);
    width: var(--chat-inline-width);
    max-width: var(--chat-inline-width);
    flex-direction: column;
    display: flex !important;
}

/* 拖宽命中条（业务尺寸 8px，不是按钮）。仅桌面并排传音显示。 */
.chat-resize-handle {
    display: none;
}

@media (min-width: 769px) {
    body:not(.chat-collapsed) .chat-resize-handle {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 8px;
        z-index: 6;
        cursor: col-resize;
        touch-action: none;
    }
    .chat-resize-handle::after {
        content: "";
        position: absolute;
        left: 0;
        top: 12%;
        bottom: 12%;
        width: 1px;
        background: color-mix(in srgb, var(--border-color) 80%, transparent);
    }
    .chat-resize-handle:hover::after,
    body.chat-resizing .chat-resize-handle::after {
        width: 2px;
        background: var(--accent-gold);
    }
    body.chat-resizing {
        cursor: col-resize;
        user-select: none;
    }
}

/*
 * #7875 / #7927：桌面网格挂在 .main-panel（.game-body 仍是 player | main | side 横排）。
 * 传音占满主栏高度（日志+冥想），冥想条只留在日志列，不让右侧传音压住。
 * #8267：侧栏是 game-body 的 flex 兄弟，通高且不铺到冥想行上；
 * 勿把网格抬到 .game-body 再让 actions 整行钻到侧栏底下，否则拍卖/储物会被底栏盖住。
 * 网格与 contents 常开，只改列数；勿随 chat-collapsed 卸成 flex。
 */
@media (min-width: 1025px) {
    .main-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "status"
            "notice"
            "log"
            "actions";
    }
    body:not(.chat-collapsed) .main-panel {
        grid-template-columns: minmax(0, 1fr) var(--chat-inline-width);
        grid-template-areas:
            "status status"
            "notice notice"
            "log chat"
            "actions chat";
    }
    .mobile-status-bar { grid-area: status; }
    .dungeon-notice-container { grid-area: notice; }
    .log-area,
    .log-mid-body { display: contents; }
    .log-mid-pane--log {
        grid-area: log;
        min-height: 0;
        overflow: hidden;
    }
    .log-mid-pane--chat {
        grid-area: chat;
        width: auto;
        max-width: none;
        min-height: 0;
        align-self: stretch;
    }
    .action-bar { grid-area: actions; }
    .encounter-overlay {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .main-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "status"
            "notice"
            "log"
            "actions";
    }
    body.chat-tablet-pinned:not(.chat-collapsed) .main-panel {
        grid-template-columns: minmax(0, 1fr) var(--chat-inline-width);
        grid-template-areas:
            "status status"
            "notice notice"
            "log chat"
            "actions chat";
    }
    .mobile-status-bar { grid-area: status; }
    .dungeon-notice-container { grid-area: notice; }
    .log-area,
    .log-mid-body { display: contents; }
    .log-mid-pane--log {
        grid-area: log;
        min-height: 0;
        overflow: hidden;
    }
    .log-mid-pane--chat {
        grid-area: chat;
        width: auto;
        max-width: none;
        min-height: 0;
        align-self: stretch;
    }
    .action-bar { grid-area: actions; }
    .encounter-overlay {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }
}

/* 宽屏勿保留手机「传音独占」态：否则操作栏被藏、中部只剩传音 */
@media (min-width: 769px) {
    .log-area.log-area--chat ~ .action-bar {
        display: flex !important;
    }
}

.log-panel {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-20);
    scroll-behavior: smooth;
    min-width: 0;
    position: relative;
}

/* 回到底部按钮：滚离底部时浮现，贴在日志可视区右下角。
   用 position:sticky 而非 absolute——absolute 在滚动容器内会随日志内容一起滚动，
   sticky 则吸附在滚动容器(.log-panel)的可视区底部，固定不随内容移动。
   配合 float:right 让按钮靠右（.log-panel 非 flex 容器）。 */
.log-to-bottom-btn {
    position: sticky;
    bottom: 18px;
    float: right;
    margin-right: var(--space-4);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 5;
    color: var(--accent-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 42%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px var(--shadow-black-2);
}

.log-to-bottom-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.log-to-bottom-btn:hover {
    background: color-mix(in srgb, var(--accent-jade) 28%, transparent);
    color: var(--accent-jade, var(--accent-jade));
}

/* PC端常驻聊天 · B 市井话栈（与 #chatPanel.chat-horn-b 同族）；手机全宽见 media */
.inline-chat {
    width: 100%;
    flex: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    min-width: 0;
    min-height: 0;
    background: var(--bg-card);
    position: relative;
    /* 低于侧栏(~1000+) 与 modal-overlay(10万+)；仅用于盖住中部操作区装饰 */
    z-index: 5;
}

/*
 * 任意「真正可见」弹层期间：传音筒降层并禁点，避免 sticky 底栏/合成层与灵宝鉴定等抢层。
 * 只认 body.lv-modal-open（由 syncModalOpenBodyClass 按 computedStyle 同步），
 * 不再用 :has(.modal-overlay:not(.hidden))——后者会在「无 hidden 但 display:none」
 * 的幽灵遮罩上误伤聊天，导致点头像/道号打不开道友画卷（反馈 #4543）。
 */
body.lv-modal-open .inline-chat,
body.lv-modal-open #chatPanel {
    z-index: 1 !important;
    pointer-events: none;
}
body.lv-modal-open .chat-bubble {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* #7242 平板/短屏横屏：弹窗打开时收起传音筒。
 * iPad 横屏宽度常 >768，键盘一开 100dvh 把聊天压成一条缝且不会消失；
 * 只降层不够，须 display:none 让出高度。
 * #7263：默认仍收起；设置关掉「传音不挤」后打 lv-keep-chat-on-modal，PC 开弹窗不再藏聊天。 */
@media (max-height: 1024px), (orientation: landscape) {
    body.lv-modal-open:not(.lv-keep-chat-on-modal) .log-mid-pane--chat,
    body.lv-modal-open:not(.lv-keep-chat-on-modal) #chatPanel {
        display: none !important;
        pointer-events: none !important;
    }
}

/* 手机聊天/软键盘会建立独立合成层；仅降低子元素 z-index 仍可能在 Android Chrome
   出现“聊天画在弹窗上、遮罩却截获点击”。弹窗期间隐藏整块聊天层，关闭后原位恢复。 */
@media (max-width: 768px) {
    body.lv-modal-open .log-mid-pane--chat,
    body.lv-modal-open #chatPanel {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* 四层壳：标题 / 胶囊频道 / 消息 / 底栏——无左竖轨、无副标题 */
.chat-shell-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 44px;
    padding: var(--space-12) var(--space-12) var(--space-8);
    border-bottom: 0;
    background: transparent;
    flex-shrink: 0;
}

.chat-title-block {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    flex: 1;
}

.chat-title-main,
.inline-chat-title {
    color: var(--text-gold);
    font-family: var(--font-display);
    font-size: var(--font-title);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 4px;
    white-space: nowrap;
}

/* #6905：在线人数，不吃标题字距；手机中部签标题条隐藏时仍靠签上这一枚 */
.chat-online-count {
    font-family: inherit;
    font-size: var(--font-caption);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    color: var(--text-muted);
    white-space: nowrap;
}
.log-mid-tab .chat-online-count {
    margin-left: var(--space-6);
    color: inherit;
    opacity: 0.72;
}

.chat-title-actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-left: auto;
    flex-shrink: 0;
}

/* 胶囊频道轨 · 方案 A：真胶囊 + 玉色选中（与中部双签金色主签区分） */
.chat-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    flex-shrink: 0;
    padding: var(--space-10) var(--space-12) var(--space-6);
    border-bottom: 0;
    background: transparent;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.chat-tabs .chat-tab {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 28px;
    padding: 0 var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    color: var(--text-muted, var(--text-secondary));
    background: var(--bg-card, var(--bg-panel));
    font-family: var(--font-ui, inherit);
    font-size: var(--font-caption);
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    position: relative;
}

.chat-tabs .chat-tab:hover {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
}

.chat-tabs .chat-tab.active {
    color: var(--accent-jade, var(--text-jade));
    background: color-mix(in srgb, var(--accent-jade) 10%, var(--bg-card, #fff));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    font-weight: 600;
}

.chat-tabs .chat-tab.has-unread::after {
    background: var(--accent-crimson);
}

/* FB#5652：传音轨「私信」角标与会话列表 */
.chat-tabs .chat-tab--dm {
    position: relative;
    padding-right: var(--space-14);
}
.chat-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    margin-left: var(--space-4);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--accent-crimson, #c44);
    vertical-align: 1px;
}
.chat-tab-badge.hidden { display: none !important; }
.chat-composer-foot.chat-dm-hidden,
.chat-filter-tabs.chat-dm-hidden {
    display: none !important;
}
.chat-messages--dm {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-8) var(--space-10) var(--space-12);
}
.chat-dm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    font-size: var(--font-label);
    color: var(--text-secondary);
    font-weight: 600;
}
.chat-dm-head-link,
.chat-dm-foot-link {
    border: 0;
    background: transparent;
    color: var(--accent-jade, var(--text-jade));
    font-size: var(--font-caption);
    cursor: pointer;
    padding: var(--space-4) 0;
}
.chat-dm-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.chat-dm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card, var(--bg-panel));
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.chat-dm-row:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 6%, var(--bg-card, #fff));
}
.chat-dm-row.has-unread {
    border-color: color-mix(in srgb, var(--craft-gold, var(--accent-gold)) 35%, var(--border-color));
}
.chat-dm-row__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.chat-dm-row__name {
    font-size: var(--font-body);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-dm-pin {
    display: inline-block;
    margin-right: var(--space-4);
    font-size: var(--font-micro);
    color: var(--text-gold);
}
.chat-dm-online { font-size: var(--font-micro); color: var(--accent-jade); }
.chat-dm-offline { font-size: var(--font-micro); color: var(--text-muted); }
.chat-dm-unread {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--accent-crimson, #c44);
    color: #fff;
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.chat-dm-empty {
    padding: var(--space-32) var(--space-12) var(--space-12);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-label);
}

/* 默认隐藏；手机中部传音签时显示（见 max-width:768 段） */
.chat-tabs-refresh {
    /* 通用 .btn-chat-refresh 在本文件后方定义，必须阻止其 display 覆盖 PC 默认隐藏。 */
    display: none !important;
    flex: 0 0 auto;
    margin-left: auto;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card, var(--bg-panel));
    color: var(--text-secondary);
    align-items: center;
    justify-content: center;
}

.inline-chat-tabs {
    margin: 0;
    justify-content: flex-start;
}

/* 群聊工具栏 · 单行：选群 + 建群 + 更多（次要操作进下拉）
   与频道胶囊贴紧：无顶 padding、无顶 margin；左右与 tab 对齐 12px */
.chat-group-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--space-12) var(--space-6);
    margin: 0;
    border-bottom: 0;
    background: transparent;
    flex-shrink: 0;
}

.chat-group-toolbar.hidden {
    display: none;
}

.chat-group-toolbar__row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}

.chat-group-toolbar__row--main {
    gap: var(--space-6);
}

/* 不依赖 :has()：长群名不得把壳铺满整行盖住「建群/更多」 */
.chat-group-toolbar .chat-group-select-wrap,
.chat-group-toolbar .fx-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
.chat-group-toolbar .chat-group-select-wrap .fx-select__btn,
.chat-group-toolbar .fx-select .fx-select__btn.chat-group-select {
    width: 100%;
    max-width: none;
    min-width: 0;
}
.chat-group-toolbar .chat-group-action,
.chat-group-toolbar .chat-group-more {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.chat-group-toolbar__row--empty {
    justify-content: space-between;
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px dashed color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
}

/* #6499：群公告条 */
.chat-group-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--text-gold) 35%, var(--border-color));
    background: color-mix(in srgb, var(--text-gold) 8%, var(--bg-panel));
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-secondary);
    max-height: 4.5em;
    overflow: auto;
}
.chat-group-notice__tag {
    flex-shrink: 0;
    color: var(--text-gold);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.chat-group-notice__text {
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* #6283：宗门全体禁言条 */
.chat-sect-mute-bar {
    justify-content: space-between;
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
    gap: var(--space-8);
}

.chat-sect-mute-bar.is-muted {
    border-color: color-mix(in srgb, var(--color-warning, var(--text-gold)) 45%, var(--border-color));
    background: color-mix(in srgb, var(--color-warning, var(--text-gold)) 10%, var(--bg-panel));
}

.chat-sect-mute-bar__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.4;
}

.chat-sect-mute-bar.is-muted .chat-sect-mute-bar__label {
    color: var(--text-primary);
    font-weight: 600;
}

.chat-group-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 var(--space-32) 0 var(--space-12);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    border-radius: var(--radius-pill);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-family: var(--font-ui, inherit);
    font-size: var(--font-label);
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.chat-group-select.has-group-unread {
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 55%, var(--border-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold, #c9a227) 22%, transparent);
}

.chat-group-unread-hint {
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-10);
    font-size: var(--font-caption);
    line-height: 1.35;
    color: color-mix(in srgb, var(--accent-gold, #c9a227) 85%, var(--text-primary));
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 10%, transparent);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.chat-group-unread-hint:hover {
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 16%, transparent);
}

.chat-group-select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-jade) 45%, var(--border-color));
}

.chat-group-action {
    flex: 0 0 auto;
    min-width: 0;
    height: 30px;
    padding: 0 var(--space-12);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    border-radius: var(--radius-pill);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-family: var(--font-ui, inherit);
    font-size: var(--font-label);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    -webkit-appearance: none;
    appearance: none;
}

.chat-group-action:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-jade) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-panel));
}

.chat-group-action--primary {
    padding: 0 var(--space-12);
    font-weight: 600;
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
}

.chat-group-action--primary:hover {
    color: var(--text-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 52%, var(--border-color));
}

.chat-group-action--more {
    padding: 0 var(--space-10);
    color: var(--text-secondary);
}

.chat-group-action--more[aria-expanded="true"] {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}

.chat-group-more {
    position: relative;
    flex: 0 0 auto;
}

.chat-group-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    /* 宿主内兜底；#6488 portal 后由 JS 设 fixed + 高 z-index */
    z-index: 860;
    min-width: 112px;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    background: var(--bg-card);
    box-shadow: 0 8px 22px color-mix(in srgb, #1a1814 14%, transparent);
    display: none;
    flex-direction: column;
    gap: var(--space-2);
}

.chat-group-more.is-open .chat-group-more-menu,
.chat-group-more-menu:not([hidden]) {
    display: flex;
}

/* portal 到 body 时：勿被 inline-chat / 面板 overflow 裁切 */
.chat-group-more-menu.is-portaled {
    display: flex !important;
}

.chat-group-more-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--space-8) var(--space-12);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-ui, inherit);
    font-size: var(--font-label);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.chat-group-more-item:hover {
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

.chat-group-more-item--danger {
    color: var(--accent-crimson);
}

.chat-group-more-item--danger:hover {
    background: color-mix(in srgb, var(--accent-crimson) 10%, transparent);
    color: var(--accent-crimson);
}

.chat-group-empty {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   群聊成员 · B 市井牌  /  群聊黑名单 · C 门籍双栏
   ═══════════════════════════════════════════════════════════════ */
.modal-content.gc-dialog.cgm-dialog,
.modal-content.gc-dialog.cgb-dialog {
    max-width: 392px;
    display: flex;
    flex-direction: column;
    max-height: min(78vh, 560px);
}

.cgm-dialog .gc-mid,
.cgb-dialog .gc-mid {
    text-align: left;
    padding: var(--space-12) var(--space-12) var(--space-8);
    max-height: none;
    flex: 1 1 auto;
}

.cgm-dialog .gc-foot,
.cgb-dialog .gc-foot {
    margin-top: 0;
    flex-shrink: 0;
}

.cgm-meta {
    margin-top: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.4;
}

.cgm-meta strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.cgm-row {
    display: flex;
    gap: var(--space-10);
    align-items: flex-start;
    padding: var(--space-10);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    position: relative;
}

.cgm-row + .cgm-row {
    margin-top: var(--space-8);
}

.cgm-av {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    font-size: var(--font-action);
    font-weight: 700;
    color: var(--text-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 12%, var(--bg-panel));
    border: 1px solid color-mix(in srgb, var(--accent-jade) 22%, var(--border-color));
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}

.cgm-av > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.cgm-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cgm-top {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}

.cgm-name {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cgm-name:hover {
    color: var(--text-jade, var(--accent-jade));
}

.cgm-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.cgm-tag--owner {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

.cgm-tag--admin {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 36%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}

.cgm-tag--mem {
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
}

.cgm-sub {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.cgm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

.cgm-dot.is-on {
    background: var(--accent-jade);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-jade) 18%, transparent);
}

.cgm-more {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.cgm-more-btn {
    width: 28px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-title);
    line-height: 1;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.cgm-more-btn:hover,
.cgm-more.is-open .cgm-more-btn {
    color: var(--text-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}

.cgm-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 40;
    min-width: 104px;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    background: var(--bg-card);
    box-shadow: 0 8px 22px color-mix(in srgb, #1a1814 14%, transparent);
    display: none;
    flex-direction: column;
    gap: var(--space-2);
}

.cgm-more.is-open .cgm-more-menu,
.cgm-more-menu:not([hidden]) {
    display: flex;
}

.cgm-more-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--space-8) var(--space-12);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-ui, inherit);
    font-size: var(--font-label);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.cgm-more-item:hover {
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

.cgm-more-item--danger {
    color: var(--accent-crimson);
}

.cgm-more-item--danger:hover {
    background: color-mix(in srgb, var(--accent-crimson) 10%, transparent);
    color: var(--accent-crimson);
}

.cgm-empty,
.cgb-empty {
    text-align: center;
    padding: var(--space-32) var(--space-12);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.6;
}

.cgb-empty strong {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-body);
    margin-bottom: var(--space-4);
}

/* 黑名单 C · 门籍双栏 */
.cgb-sum {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
}

.cgb-chip {
    height: 24px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
    color: var(--text-secondary);
}

.cgb-chip em {
    font-style: normal;
    color: var(--text-jade, var(--accent-jade));
    font-variant-numeric: tabular-nums;
}

.cgb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8) var(--space-10);
    align-items: center;
    padding: var(--space-10) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}

.cgb-row:last-child {
    border-bottom: 0;
}

.cgb-left {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    min-width: 0;
}

.cgb-av {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--accent-crimson);
    background: color-mix(in srgb, var(--accent-crimson) 10%, var(--bg-panel));
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 28%, var(--border-color));
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.cgb-id {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.cgb-name {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cgb-name:hover {
    color: var(--text-jade, var(--accent-jade));
}

.cgb-sub {
    font-size: var(--font-caption);
    color: var(--text-muted);
}

.cgb-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cgb-unban {
    height: 28px;
    min-width: 56px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: var(--bg-panel);
    color: var(--text-secondary);
    -webkit-appearance: none;
    appearance: none;
}

.cgb-unban:hover {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-panel));
}

.inline-chat .chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: clip; /* #8812：称号框横向不出屏 */
    padding: var(--space-4) var(--space-12) var(--space-10);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: var(--bg-panel);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.inline-chat .chat-messages::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 侧栏传音消息区与常驻同肤 */
#chatPanel.chat-horn-b .chat-messages {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: var(--bg-panel);
    padding: var(--space-4) var(--space-12) var(--space-10);
}

.inline-chat .chat-input-bar {
    padding: 0;
    flex-shrink: 0;
    border-top: 0;
}

#chatPanel {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.chat-scroll {
    min-height: 0;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    /* 传音筒（常驻/侧栏）仍可滚动，不显示滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 底栏：筛选分段 + 回复预览 + 输入托盘（B 市井） */
.chat-composer-foot {
    flex-shrink: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    background: var(--bg-card);
    padding: var(--space-10) var(--space-12) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* 传音 tray：表情/@/润色收入 + 菜单；私聊底栏仍可保留独立表情钮 */
.friend-chat-input .chat-emoji-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-gold, var(--accent-gold, var(--accent-gold)));
    font-size: var(--font-heading);
    line-height: 1;
    cursor: pointer;
}
.friend-chat-input .chat-emoji-btn:hover {
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 12%, var(--bg-panel));
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 45%, var(--border-color));
}
/* 聊天表情包面板 */
.chat-emoji-picker {
    position: fixed;
    z-index: 1300;
    box-sizing: border-box;
    padding: var(--space-10);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: 0 12px 32px var(--shadow-black-2, rgba(0, 0, 0, 0.2));
}
.chat-emoji-picker__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin: 0 var(--space-2) var(--space-8);
    color: var(--text-primary);
    font-size: var(--font-body);
    font-weight: 700;
}
.chat-emoji-picker__head small {
    color: var(--text-muted);
    font-size: var(--font-micro);
    font-weight: 400;
}
.chat-emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-4);
    max-height: min(360px, calc(100vh - 96px));
    overflow-y: auto;
    scrollbar-width: thin;
}
.chat-emoji-picker__item {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-heading);
    line-height: 1;
    cursor: pointer;
}
.chat-emoji-picker__item:hover,
.chat-emoji-picker__item:focus-visible {
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 12%, var(--bg-panel));
    outline: none;
}
/* 聊天发送后「+」：表情 / @ / 润色 / 红包 菜单（44 命中区） */
.chat-input-tray .chat-plus-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: var(--font-heading);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-input-tray .chat-plus-btn:hover,
.chat-input-tray .chat-plus-btn.is-open {
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 12%, var(--bg-panel));
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 45%, var(--border-color));
    color: var(--text-gold, var(--accent-gold, var(--accent-gold)));
}
.chat-input-tray .chat-plus-btn.is-busy {
    opacity: 0.55;
    pointer-events: none;
}
.chat-plus-menu {
    position: fixed;
    z-index: 1300;
    min-width: 148px;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: var(--bg-card);
    box-shadow: 0 10px 28px var(--shadow-black-2, rgba(0, 0, 0, 0.18));
}
.chat-plus-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    min-height: 40px;
    padding: var(--space-8) var(--space-12);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-body);
    letter-spacing: 0.5px;
    text-align: left;
    cursor: pointer;
}
.chat-plus-menu__item:hover {
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 10%, transparent);
}
.chat-plus-menu__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0;
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 40%, var(--border-color));
    color: var(--text-gold, var(--accent-gold, var(--accent-gold)));
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 10%, transparent);
}
.chat-plus-menu__icon--emoji {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 12%, transparent);
}
.chat-plus-menu__icon--at {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
}
.chat-plus-menu__icon--polish {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 12%, transparent);
}
.chat-plus-menu__icon--record {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    color: var(--text-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}

/* 聊天流内红包卡 + 发放/领取弹窗（扁平 · 对齐确认弹窗） */

/* 流内领取卡（圆角 12） */
.chat-redpacket-card {
    margin: 0;
    padding: 0;
    border-radius: var(--radius-lg);
    /* #7964：未领红包用朱红身份色（文化标识，已登记设计系统 7.2），不整卡大红底 */
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 42%, var(--border-color));
    background: var(--bg-card);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-crimson) 10%, rgba(42, 42, 38, 0.06));
    overflow: hidden;
}
.chat-redpacket-card.is-done {
    opacity: 0.78;
    filter: grayscale(0.12);
    border-color: var(--border-color);
    box-shadow: none;
}
.chat-redpacket-head {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-14) var(--space-12);
    background: color-mix(in srgb, var(--accent-crimson) 12%, var(--bg-panel, var(--bg-secondary)));
    border-bottom: 1px solid color-mix(in srgb, var(--accent-crimson) 45%, var(--border-color));
}
.chat-redpacket-card.is-done .chat-redpacket-head {
    background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-panel, var(--bg-secondary)));
    border-bottom-color: var(--border-color);
}
.chat-redpacket-stamp {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1.5px solid color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 88%, #3a1010);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-family: var(--font-display, KaiTi, 楷体, STKaiti, serif);
    font-size: var(--font-body);
    color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 88%, #3a1010);
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 12%, var(--bg-card));
    letter-spacing: 0;
}
.chat-redpacket-who { min-width: 0; flex: 1 1 auto; }
.chat-redpacket-title {
    font-size: var(--font-body-lg);
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-redpacket-meta {
    margin-top: var(--space-2);
    font-size: var(--font-caption);
    color: var(--text-muted);
    letter-spacing: 0.3px;
}
.chat-redpacket-body { padding: var(--space-12) var(--space-14) var(--space-14); }
.chat-redpacket-bless {
    margin: 0 0 var(--space-12);
    font-size: var(--font-body);
    color: var(--text-secondary);
    line-height: 1.5;
}
.chat-redpacket-answer,
.rp-luck-answer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-6);
    margin: 0 0 var(--space-12);
    padding: var(--space-8) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-label);
}
.chat-redpacket-answer b,
.rp-luck-answer b {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 700;
}
.chat-redpacket-action {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.chat-redpacket-open {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 42%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 12%, transparent);
    color: var(--accent-crimson);
    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}
.chat-redpacket-open:hover {
    background: color-mix(in srgb, var(--accent-crimson) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-crimson) 55%, transparent);
}
.chat-redpacket-open:active { opacity: 0.88; }
.chat-redpacket-open.is-muted,
.chat-redpacket-card.is-done .chat-redpacket-open {
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
    border-color: var(--border-color);
    color: var(--text-muted);
    letter-spacing: 1px;
    font-weight: 500;
}
.chat-redpacket-open.is-muted:hover {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-color: var(--border-color);
}
/* 发放者「转发余份」：与查看手气并排时用金描边主操作感 */
.chat-redpacket-open.chat-redpacket-repost {
    letter-spacing: 1px;
}

/* 红包弹窗：扁平主钮，覆盖 gc-dialog 实心渐变主钮 */
.rp-dialog .gc-foot__ok.modal-btn--jade,
.rp-dialog .modal-btn--full.modal-btn--jade,
.rp-dialog .gc-foot__ok.modal-btn--gold,
.rp-dialog .modal-btn--full.modal-btn--gold {
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
    box-shadow: none;
}
.rp-dialog .gc-foot__ok.modal-btn--gold,
.rp-dialog .modal-btn--full.modal-btn--gold {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold, var(--accent-gold));
}
.rp-dialog .gc-foot__ok.modal-btn--jade:hover,
.rp-dialog .modal-btn--full.modal-btn--jade:hover {
    background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 55%, transparent);
    filter: none;
}
.rp-dialog .gc-foot__ok.modal-btn--gold:hover,
.rp-dialog .modal-btn--full.modal-btn--gold:hover {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    filter: none;
}
.rp-dialog .modal-btn--outline {
    box-shadow: none;
}
.rp-dialog .modal-btn--outline:hover {
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    filter: none;
}
.rp-gc-mid--form {
    text-align: left !important;
}
.rp-gc-mid--list {
    text-align: left !important;
    max-height: min(62vh, 480px);
}

/* 无 gc-foot 时 mid 默认底 padding 仅 4px，记录列表会贴底；补齐底距并内滚 */
.rp-dialog--mine.gc-dialog {
    display: flex;
    flex-direction: column;
    max-height: min(86vh, 640px);
    width: min(90vw, 392px);
    max-width: 392px;
}
.rp-dialog--mine .gc-head {
    flex: none;
}
.rp-dialog--mine .gc-mid.rp-gc-mid--list,
.rp-dialog--mine .gc-mid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(62vh, 480px);
    /* 覆盖 .gc-mid 的 16px 16px 4px，无脚时底距与左右一致 */
    padding: var(--space-12) var(--space-16) var(--space-16) !important;
    text-align: left !important;
    overflow: hidden; /* 列表区自滚，避免双层滚动条 */
}
.rp-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    text-align: left;
    font-size: var(--font-body);
}
/* 反馈 #10175：灵石总额数量级角标锚到本字段内（position:relative 成为 offsetParent），
   切到材料/卷轴 payload 时随 #rpStoneFields 一起 display:none，不会残留浮在物品选择区上 */
#rpStoneFields {
    position: relative;
}
/* 发红包目标频道提示（群聊显示群名） */
.rp-scope-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-6) var(--space-10);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 9%, transparent);
    line-height: 1.4;
}
.rp-scope-banner__k {
    flex: 0 0 auto;
    font-size: var(--font-caption);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.rp-scope-banner__v {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-body-lg);
    font-weight: 700;
    font-family: var(--font-serif);
    color: var(--text-gold);
    word-break: break-word;
}
.rp-field label {
    display: block;
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-6);
    letter-spacing: 0.5px;
}
.rp-field input[type="number"],
.rp-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input, var(--bg-card));
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-body);
}
.rp-field input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold) 55%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 12%, transparent);
}
.rp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-8);
}
.rp-chip {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-6) var(--space-12);
    font-size: var(--font-label);
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.rp-chip:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
    color: var(--text-primary);
}
.rp-chip.is-on {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}
.rp-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}
.rp-mode button {
    height: 38px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-body);
    cursor: pointer;
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.rp-mode button:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 30%, var(--border-color));
    color: var(--text-primary);
}
.rp-mode button.is-on {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}
.rp-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.55;
    text-align: center;
}

/* ═══ 领取限制子组件（境界上限 / 性别限定 / 口令红包）═══
   三处 UI 共用：
   - .rp-limit*  发红包弹窗的限制折叠面板
   - .rp-card-limits / .rp-lim-chip*  红包卡限制徽标
   - .rp-claim-pw*  领取弹窗的口令输入
   配色：境界 accent-blue · 性别 accent-rose(女)/accent-cyan(男) · 口令 accent-gold（呼应红包本体金） */

/* —— 发红包 · 限制折叠面板 —— */
.rp-limit {
    margin-top: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, var(--border-color));
    border-radius: var(--radius-md);
    overflow: hidden;
    background: color-mix(in srgb, var(--accent-gold) 3%, var(--bg-panel, transparent));
}
.rp-limit__head {
    display: flex; align-items: center; gap: var(--space-8); width: 100%;
    padding: var(--space-12) var(--space-14); background: transparent; border: none;
    color: var(--text-secondary); font-family: inherit; font-size: var(--font-label);
    cursor: pointer; letter-spacing: 0.5px;
}
.rp-limit__head:hover { background: color-mix(in srgb, var(--accent-gold) 6%, transparent); }
.rp-limit__seal {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px;
    border: 1.2px solid color-mix(in srgb, var(--accent-crimson) 75%, #3a1010);
    border-radius: var(--radius-xs);
    font-family: var(--font-serif); font-size: var(--font-micro); font-weight: 600;
    color: var(--accent-crimson);
    background: color-mix(in srgb, var(--accent-crimson) 12%, transparent);
    flex: 0 0 auto;
}
.rp-limit__head-text { flex: 1 1 auto; text-align: left; }
.rp-limit__head-text b { color: var(--text-primary); font-weight: 600; }
.rp-limit__badge {
    font-size: var(--font-caption); padding: var(--space-2) var(--space-8); border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent);
    color: var(--text-gold); letter-spacing: 0.3px;
}
.rp-limit__caret { color: var(--text-muted); }
.rp-limit.is-open .rp-limit__caret { transform: rotate(180deg); }
.rp-limit__body {
    display: none; padding: var(--space-4) var(--space-14) var(--space-14);
    border-top: 1px dashed color-mix(in srgb, var(--accent-gold) 22%, var(--border-color));
}
.rp-limit.is-open .rp-limit__body { display: block; }
.rp-limit__intro {
    margin: var(--space-10) 0; padding: var(--space-8) var(--space-10); border-radius: var(--radius-md);
    font-size: var(--font-caption); line-height: 1.55; color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 5%, transparent);
    text-align: left; letter-spacing: 0.2px;
}
.rp-lim-row { margin-bottom: var(--space-12); }
.rp-lim-row:last-child { margin-bottom: 0; }
.rp-lim-row > label {
    display: flex; align-items: center; gap: var(--space-6);
    font-size: var(--font-caption); color: var(--text-muted); margin-bottom: var(--space-6); letter-spacing: 0.4px;
}
.rp-lim-tag {
    font-size: var(--font-micro); padding: var(--space-2) var(--space-6); border-radius: var(--radius-xs); letter-spacing: 0.5px; font-weight: 600;
}
.rp-lim-tag--realm { background: color-mix(in srgb, var(--accent-blue) 16%, transparent); color: var(--accent-blue); }
.rp-lim-tag--gender { background: color-mix(in srgb, var(--accent-rose, var(--accent-crimson)) 16%, transparent); color: var(--accent-rose, var(--accent-crimson)); }
.rp-lim-tag--password { background: color-mix(in srgb, var(--accent-gold) 16%, transparent); color: var(--text-gold); }
.rp-lim-select {
    width: 100%; padding: var(--space-8) var(--space-12); border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, var(--border-color));
    background: var(--bg-input); color: var(--text-primary);
    font-family: inherit; font-size: var(--font-label); cursor: pointer; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent-blue) 50%), linear-gradient(135deg, var(--accent-blue) 50%, transparent 50%);
    background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
    background-size: 5px 5px; background-repeat: no-repeat;
}
/* 红包道具选择槽：点击打开 ItemPicker（搜索+数量） */
.rp-item-pick {
    display: flex; align-items: center; gap: var(--space-8); width: 100%;
    padding: var(--space-10) var(--space-12); border-radius: var(--radius-md); cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-input));
    color: var(--text-secondary); font-family: inherit; font-size: var(--font-label);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.rp-item-pick:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-input));
}
.rp-item-pick.is-filled { color: var(--text-primary); }
.rp-item-pick.is-empty { cursor: default; opacity: 0.7; }
.rp-item-pick__icon { color: var(--text-gold); font-size: var(--font-body-lg); }
.rp-item-pick__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-item-pick__arrow { color: var(--text-muted); font-size: var(--font-caption); }
.rp-gender-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.rp-gender-grid button {
    height: 34px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); font-family: inherit; font-size: var(--font-label); cursor: pointer;
    transition: all 0.12s ease; letter-spacing: 0.5px;
}
.rp-gender-grid button.is-on[data-g="male"] {
    border-color: color-mix(in srgb, var(--accent-cyan, var(--accent-blue)) 45%, transparent);
    background: color-mix(in srgb, var(--accent-cyan, var(--accent-blue)) 12%, transparent);
    color: var(--accent-cyan, var(--accent-blue)); font-weight: 600;
}
.rp-gender-grid button.is-on[data-g="female"] {
    border-color: color-mix(in srgb, var(--accent-rose, var(--accent-crimson)) 45%, transparent);
    background: color-mix(in srgb, var(--accent-rose, var(--accent-crimson)) 12%, transparent);
    color: var(--accent-rose, var(--accent-crimson)); font-weight: 600;
}
.rp-pw-toggle {
    display: flex; align-items: center; gap: var(--space-8);
    padding: var(--space-8) var(--space-10); border-radius: var(--radius-md);
    border: 1px solid var(--border-color); background: var(--bg-input);
    cursor: pointer; font-size: var(--font-label); color: var(--text-secondary);
}
.rp-pw-toggle.is-on {
    border-color: color-mix(in srgb, var(--accent-gold) 38%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: var(--text-gold);
}
.rp-pw-switch {
    width: 30px; height: 16px; border-radius: var(--radius-pill);
    background: var(--border-color); position: relative; flex: 0 0 auto;
    transition: background 0.18s ease;
}
.rp-pw-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--text-muted); transition: transform 0.18s ease, background 0.18s ease;
}
.rp-pw-toggle.is-on .rp-pw-switch { background: color-mix(in srgb, var(--accent-gold) 50%, transparent); }
.rp-pw-toggle.is-on .rp-pw-switch::after { transform: translateX(14px); background: var(--text-gold); }
.rp-pw-body { display: none; margin-top: var(--space-8); }
.rp-pw-toggle.is-on + .rp-pw-body { display: block; }
.rp-pw-counter { text-align: right; font-size: var(--font-caption); color: var(--text-muted); margin-top: var(--space-4); }

/* —— 红包卡 · 限制徽标行 —— */
.rp-card-limits { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0 0 var(--space-10); }
.rp-lim-chip {
    display: inline-flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-8) var(--space-4) var(--space-8); border-radius: var(--radius-xs);
    font-size: var(--font-caption); letter-spacing: 0.5px; line-height: 1.4;
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, transparent);
    color: var(--text-secondary);
}
.rp-lim-chip__dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.rp-lim-chip--realm { background: color-mix(in srgb, var(--accent-blue) 10%, transparent); border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent); color: var(--accent-blue); }
.rp-lim-chip--realm .rp-lim-chip__dot { background: var(--accent-blue); }
.rp-lim-chip--gender-m { background: color-mix(in srgb, var(--accent-cyan, var(--accent-blue)) 10%, transparent); border-color: color-mix(in srgb, var(--accent-cyan, var(--accent-blue)) 30%, transparent); color: var(--accent-cyan, var(--accent-blue)); }
.rp-lim-chip--gender-m .rp-lim-chip__dot { background: var(--accent-cyan, var(--accent-blue)); }
.rp-lim-chip--gender-f { background: color-mix(in srgb, var(--accent-rose, var(--accent-crimson)) 10%, transparent); border-color: color-mix(in srgb, var(--accent-rose, var(--accent-crimson)) 30%, transparent); color: var(--accent-rose, var(--accent-crimson)); }
.rp-lim-chip--gender-f .rp-lim-chip__dot { background: var(--accent-rose, var(--accent-crimson)); }
.rp-lim-chip--password { background: color-mix(in srgb, var(--accent-gold) 12%, transparent); border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent); color: var(--text-gold); font-weight: 600; }
.rp-lim-chip--password .rp-lim-chip__dot { background: var(--accent-gold); }
/* 仙凡跨界：红包卡外表醒目提示领扣 50% */
.rp-lim-chip--cross {
    background: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 12%, transparent);
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 40%, transparent);
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 700;
}
.rp-lim-chip--cross .rp-lim-chip__dot { background: var(--text-danger, var(--accent-crimson)); }

/* —— 领取弹窗 · 口令输入 —— */
.rp-claim-pw { margin: 0 0 var(--space-4); }
.rp-claim-pw__hint {
    font-size: var(--font-label); color: var(--text-secondary); text-align: center;
    margin-bottom: var(--space-12); line-height: 1.65; letter-spacing: 0.3px;
}
.rp-claim-pw__hint b {
    color: var(--text-gold); font-family: var(--font-serif);
    font-weight: 600; letter-spacing: 1px; margin-left: var(--space-2);
}
.rp-claim-pw__input-wrap { position: relative; }
.rp-claim-pw__input {
    width: 100%; padding: var(--space-12) var(--space-14); box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 1.5px solid color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-input));
    color: var(--text-primary);
    /* letter-spacing 勿加大：字间距视觉像空格，玩家会真打空格导致口令校验失败 */
    font-family: var(--font-serif); font-size: var(--font-title); letter-spacing: 0; text-align: center;
}
.rp-pw-body input[type="text"] {
    letter-spacing: 0;
}
.rp-claim-pw__input:focus {
    outline: none; border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 14%, transparent);
}
.rp-claim-pw__input.err {
    border-color: var(--accent-crimson);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-crimson) 14%, transparent);
}
.rp-claim-pw__err {
    display: none; margin-top: var(--space-10); padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-md); text-align: center;
    font-size: var(--font-caption); line-height: 1.5; font-weight: 600;
    color: var(--accent-crimson);
    background: rgba(183, 58, 49, 0.10);
    border: 1px solid rgba(183, 58, 49, 0.30);
}
.rp-claim-pw__err.is-show { display: block; }
.rp-claim-bless {
    text-align: center; padding: var(--space-4) 0 var(--space-14);
    border-bottom: 1px dashed var(--border-color); margin-bottom: var(--space-14);
}
.rp-claim-bless__from { font-size: var(--font-caption); color: var(--text-muted); margin-bottom: var(--space-6); letter-spacing: 0.5px; }
.rp-claim-bless__text {
    font-family: var(--font-serif); font-size: var(--font-body-lg); color: var(--text-secondary);
    letter-spacing: 1.5px; line-height: 1.6;
}
.rp-deal-banner {
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-panel, var(--bg-secondary)));
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.55;
}
.rp-deal-banner em {
    font-style: normal;
    color: var(--text-gold, var(--accent-gold));
    font-weight: 700;
}
.rp-slider-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-10);
    margin-bottom: var(--space-8);
}
.rp-slider-title {
    font-size: var(--font-label);
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.rp-slider-value {
    font-family: var(--font-display, KaiTi, 楷体, STKaiti, serif);
    font-size: var(--font-page-title);
    font-weight: 600;
    color: var(--text-gold, var(--accent-gold));
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.rp-slider-value small {
    font-size: var(--font-label);
    margin-left: var(--space-2);
    opacity: 0.85;
}
.rp-slider-track-wrap {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}
.rp-slider-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    overflow: hidden;
    pointer-events: none;
}
.rp-slider-fill {
    height: 100%;
    background: var(--accent-gold);
    border-radius: var(--radius-pill);
}
.rp-slider input[type="range"] {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 28px;
    cursor: pointer;
}
.rp-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}
.rp-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: calc(-1 * var(--space-6));
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    background: var(--bg-card);
    box-shadow: none;
}
.rp-slider input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}
.rp-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    background: var(--bg-card);
    box-shadow: none;
}
.rp-slider-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.rp-slider-ticks span {
    cursor: pointer;
    user-select: none;
}
.rp-slider-ticks span.is-active {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}
.rp-preview-detail {
    margin: 0 !important;
}
.rp-dialog--result .gc-mid {
    text-align: center;
}
.rp-open-from {
    font-size: var(--font-body);
    color: var(--text-secondary);
    margin-bottom: var(--space-12);
}
.rp-open-from b {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}
.rp-open-badge {
    display: inline-block;
    margin: 0 0 var(--space-10);
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    letter-spacing: 1px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold, var(--accent-gold));
}
.rp-open-badge.is-best {
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 40%, var(--border-color));
    color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 88%, #3a1010);
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 12%, var(--bg-card));
}
.rp-open-amount {
    font-family: var(--font-serif, "Songti SC", STSong, serif);
    font-size: var(--font-hero-lg);
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-gold, var(--accent-gold));
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    word-break: break-word;
}
/* 材料红包：主标题为道具名，件数放 small */
.rp-open-amount.is-item {
    font-size: var(--font-hero);
    letter-spacing: 0.5px;
    max-width: 14em;
    margin-left: auto;
    margin-right: auto;
}
.rp-open-amount small {
    display: block;
    margin-top: var(--space-6);
    font-size: var(--font-label);
    letter-spacing: 2px;
    color: var(--text-muted);
    font-weight: 500;
}
.rp-open-amount.is-item small {
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.rp-open-bless {
    margin: var(--space-12) auto 0;
    max-width: 16em;
    font-size: var(--font-body);
    color: var(--text-secondary);
    line-height: 1.55;
}
.rp-open-meta {
    margin-top: var(--space-8);
    font-size: var(--font-label);
    color: var(--text-muted);
}
.rp-opening-orb {
    width: 64px;
    height: 64px;
    margin: var(--space-8) auto var(--space-14);
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background:
        radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--accent-gold) 35%, transparent), transparent 55%),
        color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
    animation: rp-orb-pulse 1.1s ease-in-out infinite;
}
@keyframes rp-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
}
.rp-opening-tip {
    font-size: var(--font-body);
    color: var(--text-muted);
    letter-spacing: 2px;
}
.rp-open-fail-icon {
    width: 44px;
    height: 44px;
    margin: var(--space-4) auto var(--space-12);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: grid;
    place-items: center;
    font-size: var(--font-title);
    color: var(--text-muted);
}
.rp-open-fail-desc {
    margin: 0 auto;
    max-width: 18em;
    font-size: var(--font-body);
    color: var(--text-muted);
    line-height: 1.6;
}
.rp-luck-mine {
    margin: 0 0 var(--space-12);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-panel, var(--bg-secondary)));
    font-size: var(--font-body);
    color: var(--text-secondary);
    text-align: center;
}
.rp-luck-mine b {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rp-luck-mine--muted {
    border-color: var(--border-color);
    background: transparent;
    color: var(--text-muted);
}
/* #5959：手气 / 手速切换 */
.rp-luck-tabs {
    display: flex;
    gap: var(--space-8);
    margin: var(--space-10) 0 var(--space-8);
}
.rp-luck-tab {
    flex: 1 1 0;
    min-height: 40px;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-panel, var(--bg-card));
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.rp-luck-tab.is-active {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card));
    color: var(--text-gold, var(--accent-gold));
}
.rp-luck-hint {
    margin-top: var(--space-8);
    font-size: var(--font-micro);
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}
.rp-luck-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.rp-luck-list li {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    font-size: var(--font-body);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: var(--bg-card);
}
.rp-luck-list li:first-child { border-top: 0; }
.rp-luck-list li.is-best {
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
}
.rp-luck-list li.is-fastest {
    background: color-mix(in srgb, var(--accent-jade) 7%, var(--bg-card));
}
.rp-luck-list li.is-blitz {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 55%, transparent);
}
.rp-luck-list li.is-me {
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-card));
}
.rp-luck-rank {
    width: 1.5em;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.rp-luck-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.rp-luck-name .ranking-name-link {
    font-family: inherit;
    letter-spacing: inherit;
}
.rp-luck-amt {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}
.rp-luck-delay {
    flex: 0 0 auto;
    min-width: 3.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-primary);
}
.rp-luck-amt--sub {
    margin-left: var(--space-6);
    font-size: var(--font-caption, var(--font-label));
    font-weight: 600;
    color: var(--text-muted);
}
.rp-luck-tag {
    display: inline-block;
    margin-left: var(--space-4);
    padding: 0 var(--space-6);
    border-radius: var(--radius-xs);
    font-size: var(--font-micro);
    letter-spacing: 0.5px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    color: var(--text-gold, var(--accent-gold));
    vertical-align: middle;
}
.rp-luck-tag--me {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    color: var(--text-jade, var(--accent-jade));
}
.rp-luck-tag--cross {
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 45%, var(--border-color));
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 700;
}
.rp-luck-tag--fast {
    border-color: color-mix(in srgb, var(--accent-jade) 45%, var(--border-color));
    color: var(--text-jade, var(--accent-jade));
}
.rp-luck-tag--blitz {
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 45%, var(--border-color));
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 700;
}
.rp-luck-amt-note {
    display: inline-block;
    margin-left: var(--space-4);
    font-size: var(--font-micro);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.rp-luck-mine-cross {
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 600;
    font-size: var(--font-label);
}
.rp-luck-empty {
    justify-content: center !important;
    color: var(--text-muted);
    padding: var(--space-16) var(--space-12) !important;
}

/* 我的红包记录 */
.rp-mine-entry {
    display: block;
    width: 100%;
    margin: var(--space-2) 0 0;
    padding: var(--space-6) 0;
    border: 0;
    background: transparent;
    color: var(--text-gold, var(--accent-gold));
    font: inherit;
    font-size: var(--font-label);
    letter-spacing: 0.5px;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.92;
}
.rp-mine-entry:hover { opacity: 1; }
.rp-mine {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    flex: 1 1 auto;
    min-height: 0;
}
.rp-mine-tabs {
    flex: none;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.rp-mine-tab {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0 var(--space-12);
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    letter-spacing: normal;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.rp-mine-tab:hover {
    color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
}
.rp-mine-tab.is-on {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
    box-shadow: none;
}
.rp-mine-summary {
    flex: none;
    font-size: var(--font-label);
    color: var(--text-muted);
    letter-spacing: 0.3px;
    line-height: 1.45;
}
.rp-mine-summary b {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rp-mine-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 1 1 auto;
    min-height: 100px;
    max-height: none; /* 由 .gc-mid 限高，列表填满剩余高度内滚 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* 列表滚到底时与「加载更多」/弹窗底留一点呼吸 */
    padding-bottom: var(--space-2);
    margin-bottom: 0;
}
.rp-mine-empty {
    padding: var(--space-32) var(--space-12);
    text-align: center;
    font-size: var(--font-body);
    color: var(--text-muted);
}
.rp-mine-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 92%, transparent);
    background: var(--bg-card);
}
.rp-mine-row-main {
    flex: 1 1 auto;
    min-width: 0;
}
.rp-mine-row-title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rp-mine-row-meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    letter-spacing: 0.2px;
}
.rp-mine-row-amt {
    margin-top: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.rp-mine-row-amt b {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 700;
}
.rp-mine-status {
    color: var(--text-muted);
    font-weight: 500;
}
.rp-mine-row-acts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: stretch;
}
.rp-mine-act {
    min-width: 72px;
    height: 28px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-muted) 6%, transparent);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-caption);
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}
.rp-mine-act:hover {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
}
.rp-mine-act--gold {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}
.rp-mine-act--gold:hover {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
}
.rp-mine-more {
    display: block;
    flex: none;
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-label);
    letter-spacing: 0.5px;
    cursor: pointer;
}
.rp-mine-more:hover:not(:disabled) {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-muted) 5%, transparent);
}
.rp-mine-more:disabled {
    opacity: 0.65;
    cursor: default;
}
.rp-mine-more.hidden { display: none !important; }
.chat-mention-picker {
    position: fixed;
    z-index: 1200;
    min-width: 160px;
    max-width: min(280px, calc(100vw - 24px));
    max-height: 220px;
    overflow-y: auto;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 8px 24px var(--shadow-black-2, rgba(0, 0, 0, 0.18));
}
.chat-mention-picker.hidden { display: none; }
.chat-mention-option {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    min-height: 32px;
    padding: var(--space-6) var(--space-8);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-label);
    text-align: left;
    cursor: pointer;
}
.chat-mention-option:hover,
.chat-mention-option.is-active {
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade, var(--accent-jade));
}
.chat-mention-option__name {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-mention-option__hint {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-micro);
    flex: none;
}
.chat-mention-empty {
    padding: var(--space-10) var(--space-8);
    color: var(--text-muted);
    font-size: var(--font-label);
    text-align: center;
}
.chat-msg-text .chat-mention,
.chat-mention {
    color: var(--accent-jade, var(--accent-jade));
    font-weight: 600;
}
.chat-msg-text .chat-mention--me {
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
    border-radius: var(--radius-xs);
    padding: 0 var(--space-2);
}

.chat-msg-text .chat-forum-link,
.pm-msg-content .chat-forum-link,
.chat-forum-link {
    color: var(--accent-jade);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.chat-forum-link:hover {
    color: var(--text-gold);
}

.chat-history-load {
    display: flex;
    justify-content: center;
    padding: 0 0 var(--space-10);
}

.chat-history-load-btn {
    min-height: 28px;
    padding: var(--space-6) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 22%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
    color: var(--text-jade);
    font-size: var(--font-label);
    line-height: 1.2;
    cursor: pointer;
}

.chat-history-load-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-jade) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 34%, transparent);
}

.chat-history-load-btn:disabled {
    cursor: default;
    opacity: 0.72;
}

#chatPanel .chat-scroll {
    flex: 1;
    margin: 0;
    padding: var(--space-10);
}

/* 气泡/入口引导：高亮常驻传音筒（PC 并排时左侧金边轻闪） */
.inline-chat.chat-highlight {
    animation: chatHighlight 0.5s ease 3;
}

@keyframes chatHighlight {
    0%, 100% { border-left-color: var(--border-color); }
    50% { border-left: 2px solid var(--accent-gold); box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent-gold) 10%, transparent); }
}

/* 手机全宽传音：左侧金边闪 3 下像整屏左缘竖条，禁用该动画 */
@media (max-width: 768px) {
    .inline-chat.chat-highlight {
        animation: none;
    }
}

/* 常驻传音筒可见时：顶栏不显示「聊天」（收起后 body.chat-collapsed 再恢复） */
#chatBtn {
    display: none;
}

/* PC端用户主动收起聊天后：聊天框隐藏，顶部按钮恢复显示 */
body.chat-collapsed .log-mid-pane--chat,
body.chat-collapsed .inline-chat {
    display: none !important;
}
body.chat-collapsed #chatBtn {
    display: inline-block;
}

/* 平板已 📌 固定常驻传音筒时：同样不要顶栏「聊天」按钮 */
@media (min-width: 769px) and (max-width: 1024px) {
    body.chat-tablet-pinned #chatBtn {
        display: none !important;
    }
}

/* 桌面端隐藏移动状态栏 */
.mobile-status-bar {
    display: none;
}

.log-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    contain: content;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.log-content p {
    font-size: var(--font-body-lg);
    line-height: 1.8;
    color: var(--text-secondary);
    padding: var(--space-6) var(--space-12);
    border-left: 3px solid currentColor;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background 0.15s;
}

.log-content p:hover {
    background: var(--glass-white-3);
}

/* --- 日志时间戳 (HH:MM:SS) --- */
.log-content .log-time {
    flex: 0 0 auto;
    margin-right: var(--space-8);
    color: var(--text-muted);
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--font-caption);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    letter-spacing: 0.2px;
}

.log-content p.log-with-time {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

/* 隐藏日志时间戳（账号与显示设置里可关，手机端省空间） */
.hide-log-time .log-content .log-time {
    display: none;
}

/* --- 日志类别: 系统/欢迎 --- */
.log-content p.log-welcome {
    color: var(--text-gold);
    font-size: var(--font-action);
    margin-bottom: var(--space-6);
    border-left-color: currentColor;
    background: color-mix(in srgb, var(--accent-gold) 4%, transparent);
}

.log-content p.log-system,
.log-content p.log-salary,
.log-content p.log-promotion {
    color: var(--text-muted);
    font-style: italic;
    border-left-color: currentColor;
}

/* --- 日志类别: 修炼相关 (翠色) --- */
.log-content p.log-cultivation,
.log-content p.log-meditate,
.log-content p.log-absorb,
.log-content p.log-technique,
.log-content p.log-awaken,
.log-content p.log-natal {
    color: var(--text-jade);
    border-left-color: currentColor;
}

/* --- 日志类别: 突破/提升 (金色, 加强) --- */
.log-content p.log-breakthrough {
    color: var(--text-gold);
    font-weight: 600;
    font-size: var(--font-action);
    border-left-color: currentColor;
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
    text-shadow: 0 0 8px color-mix(in srgb, var(--accent-gold) 20%, transparent);
    padding: var(--space-6) var(--space-10);
}

/* --- 日志类别: 战斗相关 (红色) --- */
.log-content p.log-battle,
.log-content p.log-flee {
    color: var(--text-red);
    border-left-color: currentColor;
}

.log-content .arena-battle-log-row.log-battle {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6) var(--space-12);
    font-size: var(--font-body-lg);
    line-height: 1.8;
    color: var(--text-red);
    background: color-mix(in srgb, var(--accent-crimson) 3%, transparent);
    border-left-width: 3px;
    border-bottom: none;
}

.log-content .arena-battle-log-row.log-battle .arena-battle-main {
    color: inherit;
}

.log-content .arena-battle-log-row.log-battle .arena-battle-round {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-micro);
}

.log-content p.log-pvp,
.log-content p.log-pvp_victory {
    color: var(--craft-gold);
    border-left-color: currentColor;
    background: color-mix(in srgb, var(--accent-crimson) 4%, transparent);
}

.log-content p.log-pvp_death,
.log-content p.log-death,
.log-content p.log-trial_fail {
    color: var(--danger-color);
    font-weight: 600;
    border-left-color: currentColor;
    background: color-mix(in srgb, var(--accent-crimson) 6%, transparent);
}

.log-content p.log-heal,
.log-content p.log-revive,
.log-content p.log-rescue {
    color: var(--canghai-teal);
    border-left-color: currentColor;
}

/* --- 日志类别: 探索/冒险 (紫色) --- */
.log-content p.log-explore,
.log-content p.log-adventure,
.log-content p.log-move,
.log-content p.log-dungeon {
    color: var(--accent-purple);
    border-left-color: currentColor;
}

.log-content p.log-loot,
.log-content p.log-reward,
.log-content p.log-item {
    color: var(--ghost-purple-deep);
    border-left-color: currentColor;
}

/* --- 日志类别: 经济/交易 (蓝色) --- */
.log-content p.log-trade,
.log-content p.log-market,
.log-content p.log-exchange,
.log-content p.log-stone,
.log-content p.log-storage {
    color: var(--text-blue);
    border-left-color: currentColor;
}

/* --- 日志类别: 制造 (稳定金色；勿与暗色主题 text-orange 分叉，滚动/重建时会看起来「变色」) --- */
.log-content p.log-alchemy,
.log-content p.log-forge,
.log-content p.log-refine,
.log-content p.log-salvage,
.log-content p.log-talisman {
    color: var(--text-gold);
    border-left-color: currentColor;
}

/* 炼丹等批量结果里的品质字用 --rarity-N，不继承整行金/橙 */
.log-content p .log-grade {
    font-weight: 600;
}

/* --- 日志类别: 社交 (青色) --- */
.log-content p.log-sect,
.log-content p.log-friend,
.log-content p.log-task {
    color: var(--beihuang-blue);
    border-left-color: currentColor;
}

/* --- Action Bar --- */
/* ============================================================
 * [v6] 旧操作区 CSS 已删除（1452-2049），新规则在文件末尾。
 * 以下保留倍率下拉框的 position:fixed 定位 + 动画（其他功能依赖）
 * ============================================================ */

.explore-multiplier-options {
    position: fixed;
    left: var(--explore-multiplier-left, 0px);
    bottom: var(--explore-multiplier-bottom, 48px);
    z-index: var(--z-overlay-high);
    display: none;
    min-width: 52px;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--ghost-purple) 35%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 98%, transparent);
    box-shadow: 0 8px 20px var(--shadow-black-2);
}

body.game-page .explore-multiplier-options {
    background: color-mix(in srgb, var(--bg-primary) 98%, transparent);
}

.explore-multiplier-select.open .explore-multiplier-options {
    display: grid;
    gap: var(--space-2);
}

.explore-multiplier-option {
    width: 100%;
    height: 26px;
    padding: 0 var(--space-8);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 26px;
    text-align: left;
    cursor: pointer;
}

body.game-page .explore-multiplier-option {
    background: transparent;
}

.explore-multiplier-option:hover,
.explore-multiplier-option:focus {
    background: color-mix(in srgb, var(--youming-purple) 16%, transparent);
    color: var(--accent-purple);
    outline: none;
}

body.game-page .explore-multiplier-option:hover,
body.game-page .explore-multiplier-option:focus {
    background: color-mix(in srgb, var(--youming-purple) 16%, transparent);
}

.explore-multiplier-option.active {
    background: color-mix(in srgb, var(--youming-purple) 24%, transparent);
    color: var(--accent-purple);
    font-weight: 700;
}
@keyframes autoExplorePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-purple) 35%, transparent),
                    0 2px 10px color-mix(in srgb, var(--accent-jade) 35%, transparent);
    }
    50% {
        box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent-purple) 45%, transparent),
                    0 2px 10px color-mix(in srgb, var(--accent-jade) 35%, transparent);
    }
}

/* 自动探索计数徽标（v6: 旧样式已随操作区删除）*/


/* --- Side Panel --- */
.side-panel {
    width: 360px;
    min-width: 260px;
    max-width: 70vw;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, opacity 0.25s ease;
    position: relative;
    z-index: 1001;
    min-height: 0;
    overflow: hidden;
}

.side-panel-resize-handle {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 10;
    transition: background 0.15s ease;
}

.side-panel-resize-handle:hover,
.side-panel-resize-handle.dragging {
    background: color-mix(in srgb, var(--beihuang-blue) 40%, transparent);
}

.side-panel.hidden {
    display: none !important;
}

/* 挂到当前全屏窗内：仍按侧栏几何，靠 DOM 叠在宿主内容之上，不另抬 z-index */
.side-panel.side-panel--hosted {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
}

.encounter-return-hint {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-10);
    justify-content: space-between;
    padding: var(--space-10) var(--space-14);
    border-bottom: 1px solid color-mix(in srgb, var(--craft-gold) 28%, transparent);
    background: color-mix(in srgb, var(--craft-gold) 12%, transparent);
    color: var(--text-gold);
    font-size: var(--font-body);
}

.encounter-return-hint__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.encounter-return-hint__btn {
    flex: 0 0 auto;
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--craft-gold) 18%, transparent);
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-label);
    padding: var(--space-6) var(--space-10);
    cursor: pointer;
}

.encounter-return-hint__btn:hover {
    background: color-mix(in srgb, var(--craft-gold) 28%, transparent);
}

/* 子面板淡入效果 */
.side-content > :not(.hidden) {
    animation: panelFadeIn 0.2s ease;
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.side-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* pan-x 放行顶部 Tab 横滑；仅 pan-y 会与子级横滚条求交后锁死左右滑 */
    touch-action: pan-x pan-y;
    padding: var(--space-16);
}

.side-content.fb-workbench,
.side-content.enc-workbench,
.side-content.gd-workbench,
.side-content.cave-wb-shell,
.side-content.inventory-workbench,
.side-content.market-workbench,
.side-content.auction-workbench,
.side-content.shop-workbench,
.side-content.transmit-workbench,
.side-content.sect-workbench,
.side-content.tournament-workbench,
.side-content.friend-workbench,
.side-content.trial-workbench,
.side-content.mb-workbench,
.side-content.act-workbench,
.side-content.np-workbench {
    padding: 0;
    overflow: hidden;
}

.side-content .panel-title {
    flex-shrink: 0;
}

/* B · 册封条关闭：圆角方钮；固定/刷新钮共用尺寸语汇 */
.btn-panel-close,
.btn-chat-pin,
.btn-chat-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-action);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.btn-panel-close {
    margin-left: auto;
    flex: 0 0 auto;
}

.btn-panel-close:hover {
    color: var(--accent-crimson);
    border-color: color-mix(in srgb, var(--accent-crimson) 36%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 7%, transparent);
}

.btn-chat-pin:hover {
    color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.btn-chat-refresh {
    font-size: var(--font-title);
    font-weight: 600;
    line-height: 1;
}

/* 仅旋转字形，边框/背景保持不动 */
.btn-chat-refresh__glyph {
    display: inline-block;
    line-height: 1;
    transform-origin: 50% 50%;
    will-change: transform;
}

.btn-chat-refresh:hover:not(:disabled) {
    color: var(--accent-jade, var(--text-jade));
    border-color: color-mix(in srgb, var(--accent-jade, #3d8b6e) 42%, transparent);
    background: color-mix(in srgb, var(--accent-jade, #3d8b6e) 8%, transparent);
}

.btn-chat-refresh:disabled,
.btn-chat-refresh.is-refreshing {
    opacity: 0.72;
    cursor: default;
}

.btn-chat-refresh.is-refreshing .btn-chat-refresh__glyph {
    animation: chat-refresh-spin 0.75s linear infinite;
}

@keyframes chat-refresh-spin {
    to { transform: rotate(360deg); }
}

.chat-title-actions .btn-chat-pin,
.chat-title-actions .btn-chat-refresh,
.chat-title-actions .btn-panel-close {
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-left: 0;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-action);
}

.chat-title-actions .btn-chat-refresh {
    font-size: var(--font-title);
    font-weight: 600;
}

.chat-title-actions .btn-panel-close:hover {
    color: var(--accent-crimson);
    border-color: color-mix(in srgb, var(--accent-crimson) 36%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 7%, transparent);
}

.chat-title-actions .btn-chat-pin:hover {
    color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.chat-title-actions .btn-chat-refresh:hover:not(:disabled) {
    color: var(--accent-jade, var(--text-jade));
    border-color: color-mix(in srgb, var(--accent-jade, #3d8b6e) 42%, transparent);
    background: color-mix(in srgb, var(--accent-jade, #3d8b6e) 8%, transparent);
}

@media (max-width: 768px) {
    .btn-chat-pin {
        display: none !important;
    }
    /* 刷新按钮按聊天壳选择唯一位置：标题栏，或中部传音签的频道轨。 */
}

/* 批量操作菜单：储物工作台内由 game-inventory.css 的 inv-pop-menu 接管视觉。
   此处仅保留定位与开关，避免无 #inventoryPanel 作用域时完全失样式。 */
.inv-batch-menu {
    display: inline-block;
    position: relative;
}

.inv-batch-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 160px;
}

.inv-batch-dropdown.open {
    display: block;
}

/* Ranking · C 分卷天榜 */
#rankingPanel.ranking-panel--volume {
    overflow: hidden; /* chrome 固定，列表自滚 */
}

#rankingPanel .ranking-chrome {
    flex: 0 0 auto;
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
}

#rankingPanel .ranking-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#rankingPanel .ranking-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#rankingPanel .ranking-pager {
    flex: 0 0 auto;
}

.ranking-subtitle {
    font-size: var(--font-caption);
    color: var(--text-muted);
    text-align: left;
    margin: 0 0 var(--space-8);
    letter-spacing: 0.06em;
    font-style: normal;
    line-height: 1.5;
}
/* 副标题隐藏（压缩顶部空间，节点保留供 JS 赋值） */
.ranking-subtitle--hidden {
    display: none !important;
}

.ranking-title-help {
    width: 18px;
    height: 18px;
    margin-left: var(--space-6);
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: var(--text-gold);
    cursor: help;
    font-size: var(--font-caption);
    line-height: 1;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: 1px;
}

.ranking-title-help:hover {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 65%, transparent);
}

/* 我的名次 · inline 单行（贴在下拉框右侧，1:1 宽度） */
.ranking-my-rank,
.ranking-my-rank--inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    min-height: 34px;
    padding: var(--space-6) var(--space-10);
    margin: 0;
    font-size: var(--font-label);
    color: var(--text-gold);
    text-align: center;
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, transparent);
    border-radius: var(--radius-md);
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
}

/* ① 下拉行：默认单列；有「我的名次」时 选榜(内容宽) + 名次(撑满) */
.ranking-picker-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin: 0 0 var(--space-6);
    align-items: center;
}
.ranking-picker-row.has-my-rank {
    grid-template-columns: max-content minmax(0, 1fr);
}
.ranking-picker {
    position: relative;
    min-width: 0;
    width: auto;
    max-width: 100%;
}
/* FixedSelect 升级后：紧凑贴合文案，箭头在按钮内，勿再挂容器伪元素 */
.ranking-picker .fx-select {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    vertical-align: middle;
}
.ranking-picker .fx-select__btn,
.ranking-picker .fx-select button {
    width: auto;
    min-width: 72px;
    max-width: 100%;
    height: 34px;
    padding: 0 var(--space-12) 0 var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-card, var(--bg-lighter)));
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    box-sizing: border-box;
}
.ranking-picker select {
    width: auto;
    min-width: 88px;
    max-width: 100%;
    height: 34px;
    padding: 0 var(--space-32) 0 var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background-color: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-card, var(--bg-lighter)));
    /* 箭头画在 select 自身上，避免 .ranking-picker::after 在 FixedSelect 升级后悬空成「第三个下拉」 */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-gold) 50%),
        linear-gradient(135deg, var(--text-gold) 50%, transparent 50%);
    background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.ranking-picker select:focus {
    border-color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 16%, transparent);
}
/* 禁止容器伪箭头：FixedSelect 已带 .fx-select__btn::after，旧 ::after 会漂在「境界」和名次之间 */
.ranking-picker::after {
    content: none !important;
    display: none !important;
}

/* ② 搜索行：凡/仙胶囊 + 搜索框（平铺，无嵌套容器）
   ranking-scope-tab 复用全局胶囊（themes.css 统一 999px），这里只管布局 */
.ranking-tools-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    align-items: center;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ranking-tools-row::-webkit-scrollbar { display: none; }

/* 灵根筛选：紧凑下拉，与凡/仙胶囊同高 */
.ranking-root-select {
    flex: 0 0 auto;
    max-width: 96px;
    height: 30px;
    padding: 0 var(--space-24) 0 var(--space-8);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-card, var(--bg-lighter)));
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-caption);
    font-weight: 600;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-gold) 50%),
        linear-gradient(135deg, var(--text-gold) 50%, transparent 50%);
    background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}
.ranking-root-select:focus {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 14%, transparent);
}
.ranking-root-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ranking-search-input {
    flex: 1;
    min-width: 80px;
    height: 30px;
    padding: 0 var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: var(--bg-card, var(--bg-lighter));
    color: var(--text-primary);
    font-size: var(--font-label);
    outline: none;
}

.ranking-search-input:focus {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 14%, transparent);
}

.ranking-search-btn {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ranking-search-btn {
    border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.ranking-search-btn:hover {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-primary);
}

.ranking-list {
    flex: 1;
    overflow-y: auto;
}

.ranking-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-12) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    font-size: var(--font-body);
}

.ranking-item:last-child {
    border-bottom: 0;
}

.ranking-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, transparent);
    border-radius: 50%;
    font-size: var(--font-label);
    color: var(--text-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* 前三：语义色环，避免白字实心底在亮纸上发糊 */
.ranking-rank.top-1 {
    background: color-mix(in srgb, var(--accent-gold) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    color: var(--text-gold);
}

.ranking-rank.top-2 {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.ranking-rank.top-3 {
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-orange)) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-orange)) 30%, transparent);
    color: var(--text-danger, var(--accent-crimson, var(--accent-orange)));
}

.ranking-main {
    min-width: 0;
}

.ranking-name {
    min-width: 0;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* #6366：排行榜 / 画卷 月卡流金名（复用聊天 vip 渐变；本类只做定位与权重） */
.ranking-name-link--vip,
.pf-card-head__name-text--vip {
    font-weight: 700;
}
.ranking-name-link {
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.12s;
    font-family: var(--font-serif);
    letter-spacing: 0.03em;
}

.ranking-name-link:hover {
    color: var(--text-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ranking-realm {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-value {
    text-align: right;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-jade, var(--accent-jade));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.25;
}

.ranking-value small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-micro);
    font-weight: 500;
    color: var(--text-muted);
}

.ranking-value--muted {
    color: var(--text-muted);
    font-weight: 600;
}

.ranking-detail {
    width: auto;
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-top: var(--space-2);
    padding-left: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-guest {
    display: inline-block;
    font-size: var(--font-micro);
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
    margin-left: var(--space-4);
    vertical-align: middle;
}

.ranking-gender {
    display: inline-block;
    font-size: var(--font-micro);
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
    margin-left: var(--space-4);
    vertical-align: middle;
    font-weight: 600;
    line-height: 1.45;
}

.ranking-gender-male {
    color: var(--beihuang-blue);
    border-color: color-mix(in srgb, var(--beihuang-blue) 35%, transparent);
    background: color-mix(in srgb, var(--beihuang-blue) 10%, transparent);
}

.ranking-gender-female {
    color: var(--craft-gold-soft);
    border-color: color-mix(in srgb, var(--ghost-purple) 35%, transparent);
    background: color-mix(in srgb, var(--ghost-purple) 10%, transparent);
}

.ranking-gender-other {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--beihuang-blue) 35%, transparent);
    background: color-mix(in srgb, var(--beihuang-blue) 10%, transparent);
}

.ranking-root {
    display: inline-block;
    font-size: var(--font-micro);
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
    margin-left: var(--space-4);
    vertical-align: middle;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.ranking-title {
    display: inline-block;
    font-size: var(--font-micro);
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
    margin-left: var(--space-4);
    vertical-align: middle;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.ranking-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-10) 0 var(--space-4);
}

.pager-btn {
    padding: var(--space-6) var(--space-14);
    font-size: var(--font-label);
    font-family: var(--font-serif);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.pager-btn:hover:not(:disabled) {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pager-info {
    font-size: var(--font-label);
    color: var(--text-muted);
}

.ranking-empty {
    text-align: center;
    padding: var(--space-32) 0;
    color: var(--text-muted);
    font-size: var(--font-body);
}

/* ============================================================
   宗门战力榜 · B 宗门碑（design/sect-power-ranking-modal）
   壳：gc-dialog gold · 可滚无滚动条 · 无底钮 · 无副标题
   ============================================================ */
body.game-page .modal-content.modal--decorated.gc-dialog.spr-dialog,
.modal-content.modal--decorated.gc-dialog.spr-dialog,
.gc-dialog.spr-dialog {
    max-width: 380px;
    max-height: min(88vh, 640px);
    display: flex;
    flex-direction: column;
}

.gc-dialog.spr-dialog .gc-mid.spr-mid,
.gc-mid.spr-mid {
    text-align: left;
    padding: var(--space-4) var(--space-14) var(--space-14);
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* 可滚、不露滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gc-dialog.spr-dialog .gc-mid.spr-mid::-webkit-scrollbar,
.gc-mid.spr-mid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.spr-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.spr-tab {
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-muted);
    font-size: var(--font-label);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.spr-tab:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
    color: var(--text-secondary);
}

.spr-tab.is-on {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    font-weight: 600;
}

.spr-mine {
    margin-bottom: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 28%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 7%, transparent);
    font-size: var(--font-label);
    color: var(--text-jade, var(--accent-jade));
    line-height: 1.45;
}

.spr-mine b {
    font-weight: 700;
}

.spr-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.spr-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-12) var(--space-10);
    background: color-mix(in srgb, var(--bg-panel, var(--bg-secondary)) 88%, transparent);
}

.spr-card.is-top {
    border-color: color-mix(in srgb, var(--accent-gold) 32%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
}

.spr-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
}

.spr-card-left {
    min-width: 0;
    flex: 1;
}

.spr-rank {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
    letter-spacing: 0.3px;
}

.spr-rank.t1 {
    color: #c9a227;
    font-weight: 700;
}

.spr-rank.t2 {
    color: #8a95a8;
    font-weight: 700;
}

.spr-rank.t3 {
    color: #b07850;
    font-weight: 700;
}

html.theme-dark .spr-rank.t1,
[data-theme="dark"] .spr-rank.t1 {
    color: #d4b45a;
}

html.theme-dark .spr-rank.t2,
[data-theme="dark"] .spr-rank.t2 {
    color: #9aa6b8;
}

html.theme-dark .spr-rank.t3,
[data-theme="dark"] .spr-rank.t3 {
    color: #c09068;
}

.spr-name {
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-gold);
    line-height: 1.35;
    letter-spacing: 0.4px;
    word-break: break-word;
}

.spr-meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
    word-break: break-word;
}

.spr-power {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    text-align: right;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.spr-power small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-micro);
    font-weight: 400;
    color: var(--text-muted);
}

.spr-bar {
    margin-top: var(--space-10);
    height: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--border-color) 88%, transparent);
    overflow: hidden;
}

.spr-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-gold) 52%, transparent);
    transition: width 0.2s ease;
}

.spr-card.is-top .spr-fill {
    background: color-mix(in srgb, var(--accent-gold) 68%, transparent);
}

/* 宗门战力榜公告：默认两行省略，点击在榜卡内展开/收起（无独立弹窗） */
.spr-notice {
    margin-top: var(--space-8);
    padding: var(--space-6) var(--space-8);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--accent-gold, #c8a04a) 22%, transparent);
    font: inherit;
    text-align: left;
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent-gold, #c8a04a) 8%, transparent);
    border-radius: var(--radius-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    align-items: end;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.spr-notice:active,
.spr-notice.is-expanded {
    background: color-mix(in srgb, var(--accent-gold, #c8a04a) 14%, transparent);
}
.spr-notice.is-expanded {
    align-items: start;
}
.spr-notice__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    word-break: break-word;
}
.spr-notice.is-expanded .spr-notice__text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.spr-notice__more {
    flex-shrink: 0;
    font-size: var(--font-micro);
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: var(--accent-gold, #c8a04a);
    font-weight: 600;
    white-space: nowrap;
    padding-bottom: var(--space-2);
}

.spr-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    letter-spacing: 0.4px;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    vertical-align: middle;
    margin-left: var(--space-6);
    font-weight: 500;
}

.spr-badge--sys {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 35%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}

.spr-badge--player {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.spr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    margin-top: var(--space-12);
    padding-top: var(--space-4);
    font-size: var(--font-label);
    color: var(--text-muted);
}

.spr-pager-btn {
    height: 30px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.spr-pager-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
}

.spr-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.spr-pager-info {
    font-variant-numeric: tabular-nums;
    min-width: 3.5em;
    text-align: center;
}

.spr-empty {
    padding: var(--space-40) var(--space-12);
    text-align: center;
    font-size: var(--font-body);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* 骨架 */
.spr-card--skel {
    pointer-events: none;
}

.spr-skel-line,
.spr-skel-bar {
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--border-color) 70%, transparent);
    animation: skeletonPulse 1.2s ease-in-out infinite;
}

.spr-skel-line {
    height: 12px;
    width: 58%;
    margin-bottom: var(--space-8);
}

.spr-skel-line--sm {
    width: 28%;
    height: 10px;
    margin-bottom: var(--space-6);
}

.spr-skel-bar {
    height: 4px;
    width: 100%;
    margin-top: var(--space-10);
    border-radius: var(--radius-pill);
}

/* 骨架屏动画 */
.ranking-skeleton {
    pointer-events: none;
}

.skeleton-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    animation: skeletonPulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

.skeleton-bar {
    height: 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    animation: skeletonPulse 1.2s ease-in-out infinite;
}

@keyframes skeletonPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

/* Chat */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip; /* #8812：称号框横向不出屏 */
    overflow-anchor: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-6) var(--space-10);
    position: relative;
}

/* #7569：纵向 flex 滚动区默认 flex-shrink:1，两指连滑橡皮筋会把气泡压扁且不回弹 */
.chat-messages > * {
    flex-shrink: 0;
}

/* 回到底部按钮：滚离底部时浮现，贴在传音面板右下角 */
/* 回到底部按钮：滚离底部时浮现，贴在传音面板可视区右下角。
   按钮放在 .chat-messages 的父元素（.inline-chat / #chatPanel，非滚动定位上下文）里，
   用 position:absolute 钉在消息区右下角——不随聊天内容滚动，也不受 .chat-messages 的
   flex 布局影响（flex 容器内的 sticky 子项会失效，按钮会停在流中间）。
   bottom 抬高到告示筛选/输入栏等底部控件上方（兜底值，JS 会动态精确计算）。
   父元素须 position:relative（.inline-chat 已有；#chatPanel 在下方补）。 */
.chat-to-bottom-btn {
    position: absolute;
    right: 14px;
    bottom: 100px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 5;
    color: var(--accent-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 42%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px var(--shadow-black-2);
}

.chat-to-bottom-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chat-to-bottom-btn:hover {
    background: color-mix(in srgb, var(--accent-jade) 28%, transparent);
    color: var(--accent-jade, var(--accent-jade));
}

/* #7512：翻历史时新消息不跟滚，回到底部钮右上角红点 */
.chat-to-bottom-btn.has-unread::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--accent-crimson);
    border-radius: 50%;
    pointer-events: none;
}

/* 消息体 · 与设置/传音壳同系：无气泡尾刺、金标告示、轻量徽章 */
body.game-page .chat-msg {
    font-size: var(--font-body);
    line-height: 1.55;
}

body.game-page .chat-msg.chat-msg-self,
body.game-page .chat-msg.chat-msg-other {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    width: fit-content;
    max-width: 92%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: opacity 0.15s ease;
}

body.game-page .chat-msg.chat-msg-other {
    align-self: flex-start;
}

body.game-page .chat-msg.chat-msg-self {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg.chat-msg-self:hover,
.chat-msg.chat-msg-other:hover {
    opacity: 0.96;
}

.chat-msg--focused {
    opacity: 1;
}

.chat-msg--focused .chat-msg-bubble {
    /* 实色兜底：旧 WebView 丢弃 color-mix 时仍能看出聚焦框 */
    border-color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent);
    box-shadow: 0 0 0 1px rgba(183, 120, 31, 0.18);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 18%, transparent);
}

.chat-msg-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    /* 先实色，再 color-mix：App 旧 WebView 无气泡/无框时常见于此类单层写法 */
    border: 1px solid var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 26%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    color: var(--text-jade);
    font-family: var(--font-display);
    font-size: var(--font-body);
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    /* 保证可点：合成层/主题样式勿覆盖 */
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.chat-msg-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.chat-msg-avatar:hover {
    border-color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
}

/* 道号按钮：取代 a[href=javascript:]，扩大可点区域 */
button.chat-player-link--btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    vertical-align: baseline;
}

.chat-msg-stack {
    min-width: 0;
    max-width: min(420px, calc(100% - 34px));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.chat-msg-self .chat-msg-stack {
    align-items: flex-end;
}

.chat-msg-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    max-width: 100%;
    padding: 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.35;
}

.chat-msg-self .chat-msg-main {
    justify-content: flex-end;
    text-align: right;
}

.chat-msg-name {
    color: var(--text-jade);
    font-weight: 600;
    margin-right: 0;
}

.chat-msg-name a,
.chat-msg-name .chat-player-link,
.chat-msg-name button.chat-player-link--btn,
a.chat-player-link {
    color: inherit !important;
    text-decoration: none;
    cursor: pointer;
}

.chat-msg-name a:hover,
.chat-msg-name .chat-player-link:hover,
.chat-msg-name button.chat-player-link--btn:hover,
a.chat-player-link:hover {
    color: var(--text-gold) !important;
}

/* 去气泡尾刺：干净圆角卡，贴近设置分组卡语气。
 * 双层声明：先不透明实色，再 color-mix 增强。
 * 旧 App WebView 不支持 color-mix 时整条声明会丢弃——只写 color-mix 会「没气泡没框」。 */
body.game-page .chat-msg .chat-msg-bubble {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    min-width: 28px;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    word-break: break-word;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
}

body.game-page .chat-msg .chat-msg-bubble::before {
    display: none;
}

body.game-page .chat-msg-other .chat-msg-bubble {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
}

body.game-page .chat-msg-self .chat-msg-bubble {
    background: var(--bg-card);
    background: color-mix(in srgb, var(--accent-jade) 9%, var(--bg-card));
    border-color: var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 26%, transparent);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
}

html.theme-light body.game-page .chat-msg-other .chat-msg-bubble {
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    border-color: var(--border-color);
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
}

html.theme-light body.game-page .chat-msg-self .chat-msg-bubble {
    background: var(--bg-card);
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-card));
    border-color: var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 24%, transparent);
}

.chat-msg-content {
    margin: 0;
    word-break: break-word;
}

.chat-msg-text {
    display: block;
    color: var(--text-primary);
}

.chat-msg-realm {
    font-size: var(--font-caption);
    color: var(--text-gold);
    opacity: 0.82;
    font-weight: 400;
}

/* #9784 仙界道友公屏界别角标 */
.chat-continent-mark {
    display: inline-block;
    min-width: 16px;
    margin-right: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-card) 90%, var(--accent-gold) 10%);
    color: var(--text-gold);
    font-size: var(--font-micro);
    line-height: 14px;
    text-align: center;
    vertical-align: middle;
}

body.game-page .chat-system {
    display: block;
    align-self: center;
    width: fit-content;
    max-width: 90%;
    padding: var(--space-4) var(--space-10);
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 16%, transparent);
    border-radius: var(--radius-pill);
    text-align: center;
}

.chat-system .chat-msg-text {
    color: var(--text-gold);
    font-style: italic;
    font-size: var(--font-caption);
}

.chat-reply-btn {
    flex: 0 0 auto;
    margin-left: var(--space-2);
    padding: 0 var(--space-6);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-caption);
    line-height: 18px;
    cursor: pointer;
}

.chat-reply-btn:hover {
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
}

.chat-recall-btn {
    flex: 0 0 auto;
    margin-left: var(--space-2);
    padding: 0 var(--space-6);
    border: 1px solid color-mix(in srgb, var(--jimo-crimson) 35%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--jimo-crimson) 8%, transparent);
    color: var(--text-danger);
    font-family: var(--font-serif);
    font-size: var(--font-caption);
    line-height: 18px;
    cursor: pointer;
}

.chat-recall-btn:hover {
    background: color-mix(in srgb, var(--jimo-crimson) 16%, transparent);
}

/* 撤回提示：居中轻量条（非系统金 pill），文案与时间同行 */
body.game-page .chat-msg.chat-system.chat-msg-recalled {
    display: flex;
    justify-content: center;
    align-self: center;
    width: fit-content;
    max-width: 92%;
    padding: 0;
    margin: var(--space-2) 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    opacity: 1;
    text-align: center;
}

.chat-msg-recalled .chat-recall-body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--space-8);
    max-width: 100%;
    padding: var(--space-4) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    color: var(--text-muted);
}

.chat-msg-recalled .chat-msg-text {
    display: inline;
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-style: normal;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(220px, 68vw);
}

.chat-msg-recalled .chat-msg-time {
    flex: none;
    margin: 0;
    padding-left: var(--space-8);
    border-left: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    font-size: var(--font-micro);
    opacity: 0.7;
    color: var(--text-muted);
    line-height: 1;
}

.chat-msg-reply-quote {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-8);
    border: 0;
    border-left: 2px solid color-mix(in srgb, var(--accent-gold) 50%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-size: var(--font-caption);
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}

.chat-msg-reply-quote span {
    color: var(--text-gold);
    margin-right: var(--space-4);
}

.chat-msg-reply-quote b {
    color: var(--text-secondary);
    font-weight: 400;
}

.chat-reply-compose {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    margin-top: 0;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 20%, transparent);
    border-left: 2px solid var(--accent-gold);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    flex-shrink: 0;
}

.chat-reply-compose.hidden {
    display: none;
}

.chat-reply-compose__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chat-reply-compose__label {
    color: var(--text-gold);
    font-size: var(--font-caption);
    font-weight: 600;
}

.chat-reply-compose__text {
    color: var(--text-secondary);
    font-size: var(--font-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-compose__cancel {
    margin-left: auto;
    width: 24px;
    height: 24px;
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.chat-reply-compose__cancel:hover {
    color: var(--text-primary);
    border-color: var(--accent-gold);
}

.chat-input-bar {
    display: flex;
    align-items: end;
    gap: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow: hidden; /* Safari 防溢出 */
}

.chat-input-tray {
    align-items: end;
    gap: var(--space-6);
    padding-top: 0;
    background: transparent;
    border-top: 0;
    display: grid;
    /* 输入 · 发送 · + ：表情/@/润色已收入 + 菜单 */
    grid-template-columns: minmax(0, 1fr) auto 44px;
}

.chat-input-bar :is(input, textarea) {
    flex: 1;
    min-width: 0; /* Safari flex 子项防溢出 */
    width: 100%;
    padding: var(--space-8) var(--space-12);
    height: 44px;
    background: var(--bg-panel);
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-ui, inherit);
    font-size: var(--font-body);
    outline: none;
}

.chat-input-field {
    box-sizing: border-box;
    min-height: 44px;
    /* 1 行 44 + 再长 3 行；#6559 润色后要看得见全文 */
    max-height: calc(44px + 1.5em * 3);
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
}

/* iOS Safari / 微信 WebView：input 计算字号 < 16px 时聚焦会整页放大，失焦后常不回缩 */
@media (max-width: 640px) {
    .chat-input-bar :is(input, textarea),
    .chat-input-field,
    #chatInput,
    #inlineChatInput,
    #friendChatInput {
        font-size: var(--font-title);
    }
}

.chat-input-bar :is(input, textarea):focus {
    border-color: color-mix(in srgb, var(--accent-jade) 45%, transparent);
    background: var(--bg-panel);
}

.btn-send {
    padding: 0 var(--space-14);
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    border-radius: var(--radius-md);
    color: var(--text-jade, var(--accent-jade));
    font-family: var(--font-ui, inherit);
    font-size: var(--font-body);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 700;
}

.btn-send:hover {
    background: color-mix(in srgb, var(--accent-jade) 24%, transparent);
}

.chat-send-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    padding: 0 var(--space-14);
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-weight: 700;
}

.chat-send-btn:hover {
    background: color-mix(in srgb, var(--accent-jade) 24%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 50%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

/* 招募按钮 */
.btn-recruit {
    padding: var(--space-8) var(--space-12);
    background: color-mix(in srgb, var(--beihuang-purple) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--beihuang-purple) 40%, transparent);
    border-radius: var(--radius-sm);
    color: var(--ghost-purple);
    font-family: var(--font-serif);
    font-size: var(--font-label);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-recruit:hover {
    background: color-mix(in srgb, var(--beihuang-purple) 25%, transparent);
    border-color: var(--ghost-purple);
}

/* 告示卡 · 设置分组卡语气 + 金标标题（招募/上架/求助统一壳，色相用 label 区分） */
body.game-page .chat-msg-recruit,
body.game-page .chat-msg-assist {
    align-self: stretch;
    max-width: 100%;
    padding: var(--space-10) var(--space-12);
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-md);
}

.chat-msg-recruit:hover,
.chat-msg-assist:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 32%, transparent);
    background: color-mix(in srgb, var(--bg-card) 98%, transparent);
}

.chat-recruit-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: 0;
}

.chat-recruit-header {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-label);
    flex-wrap: wrap;
}

.chat-recruit-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--text-gold);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--font-label);
    letter-spacing: 1px;
}

.chat-recruit-label::before {
    content: "招";
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    flex: none;
    display: grid;
    place-items: center;
    font-size: var(--font-caption);
    font-family: var(--font-display);
    letter-spacing: 0;
    font-weight: 600;
    color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, transparent);
}
.chat-msg-dungeon-recruit .chat-recruit-label::before { content: "秘"; }
.chat-msg-xuanchou-recruit .chat-recruit-label::before { content: "筹"; }
.chat-assist-card .chat-recruit-label::before { content: "援"; }
.chat-listing-card .chat-recruit-label::before { content: "市"; }
.chat-listing-card--ending .chat-recruit-label::before { content: "结"; }
.chat-feedback-card .chat-recruit-label::before { content: "言"; }
.chat-equip-share-msg .chat-recruit-label::before { content: "器"; }
.chat-battle-report-msg .chat-recruit-label::before { content: "战"; }

.chat-recruit-name {
    color: var(--text-jade);
    font-weight: 600;
}

.chat-recruit-body {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.chat-recruit-dungeon {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-body);
}

.chat-recruit-info {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
}

.chat-recruit-action {
    display: flex;
    align-items: center;
    padding-top: var(--space-2);
}

.btn-recruit-join {
    padding: 0 var(--space-12);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-label);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 26px;
}

.btn-recruit-join:hover {
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent);
    color: var(--text-gold);
}

.btn-recruit-join:active {
    transform: scale(0.97);
}

.recruit-self-tag {
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-style: italic;
}

/* 上架：竖标改翠色，动作钮仍为描边金/翠 */
.chat-listing-card .chat-recruit-label {
    color: var(--text-jade);
}

.chat-listing-card .chat-recruit-label::before {
    color: var(--accent-jade);
    background: color-mix(in srgb, var(--accent-jade) 12%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
}

.chat-listing-card .chat-recruit-info {
    color: var(--text-muted);
}

/* 价格易读读法（万/亿/兆）：虚线下划点提示可悬停看精确值 */
.chat-listing-card .chat-listing-price {
    color: var(--text-primary);
    cursor: help;
    border-bottom: 1px dotted color-mix(in srgb, var(--text-muted) 60%, transparent);
}

.chat-listing-card .btn-recruit-join {
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 36%, transparent);
    color: var(--text-jade);
}

.chat-listing-card .btn-recruit-join:hover {
    background: color-mix(in srgb, var(--accent-jade) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 48%, transparent);
    color: var(--text-jade);
}

.chat-assist-card .chat-recruit-label {
    color: var(--text-gold);
}

.chat-assist-card .chat-recruit-name {
    color: var(--text-primary);
}

.chat-assist-card .chat-recruit-dungeon {
    color: var(--text-primary);
}

.chat-assist-card .chat-recruit-info {
    color: var(--text-secondary);
}

/* 战报分享卡片（复用 chat-recruit-card 结构，标签与正文样式微调） */
.chat-battle-report-card .chat-recruit-label {
    color: var(--text-gold);
}
.chat-battle-report__title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
}
.chat-battle-report__result {
    font-size: var(--font-caption);
    color: var(--text-jade, var(--accent-jade));
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    border: 1px solid color-mix(in srgb, var(--accent-jade, #2a8f6a) 30%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .chat-battle-report__result {
        border-color: rgba(42, 143, 106, 0.3);
    }
}

/* 战报分享菜单 + 道友选择 */
.brs-hero {
    text-align: center;
    padding: var(--space-4) 0 var(--space-12);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-12);
}
.brs-hero__k {
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}
.brs-hero__title {
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    word-break: break-all;
}
.brs-hero__sub {
    font-size: var(--font-label);
    color: var(--text-secondary);
}
.brs-channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}
.brs-channel {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-12) var(--space-14);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.brs-channel:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .brs-channel:hover {
        border-color: var(--border-gold, var(--border-color));
        background: rgba(183, 120, 31, 0.08);
    }
}
.brs-channel__main b {
    display: block;
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.brs-channel__main span {
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.brs-note {
    font-size: var(--font-caption);
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}
.brs-friend-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: 50vh;
    overflow-y: auto;
}
.brs-friend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-body);
    cursor: pointer;
}
.brs-friend:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
}
.brs-friend__on {
    font-size: var(--font-caption);
    color: var(--text-jade, var(--accent-jade));
}
/* 他人分享战报弹窗：来源行 */
.lcr-shared-from {
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-10);
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.lcr-shared-from b {
    color: var(--text-gold);
    font-weight: 600;
}

.chat-assist-realm {
    color: var(--text-jade) !important;
    font-weight: 600;
    font-size: var(--font-caption) !important;
}

.chat-assist-card .btn-recruit-join {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
    box-shadow: none;
}

.chat-assist-card .btn-recruit-join:hover {
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent);
    color: var(--text-gold);
}

.chat-msg-assist-report {
    padding-bottom: var(--space-8);
}

.chat-assist-report-card {
    gap: var(--space-8);
}

/* ==== 聊天过滤 · 分段控件（B 市井） ==== */
.chat-filter-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding: var(--space-2);
    border-top: 0;
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
    border-radius: var(--radius-pill);
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
}
.chat-filter-tab {
    flex: none;
    min-height: 26px;
    padding: 0 var(--space-12);
    font-size: var(--font-caption);
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--text-muted);
    background: transparent;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    font-family: var(--font-ui, inherit);
}
.chat-filter-tab:hover {
    color: var(--text-primary);
}
.chat-filter-tab.active {
    color: var(--text-primary);
    background: var(--bg-card);
    font-weight: 600;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 8%, transparent);
}
/* 过滤模式: 隐藏不匹配的消息 */
.chat-messages.filter-chat-only .chat-card-msg { display: none !important; }
.chat-messages.filter-card-only .chat-msg:not(.chat-card-msg) { display: none !important; }
/* 告示：隐藏他人已领完/已退回的红包；自己发的始终保留，便于查看手气。 */
.chat-messages.filter-card-only .chat-msg-redpacket.is-fully-claimed:not(.is-own-redpacket) {
    display: none !important;
}
/* 偏好：默认隐藏交易上架卡 / 已领完红包（全部与告示均生效） */
.chat-messages.hide-trade-cards .chat-msg-trade {
    display: none !important;
}
.chat-messages.hide-claimed-redpackets .chat-msg-redpacket.is-fully-claimed:not(.is-own-redpacket) {
    display: none !important;
}
/* 偏好：屏蔽秘境/玄筹招募告示（不影响协助/战报等其他卡片） */
.chat-messages.hide-recruit-cards .chat-msg-dungeon-recruit,
.chat-messages.hide-recruit-cards .chat-msg-xuanchou-recruit {
    display: none !important;
}
/* #10636：偏好——屏蔽斗宝笺（物品出示卡） */
.chat-messages.hide-item-show-cards .chat-equip-share-msg {
    display: none !important;
}
/* ===== #10636 斗宝笺：品阶染边 + 首字玉牌 + 星级 + 落款 ===== */
.dou-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-12);
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--rc, var(--rarity-3)) 45%, var(--border-color));
    border-radius: var(--radius-md);
}
.dou-card--r1 { --rc: var(--rarity-1); }
.dou-card--r2 { --rc: var(--rarity-2); }
.dou-card--r3 { --rc: var(--rarity-3); }
.dou-card--r4 { --rc: var(--rarity-4); }
.dou-card--r5 { --rc: var(--rarity-5); }
.dou-card--r5::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 20%, transparent);
}
.dou-card__row {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}
.dou-card__seal {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--font-body-lg);
    font-weight: 600;
    color: var(--rc);
    background: color-mix(in srgb, var(--rc) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent);
    border-radius: var(--radius-sm);
}
.dou-card__main { min-width: 0; flex: 1; }
.dou-card__name {
    font-family: var(--font-display);
    font-size: var(--font-body-lg);
    color: var(--rc);
    font-weight: 600;
    letter-spacing: 0.5px;
    overflow-wrap: anywhere;
}
.dou-card__stars {
    font-size: var(--font-caption);
    color: var(--rc);
    letter-spacing: 2px;
}
.dou-card__sub {
    font-size: var(--font-label);
    color: var(--text-secondary);
    margin-top: 2px;
}
.dou-card__go {
    flex: none;
    font-family: var(--font-display);
    font-size: var(--font-label);
    color: var(--text-gold);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    padding: 5px 16px;
    cursor: pointer;
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
}
.dou-card__foot {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px dashed var(--border-color);
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.dou-card__by { color: var(--text-jade); font-weight: 600; }
/* #10678 斗宝点赞 + 随斗按钮 */
.dou-card__acts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.dou-card__act {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    padding: 0 var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-micro);
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.dou-card__act:hover { border-color: var(--border-gold); color: var(--text-gold); }
.dou-card__act.is-liked {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}
.dou-like-count { font-size: var(--font-micro); }
/* #7520：屏蔽道友反馈告示（红包/招募不受影响） */
.chat-messages.hide-feedback-cards .chat-msg-feedback {
    display: none !important;
}
/* #8006：屏蔽别人的公平对决战报（自己发的仍显示；探索/武道/天衡不受影响） */
.chat-messages.hide-fair-duel-reports .chat-battle-report-msg.is-fair-duel:not(.is-own-battle-report) {
    display: none !important;
}
/* 偏好：客户端屏蔽词命中的普通气泡（反馈 #5665） */
.chat-messages.hide-block-words .chat-msg.chat-msg--blocked {
    display: none !important;
}

/* 传音显示设置（筛选条右侧 ⚙） */
.chat-filter-tabs {
    position: relative;
}
.chat-pref-wrap {
    position: relative;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}
.chat-pref-btn {
    width: 28px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-body-lg);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.chat-pref-btn:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
}
.chat-pref-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 40;
    min-width: 200px;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary) 12%, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.chat-pref-menu.hidden { display: none; }
.chat-pref-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-label);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.chat-pref-item input { accent-color: var(--accent-jade, #3a9); }
.chat-pref-item--btn {
    width: 100%;
    margin: 0;
    padding: var(--space-6) 0;
    border: 0;
    background: transparent;
    color: var(--accent-jade, var(--text-jade));
    font: inherit;
    font-size: var(--font-label);
    text-align: left;
    cursor: pointer;
}
.chat-pref-item--btn:hover { color: var(--text-primary); }
.chat-pref-hint {
    margin: 0;
    font-size: var(--font-micro);
    line-height: 1.45;
    color: var(--text-muted);
}

/* 屏蔽词管理弹窗（反馈 #5665） */
.chat-block-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: min(36vh, 240px);
    overflow-y: auto;
    margin-bottom: var(--space-10);
}
.chat-block-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel, var(--bg-card));
}
.chat-block-word {
    font-size: var(--font-label);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-block-del {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--accent-crimson, #c44);
    font-size: var(--font-caption);
    cursor: pointer;
    padding: var(--space-2) var(--space-4);
}
.chat-block-add-row {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
.chat-block-add-row .app-input {
    flex: 1;
    min-width: 0;
}
.chat-block-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
.chat-block-empty {
    padding: var(--space-12) var(--space-4);
    font-size: var(--font-label);
    color: var(--text-muted);
    text-align: center;
}

/* ===== 本机账号匣（设置 → 切换账号） ===== */
.av-dialog { max-width: min(392px, 90vw); }
.av-search-wrap { margin-bottom: var(--space-10); }
.av-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    max-height: min(48vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.av-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel, var(--bg-card));
}
.av-item.is-current {
    border-color: var(--border-jade, var(--accent-jade));
    background: var(--bg-glass-jade, var(--bg-panel));
}
.av-item__name {
    font-size: var(--font-body-lg);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
}
.av-item__meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    line-height: 1.55;
    color: var(--text-muted);
}
.av-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    background: var(--bg-active, transparent);
}
.av-badge--cur {
    color: var(--text-jade, var(--accent-jade));
    border-color: var(--border-jade, var(--accent-jade));
}
.av-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
.av-item__actions .av-btn {
    flex: 1 1 auto;
    min-width: 64px;
    height: 34px;
    font-size: var(--font-label);
    letter-spacing: 0.5px;
}
.av-btn--danger { color: var(--text-danger, var(--accent-crimson)) !important; }
.av-empty {
    padding: var(--space-20) var(--space-12);
    text-align: center;
    font-size: var(--font-body);
    color: var(--text-muted);
    line-height: 1.6;
}
.av-note { margin-top: var(--space-12) !important; text-align: left !important; }
.av-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}
.av-tag-chip {
    height: 30px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-label);
    cursor: pointer;
}
.av-tag-chip.is-on {
    border-color: var(--border-jade, var(--accent-jade));
    color: var(--text-jade, var(--accent-jade));
    background: var(--gradient-jade, rgba(22, 128, 106, 0.12));
    font-weight: 600;
}
.av-foot > .modal-btn { flex: 1 1 0; min-width: 0; }

.chat-assist-report-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    letter-spacing: 1px;
    border: 1px solid var(--glass-white-1);
}

.chat-assist-report-status-victory {
    color: var(--ghost-purple-deep);
    background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-blue) 28%, transparent);
}

.chat-assist-report-status-danger {
    color: var(--craft-gold-soft);
    background: color-mix(in srgb, var(--jimo-crimson) 14%, transparent);
    border-color: color-mix(in srgb, var(--jimo-crimson) 32%, transparent);
}

.chat-assist-report-status-neutral {
    color: var(--text-secondary);
    background: var(--glass-white-1);
}

.chat-assist-report-summary {
    color: var(--text-primary);
    font-size: var(--font-body);
    line-height: 1.6;
}

.chat-assist-report-logs {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: 184px;
    overflow-y: auto;
    padding: var(--space-8);
    border-radius: var(--radius-md);
    background: var(--shadow-black-3);
    border: 1px solid var(--glass-white-1);
}

.chat-assist-report-line {
    font-size: var(--font-label);
    line-height: 1.55;
    color: var(--text-secondary);
    padding-left: var(--space-10);
    position: relative;
}

.chat-assist-report-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-gold) 60%, transparent);
}

.chat-assist-report-line.is-intro {
    color: var(--text-gold);
}

.chat-assist-report-line.is-round {
    color: var(--ghost-purple-soft);
}

.chat-assist-report-line.is-reward {
    color: var(--ghost-purple-deep);
}

.chat-assist-report-line.is-danger {
    color: var(--craft-gold-soft);
}

.chat-assist-report-round-tag {
    color: var(--text-gold);
    font-weight: 600;
    margin-right: var(--space-4);
}

.chat-assist-report-emphasis {
    color: var(--text-primary);
    font-weight: 600;
}

.chat-listing-item {
    font-weight: 600;
    font-size: var(--font-body);
}

/* 上架弹窗通知勾选行 */
.market-notify-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) 0;
    font-size: var(--font-label);
}

.market-notify-label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-secondary);
    cursor: pointer;
}

.market-notify-label input[type="checkbox"] {
    accent-color: var(--accent-jade);
}

.market-notify-remain {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

/* 悬浮聊天气泡：顶栏右下角，避开底部探索倍率/操作栏与上架表单 */
.chat-bubble {
    position: fixed;
    top: calc(52px + 10px + env(safe-area-inset-top, 0px));
    right: 12px;
    left: auto;
    bottom: auto;
    max-width: min(280px, calc(100vw - 24px));
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 30%, transparent);
    border-left: 3px solid var(--accent-jade);
    border-radius: var(--radius-md);
    z-index: 850;
    animation: chatBubbleIn 0.3s ease;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 16px var(--shadow-black-2);
    display: flex;
    align-items: flex-start;
    gap: 0;
    pointer-events: auto;
}

.chat-bubble-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) var(--space-6) var(--space-8) var(--space-12);
    cursor: pointer;
    /* 长名与正文同段折行，避免名字独占一行把正文挤成竖排空白（FB5571） */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 聊天气泡关闭：复用 .btn-panel-close，仅压布局 */
.chat-bubble-close.btn-panel-close {
    flex: 0 0 auto;
    margin: var(--space-2) var(--space-2) 0 0;
    margin-left: 0;
}

.chat-bubble:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-jade);
    transform: translateY(-2px);
}

.chat-bubble.hidden {
    display: none;
}

.chat-bubble.fade-out {
    opacity: 0;
    transform: translateY(-8px);
}

.chat-bubble-name {
    color: var(--accent-jade);
    font-weight: 600;
    font-size: var(--font-label);
    margin-right: var(--space-6);
}

.chat-bubble-text {
    color: var(--text-primary);
    font-size: var(--font-label);
    line-height: 1.5;
    /* 与名字同为 inline，限制总行数靠容器 max-width 自然折行 */
}

@media (max-width: 768px) {
    .chat-bubble {
        top: calc(44px + 8px + env(safe-area-inset-top, 0px));
        right: 8px;
        max-width: min(240px, calc(100vw - 16px));
    }
}

@media (max-width: 768px) {
    body.game-page .chat-msg.chat-msg-self,
    body.game-page .chat-msg.chat-msg-other {
        max-width: 94%;
        gap: var(--space-6);
    }

    .chat-msg-avatar {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
        font-size: var(--font-body);
        line-height: 26px;
    }

    .chat-msg-stack {
        max-width: calc(100% - 34px);
    }

    .chat-msg-main {
        font-size: var(--font-micro);
    }

    .chat-msg-bubble {
        padding: var(--space-6) var(--space-10);
    }
}

@keyframes chatBubbleIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===== 响应式 ===== */

/* 角色面板切换按钮 (仅移动端可见) */
.btn-toggle-player {
    display: none;
}

/* 角色面板关闭按钮(仅移动端显示) */
.player-panel-close {
    display: none;
}

/* 移动端遮罩 */
.mobile-overlay {
    display: none;
}

/* --- 顶部入口按实际宽度渐进收纳（见 ui.js layoutHeaderNav），不再整栏 1400 断点隐藏 --- */


/* 平板 (769~1024)：常驻聊天默认隐藏，用户主动点 📌 固定后启用（老逻辑） */
@media (min-width: 769px) and (max-width: 1024px) {
    body:not(.chat-tablet-pinned) .chat-resize-handle {
        display: none;
    }
    .log-mid-pane--chat {
        display: none !important;
        width: var(--chat-inline-width);
        max-width: var(--chat-inline-width);
        flex: 0 0 var(--chat-inline-width);
    }
    body.chat-tablet-pinned:not(.chat-collapsed) .log-mid-pane--chat {
        display: flex !important;
    }
    /* 中小屏已有底部移动导航的"聊天"按钮，顶部 chatBtn 保持隐藏避免重复 */
    body.chat-collapsed #chatBtn {
        display: none;
    }
}

/* 手机 (≤768)：中部双签 修炼日志 | 传音 · 方案 A 与 App 对齐 */
@media (max-width: 768px) {
    .log-mid-tabs {
        display: flex;
    }
    .log-mid-tab {
        padding: var(--space-10) 0 var(--space-10);
        font-size: var(--font-label);
        letter-spacing: 2px;
    }
    .log-mid-body {
        flex-direction: column;
    }
    .log-mid-pane {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }
    .log-mid-pane--chat {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        flex-direction: column;
    }
    /* 手机签切换：尊重 [hidden]；PC 的 chat-collapsed 在手机不藏传音签 */
    .log-mid-pane[hidden],
    .log-mid-pane--chat[hidden] {
        display: none !important;
    }
    body.chat-collapsed .log-mid-pane--chat:not([hidden]) {
        display: flex !important;
    }
    body.chat-collapsed .log-mid-pane--chat:not([hidden]) .inline-chat {
        display: flex !important;
    }
    .inline-chat {
        width: 100%;
        border-left: 0;
    }
    body.chat-collapsed #chatBtn {
        display: none;
    }
    /* 操作栏只跟「修炼日志」：切到传音签时隐藏，把高度留给聊天 */
    .log-area--chat ~ .action-bar {
        display: none !important;
    }
    .log-area--chat {
        /* 无操作栏时日志区吃满 main-panel 剩余高度 */
        flex: 1 1 auto;
        min-height: 0;
    }
    /* 传音签保留气血/灵力状态栏，方便聊天时也能直接查看；只收起跑马灯。 */
    .main-panel.main-panel--chat #dungeonNoticeContainer {
        display: none !important;
    }
    /*
     * 方案 A（对齐 App 嵌入态）：
     * - 双签保持加高，不再压矮
     * - 隐藏「传音筒」标题条（中部签已标明传音；回日志点「修炼日志」即可）
     * - 刷新并入频道胶囊轨右侧
     */
    .log-area--chat .log-mid-tab {
        padding: var(--space-10) 0 var(--space-10);
        font-size: var(--font-label);
    }
    .log-area--chat .inline-chat .chat-shell-header {
        display: none;
    }
    .log-area--chat .inline-chat .chat-tabs-refresh {
        display: inline-flex !important;
    }
    .log-area--chat .inline-chat .inline-chat-tabs {
        padding: var(--space-10) var(--space-10) var(--space-6);
    }
    .log-area--chat .chat-composer-foot {
        padding: var(--space-6) var(--space-10) var(--space-8);
        gap: var(--space-6);
    }
    .log-area--chat .inline-chat .chat-messages {
        flex: 1 1 auto;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    body {
        overflow: hidden;
    }

    /* --- Header 紧凑化（金线符箓栏 · 移动） --- */
    .game-header {
        --header-action-h: 32px;
        padding: 0 var(--space-8);
        padding-top: var(--lv-native-statusbar-top, 0px);
        height: calc(44px + var(--lv-native-statusbar-top, 0px));
    }

    .header-left {
        gap: var(--space-6);
        /* 小屏同样：左侧只占内容，不 stretch 空白；否则 768 断点会突然把功能入口全收进「更多」 */
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - 76px);
        overflow: hidden;
    }

    .header-left > .btn-toggle-player,
    .header-left > .header-logo-block {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .header-meta {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    /* #6700：手机顶栏去掉境界，把宽留给灵历年。!important 压过主题里的 display:inline-flex */
    .header-realm {
        display: none !important;
    }

    .header-gametime {
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
        padding: 0 var(--space-10);
        font-size: var(--font-micro);
    }

    /* 入口都收完仍不够：才允许时间限宽精简 */
    .game-header.is-header-tight .header-gametime {
        flex: 0 1 auto;
        max-width: min(42vw, 148px);
        padding: 0 var(--space-8);
    }

    .game-header.is-header-mini-time .header-logo-mark {
        display: none;
    }

    .game-header.is-header-mini-time .header-gametime {
        flex: 0 1 auto;
        max-width: min(30vw, 88px);
        padding: 0 var(--space-8);
        font-size: var(--font-micro);
    }

    .header-right {
        /* 承接剩余宽度；先藏低频入口，再保「更多」最小宽 */
        flex: 1 1 0%;
        min-width: 72px;
        gap: var(--space-4);
        z-index: 5;
    }

    .header-nav {
        flex: 1 1 auto;
        justify-content: flex-end;
        min-width: 0;
    }

    .header-logo-block {
        gap: var(--space-6);
    }

    .header-logo-mark {
        height: 14px;
        width: 2px;
    }

    .header-logo {
        font-size: var(--font-title);
        letter-spacing: 2px;
    }

    .header-meta {
        gap: var(--space-4);
    }

    .header-gametime {
        height: 22px;
        font-size: var(--font-micro);
        padding: 0 var(--space-10);
    }

    .header-wb-status {
        height: 22px;
        font-size: var(--font-micro);
        padding: 0 var(--space-6);
    }

    .header-player-card,
    .header-player-name {
        display: none;
    }

    .game-header > .header-left > .btn-toggle-player {
        padding: 0 var(--space-8);
        font-size: var(--font-caption);
    }

    .game-header .header-more-btn.btn-icon {
        min-width: 0;
        padding: 0 var(--space-10);
    }

    .game-header > .header-left > .btn-toggle-player.btn-icon {
        min-width: 0;
    }

    /* 顶栏内入口不受通用 40px 触控底限制，与「更多」保持 --header-action-h */
    .game-header .btn-icon {
        min-height: 0;
        min-width: 0;
    }

    .btn-icon {
        padding: var(--space-8) var(--space-10);
        font-size: var(--font-label);
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .game-header .header-btn-group .btn-icon {
        padding: 0 var(--space-10);
        min-height: 0;
        min-width: 0;
        height: 100%;
    }

    /* #9947：手机端 Toast 下移，避开顶部血/灵/攻/防状态栏（战斗需实时看属性） */
    .toast-container {
        top: calc(env(safe-area-inset-top, 0px) + 60px);
    }

    /* --- 移动端角色状态栏 --- */
    .mobile-status-bar {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-6);
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        cursor: pointer;
        transition: background 0.2s;
        position: relative;
        z-index: 850;
    }

    .mobile-status-bar:active {
        background: var(--bg-card-hover);
    }

    .msb-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-width: 0;
        color: var(--text-secondary);
        font: inherit;
        font-size: var(--font-caption);
        font-family: var(--font-serif);
        box-sizing: border-box;
        margin: 0;
        padding: var(--space-2) var(--space-4);
        overflow: hidden;
        border: none;
        border-radius: var(--radius-xs);
        background: transparent;
        box-shadow: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .msb-hp,
    .msb-mp,
    .msb-spirit,
    .msb-toxin {
        flex: 1 1 0;
        min-height: 24px;
        appearance: none;
    }

    .msb-hp,
    .msb-mp,
    .msb-spirit,
    .msb-toxin {
        cursor: pointer;
        transition: background 0.15s;
    }

    .msb-hp:active,
    .msb-mp:active,
    .msb-spirit:active,
    .msb-toxin:active {
        background: var(--glass-white-1);
    }

    .msb-atk,
    .msb-def {
        flex: 1 1 0;
        min-height: 24px;
        padding-inline: var(--space-2);
    }

    .msb-label {
        color: var(--text-muted);
        font-size: var(--font-micro);
        flex-shrink: 0;
        opacity: 0.7;
    }

    .msb-value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        line-height: 1.1;
    }

    .msb-hp {
        color: var(--danger-color);
    }

    .msb-hp.msb-warn {
        color: var(--accent-orange);
    }

    .msb-hp.msb-danger {
        color: var(--danger-color);
        font-weight: 600;
        background: color-mix(in srgb, var(--accent-crimson) 12%, transparent);
    }

    .msb-mp {
        color: var(--accent-blue);
    }

    .msb-atk {
        color: var(--craft-gold-bright);
    }

    .msb-def {
        color: color-mix(in srgb, var(--craft-gold) 50%, var(--text-muted));
    }

    .msb-spirit {
        color: var(--accent-purple);
    }

    .msb-toxin {
        color: var(--text-gray);
        border: 1px solid color-mix(in srgb, var(--craft-gold) 24%, transparent);
        background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
    }

    .msb-toxin.toxin-state-mid {
        color: var(--text-gold);
    }

    .msb-toxin.toxin-state-high {
        color: var(--accent-orange);
    }

    .msb-toxin.toxin-state-critical {
        color: var(--text-red);
        border-color: color-mix(in srgb, var(--text-red) 36%, transparent);
        background: color-mix(in srgb, var(--text-red) 10%, transparent);
        font-weight: 600;
    }

    .msb-preset-list { display: flex; flex-direction: column; gap: var(--space-8); }
    .msb-preset-opt {
        display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
        width: 100%; text-align: left; padding: var(--space-12);
        min-height: 56px; border: 1px solid var(--border-color);
        border-radius: var(--radius-md); background: transparent;
        color: var(--text-primary); font: inherit; cursor: pointer;
    }
    .msb-preset-opt strong { font-size: var(--font-action); font-weight: 600; }
    .msb-preset-opt span { font-size: var(--font-label); color: var(--text-muted); }
    .msb-preset-opt.is-on {
        border-color: color-mix(in srgb, var(--text-gold) 50%, var(--border-color));
        background: color-mix(in srgb, var(--text-gold) 10%, transparent);
    }
    .msb-preset-opt.is-on strong { color: var(--text-gold); }


    /* --- 角色面板切换按钮 --- */
    .btn-toggle-player {
        display: flex;
    }

    .player-panel-close {
        display: inline-block;
    }

    /* --- 角色面板变为左侧抽屉 --- */
    .player-panel {
        position: fixed;
        top: calc(44px + var(--lv-native-statusbar-top, 0px));
        left: 0;
        bottom: 0;
        width: 220px;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        border-right: 1px solid var(--border-color);
        box-shadow: 4px 0 20px var(--shadow-black-3);
    }

    .player-panel.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px var(--shadow-black-2);
    }

    /* 角色抽屉同样避免 iOS fixed + transform 的命中层偏移。 */
    html.lv-ios-touch .player-panel,
    html.lv-ios-touch .player-panel.mobile-open {
        transform: none !important;
        backface-visibility: visible;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, visibility 0s linear 0.18s;
    }

    html.lv-ios-touch .player-panel.mobile-open {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    /* --- 遮罩层 --- */
    .mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        top: calc(44px + var(--lv-native-statusbar-top, 0px));
        background: transparent;
        backdrop-filter: blur(0px);
        z-index: 1099;
        pointer-events: none;
        transition: background 0.3s ease, backdrop-filter 0.3s ease;
    }

    .mobile-overlay.active {
        background: var(--shadow-black-1);
        backdrop-filter: blur(2px);
        pointer-events: auto;
    }

    /* --- 主面板全宽 --- */
    .game-body {
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    .main-panel {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .log-panel {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: var(--space-10) var(--pattern-page-inline);
    }

    .log-content p {
        font-size: var(--font-body);
        line-height: 1.6;
        padding: var(--space-4) var(--space-8);
    }

    .log-content .arena-battle-log-row.log-battle {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: var(--space-4) var(--space-8);
        font-size: var(--font-body);
        line-height: 1.6;
    }

    /* --- 操作栏紧凑化 --- [v6] 已废弃：操作区由 container query 接管响应式 */
    .action-bar {
        flex-shrink: 0;
    }

    /* --- 右侧面板变为全屏覆盖 --- */
    .side-panel {
        position: fixed;
        top: calc(44px + var(--lv-native-statusbar-top, 0px));
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        z-index: 1001;
        border-left: none;
        max-height: calc(100dvh - 44px - var(--lv-native-statusbar-top, 0px));
        min-height: 0;
        overflow: hidden;
        transition: transform 0.3s ease, opacity 0.25s ease;
        /* 非 iOS 端保留稳定合成层，避免过渡期间临时提升导致命中坐标抖动。
           iOS 端在下方覆盖规则中取消 transform，避免 fixed body/子面板组合偏移。
           注意:不叠加 will-change，避免低端设备多面板叠加时长期占用合成层显存。 */
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .side-panel.hidden {
        display: flex !important;
        transform: translateY(100%);
        opacity: 0;
        position: fixed;
        pointer-events: none;
    }

    /* iOS Safari：fixed 面板叠加 transform 合成层后，地址栏伸缩可能让绘制坐标
       与命中坐标分离。iOS 端用可见性 + 淡出切换，保持按钮和文字在同一坐标系。 */
    html.lv-ios-touch .side-panel,
    html.lv-ios-touch .side-panel.hidden {
        transform: none !important;
        backface-visibility: visible;
        transition: opacity 0.18s ease, visibility 0s linear 0.18s;
    }

    html.lv-ios-touch .side-panel.hidden {
        visibility: hidden;
    }

    html.lv-ios-touch .side-panel:not(.hidden) {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }

    .side-panel.side-panel--hosted {
        top: 0;
        width: 100%;
        max-width: 100%;
        max-height: 100dvh;
    }

    body.chat-composer-focused .side-panel:not(.hidden) {
        top: calc(44px + var(--lv-native-statusbar-top, 0px) + var(--lv-chat-visual-top, 0px));
        bottom: auto;
        height: max(0px, calc(var(--lv-chat-visual-height, 100dvh) - 44px - var(--lv-native-statusbar-top, 0px)));
        max-height: max(0px, calc(var(--lv-chat-visual-height, 100dvh) - 44px - var(--lv-native-statusbar-top, 0px)));
    }

    body.chat-composer-focused .side-panel.side-panel--hosted:not(.hidden) {
        top: 0;
        bottom: 0;
        height: auto;
        max-height: 100dvh;
    }

    body.chat-composer-focused #chatPanel .chat-scroll {
        /* 面板已通过 --lv-chat-visual-height 整体收缩到键盘上方，
           输入区高度本身就在可视区内，无需再叠加键盘高度。 */
        scroll-padding-bottom: 72px;
    }

    body.chat-composer-focused #chatPanel .chat-input-tray {
        /* 同上：面板底部已落在键盘顶部，这里只保留底部安全区呼吸空间，
           再叠加 --lv-chat-keyboard-inset 会造成双重补偿，把输入框抬得过高。 */
        padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    /* 行内聊天(探索页内嵌)：仅在「视口未随键盘缩小」时由 JS 写入非零
       --lv-chat-keyboard-inset（见 getChatKeyboardViewportInset 的 alreadyResized 扣减）。
       已 resizes-content / adjustResize 时 inset=0，避免双重补偿把 .chat-messages 压成 0 高。 */
    body.chat-composer-focused .inline-chat .chat-input-tray {
        padding-bottom: calc(var(--space-12) + var(--lv-chat-keyboard-inset, 0px) + env(safe-area-inset-bottom));
        position: sticky;
        bottom: 0;
        z-index: 2;
    }
    /* 打字时给行内消息区留最低高度，防止剩余空间被底栏/操作区吃光后列表「整页空白」 */
    body.chat-composer-focused .inline-chat .chat-messages {
        min-height: 96px;
        flex: 1 1 auto;
    }

    /* 道友私聊：与全频传音同一套 visualViewport 收缩，输入条落在键盘上方 */
    body.chat-composer-focused #friendPanel .friend-chat-messages {
        scroll-padding-bottom: 88px;
    }
    body.chat-composer-focused #friendPanel .friend-chat-input.chat-input-bar {
        position: sticky;
        bottom: 0;
        z-index: 3;
        padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
    }

    .side-panel-resize-handle {
        display: none;
    }

    .side-content {
        flex: 1 1 auto;
        min-height: 0;
        padding: var(--space-12);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    /* --- 登录页自适应 --- */
    .login-hero {
        grid-template-columns: 1fr;
        gap: var(--space-20);
        padding: 0 var(--space-16);
    }

    .login-card {
        width: calc(100vw - 32px);
        max-width: 380px;
        padding: var(--space-24) var(--space-20);
    }

    .landing-content {
        padding-top: var(--space-20);
        padding-bottom: var(--space-32);
    }

    .landing-section {
        padding: var(--space-20) var(--space-16);
        border-radius: var(--radius-xl);
    }

    .landing-section h2 {
        font-size: var(--font-heading);
    }

    .hero-banner {
        gap: var(--space-10);
        flex-wrap: wrap;
    }

    .hero-title {
        font-size: var(--font-hero);
        line-height: 1.32;
    }

    .hero-stage {
        grid-template-columns: 1fr;
    }

    .world-stage,
.region-grid,
.faction-row {
        grid-template-columns: 1fr;
    }

    /* --- Toast --- */
    .toast-container {
        top: var(--mobile-popup-safe-top);
        left: 50%;
        right: auto;
        width: calc(100vw - 20px);
    }

    .toast {
        max-width: 100%;
        font-size: var(--font-body);
        padding: var(--space-10) var(--space-14);
        text-align: center;
    }

    .inventory-item {
        padding: var(--space-8);
    }

    .shop-item {
        padding: var(--space-8);
    }

    /* 死亡页为全屏状态页，不套弹窗外边距 */
    .death-overlay {
        padding: 0;
    }
}


/* ===== 转世重修 ===== */
.samsara-panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-4) var(--space-16);
    overflow-y: auto;
    height: calc(100% - 44px);
}

/* 轮回盘 hero：五维星盘（盘即加点预览）+ 汇率锚 */
.samsara-wheel-card {
    border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-card) 84%, transparent);
    padding: var(--space-10) var(--space-10) var(--space-8);
}

.samsara-wheel-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--space-2) 0;
}

.samsara-wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    width: 96px;
}

.samsara-wheel-center__num {
    color: var(--text-gold);
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.samsara-wheel-center__cap {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
}

.samsara-wheel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-6);
}

.samsara-wchip {
    padding: 2px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--font-caption);
    white-space: nowrap;
}

.samsara-wchip--world {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
}

.samsara-wchip--max {
    border-color: color-mix(in srgb, var(--accent-jade) 35%, transparent);
    color: var(--text-jade);
}

.samsara-rate-anchor {
    margin-top: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
    text-align: center;
}

.samsara-rate-anchor b {
    color: var(--text-gold);
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.samsara-rate-q {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

.samsara-auction-warn {
    margin: var(--space-8) 0 0;
    color: var(--text-danger);
    font-size: var(--font-body);
    line-height: 1.65;
}

.samsara-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    background: color-mix(in srgb, var(--bg-card) 84%, transparent);
}

.samsara-rules-note {
    padding: var(--space-10) var(--space-10);
    border: 1px dashed color-mix(in srgb, var(--accent-gold) 28%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.65;
}

.samsara-rules-note b {
    color: var(--text-gold);
}

/* 轮回记录（近 20 世）折叠区。
   不用 <details>：Chrome 151 起 flex 容器内 details 的内容盒高度不回传（只剩 padding+border），
   折叠条会被压成 2px。改用 button + hidden 列表手动切换。 */
.samsara-history-fold {
    margin-top: var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-card) 84%, transparent);
}

.samsara-history-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    min-height: var(--pattern-touch-target);
    padding: var(--space-8) var(--space-12);
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--text-gold);
    font-size: var(--font-label);
    font-weight: 700;
    text-align: left;
}

.samsara-history-toggle > .samsara-section-sub {
    color: var(--text-muted);
    font-weight: 400;
}

.samsara-history-caret {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.samsara-history-fold.is-open .samsara-history-caret {
    transform: rotate(45deg);
}

.samsara-history-list {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-12) var(--space-12);
}

.samsara-history-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
    font-size: var(--font-caption);
    color: var(--text-secondary);
}

.samsara-history-row > .samsara-history-idx {
    color: var(--text-muted);
    font-family: ui-monospace, var(--font-mono, monospace);
    font-size: var(--font-micro);
}

.samsara-history-row > .samsara-history-pts {
    color: var(--text-gold);
    font-weight: 700;
    white-space: nowrap;
}

/* 轮回面板内可折叠的境界/轮回加成详表 */
.samsara-detail-toggle {
    cursor: pointer;
    color: var(--text-gold);
    font-weight: 700;
    list-style: none;
}
.samsara-detail-toggle::-webkit-details-marker {
    display: none;
}
.samsara-detail-tables > .samsara-detail-toggle::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: var(--space-6);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    opacity: 0.6;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}
.samsara-detail-tables[open] > .samsara-detail-toggle::before {
    transform: rotate(0deg);
}
.samsara-detail-tables .guide-table {
    font-size: var(--font-label);
}

.samsara-section {
    padding: var(--space-10);
}

.samsara-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
    color: var(--text-primary);
    font-weight: 700;
}

.samsara-section-sub {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-weight: 400;
}

.samsara-point-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* 加点行：% 主显 + 点数输入，进度条即实时预览 */
.samsara-alloc-row {
    padding: var(--space-4) var(--space-8) var(--space-8);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
}

.samsara-alloc-top {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.samsara-alloc-name {
    flex: none;
    color: var(--text-primary);
    font-size: var(--font-body);
    font-weight: 600;
}

.samsara-alloc-pct {
    flex: none;
    color: var(--text-gold);
    font-family: var(--font-mono);
    font-size: var(--font-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 64px;
    text-align: right;
}

.samsara-alloc-pct--full {
    color: var(--text-jade);
}

.samsara-alloc-bar {
    margin-top: var(--space-4);
    height: 6px;
    border-radius: 999px;
    background: var(--glass-white-1);
    overflow: hidden;
}

.samsara-alloc-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-gold) 55%, transparent),
        color-mix(in srgb, var(--accent-gold) 88%, transparent));
    transition: width .15s ease-out;
}

.samsara-alloc-fill--full {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-jade) 55%, transparent),
        color-mix(in srgb, var(--accent-jade) 85%, transparent));
}

.samsara-point-input {
    flex: 1 1 auto;
    width: 90px;
    min-width: 0;
    max-width: 150px;
    margin-left: auto;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--bg-lighter);
    color: var(--text-primary);
    text-align: right;
    padding: 0 var(--space-8);
    font-size: var(--font-body);
}

.samsara-point-input:disabled {
    opacity: 0.55;
}

.samsara-allocation-result {
    margin-top: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border: 1px dashed color-mix(in srgb, var(--accent-gold) 24%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.6;
}

.samsara-actions {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.samsara-actions .modal-btn {
    flex: 1 1 0;
}

.samsara-actions--final {
    margin-top: 0;
}

/* 转世决策卡：可得点 hero + 约束 chips + 危险主钮 */
.samsara-rebirth-card {
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 32%, var(--border-color));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-card) 84%, transparent);
    padding: var(--space-10);
}

.samsara-rebirth-hero {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.samsara-rebirth-num {
    color: var(--text-gold);
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.samsara-rebirth-num--zero {
    color: var(--text-muted);
    font-size: 24px;
}

.samsara-rebirth-cap {
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.5;
}

.samsara-rebirth-note {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.samsara-rebirth-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-10);
}

.samsara-mchip {
    padding: 2px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: var(--font-caption);
    white-space: nowrap;
}

.samsara-rebirth-btn {
    width: 100%;
    margin-top: var(--space-12);
    height: 40px;
    letter-spacing: 3px;
}

/* 得失总览：保留 vs 重置 双栏 */
.samsara-kd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.samsara-kd-col {
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.samsara-kd-col--keep {
    border-color: color-mix(in srgb, var(--accent-jade) 30%, var(--border-color));
}

.samsara-kd-col--lose {
    border-color: color-mix(in srgb, var(--accent-crimson) 30%, var(--border-color));
}

.samsara-kd-t {
    margin-bottom: var(--space-2);
    color: var(--text-jade);
    font-size: var(--font-caption);
    font-weight: 600;
    letter-spacing: 1px;
}

.samsara-kd-col--lose .samsara-kd-t {
    color: var(--text-danger);
}

.samsara-kd-i {
    position: relative;
    padding-left: var(--space-10);
    color: var(--text-secondary);
    font-size: var(--font-caption);
    line-height: 1.75;
}

.samsara-kd-i::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-jade) 70%, transparent);
}

.samsara-kd-col--lose .samsara-kd-i::before {
    background: color-mix(in srgb, var(--accent-crimson) 70%, transparent);
}

.samsara-kd-grid--dialog {
    margin-top: var(--space-10);
    text-align: left;
}

/* 轮回阶梯：13 境 you-are-here */
.samsara-lrow {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xs);
    font-size: var(--font-label);
}

.samsara-lrow + .samsara-lrow {
    margin-top: var(--space-2);
}

.samsara-lrow__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1.5px solid var(--text-muted);
}

.samsara-lrow--past .samsara-lrow__dot {
    border-color: transparent;
    background: color-mix(in srgb, var(--accent-jade) 65%, transparent);
}

.samsara-lrow--cur {
    border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 9%, transparent);
}

.samsara-lrow--cur .samsara-lrow__dot {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
}

.samsara-lrow__name {
    flex: none;
    width: 58px;
    color: var(--text-secondary);
}

.samsara-lrow--cur .samsara-lrow__name {
    color: var(--text-gold);
    font-weight: 700;
}

.samsara-lrow--past .samsara-lrow__name,
.samsara-lrow--past .samsara-lrow__gain,
.samsara-lrow--past .samsara-lrow__cost {
    color: var(--text-muted);
}

.samsara-lrow__you {
    flex: none;
    padding: 1px 7px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, transparent);
    border-radius: 999px;
    color: var(--text-gold);
    font-size: var(--font-caption);
    letter-spacing: 1px;
}

.samsara-lrow__gain {
    margin-left: auto;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-caption);
    font-variant-numeric: tabular-nums;
}

.samsara-lrow--cur .samsara-lrow__gain,
.samsara-lrow--cur .samsara-lrow__cost {
    color: var(--text-gold);
    font-weight: 600;
}

.samsara-lrow__cost {
    flex: none;
    width: 78px;
    text-align: right;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-caption);
    font-variant-numeric: tabular-nums;
}

/* 转世确认 gc-mid 内的 loot hero 与得失注 */
.samsara-gc-loot-hero {
    margin-top: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-panel, var(--bg-card));
    text-align: center;
}

.samsara-gc-loot-k {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.samsara-gc-loot-v {
    margin-top: var(--space-2);
    color: var(--text-gold);
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.samsara-gc-loot-note {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
}

.samsara-gc-note {
    margin-top: var(--space-8);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 768px) {
    .samsara-kd-grid {
        grid-template-columns: 1fr;
    }

    .samsara-kd-grid--dialog {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 768px) {
    /* 侧栏/角色面板打开：锁主页滚动（配合 ui.js setMobileBackgroundScrollLock） */
    html.mobile-no-scroll {
        overflow: hidden !important;
        overscroll-behavior: none;
        height: 100%;
    }
    body.mobile-no-scroll {
        overflow: hidden !important;
        overscroll-behavior: none;
        /* position/top/width 由 JS 设为 fixed 冻结视口，避免 iOS 橡皮筋穿透 */
        touch-action: none;
    }
    /* 主页滚动区在锁定期禁止触摸滚动；侧栏内部单独放行 */
    body.mobile-no-scroll .main-panel,
    body.mobile-no-scroll .log-content,
    body.mobile-no-scroll .action-bar {
        overscroll-behavior: none;
        touch-action: none;
    }
    body.mobile-no-scroll .side-panel,
    body.mobile-no-scroll .side-panel .side-content,
    body.mobile-no-scroll #playerPanel.mobile-open,
    body.mobile-no-scroll .modal-overlay,
    body.mobile-no-scroll .modal-content {
        /* 允许侧栏内纵向列表 + 顶部胶囊 Tab 横向滑动 */
        touch-action: pan-x pan-y;
        overscroll-behavior: contain;
    }
    /* 顶部筛选 Tab 明确声明横滑，避免被祖先 touch-action 收窄 */
    body.mobile-no-scroll .inventory-filter-tabs,
    body.mobile-no-scroll .ip-filter-tabs,
    body.mobile-no-scroll .chat-filter-tabs,
    body.mobile-no-scroll .friend-filter-tabs,
    body.mobile-no-scroll .gc-panel-tabs,
    body.mobile-no-scroll .chat-tabs,
    body.mobile-no-scroll .technique-volume-tabs {
        touch-action: pan-x pan-y;
    }
    /* 输入控件必须能点、能聚焦出键盘（覆盖 body touch-action:none） */
    body.mobile-no-scroll input,
    body.mobile-no-scroll textarea,
    body.mobile-no-scroll select,
    body.mobile-no-scroll [contenteditable="true"] {
        touch-action: auto;
    }
    .side-panel {
        overscroll-behavior: contain;
    }
    .side-panel .side-content {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    #playerPanel.mobile-open {
        overscroll-behavior: contain;
    }
}

/* #7242 iPad/短屏横屏：消息区保底，避免头栏+底栏把传音压成一条缝 */
@media (orientation: landscape) and (max-height: 900px) {
    .inline-chat .chat-messages {
        min-height: 140px;
        flex: 1 1 auto;
    }
}

/* ===== 横屏适配：手机横屏时压缩 header/action-bar，给主内容更多空间 ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .game-header {
        padding: var(--space-2) var(--space-8);
        min-height: 36px;
    }
    .action-bar {
        --action-bar-h: 36px;
        padding: var(--space-4) var(--space-8);
    }
    .mobile-status-bar {
        padding: var(--space-2) var(--space-6);
    }
    .log-content {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* ============================================================
 * 操作区 v6 重设计（追加在末尾，高特异性覆盖旧规则）
 * 设计语言：参考页面 modal-action-btn 描边配方
 * 高度一轨：主操作与功能入口统一 --action-bar-h，避免左右参差
 * ============================================================ */

/* 容器：电脑端保持原横排（主操作 + 功能格同一行）；收起/两行只在手机断点启用 */
.action-bar{
  --action-bar-h: 44px;
  container-type:inline-size;
  display:flex;flex-direction:row;align-items:center;
  gap:var(--space-10);padding:var(--space-10) var(--space-14) var(--space-12);
  background:var(--bg-panel);
  border-top:1px solid var(--border-color);
  position:relative;flex-wrap:nowrap;
  flex-shrink:0;
}
.action-bar.action-bar--fn-stacked,
.action-bar:has(#meditationBar:not(.hidden)){
  flex-wrap:wrap;
}
.action-bar::before{
  content:"";position:absolute;top:-1px;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);
  opacity:.3;
}

/* #6683：居中小框，勿整行扩命中以免盖住冥想。可见 ≥28，框外不再伪元素外扩 */
.action-bar-collapse{
  position:relative;
  display:none;align-items:center;justify-content:center;gap:var(--space-4);
  width:auto;max-width:90%;align-self:center;flex:0 0 auto;
  height:auto;min-height: 28px;min-width: 44px;box-sizing:border-box;
  margin:var(--space-4) auto;
  padding:var(--space-6) var(--space-12);
  border:1px solid var(--color-border-default);
  border-radius:var(--radius-sm);
  background:var(--color-bg-subtle);
  color:var(--text-muted);font-family:var(--font-serif);
  font-size:var(--font-caption);line-height:1.1;cursor:pointer;
}
.action-bar-collapse:hover{color:var(--text-secondary);border-color:var(--color-border-emphasis)}
.action-bar-collapse-ic{
  display:inline-block;width:0;height:0;flex:0 0 auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7;
}
.action-bar.is-collapsed .action-bar-collapse-ic{
  border-top:0;border-bottom:5px solid currentColor;
}
.action-bar-body{
  display:flex;flex-direction:row;align-items:flex-start;
  gap:var(--space-10);padding:0;width:auto;min-width:0;flex:1 1 auto;
  flex-wrap:wrap;
}
.action-bar-controls{
  display:flex;flex-direction:row;align-items:center;gap:var(--space-8);
  width:auto;min-width:0;max-width:100%;flex:0 1 auto;flex-wrap:wrap;
}

/* 主操作行：够宽时与工具同一横排；挤不下时工具整组换到下一行 */
.action-group.action-group--primary{
  display:flex;align-items:center;gap:var(--space-8);
  padding:0;background:transparent;border:none;border-radius:0;
  flex-wrap: nowrap;flex:1 1 auto;min-width:0;max-width: 100%;
}
.action-group.action-group--tools{
  display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;
  padding:0;background:transparent;border:none;
  flex:0 0 auto;width:auto;min-width:min(100%, min-content);max-width:100%;
}
.action-bar .btn-bail{
  flex:0 0 auto;
}
.action-group--primary > i{flex: 0 0 auto}

/* 冥想/探索/保释：扁平描边（对齐 modal-btn，无渐变/无投影/无实心填充） */
.btn-action.btn-action--primary{
  flex: 1 1 auto;min-width: 0;
  display:flex;align-items:center;justify-content:center;gap:var(--space-6);
  height:var(--action-bar-h);box-sizing:border-box;padding:0 var(--space-12);
  border:1px solid transparent;background:transparent;border-radius:var(--radius-md);
  font-family:var(--font-serif);font-size:var(--font-body);font-weight:600;letter-spacing:1px;
  cursor:pointer;white-space: nowrap;
  box-shadow:none;filter:none;text-shadow:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease,opacity .12s ease;
  min-width:0;
  /* 防止被 flex 压扁后图标与文字叠成一团 */
  overflow: hidden;
}
.btn-action.btn-action--primary .btn-ic{width:15px;height:15px;flex-shrink:0;opacity:.9}
.btn-action.btn-action--primary:active{opacity:.88}
.btn-action.btn-meditate{
  border-color:color-mix(in srgb,var(--accent-jade) 40%,transparent);
  color:var(--text-jade);
  background:color-mix(in srgb,var(--accent-jade) 12%,transparent);
}
.btn-action.btn-meditate:hover{
  border-color:color-mix(in srgb,var(--accent-jade) 55%,transparent);
  background:color-mix(in srgb,var(--accent-jade) 18%,transparent);
}
.btn-action.btn-meditate.meditating{
  border-color:color-mix(in srgb,var(--accent-jade) 50%,transparent);
  background:color-mix(in srgb,var(--accent-jade) 16%,transparent);
  pointer-events:none;
}
.btn-action.btn-explore{
  border-color:color-mix(in srgb,var(--accent-gold) 40%,transparent);
  color:var(--text-gold);
  background:color-mix(in srgb,var(--accent-gold) 12%,transparent);
}
/* #7936：底栏够宽时锁探索键宽度，长文案省略，避免撑走右侧倍率/自动。12.5em 约等于「探索(-10神识)」含图标 */
@container (min-width: 781px) {
  .action-group.action-group--primary > .btn-action.btn-explore {
    flex: 0 0 12.5em;
    min-width: 12.5em;
    max-width: 12.5em;
  }
}
.btn-action.btn-explore:hover{
  border-color:color-mix(in srgb,var(--accent-gold) 55%,transparent);
  background:color-mix(in srgb,var(--accent-gold) 18%,transparent);
}
.btn-action.btn-explore.auto-exploring{
  border-color:color-mix(in srgb,var(--accent-purple) 45%,transparent);
  color:var(--text-purple,var(--accent-purple));
  background:color-mix(in srgb,var(--accent-purple) 12%,transparent);
  /* #7054：自动探索中须能点主按钮停，不能锁 pointer-events */
  animation:autoExplorePulse 2s ease-in-out infinite;
}
.btn-action.btn-explore #exploreBtnLabel{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.btn-action.btn-bail{
  border-color:color-mix(in srgb,var(--accent-crimson) 40%,transparent);
  color:var(--text-red,var(--accent-crimson));
  background:color-mix(in srgb,var(--accent-crimson) 12%,transparent);
}
.btn-action.btn-bail:hover{
  border-color:color-mix(in srgb,var(--accent-crimson) 55%,transparent);
  background:color-mix(in srgb,var(--accent-crimson) 18%,transparent);
}

/* 倍率选择器 trigger */
.explore-multiplier-select{flex: 0 0 auto;position:relative;margin-left:0}
.explore-multiplier-trigger{
  display:flex;align-items:center;justify-content:center;
  min-width:46px;height:var(--action-bar-h);box-sizing:border-box;padding:0 var(--space-8);
  border:1px solid color-mix(in srgb,var(--accent-gold) 35%,var(--border-color));
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--accent-gold) 8%,transparent);
  cursor:pointer;
  font-family:var(--font-mono);font-size:var(--font-body);font-weight:600;color:var(--text-gold);
  box-shadow:none;filter:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.explore-multiplier-trigger::after{
  content:"";display:inline-block;width:0;height:0;margin-left:var(--space-4);
  border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:3px solid var(--text-muted);opacity:.4;
}
.explore-multiplier-trigger:hover{
  border-color:color-mix(in srgb,var(--accent-gold) 50%,var(--border-color));
  background:color-mix(in srgb,var(--accent-gold) 14%,transparent);
}

/* 开关 */
.adventure-toggle{
  display:flex;align-items:center;justify-content:center;gap:var(--space-6);
  box-sizing:border-box;padding:0 var(--space-12);margin-left:0;
  min-height:var(--action-bar-h);height:var(--action-bar-h);
  border:1px solid var(--border-color);border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--text-primary) 3%,transparent);
  cursor:pointer;box-shadow:none;filter:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
  /* #9971：iOS Safari 对 label 的固定 height/flex 拉伸不可靠，靠 min-height + stretch */
  align-self:stretch;
}
.adventure-toggle input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:26px;height:14px;
  border-radius:var(--radius-pill);background:rgba(42,42,38,.18);position:relative;
  transition:background 160ms var(--ease);cursor:pointer;margin:0;
}
.adventure-toggle input[type="checkbox"]::after{
  content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform 160ms var(--ease);
}
.adventure-toggle input[type="checkbox"]:checked{background:var(--accent-jade)}
.adventure-toggle input[type="checkbox"]:checked::after{transform:translateX(12px)}
.adventure-toggle-label{font-size:var(--font-label);color:var(--text-muted)}
/* 自动探索开关：扁平描边，运行态仅加深 tint */
.auto-explore-toggle{
  flex: 0 0 auto;
  height: var(--action-bar-h);
  min-height: var(--action-bar-h);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-jade) 35%, var(--border-color));
  box-shadow: none;
  filter: none;
  transition: color .12s, border-color .12s, background .12s;
}
.auto-explore-toggle:hover{
  color: var(--text-jade);
  background: color-mix(in srgb, var(--accent-jade) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-jade) 50%, var(--border-color));
}
.auto-explore-toggle input[type="checkbox"]{accent-color: var(--accent-jade)}
.auto-explore-toggle input[type="checkbox"]:checked{background: var(--accent-jade)}
.auto-explore-toggle .adventure-toggle-label{font-weight: 600;}
.auto-explore-toggle.auto-active{
  color: var(--text-jade);
  border-color: color-mix(in srgb, var(--accent-jade) 50%, var(--border-color));
  background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
  box-shadow: none;
}
.auto-explore-toggle.auto-active .adventure-toggle-label{color: var(--text-jade);font-weight: 700;}

/* 设置按钮 */
.btn-setting{
  width:var(--action-bar-h);height:var(--action-bar-h);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid var(--border-color);border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--text-primary) 3%,transparent);
  color:var(--text-muted);cursor:pointer;
  box-shadow:none;filter:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
  font-family:var(--font-serif);
}
/* #9835：主页工具行「藏宝图」快捷按钮（action-group--tools 内，与 btn-setting 同排的描边文字按钮） */
.btn-action.btn-action--tool{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  height:var(--action-bar-h);box-sizing:border-box;padding:0 var(--space-12);
  border:1px solid var(--border-color);border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--text-primary) 3%,transparent);
  color:var(--text-muted);
  font-size:var(--font-label);font-weight:600;letter-spacing:.5px;
}
.btn-action.btn-action--tool:hover{
  color:var(--text-gold);
  border-color:color-mix(in srgb,var(--accent-gold) 40%,var(--border-color));
  background:color-mix(in srgb,var(--accent-gold) 10%,transparent);
}
.btn-setting:hover{
  color:var(--text-gold);
  border-color:color-mix(in srgb,var(--accent-gold) 40%,var(--border-color));
  background:color-mix(in srgb,var(--accent-gold) 10%,transparent);
}
.btn-setting .btn-ic{width:15px;height:15px}

/* 功能网格：电脑端与探索同一行；溢出由 JS 收进「更多」。 */
.action-group.action-group--secondary.fn-grid{
  display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-6);overflow:hidden;position:relative;
  padding:0;background:transparent;
  flex:1 1 0%;
  min-width:0;
  max-width:100%;
}
/* 同行外露 < 3 后换行：body 改纵向，储物行独占下一整行。
   禁止再用 flex-basis:100% 横挤换行——row 里会贴在齿轮右侧被裁，column 里会抢高度。 */
.action-bar.action-bar--fn-stacked .action-bar-body{
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  width:100%;
}
.action-bar.action-bar--fn-stacked > .action-group.action-group--primary,
.action-bar.action-bar--fn-stacked .action-bar-controls{
  flex:0 0 auto;
  width:100%;
  max-width:100%;
}
.action-bar.action-bar--fn-stacked > .action-group.action-group--secondary.fn-grid,
.action-bar.action-bar--fn-stacked .action-group.action-group--secondary.fn-grid{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  max-width:100%;
}
.action-group--tools .explore-multiplier-select{flex:0 0 auto}
.action-group--tools .adventure-toggle{flex:0 0 auto;min-width:44px}
.action-group--tools .btn-setting{flex:0 0 var(--action-bar-h)}
/* 功能入口：扁平描边，默认浅 tint + 语义色字 */
.fn-btn{
  flex:0 0 auto;width:56px;height:var(--action-bar-h);box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-4) var(--space-2);border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb,var(--fn-c,var(--text-muted)) 22%,var(--border-color));
  background:color-mix(in srgb,var(--fn-c,var(--text-muted)) 6%,transparent);
  cursor:pointer;position:relative;
  font-family:var(--font-serif);
  box-shadow:none;filter:none;text-shadow:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease,opacity .12s ease;
}
.fn-btn .fn-ic{width:16px;height:16px;flex-shrink:0;color:var(--fn-c,var(--text-muted));transition:color .12s}
.fn-btn .fn-label{font-size:var(--font-caption);line-height:1.1;color:var(--fn-c,var(--text-secondary));letter-spacing:.5px;white-space:nowrap;opacity:.9;transition:opacity .12s,color .12s}
.fn-btn:hover{
  border-color:color-mix(in srgb,var(--fn-c,var(--text-muted)) 42%,var(--border-color));
  background:color-mix(in srgb,var(--fn-c,var(--text-muted)) 12%,transparent);
}
.fn-btn:active{opacity:.88}
.fn-btn:hover .fn-ic{color:var(--fn-c)}
.fn-btn:hover .fn-label{color:var(--fn-c,var(--text-primary));opacity:1}
.fn-btn--inventory{--fn-c:var(--accent-blue)}.fn-btn--craft{--fn-c:var(--accent-gold)}
.fn-btn--cave{--fn-c:var(--accent-purple)}.fn-btn--technique{--fn-c:var(--accent-purple)}
.fn-btn--friend{--fn-c:var(--accent-jade)}.fn-btn--master{--fn-c:var(--accent-jade)}
.fn-btn--pvp{--fn-c:var(--accent-crimson)}.fn-btn--pet{--fn-c:var(--accent-jade)}
.fn-btn--protector{--fn-c:var(--accent-blue)}.fn-btn--title{--fn-c:var(--accent-gold)}
.fn-btn--invite{--fn-c:var(--accent-orange)}
.fn-btn--more{
  --fn-c:var(--text-muted);
  border:1px dashed color-mix(in srgb,var(--text-muted) 35%,var(--border-color));
  background:transparent;
}
.fn-btn--more:hover{
  border-style:solid;
  border-color:color-mix(in srgb,var(--accent-gold) 40%,var(--border-color));
  background:color-mix(in srgb,var(--accent-gold) 10%,transparent);
}

/* 红点 badge（小实心方案 F）
   必须落在 .fn-btn 内部（top/right ≥ 0）：.fn-grid 使用 overflow:hidden 折叠测量，
   负定位会被裁切，表现为主界面师徒/道友红点「有数据但不显示」。 */
.friend-btn-badge{
  position:absolute;top:2px;right:2px;z-index:2;min-width:8px;width:8px;height:8px;padding:0;
  background:var(--accent-crimson);color:#fff;border-radius:var(--radius-pill);
  font-size:0;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;animation:none;
  box-shadow:none;pointer-events:none;
}
/* 覆盖 game-guild 等处 top:-2px 的旧定位，保证底栏入口红点可见 */
.fn-btn .friend-btn-badge,
.fn-btn .friend-btn-badge.cave-alert-badge{
  top:2px;right:2px;z-index:2;
}
.friend-btn-badge.cave-alert-badge{
  min-width:14px;width:auto;height:14px;padding:0 var(--space-4);font-size:var(--font-micro);
}
/* 「更多」角标：折叠入口上各红点数值之和（无则隐藏；不是折叠入口个数） */
.fn-more-count{
  position:absolute;top:3px;right:5px;min-width:14px;height:14px;padding:0 var(--space-4);
  background:var(--accent-crimson);color:#fff;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:var(--font-micro);font-weight:700;line-height:1;
  display:none;align-items:center;justify-content:center;
  box-sizing:border-box;
}
.fn-btn--more.has-overflow .fn-more-count:not(.hidden){display:flex}
.fn-btn--more .fn-more-count.hidden{display:none !important}
.fn-btn--more.has-badge .fn-more-count:not(.hidden){display:flex}

/* 溢出展开区：默认 relative；打开时 JS 挂 body + fixed 锚在「更多」上方。
   准备态 is-fn-overflow-preparing：不可见、无动画，定位完成后再显现，避免流式位置闪帧。 */
.fn-overflow {
  display:none;padding:var(--space-8);
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  box-shadow:0 10px 28px rgba(42,42,38,.16);
  flex-wrap:wrap;gap:var(--space-6);
  position:relative;z-index:1202;
}
.fn-overflow:not(.hidden){display:flex}
/* fixed 态：始终盖在页面之上（与顶栏更多同级） */
.fn-overflow.is-fn-overflow-fixed,
#moreActionsPopup.is-fn-overflow-fixed {
  position: fixed !important;
  z-index: 10050 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  -webkit-overflow-scrolling: touch;
}
/* #id fixed 的 display:flex 优先级高于全局 .hidden；关闭态必须显式压掉 */
.fn-overflow.is-fn-overflow-fixed.hidden,
#moreActionsPopup.is-fn-overflow-fixed.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* 定位中：全透明、禁动画，避免 0,0 或底栏流式位置闪一下 */
.fn-overflow.is-fn-overflow-preparing,
#moreActionsPopup.is-fn-overflow-preparing {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}
/* 定位完成后直接显现（不做淡入，避免与 inline opacity 冲突造成“闪一下”） */
.fn-overflow.is-fn-overflow-fixed:not(.hidden):not(.is-fn-overflow-preparing),
#moreActionsPopup.is-fn-overflow-fixed:not(.hidden):not(.is-fn-overflow-preparing) {
  opacity: 1;
  visibility: visible;
}
/* 溢出菜单按钮与底栏外露入口同形：竖排图标+文字，沿用 .fn-btn 规格 */
.fn-overflow .fn-btn{
  pointer-events: auto;
}

/* 冥想状态栏 */
.meditation-bar{
  display:none;align-items:center;gap:var(--space-12);
  padding:var(--space-10) var(--space-14);margin-top:var(--space-2);
  background:var(--bg-card);
  border:1px solid var(--border-color);border-radius:var(--radius-md);
  position:relative;flex:0 0 100%;width:100%;max-width:100%;
  height:auto;box-sizing:border-box;align-self:stretch;
}
.meditation-bar:not(.hidden){display:flex;animation:medSlideIn 220ms var(--ease)}
@keyframes medSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.med-orb{
  width:38px;height:38px;flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle,rgba(22,128,106,.12),rgba(22,128,106,.03));
  border:1px solid var(--border-jade,rgba(22,128,106,.34));
}
.med-ic{width:18px;height:18px;color:var(--text-jade);position:relative;z-index:1}
.med-orb::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(22,128,106,.2);
  animation:medRing 2.8s ease-out infinite;
}
@keyframes medRing{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.35);opacity:0}}
.med-body{flex:1;min-width:0}
/* 标题行：左侧标题/时长/ETA，右侧收功，下方 stats 可满宽 */
.med-title-row{
  display:flex;align-items:center;gap:var(--space-8);
  margin-bottom:var(--space-6);min-width:0;
}
.med-title-main{
  flex:1;min-width:0;
  display:flex;align-items:baseline;gap:var(--space-6);flex-wrap:wrap;
}
.med-title{font-family:var(--font-display);font-size:var(--font-body);font-weight:700;color:var(--text-jade);letter-spacing:1px}
.med-time{font-family:var(--font-mono);font-size:var(--font-caption);color:var(--text-muted);font-variant-numeric:tabular-nums;padding:var(--space-2) var(--space-6);background:rgba(22,128,106,.07);border-radius:var(--radius-sm)}
.med-eta{
  font-family:var(--font-mono);font-size:var(--font-caption);font-weight:600;
  color:var(--text-jade);font-variant-numeric:tabular-nums;
  padding:var(--space-2) var(--space-8);border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--accent-jade) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-jade) 28%, transparent);
}
.med-eta[hidden],.med-eta-hint[hidden]{display:none !important}
.med-eta-hint{margin-top:var(--space-4);font-size:var(--font-micro);color:var(--text-muted);line-height:1.35}
.med-stats{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;width:100%}
.med-stat{display:inline-flex;align-items:baseline;gap:var(--space-4);padding:var(--space-2) var(--space-8);border-radius:var(--radius-pill);background:var(--bg-secondary);font-size:var(--font-micro);color:var(--text-muted)}
.med-stat b{font-family:var(--font-mono);font-size:var(--font-label);font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;font-style:normal}
.med-stat--cult{background:rgba(138,94,30,.08)}.med-stat--cult b{color:var(--text-gold)}
.med-stat--hp b{color:var(--text-red)}
.med-stat--mp b{color:var(--accent-blue)}
.med-stat--spirit b{color:var(--text-jade)}
.med-value-desktop{display:inline}
.med-value-mobile{display:none}
@media (max-width:768px){
  .med-value-desktop{display:none}
  .med-value-mobile{display:inline}
}
.btn-stop-meditate{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  height:28px;padding:0 var(--space-12);margin-left:auto;
  border:1px solid rgba(183,58,49,.3);border-radius:var(--radius-md);
  background:rgba(183,58,49,.06);color:var(--text-red);
  font-family:var(--font-serif);font-size:var(--font-label);font-weight:700;letter-spacing:1px;
  cursor:pointer;transition:all 140ms var(--ease);
  white-space:nowrap;
}
.btn-stop-meditate:hover{background:rgba(183,58,49,.14);border-color:var(--accent-crimson)}
.btn-stop-meditate:active{transform:translateY(1px)}

/* ---- container query：压高度/字号；紧凑单行不换行 ---- */
@container (max-width: 780px){
  .action-bar{--action-bar-h:40px}
  .action-group.action-group--primary{gap:var(--space-6)}
  .action-group.action-group--tools{gap:var(--space-6)}
  .action-group.action-group--secondary.fn-grid .fn-btn{width:52px}
  .explore-multiplier-trigger{min-width:44px}
  .adventure-toggle{padding:0 var(--space-10)}
  .action-bar.action-bar--fn-stacked:not(.action-bar--compact) .action-group.action-group--primary{width:100%;flex:0 0 auto}
  .action-bar.action-bar--fn-stacked .action-group.action-group--secondary.fn-grid{overflow:hidden}
  .action-group.action-group--primary > .btn-action.btn-action--primary{
    flex:1 1 0;
    min-width:0;
    max-width:100%;
    font-size:var(--font-label);
    letter-spacing:.5px;
    padding:0 var(--space-8);
  }
  .action-group.action-group--tools > .explore-multiplier-select{
    flex:0 0 auto;
  }
  .action-group.action-group--tools > .adventure-toggle{
    flex:1 1 0;
    min-width:44px;
    min-height:var(--action-bar-h);
    height:auto;
    justify-content:center;
  }
  .action-group.action-group--tools > .btn-setting{
    flex:0 0 var(--action-bar-h);
  }
}
@container (max-width: 480px){
  .action-bar{--action-bar-h:36px}
  .action-bar-body{padding:0 var(--space-10);gap:var(--space-6)}
  .action-group.action-group--primary{gap:var(--space-6)}
  .action-bar.action-bar--fn-stacked:not(.action-bar--compact) .action-group.action-group--primary{flex-wrap:nowrap}
  .action-group.action-group--primary > .btn-action.btn-action--primary{
    flex:1 1 0;
    min-width:0;
    font-size:var(--font-label);
    letter-spacing:.5px;
    padding:0 var(--space-6);
  }
  .btn-action.btn-action--primary .btn-ic{width:14px;height:14px}
  .explore-multiplier-trigger{flex:0 0 42px;min-width:42px}
  .adventure-toggle{flex:1 1 0;min-width:0;justify-content:center;gap:var(--space-4);padding:0 var(--space-4)}
  .action-bar.action-bar--fn-stacked .adventure-toggle{flex:1 1 0}
  .adventure-toggle input[type="checkbox"]{width:20px;height:11px}
  .adventure-toggle input[type="checkbox"]::after{width:7px;height:7px}
  .adventure-toggle input[type="checkbox"]:checked::after{transform:translateX(9px)}
  .btn-setting{flex:0 0 var(--action-bar-h)}
  .btn-setting .btn-ic{width:13px;height:13px}
  .action-group.action-group--secondary.fn-grid .fn-btn{width:48px;padding:var(--space-4) 0}
  .action-group.action-group--secondary.fn-grid .fn-btn .fn-ic{width:14px;height:14px}
  .action-group.action-group--secondary.fn-grid .fn-btn .fn-label{font-size:var(--font-micro)}
  .meditation-bar{gap:var(--space-8);padding:var(--space-8) var(--space-10);margin-left:var(--space-10);margin-right:var(--space-10)}
  .med-orb{width:28px;height:28px}
  .med-ic{width:14px;height:14px}
  .med-title{font-size:var(--font-label)}.med-time,.med-eta{font-size:var(--font-micro)}
  .med-eta-hint{font-size:var(--font-micro)}
  .med-stat{font-size:var(--font-micro);padding:var(--space-2) var(--space-6);gap:var(--space-2)}
  .med-stat b{font-size:var(--font-caption)}
  .btn-stop-meditate{height:30px;padding:0 var(--space-12);font-size:var(--font-label)}
}
/* 极窄：开关只保留字号压缩，避免再和主钮抢宽 */
@container (max-width: 360px){
  .adventure-toggle-label{font-size:var(--font-micro);letter-spacing:0}
  .action-group.action-group--primary > .btn-action.btn-action--primary{
    letter-spacing:0;
    gap:var(--space-4);
  }
}

/* 横屏：仅压字号/内边距，高度仍由 --action-bar-h 统一（写在主 .btn-action--primary 规则之后，避免抢首匹配） */
@media (max-width: 887px) and (orientation: landscape) {
  .action-bar .action-group--primary .btn-action,
  .action-bar .action-group--tools .btn-action,
  .action-bar .action-group--secondary > .btn-action {
    font-size: var(--font-label);
    padding: 0 var(--space-10);
  }
}

/* #6607 手机端：收起条 + App 两行排版。覆盖 768–887 窄桌面，更宽才保持电脑横排。 */
@media (max-width: 887px) {
  .action-bar {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 0 var(--space-10);
  }
  .action-bar.action-bar--fn-stacked,
  .action-bar:has(#meditationBar:not(.hidden)) {
    flex-wrap: nowrap;
  }
  .action-bar-collapse {
    display: flex;
    order: 0;
  }
  .action-bar-body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding: 0 var(--space-14);
    width: 100%;
    order: 1;
    flex: 0 0 auto;
  }
  .action-bar.is-collapsed .action-bar-body {
    display: none;
  }
  .action-bar-controls,
  .action-bar--compact .action-bar-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    width: 100%;
  }
  .action-group.action-group--primary,
  .action-bar--compact .action-group--primary {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: var(--space-8);
  }
  .action-group.action-group--primary > .btn-action.btn-action--primary,
  .action-bar--compact .btn-meditate,
  .action-bar--compact .btn-explore {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }
  .action-group.action-group--tools,
  .action-bar--compact .action-group--tools {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: var(--space-8);
  }
  .action-group--tools .explore-multiplier-select,
  .action-bar--compact .explore-multiplier-select {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
  }
  .action-group--tools .explore-multiplier-trigger,
  .action-bar--compact .explore-multiplier-trigger {
    height: auto;
    min-height: var(--action-bar-h);
  }
  .action-group--tools .adventure-toggle,
  .action-bar--compact .adventure-toggle,
  .action-bar--compact .auto-explore-toggle {
    flex: 1 1 0;
    min-width: 44px;
    min-height: var(--action-bar-h);
    height: auto;
    justify-content: center;
  }
  .action-group--tools .btn-setting,
  .action-bar--compact .btn-setting {
    flex: 0 0 var(--action-bar-h);
    width: var(--action-bar-h);
    height: var(--action-bar-h);
  }
  .action-bar .btn-bail {
    width: 100%;
    flex: 0 0 auto;
  }
  .action-bar .action-group.action-group--secondary.fn-grid,
  .action-bar.action-bar--fn-stacked .action-group.action-group--secondary.fn-grid {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .meditation-bar,
  .meditation-bar:not(.hidden) {
    order: 3;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    align-self: stretch;
    margin: var(--space-8) var(--space-14) 0;
    box-sizing: border-box;
  }
}

/* ============================================================ 功能排序弹窗 */
.fn-sort-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:var(--space-20);
}
.fn-sort-overlay.is-open{display:flex}
.fn-sort-modal{
  width:100%;max-width:360px;max-height:80vh;display:flex;flex-direction:column;
  background:var(--bg-panel);border:1px solid var(--border-gold);border-radius:var(--radius-md);
  box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden;
}
.fn-sort-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-14) var(--space-16);border-bottom:1px solid var(--border-color);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-gold) 8%,transparent),color-mix(in srgb,var(--accent-jade) 5%,transparent));
}
.fn-sort-list{flex:1;overflow-y:auto;padding:var(--space-10) var(--space-12);display:flex;flex-direction:column;gap:var(--space-6)}
.fn-sort-list::-webkit-scrollbar{width:4px}
.fn-sort-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent-gold) 20%,transparent);border-radius:var(--radius-xs)}
.fn-sort-item{
  display:flex;align-items:center;gap:var(--space-10);
  padding:var(--space-10) var(--space-12);background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-sm);transition:border-color 140ms var(--ease);
}
.fn-sort-item:hover{border-color:var(--border-gold)}
.fn-sort-item.dragging{opacity:.4}
.fn-sort-item.drag-over{border-color:var(--accent-gold);background:color-mix(in srgb,var(--accent-gold) 6%,var(--bg-card))}
.fn-sort-item .si-icon{width:20px;height:20px;flex-shrink:0;color:var(--si-c,var(--text-muted));display:flex;align-items:center;justify-content:center}
.fn-sort-item .si-icon svg{width:18px;height:18px}
.fn-sort-item .si-label{flex:1;font-size:var(--font-body);color:var(--text-primary)}
.fn-sort-item .si-handle{color:var(--text-muted);cursor:grab;font-size:var(--font-body-lg);letter-spacing:-2px;flex-shrink:0}
.fn-sort-item .si-handle:active{cursor:grabbing}
.fn-sort-arrows{display:flex;flex-direction:column;gap:var(--space-2);flex-shrink:0}
.si-arrow{
  width:20px;height:14px;border:none;border-radius:var(--radius-xs);background:transparent;
  color:var(--text-muted);font-size:var(--font-micro);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.si-arrow:hover:not(:disabled){color:var(--text-gold)}
.si-arrow:disabled{opacity:.25;cursor:not-allowed}
.fn-sort-foot{display:flex;gap:var(--space-8);padding:var(--space-10) var(--space-12);border-top:1px solid var(--border-color);background:var(--bg-card)}

/* #7995：手机传音签藏底栏、反馈等侧栏全屏盖住时，留下可点的停止浮条。
   高于 .side-panel(1001)，低于死亡层(1300)/弹窗与顶栏更多(1202+)。 */
.auto-explore-dock {
    display: none;
    position: fixed;
    left: var(--space-12);
    bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    align-items: center;
    gap: var(--space-8);
    min-height: 44px;
    padding: 0 var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 42%, var(--border-color));
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-jade);
    font-family: var(--font-serif);
    font-size: var(--font-label);
    box-shadow: 0 4px 16px var(--shadow-black-2);
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.auto-explore-dock--dragging { cursor: grabbing; }
.auto-explore-dock.auto-explore-dock--moved {
    bottom: auto !important;
}
/* 反馈 #10299：拖到屏幕左右缘自动贴边收拢——隐文字、半圆贴合缘侧，点按停止不变 */
.auto-explore-dock--edge { padding: 0 var(--space-8); }
.auto-explore-dock--edge .auto-explore-dock__text { display: none; }
.auto-explore-dock--edge-left {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    border-left: none;
    box-shadow: 2px 4px 16px var(--shadow-black-2);
}
.auto-explore-dock--edge-right {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    border-right: none;
    box-shadow: -2px 4px 16px var(--shadow-black-2);
}
.auto-explore-dock__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-jade);
    flex: none;
}
.auto-explore-dock__text { font-weight: 700; }
.auto-explore-dock__stop {
    color: var(--text-secondary);
    font-size: var(--font-caption);
}
@media (max-width: 768px) {
    body.auto-exploring:has(.log-area--chat) .auto-explore-dock:not(.hidden) {
        display: inline-flex;
        /* #8135：抬到传音输入栏上方（栏垫 10 + 输入 44 + 栏底 12） */
        bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px) + var(--space-10) + 44px + var(--space-12));
    }
    /* #8160：功法/反馈等侧栏盖住底栏时贴左上，避开底部装备键；拖过后走 --moved */
    body.auto-exploring.mobile-no-scroll .auto-explore-dock:not(.hidden) {
        display: inline-flex;
        top: calc(56px + env(safe-area-inset-top, 0px) + var(--space-6));
        bottom: auto;
        left: var(--space-12);
    }
}
body.lv-modal-open .auto-explore-dock {
    display: none !important;
}