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

html {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    width: 100%;
    background-color: var(--home-screen-bg, var(--app-bg-color, #000));
    background-image: var(--home-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overscroll-behavior: none;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    min-height: calc(100vh + env(safe-area-inset-bottom, 0px));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--home-screen-bg, var(--app-bg-color, #000));
    background-image: var(--home-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #333;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

.mobile-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    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: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;  /* 移除所有padding实现全屏 */
    box-sizing: border-box;
    background-color: transparent;
    display: none;
    overflow: hidden;
    overscroll-behavior: none;
    z-index: 1;
}

/* CSS变量定义 - 每个界面的背景色 */
:root {
    /* 默认锁屏背景 - 星空渐变 */
    --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;
}

/* 应用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: calc(60px + env(safe-area-inset-bottom, 0px));
    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: 0;
}

.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: 100%;
    overflow: hidden;
}

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

/* 保持原有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(112px + 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: absolute;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    padding: 8px 18px;
    border-radius: 18px;
    z-index: 10;
}

.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;
}

/* ========== 自定义图标样式（防止背景渐变覆盖）========== */
/* 有自定义图标时，清除背景渐变效果 */
body.light-mode .app-icon-bg.has-custom-icon {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* 日间模式悬停时也不覆盖自定义图标 */
body.light-mode .app-icon:hover .app-icon-bg.has-custom-icon {
  background: transparent !important;
  background-image: none !important;
}

/* 隐藏自定义图标上的伪元素高光 */
body.light-mode .app-icon-bg.has-custom-icon::before {
  display: none !important;
}

/* 液态玻璃模式下也要保护自定义图标 */
.liquid-glass-icon .app-icon-bg.has-custom-icon {
  background: transparent !important;
  background-image: none !important;
}

.liquid-glass-icon .app-icon-bg.has-custom-icon::before,
.liquid-glass-icon .app-icon-bg.has-custom-icon::after {
  display: none !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, #data-management-screen, #mqtt-room-screen, #ios-settings-screen, #appearance-settings {
    padding: 0;
    display: none;
    flex-direction: column;
    z-index: 6;
    background-color: #ffffff;
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#data-management-screen {
    background: var(--iosm-bg, #f4f5f8);
}

#data-management-screen .settings-content {
    flex: 1;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* 聊天界面特殊设置 - 完全全屏，无任何边距，仅中间列表滚动 */
#chat-screen {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    height: 100%;
    max-height: 100%;
    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 rgba(0, 0, 0, 0.05);
    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; margin-right: 0; }

/* 聊天设置按钮 */
.chat-settings-btn {
    position: absolute;
    right: 15px;
    top: auto;
    bottom: 10px;  /* 改用 bottom 定位，和返回键对齐 */
    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: 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;
    -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;
}

/* 历史深度输入框样式 */
.history-depth-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.history-depth-input {
    width: 100px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    background: #fff;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.history-depth-input:focus {
    border-color: #007aff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.history-depth-input::-webkit-inner-spin-button,
.history-depth-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.history-depth-unit {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* 夜间模式适配 */
body.night .history-depth-input {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f5f5f7;
}

body.night .history-depth-input:focus {
    border-color: #0a84ff;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

body.night .history-depth-unit {
    color: #98989d;
}

.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;
}

/* 只读输入框样式 */
.chat-setting-input[readonly],
.chat-setting-textarea[readonly] {
    background-color: #f5f5f7;
    cursor: not-allowed;
    opacity: 0.7;
    border-color: #e0e0e0;
}

.chat-setting-input[readonly]:focus,
.chat-setting-textarea[readonly]:focus {
    border-color: #e0e0e0;
}

/* 只读提示和跳转按钮 */
.chat-setting-readonly-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #666;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.chat-setting-link-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: opacity 0.2s, transform 0.2s;
}

.chat-setting-link-btn:hover {
    opacity: 0.9;
}

.chat-setting-link-btn:active {
    transform: scale(0.95);
}

/* 只读输入框行布局（输入框 + 编辑按钮） */
.chat-setting-readonly-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat-setting-readonly-row .chat-setting-input {
    flex: 1;
}

.chat-setting-edit-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s;
}

.chat-setting-edit-btn:hover {
    opacity: 0.9;
}

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

.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-start;  /* 头像在上方，气泡在下方 */
    gap: 6px;
    margin-bottom: 10px;
}

.user-wrapper {
    flex-direction: row;
    justify-content: flex-end;
}

.ai-wrapper {
    flex-direction: row;
    justify-content: flex-start;
}

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

/* 时间分隔线（微信风格：居中简洁） */
.time-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
    padding: 0 20px;
}

.time-separator span {
    color: #b2b2b2;
    font-size: 12px;
    white-space: nowrap;
}

/* 每条消息的时间戳（气泡外） */
.message-time {
    font-size: 11px;
    color: #bbb;
    align-self: flex-end;
    margin-bottom: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* AI消息：时间在气泡右侧 */
.ai-wrapper .message-time {
    margin-left: 2px;
}

/* 用户消息：时间在气泡左侧 */
.user-wrapper .message-time {
    margin-right: 2px;
}

/* 聊天输入区域容器 */
.chat-input-area {
    background-color: var(--chat-safe-area-color, #f7f7f7);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    padding: 6px 8px calc(10px + 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: 50vh;  /* 增大到视口50%，容纳更多表情包 */
    min-height: 200px;
    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;
    min-height: 0;  /* 关键！让 flex 子元素的 overflow 正常工作 */
    -webkit-overflow-scrolling: touch;  /* iOS 滚动优化 */
}

.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 {
    width: 100%;
    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-upload-progress {
    padding: 16px;
    margin-bottom: 16px;
    background: #f0f7ff;
    border-radius: 12px;
    border: 1px solid #d0e3ff;
}

.sticker-upload-progress .progress-text {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
}

.sticker-upload-progress .progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.sticker-upload-progress .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #007aff, #5ac8fa);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

/* 全局进度遮罩（缓存URL等耗时操作） */
.global-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.global-progress-card {
    background: #fff;
    padding: 24px 28px;
    border-radius: 16px;
    min-width: 260px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.global-progress-card .progress-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
    text-align: center;
}

.global-progress-card .progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.global-progress-card .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #007aff, #5ac8fa);
    border-radius: 4px;
    transition: width 0.2s ease;
    width: 0%;
}

.global-progress-card .progress-text {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.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: 55%; 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: transparent; color: black; align-self: flex-start; padding: 0; border-radius: 0; }
.ai-message .message-content-wrapper { background-color: #e5e5ea; padding: 10px 15px; border-radius: 18px; border-bottom-left-radius: 4px; }

/* AI消息有思维链时使用 Flex column 布局 */
.ai-wrapper.has-thought {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 内容行：头像+气泡+时间戳 */
.message-content-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.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-item.bank-card-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
}

.inventory-item.bank-card-item .item-icon.bank-card-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 22px;
}

.inventory-item.bank-card-item .item-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* 卡类型标签 */
.bank-card-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.bank-card-type.original {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.bank-card-type.authorized {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #333;
}

/* 权限标签 */
.bank-card-perm {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.bank-card-perm.perm-view {
    background: #e3f2fd;
    color: #1976d2;
}

.bank-card-perm.perm-use {
    background: #e8f5e9;
    color: #388e3c;
}

/* 用户自己的银行卡 - 绿色标签 */
.bank-card-type.user-card {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
}

/* 剧情物品特殊样式 - 视觉突出 */
.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; }
.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 {
    font-size: 12px;
    padding: 4px 8px;
    margin-left: 46px;  /* 对齐气泡（头像宽度 + gap） */
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
}

.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: 10px 12px;
    background: transparent;  /* 完全透明 */
    border-left: 3px solid #667eea;
    border-radius: 0;
    margin-top: 6px;
    /* color 由 JS 动态设置 (activeChat.settings.thoughtFontColor) */
    line-height: 1.5;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    animation: slideDown 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

@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; /* 需要 hidden 让 iosm-body 的滚动生效 */
    /* 默认使用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;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    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 40px 2px;
    flex: 1;  /* 使用 flex 自动填充剩余空间 */
    min-height: 0;  /* 允许 flex 子元素收缩 */
    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 */

/* 搜索�?*/
.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: 55%;
    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: 100%;
    max-height: 100%;
    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: 100%;
    max-height: 100%;
    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: 100%;
    max-height: 100%;
    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);
}

/* ========== 分享卡片样式 ========== */
.share-card-bubble {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 85% !important;
}

.share-card-bubble::before,
.share-card-bubble::after {
    display: none !important;
}

.share-card {
    background: #232732;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
    min-width: 240px;
    max-width: 280px;
}

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

/* 顶部留言区 */
.share-card-comment {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.share-card-comment p {
    margin: 0;
    font-size: 13px;
    color: #e2e8f0;
    font-style: italic;
    line-height: 1.4;
}

/* 中部内容区 */
.share-card-body {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(30, 33, 43, 0.5);
}

/* 图标 */
.share-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.share-card-ai .share-card-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
    color: #c4b5fd;
}

.share-card-user .share-card-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%);
    color: #93c5fd;
}

.share-card-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.share-card-icon svg {
    width: 24px;
    height: 24px;
}

/* 文本信息 */
.share-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.share-card-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.share-card-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.badge-ai {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.badge-user {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.share-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-card-desc {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部元数据 */
.share-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #1a1d26;
    font-size: 10px;
    color: #64748b;
}

.share-card-source {
    display: flex;
    align-items: center;
    gap: 4px;
}

.source-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
    opacity: 0.6;
}

.share-card-time {
    display: flex;
    align-items: center;
    gap: 4px;
}

.share-card-time svg {
    opacity: 0.7;
}

/* ========== 分享详情弹窗 ========== */
.share-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

/* 桌面端居中显示 */
@media (min-width: 480px) {
    .share-detail-modal {
        align-items: center;
    }
}

.share-detail-modal.show {
    display: flex;
}

.share-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn 0.2s ease-out;
}

.share-modal-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 85%;
    background: linear-gradient(180deg, #1e212b 0%, #1a1d26 100%);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* 桌面端全圆角 */
@media (min-width: 480px) {
    .share-modal-content {
        border-radius: 20px;
        border: 1px solid rgba(148, 163, 184, 0.15);
        max-height: 80%;
        margin: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        animation: modalPopIn 0.25s ease-out;
    }
}

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

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

/* 弹窗头部 */
.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    flex-shrink: 0;
    background: rgba(30, 33, 43, 0.8);
}

.share-modal-title {
    font-size: 14px;
    font-weight: 500;
    color: #94a3b8;
}

.share-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.share-modal-close:hover {
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}

/* 弹窗内容区 */
.share-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 24px;
    -webkit-overflow-scrolling: touch;
}

/* 隐藏滚动条 */
.share-modal-body::-webkit-scrollbar {
    display: none;
}

.share-modal-body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 顶部英雄区 */
.share-modal-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}

.share-modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow:
        0 0 30px -5px rgba(139, 92, 246, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.share-modal-icon.theme-ai {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.2) 50%, rgba(217, 70, 239, 0.15) 100%);
    color: #c4b5fd;
    box-shadow:
        0 0 40px -5px rgba(139, 92, 246, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.share-modal-icon.theme-user {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(96, 165, 250, 0.2) 50%, rgba(56, 189, 248, 0.15) 100%);
    color: #93c5fd;
    box-shadow:
        0 0 40px -5px rgba(59, 130, 246, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.share-modal-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.share-modal-icon svg {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.share-modal-name {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.share-modal-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.share-modal-time svg {
    opacity: 0.7;
}

/* 内容区块 */
.share-modal-section {
    background: #252936;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(148, 163, 184, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

.share-modal-section:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.section-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.section-dot.sensory {
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

.section-dot.feeling {
    background: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
}

.section-dot.desc {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.section-dot.comment {
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

.section-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.section-header svg {
    color: #64748b;
}

.section-text {
    margin: 0;
    font-size: 14px;
    color: #e2e8f0;
    line-height: 1.7;
}

.share-modal-feeling .section-text {
    font-style: italic;
    color: #c4b5fd;
}

.share-modal-comment .section-text {
    color: #94a3b8;
}

/* 弹窗图片模式 */
.share-modal-image {
    display: none;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 20px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.share-modal-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 图标呼吸动画 */
.share-modal-icon.breathing {
    animation: iconBreathing 3s ease-in-out infinite;
}

@keyframes iconBreathing {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 30px -5px rgba(139, 92, 246, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            0 0 50px -3px rgba(139, 92, 246, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }
}

.share-modal-icon.breathing.theme-user {
    animation: iconBreathingUser 3s ease-in-out infinite;
}

@keyframes iconBreathingUser {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 30px -5px rgba(59, 130, 246, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            0 0 50px -3px rgba(59, 130, 246, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }
}

/* 底部操作按钮区 */
.share-modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-bottom: 8px;
}

.share-modal-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.share-modal-action-btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.share-modal-action-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.share-modal-action-btn.secondary {
    background: #2a2e3b;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.share-modal-action-btn.secondary:hover {
    background: #323644;
}

.share-modal-action-btn svg {
    width: 16px;
    height: 16px;
}

/* ========== 共鸣样式（卡片 + 弹窗） ========== */

/* 卡片上的共鸣标记 */
.share-card-resonance {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, rgba(219, 39, 119, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(244, 63, 94, 0.2);
    animation: resonancePulse 2s ease-in-out infinite;
}

.share-card-resonance svg {
    color: #f43f5e;
    flex-shrink: 0;
    animation: heartBeat 1.2s ease-in-out infinite;
}

.share-card-resonance span {
    font-size: 12px;
    color: #f8a4b3;
    font-weight: 500;
}

.share-card.has-resonance {
    border-color: rgba(244, 63, 94, 0.25);
}

/* 弹窗中的共鸣显示 */
.share-modal-resonance {
    margin-top: 12px;
}

.share-modal-resonance .resonance-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.18) 0%, rgba(219, 39, 119, 0.12) 100%);
    border-radius: 16px;
    border: 1px solid rgba(244, 63, 94, 0.25);
    animation: resonanceGlow 3s ease-in-out infinite;
}

.share-modal-resonance .resonance-badge svg {
    color: #f43f5e;
    flex-shrink: 0;
    animation: heartBeat 1.2s ease-in-out infinite;
}

.share-modal-resonance .resonance-text {
    font-size: 14px;
    color: #f8a4b3;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* 共鸣动画 */
@keyframes resonancePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(244, 63, 94, 0.2);
    }
}

@keyframes resonanceGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(244, 63, 94, 0.1), inset 0 0 20px rgba(244, 63, 94, 0.05);
    }
    50% {
        box-shadow: 0 0 25px rgba(244, 63, 94, 0.2), inset 0 0 30px rgba(244, 63, 94, 0.08);
    }
}

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

/* 已共鸣按钮状态 */
.share-modal-action-btn.primary:disabled {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.3) 0%, rgba(219, 39, 119, 0.25) 100%);
    cursor: default;
    opacity: 0.9;
}

.share-modal-action-btn.primary:disabled svg {
    color: #f43f5e;
    fill: #f43f5e;
    animation: heartBeat 1.2s ease-in-out infinite;
}

/* ========== 系统消息样式 ========== */
.system-message {
    text-align: center;
    font-size: 12px;
    color: #b2b2b2;
    margin: 8px 0;
    padding: 0 20px;
}

/* 灰色静音系统消息（AI 忙碌时的提示） */
.system-message.muted {
    color: #999;
    font-style: italic;
    opacity: 0.7;
}

/* 自动回复消息样式 */
.message-bubble.auto-reply {
    background: #f0f0f0 !important;
    border: 1px dashed #ccc !important;
    opacity: 0.85;
}

.message-bubble.auto-reply::before {
    content: "🤖";
    margin-right: 4px;
}






























/* ========== 聊天标题状态样式 ========== */
#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; }
}

/* ========== AI 世界状态系统 - Phase 1 ========== */
/* 🔌 扩展点：未来可添加 DriveManager 相关样式 */

/* 在线状态（默认绿色）*/
#chat-header-status.status-online .status-dot {
    background-color: #34c759;
}

/* 正在输入状态（蓝色 + 脉冲动画）*/
#chat-header-status.status-typing .status-dot {
    background-color: #007aff;
    animation: typing-pulse 1s infinite;
}

/* 忙碌状态（橙色）*/
#chat-header-status.status-busy .status-dot {
    background-color: #ff9500;
}

