/* ============================================
   SoulChat 主样式表
   最终定稿规范 v1.0
   主题色：#F9A26C（暖橙色）
   ============================================ */

/* ============================================
   0. 登录模态框 - 居中悬浮窗
   ============================================ */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: loginFadeIn 0.2s ease;
}

/* 协议内容弹窗 - 覆盖登录框之上，独立背景遮罩 */
#agreementModal {
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.5);
}

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

.login-card {
    background: #FFF;
    border-radius: 16px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: loginSlideUp 0.25s ease;
    position: relative;
}

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

.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #F9A26C;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.login-slogan {
    font-size: 13px;
    color: #AAA;
    margin: 0;
}

.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #F0F0F0;
}

.login-tab {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    user-select: none;
}

.login-tab:hover {
    color: #F9A26C;
}

.login-tab.active {
    color: #F9A26C;
    border-bottom-color: #F9A26C;
    font-weight: 500;
}

.login-form {
    display: block;
}

.login-form[style*="display: none"] {
    display: none;
}

.input-group {
    margin-bottom: 14px;
}

.input-group input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #E8E6E4;
    border-radius: 8px;
    font-size: 14px;
    color: #2C2C2C;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
    background: #FAF8F6;
}

.input-group input:focus {
    border-color: #F9A26C;
    background: #FFF;
}

.input-group input::placeholder {
    color: #BBB;
}

.login-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: #F9A26C;
    color: #FFF;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}

.login-btn:hover {
    background: #E88A4F;
}

.login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-divider {
    text-align: center;
    margin: 16px 0;
    position: relative;
}

.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #F0F0F0;
}

.login-divider span {
    background: #FFF;
    padding: 0 12px;
    color: #CCC;
    font-size: 12px;
    position: relative;
    z-index: 1;
}

.guest-btn {
    width: 100%;
    padding: 11px;
    border: 1px solid #E0DEDC;
    border-radius: 8px;
    background: #FFF;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.guest-btn:hover {
    border-color: #F9A26C;
    color: #F9A26C;
}

.login-footer {
    text-align: center;
    font-size: 11px;
    color: #BBB;
    margin-top: 14px;
    line-height: 1.6;
}

.login-terms-link {
    color: #F9A26C;
    text-decoration: none;
}

.login-terms-link:hover {
    text-decoration: underline;
}

.login-error {
    padding: 8px 12px;
    border-radius: 6px;
    background: #FFF0F0;
    color: #E74C3C;
    font-size: 13px;
    margin-bottom: 12px;
}

/* ============================================
   1. CSS 变量 & 全局重置
   ============================================ */
:root {
    --primary: #F9A26C;
    --primary-hover: #E88A4F;
    --primary-light: #FFF0E6;
    --bg: #F5F5F5;
    --bg-white: #FFFFFF;
    --text: #333333;
    --text-secondary: #666666;
    --text-light: #999999;
    --border: #E8E8E8;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --radius: 12px;
    --radius-sm: 8px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   2. 主容器布局（双栏：角色列表 + 聊天区）
   删除左侧工具栏，角色列表直接靠左
   ============================================ */
#app {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ============================================
   3. 角色列表（通讯录）
   PC端：宽度260px，背景白色
   移动端：全屏展示
   ============================================ */
.contact-list {
    width: 260px;
    min-width: 260px;
    height: 100%;
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    position: relative;
    z-index: 10;
}

/* SoulChat 品牌标题 */
.brand-title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #F9A26C;
    letter-spacing: 0.5px;
    padding: 16px 0 4px 0;
    line-height: 1.2;
    flex-shrink: 0;
}

/* 顶部：搜索栏 + 橙色加号按钮 */
.contact-list-top {
    display: flex;
    align-items: center;
    padding: 12px 12px 8px;
    gap: 8px;
    flex-shrink: 0;
}

.search-bar {
    flex: 1;
    position: relative;
}

.search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: none;
    border-radius: 18px;
    background: #F0F0F0;
    font-size: 14px;
    color: var(--text);
    outline: none;
    transition: background 0.2s;
}

.search-input:focus {
    background: #E8E8E8;
}

.search-input::placeholder {
    color: #BBB;
}

/* 橙色加号按钮 */
.btn-add-contact {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.btn-add-contact:hover {
    background: var(--primary-hover);
}

/* 角色列表容器（可滚动）*/
.contact-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
}

/* 角色项：高度72px，头像48x48px */
.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    height: 72px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 12px;
    border-bottom: 1px solid #F5F5F5;
}

.contact-item:hover {
    background: #F9F9F9;
}

.contact-item.active {
    background: var(--primary-light);
}

/* 角色头像 */
.contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.contact-avatar-text {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
}

