/**
 * Apps Styles - 暮聧聝茅聺藰膬聙聛盲藕聴莽聰聼膬聙聛膰聵聼茅聛聡盲赂聣盲赂艦App莽職聞莽啪聨暮聦聳膰聽藝暮藕
 * @version 2.1.1 - 新增：群聊心动投喂成员选择器样式
 */

/* ========== 群聊心动投喂成员选择器 ========== */
.group-interaction-selector-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: modalFadeIn 0.3s ease !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========== 🔧 禁用浏览器回弹和下拉刷新 ========== */
html {
    overscroll-behavior: none;
    height: 100%;
    overflow: hidden;
}

body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    height: 100%;
    overflow: hidden;
}

.screen-content {    --glass-bg: rgba(255, 255, 255, 0.65); 
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    --text-main: #1f2937;
    --text-sub: #6b7280;
    --primary-color: #2563eb;
    
    /* 莽藕聳膷啪聭茅膭木盲赂钮茅藰聵膷聣藳 */
    --persona-theme: #e84393; /* 暮聧聝茅聺藰-莽藳聣膷聣藳 */
    --being-theme: #00b894;   /* 盲藕聴莽聰聼-莽钮偶膷聣藳 */
    --char-theme: #6c5ce7;    /* 膰聵聼茅聛聡-莽麓扭膷聣藳 */
    --bg-color: #e3e8ef;
}

/* ========== 暮聟慕暮聫艁茅膭木茅聺藰膰聽藝暮藕聫 (暮聧聝茅聺藰/盲藕聴莽聰聼/膰聵聼茅聛聡) ========== */
.persons-page, .beings-page, .moments-page {
    background: var(--app-bg) !important;
    overflow: hidden !important;
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* 暮陇麓茅聝篓 */
.persons-page .header,
.beings-page .header {
    /* 🔧 顶部避开iOS状态栏安全区（灵动岛适配）*/
    padding: calc(env(safe-area-inset-top) + 30px) 24px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    flex-shrink: 0;
}

.persons-page .header-title,
.beings-page .header-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.persons-page .header-actions,
.beings-page .header-actions {
    display: flex;
    gap: 12px;
}

.circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-main);
    cursor: pointer;
    transition: 0.2s;
}

.circle-btn:active {
    transform: scale(0.92);
}

.circle-btn.btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 膰聬聹莽麓藰膰聽�?*/
.filter-bar {
    padding: 0 24px 20px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    height: 44px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    color: var(--text-sub);
    font-size: 14px;
}

/* 暮聠聟暮沤拧暮聦艧暮聼聼 */
.persons-page .content-area,
.beings-page .content-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px 24px 140px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
}

.persons-page .content-area::-webkit-scrollbar,
.beings-page .content-area::-webkit-scrollbar {
    display: none;
}

/* ========== 暮聧聝茅聺藰暮聟慕暮聫艁 - 膰钮聭暮聤篓暮聧膭莽聣聡 ========== */
/* 🔧 移除 #persons-list（现在使用双列网格布局），只保留通用 .swiper-container */
.swiper-container {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    padding: 0 30px;
    gap: 15px;
    height: 500px;
    align-items: center;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    will-change: scroll-position;
    transform: translateZ(0);
}

.swiper-container:active {
    cursor: grabbing;
}

.swiper-container::-webkit-scrollbar {
    display: none;
}

.swipe-card {
    min-width: 85%;
    width: 85%;
    max-width: 300px;
    height: 420px;
    will-change: transform;
    transform: translateZ(0);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #fff;
    border-radius: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.3s, opacity 0.3s;
    cursor: pointer;
    flex-shrink: 0;
}

.swipe-card:hover {
    transform: translateY(-5px);
}

/* 椤电爜鎸囩ず鍣ㄦ牱寮?*/
.pagination-dots {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.pagination-dot:hover {
    transform: scale(1.4) !important;
    opacity: 0.8;
}

/* 馃寵 澶滈棿妯″紡 - Personas鍗＄墖娑叉€佺幓�?*/
body.dark-mode .swipe-card {
    background: rgba(30, 30, 35, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* 馃寵 澶滈棿妯″紡 - 椤电爜鎸囩ず�?*/
body.dark-mode .pagination-dot {
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
}

/* 馃寵 澶滈棿妯″紡 - 澶村儚鑳屾櫙 */
body.dark-mode .sc-avatar {
    background: rgba(50, 50, 70, 0.6) !important;
    color: var(--dark-text-secondary, #ccc) !important;
}

/* 馃寵 澶滈棿妯″紡 - 鍗＄墖鏂囧瓧 */
body.dark-mode .sc-name,
body.dark-mode .sc-badge {
    color: var(--dark-text-primary, #f0f0f0) !important;
}

.sc-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f3f4f6;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #9ca3af;
    overflow: hidden;
}

.sc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
}

.sc-badge {
    margin-top: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--text-main);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
}

/* ========== 盲藕聴莽聰聼暮聟慕暮聫艁 - 暮聢聴膷膭篓膰聽藝暮藕聫 ========== */
.list-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    transition: transform 0.2s;
}

/* 馃寵 澶滈棿妯″紡 - 鍒楄〃椤规恫鎬佺幓鐠?*/
body.dark-mode .list-item {
    background: rgba(30, 30, 35, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.list-item:active {
    transform: scale(0.98);
}

.li-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #6b7280;
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.li-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.li-content {
    flex: 1;
    min-width: 0;
}

.li-title {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.li-sub {
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 2px;
}

/* ========== 膰聵聼茅聛聡暮聟慕暮聫艁 - 莽藵聭膰聽藕膰聽藝暮藕聫 ========== */
.grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.grid-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--glass-shadow);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

/* 馃寵 澶滈棿妯″紡 - 缃戞牸鍗＄墖娑叉€佺幓鐠?*/
body.dark-mode .grid-card {
    background: rgba(30, 30, 35, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.grid-card:active {
    transform: scale(0.98);
}

.gc-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e5e7eb;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #6b7280;
    font-weight: 700;
    overflow: hidden;
}

.gc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.gc-role {
    font-size: 11px;
    color: var(--text-sub);
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
}

/* ========== 莽藕聳膷啪聭茅膭木茅聺藰茅聙職莽聰篓膰聽藝暮藕聫 ========== */
/* 茅聙職莽聰篓暮聟篓暮膮聫莽藕聳膷啪聭茅膭木茅聺藰莽膮�?- 暮藕艧暮聢艣膷艢聠莽聸聳膰聣聙膰聹聣暮聠聟暮沤拧 */
.full-screen-edit-page {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #f5f5f7 !important; /* 盲赂聧茅聙聫膰聵聨膷聝聦膰聶呕膹藕聦茅聵藳膰颅藰莽聹聥暮聢掳暮聬聨茅聺藰莽職聞暮聸啪膰聽�?*/
    z-index: 100 !important; /* 茅扭聵暮膮聜莽艧搂膹藕聦膷艢聠莽聸聳暮聹篓膰膭聦茅聺藰盲赂聤 */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.personas-edit-page,
.beings-edit-page {
    background: var(--bg-color) !important;
    font-family: 'Inter', sans-serif;
}

/* 盲赂艧盲赂聧暮聬聦茅膭木茅聺藰膷沤啪莽藵沤盲赂钮茅藰聵膷聣藳 */
.personas-edit-page { --app-theme: var(--persona-theme); }
.beings-edit-page { --app-theme: var(--being-theme); }

/* 莽藕聳膷啪聭茅膭木暮陇麓茅聝�?*/
.app-header {
    flex-shrink: 0;
    padding: calc(env(safe-area-inset-top) + 12px) 20px 12px;
    background: rgba(255,255,255,0.9);
    position: relative;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    min-height: 48px;
}

/* 莽藕聳膷啪聭茅膭木膷偶聰暮聸聻膰聦聣茅聮沤膰聽藝暮藕�?*/
.edit-back-btn {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.edit-back-btn:hover {
    transform: scale(1.1);
}

.edit-back-btn:active {
    transform: scale(0.95);
}

.app-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--app-theme);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 暮沤拧暮聶篓 */
.container {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 莽藕聳膷啪聭茅膭木茅聺藰盲赂颅莽職聞暮沤拧暮聶篓茅聹聙膷艢聛茅藰聺暮陇聳莽職聞暮艧聲茅聝篓莽艩艧茅聴�?*/
.edit-content-wrapper .container {
    padding-bottom: 20px !important; /* 莽搂钮茅聶陇膷偶聡暮陇職莽職聞暮艧聲茅聝篓莽艩艧茅聴�?*/
}

.card {
    background: #fff;
    border-radius: 0;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--app-theme);
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
    border-bottom: 1px dashed #dfe6e9;
    padding-bottom: 8px;
}

/* 膷啪聯暮聟慕膰聨搂盲钮艣 */

.label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #2d3436;
}

.input-box {
    width: 100%;
    border: 2px solid #f1f2f6;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: 0.3s;
    font-family: inherit;
}

.input-box:focus {
    background: #fff;
    border-color: var(--app-theme);
}

textarea.input-box {
    resize: none;
    height: 80px;
}

/* 暮陇麓暮聝聫盲赂聤盲藕聽暮聦�?*/
.avatar-area {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.avatar-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    cursor: pointer;
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 35px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.camera-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34px;
    height: 34px;
    background: var(--app-theme);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
}

/* 膰聲掳暮颅聴盲艧艧膰聽藕暮聧�?*/
.digital-card {
    border: 2px solid var(--app-theme);
    position: relative;
    overflow: hidden;
    background: #fff;
}

.digital-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--app-theme);
    opacity: 0.03;
    pointer-events: none;
}

.d-row {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.d-avatar-box {
    width: 60px;
    height: 60px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.d-avatar {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    border: 2px dashed #b2bec3;
}

.d-edit {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: var(--app-theme);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid #fff;
}

/* 暮陇職茅聙聣膰膭聠莽钮聞 (盲藕聴莽聰聼盲赂聯莽聰篓) */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s;
    border: 2px solid transparent;
}

.check-item:active {
    transform: scale(0.98);
}

.check-item input[type="checkbox"] {
    accent-color: var(--app-theme);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 盲偶聺暮颅聵膰聦聣茅聮沤 */
/* ============= 莽藕聳膷啪聭茅膭木茅聺藰暮赂聝暮膮聙 ============= */
.personas-edit-page,
.beings-edit-page {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* 🔧 必须 absolute：编辑页是覆盖 .screen-content 的全屏浮层。
       若用 relative，它会变成 .screen-content(flex column) 里的「在流」子项，
       和同样在流的 #app-echo 等兄弟平分高度 → 实测 529 被劈成 265+265，
       编辑页只剩半屏、下面露一大片底色（千面/众生共用此规则，故两边同病）。
       absolute + inset:0 让它脱离 flex 流、独占父容器满高，对齐 app-weaver/.page 本意。 */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Tab 暮聢聡膰聧藰膰聽聫膹藕聢盲藕聴莽聰聼盲赂聯莽聰篓膹藕�?*/
.tab-bar {
    flex-shrink: 0 !important;
    z-index: 9;
}

/* 莽藕聳膷啪聭茅膭木茅聺藰暮聠聟暮沤拧暮聦艧暮聼聼 - 暮聫呕膰钮職暮聤�?*/
.edit-content-wrapper {
    flex: 1 !important; /* 暮聧聽膰聧沤暮聣艩盲藵聶莽艩艧茅聴麓 */
    min-height: 0 !important; /* 暮聟艂茅聰沤膹藕職暮聟聛膷沤赂flex膰聰艣莽藕艩 */
    height: 0 !important; /* 暮聟艂茅聰沤膹藕職暮藕艧暮聢艣茅扭聵暮艧艢茅聶聬暮聢艣膰聣聧膷聝藵膰钮職暮聤�?*/
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* 莽藕聳膷啪聭茅膭木茅聺藰暮聠聟暮沤拧暮沤拧暮聶篓 */
.edit-content-wrapper .container {
    padding: 20px;
    padding-bottom: 20px !important;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 盲偶聺暮颅聵膰聦聣茅聮沤膰聽�?- 暮聸艧暮沤職暮艧聲茅聝篓 */
.save-bar {
    flex-shrink: 0 !important; /* 盲赂聧暮聟聛膷沤赂膰聰艣莽藕�?*/
    width: 100%;
    background: #fff;
    padding: 15px 20px !important;
    padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 15px)) !important; /* iPhone暮沤聣暮聟篓暮聦艧暮聼聼 */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    box-sizing: border-box !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    position: relative !important; /* 盲藵偶莽聰篓flex暮赂聝暮膮聙暮聸艧暮沤職 */
    bottom: 0;
    left: 0;
    right: 0;
}

.btn-main {
    width: 100%;
    padding: 12px; /* 暮聡聫暮掳聭padding */
    border: none;
    border-radius: 12px;
    background: var(--app-theme);
    color: #fff;
    font-size: 15px; /* 暮聡聫暮掳聭暮颅聴盲藵聯暮陇搂暮掳聫 */
    font-weight: 700;
    max-width: 600px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s;
    line-height: 1.4;
}

.btn-main:active {
    transform: scale(0.98);
}

/* 莽艩艧莽聤艣膰聙�?*/
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-sub);
}

.empty-state i {
    font-size: 64px;
    opacity: 0.3;
    display: block;
    margin-bottom: 20px;
}

.empty-state p {
    font-size: 16px;
    margin: 10px 0;
}

.empty-state .hint {
    font-size: 14px;
    opacity: 0.7;
}

/* ============= 茅聙職莽聰篓膰聦聣茅聮沤膰聽藝暮藕聫 ============= */
.btn-opt {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-opt:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-opt:active {
    transform: translateY(0);
}

.btn-main {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: white;
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ============= Modal 膰聽藝暮藕聫暮藰聻暮藕艧 ============= */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.check-item input[type="checkbox"] {
    cursor: pointer;
}

.check-item:hover {
    background: #e9ecef !important;
}

/* ============= Checkbox 莽钮聞膰聽藝暮藕�?============= */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}

.checkbox-group .check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-group .check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-group .check-item:hover {
    background: #e9ecef;
}

.checkbox-group .hint {
    color: #999;
    font-size: 14px;
    font-style: italic;
}

/* ============= Tab 暮聢聡膰聧藰膰聽聫膰聽藝暮藕�?============= */
.tab-bar {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
}

.tab-btn.active {
    color: var(--being-theme, #667eea);
}

.tab-btn:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* === 旧版朋友圈 .moment-*/.comment-* 类已弃用，统一迁移到 .feed-* 体系 === */

/* ==================== Echo App: AI-Social-App UI ==================== */

/* 1. 鍏ㄥ眬鍙橀�?(Echo) */
#echo {
    --echo-bg-color: #f0f2f5;
    --echo-accent: #6c5ce7;
    --echo-pink: #fd79a8;
    --echo-danger: #ff7675;
    --echo-text-main: #2d3436;
    --echo-text-sub: #b2bec3;
    --echo-card-bg: #ffffff;
    --echo-nav-glass: rgba(255, 255, 255, 0.9);
}

/* 2. 椤堕�?Header */
#echo .app-header {
    /* 🔧 顶部避开iOS状态栏安全�?*/
    padding: calc(env(safe-area-inset-top) + 20px) 20px 10px;
    background: rgba(255,255,255,0.85);
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* 閿佸睆鏃朵笉鏄剧�?Echo Header */
.lock-screen ~ #echo .app-header,
#lock-screen:not([style*="display: none"]) ~ .screen-content #echo .app-header {
    display: none !important;
}

#echo .page-title { font-size: 24px; font-weight: 800; color: var(--echo-text-main); }
#echo .header-btn { 
    width: 40px; height: 40px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); color: var(--echo-text-main);
    font-size: 20px; cursor: pointer;
}

/* 3. 椤甸潰瀹瑰櫒涓庡垏�?*/
#echo .content-scroll-area {
    flex: 1; overflow-y: scroll;
    padding-top: 100px;
    padding-bottom: 120px;
    display: none;
    scroll-behavior: smooth;
}
#echo .content-scroll-area.active { display: block; animation: echoFadeIn 0.3s ease; }

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

/* 4. 鑱婂ぉ鍒楄〃鏍峰紡 */
#echo .chat-list { padding: 0 15px; display: flex; flex-direction: column; gap: 12px; }

#echo .chat-item {
    background: var(--echo-card-bg); padding: 15px; border-radius: 0;
    display: flex; align-items: center; gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    position: relative; transition: transform 0.1s; cursor: pointer;
}
#echo .chat-item:active { transform: scale(0.98); background: #fcfcfc; }

/* 澶村儚鍖哄煙 */
#echo .avatar-box { width: 50px; height: 50px; position: relative; flex-shrink: 0; }
#echo .single-avatar { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }

/* 缇よ亰鍫嗗彔澶村�?*/
#echo .group-stack { position: relative; width: 100%; height: 100%; }
#echo .stack-img {
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
    position: absolute; object-fit: cover;
}
#echo .s-1 { bottom: 0; left: 0; z-index: 2; }
#echo .s-2 { top: 0; right: 0; z-index: 1; opacity: 0.8; }

/* 鏂囧瓧鍐呭 */
#echo .chat-info { flex: 1; overflow: hidden; }
#echo .chat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#echo .chat-name { font-weight: 700; font-size: 16px; color: var(--echo-text-main); }
#echo .chat-time { font-size: 11px; color: var(--echo-text-sub); font-weight: 600; }
#echo .chat-msg { 
    font-size: 13px; color: #636e72; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
#echo .sender-highlight { color: var(--echo-accent); font-weight: 600; margin-right: 4px; }

/* 鏈绾㈢偣 */
#echo .badge {
    background: var(--echo-pink); color: white; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center;
    box-shadow: 0 2px 5px rgba(253, 121, 168, 0.3);
}

/* 5. 鏈嬪弸鍦堟牱�?*/
#echo .moments-cover {
    height: 220px; 
    background-image: url('小王子的玫瑰.jpg');
    background-size: cover; background-position: center;
    margin-top: -100px;
    position: relative; border-radius: 0 0 30px 30px; margin-bottom: 50px;
}
#echo .user-profile {
    position: absolute; bottom: -30px; right: 25px;
    display: flex; flex-direction: column; align-items: flex-end;
}
#echo .user-avatar-lg {
    width: 80px; height: 80px; border-radius: 0; border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); object-fit: cover;
}
#echo .user-name-lg { color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-right: 10px;}

/* 鍔ㄦ€佸崱鐗?*/
#echo .feed-card {
    background: #fff; margin: 0 20px 25px; padding: 20px;
    border-radius: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
#echo .feed-header { display: flex; gap: 12px; margin-bottom: 12px; }
#echo .feed-avatar { width: 42px; height: 42px; border-radius: 14px; object-fit: cover; }
#echo .feed-meta h4 { margin: 0; font-size: 15px; color: var(--echo-text-main); }
#echo .feed-meta span { font-size: 11px; color: var(--echo-text-sub); }

#echo .feed-text { font-size: 14px; line-height: 1.6; color: #2d3436; margin-bottom: 12px; }

#echo .feed-imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; border-radius: 12px; overflow: hidden; }
#echo .feed-imgs img { width: 100%; height: 140px; object-fit: cover; }

/* 搴曢儴鎸夐挳�?*/
#echo .feed-actions { 
    display: flex; justify-content: flex-end; gap: 20px; 
    margin-top: 15px; padding-top: 12px; border-top: 1px solid #f5f6fa; 
}
#echo .action-btn { 
    display: flex; align-items: center; gap: 6px; 
    color: #636e72; font-size: 13px; font-weight: 600; cursor: pointer; 
}
#echo .action-btn i { font-size: 18px; }
#echo .action-btn.active { color: var(--echo-pink); }

/* 璇勮鍖?*/
#echo .comment-section {
    margin-top: 15px; background: #f8f9fa; border-radius: 16px; padding: 15px;
    display: none;
    animation: echoSlideDown 0.2s ease-out;
}
#echo .comment-section.show { display: block; }

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

#echo .comment-item { font-size: 13px; margin-bottom: 8px; line-height: 1.4; }
#echo .c-name { color: var(--echo-accent); font-weight: 700; margin-right: 4px; }
#echo .c-text { color: #636e72; }

#echo .c-input { 
    flex: 1; border: none; background: #fff; border-radius: 0; 
    padding: 8px 12px; font-size: 13px; outline: none;
}
#echo .c-send { background: var(--echo-accent); color: #fff; border:none; border-radius: 0; padding: 0 15px; font-size: 12px; font-weight: 700; cursor: pointer;}

/* 6. 搴曢儴鎮诞宀涘�?*/
#echo .nav-island {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 85%; height: 70px;
    background: var(--echo-nav-glass); 
    border-radius: 35px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 10px; z-index: 200;
}

/* 馃寵 澶滈棿妯″紡 - Echo瀵艰埅宀涙恫鎬佺幓鐠?*/
body.dark-mode #echo .nav-island {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#echo .nav-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #b2bec3; height: 100%; position: relative; transition: 0.3s; cursor: pointer;
}
#echo .nav-tab i { font-size: 24px; margin-bottom: 2px; transition: 0.2s; }
#echo .nav-tab span { font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(5px); transition: 0.2s; }

/* 閫変腑鐘舵€?*/
#echo .nav-tab.active { color: var(--echo-accent); }
#echo .nav-tab.active i { transform: translateY(-2px); }
#echo .nav-tab.active span { opacity: 1; transform: translateY(0); }

/* 瀵艰埅鏈�?*/
#echo .nav-dot {
    position: absolute; top: 18px; right: 32%;
    width: 8px; height: 8px; background: var(--echo-pink); border-radius: 50%;
    border: 2px solid #fff; display: none;
}
#echo .nav-dot.show { display: block; }

/* 涓棿鐨勫ぇ鍔犲�?(FAB) */
#echo .fab-center {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    border-radius: 50%; border: none; color: #fff; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
    transform: translateY(-22px);
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}
#echo .fab-center:active { transform: translateY(-20px) scale(0.9); }
#echo .fab-center.rotate { transform: translateY(-22px) rotate(45deg); background: #2d3436; }

/* 7. 寮瑰嚭鍔熻兘鑿滃�?*/
#echo .menu-popover {
    position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%) scale(0.8);
    width: 200px; background: rgba(255,255,255,0.95); backdrop-filter: blur(15px);
    border-radius: 0; padding: 8px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    opacity: 0; pointer-events: none; transition: 0.2s; z-index: 190;
    display: flex; flex-direction: column; gap: 5px;
}
#echo .menu-popover.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }

/* 灏忎笁瑙?*/
#echo .menu-popover::after {
    content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -8px;
    border-width: 8px 8px 0; border-style: solid;
    border-color: rgba(255,255,255,0.95) transparent transparent transparent;
}

#echo .menu-option {
    padding: 12px 15px; display: flex; align-items: center; gap: 12px;
    border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--echo-text-main);
    cursor: pointer;
}
#echo .menu-option:active { background: #f1f2f6; }
#echo .menu-icon-box {
    width: 32px; height: 32px; background: #f0f2f5; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--echo-accent);
}
#echo .menu-option.danger { color: var(--echo-danger); }
#echo .menu-option.danger .menu-icon-box { background: #ffeaa7; color: var(--echo-danger); }

/* ========== Echo 搴旂敤鏍峰紡锛堢簿绠€鐗堬級========== */

/* 寮哄埗鍗犳弧锛屾棤澶氫綑 padding */
.echo-container, .chat-screen {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 鍐呭鍖鸿嚜閫傚�?*/
.echo-content, .chat-body {
    flex: 1 !important;
    height: auto !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
    min-height: 0 !important; /* 鍏抽敭锛氬厑�?Flex 瀛愬厓绱犵缉�?*/
}

/* 搴曢儴鏍忛槻閬�?*/
.chat-footer {
    flex-shrink: 0;
    background: var(--tabs-bg);
    border-top: 1px solid var(--tabs-border);
    position: relative;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 消息和朋友圈视图 */
#view-chats {
    flex: 1;
    min-height: 0;
}

#view-moments {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* background 已迁移至 css/apps/moments-redesign.css，由 --mm-bg-pure 控制 */
}

#view-moments .content-area {
    flex: 1;
    overflow-y: auto !important;
    padding-bottom: 70px !important;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

/* 纭繚鎸夐挳鍙偣鍑?*/
.echo-tabs .tab-btn {
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.echo-tabs .tab-btn:hover {
    opacity: 0.8;
}

/* ==================== Echo 姘存淮鐜荤拑 UI ==================== */

/* CSS 变量 */
#app-echo {
    --bg-color: var(--chatlist-bg);
    --nav-text: var(--topbar-meta-color);
    --me-text: var(--bubble-me-text);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 5px 5px 15px rgba(166, 171, 189, 0.2);
    --header-h: 60px;
    --dock-h: 70px;
}

/* 鑱婂ぉ瀹瑰�?*/
#app-echo {
    background: var(--bg-color) !important;
    background-attachment: fixed !important; /* 滚动时保持固�?*/
    background-size: cover;
    display: none; /* 默认隐藏，由 .page.active 控制显示 */
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    overflow: visible !important; /* 允许fixed子元素显示在外面 */
}

#app-echo.active {
    display: flex; /* 激活时显示 */
}

/* ==========================================
   顶部导航栏
   ========================================== */
.echo-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    display: flex;
    flex-direction: column;
}
.nav-top-row {
    display: flex; justify-content: space-between; align-items: center;
    height: 48px; padding: 0 12px; position: relative;
}
.nav-top-row::before {
    content: ''; position: absolute; left: 20px; right: 20px; top: 50%; height: 1px;
    background: var(--topbar-line-color); z-index: 1;
}
.icon-btn { font-size: 22px; color: var(--topbar-btn-icon-color); cursor: pointer; }
.nav-avatar { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; border: 1px solid var(--navbar-border); flex-shrink: 0; }
.nav-name { font-size: 14px; font-weight: 600; color: var(--topbar-name-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-text {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: var(--navbar-bg); padding: 0 8px;
    font-size: 10px; color: var(--topbar-meta-color); font-weight: 500;
    display: flex; align-items: center; gap: 6px; z-index: 2;
}
.meta-text .divider { opacity: 0.3; }
.clickable { cursor: pointer; }
.nav-bottom-row { display: flex; align-items: center; justify-content: center; gap: 8px; height: 20px; padding-bottom: 8px; }
.spacer { width: 24px; }
.bio-wrap {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    background: var(--bg-body); padding: 3px 12px; border-radius: 12px; max-width: 240px;
}
.p-bio { border: none; background: transparent; font-size: 10px; color: var(--topbar-bio-color); width: 100%; text-align: center; }
.p-bio::placeholder { color: var(--text-placeholder); }
.bio-refresh { font-size: 12px; color: var(--topbar-meta-color); cursor: pointer; }
.bottle-btn { width: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bottle-btn img { width: 16px; height: 16px; opacity: 0.7; }

/* 兼容旧的 chat-header 类名 */
.chat-header {
    position: fixed !important;
    z-index: 1000 !important;
}

.nav-side {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.nav-side:active {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0.92);
}

.nav-side.right {
    justify-content: flex-end;
}

.nav-icon {
    font-size: 20px;
    color: var(--nav-text);
}

.nav-center {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;  /* 寮哄埗姘村钩鎺掑�?*/
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 10px !important;
    position: relative !important;
}

/* 鍐呴儴瀹瑰櫒涔熷己鍒舵按骞?*/
.nav-center > div {
    display: inline-flex !important;
    flex-direction: row !important;  /* 寮哄埗姘村钩 */
    align-items: center !important;
    gap: 4px !important;
}

/* AI 浜や簰鎸夐挳绱ц窡鍚嶅�?*/
#top-interaction-btn {
    margin-left: 4px;
    flex-shrink: 0;
}

/* 鍚嶅瓧鍜岃緭鍏ョ姸鎬?*/
#chat-header-name,
.nav-title {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* 姝ｅ湪杈撳叆鎻愮ず锛堝拰鍚嶅瓧鍦ㄥ悓涓€琛岋紝绱ц窡鍏跺悗�?*/
.typing-status {
    position: static;
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    color: var(--topbar-meta-color);
    font-style: italic;
    white-space: nowrap;
    margin: 0;
    transform: none;
    top: auto;
    left: auto;
}

.nav-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--nav-text) !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
}

/* 鑱婂ぉ涓诲尯�?*/
#msg-container {
    flex: 1;
    padding: 20px 16px calc(100px + env(safe-area-inset-bottom)) 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: layout style;
    min-height: 0;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
}

/* iOS专属：键盘打开时增加底部间距 */
@supports (-webkit-touch-callout: none) {
    body:has(.echo-dock:focus-within) #msg-container {
        padding-bottom: calc(180px + env(safe-area-inset-bottom));
    }
}

/* 🔧 [灵境布局] 当前聊天挂了灵境模板时，多给 60px 底部喘气空间，避免最后一条消息+灵境面板贴住输入栏。
   只对带 [data-has-lj="1"] 标记的容器生效（JS 进入聊天时按 chatConfig.lingjingTemplateIds 决定打不打），
   不挂灵境的聊天保持原样，零误伤。 */
#msg-container[data-has-lj="1"] {
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
}
@supports (-webkit-touch-callout: none) {
    body:has(.echo-dock:focus-within) #msg-container[data-has-lj="1"] {
        padding-bottom: calc(240px + env(safe-area-inset-bottom));
    }
}

/* 单聊页面且不是聊天列表：聊天记录躲开导航栏（JS 会通过 _syncNavbarPadding 动态覆盖此值） */
.single-chat-page #msg-container:not(:has(.chat-list-container)) {
    padding-top: calc(env(safe-area-inset-top, 20px) + 120px);
}

/* 列表模式：msg-container 作为 flex 列，contain:strict 会阻止子元素撑开，需要覆盖 */
.single-chat-page #msg-container:has(.chat-list-container) {
    contain: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: var(--chatlist-bg) !important;
}

#msg-container::-webkit-scrollbar {
    display: none;
}

/* 气泡样式 (核心) */
.msg-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
    contain: layout style;
    margin-bottom: 8px;
}

.msg-row.me {
    flex-direction: row-reverse;
}

/* 消息时间戳（仅在时间感知开启时显示，位于气泡下方） */
.msg-timestamp {
    display: block;
    font-size: 10px;
    margin-top: 3px;
    pointer-events: none;
    letter-spacing: 0.5px;
    color: var(--chatitem-time-color);
    opacity: 0.75;
    flex-shrink: 0; /* 🔧 防止时间戳被压缩 */
}
.msg-row.me .msg-timestamp {
    text-align: right;
}
.msg-row.other .msg-timestamp {
    text-align: left;
}
/* 有时间戳的行：增加下方间距，与无时间戳行形成视觉区分 */
.msg-row:has(.msg-timestamp) {
    margin-bottom: 8px;
}

/* 头像容器（用于定位名字标签） */
.avatar-wrap {
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
}

/* 单聊头像对齐 */
.msg-row .msg-avatar {
    align-self: flex-start;
}

/* 🆕 单聊连发气泡：第一条带头像，后续 .continuous 隐藏头像保留占位，
   气泡贴齐第一条（不再有头像-气泡间距错位）。群聊在 JS 端会自动跳过本规则。 */
.msg-row.continuous .msg-avatar {
    visibility: hidden;
}
.msg-row.continuous {
    margin-top: -4px; /* 连发气泡间距收紧，更像聊天 app 的合并气泡 */
}
/* 🆕 连发组里非最后一条隐藏时间戳，时间戳只在组末显示 */
.msg-row.has-next-continuous .msg-timestamp,
.msg-row.has-next-continuous .msg-bubble-wrap .msg-timestamp {
    display: none;
}

/* 单聊气泡容器对齐 */
.msg-row .msg-bubble-wrap {
    align-self: flex-start;
}

/* 聊天界面消息头像：方形带圆角 */
#msg-container .msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.1);
    border: none;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-start;
}

/* 澶村儚鍔犺浇澶辫触鏃剁殑鍗犱�?*/
.msg-avatar[src=""],
.msg-avatar[src*="undefined"] {
    content: url('../assets/avatars/bear_(1).jpg');
}

.chat-avatar[src=""],
.chat-avatar[src*="undefined"],
.feed-avt[src=""],
.feed-avt[src*="undefined"] {
    content: url('../assets/avatars/bear_(1).jpg');
}

/* 鍚嶅瓧鏍囩 (Name Tag) - 缇よ亰涓撶敤鐜荤拑椋庢牸 */
/* 微信式名字标签：显示在气泡上方 */
.name-tag {
    position: static;
    font-size: 11px;
    color: var(--name-tag-color);
    font-weight: 400;
    white-space: nowrap;
    background: var(--name-tag-bg);
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    z-index: 2;
}
.msg-row.me .name-tag {
    display: none;
}
.msg-row.other .name-tag {
    color: var(--name-tag-color);
    background: var(--name-tag-bg);
}

/* ========== 沉浸式渲染：容器样式 ========== */
/* msg-content 容器布局（宽度由 text-break-fix.css 统一控制）*/
.msg-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    text-orientation: mixed;
    word-break: normal; /* 🔧 正常断词 */
    overflow-wrap: break-word;
}

/* 气泡视觉效果 */
.msg-bubble,
.speech-bubble {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: visible;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    border-radius: 18px;
    border: 1px solid transparent;
}

/* 对方气泡 */
.msg-row.other .speech-bubble,
.msg-row.other .msg-bubble {
    color: var(--bubble-other-text);
    background: var(--bubble-other-bg);
    border-color: var(--bubble-other-border, var(--navbar-border));
    box-shadow: var(--bubble-other-shadow);
    align-self: flex-start;
    border-bottom-left-radius: 6px;
}

/* 只包含图片的气泡：去除背景和边距 */
.speech-bubble:has(> .ai-image-wrap:only-child) {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: none;
}

/* 空气泡：完全隐藏 */
.speech-bubble:empty {
    display: none;
}

/* ========== 🎬 沉浸式渲染：动作描写 ========== */
.action-text {
    color: var(--narr-ai);
    font-style: italic;
    font-size: var(--ai-aside-font-size, 13px);
    line-height: 1.5;
    padding: 4px 0;
    text-align: left;
    opacity: 0.85;
}

/* ========== 📖 小说模式：对话与旁白样式 ========== */
/* 旁白部分：斜体、灰色（气泡内的inline样式�?*/
.novel-narration {
    color: var(--narr-ai);
    font-style: italic;
    font-size: var(--ai-aside-font-size, 13px);
    opacity: 0.9;
}

/* 对话部分：正常字体、稍微突�?*/
.novel-speech {
    color: inherit;
    font-style: normal;
}

/* ========== 💬 引用预览条（输入框上方）========== */
#quote-preview-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px; /* dock 的最小高度 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(205, 174, 154, 0.12) 0%, rgba(189, 87, 104, 0.08) 100%);
    border-top: 1px solid rgba(205, 174, 154, 0.25);
    z-index: 99;
    animation: slideDownQuote 0.2s ease-out;
}

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

#quote-preview-bar .quote-preview-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

#quote-preview-bar .quote-preview-line {
    width: 3px;
    height: 32px;
    background: linear-gradient(180deg, #cdae9a, #bd5768);
    border-radius: 2px;
    flex-shrink: 0;
}

#quote-preview-bar .quote-preview-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

#quote-preview-bar .quote-preview-sender {
    font-size: 12px;
    font-weight: 600;
    color: #bd5768;
}

#quote-preview-bar .quote-preview-text {
    font-size: 13px;
    color: #546e7a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

#quote-preview-bar #cancel-quote-btn {
    font-size: 20px;
    color: #90a4ae;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s;
}

#quote-preview-bar #cancel-quote-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #546e7a;
}

/* 暗黑模式引用预览 */
body.dark-mode #quote-preview-bar {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode #quote-preview-bar .quote-preview-sender {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode #quote-preview-bar .quote-preview-text {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode #quote-preview-bar #cancel-quote-btn {
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 💬 发送后的引用显示（气泡外部上方，宽度跟随气泡）========== */
/* 包裹容器：让气泡撑开，引用条跟随 */
.msg-bubble-wrap {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 78%;
    white-space: normal; /* 🔧 消灭模板缩进产生的匿名flex子项 */
    align-items: stretch; /* 🔧 让子元素（引用条和气泡）都拉伸到容器宽度 */
    position: relative; /* 🔧 为引用条绝对定位提供参照 */
    /* 🔧 确保包裹容器本身完全透明，无任何视觉样式 */
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 🔧 有时间戳时：改为 flex-start，防止气泡被拉伸变窄 */
.msg-bubble-wrap:has(.msg-timestamp) {
    align-items: flex-start;
}

/* 🔧 时间戳不参与容器宽度计算，避免影响气泡宽度 */
.msg-bubble-wrap .msg-timestamp {
    align-self: stretch; /* 时间戳独立拉伸，不影响气泡 */
    width: 100%; /* 占满容器宽度，但不影响容器的 fit-content 计算 */
}

/* 只有包含引用时才添加顶部间距 */
.msg-bubble-wrap:has(.msg-quote-ref) {
    padding-top: 22px; /* 🔧 为引用条预留空间 */
}

/* 引用条：显示在气泡上方，宽度 100% 填满容器 */
.msg-quote-ref {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #78909c;
    padding: 2px 8px;
    box-sizing: border-box;
    width: 100%;
    /* 🔧 绝对定位在 padding 区域 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 0; /* 🔧 重置 margin，不再需要 */
    /* 🔧 确保引用条完全透明，无背景 */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* 包裹容器内的气泡：宽度自适应内容 */
.msg-bubble-wrap .msg-bubble,
.msg-bubble-wrap .msg-content {
    max-width: 100%;
    width: fit-content;
}

.msg-quote-ref::before {
    content: '';
    width: 2px;
    min-height: 14px;
    background: linear-gradient(180deg, #cdae9a, #bd5768);
    border-radius: 1px;
    flex-shrink: 0;
}

.msg-quote-ref .quote-sender {
    font-weight: 600;
    color: #bd5768;
    flex-shrink: 0;
}

.msg-quote-ref .quote-sender::after {
    content: ':';
}

.msg-quote-ref .quote-text {
    color: #8b7355;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
}

/* 暗黑模式发送后引用 */
body.dark-mode .msg-quote-ref {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .msg-quote-ref::before {
    background: rgba(255, 255, 255, 0.4);
}

body.dark-mode .msg-quote-ref .quote-sender {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .msg-quote-ref .quote-text {
    color: rgba(255, 255, 255, 0.4);
}

/* ========== 🎬 卡片行容器 ========== */
.scenario-card-row {
    display: flex;
    justify-content: center;
    padding: 8px 16px;
}

.scenario-card-row .scenario-card {
    max-width: 280px;
    width: 100%;
}

.scenario-card-row .scenario-card.card-event {
    max-width: 300px !important;
}

/* ========== 独立旁白段落 ========== */
.narration {
    align-self: center; width: 85%; text-align: justify; text-align-last: center;
    font-size: var(--ai-aside-font-size, 12px); line-height: 1.6; margin: 4px 0; text-shadow: none;
}
.narration::before, .narration::after {
    content: ""; display: block; width: 30px; height: 1px;
    background: currentColor; opacity: 0.2; margin: 0 auto;
}
.narration::before { margin-bottom: 8px; }
.narration::after { margin-top: 8px; }
.narration.user { color: var(--narr-user); font-style: italic; }
.narration.user::before, .narration.user::after { content: none; }

/* 心理描写：斜体 + 降低透明度 */
.narration.thought { font-style: italic; opacity: 0.85; }

/* 动作描写样式 */
.action-desc { font-style: italic; opacity: 0.82; }
.narration .action-desc { display: block; }

/* ========== 🌟 单聊 NPC/路人 便签式发言（无头像 · 标签=具体名字 · 颜色跟随主题变量）========== */
.npc-tag-row {
    display: flex;
    align-items: flex-start;     /* 标签顶对齐正文第一行，多行时不飘 */
    width: 100%;
    padding-left: 16px;          /* 整体靠左，不再缩进到头像列；视觉更轻 */
    padding-right: 16px;         /* 右侧留白，正文不顶到屏幕边缘 */
    margin: 6px 0;
    gap: 8px;
    box-sizing: border-box;
}
.npc-tag-row .npc-tag-label {
    flex-shrink: 0;
    background: var(--bubble-me-bg);     /* 复用「我方气泡底/字」配对，保证每个主题下都有对比度 */
    color: var(--bubble-me-text);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.5;
    margin-top: 4px;             /* 微调，让标签竖直居中对齐正文首行（台词行字号 = 气泡字号） */
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.npc-tag-row .npc-tag-label.empty { visibility: hidden; }   /* 同一 NPC 连续气泡：占位对齐但不重复名字 */
.npc-tag-row .npc-tag-content {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
/* 台词行：深色主文本、醒目——跟普通对话气泡同字号（--bubble-font-size），不写死 */
.npc-tag-row .npc-tag-content .npc-speech {
    font-size: var(--bubble-font-size, 14px);
    line-height: 1.55;
    color: var(--bubble-other-text, var(--topbar-name-color));
    font-weight: 500;
}
/* 动作/神态行：紧跟台词下方，字号跟着气泡走、永远比台词小 2px（用户调气泡字号时一起缩放），
   字色与 NPC 台词完全一致（不压透明度），层级差只靠字号体现 */
.npc-tag-row .npc-tag-content .npc-action {
    margin-top: 4px;
    font-size: calc(var(--bubble-font-size, 14px) - 2px);
    line-height: 1.5;
    color: var(--bubble-other-text, var(--topbar-name-color));
}
.npc-tag-row .npc-tag-content img { max-width: 100%; border-radius: 8px; }
.npc-tag-row.archived { opacity: 0.7; pointer-events: none; }

/* ✓✓ 用户消息「已读」回执：仅当消息已被 AI 读取后才渲染（JS 控制），双勾+文字，颜色跟随主题 */
.msg-row.me .read-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch; /* 🔧 撑满气泡宽度，配合 justify-content:flex-end 把 ✓✓+时间戳推到气泡右下角 */
    gap: 3px;
    margin-top: 4px;
    padding-right: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--narr-user);
    opacity: 0.5;
    user-select: none;
}
.msg-row.me .read-status i {
    font-size: 14px;
    line-height: 1;
    color: var(--narr-user);
}
/* 🔧 时间戳并入已读回执时：与 ✓✓ 同处一行，清掉独占整行用的样式 */
.msg-row.me .read-status .msg-timestamp {
    width: auto;
    align-self: auto;
    margin-top: 0;
    line-height: 1;
}

/* ========== 系统消息（居中灰条）—— 可自定义：改变量或直接覆盖类 ========== */
/* 变量默认值；用户可在 :root 重定义，或直接覆盖下面的类 */
:root {
    --sys-msg-bg: rgba(0,0,0,0.03);
    --sys-msg-color: var(--text-muted, #999);
    --sys-msg-font-size: 12px;
    --sys-msg-radius: 12px;
    --sys-msg-padding: 6px 12px;
    /* 手气王红包系统消息（luck 主题） */
    --sys-luck-bg: rgba(214,92,111,0.08);
    --sys-luck-border: rgba(214,92,111,0.15);
    --sys-luck-color: #a88d92;
    --sys-luck-radius: 16px;
    /* 翻译气泡（贴在气泡尾巴的译文块） */
    --trans-block-margin-top: 8px;
    --trans-block-padding-top: 8px;
    --trans-block-divider: 0.5px solid currentColor;
    --trans-block-opacity: 0.85;
    --trans-block-font-size: 0.95em;
    --trans-label-opacity: 0.7;
    --trans-text-weight: 500;
}

/* 系统消息行：居中 */
#msg-container .msg-row.system-msg-row,
.msg-row.system-msg-row {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
/* 系统消息灰条本体 */
.system-msg {
    text-align: center;
    font-size: var(--sys-msg-font-size);
    color: var(--sys-msg-color);
    padding: var(--sys-msg-padding);
    border-radius: var(--sys-msg-radius);
    background: var(--sys-msg-bg);
}
/* 通用 insertSystemMessage 的胶囊（success/warning/luck 用内联色，default 走变量） */
.system-msg-pill {
    font-size: var(--sys-msg-font-size);
    padding: 4px 12px;
    border-radius: var(--sys-msg-radius);
    background: var(--sys-msg-bg);
    color: var(--sys-msg-color);
}
/* 手气王红包系统消息 */
.sys-luck-msg {
    background: var(--sys-luck-bg);
    border: 1px solid var(--sys-luck-border);
    padding: 6px 14px;
    border-radius: var(--sys-luck-radius);
    font-size: var(--sys-msg-font-size);
    color: var(--sys-luck-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ========== 翻译气泡（译文块，贴气泡尾巴）—— 可自定义 ========== */
.translation-result-block {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
    position: relative;
    margin-top: var(--trans-block-margin-top);
    padding-top: var(--trans-block-padding-top);
    border-top: var(--trans-block-divider);
    opacity: var(--trans-block-opacity);
    font-size: var(--trans-block-font-size);
}
.translation-result-block .trans-label {
    margin-bottom: 4px;
    font-size: 0.8em;
    opacity: var(--trans-label-opacity);
    display: flex;
    align-items: center;
    gap: 4px;
}
.translation-result-block .trans-text {
    font-weight: var(--trans-text-weight);
}
.translation-result-block .trans-text.loading {
    font-style: italic;
    opacity: 0.6;
    font-weight: normal;
}
.translation-result-block .trans-text.error {
    color: #e74c3c;
    font-weight: normal;
}

/* ========== 馃幀 褰掓。娑堟伅鏍峰紡锛堢數褰变綋锛?========= */
.msg-row.archived {
    opacity: 0.7;
    pointer-events: none; /* 绂佺敤浜や簰 */
}

.narrator-row.archived {
    opacity: 0.7;
    pointer-events: none;
}
.archived-bubble,
.archived-content {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Noto Serif SC', 'STSong', serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding: 8px 0 !important;
}

.archived-content .speech-bubble {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Noto Serif SC', 'STSong', serif !important;
    padding: 0 !important;
}

.archived-content .action-text {
    font-family: 'Noto Serif SC', 'STSong', serif !important;
}

/* ========== 叙事旁白行（独立行，居中显示�?========= */
.msg-row.action-narration {
    display: flex;
    justify-content: center;
    padding: 4px 20px;
    gap: 0;
}
.action-narration-text {
    max-width: 90%;
    text-align: center;
    font-size: var(--ai-aside-font-size, 13px);
    line-height: 1.7;
    color: var(--aside-color, #78909c);
    font-style: italic;
}
.action-narration-text .action-text,
.action-narration-text .msg-action,
.action-narration-text .msg-thought {
    background: none;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    font-style: italic;
    color: inherit;
}

/* ========== 馃幀 鎬荤粨鏃佺櫧鏍峰紡锛堢數褰卞彊浜嬩綋�?========= */
.msg-row.summary-narration {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    padding: 0 20px;
}

.narration-content {
    max-width: 85%;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(250, 250, 255, 0.85) 100%);
    border: 1px solid rgba(162, 155, 254, 0.2);
    border-radius: 0;
    padding: 20px 24px;
    box-shadow: 0 8px 32px rgba(162, 155, 254, 0.15);
    position: relative;
}

.narration-icon {
    font-size: 28px;
    text-align: center;
    margin-bottom: 12px;
    opacity: 0.8;
}

.narration-text {
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: var(--ai-aside-font-size, 13px);
    line-height: 2;
    color: var(--aside-color, #78909c);
    text-align: center;
    font-style: italic;
    letter-spacing: 0.5px;
}

.narration-hint {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(162, 155, 254, 0.2);
    font-size: 11px;
    color: #a29bfe;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ========== 🎬 状态栏系统（简化版�?========= */

/* 摘要�?*/
.status-summary-bar {
    position: fixed;
    top: var(--header-h, 60px);
    left: 0; right: 0; height: 32px;
    background: rgba(239, 243, 246, 0.95);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 99;
    display: flex; align-items: center; 
    justify-content: center; gap: 8px;
    font-size: 12px; color: #546e7a; 
    font-weight: 500; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.status-summary-bar i { transition: transform 0.3s ease; }
.status-summary-bar.open i { transform: rotate(180deg); }

/* 展开面板 */
.status-dashboard {
    position: fixed;
    top: calc(var(--header-h, 60px) + 32px);
    left: 0; right: 0;
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 15px 30px rgba(166, 171, 189, 0.15);
    padding: 16px 20px;
    z-index: 98;
    transform: translateY(-100%);
    opacity: 0; pointer-events: none;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.status-dashboard.show {
    transform: translateY(0);
    opacity: 1; pointer-events: auto;
}

/* 自适应网格：自动填�?*/
.stat-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
    gap: 10px; 
}

.stat-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px; 
    background: rgba(239, 243, 246, 0.5);
    border-radius: 10px; 
    border: 1px solid rgba(255,255,255,0.6);
}

/* 长文本（心声等）独占一�?*/
.stat-item.full-width { 
    grid-column: 1 / -1; 
}

.stat-label { font-size: 11px; color: #90a4ae; }
.stat-value { font-size: 13px; color: var(--nav-text, #546e7a); font-weight: 600; }

/* 有状态栏时聊天区下移 */
.chat-view.has-status {
    margin-top: calc(var(--header-h, 60px) + 32px) !important;
}

/* 对方气泡 */
.msg-row.other .msg-bubble,
.msg-row.other .speech-bubble {
    color: var(--bubble-other-text);
    background: var(--bubble-other-bg);
    border-color: var(--bubble-other-border, var(--navbar-border));
    box-shadow: var(--bubble-other-shadow);
    border-bottom-left-radius: 6px;
    align-self: flex-start;
}

/* 我方气泡 */
.msg-row.me .msg-bubble,
.msg-row.me .speech-bubble {
    color: var(--bubble-me-text);
    background: var(--bubble-me-bg);
    border-color: var(--bubble-me-border, var(--navbar-border));
    box-shadow: var(--bubble-me-shadow);
    border-bottom-right-radius: 6px;
}

/* ========== 表情面板系统 ========== */
.sticker-panel {
    /* 🔥 强制脱离文档流，防止推挤上方内容（解决顶飞 Bug） */
    position: fixed !important;
    /* 🔧 锚定在输入框上方，而不是遮挡输入框 */
    bottom: 60px !important; /* 输入框高度约 60px，面板在其上方 */
    left: 0 !important;
    width: 100% !important;
    height: 300px;
    background: var(--drawer-bg);
    border-top: 1px solid var(--drawer-border);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999 !important; /* 确保盖住其他元素，但不遮挡输入框 */
    display: flex;
    flex-direction: column;
    animation: stickerPanelSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 强制平滑滚动与滑动防冲突 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    /* 彻底禁用整个面板的长按菜单和文字选中 */
    -webkit-touch-callout: none !important;
    user-select: none !important;
}

@keyframes stickerPanelSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sticker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--chatitem-border);
    flex-shrink: 0;
}

.sticker-tabs {
    display: flex;
    gap: 8px;
}

.sticker-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--chatitem-preview-color);
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}

.sticker-tab:hover {
    background: rgba(0, 0, 0, 0.04);
}

.sticker-tab.active {
    background: var(--drawer-item-active-bg);
    color: var(--drawer-icon-color);
    font-weight: 600;
}

.sticker-tab i {
    font-size: 16px;
}

.sticker-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--chatitem-time-color);
}

.sticker-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.sticker-close:active {
    transform: scale(0.9);
}

.sticker-grid {
    display: block;
    padding: 12px 16px;
    padding-bottom: 70px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.sticker-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.sticker-item:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.15);
}

.sticker-item:active {
    transform: scale(1.05);
}

.sticker-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    pointer-events: none;
    /* 禁用所有表情图片的系统默认拖拽行为 */
    -webkit-user-drag: none !important;
    user-select: none !important;
}

/* ========== Fluent Emoji 高清表情系统 ========== */
.fluent-emoji,
.qq-emoji {
    width: 28px !important;
    height: 28px !important;
    vertical-align: text-bottom;
    margin: 0 2px;
    display: inline-block;
    flex: 0 0 auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 针对不同上下文的表情大小调整 */
.speech-bubble .fluent-emoji,
.speech-bubble .qq-emoji {
    width: 30px !important;
    height: 30px !important;
}

.action-text .fluent-emoji,
.action-text .qq-emoji {
    width: 24px !important;
    height: 24px !important;
}

/* 表情面板中的表情（可点击） */
.classic-emoji-item {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.1s ease;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    object-fit: contain;
    border-radius: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.02);
}

.classic-emoji-item:hover {
    transform: scale(1.15);
    background: rgba(0, 0, 0, 0.06);
}

/* 经典表情选择面板（防移动端滑动失效） */
.classic-emoji-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 10px;
    padding: 12px;
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 修复移动端内�?*/
}

/* ========== 自定义收藏贴纸（大图�?========= */
.custom-sticker {
    max-width: 120px;
    max-height: 120px;
    border-radius: 8px;
    vertical-align: middle;
    margin: 4px;
    object-fit: contain;
    cursor: pointer;
    -webkit-user-drag: none !important;
    user-select: none !important;
}

/* 滚动条样�?*/
.sticker-grid::-webkit-scrollbar {
    width: 6px;
}

.sticker-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 3px;
}

.sticker-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.sticker-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ==========================================
   底部输入栏 (Dock)
   ========================================== */
.echo-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--navbar-bg);
    border-top: 1px solid var(--navbar-border);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 100;
}

/* iOS 专属：键盘弹起时，去掉安全区并往上抬，避开键盘工具栏 */
body.ios-pwa .echo-dock {
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), padding-bottom 0.2s ease;
}

body.ios-pwa .echo-dock:focus-within {
    padding-bottom: 8px;
    transform: translateY(-40px);
}

.echo-dock .btn-round {
    width: 32px; height: 36px;
    background: transparent; box-shadow: none; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--topbar-icon);
    cursor: pointer; flex-shrink: 0; margin-bottom: 0;
}
.echo-dock .btn-send {
    width: 30px;
    height: 30px;
    margin-bottom: 3px;
    border-radius: 50%;
    background: var(--dock-send-bg);
    box-shadow: var(--dock-send-shadow);
}
.echo-dock .btn-send i {
    color: var(--dock-send-icon-color);
    font-size: 14px;
    line-height: 1;
}

/* 语音按钮 */
.btn-voice {
    margin-bottom: 4px;
}
.btn-voice.active {
    background: var(--dock-voice-active-bg);
    box-shadow: var(--dock-voice-active-shadow);
}
.btn-voice.active i { color: var(--dock-send-icon-color); }

/* 按住说话 */
.hold-talk-pill {
    flex: 1; height: 38px; border-radius: 19px; background: var(--dock-input-bg);
    display: none; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: var(--dock-input-text-color); cursor: pointer; user-select: none;
}
.hold-talk-btn {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; letter-spacing: 2px;
    user-select: none; -webkit-user-select: none; cursor: pointer;
    border-radius: 19px; transition: background 0.15s, transform 0.1s;
    color: var(--dock-input-text-color);
}
.hold-talk-btn:active,
.hold-talk-btn.recording {
    background: rgba(108, 92, 231, 0.12);
    transform: scale(0.97);
}

/* 录音提示浮层 */
.voice-recording-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
}
.voice-recording-box {
    width: 160px; height: 160px;
    border-radius: 0;
    background: rgba(40,40,40,0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
}
.voice-recording-box i { font-size: 48px; }
.voice-recording-box .voice-timer { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.voice-recording-box .voice-hint { font-size: 12px; opacity: 0.7; }
.voice-recording-box.cancel-zone {
    background: rgba(200,50,50,0.88);
}
.voice-recording-box.cancel-zone .voice-hint { content: '松开取消'; }

/* 语音气泡重构 */
.voice-message-group { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; position: relative; }
.voice-bubble {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 0; cursor: pointer;
    width: var(--bubble-width, 100px);
    position: relative;
}
.voice-bubble.me { background-color: var(--bubble-voice-me-bg); color: var(--bubble-voice-me-text); }
.voice-bubble.other { background-color: var(--bubble-voice-other-bg); color: var(--bubble-voice-other-text); }

.voice-bubble.other i,
.voice-bubble.other .voice-static,
.voice-bubble.other .voice-waves,
.voice-bubble.other .voice-dur { color: var(--bubble-voice-other-text); }
.voice-bubble.other .v-bar { background: var(--bubble-voice-other-text); }

.unread-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    z-index: 10;
    pointer-events: none;
}
.voice-static { font-size: 20px; color: inherit; }
.voice-anim { display: flex; align-items: center; gap: 2px; }
.v-bar { width: 3px; border-radius: 2px; height: 6px; background: currentColor; animation: v-wave 0.8s infinite; }
.voice-dur { font-size: 14px; font-weight: 500; color: inherit; }
.voice-text-caption { font-size: 13px; color: var(--text-sub); line-height: 1.4; padding-left: 4px; max-width: 280px; text-align: right; }

.voice-bubble .voice-waves {
    font-size: 18px;
    letter-spacing: 2px;
    animation: voiceWave 1.2s ease-in-out infinite;
    display: block;
}
.voice-bubble .voice-dur {
    font-size: 13px;
    opacity: 0.7;
    display: block !important;
}
@keyframes voiceWave {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* 🎤 语音消息专用容器（垂直排列） */
.voice-msg-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: auto;
    width: fit-content;
    max-width: 260px;
}

/* 🎤 语音转录文本（微信风格：语音下方的文字） */
.voice-transcript {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
    margin-top: 8px;
    padding: 10px 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
    width: 100%;
}

/* 转录文本 - 用户消息（蓝色调�?*/
.msg-row.me .voice-transcript {
    background: rgba(208, 231, 255, 0.6); /* 淡蓝�?*/
    color: rgba(13, 71, 161, 0.85);
    border-top-color: rgba(13, 71, 161, 0.15);
}

/* 转录文本 - AI 消息（白色调�?*/
.msg-row.other .voice-transcript {
    background: rgba(255, 255, 255, 0.8); /* 白底 */
    color: rgba(0, 0, 0, 0.75);
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* 🗑�?废弃旧样式（保留兼容性） */
.voice-subtext {
    display: none; /* 不再使用旧的subtext样式 */
}

.echo-dock .input-pill {
    flex: 1;
    min-width: 0;
    min-height: 36px; max-height: 100px;
    background: var(--dock-input-bg);
    border-radius: 18px;
    display: flex; align-items: flex-end;
    padding: 6px 8px; gap: 4px;
    border: 1px solid transparent; transition: 0.3s;
}
.echo-dock .input-pill:focus-within {
    background: var(--dock-input-bg); border-color: var(--navbar-border);
}

/* @ 鎸夐挳鏍峰紡 */
.btn-at {
    font-size: 14px;
    font-weight: bold;
    color: var(--dock-btn-icon-color);
    padding: 2px 3px;
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.btn-at:hover,
.btn-at:active {
    color: var(--me-text);
}

.echo-dock #chat-input {
    flex: 1; min-width: 0; border: none;
    background: transparent;
    font-size: 15px; color: var(--dock-input-text-color);
    line-height: 24px; outline: none; resize: none;
    padding: 0; margin: 0;
    max-height: 88px;
    overflow-y: auto;
    font-family: inherit;
}

#chat-input::-webkit-scrollbar { width: 4px; }
#chat-input::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }

.echo-dock #chat-input::placeholder { color: rgba(154, 139, 144, 0.5); }

/* AI 榄旀硶妫掑湪杈撳叆妗嗗唴 */
.btn-ai {
    font-size: 16px;
    color: var(--me-text);
    cursor: pointer;
    padding: 1px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.btn-ai:active {
    transform: scale(0.9);
}

/* @ 寮瑰嚭闈㈡澘 */
.at-popup {
    position: absolute;
    bottom: 70px;
    left: 60px;
    right: 60px;
    background: var(--glass-bg);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 95;
    max-height: 300px;
    overflow-y: auto;
    display: none; /* 默认隐藏 */
}

.at-popup.show {
    display: block !important; /* 激活时显示 */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.at-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.2s ease;
}

.at-item:last-child {
    border-bottom: none;
}

.at-item:active {
    background: rgba(227, 242, 253, 0.5);
}

.at-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.at-name {
    font-size: 14px;
    color: var(--nav-text);
    font-weight: 500;
}

/* ==========================================
   1. 底部输入框 (Dock) - 键盘避让与层级压制
   ========================================== */
.echo-dock {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--navbar-bg) !important;
    border-top: 1px solid var(--navbar-border);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;

    z-index: 100 !important; /* 降低层级，不压住多选删除按钮 */
    transition: background 0.2s, padding 0.2s, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 🗡️ 保留黄金 40px：仅在打字时抬高避开黑条 */
body.ios-pwa .echo-dock:focus-within {
    transform: translateY(-40px);
    background: var(--navbar-bg) !important;
}

/* 多选模式时隐藏底栏，让出位置给删除按钮 */
body.manage-mode .echo-dock {
    display: none !important;
}

/* ==========================================
   2. 拓展面板 (Drawer) - 死死骑在输入框头上
   ========================================== */
.clean-drawer {
    position: fixed !important;

    /* 🪟 弹窗化：铺满全屏作为居中层 + 遮罩，不再贴底 */
    inset: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;

    /* 遮罩底色（纯透明黑，无毛玻璃）*/
    background: rgba(0, 0, 0, 0.5);

    padding: 24px !important;
    box-sizing: border-box;

    z-index: 1000 !important; /* 高于 echo-dock(100)，盖住输入栏 */

    display: none;
    align-items: center;
    justify-content: center;

    /* 遮罩淡入 */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.clean-drawer.show,
.clean-drawer.active {
    display: flex !important;
    opacity: 1;
}

/* ==========================================
   3. 彻底根除 iOS 图标容器暴涨的毒药
   ========================================== */
#newSwiper {
    width: 100%;
    overflow: hidden !important;
    height: max-content !important;
    margin-top: 0 !important;
}

.expansion-track {
    display: flex;
    width: 200%;
    align-items: flex-start !important; /* 🗡️ 核心解药：禁止 iOS 垂直拉伸！ */
}

.expansion-page {
    width: 50%;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0 5px;
    height: max-content !important; /* 强制包裹内容 */
}

/* 把手和分页器微调 */
.panel-handle {
    width: 36px;
    height: 4px !important;
    border-radius: 2px;
    background: var(--navbar-border);
    margin: 0 auto 16px !important;
    flex-shrink: 0;
}
.echo-pagination {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

/* 网格容器 */
.clean-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-height: 50vh;
    overflow-y: auto;
}





/* 网格项 */
.clean-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    font-size: 11px;
    color: var(--drawer-label-color);
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clean-item:active {
    transform: scale(0.95);
    background: var(--drawer-item-active-bg);
}

/* 澶村儚鐩掑瓙 */
.user-avatar-box,
.npc-avatar-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.user-avatar-box.active,
.npc-avatar-box.active {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.user-avatar-img,
.npc-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 鍥炬爣鐩掑瓙 */
.clean-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--drawer-item-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--chatitem-name-color);
}

/* 鏆楅粦妯″紡 */
/* clean-drawer dark bg handled by CSS variable --drawer-bg */

/* clean-item / clean-icon-box dark handled by CSS variables */

body.dark-mode .user-avatar-box.active,
body.dark-mode .npc-avatar-box.active {
    border-color: #a29bfe;
    box-shadow: 0 0 0 3px rgba(162, 155, 254, 0.3);
}

/* ========== 鎷撳睍闈㈡澘鍙岄�?Swiper ========== */
.expansion-swiper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.expansion-track {
    display: flex;
    width: 200%;
    align-items: flex-start !important; /* 🗡️ 核心解药：禁止 iOS 垂直拉伸！ */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expansion-page {
    width: 50%;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0 5px;
    height: max-content !important; /* 强制包裹内容 */
}

.ex-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    height: max-content !important; /* 剥夺拉伸权 */
    background: transparent; /* 新版式：卡片底色移入圆形徽章 */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ex-item:active { transform: scale(0.9); background: transparent; }
.ex-item.empty { opacity: 0; pointer-events: none; }

/* 圆形徽章图标 */
.ex-item i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--drawer-icon-color);
    background: var(--drawer-item-bg);
    border: 1px solid var(--drawer-border, rgba(0,0,0,0.06));
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ex-item:active i { background: var(--drawer-item-active-bg); }
.ex-item span { font-size: 11px; color: var(--drawer-label-color); letter-spacing: 0.3px; }

/* 功能色修饰类（非主题色，夜间保留，仅提亮）。淡底+描边+彩色图标 */
.ex-item.icon-red i    { color: var(--ex-red, #E53935);   background: var(--ex-red-bg, rgba(229,57,53,0.06));  border-color: var(--ex-red-bd, rgba(229,57,53,0.2)); }
.ex-item.icon-green i  { color: var(--ex-green, #43A047); background: var(--ex-green-bg, rgba(67,160,71,0.06)); border-color: var(--ex-green-bd, rgba(67,160,71,0.2)); }
.ex-item.icon-gold i   { color: var(--ex-gold, #FB8C00);  background: var(--ex-gold-bg, rgba(251,140,0,0.06));  border-color: var(--ex-gold-bd, rgba(251,140,0,0.2)); }
.ex-item.icon-red:active i   { background: var(--ex-red, #E53935);   border-color: var(--ex-red, #E53935);   color: #fff; }
.ex-item.icon-green:active i { background: var(--ex-green, #43A047); border-color: var(--ex-green, #43A047); color: #fff; }
.ex-item.icon-gold:active i  { background: var(--ex-gold, #FB8C00);  border-color: var(--ex-gold, #FB8C00);  color: #fff; }

/* 夜间：功能色提亮（黑灰底上更醒目），底色压成中性深灰，不引入彩色卡片 */
body.dark-mode, body.night {
    --ex-red: #FF5252;  --ex-green: #69F0AE; --ex-gold: #FFB74D;
    --ex-red-bg: rgba(255,82,82,0.1);  --ex-green-bg: rgba(105,240,174,0.1); --ex-gold-bg: rgba(255,183,77,0.1);
    --ex-red-bd: rgba(255,82,82,0.25); --ex-green-bd: rgba(105,240,174,0.25); --ex-gold-bd: rgba(255,183,77,0.25);
}

.echo-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}
.echo-pagination .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--drawer-dot-inactive-color); transition: 0.3s; }
.echo-pagination .dot.active { background: var(--drawer-dot-active-color); width: 16px; border-radius: 3px; }

/* 分页指示器 */
.expansion-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 5px;
}

.expansion-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--drawer-dot-inactive-color);
    transition: all 0.3s ease;
}

.expansion-dots .dot.active {
    width: 18px;
    border-radius: 3px;
    background: var(--drawer-dot-active-color);
}

/* ex-item dark mode handled by CSS variables (--drawer-item-bg, --drawer-icon-color, etc.) */

body.dark-mode .expansion-dots .dot.active {
    background: rgba(var(--dm-accent-rgb), 0.9);
}

/* ========== Echo 鍔熻兘寮圭獥鏍峰�?========== */
.echo-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.echo-modal.show {
    display: flex;
}

.echo-modal .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* ActionSheet 鏍峰�?(閫氳瘽閫夋嫨) */
.action-sheet {
    position: relative;
    z-index: 201;
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px 16px 0 0;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

.action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 10px;
    background: rgba(240, 244, 248, 0.8);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-item:active {
    transform: scale(0.98);
    background: rgba(227, 242, 253, 0.9);
}

.action-item i {
    font-size: 24px;
    color: #0d47a1;
}

.action-item span {
    font-size: 16px;
    color: #546e7a;
    font-weight: 500;
}

.action-cancel {
    margin-top: 5px;
    padding: 14px;
    text-align: center;
    background: rgba(255, 82, 82, 0.1);
    color: #ff5252;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.action-cancel:active {
    transform: scale(0.98);
    background: rgba(255, 82, 82, 0.2);
}

/* 浠ｄ粯闈㈡澘鏍峰�?*/
.pay-panel {
    position: relative;
    z-index: 201;
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
}

.pay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pay-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.pay-close {
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
}

.pay-tabs {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pay-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.pay-tab.active {
    color: #0d47a1;
}

.pay-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #0d47a1;
    border-radius: 2px 2px 0 0;
}

.pay-content {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.pay-tab-content {
    display: none;
}

.pay-tab-content.active {
    display: block;
}

.cart-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}

.cart-empty i {
    font-size: 64px;
    margin-bottom: 10px;
    opacity: 0.3;
}

.cart-empty p {
    font-size: 14px;
}

.custom-pay-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pay-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pay-input-group label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.pay-input-group input {
    padding: 12px 16px;
    background: rgba(240, 244, 248, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.pay-input-group input:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(13, 71, 161, 0.3);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.05);
}

.pay-confirm-btn {
    margin-top: 10px;
    padding: 14px;
    background: linear-gradient(135deg, var(--champagne-light), var(--champagne-primary));
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(205, 174, 154, 0.3);
    transition: all 0.2s ease;
}

.pay-confirm-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(205, 174, 154, 0.4);
}

/* 鏆楅粦妯″紡閫傞�?*/
body.dark-mode .action-sheet,
body.dark-mode .pay-panel {
    background: #1A1A1A;
}

body.dark-mode .action-item {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .action-item:active {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .action-item i {
    color: var(--dm-accent);
}

body.dark-mode .action-item span {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .pay-title {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .pay-close {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .pay-tab {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .pay-tab.active {
    color: var(--dm-accent);
}

body.dark-mode .pay-tab.active::after {
    background: var(--dm-accent);
}

body.dark-mode .pay-input-group label {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .pay-input-group input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .pay-input-group input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--dm-accent-rgb), 0.3);
}

body.dark-mode .pay-confirm-btn {
    background: linear-gradient(135deg, rgba(205, 174, 154, 0.25), rgba(205, 174, 154, 0.15));
    color: #dfc8b8;
}

/* 闈㈡澘鐗瑰畾鏍峰�?*/
.bg-pink { background: linear-gradient(135deg, #ff9a9e, #fad0c4) !important; color: #fff !important; }
.bg-yellow { background: linear-gradient(135deg, #ffeaa7, #fdcb6e) !important; color: #fff !important; }
.bg-blue { background: linear-gradient(135deg, #74b9ff, #0984e3) !important; color: #fff !important; }
.bg-red { background: linear-gradient(135deg, #ff7675, #d63031) !important; color: #fff !important; }
.bg-purple { background: linear-gradient(135deg, #a29bfe, #6c5ce7) !important; color: #fff !important; }
.bg-mint { background: linear-gradient(135deg, #81ecec, #00b894) !important; color: #fff !important; }

/* 鐜荤拑鏁堟灉�?*/
.glass-effect {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 渚ц竟鏍忔牱寮忓�?- 鍏ㄥ睆骞抽摵 */
#echo-sidebar,
.sidebar {
    position: fixed;
    right: -100%;
    top: 0;
    width: 85%;
    max-width: 400px;
    height: 100%;
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 1000;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.05);
    
    /* 🌟 半透明磨砂玻璃效果 */
    background: rgba(255, 255, 255, 0.6) !important;
    /* display: none; -- 移至 echo-sidebar.css 管理，用 right 偏移控制隐藏 */
    flex-direction: column;
}

#echo-sidebar.active,
.sidebar.active {
    right: 0;
    display: flex; /* 激活时显示 */
}

/* 渚ц竟鏍忓唴閮ㄦ牱�?*/
.sidebar-header,
.glass-header {
    /* 🔧 精准修剪：给侧边栏加上安全区，防止标题被压 */
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    flex-shrink: 0;
    color: #2d3436 !important;
    position: relative;
}

/* Header 瑁呴グ浜戞湹 */
.sidebar-header::before,
.glass-header::before {
    content: '☁️';
    position: absolute;
    top: 8px;
    right: 50px;
    font-size: 14px;
    opacity: 0.3;
    animation: cloudFloat 6s ease-in-out infinite;
}

@keyframes cloudFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

.sidebar-header h3 {
    color: #2d3436 !important;
    margin: 0;
}

.sidebar-content,
.glass-content {
    padding: 0 20px 20px 20px;
    flex: 1;
    overflow-y: auto;
    
    /* 馃啎 娣辩伆瀛椾�?*/
    color: #2d3436 !important;
}

/* 鐜荤拑鍗＄墖 - 缇よ亰缁勪欢瀹瑰�?*/
.glass-card {
    background: var(--glass-bg, rgba(255, 255, 255, 0.65));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.8));
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 15px;
    box-shadow: var(--glass-shadow, 5px 5px 15px rgba(166, 171, 189, 0.2));
}

/* 馃啎 鑳屾櫙璁剧疆闈㈡澘鏍峰紡 */
.bg-panel-wrapper {
    margin-bottom: 12px;
}

.bg-panel-content {
    animation: slideDown 0.3s ease;
}

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

/* 馃啎 渚ц竟鏍忚缃」鏍囩浼樺�?*/
.setting-label {
    display: block;
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2d3436 !important;
}

.setting-input,
.setting-textarea,
.setting-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(45, 52, 54, 0.15);
    border-radius: 8px;
    font-size: 14px;
    color: #2d3436 !important;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.setting-input:focus,
.setting-textarea:focus,
.setting-select:focus {
    outline: none;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.setting-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.setting-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #2d3436;
    /* �?鏀逛负娓呮柊鐜荤拑鎬侀鏍?*/
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.setting-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(162, 155, 254, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(162, 155, 254, 0.2);
}

.setting-btn:active {
    transform: translateY(0);
    background: rgba(240, 240, 255, 0.8);
}

/* 馃啎 灏忓瀷鎸夐挳 */
.setting-btn-sm {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2d3436;
    /* �?鏀逛负娓呮柊鐜荤拑鎬侀鏍?*/
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.setting-btn-sm:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(162, 155, 254, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(162, 155, 254, 0.2);
}

.setting-btn-sm:active {
    transform: translateY(0);
    background: rgba(240, 240, 255, 0.8);
}

/* 馃啎 鍗遍櫓鎸夐挳鏍峰�?*/
.danger-btn {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 245, 245, 0.8) 100%) !important;
    border: 1px solid rgba(231, 76, 60, 0.15) !important;
    color: #e74c3c !important;
}

.danger-btn:hover {
    background: linear-gradient(135deg, 
        rgba(255, 245, 245, 0.9) 0%, 
        rgba(255, 235, 235, 0.9) 100%) !important;
    border-color: rgba(231, 76, 60, 0.3) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15) !important;
    transform: translateY(-1px);
}

.danger-btn:active {
    transform: translateY(0);
    background: rgba(255, 225, 225, 0.9) !important;
}

/* 馃啎 鍗遍櫓鍖哄煙鏍囬�?*/
.danger-zone .setting-title {
    color: #e74c3c !important;
}

/* 绉婚櫎鍗遍櫓鍖哄煙鐨勮竟妗嗭紙鐢?HTML 鍐呰仈鏍峰紡瀹氫箟锛?*/
.danger-zone {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 馃啎 鍔犺浇鏃嬭浆鍔ㄧ�?*/
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.setting-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #2d3436 !important;
}

.switch-btn {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(200, 200, 200, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.switch-btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.switch-btn.on {
    /* �?鏀逛负娓呮柊鐨勮杽鑽风豢鐜荤拑�?*/
    background: linear-gradient(135deg, 
        rgba(129, 236, 236, 0.7) 0%, 
        rgba(0, 184, 148, 0.7) 100%);
    border-color: rgba(0, 184, 148, 0.2);
}

.switch-btn.on::after {
    left: 22px;
}

.setting-divider {
    height: 1px;
    background: rgba(45, 52, 54, 0.08);
    margin: 20px 0;
}

.setting-section {
    margin-bottom: 0;
}

.setting-title {
    font-size: 15px;
    font-weight: 700;
    color: #2d3436 !important;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 缇ゅ叕鍛婃牱�?*/
.notice-title {
    font-size: 12px;
    color: #ff9800;
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.notice-content {
    font-size: 13px;
    color: var(--nav-text);
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 8px;
    border-radius: 6px;
}

.notice-content:hover {
    background: rgba(255, 152, 0, 0.05);
}

.notice-content[contenteditable="true"] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ff9800;
    outline: none;
}

/* 鎴愬憳澧欑綉�?*/
.member-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.grid-avatar {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    border: 1px solid #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.grid-avatar:active {
    transform: scale(0.95);
}

.add-member {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    border: 1px dashed #b0bec5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0bec5;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s ease;
}

.add-member:hover {
    border-color: var(--me-text);
    color: var(--me-text);
}

/* 渚ц竟鏍忚缃�?*/
.sidebar-section-title {
    font-size: 12px;
    color: #90a4ae;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sidebar-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 10px 0;
    color: var(--nav-text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.sidebar-setting-row:last-child {
    border-bottom: none;
}

#sidebar-mask,
.sidebar-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999;
    display: none;
}

#sidebar-mask.active,
.sidebar-mask.active {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

/* === 聊天列表样式（时间轴版）=== */

/* ==========================================
   回响 · 局部色系变量（仅 #app-echo 生效，与全局主题解耦）
   - 默认 = 玫瑰主调（与项目原色一致）
   - 切换皮肤：给 #app-echo 加 data-echo-skin="rose|sakura|mint|..."
   - 5 套时段标签 + 2 套类型标签共用同一组语义色
   ========================================== */
#app-echo {
    /* 默认皮肤 = snow(极简纯白),用户没设 data-echo-skin 时走这里 */
    --echo-accent:           #111111;
    --echo-accent-text:      #ffffff;

    /* 顶部导航栏（默认 = 主强调色实色；浅色系主题需单独覆盖） */
    --echo-nav-bg:           var(--echo-accent);
    --echo-nav-text:         var(--echo-accent-text);
    --echo-nav-btn-bg:       rgba(255, 255, 255, 0.18);
    --echo-nav-btn-bg-active:rgba(255, 255, 255, 0.28);

    /* 主题色阶梯(snow:几乎全白,只用极淡灰区分) */
    --echo-tint-3:           #ffffff;  /* 列表底 = 纯白 */
    --echo-tint-6:           #ffffff;  /* 顶栏底 / collage 底 = 纯白 */
    --echo-tint-10:          #f4f4f4;  /* 置顶卡片 = 淡灰 */
    --echo-tint-14:          #ebebeb;  /* 头像框 hover */
    --echo-tint-border:      #e8e8e8;  /* 边框 */

    /* 5 套时段 / 类型语义色：bg / text / border 三套配 */
    --echo-tag-pink-bg:      #fbeaf0;
    --echo-tag-pink-text:    #b48b9d;
    --echo-tag-pink-border:  rgba(180, 139, 157, 0.22);

    --echo-tag-blue-bg:      #eaf0fb;
    --echo-tag-blue-text:    #8b9db4;
    --echo-tag-blue-border:  rgba(139, 157, 180, 0.22);

    --echo-tag-yellow-bg:    #fff5e0;
    --echo-tag-yellow-text:  #c9a96a;
    --echo-tag-yellow-border:rgba(201, 169, 106, 0.22);

    --echo-tag-mint-bg:      #e6f4ee;
    --echo-tag-mint-text:    #7ba898;
    --echo-tag-mint-border:  rgba(123, 168, 152, 0.22);

    --echo-tag-lavender-bg:  #efeafb;
    --echo-tag-lavender-text:#9a8cc4;
    --echo-tag-lavender-border:rgba(154, 140, 196, 0.22);

    --echo-tag-being-bg:     #ececef;
    --echo-tag-being-text:   #5a5560;
    --echo-tag-being-border: rgba(90, 85, 96, 0.26);
}

/* 15 套主皮肤 — 同时改 accent 和阶梯色（方法二：直接换整组），
   保证每个元素都跟着变，只是浓度不同。 */
#app-echo[data-echo-skin="snow"] {
    /* snow（极简白）：页面整体纯白，置顶用淡灰，accent 黑色给强调元素 */
    --echo-accent: #111111; --echo-accent-text: #ffffff;
    --echo-nav-bg: #ffffff;                  /* 导航栏 = 纯白 */
    --echo-nav-text: #111111;
    --echo-nav-btn-bg: #f5f5f5;              /* 按钮 = 极浅灰 */
    --echo-nav-btn-bg-active: #eaeaea;
    --echo-tint-3: #ffffff;                  /* 列表底 = 纯白 */
    --echo-tint-6: #ffffff;                  /* collage 卡 = 纯白 */
    --echo-tint-10: #f4f4f4;                 /* 置顶卡片 = 淡灰 */
    --echo-tint-14: #ebebeb;
    --echo-tint-border: #e8e8e8;
}
#app-echo[data-echo-skin="milky"] {
    --echo-accent: #c2b8b2; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(194, 184, 178, 0.10);
    --echo-tint-6: rgba(194, 184, 178, 0.16);
    --echo-tint-10: rgba(194, 184, 178, 0.24);
    --echo-tint-14: rgba(194, 184, 178, 0.32);
    --echo-tint-border: rgba(194, 184, 178, 0.4);
}
#app-echo[data-echo-skin="latte"] {
    --echo-accent: #a49387; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(164, 147, 135, 0.06);
    --echo-tint-6: rgba(164, 147, 135, 0.10);
    --echo-tint-10: rgba(164, 147, 135, 0.16);
    --echo-tint-14: rgba(164, 147, 135, 0.22);
    --echo-tint-border: rgba(164, 147, 135, 0.3);
}
#app-echo[data-echo-skin="peach"] {
    --echo-accent: #c29990; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(194, 153, 144, 0.06);
    --echo-tint-6: rgba(194, 153, 144, 0.10);
    --echo-tint-10: rgba(194, 153, 144, 0.16);
    --echo-tint-14: rgba(194, 153, 144, 0.22);
    --echo-tint-border: rgba(194, 153, 144, 0.3);
}
#app-echo[data-echo-skin="sakura"] {
    --echo-accent: #b598a1; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(181, 152, 161, 0.06);
    --echo-tint-6: rgba(181, 152, 161, 0.10);
    --echo-tint-10: rgba(181, 152, 161, 0.16);
    --echo-tint-14: rgba(181, 152, 161, 0.22);
    --echo-tint-border: rgba(181, 152, 161, 0.3);
}
#app-echo[data-echo-skin="rose"] {
    --echo-accent: #b08d97; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(176, 141, 151, 0.06);
    --echo-tint-6: rgba(176, 141, 151, 0.10);
    --echo-tint-10: rgba(176, 141, 151, 0.16);
    --echo-tint-14: rgba(176, 141, 151, 0.22);
    --echo-tint-border: rgba(176, 141, 151, 0.3);
}
#app-echo[data-echo-skin="burgundy"] {
    --echo-accent: #9c6b73; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(156, 107, 115, 0.05);
    --echo-tint-6: rgba(156, 107, 115, 0.09);
    --echo-tint-10: rgba(156, 107, 115, 0.14);
    --echo-tint-14: rgba(156, 107, 115, 0.20);
    --echo-tint-border: rgba(156, 107, 115, 0.28);
}
#app-echo[data-echo-skin="taro"] {
    --echo-accent: #a393a5; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(163, 147, 165, 0.06);
    --echo-tint-6: rgba(163, 147, 165, 0.10);
    --echo-tint-10: rgba(163, 147, 165, 0.16);
    --echo-tint-14: rgba(163, 147, 165, 0.22);
    --echo-tint-border: rgba(163, 147, 165, 0.3);
}
#app-echo[data-echo-skin="lavender"] {
    --echo-accent: #9398b0; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(147, 152, 176, 0.06);
    --echo-tint-6: rgba(147, 152, 176, 0.10);
    --echo-tint-10: rgba(147, 152, 176, 0.16);
    --echo-tint-14: rgba(147, 152, 176, 0.22);
    --echo-tint-border: rgba(147, 152, 176, 0.3);
}
#app-echo[data-echo-skin="blue"] {
    --echo-accent: #8a9ca8; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(138, 156, 168, 0.06);
    --echo-tint-6: rgba(138, 156, 168, 0.10);
    --echo-tint-10: rgba(138, 156, 168, 0.16);
    --echo-tint-14: rgba(138, 156, 168, 0.22);
    --echo-tint-border: rgba(138, 156, 168, 0.3);
}
#app-echo[data-echo-skin="mblue"] {
    --echo-accent: #7a8b99; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(122, 139, 153, 0.05);
    --echo-tint-6: rgba(122, 139, 153, 0.09);
    --echo-tint-10: rgba(122, 139, 153, 0.14);
    --echo-tint-14: rgba(122, 139, 153, 0.20);
    --echo-tint-border: rgba(122, 139, 153, 0.28);
}
#app-echo[data-echo-skin="mint"] {
    --echo-accent: #86a39e; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(134, 163, 158, 0.06);
    --echo-tint-6: rgba(134, 163, 158, 0.10);
    --echo-tint-10: rgba(134, 163, 158, 0.16);
    --echo-tint-14: rgba(134, 163, 158, 0.22);
    --echo-tint-border: rgba(134, 163, 158, 0.3);
}
#app-echo[data-echo-skin="matcha"] {
    --echo-accent: #8f9e8b; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(143, 158, 139, 0.06);
    --echo-tint-6: rgba(143, 158, 139, 0.10);
    --echo-tint-10: rgba(143, 158, 139, 0.16);
    --echo-tint-14: rgba(143, 158, 139, 0.22);
    --echo-tint-border: rgba(143, 158, 139, 0.3);
}
#app-echo[data-echo-skin="eucalyptus"] {
    --echo-accent: #79948d; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(121, 148, 141, 0.05);
    --echo-tint-6: rgba(121, 148, 141, 0.09);
    --echo-tint-10: rgba(121, 148, 141, 0.14);
    --echo-tint-14: rgba(121, 148, 141, 0.20);
    --echo-tint-border: rgba(121, 148, 141, 0.28);
}
#app-echo[data-echo-skin="grey"] {
    --echo-accent: #8b9096; --echo-accent-text: #ffffff;
    --echo-tint-3: rgba(139, 144, 150, 0.06);
    --echo-tint-6: rgba(139, 144, 150, 0.10);
    --echo-tint-10: rgba(139, 144, 150, 0.16);
    --echo-tint-14: rgba(139, 144, 150, 0.22);
    --echo-tint-border: rgba(139, 144, 150, 0.3);
}

.chat-list-container {
    background: var(--echo-tint-3, var(--chatlist-bg));
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

#view-chats {
    min-height: 100%;
    background: var(--chatlist-bg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 语音图标在 dock 中的对齐 */
.echo-dock .btn-voice-icon {
    font-size: 20px; color: var(--dock-btn-icon-color);
    cursor: pointer; align-self: center; margin: 0 4px;
    opacity: var(--dock-voice-opacity);
}

.echo-dock #echo-send-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--dock-send-bg);
    box-shadow: 0 2px 8px rgba(107, 78, 88, 0.2);
    margin-bottom: 3px;
    font-size: 14px;
}
.echo-dock #echo-send-icon i,
.echo-dock #echo-send-icon .ri-arrow-up-line {
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
}

.echo-dock .btn-sticker {
    font-size: 20px; color: var(--topbar-sub);
    cursor: pointer; flex-shrink: 0; margin-bottom: -2px;
}

/* 顶部导航栏（手账拼贴风）— 主题色实色，与列表浅 tint 形成层次 */
.chat-list-header {
    padding: calc(38px + env(safe-area-inset-top, 0px)) 22px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--echo-nav-bg, var(--chatlist-header-bg));
    color: var(--echo-nav-text, #ffffff);
    border-bottom: none;
}

.chat-list-header .header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-list-header h2 {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-style: italic;
    font-size: 28px;
    font-weight: 800;
    color: var(--echo-nav-text, #ffffff);
    line-height: 1;
    margin: 0;
    padding: 0;
}

.chat-list-header .subtitle {
    font-size: 9px;
    font-weight: 800;
    color: var(--echo-nav-text, #ffffff);
    opacity: 0.75;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
}

.chat-list-header .header-actions {
    display: flex;
    gap: 8px;
}

.chat-list-header .back-btn,
.chat-list-header .menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--echo-nav-btn-bg, rgba(255, 255, 255, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--echo-nav-text, #ffffff);
    cursor: pointer;
    border: none;
    transition: 0.2s;
}

.chat-list-header .back-btn:active,
.chat-list-header .menu-btn:active {
    transform: scale(0.9);
    background: var(--echo-nav-btn-bg-active, rgba(255, 255, 255, 0.28));
}

/* 故事栏（隐藏，保留兼容） */
.story-rail,
#chat-avatars-rail {
    display: none;
}

/* ==========================================
   顶部拼贴区（手账风，三张图可点击替换 / 走云端）
   ========================================== */
.echo-collage {
    position: relative;
    height: 200px;
    margin: 0 16px 6px;
    padding: 18px;
    background: var(--echo-tint-6, var(--chatitem-bg));
    border: 1px solid var(--echo-tint-border, var(--chatitem-border));
    border-radius: 22px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.echo-collage .main-photo-wrap {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 165px;
    height: 110px;
    background: var(--chatitem-bg);
    padding: 4px 4px 16px;
    border: 1px solid var(--chatitem-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: rotate(-2deg);
    transition: 0.4s ease;
    cursor: pointer;
    z-index: 2;
    overflow: hidden;
}

.echo-collage .main-photo-wrap:active {
    transform: rotate(-2deg) scale(0.97);
}

.echo-collage .main-photo {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
    background: var(--chatitem-active-bg);
    display: block;
}

.echo-collage .serif-text-box {
    position: absolute;
    top: 22px;
    left: 208px;
    right: 78px;
    text-align: left;
    pointer-events: none;
}

.echo-collage .serif-title {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 800;
    color: var(--chatitem-name-color);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.echo-collage .serif-sub {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--echo-accent, var(--chatitem-pin-color));
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.echo-collage .tiny-text {
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--chatitem-time-color);
    margin-top: 10px;
    letter-spacing: 0.5px;
    overflow: hidden;
    max-height: 28px;
}

.echo-collage .big-cutout-text {
    position: absolute;
    bottom: 12px;
    left: 18px;
    font-family: 'Inter', 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--echo-accent);
    opacity: 0.32;
    pointer-events: none;
    user-select: none;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

.echo-collage .sub-photo-1,
.echo-collage .sub-photo-2 {
    position: absolute;
    object-fit: cover;
    border: 2px solid var(--chatitem-bg);
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    z-index: 3;
    cursor: pointer;
    transition: 0.2s;
    background: var(--chatitem-active-bg);
}

.echo-collage .sub-photo-1 {
    bottom: 18px;
    right: 90px;
    width: 64px;
    height: 44px;
}

.echo-collage .sub-photo-2 {
    bottom: 18px;
    right: 18px;
    width: 56px;
    height: 56px;
}

.echo-collage .sub-photo-1:active,
.echo-collage .sub-photo-2:active {
    transform: scale(0.95);
}

/* 隐藏的文件 input */
.echo-collage-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* 上传中遮罩 */
.echo-collage [data-uploading="1"] {
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================
   便签换肤按钮 + 15 色悬浮调色盘
   ========================================== */
.echo-skin-note {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 48px;
    background: #fef6e4;
    border: 1px solid var(--chatitem-border);
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.08);
    transform: rotate(6deg);
    z-index: 5;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    user-select: none;
}

.echo-skin-note:active {
    transform: rotate(6deg) scale(0.92);
}

.echo-skin-note::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 24px;
    height: 10px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.echo-skin-note .note-text {
    font-size: 9px;
    font-weight: 900;
    color: #a49387;
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.echo-skin-popover {
    position: absolute;
    top: 75px;
    right: 18px;
    background: var(--chatitem-bg);
    border: 1px solid var(--chatitem-border);
    border-radius: 16px;
    padding: 12px;
    width: 168px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 6;
}

.echo-skin-popover.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.echo-skin-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.echo-skin-swatch:active {
    transform: scale(0.85);
}

.echo-skin-swatch.active {
    box-shadow: 0 0 0 2px var(--chatitem-bg), 0 0 0 4px var(--echo-accent);
}

.echo-skin-swatch[data-skin="snow"]       { background: #ffffff; border-color: #e0e0e0; }
.echo-skin-swatch[data-skin="milky"]      { background: #c2b8b2; }
.echo-skin-swatch[data-skin="latte"]      { background: #a49387; }
.echo-skin-swatch[data-skin="peach"]      { background: #c29990; }
.echo-skin-swatch[data-skin="sakura"]     { background: #b598a1; }
.echo-skin-swatch[data-skin="rose"]       { background: #b08d97; }
.echo-skin-swatch[data-skin="burgundy"]   { background: #9c6b73; }
.echo-skin-swatch[data-skin="taro"]       { background: #a393a5; }
.echo-skin-swatch[data-skin="lavender"]   { background: #9398b0; }
.echo-skin-swatch[data-skin="blue"]       { background: #8a9ca8; }
.echo-skin-swatch[data-skin="mblue"]      { background: #7a8b99; }
.echo-skin-swatch[data-skin="mint"]       { background: #86a39e; }
.echo-skin-swatch[data-skin="matcha"]     { background: #8f9e8b; }
.echo-skin-swatch[data-skin="eucalyptus"] { background: #79948d; }
.echo-skin-swatch[data-skin="grey"]       { background: #8b9096; }




































/* 聊天列表（手账拼贴风） */
.chat-list-items {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 旧时间轴底线已弃用 */
.chat-list-items::before {
    content: none;
    display: none;
}

.chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    padding: 12px 14px;
    border-radius: 20px;
    border: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
    transition: 0.3s;
}

.chat-item:active {
    transform: scale(0.98);
}

.chat-item.pinned {
    background: var(--echo-tint-10, var(--chatitem-pin-bg));
    border-color: var(--echo-tint-border, var(--chatitem-border));
}

/* 旧时间轴节点已弃用 */
.chat-item::before {
    content: none;
    display: none;
}

.chat-item.unread::before,
.chat-item.pinned::before {
    content: none;
    display: none;
}

/* 头像 — 实体相片框 */
.avatar-box,
.avatar-container {
    flex-shrink: 0;
    position: relative;
    width: 56px;
    height: 56px;
    padding: 4px;
    border-radius: 18px;
    background: var(--chatitem-bg);
    border: 2px solid var(--chatitem-border);
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: 0.3s;
}

/* 头像框五色循环 — 跟时段标签同色，自动跟主题/夜间走全局变量 */
.chat-list-items .chat-item:nth-child(5n+1) .avatar-container {
    background: var(--echo-tag-pink-bg);
    border-color: var(--echo-tag-pink-border);
}
.chat-list-items .chat-item:nth-child(5n+2) .avatar-container {
    background: var(--echo-tag-blue-bg);
    border-color: var(--echo-tag-blue-border);
}
.chat-list-items .chat-item:nth-child(5n+3) .avatar-container {
    background: var(--echo-tag-yellow-bg);
    border-color: var(--echo-tag-yellow-border);
}
.chat-list-items .chat-item:nth-child(5n+4) .avatar-container {
    background: var(--echo-tag-mint-bg);
    border-color: var(--echo-tag-mint-border);
}
.chat-list-items .chat-item:nth-child(5n+5) .avatar-container {
    background: var(--echo-tag-lavender-bg);
    border-color: var(--echo-tag-lavender-border);
}

.single-avatar,
.chat-avatar {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    border: none;
    display: block;
}

.unread-badge {
    background: var(--chatitem-unread-bg);
    color: var(--chatitem-unread-text);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    box-shadow: none;
    flex-shrink: 0;
    line-height: 1.5;
}

.chat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.chat-name {
    font-family: 'Noto Serif SC', 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--chatitem-name-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.pin-icon {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--echo-accent, var(--chatitem-pin-color));
    color: var(--echo-accent-text, var(--chatitem-unread-text));
    flex-shrink: 0;
    line-height: 1.4;
}

.pin-icon i {
    font-size: 10px;
    line-height: 1;
}

.pin-icon .pin-text {
    line-height: 1;
}

/* 时段 / 群聊彩色标签 — 走全局变量，自动跟主题与夜间一致 */
.chat-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1.5;
    border: 1px solid transparent;
}

.chat-tag.pink {
    background: var(--echo-tag-pink-bg, #fbeaf0);
    color: var(--echo-tag-pink-text, #b48b9d);
    border-color: var(--echo-tag-pink-border, rgba(180, 139, 157, 0.18));
}

.chat-tag.blue {
    background: var(--echo-tag-blue-bg, #eaf0fb);
    color: var(--echo-tag-blue-text, #8b9db4);
    border-color: var(--echo-tag-blue-border, rgba(139, 157, 180, 0.18));
}

.chat-tag.yellow {
    background: var(--echo-tag-yellow-bg, #fff5e0);
    color: var(--echo-tag-yellow-text, #c9a96a);
    border-color: var(--echo-tag-yellow-border, rgba(201, 169, 106, 0.18));
}

.chat-tag.mint {
    background: var(--echo-tag-mint-bg, #e6f4ee);
    color: var(--echo-tag-mint-text, #7ba898);
    border-color: var(--echo-tag-mint-border, rgba(123, 168, 152, 0.22));
}

.chat-tag.lavender {
    background: var(--echo-tag-lavender-bg, #efeafb);
    color: var(--echo-tag-lavender-text, #9a8cc4);
    border-color: var(--echo-tag-lavender-border, rgba(154, 140, 196, 0.22));
}

.chat-tag.being {
    background: var(--echo-tag-being-bg, #ececef);
    color: var(--echo-tag-being-text, #5a5560);
    border-color: var(--echo-tag-being-border, rgba(90, 85, 96, 0.26));
    font-weight: 800;
    letter-spacing: 0.3px;
}

.chat-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--chatitem-time-color);
    flex-shrink: 0;
}

.chat-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.chat-msg {
    font-size: 13px;
    font-weight: 500;
    color: var(--chatitem-preview-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    line-height: 1.4;
}

.chat-item.unread .chat-msg {
    font-weight: 700;
    color: var(--chatitem-preview-unread);
}

.sender-highlight {
    color: var(--chatitem-name-color);
    font-weight: 700;
    margin-right: 2px;
}

.chat-list-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--chatitem-time-color);
}

.chat-list-empty-icon {
    font-size: 60px;
    margin-bottom: 14px;
    opacity: 0.6;
}

.chat-list-empty-text {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--chatitem-name-color);
}

.chat-list-empty-hint {
    font-size: 13px;
    color: var(--chatitem-preview-color);
    opacity: 1;
}

/* 分组分隔小标题（» Pinned / » Recent，可选） */
.chat-list-items .divider-text {
    font-family: 'Noto Serif SC', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--chatitem-time-color);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 14px 0 4px;
    padding-left: 6px;
}

.chat-list-items .divider-text.large {
    margin-top: 22px;
}

/* 可折叠分类段标题：白色圆角胶囊（书签图标+名字）+ 右侧折叠箭头，还原设计稿 */
.chat-list-items .cat-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    margin: 14px 0 4px;
    padding: 0 2px;
}
.chat-list-items .cat-divider.large {
    margin-top: 22px;
}
.chat-list-items .cat-divider .cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--chatitem-bg, #fff);
    color: var(--chatitem-name-color, #222);
    border: 2px solid var(--chatitem-border, rgba(0, 0, 0, 0.08));
    box-shadow: 2px 4px 0 var(--chatitem-border, rgba(0, 0, 0, 0.08));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    max-width: 80%;
}
.chat-list-items .cat-divider .cat-pill > i {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    margin-right: 2px;
    color: var(--chatitem-name-color, #222);
}
.chat-list-items .cat-divider .cat-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-list-items .cat-divider .cat-caret {
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    color: var(--chatitem-time-color);
    opacity: 0.6;
    transition: transform 0.2s;
    flex-shrink: 0;
    padding-right: 8px;
}
.chat-list-items .cat-divider.collapsed .cat-caret {
    transform: rotate(-90deg);
}

/* ===== 合并转发：聊天记录卡（气泡内） ===== */
.fwd-card {
    width: 220px;
    background: var(--chatitem-bg, #fff);
    border: 1px solid var(--chatitem-border, rgba(0,0,0,0.08));
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.fwd-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--chatitem-name-color, #222);
}
.fwd-card-head i { font-size: 15px; opacity: 0.7; }
.fwd-card-body {
    padding: 0 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fwd-card-line {
    font-size: 12px;
    line-height: 1.4;
    color: var(--chatitem-preview-color, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fwd-card-sender { color: var(--chatitem-name-color, #555); font-weight: 600; }
.fwd-card-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    vertical-align: middle;
    border: 1px solid var(--chatitem-border, rgba(0,0,0,0.08));
}
.fwd-card-foot {
    padding: 8px 14px;
    border-top: 1px solid var(--chatitem-border, rgba(0,0,0,0.06));
    font-size: 11px;
    color: var(--chatitem-time-color, #aaa);
}

/* ===== 合并转发：对象选择器 / 详情查看器（实色无毛玻璃）===== */
.fwd-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fwd-picker-box {
    width: 84%;
    max-width: 340px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--chatitem-bg, #fff);
    border: 1px solid var(--chatitem-border, rgba(0,0,0,0.08));
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.fwd-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 10px;
}
.fwd-picker-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--chatitem-name-color, #222);
}
.fwd-picker-close { font-size: 22px; color: var(--chatitem-time-color, #999); cursor: pointer; }
.fwd-picker-sub {
    padding: 0 18px 10px;
    font-size: 12px;
    color: var(--chatitem-time-color, #aaa);
}
.fwd-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 16px;
}
.fwd-picker-divider {
    font-size: 11px;
    font-weight: 800;
    color: var(--chatitem-time-color, #aaa);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 6px 6px;
}
.fwd-target-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.fwd-target-item:active { background: var(--chatitem-active-bg, rgba(0,0,0,0.04)); }
.fwd-target-item img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--chatitem-border, rgba(0,0,0,0.06));
    flex-shrink: 0;
}
.fwd-target-name {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--chatitem-name-color, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fwd-target-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--chatitem-time-color, #aaa);
    border: 1px solid var(--chatitem-border, rgba(0,0,0,0.1));
    border-radius: 8px;
    padding: 2px 7px;
    flex-shrink: 0;
}
.fwd-detail-row {
    padding: 10px 8px;
    border-bottom: 1px solid var(--chatitem-border, rgba(0,0,0,0.05));
}
.fwd-detail-sender {
    font-size: 12px;
    font-weight: 700;
    color: var(--chatitem-name-color, #555);
    margin-bottom: 3px;
}
.fwd-detail-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--chatitem-preview-color, #888);
    word-break: break-word;
}
.fwd-detail-img {
    max-width: 160px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--chatitem-border, rgba(0,0,0,0.06));
}

/* 分类选择面板（管理模式「分类」按钮弹出） */
.ec-cat-picker .ec-cat-hint {
    font-size: 13px;
    color: var(--glim-text-sec, #888);
    margin-bottom: 14px;
}
.ec-cat-picker .ec-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ec-cat-picker .ec-cat-chip {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    border: 1.5px solid var(--glim-border, #444);
    background: var(--glim-surface, rgba(255,255,255,0.04));
    color: var(--glim-text, #f5f5f5);
    cursor: pointer;
    transition: 0.15s;
}
.ec-cat-picker .ec-cat-chip:active {
    transform: scale(0.94);
}
.ec-cat-picker .ec-cat-chip.add {
    border-style: dashed;
    color: var(--glim-accent, #ff6b9d);
    border-color: var(--glim-accent, #ff6b9d);
}
.ec-cat-picker .ec-cat-chip.ghost {
    opacity: 0.7;
}
.ec-cat-picker .ec-cat-empty {
    font-size: 12px;
    color: var(--glim-text-sec, #888);
    align-self: center;
}

/* ==========================================
   管理模式 (Manage Mode) — 复选框滑入式
   ========================================== */
.tl-checkbox {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 0;
    height: 22px;
    border-radius: 50%;
    border: 0 solid var(--chatitem-time-color);
    opacity: 0;
    transition: width 0.3s, opacity 0.3s, margin-right 0.3s, border-width 0.3s,
                background 0.2s, border-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 13px;
    z-index: 1;
    background: var(--chatitem-bg);
    margin-right: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.chat-item.selected .tl-checkbox {
    background: var(--chatitem-unread-bg);
    border-color: var(--chatitem-unread-bg);
    color: var(--chatitem-unread-text);
}

#app-echo.manage-mode .chat-list-items::before,
#app-echo.manage-mode .chat-item::before {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

#app-echo.manage-mode .tl-checkbox {
    width: 22px;
    border-width: 2px;
    opacity: 1;
    transform: none;
    margin-right: 4px;
}

#app-echo.manage-mode .echo-tabs {
    transform: translate(-50%, 200%);
}

.manage-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--chatitem-bg);
    border-top: 1px solid var(--chatitem-border);
    padding: 14px 18px;
    padding-bottom: calc(env(safe-area-inset-bottom, 14px) + 14px);
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
    z-index: 200;
    display: none;
}

#app-echo.manage-mode .manage-bar {
    display: flex;
    transform: translateY(0);
}

/* 🔧 多选模式下底部 manage-bar(fixed)浮在列表上，给滚动区补足等高留白，
   否则最后一条聊天被操作栏压住一半。约 = 图标行高 + 上下 padding + 安全区。 */
#app-echo.manage-mode .chat-list-items {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* 兜底：朋友圈页激活时，manage-bar 永远不显示 —— 不管 manage-mode class 是否残留 */
#app-echo.moments-tab-active .manage-bar,
#app-echo:has(#view-moments[style*="display: block"]) .manage-bar,
#app-echo:has(#view-moments[style*="display:block"]) .manage-bar,
#app-echo:has(#view-moments[style*="display: flex"]) .manage-bar,
#app-echo:has(#view-moments[style*="display:flex"]) .manage-bar {
    display: none;
    transform: translateY(100%);
    pointer-events: none;
    visibility: hidden;
}

.mb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--chatitem-name-color);
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: inherit;
    transition: 0.2s;
    white-space: nowrap;
}

.mb-btn i {
    font-size: 22px;
    color: var(--chatitem-preview-color);
    transition: 0.2s;
}

.mb-btn.danger,
.mb-btn.danger i {
    color: #e57373;
}

.mb-btn.done {
    flex: none;
    background: var(--chatitem-unread-bg);
    color: var(--chatitem-unread-text);
    padding: 11px 22px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: none;
    flex-direction: row;
    gap: 0;
    margin-left: 4px;
}

.mb-btn.done:active {
    transform: scale(0.95);
}

/* ==========================================
   建群弹窗美化 (Group Modal)
   ========================================== */
.group-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.group-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.group-modal-box {
    background: var(--chatitem-bg);
    width: 88%;
    max-width: 360px;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--chatitem-border);
    transform: translateY(20px) scale(0.95);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

.group-modal-overlay.active .group-modal-box {
    transform: translateY(0) scale(1);
}

.gm-header {
    padding: 20px 22px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--chatitem-border);
}

.gm-title {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-style: italic;
    font-size: 19px;
    font-weight: 800;
    color: var(--chatitem-name-color);
}

.gm-close {
    font-size: 22px;
    color: var(--chatitem-preview-color);
    cursor: pointer;
    transition: 0.2s;
}

.gm-close:active {
    transform: scale(0.9);
}

.gm-input-wrap {
    padding: 16px 22px 0;
}

.gm-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid var(--chatitem-border);
    font-size: 13px;
    color: var(--chatitem-name-color);
    outline: none;
    font-family: inherit;
    transition: 0.2s;
}

.gm-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 22px 8px;
}

.gm-tab {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 800;
    background: transparent;
    color: var(--chatitem-preview-color);
    cursor: pointer;
    transition: 0.2s;
    border: 1px solid var(--chatitem-border);
    font-family: inherit;
}

.gm-tab.active {
    background: var(--chatitem-unread-bg);
    color: var(--chatitem-unread-text);
    border-color: var(--chatitem-unread-bg);
}

.gm-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gm-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.2s;
}

.gm-contact-item.selected {
    border-color: var(--chatitem-pin-color);
    background: var(--chatitem-active-bg);
    box-shadow: none;
}

.gm-contact-item img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--chatitem-border);
    padding: 2px;
    background: var(--chatitem-bg);
}

.gm-contact-name {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--chatitem-name-color);
}

.gm-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--chatitem-time-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 13px;
    transition: 0.2s;
}

.gm-contact-item.selected .gm-checkbox {
    background: var(--chatitem-unread-bg);
    border-color: var(--chatitem-unread-bg);
    color: var(--chatitem-unread-text);
}

.gm-footer {
    padding: 14px 22px;
    border-top: 1px dashed var(--chatitem-border);
    display: flex;
    gap: 10px;
}

.gm-btn {
    flex: 1;
    padding: 11px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: none;
    transition: 0.2s;
    font-family: inherit;
}

.gm-btn.cancel {
    background: transparent;
    color: var(--chatitem-preview-color);
    border: 1px solid var(--chatitem-border);
}

.gm-btn.confirm {
    background: var(--chatitem-unread-bg);
    color: var(--chatitem-unread-text);
    box-shadow: none;
}

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

.gm-input:focus {
    border-color: var(--chatitem-pin-color);
    outline: none;
}

.gm-section-divider {
    margin: 12px 0 8px;
    padding: 8px 0 4px;
    border-top: 1px dashed var(--chatitem-border);
    font-size: 11px;
    color: var(--chatitem-time-color);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.gm-member-tag {
    font-size: 9px;
    padding: 3px 7px;
    border-radius: 8px;
    background: var(--chatitem-active-bg);
    color: var(--chatitem-pin-color);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--chatitem-border);
}

/* 管理面板（底部滑出式） */
.manage-chats-panel {
    width: 100%;
    max-height: 70vh;
    background: var(--chatitem-bg);
    border-radius: 0 24px 0 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-top: 1px solid var(--chatitem-border);
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.manage-chats-overlay.group-modal-overlay {
    align-items: flex-end;
}

.manage-chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--chatlist-bg);
    border-radius: 16px;
    margin-bottom: 10px;
    transition: 0.2s;
}

.manage-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.manage-chat-info {
    flex: 1;
    min-width: 0;
}

.manage-chat-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--chatitem-name-color);
    margin-bottom: 2px;
}

.manage-chat-desc {
    font-size: 12px;
    color: var(--chatitem-time-color);
}

.manage-chat-actions {
    display: flex;
    gap: 8px;
}

.manage-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 18px;
}

.manage-action-btn:active {
    transform: scale(0.9);
}

.btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-pin {
    background: var(--chatitem-active-bg);
    color: var(--chatitem-pin-color);
    border: 1px solid var(--chatitem-border);
}

.btn-pin.pinned {
    background: var(--chatitem-unread-bg);
    color: var(--chatitem-unread-text);
    border-color: transparent;
}

/* ========== AI 浜や簰閿牱�?========== */
#top-interaction-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;  /* 寮哄埗闈炵粷瀵瑰畾浣?*/
    z-index: auto !important;  /* 绉婚櫎鍥哄畾 z-index */
}

#top-interaction-btn img {
    transition: all 0.3s ease;
}

#top-interaction-btn:hover img {
    opacity: 1 !important;
    filter: brightness(1.1) !important;
}

#top-interaction-btn:active {
    transform: scale(0.95);
}

/* ========== 缁堟瀬瑙嗚淇锛氬睆钄界孩鐐瑰拰榛勮壊鑳屾櫙 ========== */

/* 1. 褰诲簳灞忚斀椤堕儴鎸夐挳鐨勬墍鏈変吉鍏冪礌锛堢孩鐐归€氬父鍦ㄨ繖閲岋�?*/
#top-interaction-btn::before,
#top-interaction-btn::after {
    display: none !important;
    content: "" !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. 灞忚斀椤堕儴鎸夐挳鍐呴儴鐨勬墍鏈夐潪鍥炬爣鍏冪�?*/
#top-interaction-btn > *:not(img):not(.custom-pen-icon):not(i),
#top-interaction-btn .badge,
#top-interaction-btn .unread-badge,
#top-interaction-btn span:not(.interact-key) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* 3. 纭繚鎸夐挳鏈韩骞插噣鏃犺楗?*/
#top-interaction-btn {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* [宸插垹闄ゆ墍鏈夋棫鐨?panel-drawer 淇鏍峰紡] */

/* 鏅冨姩鏁堟灉锛堢兢鑱?AI 浜や簰鏃讹級*/
.interact-key.shaking,
#top-interaction-btn.shaking {
    animation: shake 0.5s infinite;
}

/* ========== Echo 渚ц竟鏍忥細鎯呮劅浠〃鐩?========== */
.affection-dashboard {
    background: linear-gradient(135deg, 
        rgba(255, 182, 193, 0.15) 0%, 
        rgba(255, 105, 180, 0.1) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.affection-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.affection-icon {
    font-size: 36px;
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
}

.affection-info {
    flex: 1;
}

.affection-label {
    font-size: 12px;
    color: #95a5a6;
    font-weight: 600;
}

.affection-value {
    font-size: 28px;
    font-weight: 700;
    color: #ff6b81;
    line-height: 1;
}

.affection-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.affection-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff6b81 0%, #ff8fab 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.affection-desc {
    text-align: center;
    font-size: 13px;
    color: #e84393;
    font-weight: 600;
}

/* 浠ｇ爜椋庢牸杈撳叆妗?*/
.code-input {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;
}

/* 涓栫晫涔﹀垪琛?*/
.worldbook-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mount-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mount-checkbox-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mount-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.mount-empty {
    text-align: center;
    padding: 20px;
    color: #95a5a6;
    font-size: 13px;
}

/* ========== 鑱婂ぉ姘旀场锛氬熀纭€瀹氫�?========== */
.msg-bubble,
.msg-content {
    position: relative;
    overflow: visible !important;
}

/* ========== 馃挅 濂芥劅搴﹀弽棣堢郴�?========== */
.affection-feedback {
    position: absolute;
    top: -12px;
    right: -8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    padding: 4px 6px;
    z-index: 100;
    pointer-events: none;
    animation: affectionPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.affection-feedback .heart-pulse {
    position: relative;
    top: 0;
    right: 0;
    font-size: 16px;
    animation: heartBeat 1.2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(255, 0, 0, 0.3));
}

.affection-feedback span {
    font-size: 13px;
    font-weight: 700;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
}

@keyframes affectionPop {
    0% { 
        transform: scale(0) translateY(10px);
        opacity: 0;
    }
    70% {
        transform: scale(1.1) translateY(0);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 鏃х増鍏煎锛堜粎蹇冭烦锛?*/
.heart-pulse:not(.affection-feedback .heart-pulse) {
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 20px;
    animation: heartPulse 1s infinite, heartFloat 2s ease-in-out infinite;
    z-index: 10;
    filter: drop-shadow(0 2px 8px rgba(255, 107, 129, 0.5));
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes heartFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* 澶滈棿妯″紡涓嬬殑绾㈠績 */
body.dark-mode .heart-pulse:not(.affection-feedback .heart-pulse) {
    filter: drop-shadow(0 2px 12px rgba(255, 107, 129, 0.8));
}

/* ========== Toggle Switch (鎭嬬埍鑴戞姂鍒剁瓑寮€鍏? ========== */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--champagne-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 澶滈棿妯″紡 */
body.dark-mode .toggle-slider {
    background-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .toggle-switch input:checked + .toggle-slider {
    background: var(--champagne-primary);
}

/* ========================================== */
/* ========== 星汇(Starhub) 社区样式 ========== */
/* ========================================== */

/* #starhub 的底色/网格/CSS 变量已由 css/apps/starhub-new.css 统一管理（Wave 5 主题色引擎）。
   此处旧的 !important 强制覆盖块已删除，避免锁死主题色派生。 */

/* 导航栏样式 */
#starhub .nav-header {
    height: 88px;
    padding: max(36px, env(safe-area-inset-top)) 20px 10px;
    background: rgba(252, 250, 248, 0.95) !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1000;
}

/* Discover 花体字标题 — 居中 + 不超出左右按钮区 */
#starhub .starhub-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Great Vibes', cursive;
    font-size: 28px;
    font-weight: 400;
    color: #4A3F38;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    /* 限制宽度避免压住按钮：左右各让出 110px 给按钮组 */
    max-width: calc(100% - 220px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* 头像样式 */
#starhub .user-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #B8947D;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

/* 按钮样式 */
#starhub .btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 8px 24px rgba(184, 148, 125, 0.08) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A3F38 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s;
    position: relative;
    z-index: 10000 !important;
    pointer-events: auto !important;
    flex-shrink: 0;
    pointer-events: auto !important;
}

/* 右侧按钮容器 */
#starhub .nav-header .notif-bell,
#starhub .nav-header .settings-btn {
    margin-left: auto;
}

#starhub .btn-icon:active {
    transform: scale(0.95);
}

/* 按钮内的图标不拦截点击事件 */
#starhub .btn-icon i {
    pointer-events: none;
}

/* 板块切换 Chips 样式（窄屏机型挤压：padding 收到 14、改为 flex gap、加 flex-shrink 0 防被压扁）*/
#starhub .chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #FFF !important;
    color: #8C7D73 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 8px rgba(184, 148, 125, 0.05) !important;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.3;
}

#starhub .chip.active {
    background: #4A3F38 !important;
    color: #FFF !important;
}

/* Chips 容器：flex 横滑 + gap 8 + 右侧渐隐暗示可继续滑
   注：iOS 上原先的独立背景 rgba(252,250,248,0.95) 会跟页面主题染色底（color-mix theme 6%）形成"横条带"
       → 改成 transparent 让页面底色直接穿透
   注：chip 行跟上面 nav-header 的视觉间距用 margin-top（padding 在 iOS 上跟 mask-image 一起会被裁掉一部分） */
#starhub-chips-container {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 6px 16px 14px;
    margin-top: 12px;
    scrollbar-width: none;
    background: transparent;
    border-bottom: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}

#starhub-chips-container::after {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 1px;
}

#starhub-chips-container::-webkit-scrollbar {
    display: none;
}

/* 帖子卡片样式 — 已由 css/apps/starhub-new.css 统一管理（24px 圆角 + 主题色派生），此处旧 !important 强制规则已移除 */

#starhub .post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: cover;
    border: 1px solid #EEE;
}

#starhub .post-meta .author {
    font-family: 'Noto Serif SC', serif;
    font-size: 15px;
    font-weight: 600;
    color: #4A3F38 !important;
}

#starhub .post-meta .time {
    font-size: 11px;
    color: #8C7D73 !important;
}

#starhub .post-content {
    font-size: 15px;
    line-height: 1.8;
    color: #4A3F38 !important;
}

#starhub .post-actions {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: #8C7D73 !important;
    font-weight: 600;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.03);
}

/* FAB 发帖按钮已废弃（由底部 tab bar 中间 ➕ 入口替代） */
.related-characters-list {
    max-height: 200px;
    overflow-y: auto;
}

.related-char-item {
    transition: background 0.2s ease;
}

.related-char-item:hover {
    background: rgba(0, 184, 148, 0.08) !important;
}

.related-char-checkbox:checked + img {
    border: 2px solid #00b894 !important;
    box-shadow: 0 0 0 2px rgba(0, 184, 148, 0.2);
}

/* 澶滈棿妯″紡 */
body.dark-mode .related-characters-list {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .related-char-item {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .related-char-item:hover {
    background: rgba(0, 184, 148, 0.15) !important;
}

/* ========== 瀵兼紨闈㈡澘鏆楅粦妯″紡 ========== */
/* [宸插垹闄ゆ棫�?grid 鏆楅粦鏍峰紡锛屼娇鐢ㄦ柊�?clean-drawer 鏆楅粦鏍峰紡] */

/* ========================================
   涓囪�?(Genesis) 鍏ㄥ眬鍙橀噺鍜屽熀纭€鏍峰�?
   ======================================== */

/* 涓囪薄瀹瑰櫒鑳屾櫙 */
#genesis,
#genesis-content {
    background: #f5f4f1; /* 🎨 乳白香槟色 */
    background-image: none; /* 🎨 去掉渐变 */
    background-attachment: fixed;
    padding: 0; /* 🔧 移除默认padding，避免内容被挤压 */
}

/* 涓囪薄涓撶敤CSS鍙橀�?*/
#genesis-content {
    /* 鑳屾櫙锛氫钩鐧介�欐Ы */
    --bg-base: #f5f4f1;
    --bg-gradient: none;

    /* 瀵艰埅鏍?& 澶撮�?*/
    --header-bg: rgba(255, 255, 255, 0.85);

    /* 鍗＄�?*/
    --card-bg: #ffffff;
    --card-border: rgba(205, 190, 175, 0.15);
    --card-shadow: 0 4px 20px rgba(180, 165, 150, 0.04);

    /* 鏂囧瓧棰滆壊 */
    --text-title: #4a403a;
    --text-body: #4a403a;
    --text-sub: #968c85;
    --text-placeholder: #c8c0ba;

    /* 寮鸿皟鑹诧細棣欐Ы濂惰尪鑹�?*/
    --accent: #cdae9a;
    --link: #cdae9a;

    /* 灏哄�?*/
    --radius-card: 20px;
}

/* 澶滈棿妯″紡鑳屾�?*/
body.dark-mode #genesis,
body.dark-mode #genesis-content {
    background: #1a1a2e;
    background-image: linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
}

/* 澶滈棿妯″紡鍙橀�?*/
body.dark-mode #genesis-content {
    --bg-base: #1a1a2e;
    --bg-gradient: linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
    --card-bg: #1A1A1A;
    --card-border: rgba(255,255,255,0.1);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --text-title: #ecf0f1;
    --text-body: #bdc3c7;
    --text-sub: #7f8c8d;
    --text-placeholder: #5f6368;
}

/* 椤堕儴Tab鍒囨�?*/
.top-tabs {
    display: flex;
    padding: 10px 16px;
    gap: 8px; /* 缩小间距让Tab更紧�?*/
    flex-shrink: 0;
}

.top-tab-item {
    flex: 1; /* 让两个Tab平均分配宽度 */
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-sub);
    background: rgba(255,255,255,0.4);
    transition: 0.3s;
    cursor: pointer;
    border: none;
    text-align: center; /* 文字居中 */
}

.top-tab-item.active {
    background: #fff;
    color: var(--text-title);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.dark-mode .top-tab-item {
    background: rgba(255,255,255,0.1);
}

body.dark-mode .top-tab-item.active {
    background: rgba(255,255,255,0.2);
    color: #ecf0f1;
}

/* ✨ 万象页面 - 固定Tab栏 */
#genesis-content > .top-tabs {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(245, 244, 241, 0.92);
    border-bottom: 1px solid rgba(205, 190, 175, 0.2);
}

#genesis-content > .top-tabs .top-tab-item {
    background: transparent;
    color: var(--text-sub);
}

#genesis-content > .top-tabs .top-tab-item.active {
    background: #ffffff;
    color: #cdae9a;
    box-shadow: 0 4px 12px rgba(180, 165, 150, 0.1);
}

/* 夜间模式 - Tab栏 */
body.dark-mode #genesis-content > .top-tabs {
    background: #1A1A1A;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode #genesis-content > .top-tabs .top-tab-item.active {
    background: rgba(255, 255, 255, 0.12);
    color: #d6b99a;
}

/* 万象页面容器添加上边距,避免被固定Tab栏遮挡 */
#genesis-content > .page-container {
    padding-top: 0; /* 🔧 修复：由 .main-view 统一控制 padding，不再叠加 */
}


/* 涓昏鍥惧�?*/
.main-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* 🔧 修复：用 calc 加入 safe-area，避免 iOS 上双重计算产生巨大空白 */
    padding: calc(60px + env(safe-area-inset-top, 0px)) 16px 20px 16px;
    display: none;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.main-view.active {
    display: block;
}

/* 瑕嗙洊灞傞〉闈紙浠庡彸渚ф粦鍏ョ殑缂栬緫椤碉級 */
.overlay-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f5f4f1; /* 🎨 乳白香槟色 */
    background-image: none; /* 🎨 去掉渐变，使用纯色 */
    z-index: 1000;
    transform: translateX(100%);
    visibility: hidden; /* 🔧 离屏时彻底不可见，避免父级 transform 让 fixed 错位时露馅 */
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 0.35s;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 🔧 防止内容溢出 */
}

/* 万象页面覆盖层 - 使用 absolute 定位覆盖整个 genesis 页面 */
.genesis-overlay.overlay-page {
    position: fixed;
    z-index: 1001; /* 高于 genesis 内容与大多数面板 */
    box-sizing: border-box;
}

/* 确保 mobile-modal 在最顶层显示 */
#mobile-modal.modal-mask {
    z-index: 9999 !important;
}

/* ================= 万象页面美化组件 ================= */

/* 胶囊按钮 */
.genesis-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #cdae9a;
    background: rgba(205, 174, 154, 0.12);
    border: 1px solid rgba(205, 174, 154, 0.3);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.genesis-pill-btn:hover {
    background: rgba(205, 174, 154, 0.2);
    transform: translateY(-1px);
}

.genesis-pill-btn:active {
    transform: scale(0.96);
}

.genesis-pill-btn i {
    font-size: 13px;
}

/* 自定义下拉选择�?*/
.genesis-select-wrap {
    position: relative;
    width: 100%;
}

.genesis-select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-title, #2d3436);
    background: #f8f7f5;
    border: 1px solid transparent;
    border-radius: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

.genesis-select::-ms-expand {
    display: none;
}

.genesis-select:hover {
    border-color: rgba(205, 174, 154, 0.4);
    box-shadow: none;
}

.genesis-select:focus {
    outline: none;
    background: #ffffff;
    border-color: #cdae9a;
    box-shadow: 0 0 0 4px #f6f1ed;
}


.genesis-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #cdae9a;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.genesis-select:focus + .genesis-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* 暗色模式适配 */
body.dark-mode .genesis-pill-btn {
    color: #d6b99a;
    background: rgba(197, 160, 128, 0.15);
    border-color: rgba(197, 160, 128, 0.3);
}

body.dark-mode .genesis-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    box-shadow: none;
}

body.dark-mode .genesis-select:hover {
    border-color: rgba(197, 160, 128, 0.3);
}

body.dark-mode .genesis-select:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #c5a080;
    box-shadow: 0 0 0 4px rgba(197, 160, 128, 0.15);
}

body.dark-mode .genesis-select option {
    background: #1A1A1A;
    color: #e2e8f0;
}

body.dark-mode .genesis-select-arrow {
    color: #d6b99a;
}

/* 底部操作按钮区域 */
.genesis-bottom-actions {
    display: flex;
    gap: 12px;
    padding: 20px;
    margin-bottom: 80px;
}

.genesis-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.genesis-action-btn i {
    font-size: 16px;
}

/* 主要按钮 - 香槟奶茶渐变 */
.genesis-action-primary {
    color: #fff;
    background: linear-gradient(135deg, #dfc8b8 0%, #cdae9a 100%);
    box-shadow: 0 8px 20px rgba(205, 174, 154, 0.25);
}

.genesis-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(205, 174, 154, 0.35);
}

.genesis-action-primary:active {
    transform: scale(0.97);
}

/* 危险按钮 - 柔玫瑰红 */
.genesis-action-danger {
    color: #d48b8b;
    background: #fdf3f2;
    border: 1.5px solid rgba(212, 139, 139, 0.25);
}

.genesis-action-danger:hover {
    background: #fce8e7;
    border-color: rgba(212, 139, 139, 0.4);
}

.genesis-action-danger:active {
    transform: scale(0.97);
}

/* 暗色模式适配 */
body.dark-mode .genesis-action-primary {
    background: linear-gradient(135deg, #8a6a52 0%, #c5a080 100%);
    box-shadow: 0 4px 15px rgba(197, 160, 128, 0.3);
}

body.dark-mode .genesis-action-danger {
    color: #ef9a9a;
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 154, 154, 0.25);
}

/* ================= 万象选择器（模型等） ================= */
.genesis-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f8f7f5;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--text-title, #2d3436);
}

.genesis-picker:hover {
    border-color: rgba(205, 174, 154, 0.4);
}

.genesis-picker i {
    color: #cdae9a;
    font-size: 18px;
}

/* 选择器弹窗遮�?*/
.genesis-picker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-end;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
    overflow: hidden;
}

.genesis-picker-overlay.show {
    opacity: 1;
}

/* 选择器面�?*/
.genesis-picker-panel {
    width: 100%;
    max-height: 50vh;
    background: linear-gradient(145deg, #fff 0%, #f8faff 100%);
    border-radius: 0 20px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.genesis-picker-overlay.show .genesis-picker-panel {
    transform: translateY(0);
}

.genesis-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 16px;
    font-weight: 600;
    color: #2d3436;
    flex-shrink: 0;
}

.genesis-picker-header i {
    font-size: 22px;
    color: #95a5a6;
    cursor: pointer;
    padding: 4px;
}

.genesis-picker-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.genesis-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 14px;
    color: #2d3436;
    cursor: pointer;
    transition: background 0.15s ease;
}

.genesis-picker-item:hover {
    background: rgba(205, 174, 154, 0.1);
}

.genesis-picker-item.selected {
    color: #cdae9a;
    font-weight: 600;
    background: rgba(205, 174, 154, 0.12);
}

.genesis-picker-item i {
    color: #cdae9a;
    font-size: 16px;
}

/* 暗色模式 */
body.dark-mode .genesis-picker {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(197, 160, 128, 0.2);
    color: #e2e8f0;
}

body.dark-mode .genesis-picker i {
    color: #d6b99a;
}

body.dark-mode .genesis-picker-panel {
    background: linear-gradient(145deg, #1a1a2e 0%, #16162a 100%);
}

body.dark-mode .genesis-picker-header {
    color: #f1f1f1;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .genesis-picker-item {
    color: #e0e0e0;
}

body.dark-mode .genesis-picker-item:hover {
    background: rgba(167, 139, 250, 0.15);
}

body.dark-mode .genesis-picker-item.selected {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.2);
}

body.dark-mode .genesis-picker-item.selected {
    color: #d6b99a;
    background: rgba(197, 160, 128, 0.15);
}

body.dark-mode .genesis-picker-item i {
    color: #d6b99a;
}

/* ================= 万象 input-row + clean-input 风格 ================= */
/* 作用域限定在 #genesis 内，不影响其他页面 */

#genesis .input-row {
    border-bottom: none;
    padding: 0 16px;
    gap: 10px;
    margin-top: 16px;
}

#genesis .card-group > .input-row:first-child {
    margin-top: 16px;
}

#genesis .card-group > .input-row:last-child {
    margin-bottom: 16px;
}

#genesis .clean-input,
#genesis .clean-select {
    background: #f8f7f5;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-body, #4b4b4b);
    outline: none;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

#genesis .clean-input:focus,
#genesis .clean-select:focus {
    background: #ffffff;
    border-color: #cdae9a;
    box-shadow: 0 0 0 4px #f6f1ed;
}

#genesis textarea.clean-input {
    resize: none;
    min-height: 96px;
    line-height: 1.6;
}

#genesis #input-imggen-protocol {
    resize: vertical;
    overflow-y: auto;
    max-height: 400px;
}

#genesis .clean-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cdae9a'%3E%3Cpath d='M12 15L7.757 10.757l1.414-1.414L12 12.172l2.829-2.829 1.414 1.414L12 15Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    background-color: #f8f7f5;
    padding-right: 36px;
}

#genesis .clean-select:focus {
    background-color: #ffffff;
}

#genesis .key-input-wrap .clean-input {
    padding-right: 44px;
}

/* 暗色模式 */
body.dark-mode #genesis .clean-input,
body.dark-mode #genesis .clean-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

body.dark-mode #genesis .clean-input::placeholder {
    color: rgba(148, 163, 184, 0.5);
}

body.dark-mode #genesis .clean-input:focus,
body.dark-mode #genesis .clean-select:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #c5a080;
    box-shadow: 0 0 0 4px rgba(197, 160, 128, 0.15);
}

body.dark-mode #genesis .clean-select {
    background-color: rgba(255, 255, 255, 0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d6b99a'%3E%3Cpath d='M12 15L7.757 10.757l1.414-1.414L12 12.172l2.829-2.829 1.414 1.414L12 15Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 36px;
}

body.dark-mode #genesis .clean-select:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ================= 万象确认弹窗 ================= */
.genesis-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.genesis-confirm-overlay.show {
    opacity: 1;
}

.genesis-confirm-panel {
    width: 280px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%);
    border-radius: 0;
    padding: 28px 24px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.genesis-confirm-overlay.show .genesis-confirm-panel {
    transform: scale(1) translateY(0);
}

.genesis-confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #ff7675 0%, #d63031 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(214, 48, 49, 0.3);
}

.genesis-confirm-icon i {
    font-size: 28px;
    color: #fff;
}

.genesis-confirm-title {
    font-size: 17px;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 8px;
}

.genesis-confirm-message {
    font-size: 14px;
    color: #636e72;
    line-height: 1.5;
    margin-bottom: 24px;
}

.genesis-confirm-buttons {
    display: flex;
    gap: 12px;
}

.genesis-confirm-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.genesis-confirm-cancel {
    background: rgba(99, 110, 114, 0.1);
    color: #636e72;
}

.genesis-confirm-cancel:hover {
    background: rgba(99, 110, 114, 0.15);
}

.genesis-confirm-cancel:active {
    transform: scale(0.96);
}

.genesis-confirm-ok {
    background: linear-gradient(135deg, #ff7675 0%, #d63031 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(214, 48, 49, 0.3);
}

.genesis-confirm-ok:hover {
    box-shadow: 0 6px 16px rgba(214, 48, 49, 0.4);
    transform: translateY(-1px);
}

.genesis-confirm-ok:active {
    transform: scale(0.96);
}

/* 暗色模式适配 */
body.dark-mode .genesis-confirm-overlay {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .genesis-confirm-panel {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.98) 0%, rgba(25, 25, 40, 0.98) 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

body.dark-mode .genesis-confirm-title {
    color: #f1f1f1;
}

body.dark-mode .genesis-confirm-message {
    color: #a0a0a0;
}

body.dark-mode .genesis-confirm-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #b0b0b0;
}

body.dark-mode .genesis-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ================= 万象页面美化组件 END ================= */

.overlay-page.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s;
}

/* 瑕嗙洊椤靛鑸�?*/
.overlay-page .nav-bar,
.overlay-nav-bar {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--header-bg, rgba(255, 255, 255, 0.85));
    border-bottom: 1px solid rgba(255,255,255,0.4);
    flex-shrink: 0;
}

.overlay-nav-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--text-title);
}

.overlay-nav-btn {
    font-size: 15px;
    color: var(--accent, #ff7675);
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px;
    background: none;
    border: none;
}

.overlay-nav-btn.cancel {
    color: var(--text-sub);
}

/* nav-bar鍐呯殑鍏冪礌鏍峰�?*/
.overlay-page .nav-title,
.nav-bar .nav-title {
    font-weight: 700;
    font-size: 17px;
    color: var(--text-title, #2d3436);
}

.overlay-page .nav-icon,
.nav-bar .nav-icon {
    font-size: 22px;
    color: var(--accent, #ff7675);
    padding: 5px;
    cursor: pointer;
}

.overlay-page .nav-text-btn,
.nav-bar .nav-text-btn {
    font-size: 15px;
    color: var(--accent, #ff7675);
    font-weight: 500;
    cursor: pointer;
}

/* 椤甸潰瀹瑰�?*/
.page-container {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* 瑕嗙洊椤靛彲婊氬姩鍐呭 */
.scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px 120px 20px;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    box-sizing: border-box;
    width: 100%;
}

/* 澶滈棿妯″紡瑕嗙洊椤?*/
body.dark-mode .overlay-page {
    background: var(--bg-base, #1a1a2e);
    background-image: var(--bg-gradient, linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%));
}

body.dark-mode .overlay-page .nav-bar,
body.dark-mode .overlay-nav-bar {
    background: rgba(30, 30, 40, 0.95);
    border-bottom-color: rgba(255,255,255,0.1);
}

/* ================= 绉诲姩绔脊绐楋紙鐜荤拑鎷熸€侊�?================ */
.modal-mask {
    position: absolute; /* 改为 absolute，相对于 phone-screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ================= 居中模态卡�?- 代付弹窗 ================= */

/* 遮罩�?*/
#modal-cart,
.modal-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex !important;
    align-items: center !important; /* �?垂直居中 */
    justify-content: center !important; /* �?水平居中 */
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#modal-cart.active,
.modal-cart-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#modal-cart[style*="display: none"],
.modal-cart-overlay[style*="display: none"] {
    display: none !important;
}

/* �?卡片主体 - 居中弹出 */
#modal-cart .sheet,
.modal-cart-overlay .sheet {
    background: #fff;
    width: 85% !important;
    max-width: 320px !important;
    border-radius: 0 !important; /* �?四角全圆 */
    margin: 0 !important;
    padding: 24px 20px !important;
    transform: scale(0.8) !important; /* 初始缩小 */
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important; /* 弹性动�?*/
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* �?激活状�?- 弹性弹�?*/
#modal-cart.active .sheet,
.modal-cart-overlay.active .sheet {
    transform: scale(1) !important;
    opacity: 1 !important;
    animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}

/* �?弹出动画 */
@keyframes popIn {
    0% { 
        transform: scale(0.8); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* �?隐藏底部把手 */
#modal-cart .sheet::before,
.modal-cart-overlay .sheet::before {
    display: none !important;
}

/* 头部区域 */
#modal-cart .sheet-header,
.modal-cart-overlay .sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#modal-cart .sheet-title,
.modal-cart-overlay .sheet-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

#modal-cart .sheet-close,
.modal-cart-overlay .sheet-close {
    font-size: 28px;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s ease;
}

#modal-cart .sheet-close:hover,
.modal-cart-overlay .sheet-close:hover {
    color: #ff758c;
}

/* 购物车列�?*/
#modal-cart .cart-list,
.modal-cart-overlay .cart-list {
    margin-bottom: 20px;
}

/* 总计�?*/
#modal-cart .cart-total-row,
.modal-cart-overlay .cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #f0f0f0;
    font-weight: 600;
}

#modal-cart .total-label,
.modal-cart-overlay .total-label {
    color: #888;
    font-size: 15px;
}

#modal-cart .total-amount,
.modal-cart-overlay .total-amount {
    font-size: 22px;
    color: #ff758c;
    font-weight: 700;
}

/* 确认按钮 */
#modal-cart .btn-pay-confirm,
.modal-cart-overlay .btn-pay-confirm {
    width: 100%;
    padding: 14px;
    margin-top: 15px;
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 117, 140, 0.3);
}

#modal-cart .btn-pay-confirm:hover,
.modal-cart-overlay .btn-pay-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 117, 140, 0.4);
}

#modal-cart .btn-pay-confirm:active,
.modal-cart-overlay .btn-pay-confirm:active {
    transform: translateY(0);
}

/* 夜间模式适配 */
body.dark-mode #modal-cart .sheet,
body.dark-mode .modal-cart-overlay .sheet {
    background: #1c1c1e;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode #modal-cart .sheet-title,
body.dark-mode .modal-cart-overlay .sheet-title {
    color: #fff;
}

body.dark-mode #modal-cart .cart-total-row,
body.dark-mode .modal-cart-overlay .cart-total-row {
    border-top-color: #38383a;
}

body.dark-mode #modal-cart .total-label,
body.dark-mode .modal-cart-overlay .total-label {
    color: #98989d;
}

/* 原有�?modal-cart overlay 规则（向后兼容） */
#modal-cart.overlay {
    display: flex !important;
    align-items: center !important; /* �?居中对齐 */
    justify-content: center !important; /* �?居中对齐 */
}

#modal-cart.overlay[style*="display: none"] {
    display: none !important;
}

#modal-cart.overlay[style*="display: flex"] {
    display: flex !important;
}

.modal-mask.show,
.modal-mask.active {
    opacity: 1;
    pointer-events: auto;
}

/* 修复 Starhub 模态框显示问题 */
#modal-settings-starhub.active,
#modal-notif-starhub.active {
    display: flex !important;
}

#starhub .modal-mask.active {
    display: flex !important;
}

.modal-panel {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    box-shadow: var(--glass-shadow);
    border-radius: 0 24px 0 0;
    padding: 24px 20px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-height: 75vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--glass-text);
    width: 100%;
    box-sizing: border-box;
}

/* 深色模式下的弹窗面板 - 与万象App风格一�?*/
body.dark-mode .modal-panel {
    background: rgba(30, 30, 35, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: none !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.modal-mask.show .modal-panel {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    font-size: 15px;
    color: var(--glass-text);
    background: transparent !important; /* 覆盖紫色背景 */
}

.modal-btn-primary {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #dfc8b8 0%, #cdae9a 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
    box-shadow: 0 4px 15px rgba(205, 174, 154, 0.4);
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(205, 174, 154, 0.5);
}

.modal-btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(205, 174, 154, 0.4);
}

.modal-btn-secondary {
    flex: 1;
    padding: 16px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--glass-text);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.modal-btn-secondary:active {
    transform: translateY(0) scale(0.98);
    background: rgba(0, 0, 0, 0.1);
}

body.dark-mode .modal-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .modal-btn-secondary:active {
    background: rgba(255, 255, 255, 0.15);
}

/* 寮圭獥鍐呰緭鍏ユ�?*/
#mobile-modal input[type="text"],
#mobile-modal input[type="password"],
#mobile-modal textarea {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    color: var(--glass-text);
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

#mobile-modal input:focus,
#mobile-modal textarea:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

body.dark-mode #mobile-modal input[type="text"],
body.dark-mode #mobile-modal input[type="password"],
body.dark-mode #mobile-modal textarea {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

body.dark-mode #mobile-modal input:focus,
body.dark-mode #mobile-modal textarea:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* 选项列表交互 */
.option-item {
    transition: all 0.2s ease;
}

.option-item:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: translateX(4px);
}

.option-item:active {
    background: rgba(0, 0, 0, 0.08);
    transform: translateX(2px) scale(0.98);
}

body.dark-mode .option-item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .option-item span {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .option-item i {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .option-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

body.dark-mode .option-item:active {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(2px) scale(0.98);
}

body.dark-mode .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important; /* 覆盖紫色背景 */
}

body.dark-mode .modal-header div {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 为mobile-modal中的modal-header特别指定样式 */
#mobile-modal .modal-header {
    background: transparent !important;
}

body.dark-mode #mobile-modal .modal-header {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* 鏂囦欢澶瑰唴閮═ab */
.folder-tabs {
    display: flex;
    background: rgba(0,0,0,0.05);
    padding: 4px;
    border-radius: 12px;
    margin: 10px 16px;
}

.folder-tabs .tab-btn {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    color: var(--text-sub);
    border-radius: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    background: none;
    border: none;
}

.folder-tabs .tab-btn.active {
    background: #fff;
    color: var(--text-title);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 鏂囦欢澶瑰ご閮紙鎼滅储/娣诲姞鍖哄煙�?*/
.folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 4px 8px 4px;
}

.header-title {
    font-size: 13px;
    color: var(--text-sub);
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.action-icon {
    font-size: 18px;
    color: var(--text-sub);
    transition: 0.2s;
    cursor: pointer;
}

.action-icon.active {
    color: var(--accent);
}

/* 鎼滅储妗嗭紙鍙姌鍙狅級 */
.search-box-wrap {
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-box-wrap.show {
    height: 44px;
    opacity: 1;
    margin-bottom: 12px;
}

.search-input {
    width: 100%;
    height: 36px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--text-title);
}

.search-input:focus {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 118, 117, 0.2);
    outline: none;
}

/* 澶滈棿妯″紡 */
body.dark-mode .folder-tabs {
    background: rgba(255,255,255,0.05);
}

body.dark-mode .tab-btn.active {
    background: rgba(255,255,255,0.1);
    color: #ecf0f1;
}

body.dark-mode .search-input {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.05);
    color: #ecf0f1;
}

/* ========================================
   涓囪薄棰勮绯荤粺鏍峰紡
   ======================================== */

/* 鍖哄煙鏍囩 */
.section-label {
    font-size: 13px;
    color: var(--text-sub, #95a5a6);
    font-weight: 600;
    margin: 20px 4px 8px 4px;
    letter-spacing: 0.3px;
}

/* 鍗＄墖缁勫�?*/
.card-group {
    background: rgba(255,255,255,0.95);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    overflow: visible;
}

/* 鍒楄〃椤瑰浘�?*/
.item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 12px;
}

/* 鍒楄〃椤瑰唴�?*/
.item-content {
    flex: 1;
    min-width: 0;
}

.item-title {
    font-size: 15px;
    font-weight: 600;
    color: #2d3436;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-desc {
    font-size: 12px;
    color: #95a5a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 鍙崇澶?*/
.arrow-right {
    font-size: 20px;
    color: #bdc3c7;
    margin-left: 8px;
    transition: transform 0.2s;
}

.list-item:hover .arrow-right {
    transform: translateX(3px);
}

/* iOS椋庢牸寮€鍏?*/
.ios-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.ios-switch input {
    display: none;
}

.ios-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e4e4e4;
    transition: 0.3s;
    border-radius: 0;
}

.ios-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ios-switch input:checked + .slider {
    background-color: var(--champagne-primary);
}

.ios-switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* 鍒犻櫎鎸夐挳 */
.delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    color: #95a5a6;
    font-size: 16px;
    cursor: pointer;
    transition: 0.2s;
    margin-left: 8px;
}

.delete-btn:hover {
    background: #ff7675;
    color: white;
}

/* 鏂囦欢澶筎ab鎸夐�?*/
.folder-tab-btn {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    color: #95a5a6;
    border-radius: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.folder-tab-btn.active {
    background: #fff;
    color: #2d3436;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 澶滈棿妯″紡閫傞�?*/
body.dark-mode .section-label {
    color: #bdc3c7;
}

body.dark-mode .card-group {
    background: #1A1A1A;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

body.dark-mode .item-title {
    color: #ecf0f1;
}

body.dark-mode .item-desc {
    color: #95a5a6;
}

body.dark-mode .arrow-right {
    color: #7f8c8d;
}

body.dark-mode .delete-btn {
    background: rgba(255,255,255,0.1);
    color: #bdc3c7;
}

body.dark-mode .delete-btn:hover {
    background: #e74c3c;
    color: white;
}

/* ========================================
   涓囪薄API閰嶇疆琛ㄥ崟鏍峰�?
   ======================================== */

/* 杈撳叆琛?*/

/* 琛ㄥ崟鏍囩 */
.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-title, #2d3436);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 表单描述文字 */
.form-desc {
    font-size: 12px;
    color: var(--text-sub, #95a5a6);
    margin-top: 2px;
    margin-bottom: 6px;
    line-height: 1.4;
}

body.dark-mode .form-desc {
    color: #7f8c8d;
}

/* 骞插噣杈撳叆�?*/
.clean-input, .clean-select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text-body, #4b4b4b);
    padding: 4px 0;
    font-family: inherit;
    outline: none;
}

.clean-input::placeholder {
    color: var(--text-placeholder, #b2bec3);
}

.clean-select {
    cursor: pointer;
}

/* 🔑 API密钥输入 - 显示/隐藏切换 */
.key-input-wrap {
    position: relative;
    width: 100%;
}
.key-input-wrap .clean-input {
    padding-right: 36px;
}
/* 🩹 含粘贴按钮时给 input 让出双按钮宽度 */
.key-input-wrap.has-paste .clean-input {
    padding-right: 72px;
}
.key-eye-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-placeholder, #b2bec3);
    font-size: 16px;
    border-radius: 6px;
    transition: color 0.2s;
    pointer-events: auto;
}
.key-eye-btn:hover {
    color: var(--icon-taro, #9575cd);
}
body.dark-mode .key-eye-btn {
    color: rgba(255,255,255,0.3);
}
body.dark-mode .key-eye-btn:hover {
    color: #b39ddb;
}

/* 🩹 粘贴按钮（兜底用：长按粘贴系统菜单偶发被隐藏 overlay 截走时的 plan B）
   样式延用 .key-eye-btn 的克制风格，紧贴在眼睛按钮左边 */
.key-paste-btn {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-placeholder, #b2bec3);
    font-size: 16px;
    border-radius: 6px;
    transition: color 0.2s;
    pointer-events: auto;
}
.key-paste-btn:hover {
    color: var(--icon-taro, #9575cd);
}
.key-paste-btn:active {
    color: var(--icon-taro, #9575cd);
    transform: translateY(-50%) scale(0.92);
}
body.dark-mode .key-paste-btn {
    color: rgba(255,255,255,0.3);
}
body.dark-mode .key-paste-btn:hover {
    color: #b39ddb;
}

/* 🎨 主题选择器 - 自定义下拉 */
.taro-theme-manager {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.theme-selector-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.theme-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-card);
    background: var(--surface-card);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.theme-selector-trigger:hover {
    border-color: var(--icon-taro, #9575cd);
}

.theme-selector-trigger i {
    font-size: 16px;
    transition: transform 0.2s;
}

.theme-selector-trigger.active i {
    transform: rotate(180deg);
}

.theme-selector-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-selector-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fffdfb;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all 0.2s;
}

.theme-selector-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.theme-selector-list {
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* 移动端触摸滚动优化 */
    touch-action: pan-y;
    /* PC 隐藏滚动条但保留功能 */
    scrollbar-width: none;
}
.theme-selector-list::-webkit-scrollbar { display: none; }

.theme-category-header {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin: 4px 0;
    background: rgba(149, 117, 205, 0.05);
    position: sticky;
    top: 0;
    z-index: 1;
    /* iOS Safari sticky 支持 */
    position: -webkit-sticky;
    position: sticky;
}

/* 移动端禁用 sticky，防止与触摸滚动冲突，回退为普通静态标题 */
@media (hover: none) and (pointer: coarse) {
    .theme-category-header {
        position: static;
    }
}

.theme-option {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0;
    border-left: 3px solid transparent;
}

.theme-option:hover {
    background: #f3ede9;
    color: var(--theme-text);
}

.theme-option.selected {
    background: #efe6df;
    color: #4a3b40;
    border-left: 3px solid #c08a5e;
    font-weight: 700;
}

.theme-option i {
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
}

.theme-option.selected i {
    opacity: 1;
}

/* 🔧 方案下拉项内部结构（JS 动态渲染：theme-option-name / theme-option-actions / theme-check-icon / theme-del-btn）
   此前 CSS 缺失这几个类 → 名字不占满行(点不动)、删除按钮类名失配且被 .theme-option i{opacity:0} 吃掉(看不见) */
.theme-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 占满左侧到删除按钮之间的整行，配合 JS 整行点击 */
}

.theme-option-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

/* 勾选图标：仅选中态显示（沿用 .theme-option.selected i 行为，这里显式声明更稳） */
.theme-option .theme-check-icon {
    opacity: 0;
    color: #c08a5e;
}
.theme-option.selected .theme-check-icon {
    opacity: 1;
}

/* 删除按钮：手机优先，常驻可见，不依赖 hover；特异性 (0,2,0) 盖过 .theme-option i {opacity:0} */
.theme-option .theme-del-btn {
    opacity: 0.65;
    font-size: 15px;
    color: #e74c3c;
    cursor: pointer;
    padding: 2px;
    transition: opacity 0.2s;
}
.theme-option .theme-del-btn:hover,
.theme-option .theme-del-btn:active {
    opacity: 1;
}

body.dark-mode .theme-option {
    color: #fff;
}

.taro-theme-manager .taro-css-tool-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 34px;
    padding: 0;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid var(--border-card);
    background: var(--surface-card);
    color: var(--text-main);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.taro-theme-manager .taro-css-tool-btn:hover {
    border-color: var(--icon-taro, #9575cd);
    color: var(--icon-taro, #9575cd);
}

body.dark-mode .theme-selector-dropdown {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

body.dark-mode .theme-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

body.dark-mode .theme-option.selected {
    background: #2e2622;
    color: #fff;
    border-left: 3px solid #c08a5e;
}

body.dark-mode .theme-category-header {
    color: rgba(255,255,255,0.4);
}

/* 婊戝�?*/
.form-btn-small {
    font-size: 12px;
    color: var(--link, #0984e3);
    background: rgba(9, 132, 227, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    border: none;
}

.form-btn-small:hover {
    background: rgba(9, 132, 227, 0.2);
}

/* 婊戝�?*/
.range-slider {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin-top: 10px;
    outline: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
}

.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    border: none;
}

/* 澶滈棿妯″紡閫傞�?*/
body.dark-mode .input-row {
    border-bottom-color: rgba(255,255,255,0.1);
}

body.dark-mode .form-label {
    color: #ecf0f1;
}

body.dark-mode .clean-input,
body.dark-mode .clean-select {
    color: #ecf0f1;
}

body.dark-mode .clean-input::placeholder {
    color: #7f8c8d;
}

body.dark-mode .range-slider {
    background: #34495e;
}

body.dark-mode .range-slider::-webkit-slider-thumb {
    background: #ecf0f1;
}


/* Treasure 样式已迁移到 treasure-minimalist.css */

/* 气泡基础样式已在上方统一定义，此处仅覆盖 border-radius（保留向下兼容） */
.msg-row.other .msg-bubble,
.msg-row.other .speech-bubble {
    border-bottom-left-radius: 6px;
}

.msg-row.me .msg-bubble,
.msg-row.me .speech-bubble {
    border-bottom-right-radius: 6px;
}
/* === 4. 高光已移除 === */

/* === 5. 缇よ亰鍚嶅瓧鏍囩锛堢幓鐠冮鏍硷級 === */


.avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

/* === 7. 纭繚褰掓。娑堟伅涓嶅彈褰卞搷 === */
.archived-bubble,
.archived-content .speech-bubble {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.archived-bubble::before,
.archived-content .speech-bubble::before {
    display: none !important;
    content: none !important;
}

/* === 8. 鍔ㄤ綔鎻忓啓鏍峰紡淇濇寔涓嶅�?=== */
.action-text {
    font-style: italic !important;
    opacity: 0.85 !important;
}

/* msg-content 宽度已移到 text-break-fix.css */


/* === 10. 淇鏃х�?bubble绫伙紙鍏煎�?=== */
.bubble {
    padding: 10px 18px !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 70% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 5px 5px 15px rgba(166, 171, 189, 0.3), inset 2px 2px 5px #fff !important;
}


/* ========== 千面人设切换面板 ========== */
.persona-action-sheet {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.persona-sheet-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    transition: background 0.3s;
}
.persona-action-sheet.show .persona-sheet-mask {
    background: rgba(0,0,0,0.35);
}
.persona-sheet-panel {
    position: relative;
    z-index: 1;
    background: var(--mm-bg-pure, rgba(245,245,247,0.96));
    border-radius: 0 20px 0 0;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    max-height: 55vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.persona-action-sheet.show .persona-sheet-panel {
    transform: translateY(0);
}
.persona-sheet-title {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--mm-text-main, #1a1a1a);
    margin-bottom: 14px;
}
.persona-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--mm-bg-soft, rgba(255,255,255,0.75));
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    border: 1.5px solid transparent;
}
.persona-sheet-item:active { transform: scale(0.97); }
.persona-sheet-item.active {
    border-color: #6c5ce7;
    background: rgba(108,92,231,0.08);
}
.persona-sheet-item.active i {
    color: #6c5ce7;
    margin-left: auto;
    font-size: 18px;
}
.persona-sheet-item img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.persona-sheet-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--mm-text-main, #1a1a1a);
}
.persona-sheet-item.cancel {
    justify-content: center;
    background: rgba(255,59,48,0.06);
    margin-top: 4px;
}
.persona-sheet-item.cancel .persona-sheet-name {
    color: #ff3b30;
}
.persona-sheet-item.cancel i {
    color: #ff3b30;
    font-size: 18px;
}

/* ========================================
   缇ゅご鍍忎節瀹牸鏍峰紡锛堝眳涓�?鐧借竟�?   ======================================== */
.group-avatar-grid,
.group-avatar-grid-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* 鍏抽敭锛氬眳涓榻?*/
    align-content: center !important;
    background: #fff !important; /* 绾櫧搴?*/
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 2px !important; /* 鍐呰竟璺?*/
    box-sizing: border-box !important;
}

.group-avatar-grid img,
.group-avatar-grid-list img {
    box-sizing: border-box !important;
    border: 1px solid #fff !important; /* 鐢ㄧ櫧杈逛唬�?margin */
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* ========================================
   代付卡片与礼物气泡样�?
   ======================================== */

/* === 亮色系主题变�?=== */
:root {
    --card-bg: #ffffff;
    --text-main-pay: #333333;
    --text-sub-pay: #888888;
    
    /* 渐变�?- �?(�? */
    --accent-blue-start: #4facfe;
    --accent-blue-end: #00f2fe;
    
    /* 渐变�?- 对方 (粉橙) */
    --accent-orange-start: #ff758c;
    --accent-orange-end: #ff7eb3;

    /* 弥散阴影 */
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
}

/* === 核心：代付卡片样�?=== */
.pay-card {
    width: 250px; 
    background: var(--card-bg); 
    border-radius: 18px; 
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    position: relative;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

/* 头部渐变区分 */
/* 发送方 (右侧) - 蓝色 */
.msg-right .pay-card .pc-header { 
    background: linear-gradient(135deg, var(--accent-blue-start), var(--accent-blue-end)); 
}
/* 接收�?(左侧) - 粉橙�?*/
.msg-left .pay-card .pc-header { 
    background: linear-gradient(135deg, var(--accent-orange-start), var(--accent-orange-end)); 
}

.pc-header {
    padding: 15px; 
    color: #fff; 
    font-size: 13px; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

.pc-body { 
    padding: 20px 16px; 
    text-align: center; 
}

.pc-title { 
    font-size: 14px; 
    color: var(--text-sub-pay); 
    margin-bottom: 4px; 
}

.pc-amount { 
    font-size: 32px; 
    font-weight: 700; 
    color: var(--text-main-pay); 
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif; 
    letter-spacing: -0.5px;
}

.pc-desc {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    background: #f7f7f7;
    padding: 4px 10px;
    border-radius: 0;
    display: inline-block;
}

.pc-items-list {
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
    text-align: left;
}

.pc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 6px;
}

.pc-item:last-child {
    margin-bottom: 0;
}

.pc-item-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.pc-item-info {
    flex: 1;
    min-width: 0;
}

.pc-item-name {
    font-size: 13px;
    color: var(--text-main-pay);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-item-meta {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* 底部按钮 */
.pc-footer {
    padding: 14px; 
    text-align: center; 
    font-weight: 600; 
    font-size: 14px;
    border-top: 1px solid #f0f0f0; 
    cursor: pointer; 
    transition: 0.2s;
}

/* 接收方按钮强调色 */
.msg-left .pay-card .pc-footer { 
    color: #ff758c; 
}
.msg-left .pay-card .pc-footer:hover { 
    background: #fff5f7; 
}

/* 发送方按钮置灰 */
.msg-right .pay-card .pc-footer { 
    color: #ccc; 
    cursor: default; 
}

/* === 状态：已支�?(Paid) === */
.pay-card.paid {
    filter: grayscale(100%); 
    opacity: 0.7;
    box-shadow: none; 
    border: 1px solid #eee;
}

.pay-card.paid .pc-footer { 
    text-decoration: line-through; 
    pointer-events: none; 
}

/* 盖章动画 */
.stamp-paid {
    position: absolute; 
    right: 10px; 
    bottom: 50px;
    width: 90px; 
    height: 90px;
    border: 4px solid #333; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 20px; 
    font-weight: 900; 
    color: #333;
    transform: rotate(-25deg) scale(2); 
    opacity: 0;
    pointer-events: none; 
    mix-blend-mode: multiply;
}

.pay-card.paid .stamp-paid {
    animation: stampAnim 0.4s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes stampAnim { 
    to { 
        transform: rotate(-25deg) scale(1); 
        opacity: 0.6; 
    } 
}

/* === 礼物气泡样式 === */
.gift-bubble {
    background: var(--gift-bubble-bg); border: 2px solid var(--gift-bubble-border); border-radius: 16px;
    padding: 16px; max-width: 280px; box-shadow: var(--gift-bubble-shadow); position: relative; overflow: hidden;
}
.gift-deco {
    position: absolute; top: -20px; right: -20px; width: 80px; height: 80px;
    background: var(--gift-icon-bg); border-radius: 50%;
}
.gift-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gift-icon { font-size: 32px; }
.gift-title { font-size: 13px; color: var(--gift-text-main); font-weight: 700; }
.gift-target { font-size: 11px; color: var(--gift-text-sub); }
.gift-name { font-size: 13px; color: var(--gift-text-sub); margin-top: 8px; }

/* ========================================= */
/* === AI 交互按钮摇晃动画 === */
/* ========================================= */

@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

.wobbling {
    animation: wobble 0.3s ease-in-out infinite;
    color: var(--bottle-wobble-color);
    transform-origin: center bottom;
}

/* 礼物闪光动画 */
@keyframes shine {
    0%, 100% {
        left: -10px;
        opacity: 0;
    }
    50% {
        left: calc(100% + 10px);
        opacity: 1;
    }
}

/* ========================================= */
/* === 哑光钱包弹窗样式 (Matte Wallet Modal) === */
/* ========================================= */

/* 弹窗遮罩�?- 限制在手机屏幕内 */
#modal-wallet.overlay {
    position: absolute !important; /* 相对�?#app-echo 定位 */
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999; /* 确保在页面内容之�?*/
    display: none; /* 默认隐藏 */
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 显示状�?*/
#modal-wallet.overlay.active {
    display: flex; /* 激活时显示 */
    opacity: 1;
    visibility: visible;
}

/* 弹窗主体 */
#modal-wallet .sheet {
    width: 100%;
    background: #ffffff;
    border-radius: 28px 28px 0 0;
    padding: 28px;
    padding-bottom: 50px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
    max-height: 85vh;
    overflow-y: auto;
}

/* 弹窗显示时的动画 */
#modal-wallet.overlay.active .sheet {
    transform: translateY(0);
}

#modal-wallet .sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

#modal-wallet .sheet-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111;
}

#modal-wallet .close-icon {
    font-size: 26px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 50%;
}

#modal-wallet .close-icon:hover {
    color: #333;
    background: #f5f5f5;
}

/* === 哑光卡片 (Matte Card) === */
#modal-wallet .bank-card {
    height: 190px;
    padding: 26px;
    border-radius: 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #5b6e88 0%, #3e4a5b 100%);
    box-shadow: 0 15px 35px rgba(62, 74, 91, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 纹理效果 */
#modal-wallet .bank-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 100% 20px;
    opacity: 0.3;
    pointer-events: none;
}

#modal-wallet .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

#modal-wallet .chip {
    width: 36px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(#e0caa0, #c8b080);
    opacity: 0.9;
}

#modal-wallet .brand {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.9;
}

#modal-wallet .card-mid {
    z-index: 2;
}

#modal-wallet .label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#modal-wallet .balance {
    font-size: 34px;
    font-weight: 500;
    font-family: "SF Pro Display", -apple-system, sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#modal-wallet .card-btm {
    z-index: 2;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.7);
    font-family: "SF Mono", monospace;
    font-size: 14px;
}

/* === 功能按钮 (极简�? === */
#modal-wallet .action-grid {
    display: flex;
    justify-content: space-between;
    margin: 32px 10px;
}

#modal-wallet .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#modal-wallet .action-item:active {
    transform: scale(0.96);
    opacity: 0.8;
}

#modal-wallet .icon-box {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: #f7f7f9;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}

#modal-wallet .action-item:hover .icon-box {
    background: #eeeff2;
    transform: translateY(-2px);
}

#modal-wallet .action-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* === 交易列表 (干净) === */
#modal-wallet .section-title {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
    font-weight: 500;
}

#modal-wallet .trans-item {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f2f2f2;
    transition: background 0.2s ease;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 8px;
}

#modal-wallet .trans-item:hover {
    background: #fafafa;
}

#modal-wallet .trans-item:last-child {
    border-bottom: none;
}

#modal-wallet .t-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f2f2f7;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-size: 18px;
}

#modal-wallet .t-main {
    flex: 1;
}

#modal-wallet .t-name {
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

#modal-wallet .t-desc {
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

#modal-wallet .t-price {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    font-feature-settings: "tnum";
}

/* ========== 万象预设操作弹窗优化 ========== */
/* 选项列表交互增强 */
.option-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

.option-item:active {
    background: rgba(0, 0, 0, 0.08) !important;
}

body.dark-mode .option-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .option-item:active {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* 关闭按钮样式 - 右上角圆形X按钮 */
#modal-close-btn {
    transition: all 0.2s ease !important;
}

#modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

#modal-close-btn:active {
    transform: translateY(-50%) scale(0.95) !important;
    background: rgba(0, 0, 0, 0.12) !important;
}

body.dark-mode #modal-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode #modal-close-btn:active {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode #modal-close-btn i {
    color: #ccc !important;
}

/* ==================== 背包送礼面板 ==================== */
.echo-gift-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 10000; display: flex; align-items: flex-end;
    animation: echoGiftFadeIn 0.25s ease;
}
@keyframes echoGiftFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes echoGiftSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes echoGiftSlideRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

.echo-gift-panel {
    width: 100%; background: #eff3f6; border-radius: 28px 28px 0 0;
    padding: 20px 18px 32px; box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; max-height: 80vh; overflow: hidden;
    animation: echoGiftSlideUp 0.35s cubic-bezier(0.2,0.8,0.2,1);
    position: relative;
}
.echo-gift-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-shrink: 0;
}
.echo-gift-title {
    font-size: 17px; font-weight: 700; color: #546e7a;
    display: flex; align-items: center; gap: 8px;
}
.echo-gift-btn-history {
    font-size: 12px; color: #0d47a1; background: rgba(13,71,161,0.08);
    padding: 7px 12px; border-radius: 12px; cursor: pointer; font-weight: 600;
    transition: 0.2s; display: flex; align-items: center; gap: 4px;
}
.echo-gift-btn-history:active { transform: scale(0.95); }

/* 对象选择�?*/
.echo-gift-section-title {
    font-size: 11px; color: #90a4ae; margin-bottom: 8px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase; flex-shrink: 0;
}
.echo-recipient-single {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.9);
    border-radius: 14px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); flex-shrink: 0;
}
.echo-recipient-single img {
    width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); object-fit: cover;
}
.echo-recipient-single .r-info { flex: 1; }
.echo-recipient-single .r-name { font-size: 14px; font-weight: 600; color: #546e7a; margin-bottom: 2px; }
.echo-recipient-single .r-desc { font-size: 11px; color: #90a4ae; }

.echo-recipient-group {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
    margin-bottom: 10px; scrollbar-width: none; flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}
.echo-recipient-group::-webkit-scrollbar { display: none; }
.echo-recipient-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    opacity: 0.5; transition: 0.2s; cursor: pointer; min-width: 52px;
}
.echo-recipient-item.active { opacity: 1; transform: scale(1.05); }
.echo-recipient-item img {
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent;
    transition: 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.05); object-fit: cover;
}
.echo-recipient-item.active img { border-color: #0d47a1; box-shadow: 0 4px 12px rgba(13,71,161,0.2); }
.echo-recipient-item span { font-size: 11px; color: #546e7a; font-weight: 600; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* 背包网格 */
.echo-gift-grid-header {
    font-size: 11px; color: #90a4ae; margin-bottom: 8px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.echo-gift-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    overflow-y: auto; padding: 2px; max-height: 260px; scrollbar-width: none; flex: 1;
}
.echo-gift-grid::-webkit-scrollbar { display: none; }
.echo-gift-item {
    background: rgba(255,255,255,0.7); border: 2px solid rgba(255,255,255,0.9);
    border-radius: 14px; padding: 12px 4px; display: flex; flex-direction: column;
    align-items: center; cursor: pointer; transition: 0.2s;
    box-shadow: 0 3px 8px rgba(0,0,0,0.02); position: relative;
}
.echo-gift-item:active { transform: scale(0.96); }
.echo-gift-item.selected {
    background: rgba(13,71,161,0.06); border-color: #0d47a1;
    box-shadow: 0 4px 14px rgba(13,71,161,0.12); transform: translateY(-2px);
}
.echo-gift-item.empty { opacity: 0.4; filter: grayscale(0.8); cursor: not-allowed; }
.echo-gift-badge {
    position: absolute; top: -5px; right: -3px; background: #e57373; color: #fff;
    font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
    border: 2px solid #eff3f6; box-shadow: 0 2px 4px rgba(229,115,115,0.3); min-width: 16px; text-align: center;
}
.echo-gift-item.empty .echo-gift-badge { background: #b0bec5; }
.echo-gift-emoji { font-size: 28px; margin-bottom: 4px; }
.echo-gift-img-wrap {
    width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
    margin-bottom: 4px; position: relative; background: #f8f9fa;
}
.echo-gift-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.echo-gift-img-fallback {
    width: 100%; height: 100%; align-items: center; justify-content: center; overflow: hidden;
}
.echo-gift-name {
    font-size: 11px; font-weight: 600; color: #546e7a; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.echo-gift-stock { font-size: 10px; color: #90a4ae; font-weight: 500; }

/* 空背�?*/
.echo-gift-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px; gap: 12px; color: #90a4ae;
}
.echo-gift-empty i { font-size: 48px; opacity: 0.3; }

/* 底部发送栏 */
.echo-gift-send-bar {
    margin-top: 14px; display: flex; justify-content: space-between;
    align-items: center; padding-top: 14px; border-top: 1px solid rgba(200,215,225,0.4); flex-shrink: 0;
}
.echo-gift-send-info { display: flex; flex-direction: column; gap: 2px; }
.echo-gift-send-text { font-size: 13px; color: #546e7a; font-weight: 600; }
.echo-gift-send-sub { font-size: 11px; color: #90a4ae; }
.echo-gift-btn-send {
    background: linear-gradient(135deg, #0d47a1, #1976d2); color: #fff; border: none;
    padding: 10px 28px; border-radius: 22px; font-size: 14px; font-weight: 600;
    box-shadow: 0 4px 12px rgba(13,71,161,0.3); cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.echo-gift-btn-send:active { transform: scale(0.95); }
.echo-gift-btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* 赠送记录面�?*/
.echo-gift-history {
    position: absolute; inset: 0; background: #eff3f6; z-index: 20;
    padding: 20px 18px; border-radius: 28px 28px 0 0;
    transform: translateX(100%); transition: 0.3s cubic-bezier(0.2,0.8,0.2,1);
    display: flex; flex-direction: column;
}
.echo-gift-history.show { transform: translateX(0); }
.echo-history-list { flex: 1; overflow-y: auto; margin-top: 12px; scrollbar-width: none; }
.echo-history-list::-webkit-scrollbar { display: none; }
.echo-history-item {
    display: flex; align-items: center; padding: 14px; background: rgba(255,255,255,0.7);
    border-radius: 14px; margin-bottom: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.03);
    border: 1px solid rgba(255,255,255,0.9);
}
.echo-history-item .h-emoji { font-size: 28px; width: 44px; text-align: center; margin-right: 12px; flex-shrink: 0; }
.echo-history-item .h-info { flex: 1; min-width: 0; }
.echo-history-item .h-name { font-size: 14px; font-weight: 600; color: #546e7a; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.echo-history-item .h-meta { font-size: 11px; color: #90a4ae; font-weight: 500; }
.echo-history-item .h-cost { font-size: 14px; color: #e57373; font-weight: 700; flex-shrink: 0; margin-left: 8px; }
.echo-history-empty { text-align: center; padding: 40px 20px; color: #b0bec5; font-size: 14px;
}

/* ========================================================================
   气泡菜单 .glm-bmenu —— 双击消息弹出的操作菜单
   结构由 echo.js 的 showMessageMenu / showNarratorMenu 生成，
   JS 只写 position + left/top，其余样式全在这里。
   配色走变量，夜间在 body.dark-mode / [data-theme="dark"] 覆盖；无毛玻璃。
   ======================================================================== */

/* 变量系统：晨雾奶油 */
.glm-bmenu {
    --glm-menu-bg: #F9F8F5;
    --glm-menu-border: #E5E2DD;
    --glm-menu-hover: #F0EEE9;
    --glm-menu-text: #4A3B32;
    --glm-menu-sub: #8C8580;
    --glm-menu-danger: #BC4E4E;
    --glm-menu-disabled: #C2BCB5;
    --glm-menu-shadow: 0 10px 30px rgba(180, 170, 160, 0.2);
}

/* 夜间模式变量覆盖（两种选择器都挂，兼容本项目两条主题切换路径）*/
body.dark-mode .glm-bmenu,
[data-theme="dark"] .glm-bmenu {
    --glm-menu-bg: #262321;
    --glm-menu-border: #3D3835;
    --glm-menu-hover: #332F2D;
    --glm-menu-text: #E0DCD8;
    --glm-menu-sub: #9E958F;
    --glm-menu-danger: #FF5252;
    --glm-menu-disabled: #4A4542;
    --glm-menu-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* 容器（position 由 JS 写 fixed/absolute）*/
.glm-bmenu {
    width: 160px;
    background: var(--glm-menu-bg);
    border: 1px solid var(--glm-menu-border);
    border-radius: 14px;
    padding: 6px;
    box-shadow: var(--glm-menu-shadow);
    z-index: 99999;
    transition: background 0.3s, border-color 0.3s;
    animation: glmMenuFadeIn 0.2s ease-out;
    /* 兜底：菜单项多 / 贴屏幕边缘 / 翻译展开后比可用高度还高时，
       菜单整体可滚动，底部项不会被切掉（JS 会再传更精确的 --glm-menu-maxh）*/
    max-height: var(--glm-menu-maxh, 80vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.glm-bmenu::-webkit-scrollbar { display: none; }

@keyframes glmMenuFadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.glm-bmenu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}

.glm-bmenu__item:hover { background: var(--glm-menu-hover); }
.glm-bmenu__item:active { transform: scale(0.97); }

.glm-bmenu__icon { font-size: 18px; color: var(--glm-menu-text); opacity: 0.9; }
.glm-bmenu__label { font-size: 14px; font-weight: 600; color: var(--glm-menu-text); flex: 1; white-space: nowrap; }

/* 子菜单箭头：靠右、展开时旋转 */
.glm-bmenu__arrow {
    font-size: 18px;
    color: var(--glm-menu-sub);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-left: auto;
}

/* 危险项（删除）*/
.glm-bmenu__item--danger .glm-bmenu__icon,
.glm-bmenu__item--danger .glm-bmenu__label { color: var(--glm-menu-danger); }

/* 带子菜单的项：允许换行，让 width:100% 的子菜单掉到图标/文字下一行 */
.glm-bmenu__item--has-sub { flex-wrap: wrap; }

/* 禁用项（已归档）*/
.glm-bmenu__item--disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* 展开态：背景高亮 + 箭头旋转 */
.glm-bmenu__item.is-expanded { background: var(--glm-menu-hover); }
.glm-bmenu__item.is-expanded .glm-bmenu__arrow { transform: rotate(90deg); color: var(--glm-menu-text); }

/* 子菜单容器：在翻译项下方就地展开（不向侧边飞，窄屏不会被挤出屏幕）*/
.glm-bmenu__submenu {
    display: none;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--glm-menu-border);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;
    animation: glmSubSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.glm-bmenu__submenu::-webkit-scrollbar { display: none; }

/* 展开时占位撑高菜单；子项整行点击 */
.glm-bmenu__item.is-expanded .glm-bmenu__submenu { display: block; }

.glm-bmenu__sub-item {
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--glm-menu-text);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}
.glm-bmenu__sub-item:hover,
.glm-bmenu__sub-item:active { background: var(--glm-menu-hover); padding-left: 16px; }

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



/* 翻译区块 */
.trans-box {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(120, 144, 156, 0.3);
}

.trans-box .trans-label {
    font-size: 10px;
    color: #90a4ae;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.trans-box .trans-text {
    font-size: 13px;
    color: #546e7a;
    line-height: 1.6;
    font-style: italic;
}

.trans-box .trans-loading {
    font-size: 12px;
    color: #90a4ae;
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ========== 星汇详情�?Action Sheet 动画 ========== */
@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.action-sheet-wrap .action-sheet:active .as-item {
    background: rgba(205, 174, 154, 0.1);
}

/* ========== 星汇分享卡片（Echo 聊天内） ========== */
.echo-share-card {
    width: 240px;
    background: rgba(255,255,255,0.92);
    border-radius: 16px;
    border: 1px solid rgba(205, 174, 154, 0.15);
    box-shadow: 0 4px 20px rgba(205, 174, 154, 0.12);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.echo-share-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(205, 174, 154, 0.08);
}
.esc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 0;
    font-size: 11px;
    color: #a18cd1;
    font-weight: 600;
}
.esc-title {
    padding: 6px 14px 0;
    font-size: 14px;
    font-weight: 700;
    color: #4a3b3e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.esc-body {
    padding: 4px 14px 0;
    font-size: 12px;
    color: #887478;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.esc-stats {
    padding: 8px 14px 10px;
    font-size: 10px;
    color: #bbb;
    border-top: 1px solid rgba(0,0,0,0.04);
    margin-top: 8px;
}

/* ========== 帖子详情浮层（Echo 内） ========== */
.echo-post-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    background: rgba(255,255,255,0.98);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.echo-post-overlay.active {
    transform: translateX(0);
}
.epo-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.epo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #4a3b3e;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.epo-back {
    font-size: 24px;
    cursor: pointer;
    color: #a18cd1;
    transition: 0.15s;
}
.epo-back:active { opacity: 0.5; }
.epo-more {
    margin-left: auto;
    font-size: 20px;
    cursor: pointer;
    color: #887478;
}
.epo-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 18px;
    -webkit-overflow-scrolling: touch;
}
.epo-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.epo-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.epo-author-name {
    font-size: 15px;
    font-weight: 700;
    color: #4a3b3e;
}
.epo-time {
    font-size: 11px;
    color: #bbb;
    margin-top: 2px;
}
.epo-title {
    font-size: 18px;
    font-weight: 800;
    color: #4a3b3e;
    line-height: 1.5;
    margin-bottom: 12px;
}
.epo-title:empty { display: none; }
.epo-content {
    font-size: 14px;
    color: #594a4e;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}
.epo-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
    margin-top: 14px;
}
.epo-images img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
}
.epo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.epo-tag {
    font-size: 11px;
    color: #a18cd1;
    background: rgba(161,140,209,0.08);
    padding: 3px 10px;
    border-radius: 0;
}
.epo-stats-row {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.05);
    font-size: 13px;
    color: #887478;
}
.epo-stats-row i {
    margin-right: 4px;
    color: #a18cd1;
}

/* ========== 星汇帖子列表 强制样式（圆角/padding 已由 starhub-new.css 管理，此处只保留 h3/p 文字层级） ========== */
.post-card h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.post-card p {
    font-size: 13px !important;
    line-height: 1.7 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: pre-wrap !important;
}

/* ========== 多选模式样�?========== */
.msg-row.selected {
    background: rgba(161,140,209,0.08) !important;
    border-radius: 12px;
}

/* ========== 🎵 音乐卡片（一起听�?========= */
.music-card {
    width: 250px;
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
}

.music-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.music-card.playing {
    border-color: #d67a89;
    background: linear-gradient(to right, #fff, #fffbfc);
}

/* 封面容器 */
.mc-cover {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    flex-shrink: 0;
    background: #eee;
}

.mc-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play 图标遮罩 */
.mc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transition: opacity 0.3s;
}

/* 播放状�?- 封面变圆�?*/
.music-card.playing .mc-cover {
    border-radius: 50%;
    box-shadow: 0 0 0 2px #d67a89;
    animation: spin 4s linear infinite;
}

.music-card.playing .mc-cover img {
    border-radius: 50%;
}

.music-card.playing .mc-overlay {
    opacity: 0;
    pointer-events: none;
}

/* 旋转动画 */
@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* 文本信息�?*/
.mc-info {
    flex: 1;
    overflow: hidden;
}

.mc-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.music-card.playing .mc-title {
    color: #d67a89;
}

.mc-sub {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    height: 16px;
}

/* 波纹动画容器 */
.wave-box {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 10px;
    margin-left: 6px;
}

.bar {
    width: 2px;
    background: #d67a89;
    border-radius: 1px;
    animation: wave 0.8s ease-in-out infinite;
}

.bar:nth-child(1) { animation-delay: 0s; height: 3px; }
.bar:nth-child(2) { animation-delay: 0.1s; height: 5px; }
.bar:nth-child(3) { animation-delay: 0.2s; height: 3px; }

@keyframes wave {
    0%, 100% {
        height: 3px;
        opacity: 0.6;
    }
    50% {
        height: 10px;
        opacity: 1;
    }
}

/* ========== 🎵 选歌弹窗 ========== */
.music-select-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.music-select-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.music-select-modal-box {
    width: 340px;
    max-width: 90vw;
    max-height: 70vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.music-select-modal-overlay.active .music-select-modal-box {
    transform: scale(1) translateY(0);
}

.msm-header {
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.msm-header span {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.msm-header i {
    font-size: 22px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}

.msm-header i:hover {
    color: #333;
}

.msm-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.song-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f8f8f8;
}

.song-select-item:hover {
    background: #f9f9f9;
}

.song-select-item:active {
    background: #f0f0f0;
}

.song-select-item:last-child {
    border-bottom: none;
}

.song-select-item img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #eee;
}

.ss-info {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.ss-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-artist {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-select-item > i {
    font-size: 20px;
    color: #d67a89;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.song-select-item:hover > i {
    opacity: 1;
}

/* 滚动条美�?*/
.msm-list::-webkit-scrollbar {
    width: 6px;
}

.msm-list::-webkit-scrollbar-track {
    background: transparent;
}

.msm-list::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.msm-list::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

/* =========================================
   共听音乐面板 (Music Co-Listening Panel)
   ========================================= */

/* 面板遮罩�?*/
.music-panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.1);
    z-index: 150;
    display: none !important; /* 🔧 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.music-panel-overlay.active {
    display: block !important; /* 🔧 激活时显示 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 🔧 确保关闭的面板不阻挡点击 */
.music-panel:not(.active) {
    pointer-events: none !important;
}

/* 面板主体 */
.music-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background: rgba(255, 255, 255, 0.65);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -10px 40px rgba(161, 140, 209, 0.15);
    z-index: 200;
    display: none !important; /* 🔧 默认隐藏 */
    flex-direction: column;
    padding: 15px 25px;
}

.music-panel.active {
    display: flex !important; /* 🔧 激活时显示 */
    transform: translateY(0);
}

/* 拖拽手柄 */
.panel-dragger {
    width: 40px;
    height: 5px;
    background: rgba(161, 140, 209, 0.3);
    border-radius: 10px;
    margin: 0 auto 15px;
    flex-shrink: 0;
}

/* 头部区域 */
.co-listening-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-shrink: 0;
}

.co-title {
    font-size: 15px;
    font-weight: 800;
    color: #a18cd1;
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 头像�?*/
.avatar-group {
    display: flex;
    align-items: center;
}

.avatar-group img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.avatar-group img:first-child {
    margin-left: 0;
}

.avatar-more {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fdfbfd;
    border: 2px solid #fff;
    margin-left: -10px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #a18cd1;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 退出共听按�?*/
.btn-exit {
    padding: 6px 14px;
    border-radius: 0;
    background: rgba(255, 107, 129, 0.12);
    border: 1px solid rgba(255, 107, 129, 0.2);
    color: #ff5277;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(255, 107, 129, 0.1);
    transition: all 0.2s;
}

.btn-exit:active {
    transform: scale(0.92);
    box-shadow: none;
}

/* 播放器核心区�?*/
.panel-player {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-shrink: 0;
}

.player-cover {
    width: 80px;
    height: 80px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(161, 140, 209, 0.3);
    flex-shrink: 0;
    position: relative;
    background: #eee;
}

.player-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: spin 8s linear infinite;
    border-radius: 50%;
    transform: scale(1.1);
}

.player-cover.paused img {
    animation-play-state: paused !important;
}

.player-info {
    flex: 1;
    overflow: hidden;
}

.player-song {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-artist {
    font-size: 13px;
    color: #888;
}

/* 进度�?*/
.progress-container {
    width: 100%;
    margin-bottom: 25px;
    flex-shrink: 0;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(161, 140, 209, 0.15);
    border-radius: 10px;
    position: relative;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #a18cd1, #fbc2eb);
    border-radius: 10px;
    position: relative;
    transition: width 0.1s linear;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(251, 194, 235, 0.8);
}

/* 控制按钮 */
.player-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 10px;
    flex-shrink: 0;
}

.ctrl-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #a18cd1;
    font-size: 22px;
    border: none;
    box-shadow: 0 4px 12px rgba(161, 140, 209, 0.15);
    transition: all 0.2s;
}

.ctrl-btn:active {
    transform: scale(0.9);
}

.ctrl-btn.play {
    width: 60px;
    height: 60px;
    font-size: 30px;
    color: white;
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    box-shadow: 0 8px 20px rgba(251, 194, 235, 0.5);
}

/* 播放列表头部 */
.playlist-header {
    font-size: 16px;
    font-weight: 800;
    color: #333;
    margin-bottom: 15px;
    flex-shrink: 0;
}

/* 播放列表 */
.playlist {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
}

.playlist::-webkit-scrollbar {
    display: none;
}

/* 播放列表�?*/
.playlist-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}

.playlist-item:hover {
    background: rgba(255, 255, 255, 0.6);
}

.playlist-item.active {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(251, 194, 235, 0.4);
    box-shadow: 0 4px 15px rgba(161, 140, 209, 0.08);
}

.pl-cover {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    background: #eee;
    flex-shrink: 0;
}

.pl-info {
    flex: 1;
    overflow: hidden;
}

.pl-song {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-artist {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item.active .pl-song {
    color: #a18cd1;
}

/* 音乐卡片播放/暂停/退出状态增�?*/
.music-card.playing.paused img {
    animation-play-state: paused !important;
}

.music-card.playing.paused .bar {
    animation-play-state: paused !important;
}

.playlist-item.paused .wave-box .bar {
    animation-play-state: paused !important;
}

/* 退出状�?(Exited) */
.music-card.exited {
    background: rgba(245, 245, 245, 0.7);
    border-color: rgba(0, 0, 0, 0.05);
    cursor: default;
    opacity: 0.8;
    box-shadow: none;
}

.music-card.exited:active {
    transform: none;
}

.music-card.exited .mc-cover {
    border-radius: 12px;
    background: #ddd;
    box-shadow: none;
    padding: 0;
}

.music-card.exited .mc-cover img {
    border-radius: 12px;
    animation: none;
    filter: grayscale(50%) opacity(0.8);
}

.music-card.exited .mc-title {
    color: #888;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.2);
}

/* ==========================================
   💰 金钱输入弹窗遮罩
========================================== */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(93, 84, 104, 0.4);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.mask.on {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================
   🧧 红包系统样式（高定朱砂红 + 烫金）
========================================== */
:root {
    --rose-main:   #9e1a22;
    --rose-light:  #b8232d;
    --rose-dark:   #7a1218;
    --gold-light:  #fdf3da;
    --gold-main:   #e8c892;
    --gold-dark:   #c29d58;
    --text-dark:   #3d2b2d;
    --text-sub:    #8f7a7c;
    --text-muted:  #c7baba;
    --bg-chat:     #f2e8e9;
    --bg-white:    #ffffff;
    --border-line: #f0e6e7;
    --pattern-gold: rgba(232, 200, 146, 0.15);
    --pattern-line: rgba(232, 200, 146, 0.4);
    --shadow-rose: 0 8px 24px rgba(158, 26, 34, 0.3);
    --shadow-gold: 0 4px 12px rgba(232, 200, 146, 0.4);
    --transparent: transparent;
}

/* ── 菱格暗纹 + 鎏金边框 ── */
.luxury-pattern {
    background-color: var(--rose-main);
    background-image:
        linear-gradient(45deg, var(--transparent) 48%, var(--pattern-gold) 48%, var(--pattern-gold) 52%, var(--transparent) 52%),
        linear-gradient(-45deg, var(--transparent) 48%, var(--pattern-gold) 48%, var(--pattern-gold) 52%, var(--transparent) 52%);
    background-size: 16px 16px;
    position: relative;
}
.luxury-corners::after {
    content: ''; position: absolute; inset: 4px; border: 1px solid var(--pattern-line); border-radius: 4px; pointer-events: none;
    background:
        linear-gradient(to right, var(--gold-main) 6px, var(--transparent) 6px) 0 0,
        linear-gradient(to bottom, var(--gold-main) 6px, var(--transparent) 6px) 0 0,
        linear-gradient(to left, var(--gold-main) 6px, var(--transparent) 6px) 100% 0,
        linear-gradient(to bottom, var(--gold-main) 6px, var(--transparent) 6px) 100% 0,
        linear-gradient(to right, var(--gold-main) 6px, var(--transparent) 6px) 0 100%,
        linear-gradient(to top, var(--gold-main) 6px, var(--transparent) 6px) 0 100%,
        linear-gradient(to left, var(--gold-main) 6px, var(--transparent) 6px) 100% 100%,
        linear-gradient(to top, var(--gold-main) 6px, var(--transparent) 6px) 100% 100%;
    background-repeat: no-repeat; background-size: 10px 10px;
}
.svg-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── 红包气泡 ── */
.rp-bubble { width: 220px; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-rose); cursor: pointer; }
.rp-bubble-body { padding: 16px 14px; display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.rp-bubble-icon { width: 36px; height: 36px; border-radius: 6px; background: rgba(232,200,146,0.15); display: flex; align-items: center; justify-content: center; color: var(--gold-main); border: 1px solid rgba(232,200,146,0.4); flex-shrink: 0; }
.rp-bubble-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rp-bubble-title { font-size: 14px; font-weight: 600; color: var(--gold-light); line-height: 1.3; }
.rp-bubble-status { font-size: 11px; color: rgba(253,243,218,0.7); }
.rp-bubble-footer { background: var(--bg-white); padding: 8px 16px; font-size: 10px; color: var(--text-sub); display: flex; justify-content: space-between; align-items: center; }
.rp-bubble-tag { background: var(--gold-main); color: var(--rose-dark); font-weight: 700; padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 2px; }

/* ── 系统播报 ── */
.sys-msg { align-self: center; background: rgba(158,26,34,0.06); border: 1px solid rgba(158,26,34,0.15); padding: 6px 16px; border-radius: 0; font-size: 11px; color: var(--rose-dark); display: flex; align-items: center; gap: 6px; text-align: center; line-height: 1.4; }
.sys-msg-hl { color: var(--gold-dark); font-weight: 600; }

/* ── 发红包面板 ── */
.modal-send-rp { background: var(--bg-white); border-radius: 12px; padding: 24px 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); position: relative; width: 300px; max-width: 90%; }
.send-rp-box { background: var(--bg-white); border-radius: 12px; padding: 24px 20px; }
.rp-type-selector { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; background: var(--bg-chat); padding: 4px; border-radius: 8px; }
.rp-type-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; border-radius: 6px; color: var(--text-sub); cursor: pointer; transition: all 0.3s; }
.rp-type-btn.active { background: var(--bg-white); color: var(--rose-main); box-shadow: 0 2px 8px rgba(158,26,34,0.1); font-weight: 600; }
.rp-type-btn .svg-icon { opacity: 0.5; width: 16px; height: 16px; }
.rp-type-btn.active .svg-icon { opacity: 1; }
.rp-type-label { font-size: 12px; }
.rp-luck-badge { font-size: 9px; color: var(--gold-dark); background: rgba(232,200,146,0.15); border: 1px solid rgba(232,200,146,0.4); padding: 1px 4px; border-radius: 3px; font-weight: 600; }
.send-rp-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border-line); }
.send-rp-row.msg-row input { text-align: left; padding-left: 16px; }
.send-rp-label { font-size: 14px; font-weight: 600; color: var(--text-dark); display: flex; align-items: center; gap: 6px; }
.send-rp-input-group { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
.send-rp-row input { border: none; outline: none; text-align: right; font-size: 18px; font-weight: 700; color: var(--text-dark); background: transparent; width: 100%; }
.send-rp-row input::placeholder { color: var(--text-muted); font-size: 14px; font-weight: 400; }
.send-rp-unit { margin-left: 8px; font-size: 14px; color: var(--text-dark); font-weight: 600; }
.send-rp-amount-show { text-align: center; font-size: 46px; font-weight: 700; color: var(--text-dark); margin: 32px 0; line-height: 1; }
.send-rp-amount-show span { font-size: 20px; margin-right: 4px; color: var(--text-sub); }
.send-rp-type-tag { text-align: center; font-size: 12px; color: var(--rose-main); margin-bottom: 16px; font-weight: 600; }
.send-rp-hint { text-align: center; font-size: 12px; color: var(--text-sub); margin: -8px 0 4px 0; }
.rp-count-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-line); background: var(--bg-white); color: var(--text-dark); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-count-input { width: 50px; text-align: center; border: none; outline: none; font-size: 16px; font-weight: 700; color: var(--text-dark); background: transparent; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-chat); color: var(--text-sub); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; z-index: 10; }

/* ── 发送按钮 ── */
.modal-send-rp .btn-send { width: 100%; padding: 14px; border-radius: 6px; border: none; color: var(--gold-light); font-size: 15px; font-weight: 600; letter-spacing: 2px; box-shadow: var(--shadow-rose); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; margin-top: 24px; }
.modal-send-rp .btn-send::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(232,200,146,0.3); border-radius: 4px; pointer-events: none; }
.btn-send-inner { position: relative; z-index: 2; display: flex; align-items: center; }
.rp-send-icon { margin-left: 8px; width: 16px; height: 16px; }

/* ── 拆红包信封 ── */
.rp-modal-mask { display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); }
.packetModal { width: 260px; border-radius: 12px; height: 420px; position: relative; overflow: hidden; box-shadow: var(--shadow-rose); display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.pm-flap { position: absolute; top: 0; left: 0; right: 0; height: 140px; border-radius: 0 0 50% 50% / 0 0 40px 40px; box-shadow: 0 6px 16px rgba(0,0,0,0.3); z-index: 1; border-bottom: 2px solid var(--gold-main); }
.pm-header { position: relative; z-index: 2; text-align: center; margin-top: 36px; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
.env-avatar { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--gold-main); margin: 0 auto 6px; }
.env-sender { font-size: 15px; font-weight: 700; color: var(--gold-light); letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.4); display: block; }
.env-subtitle { font-size: 11px; color: var(--gold-main); opacity: 0.9; margin-top: 6px; letter-spacing: 1px; }
.env-msg { font-size: 13px; color: var(--gold-light); margin-top: 12px; opacity: 0.85; }
.pm-type-hint { margin-top: 12px; font-size: 14px; color: var(--gold-light); font-weight: 600; letter-spacing: 1px; }
.pm-open-btn { position: absolute; top: 160px; width: 86px; height: 86px; background: linear-gradient(135deg, var(--gold-light), var(--gold-main)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: var(--rose-dark); box-shadow: var(--shadow-gold), inset 0 2px 4px rgba(255,255,255,0.8), inset 0 -4px 8px rgba(0,0,0,0.2); border: 2px solid var(--gold-light); z-index: 3; cursor: pointer; transition: transform 0.2s; }
.pm-open-btn::after { content: ''; position: absolute; inset: 4px; border: 1px dashed rgba(122,18,24,0.4); border-radius: 50%; }
.pm-open-btn:hover { transform: scale(1.05) rotate(5deg); }
.packet-close-btn { position: absolute; bottom: 20px; width: 100%; text-align: center; color: rgba(253,243,218,0.6); cursor: pointer; font-size: 28px; font-weight: 300; }

/* ── 红包详情页 ── */
.rp-details-view { width: 100%; height: 100%; background: var(--bg-white); overflow: hidden; display: flex; flex-direction: column; }
.det-header-bg {
    padding: 30px 20px 50px;
    /* 🍎 iOS 灵动岛补偿：确保返回按钮不被遮挡 */
    padding-top: max(30px, calc(env(safe-area-inset-top) + 10px));
    border-radius: 0 0 50% 50% / 0 0 15px 15px;
    text-align: center;
    border-bottom: 2px solid var(--gold-main);
    position: relative;
}
.det-back { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gold-main); cursor: pointer; z-index: 2; }
.det-avatar { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; background: var(--rose-dark) center/cover no-repeat; }
.det-rp-sender { font-size: 16px; font-weight: 700; color: var(--gold-light); letter-spacing: 1px; }
.det-rp-msg { font-size: 12px; color: var(--gold-main); margin-top: 8px; }
.det-amount-sec { text-align: center; margin-top: -24px; padding-top: 28px; padding-bottom: 30px; position: relative; z-index: 2; background: var(--bg-white); }
.det-amount { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 52px; font-weight: 700; color: var(--text-dark); line-height: 1; display: flex; align-items: baseline; justify-content: center; }
.det-amount span { font-size: 20px; margin-right: 4px; color: var(--text-sub); }
.det-rp-status-badge { display: inline-block; font-size: 10px; color: var(--rose-main); background: var(--bg-chat); padding: 4px 12px; border-radius: 4px; margin-top: 16px; font-weight: 600; letter-spacing: 1px; border: 1px solid rgba(158,26,34,0.1); }
.rp-detail-best { font-size: 10px; color: var(--gold-dark); display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; font-weight: 600; letter-spacing: 1px; }
.rp-grab-list { flex: 1; overflow-y: auto; background: var(--bg-white); border-top: 8px solid var(--bg-chat); }
.rp-grab-summary { padding: 12px 16px; font-size: 11px; color: var(--text-sub); border-bottom: 1px solid var(--border-line); }
.rp-grab-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-line); }
.rp-grab-avatar { width: 36px; height: 36px; border-radius: 6px; background: #2a2a2a; color: var(--gold-main); display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 12px; flex-shrink: 0; }
.rp-grab-info { flex: 1; }
.rp-grab-name { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; }
.rp-grab-time { font-size: 10px; color: var(--text-sub); }
.rp-grab-amount-wrap { text-align: right; }
.rp-grab-amount { font-size: 16px; font-weight: 700; color: var(--text-dark); }

/* ── 红包弹窗定位约束 ── */
#modal-send-rp, #modal-rp-open, #rp-details-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; pointer-events: none; display: none;
}
#modal-send-rp, #modal-rp-open {
    align-items: center; justify-content: center; background: rgba(0,0,0,0.5);
}
#modal-rp-open .modal-close, #modal-send-rp .modal-close { position: absolute; top: 15px; right: 15px; z-index: 100; }
#modal-send-rp .send-rp-row span { color: var(--text-dark); font-weight: 500; }
#modal-send-rp .send-rp-row input { color: var(--text-dark); }
#modal-send-rp .send-rp-row input::placeholder { color: var(--text-muted); }
#modal-send-rp .send-rp-amount-show { color: var(--text-dark); }
#modal-send-rp .send-rp-hint { color: var(--text-sub); }

/* 黑金转账卡片（兼容旧气泡） */
.gold-card { width: 240px; height: 120px; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.08); cursor: pointer; }
.msg-row:not(.me) .gold-card { background: #fff; border: 1px solid #D4AF37; }
.msg-row.me .gold-card { background: linear-gradient(135deg, #D4AF37, #AA8526); color: #fff; }
.card-top { padding: 12px 15px; display: flex; align-items: center; font-size: 13px; font-weight: 600; }
.card-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 8px; }
.msg-row:not(.me) .card-icon { background: #FFF9E6; color: #D4AF67; }
.msg-row.me .card-icon { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); }
.card-mid { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }
.msg-row:not(.me) .card-mid { color: #D4AF37; }
.card-btm { height: 28px; padding: 0 15px; display: flex; align-items: center; font-size: 10px; font-weight: 700; }
.msg-row:not(.me) .card-btm { background: #FFF9E6; color: #D4AF37; }
.msg-row.me .card-btm { background: rgba(0,0,0,0.1); color: rgba(255,255,255,0.8); }
.gold-card.opened { opacity: 0.7; filter: grayscale(0.3); }

/* 红包气泡基础通用样式 */
.hb-bubble {
    width: 245px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hb-content {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.hb-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    min-width: 0;
}

.hb-text-main {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hb-text-sub {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 400;
}

.hb-bottom {
    padding: 7px 16px;
    font-size: 11px;
    z-index: 2;
    position: relative;
    letter-spacing: 0.5px;
}

/* 微光扫过特效 */
.hb-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    animation: diamondGlow 3.5s infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes diamondGlow {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* 1. 普通红包（纯净玫瑰�?*/
.hb-bubble.normal {
    background: linear-gradient(135deg, var(--rose-light) 0%, var(--rose-main) 100%);
    box-shadow: 0 6px 20px rgba(214, 92, 111, 0.3), inset 0 1px 3px rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.2);
}

.hb-bubble.normal .hb-icon {
    width: 36px;
    height: 42px;
    position: relative;
    border-radius: 6px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fdf2d8 0%, #e6c88e 100%);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 4px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hb-bubble.normal .hb-icon::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23b84355" xmlns="http://www.w3.org/2000/svg"><path d="M12 12C12 12 8 8 5 9C2 10 3 15 5 16C7 17 12 12 12 12ZM12 12C12 12 16 8 19 9C22 10 21 15 19 16C17 17 12 12 12 12Z"/><circle cx="12" cy="12" r="2" fill="%23d65c6f"/></svg>') no-repeat center;
}

.hb-bubble.normal .hb-text {
    color: #fff;
    text-shadow: 0 1px 2px rgba(184, 67, 85, 0.4);
}

.hb-bubble.normal .hb-bottom {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.95);
    border-top: 1px solid rgba(255,255,255,0.15);
}

/* 普通红包已领取状�?*/
.hb-bubble.normal.opened {
    background: var(--rose-opened);
    box-shadow: none;
    border: 1px solid rgba(214, 92, 111, 0.2);
}

.hb-bubble.normal.opened::after {
    display: none;
}

.hb-bubble.normal.opened .hb-text {
    color: var(--rose-dark);
    text-shadow: none;
}

.hb-bubble.normal.opened .hb-text-sub {
    color: #c49ea5;
}

.hb-bubble.normal.opened .hb-icon {
    background: rgba(230, 200, 142, 0.3);
    box-shadow: none;
    opacity: 0.7;
}

.hb-bubble.normal.opened .hb-bottom {
    background: rgba(214, 92, 111, 0.05);
    color: #c49ea5;
    border-top: 1px solid rgba(214, 92, 111, 0.1);
}

/* 2. 拼手气红包（玫瑰粉到香槟金渐变） */
.hb-bubble.lucky {
    background: linear-gradient(135deg, #f5a9b8 0%, #d65c6f 40%, #e6c88e 100%);
    box-shadow: 0 6px 20px rgba(230, 200, 142, 0.5), inset 0 1px 3px rgba(255,255,255,0.6);
    border: 1px solid rgba(250, 235, 210, 0.6);
}

/* 巨大磨砂水印 */
.hb-bubble.lucky::before {
    content: '福';
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 64px;
    color: rgba(255, 255, 255, 0.15);
    font-family: "Songti SC", "STSong", serif;
    font-weight: 900;
    transform: rotate(-15deg);
    z-index: 1;
    pointer-events: none;
}

.hb-bubble.lucky .hb-icon {
    width: 42px;
    height: 42px;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff7e6 0%, #f5e4c3 100%);
    box-shadow: inset 0 2px 5px #fff, 0 4px 10px rgba(214, 92, 111, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid #fff;
}

.hb-bubble.lucky .hb-icon::before {
    content: '福';
    color: var(--rose-main);
    font-size: 20px;
    font-weight: bold;
    font-family: "Songti SC", serif;
    background: none;
}

.hb-bubble.lucky .hb-text {
    color: #fff;
    text-shadow: 0 1px 3px rgba(214, 92, 111, 0.6);
}

.hb-bubble.lucky .hb-bottom {
    background: rgba(255,255,255,0.25);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(214, 92, 111, 0.4);
}

/* 拼手气红包已领取状�?*/
.hb-bubble.lucky.opened {
    background: var(--gold-opened);
    box-shadow: none;
    border: 1px solid rgba(230, 200, 142, 0.4);
}

.hb-bubble.lucky.opened::after {
    display: none;
}

.hb-bubble.lucky.opened::before {
    color: rgba(214, 92, 111, 0.06);
}

.hb-bubble.lucky.opened .hb-text {
    color: #a37936;
    text-shadow: none;
}

.hb-bubble.lucky.opened .hb-text-sub {
    color: #c2a172;
}

.hb-bubble.lucky.opened .hb-icon {
    background: rgba(255,255,255,0.5);
    border-color: rgba(230, 200, 142, 0.5);
    box-shadow: none;
    opacity: 0.8;
}

.hb-bubble.lucky.opened .hb-icon::before {
    color: #c2a172;
}

.hb-bubble.lucky.opened .hb-bottom {
    background: rgba(230, 200, 142, 0.15);
    color: #b8853b;
    border-top: 1px solid rgba(230, 200, 142, 0.3);
}

/* 黑金转账卡片 */
.gold-card {
    width: 240px;
    height: 120px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    cursor: pointer;
}

.msg-row:not(.me) .gold-card {
    background: #fff;
    border: 1px solid #D4AF37;
}

.msg-row.me .gold-card {
    background: linear-gradient(135deg, #D4AF37, #AA8526);
    color: #fff;
}

.card-top {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

.card-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.msg-row:not(.me) .card-icon {
    background: #FFF9E6;
    color: #D4AF67;
}

.msg-row.me .card-icon {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
}

.card-mid {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
}

.msg-row:not(.me) .card-mid {
    color: #D4AF37;
}

.card-btm {
    height: 28px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
}

.msg-row:not(.me) .card-btm {
    background: #FFF9E6;
    color: #D4AF37;
}

.msg-row.me .card-btm {
    background: rgba(0,0,0,0.1);
    color: rgba(255,255,255,0.8);
}

/* 已收款状�?*/
.gold-card.opened {
    opacity: 0.7;
    filter: grayscale(0.3);
}

/* ==========================================
   🎬 视频/阅读组件样式
========================================== */
/* 播放器全屏弹�?*/
.player-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
}

.player-modal.active {
    transform: translateY(0);
}

.pm-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    color: #fff;
    z-index: 10;
}

.pm-minimize {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pm-video-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.pm-video-container video {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 弹幕轨道 */
.danmaku-track {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
    overflow: hidden;
}

.dm-msg {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px 2px #000;
    padding: 4px 10px;
    border-radius: 15px;
    background: rgba(0,0,0,0.3);
}

.pm-footer {
    height: 60px;
    background: #111;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 12px;
}

.pm-input {
    flex: 1;
    height: 36px;
    border-radius: 18px;
    border: none;
    background: #333;
    padding: 0 15px;
    color: #fff;
    outline: none;
}

/* 阅读器层 */
.reader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f4ec;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.reader-overlay.active {
    transform: translateY(0);
}

.reader-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    z-index: 10;
    transition: transform 0.3s;
}

.reader-header.hidden {
    transform: translateY(-100%);
}

.reader-content {
    flex: 1;
    overflow-y: auto;
    padding: 60px 20px 70px 20px;
    font-size: 18px;
    line-height: 1.8;
    color: #222;
    text-align: justify;
    position: relative;
}

.reader-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 56px;
    background: #fff;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 10px;
    z-index: 10;
    transition: transform 0.3s;
}

.reader-footer.hidden {
    transform: translateY(100%);
}

.rf-input {
    flex: 1;
    height: 36px;
    background: #f2f2f2;
    border: none;
    border-radius: 18px;
    padding: 0 15px;
}

/* 评论气泡 (自动消失) */
.comment-bubble {
    position: absolute;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    max-width: 80%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    display: flex;
    gap: 8px;
    align-items: center;
    animation: slideIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.comment-bubble.fading-out {
    animation: fadeOut 0.5s forwards;
    pointer-events: none;
}

.comment-bubble.mine {
    left: 10px;
    background: #95ec69;
    border: 1px solid #7bc856;
}

.comment-bubble.other {
    right: 10px;
    background: #fff;
    border: 1px solid #ddd;
}

.cb-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

@keyframes slideIn {
    from {
        transform: translateY(20px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ==========================================
   📍 定位组件样式
========================================== */
/* 地图气泡卡片（灰木拿铁票券）*/
.loc-card-bubble {
    width: 250px;
    border-radius: 12px;
    background: var(--fg-card-bg);
    border: 1px solid var(--fg-border);
    padding: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: var(--fg-shadow-card);
}

.msg-row.me .loc-card-bubble {
    border-color: var(--fg-border);
}

.loc-card-bubble:active {
    transform: scale(0.96);
}

/* 票券内层（虚线压痕）*/
.loc-bubble-inner {
    border: 1px dashed var(--fg-border-dash);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.loc-card-map {
    width: 100%;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px dashed var(--fg-border-dash);
}

/* 🌟 活点雷达地图底（灰木拿铁，网格 + 聚焦遮罩）*/
.aesthetic-map-bg {
    background-color: var(--fg-panel-bg);
    position: relative;
    overflow: hidden;
}
.fg-loc-map.aesthetic-map-bg { cursor: grab; }
.fg-loc-map.aesthetic-map-bg:active { cursor: grabbing; }

/* 边缘渐变遮罩（镜头聚焦感，固定不动）*/
.aesthetic-map-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 10%, var(--fg-panel-bg) 95%);
    pointer-events: none;
    z-index: 10;
}

/* 拖拽层：网格 + 所有地标 */
.map-draggable-layer {
    position: absolute;
    top: 0; left: 0;
    width: 200%; height: 200%;
    transform: translate(-25%, -25%);
    background-image:
        linear-gradient(var(--fg-map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--fg-map-grid) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center center;
    transition: transform 0.1s ease-out;
}

/* 雷达圈 */
.map-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px dashed var(--fg-map-ring); border-radius: 50%; pointer-events: none; }
.map-ring.r1 { width: 100px; height: 100px; }
.map-ring.r2 { width: 200px; height: 200px; }
.map-ring.r3 { width: 320px; height: 320px; }

/* 起点（中心点）*/
.map-origin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 5; }
.origin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-map-origin); border: 2px solid var(--fg-card-bg); box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; }
.origin-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--fg-map-origin); animation: fg-ripple 2s infinite ease-out; }
@keyframes fg-ripple { 0% { width: 100%; height: 100%; opacity: 1; } 100% { width: 300%; height: 300%; opacity: 0; } }
.origin-label { font-size: 9px; font-weight: 600; color: var(--fg-map-origin); background: var(--fg-card-bg); padding: 2px 6px; border-radius: 4px; margin-top: 6px; border: 1px solid rgba(92, 117, 148, 0.2); white-space: nowrap; }

/* 周边地标（小点 + 名字标签，竖排：点在上、名字在下）*/
.nearby-poi { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 3; transform: translate(-50%, -50%); cursor: pointer; padding: 4px; }
.nearby-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-map-poi); flex: 0 0 auto; border: 1.5px solid var(--fg-card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.12); transition: 0.2s; }
.nearby-poi:active .nearby-dot { transform: scale(1.4); }
.nearby-poi.on .nearby-dot { width: 9px; height: 9px; background: var(--fg-map-accent); box-shadow: 0 0 0 3px rgba(194,167,125,0.3); }
.nearby-label { font-size: 11px; font-weight: 600; color: var(--fg-text); background: var(--fg-card-bg); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--fg-border); white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.nearby-poi.on .nearby-label { color: var(--fg-card-bg); background: var(--fg-map-accent); border-color: var(--fg-map-accent); }

/* 高德式小信息卡（点选锚点时浮在大头针上方）*/
.fg-map-card {
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    min-width: 120px; max-width: 180px; padding: 8px 10px;
    background: var(--fg-card-bg); border: 1px solid var(--fg-border); border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14); z-index: 20;
    display: flex; flex-direction: column; gap: 4px;
    animation: fg-card-pop 0.18s cubic-bezier(0.2,0.8,0.2,1);
}
.fg-map-card::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--fg-card-bg);
}
.fg-map-card-name { font-size: 12px; font-weight: 700; color: var(--fg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-map-card-meta { font-size: 9px; color: var(--fg-text-sub); line-height: 1.3; }
.fg-map-card-go { margin-top: 2px; padding: 4px 0; border: none; border-radius: 6px; background: var(--fg-text); color: var(--fg-card-bg); font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.fg-map-card-go:active { transform: scale(0.94); }
@keyframes fg-card-pop { from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

.loc-card-info {
    padding: 12px;
    background: var(--fg-card-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 2;
}

.loc-meta-row {
    display: flex;
    align-items: center;
}

.loc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.loc-title i {
    vertical-align: middle;
    margin-right: 2px;
}

.loc-distance {
    font-size: 11px;
    color: var(--fg-text);
    background: var(--fg-panel-bg);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 600;
    border: 1px solid var(--fg-border);
    display: inline-block;
}

.loc-desc {
    font-size: 11px;
    color: var(--fg-text-sub);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 目标大头针 */
.pin-wrapper {
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 在地图层里时改绝对定位（按 top/left 落到真实坐标）*/
.map-draggable-layer .pin-wrapper {
    position: absolute;
    transform: translate(-50%, -100%);
    transition: top 0.5s ease-out, left 0.5s ease-out;
}

.poi-tooltip {
    background: var(--fg-text);
    color: var(--fg-card-bg);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    position: relative;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
}

.poi-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: var(--fg-text) transparent transparent transparent;
}

.poi-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.cute-map-pin {
    width: 16px;
    height: 16px;
    background: var(--fg-map-accent);
    border: 3px solid var(--fg-card-bg);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
    position: relative;
    z-index: 2;
    animation: pin-float 2s ease-in-out infinite alternate;
}

.pin-shadow {
    width: 10px;
    height: 3px;
    background: rgba(0,0,0,0.15);
    border-radius: 50%;
    margin-top: 4px;
    animation: pin-shadow 2s ease-in-out infinite alternate;
}

@keyframes pin-float {
    0% { transform: rotate(-45deg) translate(0, 0); }
    100% { transform: rotate(-45deg) translate(2px, 2px); }
}

@keyframes pin-shadow {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(0.6); opacity: 0.3; }
}

/* 定位编辑面板 - 修复：在手机框架�?*/
.loc-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #eff3f6;
    z-index: 200;
    transform: translateY(100%);
    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    pointer-events: none; /* 🔧 未打开时不接收点击事件 */
}

.loc-panel.open {
    transform: translateY(0);
    pointer-events: auto; /* 🔧 打开时恢复点击事�?*/
}

.loc-header {
    padding: 20px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
    z-index: 10;
}

.loc-back {
    font-size: 24px;
    color: #546e7a;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loc-header-title {
    font-size: 16px;
    font-weight: 700;
    color: #546e7a;
}

.btn-send-loc {
    background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(142, 197, 252, 0.4);
    transition: 0.2s;
}

.btn-send-loc:active {
    transform: scale(0.95);
}

.large-map {
    height: 35vh;
    box-shadow: inset 0 -15px 20px rgba(255,255,255,0.9);
}

.large-pin {
    width: 44px;
    height: 44px;
}

.large-pin::after {
    width: 14px;
    height: 14px;
}

.loc-form-view {
    flex: 1;
    padding: 24px 20px;
    overflow-y: auto;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.9));
    z-index: 2;
}

.form-title {
    font-size: 13px;
    font-weight: 600;
    color: #546e7a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.glass-input-box {
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(142, 197, 252, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.glass-input {
    width: 100%;
    border: none;
    background: rgba(245, 247, 250, 0.6);
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #546e7a;
    transition: 0.2s;
    border: 1px solid transparent;
}

.glass-input:focus {
    background: #fff;
    border-color: #8ec5fc;
    box-shadow: 0 2px 8px rgba(142, 197, 252, 0.15);
    outline: none;
}

.glass-input::placeholder {
    color: #b0bec5;
    font-weight: 400;
    font-size: 13px;
}

/* 🔧 定位面板输入框样式覆盖（修复�?index-styles.css �?!important 覆盖的问题） */
.loc-panel .glass-input {
    background: rgba(245, 247, 250, 0.6) !important;
    border: 1px solid transparent !important;
    color: #546e7a !important;
}

.loc-panel .glass-input:focus {
    background: #fff !important;
    border-color: #8ec5fc !important;
}

.loc-panel .glass-input::placeholder {
    color: #b0bec5 !important;
    font-weight: 400;
    font-size: 13px;
}

/* 🔧 定位面板 - 快捷锚点保存按钮 */
.btn-save-tag {
    width: 100%;
    padding: 14px;
    background: rgba(142, 197, 252, 0.15);
    color: #0d47a1;
    border: 1px dashed rgba(142, 197, 252, 0.5);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-save-tag:active {
    background: rgba(142, 197, 252, 0.25);
    transform: scale(0.98);
}

/* 🔧 定位面板 - 标签管理区头�?*/
.tags-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.btn-manage {
    font-size: 12px;
    color: #8ec5fc;
    background: #fff;
    padding: 6px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    border: 1px solid rgba(142, 197, 252, 0.3);
    transition: 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.btn-manage:active {
    transform: scale(0.95);
}

/* 🔧 定位面板 - 快捷标签容器 */
.quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 30px;
}

.q-tag-wrap {
    position: relative;
    display: inline-block;
}

.q-tag {
    padding: 10px 16px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: #546e7a;
    border: 1px solid rgba(200, 215, 225, 0.6);
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 6px;
}

.q-tag:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
    color: #fff;
    border-color: transparent;
}

.tag-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e57373;
    color: #fff;
    font-size: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(229, 115, 115, 0.4);
    border: 2px solid #fff;
    z-index: 5;
}

.manage-mode .tag-delete-btn {
    display: flex;
    animation: popIn 0.2s ease-out;
}

.manage-mode .q-tag {
    pointer-events: none;
    opacity: 0.8;
    animation: shake 0.3s infinite alternate;
}

@keyframes popIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0% { transform: rotate(-1deg); }
    100% { transform: rotate(1deg); }
}

/* ============================================================ */
/* 🧭 浮光位置 2.0 · 锚点库面板 .fg-loc-panel —— 兜底样式      */
/*    结构可见、能跑；视觉留给美化（改下面的类或在 :root 覆盖变量）*/
/*    遵守：Echo 无毛玻璃 + 夜间走 body.night 覆盖变量           */
/* ============================================================ */
:root {
    /* 🪵 灰木拿铁色板（位置功能 2.0）*/
    --fg-bg-out: #EBE8E3;          /* 聊天背景 */
    --fg-panel-bg: #F4F2ED;        /* 面板底：燕麦米 */
    --fg-card-bg: #FFFFFF;         /* 票券底：纯白 */
    --fg-text: #36332E;            /* 墨黑/深咖木 */
    --fg-text-sub: #8C877D;        /* 枯木灰 */
    --fg-text-light: #BDB8B0;      /* 极浅灰 */
    --fg-border: #E3E0D8;          /* 卡片外框 */
    --fg-border-dash: #DCD8D0;     /* 票券压痕虚线 */
    --fg-radius: 12px;
    /* 地图 */
    --fg-map-grid: rgba(220, 216, 208, 0.6);
    --fg-map-ring: rgba(189, 184, 176, 0.4);
    --fg-map-origin: #5C7594;
    --fg-map-accent: #C2A77D;      /* 大头针 / 收藏金 */
    --fg-map-poi: #8C877D;
    --fg-shadow-card: 0 8px 24px rgba(54, 51, 46, 0.06);
    --fg-shadow-panel: 0 -10px 40px rgba(0,0,0,0.12);
    /* 危险区警示色（场所固有，财力不锁卡）*/
    --fg-danger: #B85C5C;
    /* 阶层徽标五档 */
    --fg-lv0: #B85C5C; --fg-lv1: #6B7A6F; --fg-lv2: #5C7594; --fg-lv3: #8A7394; --fg-lv4: #C2A77D;
}

/* 面板本体：底部抽屉，圆角顶 + 噪点纸纹 */
.fg-loc-panel {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 92%;
    background-color: var(--fg-panel-bg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    border-radius: 24px 24px 0 0;
    box-shadow: var(--fg-shadow-panel);
    z-index: 200;
    transform: translateY(100%);
    /* 关闭时彻底隐藏：只靠 translateY 在 #app-echo(overflow:visible) 里会把
       顶栏顶边露在屏幕底部(iOS 安全区/dvh 误差)，还能抢触摸 → 页面像被往上顶、
       返回点不动。visibility 在滑出动画结束后再收，滑入时立即可见。 */
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.5s;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.fg-loc-panel.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.panel-handle { flex: 0 0 auto; width: 40px; height: 4px; background-color: var(--fg-text-light); border-radius: 4px; margin: 12px auto 0; opacity: 0.5; }

/* 顶栏 */
.fg-loc-header {
    flex: 0 0 auto;
    padding: 14px 20px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fg-loc-back { font-size: 24px; color: var(--fg-text-sub); cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.fg-loc-back:active { transform: scale(0.85); color: var(--fg-text); }
.fg-loc-title { font-size: 19px; font-weight: 700; color: var(--fg-text); flex: 1; }
.fg-loc-origin {
    flex: 0 0 auto;
    font-size: 12px; font-weight: 600; color: var(--fg-map-origin);
    background: var(--fg-card-bg); border: 1px dashed var(--fg-border-dash);
    padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; gap: 4px;
    max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fg-loc-origin:active { transform: scale(0.92); background: var(--fg-panel-bg); }

/* 面板内大地图视口 */
.fg-loc-map {
    flex: 0 0 auto;
    height: 150px; margin: 0 20px 14px;
    border-radius: var(--fg-radius);
    border: 1px solid var(--fg-border);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
    overflow: hidden;
    position: relative;
}

/* 回到当前位置（高德式定位小标，右下角浮层）*/
.fg-map-locate {
    position: absolute; right: 10px; bottom: 10px; z-index: 5;
    width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--fg-border); border-radius: 50%;
    background: var(--fg-card-bg); color: var(--fg-text);
    font-size: 16px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform 0.15s, color 0.2s;
}
.fg-map-locate:active { transform: scale(0.9); color: var(--fg-text-sub); }

/* 搜索栏 */
.fg-loc-search { flex: 0 0 auto; position: relative; padding: 0 20px 12px; }
.fg-search-icon { position: absolute; left: 34px; top: calc(50% - 6px); transform: translateY(-50%); color: var(--fg-text-sub); font-size: 16px; z-index: 1; }
.fg-search-input { width: 100%; box-sizing: border-box; padding: 12px 14px 12px 36px; border: 1px solid var(--fg-border); border-radius: 8px; font-size: 14px; color: var(--fg-text); background: var(--fg-card-bg); outline: none; transition: 0.3s; }
.fg-search-input:focus { border-color: var(--fg-text-sub); }
.fg-search-input::placeholder { color: var(--fg-text-sub); }

/* 三 Tab（下划线式）*/
.fg-loc-tabs { flex: 0 0 auto; display: flex; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--fg-border); }
.fg-tab { font-size: 14px; font-weight: 600; color: var(--fg-text-sub); padding-bottom: 10px; cursor: pointer; position: relative; transition: 0.2s; }
.fg-tab:active { transform: scale(0.95); }
.fg-tab.active { color: var(--fg-text); }
.fg-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--fg-text); border-radius: 3px 3px 0 0; }

/* 筛区 chip */
.fg-loc-filters { flex: 0 0 auto; display: flex; gap: 8px; padding: 14px 20px; overflow-x: auto; }
.fg-loc-typefilters { padding-top: 0; }
.fg-loc-filters::-webkit-scrollbar { display: none; }
.fg-chip { flex: 0 0 auto; padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--fg-text-sub); background: transparent; border: 1px solid var(--fg-border); border-radius: 6px; cursor: pointer; white-space: nowrap; transition: 0.2s; }
.fg-chip:active { transform: scale(0.9); }
.fg-chip.active { color: var(--fg-card-bg); background: var(--fg-text); border-color: var(--fg-text); }

/* 列表区 */
.fg-loc-list { flex: 1; overflow-y: auto; padding: 4px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.fg-loc-empty { text-align: center; color: var(--fg-text-sub); font-size: 13px; padding: 40px 0; }

/* 票券式 POI 卡（网格：主体 | 侧栏 / 前往）*/
.fg-poi-card {
    position: relative;
    display: grid; grid-template-columns: 1fr 90px; grid-template-areas: "main side" "main go";
    background-color: var(--fg-card-bg); border: 1px solid var(--fg-border); border-radius: var(--fg-radius);
    box-shadow: var(--fg-shadow-card); transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fg-poi-card:active { transform: scale(0.97); }
.fg-poi-fav { grid-area: side; position: absolute; top: 12px; right: 12px; font-size: 16px; color: var(--fg-text-light); cursor: pointer; z-index: 10; transition: 0.2s; }
.fg-poi-fav:active { transform: scale(1.4); }
.fg-poi-fav.on { color: var(--fg-map-accent); }
.fg-poi-main { grid-area: main; padding: 16px; border-right: 1px dashed var(--fg-border-dash); display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; min-width: 0; }
.fg-poi-name { font-size: 16px; font-weight: 700; color: var(--fg-text); }
.fg-poi-meta { font-size: 11px; color: var(--fg-text-sub); }
.fg-poi-price { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--fg-text); background: var(--fg-panel-bg); padding: 4px 8px; border-radius: 4px; margin-top: 2px; }
.fg-poi-side { grid-area: side; padding: 16px 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.fg-poi-level { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; border: 1px solid; }
.fg-poi-dist { font-size: 14px; color: var(--fg-text); font-weight: 700; }
.fg-poi-eta { font-size: 10px; color: var(--fg-text-sub); }
.fg-poi-badge { font-size: 10px; margin-top: 2px; padding: 1px 6px; border-radius: 5px; }
.fg-poi-go { grid-area: go; margin: 0 12px 16px; background: var(--fg-text); color: var(--fg-card-bg); font-size: 12px; font-weight: 600; text-align: center; padding: 7px 0; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.fg-poi-go:active { transform: scale(0.9); filter: brightness(1.3); }

/* 阶层徽标五档配色（描边式）*/
.fg-poi-level.lv-0 { color: var(--fg-lv0); border-color: var(--fg-lv0); }
.fg-poi-level.lv-1 { color: var(--fg-lv1); border-color: var(--fg-lv1); }
.fg-poi-level.lv-2 { color: var(--fg-lv2); border-color: var(--fg-lv2); }
.fg-poi-level.lv-3 { color: var(--fg-lv3); border-color: var(--fg-lv3); }
.fg-poi-level.lv-4 { color: var(--fg-lv4); border-color: var(--fg-lv4); }

/* 危险区警示态（场所固有，与财力无关）；财力身份只做 AI 人设约束，不锁卡 */
.fg-poi-card.danger { border-color: var(--fg-danger); }
.fg-poi-card.danger .fg-poi-main { border-right-color: rgba(184, 92, 92, 0.3); }
.fg-poi-card.danger .fg-poi-name { color: var(--fg-danger); }
.fg-poi-card.danger .fg-poi-go { background: var(--fg-danger); }
.fg-poi-card.danger .fg-poi-badge { background: var(--fg-danger); color: #fff; }

/* 手填表单（custom Tab，默认隐藏，.show 时显示）*/
.fg-custom-form { display: none; flex-direction: column; gap: 12px; padding: 20px; }
.fg-custom-form.show { display: flex; }
.fg-c-input { background: var(--fg-card-bg); border: 1px solid var(--fg-border); padding: 14px 16px; border-radius: 8px; font-size: 14px; color: var(--fg-text); outline: none; transition: 0.3s; }
.fg-c-input:focus { border-color: var(--fg-text-sub); }
.fg-c-input::placeholder { color: var(--fg-text-sub); }
.fg-c-send { margin-top: 4px; padding: 14px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--fg-card-bg); background: var(--fg-text); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.fg-c-send:active { transform: scale(0.98); }
/* 建点表单：选区说明 / 选区 chip 行 / 底部提示（沿用面板 token，非原生外观）*/
.fg-c-label { font-size: 12px; font-weight: 600; color: var(--fg-text); margin-top: 2px; }
.fg-c-dist { padding: 0; flex-wrap: wrap; overflow: visible; gap: 8px; }
.fg-c-hint { font-size: 11px; line-height: 1.5; color: var(--fg-text-sub); margin-top: -2px; }
/* 自建点：名字旁「我的」小标 + 卡片删除键（与收藏星同区，不抢内容位）*/
.fg-poi-custom-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; color: var(--fg-map-accent); background: var(--fg-panel-bg); border: 1px solid var(--fg-border); padding: 1px 6px; border-radius: 5px; vertical-align: middle; }
.fg-poi-del { position: absolute; top: 12px; right: 38px; font-size: 15px; color: var(--fg-text-light); cursor: pointer; z-index: 10; transition: 0.2s; }
.fg-poi-del:active { transform: scale(1.3); color: var(--fg-danger); }

/* ===== 浮光坐标 chip 选择器（千面/星遇/众生共用；阶层在上→匹配住宅）===== */
.fg-pick {
    --fgp-text: #36332E; --fgp-sub: #8C877D; --fgp-card: #FFFFFF;
    --fgp-border: #E3E0D8; --fgp-on-bg: #36332E; --fgp-on-text: #FFFFFF;
    --fgp-accent: #C2A77D;
    display: flex; flex-direction: column; gap: 10px; padding: 4px 0;
}
.fg-pick-label { font-size: 12px; font-weight: 600; color: var(--fgp-text); display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.fg-pick-hint { font-size: 10px; font-weight: 400; color: var(--fgp-sub); }
.fg-pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-pick-homes { gap: 8px; }
.fg-pick-empty { font-size: 12px; color: var(--fgp-sub); padding: 6px 0; }
.fg-pick-chip {
    flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--fgp-border); border-radius: 10px;
    background: var(--fgp-card); color: var(--fgp-text); font-size: 12px; cursor: pointer;
    transition: 0.18s cubic-bezier(0.2,0.8,0.2,1); display: flex; flex-direction: column; gap: 2px;
}
.fg-pick-chip.wealth { font-weight: 600; }
.fg-pick-chip:active { transform: scale(0.94); }
.fg-pick-chip.on { background: var(--fgp-on-bg); color: var(--fgp-on-text); border-color: var(--fgp-on-bg); }
.fg-pick-chip.home.on { background: var(--fgp-accent); border-color: var(--fgp-accent); color: #fff; }
.fg-pick-chip-name { font-size: 13px; font-weight: 600; }
.fg-pick-chip-sub { font-size: 10px; opacity: 0.7; }
/* 自建点：触发 chip(虚线描边，与实心官方 chip 区分) / 「我的」小标 / 删除角标 */
.fg-pick-chip.cadd { flex-direction: row; align-items: center; gap: 4px; border-style: dashed; color: var(--fgp-sub); font-size: 12px; font-weight: 600; justify-content: center; }
.fg-pick-chip.cadd:active { transform: scale(0.94); }
.fg-pick-chip.custom { position: relative; }
.fg-pick-cmine { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 600; padding: 0 5px; border-radius: 4px; background: var(--fgp-accent); color: #fff; vertical-align: middle; }
.fg-pick-chip.on .fg-pick-cmine { background: rgba(255,255,255,0.35); }
.fg-pick-cdel { position: absolute; top: 3px; right: 5px; font-size: 10px; line-height: 1; color: var(--fgp-sub); cursor: pointer; padding: 2px; }
.fg-pick-chip.on .fg-pick-cdel { color: var(--fgp-on-text); opacity: 0.7; }
.fg-pick-cdel:active { transform: scale(1.3); }
/* 自建迷你表单：默认收起，.show 展开；输入/选区/按钮全走 --fgp-* token，无原生外观 */
.fg-pick-cform { display: none; flex-direction: column; gap: 8px; padding: 10px; margin-top: 2px; border: 1px dashed var(--fgp-border); border-radius: 10px; background: var(--fgp-card); }
.fg-pick-cform.show { display: flex; }
.fg-pick-cinput { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--fgp-border); border-radius: 8px; background: var(--fgp-card); color: var(--fgp-text); font-size: 13px; outline: none; transition: 0.18s; }
.fg-pick-cinput:focus { border-color: var(--fgp-accent); }
.fg-pick-cinput::placeholder { color: var(--fgp-sub); }
.fg-pick-crow { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-pick-cchip { flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--fgp-border); border-radius: 8px; background: var(--fgp-card); color: var(--fgp-text); font-size: 12px; cursor: pointer; transition: 0.18s; }
.fg-pick-cchip.on { background: var(--fgp-on-bg); color: var(--fgp-on-text); border-color: var(--fgp-on-bg); }
.fg-pick-cchip:active { transform: scale(0.94); }
.fg-pick-cbtn { flex: 1; text-align: center; padding: 8px 0; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--fgp-accent); color: #fff; transition: 0.18s; }
.fg-pick-cbtn.ghost { flex: 0 0 auto; padding: 8px 16px; background: transparent; color: var(--fgp-sub); border: 1px solid var(--fgp-border); }
.fg-pick-cbtn:active { transform: scale(0.97); }
body.night .fg-pick {
    --fgp-text: #E8E4DD; --fgp-sub: #8C877D; --fgp-card: #262422;
    --fgp-border: #3A3631; --fgp-on-bg: #C2A77D; --fgp-on-text: #1E1C1A;
    --fgp-accent: #C2A77D;
}

/* 夜间模式：覆盖变量（项目铁律：不硬编码色值，纯色无毛玻璃）*/
body.night .fg-loc-panel,
body.night .fg-char-settings {
    --fg-panel-bg: #1E1C1A;
    --fg-card-bg: #262422;
    --fg-text: #EAE6DF;
    --fg-text-sub: #9E9991;
    --fg-text-light: #5C5955;
    --fg-border: #363330;
    --fg-border-dash: #4A4642;
    --fg-map-grid: rgba(74, 70, 66, 0.6);
    --fg-map-ring: rgba(92, 89, 85, 0.4);
    --fg-map-origin: #7A9BC2;
    --fg-map-poi: #9E9991;
    --fg-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4);
    --fg-shadow-panel: 0 -10px 40px rgba(0,0,0,0.5);
}

/* ==================== 🖼️ 发送图片面板样式 ==================== */
/* 图片气泡容器 */
.img-card-bubble {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* 🔧 修复：确保容器有固定占位尺寸，防止高度塌陷 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 150px;
    max-width: 100%;
}

.img-card-bubble:active {
    transform: scale(0.97);
}

/* 聊天图片本身 */
.chat-img {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    border-radius: 14px;
    /* 🔧 修复：确保图片可见且正确显示 */
    display: block;
    opacity: 1;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* bubble-image 类名也需要相同样式 */
.bubble-image {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    border-radius: 14px;
    display: block;
    opacity: 1;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* 聊天图片加载失败占位 */
.chat-img.chat-img-error {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 14px;
    color: #bbb;
    font-size: 12px;
}
.chat-img.chat-img-error::after {
    content: '图片好像迷路了 🥺';
}

/* ==================== Image Panel - Morandi solid (2026 redesign) ==================== */
.image-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.image-panel-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.image-panel {
    --border-solid: var(--border-color, #DFDBD6);
    --accent-color: var(--text-main, #3A3836);
    --preview-gradient: linear-gradient(135deg, hsl(355, 35%, 75%), hsl(15, 30%, 70%));

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78vh;
    background: var(--bg-base, #F4F3F0);
    color: var(--text-main, #3A3836);
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: none;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    border-top: 1px solid var(--border-solid);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}
.image-panel.open {
    display: flex;
    transform: translateY(0);
}

/* Header */
.image-panel .panel-header {
    padding: 20px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-base, #F4F3F0);
    z-index: 10;
    flex-shrink: 0;
}
.image-panel .btn-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-solid);
    background: var(--card-bg, #fff);
    color: var(--text-main, #3A3836);
    font-size: 22px;
    cursor: pointer;
    transition: 0.2s;
    flex-shrink: 0;
}
.image-panel .btn-back:active {
    transform: scale(0.95);
    background: var(--panel-bg, #EBE8E3);
}
.image-panel .header-titles {
    text-align: center;
    flex: 1;
    margin: 0 8px;
    overflow: hidden;
}
.image-panel .header-titles .sub {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-sub, #96918C);
    margin-bottom: 2px;
}
.image-panel .header-titles .main {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: var(--text-main, #3A3836);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.image-panel .btn-send-image {
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--accent-color);
    color: var(--bg-base, #F4F3F0);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: 0.2s;
    flex-shrink: 0;
    box-shadow: none;
}
.image-panel .btn-send-image:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* Tabs */
.image-panel .tabs-container {
    padding: 6px 20px 14px;
    background: var(--bg-base, #F4F3F0);
    flex-shrink: 0;
}
.image-panel .method-tabs {
    display: flex;
    width: 100%;
    background: var(--panel-bg, #EBE8E3);
    border-radius: 14px;
    padding: 4px;
    border: 1px solid var(--border-solid);
    gap: 0;
    margin: 0;
    box-sizing: border-box;
}
.image-panel .m-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub, #96918C);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    background: transparent;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
}
.image-panel .m-tab.active {
    background: var(--card-bg, #fff);
    color: var(--text-main, #3A3836);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border-color: var(--border-solid);
}

/* Body */
.image-panel .panel-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--panel-bg, #EBE8E3);
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.image-panel .panel-body::-webkit-scrollbar {
    display: none;
}

.image-panel .tab-content {
    display: none;
    animation: imgPanelFadeIn 0.3s ease;
}
.image-panel .tab-content.show {
    display: block;
}
@keyframes imgPanelFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tab 1: AI Gallery */
.image-panel .gallery-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}
.image-panel .gallery-meta .count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub, #96918C);
}
.image-panel .aigallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-bottom: 20px;
}
.image-panel .aigallery-item {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-solid);
    border-radius: 12px;
    padding: 6px 6px 28px 6px;
    position: relative;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.image-panel .aigallery-item:active {
    transform: scale(0.97);
}
.image-panel .aigallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-solid);
    pointer-events: none;
    display: block;
}
.image-panel .item-timestamp {
    position: absolute;
    bottom: 8px;
    left: 10px;
    right: 10px;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 10px;
    font-style: italic;
    color: var(--text-sub, #96918C);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.image-panel .aigallery-empty {
    text-align: center;
    color: var(--text-sub, #96918C);
    padding: 60px 0;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-line;
}

/* 🔒 锁脸状态条 */
.image-panel .gallery-lockface {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -8px 0 14px 0;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-sub, #96918C);
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-solid);
}
.image-panel .gallery-lockface.locked {
    color: var(--accent-color, #3A3836);
    border-color: var(--accent-color, #3A3836);
}
.image-panel .gallery-lockface i {
    font-size: 14px;
}
/* 📤 上传照片锁脸按钮：跟状态条同款卡片风 */
.image-panel .gallery-lockface-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: -6px 0 14px 0;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    color: var(--accent-color, #3A3836);
    background: var(--card-bg, #fff);
    border: 1px dashed var(--border-solid);
    transition: border-color 0.18s, color 0.18s;
}
.image-panel .gallery-lockface-upload i {
    font-size: 14px;
}
.image-panel .gallery-lockface-upload:active {
    border-color: var(--accent-color, #3A3836);
}

/* 🔒 每张图右上角锁标 */
.image-panel .aigallery-lock {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
    transition: 0.15s;
}
.image-panel .aigallery-lock:active {
    transform: scale(0.88);
}
.image-panel .aigallery-lock.locked {
    background: var(--accent-color, #3A3836);
}
/* 被锁定那张图：高亮描边 */
.image-panel .aigallery-item.locked {
    border-color: var(--accent-color, #3A3836);
    box-shadow: 0 0 0 2px var(--accent-color, #3A3836);
}

/* 🔓 状态条上的「解锁」按钮（已锁脸时显示，解决上传图锁脸无处可解）*/
.image-panel .gallery-lockface-unlock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    background: var(--accent-color, #3A3836);
    border: none;
    transition: 0.15s;
    flex-shrink: 0;
}
.image-panel .gallery-lockface-unlock i { font-size: 13px; }
.image-panel .gallery-lockface-unlock:active { transform: scale(0.92); }

/* 🗑️ 管理模式：每张图右上角删除按钮 */
.image-panel .aigallery-del {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    color: #fff;
    background: rgba(220, 53, 69, 0.92);
    z-index: 3;
    transition: 0.15s;
}
.image-panel .aigallery-del:active { transform: scale(0.88); }
/* 管理模式下：图片轻微压暗，提示处于编辑态 */
.image-panel .aigallery-item.managing img { filter: brightness(0.82); }

/* 🔘 右上角按钮处于「管理中（完成）」态：描边高亮区分（用 inset 阴影描边，不占布局避免抖动）*/
.image-panel .btn-send-image.managing {
    background: var(--card-bg, #fff);
    color: var(--accent-color, #3A3836);
    box-shadow: inset 0 0 0 1px var(--accent-color, #3A3836);
}

/* Tab 2: Local upload */
.image-panel .solid-input-box {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-solid);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.image-panel .upload-area {
    border: 1px dashed var(--text-sub, #96918C);
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--panel-bg, #EBE8E3);
    transition: 0.2s;
    overflow: hidden;
    position: relative;
}
.image-panel .upload-area:active {
    background: var(--border-solid);
}
.image-panel .upload-area i {
    font-size: 32px;
    color: var(--text-sub, #96918C);
    margin-bottom: 8px;
}
.image-panel .upload-area span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, #3A3836);
}
.image-panel .upload-area img.preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.image-panel #localFileInput {
    display: none;
}
.image-panel .upload-hint {
    font-size: 11px;
    color: var(--text-sub, #96918C);
    text-align: center;
    margin: 0;
    line-height: 1.6;
}

/* Tab 3: URL */
.image-panel .url-input-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
}
.image-panel .solid-input {
    flex: 1;
    background: var(--panel-bg, #EBE8E3);
    border: 1px solid var(--border-solid);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-main, #3A3836);
    outline: none;
    transition: 0.2s;
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}
.image-panel .solid-input::placeholder {
    color: var(--text-sub, #96918C);
}
.image-panel .solid-input:focus {
    border-color: var(--accent-color);
}
.image-panel .btn-preview {
    padding: 0 16px;
    border-radius: 10px;
    background: var(--accent-color);
    color: var(--bg-base, #F4F3F0);
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.2s;
}
.image-panel .btn-preview:active {
    transform: scale(0.95);
    opacity: 0.9;
}
.image-panel .url-preview-area {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: var(--panel-bg, #EBE8E3);
    border: 1px dashed var(--border-solid);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
    position: relative;
    color: var(--text-sub, #96918C);
}
.image-panel .url-preview-area i {
    font-size: 32px;
}
.image-panel .url-preview-area span {
    font-size: 12px;
    font-weight: 500;
}
.image-panel .url-preview-area img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.image-panel .url-preview-area img[src]:not([src=""]) {
    display: block;
}
.image-panel .url-preview-area.has-image i,
.image-panel .url-preview-area.has-image span {
    display: none;
}

/* Tab 4: Text-to-image */
.image-panel .text-preview-shell {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-solid);
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 16px;
}
.image-panel .text-preview-image {
    width: 100%;
    height: 140px;
    border-radius: 8px;
    background: var(--preview-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    overflow: hidden;
    transition: background 0.2s;
}
.image-panel #liveTextPreview {
    font-family: 'Playfair Display', 'Georgia', serif;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
    white-space: pre-wrap;
    width: 100%;
    transition: font-size 0.2s;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.image-panel .solid-textarea {
    width: 100%;
    height: 80px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-solid);
    border-radius: 16px;
    padding: 16px;
    font-size: 13px;
    color: var(--text-main, #3A3836);
    outline: none;
    resize: none;
    font-family: inherit;
    margin-bottom: 20px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.image-panel .solid-textarea::placeholder {
    color: var(--text-sub, #96918C);
}
.image-panel .solid-textarea:focus {
    border-color: var(--accent-color);
}

/* Advanced controls (no card wrap, design-spec aligned) */
.image-panel .advanced-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}
.image-panel .control-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.image-panel .control-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-sub, #96918C);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.image-panel .control-label i {
    font-size: 13px;
}
.image-panel .slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.image-panel .slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border-solid);
    border-radius: 3px;
    outline: none;
    margin: 0;
}
.image-panel .hue-slider {
    background: linear-gradient(to right,
        hsl(0, 30%, 75%),
        hsl(60, 30%, 70%),
        hsl(120, 25%, 70%),
        hsl(180, 30%, 70%),
        hsl(240, 30%, 75%),
        hsl(300, 25%, 75%),
        hsl(360, 30%, 75%));
}
.image-panel .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--card-bg, #fff);
    border: 2px solid var(--text-main, #3A3836);
    cursor: pointer;
}
.image-panel .slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--card-bg, #fff);
    border: 2px solid var(--text-main, #3A3836);
    cursor: pointer;
}
.image-panel .hue-slider::-webkit-slider-thumb {
    border: 2px solid var(--card-bg, #fff);
    box-shadow: 0 0 0 2px var(--text-main, #3A3836);
}
.image-panel .hue-slider::-moz-range-thumb {
    border: 2px solid var(--card-bg, #fff);
    box-shadow: 0 0 0 2px var(--text-main, #3A3836);
}
.image-panel .slider-value {
    font-size: 12px;
    color: var(--text-main, #3A3836);
    font-weight: 600;
    width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Segmented align buttons (one shared frame) */
.image-panel .align-buttons {
    display: flex;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-solid);
    border-radius: 12px;
    padding: 4px;
    gap: 0;
}
.image-panel .align-btn {
    flex: 1;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-sub, #96918C);
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s;
    background: transparent;
    border: 1px solid transparent;
}
.image-panel .align-btn:active {
    transform: scale(0.96);
}
.image-panel .align-btn.active {
    background: var(--panel-bg, #EBE8E3);
    color: var(--text-main, #3A3836);
    border-color: var(--border-solid);
}

/* Dark-mode token overrides scoped to image-panel */
body.dark-mode .image-panel,
body.night .image-panel {
    --border-solid: var(--border-color, #302E2C);
    --preview-gradient: linear-gradient(135deg, hsl(355, 20%, 35%), hsl(15, 20%, 30%));
}
body.dark-mode .image-panel .hue-slider,
body.night .image-panel .hue-slider {
    background: linear-gradient(to right,
        hsl(0, 20%, 35%),
        hsl(60, 20%, 35%),
        hsl(120, 20%, 35%),
        hsl(180, 20%, 35%),
        hsl(240, 20%, 35%),
        hsl(300, 20%, 35%),
        hsl(360, 20%, 35%));
}
body.dark-mode .image-panel #liveTextPreview,
body.night .image-panel #liveTextPreview {
    color: #E8E6E1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}




/* ════════════════════════════════════════════════════════════════════
   🌹 剧情卡片样式 - 10张全套 (2026新版)
   ════════════════════════════════════════════════════════════════════ */

/* 基础容器 */
.scenario-card-row { padding: 8px 16px; }
.scenario-card-row .scenario-card { display: block !important; width: 100% !important; max-width: 305px; margin: 0 auto !important; }

/* ==============================================1. 餐厅卡—黑底+香槟金 ============================================== */
.card-restaurant {
    max-width: 280px;
    width: 280px;
    background: linear-gradient(158deg, #1c1814, #0e0c0b, #161210);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(198,163,112,0.18);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    position: relative;
    font-family: 'Noto Serif SC', serif;
}

.card-restaurant::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c6a370, #e8d5b0, #c6a370, transparent);
}

.rst-header { padding: 14px 14px 10px; text-align: center; border-bottom: 1px solid rgba(198,163,112,0.1); }
.rst-tag { font-size: 7px; color: rgba(198,163,112,0.4); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 6px; }
.rst-icon { font-size: 14px; margin-bottom: 4px; filter: drop-shadow(0 0 6px rgba(198,163,112,0.3)); }
.rst-name-en { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 300; font-style: italic; color: #e8d5b0; letter-spacing: 1px; margin-bottom: 1px; }
.rst-name-cn { font-size: 10px; color: #c6a370; letter-spacing: 5px; font-weight: 700; }
.rst-sub { font-size: 7px; color: rgba(198,163,112,0.28); margin-top: 4px; letter-spacing: 1px; }

.rst-info { padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-bottom: 1px solid rgba(198,163,112,0.08); }
.rst-info-item { display: flex; flex-direction: column; gap: 1px; }
.rst-info-item.wide { grid-column: 1 / -1; }
.rst-info-k { font-size: 7px; color: rgba(198,163,112,0.3); letter-spacing: 1.5px; display: flex; align-items: center; gap: 3px; }
.rst-info-k::before { content: ''; width: 2px; height: 2px; background: #c6a370; border-radius: 50%; }
.rst-info-v { font-size: 10px; color: #e8d5b0; font-weight: 600; padding-left: 5px; }
.rst-info-v.gold { color: #c6a370; }
.rst-info-note { font-size: 7px; color: rgba(198,163,112,0.22); padding-left: 5px; margin-top: 1px; }

.rst-menu { padding: 10px 14px; }
.rst-menu-title { font-size: 7px; color: rgba(198,163,112,0.3); letter-spacing: 3px; margin-bottom: 8px; }
.rst-menu-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px dotted rgba(198,163,112,0.06); }
.rst-menu-item:last-child { border-bottom: none; }
.rst-dish-name { font-size: 10px; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; }
.rst-dish-en { font-family: 'Cormorant Garamond', serif; font-size: 8px; color: rgba(198,163,112,0.22); font-style: italic; margin-top: 1px; }
.rst-dish-tag { font-size: 7px; color: rgba(198,163,112,0.4); border: 1px solid rgba(198,163,112,0.12); padding: 1px 5px; border-radius: 2px; flex-shrink: 0; margin-left: 6px; }

.rst-wine { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(198,163,112,0.08); display: flex; align-items: center; gap: 6px; }
.rst-wine-icon { font-size: 12px; flex-shrink: 0; }
.rst-wine-name { font-size: 9px; color: rgba(198,163,112,0.6); font-weight: 600; }
.rst-wine-note { font-size: 7px; color: rgba(198,163,112,0.22); margin-top: 1px; }

.rst-status { padding: 6px 14px 10px; display: flex; align-items: center; gap: 4px; border-top: 1px solid rgba(198,163,112,0.08); }
.rst-dot { width: 3px; height: 3px; border-radius: 50%; background: #4a9e6d; box-shadow: 0 0 5px rgba(74,158,109,0.5); animation: rst-pulse 2s infinite; }
.rst-status-txt { font-size: 7px; color: rgba(198,163,112,0.25); letter-spacing: 1px; }
.rst-bottom-line { height: 1.5px; background: linear-gradient(90deg, transparent, rgba(198,163,112,0.4), transparent); }

/* ============================================== 1.5 社交动态卡 — 黑底+香槟金（星汇风格） ============================================== */
.card-social-post {
    max-width: 280px;
    width: 280px;
    background: linear-gradient(158deg, #111010, #0a0908, #131110);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(198,163,112,0.2);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    position: relative;
    font-family: 'Noto Serif SC', serif;
}

.card-social-post::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c6a370, #e8d5b0, #c6a370, transparent);
}

.sp-header {
    padding: 14px 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(198,163,112,0.1);
}

.sp-platform-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #c6a370, #e8d5b0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sp-account-wrap {
    flex: 1;
    min-width: 0;
}

.sp-account-name {
    font-size: 13px;
    font-weight: 700;
    color: #e8d5b0;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-v-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c6a370, #e8d5b0);
    font-size: 8px;
    font-weight: 900;
    color: #0a0908;
    flex-shrink: 0;
    font-style: normal;
}

.sp-platform-label {
    font-size: 9px;
    color: rgba(198,163,112,0.4);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 1px;
}

.sp-timestamp {
    font-size: 9px;
    color: rgba(198,163,112,0.3);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.sp-content {
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(198,163,112,0.07);
    white-space: pre-wrap;
    word-break: break-word;
}

.sp-note {
    padding: 8px 14px;
    font-size: 10px;
    color: rgba(198,163,112,0.45);
    font-style: italic;
    border-bottom: 1px solid rgba(198,163,112,0.07);
    line-height: 1.5;
}

.sp-status-bar {
    padding: 8px 14px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c6a370;
    box-shadow: 0 0 6px rgba(198,163,112,0.6);
    animation: rst-pulse 2s infinite;
    flex-shrink: 0;
}

.sp-status-txt {
    font-size: 9px;
    color: rgba(198,163,112,0.5);
    letter-spacing: 1px;
    flex: 1;
}

.sp-bottom-line {
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(198,163,112,0.35), transparent);
}

/* ============================================== 2. 打车卡 — 黑底+铂银 ============================================== */
.card-car {
    max-width: 280px;
    width: 280px;
    background: #0d0d0d;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #252525;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    position: relative;
    font-family: 'Noto Serif SC', serif;
}

.card-car::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #999, #ccc, #999, transparent);
}

.car-brand { padding: 18px 16px 14px; text-align: center; border-bottom: 1px solid #1e1e1e; position: relative; }
.car-brand::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 40px; height: 1px; background: #666; }
.car-brand-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #fff; letter-spacing: 4px; }
.car-brand-sub { font-family: 'Cormorant Garamond', serif; font-size: 9px; color: #888; letter-spacing: 5px; text-transform: uppercase; margin-top: 2px; }

.car-showcase { padding: 16px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #1e1e1e; }
.car-emblem { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #333, #1a1a1a); border: 1px solid #444; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 3px #0d0d0d, 0 0 0 4px #333; }
.car-emblem-letter { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: #e0e0e0; font-style: italic; }
.car-text { flex: 1; }
.car-model { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 1px; line-height: 1.2; }
.car-model span { font-weight: 300; color: #aaa; }
.car-details { margin-top: 5px; display: flex; gap: 8px; align-items: center; }
.car-detail-item { font-size: 9px; color: #999; }
.car-detail-dot { width: 3px; height: 3px; background: #666; border-radius: 50%; }
.car-plate { margin-top: 6px; font-family: 'Cormorant Garamond', serif; font-size: 11px; font-weight: 600; color: #bbb; letter-spacing: 3px; }

.car-route { padding: 16px; border-bottom: 1px solid #1e1e1e; }
.car-route-flow { display: flex; gap: 12px; }
.car-route-rail { display: flex; flex-direction: column; align-items: center; padding: 3px 0; }
.car-rail-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.car-rail-dot.start { background: #0d0d0d; border: 2px solid #aaa; }
.car-rail-dot.end { background: #d0d0d0; border: 2px solid #d0d0d0; box-shadow: 0 0 6px rgba(208,208,208,0.3); }
.car-rail-line { flex: 1; width: 1px; min-height: 28px; background: linear-gradient(to bottom, #888, #333); margin: 4px 0; }
.car-route-stops { flex: 1; }
.car-stop { margin-bottom: 16px; position: relative; }
.car-stop:last-child { margin-bottom: 0; }
.car-stop-label { font-size: 8px; color: #888; letter-spacing: 3px; margin-bottom: 3px; }
.car-stop-name { font-size: 13px; color: #fff; font-weight: 700; }
.car-stop-addr { font-size: 8px; color: #777; margin-top: 2px; }
.car-eta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); text-align: right; }
.car-eta-num { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300; color: #fff; line-height: 1; }
.car-eta-unit { font-family: 'Cormorant Garamond', serif; font-size: 9px; color: #888; letter-spacing: 2px; }

.car-driver { padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.car-driver-av { width: 34px; height: 34px; border-radius: 50%; background: #1a1a1a; border: 1px solid #333; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.car-driver-info { flex: 1; }
.car-driver-name { font-size: 12px; color: #fff; font-weight: 700; }
.car-driver-meta { font-size: 8px; color: #888; margin-top: 2px; }
.car-call-btn { width: 30px; height: 30px; border-radius: 50%; background: #1a1a1a; border: 1px solid #444; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }

.car-status { padding: 10px 16px 14px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #1e1e1e; }
.car-status-left { display: flex; align-items: center; gap: 5px; }
.car-dot { width: 5px; height: 5px; border-radius: 50%; background: #4CAF50; box-shadow: 0 0 8px rgba(76,175,80,0.5); animation: car-pulse 2s infinite; }
.car-status-txt { font-size: 8px; color: #999; }
.car-status-time { font-family: 'Cormorant Garamond', serif; font-size: 11px; color: #777; letter-spacing: 1px; }

/* ============================================== 3. 外卖卡 — 暖白+焦糖棕 ============================================== */
.card-delivery {
    max-width: 280px;
    width: 280px;
    background: #faf8f5;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8e2d8;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    position: relative;
}

.card-delivery::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d4a574, #c48a5a, #d4a574);
    border-radius: 10px 10px 0 0;
}

.dlv-header { padding: 16px 16px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #efe9e0; }
.dlv-icon { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #3d2b1f, #2a1d14); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(61,43,31,0.2); }
.dlv-store-text { flex: 1; }
.dlv-store-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.dlv-store-name { font-size: 14px; font-weight: 700; color: #2a1d14; }
.dlv-tag { font-size: 7px; color: #fff; background: #c48a5a; padding: 2px 7px; border-radius: 3px; font-weight: 700; letter-spacing: 1px; }
.dlv-store-desc { font-size: 9px; color: #a89580; }

.dlv-items { padding: 12px 16px; border-bottom: 1px solid #efe9e0; }
.dlv-items-title { font-size: 8px; color: #b8a898; letter-spacing: 2px; margin-bottom: 8px; }
.dlv-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed #f0ebe4; }
.dlv-item:last-child { border-bottom: none; }
.dlv-item-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.dlv-item-emoji { font-size: 16px; width: 26px; height: 26px; background: #f5f0ea; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dlv-item-info { flex: 1; }
.dlv-item-name { font-size: 11px; color: #2a1d14; font-weight: 600; }
.dlv-item-spec { font-size: 8px; color: #b8a898; margin-top: 1px; }
.dlv-item-qty { font-size: 9px; color: #a89580; flex-shrink: 0; margin-left: 6px; }
.dlv-item-price { font-size: 11px; color: #c48a5a; font-weight: 700; flex-shrink: 0; margin-left: 8px; }

.dlv-total { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #efe9e0; background: #f7f3ee; }
.dlv-total-label { font-size: 10px; color: #8a7a6a; }
.dlv-total-price { font-size: 16px; color: #2a1d14; font-weight: 700; }
.dlv-total-price span { font-size: 11px; font-weight: 500; }

.dlv-route { padding: 12px 16px; border-bottom: 1px solid #efe9e0; }
.dlv-route-title { font-size: 8px; color: #b8a898; letter-spacing: 2px; margin-bottom: 10px; }
.dlv-route-flow { display: flex; gap: 10px; }
.dlv-route-rail { display: flex; flex-direction: column; align-items: center; padding: 3px 0; }
.dlv-d-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dlv-d-dot.from { background: #faf8f5; border: 2px solid #c48a5a; }
.dlv-d-dot.to { background: #c48a5a; border: 2px solid #c48a5a; box-shadow: 0 0 6px rgba(196,138,90,0.3); }
.dlv-d-line { flex: 1; width: 1px; min-height: 20px; background: linear-gradient(to bottom, #c48a5a, #e0d0c0); margin: 3px 0; }
.dlv-route-stops { flex: 1; }
.dlv-d-stop { margin-bottom: 12px; position: relative; }
.dlv-d-stop:last-child { margin-bottom: 0; }
.dlv-d-stop-label { font-size: 7px; color: #b8a898; letter-spacing: 2px; margin-bottom: 1px; }
.dlv-d-stop-name { font-size: 12px; color: #2a1d14; font-weight: 700; }
.dlv-d-stop-addr { font-size: 8px; color: #b8a898; margin-top: 1px; }
.dlv-d-eta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); text-align: right; }
.dlv-d-eta-num { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #c48a5a; line-height: 1; }
.dlv-d-eta-unit { font-size: 8px; color: #b8a898; letter-spacing: 1px; }

.dlv-rider { padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.dlv-rider-av { width: 32px; height: 32px; border-radius: 50%; background: #f0ebe4; border: 1px solid #e0d8ce; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.dlv-rider-info { flex: 1; }
.dlv-rider-name { font-size: 12px; color: #2a1d14; font-weight: 700; }
.dlv-rider-meta { font-size: 8px; color: #b8a898; margin-top: 1px; }
.dlv-rider-call { width: 30px; height: 30px; border-radius: 50%; background: #3d2b1f; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(61,43,31,0.2); }

.dlv-status { padding: 8px 16px 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #efe9e0; }
.dlv-status-left { display: flex; align-items: center; gap: 5px; }
.dlv-dot { width: 5px; height: 5px; border-radius: 50%; background: #c48a5a; box-shadow: 0 0 6px rgba(196,138,90,0.4); animation: dlv-pulse 2s infinite; }
.dlv-status-txt { font-size: 8px; color: #c48a5a; font-weight: 500; }
.dlv-status-time { font-size: 9px; color: #b8a898; }

/* ============================================== 4. 快递卡 — 白底+深红 ============================================== */
.card-express {
    max-width: 280px;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f0e8e0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    position: relative;
}

.card-express::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #c0392b, #e74c3c, #c0392b);
    border-radius: 10px 10px 0 0;
}

.ex-header { padding: 16px 16px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f5f0eb; }
.ex-icon { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #c0392b, #a5281b); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(192,57,43,0.2); }
.ex-header-text { flex: 1; }
.ex-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.ex-company { font-size: 14px; font-weight: 700; color: #2c2c2c; }
.ex-tag { font-size: 7px; color: #fff; background: #c0392b; padding: 2px 7px; border-radius: 3px; font-weight: 700; letter-spacing: 1px; }
.ex-number { font-family: 'DM Mono', monospace; font-size: 9px; color: #999; letter-spacing: 1px; }

.ex-timeline { padding: 14px 16px; border-bottom: 1px solid #f5f0eb; }
.ex-tl-item { display: flex; gap: 10px; position: relative; padding-bottom: 14px; }
.ex-tl-item:last-child { padding-bottom: 0; }
.ex-tl-rail { display: flex; flex-direction: column; align-items: center; width: 12px; flex-shrink: 0; }
.ex-tl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ex-tl-dot.active { background: #c0392b; box-shadow: 0 0 6px rgba(192,57,43,0.4); }
.ex-tl-dot.done { background: #ddd; }
.ex-tl-line { flex: 1; width: 1px; background: #eee; margin: 3px 0; min-height: 12px; }
.ex-tl-content { flex: 1; }
.ex-tl-text { font-size: 11px; color: #2c2c2c; font-weight: 600; }
.ex-tl-text.active { color: #c0392b; }
.ex-tl-time { font-size: 8px; color: #bbb; margin-top: 1px; }
.ex-tl-desc { font-size: 8px; color: #999; margin-top: 1px; }

.ex-package { padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f5f0eb; }
.ex-pkg-img { width: 40px; height: 40px; border-radius: 8px; background: #f8f4f0; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ex-pkg-info { flex: 1; }
.ex-pkg-name { font-size: 11px; color: #2c2c2c; font-weight: 700; }
.ex-pkg-desc { font-size: 8px; color: #bbb; margin-top: 1px; }

.ex-status { padding: 8px 16px 12px; display: flex; align-items: center; justify-content: space-between; }
.ex-status-left { display: flex; align-items: center; gap: 5px; }
.ex-s-dot { width: 5px; height: 5px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 6px rgba(192,57,43,0.4); animation: ex-pulse 2s infinite; }
.ex-status-txt { font-size: 8px; color: #c0392b; font-weight: 500; }
.ex-status-time { font-size: 9px; color: #ccc; }

/* ============================================== 5. 航班卡 — 白底+海军蓝+金 ============================================== */
.card-flight {
    max-width: 280px;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8edf2;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    position: relative;
}

.fl-header { padding: 14px 16px 12px; background: #0c2340; display: flex; align-items: center; justify-content: space-between; }
.fl-airline-group { display: flex; align-items: center; gap: 8px; }
.fl-airline-logo { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.fl-airline-name { font-size: 12px; font-weight: 700; color: #fff; }
.fl-flight-no { font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.6); letter-spacing: 2px; }
.fl-class { font-size: 8px; color: #0c2340; background: #c9a96e; padding: 3px 8px; border-radius: 3px; font-weight: 700; letter-spacing: 1px; }

.fl-route { padding: 20px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f2f5; }
.fl-city { flex-shrink: 0; }
.fl-city.right { text-align: right; }
.fl-city-code { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; color: #0c2340; line-height: 1; letter-spacing: 2px; }
.fl-city-name { font-size: 9px; color: #999; margin-top: 3px; }
.fl-city-time { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; color: #0c2340; margin-top: 4px; }
.fl-route-mid { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 10px; }
.fl-route-line-wrap { width: 100%; display: flex; align-items: center; margin-bottom: 4px; }
.fl-route-seg { flex: 1; height: 1px; background: #ddd; }
.fl-plane-icon { font-size: 14px; flex-shrink: 0; padding: 0 6px; color: #0c2340; }
.fl-duration { font-size: 8px; color: #bbb; letter-spacing: 1px; }

.fl-date-bar { padding: 10px 16px; background: #f8f9fb; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f2f5; }
.fl-date-k { font-size: 7px; color: #bbb; letter-spacing: 1px; margin-bottom: 2px; }
.fl-date-v { font-size: 11px; color: #0c2340; font-weight: 700; }

.fl-info { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fl-info-k { font-size: 7px; color: #bbb; letter-spacing: 1px; margin-bottom: 3px; }
.fl-info-v { font-size: 13px; color: #0c2340; font-weight: 700; }
.fl-info-v.gold { color: #c9a96e; }

.fl-tear { position: relative; height: 18px; display: flex; align-items: center; }
.fl-tear::before, .fl-tear::after { content: ''; position: absolute; width: 18px; height: 18px; background: #ededed; border-radius: 50%; }
.fl-tear::before { left: -9px; }
.fl-tear::after { right: -9px; }
.fl-tear-line { flex: 1; border-top: 2px dashed #eee; margin: 0 14px; }

.fl-bottom { padding: 12px 16px 14px; display: flex; align-items: center; justify-content: space-between; }
.fl-pass-label { font-size: 7px; color: #bbb; letter-spacing: 1px; }
.fl-pass-name { font-size: 13px; color: #0c2340; font-weight: 700; margin-top: 1px; }
.fl-boarding { text-align: right; }
.fl-boarding-label { font-size: 7px; color: #bbb; letter-spacing: 1px; }
.fl-boarding-time { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: #c9a96e; letter-spacing: 1px; margin-top: 1px; }

.fl-status-bar { padding: 8px 16px 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f0f2f5; }
.fl-status-left { display: flex; align-items: center; gap: 5px; }
.fl-dot { width: 5px; height: 5px; border-radius: 50%; background: #34C759; box-shadow: 0 0 6px rgba(52,199,89,0.4); animation: fl-pulse 2s infinite; }
.fl-status-txt { font-size: 8px; color: #34C759; font-weight: 500; }
.fl-status-tag { font-size: 8px; color: #0c2340; background: #e8edf5; padding: 3px 8px; border-radius: 4px; font-weight: 600; }

/* ============================================== 6. 火车卡 — 白底+蓝 ============================================== */
.card-train {
    max-width: 280px;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e0eaf5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    position: relative;
}

.card-train::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563a0, #3a8fd4, #2563a0);
    border-radius: 10px 10px 0 0;
}

.tr-header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f5fa; }
.tr-logo { font-size: 13px; font-weight: 700; color: #2563a0; letter-spacing: 1px; }
.tr-train-no { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; color: #2563a0; letter-spacing: 2px; }
.tr-class { font-size: 7px; color: #fff; background: #2563a0; padding: 2px 7px; border-radius: 3px; font-weight: 700; }

.tr-route { padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f5fa; }
.tr-station { text-align: center; flex-shrink: 0; }
.tr-station-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.tr-station-time { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; color: #2563a0; margin-top: 2px; }
.tr-station-sub { font-size: 8px; color: #aaa; margin-top: 1px; }
.tr-route-mid { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 8px; }
.tr-arrow { font-size: 14px; color: #ccc; margin-bottom: 2px; }
.tr-route-line { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #d0dde8, transparent); }
.tr-duration { font-size: 8px; color: #aaa; margin-top: 3px; }

.tr-info { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; border-bottom: 1px solid #f0f5fa; }
.tr-info-k { font-size: 7px; color: #aaa; letter-spacing: 1px; margin-bottom: 2px; }
.tr-info-v { font-size: 11px; color: #1a1a1a; font-weight: 700; }
.tr-info-v.blue { color: #2563a0; }

.tr-tear { position: relative; height: 16px; display: flex; align-items: center; }
.tr-tear::before, .tr-tear::after { content: ''; position: absolute; width: 16px; height: 16px; background: #ededed; border-radius: 50%; }
.tr-tear::before { left: -8px; }
.tr-tear::after { right: -8px; }
.tr-tear-line { flex: 1; border-top: 1px dashed #e0eaf5; margin: 0 12px; }

.tr-bottom { padding: 10px 16px 14px; display: flex; justify-content: space-between; align-items: center; }
.tr-passenger { font-size: 9px; color: #999; }
.tr-passenger span { color: #1a1a1a; font-weight: 700; }
.tr-status-tag { font-size: 8px; color: #2563a0; font-weight: 600; background: #e8f0fa; padding: 3px 8px; border-radius: 4px; }

/* ============================================== 7. 活动门票 — 高定纸质票务卡 ============================================== */
.scenario-card.card-event {
    --ev-pure-white: #FFFFFF;
    --ev-ink: #111111;
    --ev-gold: #B89B72;
    --ev-border-light: #F5F5F5;
    --ev-text-sub: #BBBBBB;
    --ev-font-serif: 'Cormorant Garamond', 'Noto Serif SC', serif;
    --ev-font-mono: 'DM Mono', monospace;
    --ev-font-sans: 'Inter', sans-serif;

    max-width: 300px;
    width: 100%;
    background: var(--ev-pure-white);
    border: 1px solid var(--ev-border-light);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.01), 0 10px 30px -10px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease;
    cursor: pointer;
    font-family: var(--ev-font-sans);
}
.scenario-card.card-event:active { transform: scale(0.99); }

/* 物理相框海报插槽：21:9 极窄全宽 */
.ev-poster-slot {
    width: 100%;
    aspect-ratio: 21 / 9;
    background: #FAFAFA;
    padding: 6px 6px 0;
    box-sizing: border-box;
}
.ev-poster-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

/* 头部排版 */
.ev-header { padding: 20px 20px 14px; }
.ev-type {
    font-family: var(--ev-font-mono);
    font-size: 8px; font-weight: 700; color: var(--ev-gold);
    text-transform: uppercase; letter-spacing: 0.3em;
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.ev-type svg { flex-shrink: 0; }
.ev-title {
    font-family: var(--ev-font-serif);
    font-size: 21px; font-weight: 700; color: var(--ev-ink);
    line-height: 1.1; font-style: italic;
}
.ev-subtitle {
    font-size: 9px; color: var(--ev-text-sub); text-transform: uppercase;
    letter-spacing: 2px; margin-top: 5px; font-weight: 500;
}

/* 基础信息区 */
.ev-info {
    padding: 0 20px 18px;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.ev-info > div { flex: 1; min-width: 60px; }
.ev-info-item.wide { width: 100%; flex: none; }
.ev-info-k { font-size: 7px; color: #CCC; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.ev-info-v { font-size: 11px; font-weight: 600; color: #444; }

/* 座位详情区 */
.ev-details {
    padding: 18px 20px 18px;
    display: flex; gap: 28px;
    border-top: 1px solid #FBFBFB;
}
.ev-details:not(:has(> div)) { display: none; }
.ev-detail-k { font-size: 7px; color: #CCC; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.ev-detail-v { font-family: var(--ev-font-mono); font-size: 12px; font-weight: 700; color: var(--ev-gold); }

/* 纯净撕裂线 */
.ev-tear { padding: 0 14px; height: 1px; margin-bottom: 18px; background: transparent; display: block; }
.ev-tear::before, .ev-tear::after { content: none; }
.ev-tear-line { border-top: 1px dashed #EEE; width: 100%; margin: 0; }

/* 底部区域 */
.ev-bottom {
    padding: 0 20px 20px;
    display: flex; justify-content: space-between; align-items: flex-end;
}
.ev-seat-label { font-size: 7px; color: #CCC; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.ev-seat-val {
    font-family: var(--ev-font-serif);
    font-size: 16px; font-weight: 700; color: var(--ev-ink); font-style: italic;
    letter-spacing: 0; margin-top: 0;
}
.ev-price { text-align: right; }
.ev-price-label { font-size: 7px; color: #CCC; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.ev-price-val { font-family: var(--ev-font-mono); font-size: 14px; font-weight: 700; color: var(--ev-ink); }
.ev-price-val span { font-size: 10px; margin-right: 2px; opacity: 0.3; font-weight: 500; }

/* ============================================== 8. 酒店卡 — 黑棕+暖金 ============================================== */
.card-hotel {
    max-width: 280px;
    width: 280px;
    background: linear-gradient(165deg, #1e1a16, #141210, #1a1714);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #2e2820;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    position: relative;
    font-family: 'Noto Serif SC', serif;
}

.card-hotel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #b8956a, #d4b088, #b8956a, transparent);
}

.ht-header { padding: 16px 16px 12px; text-align: center; border-bottom: 1px solid #252018; }
.ht-stars { font-size: 10px; letter-spacing: 3px; margin-bottom: 6px; }
.ht-name { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: 1px; margin-bottom: 2px; }
.ht-addr { font-size: 8px; color: #8a7a68; }

.ht-dates { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #252018; }
.ht-date-block { text-align: center; }
.ht-date-label { font-size: 7px; color: #8a7a68; letter-spacing: 2px; margin-bottom: 3px; }
.ht-date-day { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; color: #fff; line-height: 1; }
.ht-date-month { font-size: 9px; color: #b8956a; margin-top: 2px; font-weight: 600; }
.ht-date-mid { display: flex; flex-direction: column; align-items: center; }
.ht-nights { font-size: 10px; color: #b8956a; font-weight: 700; margin-bottom: 2px; }
.ht-date-line { width: 40px; height: 1px; background: #3a3228; }

.ht-room { padding: 12px 16px; border-bottom: 1px solid #252018; }
.ht-room-title { font-size: 8px; color: #8a7a68; letter-spacing: 2px; margin-bottom: 8px; }
.ht-room-name { font-size: 13px; color: #fff; font-weight: 700; margin-bottom: 6px; }
.ht-room-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.ht-room-tag { font-size: 7px; color: #b8956a; border: 1px solid #3a3228; padding: 2px 6px; border-radius: 3px; }

.ht-guest { padding: 12px 16px 14px; display: flex; align-items: center; justify-content: space-between; }
.ht-guest-label { font-size: 7px; color: #8a7a68; letter-spacing: 1px; }
.ht-guest-name { font-size: 12px; color: #fff; font-weight: 700; margin-top: 1px; }
.ht-confirm { text-align: right; }
.ht-confirm-label { font-size: 7px; color: #8a7a68; }
.ht-confirm-no { font-family: 'DM Mono', monospace; font-size: 9px; color: #b8956a; margin-top: 2px; letter-spacing: 1px; }

/* ============================================== 9. 天气卡 — 蓝色渐变iOS风 ============================================== */
.card-weather {
    max-width: 280px;
    width: 280px;
    background: linear-gradient(155deg, #2a6dd4, #1e5bb8, #3a7de0);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(30,91,184,0.3);
    position: relative;
}

.wt-header { padding: 16px 16px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.wt-location { font-size: 14px; color: #fff; font-weight: 700; }
.wt-condition { font-size: 9px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.wt-temp-icon { font-size: 30px; }

.wt-temp { padding: 6px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.wt-temp-num { font-family: 'Rajdhani', sans-serif; font-size: 52px; font-weight: 700; color: #fff; line-height: 1; }
.wt-temp-range { font-size: 9px; color: rgba(255,255,255,0.6); margin-top: 2px; }

.wt-details { padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.wt-detail-item { text-align: center; padding: 8px 0; background: rgba(255,255,255,0.08); border-radius: 6px; }
.wt-detail-k { font-size: 7px; color: rgba(255,255,255,0.5); letter-spacing: 1px; margin-bottom: 3px; }
.wt-detail-v { font-size: 12px; color: #fff; font-weight: 700; }

.wt-forecast { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.wt-forecast-title { font-size: 7px; color: rgba(255,255,255,0.4); letter-spacing: 2px; margin-bottom: 8px; }
.wt-forecast-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.wt-forecast-day { font-size: 10px; color: rgba(255,255,255,0.8); width: 45px; }
.wt-forecast-icon { font-size: 14px; }
.wt-forecast-temp { font-family: 'Rajdhani', sans-serif; font-size: 11px; color: #fff; font-weight: 600; text-align: right; width: 65px; }

.wt-hourly { padding: 12px 16px 14px; display: flex; justify-content: space-between; }
.wt-hour { text-align: center; }
.wt-hour-time { font-size: 8px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.wt-hour-icon { font-size: 14px; margin-bottom: 4px; }
.wt-hour-temp { font-family: 'Rajdhani', sans-serif; font-size: 12px; color: #fff; font-weight: 600; }

/* ============================================== 10. 日历卡 — iOS风格红白 ============================================== */
.card-calendar {
    max-width: 280px;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #f0eded;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    position: relative;
}

.card-calendar .cal-top { background: #e8382d; padding: 14px 16px; text-align: center; }
.card-calendar .cal-month { font-size: 10px; color: rgba(255,255,255,0.8); font-weight: 600; letter-spacing: 2px; }
.card-calendar .cal-day { font-family: 'Rajdhani', sans-serif; font-size: 50px; font-weight: 700; color: #fff; line-height: 1.1; }
.card-calendar .cal-weekday { font-size: 10px; color: rgba(255,255,255,0.7); letter-spacing: 1px; }

.card-calendar .cal-event { padding: 14px 16px; border-bottom: 1px solid #f5f2f2; }
.card-calendar .cal-event-bar { display: flex; gap: 10px; }
.card-calendar .cal-bar-line { width: 3px; border-radius: 2px; background: #e8382d; flex-shrink: 0; }
.card-calendar .cal-event-content { flex: 1; }
.card-calendar .cal-event-title { font-size: 14px; color: #1a1a1a; font-weight: 700; margin-bottom: 4px; }
.card-calendar .cal-event-time { font-size: 10px; color: #e8382d; font-weight: 600; margin-bottom: 2px; }
.card-calendar .cal-event-loc { font-size: 9px; color: #999; display: flex; align-items: center; gap: 3px; }
.card-calendar .cal-event-note { margin-top: 6px; font-size: 9px; color: #bbb; padding-top: 6px; border-top: 1px solid #f5f2f2; }

.card-calendar .cal-event2 { padding: 14px 16px; border-bottom: 1px solid #f5f2f2; }
.card-calendar .cal-event2 .cal-bar-line { background: #3478f6; }

.card-calendar .cal-reminder { padding: 10px 16px 14px; display: flex; align-items: center; gap: 6px; }
.cal-bell { font-size: 12px; }
.cal-remind-txt { font-size: 9px; color: #999; }

/* 动画 */
@keyframes rst-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes car-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes dlv-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ex-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes fl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ===== 旁白样式：蓝灰小字不斜体 ===== */
.action-narration-text .action-text,
.msg-row.action-narration .action-text {
    font-style: normal !important;
    font-size: var(--ai-aside-font-size, 13px) !important;
    color: var(--aside-color, #78909c) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.3px;
    opacity: 0.88;
}
/* ===== 旁白样式结束 ===== */

/* ===== 固定状态栏 (页面顶部) ===== */
#echo-status-container {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: 0 -16px;
    margin-bottom: 12px;
}

.echo-status-summary {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(239, 243, 246, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 12px;
    font-weight: 500;
    color: #546e7a;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.echo-status-summary .summary-text {
    flex: 1;
    text-align: center;
}

.echo-status-summary .status-arrow {
    font-size: 14px;
    color: #90a4ae;
    transition: transform 0.3s ease;
}

.echo-status-summary.open .status-arrow {
    transform: rotate(180deg);
}

.echo-status-dashboard {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 30px rgba(166, 171, 189, 0.15);
    padding: 16px 20px 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.echo-status-dashboard.show {
    max-height: 400px;
    opacity: 1;
}

.echo-status-dashboard .stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
}

.echo-status-dashboard .stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(239, 243, 246, 0.6);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.echo-status-dashboard .stat-item.full-width {
    grid-column: 1 / -1;
    background: rgba(227, 242, 253, 0.4);
}

.echo-status-dashboard .stat-label {
    font-size: 11px;
    color: #90a4ae;
    letter-spacing: 0.3px;
}

.echo-status-dashboard .stat-value {
    font-size: 13px;
    color: #37474f;
    font-weight: 600;
}

/* ===== 旧版状态栏 (兼容) ===== */
.status-bar-container {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
}

.status-details {
    background: rgba(239, 243, 246, 0.95);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.status-details > .status-summary-bar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #546e7a;
    cursor: pointer;
    list-style: none;
}
.status-details > .status-summary-bar::-webkit-details-marker { display: none; }

.status-details .status-arrow {
    font-size: 14px;
    color: #90a4ae;
    transition: transform 0.3s ease;
}
.status-details[open] .status-arrow {
    transform: rotate(180deg);
}

.status-details .status-dashboard {
    position: relative;
    top: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    padding: 12px 16px 16px;
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.status-details .stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
}

.status-details .stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(239, 243, 246, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.status-details .stat-item.full-width {
    grid-column: 1 / -1;
    background: rgba(227, 242, 253, 0.4);
}

.status-details .stat-label {
    font-size: 11px;
    color: #90a4ae;
    letter-spacing: 0.3px;
}
.status-details .stat-value {
    font-size: 13px;
    color: #37474f;
    font-weight: 600;
}

/* 多角色状态栏 */
.status-bar-container.status-multi {
    background: rgba(239, 243, 246, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.status-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    color: #546e7a;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.status-bar-row:last-child {
    border-bottom: none;
}
.status-bar-row.first {
    padding-top: 10px;
}

.status-char-name {
    background: linear-gradient(135deg, #5dade2, #3498db);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-char-info {
    flex: 1;
    font-weight: 500;
}
/* ===== 状态栏结束 ===== */

/* ===== 与君同行 - 上锁样式 & 弹窗 ===== */
/* 桌面图标锁定徽章 */
.app-lock-badge {
    position: absolute;
    bottom: -2px;
    right: -4px;
    background: #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.app-lock-badge i {
    font-size: 10px;
    color: #8e8e93;
}

/* 小号锁定徽章（用于设置页等） */
.app-lock-badge-sm {
    position: absolute;
    bottom: -1px;
    right: -3px;
    background: #ffffff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.app-lock-badge-sm i {
    font-size: 8px;
    color: #8e8e93;
}

/* 锁定弹窗遮罩�?*/
.together-lock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}
.together-lock-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 锁定弹窗主体 */
.together-lock-modal {
    width: 280px;
    background: #ffffff;
    border-radius: 36px;
    padding: 40px 30px 24px;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
    transform: scale(0.85) translateY(20px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.together-lock-overlay.active .together-lock-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 弹窗图标 */
.tlm-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    background: #f5f5f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tlm-icon i {
    font-size: 24px;
    color: #1c1c1e;
}

/* 弹窗标题 */
.tlm-title {
    font-size: 17px;
    font-weight: 600;
    color: #1c1c1e;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

/* 弹窗描述 */
.tlm-desc {
    font-size: 13px;
    color: #8e8e93;
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* 弹窗按钮 */
.tlm-btn {
    width: 100%;
    padding: 14px 0;
    background: #f2f2f7;
    color: #1c1c1e;
    border: none;
    border-radius: 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.tlm-btn:active {
    background: #e5e5ea;
}

/* 深色模式适配 */
.dark-mode .together-lock-modal {
    background: rgba(26, 26, 26, 0.55);
}
.dark-mode .tlm-icon {
    background: #3a3a3c;
}
.dark-mode .tlm-icon i {
    color: #ffffff;
}
.dark-mode .tlm-title {
    color: #ffffff;
}
.dark-mode .tlm-desc {
    color: #98989d;
}
.dark-mode .tlm-btn {
    background: #3a3a3c;
    color: #ffffff;
}
.dark-mode .tlm-btn:active {
    background: #48484a;
}
/* ===== 与君同行弹窗结束 ===== */

/* ===== 🔧 输入框显示修�?===== */
#chat-input {
    padding: 0 10px !important;
    text-overflow: clip !important;
    overflow: visible !important;
}

/* 输入框容器确保有足够宽度 */
.echo-dock .input-pill {
    min-width: 0 !important;
    flex: 1 !important;
    overflow: visible !important;
}

/* 气泡样式已统一到 text-break-fix.css */

.narrator-row .narration {
    text-align: center;
    text-align-last: center;
}

#app-echo .narrator-row .narrator-bubble,
#app-echo .narrator-row .narration {
    text-align: center;
    text-align-last: center;
}

/* ========== 📖 用户旁白（长按发送）========== */
/* 复用 AI 旁白样式：无气泡、居中、aside-color */
.narrator-row {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 2px 0;
    margin-top: -8px;
    margin-bottom: -8px;
}
.narrator-row .avatar-wrap,
.narrator-row .msg-avatar {
    display: none !important;
}
.narrator-row .narrator-bubble {
    width: fit-content;
    max-width: 85%;
    display: block;
    text-align: center;
    padding: 0 24px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-style: italic !important;
    font-size: var(--narrator-font-size, 13px);
    color: var(--narr-user, #7a5262);
    line-height: 1.45;
}

/* 🔧 修复翻译块在 pre-wrap 气泡内产生巨大留白 */
/* 外层用 normal 消除模板缩进带来的巨大留白 */
.translation-result-block {
    white-space: normal !important;
    margin-top: 8px !important;
    display: block;
    clear: both;
    position: relative;
    z-index: 1;
}

/* 内层真正显示文字的容器，必须保留换行和段落！ */
.translation-result-block div, 
.translation-result-block span {
    white-space: pre-wrap !important;
    word-break: break-word;
}

/* 🔧 修复：有引用时头像跟随气泡而不是跟随引用条 */
.msg-row.me {
    align-items: flex-start !important; /* 改回顶部对齐，用户头像在右上 */
}

/*🔧 确保 VConsole 调试面板在所有元素之上 */
#__vconsole {
    z-index: 9999999 !important;
}

/* ═══════════════════════════════════════
   💋 LOVE LOG 干枯玫瑰高定版 (v3)
   浆果色 (#C27B88) · 暖灰褐 (#BCA4A8) · 干枯玫瑰 (#DCA3A8)
   变量驱动夜间模式（不硬编码）
   ═══════════════════════════════════════ */

/* === 主题变量（亮色） === */
.ll-panel {
    --ll-line-main: #C27B88;
    --ll-line-trail: rgba(194, 123, 136, 0.18);
    --ll-dot: #DCA3A8;
    --ll-title: #BCA4A8;
    --ll-pct: #C27B88;
    --ll-pct-shadow: rgba(194, 123, 136, 0.15);
    --ll-arrow: #D4B8BC;
    --ll-arrow-open: #C27B88;
    --ll-k: #BCA4A8;
    --ll-v: #C27B88;
    --ll-v-nt: #BCA4A8;
    --ll-v-full: #A85C6A;
    --ll-v-full-shadow: rgba(168, 92, 106, 0.15);
    --ll-bar-active: rgba(220, 163, 168, 0.08);
}

/* 面板容器（无背景，融入气泡） */
.ll-panel {
    margin: 8px 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    position: relative;
    user-select: none;
    overflow: visible;
    transition: opacity 0.3s ease;
}

/* 顶栏 */
.ll-bar {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    position: relative;
    z-index: 5;
}
.ll-bar:hover { background: transparent; }
.ll-bar:active { background: var(--ll-bar-active); border-radius: 8px; }

/* 干枯玫瑰呼吸圆点 + 双层涟漪 */
.ll-dot-wrap {
    width: 8px;
    height: 8px;
    background: var(--ll-dot);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24px;
    margin-left: 10px;
    position: relative;
    flex-shrink: 0;
}
.ll-dot-wrap::before,
.ll-dot-wrap::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 1px solid var(--ll-dot);
    border-radius: 50%;
    animation: ll-sound-wave 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
}
.ll-dot-wrap::after {
    animation-delay: 1s;
}
@keyframes ll-sound-wave {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(4.5); opacity: 0;   }
}
.ll-dot { display: none; }

/* 标题：暖灰褐衬线小号大写 */
.ll-title {
    font-family: 'Georgia', 'Noto Serif SC', serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--ll-title);
    text-transform: uppercase;
    flex: 1;
}

.ll-summary {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 浆果色大号百分比 + 双向阴影 */
.ll-pct {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: var(--ll-pct);
    letter-spacing: -1px;
    text-shadow: 2px 0 4px var(--ll-pct-shadow), -2px 0 4px var(--ll-pct-shadow);
}

.ll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ll-arrow);
    transition: transform 0.5s ease, color 0.3s ease;
}
.ll-panel.open .ll-arrow {
    transform: rotate(180deg);
    color: var(--ll-arrow-open);
}

/* 展开区 */
.ll-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.25, 1, 0.4, 1);
}
.ll-panel.open .ll-body { max-height: 800px; }

/* 声纹轨道（浆果色心电图） */
.ll-ecg-box {
    margin: 10px 10px 20px 10px;
    height: 30px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.ll-ecg-svg {
    width: 200%;
    height: 100%;
    animation: ll-ecg-scroll 2s linear infinite;
}
.ll-ecg-svg path:nth-child(1) {
    stroke: var(--ll-line-trail) !important;
    stroke-width: 6px !important;
}
.ll-ecg-svg path:nth-child(2) {
    stroke: var(--ll-line-main) !important;
    stroke-width: 1.5px !important;
}
@keyframes ll-ecg-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 词云排版（无背景卡片，浮动短词） */
.ll-grid {
    padding: 0 10px 20px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 12px 16px;
}
.ll-item {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    animation: ll-float-words 3s infinite ease-in-out alternate;
}
.ll-panel.open .ll-item:nth-child(1) { animation-delay: 0.2s; }
.ll-panel.open .ll-item:nth-child(2) { animation-delay: 0.7s; }
.ll-panel.open .ll-item:nth-child(3) { animation-delay: 1.1s; }
.ll-panel.open .ll-item:nth-child(4) { animation-delay: 0.4s; }
.ll-panel.open .ll-item:nth-child(5) { animation-delay: 0.9s; }
@keyframes ll-float-words {
    0%   { transform: translateY(0px); }
    100% { transform: translateY(-4px); }
}

.ll-k {
    font-family: 'Georgia', 'Noto Serif SC', serif;
    font-size: 11px;
    color: var(--ll-k);
    letter-spacing: 0.5px;
}
.ll-v {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    color: var(--ll-v);
    font-weight: 500;
    word-break: break-word;
}
.ll-v .nt {
    color: var(--ll-v-nt);
    font-size: 12px;
    margin-left: 6px;
    font-weight: normal;
}

/* 长值占满整行（居中 + 加粗 + 深浆果色 + 柔和投影） */
.ll-item.full {
    flex: 0 0 100%;
    margin-top: 12px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    animation: none; /* full 行不浮动，避免大段文字晃眼 */
}
.ll-item.full .ll-v {
    font-size: 16px;
    font-weight: 600;
    color: var(--ll-v-full);
    white-space: normal;
    line-height: 1.6;
    max-width: 95%;
    text-shadow: 0 2px 6px var(--ll-v-full-shadow);
}

/* === fallback 兜底卡（解析失败时） === */
.ll-panel.ll-fallback {
    margin: 12px 0;
    padding: 14px 16px;
    background: rgba(220, 163, 168, 0.08);
    border-left: 3px solid var(--ll-dot);
    border-radius: 12px;
    font-size: 13px;
    color: var(--ll-title);
    user-select: text;
}
.ll-panel.ll-fallback .ll-fallback-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ll-pct);
    letter-spacing: 1px;
}
.ll-panel.ll-fallback .ll-fallback-body {
    white-space: pre-wrap;
    color: var(--ll-v);
    line-height: 1.6;
}

/* === 暗色模式：变量翻面（玫瑰暗光，禁用硬编码） === */
body.dark-mode .ll-panel,
body.night .ll-panel,
[data-theme="dark"] .ll-panel,
html[data-theme="dark"] .ll-panel {
    --ll-line-main: #D86073;
    --ll-line-trail: rgba(216, 96, 115, 0.20);
    --ll-dot: #D86073;
    --ll-title: #8C7377;
    --ll-pct: #D86073;
    --ll-pct-shadow: rgba(216, 96, 115, 0.30);
    --ll-arrow: #5C4B4D;
    --ll-arrow-open: #D86073;
    --ll-k: #8C7377;
    --ll-v: #D86073;
    --ll-v-nt: #8C7377;
    --ll-v-full: #E05A70;
    --ll-v-full-shadow: rgba(224, 90, 112, 0.25);
    --ll-bar-active: rgba(216, 96, 115, 0.08);
}
/* ═══════ Love Log 干枯玫瑰版样式结束 ═══════ */

/* ════════════════════════════════════════════════════════════════════
   💭 心声卡片样式 (Mind Sync Modal) - 左右分栏 + 动态声波版
   ════════════════════════════════════════════════════════════════════ */

/* === 主题变量 === */
.mind-sync-overlay {
    --ms-bg-page: #f4f2f3;
    --ms-bg-bubble: #ffffff;
    --ms-overlay-bg: rgba(0, 0, 0, 0.5);
    --ms-modal-bg: #f5f0f2;
    --ms-card-bg: #ffffff;
    --ms-card-shadow: 0 2px 10px rgba(0,0,0,0.03);
    --ms-card-border: rgba(0,0,0,0.04);
    --ms-text-main: #5c5c5c;
    --ms-text-sub: #a3a3a3;
    --ms-title-color: #8c8185;
    --ms-trigger-bg: #ffffff;
    --ms-trigger-shadow: rgba(107, 140, 206, 0.2);
    --ms-blue-main: #6b8bb0;
    --ms-pink-main: #b06b7e;
    --ms-tag-border: #e5e7eb;
    --ms-tag-bg: #ffffff;
    --ms-star-inactive: #e5e7eb;
    --ms-divider-color: rgba(140, 129, 133, 0.2);
}

/* === 弹窗遮罩 === */
.mind-sync-overlay {
    position: fixed;
    inset: 0;
    background: var(--ms-overlay-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mind-sync-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* === 弹窗容器（左右分栏） === */
.mind-sync-modal {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: var(--ms-modal-bg);
    border: none;
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    box-sizing: border-box;
    overflow: visible;
    transform: translateY(15px) scale(0.98);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mind-sync-overlay.active .mind-sync-modal {
    transform: translateY(0) scale(1);
}

/* === 关闭按钮 === */
.mind-sync-modal .ms-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--ms-text-sub);
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s;
    box-shadow: none;
}
.mind-sync-modal .ms-close:active {
    transform: scale(0.9);
    color: var(--ms-text-main);
}

/* === 左侧栏：声波头像 + 名字 + 竖排标题 === */
.mind-sync-modal .ms-sidebar {
    width: 64px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px dashed var(--ms-divider-color);
    padding-right: 16px;
    position: relative;
}
.mind-sync-modal .ms-avatar-container {
    position: relative;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mind-sync-modal .soundwave-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--ms-blue-main);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.mind-sync-overlay.active .soundwave-ring:nth-child(1) { animation: ms-ripple 2.5s infinite linear; }
.mind-sync-overlay.active .soundwave-ring:nth-child(2) { animation: ms-ripple 2.5s infinite linear 0.8s; }
.mind-sync-overlay.active .soundwave-ring:nth-child(3) { animation: ms-ripple 2.5s infinite linear 1.6s; }
@keyframes ms-ripple {
    0%   { transform: scale(0.8); opacity: 0.6; border-width: 1.5px; }
    100% { transform: scale(1.8); opacity: 0;   border-width: 0px; }
}
.mind-sync-modal .ms-avatar {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background-color: var(--ms-bg-bubble);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--ms-bg-bubble);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}
.mind-sync-modal .ms-name {
    font-size: 10px;
    font-weight: 900;
    color: var(--ms-text-main);
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: 1px;
    word-break: break-all;
}
.mind-sync-modal .ms-v-title {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--ms-title-color);
    opacity: 0.6;
}

/* === 右侧栏：卡片列表 === */
.mind-sync-modal .voice-card-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
    position: relative;
    z-index: 5;
    min-width: 0;
}

/* === 卡片本体 === */
.mind-sync-modal .jelly-card {
    background: var(--ms-card-bg);
    border: 1px solid var(--ms-card-border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--ms-card-shadow);
    position: relative;
    opacity: 0;
    transform: translateX(10px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mind-sync-overlay.active .jelly-card { animation: ms-slide-left 0.4s ease forwards; }
.mind-sync-overlay.active .jelly-card:nth-child(1) { animation-delay: 0.05s; }
.mind-sync-overlay.active .jelly-card:nth-child(2) { animation-delay: 0.15s; }
@keyframes ms-slide-left {
    to { opacity: 1; transform: translateX(0); }
}

/* === 卡片：表层逻辑（蓝） === */
.mind-sync-modal .card-platinum .c-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ms-text-main);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    text-shadow: none;
    margin-bottom: 0;
}
.mind-sync-modal .card-platinum .c-header i {
    font-style: normal;
    color: var(--ms-blue-main);
    font-size: 14px;
    text-shadow: none;
}
.mind-sync-modal .card-platinum .c-content {
    color: var(--ms-text-main);
    font-size: 13px;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 0;
}
.mind-sync-modal .card-platinum .star.active {
    color: var(--ms-blue-main);
    text-shadow: none;
}
.mind-sync-modal .card-platinum .glow-footer { color: var(--ms-blue-main); }
.mind-sync-modal .card-platinum .glow-footer::before { display: none; }

/* === 卡片：深层情绪（粉） === */
.mind-sync-modal .card-rose .c-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ms-text-main);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    text-shadow: none;
    margin-bottom: 0;
}
.mind-sync-modal .card-rose .c-header i {
    font-style: normal;
    color: var(--ms-pink-main);
    font-size: 14px;
    text-shadow: none;
    animation: none;
}
.mind-sync-modal .card-rose .c-content {
    color: var(--ms-text-main);
    font-size: 13px;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 0;
}
.mind-sync-modal .card-rose .star.active {
    color: var(--ms-pink-main);
    text-shadow: none;
}
.mind-sync-modal .card-rose .glow-footer { color: var(--ms-pink-main); }
.mind-sync-modal .card-rose .glow-footer::before { display: none; }

/* === 强度星星（共用） === */
.mind-sync-modal .star-track {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
}
.mind-sync-modal .star-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--ms-text-sub);
    margin-right: 4px;
}
.mind-sync-modal .star {
    font-size: 11px;
    color: var(--ms-star-inactive);
    text-shadow: none;
}

/* === 标签（共用） === */
.mind-sync-modal .jewel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}
.mind-sync-modal .jewel-tag {
    font-size: 10px;
    font-weight: 500;
    color: var(--ms-text-main);
    background: var(--ms-tag-bg);
    border: 1px solid var(--ms-tag-border);
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0;
    box-shadow: none;
}

/* === 底部 footer === */
.mind-sync-modal .glow-footer {
    padding-top: 0;
    font-size: 11px;
    font-weight: 500;
    position: relative;
    border-top: none;
}

/* === 暗色模式：变量翻面（不硬编码颜色） === */
body.dark-mode .mind-sync-overlay,
body.night .mind-sync-overlay,
[data-theme="dark"] .mind-sync-overlay,
html[data-theme="dark"] .mind-sync-overlay {
    --ms-bg-page: #161415;
    --ms-bg-bubble: #2a2628;
    --ms-overlay-bg: rgba(0, 0, 0, 0.85);
    --ms-modal-bg: #242022;
    --ms-card-bg: #2a2628;
    --ms-card-shadow: 0 4px 15px rgba(0,0,0,0.2);
    --ms-card-border: rgba(255,255,255,0.05);
    --ms-text-main: #d4d0d1;
    --ms-text-sub: #8c8185;
    --ms-title-color: #b3a7ab;
    --ms-trigger-bg: #363033;
    --ms-trigger-shadow: rgba(0, 0, 0, 0.5);
    --ms-blue-main: #8ba8e6;
    --ms-pink-main: #e68ba2;
    --ms-tag-border: #4a4446;
    --ms-tag-bg: #2a2628;
    --ms-star-inactive: #4a4446;
    --ms-divider-color: rgba(179, 167, 171, 0.15);
}
/* ═══════ 心声左右分栏样式结束 ═══════ */

/* ════════════════════════════════════════════════════════════════════
   🎴 剧情卡片暗黑模式适配
   ════════════════════════════════════════════════════════════════════ */

/* 确保剧情卡片在暗黑模式下不透明，内容清晰可见 */
body.dark-mode .scenario-card:not(.card-event):not(.sk-card),
body.dark-mode .card-delivery:not(.sk-card),
body.dark-mode .card-express:not(.sk-card),
body.dark-mode .card-restaurant:not(.sk-card),
body.dark-mode .card-hotel:not(.sk-card),
body.dark-mode .card-ticket:not(.sk-card) {
    background: #1A1A1A !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 黑底金色卡片在暗黑模式下保持自身配色 */
body.dark-mode .card-social-post:not(.sk-card) {
    background: linear-gradient(158deg, #111010, #0a0908, #131110) !important;
    border-color: rgba(198,163,112,0.2) !important;
    color: rgba(255,255,255,0.82) !important;
}

/* 卡片头部适配 */
body.dark-mode .dlv-header,
body.dark-mode .ex-header,
body.dark-mode .rst-header,
body.dark-mode .htl-header,
body.dark-mode .tkt-header {
    background: rgba(50, 50, 55, 0.8) !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* 卡片文字适配 */
body.dark-mode .scenario-card:not(.card-event):not(.sk-card) *:not(.dlv-icon):not(.ex-icon) {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ═══════ 剧情卡片暗黑模式适配结束 ═══════ */

/* ════════════════════════════════════════════════════════════════════
   🏅 剧情卡片样式 - 11~14 (凭证/契约/档案/黑卡)
   ════════════════════════════════════════════════════════════════════ */

/* ── 11. 凭证卡 ── */
.card-certificate {
    max-width: 280px; width: 280px;
    background: #ffffff;
    border-radius: 2px;
    padding: 6px;
    border: 1px solid #eaeaea;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    font-family: 'Noto Serif SC', 'Noto Serif', serif;
}
.cert-inner {
    border: 1px solid #d4af37;
    padding: 24px 16px 20px;
    position: relative;
    background:
        linear-gradient(to right, #d4af37 4px, transparent 4px) 0 0,
        linear-gradient(to bottom, #d4af37 4px, transparent 4px) 0 0,
        linear-gradient(to left, #d4af37 4px, transparent 4px) 100% 0,
        linear-gradient(to bottom, #d4af37 4px, transparent 4px) 100% 0,
        linear-gradient(to right, #d4af37 4px, transparent 4px) 0 100%,
        linear-gradient(to top, #d4af37 4px, transparent 4px) 0 100%,
        linear-gradient(to left, #d4af37 4px, transparent 4px) 100% 100%,
        linear-gradient(to top, #d4af37 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 8px 8px;
}
.cert-header { text-align: center; margin-bottom: 20px; }
.cert-title-en { font-size: 9px; color: #888; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 4px; }
.cert-title-cn { font-size: 15px; font-weight: 700; color: #111; letter-spacing: 4px; }
.cert-item-box {
    text-align: center; padding: 16px 0;
    border-top: 1px solid rgba(212,175,55,0.25); border-bottom: 1px solid rgba(212,175,55,0.25);
    margin-bottom: 20px; position: relative;
}
.cert-item-box::before { content: '✦'; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #d4af37; background: #fff; padding: 0 4px; }
.cert-item-box::after  { content: '✦'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #d4af37; background: #fff; padding: 0 4px; }
.cert-item-name { font-size: 14px; font-weight: 700; color: #d4af37; letter-spacing: 1px; margin-bottom: 8px; line-height: 1.4; }
.cert-item-desc { font-size: 10px; color: #888; line-height: 1.6; padding: 0 8px; }
.cert-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cert-row { display: flex; justify-content: space-between; align-items: flex-end; }
.cert-k { font-size: 9px; color: #888; letter-spacing: 1px; }
.cert-v { font-size: 11px; color: #111; font-weight: 600; }
.cert-v-mono { font-family: 'DM Mono', 'Courier New', monospace; font-size: 10px; letter-spacing: 1px; }
.cert-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.cert-seal { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #aa8222); box-shadow: 0 4px 10px rgba(212,175,55,0.3), inset 0 0 4px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.cert-seal::before { content: ''; position: absolute; inset: 3px; border: 1px dashed rgba(255,255,255,0.4); border-radius: 50%; }
.cert-seal-text { font-size: 18px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); position: relative; z-index: 1; }
.cert-signature { text-align: right; }
.cert-sign-label { font-size: 8px; color: #888; margin-bottom: 2px; }
.cert-sign-name { font-size: 17px; font-weight: 600; font-style: italic; color: #111; line-height: 1; font-family: Georgia, serif; }

/* ── 12. 契约卡 ── */
.card-contract {
    max-width: 280px; width: 280px;
    background: #ffffff;
    border-radius: 2px; overflow: hidden;
    border: 1px solid #dddddd;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    padding: 24px 16px 20px;
    position: relative;
    font-family: 'Noto Serif SC', 'Noto Serif', serif;
}
.ct-header { text-align: center; border-bottom: 2px double #ddd; padding-bottom: 14px; margin-bottom: 18px; }
.ct-title-en { font-size: 9px; color: #888; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 4px; }
.ct-title-cn { font-size: 17px; font-weight: 900; color: #111; letter-spacing: 5px; }
.ct-body { font-size: 11px; color: #111; line-height: 1.8; text-align: justify; margin-bottom: 24px; }
.ct-clause { margin-bottom: 10px; }
.ct-clause-num { font-weight: 700; margin-right: 4px; }
.ct-highlight { color: #c0392b; font-weight: 700; }
.ct-footer { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 18px; border-top: 1px solid #ddd; }
.ct-party { display: flex; flex-direction: column; gap: 6px; position: relative; }
.ct-party-label { font-size: 8px; color: #888; letter-spacing: 1px; }
.ct-signature { font-size: 17px; font-weight: 600; font-style: italic; color: #111; line-height: 1; position: relative; z-index: 2; font-family: Georgia, serif; }
.ct-thumbprint { position: absolute; bottom: -6px; left: 12px; width: 26px; height: 34px; background: radial-gradient(ellipse at center, #c0392b 0%, transparent 70%); opacity: 0.5; transform: rotate(15deg); z-index: 1; }

/* ── 13. 档案卡 ── */
.card-dossier {
    max-width: 280px; width: 280px;
    background: #ffffff;
    border-radius: 0; overflow: hidden;
    border: 2px solid #111111;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    position: relative;
    font-family: 'DM Mono', 'Courier New', monospace;
}
.ds-header { padding: 12px 16px; border-bottom: 2px solid #111; display: flex; justify-content: space-between; align-items: center; }
.ds-title { font-size: 13px; font-weight: 700; color: #111; letter-spacing: 2px; }
.ds-id { font-size: 9px; color: #777; }
.ds-body { padding: 20px 16px 18px; position: relative; }
.ds-stamp { position: absolute; top: 20px; right: 14px; border: 2px solid #d32f2f; color: #d32f2f; font-size: 13px; font-weight: 700; padding: 3px 8px; transform: rotate(15deg); letter-spacing: 2px; pointer-events: none; opacity: 0.85; }
.ds-grid { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; border-bottom: 1px dashed #111; padding-bottom: 18px; }
.ds-row { display: flex; justify-content: space-between; align-items: flex-end; }
.ds-k { font-size: 9px; color: #777; text-transform: uppercase; }
.ds-v { font-size: 11px; color: #111; font-weight: 700; }
.ds-v-red { color: #d32f2f; }
.ds-redact { background: #111; color: #111; padding: 0 6px; user-select: none; border-radius: 1px; }
.ds-content { font-size: 11px; color: #111; line-height: 1.65; font-family: 'Noto Serif SC', 'Noto Serif', serif; }
.ds-content .ds-mono { font-family: 'DM Mono', 'Courier New', monospace; }

/* ── 14. 黑卡 ── */
.card-blackcard {
    max-width: 280px; width: 280px;
    background: #ffffff;
    border-radius: 8px; overflow: hidden;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
}
.bc-label { font-size: 9px; color: #888; letter-spacing: 3px; text-transform: uppercase; text-align: center; margin-bottom: 14px; font-family: 'Courier New', monospace; }
.bc-physical {
    width: 100%; height: 158px;
    background: linear-gradient(135deg, #1f1f22, #0a0a0c);
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 10px 20px rgba(0,0,0,0.5);
    padding: 16px; position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
}
.bc-p-header { display: flex; justify-content: space-between; align-items: flex-start; }
.bc-p-logo { font-size: 13px; color: #d4af37; font-weight: 600; letter-spacing: 2px; font-family: Georgia, serif; }
.bc-chip { width: 34px; height: 26px; background: linear-gradient(135deg, #d4af37, #aa8222); border-radius: 4px; position: relative; overflow: hidden; box-shadow: inset 0 0 2px rgba(0,0,0,0.5); flex-shrink: 0; }
.bc-chip::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0,0,0,0.3); }
.bc-chip::after  { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.3); }
.bc-p-number { font-family: 'Courier New', monospace; font-size: 17px; color: #d4af37; letter-spacing: 3px; text-shadow: 1px 1px 1px rgba(0,0,0,0.8); margin-top: 8px; }
.bc-p-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.bc-p-name { font-family: 'Courier New', monospace; font-size: 11px; color: #d4af37; letter-spacing: 2px; text-transform: uppercase; }
.bc-p-type { font-size: 7px; color: #000; background: #d4af37; padding: 2px 6px; border-radius: 2px; font-weight: 700; letter-spacing: 1px; }

/* 暗黑模式 - 凭证/契约保持白色背景（设计本身是高奢白） */
body.dark-mode .card-certificate,
body.dark-mode .card-contract,
body.night .card-certificate,
body.night .card-contract { background: #0a0a0a !important; border-color: #222 !important; }
body.dark-mode .card-certificate .cert-inner,
body.night .card-certificate .cert-inner { background-color: transparent !important; }
body.dark-mode .cert-title-cn, body.night .cert-title-cn,
body.dark-mode .cert-v, body.night .cert-v,
body.dark-mode .cert-sign-name, body.night .cert-sign-name { color: #e0e0e0 !important; }
body.dark-mode .cert-item-box::before, body.night .cert-item-box::before,
body.dark-mode .cert-item-box::after, body.night .cert-item-box::after { background: #0a0a0a !important; }
body.dark-mode .ct-title-cn, body.night .ct-title-cn,
body.dark-mode .ct-body, body.night .ct-body,
body.dark-mode .ct-signature, body.night .ct-signature { color: #e0e0e0 !important; }
body.dark-mode .ct-header, body.night .ct-header { border-color: #333 !important; }
body.dark-mode .ct-footer, body.night .ct-footer { border-color: #333 !important; }
/* 档案卡暗黑 */
body.dark-mode .card-dossier,
body.night .card-dossier { background: #0a0a0a !important; border-color: #444 !important; }
body.dark-mode .ds-header, body.night .ds-header { border-color: #444 !important; }
body.dark-mode .ds-title, body.night .ds-title,
body.dark-mode .ds-v, body.night .ds-v,
body.dark-mode .ds-content, body.night .ds-content { color: #e0e0e0 !important; }
body.dark-mode .ds-redact, body.night .ds-redact { background: #e0e0e0 !important; color: #e0e0e0 !important; }
body.dark-mode .ds-grid, body.night .ds-grid { border-color: #444 !important; }
/* 黑卡本身已黑，外壳改深 */
body.dark-mode .card-blackcard,
body.night .card-blackcard { background: #0a0a0a !important; border-color: #333 !important; }

/* ════════════════════ 11~14 样式结束 ════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   🎀 心动投喂样式
   ════════════════════════════════════════════════════════════════════ */

/* 遮罩 */
.feed-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(239,243,246,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s; z-index: 200;
}
.feed-modal-overlay.active { opacity: 1; pointer-events: auto; }

/* 面板 */
.feed-panel {
    width: 320px; max-height: 85vh; background: #fff; border-radius: 28px; padding: 24px;
    box-shadow: 0 24px 48px rgba(166,180,200,0.25);
    transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    display: flex; flex-direction: column; overflow: hidden;
}
.feed-modal-overlay.active .feed-panel { transform: translateY(0); }

/* 视图容器 */
.feed-view-container { display: none; flex-direction: column; height: 100%; }
.feed-view-container.active { display: flex; animation: feedViewFadeIn 0.4s ease; }
@keyframes feedViewFadeIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

/* 成员选择视图 */
.feed-header-center { text-align: center; margin-bottom: 24px; }
.feed-member-list { flex: 1; overflow-y: auto; margin-bottom: 16px; max-height: 400px; padding-right: 4px; }
.feed-member-item {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    background: #FBF9F9; border-radius: 20px; cursor: pointer;
    transition: all 0.2s ease; margin-bottom: 12px; border: 1.5px solid transparent;
}
.feed-member-item:active { border-color: #B58392; background: rgba(181, 131, 146, 0.1); transform: translateY(-1px); }
.feed-member-avatar {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    background: #F2E8E9; flex-shrink: 0; border: 2px solid #fff;
}
.feed-member-name { flex: 1; font-size: 16px; font-weight: 600; color: #4A3E3E; }
.feed-heart-icon { font-size: 22px; color: #B58392; opacity: 0.3; }
.feed-cancel-btn {
    width: 100%; padding: 16px; background: #FBF9F9; color: #A69598;
    border: none; border-radius: 18px; font-size: 15px; font-weight: 600; cursor: pointer;
}

/* 返回按钮 */
.feed-back-btn {
    font-size: 13px; font-weight: 700; color: #A69598; cursor: pointer;
    margin-bottom: 15px; display: flex; align-items: center; gap: 4px;
}

/* 切换 */
.feed-toggle-wrapper {
    display: flex; background: #f1f5f9; border-radius: 0; padding: 4px;
    margin-bottom: 20px; position: relative;
}
.feed-slider {
    position: absolute; width: calc(50% - 4px); height: calc(100% - 8px);
    background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.feed-panel[data-mode="butler"] .feed-slider { transform: translateX(100%); }
.feed-toggle-btn {
    flex: 1; text-align: center; padding: 10px 0; font-size: 13px; font-weight: 600;
    color: #94a3b8; cursor: pointer; z-index: 2; transition: color 0.3s;
}
.feed-panel[data-mode="fuguang"] .feed-toggle-btn.fuguang { color: #D47A8F; }
.feed-panel[data-mode="butler"] .feed-toggle-btn.butler { color: #8b7355; }

/* 标签 */
.feed-tags-box { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.feed-tag {
    padding: 8px 14px; font-size: 12px; font-weight: 500; border-radius: 0;
    background: #f8fafc; color: #64748b; cursor: pointer; border: 1px solid transparent;
    transition: all 0.2s; user-select: none;
}
.feed-panel[data-mode="fuguang"] .feed-tag.active { background: #FFF0F3; color: #D47A8F; border-color: #FFCCD5; }
.feed-panel[data-mode="butler"] .feed-tag.active { background: #fdfaf6; color: #8b7355; border-color: #e6d5c3; }

/* 输入 */
.feed-input-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.feed-input-box {
    width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid #e2e8f0;
    background: #f8fafc; outline: none; font-size: 13px; color: #475569; transition: all 0.3s;
}
.feed-panel[data-mode="fuguang"] .feed-input-box:focus { border-color: #FFCCD5; background: #fff; }
.feed-panel[data-mode="butler"] .feed-input-box:focus { border-color: #e6d5c3; background: #fff; }

/* 按钮 */
.feed-submit-btn {
    width: 100%; padding: 16px; border: none; border-radius: 18px;
    font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; letter-spacing: 0.5px;
    box-shadow: 0 10px 25px rgba(181, 131, 146, 0.15);
    transition: background 0.3s;
}
.feed-panel[data-mode="fuguang"] .feed-submit-btn { background: #B58392; }
.feed-panel[data-mode="butler"] .feed-submit-btn { background: #B09978; }

/* 配送卡片 */
.real-card {
    width: 100%;
    max-width: 305px; /* 🔧 限制最大宽度，防止被拉伸成竖条 */
    border-radius: 16px 4px 16px 16px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* 🔧 防止被 flex 容器压缩 */
}
.card-fuguang { background: #fff; border: 1px solid #FFF0F3; }
.fg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; border-bottom: 1px dashed #f1f5f9; padding-bottom: 10px; }
.fg-brand { font-size: 13px; font-weight: 600; color: #D47A8F; display: flex; align-items: center; gap: 6px; }
.fg-order-no { font-size: 11px; color: #cbd5e1; }
.fg-recipient { font-size: 12px; color: #64748b; margin-bottom: 8px; padding: 6px 10px; background: rgba(212, 122, 143, 0.05); border-radius: 8px; border-left: 2px solid #FFB3C6; }
.fg-item { font-size: 15px; font-weight: 600; color: #5C4A52; margin-bottom: 6px; }
.feed-card-note { font-size: 11px; padding: 7px 10px; border-radius: 8px; margin-bottom: 10px; line-height: 1.4; }
.note-fuguang { background: #FFF0F3; color: #D47A8F; }
.note-butler { background: rgba(139,115,85,0.1); color: #8b7355; border-left: 2px solid #8b7355; }
.fg-info-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; margin-bottom: 6px; }
.fg-progress-container { margin-top: 30px; position: relative; }
.fg-track { height: 5px; background: #FFF0F3; border-radius: 3px; overflow: visible; }
.fg-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #FFB3C6, #FF8FAB); border-radius: 3px; transition: width 4s linear; }
.cute-scooter-wrapper { position: absolute; top: -26px; left: 0; width: 100%; height: 26px; transition: opacity 0.3s; }
.scooter-mover { width: fit-content; animation: feedDriveX 4s linear infinite; }
.scooter-bouncer { font-size: 22px; line-height: 1; animation: feedBounceY 0.3s alternate infinite ease-in-out; }
@keyframes feedDriveX { 0% { transform: translateX(-10px); } 100% { transform: translateX(260px); } }
@keyframes feedBounceY { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } }

.card-butler { background: linear-gradient(180deg, #faf8f5, #f4eee9); border: 1px solid #e6d5c3; }
.bt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bt-brand { font-size: 12px; font-weight: 600; color: #8b7355; letter-spacing: 1px; }
.bt-status-tag { font-size: 10px; padding: 3px 9px; background: rgba(139,115,85,0.1); color: #8b7355; border-radius: 10px; }
.bt-item { font-size: 15px; font-weight: 600; color: #4a3f35; margin-bottom: 8px; }
.bt-details { background: rgba(255,255,255,0.7); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.bt-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 6px; }
.bt-row:last-child { margin-bottom: 0; }
.bt-label { color: #9ca3af; }
.bt-value { color: #4a3f35; font-weight: 500; text-align: right; }

/* 回执卡 */
.feed-receipt-wrapper { display: flex; justify-content: center; margin: 12px 0; }
.receipt-card { width: 280px; border-radius: 14px; padding: 14px 18px; box-shadow: 0 6px 20px rgba(166,180,200,0.1); display: flex; flex-direction: column; gap: 10px; }
.receipt-fuguang { background: #fff; border: 1px solid rgba(255,182,193,0.4); border-left: 4px solid #FFB3C6; }
.receipt-fuguang .r-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #FFF0F3; padding-bottom: 8px; }
.receipt-fuguang .r-title { font-size: 12px; font-weight: 600; color: #D47A8F; display: flex; align-items: center; gap: 5px; }
.receipt-fuguang .r-time { font-size: 10px; color: #cbd5e1; }
.receipt-fuguang .r-status { font-size: 13px; font-weight: 600; color: #10b981; display: flex; align-items: center; gap: 5px; }
.receipt-fuguang .r-recipient { font-size: 12px; color: #64748b; line-height: 1.5; }
.sensory-bar-fuguang { background: #FFF0F3; border-radius: 8px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; }
.sensory-label { font-size: 10px; color: #D47A8F; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.sensory-value { font-size: 11px; color: #D47A8F; font-weight: 700; }
.pulse-dot { width: 5px; height: 5px; background: #FFB3C6; border-radius: 50%; animation: feedPulse 1.5s infinite; }
@keyframes feedPulse { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.5; } }

.receipt-butler { background: linear-gradient(145deg, #2A2826, #1C1B1A); border: 1px solid rgba(255,255,255,0.08); border-left: 4px solid #C2A999; }
.receipt-butler .r-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
.receipt-butler .r-title { font-size: 11px; font-weight: 500; color: #8C8984; letter-spacing: 1px; }
.receipt-butler .r-time { font-size: 10px; color: #8C8984; font-family: monospace; }
.receipt-butler .r-status { font-size: 13px; font-weight: 500; color: #E6E0D8; letter-spacing: 0.5px; }
.receipt-butler .r-recipient { font-size: 11px; color: #8C8984; line-height: 1.5; letter-spacing: 0.5px; }
.sensory-bar-butler { background: rgba(255,255,255,0.05); border-radius: 6px; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,0.02); }
.sensory-bar-butler .sensory-label { font-size: 10px; color: #C2A999; letter-spacing: 0.5px; }
.sensory-bar-butler .sensory-value { color: #D1B8C4; font-family: monospace; font-size: 11px; }

/* 拓展面板 rose 色 */
.clean-icon-box.bg-rose { background: linear-gradient(135deg, #fff0f3, #ffe4e8); color: #D47A8F; }

/* ════════════════════════════════════════════════════════════════════
   ✧ 心声 (Mind Sync) 样式
   ════════════════════════════════════════════════════════════════════ */

/* 触发器（声波胶囊：3 条 EQ 条） */
.voice-trigger {
    position: absolute;
    bottom: -6px;
    right: -6px;
    top: auto;
    width: 26px;
    height: 16px;
    background: var(--ms-trigger-bg, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--ms-trigger-shadow, rgba(107, 140, 206, 0.2));
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
    border: none;
}
.voice-trigger::after { content: none; }
.voice-trigger:active {
    transform: scale(0.9);
    background: var(--ms-trigger-bg, #ffffff);
}
.voice-trigger span {
    width: 2px;
    background: var(--ms-blue-main, #6b8bb0);
    border-radius: 1px;
    transition: background 0.3s;
}
.voice-trigger span:nth-child(1) { animation: vt-eq-mini 0.8s infinite alternate ease-in-out 0.1s; }
.voice-trigger span:nth-child(2) { animation: vt-eq-mini 0.8s infinite alternate ease-in-out 0.4s; }
.voice-trigger span:nth-child(3) { animation: vt-eq-mini 0.8s infinite alternate ease-in-out 0.2s; }
@keyframes vt-eq-mini {
    0%   { height: 4px; }
    100% { height: 10px; }
}
/* 暗色模式声波颜色 */
body.dark-mode .voice-trigger,
body.night .voice-trigger,
[data-theme="dark"] .voice-trigger,
html[data-theme="dark"] .voice-trigger {
    --ms-trigger-bg: #363033;
    --ms-trigger-shadow: rgba(0, 0, 0, 0.5);
    --ms-blue-main: #8ba8e6;
    background: var(--ms-trigger-bg);
    box-shadow: 0 2px 8px var(--ms-trigger-shadow);
}
body.dark-mode .voice-trigger span,
body.night .voice-trigger span,
[data-theme="dark"] .voice-trigger span,
html[data-theme="dark"] .voice-trigger span {
    background: var(--ms-blue-main);
}
@keyframes pearl-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.8), 0 0 4px rgba(184, 120, 120, 0.15); }
    50%      { box-shadow: 0 0 0 1px rgba(255,255,255,1), 0 0 10px rgba(184, 120, 120, 0.5); }
}
@keyframes voiceBreath {
    0%,100% { box-shadow: 0 4px 10px rgba(56,189,248,0.2), inset 0 2px 3px #fff; }
    50% { box-shadow: 0 4px 18px rgba(56,189,248,0.5), inset 0 2px 3px #fff; }
}

/* 遮罩 */
.voice-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex; justify-content: center; align-items: center; z-index: 300;
    opacity: 0; visibility: hidden; transition: all 0.4s ease;
}
.voice-modal-overlay.active { opacity: 1; visibility: visible; }

/* 弹窗 */
.voice-modal {
    width: 88%; max-width: 340px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,250,255,0.9), rgba(255,246,250,0.95));
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,1); border-radius: 28px;
    box-shadow: 0 28px 56px rgba(100,140,180,0.15);
    padding: 26px 18px 22px; position: relative;
    overflow: hidden;
    transform: translateY(20px) scale(0.98); opacity: 0;
    transition: all 0.5s cubic-bezier(0.19,1,0.22,1);
}
.voice-modal-overlay.active .voice-modal { transform: translateY(0) scale(1); opacity: 1; }

.voice-modal-close {
    position: absolute; top: 16px; right: 16px; width: 28px; height: 28px;
    background: rgba(241,245,249,0.8); border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    color: #94a3b8; font-size: 14px; cursor: pointer;
}
.voice-modal-title {
    font-size: 12px; font-weight: 700; color: #0ea5e9;
    text-transform: uppercase; letter-spacing: 4px; text-align: center; margin-bottom: 18px;
    display: flex; justify-content: center; align-items: center; gap: 8px;
}
.voice-modal-title::before, .voice-modal-title::after { content: ""; width: 18px; height: 2px; background: #e0f2fe; border-radius: 2px; }

/* 卡片列表 */
.voice-card-list { display: flex; flex-direction: column; gap: 14px; }
.voice-card {
    background: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.9);
    border-radius: 18px; padding: 16px;
    box-shadow: 0 4px 12px rgba(14,165,233,0.05);
    overflow: hidden;
}
.voice-card.highlight {
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,241,242,0.6));
    border-color: rgba(254,205,211,0.8);
    box-shadow: 0 6px 18px rgba(244,63,94,0.07);
    overflow: hidden;
}
.voice-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.voice-card-title { font-size: 13px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 5px; }
.voice-card-title-icon { color: #38bdf8; font-size: 14px; }
.voice-card.highlight .voice-card-title-icon { color: #f43f5e; }
.voice-card.highlight .voice-card-title { color: #4c0519; }
.voice-intensity { display: flex; gap: 3px; }
.v-dot { width: 5px; height: 5px; border-radius: 50%; background: #e2e8f0; }
.v-dot.blue { background: #38bdf8; box-shadow: 0 0 5px rgba(56,189,248,0.6); }
.v-dot.pink { background: #f43f5e; box-shadow: 0 0 5px rgba(244,63,94,0.6); }
.voice-tags { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.v-tag { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 10px; letter-spacing: 0.5px; }
.v-tag.blue { background: #f0f9ff; color: #0284c7; border: 1px solid #bae6fd; }
.v-tag.pink { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
.voice-card-content { font-size: 13px; line-height: 1.6; color: #475569; margin-bottom: 10px; }
.voice-card-footer {
    padding-top: 10px; border-top: 1px dashed rgba(203,213,225,0.6);
    font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 5px;
}
.voice-card-footer::before { content: "›"; color: #94a3b8; font-weight: bold; }

/* ==========================================
   ❄️ 聊天列表：冰透水滴蓝
   ========================================== */

/* 列表容器：冰蓝渐变背景 */
body #view-chats,
.chat-list-container {
    background: var(--echo-tint-3, var(--chatlist-bg));
}

/* 滚动区域 */
.chat-list-items {
    background: var(--echo-tint-3, var(--chatlist-bg));
}

/* .chat-list-items .chat-item visual handled by variables */

/* 表情选择器按钮 */
.emoji-picker-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    font-size: 20px;
    cursor: pointer;
    color: #f5a0b5;
}

.emoji-picker-btn .ri-emotion-line {
    color: #f5a0b5;
    font-size: 20px;
}

/* ==========================================
   🍎 iOS PWA 修复：万象子页面顶部避开刘海（已在基础样式中统一处理）
   ========================================== */

/* ==========================================
   🍎 iOS PWA 修复：万象 overlay 内 padding 不叠加
   ========================================== */
body.ios-pwa .genesis-overlay .main-view {
    padding-top: 60px !important;
}

body.ios-pwa .genesis-overlay .page-container {
    padding-top: 0 !important;
}

/* ========== 底部导航栏：浮动胶囊 Tab ========== */
.echo-tabs {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 8px) + 10px);
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.echo-tabs::before {
    display: none;
    content: none;
}

.echo-tabs .tabs-container,
.echo-tabs .tab-btn {
    pointer-events: auto;
}

.tabs-container {
    position: relative;
    width: auto;
    height: auto;
    background: var(--chatitem-bg);
    border: 1px solid var(--chatitem-border);
    border-radius: 30px;
    padding: 5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.tabs-container::before {
    content: none;
    display: none;
}

.echo-tabs .tab-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--chatitem-preview-color);
    font-size: 13px;
    font-weight: 800;
    transition: 0.3s;
    padding: 9px 22px;
    background: transparent;
    border: none;
    border-radius: 24px;
    flex: none;
}

.tab-node {
    display: none;
}

.tab-label {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 1;
    transition: 0.3s;
}

.tab-label i {
    font-size: 17px;
}

.echo-tabs .tab-btn.active {
    background: var(--echo-accent, var(--chatitem-unread-bg));
    color: var(--echo-accent-text, var(--chatitem-unread-text));
}

.echo-tabs .tab-btn.active .tab-node {
    display: none;
}

.echo-tabs .tab-btn.active .tab-label {
    opacity: 1;
}

.tab-dot {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 6px;
    height: 6px;
    background: #ff3b30;
    border-radius: 50%;
}

#view-moments {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: none;
    /* background 已迁移至 css/apps/moments-redesign.css，由 --mm-bg-pure 控制 */
}

.emoji-picker-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 6px !important;
    cursor: pointer;
}
.emoji-picker-btn .ri-emotion-line {
    color: #f5a0b5;
    font-size: 20px;
}

/* ==========================================
   🍎 iOS PWA 修复：万象子页面顶部避开刘海（已在基础样式中统一处理）
   ========================================== */

/* ==========================================
   🍎 iOS PWA 修复：万象 overlay 内 padding 不叠加
   ========================================== */
body.ios-pwa .genesis-overlay .main-view {
    padding-top: 60px !important;
}

body.ios-pwa .genesis-overlay .page-container {
    padding-top: 0 !important;
}

/* unified to var(--tab-active-color) */

/* ==========================================
   琳琅 PC 端显示异常修复
   ========================================== */

/* 🔧 仅 PC 端生效，不影响移动端 */
@media (min-width: 769px) and (hover: hover) {
    #treasure {
        position: relative;
    }

    .treasure-nav-bar {
        position: absolute !important;
    }

    .treasure-main-scroll {
        height: calc(100% - var(--treasure-nav-height) - var(--treasure-safe-bottom));
    }
}

/* ==========================================
   聊天列表容器背景（由变量控制）
   ========================================== */

/* 列表容器 */
body #view-chats,
.chat-list-container {
    background: var(--echo-tint-3, var(--chatlist-bg));
}

/* 滚动区域 */
.chat-list-items {
    background: var(--echo-tint-3, var(--chatlist-bg));
}

/* 表情选择器按钮 */
.emoji-picker-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    font-size: 20px;
    cursor: pointer;
    color: #f5a0b5;
}

.emoji-picker-btn .ri-emotion-line {
    color: #f5a0b5;
    font-size: 20px;
}

/* ==========================================
   🍎 iOS PWA 修复：万象子页面顶部避开刘海（已在基础样式中统一处理）
   ========================================== */

/* ==========================================
   🍎 iOS PWA 修复：万象 overlay 内 padding 不叠加
   ========================================== */
body.ios-pwa .genesis-overlay .main-view {
    padding-top: 60px !important;
}

body.ios-pwa .genesis-overlay .page-container {
    padding-top: 0 !important;
}

/* 琳琅页面独立背景 */
#treasure {
    background: var(--bg-body, var(--treasure-gray-light, #f7f7f7)) !important;
}

/* ══════ Echo 夜间/萤火模式 ══════ */
body.night .msg-row.other .speech-bubble,
body.night .msg-row.other .msg-bubble {
    background: var(--bubble-other-bg);
    color: var(--bubble-other-text);
    border-color: var(--navbar-border);
    box-shadow: var(--bubble-other-shadow);
}
body.night .msg-row.me .msg-bubble,
body.night .msg-row.me .speech-bubble {
    background: var(--bubble-me-bg);
    color: var(--bubble-me-text);
    border-color: var(--navbar-border);
    box-shadow: var(--bubble-me-shadow);
}
body.night .voice-bubble.other {
    background: var(--bubble-voice-other-bg);
    color: var(--bubble-voice-other-text);
    box-shadow: none;
}
body.night .voice-bubble.other i,
body.night .voice-bubble.other .voice-static,
body.night .voice-bubble.other .voice-waves,
body.night .voice-bubble.other .voice-dur {
    color: var(--bubble-voice-other-text);
}
body.night .voice-bubble.me {
    background: var(--bubble-voice-me-bg);
    color: var(--bubble-voice-me-text);
}
body.night .msg-avatar {
    border-color: #2a2a2a !important;
}
/* name-tag night: handled by CSS variables */
body.night .action-text {
    color: var(--aside-color, #64748b) !important;
}
body.night .msg-content {
    color: #c8d6e5 !important;
}
/* 底栏 Dock */
body.night .echo-dock {
    background: var(--dock-bg);
    border-top-color: var(--dock-border);
}
body.night .echo-dock .btn-round {
    background: var(--dock-btn-bg);
    box-shadow: var(--dock-btn-shadow);
}
body.night .echo-dock .btn-round i {
    color: var(--dock-btn-icon-color);
}
body.night .echo-dock input,
body.night .echo-dock textarea,
body.night .echo-dock [contenteditable] {
    background: var(--dock-input-bg);
    color: var(--dock-input-text-color);
    border-color: var(--dock-border);
}
body.night .echo-dock input::placeholder,
body.night .echo-dock textarea::placeholder {
    color: var(--dock-input-placeholder);
}
/* 表情面板 */
/* sticker-panel night handled by CSS variable --drawer-bg */
body.night .sticker-tab {
    color: #64748b !important;
}
body.night .sticker-tab.active {
    color: #d6d6d6 !important;
}


/* ══════ 夜间全局字体清晰化 ══════ */
body.night #app-echo {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
body.night .action-narration-text,
body.night .action-text,
body.night .narration,
body.night .novel-narration,
body.night .msg-row.action-narration,
body.night .msg-row.summary-narration {
    -webkit-font-smoothing: antialiased !important;
}
body.night .msg-row .text-content,
body.night .msg-row .msg-content,
body.night .msg-row.other .speech-bubble {
    -webkit-font-smoothing: antialiased !important;
}
/* 夜间去除白色text-shadow防糊 */
body.night .narration,
body.night .novel-narration,
body.night .action-text,
body.night .action-narration-text,
body.night .speech-bubble,
body.night .msg-bubble,
body.night .msg-content,
body.night .text-content {
    text-shadow: none !important;
}
/* ========== 群公告样式 ========== */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.notice-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notice-title i {
    color: #e74c3c;
    font-size: 15px;
}

.notice-content {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    cursor: pointer;
    min-height: 40px;
    transition: background 0.2s;
}

.notice-content:hover {
    background: rgba(0, 0, 0, 0.05);
}

.notice-content[contenteditable="true"] {
    background: #fff;
    border: 1.5px solid rgba(0, 122, 255, 0.3);
    outline: none;
}

/* ========================================
   🚀 修复万象页面双端遮挡问题的终极方案 
   ======================================== */

/* 1. 让内容区变成 Flex 盒子，元素自然从上往下排 */
#genesis > .app-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    /* 一次性躲开头部：64px 是 header 的高度 */
    padding-top: calc(env(safe-area-inset-top) + 64px) !important; 
    /* 顺手把正确的底部安全区加在这里 */
    padding-bottom: env(safe-area-inset-bottom) !important; 
}

/* 2. 把选项卡拉回地面（取消 fixed），它会自动紧贴着 Header 下方 */
#genesis-content > .top-tabs {
    position: relative !important;
    top: 0 !important;
    flex-shrink: 0 !important; /* 保证选项卡不被挤压 */
    z-index: 99;
}

/* 3. 中间的容器占据剩下的所有屏幕空间 */
#genesis-content > .page-container {
    flex: 1 !important;
    position: relative !important;
    height: auto !important;
    overflow: hidden !important;
}

/* 4. 列表区取消那些乱七八糟的顶部计算！ */
#genesis-content .main-view {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    /* 顶部给 16px 就够了，因为外层已经完美避开了 Header 和 Tabs！ */
    padding: 16px 16px 80px 16px !important; 
    box-sizing: border-box !important;
}

/* ========================================================================== */
/* 🌙 回响 (Echo) 全部子弹窗/面板 - 夜间暗色 (覆盖JS内联白色) */
/* ========================================================================== */

/* 1. 所有overlay内的白色面板 → 深蓝灰 */
body.dark-mode .group-chat-selector-overlay > div,
body.dark-mode .manage-chats-overlay > div,
body.dark-mode .list-menu-overlay > div,
body.dark-mode .all-characters-modal-overlay > div,
body.dark-mode .cover-overlay > div,
body.dark-mode .avatar-menu-content,
body.night .group-chat-selector-overlay > div,
body.night .manage-chats-overlay > div,
body.night .list-menu-overlay > div,
body.night .all-characters-modal-overlay > div,
body.night .cover-overlay > div,
body.night .avatar-menu-content {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    color: #e2e8f0 !important;
}

/* 2. 面板内所有h3/h4标题 */
body.dark-mode .group-chat-selector-overlay h3,
body.dark-mode .group-chat-selector-overlay h4,
body.dark-mode .manage-chats-overlay h3,
body.dark-mode .all-characters-modal-overlay h3,
body.dark-mode .all-characters-modal-overlay h4,
body.night .group-chat-selector-overlay h3,
body.night .group-chat-selector-overlay h4,
body.night .manage-chats-overlay h3,
body.night .all-characters-modal-overlay h3,
body.night .all-characters-modal-overlay h4 {
    color: #e2e8f0 !important;
}

/* 3. 面板内所有p/span次要文字 */
body.dark-mode .group-chat-selector-overlay p,
body.dark-mode .group-chat-selector-overlay span,
body.dark-mode .manage-chats-overlay span,
body.dark-mode .all-characters-modal-overlay p,
body.dark-mode .all-characters-modal-overlay span,
body.night .group-chat-selector-overlay p,
body.night .group-chat-selector-overlay span,
body.night .manage-chats-overlay span,
body.night .all-characters-modal-overlay p,
body.night .all-characters-modal-overlay span {
    color: #94a3b8 !important;
}

/* 4. 角色行/列表项 (白色→深色) */
body.dark-mode .group-chat-selector-overlay label,
body.dark-mode .manage-chats-overlay .manage-chat-item,
body.dark-mode .all-characters-modal-overlay label,
body.dark-mode .all-characters-modal-overlay .char-item,
body.night .group-chat-selector-overlay label,
body.night .manage-chats-overlay .manage-chat-item,
body.night .all-characters-modal-overlay label,
body.night .all-characters-modal-overlay .char-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0 !important;
}

/* 5. 管理对话 - 名字和描述 */
body.dark-mode .manage-chats-overlay .manage-chat-name,
body.night .manage-chats-overlay .manage-chat-name {
    color: #e2e8f0 !important;
}
body.dark-mode .manage-chats-overlay .manage-chat-desc,
body.night .manage-chats-overlay .manage-chat-desc {
    color: #94a3b8 !important;
}

/* 6. 输入框 */
body.dark-mode .group-chat-selector-overlay input,
body.dark-mode .all-characters-modal-overlay input,
body.night .group-chat-selector-overlay input,
body.night .all-characters-modal-overlay input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

/* 7. checkbox覆盖 */
body.dark-mode .group-chat-selector-overlay input[type="checkbox"],
body.night .group-chat-selector-overlay input[type="checkbox"] {
    accent-color: var(--dm-accent) !important;
}

/* 8. 滚动区域内白色div */
body.dark-mode .group-chat-selector-overlay div[style*="overflow"],
body.dark-mode .manage-chats-overlay div[style*="overflow"],
body.dark-mode .all-characters-modal-overlay div[style*="overflow"],
body.night .group-chat-selector-overlay div[style*="overflow"],
body.night .manage-chats-overlay div[style*="overflow"],
body.night .all-characters-modal-overlay div[style*="overflow"] {
    background: transparent !important;
}

/* 9. 面板底部按钮区 */
body.dark-mode .group-chat-selector-overlay div[style*="display: flex"][style*="gap"],
body.dark-mode .manage-chats-overlay div[style*="display: flex"][style*="gap"],
body.night .group-chat-selector-overlay div[style*="display: flex"][style*="gap"],
body.night .manage-chats-overlay div[style*="display: flex"][style*="gap"] {
    background: transparent !important;
}

/* 10. bg-panel (背景设置面板) */
body.dark-mode .bg-panel-content,
body.dark-mode .bg-panel-wrapper,
body.night .bg-panel-content,
body.night .bg-panel-wrapper {
    background: rgba(26, 26, 26, 0.55) !important;
    color: #e2e8f0 !important;
}

/* 11. action-sheet (图片选择等)
   ⚠️ 已移除 .persona-sheet-panel：交还给 apps-styles.css 的 --mm-* 变量驱动，避免 !important 钉死 */
body.dark-mode .action-sheet,
body.night .action-sheet {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode .action-item,
body.night .action-item {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
body.dark-mode .action-item.action-cancel,
body.night .action-item.action-cancel {
    color: #94a3b8 !important;
}

/* ========================================================================== */
/* 🌙 星汇(Starhub) - 夜间暗色 (色卡标准) */
/* ========================================================================== */

/* 1. 底色 → 深蓝灰，干掉粉紫渐变 */
body.dark-mode #starhub,
body.dark-mode #view-home-starhub,
body.dark-mode #view-detail-starhub,
body.night #starhub,
body.night #view-home-starhub,
body.night #view-detail-starhub {
    background: #1A1A1A !important;
    animation: none !important;
}

/* 2. 模糊球 → 极微弱冷光 */
body.dark-mode #starhub .blob-1,
body.night #starhub .blob-1 {
    background: #3b82f6 !important;
    opacity: 0.15 !important;
}
body.dark-mode #starhub .blob-2,
body.night #starhub .blob-2 {
    background: #94a3b8 !important;
    opacity: 0.1 !important;
}

/* 3. 标签 Chips */
body.dark-mode #starhub .chip,
body.night #starhub .chip {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}
body.dark-mode #starhub .chip.active,
body.night #starhub .chip.active {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    border-color: rgba(var(--dm-accent-rgb), 0.3) !important;
    color: var(--dm-accent) !important;
}

/* 4. 玻璃卡片 */
body.dark-mode #starhub .glass,
body.dark-mode .post-card,
body.night #starhub .glass,
body.night .post-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
}

/* 5. 弹窗 */
body.dark-mode #starhub .modal-body,
body.night #starhub .modal-body {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4) !important;
}

/* 6. 文字 */
body.dark-mode #starhub h1, body.dark-mode #starhub h2, body.dark-mode #starhub h3,
body.dark-mode #starhub .nav-title, body.dark-mode #starhub .post-title,
body.night #starhub h1, body.night #starhub h2, body.night #starhub h3,
body.night #starhub .nav-title, body.night #starhub .post-title {
    color: #e2e8f0 !important;
}
body.dark-mode #starhub p,
body.dark-mode #starhub span:not(.chip):not(.badge),
body.dark-mode #starhub .post-desc,
body.night #starhub p,
body.night #starhub span:not(.chip):not(.badge),
body.night #starhub .post-desc {
    color: #94a3b8 !important;
}
body.dark-mode #starhub .post-author,
body.night #starhub .post-author {
    color: var(--dm-accent) !important;
}
body.dark-mode #starhub .post-time,
body.dark-mode #starhub .action-btn,
body.night #starhub .post-time,
body.night #starhub .action-btn {
    color: #64748b !important;
}

/* 7. 边框图标 */
body.dark-mode #starhub .post-actions,
body.night #starhub .post-actions {
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}
body.dark-mode #starhub .post-avatar,
body.night #starhub .post-avatar {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}
body.dark-mode #starhub .btn-icon,
body.night #starhub .btn-icon {
    color: #94a3b8 !important;
}

/* 8. 输入框 */
body.dark-mode #starhub .input-glass,
body.night #starhub .input-glass {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}
body.dark-mode #starhub .input-glass::placeholder,
body.night #starhub .input-glass::placeholder {
    color: #64748b !important;
}

/* === 星汇所有子页面 夜间暗色 === */
body.dark-mode #view-login-starhub,
body.dark-mode #view-editor-starhub,
body.dark-mode #view-detail-starhub,
body.dark-mode #view-home-starhub,
body.dark-mode #view-settings-starhub,
body.dark-mode #view-generator-starhub,
body.dark-mode [id^="view-"][id$="-starhub"],
body.night #view-login-starhub,
body.night #view-editor-starhub,
body.night #view-detail-starhub,
body.night #view-home-starhub,
body.night #view-settings-starhub,
body.night #view-generator-starhub,
body.night [id^="view-"][id$="-starhub"] {
    background: #1A1A1A !important;
    animation: none !important;
}

/* 子页面内的view-container */
body.dark-mode #starhub .view-container,
body.night #starhub .view-container {
    background: transparent !important;
}

/* 登录页卡片 */
body.dark-mode #view-login-starhub .login-card,
body.dark-mode #view-login-starhub .persona-card,
body.dark-mode #view-login-starhub > div > div,
body.night #view-login-starhub .login-card,
body.night #view-login-starhub .persona-card,
body.night #view-login-starhub > div > div {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

/* 发布页 */
body.dark-mode #view-editor-starhub .editor-container,
body.dark-mode #view-editor-starhub > div,
body.night #view-editor-starhub .editor-container,
body.night #view-editor-starhub > div {
    background: rgba(22, 28, 42, 0.55) !important;
}
body.dark-mode #view-editor-starhub input,
body.dark-mode #view-editor-starhub textarea,
body.night #view-editor-starhub input,
body.night #view-editor-starhub textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #view-editor-starhub .chip,
body.night #view-editor-starhub .chip {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}
body.dark-mode #view-editor-starhub .chip.active,
body.night #view-editor-starhub .chip.active {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    border-color: rgba(var(--dm-accent-rgb), 0.3) !important;
    color: var(--dm-accent) !important;
}

/* 帖子详情页 */
body.dark-mode #view-detail-starhub .post-detail,
body.dark-mode #view-detail-starhub .detail-card,
body.dark-mode #view-detail-starhub .glass,
body.dark-mode #view-detail-starhub > div > div,
body.night #view-detail-starhub .post-detail,
body.night #view-detail-starhub .detail-card,
body.night #view-detail-starhub .glass,
body.night #view-detail-starhub > div > div {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}
body.dark-mode #view-detail-starhub h1,
body.dark-mode #view-detail-starhub h2,
body.dark-mode #view-detail-starhub h3,
body.dark-mode #view-detail-starhub .post-title,
body.night #view-detail-starhub h1,
body.night #view-detail-starhub h2,
body.night #view-detail-starhub h3,
body.night #view-detail-starhub .post-title {
    color: #e2e8f0 !important;
}
body.dark-mode #view-detail-starhub p,
body.dark-mode #view-detail-starhub span,
body.night #view-detail-starhub p,
body.night #view-detail-starhub span {
    color: #94a3b8 !important;
}

/* 生成设置弹窗 */
body.dark-mode .modal-settings-starhub,
body.dark-mode [id*="modal-settings-starhub"],
body.dark-mode [id*="generator"],
body.night .modal-settings-starhub,
body.night [id*="modal-settings-starhub"],
body.night [id*="generator"] {
    background: rgba(22, 28, 42, 0.55) !important;
}

/* 详情页底栏 */
body.dark-mode #view-detail-starhub .bottom-bar,
body.dark-mode #view-detail-starhub .comment-bar,
body.night #view-detail-starhub .bottom-bar,
body.night #view-detail-starhub .comment-bar {
    background: rgba(22, 28, 42, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 导航栏 */
body.dark-mode #starhub .nav-bar,
body.dark-mode #starhub .app-header,
body.night #starhub .nav-bar,
body.night #starhub .app-header {
    background: #1A1A1A !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 关注按钮 */
body.dark-mode #starhub .follow-btn,
body.night #starhub .follow-btn {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    color: var(--dm-accent) !important;
    border: 1px solid rgba(var(--dm-accent-rgb), 0.3) !important;
}

/* 返回主页按钮 */
body.dark-mode #view-login-starhub button,
body.night #view-login-starhub button {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    color: var(--dm-accent) !important;
    border: 1px solid rgba(var(--dm-accent-rgb), 0.3) !important;
    box-shadow: none !important;
}

/* === 星汇登录页 强制暗色 === */
body.dark-mode #starhub #view-login-starhub,
body.dark-mode #starhub #view-login-starhub .view-container,
body.night #starhub #view-login-starhub,
body.night #starhub #view-login-starhub .view-container {
    background: #1A1A1A !important;
    background-image: none !important;
    animation: none !important;
}

/* 登录页角色选择卡 */
body.dark-mode #starhub #view-login-starhub .persona-login-card,
body.dark-mode #starhub #view-login-starhub .login-persona-item,
body.dark-mode #starhub #view-login-starhub .glass,
body.dark-mode #starhub #view-login-starhub .glass-card,
body.night #starhub #view-login-starhub .persona-login-card,
body.night #starhub #view-login-starhub .login-persona-item,
body.night #starhub #view-login-starhub .glass,
body.night #starhub #view-login-starhub .glass-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
}

/* 登录页内所有白色div兜底 */
body.dark-mode #starhub #view-login-starhub div[style*="background"] {
    background: transparent !important;
    background-image: none !important;
}
body.dark-mode #starhub #view-login-starhub > div {
    background: transparent !important;
    background-image: none !important;
}

/* 登录页文字 */
body.dark-mode #starhub #view-login-starhub h1,
body.dark-mode #starhub #view-login-starhub h2,
body.dark-mode #starhub #view-login-starhub h3,
body.night #starhub #view-login-starhub h1,
body.night #starhub #view-login-starhub h2,
body.night #starhub #view-login-starhub h3 {
    color: #e2e8f0 !important;
}
body.dark-mode #starhub #view-login-starhub p,
body.dark-mode #starhub #view-login-starhub span,
body.night #starhub #view-login-starhub p,
body.night #starhub #view-login-starhub span {
    color: #94a3b8 !important;
}

/* 帖子详情评论区白色残留 */
body.dark-mode #view-detail-starhub .comment-section,
body.dark-mode #view-detail-starhub .comment-item,
body.dark-mode #view-detail-starhub .comment-list,
body.night #view-detail-starhub .comment-section,
body.night #view-detail-starhub .comment-item,
body.night #view-detail-starhub .comment-list {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #view-detail-starhub .comment-input,
body.night #view-detail-starhub .comment-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

/* 发布页/生成页 强制暗色 */
body.dark-mode #starhub #view-editor-starhub,
body.dark-mode #starhub #view-editor-starhub .view-container,
body.dark-mode #starhub #view-generator-starhub,
body.dark-mode #starhub #view-generator-starhub .view-container,
body.night #starhub #view-editor-starhub,
body.night #starhub #view-editor-starhub .view-container,
body.night #starhub #view-generator-starhub,
body.night #starhub #view-generator-starhub .view-container {
    background: #1A1A1A !important;
    background-image: none !important;
    animation: none !important;
}

/* === 星汇 JS内联白色元素覆盖 === */
body.dark-mode #starhub .persona-item,
body.night #starhub .persona-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
}
body.dark-mode #starhub .detail-glass-panel,
body.night #starhub .detail-glass-panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}
body.dark-mode #starhub .glass.notif-item,
body.night #starhub .glass.notif-item {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #starhub .btn-icon.glass,
body.night #starhub .btn-icon.glass {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

/* === 星汇热搜条 === */
body.dark-mode #starhub .hot-search,
body.dark-mode #starhub-hot-search,
body.night #starhub .hot-search,
body.night #starhub-hot-search {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

/* === 帖子操作菜单 (催更/编辑/转发/删除) === */
body.dark-mode #starhub .detail-menu,
body.dark-mode #starhub .action-sheet,
body.dark-mode #modal-detail-menu-starhub .action-sheet,
body.dark-mode #modal-detail-menu-starhub > div,
body.dark-mode [id*="detail-menu"] > div,
body.night #starhub .detail-menu,
body.night #starhub .action-sheet,
body.night #modal-detail-menu-starhub .action-sheet,
body.night #modal-detail-menu-starhub > div,
body.night [id*="detail-menu"] > div {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #modal-detail-menu-starhub .action-item,
body.dark-mode #modal-detail-menu-starhub div[onclick],
body.night #modal-detail-menu-starhub .action-item,
body.night #modal-detail-menu-starhub div[onclick] {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
body.dark-mode #modal-detail-menu-starhub .action-cancel,
body.dark-mode #modal-detail-menu-starhub div[onclick*="close"],
body.night #modal-detail-menu-starhub .action-cancel,
body.night #modal-detail-menu-starhub div[onclick*="close"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #94a3b8 !important;
}

/* === 转发面板 === */
body.dark-mode #starhub .share-panel,
body.dark-mode #starhub .forward-panel,
body.dark-mode .share-modal > div,
body.dark-mode .forward-modal > div,
body.dark-mode [id*="share-modal"] > div,
body.dark-mode [id*="forward"] > div,
body.night #starhub .share-panel,
body.night #starhub .forward-panel,
body.night .share-modal > div,
body.night .forward-modal > div,
body.night [id*="share-modal"] > div,
body.night [id*="forward"] > div {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    color: #e2e8f0 !important;
}
body.dark-mode .share-panel .share-item,
body.dark-mode .forward-panel .chat-item,
body.dark-mode [id*="share-modal"] .chat-item,
body.dark-mode [id*="forward"] .chat-item,
body.night .share-panel .share-item,
body.night .forward-panel .chat-item,
body.night [id*="share-modal"] .chat-item,
body.night [id*="forward"] .chat-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0 !important;
}
body.dark-mode .share-panel h3,
body.dark-mode .forward-panel h3,
body.dark-mode [id*="forward"] h3,
body.night .share-panel h3,
body.night .forward-panel h3,
body.night [id*="forward"] h3 {
    color: #e2e8f0 !important;
}
body.dark-mode .share-panel span,
body.dark-mode .forward-panel span,
body.night .share-panel span,
body.night .forward-panel span {
    color: #94a3b8 !important;
}

/* === 底部评论输入栏 === */
body.dark-mode #view-detail-starhub .comment-bar,
body.dark-mode #view-detail-starhub .bottom-bar,
body.night #view-detail-starhub .comment-bar,
body.night #view-detail-starhub .bottom-bar {
    background: rgba(22, 28, 42, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* === 星汇 生成设置弹窗 === */
body.dark-mode #modal-settings-starhub > div,
body.dark-mode #modal-settings-starhub div[onclick*="stopPropagation"],
body.night #modal-settings-starhub > div,
body.night #modal-settings-starhub div[onclick*="stopPropagation"] {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #modal-settings-starhub h3,
body.dark-mode #modal-settings-starhub h4,
body.night #modal-settings-starhub h3,
body.night #modal-settings-starhub h4 {
    color: #e2e8f0 !important;
}
body.dark-mode #modal-settings-starhub p,
body.dark-mode #modal-settings-starhub span,
body.dark-mode #modal-settings-starhub label,
body.night #modal-settings-starhub p,
body.night #modal-settings-starhub span,
body.night #modal-settings-starhub label {
    color: #94a3b8 !important;
}
body.dark-mode #modal-settings-starhub input,
body.dark-mode #modal-settings-starhub textarea,
body.dark-mode #modal-settings-starhub select,
body.night #modal-settings-starhub input,
body.night #modal-settings-starhub textarea,
body.night #modal-settings-starhub select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #modal-settings-starhub div[style*="checkbox"],
body.dark-mode #modal-settings-starhub label[style],
body.night #modal-settings-starhub div[style*="checkbox"],
body.night #modal-settings-starhub label[style] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0 !important;
}

/* === 帖子详情底栏 === */
body.dark-mode .detail-bottom-bar,
body.dark-mode #view-detail-starhub .detail-bottom-bar,
body.night .detail-bottom-bar,
body.night #view-detail-starhub .detail-bottom-bar {
    background: rgba(22, 28, 42, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

/* === 消息中心/通知弹窗 === */
body.dark-mode #modal-notif-starhub > div,
body.dark-mode #modal-notif-starhub div[style*="background"],
body.dark-mode .notif-panel,
body.night #modal-notif-starhub > div,
body.night #modal-notif-starhub div[style*="background"],
body.night .notif-panel {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #modal-notif-starhub h3,
body.dark-mode #modal-notif-starhub h4,
body.night #modal-notif-starhub h3,
body.night #modal-notif-starhub h4 {
    color: #e2e8f0 !important;
}
body.dark-mode #modal-notif-starhub p,
body.dark-mode #modal-notif-starhub span,
body.night #modal-notif-starhub p,
body.night #modal-notif-starhub span {
    color: #94a3b8 !important;
}

/* === 设置下拉菜单 (收藏/切换/退出) === */
body.dark-mode #starhub .settings-dropdown,
body.dark-mode #starhub .user-menu,
body.dark-mode #starhub .dropdown-menu,
body.dark-mode #starhub div[style*="我的收藏"],
body.night #starhub .settings-dropdown,
body.night #starhub .user-menu,
body.night #starhub .dropdown-menu {
    background: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #starhub .settings-dropdown div,
body.dark-mode #starhub .user-menu div,
body.dark-mode #starhub .dropdown-menu div,
body.night #starhub .settings-dropdown div,
body.night #starhub .user-menu div,
body.night #starhub .dropdown-menu div {
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* === 帖子详情页 view-post-detail-starhub === */
body.dark-mode #view-post-detail-starhub,
body.dark-mode .sub-window,
body.night #view-post-detail-starhub,
body.night .sub-window {
    background: #1A1A1A !important;
    background-image: none !important;
    animation: none !important;
}

/* === 全局 select-option 下拉暗色 === */
body.dark-mode .select-option,
body.dark-mode .sb-select-option,
body.night .select-option,
body.night .sb-select-option {
    background: transparent !important;
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
body.dark-mode .select-option:hover,
body.dark-mode .sb-select-option:hover,
body.night .select-option:hover,
body.night .sb-select-option:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .select-option.active,
body.dark-mode .select-option[style*="background:rgba(102"],
body.night .select-option.active {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
    background-color: rgba(var(--dm-accent-rgb), 0.15) !important;
}

/* 下拉容器 */
body.dark-mode .select-dropdown,
body.dark-mode .sb-select-dropdown,
body.dark-mode [class*="select-dropdown"],
body.dark-mode div[style*="background: rgb(255, 255, 255)"][style*="border-radius"],
body.night .select-dropdown,
body.night .sb-select-dropdown,
body.night [class*="select-dropdown"] {
    background: rgba(25, 35, 52, 0.55) !important;
    background-color: rgba(25, 35, 52, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 设置齿轮下拉 */
body.dark-mode #starhub div[style*="position: absolute"][style*="background: white"],
body.dark-mode #starhub div[style*="position: absolute"][style*="background: rgb(255"],
body.dark-mode #starhub div[style*="position:absolute"][style*="background:white"],
body.dark-mode #starhub div[style*="position:absolute"][style*="background:rgb(255"],
body.night #starhub div[style*="position: absolute"][style*="background: white"],
body.night #starhub div[style*="position: absolute"][style*="background: rgb(255"] {
    background: rgba(26, 26, 26, 0.55) !important;
    background-color: rgba(26, 26, 26, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    color: #e2e8f0 !important;
}
body.dark-mode #starhub div[style*="position: absolute"] > div,
body.dark-mode #starhub div[style*="position:absolute"] > div,
body.night #starhub div[style*="position: absolute"] > div {
    color: #e2e8f0 !important;
}

/* ========================================================================== */
/* 🌙 焕彩 (Taro) - 夜间暗色 */
/* ========================================================================== */

/* --- 焕彩样式已移至 appearance-styles.css --- */
/* --- 云听夜间样式已迁移至 music-styles.css，此处不再覆盖 --- */

/* 壁纸预览保持透明，显示真实壁纸 */
body.dark-mode .taro-wp-preview,
body.night .taro-wp-preview {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* === 焕彩修复 === */
/* 壁纸预览 - 必须透明显示壁纸 */
body.dark-mode .taro-wp-preview,
body.dark-mode .taro-wp-preview-home,
body.dark-mode .taro-wp-preview-lock,
body.night .taro-wp-preview,
body.night .taro-wp-preview-home,
body.night .taro-wp-preview-lock {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 预览内的模拟UI */
body.dark-mode .taro-preview-ui,
body.night .taro-preview-ui {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

/* === 万象 所有弹窗/面板白色通杀 === */
body.dark-mode #treasure .modal-body,
body.dark-mode #treasure .modal-content,
body.dark-mode #treasure .config-panel,
body.dark-mode #treasure .scheme-panel,
body.dark-mode #treasure .settings-modal,
body.dark-mode #treasure div[style*="background: white"],
body.dark-mode #treasure div[style*="background: #fff"],
body.dark-mode #treasure div[style*="background: rgb(255"],
body.dark-mode #treasure div[style*="background:white"],
body.dark-mode #treasure div[style*="background:#fff"],
body.dark-mode #treasure div[style*="background:rgb(255"],
body.night #treasure .modal-body,
body.night #treasure .modal-content,
body.night #treasure .config-panel {
    background: rgba(26, 26, 26, 0.9) !important;
    background-color: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    color: #e2e8f0 !important;
}

/* 万象内所有input */
body.dark-mode #treasure input,
body.dark-mode #treasure textarea,
body.dark-mode #treasure select,
body.night #treasure input,
body.night #treasure textarea,
body.night #treasure select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

/* 万象内标题 */
body.dark-mode #treasure h3,
body.dark-mode #treasure h4,
body.night #treasure h3,
body.night #treasure h4 {
    color: #e2e8f0 !important;
}
body.dark-mode #treasure p,
body.dark-mode #treasure span,
body.dark-mode #treasure label,
body.night #treasure p,
body.night #treasure span,
body.night #treasure label {
    color: #94a3b8 !important;
}

/* 万象按钮 */
body.dark-mode #treasure button,
body.night #treasure button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

/* ========================================================================== */
/* 🌙 支付/礼物/剧情卡片/朋友圈 - 夜间暗色 */
/* ========================================================================== */

/* 1. 业务卡片（新皮肤卡 .sk-card 自带夜间变量，排除掉避免被反色覆盖）*/
body.dark-mode .pay-card, body.dark-mode .gift-bubble,
body.dark-mode .scenario-card:not(.sk-card), body.dark-mode .card-restaurant:not(.sk-card),
body.dark-mode .card-car:not(.sk-card), body.dark-mode .card-delivery:not(.sk-card),
body.dark-mode .card-express:not(.sk-card), body.dark-mode .card-flight:not(.sk-card),
body.dark-mode .card-train:not(.sk-card),
body.dark-mode .card-hotel:not(.sk-card), body.dark-mode .card-weather:not(.sk-card),
body.dark-mode .card-calendar:not(.sk-card),
body.night .pay-card, body.night .gift-bubble,
body.night .scenario-card:not(.sk-card), body.night .card-restaurant:not(.sk-card),
body.night .card-car:not(.sk-card), body.night .card-delivery:not(.sk-card),
body.night .card-express:not(.sk-card), body.night .card-flight:not(.sk-card),
body.night .card-train:not(.sk-card),
body.night .card-hotel:not(.sk-card), body.night .card-weather:not(.sk-card),
body.night .card-calendar:not(.sk-card) {
    background: rgba(26, 26, 26, 0.5) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* 活动票卡（高定纸质）暗黑模式：保留纸面白底，仅调整外圈阴影 */
body.dark-mode .scenario-card.card-event:not(.sk-card),
body.night .scenario-card.card-event:not(.sk-card) {
    background: var(--ev-pure-white) !important;
    border: 1px solid var(--ev-border-light) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 10px 30px -10px rgba(0,0,0,0.5) !important;
}

/* 2. 卡片内部线条 */
body.dark-mode .pay-card [class*="-header"],
body.dark-mode .scenario-card:not(.sk-card) [class*="-header"],
body.dark-mode .pay-card [class*="-info"],
body.dark-mode .scenario-card:not(.sk-card) [class*="-info"],
body.night .pay-card [class*="-header"],
body.night .scenario-card:not(.sk-card) [class*="-header"] {
    border-color: rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
}

/* 3. 卡片文字 */
body.dark-mode .pc-amount, body.dark-mode .pc-title,
body.night .pc-amount, body.night .pc-title {
    color: #e2e8f0 !important;
}
body.dark-mode .pc-desc, body.night .pc-desc {
    color: #94a3b8 !important;
}

/* 4. 朋友圈 */
body.dark-mode .moments-page,
body.dark-mode #view-moments,
body.dark-mode .feed-container,
body.night .moments-page,
body.night #view-moments,
body.night .feed-container {
    background: transparent !important;
}
body.dark-mode .comment-section,
body.dark-mode .feed-comments,
body.night .comment-section,
body.night .feed-comments {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}
body.dark-mode .likes-area,
body.night .likes-area {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* === 朋友圈暗色 === */
/* 帖子卡片容器 */
body.dark-mode .moments-page div[style*="rgba(255"],
body.dark-mode .moments-page .moment-card,
body.dark-mode .moments-page .feed-item,
body.dark-mode .moments-page > div > div,
body.night .moments-page div[style*="rgba(255"],
body.night .moments-page .moment-card,
body.night .moments-page .feed-item {
    background: rgba(26, 26, 26, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: #e2e8f0 !important;
}

/* 头像背景 */
body.dark-mode .feed-avt,
body.night .feed-avt {
    background: transparent !important;
}

/* 按钮 */
body.dark-mode .moment-like-btn,
body.dark-mode .moment-comment-toggle-btn,
body.dark-mode .moments-page .action-btn,
body.night .moment-like-btn,
body.night .moment-comment-toggle-btn,
body.night .moments-page .action-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}

/* 封面区 */
body.dark-mode .moments-page .cover-area,
body.dark-mode .moments-page .moment-cover,
body.night .moments-page .cover-area {
    background: transparent !important;
}

/* 底部导航 */
body.dark-mode .moments-page .bottom-nav,
body.dark-mode .moments-page .tab-bar,
body.night .moments-page .bottom-nav {
    background: rgba(22, 28, 42, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 文字 */
body.dark-mode .moments-page h3,
body.dark-mode .moments-page h4,
body.night .moments-page h3 {
    color: #e2e8f0 !important;
}
body.dark-mode .moments-page p,
body.dark-mode .moments-page span,
body.night .moments-page p,
body.night .moments-page span {
    color: #94a3b8 !important;
}

/* ========================================================================== */
/* 💎 琳琅 (Treasure) 冰蓝星海风格 */
/* ========================================================================== */
body.dark-mode #treasure, body.night #treasure {
    background: transparent !important;
}
body.dark-mode .treasure-header, body.night .treasure-header {
    background: #1A1A1A !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .treasure-title, body.night .treasure-title { color: #e2e8f0 !important; }
body.dark-mode .treasure-back, body.night .treasure-back,
body.dark-mode .treasure-header i, body.night .treasure-header i { color: #94a3b8 !important; }
body.dark-mode .treasure-search-box, body.night .treasure-search-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .treasure-search-input, body.night .treasure-search-input { color: #e2e8f0 !important; }
body.dark-mode .treasure-nav-bar, body.night .treasure-nav-bar {
    background: #1A1A1A !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .treasure-nav-icon, body.night .treasure-nav-icon { color: #7a8a9a !important; }
body.dark-mode .treasure-nav-icon.active, body.night .treasure-nav-icon.active { color: var(--dm-accent) !important; }
body.dark-mode .treasure-w-card, body.night .treasure-w-card,
body.dark-mode .treasure-cart-item, body.night .treasure-cart-item,
body.dark-mode .treasure-order-card, body.night .treasure-order-card,
body.dark-mode .treasure-t-item, body.night .treasure-t-item,
body.dark-mode .treasure-trans-list, body.night .treasure-trans-list {
    background: rgba(26, 26, 26, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.dark-mode .treasure-w-title, body.night .treasure-w-title,
body.dark-mode .treasure-c-name, body.night .treasure-c-name,
body.dark-mode .treasure-t-name, body.night .treasure-t-name,
body.dark-mode .treasure-hero-title, body.night .treasure-hero-title,
body.dark-mode .treasure-section-title span, body.night .treasure-section-title span { color: #e2e8f0 !important; }
body.dark-mode .treasure-w-price, body.night .treasure-w-price,
body.dark-mode .treasure-c-price, body.night .treasure-c-price { color: var(--dm-accent) !important; }
body.dark-mode .treasure-hero-desc, body.night .treasure-hero-desc,
body.dark-mode .treasure-bottom-hint, body.night .treasure-bottom-hint,
body.dark-mode .treasure-t-time, body.night .treasure-t-time { color: #94a3b8 !important; }
body.dark-mode .treasure-section-title i, body.night .treasure-section-title i,
body.dark-mode .treasure-cat-box, body.night .treasure-cat-box,
body.dark-mode .treasure-w-btn, body.night .treasure-w-btn { color: var(--dm-accent) !important; }
body.dark-mode .treasure-cat-box, body.night .treasure-cat-box,
body.dark-mode .treasure-w-btn, body.night .treasure-w-btn {
    background: rgba(var(--dm-accent-rgb), 0.15) !important;
}
body.dark-mode .treasure-wallet-card, body.night .treasure-wallet-card {
    background: #0A0A0A !important;
    box-shadow: none !important;
}
body.dark-mode .treasure-action-btn, body.night .treasure-action-btn {
    background: rgba(26, 26, 26, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .treasure-action-btn .btn-icon, body.night .treasure-action-btn .btn-icon {
    background: rgba(255, 255, 255, 0.06) !important; color: var(--dm-accent) !important;
}
body.dark-mode .treasure-action-btn .btn-label, body.night .treasure-action-btn .btn-label { color: #e2e8f0 !important; }
body.dark-mode .treasure-action-btn .btn-desc, body.night .treasure-action-btn .btn-desc { color: #94a3b8 !important; }
body.dark-mode .treasure-main-card, body.night .treasure-main-card { background: transparent !important; }

/* ========================================================================== */
/* 🌙 山河卷 (Worldbook) 暗色 - 已迁移到 worldbook-styles.css 的变量覆盖 */
/* 旧版蓝灰色块/!important 全部废弃，避免覆盖新版莫兰迪国风色卡 */
/* ========================================================================== */

/* === 琳琅 产品区白色 === */
body.dark-mode #treasure-products,
body.dark-mode .treasure-waterfall,
body.dark-mode .treasure-products,
body.night #treasure-products,
body.night .treasure-waterfall {
    background: transparent !important;
    background-color: transparent !important;
}
body.dark-mode .treasure-cat-box,
body.night .treasure-cat-box {
    background: rgba(var(--dm-accent-rgb), 0.1) !important;
    border: 1px solid rgba(var(--dm-accent-rgb), 0.2) !important;
}

/* === 琳琅 所有子页面通杀 === */
/* body.dark-mode #treasure > div - removed */
body.dark-mode #treasure [id*="treasure-"],
body.dark-mode #treasure-order-list,
body.dark-mode #treasure-cart,
body.dark-mode #treasure-wallet,
body.dark-mode #treasure-orders,
/* body.night #treasure > div - removed */
body.night #treasure [id*="treasure-"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* 琳琅内所有div的浅色背景 */
body.dark-mode #treasure div[style*="background:#F9F6F2"],
body.dark-mode #treasure div[style*="background: #F9F6F2"],
body.dark-mode #treasure div[style*="background:var(--treasure-gray-light, #f7f7f7)"],
body.dark-mode #treasure div[style*="background: #f"],
body.dark-mode #treasure div[style*="background:#eef"],
body.night #treasure div[style*="background:#F9F6F2"],
body.night #treasure div[style*="background: #F9F6F2"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* === 琳琅 底部提示+剩余白色 === */
body.dark-mode .treasure-bottom-hint,
body.dark-mode div.treasure-bottom-hint,
body.night .treasure-bottom-hint {
    background: transparent !important;
    background-color: transparent !important;
    color: #94a3b8 !important;
}

/* 琳琅hero区 */
body.dark-mode .treasure-hero,
body.dark-mode .treasure-hero-card,
body.night .treasure-hero {
    background: transparent !important;
}

/* 通杀琳琅内所有#F9F6F2 */
body.dark-mode #treasure *,
body.night #treasure * {
    --treasure-bg: transparent;
}

/* 琳琅骨架卡片 */
body.dark-mode .treasure-skeleton-card,
body.night .treasure-skeleton-card {
    background: rgba(26, 26, 26, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* === 琳琅 详情页白色 === */
body.dark-mode .treasure-w-img-box,
body.dark-mode .treasure-detail-img-box,
body.dark-mode .treasure-detail-img-wrap,
body.night .treasure-w-img-box,
body.night .treasure-detail-img-box,
body.night .treasure-detail-img-wrap {
    background: rgba(26, 26, 26, 0.5) !important;
    background-color: rgba(26, 26, 26, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* === 琳琅 各子页面精确底色 === */
body.dark-mode .treasure-detail-page,
body.dark-mode .treasure-detail-content,
body.night .treasure-detail-page,
body.night .treasure-detail-content {
    background: var(--dm-bg-deep, #000000) !important;
}

/* 商城首页/购物车/订单/钱包 */
body.dark-mode #treasure-products,
body.dark-mode #treasure-cart,
body.dark-mode #treasure-orders,
body.dark-mode #treasure-wallet,
body.night #treasure-products,
body.night #treasure-cart,
body.night #treasure-orders,
body.night #treasure-wallet {
    background: var(--dm-bg-deep, #000000) !important;
    background-image: none !important;
}

/* === 山河卷 背景渐变强杀 - 已废弃，改由 worldbook-styles.css 变量覆盖 === */
/* === 山河卷 编辑层需要底色 - 已废弃，改由 worldbook-styles.css 变量覆盖 === */

/* === 心声 Echo 卡片 === */
body.dark-mode #app-echo .echo-card,
body.dark-mode #app-echo .echo-item,
body.dark-mode #app-echo .psych-card,
body.dark-mode #app-echo [class*="echo-card"],
body.dark-mode #app-echo [class*="psych-"],
body.night #app-echo .echo-card,
body.night #app-echo .psych-card {
    background: rgba(26, 26, 26, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: #e2e8f0 !important;
}

/* === 山河卷 编辑层底色 - 已废弃，由 worldbook-styles.css 变量驱动 === */

/* 星遇档案textarea最小高度 */
#char-describe {
    min-height: 200px !important;
    height: auto !important;
}
#char-behavior-fingerprint {
    min-height: 120px !important;
    height: auto !important;
}
#char-digital-style {
    min-height: 120px !important;
    height: auto !important;
}


/* ==========================================
   性能优化：批量元素关闭 backdrop-filter
   - 列表项/卡片同屏数量多，每个独立触发 GPU blur
   - 小面积元素的 blur 肉眼几乎不可见
   - 弹窗/面板/导航栏保持不变
   ========================================== */

/* 列表项：同屏 20+ 个，关闭 blur */
.list-item,
body.dark-mode .list-item {
}

/* 网格卡片：同屏 10+ 个，关闭 blur */
.grid-card,
body.dark-mode .grid-card {
}

/* 滑动卡片：关闭 blur */
.swipe-card,
body.dark-mode .swipe-card {
}

/* 重度 blur 封顶：30px/25px → 16px（视觉差异极小，GPU降40%） */

/* ══════════════════════════════════════════════════
   单聊 / 群聊 导航栏 & 天气弹窗 (migrated from index.html <style> block 3)
   ══════════════════════════════════════════════════ */

/* ══════ 语音气泡 ══════ */
.voice-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 0;
    font-size: 15px;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
}
.voice-bubble.other {
    background: var(--bubble-other-bg);
    border: none;
    color: var(--bubble-other-text);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.voice-bubble.me {
    background: var(--bubble-me-bg);
    color: var(--bubble-me-text);
}
.voice-bubble .voice-waves,
.voice-bubble .voice-dur {
    display: block;
    opacity: 1;
}

/* ══════ 头部层级 & 遮罩指针事件 ══════ */
.chat-header {
    position: fixed !important;
    z-index: 1000;
}
.music-panel-overlay:not(.active),
.custom-modal-overlay:not(.active),
.overlay-page:not(.open) {
    pointer-events: none;
}
.music-panel-overlay.active,
.custom-modal-overlay.active,
.overlay-page.open {
    pointer-events: auto;
}

/* ══════ 拓展栏弹窗淡入淡出 ══════ */
.clean-drawer {
    transition: opacity 0.25s ease;
}

/* ══════ 导航栏 ══════ */
.single-chat-page .echo-navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--navbar-bg);
    transition: background 0.8s;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
}
body.night .single-chat-page .echo-navbar { background: var(--navbar-bg); }

/* ══════ 单聊导航栏（双行布局，参考 单聊样式.txt） ══════ */
.single-chat-page .topbar {
    display: flex; flex-direction: column;
    border-bottom: 1px solid var(--navbar-border);
    transition: border-color 0.8s;
    position: relative;
}

/* 返回/菜单按钮 */
.single-chat-page .tb-back {
    position: absolute; left: 8px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 10;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--topbar-btn-icon-color, #333333); cursor: pointer;
}
.single-chat-page .tb-menu {
    position: absolute; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 10;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--topbar-btn-icon-color, #333333); cursor: pointer;
}
.single-chat-page .tb-back:active,
.single-chat-page .tb-menu:active { opacity: 0.6; transform: scale(0.9); }

/* 顶行容器 */
.single-chat-page .nav-top-row {
    display: flex; justify-content: space-between; align-items: center;
    height: 56px; width: 100%; position: relative;
    padding: 0 40px; box-sizing: border-box;
}
.single-chat-page .nav-top-row .ava-wrap .ring { display: none; }
.single-chat-page .nav-top-row::before {
    content: ''; position: absolute; left: 20px; right: 20px; top: 50%; height: 1px;
    background: var(--navbar-border); z-index: 1; transition: background 0.8s;
}

/* 时间天气居中 */
.single-chat-page .meta-text {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: var(--navbar-bg, #ffffff); padding: 0 8px;
    font-size: 11px; color: var(--topbar-sub, #888888); display: flex; align-items: center; gap: 6px;
    z-index: 2; white-space: nowrap; transition: background 0.8s, color 0.8s;
}

/* 两侧容器 */
.single-chat-page .nav-side {
    display: flex; align-items: center; gap: 6px;
    background: var(--navbar-bg, #ffffff); z-index: 2; padding: 0 4px;
    width: auto; height: auto;
    min-width: 0;
    max-width: calc(50% - 30px);
    transition: background 0.8s;
}
.single-chat-page .nav-side.right-side { flex-direction: row-reverse; }

/* 头像 */
.single-chat-page .nav-top-row .ava-wrap {
    flex-shrink: 0; width: 36px; height: 36px; position: relative;
}
.single-chat-page .nav-top-row .ava-wrap img {
    width: 100%; height: 100%; border-radius: 10px; object-fit: cover;
    border: 1px solid var(--navbar-border); transition: border-color 0.8s;
}

/* 名字 */
.single-chat-page .p-name {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 600;
    color: var(--topbar-name-color, #333333);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: relative; z-index: 3;
    transition: color 0.8s;
}

/* 旋转环（非顶部 ava-wrap 使用，如其他地方） */
.single-chat-page .ava-wrap .ring {
    position: absolute; inset: -2px; border-radius: 10px;
    border: 1.5px dashed var(--topbar-bio-border);
    animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 居中时间天气 */
.single-chat-page .meta-text {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: var(--navbar-bg); padding: 0 8px;
    font-size: 10px; color: var(--topbar-sub); font-weight: 500;
    display: flex; align-items: center; gap: 6px; z-index: 2;
    transition: background 0.8s, color 0.8s; white-space: nowrap;
}
.single-chat-page .meta-text .clickable { cursor: pointer; transition: opacity 0.2s; }
.single-chat-page .meta-text .clickable:active { opacity: 0.6; }
.single-chat-page .meta-text .meta-sep { opacity: 0.3; }
#chat-time { border-bottom: 1px dashed var(--time-underline-color); padding-bottom: 1px; }
#g-chat-time { border-bottom: 1px dashed var(--time-underline-color); padding-bottom: 1px; cursor: pointer; }
#g-w-label { cursor: pointer; }
.single-chat-page .g-meta .meta-sep { opacity: 0.4; }

/* 下行：bio居中 + 羽毛笔 */
.single-chat-page .nav-bottom-row {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 6px 12px 10px;
}
.single-chat-page .bio-wrap {
    display: flex; align-items: center; gap: 4px;
    background: rgba(107,78,88,0.04); padding: 3px 12px;
    border-radius: 12px; flex: 1; max-width: 340px; transition: background 0.8s;
}
.single-chat-page .p-bio {
    border: none; background: transparent; font-size: 10px;
    color: var(--topbar-sub); width: 100%; outline: none;
    text-align: center; transition: color 0.8s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.single-chat-page .p-bio::placeholder { color: rgba(154,139,144,0.4); }
.single-chat-page .bio-refresh {
    font-size: 12px; color: var(--topbar-sub); cursor: pointer;
    opacity: 0.6; flex-shrink: 0; transition: 0.2s;
}
.single-chat-page .bio-refresh:active { opacity: 1; transform: rotate(90deg); }

/* 旧 person-row 隐藏（结构已迁移） */
.single-chat-page .person-row { display: none; }
.single-chat-page .p-info { display: none; }
.single-chat-page .p-meta { display: none; }
.single-chat-page .bottle-btn,
.single-chat-page .p-bottle,
.single-chat-page .g-bottle {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%; flex-shrink: 0;
    background: transparent; transition: background 0.2s;
    overflow: visible;
}
.single-chat-page .bottle-btn:active { background: rgba(107, 78, 88, 0.05); }

.custom-pen-icon {
    width: 18px; height: 18px;
    background-color: var(--topbar-meta-color);
    -webkit-mask-image: url('../assets/icons/featherpen.png');
    mask-image: url('../assets/icons/featherpen.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.8;
    transition: background-color 0.3s, transform 0.2s;
}

/* 单聊：点击触发 is-clicked */
.bottle-btn.is-clicked .custom-pen-icon {
    background-color: var(--chatitem-pin-color);
    animation: pen-tap 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pen-tap {
    0%   { transform: scale(1) rotate(0deg); }
    40%  { transform: scale(0.8) rotate(-15deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* 群聊：等待AI时触发 is-waiting（替代 wobbling） */
.bottle-btn.is-waiting .custom-pen-icon,
.bottle-btn.wobbling .custom-pen-icon {
    background-color: var(--bottle-wobble-color);
    animation: pen-writing 0.8s ease-in-out infinite;
    transform-origin: 10% 90%;
}
@keyframes pen-writing {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(2px, 4px) rotate(-15deg); }
    40%  { transform: translate(4px, -1px) rotate(5deg); }
    60%  { transform: translate(7px, 3px) rotate(-10deg); }
    80%  { transform: translate(2px, -2px) rotate(10deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
.single-chat-page .p-bio { font-size: 11px; color: var(--topbar-bio-color); border: none; background: transparent; outline: none; width: 100%; padding: 0; font-family: inherit; cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.8s; }
.single-chat-page .p-bio:focus { color: var(--topbar-name-color); }
.single-chat-page .p-meta { font-size: 10px; color: var(--topbar-meta-color); display: flex; align-items: center; gap: 5px; margin-top: 1px; transition: color 0.8s; }
.single-chat-page .p-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--topbar-dot-color); box-shadow: 0 0 4px rgba(102,187,106,0.4); }

/* ══════ 群聊导航栏 极简下划线风格 ══════ */

/* navbar 改为横排，底部强调线 */
.single-chat-page.is-group .echo-navbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: max(8px, env(safe-area-inset-top)) 8px 8px;
    border-bottom: 2px solid var(--accent);
    pointer-events: auto;
}

/* 隐藏单聊顶栏 */
.single-chat-page.is-group .topbar,
.single-chat-page.is-group .tb-weather { display: none; }

/* 버튼 순서: tb-back(1) | group-row(2) | tb-menu(3) */
.single-chat-page.is-group .tb-back { order: 1; }
.single-chat-page.is-group .group-row { order: 2; }
.single-chat-page.is-group .tb-menu  { order: 3; }

.single-chat-page.is-group .tb-back,
.single-chat-page.is-group .tb-menu {
    position: static;
    top: auto; left: auto; right: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    width: 36px; height: 36px;
}
.single-chat-page.is-group .tb-back:active,
.single-chat-page.is-group .tb-menu:active { transform: scale(0.85); opacity: 0.6; }

/* group-row 占满中间，透明无卡片 */
.single-chat-page .group-row {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

.single-chat-page .g-grid {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--group-grid-bg); border: 1px solid var(--group-grid-border);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px;
    flex-shrink: 0; transition: background 0.3s;
}
/* 自定义群聊头像：取消 grid 布局，让图片填满整个容器 */
.single-chat-page .g-grid.g-single-avatar {
    display: block;
    padding: 0;
    gap: 0;
}
.single-chat-page .g-grid img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.single-chat-page .g-grid .g-more { background: var(--group-more-bg); color: var(--group-more-text); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; transition: 0.3s; }

/* g-info 改用 flexbox 布局，避免 grid 压缩头像 */
.single-chat-page .g-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: visible;
}
.single-chat-page .g-name-row { display: flex; align-items: center; gap: 4px; }
.single-chat-page .g-bio      { width: 100%; }
.single-chat-page .g-members  { display: flex; align-items: center; }
.single-chat-page .g-meta     { display: none; } /* 暂时隐藏，如果需要可以放到 g-name-row 里 */
.single-chat-page .g-name { font-size: 14px; font-weight: 600; color: var(--group-name-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
.single-chat-page .g-count { font-size: 11px; color: var(--topbar-sub); font-weight: 500; transition: color 0.3s; }
.single-chat-page .g-bottle { cursor: pointer; display: flex; align-items: center; padding: 2px; margin-left: auto; }
.single-chat-page .g-bottle img { width: 16px; height: 16px; opacity: 0.8; }
.single-chat-page .g-bio { width: 100%; border: none; background: transparent; font-size: 11px; color: var(--group-bio-color); outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
.single-chat-page .g-bio:focus { color: var(--group-name-color); }

/* 第三行：成员 + 时间天气并排（gc-row-3 风格） */
.single-chat-page .g-members-meta-row {
    display: flex; align-items: center; justify-content: space-between;
}
/* 用 CSS 重用 g-members 和 g-meta 并排 */
.single-chat-page .g-members {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
    width: max-content !important;
}
.single-chat-page .g-members img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--group-member-border);
    margin-left: -6px;
    transition: border-color 0.3s;
    flex-shrink: 0 !important;
    display: block !important;
}
.single-chat-page .g-members img:first-child { margin-left: 0; }
.single-chat-page .g-members .g-m-more {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 50%;
    background: var(--group-m-more-bg);
    color: var(--group-m-more-text);
    border: 1.5px solid var(--group-member-border);
    margin-left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    transition: 0.3s;
    flex-shrink: 0 !important;
}

/* g-meta：圆角背景（gc-meta 风格），隐藏前三个子元素 */
.single-chat-page .g-meta {
    display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--topbar-sub);
    background: transparent; padding: 0; border-radius: 0; transition: color 0.3s;
}
.single-chat-page .g-meta span:nth-child(1) { display: none; }
#g-chat-time { cursor: pointer; border-bottom: 1px dashed var(--time-underline-color); padding-bottom: 1px; transition: border-color 0.3s; }

/* ══════ nav-line ══════ */
.single-chat-page .nav-line { height: 1px; background: linear-gradient(90deg, transparent, var(--navbar-border) 20%, var(--navbar-border) 80%, transparent); transition: background 0.8s; }

/* ══════ 天气弹窗 ══════ */
.single-chat-page .w-mask { position: fixed; inset: 0; background: rgba(100,120,140,0.1); backdrop-filter: blur(2px); z-index: 200; opacity: 0; pointer-events: none; transition: 0.3s; }
.single-chat-page .w-mask.show { opacity: 1; pointer-events: auto; }
.single-chat-page .w-popup { position: fixed; top: 48px; right: 50px; width: 170px; background: var(--glass-bg); backdrop-filter: var(--navbar-blur); border-radius: 14px; border: 1px solid var(--glass-border); box-shadow: 0 8px 30px rgba(0,0,0,0.08); z-index: 210; padding: 8px 8px 4px 8px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.95); transition: all 0.25s cubic-bezier(0.2,0.8,0.2,1); height: fit-content; max-height: 300px; overflow: hidden; }
.single-chat-page .w-popup.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.single-chat-page .wp-title { font-size: 9px; color: var(--topbar-meta-color); letter-spacing: 1.5px; font-weight: 700; padding: 4px 6px 2px; margin-bottom: 0; }
.single-chat-page .w-popup .wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; grid-auto-rows: min-content; margin-bottom: 0; height: auto !important; }
.single-chat-page .wp-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: 10px; cursor: pointer; transition: 0.2s; min-height: 0; height: auto; max-height: 50px; }
.single-chat-page .wp-item:active { transform: scale(0.92); }
.single-chat-page .wp-item.active { background: var(--drawer-item-active-bg); }
body.night .single-chat-page .wp-item.active { background: var(--drawer-item-active-bg); }
.single-chat-page .wp-item .wp-emoji { font-size: 18px; line-height: 1; display: block; }
.single-chat-page .wp-item .wp-label { font-size: 9px; color: var(--topbar-meta-color); font-weight: 600; line-height: 1.2; }
.single-chat-page .wp-item.active .wp-label { color: var(--chatitem-pin-color); }

/* ══════ 全屏天气效果 ══════ */
.weather-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; display: none; }
.weather-layer.active { display: block; }
.weather-layer.weather-clip-group { clip-path: inset(var(--weather-clip-top, 120px) 0 0 0); }
.w-sunny .sun { position: absolute; top: -30px; right: -30px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,213,79,0.15) 0%, transparent 70%); animation: sun-p 4s ease-in-out infinite; will-change: transform, opacity; }
@keyframes sun-p { 0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:.9} }
.w-rain .drop { position: absolute; width: 1px; background: linear-gradient(to bottom, transparent, rgba(107,78,88,0.25)); animation: rain-f linear infinite; will-change: transform, opacity; }
body.night .w-rain .drop, body.dark-mode .w-rain .drop { background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15)); }
@keyframes rain-f { 0%{transform:translateY(-10px);opacity:0}10%{opacity:1}100%{transform:translateY(100vh);opacity:0} }
.w-snow .flake { position: absolute; background: rgba(255,255,255,0.75); border-radius: 50%; animation: snow-f linear infinite; will-change: transform, opacity; }
@keyframes snow-f { 0%{transform:translateY(-10px) translateX(0);opacity:0}10%{opacity:.8}90%{opacity:.8}100%{transform:translateY(100vh) translateX(25px);opacity:0} }
.w-firefly .fly { position: absolute; border-radius: 50%; background: rgba(255,230,150,0.75); box-shadow: 0 0 6px 2px rgba(255,220,100,0.3); animation: fly-m linear infinite; will-change: transform, opacity; }
@keyframes fly-m { 0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.8}30%{opacity:.3}50%{transform:translate(var(--tx,30px),var(--ty,-20px)) scale(1);opacity:.9}65%{opacity:.4}80%{opacity:.7}100%{transform:translate(calc(var(--tx,30px)*-0.7),calc(var(--ty,-20px)*-0.5)) scale(.6);opacity:0} }
.w-night .star { position: absolute; background: rgba(255,255,255,0.65); border-radius: 50%; animation: twk ease-in-out infinite; will-change: opacity; }
@keyframes twk { 0%,100%{opacity:.15}50%{opacity:.9} }
.w-sakura .petal { position: absolute; width: 7px; height: 7px; background: linear-gradient(135deg, rgba(235,172,184,0.9), rgba(204,115,136,0.7)); border-radius: 50% 0 50% 0; animation: pet-f linear infinite; will-change: transform, opacity; }
@keyframes pet-f { 0%{transform:translateY(-10px) translateX(0) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(100vh) translateX(40px) rotate(720deg);opacity:0} }

/* ==========================================
   单聊导航栏 - 极窄连线版 (64px)
   ========================================== */
.echo-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    padding-top: env(safe-area-inset-top);
}

/* 共享的返回和菜单按钮 - 默认在单聊模式下静态定位 */
.echo-navbar > .tb-back,
.echo-navbar > .tb-menu {
    position: absolute;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 22px;
    color: var(--topbar-btn-icon-color);
    transition: transform 0.2s;
    z-index: 101;
}
.echo-navbar > .tb-back {
    left: 8px;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
}
.echo-navbar > .tb-menu {
    right: 8px;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
}
.echo-navbar > .tb-back:active,
.echo-navbar > .tb-menu:active {
    transform: scale(0.85);
}

.echo-navbar .sc-navbar-thin {
    display: flex;
    flex-direction: column;
}

.sc-nav-row-1 {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 40px; /* 左右留出空间给绝对定位的按钮 */
}

.sc-nav-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto; /* 不伸缩，保持内容宽度 */
    min-width: 0;
}

.sc-nav-side.sc-right {
    flex-direction: row-reverse;
}

.sc-nav-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--navbar-border);
    flex-shrink: 0;
}

.sc-nav-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--topbar-name-color);
    white-space: nowrap; /* 不换行，保持一行 */
}

/* 动态弹性连线 */
.sc-nav-line-wrap {
    flex: 1 1 auto; /* 可伸缩，自动填充剩余空间 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 8px;
    min-width: 60px; /* 最小宽度，确保天气有空间 */
}

.sc-nav-line {
    flex: 1;
    height: 1px;
    background: var(--topbar-line-color);
    opacity: 0.3;
}

/* 雪花交互键：单聊放在两人连线中间，群聊放在群名旁；纯透明圆形按钮 */
.sc-nav-interaction,
.gc-nav-interaction {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--topbar-meta-color);
    background: transparent;
    transition: transform 0.15s ease, background 0.15s ease;
}
.sc-nav-interaction i,
.gc-nav-interaction i {
    font-size: 18px;
    line-height: 1;
}
.sc-nav-interaction:active,
.gc-nav-interaction:active {
    transform: scale(0.92);
    background: rgba(0, 0, 0, 0.06);
}
.gc-nav-interaction { margin-left: 6px; }

.sc-weather-pill {
    font-size: 11px;
    color: var(--topbar-meta-color);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.sc-nav-row-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    padding: 0 12px 8px 42px;
}

.sc-bio-box {
    display: flex;
    align-items: center;
    gap: 8px; /* 增加间距 */
    flex: 1;
    min-width: 0;
}

.sc-bio-box .p-bio {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 11px;
    color: var(--topbar-bio-color);
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-bio-refresh {
    font-size: 13px;
    color: var(--topbar-meta-color);
    cursor: pointer;
    flex-shrink: 0;
    padding: 2px;
}

.sc-bottle-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
    margin: 0 8px; /* 增加左右间距 */
    flex-shrink: 0;
}

.sc-bottle-btn .custom-pen-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.sc-bottle-btn:hover .custom-pen-icon {
    opacity: 1;
}

.sc-time-box {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--topbar-meta-color);
    margin-left: 12px;
    cursor: pointer;
}

/* ==========================================
   群聊 - 极限单行版导航栏（最简风：返回 / 群名+人数 / 菜单）
   ========================================== */
.gc-navbar-thin {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0;
}

/* 顶部单行：返回 / 中央群名+人数 / 菜单 */
.gc-navbar-thin .gc-top-c {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 8px;
    gap: 8px;
}
.gc-navbar-thin .gc-icon-btn {
    font-size: 22px;
    color: var(--topbar-text, #1a1a1a);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.gc-navbar-thin .gc-center-c {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
}
.gc-navbar-thin .gc-name-c {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--topbar-text, #1a1a1a);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.gc-navbar-thin .gc-count-c {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--topbar-sub, #999);
    flex-shrink: 0;
}

/* m-tag 横滚条压扁 */
.gc-navbar-thin .gc-nav-row-tags {
    padding: 4px 12px 6px;
}

/* 旧 .gc-nav-content 旧布局已弃用，但留作兼容 */
.gc-nav-content {
    display: none;
}

/* 九宫格 */
.g-grid-mini {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--group-grid-bg);
    border: 1px solid var(--group-grid-border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: 1px;
    flex-shrink: 0;
}
.g-grid-mini img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
}
/* 自定义群聊头像：取消 grid 布局 */
.g-grid-mini.g-single-avatar {
    display: block;
    padding: 0;
    gap: 0;
}
.g-grid-mini.g-single-avatar img {
    border-radius: 8px;
}

/* 左侧堆叠：群名与签名 */
.gc-name-bio-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.gc-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.gc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--topbar-name-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gc-count {
    font-size: 11px;
    color: var(--topbar-meta-color);
    font-weight: 500;
}
.gc-bottle {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
}
.gc-bottle .custom-pen-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    pointer-events: none; /* 🔧 防止图标拦截点击事件 */
}

/* 奶瓶摇晃动画 */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    50% { transform: rotate(20deg); }
    75% { transform: rotate(-20deg); }
}
.gc-bottle.shaking .custom-pen-icon {
    animation: shake 0.4s ease-in-out;
    opacity: 1;
}

.gc-bio-mini {
    border: none;
    background: transparent;
    outline: none;
    font-size: 10px;
    color: var(--topbar-bio-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* 右侧堆叠：成员与天气 */
.gc-meta-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    margin-right: 2px;
}
.g-members-mini {
    display: flex;
    align-items: center;
}
.g-members-mini img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--group-member-border);
    margin-left: -4px;
}
.g-members-mini img:first-child {
    margin-left: 0;
}
.g-m-more {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--group-m-more-bg);
    color: var(--group-m-more-text);
    border: 1px solid var(--group-member-border);
    margin-left: -4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
}

.gc-time-weather-mini {
    font-size: 9px;
    color: var(--topbar-meta-color);
    font-weight: 500;
    opacity: 0.8;
}
.gc-time-weather-mini .gc-divider {
    opacity: 0.3;
    margin: 0 2px;
}

/* ══════ 夜间模式 - 单聊背景 & 气泡 ══════ */
body.night .single-chat-page { background: var(--bg-body); }
body.night .single-chat-page * { transition: background 0.4s, color 0.4s, border-color 0.4s; }
body.night .msg-row.other .msg-bubble,
body.night .msg-row.other .speech-bubble { background: var(--bubble-other-bg); color: var(--bubble-other-text); border-color: var(--navbar-border); }
body.night .msg-row.me .msg-bubble,
body.night .msg-row.me .speech-bubble { background: var(--bubble-me-bg); color: var(--bubble-me-text); border-color: var(--navbar-border); }
body.night .voice-bubble.other { background: var(--bubble-voice-other-bg); color: var(--bubble-voice-other-text); box-shadow: none; }
body.night .voice-bubble.me { background: var(--bubble-voice-me-bg); color: var(--bubble-voice-me-text); }
body.night .echo-dock { background: var(--dock-bg); border-top-color: var(--dock-border); }
body.night .echo-dock .input-pill,
body.night .echo-dock .hold-talk-pill { background: var(--dock-input-bg); }
body.night .echo-dock #chat-input,
body.night .echo-dock textarea { background: transparent; color: var(--dock-input-text-color); }
body.night .echo-dock #chat-input::placeholder,
body.night .echo-dock textarea::placeholder { color: var(--dock-input-placeholder); }
body.night .single-chat-page [style*="color: #e74c5e"],
body.night .single-chat-page [style*="color:#e74c5e"] { color: #ef5350; }


/* ========================================================================== */
/* 交互动画 & 通用组件样式（从 index.html 迁移）                               */
/* ========================================================================== */

/* 子窗口滑入滑出动画（星汇详情页）*/
.sub-window {
    left: 100%;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sub-window.active {
    left: 0;
}

/* 奶瓶轻微晃动动画 */
@keyframes gentle-shake {
    0%, 100% { transform: rotate(0deg); }
    25%       { transform: rotate(-3deg); }
    75%       { transform: rotate(3deg); }
}

/* Toast 滑入动画 */
@keyframes toastSlideIn {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.shaking {
    animation: gentle-shake 0.5s ease-in-out infinite;
}

/* 星汇详情页渐变背景动画 */
@keyframes gradientBG {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 隐藏滚动条 */
#post-detail-body-starhub::-webkit-scrollbar {
    display: none;
}

/* 正在输入状态 */
.typing-status {
    color: var(--text-subtle, #999);
    font-style: italic;
}

/* 星汇帖子排版（基础尺寸由 starhub-new.css 管理：24px 圆角 + 24px padding） */
.post-card h3 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.post-card p {
    font-size: 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    margin-bottom: 10px;
}

/* 多选高亮 */
.msg-row.selected {
    background: rgba(161, 140, 209, 0.08);
    border-radius: 12px;
}

/* 配置管理按钮 */
button[onclick*="ConfigManager"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
button[onclick*="ConfigManager"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
button[onclick*="ConfigManager"]:active {
    transform: translateY(0);
}

/* STT/TTS 按钮 hover */
#stt-save-btn:hover, #stt-test-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#stt-save-btn:active, #stt-test-btn:active {
    transform: translateY(0);
}

/* 自定义弹窗动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 自定义弹窗输入框焦点 */
.dialog-input:focus {
    border-color: var(--notice-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==============================================
   💳 高定极简黑白转账系统
   ============================================== */

/* --- 转账面板全屏定位 --- */
.transfer-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    flex-direction: column;
    background: var(--tf-bg-light);
    z-index: 200;
}
.transfer-screen.active {
    display: flex;
    animation: tfFadeIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tfFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- 导航栏 --- */
.transfer-nav-bar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: var(--tf-bg-white);
    border-bottom: 1px solid var(--tf-border-line);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}
.transfer-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    color: var(--tf-bw-main);
    cursor: pointer;
    font-size: 20px;
}
.transfer-nav-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tf-bw-main);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.transfer-nav-right { width: 36px; }

/* --- 转账专用变量（不与红包冲突） --- */
:root {
    --tf-bg-white:    #ffffff;
    --tf-bg-light:    #f7f7f9;
    --tf-bw-main:     #1c1c1e;
    --tf-bw-sub:      #6e6e73;
    --tf-bw-muted:    #a1a1a6;
    --tf-border-line: #d1d1d6;
    --tf-border-dark: #c7c7cc;
    --tf-watermark:   rgba(0, 0, 0, 0.06);
    --tf-shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.06);
    --tf-font-serif:  'Cormorant Garamond', 'Georgia', serif;
}

/* --- 通用面板 --- */
.tf-panel {
    background: var(--tf-bg-white);
    border-radius: 12px;
    box-shadow: var(--tf-shadow-soft);
    border: 1px solid var(--tf-border-line);
    overflow: hidden;
    position: relative;
}
.tf-panel::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 7px;
    pointer-events: none;
    z-index: 10;
}

/* --- 背景衬线水印 --- */
.tf-watermark {
    position: absolute;
    top: -10px;
    right: -10px;
    font-family: var(--tf-font-serif);
    font-size: 80px;
    font-weight: 700;
    color: var(--tf-watermark);
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    letter-spacing: -2px;
}

/* --- 工业十字标 --- */
.tf-crosshair {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}
.tf-crosshair::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 12px;
    height: 1px;
    background: var(--tf-bw-main);
}
.tf-crosshair::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 1px;
    height: 12px;
    background: var(--tf-bw-main);
}
.ch-tl { top: 16px; left: 16px; }
.ch-tr { top: 16px; right: 16px; }
.ch-bl { bottom: 16px; left: 16px; }
.ch-br { bottom: 16px; right: 16px; }

/* --- 极小排版标识 --- */
.tf-meta-tag {
    font-size: 9px;
    color: var(--tf-bw-sub);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: absolute;
    z-index: 2;
    font-weight: 600;
}
.tf-meta-tag.center {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
}
.tf-meta-tag.top-center {
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
}
.tf-meta-tag.top-left {
    top: 24px;
    left: 24px;
}

.tf-content-layer { position: relative; z-index: 2; }

/* --- SVG 图标 --- */
.tf-svg-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==============================================
   气泡（聊天列表）
   ============================================== */
.tf-bubble {
    width: 220px;
    border-radius: 8px;
    background: var(--tf-bg-white);
    border: 1px solid var(--tf-border-line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
/* 待收款：左侧强调线 */
.tf-bubble::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tf-bw-main);
    z-index: 3;
}
.tf-bubble-body {
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.tf-bubble-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--tf-border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tf-bw-main);
    flex-shrink: 0;
    background: var(--tf-bg-white);
}
.tf-bubble-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tf-bubble-amount {
    font-family: var(--tf-font-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}
.tf-bubble-status {
    font-size: 11px;
    color: var(--tf-bw-sub);
}
.tf-bubble-footer {
    background: var(--tf-bg-light);
    padding: 8px 14px;
    font-size: 11px;
    color: var(--tf-bw-sub);
    border-top: 1px solid var(--tf-border-line);
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.tf-bubble-footer-tag {
    font-weight: 600;
    color: var(--tf-bw-muted);
    letter-spacing: 1px;
}
/* 已处理状态 */
.tf-bubble.done {
    border-color: var(--tf-border-line);
    box-shadow: none;
    background: var(--tf-bg-light);
}
.tf-bubble.done::before { background: var(--tf-border-dark); }
.tf-bubble.done .tf-bubble-icon {
    color: var(--tf-bw-sub);
    border-color: var(--tf-border-line);
}

/* ==============================================
   发起转账面板（view-transfer-input）
   ============================================== */
#view-transfer-input.transfer-screen {
    padding: 40px 24px 32px;
}
.tf-target-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--tf-border-line);
    margin-bottom: 28px;
    cursor: pointer;
}
.tf-target-avt {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--tf-bg-light);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--tf-bw-sub);
}
.tf-target-avt img { width: 100%; height: 100%; object-fit: cover; }
.tf-target-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.tf-target-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--tf-bw-main);
}
.tf-target-label {
    font-size: 10px;
    color: var(--tf-bw-sub);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.tf-dropdown-arrow { color: var(--tf-bw-sub); }

/* 群聊下拉成员选择 */
#transferTargetSelector.tf-target-box {
    flex-direction: column;
    align-items: stretch;
    cursor: default;
}
.tf-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--tf-border-line);
    border-radius: 8px;
    cursor: pointer;
    background: var(--tf-bg-white);
}
.tf-dropdown-trigger-text { font-size: 14px; color: var(--tf-bw-main); }
.tf-dropdown-menu {
    border: 1px solid var(--tf-border-line);
    border-radius: 8px;
    margin-top: 4px;
    overflow: hidden;
    display: none;
    background: var(--tf-bg-white);
}
.tf-dropdown-menu.open { display: block; }
.tf-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
}
.tf-dropdown-item:hover { background: var(--tf-bg-light); }

.tf-input-group { margin-bottom: 28px; }
.tf-input-label {
    font-size: 10px;
    color: var(--tf-bw-sub);
    margin-bottom: 8px;
    display: block;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.tf-amount-wrapper {
    display: flex;
    align-items: baseline;
    border-bottom: 2px solid var(--tf-bw-main);
    padding-bottom: 8px;
}
.tf-currency-symbol {
    font-family: var(--tf-font-serif);
    font-size: 28px;
    font-weight: 600;
    margin-right: 8px;
    color: var(--tf-bw-main);
}
.tf-amount-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--tf-font-serif);
    font-size: 44px;
    font-weight: 700;
    color: var(--tf-bw-main);
    background: transparent;
    padding: 0;
    width: 100%;
}
.tf-note-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--tf-border-line);
    padding: 12px 0;
    font-size: 14px;
    outline: none;
    background: transparent;
    color: var(--tf-bw-main);
}
.tf-note-input::placeholder { color: var(--tf-bw-muted); }

.btn-tf-black {
    width: 100%;
    padding: 16px;
    border-radius: 6px;
    border: none;
    background: var(--tf-bw-main);
    color: var(--tf-bg-white);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 40px;
    transition: opacity 0.2s;
}
.btn-tf-black:active { opacity: 0.8; }
.btn-tf-white {
    width: 100%;
    padding: 16px;
    border-radius: 6px;
    background: var(--tf-bg-white);
    color: var(--tf-bw-main);
    border: 1px solid var(--tf-border-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 12px;
    text-transform: uppercase;
}

/* ==============================================
   接收/退还 操作面板（tf-action-panel）
   ============================================== */

/* 转账操作面板遮罩层 */
.tf-action-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

/* 转账操作面板容器 */
.tf-action-panel-wrapper {
    width: 320px;
    max-width: 90vw;
    position: relative;
    z-index: 9999;
    animation: slideUp 0.3s ease;
}

/* 转账操作面板内容区 */
.tf-action-panel {
    padding: 56px 24px 32px;
    text-align: center;
}

/* 转账操作面板内容层级 */
.tf-action-content {
    position: relative;
    z-index: 2;
}

/* 转账操作面板水印定位 */
.tf-action-panel .tf-watermark {
    top: 25px;
    font-size: 110px;
}

/* 转账操作面板标签定位 */
.tf-action-panel .tf-meta-tag {
    top: 24px;
    left: 24px;
}

.tf-action-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 32px;
    border: 1px solid var(--tf-border-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--tf-bw-main);
    background: var(--tf-bg-white);
    position: relative;
    z-index: 2;
}

.tf-action-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tf-action-amount {
    font-family: var(--tf-font-serif);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
}

.tf-action-amount span {
    font-size: 24px;
    margin-right: 4px;
    color: var(--tf-bw-sub);
}

.tf-action-sender {
    font-size: 14px;
    color: var(--tf-bw-sub);
    margin-bottom: 48px;
}

/* 面板动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

/* ==============================================
   账单回执（view-transfer-receipt）
   ============================================== */
#view-transfer-receipt.transfer-screen {
    display: flex;
    flex-direction: column;
}
.tf-receipt-header {
    padding: 40px 24px 32px;
    text-align: center;
    border-bottom: 1px solid var(--tf-border-line);
    position: relative;
    background: var(--tf-bg-white);
}
.tf-receipt-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tf-bw-main);
    color: var(--tf-bw-main);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    background: var(--tf-bg-white);
    position: relative;
    z-index: 2;
}
.tf-receipt-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--tf-bw-main);
}
.tf-receipt-subtitle {
    font-size: 12px;
    color: var(--tf-bw-sub);
}
.tf-receipt-body {
    padding: 32px 24px 40px;
    background: var(--tf-bg-light);
    flex: 1;
    position: relative;
}
.tf-receipt-amount-wrap {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}
.tf-receipt-amount {
    font-family: var(--tf-font-serif);
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: var(--tf-bw-main);
}
.tf-receipt-amount-sym {
    font-size: 20px;
    color: var(--tf-bw-sub);
    margin-right: 4px;
}
.tf-receipt-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 13px;
    align-items: baseline;
    position: relative;
    z-index: 2;
}
.tf-receipt-row:last-child { margin-bottom: 0; }
.tf-receipt-divider {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--tf-border-line);
}
.tf-receipt-label { color: var(--tf-bw-sub); }
.tf-receipt-value { font-weight: 500; text-align: right; color: var(--tf-bw-main); }
.tf-receipt-value.serif {
    font-family: var(--tf-font-serif);
    font-size: 15px;
    font-weight: 600;
}
.tf-receipt-value.muted { color: var(--tf-bw-sub); font-size: 13px; }

/* 退还状态 */
#view-transfer-receipt.is-refunded .tf-receipt-icon,
.transfer-screen.is-refunded .tf-receipt-icon {
    border-color: var(--tf-bw-sub);
    color: var(--tf-bw-sub);
}
#view-transfer-receipt.is-refunded .tf-receipt-title,
.transfer-screen.is-refunded .tf-receipt-title {
    color: var(--tf-bw-sub);
}
#view-transfer-receipt.is-refunded .tf-receipt-amount,
.transfer-screen.is-refunded .tf-receipt-amount {
    text-decoration: line-through;
    color: var(--tf-bw-sub);
}

/* ==========================================
   Glimmer OS - 全局弹窗系统 (Pure White / 设计稿同款)
   ========================================== */
/* 字体说明：
   - Playfair Display：英文衬线大标题（已本地化 fonts-inline.css）
   - Noto Serif SC：中文副标题（fonts.googleapis.com link）
   - Mrs Saint Delafield：底部签名花体（已本地化 fonts-inline.css）
   - Inter：副标题间距字 / 按钮字（已本地化）
*/

:root {
    /* 沿用兼容：旧代码可能还引用这些变量 */
    --theme-rgb: 212, 180, 192;
    --theme-text: #6b4e58;
    --glim-danger-rgb: 211, 47, 47;
    --glim-success-rgb: 76, 175, 80;

    /* Tinted Paper Editorial 调色板 */
    --glim-bg: #FCFAF8;          /* 象牙白主底 */
    --glim-bg-sub: #EBE7E0;      /* 燕麦色叠纸 */
    --glim-text: #2C2A28;        /* 柔和深灰褐 */
    --glim-text-soft: #2C2A28;
    --glim-text-silver: #8A8782; /* 优雅浅灰 */
    --glim-line: #E5E0D6;
    --glim-accent-red: #9B4A46;  /* 墨红 */
    --glim-wash-red: #FDF5F4;    /* 水洗玫瑰 */
    --glim-accent-green: #5C6B5A;
    --glim-wash-green: #F4F7F4;
    --glim-overlay-bg: rgba(40, 38, 36, 0.38);
    --glim-shadow-card:
        0 30px 60px -10px rgba(44, 42, 40, 0.08),
        0 10px 24px -8px rgba(44, 42, 40, 0.04);

    --glim-font-en: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --glim-font-cn: 'Noto Serif SC', 'PingFang SC', '苹方', 'Microsoft YaHei', '微软雅黑', serif;
    --glim-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --glim-font-sign: 'Mrs Saint Delafield', 'Great Vibes', 'Snell Roundhand', cursive;

    --glim-radius-modal: 48px;
    --glim-radius-pill: 100px;
}

/* === 1. 遮罩层（去毛玻璃，仅暗化）=== */
.glim-overlay {
    position: fixed;
    inset: 0;
    background: var(--glim-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.glim-overlay.show { opacity: 1; pointer-events: auto; }

/* === 2. 错位叠纸 wrapper（warning/danger 用，info/error/success/prompt 也包但 bg 隐形） === */
.glim-stack {
    position: relative;
    width: 100%;
    max-width: 340px;
    transform: scale(0.96) translateY(8px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.glim-overlay.show .glim-stack {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 叠纸背板：默认隐形；warning/danger 时显示 */
.glim-stack-bg {
    position: absolute;
    inset: 0;
    border-radius: var(--glim-radius-modal);
    background: var(--glim-bg-sub);
    box-shadow: var(--glim-shadow-card);
    transform: rotate(-4deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.glim-stack[data-style="warning"] .glim-stack-bg { opacity: 1; }
.glim-stack[data-style="danger"] .glim-stack-bg {
    opacity: 1;
    background: var(--glim-wash-red);
    transform: rotate(4deg);
}

/* === 弹窗主体（象牙白 / 水洗底） === */
.glim-modal-box {
    position: relative;
    width: 100%;
    background: var(--glim-bg);
    border: 1px solid transparent;
    border-radius: var(--glim-radius-modal);
    padding: 48px 32px 32px;
    box-shadow: var(--glim-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(8px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.glim-overlay.show .glim-modal-box,
.elf-mask.show .glim-modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}
/* 错误：水洗玫瑰底 */
.glim-modal-box[data-style="error"] {
    background: var(--glim-wash-red);
}
/* 成功：水洗鼠尾草绿 */
.glim-modal-box[data-style="success"] {
    background: var(--glim-wash-green);
}

/* 大水印（数字 / 符号超大字） */
.glim-watermark {
    position: absolute;
    top: -30px;
    right: -10px;
    font-family: var(--glim-font-en) !important;
    font-size: 200px;
    font-style: italic;
    font-weight: 700;
    color: var(--glim-text);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    z-index: 0;
}
/* error/danger 水印转墨红 */
.glim-modal-box[data-style="error"] .glim-watermark,
.glim-modal-box[data-style="danger"] .glim-watermark {
    color: var(--glim-accent-red);
    opacity: 0.1;
}
/* success 水印转鼠尾草绿 */
.glim-modal-box[data-style="success"] .glim-watermark {
    color: var(--glim-accent-green);
    opacity: 0.1;
}

/* === 3. 标题区：英文衬线大字 + 中文小字 === */
.glim-header {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
}
.glim-h-en {
    font-family: var(--glim-font-en) !important;
    font-size: 36px;
    font-style: italic;
    font-weight: 600;
    color: var(--glim-text);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.glim-h-cn {
    font-family: var(--glim-font-cn) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--glim-text);
    margin-top: 8px;
}

/* 错误/危险型：英文 + 中文都转墨红 */
.glim-modal-box[data-style="error"] .glim-h-en,
.glim-modal-box[data-style="danger"] .glim-h-en,
.glim-modal-box.is-accent .glim-h-en { color: var(--glim-accent-red); }
.glim-modal-box[data-style="error"] .glim-h-cn,
.glim-modal-box[data-style="danger"] .glim-h-cn { color: var(--glim-accent-red); }
.glim-modal-box[data-style="success"] .glim-h-en,
.glim-modal-box[data-style="success"] .glim-h-cn { color: var(--glim-accent-green); }

/* === 4. 正文 === */
.glim-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.glim-message {
    font-family: var(--glim-font-cn);
    font-size: 14px;
    line-height: 1.8;
    color: var(--glim-text-silver);
    word-break: break-word;
    white-space: pre-wrap;
}
/* error/danger 正文也染色 */
.glim-modal-box[data-style="error"] .glim-message,
.glim-modal-box[data-style="danger"] .glim-message {
    color: var(--glim-accent-red);
    opacity: 0.85;
}
.glim-modal-box[data-style="success"] .glim-message {
    color: var(--glim-accent-green);
    opacity: 0.85;
}

/* === 5. 输入框（极简胶囊嵌套） === */
.glim-input {
    width: 100%;
    background: var(--glim-bg-sub);
    border: 1px solid transparent;
    border-radius: var(--glim-radius-pill);
    padding: 14px 20px;
    margin-top: 24px;
    font-size: 14px;
    font-family: var(--glim-font-sans);
    outline: none;
    color: var(--glim-text);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-sizing: border-box;
}
/* textarea 类型用方角 */
textarea.glim-input {
    border-radius: 24px;
    padding: 16px 20px;
}
.glim-input:focus {
    border-color: var(--glim-text);
    background: var(--glim-bg);
    box-shadow: 0 0 0 3px rgba(44, 42, 40, 0.04);
}
.glim-input::placeholder {
    color: var(--glim-text-silver);
    font-style: italic;
}

/* === 记忆压缩预览（复用 glim 弹窗外壳，仅内容区样式） === */
.glim-compress-meta {
    font-size: 12px;
    color: var(--glim-text-silver);
    margin-bottom: 8px;
    line-height: 1.6;
}
.glim-compress-preview {
    max-height: 46vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.8;
    color: var(--glim-text);
    white-space: pre-wrap;
    word-break: break-word;
    padding: 12px;
    border-radius: 8px;
    background: var(--glim-bg-sub);
    border: 1px solid var(--glim-border, var(--glim-bg-sub));
    margin-top: 4px;
}
.glim-compress-note {
    font-size: 11px;
    color: var(--glim-text-silver);
    margin-top: 8px;
    line-height: 1.6;
}

/* === 加载弹窗（全局，ModalSystem.showLoading 复用 glim 外壳） === */
.glim-loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0 4px;
}
.glim-loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--glim-bg-sub);
    border-top-color: var(--glim-text);
    border-radius: 50%;
    animation: glimLoadingSpin 0.8s linear infinite;
}
@keyframes glimLoadingSpin {
    to { transform: rotate(360deg); }
}
.glim-loading-msg {
    font-family: var(--glim-font-cn);
    font-size: 15px;
    color: var(--glim-text);
    text-align: center;
    line-height: 1.6;
}
.glim-loading-sub {
    font-size: 12px;
    color: var(--glim-text-silver);
    text-align: center;
    line-height: 1.6;
    max-width: 240px;
}

/* === 6. 底部：按钮区（铁律 1：绝对禁止竖排） === */
.glim-footer {
    margin-top: 32px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* 右上角签名标识 (铁律 3：固定右上，不挤占按钮空间) */
.glim-brand-tag {
    position: absolute;
    top: 20px;
    right: 28px;
    font-family: var(--glim-font-sign) !important;
    font-size: 26px;
    color: var(--glim-text);
    opacity: 0.4;
    transform: rotate(-8deg);
    z-index: 10;
    pointer-events: none;
    line-height: 1;
}

/* === 7. 按钮系统：横向并列、等比平分、绝对不允许竖排 === */
.glim-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
.glim-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 16px 0;
    text-align: center;
    border-radius: var(--glim-radius-pill);
    font-family: var(--glim-font-sans) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
/* 主按钮：墨色实心 */
.glim-btn-pri {
    background: var(--glim-text);
    color: var(--glim-bg);
}
.glim-btn-pri:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* 次按钮：燕麦底浅色 */
.glim-btn-sec {
    background: var(--glim-bg-sub);
    color: var(--glim-text);
}
.glim-btn-sec:hover { filter: brightness(0.95); }
/* 危险按钮：墨红 */
.glim-btn-red {
    background: var(--glim-accent-red);
    color: var(--glim-bg);
}
.glim-btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(155, 74, 70, 0.25);
}
/* error 弹窗里的主按钮：自动切墨红，error 上下文按钮单按钮全宽 */
.glim-modal-box[data-style="error"] .glim-actions .glim-btn-pri {
    background: var(--glim-accent-red);
}
/* success 弹窗里的主按钮：自动切鼠尾草绿 */
.glim-modal-box[data-style="success"] .glim-actions .glim-btn-pri {
    background: var(--glim-accent-green);
}
.glim-btn:active { transform: scale(0.97); }

/* === 8. 抽屉 (ActionSheet) === */
.glim-drawer-overlay { align-items: flex-end; padding: 0; }
.glim-drawer-box {
    width: 100%;
    background: var(--glim-bg);
    border-radius: 32px 32px 0 0;
    padding: 14px 0 max(24px, env(safe-area-inset-bottom));
    box-shadow: var(--glim-shadow-card);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 🔧 (2026-06-28) 限高 + flex 列：条目多时(如云端备份30天列表)抽屉不再撑满全屏，
       列表区内部滚动，把手和"取消"分别固定在顶/底，不被顶出可视区。 */
    display: flex;
    flex-direction: column;
    max-height: 80dvh;
}
.glim-overlay.show .glim-drawer-box { transform: translateY(0); }
.glim-drawer-handle {
    width: 40px;
    height: 4px;
    background: var(--glim-bg-sub);
    border-radius: 4px;
    margin: 8px auto 18px;
    flex: none;
}
.glim-drawer-list {
    padding: 0 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
}
.glim-drawer-item {
    display: block;
    width: 100%;
    padding: 18px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--glim-line);
    font-family: var(--glim-font-cn);
    font-size: 16px;
    font-weight: 600;
    color: var(--glim-text);
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}
.glim-drawer-item:last-child { border-bottom: none; }
.glim-drawer-item.danger { color: var(--glim-accent-red); }
.glim-drawer-item:hover { background: var(--glim-bg-sub); }
.glim-drawer-cancel {
    display: block;
    margin: 12px 24px 0;
    padding: 16px 0;
    width: calc(100% - 48px);
    flex: none;
    background: var(--glim-bg-sub);
    border: none;
    border-radius: var(--glim-radius-pill);
    font-family: var(--glim-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--glim-text);
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 0.2s ease;
}
.glim-drawer-cancel:hover { filter: brightness(0.95); }

/* === 9. Toast === */
/* ModalSystem.toast() 已统一转发到全局 showToast()，渲染 .glass-toast。
   .glim-toast 不再使用，CSS 已移除。 */

/* === 10. 兼容旧 DOM (echo.js 自定义表情弹窗等) === */
.glim-title { font-family: var(--glim-font-cn); font-size: 16px; font-weight: 700; color: var(--glim-text); margin-bottom: 8px; }
.glim-desc { font-family: var(--glim-font-cn); font-size: 13px; line-height: 1.7; color: var(--glim-text-silver); }
.glim-sparkle { display: none !important; }
.glim-status-blob { display: none !important; }

/* === 11. 夜间模式：深色艺术展风 === */
body.dark-mode {
    --glim-bg: #262524;        /* 深灰褐 */
    --glim-bg-sub: #33312E;    /* 稍亮辅助 */
    --glim-text: #F0EBE1;      /* 米白 */
    --glim-text-soft: #F0EBE1;
    --glim-text-silver: #A39E98;
    --glim-line: rgba(255,255,255,0.06);
    --glim-accent-red: #E68A88;
    --glim-wash-red: #3A2A29;
    --glim-accent-green: #A3B8A0;
    --glim-wash-green: #2A332B;
    --glim-overlay-bg: rgba(0, 0, 0, 0.55);
    --glim-shadow-card:
        0 30px 60px -10px rgba(0, 0, 0, 0.6),
        0 10px 24px -8px rgba(0, 0, 0, 0.4);
}
body.night {
    --glim-bg: #262524;
    --glim-bg-sub: #33312E;
    --glim-text: #F0EBE1;
    --glim-text-soft: #F0EBE1;
    --glim-text-silver: #A39E98;
    --glim-line: rgba(255,255,255,0.06);
    --glim-accent-red: #E68A88;
    --glim-wash-red: #3A2A29;
    --glim-accent-green: #A3B8A0;
    --glim-wash-green: #2A332B;
    --glim-overlay-bg: rgba(0, 0, 0, 0.55);
    --glim-shadow-card:
        0 30px 60px -10px rgba(0, 0, 0, 0.6),
        0 10px 24px -8px rgba(0, 0, 0, 0.4);
}

/* === 12. 小屏适配 === */
@media (max-width: 414px) {
    .glim-stack { max-width: 320px; }
    .glim-modal-box { padding: 40px 26px 26px; }
    .glim-h-en { font-size: 32px; }
    .glim-h-cn { font-size: 13px; }
    .glim-message { font-size: 13px; }
    .glim-btn { padding: 14px 16px; font-size: 11px; }
    .glim-watermark { font-size: 160px; top: -20px; right: -8px; }
    .glim-brand-tag { font-size: 22px; top: 16px; right: 22px; }
}

/* 🔧 修复：API编辑器在小屏上内容被挤压 */
#overlay-api .scroll-content {
    padding: 16px 20px 30px 20px;
}

/* ==========================================================================
   朋友圈（仿微信视觉，沿用项目类名）
   - 局部作用域：所有规则前缀 .moments-page，跟全局/其它页面解耦
   - 局部变量：--mm-*，跟回响 --echo-* 同模式
   - 三条硬约束：无 backdrop-filter / 无 !important / 无内联 style
   - 沿用现有类：.feed-item / .feed-avt / .feed-main / .feed-name / .feed-text
                 .feed-media-grid / .feed-media-img / .feed-tools / .feed-time
                 .feed-action-btn / .feed-delete-btn / .feed-likes-list
                 .feed-likes-names / .feed-comments / .feed-comment
                 .feed-comment-avatar / .feed-comment-content
                 .feed-comment-author / .feed-comment-text / .feed-comment-time
                 .moments-cover-area / .moments-user-float
                 .moments-user-float-name / .moments-user-float-avatar
                 .moments-avatar-wrapper / .avatar-edit-badge
                 .moments-empty-state
   ========================================================================== */
.moments-page {
    /* 日间默认 */
    --mm-bg-pure:    #ffffff;
    --mm-bg-soft:    #f7f7f8;
    --mm-bg-comment: #f3f3f5;
    --mm-bg-overlay: rgba(0, 0, 0, 0.6);
    --mm-text-main:  #111111;
    --mm-text-sub:   #333333;
    --mm-text-light: #b2b2b2;
    --mm-line-soft:  #f0f0f0;
    --mm-line-hard:  #e5e5e5;
    --mm-wechat-blue:#576b95;
    --mm-accent-danger:#fa5151;
    --mm-publish-green:#07c160;
    --mm-popover-bg: #4c5154;
    --mm-popover-divider:#3a3e40;

    /* 重写全局 --app-bg：apps-styles.css:67 写了 background: var(--app-bg) !important，
       属性改不动，那就把变量解析值替换成白，绕过 !important 战争（保持三硬约束零违反） */
    --app-bg: var(--mm-bg-pure, #ffffff);

    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background: var(--mm-bg-pure);
    color: var(--mm-text-main);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, sans-serif;
}

/* 把 --mm-* 核心变量也提到 :root，
   让挂到 .phone-frame 上的朋友圈相关弹窗（通知面板/发布弹窗/编辑弹窗/persona 切换）能拿到 */
:root {
    --mm-bg-pure: #ffffff;
    --mm-bg-soft: #f7f7f8;
    --mm-bg-comment: #f3f3f5;
    --mm-bg-overlay: rgba(0, 0, 0, 0.6);
    --mm-text-main: #111111;
    --mm-text-sub: #333333;
    --mm-text-light: #b2b2b2;
    --mm-line-soft: #f0f0f0;
    --mm-line-hard: #e5e5e5;
    --mm-wechat-blue: #576b95;
    --mm-accent-danger: #fa5151;
    --mm-publish-green: #07c160;
}
body.dark-mode,
body.night {
    --mm-bg-pure: #191919;
    --mm-bg-soft: #1c1c1c;
    --mm-bg-comment: #202020;
    --mm-bg-overlay: rgba(0, 0, 0, 0.85);
    --mm-text-main: #d4d4d4;
    --mm-text-sub: #a3a3a3;
    --mm-text-light: #7a7a7a;
    --mm-line-soft: #2a2a2a;
    --mm-line-hard: #333333;
    --mm-wechat-blue: #7d90a9;
    --mm-accent-danger: #d47275;
}

/* 父层背景兜底：仅在朋友圈 tab 真正激活时生效（盖掉 #app-echo 的早期初版底色：莫代尔粉等）
   做法：不改 background 属性（原规则带 !important 压不过且违反硬约束），
        而是把 --bg-color / --bg-screen 变量重写成白，让 var(--bg-color) !important 自然解析为白。
   关键：用 class 标记 .moments-tab-active 而不是 :has(.moments-page) ——
        .moments-page 是写死在 HTML 里的常驻元素，:has 会永远匹配，切回聊天列表时误伤导航栏。
        switchTab 在切到朋友圈时给 #app-echo 加 .moments-tab-active，切回时去掉。
   特异性：(2,1,0)，碾压 echo-nav-tags.css 主题规则的 (1,1,0)。 */
#app-echo.moments-tab-active {
    --bg-color: var(--mm-bg-pure, #ffffff);
    --bg-screen: var(--mm-bg-pure, #ffffff);
    --chatlist-bg: var(--mm-bg-pure, #ffffff);
    --echo-tint-3: var(--mm-bg-pure, #ffffff);
}
body.dark-mode #app-echo.moments-tab-active,
body.night #app-echo.moments-tab-active {
    --bg-color: #191919;
    --bg-screen: #191919;
    --chatlist-bg: #191919;
    --echo-tint-3: #191919;
}
/* 朋友圈打开时隐藏底部 Chats/Moments 切换胶囊（靠导航栏左上箭头返回聊天） */
#app-echo.moments-tab-active .echo-tabs {
    display: none !important;
}
/* manage-bar 在朋友圈的兜底已移除——避免误伤聊天列表整理功能 */
#view-moments {
    background: var(--mm-bg-pure, #ffffff);
    /* 底部预留 Tab 胶囊空间，确保最后一条评论能滚出来 */
    padding-bottom: calc(env(safe-area-inset-bottom, 24px) + 110px);
    box-sizing: border-box;
}

/* 修朋友圈封面顶部白线：cover-area / cover-img 严格无边距、无边框 */
.moments-page .moments-cover-area {
    margin-top: 0;
    border: none;
    outline: none;
    box-shadow: none;
}
.moments-page .moments-cover-img {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    vertical-align: top;
    box-shadow: none;
}

/* 兜底：朋友圈顶部 200px 内的所有 hr / 1px 高元素 / box-shadow 残留全部干掉 */
.moments-page hr {
    display: none;
}
.moments-page .header {
    border: none;
    border-bottom: none;
    box-shadow: none;
}
.moments-page .header::after,
.moments-page .moments-cover-area::before,
.moments-page .moments-cover-area::after {
    display: none;
    content: none;
}
.moments-page .moments-cover-area > *:not(.moments-cover-img):not(.moments-user-float) {
    display: none;
}

/* 朋友圈滚动区底部预留底部 Tab 胶囊空间，防最后一条评论被遮挡 */
.moments-page .feed-container {
    padding-bottom: calc(env(safe-area-inset-bottom, 24px) + 110px);
}
.moments-page .moments-empty-block {
    padding-bottom: calc(env(safe-area-inset-bottom, 24px) + 110px);
}

/* 点赞 icon 微信蓝（默认 + 已赞实心）—— 不用红色 */
.moments-page .moment-like-btn i,
.moments-page .moment-like-btn.active i {
    color: var(--mm-wechat-blue, #576b95);
}

/* 夜间走全局变量（跟回响同体系，统一暗色调） */
body.dark-mode .moments-page,
body.night .moments-page {
    --mm-bg-pure:    #191919;
    --mm-bg-soft:    #1c1c1c;
    --mm-bg-comment: #202020;
    --mm-bg-overlay: rgba(0, 0, 0, 0.85);
    --mm-text-main:  #d4d4d4;
    --mm-text-sub:   #a3a3a3;
    --mm-text-light: #7a7a7a;
    --mm-line-soft:  #2a2a2a;
    --mm-line-hard:  #333333;
    --mm-wechat-blue:#7d90a9;
    --mm-accent-danger:#d47275;
    --mm-popover-bg: #2c2f31;
    --mm-popover-divider:#1a1c1d;
}

/* 滚动区 */
.moments-page .content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 120px;
    background: var(--mm-bg-pure);
}
.moments-page .content-area::-webkit-scrollbar { display: none; }
.moments-page #moments-list { display: flex; flex-direction: column; }

/* 顶部浮动导航（sticky 贴顶，跟随 #view-moments 滚动容器；解决 fixed 在 transform 父级下错位） */
.moments-page .header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    z-index: 100;
    color: #ffffff;
    pointer-events: none;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    /* 占位高度交给容器；自身 margin-bottom 负值让封面图能透到顶部 */
    margin-bottom: calc(-1 * (env(safe-area-inset-top, 0px) + 60px));
}
.moments-page .header .header-actions {
    pointer-events: auto;
}
.moments-page .header.scrolled {
    background: rgba(255, 255, 255, 0.96);
    color: #111;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
body.dark-mode .moments-page .header.scrolled,
body.night .moments-page .header.scrolled {
    background: rgba(25, 25, 25, 0.96);
    color: #eee;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.moments-page .header-actions {
    display: flex;
    gap: 12px;
    pointer-events: auto;
}
.moments-page .header .circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.moments-page .header .circle-btn:active {
    background: rgba(0, 0, 0, 0.42);
    transform: scale(0.92);
}
.moments-page .header.scrolled .circle-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
    text-shadow: none;
}
.moments-page .header.scrolled .circle-btn:active {
    background: rgba(0, 0, 0, 0.12);
}
body.dark-mode .moments-page .header.scrolled .circle-btn,
body.night .moments-page .header.scrolled .circle-btn {
    background: rgba(255, 255, 255, 0.10);
    color: #eee;
}
.moments-page .header-title {
    display: none;
    font-size: 17px;
    font-weight: 600;
    color: inherit;
    letter-spacing: 0.5px;
}
.moments-page .header.scrolled .header-title { display: block; }

/* 封面区（顶部 320px 大图 + 用户浮层） */
.moments-page .moments-cover-area {
    position: relative;
    flex-shrink: 0;
    margin: 0 0 50px;
    background: var(--mm-bg-pure);
    cursor: default;
    overflow: visible;
}
.moments-page .moments-cover-img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    background: var(--mm-line-hard);
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}
.moments-page .moments-cover-img:active { opacity: 0.92; }

/* 用户名 + 头像浮层（右下角，骑在封面边缘） */
.moments-page .moments-user-float {
    position: absolute;
    bottom: -22px;
    right: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
}
.moments-page .moments-user-float-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin-top: 24px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.moments-page .moments-avatar-wrapper {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mm-bg-pure);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.2s;
}
.moments-page .moments-avatar-wrapper:active { transform: scale(0.96); }
.moments-page .moments-user-float-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.moments-page .avatar-edit-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}
.moments-page .moments-avatar-wrapper:hover .avatar-edit-badge {
    opacity: 1;
    transform: scale(1);
}

/* 动态流容器 */
.moments-page .feed-container {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* 单条动态 */
.moments-page .feed-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--mm-line-soft);
    background: var(--mm-bg-pure);
    transition: opacity 0.3s, background 0.2s;
    position: relative;
}
.moments-page .feed-item.flash {
    background: var(--mm-bg-comment);
}

/* 作者头像（圆角小方块） */
.moments-page .feed-avt {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--mm-line-hard);
    flex-shrink: 0;
    cursor: pointer;
}

/* 主体 */
.moments-page .feed-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* 作者名（微信蓝） */
.moments-page .feed-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--mm-wechat-blue);
    margin-bottom: 4px;
    line-height: 1.3;
}

/* 文本 */
.moments-page .feed-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--mm-text-main);
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: justify;
}

/* 图片网格（按张数自动选 1 / 2x2 / 3x3） */
.moments-page .feed-media-grid {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
    max-width: 100%;
}
.moments-page .feed-media-grid.grid-1 {
    grid-template-columns: 1fr;
    max-width: 220px;
}
.moments-page .feed-media-grid.grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 220px;
}
.moments-page .feed-media-grid.grid-3,
.moments-page .feed-media-grid.grid-6,
.moments-page .feed-media-grid.grid-9 {
    grid-template-columns: repeat(3, 1fr);
}
.moments-page .feed-media-grid.grid-4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 230px;
}
.moments-page .feed-media-grid.grid-5,
.moments-page .feed-media-grid.grid-7,
.moments-page .feed-media-grid.grid-8 {
    grid-template-columns: repeat(3, 1fr);
}
/* 兼容旧类（.single-image / .multi-images） */
.moments-page .feed-media-grid.single-image {
    grid-template-columns: 1fr;
    max-width: 220px;
}
.moments-page .feed-media-grid.multi-images {
    grid-template-columns: repeat(3, 1fr);
}

.moments-page .feed-media-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--mm-line-hard);
    cursor: pointer;
    border-radius: 2px;
    display: block;
}
.moments-page .feed-media-grid.grid-1 .feed-media-img,
.moments-page .feed-media-grid.single-image .feed-media-img {
    aspect-ratio: auto;
    min-height: 120px;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}
.moments-page .feed-media-img.load-error {
    background: var(--mm-bg-comment);
    color: var(--mm-text-light);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 工具栏：左侧时间 + 删除（本人），右侧"..."气泡按钮 */
.moments-page .feed-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    margin-top: 4px;
    position: relative;
    min-height: 22px;
}
.moments-page .feed-time-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.moments-page .feed-time {
    font-size: 13px;
    color: var(--mm-text-light);
}
.moments-page .feed-delete-btn {
    font-size: 13px;
    color: var(--mm-wechat-blue);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* 微信经典 ".." 气泡按钮 */
.moments-page .feed-action-btn-wrap {
    position: relative;
    z-index: 10;
}
.moments-page .feed-action-btn {
    width: 32px;
    height: 20px;
    background: var(--mm-bg-comment);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border: none;
    padding: 0;
}
.moments-page .feed-action-btn .dot {
    width: 4px;
    height: 4px;
    background: var(--mm-wechat-blue);
    border-radius: 50%;
    pointer-events: none;
}

/* 点赞/评论浮层（深灰胶囊） */
.moments-page .feed-action-popover {
    position: absolute;
    right: 42px;
    top: -10px;
    background: var(--mm-popover-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: width 0.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 11;
}
.moments-page .feed-action-popover.show {
    width: 144px;
    opacity: 1;
    pointer-events: auto;
}
.moments-page .feed-popover-item {
    flex: 1;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.moments-page .feed-popover-item:first-child {
    border-right: 1px solid var(--mm-popover-divider);
}
.moments-page .feed-popover-item:active {
    background: var(--mm-popover-divider);
}

/* 评论区（带气泡尖角） */
.moments-page .feed-interactions {
    background: var(--mm-bg-comment);
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 4px;
    position: relative;
}
.moments-page .feed-interactions::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 12px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--mm-bg-comment) transparent;
}

/* 点赞行 */
.moments-page .feed-likes-list {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mm-line-soft);
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}
.moments-page .feed-likes-list:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.moments-page .feed-likes-list::before {
    content: '\2665';
    font-size: 13px;
    margin-right: 6px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--mm-wechat-blue);
}
.moments-page .feed-likes-names {
    color: var(--mm-wechat-blue);
    word-break: break-word;
    line-height: 1.5;
    flex: 1;
}
.moments-page .feed-likes-count {
    color: var(--mm-text-light);
    font-size: 12px;
    margin-left: 6px;
    font-weight: 400;
}

/* 评论列表 */
.moments-page .feed-comments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    padding: 0;
}

/* 单条评论（仿微信平铺） */
.moments-page .feed-comment {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
    word-wrap: break-word;
    cursor: pointer;
    background: transparent;
    padding: 0;
}
.moments-page .feed-comment-avatar {
    display: none; /* 微信版不展示评论头像，只用蓝字名字 */
}
.moments-page .feed-comment-content {
    display: inline;
    flex: none;
}
.moments-page .feed-comment-author {
    color: var(--mm-wechat-blue);
    font-weight: 600;
    display: inline;
}
.moments-page .feed-comment-author::after {
    content: ': ';
    color: var(--mm-text-main);
    font-weight: 600;
    margin-right: 0;
}
.moments-page .feed-comment-text {
    color: var(--mm-text-main);
    display: inline;
}
.moments-page .feed-comment-time {
    display: none; /* 微信版不展示评论时间 */
}

/* 删除按钮：跟在时间右边的微信蓝小字 */
.moments-page .moment-delete-btn {
    background: none;
    border: none;
    padding: 0;
    margin-left: 12px;
    font-size: 13px;
    color: var(--mm-wechat-blue, #576b95);
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
.moments-page .moment-delete-btn:active { opacity: 0.6; }

/* 评论 / 点赞颜色覆盖：1087-1088 行老规则 #echo .c-name 是 (1,1,0)，
   这里用 #app-echo .moments-page 提到 (1,2,0) 碾压，让评论区配色回到微信蓝 */
#app-echo .moments-page .c-name,
#app-echo .moments-page .like-name {
    color: var(--mm-wechat-blue, #576b95);
    font-weight: 600;
}
#app-echo .moments-page .c-text {
    color: var(--mm-text-main, #111111);
}
#app-echo .moments-page .likes-area {
    color: var(--mm-wechat-blue, #576b95);
    font-size: 14px;
    line-height: 1.5;
}
#app-echo .moments-page .likes-area .likes-icon {
    color: var(--mm-wechat-blue, #576b95);
    margin-right: 6px;
}
#app-echo .moments-page .comment-item {
    color: var(--mm-text-main, #111111);
}
#app-echo .moments-page .c-name .reply-mid {
    color: var(--mm-text-light, #b2b2b2);
    font-weight: 400;
    margin: 0 4px;
}
#app-echo .moments-page .c-name .reply-target {
    color: var(--mm-wechat-blue, #576b95);
    font-weight: 600;
}

/* 输入行：永远内联展示（输入框 + 笑脸 + 发送 三件套并排） */
.moments-page .input-row,
.moments-page .feed-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--mm-line-soft);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
.moments-page .input-row .c-input,
.moments-page .feed-input-row .c-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    background: var(--mm-bg-pure);
    border: 1px solid var(--mm-line-soft);
    border-radius: 16px;
    padding: 0 14px;
    font-size: 13px;
    color: var(--mm-text-main);
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.01);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.moments-page .input-row .c-input:focus,
.moments-page .feed-input-row .c-input:focus {
    border-color: var(--mm-publish-green);
    box-shadow: 0 0 0 1px var(--mm-publish-green-15, rgba(7, 193, 96, 0.15));
}
.moments-page .input-row .c-input::placeholder {
    color: var(--mm-text-light);
    font-weight: 300;
    letter-spacing: 0.5px;
}
.moments-page .input-row .emoji-picker-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--mm-text-light);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.moments-page .input-row .emoji-picker-btn i {
    font-size: 20px;
}
.moments-page .input-row .emoji-picker-btn:active {
    color: var(--mm-text-main);
    background-color: var(--mm-line-soft);
    transform: scale(0.95);
}
.moments-page .input-row .c-send,
.moments-page .input-row .moment-send-comment-btn {
    background: var(--mm-publish-green);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    height: 28px;
    padding: 0 14px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 6px var(--mm-publish-green-20, rgba(7, 193, 96, 0.2));
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.moments-page .input-row .c-send:active,
.moments-page .input-row .moment-send-comment-btn:active {
    transform: scale(0.92);
    opacity: 0.9;
    box-shadow: 0 1px 3px var(--mm-publish-green-15, rgba(7, 193, 96, 0.15));
}

/* 表情面板：默认隐藏，加 .show 时展开 */
.moments-page .emoji-panel {
    display: none;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px 5px;
    background: var(--mm-bg-pure);
    border: 1px solid var(--mm-line-hard);
    border-radius: 4px;
    padding: 10px;
    margin-top: 8px;
    height: 160px;
    overflow-y: auto;
}
.moments-page .emoji-panel.show {
    display: grid;
}
.moments-page .emoji-panel .emoji-panel-item {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
}
.moments-page .emoji-panel .emoji-panel-item:active {
    background: var(--mm-bg-comment);
}

/* 空状态 */
.moments-page .moments-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--mm-text-light);
    text-align: center;
}
.moments-page .moments-empty-state i {
    font-size: 56px;
    margin-bottom: 14px;
    opacity: 0.4;
    color: var(--mm-text-light);
}
.moments-page .moments-empty-state p {
    font-size: 15px;
    margin: 4px 0;
    color: var(--mm-text-sub);
}
.moments-page .moments-empty-state .hint {
    font-size: 13px;
    color: var(--mm-text-light);
    margin-top: 6px;
}

/* 微信经典悬浮通知条（顶部） */
.moments-page .moments-msg-notify {
    margin: 12px auto 8px;
    background: #333333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 4px 16px 4px 4px;
    width: fit-content;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: opacity 0.2s;
}
.moments-page .moments-msg-notify:active { opacity: 0.85; }
.moments-page .notify-avt {
    width: 30px;
    height: 30px;
    border-radius: 2px;
    object-fit: cover;
    margin-right: 12px;
    background: #555;
}
.moments-page .notify-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

/* 顶部 nav 红点（通知未读） */
.moments-page .header-bell-wrap {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
}
.moments-page .header-bell-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
}

/* 聊天列表顶栏 · 朋友圈入口按钮（带红点） */
.chat-list-header .moments-entry-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.chat-list-header .moments-entry-btn .header-bell-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    border: 1.5px solid var(--chatlist-header-bg, #ffffff);
}

/* 封面右上"更换封面"按钮（不再用 backdrop-filter，纯半透明黑底） */
.moments-page .moments-cover-change {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 5;
}
.moments-page .moments-cover-change:active { background: rgba(0, 0, 0, 0.6); }

/* 封面左下角发帖 pen 按钮 */
.moments-page .moments-pen-btn {
    position: absolute;
    bottom: 12px;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    padding: 4px;
    cursor: pointer;
    opacity: 0.92;
    transition: transform 0.2s, opacity 0.2s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    z-index: 5;
}
.moments-page .moments-pen-btn:hover { opacity: 1; transform: scale(1.08); }

/* 头像右下角"切换人设"徽章 */
.moments-page .persona-switch-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a29bfe, #6c5ce7);
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    pointer-events: none;
}

/* 空状态容器（暂无角色 / 暂无动态） */
.moments-page .moments-empty-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--mm-text-light);
}
.moments-page .moments-empty-block i {
    font-size: 56px;
    color: var(--mm-text-light);
    opacity: 0.5;
}
.moments-page .moments-empty-block .empty-title {
    font-size: 15px;
    color: var(--mm-text-sub);
}
.moments-page .moments-empty-block .empty-hint {
    font-size: 13px;
    color: var(--mm-text-light);
    text-align: center;
    line-height: 1.6;
}
.moments-page .moments-empty-block .empty-link { color: var(--mm-wechat-blue); }

/* 新动态分割线 */
.moments-page .moments-new-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin: 4px 0;
}
.moments-page .moments-new-divider .line {
    flex: 1;
    height: 1px;
    background: var(--mm-line-soft);
}
.moments-page .moments-new-divider .label {
    font-size: 11px;
    color: var(--mm-text-light);
    white-space: nowrap;
}

/* ====== 朋友圈通知面板（仿微信：底部抽屉 + 头像列表） ====== */
.moments-notif-overlay {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.5);
    animation: mmNotifFade 0.2s ease forwards;
}
.moments-notif-overlay .panel {
    background: var(--mm-bg-pure, #ffffff);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 0 0 30px;
    max-height: 70%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mmNotifSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.moments-notif-overlay .panel-header {
    padding: 16px 20px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mm-line-soft, #f0f0f0);
    flex-shrink: 0;
}
.moments-notif-overlay .panel-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--mm-text-main, #111111);
}
.moments-notif-overlay .panel-clear {
    font-size: 13px;
    color: var(--mm-wechat-blue, #576b95);
    cursor: pointer;
}
.moments-notif-overlay .panel-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.moments-notif-overlay .panel-list::-webkit-scrollbar { display: none; }
.moments-notif-overlay .empty {
    text-align: center;
    padding: 40px 0;
    color: var(--mm-text-light, #b2b2b2);
    font-size: 14px;
}
.moments-notif-overlay .nf-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mm-line-soft, #f0f0f0);
    cursor: pointer;
    transition: background 0.15s;
}
.moments-notif-overlay .nf-item:active { background: var(--mm-bg-comment, #f3f3f5); }
.moments-notif-overlay .nf-item:last-child { border-bottom: none; }
.moments-notif-overlay .nf-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--mm-line-hard, #e5e5e5);
    flex-shrink: 0;
}
.moments-notif-overlay .nf-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.moments-notif-overlay .nf-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--mm-wechat-blue, #576b95);
    line-height: 1.3;
}
.moments-notif-overlay .nf-action-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mm-text-sub, #333333);
    line-height: 1.5;
}
.moments-notif-overlay .nf-action-icon { color: var(--mm-wechat-blue, #576b95); font-size: 14px; flex-shrink: 0; }
.moments-notif-overlay .nf-preview {
    font-size: 13px;
    color: var(--mm-text-light, #b2b2b2);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.moments-notif-overlay .nf-time {
    font-size: 12px;
    color: var(--mm-text-light, #b2b2b2);
    margin-top: 2px;
}
.moments-notif-overlay .nf-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--mm-line-hard, #e5e5e5);
    flex-shrink: 0;
}
@keyframes mmNotifFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmNotifSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ====== 发布弹窗 / 删除弹窗 / 消息弹窗（仿微信底部抽屉 + 居中对话框） ====== */
.moments-page .feed-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: var(--mm-bg-overlay);
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.moments-page .feed-modal-overlay.active {
    display: flex;
    opacity: 1;
}
.moments-page .feed-modal-overlay.center {
    justify-content: center;
    align-items: center;
}
.moments-page .feed-panel {
    background: var(--mm-bg-pure);
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 20px 24px calc(env(safe-area-inset-bottom, 20px) + 14px);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 88%;
    overflow-y: auto;
}
.moments-page .feed-modal-overlay.active .feed-panel { transform: translateY(0); }

.moments-page .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.moments-page .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mm-text-main);
}
.moments-page .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    color: var(--mm-text-light);
    line-height: 1;
    padding: 0;
}

.moments-page .feed-input-box {
    width: 100%;
    min-height: 96px;
    border: none;
    outline: none;
    font-size: 15px;
    line-height: 1.6;
    resize: none;
    margin-bottom: 16px;
    background: transparent;
    color: var(--mm-text-main);
    font-family: inherit;
}
.moments-page .feed-input-box::placeholder { color: var(--mm-text-light); }

.moments-page .publish-preview-area {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.moments-page .preview-img-box {
    width: 80px;
    height: 80px;
    position: relative;
}
.moments-page .preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background: var(--mm-bg-comment);
    display: block;
}
.moments-page .preview-del-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    border: none;
    line-height: 1;
}
.moments-page .preview-add-btn {
    width: 80px;
    height: 80px;
    background: var(--mm-bg-comment);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--mm-text-light);
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

.moments-page .publish-tools {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
    border-top: 1px solid var(--mm-line-soft);
    padding-top: 14px;
}
.moments-page .tool-row {
    display: flex;
    align-items: center;
    gap: 24px;
}
.moments-page .tool-btn {
    font-size: 14px;
    color: var(--mm-text-main);
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}
.moments-page .tool-icon {
    font-size: 18px;
    color: var(--mm-text-light);
}

.moments-page .feed-submit-btn {
    width: 100%;
    padding: 12px;
    background: var(--mm-publish-green);
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity 0.15s;
}
.moments-page .feed-submit-btn:active { opacity: 0.85; }
.moments-page .feed-submit-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 居中对话框（删除确认） */
.moments-page .dialog-panel {
    background: var(--mm-bg-pure);
    width: 280px;
    margin: auto;
    border-radius: 8px;
    padding: 24px 20px 0;
    transform: scale(0.95);
    transition: transform 0.2s ease;
    text-align: center;
}
.moments-page .feed-modal-overlay.active .dialog-panel { transform: scale(1); }
.moments-page .dialog-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--mm-text-main);
}
.moments-page .dialog-text {
    font-size: 14px;
    color: var(--mm-text-light);
    margin-bottom: 20px;
    line-height: 1.5;
}
.moments-page .dialog-actions {
    display: flex;
    border-top: 1px solid var(--mm-line-soft);
    margin: 0 -20px;
}
.moments-page .dialog-btn {
    flex: 1;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--mm-text-main);
}
.moments-page .dialog-btn:first-child {
    border-right: 1px solid var(--mm-line-soft);
}
.moments-page .dialog-btn.confirm {
    color: var(--mm-accent-danger);
    font-weight: 600;
}

/* 通知列表项（消息弹窗用） */
.moments-page .notice-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mm-line-soft);
    cursor: pointer;
}
.moments-page .notice-item:last-child { border-bottom: none; }
.moments-page .notice-avt {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--mm-bg-comment);
}
.moments-page .notice-content {
    flex: 1;
    min-width: 0;
}
.moments-page .notice-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
    color: var(--mm-text-main);
}
.moments-page .notice-time {
    font-size: 12px;
    color: var(--mm-text-light);
}

/* 身份切换浮窗（封面右上角下拉） */
.moments-page .identity-switch-panel {
    display: none;
    position: absolute;
    top: 88px;
    right: 16px;
    background: var(--mm-bg-pure);
    border: 1px solid var(--mm-line-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    width: 168px;
    z-index: 200;
    border-radius: 6px;
    overflow: hidden;
}
.moments-page .identity-switch-panel.show {
    display: block;
    animation: momentsIdentityFadeIn 0.2s ease;
}
@keyframes momentsIdentityFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.moments-page .identity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mm-line-soft);
    cursor: pointer;
    transition: background 0.15s;
}
.moments-page .identity-item:last-child { border-bottom: none; }
.moments-page .identity-item:hover { background: var(--mm-bg-comment); }
.moments-page .identity-item.active {
    background: var(--mm-bg-comment);
}
.moments-page .id-avt {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--mm-line-hard);
}
.moments-page .id-name {
    font-size: 14px;
    color: var(--mm-text-main);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 评论行内小元素：表情 / 贴纸 / 回复标签 / 心形图标（替代原内联 style） */
.moments-page .feed-emoji-inline {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin: 0 2px;
}
.moments-page .feed-sticker-inline {
    width: 60px;
    height: 60px;
    vertical-align: middle;
    margin: 4px 0;
    border-radius: 4px;
}
.moments-page .feed-reply-tag {
    color: var(--mm-text-light);
    font-size: 12px;
}
.moments-page .feed-reply-name {
    color: var(--mm-wechat-blue);
}
.moments-page .feed-likes-icon {
    color: var(--mm-wechat-blue);
    margin-right: 6px;
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* 发布弹窗内表情面板（替代原内联 display 切换） */
.moments-page .publish-emoji-panel {
    height: 0;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
    border-radius: 4px;
    background: var(--mm-bg-comment);
    transition: height 0.2s ease, padding 0.2s ease, margin-bottom 0.2s ease;
}
.moments-page .publish-emoji-panel[data-visible="1"] {
    height: 180px;
    padding: 8px;
    margin-bottom: 14px;
    overflow-y: auto;
}
.moments-page .publish-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.moments-page .publish-emoji-item {
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 4px;
    object-fit: cover;
}

/* 发布弹窗预览缩略图（替代原 img.style.cssText） */
.moments-page .preview-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    background: var(--mm-bg-comment);
}


/* ========== 🔗 外部链接分享卡片（微信/小红书风格） ========== */
/* 「裸卡片」容器：用户消息中纯分享链接时，干掉外层气泡的背景/边框/阴影 */
.msg-bare {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.msg-share-card {
    display: flex;
    flex-direction: column;
    width: 290px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    /* 默认配色：白底黑字（通用网页/小红书/知乎/微博） */
    background: #FFFFFF;
    color: #1f1f1f;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 抖音/快手：黑底白字 */
.msg-share-card.platform-douyin,
.msg-share-card.platform-kuaishou {
    background: #161823;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.08);
}

/* B站：浅蓝灰底 */
.msg-share-card.platform-bilibili {
    background: #ffffff;
    color: #18191c;
}

.msg-share-card .share-main {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.msg-share-card.platform-douyin .share-main,
.msg-share-card.platform-kuaishou .share-main {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.msg-share-card .share-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.msg-share-card .share-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.msg-share-card .share-sub {
    font-size: 11px;
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-share-card.platform-douyin .share-sub,
.msg-share-card.platform-kuaishou .share-sub {
    opacity: 0.65;
}

.msg-share-card .share-thumb-wrap {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.03);
}

.msg-share-card.platform-douyin .share-thumb-wrap,
.msg-share-card.platform-kuaishou .share-thumb-wrap {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.msg-share-card .share-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msg-share-card .share-thumb-placeholder {
    font-size: 22px;
    font-weight: 600;
    opacity: 0.35;
}

.msg-share-card .share-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    opacity: 0.85;
}

.msg-share-card .share-icon-bg {
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.msg-share-card .share-icon-xiaohongshu { background: #FF2442; }
.msg-share-card .share-icon-douyin       { background: #fe2c55; }
.msg-share-card .share-icon-kuaishou     { background: #FF6633; }
.msg-share-card .share-icon-bilibili     { background: #00A1D6; }
.msg-share-card .share-icon-weibo        { background: #E6162D; }
.msg-share-card .share-icon-zhihu        { background: #0084FF; }
.msg-share-card .share-icon-generic      { background: #888888; }

/* ==========================================
   隐心 - 心声档案面板
   ========================================== */
.voice-archive-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1200;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.voice-archive-overlay.active { opacity: 1; visibility: visible; }

/* 面板：全屏，内部有自己的颜色变量 */
#va-panel {
    --va-r: 196; --va-g: 161; --va-b: 164;
    --va-accent: rgb(var(--va-r), var(--va-g), var(--va-b));
    --va-accent-light: linear-gradient(0deg, rgba(var(--va-r),var(--va-g),var(--va-b),0.18), rgba(var(--va-r),var(--va-g),var(--va-b),0.18)), #FFFFFF;
    --va-bg: linear-gradient(0deg, rgba(var(--va-r),var(--va-g),var(--va-b),0.12), rgba(var(--va-r),var(--va-g),var(--va-b),0.12)), #FFFFFF;
    --va-card-bg: #FFFFFF;
    --va-text: #3A3836;
    --va-sub: #96918C;
    --va-border: rgba(0,0,0,0.08);

    position: fixed; bottom: 0; left: 0; right: 0;
    height: 85vh;
    border-radius: 20px 20px 0 0;
    background: var(--va-bg);
    display: flex; flex-direction: column;
    font-family: 'Inter', sans-serif;
    color: var(--va-text);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), background 0.4s;
    z-index: 1201;
    overflow: hidden;
}
.voice-archive-overlay.active #va-panel { transform: translateY(0); }

body.dark-mode #va-panel {
    --va-bg: linear-gradient(0deg, rgba(var(--va-r),var(--va-g),var(--va-b),0.15), rgba(var(--va-r),var(--va-g),var(--va-b),0.15)), #151515;
    --va-card-bg: #222222;
    --va-text: #E5E3DF;
    --va-sub: #8C8A87;
    --va-border: rgba(255,255,255,0.06);
    --va-accent-light: linear-gradient(0deg, rgba(var(--va-r),var(--va-g),var(--va-b),0.22), rgba(var(--va-r),var(--va-g),var(--va-b),0.22)), #222222;
}

/* 顶部工具栏 */
.va-toolbar {
    padding: 52px 20px 10px;
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
.va-color-picker { display: flex; gap: 10px; }
.va-dot {
    width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
.va-dot.active { border-color: var(--va-text); transform: scale(1.25); }
.va-toolbar-right { display: flex; gap: 8px; align-items: center; }
.va-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--va-sub); cursor: pointer; font-size: 18px;
}
.va-close-btn:active { background: var(--va-border); }

/* char 信息 */
.va-profile {
    padding: 10px 20px 16px;
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
}
.va-avatar {
    width: 50px; height: 50px; border-radius: 14px;
    border: 1px solid var(--va-border); object-fit: cover;
}
.va-profile-info h2 {
    font-size: 18px; margin: 0; font-style: italic;
    color: var(--va-text);
}
.va-stats { font-size: 11px; color: var(--va-sub); font-weight: 500; margin-top: 4px; }
.va-stats span { color: var(--va-accent); font-weight: 700; }

/* Tabs */
.va-tabs {
    display: flex; padding: 0 16px 12px; gap: 6px;
    flex-shrink: 0;
}
.va-tab-btn {
    flex: 1; height: 34px; border-radius: 10px;
    border: 1px solid var(--va-border);
    background: var(--va-card-bg);
    font-size: 11px; font-weight: 600; color: var(--va-text);
    display: flex; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; transition: 0.3s;
}
.va-tab-btn.active { background: var(--va-accent); color: #fff; border-color: var(--va-accent); }

/* 分线 pills */
.va-pills {
    display: none; gap: 8px; padding: 0 16px 12px;
    overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
}
.va-pills::-webkit-scrollbar { display: none; }
.va-pill {
    display: flex; align-items: center; gap: 6px; padding: 5px 12px;
    background: var(--va-card-bg); border: 1px solid var(--va-border); border-radius: 20px;
    font-size: 11px; font-weight: 600; color: var(--va-text);
    cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: 0.3s;
}
.va-pill.active { background: var(--va-text); color: var(--va-card-bg); border-color: var(--va-text); }

/* 卡片列表 */
.va-list {
    flex: 1; overflow-y: auto; padding: 0 16px 40px;
    scrollbar-width: none;
}
.va-list::-webkit-scrollbar { display: none; }

.va-empty-state { text-align: center; padding: 60px 20px; }
.va-empty-state i { font-size: 32px; color: var(--va-border); display: block; margin-bottom: 10px; }
.va-empty-state p { font-size: 13px; color: var(--va-sub); font-weight: 500; margin: 0; }

/* 卡片 */
.va-sync-card {
    background: var(--va-card-bg); border: 1px solid var(--va-border);
    border-radius: 18px; margin-bottom: 16px; overflow: hidden; transition: 0.3s;
}
.va-card-top {
    padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
}
.va-card-author { display: flex; align-items: center; gap: 8px; }
.va-card-author img { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--va-border); object-fit: cover; }
.va-card-author span { font-size: 13px; font-weight: 700; color: var(--va-text); }
.va-scene-badge {
    font-size: 9px; padding: 2px 6px; border-radius: 4px;
    background: var(--va-bg); color: var(--va-sub);
    border: 1px solid var(--va-border); font-weight: 600; margin-left: 6px;
}
.va-card-time { font-size: 10px; color: var(--va-sub); font-weight: 500; margin-left: auto; margin-right: 12px; }
.va-fav-star { font-size: 18px; color: var(--va-border); cursor: pointer; transition: 0.2s; }
.va-fav-star.active { color: #C5A87C; }

.va-section-1 { padding: 4px 16px 14px; }
.va-section-2 {
    padding: 14px 16px;
    background: var(--va-accent-light);
    border-top: 1px solid var(--va-border);
    transition: background 0.3s;
}
.va-label {
    font-size: 9px; font-weight: 800; color: var(--va-sub);
    letter-spacing: 1px; margin-bottom: 6px; display: block;
}
.va-text { font-size: 13px; line-height: 1.6; color: var(--va-text); margin: 0; }
.va-footer { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.va-tag { font-size: 10px; color: var(--va-sub); font-weight: 500; }
.va-intensity { display: flex; gap: 3px; }
.va-dot-bar { width: 4px; height: 4px; border-radius: 50%; background: var(--va-border); }
.va-dot-bar.active { background: var(--va-accent); transition: 0.3s; }

/* ==========================================
   🌟 相册 Tab 5: 专属画风（per-char AI 生图设置）
   ========================================== */
.image-panel .style-intro {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 16px; margin-bottom: 16px;
    background: var(--card-bg); border: 1px solid var(--border-solid);
    border-radius: 12px;
}
.image-panel .style-intro i { color: var(--text-sub); font-size: 16px; margin-top: 2px; }
.image-panel .style-intro p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-sub); }

.image-panel .setting-card {
    background: var(--card-bg); border: 1px solid var(--border-solid);
    border-radius: 16px; padding: 16px; margin-bottom: 16px;
}
.image-panel .setting-header {
    display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
    font-size: 13px; font-weight: 700; color: var(--text-main);
}
.image-panel .setting-header i { color: var(--text-sub); font-size: 16px; }

.image-panel .custom-select-btn {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--panel-bg); border: 1px solid var(--border-solid);
    padding: 12px 16px; border-radius: 12px; cursor: pointer; transition: 0.2s;
}
.image-panel .custom-select-btn:active { transform: scale(0.98); background: var(--border-solid); }
.image-panel .custom-select-btn span { font-size: 13px; font-weight: 600; color: var(--text-main); }
.image-panel .custom-select-btn i { color: var(--text-sub); font-size: 18px; }

.image-panel .style-textarea {
    width: 100%; height: 120px; background: var(--panel-bg);
    border: 1px solid var(--border-solid); border-radius: 12px;
    padding: 12px 16px; font-size: 13px; color: var(--text-main);
    outline: none; resize: none; font-family: inherit; transition: 0.2s;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.image-panel .style-textarea::placeholder { color: var(--text-sub); opacity: 0.7; }
.image-panel .style-textarea:focus { border-color: var(--text-main); background: var(--card-bg); }

.image-panel .setting-helper {
    font-size: 11px; color: var(--text-sub); line-height: 1.5;
    margin-top: 10px; padding-left: 4px;
}

/* 5 个 tab 防挤压 */
.image-panel .method-tabs { overflow-x: auto; scrollbar-width: none; }
.image-panel .method-tabs::-webkit-scrollbar { display: none; }