/* 离开状态（灰色）*/
#chat-header-status.status-away .status-dot {
    background-color: #8e8e93;
}

/* 睡觉状态（紫色）*/
#chat-header-status.status-sleeping .status-dot {
    background-color: #af52de;
}

/* 离线状态（红色）*/
#chat-header-status.status-offline .status-dot {
    background-color: #ff3b30;
}

/* ========== 聊聊 App 样式 (仿微信完整版) ========== */

/* 主容器 */
#liaoliao-screen {
    display: none;
    flex-direction: column;
    background-color: var(--ll-bg, #EDEDED);
    height: 100%;
    overflow: hidden;
    overflow-x: hidden;
    overscroll-behavior: none;
}

/* Tab 容器 */
#liaoliao-tabs {
    flex: 1;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
    height: 100%;
}

.liaoliao-tab {
    display: none;
    flex-direction: column;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

.liaoliao-tab.active {
    display: flex;
}

/* 顶部 Header */
.liaoliao-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 10px;
    background-color: var(--ll-bg, #EDEDED);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    min-height: 44px;
}

.liaoliao-back-btn {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: -8px;
}

.liaoliao-back-btn svg {
    color: #000;
}

.liaoliao-header-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ll-text, #000);
    flex: 1;
    text-align: center;
}

.liaoliao-header-title #liaoliao-unread-total {
    font-weight: 400;
    color: #666;
}

.liaoliao-header-btn {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: -8px;
}

.liaoliao-header-btn svg {
    color: #000;
}

.liaoliao-header-spacer {
    width: 40px;
}

/* 搜索框 */
.liaoliao-search {
    display: flex;
    align-items: center;
    margin: 8px 12px;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 6px;
    gap: 8px;
}

.liaoliao-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: #000;
}