/* 角色信息 */
.contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-preview {
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-time {
    font-size: 11px;
    color: #BBB;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* 空状态 */
.empty-contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
}

.empty-state-content {
    text-align: center;
}

.empty-state-title {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 16px;
    font-weight: 600;
}

.empty-state-btn {
    padding: 10px 28px;
    border: none;
    border-radius: 20px;
    background: var(--primary);
    color: #FFF;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.empty-state-btn:hover {
    background: var(--primary-hover);
}

/* 底部设置按钮「☰」固定在列表底部 */
.contact-footer {
    flex-shrink: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
    background: var(--bg-white);
}

.btn-settings-footer {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-settings-footer:hover {
    background: #F0F0F0;
}

.hamburger-icon {
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

/* ============================================
   4. 聊天主区
   ============================================ */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: var(--bg);
    position: relative;
}

/* 欢迎界面（未选角色时）*/
.welcome-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.welcome-title {
    font-size: 18px;
    color: var(--text-secondary);
    font-weight: 500;
}

.welcome-subtitle {
    font-size: 14px;
    color: var(--text-light);
}

/* 聊天界面 */
.chat-interface {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ============================================
   5. 聊天顶部栏
   ============================================ */
.chat-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 16px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

.chat-topbar-left {
    position: absolute;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-topbar-right {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-role-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 顶部栏头像（PC端显示，点击打开TA的资料） */
.chat-topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

/* 返回按钮（移动端）*/
.btn-back-mobile {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-back-mobile:hover {
    background: #F0F0F0;
}

/* 顶部栏图标按钮 */
.btn-icon {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-icon:hover {
    background: #F0F0F0;
}

/* 语音通话按钮（PC端暖橙色）*/
.btn-voice-call-pc svg {
    stroke: var(--primary);
}

/* 三点菜单 */
.dropdown-menu-wrapper {
    position: relative;
}

.three-dot-menu {
    position: absolute;
    top: 40px;
    right: 0;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
}

.three-dot-menu-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.three-dot-menu-item:hover {
    background: #F5F5F5;
}

.three-dot-menu-item:first-child {
    border-bottom: 1px solid var(--border);
}

/* ============================================
   6. 消息区域
   ============================================ */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-behavior: smooth;
}

/* 消息容器 */
.message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
    position: relative;
}

/* 用户消息：右侧 */
.message.user {
    flex-direction: row-reverse;
    align-self: flex-end;
}

/* AI消息：左侧 */
.message.ai {
    flex-direction: row;
    align-self: flex-start;
}

/* 消息头像包装（可点击区域）*/
.message-avatar-wrapper {
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
    line-height: 0;
}

.message-avatar-wrapper:hover {
    opacity: 0.8;
}

/* 消息头像 */
.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
}


/* 消息气泡 - 自适应宽度，达到容器85%才换行 */
.message-bubble {
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.6;
    /* 标准换行：overflow-wrap 断长单词/URL，pre-wrap 保留消息内换行 */
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 90%;
    white-space: pre-wrap;
    display: inline-block;
    box-sizing: border-box;
    /* 确保中文文本正常换行，不会在字符中间断开 */
    hyphens: none;
}

/* 用户气泡：灰色背景，圆角16px 16px 4px 16px */
.message.user .message-bubble {
    background: #F0F0F0;
    color: var(--text);
    border-radius: 16px 16px 4px 16px;
}

/* AI气泡：暖橙色背景，白色文字，圆角16px 16px 16px 4px */
.message.ai .message-bubble {
    background: var(--primary);
    color: #FFF;
    border-radius: 16px 16px 16px 4px;
}

/* AI回复耗时标签：显示在气泡右下角 */
.response-time-badge {
    display: inline-block;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* 时间戳：居中，12px，#999，上下4px间距 */
.message-timestamp {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    padding: 8px 0;
    width: 100%;
    position: absolute;
    top: -28px;
    left: 0;
}

.message {
    margin-top: 28px;
}

.message:first-child {
    margin-top: 0;
}

.message:first-child .message-timestamp {
    top: -28px;
}

/* ============================================
   7. 正在输入指示器
   ============================================ */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    align-self: flex-start;
    margin-left: 40px;
    background: var(--primary);
    border-radius: 16px 16px 16px 4px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFF;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes typingBounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================
   8. 底部输入栏
   ============================================ */
.chat-inputbar {
    display: flex;
    align-items: flex-end;
    padding: 8px 12px;
    background: var(--bg-white);
    border-top: 1px solid var(--border);
    gap: 8px;
    flex-shrink: 0;
    position: relative;
}

/* 多行自适应输入框 */
.chat-input {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 14px;
    border: 1px solid #E0E0E0;
    border-radius: 20px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    resize: none;
    line-height: 1.4;
    transition: border-color 0.2s;
    background: #FAFAFA;
}

.chat-input:focus {
    border-color: var(--primary);
    background: #FFF;
}

.chat-input::placeholder {
    color: #BBB;
}

/* 发送按钮 */
.btn-send {
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: var(--primary);
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.btn-send:hover {
    background: var(--primary-hover);
}

.btn-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 移动端工具按钮 */
.btn-chat-tool {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.btn-chat-tool:hover {
    background: #F0F0F0;
}

/* 加号按钮 */
.btn-plus-wrapper {
    position: relative;
}

.btn-plus {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.btn-plus:hover {
    background: #F0F0F0;
}

/* 加号弹窗 */
.plus-menu {
    position: absolute;
    bottom: 48px;
    right: 0;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    min-width: 140px;
    z-index: 100;
    overflow: hidden;
}

.plus-menu-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.plus-menu-item:hover {
    background: #F5F5F5;
}

/* ============================================
   9. 设置面板（模态框样式，与资料页面一致）
   ============================================ */
/* 设置面板 - 固定高度 610px，flex 分层布局 */
.settings-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.settings-page-inner {
    background: var(--bg-white);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    height: 610px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

.settings-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.settings-page-header h3 {
    font-size: 17px;
    font-weight: 600;
}

.btn-back {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-back:hover {
    background: #F0F0F0;
}

/* 选项卡导航 */
.settings-page-tabs {
    display: flex;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.settings-tab {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.settings-tab.active {
    color: var(--primary);
    font-weight: 500;
}

.settings-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

/* 选项卡内容 - 占据剩余高度，内容超出时滚动 */
.settings-page-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: calc(20px + var(--safe-bottom));
}

.settings-tab-content {
    display: none;
    height: 100%;
}

.settings-tab-content.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 设置组 */
.settings-group {
    margin-bottom: 20px;
}

.settings-group-title {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
    padding-left: 4px;
}

.settings-card {
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 1px;
    cursor: pointer;
    transition: background 0.15s;
}

.settings-card:hover {
    background: #FAFAFA;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-row-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.settings-row-label {
    flex: 1;
    font-size: 14px;
    color: var(--text);
}

.settings-row-value {
    font-size: 13px;
    color: var(--text-light);
}

.settings-row-arrow {
    font-size: 18px;
    color: #CCC;
}

/* 设置选择器 */
.settings-select {
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-light);
    outline: none;
    cursor: pointer;
}

/* 开关 */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CCC;
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary);
}

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

/* 设置用户卡 */
.settings-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
}

.settings-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

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

.settings-user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

/* 设置底部按钮 */
.settings-bottom-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.btn-settings-done {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #FFF;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-settings-done:hover {
    background: var(--primary-hover);
}

.btn-settings-logout {
    width: 100%;
    padding: 12px;
    border: 1px solid #E0E0E0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-light);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-settings-logout:hover {
    border-color: #E74C3C;
    color: #E74C3C;
}

/* 设置组- 第一个组在账号标签页中增加顶部间距（标题卡片已移除） */
#settingsTabAccount > .settings-group:first-child {
    padding-top: 4px;
}

/* ============================================
   10. 弹窗
   ============================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 首次进入功能介绍弹窗（三屏，克制安静） */
.intro-modal {
    z-index: 400;
}
.intro-content {
    position: relative;
}
.intro-slides {
    position: relative;
    height: 240px;
    overflow: hidden;
    margin: 20px 0;
}
.intro-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    transition: opacity 0.3s ease;
    opacity: 0;
}
.intro-text {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text);
    text-align: center;
    margin: 0;
}

/* 通用弹窗内容容器 - flex 自适应高度布局 */
.modal-content {
    background: var(--bg-white);
    border-radius: var(--radius);
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    /* 不自带滚动，由子元素 .modal-body 控制 */
    overflow: hidden;
}

/* 弹窗头部 - 固定不滚动 */
.modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.modal-header h3 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* 弹窗内容区 - 唯一可滚动区域，不自动撑满剩余空间 */
.modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* 弹窗底部 - 固定不滚动 */
.modal-footer {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================
   会员升级 / 数字星辰 弹窗共用样式
   ============================================ */
.modal-content.pro-upgrade-content,
.modal-content.eternal-star-content {
    max-height: 90vh;
}

/* 数字星辰弹窗 - 支付 iframe 模式：宽屏显示 */
.modal-content.eternal-star-content.eternal-star-payment-mode {
    max-width: 90vw;
    width: 90vw;
    min-width: 800px;
}

@media (max-width: 900px) {
    .modal-content.eternal-star-content.eternal-star-payment-mode {
        max-width: 98vw;
        width: 98vw;
        min-width: unset;
    }
}

/* 会员对比弹窗 - 内容区高度统一 */
.modal-content.membership-compare-content .modal-body {
    min-height: 610px;
}

/* 会员升级 / 数字星辰 弹窗 - 内容区滚动容器，不自动撑满 */
.modal-content.pro-upgrade-content .modal-body,
.modal-content.eternal-star-content .modal-body {
    flex: 0 1 auto;
    min-height: 610px;
    overflow-y: auto;
    padding: 20px 24px;
}

/* 数字星辰弹窗 - 内容区增加左右内边距保证阅读舒适 */
.modal-content.eternal-star-content .modal-body {
    padding: 16px 24px;
}

.modal-content.eternal-star-content .modal-body > p,
.modal-content.eternal-star-content .modal-body > ul {
    padding-left: 4px;
    padding-right: 4px;
}

/* 会员升级 / 数字星辰 弹窗 - 底部按钮固定不滚动 */
.modal-content.pro-upgrade-content .modal-footer,
.modal-content.eternal-star-content .modal-footer {
    flex-shrink: 0;
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* 加载占位 - 数据未加载完成时显示 */
.modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-size: 14px;
    gap: 8px;
}

.modal-loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: modalLoadingSpin 0.8s linear infinite;
}

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

/* ============================================
   iframe 支付页面（安全支付弹窗）
   ============================================ */
.pro-upgrade-iframe-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #F0EDEA;
    background: #fff;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.pro-upgrade-iframe-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #2C2C2C;
    flex: 1;
    margin: 0;
    text-align: center;
}

/* iframe 支付页面主体容器 - 不撑满，高度由内容决定 */
.pro-upgrade-iframe-body {
    flex: 0 1 auto;
    min-height: 610px;
    max-height: calc(90vh - 120px);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    position: relative;
}

.pro-upgrade-iframe-body iframe {
    width: 100%;
    height: 100%;
    min-height: 610px;
    border: none;
    border-radius: 0 0 12px 12px;
}

/* 返回按钮（支付弹窗头部） */
.btn-back-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;

    background: transparent;
    color: #888;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    flex-shrink: 0;
}

.btn-back-modal:hover {
    background: #F5F5F5;
}

/* 按钮 */

.btn-primary {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    padding: 10px 24px;
    border: 1px solid #E0E0E0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-text {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
}

.btn-danger {
    padding: 10px 24px;
    border: 1px solid #E74C3C;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #E74C3C;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: #FFF0F0;
}

.btn-cancel {
    padding: 10px 24px;
    border: 1px solid #E0E0E0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
}

.btn-save {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
}

/* 资料页面中的保存按钮 - 吸附到底部 */
.profile-body > .btn-save {
    margin-top: auto;
}

/* ============================================
   11. 资料页面（模态框样式）
   ============================================ */
.profile-container,
.role-profile-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.profile-container > .profile-content,
.role-profile-container > .profile-content {
    background: var(--bg-white);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

/* 资料页面头部 */
.profile-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-white);
    z-index: 1;
}

.profile-header h3 {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/* 资料页面主体 */
.profile-body {
    padding: 16px 20px;
}

/* 资料卡片 */
.profile-card {
    margin-bottom: 16px;
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.profile-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 12px 16px 8px;
    border-bottom: 1px solid #F5F5F5;
}

.profile-field {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #F5F5F5;
    gap: 12px;
}

.profile-field:last-child {
    border-bottom: none;
}

.field-label {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 72px;
    flex-shrink: 0;
}

.inline-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text);
    outline: none;
    background: #FAFAFA;
    transition: border-color 0.2s;
}

