/* ========== iOS 26 Liquid Glass Theme Adaptation ========== */

/* General Liquid Glass Utilities */
.liquid-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Action Panel (New Structure) */
.chat-action-panel {
    /* Override existing styles */
    background-color: transparent !important;
    padding: 20px 0 !important;
    border-radius: 32px !important;

    /* Control Center Style - 使用 fixed 定位，相对于视口 */
    position: fixed !important;
    /* PWA 模式下需要更高的 bottom 值，留出输入框+安全区域空间 */
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
    /* 限制最大宽度，在大屏幕上居中 */
    max-width: 390px !important;
    margin: 0 auto !important;
    max-height: none !important;

    /* 控制中心玻璃质感 */
    background: rgba(245, 245, 245, 0.65) !important;
    backdrop-filter: blur(50px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255,255,255,0.2) !important;

    /* 关闭状态：从下方滑入 */
    transform: translateY(120%) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    pointer-events: none;
    z-index: 1000 !important; /* 高于输入区域 */
    overflow: hidden !important;
}

.chat-action-panel.open {
    max-height: none !important; /* Override old style */
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Action Pages & Grid */
.action-pages {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px;
}
.action-pages::-webkit-scrollbar { display: none; }

.action-page {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    padding: 0 20px;
    box-sizing: border-box;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 12px;
}

/* Action Items (Replacements for .action-panel-item) */
.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.action-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.action-item:active .action-icon {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 1);
}

.action-icon svg {
    width: 28px;
    height: 28px;
    color: #333;
    stroke-width: 2;
    transition: color 0.2s;
}

.action-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Page Indicators */
.page-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.page-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    transition: all 0.3s;
}
.page-dot.active {
    background: #007AFF;
    width: 20px;
    border-radius: 4px;
}

/* Sticker Panel Adaptation */
.sticker-panel {
    /* Floating Glass Panel - 使用 fixed 定位 */
    position: fixed !important;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    height: 350px !important;
    max-height: 50vh !important;
    border-radius: 32px !important;
    
    background: rgba(245, 245, 245, 0.85) !important; /* Slightly more opaque than action panel */
    backdrop-filter: blur(50px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255,255,255,0.2) !important;
    
    z-index: 1001 !important; /* Above action panel */
    /* display logic handled by JS (flex/none) */
    flex-direction: column;
    overflow: hidden !important;
}

/* Tabs in Sticker Panel */
.sticker-panel-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 12px 16px !important;
}

.sticker-tab {
    background: rgba(255,255,255,0.5) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    color: #333 !important;
    border-radius: 14px !important;
    padding: 6px 14px !important;
}
.sticker-tab.active {
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* Sticker Grid */
.sticker-grid {
    padding: 16px !important;
    gap: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}
.sticker-item {
    border-radius: 16px !important;
    border: none !important;
    background: rgba(255,255,255,0.6) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    position: relative !important;
    width: 100% !important;
    padding-bottom: 100% !important;  /* 这个技巧强制正方形 */
    height: 0 !important;
    overflow: hidden !important;
}
.sticker-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Sticker Search Input */
.sticker-panel-search input {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
    color: #333 !important;
}
.sticker-panel-search input:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 2px rgba(0,122,255,0.2) !important;
}