.liaoliao-search input::placeholder {
    color: #999;
}

/* 列表通用样式 */
.liaoliao-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--ll-bg, #EDEDED);
    overscroll-behavior: contain;
}

/* 消息列表项 */
.liaoliao-chat-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}

.liaoliao-chat-item:active {
    background-color: #f5f5f5;
}

/* 头像 */
.liaoliao-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.liaoliao-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.liaoliao-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

/* 未读数红点 */
.liaoliao-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: #F43F3F;
    border-radius: 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 消息内容区 */
.liaoliao-chat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.liaoliao-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.liaoliao-chat-name {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.liaoliao-chat-time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    margin-left: 8px;
}

.liaoliao-chat-preview {
    display: flex;
    align-items: center;
    gap: 4px;
}

.liaoliao-chat-preview-text {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* 静音图标 */
.liaoliao-mute-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #ccc;
}

/* 空状态 */
.liaoliao-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.liaoliao-empty p {
    margin: 4px 0;
    font-size: 14px;
}

.liaoliao-empty .hint {
    font-size: 13px;
    color: #bbb;
}

/* 好友列表分组 */
.liaoliao-friend-group {
    background-color: #fff;
}

.liaoliao-friend-letter {
    padding: 4px 16px;
    font-size: 13px;
    color: #999;
    background-color: var(--ll-bg, #EDEDED);
    position: sticky;
    top: 0;
}

.liaoliao-friend-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.liaoliao-friend-item:active {
    background-color: #f5f5f5;
}

.liaoliao-friend-name {
    font-size: 16px;
    color: #000;
}

/* 底部 Tab 栏 */
#liaoliao-tabbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4px 0 8px 0;
    background-color: #F7F7F7;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.liaoliao-tabbar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    gap: 2px;
}

.liaoliao-tabbar-btn.active {
    color: var(--ll-primary, #07C160);
}

.liaoliao-tab-icon {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liaoliao-tab-icon svg {
    width: 24px;
    height: 24px;
}

.liaoliao-tabbar-btn.active svg {
    stroke: var(--ll-primary, #07C160);
}

.liaoliao-tab-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: #F43F3F;
    border-radius: 8px;
    color: #fff;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
}

.liaoliao-tab-badge:not(:empty) {
    display: flex;
}

.liaoliao-tabbar-btn > span {
    font-size: 10px;
    margin-top: 2px;
}

/* 「我」页面 */
.liaoliao-me-profile {
    display: flex;
    align-items: center;
    padding: 20px 16px;
    background-color: #fff;
    gap: 16px;
    margin-bottom: 8px;
}

.liaoliao-avatar.large {
    width: 64px;
    height: 64px;
}

.liaoliao-avatar.large .liaoliao-avatar-placeholder {
    font-size: 28px;
}

.liaoliao-me-info {
    flex: 1;
}

.liaoliao-me-name {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.liaoliao-me-id {
    font-size: 14px;
    color: #999;
}

.liaoliao-me-status {
    font-size: 13px;
    color: #576B95;
    margin-top: 6px;
}

.liaoliao-me-qrcode {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
}

.liaoliao-me-qrcode svg {
    width: 18px;
    height: 18px;
}

.liaoliao-me-arrow {
    font-size: 18px;
    color: #ccc;
}

.liaoliao-me-section {
    background-color: #fff;
    margin-bottom: 8px;
}

.liaoliao-me-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    gap: 12px;
}

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

.liaoliao-me-item:active {
    background-color: #f5f5f5;
}

.liaoliao-me-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.liaoliao-me-item-icon svg {
    width: 16px;
    height: 16px;
}

.liaoliao-me-item-label {
    flex: 1;
    font-size: 16px;
    color: #000;
}

.liaoliao-me-item-value {
    font-size: 14px;
    color: #999;
}

.liaoliao-me-item-arrow {
    font-size: 16px;
    color: #ccc;
    margin-left: 4px;
}

/* 发现页面列表项 */
.liaoliao-discover-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    gap: 12px;
}

.liaoliao-discover-item:active {
    background-color: #f5f5f5;
}

.liaoliao-discover-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liaoliao-discover-icon svg {
    width: 24px;
    height: 24px;
}

.liaoliao-discover-label {
    flex: 1;
    font-size: 16px;
    color: #000;
}

.liaoliao-discover-badge {
    background-color: #F43F3F;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
}

.liaoliao-discover-arrow {
    font-size: 16px;
    color: #ccc;
}

/* 通讯录列表 */
.liaoliao-contacts-section {
    background-color: #fff;
    margin-bottom: 8px;
}

.liaoliao-contacts-letter {
    padding: 6px 16px;
    font-size: 12px;
    color: #999;
    background-color: #f5f5f5;
}

.liaoliao-contacts-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    gap: 12px;
}

.liaoliao-contacts-item:active {
    background-color: #f5f5f5;
}

.liaoliao-contacts-item.new-friends {
    padding: 14px 16px;
}