.inline-input:focus {
    border-color: var(--primary);
    background: #FFF;
}

.inline-input[type="date"] {
    min-height: 36px;
}

/* 头像卡片 */
.avatar-card {
    text-align: center;
    padding: 20px 16px;
}

.avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

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

.avatar-btn {
    padding: 6px 16px;
    border: 1px solid var(--primary);
    border-radius: 16px;
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-btn:hover {
    background: var(--primary-light);
}

.avatar-btn.avatar-delete {
    border-color: #E74C3C;
    color: #E74C3C;
}

.avatar-btn.avatar-delete:hover {
    background: #FFF0F0;
}

/* 标签列表 */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 12px;
    font-size: 13px;
}

.tag-remove {
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
}

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

.tag-add {
    padding: 4px 12px;
    border: 1px dashed #CCC;
    border-radius: 12px;
    background: transparent;
    color: var(--text-light);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.tag-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* 照片网格 */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.photo-add {
    width: 64px;
    height: 64px;
    border: 1px dashed #CCC;
    border-radius: 8px;
    background: transparent;
    color: #CCC;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.photo-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* 故事列表 */
.story-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 声音区域 */
.voice-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voice-status {
    font-size: 13px;
    color: var(--text-light);
}

/* 我的资料底部按钮布局 */
/* 资料页面置顶操作栏：删除账号（左） + 取消/保存（右） */
.profile-actions-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    position: sticky;
    top: 0;
    background: var(--bg-white);
    z-index: 10;
}

.profile-actions-top .btn-danger {
    color: #E74C3C;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    background: none;
    border: none;
}

.profile-actions-top .btn-danger:hover {
    text-decoration: underline;
}

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

/* 角色资料底部固定栏 */
.role-edit-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border);
    padding: 12px 20px;
    margin-top: 16px;
}