/* Sticker Manager Modal (Glass Sheet) */
.sticker-manager-container {
    background: rgba(245, 245, 245, 0.75) !important;
    backdrop-filter: blur(50px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
    border-radius: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
    width: 90% !important;
    max-width: 440px !important;
    max-height: 80vh !important;
    overflow: hidden !important;
    animation: modalFloatIn 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 弹窗动画 */
@keyframes modalFloatIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.sticker-manager-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 20px 24px !important;
}

.sticker-manager-header h2 {
    font-weight: 600 !important;
    font-size: 20px !important;
    color: #1d1d1f !important;
    letter-spacing: -0.5px !important;
}

.sticker-manager-tabs {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 10px 20px !important;
    gap: 10px !important;
}

.sticker-manager-tab.active {
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: scale(1.02);
}

/* Modal Overlay (Shared) */
.modal-overlay {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.3s ease;
}

/* Sticker Manager Input Styles */
.sticker-add-section input[type="text"],
.sticker-add-section textarea,
.sticker-manager-filter input,
.sticker-manager-filter select {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 12px !important;
}

/* 关闭按钮 */
.sticker-manager-close {
    color: rgba(0, 0, 0, 0.4) !important;
    background: rgba(0,0,0,0.05) !important;
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    transition: all 0.2s;
}
.sticker-manager-close:hover {
    background: rgba(0,0,0,0.1) !important;
    color: #000 !important;
}

/* 标签栏 - 胶囊风格 */
.sticker-manager-tab {
    border-radius: 20px !important;
    padding: 8px 16px !important;
    border: none !important;
    background: transparent !important;
    color: rgba(0, 0, 0, 0.5) !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* ========== 上传区域 (Glowing Dash) ========== */
.sticker-upload-area {
    border: 2px dashed rgba(0, 122, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 20px !important;
    padding: 30px 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: pointer !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

/* 悬停 / 拖拽激活状态 */
.sticker-upload-area:hover,
.sticker-upload-area.dragover {
    border-color: #007aff !important;
    background: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
    
    /* 呼吸发光效果 */
    box-shadow: 
        0 0 0 4px rgba(0, 122, 255, 0.1),
        0 0 20px rgba(0, 122, 255, 0.2),
        inset 0 0 10px rgba(0, 122, 255, 0.05) !important;
    
    transform: scale(1.02);
}

.sticker-upload-area svg {
    color: inherit !important;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

.sticker-upload-area:hover svg {
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 5px 10px rgba(0, 122, 255, 0.3));
}

/* 上传提示文字 */
.sticker-upload-area p {
    font-weight: 500 !important;
    margin-top: 10px !important;
}

.sticker-upload-area .upload-hint {
    font-size: 12px !important;
    opacity: 0.7 !important;
    font-weight: 400 !important;
}

/* ========== 极简主义重构：���置界面 (Pure Liquid) ========== */

/* 1. 全屏容器：统一的高级磨砂背景 */
#chat-settings-screen {
    /* 使用极高模糊抹平背景，只保留色调 */
    background: rgba(245, 245, 245, 0.4) !important;
    backdrop-filter: blur(60px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(60px) saturate(150%) !important;
}

/* 内容区域限制宽度，防止在大屏拉伸 */
.chat-settings-content {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 20px 20px 80px !important; /* 底部留白 */
}

/* 2. 顶部导航：隐形化 */
.chat-settings-header {
    background: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.chat-settings-header h2 {
    font-weight: 600 !important;
    font-size: 18px !important;
    color: #000 !important;
    opacity: 0.8;
}

/* 3. 标签页：iOS 分段控制器风格 (Segmented Control) */
.chat-settings-tabs {
    background: rgba(118, 118, 128, 0.12) !important; /* iOS 灰色槽 */
    border-radius: 9px !important; /* iOS 标准圆角 */
    padding: 2px !important;
    border: none !important;
    margin: 0 20px 20px !important;
    height: 36px !important;
    display: flex !important;
    backdrop-filter: none !important;
}

.chat-setting-tab {
    flex: 1 !important;
    border-radius: 7px !important; /* 略小于容器 */
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0.6;
}

.chat-setting-tab:hover {
    background: transparent !important;
    opacity: 1;
}

.chat-setting-tab.active {
    background: #fff !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04) !important;
    color: #000 !important;
    opacity: 1;
    transform: none !important; /* 去掉缩放 */
}

/* 4. 分组卡片：通透的大白卡片 */
.chat-setting-group {
    background: rgba(255, 255, 255, 0.55) !important; /* 更通透的白 */
    border-radius: 16px !important; /* 更克制的圆角 */
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: none !important; /* 去掉阴影，平面化 */
    border: none !important; /* 去掉描边 */
}

.chat-setting-group h3 {
    font-size: 13px !important;
    color: rgba(60, 60, 67, 0.6) !important; /* iOS次级文本色 */
    margin-bottom: 12px !important;
    font-weight: 400 !important;
    text-transform: none !important; /* 不强制大写 */
    letter-spacing: 0 !important;
}

/* 5. 列表项：更紧凑 */
.chat-setting-item {
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding-bottom: 20px !important;
}
.chat-setting-item:last-child {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.chat-setting-label {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #000 !important;
    margin-bottom: 8px !important;
}

.chat-setting-description {
    font-size: 13px !important;
    color: rgba(60, 60, 67, 0.6) !important;
    line-height: 1.4 !important;
}

/* 6. 输入框：极简无边框 */
.chat-setting-input, 
.chat-setting-textarea {
    background: rgba(0, 0, 0, 0.05) !important; /* 浅灰背景 */
    border: none !important; /* 去边框 */
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 16px !important; /* 更大的字号 */
    color: #000 !important;
    box-shadow: none !important;
}

.chat-setting-input:focus, 
.chat-setting-textarea:focus {
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 7. 按钮：主要按钮与次级按钮 */
.save-chat-settings-btn {
    background: #007AFF !important; /* 纯正 iOS 蓝 */
    border-radius: 12px !important;
    padding: 14px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}
.save-chat-settings-btn:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
}

.avatar-upload-btn {
    background: rgba(0, 122, 255, 0.1) !important; /* 浅蓝底 */
    color: #007aff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
}

/* 8. 头像预览：干净 */
.avatar-preview {
    border: none !important;
    box-shadow: none !important;
    background: #f2f2f7 !important;
}

/* 9. 滑块 */
.chat-setting-slider,
.history-depth-slider {
    height: 4px !important;
    background: rgba(0,0,0,0.1) !important;
}
.chat-setting-slider::-webkit-slider-thumb,
.history-depth-slider::-webkit-slider-thumb {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    border: none !important;
    width: 28px !important;
    height: 28px !important;
}

/* ========================================== */
/* iOS 液态玻璃聊天界面 (Liquid Glass Chat)   */
/* 严格按照示例文件 4-liquid-glass-demo.html   */
/* ========================================== */

/*
 * 重要说明：此样式尊重用户美化设置
 * 不覆盖以下属性（由JS内联样式控制）：
 * - background-color (气泡颜色)
 * - color (字体颜色)
 * - border-radius (气泡圆角)
 * - font-size (字体大小)
 * - line-height (行高)
 */

/* ========== 1. 全屏流体渐变背景 ========== */

[data-liaoliao-theme="ios"] #chat-screen {
    /* iOS 26 梦幻流体背景 */
    background:
        radial-gradient(circle at 0% 0%, rgba(100, 180, 255, 0.8), transparent 60%),
        radial-gradient(circle at 100% 0%, rgba(200, 150, 255, 0.8), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(100, 255, 200, 0.6), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(100, 150, 255, 0.6), transparent 60%),
        #f0f4f8 !important;
    background-attachment: fixed !important;
    background-size: 200% 200% !important;
    animation: fluidBg 20s ease infinite alternate !important;
    position: relative !important;
    overflow: hidden !important;
}

@keyframes fluidBg {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* 有自定义背景时覆盖 */
[data-liaoliao-theme="ios"] #chat-screen.has-custom-bg {
    animation: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ========== 2. 顶部导航 - 完全透明 ========== */

[data-liaoliao-theme="ios"] .chat-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 16px 20px 16px !important;
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    /* 完全透明背景 + 轻微模糊 */
    background: transparent !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 10 !important;

    /* 文字阴影，防止背景过亮时看不清字 */
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5) !important;
}

/* 头部按钮 - 水珠拟态风格 (Water Droplet) */
[data-liaoliao-theme="ios"] .chat-header .back-btn,
[data-liaoliao-theme="ios"] .chat-header .chat-menu-btn,
[data-liaoliao-theme="ios"] .chat-header .chat-settings-btn,
[data-liaoliao-theme="ios"] .chat-header .header-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

    /* 水珠拟态：极度通透 */
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    /* 极细微边界 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    /* 关键：通过光影塑造水珠体积感 */
    box-shadow:
        /* 外部柔和投影 */
        0 8px 20px rgba(0, 0, 0, 0.1),
        /* 顶部强烈高光 (模拟光源) */
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        /* 底部环境反光 */
        inset 0 -1px 0 rgba(255, 255, 255, 0.2),
        /* 整体内部通透光泽 */
        inset 0 0 15px rgba(255, 255, 255, 0.15) !important;

    color: #1d1d1f !important;
}

[data-liaoliao-theme="ios"] .chat-header .back-btn:hover,
[data-liaoliao-theme="ios"] .chat-header .chat-menu-btn:hover,
[data-liaoliao-theme="ios"] .chat-header .chat-settings-btn:hover,
[data-liaoliao-theme="ios"] .chat-header .header-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.05) !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
}

[data-liaoliao-theme="ios"] .chat-header .back-btn:active,
[data-liaoliao-theme="ios"] .chat-header .chat-menu-btn:active,
[data-liaoliao-theme="ios"] .chat-header .chat-settings-btn:active,
[data-liaoliao-theme="ios"] .chat-header .header-btn:active {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

[data-liaoliao-theme="ios"] .chat-header .back-btn svg,
[data-liaoliao-theme="ios"] .chat-header .chat-menu-btn svg,
[data-liaoliao-theme="ios"] .chat-header .chat-settings-btn svg,
[data-liaoliao-theme="ios"] .chat-header .header-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
    filter: none !important;
}

/* 头部标题区域 - 水平居中 */
[data-liaoliao-theme="ios"] .chat-header .chat-info,
[data-liaoliao-theme="ios"] .chat-header #chat-header-title-wrapper {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

[data-liaoliao-theme="ios"] .chat-header .chat-title,
[data-liaoliao-theme="ios"] .chat-header .chat-name {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.5px !important;
}

/* 在线状态标签 */
[data-liaoliao-theme="ios"] .chat-header .chat-status,
[data-liaoliao-theme="ios"] .chat-header .online-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: rgba(60, 60, 67, 0.8) !important;
    font-weight: 500 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

[data-liaoliao-theme="ios"] .chat-header .status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    /* 默认在线绿色 */
    background: #34C759 !important;
    box-shadow: 0 0 8px #34C759 !important;
    transition: all 0.3s ease !important;
}