.liaoliao-contacts-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liaoliao-contacts-icon.new-friends {
    background: linear-gradient(135deg, #FA9E3B 0%, #FA5D3B 100%);
}

.liaoliao-contacts-icon.add-friend {
    background: linear-gradient(135deg, #3B8BFA 0%, #3B5DFA 100%);
}

.liaoliao-contacts-icon.group-chat {
    background: linear-gradient(135deg, #07C160 0%, #06AD56 100%);
}

.liaoliao-contacts-icon.official-account {
    background: linear-gradient(135deg, #576b95 0%, #4a5d82 100%);
}

.liaoliao-contacts-icon svg {
    width: 22px;
    height: 22px;
}

.liaoliao-contacts-label {
    flex: 1;
    font-size: 16px;
    color: #000;
}

.liaoliao-contacts-name {
    flex: 1;
    font-size: 16px;
    color: #000;
}

.liaoliao-contacts-badge {
    background-color: #F43F3F;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.liaoliao-contacts-arrow {
    font-size: 18px;
    color: #ccc;
}

.liaoliao-avatar.small {
    width: 40px;
    height: 40px;
}

.liaoliao-avatar.small img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.liaoliao-avatar.small .liaoliao-avatar-placeholder {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

/* 子页面（新的朋友等） */
.liaoliao-subpage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #EDEDED;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.liaoliao-subpage.show {
    transform: translateX(0);
}

.liaoliao-subpage-header {
    display: flex;
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    background-color: #EDEDED;
    border-bottom: 1px solid #ddd;
    gap: 12px;
}

.liaoliao-subpage-back {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liaoliao-subpage-title {
    flex: 1;
    font-size: 17px;
    font-weight: 500;
    color: #000;
}

.liaoliao-subpage-content {
    height: calc(100% - (56px + env(safe-area-inset-top, 0px)));
    overflow-y: auto;
}

/* 子页面添加按钮 */
.liaoliao-subpage-add {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #007AFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.liaoliao-subpage-add svg {
    stroke: currentColor;
}

/* 添加成员列表 */
.liaoliao-add-members-list {
    display: flex;
    flex-direction: column;
}

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

.liaoliao-add-member-item:last-child {
    border-bottom: none;
}

.liaoliao-add-member-item:active,
.liaoliao-add-member-item.selected {
    background: rgba(0, 122, 255, 0.1);
}

.liaoliao-add-member-checkbox {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liaoliao-add-member-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #007AFF;
    cursor: pointer;
}

/* 新的朋友列表项 */
.liaoliao-new-friend-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}

.liaoliao-new-friend-info {
    flex: 1;
    min-width: 0;
}

.liaoliao-new-friend-name {
    font-size: 16px;
    color: #000;
    margin-bottom: 2px;
}

.liaoliao-new-friend-message {
    font-size: 13px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.liaoliao-new-friend-actions {
    flex-shrink: 0;
}

.liaoliao-friend-accept-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    background-color: #07C160;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.liaoliao-friend-accept-btn:active {
    background-color: #06AD56;
}

.liaoliao-friend-accept-btn.done {
    background-color: #ccc;
    cursor: default;
}

/* 添加好友页面 */
.liaoliao-add-friend-section {
    background-color: #fff;
    margin-top: 8px;
}

.liaoliao-add-friend-section-title {
    padding: 8px 16px;
    font-size: 13px;
    color: #888;
    background-color: #EDEDED;
}

.liaoliao-add-friend-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.liaoliao-add-friend-item:last-child {
    border-bottom: none;
}

.liaoliao-add-friend-info {
    flex: 1;
    min-width: 0;
}

.liaoliao-add-friend-name {
    font-size: 16px;
    color: #000;
    margin-bottom: 2px;
}

.liaoliao-add-friend-status {
    font-size: 13px;
    color: #888;
}

.liaoliao-add-friend-status.success {
    color: #07C160;
}

.liaoliao-add-friend-actions {
    flex-shrink: 0;
}

.liaoliao-add-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    background-color: #07C160;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.liaoliao-add-btn:active {
    background-color: #06AD56;
}

.liaoliao-add-btn.pending,
.liaoliao-add-btn.done {
    background-color: #ccc;
    cursor: default;
}

.liaoliao-chat-btn {
    padding: 6px 16px;
    border: 1px solid #07C160;
    border-radius: 4px;
    background-color: #fff;
    color: #07C160;
    font-size: 14px;
    cursor: pointer;
}

.liaoliao-chat-btn:active {
    background-color: #f0f9f4;
}

/* 主题弹窗 */
.liaoliao-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    z-index: 1000;
}

.liaoliao-modal-content {
    width: 100%;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
}

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

.liaoliao-modal-header span {
    font-size: 16px;
    font-weight: 600;
}

.liaoliao-modal-close {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}

.liaoliao-theme-options {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 24px;
}

.liaoliao-theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
}

.liaoliao-theme-option.active {
    background-color: rgba(7, 193, 96, 0.1);
}

.liaoliao-theme-option span {
    font-size: 14px;
    color: #333;
}

.liaoliao-theme-preview {
    width: 60px;
    height: 100px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.liaoliao-theme-preview.wechat {
    background: linear-gradient(to bottom, #EDEDED 0%, #EDEDED 30%, #fff 30%);
}

.liaoliao-theme-preview.ios {
    background: linear-gradient(to bottom, #F2F2F7 0%, #F2F2F7 30%, #fff 30%);
}

/* 主题变量 - 微信风格 */
[data-liaoliao-theme="wechat"],
:root {
    --ll-primary: #07C160;
    --ll-bg: #EDEDED;
    --ll-text: #000;
}

/* 主题变量 - iOS 风格 */
[data-liaoliao-theme="ios"] {
    --ll-primary: #007AFF;
    --ll-bg: #F2F2F7;
    --ll-text: #000;
}

[data-liaoliao-theme="ios"] #liaoliao-tabbar {
    background-color: rgba(249, 249, 249, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ========== 聊聊滑动动画 ========== */
.screen.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.screen.slide-out-right {
    animation: slideOutRight 0.3s ease-out forwards;
}

.screen.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

.screen.slide-out-left {
    animation: slideOutLeft 0.3s ease-out forwards;
}

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

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

@keyframes slideInLeft {
    from {
        transform: translateX(-30%);
        opacity: 0.8;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-30%);
        opacity: 0.8;
    }
}

/* ========== 聊天列表 - 置顶样式 ========== */
.liaoliao-chat-item.pinned {
    background-color: #F0F0F0;
}

/* ========== 长按操作菜单 (Action Sheet) ========== */
.liaoliao-action-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: auto;
}

.liaoliao-action-sheet-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
}

.liaoliao-action-sheet.show .liaoliao-action-sheet-mask {
    background-color: rgba(0, 0, 0, 0.5);
}

.liaoliao-action-sheet-content {
    position: relative;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.liaoliao-action-sheet.show .liaoliao-action-sheet-content {
    transform: translateY(0);
}

.liaoliao-action-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.liaoliao-action-sheet-item:active {
    background-color: #f5f5f5;
}

.liaoliao-action-sheet-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.liaoliao-action-sheet-item.danger {
    color: #FA5151;
}

.liaoliao-action-sheet-item.danger svg {
    stroke: #FA5151;
}

.liaoliao-action-sheet-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    margin-top: 8px;
    background-color: #f7f7f7;
}

.liaoliao-action-sheet-cancel:active {
    background-color: #eee;
}

/* ========== 删除确认弹窗 ========== */
.liaoliao-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease;
}

.liaoliao-confirm-modal.show {
    background-color: rgba(0, 0, 0, 0.5);
}

.liaoliao-confirm-content {
    background-color: #fff;
    border-radius: 12px;
    width: 280px;
    overflow: hidden;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.liaoliao-confirm-modal.show .liaoliao-confirm-content {
    transform: scale(1);
    opacity: 1;
}

.liaoliao-confirm-title {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    padding: 20px 20px 8px;
    color: #333;
}

.liaoliao-confirm-message {
    font-size: 14px;
    color: #666;
    text-align: center;
    padding: 0 20px 20px;
    line-height: 1.5;
}

.liaoliao-confirm-buttons {
    display: flex;
    border-top: 1px solid #e5e5e5;
}

.liaoliao-confirm-btn {
    flex: 1;
    padding: 14px 0;
    font-size: 16px;
    border: none;
    background: none;
    cursor: pointer;
}

.liaoliao-confirm-btn.cancel {
    color: #333;
    border-right: 1px solid #e5e5e5;
}

.liaoliao-confirm-btn.confirm {
    color: #FA5151;
    font-weight: 500;
}

.liaoliao-confirm-btn:active {
    background-color: #f5f5f5;
}

/* ========== 话题管理样式 ========== */

/* 当前话题信息卡片 */
.topic-current-info {
    margin-bottom: 16px;
}

.topic-current-card {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    padding: 14px 16px;
}

.topic-current-card.empty {
    text-align: center;
    color: #999;
    padding: 20px;
}

.topic-current-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topic-current-meta {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
    display: flex;
    gap: 12px;
}

/* 话题状态点 */
.topic-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.topic-status-dot.active {
    background: #4CAF50;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

.topic-status-dot.archived {
    background: #9e9e9e;
}

/* 话题按钮样式 */
.memory-action-btn.topic-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.memory-action-btn.topic-btn:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
}

.memory-action-btn.topic-btn .btn-icon svg {
    stroke: white;
}

.memory-action-btn.topic-btn .btn-text {
    color: white;
}

.memory-action-btn.topic-btn .btn-desc {
    color: rgba(255, 255, 255, 0.8);
}

.memory-action-btn.new-topic-btn {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.memory-action-btn.new-topic-btn:hover {
    background: linear-gradient(135deg, #0f8a80 0%, #32d970 100%);
}

.memory-action-btn.new-topic-btn .btn-icon svg {
    stroke: white;
}

.memory-action-btn.new-topic-btn .btn-text {
    color: white;
}

.memory-action-btn.new-topic-btn .btn-desc {
    color: rgba(255, 255, 255, 0.8);
}

/* 通用弹窗样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.modal-container {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn 0.25s ease-out;
}

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

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

.modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background: #eee;
    color: #333;
}

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

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.modal-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.modal-btn.primary:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
}

.modal-btn.secondary {
    background: #f5f5f5;
    color: #666;
}

.modal-btn.secondary:hover {
    background: #eee;
    color: #333;
}

/* API 错误弹窗样式 */
.api-error-container {
    max-width: 340px;
}

.api-error-container .modal-header {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: white;
    border-bottom: none;
}

.api-error-container .modal-header h3 {
    color: white;
}

.api-error-detail {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
    font-size: 13px;
    color: #666;
    word-break: break-all;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

/* 话题筛选标签 */
.topic-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.topic-filter-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    background: #f8f8f8;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.topic-filter-tab:hover {
    background: #f0f0f0;
}

.topic-filter-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

/* 话题列表 */
.topic-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.topic-list-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.topic-list-empty .empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.topic-list-empty p {
    margin: 0;
    font-size: 14px;
}

/* 话题项 */
.topic-item {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.topic-item:hover {
    background: #f0f2f5;
    border-color: #dee2e6;
}

.topic-item.active {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8edff 100%);
    border-color: #667eea;
}

.topic-item-main {
    flex: 1;
    padding: 14px 16px;
    cursor: pointer;
}

.topic-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topic-current-badge {
    font-size: 10px;
    background: #667eea;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.topic-item-meta {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    display: flex;
    gap: 10px;
}

.topic-item-actions {
    display: flex;
    gap: 4px;
    padding-right: 12px;
}

.topic-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.topic-action-btn svg {
    width: 16px;
    height: 16px;
}

.topic-action-btn.archive {
    color: #f59e0b;
}

.topic-action-btn.archive:hover {
    background: #fef3c7;
}

.topic-action-btn.restore {
    color: #10b981;
}

.topic-action-btn.restore:hover {
    background: #d1fae5;
}

/* 新建话题表单 */
.new-topic-container .form-group {
    margin-bottom: 16px;
}

.new-topic-container .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.new-topic-container .form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s;
}

.new-topic-container .form-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.new-topic-container .form-hint {
    font-size: 12px;
    color: #888;
    margin: 0;
    line-height: 1.5;
}

/* 话题标题输入框包装器 */
.topic-title-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.topic-title-input-wrapper input {
    flex: 1;
}

/* AI自动生成标题按钮 */
.topic-auto-title-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.topic-auto-title-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.topic-auto-title-btn:active {
    transform: scale(0.95);
}

.topic-auto-title-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.topic-auto-title-btn.loading {
    animation: pulse 1s infinite;
}

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

/* 总结选项样式 */
.topic-summary-option {
    margin-top: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #667eea;
}

.checkbox-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.checkbox-hint {
    margin-top: 8px !important;
    padding-left: 28px;
    font-size: 12px !important;
    color: #888 !important;
}

/* ========== 银行界面样式 ========== */

/* 银行头部 */
.bank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: calc(env(safe-area-inset-top, 20px) + 16px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.bank-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.bank-header .back-btn {
    color: white;
    font-size: 28px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.bank-header #wallet-refresh-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.bank-header #wallet-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 银行内容区域 */
.bank-content {
    padding: 20px;
    padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 20px);
    overflow-y: auto;
    height: calc(100% - 80px);
}

.bank-section {
    margin-bottom: 24px;
}

/* 我的账户卡片 */
.bank-account-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.bank-account-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.bank-account-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.bank-account-card.active {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 8px 24px rgba(102, 126, 234, 0.4);
}

.bank-account-card .account-label {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 4px;
}

.bank-account-card .account-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.bank-account-card .balance-label {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.bank-account-card .balance-amount {
    font-size: 32px;
    font-weight: 700;
}

.bank-account-card .balance-amount span {
    font-size: 16px;
    font-weight: 400;
    margin-left: 4px;
}

/* 银行卡列表 */
.bank-cards-empty {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.bank-cards-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.bank-cards-empty .empty-text {
    font-size: 15px;
    line-height: 1.6;
}

.bank-cards-title {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 12px;
    padding-left: 4px;
}

.bank-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* 银行卡样式 - 仿真实银行卡 */
.bank-card-item {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 12px;
    padding: 16px 20px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bank-card-item:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.bank-card-item.active {
    box-shadow: 0 0 0 3px #667eea, 0 8px 24px rgba(102, 126, 234, 0.3);
}

/* 银行卡芯片 */
.bank-card-chip {
    width: 36px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 50%, #ff8c00 100%);
    border-radius: 4px;
    position: relative;
    margin-bottom: 12px;
}

.bank-card-chip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
}

.bank-card-chip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(0, 0, 0, 0.2);
}

/* 银行卡持有者信息 */
.bank-card-owner {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

/* 银行卡号（虚拟） */
.bank-card-number {
    font-size: 11px;
    opacity: 0.6;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

/* 银行卡权限标签 */
.bank-card-permission {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
}

.bank-card-permission.can-use {
    background: rgba(52, 199, 89, 0.3);
    color: #5eff8a;
}

.bank-card-permission.view-only {
    background: rgba(255, 204, 0, 0.3);
    color: #ffdd55;
}

/* 银行卡底部余额（缩略） */
.bank-card-balance {
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-size: 14px;
    opacity: 0.8;
    font-weight: 500;
}

/* 账户详情卡片 */
.bank-detail-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.bank-detail-card .detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.bank-detail-card .detail-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.bank-detail-card .detail-header .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.bank-detail-card .detail-header .close-btn:hover {
    color: #666;
}

.bank-detail-card .detail-balance {
    text-align: center;
    padding: 24px 0;
}

.bank-detail-card .balance-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}

.bank-detail-card .balance-big {
    font-size: 48px;
    font-weight: 700;
    color: #333;
}

.bank-detail-card .balance-big span {
    font-size: 20px;
    font-weight: 400;
    color: #666;
    margin-left: 4px;
}

/* 账户详情操作按钮 */
.bank-detail-card .detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.bank-detail-card .detail-action-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.bank-detail-card .detail-action-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.bank-detail-card .detail-action-btn.primary:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.bank-detail-card .detail-action-btn.secondary {
    background: #f5f5f5;
    color: #666;
}

.bank-detail-card .detail-action-btn.secondary:hover {
    background: #eee;
}

.bank-detail-card .detail-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* 权限说明 */
.bank-detail-card .permission-note {
    margin-top: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
    text-align: center;
}

.bank-detail-card .permission-note.can-use {
    background: #e8f5e9;
    color: #2e7d32;
}

.bank-detail-card .permission-note.view-only {
    background: #fff8e1;
    color: #f57c00;
}

/* 背包界面 - 卡包分类样式 */
.inventory-category.cards-category {
    color: #667eea;
    border-left: 3px solid #667eea;
    padding-left: 10px;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.1), transparent);
}

/* 卡包物品样式 */
.inventory-item.cards-item {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

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

/* ========== 聊天气泡中的银行卡样式 ========== */
.bank-card-bubble {
    padding: 12px;
    min-width: 200px;
}

.bank-card-mini {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 10px;
    padding: 12px 14px;
    color: white;
    position: relative;
    overflow: hidden;
}

.bank-card-mini::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.card-chip-mini {
    width: 28px;
    height: 20px;
    background: linear-gradient(135deg, #f5af19 0%, #c49b0d 50%, #f5af19 100%);
    border-radius: 3px;
    margin-bottom: 10px;
    position: relative;
}

.card-chip-mini::before,
.card-chip-mini::after {
    content: '';
    position: absolute;
    background: rgba(0,0,0,0.2);
}

.card-chip-mini::before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.card-chip-mini::after {
    width: 1px;
    height: 100%;
    left: 50%;
}

.card-owner-mini {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    opacity: 0.95;
}

.card-permission-mini {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
}

.card-permission-mini.can-use {
    background: rgba(52, 199, 89, 0.3);
    color: #34c759;
}

.card-permission-mini.view-only {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.bank-card-status {
    text-align: center;
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.bank-card-status.new {
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.bank-card-status.upgrade {
    background: rgba(255, 149, 0, 0.15);
    color: #ff9500;
}

.bank-card-status.already {
    background: rgba(142, 142, 147, 0.15);
    color: #8e8e93;
}

.bank-card-message {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

/* ========== 调试悬浮球（Debug FAB）========== */
.debug-fab {
    position: fixed;
    z-index: 99999;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* 主按钮 */
.debug-fab-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}

.debug-fab-btn:active,
.debug-fab.dragging .debug-fab-btn {
    transform: scale(0.92);
    background: rgba(0, 0, 0, 0.8);
}

.debug-fab.menu-open .debug-fab-btn {
    background: #007aff;
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.4);
}

/* 展开菜单 */
.debug-fab-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 6px;
    min-width: 150px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 菜单在上方 */
.debug-fab-menu.above {
    bottom: calc(100% + 10px);
}

/* 菜单在下方 */
.debug-fab-menu.below {
    top: calc(100% + 10px);
}

.debug-fab-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

/* 菜单项 */
.debug-fab-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.12s ease;
    text-align: left;
    box-sizing: border-box;
}

.debug-fab-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.debug-fab-menu-item:active {
    background: rgba(0, 0, 0, 0.1);
}

.debug-fab-menu-item .menu-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.debug-fab-menu-item .menu-label {
    font-weight: 500;
    white-space: nowrap;
}

.debug-fab-menu-item.active {
    background: rgba(0, 122, 255, 0.1);
    color: #007aff;
}

/* 拖动时禁止选择和过渡 */
.debug-fab.dragging {
    cursor: grabbing;
}

.debug-fab.dragging .debug-fab-btn {
    transition: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .debug-fab-menu {
        background: rgba(40, 40, 45, 0.95);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .debug-fab-menu-item {
        color: #eee;
    }

    .debug-fab-menu-item:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .debug-fab-menu-item:active {
        background: rgba(255, 255, 255, 0.15);
    }

    .debug-fab-menu-item.active {
        background: rgba(0, 122, 255, 0.2);
        color: #5ac8fa;
    }
}

/* ========== 用户资料编辑弹窗 ========== */
.user-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-profile-modal.hidden {
    display: none;
}

.user-profile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.user-profile-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.user-profile-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.user-profile-close,
.user-profile-save {
    background: none;
    border: none;
    font-size: 16px;
    color: #007aff;
    cursor: pointer;
    padding: 4px 8px;
}

.user-profile-close {
    font-size: 24px;
    color: #999;
}

.user-profile-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
}

.user-profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.user-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}

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

.user-profile-avatar .avatar-placeholder {
    font-size: 32px;
    color: #999;
}

.user-profile-avatar-btn {
    background: none;
    border: none;
    color: #007aff;
    font-size: 14px;
    cursor: pointer;
}

.user-profile-field {
    margin-bottom: 20px;
}

.user-profile-field label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.user-profile-field input,
.user-profile-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.user-profile-field input:focus,
.user-profile-field textarea:focus {
    outline: none;
    border-color: #007aff;
}

.user-profile-field input[readonly] {
    background: #f5f5f5;
    color: #999;
}

.user-profile-field .field-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #999;
}

.user-profile-footer {
    padding: 16px;
    border-top: 1px solid #eee;
}

.user-profile-switch-btn {
    width: 100%;
    padding: 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    color: #999;
    cursor: not-allowed;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .user-profile-content {
        background: #1c1c1e;
    }

    .user-profile-header {
        border-bottom-color: #333;
    }

    .user-profile-header h2 {
        color: #fff;
    }

    .user-profile-close {
        color: #666;
    }

    .user-profile-field label {
        color: #999;
    }

    .user-profile-field input,
    .user-profile-field textarea {
        background: #2c2c2e;
        border-color: #333;
        color: #fff;
    }

    .user-profile-field input[readonly] {
        background: #1a1a1c;
        color: #666;
    }

    .user-profile-footer {
        border-top-color: #333;
    }

    .user-profile-switch-btn {
        background: #2c2c2e;
        color: #666;
    }
}

/* ========== 微信风格通知横幅 ========== */

#notification-banner-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    pointer-events: none;
    padding-top: env(safe-area-inset-top, 0);
}

.notification-banner {
    /* 位置布局 */
    margin: 8px 12px 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;

    /* 高级毛玻璃效果 */
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);

    /* 圆角 + 多层阴影 */
    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 0 0 0.5px rgba(255, 255, 255, 0.6);

    /* 细腻边框 */
    border: 0.5px solid rgba(255, 255, 255, 0.4);

    /* 初始状态：隐藏在顶部外 */
    transform: translateY(-120%);
    opacity: 0;

    /* 交互 */
    pointer-events: auto;
    cursor: pointer;

    /* iOS 风格动画 - 高级缓动 */
    transition:
        transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 显示状态 */
.notification-banner.show {
    transform: translateY(0);
    opacity: 1;
}

/* 隐藏动画 */
.notification-banner.hide {
    transform: translateY(-120%);
    opacity: 0;
}

/* 头像容器 */
.notification-banner-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.notification-banner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.notification-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 内容容器（名字 + 预览） */
.notification-banner-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 角色名字 */
.notification-banner-name {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 消息预览 */
.notification-banner-preview {
    font-size: 14px;
    line-height: 1.35;
    color: #6e6e73;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* 点击效果 - 微妙的缩放 */
.notification-banner:active {
    transform: translateY(0) scale(0.98);
    transition: transform 0.1s ease-out;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    .notification-banner {
        background: rgba(58, 58, 62, 0.82);
        border: 0.5px solid rgba(255, 255, 255, 0.12);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.35),
            inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    }

    .notification-banner-name {
        color: #f5f5f7;
    }

    .notification-banner-preview {
        color: #a1a1a6;
    }
}

/* 浅色模式强制覆盖 */
body.light-mode .notification-banner {
    background: rgba(255, 255, 255, 0.88);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
}

body.light-mode .notification-banner-name {
    color: #1d1d1f;
}

body.light-mode .notification-banner-preview {
    color: #6e6e73;
}

/* ============================================
   Global Chat Settings - Macaron Style
   ============================================ */

/* Macaron 配色变量 */
:root {
    --macaron-mint: #B5EAD7;
    --macaron-mint-dark: #9DDCC6;
    --macaron-blue: #C7CEEA;
    --macaron-blue-dark: #A8B4E0;
    --macaron-pink: #FF9AA2;
    --macaron-pink-dark: #E88A92;
    --macaron-orange: #FFDAC1;
    --macaron-orange-dark: #F0C8A8;
    --macaron-yellow: #FFFFD8;
    --macaron-purple: #E2D1F9;
    --cream-bg: #FAF8F5;
    --cream-card: rgba(255, 255, 255, 0.85);
    --cream-shadow: 0 1px 2px hsl(30 15% 40% / 0.04),
        0 2px 4px hsl(30 15% 40% / 0.04),
        0 4px 8px hsl(30 15% 40% / 0.04),
        0 8px 16px hsl(30 15% 40% / 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* 分组标题标签 */
.gs-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--macaron-purple) 0%, #D4C4E8 100%);
    color: #5B4B7A;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    margin-left: 8px;
}

/* Token 估算卡片 */
.gs-token-card {
    background: linear-gradient(135deg,
            rgba(181, 234, 215, 0.15) 0%,
            rgba(199, 206, 234, 0.15) 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(181, 234, 215, 0.3);
}

.gs-token-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--macaron-mint) 0%, var(--macaron-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.gs-token-info {
    flex: 1;
}

.gs-token-title {
    font-size: 13px;
    color: #8e8e93;
    margin-bottom: 2px;
}

.gs-token-value {
    font-size: 15px;
    font-weight: 600;
    color: #2D7A5E;
}

/* 提示卡片 */
.gs-hint-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 218, 193, 0.2);
    border-radius: 10px;
    border-left: 3px solid var(--macaron-orange);
}

.gs-hint-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--macaron-orange) 0%, var(--macaron-orange-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-hint-text {
    font-size: 13px;
    color: #8B5A2B;
    line-height: 1.5;
}

/* 现代下拉框 */
.gs-select-wrapper {
    position: relative;
    width: 100%;
}

.gs-select {
    width: 100%;
    padding: 14px 44px 14px 16px;
    border: none;
    border-radius: 14px;
    background: var(--cream-card);
    font-size: 15px;
    font-weight: 500;
    color: #1c1c1e;
    cursor: pointer;
    box-shadow: var(--cream-shadow);
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.2s ease;
    outline: none;
}

.gs-select:focus {
    box-shadow:
        var(--cream-shadow),
        0 0 0 3px rgba(181, 234, 215, 0.3);
}

.gs-select:hover {
    background: rgba(255, 255, 255, 0.95);
}

.gs-select-wrapper::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--macaron-mint-dark);
    pointer-events: none;
    transition: transform 0.2s ease;
}

/* 保存按钮 - 渐变动画 */
.gs-save-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--macaron-mint) 0%, var(--macaron-blue) 100%);
    color: #2D5A4A;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 12px rgba(181, 234, 215, 0.4),
        0 8px 24px rgba(199, 206, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gs-save-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    transition: left 0.5s ease;
}

.gs-save-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(181, 234, 215, 0.5),
        0 12px 32px rgba(199, 206, 234, 0.4);
}

