/* ========== 全屏模式修改 ========== */
/* 修改说明�?
   1. html/body 改为实体背景色（#000黑色�?
   2. 不再使用 transparent，避免PWA安全区漏�?
   3. 背景图片功能不受影响（通过CSS变量 --home-bg-image 设置�?
*/

html {
    margin: 0;
    padding: 0;
    height: var(--app-height, 100vh);
    min-height: var(--app-height, 100vh);
    width: 100%;
    background: #000;  /* 黑色背景，适配暗色主题 */
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: var(--app-height, 100vh);
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #000;  /* ��ɫ���� */
    color: #333;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior-y: contain;
}

.mobile-container {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: var(--app-height, 100vh);
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    background-color: var(--home-screen-bg, #e7f1ff);
    background-image: var(--home-bg-image, none);
    background-size: cover;
    background-position: center;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: background 0.5s ease;
}

/* ========== �?桌面端布局已禁�?========== */
/* 修改说明�?
   - 原本在桌面浏览器中会显示 393x852px 的模拟手�?
   - 现在改为永远全屏，桌面端也会铺满整个浏览器窗�?
   - 如果需要恢复桌面预览模式，取消下面的注�?

   ⚠️ 受影响的功能�?
   1. 桌面浏览器不再显示模拟手机外�?
   2. 桌面浏览器不再有圆角和阴影效�?
   3. 桌面浏览器的渐变背景会被遮挡
*/

/*
@media (min-width: 481px) and (display-mode: browser) {
    html {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    
*/

/* ========== PWA和移动端已整合到主样�?========== */
/* 原本的PWA专用样式已经整合�?.mobile-container 主样式中
   现在所有环境（桌面/PWA/移动端）都使用同样的全屏布局
*/
.screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    min-height: var(--app-height, 100vh);
    padding: 0;  /* 移除所有padding实现全屏 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background-color: #f9f9f9;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

/* CSS变量定义 - 每个界面的背景色 */
:root {
    --app-height: 100vh;
    /* 默认锁屏背景 - 星空渐变 */
    --lock-screen-bg: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.28), transparent 60%),
                      linear-gradient(180deg, #060d22 0%, #0a173f 55%, #0a1a4a 100%);
    /* 其他界面默认背景 */
    --home-screen-bg: #e7f1ff;
    --home-bg-image: linear-gradient(160deg, #c0d8ff 0%, #8ec5ff 40%, #6fb1fc 100%);
    --chat-screen-bg: #ffffff;
    --wallet-screen-bg: #ffffff;
    --store-screen-bg: #ffffff;
    --backpack-screen-bg: #ffffff;
    --settings-screen-bg: #f8f8f8;

    /* 安全区元素背景色（导航栏、输入框等） */
    --safe-area-color: #f8f8f8; /* 全局默认安全区颜�?*/
    --chat-safe-area-color: #f8f8f8; /* 聊天界面安全区颜�?*/
    --wallet-safe-area-color: #f8f8f8; /* 钱包界面安全区颜�?*/
    --store-safe-area-color: #f8f8f8; /* 商店界面安全区颜�?*/
    --backpack-safe-area-color: #f8f8f8; /* 背包界面安全区颜�?*/
    --settings-safe-area-color: #f8f8f8; /* 设置界面安全区颜�?*/
    --home-safe-area-color: transparent; /* 主页安全区颜色（透明，支持背景图�?*/
    --lock-safe-area-color: transparent; /* 锁屏安全区颜色（透明，支持背景图�?*/

    /* 背景图片变量 */
    --lock-bg-image: none; /* 锁屏背景图片 */

    /* 玻璃拟态效果变�?*/
    --glass-alpha: 0.012;                 /* 玻璃中心透明度（越小越通透） */
    --glass-blur: 6px;                    /* 模糊值（越小越像"清水"�?*/
    --glass-bg: rgba(255, 255, 255, var(--glass-alpha)); /* 玻璃背景�?*/
    --glass-stroke: rgba(255, 255, 255, 0.45); /* 发丝亮描�?*/
    --fg: rgba(255, 255, 255, 0.95);      /* 前景文字颜色 */

    /* ========== Icon Style System (Day/Night) ========== */
    
    /* Default (Dark Mode / Dark Frost) */
    --icon-bg: rgba(255, 255, 255, 0.04);
    --icon-blur: 8px;
    --icon-sat: 258%;
    --icon-border: none;
    /* Deep, subtle inner glow for dark mode */
    --icon-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.01),
        inset 0 1px 10px rgba(255, 255, 255, 0.14);
    --icon-hover-bg: rgba(255, 255, 255, 0.08);
    --icon-hover-shadow: 
        0 12px 40px 0 rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 15px rgba(255, 255, 255, 0.2);
}

/* Light Mode Overrides (Ceramic Jelly) */
body.light-mode {
    /* Milky, semi-opaque glass that stands out on white */
    --icon-bg: rgba(255, 255, 255, 0.65); 
    --icon-blur: 24px;
    --icon-sat: 180%;
    /* Strong white highlight border to separate from background */
    --icon-border: 1px solid rgba(255, 255, 255, 0.4);
    /* Colored shadow (Ambilight) instead of black shadow */
    --icon-shadow: 
        0 12px 24px -6px rgba(100, 120, 160, 0.15),
        0 4px 8px -2px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 2px 10px rgba(255, 255, 255, 0.8);
    
    --icon-hover-bg: rgba(255, 255, 255, 0.85);
    --icon-hover-shadow: 
        0 16px 32px -8px rgba(100, 120, 160, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 1.0),
        inset 0 2px 15px rgba(255, 255, 255, 0.9);
    
    /* Override global text colors for light mode */
    --fg: #1d1d1f;
}

/* iOS PWA 高度修复：参考项目，使用简单的 100vh + -webkit-fill-available */
html, body, .mobile-container, .screen,
.transfer-input-modal, .red-packet-overlay, .rp-result {
    height: 100vh;
    min-height: 100vh;
}

/* iOS Safari/PWA 专用：-webkit-fill-available 更准确地适配系统UI */
@supports (-webkit-touch-callout: none) {
    html, body, .mobile-container, .screen,
    .transfer-input-modal, .red-packet-overlay, .rp-result {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
}

/* 应用CSS变量到各个界�?*/
#home-screen {
    /* 支持背景图片，如果没有图片则显示背景�?*/
    background-color: var(--home-screen-bg);
    background-image: var(--home-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#chat-screen {
    background: var(--chat-screen-bg) !important;
}

#wallet-screen {
    background: var(--wallet-screen-bg) !important;
}

#store-screen {
    background: var(--store-screen-bg) !important;
}

#backpack-screen {
    background: var(--backpack-screen-bg) !important;
}

#settings-screen {
    background: var(--settings-screen-bg) !important;
}

/* 锁屏基础样式 - 支持背景图片 */
#lock-screen {
    /* 默认星空渐变，支持背景图片覆�?*/
    background: var(--lock-screen-bg);
    background-image: var(--lock-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #3f6cff;
    display: none; /* 默认隐藏，解锁或进入锁屏时由 JS 控制 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 50;
    filter: saturate(1.05) contrast(1.03);
    /* 真正全屏 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    /* 平滑过渡 */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    margin: 0;
    box-sizing: border-box;
}

/* 锁屏安全区样�?- 已移除假安全区元�?*/

/* 星空闪烁效果 */
#lock-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,210,.9), transparent 40%),
        radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,210,.85), transparent 40%),
        radial-gradient(2px 2px at 85% 55%, rgba(255,255,210,.9), transparent 40%),
        radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,210,.85), transparent 40%),
        radial-gradient(2px 2px at 55% 85%, rgba(255,255,210,.9), transparent 40%);
    animation: twinkle 2.6s linear infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: .85 }
    50% { opacity: .35 }
}

/* 日期�?*/
.date-row {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .2px;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    margin-bottom: 12px;
}

.date-row .dot {
    margin: 0 8px;
    opacity: .9;
}

/* 大时�?*/
.time-display {
    font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 110px;
    line-height: 1;
    color: #3f6cff;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.35px;
    text-shadow: 0 10px 36px rgba(0,0,0,.55);
    margin-bottom: 20px;
}

/* 小组件区�?*/
.widgets {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1.4fr 72px 96px;
    gap: 14px;
    align-items: center;
    justify-items: center;
    color: #3f6cff;
    width: 100%;
    max-width: 350px;
    margin-bottom: 30px;
}

/* 左侧进度�?*/
.w-left {
    width: 100%;
    color: #3f6cff;
}

.w-left .line1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.w-left .title {
    font-weight: 700;
    letter-spacing: .2px;
}

.w-left .percent {
    font-weight: 800;
}

.w-left .bar {
    height: 8px;
    border-radius: 5px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    background: rgba(91,125,255,.18);
}

.w-left .bar > i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--pct) * 100%);
    background: #3f6cff;
    border-radius: 5px;
}

.w-left .bar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--pct) * 100%);
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: -4px;
    background: #fff;
    border: 2px solid #3f6cff;
}

/* 中间图标 */
.w-mid {
    width: 72px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #3f6cff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(63, 108, 255, 0.92);
    opacity: .95;
    position: relative;
}

/* 右侧环形 */
.w-right {
    width: 96px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ring {
    --val: 0.80;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(#3f6cff calc(var(--val) * 100%), rgba(255,255,255,.18) 0);
    display: grid;
    place-items: center;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.ring::before {
    content: "80%";
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,.25);
    display: grid;
    place-items: center;
    color: #3f6cff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.w-right .text {
    color: #3f6cff;
    font-size: 12px;
    opacity: .95;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.w-right .text b {
    font-size: 13px;
}

/* 解锁提示 */
.unlock-prompt {
    font-size: 16px;
    opacity: 0.7;
    animation: pulse 2s ease-in-out infinite;
    position: absolute;
    bottom: 60px;
    color: #5b7dff;
}

/* 外观设置样式 */
.color-palette {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 15px;
}

.color-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.color-btn-active {
    border-color: #3f6cff !important;
    box-shadow: 0 0 0 3px rgba(63, 108, 255, 0.2);
}

.custom-color-input {
    display: flex;
    gap: 10px;
    padding: 0 15px;
}

.custom-color-input input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
}

.iosm-btn-primary {
    padding: 10px 20px;
    background: #3f6cff;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
}

.iosm-btn-primary:hover {
    background: #2c5ce5;
}

.iosm-btn-secondary {
    padding: 10px 20px;
    background: #f2f2f7;
    color: #3f6cff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.iosm-btn-secondary:hover {
    background: #e5e5ea;
}

.iosm-hint {
    font-size: 12px;
    color: #999;
    padding: 0 15px;
}

.lockscreen-preview {
    margin: 15px;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    background: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.28), transparent 60%),
                linear-gradient(180deg, #060d22 0%, #0a173f 55%, #0a1a4a 100%);
    transition: background 0.3s;
}

.preview-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.preview-time {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.preview-date {
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
}

/* 界面选择�?*/
.iosm-select {
    width: 100%;
    padding: 12px 15px;
    margin: 0 15px;
    width: calc(100% - 30px);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

/* iOS式开�?*/
.iosm-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    margin-left: auto;
}

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

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

.iosm-slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .iosm-slider {
    background-color: #4cd964;
}

input:checked + .iosm-slider:before {
    transform: translateX(20px);
}

/* 安全区预�?*/
.safe-area-preview {
    margin: 15px;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.preview-phone {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    position: relative;
}

.preview-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.preview-content-area {
    flex: 1;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
}

.preview-safe-area {
    height: 60px;
    background: linear-gradient(180deg, #060d22 0%, #0a173f 55%, #0a1a4a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    transition: background 0.3s;
}
#home-screen {
    z-index: 5;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    min-height: calc(100vh + env(safe-area-inset-bottom, 0px));
    padding: 0;
    display: flex;
    flex-direction: column;
}

#home-screen .home-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: calc(32px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    gap: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
#home-screen h1 { margin-bottom: 20px; }
#ai-name-display { color: #764ba2; font-weight: bold; }
/* ������ȫ��������������������������һ�� */
/* ========== 多页面布局 ========== */
.pages-window {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); /* 主页底部组件留白 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pages-container {
    display: flex;
    flex: 1;
    height: 100%;
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    touch-action: pan-y;
}

.page {
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
    overflow: visible;
}

.page-content {
    width: 100%;
    min-height: 100%;
    padding: 8px 10px calc(140px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-content: start;
    box-sizing: border-box;
    position: relative;
}

/* 保持原有app-grid样式以兼容其他可能的使用 */
.app-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    /* 只有app图标区域需要安全距�?*/
    padding-bottom: 10px;
}

/* ========== Widget大型容器 - 占据4�?�?========== */
.widget-large {
    grid-column: span 4;
    grid-row: span 3;
    display: grid;
    position: relative;
    /* 固定高度�?个图标高�?+ 2个gap */
    height: calc(60px * 3 + 15px * 2);
    min-height: 240px;
}

.widget-card {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 26px;
    background: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 发丝描边效果 - 和app图标一�?*/
    box-shadow: inset 0 0 0 0.5px var(--glass-stroke);
}

/* 上半部分：可更换背景�?*/
.widget-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 26px 26px 0 0;
    /* 默认渐变背景 */
    background: linear-gradient(135deg, #a8dadc 0%, #457b9d 100%);
    cursor: pointer;
    pointer-events: auto;
}

/* 下半部分：玻璃拟�?*/
.widget-glass-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.18) brightness(1.03);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.18) brightness(1.03);
    border-radius: 0 0 26px 26px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 头像 */
.widget-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 2px solid rgba(255,255,255,0.5);
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* 中间内容�?*/
.widget-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.widget-weekday {
    font-size: 22px;
    font-weight: 600;
    color: var(--fg);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
}

.widget-signature {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧日期时间 */
.widget-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.widget-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--fg);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    white-space: nowrap;
}

.widget-time {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* ========== App图标样式 ========== */
.app-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }

/* ========== 页面指示�?========== */
.page-indicators {
    position: absolute;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.page-indicators .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    display: block;
    transition: all 0.3s ease;
}

.page-indicators .dot.active {
    width: 20px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.95);
}

/* ========== 玻璃框架（用于Dock等组件）- 清水玻璃效果 ========== */
.glass-frame {
    position: relative;
    border-radius: 24px;
    background: transparent; /* 背景几乎透明 */
}

/* 玻璃基底：几乎透明 + 渐变边框 + 轻blur */
.glass-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* 渐变边框技术：第一层是内部背景，第二层是边框渐�?*/
    background:
        var(--glass-bg),  /* 内部均匀背景 */
        linear-gradient(135deg,
            rgba(255,255,255,0.75) 0%,      /* 左上最�?*/
            rgba(255,255,255,0.15) 30%,     /* 过渡 */
            rgba(255,255,255,0.05) 50%,     /* 左下/右上最�?*/
            rgba(255,255,255,0.15) 70%,     /* 过渡 */
            rgba(255,255,255,0.75) 100%     /* 右下最�?*/
        );  /* 边框渐变 */
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;  /* 边框宽度决定渐变显示区域 */
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.18) brightness(1.03) contrast(1.02);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.18) brightness(1.03) contrast(1.02);
    box-shadow: none;
}

/* ========== Dock栏 ========== */
.dock {
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    padding: 8px 18px;
    border-radius: 18px;
    /* glass-frame background */
    z-index: 100;
}

.dock .app-icon {
    margin: 0;
}

.dock .app-icon-bg {
    /* Dock图标使用相同的玻璃效�?*/
}

/* ========== App图标背景样式 (Updated: Dynamic Day/Night System) ========== */

.app-icon-bg {

  width: 60px;

  height: 60px;

  

  /* Squircle Shape */

  border-radius: 22% !important;

  

  /* Dynamic Variables */

  background: var(--icon-bg) !important;

  backdrop-filter: blur(var(--icon-blur)) saturate(var(--icon-sat)) !important;

  -webkit-backdrop-filter: blur(var(--icon-blur)) saturate(var(--icon-sat)) !important;

  

  border: var(--icon-border) !important;

  box-shadow: var(--icon-shadow) !important;



  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 30px;

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  position: relative;

  overflow: hidden;

}



/* SVG图标样式 - 适配日夜间 */

.app-icon-bg svg {

  width: 30px;

  height: 30px;

  position: relative;

  z-index: 1;

  /* Auto-adjust icon color based on mode */

  /* In dark mode (default), icons are usually white/light */

  /* In light mode, we might want them darker, or stick to white if background is colorful.

     Let's assume SVG stroke is currentColor or hardcoded. 

     For now, we rely on the SVG's internal fill/stroke or use filter. */

  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));

}