/* 不同状态的颜色和光晕 */
[data-liaoliao-theme="ios"] .chat-header .status-online .status-dot {
    background: #34C759 !important;
    box-shadow: 0 0 8px #34C759, 0 0 16px rgba(52, 199, 89, 0.4) !important;
}

[data-liaoliao-theme="ios"] .chat-header .status-typing .status-dot {
    background: #007AFF !important;
    box-shadow: 0 0 8px #007AFF, 0 0 16px rgba(0, 122, 255, 0.4) !important;
    animation: pulse-typing 1.2s ease-in-out infinite !important;
}

[data-liaoliao-theme="ios"] .chat-header .status-busy .status-dot {
    background: #FF9500 !important;
    box-shadow: 0 0 8px #FF9500, 0 0 16px rgba(255, 149, 0, 0.4) !important;
}

[data-liaoliao-theme="ios"] .chat-header .status-away .status-dot {
    background: #FFCC00 !important;
    box-shadow: 0 0 8px #FFCC00, 0 0 16px rgba(255, 204, 0, 0.4) !important;
}

[data-liaoliao-theme="ios"] .chat-header .status-sleeping .status-dot {
    background: #AF52DE !important;
    box-shadow: 0 0 8px #AF52DE, 0 0 16px rgba(175, 82, 222, 0.4) !important;
}