.gs-save-btn:hover::before {
    left: 100%;
}

.gs-save-btn:active {
    transform: translateY(0) scale(0.98);
}

/* 操作按钮 */
.gs-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: var(--cream-card);
    cursor: pointer;
    box-shadow: var(--cream-shadow);
    transition: all 0.2s ease;
}

.gs-action-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(4px);
}

.gs-action-btn:active {
    transform: translateX(2px) scale(0.99);
}

.gs-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.gs-action-icon.mint {
    background: linear-gradient(135deg, var(--macaron-mint) 0%, var(--macaron-mint-dark) 100%);
}

.gs-action-icon.blue {
    background: linear-gradient(135deg, var(--macaron-blue) 0%, var(--macaron-blue-dark) 100%);
}

.gs-action-icon.pink {
    background: linear-gradient(135deg, var(--macaron-pink) 0%, var(--macaron-pink-dark) 100%);
}

.gs-action-icon.orange {
    background: linear-gradient(135deg, var(--macaron-orange) 0%, var(--macaron-orange-dark) 100%);
}

.gs-action-icon.purple {
    background: linear-gradient(135deg, var(--macaron-purple) 0%, #D4C4E8 100%);
}

.gs-action-content {
    flex: 1;
    text-align: left;
}

.gs-action-title {
    font-size: 15px;
    font-weight: 500;
    color: #1c1c1e;
}

.gs-action-desc {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 2px;
}

.gs-action-chevron {
    color: #c7c7cc;
    font-size: 18px;
}

/* API 状态指示器 */
.api-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(142, 142, 147, 0.12);
    color: #8e8e93;
}