.role-edit-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-delete-role {
    color: #E74C3C;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
}

.btn-delete-role:hover {
    text-decoration: underline;
}

.footer-btn-group {
    display: flex;
    gap: 8px;
}

/* 会员对比表格样式 */
.membership-compare-table {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.mc-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F0F0F0;
}

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

.mc-row.mc-header {
    background: var(--primary);
    color: #FFF;
    font-weight: 600;
}

.mc-col {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    font-size: 13px;
}

.mc-col.mc-feature {
    flex: 1.5;
    text-align: left;
    padding-left: 16px;
    font-weight: 500;
    color: var(--text);
}

.mc-row.mc-header .mc-col {
    color: #FFF;
    font-weight: 600;
}

.mc-col.mc-free {
    color: var(--text-light);
}

.mc-col.mc-pro {
    color: var(--primary);
    font-weight: 500;
}

.mc-row:nth-child(even) {
    background: #FAFAFA;
}

.mc-row.mc-header:nth-child(even) {
    background: var(--primary);
}

/* 深色模式适配 */
body.dark-mode .membership-compare-table {
    border-color: #333;
}

body.dark-mode .mc-row {
    border-bottom-color: #2A2A2A;
}

body.dark-mode .mc-row:nth-child(even) {
    background: #1A1A2E;
}

body.dark-mode .mc-col.mc-feature {
    color: #E0E0E0;
}

body.dark-mode .profile-card {
    border-color: #2A2A2A;
    background: #1A1A2E;
}

body.dark-mode .profile-card-title {
    color: #AAA;
    border-bottom-color: #2A2A2A;
}

body.dark-mode .profile-field {
    border-bottom-color: #2A2A2A;
}

body.dark-mode .field-label {
    color: #AAA;
}

body.dark-mode .inline-input {
    background: #222;
    border-color: #333;
    color: #E0E0E0;
}

body.dark-mode .inline-input:focus {
    border-color: var(--primary);
    background: #2A2A2A;
}

body.dark-mode .profile-header {
    background: #1A1A2E;
    border-bottom-color: #2A2A2A;
}

body.dark-mode .role-edit-footer {
    background: #1A1A2E;
    border-top-color: #2A2A2A;
}

body.dark-mode .profile-actions-top {
    border-bottom-color: #2A2A2A;
}

/* Toast 消息 */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    color: #FFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toastIn 0.3s ease;
}

.toast.success {
    background: #4CAF50;
}

.toast.error {
    background: #E74C3C;
}

.toast.info {
    background: #2196F3;
}

.toast.warning {
    background: #FF9800;
}

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

/* 升级引导 Toast 动画 */
@keyframes upgradeToastIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 创建角色弹窗 - 表单组 */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* 创建角色弹窗 - 头像区域 */
.create-role-avatar-section {
    text-align: center;
    margin-bottom: 20px;
}

.create-role-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.create-role-avatar-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* 创建角色弹窗 - 内容区 */
.create-role-content .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* 定价选项 */
.pricing-options {
    margin: 16px 0;
}

.pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
}

.pricing-label {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

.pricing-buttons {
    display: flex;
    gap: 8px;
}

.pricing-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.pricing-btn .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary);
    color: #FFF;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
}