/* 日间模式下让图标颜色更深一点，如果需要的话 */

body.light-mode .app-icon-bg svg {

    /* Optional: darken icons slightly if they are pure white */

    /* filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)) brightness(0.8); */

}



.app-icon:hover .app-icon-bg {

  transform: scale(1.08);

  background: var(--icon-hover-bg) !important;

  box-shadow: var(--icon-hover-shadow) !important;

}
.app-name { font-size: 12px; }

/* ========== 日夜间模式切换按钮 (Liquid Glass) ========== */
.theme-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px !important;
}

.theme-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.theme-toggle-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary, #1d1d1f);
}

.theme-toggle-desc {
    font-size: 13px;
    color: var(--text-secondary, #8e8e93);
}

/* 玻璃拟态开关容器 */
.theme-toggle-btn {
    position: relative;
    width: 72px;
    height: 38px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    /* 浅色玻璃背景 */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* 玻璃边框和内阴影 */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.theme-toggle-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.theme-toggle-btn:active {
    transform: scale(0.96);
}

/* 图标样式 */
.theme-toggle-btn .theme-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.theme-toggle-btn .theme-icon.sun {
    left: 9px;
    opacity: 1;
    color: #FF9500; /* 暖阳色 */
    transform: translateY(-50%) scale(1);
}

.theme-toggle-btn .theme-icon.moon {
    right: 9px;
    opacity: 0.4;
    color: #B0B0B5; /* 黯淡月亮 */
    transform: translateY(-50%) scale(0.8);
}

/* 滑块 (Thumb) - 像一颗��浮的珍珠 */
.theme-toggle-btn .theme-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

/* ========== 夜间模式状态 ========== */
.theme-toggle-btn.night {
    /* 深色玻璃背景 */
    background: rgba(30, 30, 40, 0.6);
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.theme-toggle-btn.night .theme-icon.sun {
    opacity: 0.4;
    color: #636366; /* 黯淡太阳 */
    transform: translateY(-50%) scale(0.8);
}

.theme-toggle-btn.night .theme-icon.moon {
    opacity: 1;
    color: #FFD60A; /* 明亮月亮 */
    transform: translateY(-50%) scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 214, 10, 0.4));
}

.theme-toggle-btn.night .theme-slider {
    left: calc(100% - 35px);
    background: linear-gradient(145deg, #3A3A3C, #2C2C2E);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0,0,0,0.2);
}

/* ========== 日间模式 - 清水玻璃图标效果 ========== */
body.light-mode .app-icon-bg {
  /* 超薄玻璃背景 - 像清水表面 */
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;

  /* 渐变边框 - Fresnel边缘反光效果 */
  border: 1px solid transparent !important;
  background-image:
    /* 内部玻璃 */
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
    /* 边缘高光 - 从边缘向中心衰减 */
    radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.25) 30%,
      rgba(255, 255, 255, 0.08) 60%,
      rgba(255, 255, 255, 0) 100%
    ),
    /* 边框渐变 - 四角明亮 */
    linear-gradient(135deg,
      rgba(255,255,255,0.6) 0%,
      rgba(255,255,255,0.15) 20%,
      rgba(255,255,255,0.03) 40%,
      rgba(255,255,255,0.03) 60%,
      rgba(255,255,255,0.15) 80%,
      rgba(255,255,255,0.6) 100%
    ) !important;
  background-origin: padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, border-box !important;

  /* 无阴影 - 保持清水感 */
  box-shadow: none !important;
}

/* 日间模式 - 顶部柔和高光 */
body.light-mode .app-icon-bg::before {
  content: "";
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: radial-gradient(ellipse at top,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: 22% 22% 0 0;
}

/* 日间模式 - SVG图标降低饱和度 */
body.light-mode .app-icon-bg svg {
  filter: none !important;
}

/* 日间模式 - 悬停效果 */
body.light-mode .app-icon:hover .app-icon-bg {
  transform: scale(1.05);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.35) 30%,
      rgba(255, 255, 255, 0.12) 60%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(135deg,
      rgba(255,255,255,0.7) 0%,
      rgba(255,255,255,0.25) 20%,
      rgba(255,255,255,0.08) 40%,
      rgba(255,255,255,0.08) 60%,
      rgba(255,255,255,0.25) 80%,
      rgba(255,255,255,0.7) 100%
    ) !important;
}

/* ========== 液态玻璃图标效果（iOS 26风格）========== */
.liquid-glass-icon .app-icon-bg {
  /* 基础液态玻璃 */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.15) 100%
  ) !important;
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.05) !important;

  /* 液态玻璃边框光泽 */
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 18px;

  /* 多层阴影模拟深度 */
  box-shadow:
    /* 外部阴影 */
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    /* 内部高光 - 顶部 */
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    /* 内部阴影 - 底部 */
    inset 0 -2px 4px rgba(0, 0, 0, 0.05),
    /* 边缘光泽 */
    inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;

  /* SVG折射滤镜 */
  filter: url(#liquid-glass-filter);

  /* 动画过渡 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 液态玻璃高光层 */
.liquid-glass-icon .app-icon-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 18px 18px 50% 50%;
  pointer-events: none;
}

/* 液态玻璃底部反光 */
.liquid-glass-icon .app-icon-bg::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  border-radius: 50%;
  pointer-events: none;
}

/* 悬停效果 - 更强的光泽 */
.liquid-glass-icon:hover .app-icon-bg {
  transform: scale(1.08) translateY(-2px);
  filter: url(#liquid-glass-strong);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 2px 6px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* 点击效果 */
.liquid-glass-icon:active .app-icon-bg {
  transform: scale(0.95);
  filter: url(#liquid-glass-filter);
}

.back-btn { background: none; border: none; font-size: 28px; font-weight: bold; color: #007aff; cursor: pointer; padding-right: 15px; }
/* ▼▼�?新增/修改 ▼▼�?*/
#home-screen, #chat-screen, #wallet-screen, #store-screen, #backpack-screen, #world-book-screen, #settings-screen, #general-settings-screen, #mqtt-room-screen {
    padding: 0;
    display: none;
    flex-direction: column;
    z-index: 6;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
/* 聊天界面特殊设置 - 完全全屏，无任何边距，仅中间列表滚动 */
#chat-screen {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    overflow: hidden !important;
    overscroll-behavior-y: contain;
}

/* 当聊天界面激活时，确保正确的flex布局 */
#chat-screen.active {
    display: flex !important;
    flex-direction: column !important;
}

#chat-screen .chat-header,
#chat-screen .chat-input-form,
#chat-screen .chat-input-area {
    flex-shrink: 0;
}

#chat-screen .message-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 12px;
}

#chat-screen .chat-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

/* 聊天界面在下面统一设置，这里不需要特殊处�?*/

/* MQTT聊天室容器样�?*/
#mqtt-room-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ▲▲�?新增/修改 ▲▲�?*/
.chat-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    /* 不要任何安全�?- 完全全屏 */
    border-bottom: 1px solid #e0e0e0;
    background-color: var(--chat-safe-area-color) !important;
    flex-shrink: 0; /* 防止头部被压�?*/
}
#chat-screen .chat-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.wallet-header,
.store-header,
.backpack-header,
.world-book-header,
.settings-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    padding-top: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.wallet-header { background-color: var(--wallet-safe-area-color) !important; }
.store-header { background-color: var(--store-safe-area-color) !important; }
.backpack-header { background-color: var(--backpack-safe-area-color) !important; }
.world-book-header { background-color: var(--safe-area-color) !important; }
.settings-header { background-color: var(--settings-safe-area-color) !important; }

@media (max-width: 768px), (display-mode: standalone), (display-mode: fullscreen) {
    .wallet-header,
    .store-header,
    .backpack-header,
    .world-book-header,
    .settings-header {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }
}
.chat-header h2, .wallet-header h2, .store-header h2, .backpack-header h2, .world-book-header h2, .settings-header h2 { font-size: 18px; margin: 0; text-align: center; flex-grow: 1; }

/* 聊天设置按钮 */
.chat-settings-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-settings-btn svg {
    width: 20px;
    height: 20px;
}

.chat-settings-btn:hover {
    opacity: 0.7;
}

.chat-settings-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* 调整header布局以适配新按�?*/
.chat-header {
    position: relative;  /* 为绝对定位的设置按钮提供参�?*/
}

.chat-header h2 {
    padding-right: 40px;  /* 给设置按钮留出空�?*/
}

.message-container {
    flex: 1;
    min-height: 0; /* 重要：允许flex子元素收�?*/
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

/* ========== 聊天高级设置界面样式 ========== */
#chat-settings-screen {
    display: none;
    flex-direction: column;
    background-color: #f5f5f7;
}

.chat-settings-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid #e0e0e0;
    background-color: #ffffff;
}

.chat-settings-header h2 {
    font-size: 18px;
    margin: 0;
    text-align: center;
    flex-grow: 1;
}

.chat-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 15px calc(20px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.chat-setting-group {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chat-setting-group h3 {
    font-size: 16px;
    color: #333;
    margin: 0 0 15px 0;
    font-weight: 600;
}

/* 记忆设置 - 聊天记录管理按钮 */
.setting-hint {
    font-size: 13px;
    color: #888;
    margin: -10px 0 15px 0;
}

.chat-history-stats {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-history-stats .stat-icon {
    font-size: 18px;
}

.memory-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.memory-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.memory-action-btn .btn-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

.memory-action-btn .btn-icon svg {
    width: 24px;
    height: 24px;
}

.memory-action-btn .btn-content {
    flex: 1;
}

.memory-action-btn .btn-text {
    font-size: 15px;
    font-weight: 600;
    display: block;
}

.memory-action-btn .btn-desc {
    font-size: 12px;
    opacity: 0.7;
    display: block;
    margin-top: 3px;
}

/* 导出按钮 - 蓝色渐变 */
.memory-action-btn.export-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.memory-action-btn.export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.memory-action-btn.export-btn:active {
    transform: translateY(0);
}

/* 导入按钮 - 绿色渐变 */
.memory-action-btn.import-btn {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}

.memory-action-btn.import-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}

.memory-action-btn.import-btn:active {
    transform: translateY(0);
}

/* 清空按钮 - 红色渐变 */
.memory-action-btn.clear-btn {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(235, 51, 73, 0.3);
}

.memory-action-btn.clear-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(235, 51, 73, 0.4);
}

.memory-action-btn.clear-btn:active {
    transform: translateY(0);
}

.chat-setting-item {
    margin-bottom: 15px;
}

.chat-setting-item:last-child {
    margin-bottom: 0;
}

.chat-setting-label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

/* 历史条数滑块 */
.history-depth-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e0e0e0;
    outline: none;
    transition: background 0.3s;
}

.history-depth-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    transition: transform 0.2s;
}

.history-depth-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    transition: transform 0.2s;
}

.history-depth-slider:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

.history-depth-slider:active::-moz-range-thumb {
    transform: scale(1.2);
}

.slider-value-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.slider-value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.slider-hint {
    font-size: 12px;
    color: #999;
}

.chat-setting-description {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    line-height: 1.4;
}

/* 聊天设置中的文本�?*/
.chat-setting-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.chat-setting-textarea:focus {
    outline: none;
    border-color: #667eea;
}

/* 聊天设置中的输入�?*/
.chat-setting-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.chat-setting-input:focus {
    outline: none;
    border-color: #667eea;
}

.save-chat-settings-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
}

.save-chat-settings-btn:hover {
    opacity: 0.9;
}

.save-chat-settings-btn:active {
    transform: scale(0.98);
}

.save-chat-settings-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 标签页样�?*/
.chat-settings-tabs {
    display: flex;
    gap: 0;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 4px;
    margin: 0 16px 16px 16px;
    position: relative;
    z-index: 10;
}

.chat-setting-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 11;
    pointer-events: auto;
}

.chat-setting-tab:hover {
    background: rgba(102, 126, 234, 0.1);
}