.api-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8e8e93;
}

.api-status.success {
    background: rgba(52, 199, 89, 0.12);
    color: #2D7A5E;
}

.api-status.success .api-status-dot {
    background: #34c759;
}

.api-status.error {
    background: rgba(255, 59, 48, 0.12);
    color: #d70015;
}

.api-status.error .api-status-dot {
    background: #ff3b30;
}

/* Macaron 风格历史深度输入框 */
.gs-history-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.gs-history-input {
    width: 100px;
    padding: 12px 16px;
    border: none;
    border-radius: 14px;
    background: var(--cream-card);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #2D7A5E;
    box-shadow: var(--cream-shadow);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    transition: all 0.2s ease;
    outline: none;
}

.gs-history-input:focus {
    box-shadow:
        var(--cream-shadow),
        0 0 0 3px rgba(181, 234, 215, 0.3);
}

.gs-history-input::-webkit-inner-spin-button,
.gs-history-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.gs-history-unit {
    font-size: 15px;
    font-weight: 500;
    color: #8e8e93;
}

.gs-history-hint {
    font-size: 13px;
    color: #8e8e93;
    margin-left: auto;
}

/* 预设选择器样式 */
.gs-preset-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gs-preset-select {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: var(--cream-card);
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1e;
    box-shadow: var(--cream-shadow);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    min-height: 44px;
}

.gs-preset-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gs-preset-btn.add {
    background: linear-gradient(135deg, var(--macaron-mint) 0%, var(--macaron-blue) 100%);
    color: white;
}

.gs-preset-btn.delete {
    background: linear-gradient(135deg, var(--macaron-pink) 0%, var(--macaron-pink-dark) 100%);
    color: white;
}

.gs-preset-btn:hover {
    transform: scale(1.05);
}

.gs-preset-btn:active {
    transform: scale(0.95);
}

/* API 表单输入框 */
.gs-form-input {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: var(--cream-card);
    font-size: 14px;
    color: #1c1c1e;
    box-shadow: var(--cream-shadow);
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.gs-form-input:focus {
    box-shadow:
        var(--cream-shadow),
        0 0 0 3px rgba(181, 234, 215, 0.3);
}

.gs-form-input::placeholder {
    color: #c7c7cc;
}

.gs-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #8e8e93;
    margin-bottom: 8px;
}

/* 功能按钮行 */
.gs-btn-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gs-fetch-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--macaron-mint) 0%, var(--macaron-mint-dark) 100%);
    color: #2D5A4A;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.gs-fetch-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(181, 234, 215, 0.4);
}

.gs-test-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--macaron-blue) 0%, var(--macaron-blue-dark) 100%);
    color: #3D4A7A;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.gs-test-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 206, 234, 0.4);
}