[data-liaoliao-theme="ios"] .chat-header .status-offline .status-dot {
    background: #8E8E93 !important;
    box-shadow: 0 0 4px #8E8E93 !important;
}

/* 输入中动画 */
@keyframes pulse-typing {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* ========== 3. 消息列表区域 - 全屏铺满 ========== */

[data-liaoliao-theme="ios"] .message-container,
[data-liaoliao-theme="ios"] #message-container {
    position: absolute !important;
    top: 0 !important;
    /* 延伸到底部，通过 padding-bottom 给输入框留空间（与示例文件一致） */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* 上方留空给 header (约80px)，下方 110px 留空给输入框 */
    padding: 80px 20px 110px !important;
    padding-top: calc(80px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* ========== 4. 消息气泡 - iOS 默认玻璃风格 ========== */
/*
 * iOS 默认气泡样式（参考示例文件 4-liquid-glass-demo.html）
 * - AI消息：毛玻璃白色背景
 * - 用户消息：蓝色渐变
 *
 * 优先级说明：
 * - 这里设置 iOS 的默认样式
 * - 如果用户开启了"自定义美化"，JS 会添加内联样式覆盖这里
 */

[data-liaoliao-theme="ios"] .message {
    max-width: 75% !important;
    position: relative !important;
    transition: transform 0.2s !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

[data-liaoliao-theme="ios"] .message:active {
    transform: scale(0.98) !important;
}

/* AI 消息气泡 - 毛玻璃效果 (iOS 默认) - 与示例文件一致 */
[data-liaoliao-theme="ios"] .ai-message {
    /* ===== 核心玻璃效果（必须保持，用 !important） ===== */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 12px 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;

    /* ===== 可自定义属性（iOS默认值，无 !important，允许内联样式覆盖） ===== */
    /* 气泡颜色 - 用户可通过"启用自定义气泡样式"修改 */
    background: rgba(255, 255, 255, 0.75);
    /* 字体颜色 - 用户可自定义 */
    color: #000;
    /* 圆角 + 小尾巴 - 用户可通过"自定义圆角"修改 */
    border-radius: 22px;
    border-bottom-left-radius: 4px;
}

/* AI 消息内容包装器 - 透明，让气泡的玻璃效果显示 */
[data-liaoliao-theme="ios"] .ai-message .message-content-wrapper {
    /* 同时使用 background 和 background-color 确保覆盖 style.css */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    /* iOS 主题下内容包装器必须透明无圆角，玻璃效果在外层气泡上 */
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* 防止任何内联样式覆盖 - 使用 all: unset 重置所有继承样式 */
    margin: 0 !important;
}

/* 用户消息气泡 - 蓝色渐变 (iOS 默认) - 与示例文件一致 */
[data-liaoliao-theme="ios"] .user-message {
    /* iOS 默认：蓝色渐变（无 !important，允许内联样式覆盖） */
    background: linear-gradient(135deg, #007AFF, #0055FF);
    color: white;
    /* 默认带尾巴圆角（无 !important，允许内联样式覆盖） */
    border-radius: 22px;
    border-bottom-right-radius: 4px;
    padding: 12px 18px !important;
    /* 投影颜色跟随气泡颜色（通过 CSS 变量，JS 会根据气泡颜色设置） */
    box-shadow: 0 4px 12px var(--user-bubble-shadow, rgba(0, 122, 255, 0.3));
}

/* 消息时间戳 */
[data-liaoliao-theme="ios"] .message .message-time,
[data-liaoliao-theme="ios"] .chat-time {
    text-align: center !important;
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.45) !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ========== 5. 底部输入区域 - 完全透明 ========== */

[data-liaoliao-theme="ios"] .chat-input-area {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 16px 34px !important; /* 适配 iPhone 底部条 */
    padding-bottom: calc(34px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    border-top: none !important;
    z-index: 20 !important;
}

/* + 按钮 (视觉上在输入框外面) */
[data-liaoliao-theme="ios"] .chat-input-area .chat-plus-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    color: rgba(60, 60, 67, 0.8) !important;
    flex-shrink: 0 !important;
    /* 不参与 form 的 flex 布局，用负 margin 移到外面 */
    margin-left: -8px !important;
    margin-right: 8px !important;
    order: -1 !important; /* 排到最前面 */
}

[data-liaoliao-theme="ios"] .chat-input-area .chat-plus-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-liaoliao-theme="ios"] .chat-input-area .chat-plus-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: rgba(60, 60, 67, 0.8) !important;
}

/* 输入框容器 - Dark Frost 悬浮岛 (实际是 .chat-input-form) */
[data-liaoliao-theme="ios"] .chat-input-area .chat-input-form {
    flex: 1 !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 6px 0 16px !important;
    border-radius: 30px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;

    /* Dark Frost / High Saturation (示例文件原始值) */
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(8px) saturate(258%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(258%) !important;

    /* 隐形边框 + 顶部微光 */
    box-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) !important;
    border: none !important;
}

/* 聚焦状态 */
[data-liaoliao-theme="ios"] .chat-input-area .chat-input-form:focus-within {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
}

/* 输入框本身 */
[data-liaoliao-theme="ios"] .chat-input-area #chat-input,
[data-liaoliao-theme="ios"] .chat-input-area input[type="text"] {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: 17px !important;
    color: #000 !important;
    outline: none !important;
    height: 100% !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

[data-liaoliao-theme="ios"] .chat-input-area #chat-input::placeholder {
    color: rgba(60, 60, 67, 0.5) !important;
}

/* 云朵按钮 */
[data-liaoliao-theme="ios"] .chat-input-area .chat-cloud-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    color: rgba(60, 60, 67, 0.8) !important;
    flex-shrink: 0 !important;
}

[data-liaoliao-theme="ios"] .chat-input-area .chat-cloud-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-liaoliao-theme="ios"] .chat-input-area .chat-cloud-btn svg {
    width: 22px !important;
    height: 22px !important;
    color: rgba(60, 60, 67, 0.8) !important;
}