.chat-setting-tab.active {
    background: white;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-setting-tab-content {
    display: none;
}

.chat-setting-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* 美化设置特有样式 */
.avatar-setting {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    background: #f3f4f6;
}

.avatar-upload-btn {
    padding: 8px 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.avatar-upload-btn:hover {
    background: #5a67d8;
}

.color-picker {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px;
}

.chat-setting-slider {
    width: 70%;
    vertical-align: middle;
}

.chat-setting-slider + span {
    display: inline-block;
    width: 25%;
    text-align: right;
    color: #667eea;
    font-weight: 500;
}

/* 消息容器和头像样�?*/
.message-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.user-wrapper {
    flex-direction: row-reverse;
}

.ai-wrapper {
    flex-direction: row;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e5e7eb;
    background: #f3f4f6;
}

/* 聊天输入区域容器 */
.chat-input-area {
    background-color: var(--chat-safe-area-color, #f7f7f7);
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    padding: 6px 8px calc(22px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    box-sizing: border-box;
}

.chat-input-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 0;
    background: transparent;
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.chat-input-form input {
    flex-grow: 1;
    min-width: 0;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 16px;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input-form input:focus {
    border-color: #007aff;
}

.chat-input-form button[type="submit"] {
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 18px;
    padding: 10px 18px;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, opacity 0.2s;
}

.chat-input-form button[type="submit"]:active {
    opacity: 0.8;
}

/* + 按钮 */
.chat-plus-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.25s ease, background-color 0.2s;
    flex-shrink: 0;
    color: #555;
}

.chat-plus-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.chat-plus-btn:active {
    background-color: rgba(0, 0, 0, 0.1);
}

.chat-plus-btn.open {
    transform: rotate(45deg);
}

.chat-plus-btn svg {
    width: 24px;
    height: 24px;
}

/* 云朵按钮 - 打包发送 */
.chat-cloud-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: #007aff;
}

.chat-cloud-btn:hover {
    background-color: rgba(0, 122, 255, 0.1);
    transform: scale(1.05);
}

.chat-cloud-btn:active {
    background-color: rgba(0, 122, 255, 0.2);
    transform: scale(0.95);
}

.chat-cloud-btn svg {
    width: 22px;
    height: 22px;
}

/* 云朵按钮禁用状态（AI回复中） */
.chat-cloud-btn:disabled,
.chat-cloud-btn.disabled {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

.chat-cloud-btn:disabled:hover,
.chat-cloud-btn.disabled:hover {
    background: transparent;
    transform: none;
}

/* 云朵按钮激活状态（有暂存消息） */
.chat-cloud-btn.has-pending {
    color: #fff;
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.chat-cloud-btn.has-pending:hover {
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

/* 快捷功能面板 */
.chat-action-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-color: var(--chat-safe-area-color, #f7f7f7);
}

.chat-action-panel.open {
    max-height: 200px;
}

.action-panel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.action-panel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.action-panel-item:active .action-panel-icon {
    transform: scale(0.95);
    background-color: #e0e0e0;
}

.action-panel-icon {
    width: 56px;
    height: 56px;
    background-color: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background-color 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.action-panel-icon svg {
    color: #555;
}

.action-panel-label {
    font-size: 12px;
    color: #666;
}

/* 表情包选择面板 */
.sticker-panel {
    background-color: var(--chat-safe-area-color, #f7f7f7);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    max-height: 280px;
    display: flex;
    flex-direction: column;
}

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

.sticker-panel-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.sticker-panel-tabs::-webkit-scrollbar {
    display: none;
}

.sticker-tab {
    padding: 6px 12px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.sticker-tab.active {
    background: #007aff;
    color: #fff;
}

.sticker-manage-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #666;
    border-radius: 50%;
    transition: background 0.2s;
}

.sticker-manage-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sticker-panel-search {
    padding: 8px 12px;
}

.sticker-panel-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    font-size: 14px;
    background: #fff;
    outline: none;
}

.sticker-panel-search input:focus {
    border-color: #007aff;
}

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    flex: 1;
}

.sticker-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

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

.sticker-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sticker-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.sticker-empty p {
    margin-bottom: 12px;
}

.sticker-add-btn {
    padding: 8px 16px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

.sticker-add-btn:active {
    opacity: 0.8;
}

/* 表情包消息样式 */
.message-bubble.sticker-message {
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px !important;
}

.message-bubble.sticker-message .sticker-image {
    max-width: 120px;
    max-height: 120px;
    border-radius: 8px;
    object-fit: contain;
}

/* 表情包消息附带的文字 */
.message-bubble.sticker-message .sticker-text {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    font-size: 14px;
    color: #333;
    max-width: 200px;
    word-break: break-word;
}

.message-wrapper.user-wrapper .sticker-message .sticker-text {
    background: rgba(102, 126, 234, 0.9);
    color: #fff;
}

/* 表情包管理弹窗 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticker-manager-container {
    background: #fff;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sticker-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.sticker-manager-header h2 {
    margin: 0;
    font-size: 18px;
}

.sticker-manager-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.sticker-manager-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
}

.sticker-manager-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.sticker-manager-tab.active {
    color: #007aff;
    border-bottom-color: #007aff;
}

.sticker-manager-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.sticker-manager-content.active {
    display: block;
}

/* 我的表情列表 */
.sticker-manager-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sticker-manager-filter select,
.sticker-manager-filter input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.sticker-manager-filter select {
    flex-shrink: 0;
}

.sticker-manager-filter input {
    flex: 1;
}

.sticker-manager-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.sticker-manager-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    cursor: pointer;
}

.sticker-manager-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sticker-manager-item .sticker-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 10px;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticker-manager-item .sticker-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

.sticker-manager-item:hover .sticker-delete {
    display: flex;
}

/* 添加表情 */
.sticker-add-section {
    margin-bottom: 20px;
}

.sticker-add-section h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #333;
}

.sticker-upload-area {
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
}

.sticker-upload-area:hover {
    border-color: #007aff;
    background: #f8faff;
}

.sticker-upload-area svg {
    margin-bottom: 8px;
}

.sticker-upload-area p {
    margin: 4px 0;
}

.sticker-upload-area .upload-hint {
    font-size: 12px;
    color: #bbb;
}

.sticker-url-input-group {
    display: flex;
    gap: 8px;
}

.sticker-url-input-group input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.sticker-url-input-group button {
    padding: 10px 16px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.sticker-url-preview {
    margin-top: 12px;
    text-align: center;
}

.sticker-url-preview img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
}

.sticker-preview-container {
    text-align: center;
    margin-bottom: 16px;
}

.sticker-preview-container img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.sticker-form-group {
    margin-bottom: 16px;
}

.sticker-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #333;
}

.sticker-form-group label .required {
    color: #ff4444;
}

.sticker-form-group input,
.sticker-form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-hint {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.sticker-save-btn {
    width: 100%;
    padding: 12px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.sticker-save-btn:disabled {
    background: #ccc;
}

#sticker-batch-input {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: monospace;
    resize: vertical;
    box-sizing: border-box;
}

.sticker-batch-btn {
    margin-top: 8px;
    padding: 10px 20px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* 分类管理 */
.category-add-group {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.category-add-group input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.category-add-group button {
    padding: 10px 16px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
}

.category-item .category-name {
    flex: 1;
    font-size: 14px;
}

.category-item .category-count {
    color: #999;
    font-size: 12px;
    margin-right: 12px;
}

.category-item .category-delete {
    background: none;
    border: none;
    color: #ff4444;
    cursor: pointer;
    font-size: 18px;
}

/* 表情包编辑弹窗 */
.sticker-edit-overlay {
    position: fixed;
    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: 2000;
}

.sticker-edit-panel {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    width: 280px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: sticker-edit-pop 0.2s ease-out;
}

@keyframes sticker-edit-pop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.sticker-edit-preview {
    text-align: center;
    margin-bottom: 16px;
}

.sticker-edit-preview img {
    max-width: 120px;
    max-height: 120px;
    border-radius: 12px;
    border: 1px solid #eee;
}

.sticker-edit-group {
    margin-bottom: 14px;
}

.sticker-edit-group label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.sticker-edit-group input,
.sticker-edit-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.sticker-edit-group input:focus,
.sticker-edit-group select:focus {
    outline: none;
    border-color: #007aff;
}

.sticker-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.sticker-edit-save {
    flex: 1;
    padding: 10px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.sticker-edit-save:hover {
    background: #0066dd;
}

.sticker-edit-delete {
    padding: 10px 14px;
    background: #fff;
    color: #ff4444;
    border: 1px solid #ff4444;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.sticker-edit-delete:hover {
    background: #fff0f0;
}

.sticker-edit-cancel {
    padding: 10px 14px;
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.sticker-edit-cancel:hover {
    background: #eee;
}

/* 长按气泡菜单 */
.bubble-context-menu {
    position: fixed;
    display: none;
    flex-direction: row;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
}

.bubble-context-menu.show {
    display: flex;
    animation: bubbleMenuFadeIn 0.15s ease;
}

@keyframes bubbleMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.bubble-menu-item {
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.bubble-menu-item:not(:last-child) {
    border-right: 1px solid #eee;
}

.bubble-menu-item:hover {
    background-color: #f5f5f5;
}

.bubble-menu-item:active {
    background-color: #e8e8e8;
}

/* 菜单三角指示器 */
.bubble-context-menu::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
}

.bubble-context-menu.menu-above::after {
    bottom: auto;
    top: -6px;
    border-top: none;
    border-bottom: 6px solid #fff;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .action-panel-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        padding: 16px 12px;
    }

    .action-panel-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
    }

    .action-panel-icon svg {
        width: 24px;
        height: 24px;
    }

    .action-panel-label {
        font-size: 11px;
    }

    .bubble-menu-item {
        padding: 10px 12px;
        font-size: 13px;
    }
}
.message-bubble { padding: 10px 15px; border-radius: 18px; max-width: 70%; word-wrap: break-word; display: flex; flex-direction: column; gap: 5px; }
.user-message { background-color: #007aff; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-message { background-color: #e5e5ea; color: black; align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-image { max-width: 100%; border-radius: 10px; }
.wallet-content { padding: 20px; }
.balance-card { background-color: #ffffff; border-radius: 12px; padding: 20px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.balance-card h3 { margin-top: 0; margin-bottom: 10px; color: #555; }
.balance-card p { margin: 0; font-size: 28px; font-weight: bold; color: #333; }
.store-content { flex-grow: 1; overflow-y: auto; padding: 15px; }
.store-content > p { font-size: 14px; color: #666; text-align: center; margin-bottom: 15px; }
.item-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.item-card { background-color: #fff; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 15px; text-align: center; }
.item-card h3 { margin-top: 0; margin-bottom: 5px; font-size: 16px; }
.item-card p { margin: 0 0 10px; font-size: 14px; color: #888; }
.buy-btn { background-color: #4cd964; color: white; border: none; border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; width: 100%; transition: background-color 0.2s; }
.buy-btn:hover { background-color: #3abf50; }
/* ========== 背包系统样式 ========== */
.backpack-owner-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.backpack-owner-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.backpack-owner-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    color: #fff;
}
.backpack-owner-tab .tab-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.backpack-owner-tab.active .tab-avatar {
    background: rgba(255,255,255,0.2);
}
.backpack-owner-tab .tab-name { font-size: 14px; font-weight: 500; }
.backpack-owner-tab .tab-count {
    font-size: 12px;
    opacity: 0.7;
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 10px;
}
.backpack-owner-tab.active .tab-count {
    background: rgba(255,255,255,0.2);
}

.inventory-list { flex-grow: 1; overflow-y: auto; padding: 15px; }
.inventory-empty-msg {
    color: #888;
    text-align: center;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.inventory-empty-msg .empty-icon { font-size: 48px; opacity: 0.5; }
.inventory-empty-msg .empty-text { font-size: 14px; }

/* 物品分类标题 */
.inventory-category {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.inventory-category:first-child { margin-top: 0; }

/* 物品卡片 */
.inventory-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}
.inventory-item .item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.inventory-item .item-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.inventory-item .item-info {
    flex: 1;
    min-width: 0;
}
.inventory-item .item-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin-bottom: 2px;
}
.inventory-item .item-desc {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inventory-item .item-meta {
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}
.inventory-item .item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.use-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.use-btn:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
.use-btn:active { transform: scale(0.98); }
.use-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 剧情物品特殊样式 - 视觉突出 */
.inventory-category.story-category {
    color: #d4af37;
    border-bottom-color: #d4af37;
    position: relative;
}
.inventory-category.story-category::before {
    content: '✨ ';
}
.inventory-item.story-item {
    background: linear-gradient(135deg, #fffdf5, #fff9e6);
    border: 1px solid #e8d5a3;
    position: relative;
    overflow: hidden;
}
.inventory-item.story-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,215,0,0.1) 50%, transparent 60%);
    animation: story-shimmer 3s infinite;
    pointer-events: none;
}
@keyframes story-shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}
.inventory-item.story-item .item-icon {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
}
.inventory-item.story-item .item-name {
    color: #8b6914;
}

/* 特殊物品样式 */
.inventory-item.special-item {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border: 1px solid #a5d6a7;
}
.inventory-item.special-item .item-icon {
    background: linear-gradient(135deg, #a5d6a7, #81c784);
}

.rule-list { flex-grow: 1; overflow-y: auto; padding: 15px; }
.rule-card { background-color: #fff; border-radius: 8px; padding: 15px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.rule-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rule-key { font-weight: bold; font-size: 16px; }
.rule-category { background-color: #eee; color: #555; font-size: 12px; padding: 3px 8px; border-radius: 10px; }
.rule-body { display: flex; justify-content: space-between; align-items: center; }
.rule-value { font-size: 20px; color: #007aff; }
.rule-edit-input { font-size: 18px; padding: 5px; width: 80px; border: 1px solid #ccc; border-radius: 4px; }
.rule-actions button { font-size: 12px; padding: 6px 10px; border-radius: 6px; border: none; cursor: pointer; margin-left: 5px; }
.edit-btn { background-color: #ff9500; color: white; }
.save-btn { background-color: #4cd964; color: white; }
.cancel-btn { background-color: #ccc; }
.settings-content { flex-grow: 1; overflow-y: auto; padding: 15px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 14px; color: #555; margin-bottom: 5px; }
.form-group input, .form-group select { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; box-sizing: border-box; }
.form-hint { display: block; font-size: 12px; color: #888; margin-top: 4px; }
.form-button { width: 100%; padding: 12px; background-color: #007aff; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; margin-top: 10px; }
.form-button-secondary { padding: 10px; background-color: #f0f0f0; color: #333; border: 1px solid #ccc; cursor: pointer; border-radius: 6px; }
.api-test-container { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
#api-status-indicator { font-size: 14px; font-weight: 500; }
#api-status-indicator.success { color: #28a745; }
#api-status-indicator.error { color: #dc3545; }
.preset-manager { margin-bottom: 10px; }
.preset-controls { display: flex; gap: 10px; }
.preset-controls select { flex-grow: 1; }
.preset-btn { width: 40px; height: 40px; flex-shrink: 0; font-size: 20px; padding: 0; line-height: 40px; text-align: center; }
.separator { border: none; border-top: 1px solid #e0e0e0; margin: 20px 0; }
.settings-content textarea { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; box-sizing: border-box; font-family: inherit; resize: vertical; }
#world-book-linking-container label { display: block; margin-bottom: 5px; }
/* 钱包刷新按钮 */
#wallet-refresh-btn {
    margin-left: auto;
    background: var(--theme-gradient);
    border: none;
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.5s ease;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#wallet-refresh-btn:hover {
    transform: rotate(180deg);
}

#wallet-refresh-btn:active {
    transform: rotate(180deg) scale(0.9);
}


/* 思维链折叠样式 */
.thought-container {
    margin-bottom: 8px;
    font-size: 12px;
}

.thought-toggle {
    cursor: pointer;
    padding: 4px;
    background: transparent;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.2s ease;
    width: 30px;
    height: 30px;
}

.thought-toggle:hover {
    background: rgba(255, 217, 61, 0.2);
    transform: scale(1.1);
}

.thought-toggle:active {
    transform: scale(0.95);
}

.thought-toggle svg {
    display: block;
}

.thought-content {
    padding: 12px;
    background: #f9f9f9;
    border-left: 3px solid #667eea;
    border-radius: 6px;
    margin-top: 8px;
    color: #555;
    line-height: 1.6;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    animation: slideDown 0.3s ease;
}

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

/* PWA模式特殊优化 */
@media (display-mode: standalone) {
    .thought-toggle {
        padding: 8px 12px;
        font-size: 13px;
    }

    .thought-content {
        font-size: 12px;
    }
}

/* PWA全屏模式 - 移除会导致缩小的设置 */
@media (display-mode: standalone), (display-mode: fullscreen) {
    /* 不再覆盖.screen的基础设置 */

    /* MQTT房间屏幕特殊处理 - 去除padding保持全屏 */
    #mqtt-room-screen {
        padding: 0 !important;
    }

    /* MQTT内容区域去除所有padding */
    #mqtt-room-screen .mqtt-content {
        padding: 0 !important;
    }
}

/* 触摸设备优化 */
@media (pointer: coarse) {
    .thought-toggle {
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* ========== 世界�?V3 - 简约高级风�?========== */

.wb-container {
    padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #f8f9fa;
}

/* 极简顶部�?*/
.wb-minimal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}

.wb-select-minimal {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 12px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.wb-top-actions {
    display: flex;
    gap: 8px;
}

.wb-mini-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.wb-mini-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 搜索�?*/
.wb-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.wb-search-minimal {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: white;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.wb-add-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: var(--theme-gradient);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

/* 条目列表 */
.wb-entries-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 极简条目卡片 */
.wb-entry-item {
    background: white;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.wb-entry-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.wb-entry-item.disabled {
    opacity: 0.5;
}

.wb-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.wb-entry-title {
    font-size: 14px;
    font-weight: 500;
    color: #2c3e50;
}

.wb-entry-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #e3f2fd;
    color: #1976d2;
}

.wb-entry-preview {
    font-size: 12px;
    color: #718096;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* 标准属�?*/
    -webkit-box-orient: vertical;
}

/* 空状�?*/
.wb-empty {
    text-align: center;
    padding: 60px 20px;
}

.wb-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.wb-empty p {
    color: #718096;
    margin-bottom: 16px;
}

.wb-empty-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: var(--theme-gradient);
    color: white;
    font-size: 14px;
    cursor: pointer;
}

/* 编辑面板 */
.wb-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
}

.wb-panel.open {
    display: block;
}

.wb-panel-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
}

.wb-panel-content {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* 面板头部 */
.wb-panel-header {
    background: white;
    padding: 16px 12px 12px 12px;  /* 顶部稍微多一点内边距 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

.wb-entry-title-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
}

.wb-panel-buttons {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.wb-panel-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
}

.wb-panel-btn:hover {
    background: #f1f5f9;
}

/* ID字段 */
.wb-panel-field {
    padding: 0 12px;
    margin-top: 8px;
}

.wb-input-minimal {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: white;
}

/* 面板主体 */
.wb-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* 开关组 */
.wb-switches {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.wb-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.wb-switch input[type="checkbox"] {
    margin-right: 6px;
}

/* 字段 */
.wb-field {
    margin-bottom: 16px;
}

.wb-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 6px;
}

.wb-input,
.wb-select,
.wb-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s;
}

.wb-input:focus,
.wb-select:focus,
.wb-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.wb-textarea {
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* 展开按钮 */
.wb-expand-btn {
    padding: 2px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: white;
    font-size: 12px;
    cursor: pointer;
}

/* 网格布局 */
.wb-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wb-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

/* 范围滑块 */
.wb-range {
    width: 100%;
}

/* 可折叠部�?*/
.wb-collapsible {
    background: white;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.wb-collapsible summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
    user-select: none;
    list-style: none;
}

.wb-collapsible summary::-webkit-details-marker {
    display: none;
}

.wb-collapsible summary::before {
    content: '�?;
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s;
}

.wb-collapsible[open] summary::before {
    transform: rotate(90deg);
}

.wb-collapsible[open] summary {
    margin-bottom: 12px;
}

/* 面板底部 */
.wb-panel-footer {
    padding: 12px;
    background: white;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
}

.wb-btn-save,
.wb-btn-test {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.wb-btn-save {
    background: var(--theme-gradient);
    color: white;
}

.wb-btn-test {
    background: white;
    border: 1px solid #e2e8f0;
    color: #4a5568;
}

.wb-btn-save:hover,
.wb-btn-test:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 模态框 */
.wb-modal {
    position: fixed;
    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: 2000;
}

.wb-modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.wb-modal-header {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wb-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.wb-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
    color: #718096;
}

.wb-modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.wb-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
}

.wb-btn-primary,
.wb-btn-secondary,
.wb-btn-danger {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.wb-btn-primary {
    background: var(--theme-gradient);
    color: white;
}

.wb-btn-secondary {
    background: white;
    border: 1px solid #e2e8f0;
    color: #4a5568;
}

.wb-btn-danger {
    background: #ef4444;
    color: white;
}

/* 内容编辑�?*/
.wb-expand-textarea {
    width: 100%;
    min-height: 300px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

/* 测试结果 */
.wb-test-results {
    margin-top: 16px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
}

.wb-test-results h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 500;
}

.test-match {
    padding: 8px;
    background: white;
    border-radius: 6px;
    margin-top: 8px;
    font-size: 13px;
}

.test-match.active {
    background: #e8f5e9;
    border: 1px solid #4caf50;
}

/* 响应式优�?*/
@media (max-width: 480px) {
    .wb-panel-content {
        width: 100%;
    }
    
    .wb-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .wb-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* 模式切换�?*/
.wb-mode-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.wb-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.wb-mode-btn:hover {
    background: #f1f5f9;
}

.wb-mode-btn.active {
    background: var(--theme-gradient);
    color: white;
    border-color: transparent;
}

.mode-icon {
    font-size: 16px;
}

.wb-mode-info {
    display: flex;
    align-items: center;
}

/* 批量操作栏样�?*/
.wb-batch-bar {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 400px;
    padding: 12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 100;
}

.wb-batch-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* 多选模式下的条目样�?*/
.wb-multiselect-mode .wb-entry-checkbox {
    display: block !important;
}

.wb-multiselect-mode .wb-entry-content {
    /* 保持容器可点击，但禁用滑动操�?*/
    pointer-events: auto;
}

/* 在多选模式下，禁用主内容区域的点击（除了复选框�?*/
.wb-multiselect-mode .wb-entry-main {
    pointer-events: none;
}

/* 但保持复选框可点�?*/
.wb-multiselect-mode .wb-entry-checkbox {
    pointer-events: auto !important;
}

.wb-multiselect-mode .wb-swipe-actions {
    display: none !important;
}

/* 普通模式下降低勾选框透明度，让用户知道可以多�?*/
.wb-normal-mode .wb-entry-checkbox {
    opacity: 0.3;
    transition: opacity 0.2s;
}

.wb-normal-mode .wb-entry-checkbox:hover {
    opacity: 0.7;
}

/* 条目滑动样式 */
.wb-swipeable {
    position: relative;
    overflow: hidden;
}

.wb-entry-content {
    position: relative;
    z-index: 2;
    background: #fff;
    transition: transform 0.3s ease;
}

.wb-swipe-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.wb-swipe-actions.visible {
    opacity: 1;
    pointer-events: auto;
}

.wb-swipe-edit,
.wb-swipe-delete {
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: white;
    min-width: 50px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wb-swipe-edit:active,
.wb-swipe-delete:active {
    opacity: 0.8;
    transform: scale(0.95);
}

.wb-swipe-edit {
    background: #3b82f6;
}

.wb-swipe-delete {
    background: #ef4444;
}
/* 角色标签样式 */
.character-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--theme-gradient);
    color: white;
    border-radius: 16px;
    font-size: 13px;
    animation: tagAppear 0.2s ease;
}

@keyframes tagAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.character-tag-remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.character-tag-remove:hover {
    opacity: 1;
}

/* 空状态提�?*/
.character-empty-hint {
    color: #999;
    font-size: 12px;
    font-style: italic;
}

/* 全局世界书设置面�?*/
.wb-global-settings {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px 0;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wb-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--theme-gradient);
    color: white;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
}

.wb-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-settings-section {
    padding: 15px;
}

.wb-settings-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.wb-setting-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wb-setting-item.full-width {
    flex: 1 1 100%;
}

.wb-setting-item label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.wb-setting-item input,
.wb-setting-item select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.wb-setting-item small {
    font-size: 11px;
    color: #666;
}

.wb-checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.wb-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.wb-checkbox-group input[type="checkbox"] {
    cursor: pointer;
}

.wb-advanced-settings {
    border-top: 1px solid #eee;
}

.wb-advanced-settings summary {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    list-style: none;
}

.wb-advanced-settings summary::-webkit-details-marker {
    display: none;
}

.wb-settings-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.wb-save-btn {
    background: var(--theme-gradient);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.wb-reset-btn {
    background: #f0f0f0;
    color: #666;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
}

#wb-global-settings-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

/* MQTT房间列表样式 */
.room-list-section {
    margin: 15px 0;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
}

.room-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

.room-list-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

.refresh-room-list {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.refresh-room-list:hover {
    background: rgba(102, 126, 234, 0.1);
}

.room-list-container {
    max-height: 200px;
    overflow-y: auto;
}

.room-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 5px 0;
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s;
}

.room-item:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.room-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.room-name {
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.room-creator {
    font-size: 12px;
    color: #666;
}

.room-users {
    font-size: 12px;
    color: #999;
}

.btn-quick-join {
    background: #667eea;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
}

.btn-quick-join:hover {
    background: #5567d8;
}

.no-rooms {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
}

/* MQTT房间列表夜间模式适配 - 降低亮度 */
.mqtt-room-screen[data-theme="dark"] .room-list-section,
.mqtt-room-screen.theme-dark .room-list-section {
    background: #0f0f0f; /* 更暗的背�?*/
    border: 1px solid #222; /* 更暗的边�?*/
}

.mqtt-room-screen[data-theme="dark"] .room-list-header,
.mqtt-room-screen.theme-dark .room-list-header {
    border-bottom-color: #444;
}

.mqtt-room-screen[data-theme="dark"] .room-list-title,
.mqtt-room-screen.theme-dark .room-list-title {
    color: #e0e0e0;
}

.mqtt-room-screen[data-theme="dark"] .room-item,
.mqtt-room-screen.theme-dark .room-item {
    background: #1a1a1a; /* 更暗的房间项背景 */
    border-color: #333; /* 更暗的边�?*/
    color: #c0c0c0; /* 稍微暗一点的文字 */
}

.mqtt-room-screen[data-theme="dark"] .room-item:hover,
.mqtt-room-screen.theme-dark .room-item:hover {
    background: #333;
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.mqtt-room-screen[data-theme="dark"] .room-name,
.mqtt-room-screen.theme-dark .room-name {
    color: #fff;
}

.mqtt-room-screen[data-theme="dark"] .room-creator,
.mqtt-room-screen.theme-dark .room-creator {
    color: #aaa;
}

.mqtt-room-screen[data-theme="dark"] .room-users,
.mqtt-room-screen.theme-dark .room-users {
    color: #888;
}

.mqtt-room-screen[data-theme="dark"] .no-rooms,
.mqtt-room-screen.theme-dark .no-rooms {
    color: #666;
}

.mqtt-room-screen[data-theme="dark"] .refresh-room-list:hover,
.mqtt-room-screen.theme-dark .refresh-room-list:hover {
    background: rgba(102, 126, 234, 0.2);
}

.mqtt-room-screen[data-theme="dark"] .btn-quick-join,
.mqtt-room-screen.theme-dark .btn-quick-join {
    background: #5567d8;
}

.mqtt-room-screen[data-theme="dark"] .btn-quick-join:hover,
.mqtt-room-screen.theme-dark .btn-quick-join:hover {
    background: #667eea;
}

/* 新增按钮样式 */
.btn-generate-room {
    padding: 8px 12px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-generate-room:hover {
    background: #e0e0e0;
    transform: rotate(180deg);
}

.btn-copy-invite {
    background: var(--theme-gradient);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

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

.room-input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* 夜间模式适配 */
.mqtt-room-screen[data-theme="dark"] .btn-generate-room,
.mqtt-room-screen.theme-dark .btn-generate-room {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

.mqtt-room-screen[data-theme="dark"] .btn-generate-room:hover,
.mqtt-room-screen.theme-dark .btn-generate-room:hover {
    background: #333;
}

/* 房间历史记录样式 */
.room-history {
    margin: 15px 0;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e0e6ed;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e6ed;
    flex-wrap: wrap; /* iOS兼容 */
    gap: 8px; /* iOS兼容 */
}

.history-title {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    white-space: nowrap; /* 防止标题换行 */
}

.history-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap; /* iOS兼容 */
}

.history-search {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    min-width: 120px; /* 确保最小宽�?*/
    max-width: 150px; /* 限制最大宽�?*/
}

.history-export-btn,
.history-import-btn,
.history-clear-btn {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 32px; /* 确保按钮最小宽�?*/
}

.history-export-btn:hover,
.history-import-btn:hover {
    background: #f3f4f6;
}

.history-clear-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.history-list {
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin: 4px 0;
    background: white;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    flex-wrap: nowrap; /* 防止内容换行 */
}

.history-item:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateX(2px);
}

.history-item-info {
    flex: 1;
    min-width: 0; /* 允许文本截断 */
}

.history-room-name {
    font-weight: 500;
    font-size: 13px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-room-meta {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.history-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0; /* 确保按钮不被压缩 */
}

.history-join-btn,
.history-remove-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.history-join-btn {
    background: #3b82f6;
    color: white;
}

.history-join-btn:hover {
    background: #2563eb;
}

.history-remove-btn {
    background: #ef4444;
    color: white;
}

.history-remove-btn:hover {
    background: #dc2626;
}

/* 夜间模式 - 房间历史记录 */
.mqtt-room-screen[data-theme="dark"] .room-history,
.mqtt-room-screen.theme-dark .room-history {
    background: #111111;
    border-color: #2a2a2a;
}

.mqtt-room-screen[data-theme="dark"] .history-header,
.mqtt-room-screen.theme-dark .history-header {
    border-bottom-color: #2a2a2a;
}

.mqtt-room-screen[data-theme="dark"] .history-title,
.mqtt-room-screen.theme-dark .history-title {
    color: #e5e7eb;
}

.mqtt-room-screen[data-theme="dark"] .history-search,
.mqtt-room-screen.theme-dark .history-search {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.mqtt-room-screen[data-theme="dark"] .history-export-btn,
.mqtt-room-screen[data-theme="dark"] .history-import-btn,
.mqtt-room-screen[data-theme="dark"] .history-clear-btn,
.mqtt-room-screen.theme-dark .history-export-btn,
.mqtt-room-screen.theme-dark .history-import-btn,
.mqtt-room-screen.theme-dark .history-clear-btn {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.mqtt-room-screen[data-theme="dark"] .history-item,
.mqtt-room-screen.theme-dark .history-item {
    background: #1f2937;
    border-color: #374151;
}

.mqtt-room-screen[data-theme="dark"] .history-room-name,
.mqtt-room-screen.theme-dark .history-room-name {
    color: #e5e7eb;
}

.mqtt-room-screen[data-theme="dark"] .history-room-meta,
.mqtt-room-screen.theme-dark .history-room-meta {
    color: #9ca3af;
}

/* iOS特定优化 */
@supports (-webkit-touch-callout: none) {
    .history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .history-controls {
        width: 100%;
        justify-content: space-between;
    }

    .history-search {
        flex: 1;
        min-width: 100px;
    }
}

/* PWA模式最小优�?- 仅历史搜索框 */
@media (display-mode: standalone) {
    .history-search {
        min-width: 140px; /* 搜索框稍大便于操�?*/
    }
}

/* MQTT聊天室CSS变量夜间模式修复 - 保持动画效果 */
.mqtt-room-screen[data-theme="dark"],
.mqtt-room-screen.theme-dark {
    /* 确保CSS变量在夜间模式下有正确的值，但不影响过渡动画 */
    --bg-primary: #0b0f15;
    --bg-secondary: #1a1f26;
    --card-bg: rgba(26, 31, 38, 0.8);
    --card-border: rgba(255,255,255,0.1);
    --text-primary: #e9eef6;
    --text-secondary: #9fb1c7;
    --text-muted: #6b7280;
}

/* 修复夜间模式下的白色背景元素 */
.mqtt-room-screen[data-theme="dark"] .room-type-selector,
.mqtt-room-screen.theme-dark .room-type-selector {
    background: #1a1f26 !important; /* 使用深色背景 */
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .mode-tab,
.mqtt-room-screen.theme-dark .mode-tab {
    background: #1a1f26 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e9eef6 !important;
}

.mqtt-room-screen[data-theme="dark"] .mode-tab.active,
.mqtt-room-screen.theme-dark .mode-tab.active {
    background: linear-gradient(135deg, #7c6fff 0%, #49d1ff 100%) !important;
    color: white !important;
}

/* 修复聊天容器和消息区域的背景 */
.mqtt-room-screen[data-theme="dark"] .chat-container,
.mqtt-room-screen.theme-dark .chat-container {
    background: rgba(26, 31, 38, 0.9) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .messages,
.mqtt-room-screen.theme-dark .messages {
    background: rgba(11, 15, 21, 0.5) !important;
}

.mqtt-room-screen[data-theme="dark"] .input-area,
.mqtt-room-screen.theme-dark .input-area {
    background: rgba(26, 31, 38, 0.9) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .input-area input,
.mqtt-room-screen.theme-dark .input-area input {
    background: #1a1f26 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e9eef6 !important;
}

.mqtt-room-screen[data-theme="dark"] .emoji-picker,
.mqtt-room-screen.theme-dark .emoji-picker {
    background: #1a1f26 !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .room-section,
.mqtt-room-screen.theme-dark .room-section {
    background: rgba(26, 31, 38, 0.8) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .settings-panel,
.mqtt-room-screen.theme-dark .settings-panel {
    background: #1a1f26 !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* 修复房间输入�?*/
.mqtt-room-screen[data-theme="dark"] .room-input,
.mqtt-room-screen[data-theme="dark"] .nickname-input,
.mqtt-room-screen[data-theme="dark"] .room-password-input,
.mqtt-room-screen[data-theme="dark"] .room-key-input,
.mqtt-room-screen.theme-dark .room-input,
.mqtt-room-screen.theme-dark .nickname-input,
.mqtt-room-screen.theme-dark .room-password-input,
.mqtt-room-screen.theme-dark .room-key-input {
    background: #2a2a2a !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #e0e0e0 !important;
}

/* 修复placeholder文字颜色 */
.mqtt-room-screen[data-theme="dark"] .room-key-input::placeholder,
.mqtt-room-screen.theme-dark .room-key-input::placeholder {
    color: #999999 !important;
}

/* 修复密钥输入容器背景 */
.mqtt-room-screen[data-theme="dark"] .key-input-group,
.mqtt-room-screen.theme-dark .key-input-group {
    background: transparent !important;
}

/* 修复选择�?*/
.mqtt-room-screen[data-theme="dark"] .max-users-select,
.mqtt-room-screen[data-theme="dark"] .room-category-select,
.mqtt-room-screen.theme-dark .max-users-select,
.mqtt-room-screen.theme-dark .room-category-select {
    background: #1a1f26 !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e9eef6 !important;
}

/* 修复按钮 */
.mqtt-room-screen[data-theme="dark"] .settings-toggle-btn,
.mqtt-room-screen.theme-dark .settings-toggle-btn {
    background: rgba(26, 31, 38, 0.8) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #9fb1c7 !important;
}

.mqtt-room-screen[data-theme="dark"] .emoji-btn,
.mqtt-room-screen.theme-dark .emoji-btn {
    background: rgba(26, 31, 38, 0.8) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e9eef6 !important;
}

/* 修复更多可能的白色背景元�?*/
.mqtt-room-screen[data-theme="dark"] .welcome-message,
.mqtt-room-screen.theme-dark .welcome-message {
    background: rgba(11, 15, 21, 0.8) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #9fb1c7 !important;
}

.mqtt-room-screen[data-theme="dark"] .mqtt-header,
.mqtt-room-screen.theme-dark .mqtt-header {
    background: rgba(26, 31, 38, 0.95) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .mqtt-content,
.mqtt-room-screen.theme-dark .mqtt-content {
    background: #0b0f15 !important;
}

/* 确保所有可能使用CSS变量的元素都有备用样�?*/
.mqtt-room-screen[data-theme="dark"] *[style*="var(--card-bg)"],
.mqtt-room-screen[data-theme="dark"] *[style*="var(--bg-secondary)"],
.mqtt-room-screen.theme-dark *[style*="var(--card-bg)"],
.mqtt-room-screen.theme-dark *[style*="var(--bg-secondary)"] {
    background: #1a1f26 !important;
}

/* 修复表情选择器内部元�?*/
.mqtt-room-screen[data-theme="dark"] .emoji-picker-header,
.mqtt-room-screen[data-theme="dark"] .emoji-picker-content,
.mqtt-room-screen.theme-dark .emoji-picker-header,
.mqtt-room-screen.theme-dark .emoji-picker-content {
    background: transparent !important;
    color: #e9eef6 !important;
}

.mqtt-room-screen[data-theme="dark"] .emoji-category,
.mqtt-room-screen.theme-dark .emoji-category {
    background: rgba(26, 31, 38, 0.5) !important;
    color: #9fb1c7 !important;
}

.mqtt-room-screen[data-theme="dark"] .emoji-category.active,
.mqtt-room-screen.theme-dark .emoji-category.active {
    background: linear-gradient(135deg, #7c6fff 0%, #49d1ff 100%) !important;
    color: white !important;
}

/* 修复在线用户列表 */
.mqtt-room-screen[data-theme="dark"] .online-list,
.mqtt-room-screen.theme-dark .online-list {
    background: rgba(26, 31, 38, 0.8) !important;
    border-color: rgba(86, 211, 100, 0.3) !important;
}

.mqtt-room-screen[data-theme="dark"] .online-user,
.mqtt-room-screen.theme-dark .online-user {
    background: rgba(26, 31, 38, 0.9) !important;
    border-color: rgba(112, 183, 255, 0.3) !important;
}

/* 修复私聊面板 */
.mqtt-room-screen[data-theme="dark"] .private-chat-panel,
.mqtt-room-screen.theme-dark .private-chat-panel {
    background: rgba(26, 31, 38, 0.95) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* 确保所有内联样式的white/white背景都被覆盖 */
.mqtt-room-screen[data-theme="dark"] [style*="background: white"],
.mqtt-room-screen[data-theme="dark"] [style*="background:white"],
.mqtt-room-screen[data-theme="dark"] [style*="background: #fff"],
.mqtt-room-screen[data-theme="dark"] [style*="background:#fff"],
.mqtt-room-screen[data-theme="dark"] [style*="background: #ffffff"],
.mqtt-room-screen[data-theme="dark"] [style*="background:#ffffff"],
.mqtt-room-screen.theme-dark [style*="background: white"],
.mqtt-room-screen.theme-dark [style*="background:white"],
.mqtt-room-screen.theme-dark [style*="background: #fff"],
.mqtt-room-screen.theme-dark [style*="background:#fff"],
.mqtt-room-screen.theme-dark [style*="background: #ffffff"],
.mqtt-room-screen.theme-dark [style*="background:#ffffff"] {
    background: #1a1f26 !important;
}

/* 禁言按钮样式 */
.mute-btn, .unmute-btn {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    border-radius: 4px;
    padding: 4px 6px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.mute-btn:hover {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    transform: scale(1.05);
}

.unmute-btn {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
    color: #28a745;
}

.unmute-btn:hover {
    background: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.5);
    transform: scale(1.05);
}

/* 强制修复房间列表区域夜间模式 - 最高优先级 */
.mqtt-room-screen[data-theme="dark"] .room-list-section,
.mqtt-room-screen.theme-dark .room-list-section,
.mqtt-room-screen.dark-theme .room-list-section,
.mqtt-room-screen[data-theme="dark"] .room-list-container,
.mqtt-room-screen.theme-dark .room-list-container,
.mqtt-room-screen.dark-theme .room-list-container {
    background: #1a1f26 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #e9eef6 !important;
}

/* 强制修复加载状态和空状态文�?*/
.mqtt-room-screen[data-theme="dark"] .no-rooms,
.mqtt-room-screen.theme-dark .no-rooms,
.mqtt-room-screen.dark-theme .no-rooms {
    background: transparent !important;
    color: #9fb1c7 !important;
}

/* 强制修复房间列表标题区域 */
.mqtt-room-screen[data-theme="dark"] .room-list-header,
.mqtt-room-screen.theme-dark .room-list-header,
.mqtt-room-screen.dark-theme .room-list-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .room-list-title,
.mqtt-room-screen.theme-dark .room-list-title,
.mqtt-room-screen.dark-theme .room-list-title {
    color: #e9eef6 !important;
}

/* 精确修复房间列表相关的白色背�?- 避免影响按钮动画 */
.mqtt-room-screen[data-theme="dark"] .room-list-header,
.mqtt-room-screen[data-theme="dark"] .room-list-item,
.mqtt-room-screen[data-theme="dark"] .room-info,
.mqtt-room-screen[data-theme="dark"] .recent-rooms,
.mqtt-room-screen[data-theme="dark"] .popular-rooms,
.mqtt-room-screen.theme-dark .room-list-header,
.mqtt-room-screen.theme-dark .room-list-item,
.mqtt-room-screen.theme-dark .room-info,
.mqtt-room-screen.theme-dark .recent-rooms,
.mqtt-room-screen.theme-dark .popular-rooms {
    background: transparent !important;
}

/* 修复具体的内容区域白色背�?*/
.mqtt-room-screen[data-theme="dark"] .room-content,
.mqtt-room-screen[data-theme="dark"] .room-grid,
.mqtt-room-screen[data-theme="dark"] .content-wrapper,
.mqtt-room-screen.theme-dark .room-content,
.mqtt-room-screen.theme-dark .room-grid,
.mqtt-room-screen.theme-dark .content-wrapper {
    background: #1a1f26 !important;
}

/* 特别针对在线用户显示的背景修�?*/
.mqtt-room-screen[data-theme="dark"] .online-user[style*="background: #e8f5e8"],
.mqtt-room-screen[data-theme="dark"] .online-user[style*="background: #fff3cd"],
.mqtt-room-screen.theme-dark .online-user[style*="background: #e8f5e8"],
.mqtt-room-screen.theme-dark .online-user[style*="background: #fff3cd"] {
    background: rgba(26, 31, 38, 0.8) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

/* 主题按钮使用原始样式 - 不添加任何覆盖规则让动画保持丝滑 */

/* 专门修复MQTT历史房间列表在PWA中的显示问题 */
.mqtt-room-screen .room-history {
    contain: layout style paint;
    -webkit-overflow-scrolling: touch;
}

.mqtt-room-screen .history-list {
    contain: layout style paint;
    -webkit-overflow-scrolling: touch;
}

.mqtt-room-screen .history-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    contain: layout style;
}

/* 暗色模式下历史房间列表的特殊处理 */
.mqtt-room-screen[data-theme="dark"] .room-history,
.mqtt-room-screen.theme-dark .room-history {
    background: rgba(26, 31, 38, 0.95) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.mqtt-room-screen[data-theme="dark"] .history-item,
.mqtt-room-screen.theme-dark .history-item {
    background: rgba(11, 15, 21, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

/* PWA模式下MQTT房间类型选择器的优化 */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .mqtt-room-screen .room-type-selector {
        padding: 8px !important;
        margin: 8px 0 !important;
    }
    
    .mqtt-room-screen .room-type-selector label {
        padding: 6px 0;
        font-size: 12px !important;
    }
    
    .mqtt-room-screen .room-type-selector span {
        font-size: 12px !important;
    }
    
    .mqtt-room-screen .room-type-selector input[type="radio"] {
        transform: scale(0.85);
        margin-right: 6px !important;
    }
}

/* iPhone和小屏设备的额外优化 */
@media (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
    .mqtt-room-screen .room-type-selector {
        padding: 6px !important;
        margin: 6px 0 !important;
        background: rgba(var(--bg-secondary-rgb, 26, 31, 38), 0.95) !important;
    }
    
    .mqtt-room-screen .room-type-selector > div:first-child {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
    
    .mqtt-room-screen .room-type-selector label {
        padding: 4px 0;
        margin-bottom: 6px !important;
    }
    
    .mqtt-room-screen .room-type-selector span {
        font-size: 11px !important;
        line-height: 1.3;
    }
    
    .mqtt-room-screen .room-type-selector input[type="radio"] {
        transform: scale(0.8);
        margin-right: 5px !important;
    }
}


/* iOS Settings Minimal Styles - 独立的iOS风格设置界面 */
/* 命名空间使用 .iosm-* 避免与原有设置冲�?*/
:root {
    --iosm-bg: #f4f5f8;
    --iosm-card: #ffffff;
    --iosm-label: #111114;
    --iosm-muted: #8a8f98;
    --iosm-sep: rgba(0,0,0,.12);
    --iosm-shadow: 0 8px 24px rgba(17,17,20,.06);
    --iosm-radius: 16px;

    /* 动态主题色系统 */
    --theme-primary: #667eea;
    --theme-secondary: #764ba2;
    --theme-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);

    /* 界面主题色定�?*/
    --theme-lock: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-home: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    --theme-chat: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    --theme-wallet: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    --theme-store: linear-gradient(135deg, #ff7043 0%, #ff5722 100%);
    --theme-backpack: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    --theme-worldbook: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    --theme-settings: linear-gradient(135deg, #78909c 0%, #546e7a 100%);
    --theme-ios-settings: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
    --theme-mqtt: linear-gradient(135deg, #26c6da 0%, #00acc1 100%);
}

/* iOS设置容器 */
.screen.iosm {
    display: none;
    background: var(--iosm-bg);
    color: var(--iosm-label);
    flex-direction: column;
    height: 100%;
    /* overflow: hidden; 删除这行让内容可以滚�?*/
    /* 默认使用absolute定位，与其他界面保持一�?*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    /* 平滑过渡 */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.iosm-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 14px 10px 2px;
    background: var(--iosm-bg);
    display: flex;
    align-items: center;
    gap: 10px;
}

.iosm-back {
    border: none;
    background: #eee;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.iosm-back:hover {
    background: #ddd;
}

.iosm-title {
    padding: 0 10px 8px;
    font-size: 34px;
    font-weight: 750;
    letter-spacing: .2px;
    margin: 0;
    width: 100%;
}

.iosm-body {
    padding: 0 8px calc(40px + env(safe-area-inset-bottom, 0px)) 2px;
    height: calc(100% - 140px);  /* 减去标题(100px) + 父容器padding(40px) */
    overflow-y: auto;  /* 内容超出时自动显示滚动条 */
    overflow-x: hidden;  /* 防止横向滚动 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    position: relative;
    z-index: 10;
}

/* iOS风格滚动�?- 更易�?*/
.iosm-body::-webkit-scrollbar {
    width: 6px; /* 增加宽度，更容易拖动 */
    background: transparent;
}

.iosm-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    margin: 5px 0;
}

.iosm-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* 加深颜色，更明显 */
    border-radius: 3px;
    transition: background-color 0.3s ease;
    min-height: 30px; /* 最小高度，防止太小 */
}

.iosm-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.iosm-body::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.5);
}

/* 移除负margin，避免滚动条被遮�?*/
.iosm-body {
    margin-right: 0;
    padding-right: 8px; /* 给滚动条留出空间 */
}

/* Firefox滚动条样�?*/
.iosm-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.02);
}

/* 强制iOS PWA版本字体为黑�?*/
.screen.iosm * {
    color: var(--iosm-label) !important;
}

.iosm-row, .iosm-label, .iosm-pname, .iosm-psub {
    color: var(--iosm-label) !important;
}

.iosm-back {
    color: var(--iosm-label) !important;
}

/* iPhone 15 PWA适配 - 安全区域已移除，采用全屏布局 */

/* iPhone 15 Pro/Pro Max 专属适配（动态岛�?- 已移除safe-area */

/* PWA全屏模式智能安全区方�?*/
@media (display-mode: standalone), (display-mode: fullscreen) {
    /* 设置整体背景避免白边 - 使用锁屏背景变量 */
    html, body {
        background: var(--lock-screen-bg) !important;
    }

    #app {
        background-color: var(--home-screen-bg) !important;
        background-image: var(--home-bg-image) !important;
        background-size: cover;
        background-position: center;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        height: 100%;
        position: relative;
    }

    /* 确保容器链完全撑�?- 动态背景色 */
}

/* 搜索�?*/
.iosm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--iosm-card);
    border-radius: var(--iosm-radius);
    padding: 10px 12px;
    color: var(--iosm-muted);
    box-shadow: var(--iosm-shadow);
    margin-bottom: 12px;
}

.iosm-search input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    color: var(--iosm-label);
    background: transparent;
}

.iosm-search .icon {
    opacity: .6;
}

/* 个人资料卡片 */
.iosm-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--iosm-card);
    border-radius: var(--iosm-radius);
    box-shadow: var(--iosm-shadow);
    margin-bottom: 18px;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s;
}

.iosm-profile:hover {
    transform: scale(1.02);
}

.iosm-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e3e4e8;
    object-fit: cover;
}

.iosm-ptext {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
}

.iosm-pname {
    font-weight: 700;
    font-size: 18px;
}

.iosm-psub {
    color: var(--iosm-muted);
    font-size: 13px;
    margin-top: 2px;
}

/* 设置组和�?*/
.iosm-group {
    background: var(--iosm-card);
    border-radius: var(--iosm-radius);
    box-shadow: var(--iosm-shadow);
    overflow: hidden;
}

.iosm-row {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 14px 14px;
    position: relative;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.iosm-row:hover {
    background: rgba(0,0,0,0.03);
}

.iosm-row + .iosm-row::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 0.5px;
    background: var(--iosm-sep);
}

.iosm-leading {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f1f4;
    color: #5a5f66;
    margin-right: 10px;
    font-size: 16px;
}

.iosm-label {
    font-size: 17px;
}

.iosm-value {
    margin-left: auto;
    color: var(--iosm-muted);
    font-size: 14px;
}

.iosm-chev {
    margin-left: 8px;
    color: #b0b3b8;
}

.iosm-spacer {
    height: 16px;
}

/* 折叠组样�?*/
.iosm-collapse-group {
    width: 100%;
}

.iosm-collapse-header {
    position: relative;
}

.iosm-collapse-arrow {
    transition: transform 0.3s ease;
}

.iosm-collapse-arrow.expanded {
    transform: rotate(90deg);
}

.iosm-collapse-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.iosm-sub-item {
    padding-left: 52px;
    background: rgba(0,0,0,0.01);
}

.iosm-sub-item:hover {
    background: rgba(0,0,0,0.04);
}

.iosm-sub-leading {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    color: #5a5f66;
    margin-right: 10px;
    font-size: 14px;
}

/* 删除这部分，让外观设置使用默认的iosm样式 */

/* 精准修复房间列表区域 - 最高优先级 */
body .mqtt-room-screen[data-theme="dark"] .room-list-section,
body .mqtt-room-screen.theme-dark .room-list-section,
body .mqtt-room-screen[data-theme="dark"] .room-list-container,
body .mqtt-room-screen.theme-dark .room-list-container {
    background: #1a1f26 !important;
    background-color: #1a1f26 !important;
}

/* 确保动态插入的no-rooms元素背景正确 */
body .mqtt-room-screen[data-theme="dark"] .no-rooms,
body .mqtt-room-screen.theme-dark .no-rooms {
    background: transparent !important;
    background-color: transparent !important;
    color: #9fb1c7 !important;
}

/* 确保房间项目背景正确 */
body .mqtt-room-screen[data-theme="dark"] .room-item,
body .mqtt-room-screen.theme-dark .room-item {
    background: rgba(26, 31, 38, 0.8) !important;
    background-color: rgba(26, 31, 38, 0.8) !important;
}

/* 进一步确保所有子元素 */
body .mqtt-room-screen[data-theme="dark"] .room-list-section *,
body .mqtt-room-screen.theme-dark .room-list-section * {
    background: transparent !important;
    background-color: transparent !important;
}

/* 重新设置需要背景的元素 */
body .mqtt-room-screen[data-theme="dark"] .room-list-section,
body .mqtt-room-screen.theme-dark .room-list-section,
body .mqtt-room-screen.dark-theme .room-list-section {
    background: #1a1f26 !important;
    background-color: #1a1f26 !important;
}

/* 终极解决方案 - 直接针对具体选择�?*/
.mqtt-room-screen.dark-theme .room-list-section,
.mqtt-room-screen.dark-theme .room-list-container,
.mqtt-room-screen.dark-theme .no-rooms {
    background: #1a1f26 !important;
    background-color: #1a1f26 !important;
    color: #9fb1c7 !important;
}

/* =================== MQTT聊天室美化样�?=================== */
/* CSS变量定义 - 支持深浅主题切换 */
.mqtt-room-screen {
    /* 颜色变量定义 */
    --bg-primary: #0b0f15;
    --bg-secondary: #1a1f26;
    --card-bg: rgba(255,255,255,.08);
    --card-border: rgba(255,255,255,.15);
    --text-primary: #e9eef6;
    --text-secondary: #9fb1c7;
    --text-muted: #6b7280;

    /* 主题色彩 */
    --accent-gradient: linear-gradient(135deg, #7c6fff 0%, #49d1ff 100%);
    --success-color: #56d364;
    --error-color: #ff6b6b;
    --warning-color: #ffd166;
    --info-color: #70b7ff;

    /* 阴影和效�?*/
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;

    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
}

/* 浅色主题支持 */
@media (prefers-color-scheme: light) {
    .mqtt-room-screen:not(.dark-theme) {
        --bg-primary: #f6f8fb;
        --bg-secondary: #ffffff;
        --card-bg: rgba(255,255,255,0.9);
        --card-border: rgba(0,0,0,0.08);
        --text-primary: #0b1c36;
        --text-secondary: #5b6b80;
        --text-muted: #9ca3af;
    }
}

/* 强制浅色主题 */
.mqtt-room-screen.light-theme {
    --bg-primary: #f6f8fb;
    --bg-secondary: #ffffff;
    --card-bg: rgba(255,255,255,0.9);
    --card-border: rgba(0,0,0,0.08);
    --text-primary: #0b1c36;
    --text-secondary: #5b6b80;
    --text-muted: #9ca3af;
}

/* 强制深色主题 */
.mqtt-room-screen.dark-theme {
    --bg-primary: #0b0f15;
    --bg-secondary: #1a1f26;
    --card-bg: rgba(255,255,255,.08);
    --card-border: rgba(255,255,255,.15);
    --text-primary: #e9eef6;
    --text-secondary: #9fb1c7;
    --text-muted: #6b7280;
}

.mqtt-room-screen {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* 连接状态条 */
.connection-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1100;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.connection-status-bar .status-icon {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.connection-status-bar .reconnect-count {
    font-size: 12px;
    opacity: 0.9;
}

/* 背景渐变效果 */
.mqtt-room-screen::before {
    content: "";
    position: fixed;
    inset: -20%;
    background:
        radial-gradient(60% 60% at 20% 20%, rgba(124, 111, 255, 0.15), transparent 60%),
        radial-gradient(60% 60% at 80% 30%, rgba(73, 209, 255, 0.12), transparent 60%),
        radial-gradient(60% 60% at 50% 80%, rgba(255, 154, 199, 0.15), transparent 60%);
    filter: blur(40px);
    z-index: -1;
    opacity: 0.6;
}

@media (prefers-color-scheme: light) {
    .mqtt-room-screen::before {
        opacity: 0.3;
    }
}

.mqtt-header {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--card-border);
    padding: var(--spacing-lg);
    padding-top: 16px !important;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    min-height: 60px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.theme-toggle-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-primary);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.theme-toggle-btn:hover {
    background: var(--card-border);
    transform: scale(1.1) rotate(15deg);
}

.back-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-btn:hover {
    background: var(--card-border);
    transform: scale(1.05);
}

.mqtt-header h2 {
    margin: 0;
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.connection-status {
    font-size: 12px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.connection-status.connected {
    background: rgba(86, 211, 100, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(86, 211, 100, 0.3);
}

.connection-status.connecting {
    background: rgba(255, 209, 102, 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(255, 209, 102, 0.3);
}

.connection-status.disconnected {
    background: rgba(255, 107, 107, 0.15);
    color: var(--error-color);
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.mqtt-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-lg);
    padding-bottom: calc(var(--spacing-lg) + 35px);
    gap: var(--spacing-lg);
    overflow-y: auto;
    min-height: 0;
}

/* PWA模式下MQTT内容去除所有padding */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .mqtt-content {
        padding: 0 !important;
    }
}

.room-section {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-bottom: var(--spacing-md);
}

.room-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.room-controls {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.room-controls input {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid var(--card-border);
    border-radius: var(--border-radius);
    font-size: 16px;
    flex: 1;
    min-width: 120px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.room-controls input:focus {
    outline: none;
    border-color: var(--info-color);
    box-shadow: 0 0 0 4px rgba(112, 183, 255, 0.1);
    transform: translateY(-1px);
}

.room-controls input::placeholder {
    color: var(--text-muted);
}

.control-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.control-buttons button {
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.control-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* 房间设置样式 */
.room-settings {
    margin-top: var(--spacing-md);
}

.settings-toggle {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.settings-toggle-btn {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.settings-toggle-btn:hover {
    background: var(--card-border);
    color: var(--text-primary);
}

.settings-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    font-size: 12px;
}

.setting-label {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.setting-label input[type="checkbox"] {
    margin: 0;
}

.max-users-select,
.room-category-select {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 11px;
}

.key-input-group {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.room-input,
.nickname-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.room-input:focus,
.nickname-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.room-key-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    background: white;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.room-key-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.room-key-input::placeholder {
    color: #999;
    font-size: 12px;
    line-height: 1.4;
}

.password-input-group,
.password-create-group {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    align-items: center;
}

.room-password-input,
.room-password-create {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--warning-color);
    border-radius: var(--border-radius);
    background: rgba(255, 193, 7, 0.1);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.room-password-input:focus {
    outline: none;
    border-color: var(--warning-color);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.save-password-btn,
.confirm-password-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.confirm-password-btn {
    background: var(--primary-color);
}

.save-password-btn:hover {
    background: #4aa450;
    transform: translateY(-1px);
}

.confirm-password-btn:hover {
    background: #5e72e4;
    transform: translateY(-1px);
}

.save-password-btn:active,
.confirm-password-btn:active {
    transform: translateY(0);
}

/* 房间类型选择器样�?*/
.room-type-selector {
    margin: 12px 0;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.room-type-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.room-type-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
}

.room-type-option:last-child {
    margin-bottom: 0;
}

.room-type-option input[type="radio"] {
    margin-right: 8px;
    flex-shrink: 0;
}

.room-type-text {
    font-size: 13px;
    line-height: 1.4;
}

.room-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    justify-content: center;
}

.btn-create-room,
.btn-join-room {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn-create-room {
    background: var(--theme-gradient);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-create-room:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-join-room {
    background: linear-gradient(135deg, #56d364 0%, #28a745 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-join-room:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-create-room:disabled,
.btn-join-room:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.room-owner-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    color: #8b4513;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 8px;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.btn-connect {
    background: var(--accent-gradient);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-connect:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-connect:active:not(:disabled) {
    transform: translateY(0px);
}

.btn-leave {
    background: linear-gradient(135deg, var(--error-color) 0%, #e74c3c 100%);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-leave:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-leave:active:not(:disabled) {
    transform: translateY(0px);
}

.control-buttons button:disabled {
    background: var(--card-border) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.status-display {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    text-align: center;
    backdrop-filter: blur(10px);
}

.broker-info {
    text-align: center;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 12px;
}

.broker-info small {
    color: var(--text-muted);
}

.online-users-info {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.online-count {
    font-size: 14px;
    color: var(--success-color);
    font-weight: 600;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    background: rgba(86, 211, 100, 0.1);
    border: 1px solid rgba(86, 211, 100, 0.3);
    margin-bottom: var(--spacing-sm);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.online-count:hover {
    background: rgba(86, 211, 100, 0.2);
    transform: translateY(-1px);
}

.online-list {
    background: rgba(86, 211, 100, 0.1);
    border: 1px solid rgba(86, 211, 100, 0.3);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    max-height: 120px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.online-list-header {
    font-weight: 600;
    font-size: 12px;
    color: var(--success-color);
    margin-bottom: var(--spacing-sm);
}

.online-list-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.online-user {
    background: rgba(112, 183, 255, 0.15);
    color: var(--info-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(112, 183, 255, 0.3);
    backdrop-filter: blur(5px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.online-user:hover {
    background: rgba(112, 183, 255, 0.25);
    transform: translateY(-1px);
}

.user-actions {
    display: flex;
    gap: 3px;
    margin-left: 5px;
}

.private-chat-btn,
.admin-action-btn,
.kick-btn,
.remove-admin-btn {
    padding: 2px 6px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.private-chat-btn {
    background: var(--info-color);
}

.private-chat-btn:hover {
    background: #5a9fd4;
    transform: scale(1.1);
}

.admin-action-btn {
    background: var(--warning-color);
}

.admin-action-btn:hover {
    background: #e6a800;
    transform: scale(1.1);
}

.kick-btn {
    background: var(--error-color);
}

.kick-btn:hover {
    background: #e53e3e;
    transform: scale(1.1);
}

.remove-admin-btn {
    background: var(--text-muted);
}

.remove-admin-btn:hover {
    background: #718096;
    transform: scale(1.1);
}

.warning {
    background: rgba(255, 209, 102, 0.15);
    border: 1px solid rgba(255, 209, 102, 0.3);
    color: var(--warning-color);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    text-align: center;
    margin-top: var(--spacing-sm);
    backdrop-filter: blur(10px);
}

.room-history {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    margin: 10px 0;
    padding: 8px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-sizing: border-box;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.history-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-search {
    padding: 4px 8px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-size: 12px;
    width: 120px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.history-search:focus {
    outline: none;
    border-color: var(--info-color);
    box-shadow: 0 0 0 2px rgba(112, 183, 255, 0.1);
}

.history-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
}

.history-export-btn,
.history-import-btn,
.history-clear-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.history-export-btn:hover {
    background: var(--card-border);
    color: var(--success-color);
}

.history-import-btn:hover {
    background: var(--card-border);
    color: var(--info-color);
}

.history-clear-btn:hover {
    background: var(--card-border);
    color: var(--error-color);
}

.history-list {
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 2px 0;
    background: var(--bg-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--card-border);
    overflow: hidden;
    box-sizing: border-box;
}

.history-item:hover {
    background: var(--card-bg);
    border-color: var(--info-color);
    transform: translateY(-1px);
}

.history-room {
    font-weight: bold;
    color: var(--info-color);
    font-size: 13px;
    margin-right: 8px;
    flex-shrink: 0;
}

.history-nickname {
    color: var(--text-secondary);
    font-size: 12px;
    margin-right: 8px;
    flex-shrink: 0;
}

.history-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-right: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.history-remove {
    background: none;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.history-remove:hover {
    background: rgba(255, 107, 107, 0.15);
    transform: scale(1.1);
}

.no-results {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 20px;
    font-style: italic;
}

.chat-container {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-height: 350px;
    max-height: calc(100% - 120px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-container:hover {
    box-shadow: var(--shadow-lg);
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: transparent;
}

/* 美化滚动条样�?*/
.messages::-webkit-scrollbar {
    width: 6px;
}

.messages::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.messages::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 3px;
    transition: all 0.3s ease;
}

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

/* Firefox滚动条样�?*/
.messages {
    scrollbar-width: thin;
    scrollbar-color: var(--card-border) transparent;
}

/* 其他滚动区域统一样式 */
.mqtt-content::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.online-list::-webkit-scrollbar {
    width: 4px;
}

.mqtt-content::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
.online-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

.mqtt-content::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
.online-list::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mqtt-content::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover,
.online-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.mqtt-content,
.history-list,
.online-list {
    scrollbar-width: thin;
    scrollbar-color: var(--card-border) transparent;
}

.welcome-message {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
}

.welcome-message p {
    margin: var(--spacing-sm) 0;
    color: var(--text-muted);
}

.message {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    backdrop-filter: blur(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.message:hover {
    transform: translateY(-1px);
}

/* 聊天消息气泡样式 */
.message.chat {
    display: flex;
    margin-bottom: 16px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    animation: none;
    position: relative;
    transition: none;
}

.message.chat:hover {
    transform: none !important;
}

/* 别人的消�?- 左对�?*/
.message.chat:not(.own-message) {
    justify-content: flex-start;
    padding-left: 10px;
}

/* 自己的消�?- 右对�?*/
.message.chat.own-message {
    justify-content: flex-end;
    padding-right: 10px;
}

/* 消息气泡容器 */
.message-bubble {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 别人的消息气�?*/
.message.chat:not(.own-message) .message-bubble {
    align-items: flex-start;
}

/* 自己的消息气�?*/
.message.chat.own-message .message-bubble {
    align-items: flex-end;
}

/* 发送者名�?*/
.message-sender {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 12px;
    font-weight: 500;
}

/* 消息头像 */
.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    margin-right: 8px;
}

/* 头像颜色 */
.avatar-color-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.avatar-color-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.avatar-color-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.avatar-color-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.avatar-color-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.avatar-color-6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
.avatar-color-7 { background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%); }
.avatar-color-8 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }

/* 消息内容容器 */
.message-content {
    padding: 10px 14px;
    border-radius: 18px;
    position: relative;
    word-wrap: break-word;
    max-width: 300px;
}

/* HTML消息内容样式（支持AI生成的HTML小玩具） */
.message-html-content {
    line-height: 1.5;
}

.message-html-content b,
.message-html-content strong {
    font-weight: bold;
}

.message-html-content i,
.message-html-content em {
    font-style: italic;
}

.message-html-content u {
    text-decoration: underline;
}

.message-html-content s,
.message-html-content del {
    text-decoration: line-through;
}

.message-html-content a {
    color: #667eea;
    text-decoration: underline;
}

.message-html-content ul,
.message-html-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.message-html-content li {
    margin: 4px 0;
}

.message-html-content table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.9em;
}

.message-html-content th,
.message-html-content td {
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 10px;
    text-align: left;
}

.message-html-content th {
    background: rgba(255,255,255,0.1);
}

.message-html-content code {
    background: rgba(0,0,0,0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.message-html-content pre {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.message-html-content pre code {
    background: none;
    padding: 0;
}

.message-html-content blockquote {
    border-left: 3px solid rgba(255,255,255,0.3);
    margin: 8px 0;
    padding-left: 12px;
    font-style: italic;
    opacity: 0.9;
}

.message-html-content hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin: 12px 0;
}

.message-html-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 4px 0;
}

/* ========== CSS 动画支持 ========== */
/* 预设动画效果，AI 可以直接使用 */

/* 闪烁动画 */
@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

/* 心跳动画 */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 摇晃动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 渐变色流动 */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 淡入淡出 */
@keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 脉冲光晕 */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px currentColor; }
    50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

/* 打字机效果（需配合JS，这里只是光标闪烁） */
@keyframes cursor-blink {
    0%, 50% { border-right-color: currentColor; }
    51%, 100% { border-right-color: transparent; }
}

/* 动画工具类 */
.message-html-content .animate-blink { animation: blink 1s infinite; }
.message-html-content .animate-heartbeat { animation: heartbeat 1s infinite; }
.message-html-content .animate-bounce { animation: bounce 0.5s infinite; }
.message-html-content .animate-shake { animation: shake 0.3s infinite; }
.message-html-content .animate-spin { animation: spin 2s linear infinite; }
.message-html-content .animate-fade { animation: fade 2s infinite; }
.message-html-content .animate-pulse { animation: pulse-glow 2s infinite; }
.message-html-content .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-flow 3s ease infinite;
}

/* ========== SVG 图形支持 ========== */
.message-html-content svg {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.message-html-content svg text {
    fill: currentColor;
}

.message-html-content svg path,
.message-html-content svg circle,
.message-html-content svg rect,
.message-html-content svg line,
.message-html-content svg polygon {
    vector-effect: non-scaling-stroke;
}

/* ========== 自定义字体支持 ========== */
/* 导入一些好看的中文字体 */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&display=swap');

/* 字体工具类 */
.message-html-content .font-cute { font-family: 'ZCOOL KuaiLe', cursive; } /* 可爱字体 */
.message-html-content .font-cool { font-family: 'ZCOOL QingKe HuangYou', cursive; } /* 酷炫字体 */
.message-html-content .font-brush { font-family: 'Ma Shan Zheng', cursive; } /* 毛笔字 */
.message-html-content .font-art { font-family: 'Zhi Mang Xing', cursive; } /* 艺术字 */

/* 英文装饰字体 */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Dancing+Script&family=Caveat&display=swap');

.message-html-content .font-script { font-family: 'Dancing Script', cursive; }
.message-html-content .font-handwrite { font-family: 'Caveat', cursive; }
.message-html-content .font-fancy { font-family: 'Pacifico', cursive; }

/* ========== 特效组合类 ========== */
/* 发光文字 */
.message-html-content .glow {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

/* 彩虹文字 */
.message-html-content .rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 3s linear infinite;
}

/* 渐变背景卡片 */
.message-html-content .card-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 16px;
    border-radius: 12px;
    color: white;
}

/* 玻璃态效果 */
.message-html-content .glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px;
}

/* 霓虹效果 */
.message-html-content .neon {
    color: #fff;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff00de,
        0 0 30px #ff00de,
        0 0 40px #ff00de;
}

/* 别人的消息内�?*/
.other-content {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 自己的消息内�?*/
.own-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    word-break: break-word;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 别人的消息内�?*/
.message.chat:not(.own-message) .message-content {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px 18px 18px 18px;
}

/* 自己的消息内�?*/
.message.chat.own-message .message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 18px 4px 18px 18px;
}

/* 消息底部信息（时间和状态） */
.message-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 12px;
}

/* 自己消息的底部信�?*/
.message.chat.own-message .message-footer {
    justify-content: flex-end;
}

/* 消息时间�?*/
.message-time {
    opacity: 0.7;
}

/* 消息状态图�?*/
.message-status {
    font-size: 12px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.message-status[data-status="sending"] {
    color: #94a3b8;
    animation: rotate 1s linear infinite;
}

.message-status[data-status="sent"] {
    color: #10b981;
}

.message-status[data-status="failed"] {
    color: #ef4444;
    cursor: pointer;
    opacity: 1;
}

.message-status[data-status="failed"]:hover {
    transform: scale(1.2);
}

/* 消息文本 */
.message-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* 消息底部信息 */
.message-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
}

/* 消息时间 */
.message-time {
    font-size: 11px;
    opacity: 0.7;
}

/* 发送者名�?*/
.message-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    opacity: 0.8;
}

.message.presence {
    background: rgba(255, 154, 199, 0.15);
    border: 1px solid rgba(255, 154, 199, 0.3);
    color: var(--text-secondary);
    font-style: italic;
    font-size: 12px;
    text-align: center;
}

.message.system {
    background: rgba(255, 209, 102, 0.15);
    border: 1px solid rgba(255, 209, 102, 0.3);
    color: var(--warning-color);
    font-size: 12px;
    text-align: center;
    font-weight: 500;
}

/* 私聊消息样式 */
.message.private {
    background: var(--theme-gradient);
    color: white;
    border: 2px solid rgba(118, 75, 162, 0.3);
    position: relative;
}

.message.private::before {
    content: '🔒 私聊';
    position: absolute;
    top: -8px;
    right: 10px;
    background: #764ba2;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

.message.private.own-message {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: 2px solid rgba(245, 87, 108, 0.3);
}

.message.private.own-message::before {
    background: #f5576c;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.message.chat .user-name {
    color: var(--info-color);
}

.message-time {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.8;
    font-weight: 500;
}

.input-area {
    padding: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
    border-top: 1px solid var(--card-border);
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    position: relative;
}

.input-area input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid var(--card-border);
    border-radius: 24px;
    font-size: 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.input-area input:focus {
    outline: none;
    border-color: var(--info-color);
    box-shadow: 0 0 0 4px rgba(112, 183, 255, 0.1);
    transform: translateY(-1px);
}

.input-area input::placeholder {
    color: var(--text-muted);
}

.input-area button {
    width: 44px;
    height: 44px;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-area button:hover:not(:disabled) {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px) scale(1.05);
}

.input-area button:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.input-area button:disabled {
    background: var(--card-border) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* 表情按钮样式 */
.emoji-btn {
    width: 44px;
    height: 44px;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 2px solid var(--card-border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn:hover:not(:disabled) {
    background: var(--accent-gradient);
    border-color: transparent;
    transform: scale(1.05) rotate(15deg);
}

.emoji-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 表情选择器面�?*/
.emoji-picker {
    position: absolute;
    bottom: 70px;
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    backdrop-filter: blur(20px);
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.emoji-picker-header {
    display: flex;
    gap: 2px;
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--card-border);
    background: var(--card-bg);
    overflow-x: auto;
}

.emoji-category {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.emoji-category:hover {
    background: var(--card-border);
    transform: scale(1.1);
}

.emoji-category.active {
    background: var(--accent-gradient);
    transform: scale(1.15);
}

.emoji-picker-content {
    padding: var(--spacing-md);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: var(--spacing-xs);
    flex: 1;
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.emoji-item:hover {
    background: var(--card-bg);
    transform: scale(1.3);
    z-index: 10;
}

/* iOS安全区域适配 - 已移除，采用全屏布局 */

/* 手机屏幕适配 - 专门�?75px×667px虚拟手机优化 */
@media (max-width: 480px) {
    .room-type-selector {
        margin: 8px 0 !important;
        padding: 8px !important;
    }

    .room-type-title {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .room-type-option {
        margin-bottom: 4px !important;
        padding: 2px 0 !important;
    }

    .room-type-option input[type="radio"] {
        transform: scale(0.7);
        margin-right: 4px !important;
        width: 14px !important;
        height: 14px !important;
    }

    .room-type-text {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .mqtt-room-screen {
        --spacing-xs: 3px;
        --spacing-sm: 6px;
        --spacing-md: 8px;
        --spacing-lg: 12px;
        --spacing-xl: 16px;
        --spacing-2xl: 20px;
        --border-radius: 8px;
        --border-radius-sm: 6px;
        --border-radius-lg: 12px;

        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: hidden;
    }

    .mqtt-header {
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top)) !important;
        min-height: 50px;
        max-height: 50px;
        flex-shrink: 0;
    }

    .mqtt-header h2 {
        font-size: 16px;
        font-weight: 600;
    }

    .connection-status {
        font-size: 11px;
        padding: 4px 8px;
    }

    .mqtt-content {
        padding: 0;
        gap: 8px;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    .room-section {
        padding: 12px;
        border-radius: 12px;
        flex-shrink: 0;
        margin-bottom: 8px;
    }

    .room-controls {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 8px;
    }

    .room-controls input {
        min-width: unset;
        padding: 10px 12px;
        font-size: 14px;
        height: 40px;
        box-sizing: border-box;
    }

    .control-buttons {
        margin-bottom: 8px;
        gap: 6px;
    }

    .control-buttons button {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 36px;
    }

    .chat-container {
        flex: 1;
        min-height: 280px;
        max-height: calc(100vh - 280px);
        display: flex;
        flex-direction: column;
        border-radius: 12px;
    }

    .messages {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
        min-height: 200px;
        max-height: calc(100vh - 380px);
        -webkit-overflow-scrolling: touch;
    }

    .message {
        padding: 6px 10px;
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 1.4;
    }

    .message.own-message {
        margin-left: 30px;
        margin-right: 0px;
    }

    .message-header {
        margin-bottom: 3px;
    }

    .user-name {
        font-size: 12px;
        font-weight: 600;
    }

    .message-time {
        font-size: 10px;
    }

    .input-area {
        padding: 8px;
        gap: 6px;
        flex-shrink: 0;
        min-height: 60px;
        max-height: 60px;
    }

    .input-area input {
        padding: 8px 12px;
        font-size: 14px;
        height: 36px;
        box-sizing: border-box;
    }

    .input-area button {
        width: 36px;
        height: 36px;
        font-size: 14px;
        flex-shrink: 0;
    }

    /* 优化小屏幕下的背景效�?*/
    .mqtt-room-screen::before {
        filter: blur(25px);
        opacity: 0.3;
    }

    .mqtt-room-screen.light-theme::before,
    .mqtt-room-screen:not(.dark-theme)::before {
        opacity: 0.15;
    }

    .mqtt-room-screen.dark-theme::before {
        opacity: 0.3;
    }

    /* 优化房间历史记录在小屏幕的显�?*/
    .room-history {
        max-height: 100px;
        margin: 8px 0;
    }

    .history-list {
        max-height: 80px;
    }

    .history-item {
        padding: 4px 6px;
        margin: 1px 0;
    }

    .history-room, .history-nickname {
        font-size: 11px;
    }

    .history-time {
        font-size: 9px;
    }

    /* 在线用户信息优化 */
    .online-count {
        font-size: 12px;
        padding: 4px 8px;
    }

    .online-list {
        max-height: 80px;
        padding: 6px;
    }

    .online-user {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* 状态显示优�?*/
    .status-display {
        padding: 6px;
        font-size: 11px;
        margin-bottom: 6px;
    }

    .broker-info {
        margin-bottom: 6px;
        font-size: 11px;
    }

    .online-users-info {
        margin-bottom: 6px;
    }

    .warning {
        padding: 6px;
        font-size: 10px;
        margin-top: 6px;
    }

    /* 欢迎消息优化 */
    .welcome-message {
        padding: 12px;
        font-size: 12px;
    }

    .welcome-message p {
        margin: 6px 0;
    }
}

/* =================== 房间超员提示样式 =================== */
.overcrowding-dialog {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: var(--card-bg);
    border: 2px solid #ff9800;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    animation: slideInRight 0.3s ease;
    max-width: 300px;
    font-family: inherit;
}

.dialog-content {
    padding: 16px;
}

.dialog-header {
    font-weight: bold;
    color: #ff9800;
    margin-bottom: 8px;
    font-size: 14px;
}

.dialog-body {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
}

.dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-manage {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
}

.btn-manage:hover {
    background: #45a049;
}

.dismiss-options {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.btn-dismiss {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    flex: 1;
    min-width: 80px;
    transition: background-color 0.3s ease;
}

.btn-dismiss:hover {
    background: #e0e0e0;
}

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

/* 夜间模式适配 */
.overcrowding-dialog.dark-theme {
    background: #2a2a2a;
    border-color: #ff9800;
}

.overcrowding-dialog.dark-theme .dialog-body {
    color: #e0e0e0;
}

.overcrowding-dialog.dark-theme .btn-dismiss {
    background: #404040;
    border-color: #666;
    color: #e0e0e0;
}

.overcrowding-dialog.dark-theme .btn-dismiss:hover {
    background: #555;
}

/* 移动端优�?*/
@media (max-width: 768px) {
    .overcrowding-dialog {
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .dismiss-options {
        flex-direction: column;
    }

    .btn-dismiss {
        min-width: auto;
        width: 100%;
    }
}

/* =================== 房间设置面板样式 =================== */
.room-settings-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.room-settings-btn:hover {
    background: var(--card-border);
    transform: scale(1.1) rotate(90deg);
}

.room-settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.room-settings-panel.show {
    transform: translateY(0);
}

.settings-panel-header {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--card-border);
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.settings-panel-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.settings-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.settings-close-btn:hover {
    background: var(--card-border);
    color: var(--error-color);
    transform: scale(1.1);
}

.settings-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.settings-section {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.settings-section h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 16px;
    color: var(--text-primary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--card-border);
}

.settings-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

#room-key-row .info-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#settings-room-key {
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--card-border);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--primary-color);
}

.key-toggle-btn,
.key-copy-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    transition: all 0.2s;
    font-size: 12px;
}

.key-toggle-btn:hover,
.key-copy-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.info-label {
    color: var(--text-secondary);
    font-size: 14px;
}

.info-value {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

.setting-item {
    margin-bottom: var(--spacing-md);
}

.setting-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.setting-label input[type="checkbox"] {
    cursor: pointer;
}

.password-setting {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
}

.settings-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--card-border);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
}

.settings-input:focus {
    outline: none;
    border-color: var(--info-color);
    box-shadow: 0 0 0 3px rgba(112, 183, 255, 0.1);
}

.settings-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.settings-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-btn:hover {
    transform: translateY(-1px);
}

.settings-btn.btn-primary {
    background: var(--info-color);
    color: white;
}

.settings-btn.btn-secondary {
    background: var(--text-muted);
    color: white;
}

.settings-btn.btn-warning {
    background: var(--warning-color);
    color: white;
}

.settings-btn.btn-danger {
    background: var(--error-color);
    color: white;
    border: 2px solid var(--error-color);
    font-weight: bold;
}

.settings-btn.btn-danger:hover {
    background: #c82333;
    border-color: #bd2130;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.admin-list {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    min-height: 60px;
}

.no-admins {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

.admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

.admin-name {
    color: var(--text-primary);
    font-size: 14px;
}

.remove-admin-btn {
    background: none;
    border: none;
    color: var(--error-color);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
}

.remove-admin-btn:hover {
    background: rgba(255, 107, 107, 0.15);
}

.settings-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* 手机屏幕适配 */
@media (max-width: 480px) {
    .room-settings-panel {
        --spacing-lg: 12px;
        --spacing-md: 8px;
        --spacing-sm: 6px;
    }

    .settings-panel-header h3 {
        font-size: 18px;
    }

    .settings-section h4 {
        font-size: 14px;
    }

    .settings-btn {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ============================================
   免责声明弹窗样式
   ============================================ */
.disclaimer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}

.disclaimer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.disclaimer-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: disclaimerSlideIn 0.3s ease-out;
}

@keyframes disclaimerSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.disclaimer-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

.disclaimer-header h2 {
    margin: 0;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.disclaimer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    color: #1f2937;
    line-height: 1.6;
}

.disclaimer-body h3 {
    color: #374151;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

.disclaimer-body h3:first-child {
    margin-top: 0;
}

.disclaimer-body p {
    margin: 8px 0;
    color: #4b5563;
}

.disclaimer-body ul {
    margin: 8px 0;
    padding-left: 20px;
}

.disclaimer-body li {
    margin: 6px 0;
    color: #4b5563;
}

.disclaimer-body strong {
    color: #1f2937;
    font-weight: 600;
}

.warning-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
}

.warning-box p {
    color: #991b1b;
    margin: 0 0 8px 0;
}

.warning-box ul {
    margin: 0;
}

.warning-box li {
    color: #b91c1c;
}

.disclaimer-footer-note {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.disclaimer-footer-note p {
    margin: 4px 0;
    font-size: 14px;
}

.disclaimer-actions {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.disclaimer-agree-btn,
.disclaimer-reject-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.disclaimer-agree-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    flex: 1;
}

.disclaimer-agree-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.disclaimer-agree-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af;
}

.disclaimer-reject-btn {
    background: #f3f4f6;
    color: #6b7280;
}

.disclaimer-reject-btn:hover {
    background: #e5e7eb;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .disclaimer-content {
        width: 94%;
        max-height: 90vh;
    }

    .disclaimer-header {
        padding: 16px 20px;
    }

    .disclaimer-body {
        padding: 20px;
    }

    .disclaimer-actions {
        flex-direction: column;
        padding: 12px 20px;
    }

    .disclaimer-agree-btn {
        width: 100%;
    }

    .disclaimer-reject-btn {
        width: 100%;
    }
}

/* ==================== 应用图标自定义界�?==================== */
.app-customization-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

.app-custom-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.app-custom-item:hover {
    background: rgba(255, 255, 255, 0.75);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.app-custom-preview {
    flex-shrink: 0;
}

.app-custom-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.48),
                0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.app-custom-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-custom-icon svg {
    width: 100%;
    height: 100%;
}

.app-custom-icon .default-icon-placeholder {
    font-size: 28px;
}

.app-custom-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-custom-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-custom-default-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.app-custom-buttons {
    display: flex;
    gap: 8px;
}

.btn-change-icon,
.btn-reset-app {
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-change-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-change-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-reset-app {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

.btn-reset-app:hover {
    background: rgba(0, 0, 0, 0.1);
}

.app-custom-label-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-custom-label-input label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

.app-custom-color-input {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-custom-color-input label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

.color-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-color-input {
    width: 42px;
    height: 32px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.app-color-input::-webkit-color-swatch,
.app-color-input::-webkit-color-swatch-wrapper {
    border-radius: 8px;
    border: none;
    padding: 0;
}

.app-color-input::-moz-color-swatch {
    border-radius: 8px;
    border: none;
}

.color-value {
    font-size: 13px;
    color: #555;
    font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
}

.app-label-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 14px;
    background: white;
    transition: all 0.2s ease;
}

.app-label-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .app-custom-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-custom-preview {
        align-self: center;
    }

    .app-custom-controls {
        width: 100%;
    }

    .app-custom-buttons {
        width: 100%;
    }

    .btn-change-icon,
    .btn-reset-app {
        flex: 1;
    }
}

/* ==================== 引用功能样式 ==================== */
/* 引用预览条 - 输入框上方 */
.quote-preview-bar {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-left: 3px solid #667eea;
    border-radius: 0 8px 8px 0;
    margin: 0 12px 8px 12px;
    animation: quoteSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.quote-preview-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
}

.quote-preview-bar.show {
    display: flex;
}

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

.quote-preview-icon {
    font-size: 16px;
    color: #667eea;
    flex-shrink: 0;
}

.quote-preview-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.quote-preview-text {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.quote-preview-close {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #888;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.quote-preview-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #555;
    transform: scale(1.1);
}

.quote-preview-close:active {
    transform: scale(0.95);
}

/* 消息中的引用块 */
.message-quote-block {
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(102, 126, 234, 0.06);
    border-left: 3px solid #667eea;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.message-quote-block:hover {
    background: rgba(102, 126, 234, 0.12);
}

.message-quote-block::before {
    content: '↩';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message-quote-block:hover::before {
    opacity: 1;
}

.quote-block-sender {
    font-weight: 600;
    color: #667eea;
    margin-bottom: 2px;
    font-size: 11px;
}

.quote-block-text {
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 用户消息中的引用块样式调整 */
.user-message .message-quote-block {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.5);
}

.user-message .quote-block-sender {
    color: rgba(255, 255, 255, 0.9);
}

.user-message .quote-block-text {
    color: rgba(255, 255, 255, 0.85);
}

.user-message .message-quote-block::before {
    color: rgba(255, 255, 255, 0.6);
}

/* 移动端适配 */
@media (max-width: 480px) {
    .quote-preview-bar {
        margin: 0 8px 6px 8px;
        padding: 8px 12px;
    }

    .quote-preview-text {
        font-size: 12px;
    }

    .message-quote-block {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ========================================
   世界书优先级排序 - 拖动样式
   ======================================== */

/* 可排序列表容器 */
.wb-sortable-section {
    margin-bottom: 16px;
}

.wb-sortable-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    margin-bottom: 8px;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wb-sortable-section-title .section-icon {
    font-size: 14px;
}

.wb-sortable-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 40px;
}

/* 可拖动项 */
.wb-sortable-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e0e0e0);
    border-radius: 10px;
    gap: 10px;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.wb-sortable-item:hover {
    border-color: var(--theme-primary, #667eea);
}

/* 拖动手柄 */
.wb-drag-handle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted, #999);
    cursor: grab;
    border-radius: 8px;
    margin: -8px;
    margin-right: 2px;
    transition: background 0.15s ease, color 0.15s ease;
}

.wb-drag-handle:hover {
    background: rgba(102, 126, 234, 0.1);
    color: var(--theme-primary, #667eea);
}

.wb-drag-handle:active {
    cursor: grabbing;
    background: rgba(102, 126, 234, 0.15);
}

/* 项目内容区 */
.wb-sortable-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wb-sortable-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wb-sortable-meta {
    font-size: 12px;
    color: var(--text-muted, #999);
}

/* 标签 */
.wb-sortable-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.1);
    color: var(--theme-primary, #667eea);
    white-space: nowrap;
}

.wb-sortable-badge.auto {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.wb-sortable-badge.manual {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

/* 拖动中状态 */
.wb-sortable-item.dragging {
    opacity: 0.7;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    border-color: var(--theme-primary, #667eea);
}

/* 拖动占位符 */
.wb-sortable-placeholder {
    height: 54px;
    border: 2px dashed var(--theme-primary, #667eea);
    border-radius: 10px;
    background: rgba(102, 126, 234, 0.05);
    margin: 4px 0;
}

/* 插入指示线 */
.wb-drop-indicator {
    height: 3px;
    background: var(--theme-primary, #667eea);
    border-radius: 2px;
    margin: 2px 0;
    animation: wb-pulse 1s ease-in-out infinite;
}

@keyframes wb-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 空状态 */
.wb-sortable-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted, #999);
    font-size: 13px;
    border: 1px dashed var(--card-border, #e0e0e0);
    border-radius: 10px;
}

/* 删除按钮 */
.wb-sortable-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-muted, #999);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.wb-sortable-remove:hover {
    background: rgba(255, 107, 107, 0.1);
    color: var(--error-color, #ff6b6b);
}

/* ========== 红包/转账气泡样式 ========== */

/* 红包/转账气泡特殊样式 */
.bubble.packet-bubble {
    padding: 0;
    background: transparent !important;
    border: none !important;
    width: 240px;
    overflow: hidden;
}

.bubble.packet-bubble::before {
    display: none;
}

.packet-content {
    background: #fa9d3b;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s;
    cursor: pointer;
}

/* 已领取/已退还 状态变淡 */
.packet-content.received,
.packet-content.refunded {
    background: #f7e2b9;
}

.packet-top {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.packet-icon-container {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

/* 已收款/退还 图标变化 */
.packet-content.received .packet-icon-container,
.packet-content.refunded .packet-icon-container {
    background: transparent;
    color: #fa9d3b;
    font-size: 24px;
}

.packet-text {
    color: #fff;
    display: flex;
    flex-direction: column;
}

.packet-title {
    font-size: 16px;
    font-weight: 400;
}

.packet-desc {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

.packet-bottom {
    background: #fff;
    padding: 5px 12px;
    font-size: 12px;
    color: #999;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* ========== 输入金额弹窗 ========== */

.transfer-input-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    background: #f2f2f2;
    z-index: 2000;
    display: none;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: transferSlideUp 0.3s ease-out;
}

.transfer-input-modal.active { display: flex; }

@keyframes transferSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.transfer-input-header {
    height: calc(44px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 15px 0 15px;
    background: #ededed;
    border-bottom: 1px solid #dcdcdc;
}

.transfer-input-cancel { color: #000; font-size: 16px; cursor: pointer; }
.transfer-input-title { font-weight: 500; font-size: 17px; }

/* 转账输入样式 */
.transfer-input-body.transfer-theme { padding: 20px; }
.transfer-input-body.transfer-theme .input-card {
    background: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    margin-top: 10px;
}
.transfer-input-body.transfer-theme .label { font-size: 14px; color: #333; display: block; margin-bottom: 15px; }
.transfer-input-body.transfer-theme .amount-row { display: flex; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.transfer-input-body.transfer-theme .currency { font-size: 30px; font-weight: bold; margin-right: 10px; }
.transfer-input-body.transfer-theme input.money-input {
    border: none; font-size: 40px; font-weight: bold; width: 100%; outline: none; padding: 0;
}
.transfer-input-body.transfer-theme input.note-input {
    margin-top: 20px; width: 100%; border: none; font-size: 14px; color: #666; outline: none;
}
.transfer-input-body.transfer-theme .action-btn {
    margin-top: 30px; background: #07c160; color: #fff; width: 100%; height: 48px;
    border-radius: 6px; border: none; font-size: 16px; font-weight: bold; cursor: pointer;
}

/* 红包输入样式 */
.transfer-input-body.redpacket-theme { padding: 0; background: #f2f2f2; }
.transfer-input-body.redpacket-theme .group { margin-top: 20px; padding: 0 20px; }
.transfer-input-body.redpacket-theme .row {
    background: #fff; border-radius: 6px; padding: 15px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;
}
.transfer-input-body.redpacket-theme .row label { font-size: 16px; color: #000; width: 60px; }
.transfer-input-body.redpacket-theme input { text-align: right; border: none; font-size: 16px; outline: none; flex: 1; }
.transfer-input-body.redpacket-theme textarea {
    width: 100%; height: 60px; border: none; outline: none; resize: none; background: transparent; padding: 10px; font-size: 14px;
}
.transfer-input-body.redpacket-theme .big-amount { font-size: 40px; font-weight: bold; text-align: center; margin: 20px 0; }
.transfer-input-body.redpacket-theme .action-btn {
    background: #ea5f59; color: #fceecb; width: 80%; height: 48px; border-radius: 6px; border: none;
    font-size: 16px; font-weight: bold; margin: 20px auto; display: block; cursor: pointer;
}

/* ========== 红包开启弹窗 ========== */

.red-packet-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    background: rgba(0,0,0,0.6);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.red-packet-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.red-packet-card {
    width: 300px;
    height: 480px;
    background: #d95940;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.red-packet-overlay.active .red-packet-card {
    transform: scale(1);
}

.rp-card-top-arc {
    position: absolute;
    top: -200px;
    left: -50%;
    width: 200%;
    height: 400px;
    background: #e06048;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.rp-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fceecb;
}

.rp-card-avatar {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 2px solid #fceecb;
    margin-bottom: 10px;
    background: #eee;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #999;
}

.rp-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rp-card-username { font-size: 16px; margin-bottom: 5px; }
.rp-card-wish { font-size: 20px; font-weight: 500; margin-bottom: 40px; text-align: center; padding: 0 20px; }

.rp-open-btn {
    width: 90px;
    height: 90px;
    background: #fceecb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-top: 10px;
    transition: transform 0.2s;
    border: none;
}

.rp-open-btn:active { transform: scale(0.95); }
.rp-open-btn.spinning {
    animation: rpSpinY 1s infinite linear;
    background: #d4bd88;
    color: transparent;
}
@keyframes rpSpinY {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* 转账专属样式主题 */
.red-packet-card.transfer-theme {
    background: #fff;
    height: 400px;
}
.red-packet-card.transfer-theme .rp-card-top-arc { display: none; }
.red-packet-card.transfer-theme .rp-card-content { color: #333; padding-top: 40px; }
.red-packet-card.transfer-theme .rp-card-avatar { border: none; background: #eee; margin-bottom: 15px; }
.red-packet-card.transfer-theme .rp-card-username { color: #333; font-size: 18px; font-weight: bold; margin-bottom: 5px; }
.red-packet-card.transfer-theme .rp-card-wish {
    color: #333; font-size: 32px; font-weight: bold; margin-bottom: 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.red-packet-card.transfer-theme .rp-open-btn {
    background: #07c160;
    color: #fff;
    width: 160px;
    height: 48px;
    border-radius: 8px;
    font-size: 18px;
    box-shadow: none;
    margin-top: 0;
}
.red-packet-card.transfer-theme .rp-open-btn:active { background: #06ad56; transform: scale(0.98); }
.red-packet-card.transfer-theme .rp-open-btn.loading {
    color: transparent;
    position: relative;
}
.red-packet-card.transfer-theme .rp-open-btn.loading::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    margin-left: -10px; margin-top: -10px;
    width: 20px; height: 20px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: rpSpinRound 0.8s infinite linear;
}
@keyframes rpSpinRound {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.red-packet-card.transfer-theme .rp-close { color: #000; }
.red-packet-card.transfer-theme .rp-reject-link { color: #576b95; margin-top: 25px; text-decoration: none; font-size: 15px; cursor: pointer; }
.red-packet-card.transfer-theme .rp-detail { display: none; }

.rp-close {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    z-index: 10;
    padding: 10px;
    background: none;
    border: none;
}

.rp-reject-link {
    margin-top: 30px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    text-decoration: underline;
    cursor: pointer;
}

.rp-detail {
    position: absolute;
    bottom: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    z-index: 2;
}

/* ========== 红包/转账详情结果页 ========== */

.rp-result {
    display: none;
    width: 100%;
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
    background: #f5f5f5;
    flex-direction: column;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 2600;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.rp-result.show { display: flex; }

.rp-result-top-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #d95940;
    z-index: 0;
    transition: height 0.3s;
}

/* 结果页导航栏 */
.rp-result-header {
    width: 100%;
    height: calc(44px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    padding: 0 15px;
    padding-top: env(safe-area-inset-top, 0px);
    background: transparent;
    border: none;
    z-index: 10;
    color: #000;
}

.rp-result-header .header-back {
    width: 12px;
    height: 12px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 5px;
    cursor: pointer;
}

.rp-result-header .header-title {
    font-weight: 500;
    font-size: 17px;
}

.rp-result-content {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.rp-result .rp-result-avatar {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid #eee;
    font-size: 16px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.rp-result-sender { font-size: 16px; font-weight: bold; margin-top: 10px; color: #000; }
.rp-result-note { font-size: 14px; color: #999; margin-top: 4px; }

.rp-result-amount {
    font-size: 50px;
    font-weight: bold;
    margin: 20px 0 5px 0;
    font-family: -apple-system, "Helvetica Neue", sans-serif;
}
.rp-result-amount span { font-size: 16px; }

.rp-result-status-text { font-size: 12px; color: #cea060; margin-bottom: 20px; opacity: 0; }

.rp-result-close { margin-top: auto; margin-bottom: 40px; font-size: 14px; color: #576b95; cursor: pointer; z-index: 10; background: none; border: none; }

/* 红包详情页主题 */
.rp-result.redpacket-theme .rp-result-top-bg {
    height: 100px;
}
.rp-result.redpacket-theme .rp-result-top-bg::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -10%;
    width: 120%;
    height: 60px;
    background: #d95940;
    border-radius: 50%;
}

.rp-result.redpacket-theme .rp-result-header { color: #fceecb; }
.rp-result.redpacket-theme .rp-result-header .header-back { border-color: #fceecb; }
.rp-result.redpacket-theme .rp-result-header .header-title { color: #fceecb; }

.rp-result.redpacket-theme .rp-result-content { margin-top: 10px; }
.rp-result.redpacket-theme .rp-result-avatar {
    border: none;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.rp-result.redpacket-theme .rp-result-amount { color: #cfb072; }
.rp-result.redpacket-theme .rp-result-status-text { opacity: 1; }

/* 转账详情页主题 */
.rp-result.transfer-theme { background: #fff; }
.rp-result.transfer-theme .rp-result-header { background: #fff; border-bottom: 1px solid #eee; }
.rp-result.transfer-theme .rp-result-top-bg { display: none; }

.rp-result.transfer-theme .rp-result-content { margin-top: 40px; }
.rp-result.transfer-theme .rp-result-avatar { display: none; }

.rp-result.transfer-theme .rp-result-icon-placeholder {
    width: 60px;
    height: 60px;
    background: #07c160;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    margin-bottom: 10px;
}

.rp-result.transfer-theme .rp-result-amount { color: #000; margin-top: 10px; }
.rp-result.transfer-theme .rp-result-note { margin-bottom: 30px; }


/* ========== 红包/转账 聊天气泡样式（完全按 demo） ========== */

/* 红包/转账气泡主容器 */
.message-bubble.packet-bubble {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 240px;
    overflow: hidden;
}

/* 移除气泡三角 */
.message-bubble.packet-bubble::before,
.message-bubble.packet-bubble::after {
    display: none !important;
}

/* 内容区域 */
.packet-content {
    background: #fa9d3b;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s;
}

/* 红包主题 - 红色背景 */
.packet-content.red-packet {
    background: #e84330;
}

/* 已领取/已退还 状态变淡 */
.packet-content.received,
.packet-content.refunded {
    background: #f7e2b9;
}

.packet-content.red-packet.received,
.packet-content.red-packet.refunded {
    background: #f5d5d3;
}

/* 顶部区域（图标 + 文字） */
.packet-top {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 图标容器 */
.packet-icon-container {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

/* 已收款/退还 图标变化 */
.packet-content.received .packet-icon-container,
.packet-content.refunded .packet-icon-container {
    background: transparent;
    color: #fa9d3b;
    font-size: 24px;
}

.packet-content.red-packet.received .packet-icon-container,
.packet-content.red-packet.refunded .packet-icon-container {
    color: #e84330;
}

/* 文字区域 */
.packet-text {
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* 已领取/退还状态下文字颜色变深 */
.packet-content.received .packet-text,
.packet-content.refunded .packet-text {
    color: #b08d4d;
}

.packet-content.red-packet.received .packet-text,
.packet-content.red-packet.refunded .packet-text {
    color: #c97a72;
}

/* 标题（金额/附言） */
.packet-title {
    font-size: 16px;
    font-weight: 400;
}

/* 描述（状态） */
.packet-desc {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 2px;
}

/* 底部标识 */
.packet-bottom {
    background: #fff;
    padding: 5px 12px;
    font-size: 12px;
    color: #999;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* 待领取红包的点击效果 */
.packet-bubble {
    cursor: pointer;
}

.packet-bubble:active .packet-content:not(.received):not(.refunded) {
    filter: brightness(0.95);
}

/* ========== 系统消息样式 ========== */
.system-message {
    text-align: center;
    font-size: 12px;
    color: #b2b2b2;
    margin: 8px 0;
    padding: 0 20px;
}






























/* ========== 聊天标题状态样式 ========== */
#chat-header-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-grow: 1;
    text-align: center;
}

#chat-header-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

#chat-header-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #8e8e93);
}

#chat-header-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #34c759;
}

#chat-header-status .status-text {
    font-weight: 400;
}

/* 正在输入状态 */
#chat-header-status.typing .status-dot {
    animation: typing-pulse 1s infinite;
}

@keyframes typing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}