/* 夜间模式适配 - Global Chat Settings */
body.dark-mode .gs-token-card,
body.night .gs-token-card {
    background: linear-gradient(135deg,
            rgba(109, 191, 155, 0.1) 0%,
            rgba(168, 180, 224, 0.1) 100%);
    border-color: rgba(109, 191, 155, 0.2);
}

body.dark-mode .gs-token-value,
body.night .gs-token-value {
    color: #B5EAD7;
}

body.dark-mode .gs-hint-card,
body.night .gs-hint-card {
    background: rgba(204, 139, 101, 0.15);
}

body.dark-mode .gs-hint-text,
body.night .gs-hint-text {
    color: #FFDAC1;
}

body.dark-mode .gs-select,
body.night .gs-select {
    background: rgba(38, 38, 40, 0.9);
    color: #f5f5f7;
}

body.dark-mode .gs-action-btn,
body.night .gs-action-btn {
    background: rgba(38, 38, 40, 0.9);
}

body.dark-mode .gs-action-title,
body.night .gs-action-title {
    color: #f5f5f7;
}

body.dark-mode .gs-save-btn,
body.night .gs-save-btn {
    background: linear-gradient(135deg, rgba(109, 191, 155, 0.85) 0%, rgba(168, 180, 224, 0.85) 100%);
    color: #E8FFF4;
}

body.dark-mode .gs-history-input,
body.night .gs-history-input {
    background: rgba(50, 50, 55, 0.9);
    color: #d0d0d5;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-mode .gs-form-input,
body.night .gs-form-input {
    background: rgba(50, 50, 55, 0.9);
    color: #d0d0d5;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-mode .gs-preset-select,
body.night .gs-preset-select {
    background: rgba(50, 50, 55, 0.9);
    color: #d0d0d5;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* 夜间模式补充 - gs-* 组件 */
body.dark-mode .gs-section-badge,
body.night .gs-section-badge {
    background: linear-gradient(135deg, rgba(180, 160, 200, 0.6) 0%, rgba(160, 140, 180, 0.6) 100%);
    color: #E2D1F9;
}

body.dark-mode .gs-token-icon,
body.night .gs-token-icon {
    background: linear-gradient(135deg, rgba(109, 191, 155, 0.8) 0%, rgba(168, 180, 224, 0.8) 100%);
}

body.dark-mode .gs-token-title,
body.night .gs-token-title {
    color: #86868b;
}

body.dark-mode .gs-hint-icon,
body.night .gs-hint-icon {
    background: linear-gradient(135deg, rgba(204, 162, 129, 0.85) 0%, rgba(180, 140, 110, 0.85) 100%);
}

body.dark-mode .gs-select-wrapper,
body.night .gs-select-wrapper {
    background: transparent;
}

body.dark-mode .gs-select-wrapper::after,
body.night .gs-select-wrapper::after {
    border-color: #86868b;
}

body.dark-mode .gs-history-unit,
body.night .gs-history-unit {
    color: #86868b;
}

body.dark-mode .gs-history-hint,
body.night .gs-history-hint {
    color: #666;
}

body.dark-mode .gs-preset-row,
body.night .gs-preset-row {
    background: transparent;
}

body.dark-mode .gs-preset-btn,
body.night .gs-preset-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.dark-mode .gs-preset-btn:hover,
body.night .gs-preset-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .gs-preset-btn.add,
body.night .gs-preset-btn.add {
    background: linear-gradient(135deg, rgba(109, 191, 155, 0.7) 0%, rgba(90, 168, 136, 0.7) 100%);
    border-color: transparent;
    color: #f5f5f7;
}

body.dark-mode .gs-preset-btn.delete,
body.night .gs-preset-btn.delete {
    background: linear-gradient(135deg, rgba(216, 123, 130, 0.7) 0%, rgba(198, 106, 114, 0.7) 100%);
    border-color: transparent;
    color: #f5f5f7;
}

body.dark-mode .gs-form-label,
body.night .gs-form-label {
    color: #a0a0a0;
}

body.dark-mode .gs-fetch-btn,
body.night .gs-fetch-btn {
    background: linear-gradient(135deg, rgba(168, 180, 224, 0.85) 0%, rgba(148, 160, 200, 0.85) 100%);
    color: #f5f5f7;
}

body.dark-mode .gs-test-btn,
body.night .gs-test-btn {
    background: linear-gradient(135deg, rgba(109, 191, 155, 0.85) 0%, rgba(90, 168, 136, 0.85) 100%);
    color: #f5f5f7;
}

body.dark-mode .gs-action-desc,
body.night .gs-action-desc {
    color: #86868b;
}

body.dark-mode .gs-action-chevron,
body.night .gs-action-chevron {
    color: #555;
}

body.dark-mode .gs-form-input::placeholder,
body.night .gs-form-input::placeholder {
    color: #666;
}

body.dark-mode .gs-history-input::placeholder,
body.night .gs-history-input::placeholder {
    color: #666;
}

body.dark-mode .gs-select option,
body.night .gs-select option {
    background: #2a2a2c;
    color: #f5f5f7;
}

body.dark-mode .gs-preset-select option,
body.night .gs-preset-select option {
    background: #2a2a2c;
    color: #f5f5f7;
}

/* ========================================
   预设管理器 - Macaron 简洁可爱风格
   ======================================== */

/* CSS 变量 */
.preset-manager {
    --pm-bg: #FBF9F7;
    --pm-card: #FFFFFF;
    --pm-card-hover: #FEFEFE;
    --pm-border: rgba(0, 0, 0, 0.06);
    --pm-primary: #7EC4A8;
    --pm-primary-light: #E8F5EF;
    --pm-secondary: #B8A9C9;
    --pm-secondary-light: #F3EFF7;
    --pm-accent: #F5B895;
    --pm-accent-light: #FEF4ED;
    --pm-text: #4A4A4A;
    --pm-text-secondary: #888888;
    --pm-text-muted: #AAAAAA;
    --pm-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --pm-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
    --pm-radius: 16px;
    --pm-radius-sm: 10px;
}

/* 暗黑模式变量 */
body.dark-mode .preset-manager,
body.night .preset-manager {
    --pm-bg: #1C1C1E;
    --pm-card: #2C2C2E;
    --pm-card-hover: #3A3A3C;
    --pm-border: rgba(255, 255, 255, 0.08);
    --pm-text: #E5E5E7;
    --pm-text-secondary: #98989D;
    --pm-text-muted: #636366;
    --pm-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --pm-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
    --pm-primary-light: rgba(126, 196, 168, 0.15);
    --pm-secondary-light: rgba(184, 169, 201, 0.15);
    --pm-accent-light: rgba(245, 184, 149, 0.15);
}

/* 容器 */
.preset-manager {
    background: var(--pm-bg);
    min-height: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 顶部工具栏 */
.pm-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pm-border);
}

.pm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pm-text);
}

/* 创建按钮 */
.pm-create-btn {
    width: 100%;
    padding: 14px;
    margin: 16px 0;
    border: 2px dashed var(--pm-border);
    border-radius: var(--pm-radius);
    background: transparent;
    color: var(--pm-text-secondary);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.pm-create-btn:hover {
    border-color: var(--pm-primary);
    color: var(--pm-primary);
    background: var(--pm-primary-light);
}

.pm-create-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

/* 列表容器 */
.pm-list {
    padding: 0 16px 16px;
    padding-bottom: 100px; /* 底部留出空间便于滚动 */
}

/* 预设卡片 */
.pm-card {
    background: var(--pm-card);
    border-radius: var(--pm-radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--pm-shadow);
    transition: all 0.2s;
    border: 2px solid transparent;
    position: relative;
}

.pm-card:hover {
    box-shadow: var(--pm-shadow-hover);
    transform: translateY(-2px);
}

.pm-card.active {
    border-color: var(--pm-primary);
    background: linear-gradient(135deg, var(--pm-card) 0%, var(--pm-primary-light) 100%);
    box-shadow:
        0 0 0 1px var(--pm-primary),
        0 0 20px rgba(126, 196, 168, 0.25),
        0 4px 16px rgba(126, 196, 168, 0.15);
}

/* 激活标记小点 */
.pm-card.active::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pm-primary);
    box-shadow: 0 0 8px var(--pm-primary);
    animation: pm-pulse-glow 2s ease-in-out infinite;
}

@keyframes pm-pulse-glow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* 卡片顶部 */
.pm-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