/* 发送按钮 - 黑色 Squircle + 箭头图标 */
[data-liaoliao-theme="ios"] .chat-input-area #chat-send-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    /* iOS 风格的超椭圆 (Squircle) */
    border-radius: 14px !important;
    border: none !important;
    background: #000000 !important; /* 纯黑 */
    color: transparent !important; /* 隐藏"发送"文字 */
    font-size: 0 !important; /* 隐藏"发送"文字 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 发送按钮箭头图标 (用伪元素) */
[data-liaoliao-theme="ios"] .chat-input-area #chat-send-btn::before {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    /* 使用 CSS 绘制箭头 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'%3E%3C/line%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'%3E%3C/polygon%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

[data-liaoliao-theme="ios"] .chat-input-area #chat-send-btn:active {
    transform: scale(0.9) !important;
}

/* ========== 6. 快捷功能面板 - Control Center 风格 ========== */

[data-liaoliao-theme="ios"] .chat-action-panel {
    /* 使用 fixed 定位，相对于视口而非输入区域 */
    position: fixed !important;
    /* PWA 模式下需要更高的 bottom 值，留出输入框+安全区域空间 */
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
    /* 限制最大宽度，在大屏幕上居中 */
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
    border-radius: 32px !important;

    /* 控制中心玻璃质感 */
    background: rgba(245, 245, 245, 0.65) !important;
    backdrop-filter: blur(50px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;

    z-index: 1000 !important; /* 高于输入区域 */
    overflow: hidden !important;

    /* 动画：从下方滑入 */
    transform: translateY(120%) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    pointer-events: none;
}

[data-liaoliao-theme="ios"] .chat-action-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* 功能图标按钮 - 液态玻璃 Squircle */
[data-liaoliao-theme="ios"] .chat-action-panel .action-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    overflow: hidden !important;

    /* 液态玻璃效果 */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

[data-liaoliao-theme="ios"] .chat-action-panel .action-item:active .action-icon {
    transform: scale(0.92) !important;
    background: rgba(255, 255, 255, 1) !important;
}

[data-liaoliao-theme="ios"] .chat-action-panel .action-icon svg {
    width: 28px !important;
    height: 28px !important;
    color: #333 !important;
    stroke-width: 2 !important;
}

[data-liaoliao-theme="ios"] .chat-action-panel .action-label {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.7) !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}