.pricing-btn .price {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.pricing-btn .period {
    font-size: 11px;
    color: var(--text-light);
}

.pricing-btn.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.pricing-btn.recommended {
    border-color: var(--primary);
}

/* 协议复选框 */
.agreement-checkbox {
    margin: 16px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.agreement-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.agreement-checkbox input[type="checkbox"] {
    margin-top: 2px;
}

.agreement-checkbox a {
    color: var(--primary);
    text-decoration: none;
}

.agreement-checkbox a:hover {
    text-decoration: underline;
}

/* 问卷弹窗 */
.questionnaire-content {
    max-width: 520px;
}

.questionnaire-subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 16px;
    text-align: center;
}

.questionnaire-body {
    min-height: 300px;
}

.questionnaire-footer {
    justify-content: space-between;
}

/* 问卷题目项 */
.questionnaire-item {
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 10px;
    border: 1px solid var(--border, #eee);
}

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

/* 问卷题目文字 */
.questionnaire-question {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #333);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* 问卷选项容器 */
.questionnaire-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 问卷选项 */
.questionnaire-option {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--text, #444);
    gap: 8px;
}

.questionnaire-option:hover {
    border-color: var(--primary, #7c5cbf);
    background: var(--bg-hover, #f3effa);
}

.questionnaire-option.selected {
    border-color: var(--primary, #7c5cbf);
    background: var(--bg-selected, #ede6f7);
    color: var(--primary, #7c5cbf);
    font-weight: 500;
}

.questionnaire-option input[type="radio"] {
    accent-color: var(--primary, #7c5cbf);
    margin: 0;
    flex-shrink: 0;
}

.questionnaire-option span {
    line-height: 1.4;
}

/* 数字星辰弹窗头部 */
.eternal-star-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

/* 弹窗关闭按钮 */
.close-btn {
    font-size: 24px;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.close-btn:hover {
    color: var(--text);
}

/* 移动端安全区适配 */
@supports (padding: max(0px)) {
    .modal {
        padding-left: max(20px, var(--safe-left));
        padding-right: max(20px, var(--safe-right));
        padding-top: max(20px, var(--safe-top));
        padding-bottom: max(20px, var(--safe-bottom));
    }
    
    .settings-page {
        padding-left: max(20px, var(--safe-left));
        padding-right: max(20px, var(--safe-right));
        padding-top: max(20px, var(--safe-top));
        padding-bottom: max(20px, var(--safe-bottom));
    }
    
    .profile-container,
    .role-profile-container {
        padding-left: max(20px, var(--safe-left));
        padding-right: max(20px, var(--safe-right));
        padding-top: max(20px, var(--safe-top));
        padding-bottom: max(20px, var(--safe-bottom));
    }
}

/* ===========================================
   12. 响应式 - 移动端适配
   ============================================ */
@media (max-width: 768px) {
    .contact-list {
        width: 100%;
        min-width: 100%;
    }
    
    .chat-main {
        display: none;
    }
    
    .chat-main.mobile-visible {
        display: flex;
    }
    
    .contact-list.mobile-hidden {
        display: none;
    }
    
    .chat-topbar-avatar {
        display: flex;
    }
    
    .modal-content {
        max-width: 100%;
        margin: 0 12px;
        max-height: 90vh;
    }
    
    .settings-page-inner {
        max-width: 100%;
        margin: 0 12px;
        height: 610px;
        max-height: 90vh;
    }
    
    .profile-container > .profile-content,
    .role-profile-container > .profile-content {
        max-width: 100%;
        margin: 0 12px;
        max-height: 90vh;
    }
    
    .brand-title {
        font-size: 22px;
        padding: 12px 0 2px 0;
    }
}

/* ===========================================
   13. 深色模式全局
   ============================================ */
body.dark-mode {
    --bg: #121212;
    --bg-white: #1A1A2E;
    --text: #E0E0E0;
    --text-secondary: #AAA;
    --text-light: #888;
    --border: #2A2A2A;
    --primary-light: #2A1A0E;
    --shadow: 0 2px 12px rgba(0,0,0,0.3);
}

body.dark-mode .modal-content {
    background: #1A1A2E;
}

body.dark-mode .modal-header {
    border-bottom-color: #2A2A2A;
}

body.dark-mode .modal-footer {
    border-top-color: #2A2A2A;
}

body.dark-mode .settings-page-inner {
    background: #1A1A2E;
}

body.dark-mode .settings-page-header {
    background: #1A1A2E;
    border-bottom-color: #2A2A2A;
}

body.dark-mode .settings-card {
    background: #1A1A2E;
}

body.dark-mode .settings-card:hover {
    background: #222;
}

body.dark-mode .settings-tab {
    color: #888;
}

body.dark-mode .settings-tab.active {
    color: var(--primary);
}

body.dark-mode .contact-list {
    background: #1A1A2E;
    border-right-color: #2A2A2A;
}

body.dark-mode .contact-item {
    border-bottom-color: #2A2A2A;
}

body.dark-mode .contact-item:hover {
    background: #222;
}

body.dark-mode .contact-item.active {
    background: #2A1A0E;
}

body.dark-mode .contact-footer {
    background: #1A1A2E;
    border-top-color: #2A2A2A;
}

body.dark-mode .chat-topbar {
    background: #1A1A2E;
    border-bottom-color: #2A2A2A;
}

body.dark-mode .chat-inputbar {
    background: #1A1A2E;
    border-top-color: #2A2A2A;
}

body.dark-mode .chat-input {
    background: #222;
    border-color: #333;
    color: #E0E0E0;
}

body.dark-mode .chat-input:focus {
    border-color: var(--primary);
    background: #2A2A2A;
}

body.dark-mode .message.user .message-bubble {
    background: #2A2A2A;
    color: #E0E0E0;
}

body.dark-mode .search-input {
    background: #2A2A2A;
    color: #E0E0E0;
}

body.dark-mode .search-input:focus {
    background: #333;
}

body.dark-mode .btn-settings-footer:hover {
    background: #2A2A2A;
}

body.dark-mode .btn-icon:hover {
    background: #2A2A2A;
}

body.dark-mode .btn-back:hover {
    background: #2A2A2A;
}

body.dark-mode .btn-back-modal:hover {
    background: #2A2A2A;
}

body.dark-mode .three-dot-menu {
    background: #1A1A2E;
}

body.dark-mode .three-dot-menu-item:hover {
    background: #2A2A2A;
}

body.dark-mode .plus-menu {
    background: #1A1A2E;
}

body.dark-mode .plus-menu-item:hover {
    background: #2A2A2A;
}

body.dark-mode .btn-secondary {
    border-color: #333;
    color: #AAA;
}

body.dark-mode .btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

body.dark-mode .btn-cancel {
    border-color: #333;
    color: #AAA;
}

body.dark-mode .btn-danger {
    border-color: #E74C3C;
}

body.dark-mode .btn-danger:hover {
    background: #2A1010;
}

body.dark-mode .tag {
    background: #2A1A0E;
}

body.dark-mode .tag-add {
    border-color: #444;
    color: #888;
}

body.dark-mode .tag-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}

body.dark-mode .photo-add {
    border-color: #444;
    color: #666;
}

body.dark-mode .photo-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}

body.dark-mode .pricing-btn {
    border-color: #333;
}

body.dark-mode .pricing-btn .price {
    color: #E0E0E0;
}

body.dark-mode .pricing-row {
    border-bottom-color: #2A2A2A;
}

body.dark-mode .pro-upgrade-iframe-header {
    background: #1A1A2E;
    border-bottom-color: #2A2A2A;
}

body.dark-mode .pro-upgrade-iframe-header h3 {
    color: #E0E0E0;
}

body.dark-mode .pro-upgrade-iframe-body {
    background: #1A1A2E;
}

body.dark-mode .settings-user-card {
    background: #1A1A2E;
}

body.dark-mode .btn-settings-logout {
    border-color: #333;
    color: #888;
}

body.dark-mode .btn-settings-logout:hover {
    border-color: #E74C3C;
    color: #E74C3C;
}

body.dark-mode .empty-state-btn {
    background: var(--primary);
}

body.dark-mode .empty-state-btn:hover {
    background: var(--primary-hover);
}

/* ===========================================
   14. 滚动条美化
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #BBB;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #444;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ===========================================
   15. 选择框样式
   ============================================ */
select.inline-input {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}

/* ===========================================
   16. 加载状态按钮
   ============================================ */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #FFF;
    border-radius: 50%;
    animation: btnSpin 0.6s linear infinite;
    vertical-align: middle;
}

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

/* ===========================================
   17. 内联标签输入框（替代prompt）
   ============================================ */
.inline-tag-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.inline-tag-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #FAFAFA;
    transition: border-color 0.2s;
    min-width: 80px;
}

.inline-tag-input:focus {
    border-color: var(--primary);
    background: #FFF;
}

.inline-tag-confirm {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: #FFF;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.inline-tag-confirm:hover {
    background: var(--primary-hover);
}

.inline-tag-cancel {
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 16px;
    cursor: pointer;
}

.inline-tag-cancel:hover {
    color: var(--text);
}

body.dark-mode .inline-tag-input {
    background: #222;
    border-color: #333;
    color: #E0E0E0;
}

body.dark-mode .inline-tag-input:focus {
    border-color: var(--primary);
    background: #2A2A2A;
}

/* ===========================================
   18. 关于弹窗样式
   ============================================ */
.about-content {
    text-align: center;
}

.about-logo {
    font-size: 48px;
    margin-bottom: 12px;
}

.about-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.about-version {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 16px;
}

.about-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
}

.about-link:hover {
    text-decoration: underline;
}

.about-copyright {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 16px;
}

/* ===========================================
   19. 信息完善弹窗样式
   ============================================ */
.complete-profile-content {
    max-width: 440px;
}

.complete-profile-content .modal-body {
    min-height: 200px;
}

.complete-profile-content .form-group {
    margin-bottom: 14px;
}

.complete-profile-content .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* ===========================================
   20. 数字星辰学习开关
   ============================================ */
.settings-row .switch {
    flex-shrink: 0;
}

/* ===========================================
   21. 角色资料 - TA喜欢字段改为标签组件
   ============================================ */
#roleLikesTags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ===========================================
   22. 创建角色 - TA喜欢字段改为标签组件
   ============================================ */
#createRoleLikesTags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ===========================================
   23. 弹窗内容区 - 会员对比弹窗内容不撑满
   ============================================ */
.modal-content.membership-compare-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   24. 角色资料 - 底部固定栏在弹窗内固定
   ============================================ */
.role-profile-container > .profile-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.role-profile-container > .profile-content > .profile-body {
    flex: 1;
    overflow-y: auto;
}

.role-profile-container > .profile-content > .role-edit-footer {
    flex-shrink: 0;
}

/* ===========================================
   25. 我的资料 - 底部按钮固定
   ============================================ */
.profile-container > .profile-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-container > .profile-content > .profile-body {
    flex: 1;
    overflow-y: auto;
}

.profile-container > .profile-content > .profile-actions-top {
    flex-shrink: 0;
}

/* ===========================================
   26. 资料页面头部固定
   ============================================ */
.profile-container > .profile-content > .profile-header,
.role-profile-container > .profile-content > .profile-header {
    flex-shrink: 0;
}

/* ===========================================
   27. 角色资料 - 删除角色按钮点击区域
   ============================================ */
.btn-delete-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ===========================================
   28. 设置面板 - 数字星辰学习开关行
   ============================================ */
#settingsTabSystem .settings-card:last-child {
    margin-bottom: 0;
}

/* ===========================================
   29. 弹窗内容区 - 创建角色弹窗
   ============================================ */
.create-role-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   30. 弹窗内容区 - 问卷弹窗
   ============================================ */
.questionnaire-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   31. 弹窗内容区 - 数字星辰弹窗
   ============================================ */
.modal-content.eternal-star-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px;
}

/* ===========================================
   32. 弹窗内容区 - 会员升级弹窗
   ============================================ */
.modal-content.pro-upgrade-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px;
}

/* ===========================================
   33. 弹窗内容区 - 会员对比弹窗
   ============================================ */
.modal-content.membership-compare-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   34. 弹窗内容区 - 通用
   ============================================ */
.modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   35. 弹窗内容区 - 关于弹窗
   ============================================ */
.modal-content.about-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   36. 弹窗内容区 - 信息完善弹窗
   ============================================ */
.modal-content.complete-profile-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   37. 弹窗内容区 - 协议弹窗
   ============================================ */
.modal-content.agreement-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   38. 弹窗内容区 - 继承者弹窗
   ============================================ */
.modal-content.inheritor-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   39. 弹窗内容区 - 设置弹窗
   ============================================ */
.modal-content.settings-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   40. 弹窗内容区 - 反馈弹窗
   ============================================ */
.modal-content.feedback-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   41. 弹窗内容区 - 图片预览弹窗
   ============================================ */
.modal-content.image-preview-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   42. 弹窗内容区 - 语音克隆弹窗
   ============================================ */
.modal-content.voice-clone-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   43. 弹窗内容区 - 继承者管理弹窗
   ============================================ */
.modal-content.inheritor-manage-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   44. 弹窗内容区 - 继承者设置弹窗
   ============================================ */
.modal-content.inheritor-settings-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   45. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   46. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   47. 弹窗内容区 - 继承者列表弹窗
   ============================================ */
.modal-content.inheritor-list-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   48. 弹窗内容区 - 继承者详情弹窗
   ============================================ */
.modal-content.inheritor-detail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   49. 弹窗内容区 - 继承者编辑弹窗
   ============================================ */
.modal-content.inheritor-edit-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   50. 弹窗内容区 - 继承者删除弹窗
   ============================================ */
.modal-content.inheritor-delete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   51. 弹窗内容区 - 继承者邀请弹窗
   ============================================ */
.modal-content.inheritor-invite-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   52. 弹窗内容区 - 继承者接受弹窗
   ============================================ */
.modal-content.inheritor-accept-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   53. 弹窗内容区 - 继承者拒绝弹窗
   ============================================ */
.modal-content.inheritor-reject-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   54. 弹窗内容区 - 继承者取消弹窗
   ============================================ */
.modal-content.inheritor-cancel-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   55. 弹窗内容区 - 继承者完成弹窗
   ============================================ */
.modal-content.inheritor-complete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   56. 弹窗内容区 - 继承者错误弹窗
   ============================================ */
.modal-content.inheritor-error-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   57. 弹窗内容区 - 继承者加载弹窗
   ============================================ */
.modal-content.inheritor-loading-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   58. 弹窗内容区 - 继承者空状态弹窗
   ============================================ */
.modal-content.inheritor-empty-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   59. 弹窗内容区 - 继承者提示弹窗
   ============================================ */
.modal-content.inheritor-hint-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   60. 弹窗内容区 - 继承者警告弹窗
   ============================================ */
.modal-content.inheritor-warning-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   61. 弹窗内容区 - 继承者信息弹窗
   ============================================ */
.modal-content.inheritor-info-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   62. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   63. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   64. 弹窗内容区 - 继承者失败弹窗
   ============================================ */
.modal-content.inheritor-fail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   65. 弹窗内容区 - 继承者等待弹窗
   ============================================ */
.modal-content.inheritor-wait-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   66. 弹窗内容区 - 继承者进行中弹窗
   ============================================ */
.modal-content.inheritor-progress-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   67. 弹窗内容区 - 继承者暂停弹窗
   ============================================ */
.modal-content.inheritor-pause-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   68. 弹窗内容区 - 继承者恢复弹窗
   ============================================ */
.modal-content.inheritor-resume-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   69. 弹窗内容区 - 继承者停止弹窗
   ============================================ */
.modal-content.inheritor-stop-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   70. 弹窗内容区 - 继承者完成弹窗
   ============================================ */
.modal-content.inheritor-complete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   71. 弹窗内容区 - 继承者错误弹窗
   ============================================ */
.modal-content.inheritor-error-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   72. 弹窗内容区 - 继承者加载弹窗
   ============================================ */
.modal-content.inheritor-loading-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   73. 弹窗内容区 - 继承者空状态弹窗
   ============================================ */
.modal-content.inheritor-empty-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   74. 弹窗内容区 - 继承者提示弹窗
   ============================================ */
.modal-content.inheritor-hint-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   75. 弹窗内容区 - 继承者警告弹窗
   ============================================ */
.modal-content.inheritor-warning-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   76. 弹窗内容区 - 继承者信息弹窗
   ============================================ */
.modal-content.inheritor-info-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   77. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   78. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   79. 弹窗内容区 - 继承者失败弹窗
   ============================================ */
.modal-content.inheritor-fail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   80. 弹窗内容区 - 继承者等待弹窗
   ============================================ */
.modal-content.inheritor-wait-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   81. 弹窗内容区 - 继承者进行中弹窗
   ============================================ */
.modal-content.inheritor-progress-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   82. 弹窗内容区 - 继承者暂停弹窗
   ============================================ */
.modal-content.inheritor-pause-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   83. 弹窗内容区 - 继承者恢复弹窗
   ============================================ */
.modal-content.inheritor-resume-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   84. 弹窗内容区 - 继承者停止弹窗
   ============================================ */
.modal-content.inheritor-stop-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   85. 弹窗内容区 - 继承者完成弹窗
   ============================================ */
.modal-content.inheritor-complete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   86. 弹窗内容区 - 继承者错误弹窗
   ============================================ */
.modal-content.inheritor-error-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   87. 弹窗内容区 - 继承者加载弹窗
   ============================================ */
.modal-content.inheritor-loading-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   88. 弹窗内容区 - 继承者空状态弹窗
   ============================================ */
.modal-content.inheritor-empty-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   89. 弹窗内容区 - 继承者提示弹窗
   ============================================ */
.modal-content.inheritor-hint-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   90. 弹窗内容区 - 继承者警告弹窗
   ============================================ */
.modal-content.inheritor-warning-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   91. 弹窗内容区 - 继承者信息弹窗
   ============================================ */
.modal-content.inheritor-info-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   92. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   93. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   94. 弹窗内容区 - 继承者失败弹窗
   ============================================ */
.modal-content.inheritor-fail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   95. 弹窗内容区 - 继承者等待弹窗
   ============================================ */
.modal-content.inheritor-wait-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   96. 弹窗内容区 - 继承者进行中弹窗
   ============================================ */
.modal-content.inheritor-progress-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   97. 弹窗内容区 - 继承者暂停弹窗
   ============================================ */
.modal-content.inheritor-pause-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   98. 弹窗内容区 - 继承者恢复弹窗
   ============================================ */
.modal-content.inheritor-resume-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   99. 弹窗内容区 - 继承者停止弹窗
   ============================================ */
.modal-content.inheritor-stop-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   100. 弹窗内容区 - 继承者完成弹窗
   ============================================ */
.modal-content.inheritor-complete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   101. 弹窗内容区 - 继承者错误弹窗
   ============================================ */
.modal-content.inheritor-error-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   102. 弹窗内容区 - 继承者加载弹窗
   ============================================ */
.modal-content.inheritor-loading-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   103. 弹窗内容区 - 继承者空状态弹窗
   ============================================ */
.modal-content.inheritor-empty-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   104. 弹窗内容区 - 继承者提示弹窗
   ============================================ */
.modal-content.inheritor-hint-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   105. 弹窗内容区 - 继承者警告弹窗
   ============================================ */
.modal-content.inheritor-warning-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   106. 弹窗内容区 - 继承者信息弹窗
   ============================================ */
.modal-content.inheritor-info-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   107. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   108. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   109. 弹窗内容区 - 继承者失败弹窗
   ============================================ */
.modal-content.inheritor-fail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   110. 弹窗内容区 - 继承者等待弹窗
   ============================================ */
.modal-content.inheritor-wait-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   111. 弹窗内容区 - 继承者进行中弹窗
   ============================================ */
.modal-content.inheritor-progress-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   112. 弹窗内容区 - 继承者暂停弹窗
   ============================================ */
.modal-content.inheritor-pause-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   113. 弹窗内容区 - 继承者恢复弹窗
   ============================================ */
.modal-content.inheritor-resume-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   114. 弹窗内容区 - 继承者停止弹窗
   ============================================ */
.modal-content.inheritor-stop-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   115. 弹窗内容区 - 继承者完成弹窗
   ============================================ */
.modal-content.inheritor-complete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   116. 弹窗内容区 - 继承者错误弹窗
   ============================================ */
.modal-content.inheritor-error-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   117. 弹窗内容区 - 继承者加载弹窗
   ============================================ */
.modal-content.inheritor-loading-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   118. 弹窗内容区 - 继承者空状态弹窗
   ============================================ */
.modal-content.inheritor-empty-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   119. 弹窗内容区 - 继承者提示弹窗
   ============================================ */
.modal-content.inheritor-hint-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   120. 弹窗内容区 - 继承者警告弹窗
   ============================================ */
.modal-content.inheritor-warning-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   121. 弹窗内容区 - 继承者信息弹窗
   ============================================ */
.modal-content.inheritor-info-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   122. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   123. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   124. 弹窗内容区 - 继承者失败弹窗
   ============================================ */
.modal-content.inheritor-fail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   125. 弹窗内容区 - 继承者等待弹窗
   ============================================ */
.modal-content.inheritor-wait-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   126. 弹窗内容区 - 继承者进行中弹窗
   ============================================ */
.modal-content.inheritor-progress-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   127. 弹窗内容区 - 继承者暂停弹窗
   ============================================ */
.modal-content.inheritor-pause-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   128. 弹窗内容区 - 继承者恢复弹窗
   ============================================ */
.modal-content.inheritor-resume-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   129. 弹窗内容区 - 继承者停止弹窗
   ============================================ */
.modal-content.inheritor-stop-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   130. 弹窗内容区 - 继承者完成弹窗
   ============================================ */
.modal-content.inheritor-complete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   131. 弹窗内容区 - 继承者错误弹窗
   ============================================ */
.modal-content.inheritor-error-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   132. 弹窗内容区 - 继承者加载弹窗
   ============================================ */
.modal-content.inheritor-loading-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   133. 弹窗内容区 - 继承者空状态弹窗
   ============================================ */
.modal-content.inheritor-empty-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   134. 弹窗内容区 - 继承者提示弹窗
   ============================================ */
.modal-content.inheritor-hint-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   135. 弹窗内容区 - 继承者警告弹窗
   ============================================ */
.modal-content.inheritor-warning-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   136. 弹窗内容区 - 继承者信息弹窗
   ============================================ */
.modal-content.inheritor-info-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   137. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   138. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   139. 弹窗内容区 - 继承者失败弹窗
   ============================================ */
.modal-content.inheritor-fail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   140. 弹窗内容区 - 继承者等待弹窗
   ============================================ */
.modal-content.inheritor-wait-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   141. 弹窗内容区 - 继承者进行中弹窗
   ============================================ */
.modal-content.inheritor-progress-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   142. 弹窗内容区 - 继承者暂停弹窗
   ============================================ */
.modal-content.inheritor-pause-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   143. 弹窗内容区 - 继承者恢复弹窗
   ============================================ */
.modal-content.inheritor-resume-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   144. 弹窗内容区 - 继承者停止弹窗
   ============================================ */
.modal-content.inheritor-stop-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   145. 弹窗内容区 - 继承者完成弹窗
   ============================================ */
.modal-content.inheritor-complete-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   146. 弹窗内容区 - 继承者错误弹窗
   ============================================ */
.modal-content.inheritor-error-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   147. 弹窗内容区 - 继承者加载弹窗
   ============================================ */
.modal-content.inheritor-loading-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   148. 弹窗内容区 - 继承者空状态弹窗
   ============================================ */
.modal-content.inheritor-empty-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   149. 弹窗内容区 - 继承者提示弹窗
   ============================================ */
.modal-content.inheritor-hint-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   150. 弹窗内容区 - 继承者警告弹窗
   ============================================ */
.modal-content.inheritor-warning-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   151. 弹窗内容区 - 继承者信息弹窗
   ============================================ */
.modal-content.inheritor-info-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   152. 弹窗内容区 - 继承者确认弹窗
   ============================================ */
.modal-content.inheritor-confirm-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   153. 弹窗内容区 - 继承者成功弹窗
   ============================================ */
.modal-content.inheritor-success-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   154. 弹窗内容区 - 继承者失败弹窗
   ============================================ */
.modal-content.inheritor-fail-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   155. 弹窗内容区 - 继承者等待弹窗
   ============================================ */
.modal-content.inheritor-wait-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   156. 弹窗内容区 - 继承者进行中弹窗
   ============================================ */
.modal-content.inheritor-progress-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   157. 弹窗内容区 - 继承者暂停弹窗
   ============================================ */
.modal-content.inheritor-pause-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   158. 弹窗内容区 - 继承者恢复弹窗
   ============================================ */
.modal-content.inheritor-resume-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   159. 弹窗内容区 - 继承者停止弹窗
   ============================================ */
.modal-content.inheritor-stop-content .modal-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

/* ===========================================
   160. 弹窗内容区 - 继承