/* SVG 图标容器 */
.pm-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pm-card-icon.creative {
    background: linear-gradient(135deg, #FFE5D0 0%, #FFD4B8 100%);
}

.pm-card-icon.balanced {
    background: linear-gradient(135deg, #E8D5F0 0%, #D4C4E0 100%);
}

.pm-card-icon.precise {
    background: linear-gradient(135deg, #D5EDE4 0%, #C4E0D8 100%);
}

.pm-card-icon.default {
    background: linear-gradient(135deg, #E8E8E8 0%, #D8D8D8 100%);
}

.pm-card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
    fill: none;
}

.pm-card-icon.creative svg { stroke: #E08850; }
.pm-card-icon.balanced svg { stroke: #9070A0; }
.pm-card-icon.precise svg { stroke: #5A9A80; }
.pm-card-icon.default svg { stroke: #888888; }

/* 卡片信息 */
.pm-card-info {
    flex: 1;
    min-width: 0;
}

.pm-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--pm-text);
    margin-bottom: 4px;
}

.pm-card-desc {
    font-size: 13px;
    color: var(--pm-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 激活徽章 */
.pm-active-badge {
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--pm-primary);
    color: white;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pm-active-badge svg {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 3;
    fill: none;
}

/* 参数标签 */
.pm-params {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.pm-param {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--pm-radius-sm);
    font-size: 13px;
    font-weight: 500;
}

.pm-param svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    fill: none;
}

.pm-param.temp {
    background: var(--pm-accent-light);
    color: #D08040;
}
.pm-param.temp svg { stroke: #D08040; }

.pm-param.length {
    background: var(--pm-secondary-light);
    color: #8060A0;
}
.pm-param.length svg { stroke: #8060A0; }

.pm-param.sampling {
    background: var(--pm-primary-light);
    color: #509070;
}
.pm-param.sampling svg { stroke: #509070; }

/* 操作按钮 */
.pm-card-actions {
    display: flex;
    gap: 8px;
}

.pm-action-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: var(--pm-radius-sm);
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.pm-action-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    fill: none;
}

.pm-action-btn.use {
    background: var(--pm-primary);
    color: white;
}

.pm-action-btn.use:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.pm-action-btn.use svg { stroke: white; }

.pm-action-btn.edit {
    background: var(--pm-bg);
    color: var(--pm-text-secondary);
}

.pm-action-btn.edit:hover {
    background: var(--pm-secondary-light);
    color: var(--pm-secondary);
}

.pm-action-btn.edit svg { stroke: currentColor; }

.pm-action-btn.delete {
    background: transparent;
    color: var(--pm-text-muted);
    flex: 0;
    padding: 10px;
}

.pm-action-btn.delete:hover {
    background: rgba(220, 80, 80, 0.1);
    color: #D05050;
}

.pm-action-btn.delete svg { stroke: currentColor; }

/* 空状态 */
.pm-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--pm-text-muted);
}

.pm-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    opacity: 0.3;
}

.pm-empty-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.pm-empty-text {
    font-size: 15px;
}

/* ===== 编辑器视图 ===== */
.pm-editor {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pm-editor-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--pm-bg);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--pm-border);
}

.pm-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: none;
    background: var(--pm-card);
    box-shadow: var(--pm-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pm-back-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--pm-shadow-hover);
}

.pm-back-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--pm-text-secondary);
    stroke-width: 2;
    fill: none;
}

.pm-editor-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--pm-text);
}

/* 编辑器内容 */
.pm-editor-content {
    flex: 1;
    overflow-y: visible;
    padding: 0 20px 20px;
}

/* 区块 */
.pm-section {
    margin-bottom: 24px;
}

.pm-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pm-border);
}

/* 输入框 */
.pm-input-group {
    margin-bottom: 16px;
}

.pm-input-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--pm-text-secondary);
    margin-bottom: 8px;
    display: block;
}

.pm-input-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-card);
    color: var(--pm-text);
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
    box-sizing: border-box;
}

.pm-input-field:focus {
    outline: none;
    border-color: var(--pm-primary);
    box-shadow: 0 0 0 3px var(--pm-primary-light);
}

.pm-input-field::placeholder {
    color: var(--pm-text-muted);
}

.pm-textarea {
    resize: vertical;
    min-height: 80px;
}

.pm-input-hint {
    font-size: 12px;
    color: var(--pm-text-muted);
    margin-top: 6px;
}

/* 滑块卡片 */
.pm-slider-card {
    background: var(--pm-card);
    border-radius: var(--pm-radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--pm-shadow);
}

.pm-slider-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.pm-slider-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-slider-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pm-slider-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    fill: none;
}

.pm-slider-icon.temp {
    background: var(--pm-accent-light);
}
.pm-slider-icon.temp svg { stroke: #D08040; }

.pm-slider-icon.length {
    background: var(--pm-secondary-light);
}
.pm-slider-icon.length svg { stroke: #8060A0; }

.pm-slider-icon.sampling {
    background: var(--pm-primary-light);
}
.pm-slider-icon.sampling svg { stroke: #509070; }

.pm-slider-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--pm-text);
}

.pm-slider-value {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--pm-bg);
    color: var(--pm-text);
    font-size: 15px;
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', monospace;
    min-width: 50px;
    text-align: center;
}

/* 滑块 */
.pm-slider-track {
    position: relative;
    height: 6px;
    background: var(--pm-bg);
    border-radius: 3px;
    margin-bottom: 10px;
}

.pm-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--pm-primary);
    transition: width 0.1s;
}

.pm-slider-input {
    position: absolute;
    left: 0;
    top: -8px;
    width: 100%;
    height: 22px;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.pm-slider-thumb {
    position: absolute;
    top: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    transition: transform 0.1s;
}

.pm-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--pm-text-muted);
}

/* 快捷按钮 */
.pm-quick-btns {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.pm-quick-btn {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--pm-border);
    background: var(--pm-bg);
    color: var(--pm-text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.pm-quick-btn:hover {
    border-color: var(--pm-primary);
    color: var(--pm-primary);
}

.pm-quick-btn.active {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
    color: white;
}

/* 数字输入 */
.pm-number-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-number-field {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-card);
    color: var(--pm-text);
    font-size: 15px;
    font-family: inherit;
    text-align: center;
}

.pm-number-field:focus {
    outline: none;
    border-color: var(--pm-primary);
    box-shadow: 0 0 0 3px var(--pm-primary-light);
}

/* 开关 */
.pm-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--pm-card);
    border-radius: var(--pm-radius-sm);
    margin-bottom: 8px;
    box-shadow: var(--pm-shadow);
}

.pm-toggle-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pm-toggle-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pm-toggle-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    fill: none;
}

.pm-toggle-icon.stream {
    background: var(--pm-primary-light);
}
.pm-toggle-icon.stream svg { stroke: #509070; }

.pm-toggle-icon.think {
    background: rgba(242, 196, 196, 0.3);
}
.pm-toggle-icon.think svg { stroke: #C07070; }

.pm-toggle-icon.group {
    background: var(--pm-secondary-light);
}
.pm-toggle-icon.group svg { stroke: #8060A0; }

.pm-toggle-text {
    flex: 1;
}

.pm-toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--pm-text);
}

.pm-toggle-hint {
    font-size: 12px;
    color: var(--pm-text-muted);
    margin-top: 2px;
}

/* iOS 风格开关 */
.pm-toggle-switch {
    width: 50px;
    height: 30px;
    border-radius: 15px;
    background: var(--pm-border);
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.pm-toggle-switch.on {
    background: var(--pm-primary);
}

.pm-toggle-switch .pm-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.pm-toggle-switch.on .pm-toggle-knob {
    left: 22px;
}

.pm-toggle-switch.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 选择器 */
.pm-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-card);
    color: var(--pm-text);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.pm-select:focus {
    outline: none;
    border-color: var(--pm-primary);
}

/* 提示框 */
.pm-hint-box {
    margin: 8px 0;
    padding: 12px;
    background: #e7f3ff;
    border-radius: var(--pm-radius-sm);
    font-size: 13px;
    color: #4a6fa5;
}

body.dark-mode .pm-hint-box,
body.night .pm-hint-box {
    background: rgba(74, 111, 165, 0.15);
    color: #8ab4f8;
}

/* 底部操作栏 */
.pm-editor-footer {
    position: relative;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--pm-bg);
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.pm-footer-btn {
    flex: 1;
    padding: 14px;
    border-radius: var(--pm-radius-sm);
    border: none;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.pm-footer-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    fill: none;
}

.pm-footer-btn.cancel {
    background: var(--pm-card);
    color: var(--pm-text-secondary);
    box-shadow: var(--pm-shadow);
}

.pm-footer-btn.cancel:hover {
    background: var(--pm-card-hover);
}

.pm-footer-btn.save {
    background: var(--pm-primary);
    color: white;
}

.pm-footer-btn.save:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.pm-footer-btn.save svg { stroke: white; }

/* ===== 暗黑模式适配 ===== */
body.dark-mode .pm-card-icon.creative,
body.night .pm-card-icon.creative {
    background: linear-gradient(135deg, rgba(224, 136, 80, 0.2) 0%, rgba(224, 136, 80, 0.3) 100%);
}

body.dark-mode .pm-card-icon.balanced,
body.night .pm-card-icon.balanced {
    background: linear-gradient(135deg, rgba(144, 112, 160, 0.2) 0%, rgba(144, 112, 160, 0.3) 100%);
}

body.dark-mode .pm-card-icon.precise,
body.night .pm-card-icon.precise {
    background: linear-gradient(135deg, rgba(90, 154, 128, 0.2) 0%, rgba(90, 154, 128, 0.3) 100%);
}

body.dark-mode .pm-card-icon.default,
body.night .pm-card-icon.default {
    background: linear-gradient(135deg, rgba(136, 136, 136, 0.2) 0%, rgba(136, 136, 136, 0.3) 100%);
}

body.dark-mode .pm-select option,
body.night .pm-select option {
    background: #2a2a2c;
    color: #f5f5f7;
}