/* ========== 7. 气泡长按菜单 ========== */

[data-liaoliao-theme="ios"] #bubble-menu,
[data-liaoliao-theme="ios"] .bubble-menu {
    position: fixed !important;
    display: flex !important;
    flex-direction: row !important;
    z-index: 9999 !important;

    /* 液态玻璃效果 */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;

    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

/* 菜单按钮 */
[data-liaoliao-theme="ios"] #bubble-menu button,
[data-liaoliao-theme="ios"] .bubble-menu button,
[data-liaoliao-theme="ios"] .bubble-menu-item {
    padding: 12px 16px !important;
    border: none !important;
    background: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.2s !important;
}

[data-liaoliao-theme="ios"] #bubble-menu button:hover,
[data-liaoliao-theme="ios"] .bubble-menu button:hover,
[data-liaoliao-theme="ios"] .bubble-menu-item:hover,
[data-liaoliao-theme="ios"] #bubble-menu button:active,
[data-liaoliao-theme="ios"] .bubble-menu button:active,
[data-liaoliao-theme="ios"] .bubble-menu-item:active {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-liaoliao-theme="ios"] #bubble-menu button:not(:last-child),
[data-liaoliao-theme="ios"] .bubble-menu button:not(:last-child),
[data-liaoliao-theme="ios"] .bubble-menu-item:not(:last-child) {
    border-right: 1px solid rgba(60, 60, 67, 0.1) !important;
}

[data-liaoliao-theme="ios"] #bubble-menu button svg,
[data-liaoliao-theme="ios"] .bubble-menu button svg,
[data-liaoliao-theme="ios"] .bubble-menu-item svg {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.7 !important;
}

/* 危险操作（删除等）*/
[data-liaoliao-theme="ios"] #bubble-menu button.danger,
[data-liaoliao-theme="ios"] .bubble-menu button.danger,
[data-liaoliao-theme="ios"] .bubble-menu-item.danger {
    color: #FF3B30 !important;
}

/* 菜单三角指示器 */
[data-liaoliao-theme="ios"] #bubble-menu::after,
[data-liaoliao-theme="ios"] .bubble-menu::after {
    content: '' !important;
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;

    /* 定位在底部中间，旋转45度 */
    bottom: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    z-index: -1 !important;
}

/* 长按时气泡高亮 */
[data-liaoliao-theme="ios"] .message.highlight {
    position: relative !important;
    z-index: 9998 !important;
    box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.15) !important;
    transform: scale(1.02) !important;
}

/* ========== 8. 打字指示器 ========== */

[data-liaoliao-theme="ios"] .typing-indicator {
    /* 液态玻璃效果 */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
    border-radius: 20px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

[data-liaoliao-theme="ios"] .typing-indicator .dot {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* ========== 9. 日期分隔线 ========== */

[data-liaoliao-theme="ios"] .date-separator,
[data-liaoliao-theme="ios"] .message-date {
    text-align: center !important;
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.45) !important;
    margin: 24px 0 8px !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ========== 10. 图片消息增强 ========== */

[data-liaoliao-theme="ios"] .message-bubble.image-bubble,
[data-liaoliao-theme="ios"] .message-bubble .message-image {
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* ========== 11. 引用消息样式 ========== */

[data-liaoliao-theme="ios"] .quoted-message,
[data-liaoliao-theme="ios"] .message-quote {
    background: rgba(0, 0, 0, 0.04) !important;
    border-left: 3px solid rgba(0, 122, 255, 0.5) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
}

/* ========== 12. 语音消息样式 ========== */

[data-liaoliao-theme="ios"] .voice-message {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
}

[data-liaoliao-theme="ios"] .voice-message .play-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #007aff !important;
    color: #fff !important;
}

/* ========== 13. 滚动条美化 ========== */

[data-liaoliao-theme="ios"] .message-container::-webkit-scrollbar,
[data-liaoliao-theme="ios"] #message-container::-webkit-scrollbar {
    width: 4px !important;
}

[data-liaoliao-theme="ios"] .message-container::-webkit-scrollbar-track,
[data-liaoliao-theme="ios"] #message-container::-webkit-scrollbar-track {
    background: transparent !important;
}

[data-liaoliao-theme="ios"] .message-container::-webkit-scrollbar-thumb,
[data-liaoliao-theme="ios"] #message-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 2px !important;
}

/* ========== 14. 遮罩层 ========== */

[data-liaoliao-theme="ios"] .overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.01) !important;
    z-index: 12 !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    transition: backdrop-filter 0.3s !important;
}