/**
 * 小龙AI工作台 v9.1.0 - 前端样式
 * 布局：左侧边栏 + 右侧对话区 + 独立微信支付二维码弹窗
 * 更新：隐藏子比主题底部 footer + 铺满底部不留空 + 夜间模式完善 + 微信扫码支付 + @提及面板
 */

/* ============ 全局容器 ============ */
/* xpo-app 铺满底部不留空白（JS 动态计算精确高度） */
.xpo-app {
    display: flex;
    min-height: 100vh;
    margin: -30px auto 0;
    background: var(--main-bg-color, #fff);
    border-radius: var(--main-radius, 12px);
    box-shadow: var(--main-shadow, 0 2px 20px rgba(0,0,0,.06));
    overflow: hidden;
    border: 1px solid var(--main-border-color, #eee);
}

/* ============ 左侧边栏 ============ */
.xpo-sidebar {
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    background: var(--main-sub-bg, #fafafa);
    border-right: 1px solid var(--main-border-color, #eee);
}
/* 侧栏上半部分（固定不滚动，让下拉菜单自由展开） */
.xpo-sidebar-top {
    flex-shrink: 0;
}
.xpo-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--main-color, #1677ff);
    flex-shrink: 0;
}

/* 用户认证标识 */
.xpo-user-verify-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px 12px;
    font-size: 11px;
    color: #52c41a;
    border-bottom: 1px solid var(--main-border-color, #eee);
    flex-shrink: 0;
}
.xpo-user-verify-badge .xpo-verify-icon {
    font-size: 13px;
}
.xpo-user-verify-badge .xpo-verify-text {
    font-weight: 600;
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    padding: 1px 8px;
    border-radius: 10px;
    color: #389e0d;
}
.xpo-user-verify-badge .xpo-verify-name {
    color: var(--main-sub-color, #999);
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

/* 模式切换 */
.xpo-mode-switch {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    flex-shrink: 0;
}
.xpo-mode-btn {
    flex: 1;
    padding: 10px 8px;
    border: 1.5px solid var(--main-border-color, #e0e0e0);
    border-radius: 10px;
    background: var(--main-bg-color, #fff);
    cursor: pointer;
    text-align: center;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--main-sub-color, #888);
}
.xpo-mode-btn small {
    font-size: 10px;
    font-weight: 400;
    opacity: .7;
}
.xpo-mode-btn.active {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.06);
    color: var(--main-color, #1677ff);
}
.xpo-mode-btn:hover:not(.active) {
    border-color: var(--main-color-light, #bbb);
}

/* VIP 升级按钮（模式切换中非VIP用户的共享模式入口） */
.xpo-mode-vip-upgrade {
    text-decoration: none;
    background: #fff7e6 !important;
    border-color: #ffd591 !important;
    color: #d46b08 !important;
    opacity: .75;
}
.xpo-mode-vip-upgrade:hover {
    opacity: 1;
    border-color: #fa8c16 !important;
    background: #fff1d1 !important;
    text-decoration: none;
}
.xpo-mode-vip-upgrade small {
    color: #d46b08 !important;
}

/* 侧栏分区 */
.xpo-side-section {
    padding: 10px 14px;
    flex-shrink: 0;
}
.xpo-side-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color, #333);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

/* 模型下拉框 */
.xpo-model-dropdown-wrap {
    position: relative;
}
.xpo-model-display {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--main-border-color, #ddd);
    border-radius: 8px;
    font-size: 13px;
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #333);
    cursor: pointer;
    transition: border .2s;
    -webkit-appearance: none;
    appearance: none;
}
.xpo-model-display:hover {
    border-color: var(--main-color, #1677ff);
}
.xpo-model-display.open {
    border-color: var(--main-color, #1677ff);
    border-radius: 8px 8px 0 0;
}
.xpo-model-display-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xpo-model-display-arrow {
    margin-left: 8px;
    font-size: 10px;
    color: var(--main-sub-color, #999);
    transition: transform .25s;
}
.xpo-model-display.open .xpo-model-display-arrow {
    transform: rotate(180deg);
}
.xpo-model-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-color, #1677ff);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    max-height: 220px;
    overflow-y: auto;
}
.xpo-model-dropdown.open {
    display: block;
}
.xpo-model-dropdown::-webkit-scrollbar { width: 4px; }
.xpo-model-dropdown::-webkit-scrollbar-thumb { background: var(--main-border-color, #ddd); border-radius: 2px; }

/* 模型列表 */
.xpo-model-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}
.xpo-model-list::-webkit-scrollbar { width: 4px; }
.xpo-model-list::-webkit-scrollbar-thumb { background: var(--main-border-color, #ddd); border-radius: 2px; }
.xpo-model-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
    font-size: 12px;
    color: var(--main-color, #333);
    border: 1.5px solid transparent;
    background: var(--main-bg-color, #fff);
}
.xpo-model-opt:hover {
    background: rgba(22,119,255,.04);
}
.xpo-model-opt.active {
    background: rgba(22,119,255,.08);
    border-color: var(--main-color, #1677ff);
}
.xpo-model-opt .model-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}
.xpo-model-opt .vis-badge {
    font-size: 10px;
    font-weight: 400;
    margin-left: 2px;
}
.xpo-model-opt .pts-detail {
    font-size: 11px;
    color: var(--main-sub-color, #999);
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    gap: 3px;
    align-items: center;
}
.xpo-model-opt .cost-text {
    color: var(--main-color, #333);
    font-weight: 600;
}
.xpo-model-opt .cost-img {
    color: #fa8c16;
    font-weight: 500;
}
.xpo-model-opt .cost-vid {
    color: #eb2f96;
    font-weight: 500;
}
.xpo-model-opt.active .pts-detail .cost-text {
    color: var(--main-color, #1677ff);
}
.xpo-model-opt .own-free {
    color: #52c41a;
    font-weight: 600;
}

/* 模型选择（始终展开在侧栏内） */
.xpo-model-section {
    overflow: visible;
}
/* 当前选中模型显示 */
.xpo-selected-model-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(22,119,255,.06);
    border: 1px solid rgba(22,119,255,.15);
    font-size: 13px;
    gap: 8px;
}
.xpo-selected-model-label {
    color: var(--main-sub-color, #999);
    font-size: 11px;
    white-space: nowrap;
}
.xpo-selected-model-name {
    color: var(--main-color, #1677ff);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 无提示文字时的模型列表占位 */
.xpo-model-list-empty {
    font-size: 12px;
    color: var(--main-sub-color, #999);
    padding: 6px 2px;
}

/* 密钥输入 */
.xpo-key-input-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.xpo-side-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--main-border-color, #ddd);
    border-radius: 8px;
    font-size: 13px;
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #333);
    outline: none;
    transition: border .2s;
}
.xpo-side-input:focus {
    border-color: var(--main-color, #1677ff);
}
.xpo-key-eye {
    padding: 8px 10px;
    background: none;
    border: 1px solid var(--main-border-color, #ddd);
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: var(--main-sub-color, #999);
}

/* API Key 获取指引 */
.xpo-key-guide-toggle {
    margin-top: 8px;
    font-size: 11px;
    color: var(--main-color, #1677ff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    padding: 4px 0;
}
.xpo-key-guide-toggle:hover {
    opacity: .8;
}
.xpo-key-guide-arrow {
    display: inline-block;
    transition: transform .2s;
    font-size: 10px;
}

/* 覆盖模型下拉框限制，让教程指引内容完整展现 */
#xpo-key-guide-dropdown {
    max-height: none;
    overflow-y: visible;
    top: auto;
    bottom: 100%;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--main-color, #1677ff);
    border-bottom: none;
    box-shadow: 0 -4px 12px rgba(0,0,0,.1);
    margin-bottom: -1px;
}
#xpo-key-guide-btn.open {
    border-radius: 0 0 8px 8px;
}

/* 优化模板下拉 */
.xpo-side-input.xpo-template-select {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23999'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* 积分状态 */
.xpo-points-box {
    border-top: 1px solid var(--main-border-color, #eee);
    border-bottom: 1px solid var(--main-border-color, #eee);
    background: var(--main-bg-color, #fff);
    margin: 6px 14px;
    padding: 10px 12px;
    border-radius: 8px;
}
.xpo-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
    color: var(--main-sub-color, #888);
}
.xpo-stat-row strong {
    color: var(--main-color, #333);
    font-weight: 600;
}

/* 历史记录 */
.xpo-history-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}
.xpo-history-wrap::-webkit-scrollbar { width: 4px; }
.xpo-history-wrap::-webkit-scrollbar-thumb { background: var(--main-border-color, #ddd); border-radius: 2px; }
.xpo-history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.xpo-history-empty {
    text-align: center;
    color: var(--main-sub-color, #ccc);
    font-size: 11px;
    padding: 8px 0;
}
.xpo-history-item {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 1.3;
    color: var(--main-color, #333);
}
.xpo-history-item:hover {
    background: var(--main-bg-color, #fff);
    border-color: var(--main-border-color, #eee);
}
.xpo-history-item.active {
    background: rgba(22,119,255,.05);
    border-color: var(--main-color, #1677ff);
}
.xpo-history-item .xpo-h-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-weight: 500;
}
.xpo-history-item.active .xpo-h-title {
    font-weight: 700;
    color: var(--main-color, #1677ff);
}
.xpo-h-delete {
    font-size: 14px;
    opacity: 0;
    transition: opacity .15s;
    color: #ff4d4f;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 4px;
}
.xpo-history-item:hover .xpo-h-delete {
    opacity: .6;
}
.xpo-history-item:hover .xpo-h-delete:hover {
    opacity: 1;
}

/* 历史记录分页 */
.xpo-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 0 0;
    flex-shrink: 0;
}
.xpo-pg-btn {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--main-border-color, #e0e0e0);
    border-radius: 3px;
    background: var(--main-bg-color, #fff);
    color: var(--main-sub-color, #888);
    font-size: 9px;
    cursor: pointer;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xpo-pg-btn:hover:not(:disabled):not(.active) {
    border-color: var(--main-color, #1677ff);
    color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-pg-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.xpo-pg-btn.active {
    background: var(--main-color, #1677ff);
    border-color: var(--main-color, #1677ff);
    color: #fff;
    font-weight: 600;
}
.xpo-pg-nav {
    font-weight: 600;
    font-size: 10px;
}
.xpo-pg-ellipsis {
    width: 18px;
    text-align: center;
    font-size: 9px;
    color: var(--main-sub-color, #bbb);
    user-select: none;
}

/* ============ 右侧主区域 ============ */
.xpo-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 顶部栏 */
.xpo-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--main-border-color, #eee);
    flex-shrink: 0;
    background: var(--main-bg-color, #fff);
}

/* 积分费用总结横幅 */
.xpo-cost-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f0f5ff 0%, #f6f9ff 100%);
    border-bottom: 1px solid var(--main-border-color, #e8ecf0);
    font-size: 13px;
    color: var(--main-sub-color, #666);
    flex-shrink: 0;
}
.xpo-cost-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}
.xpo-cost-item strong {
    font-weight: 700;
    font-size: 15px;
}
.xpo-cost-item.cost-text-icon strong { color: #1677ff; }
.xpo-cost-item.cost-img-icon strong { color: #fa8c16; }
.xpo-cost-item.cost-vid-icon strong { color: #eb2f96; }
.xpo-cost-item.cost-disabled {
    opacity: .35;
    text-decoration: line-through;
}
.xpo-cost-sep {
    width: 1px;
    height: 20px;
    background: var(--main-border-color, #dde);
    display: inline-block;
}
.xpo-cost-label {
    font-size: 11px;
    color: var(--main-sub-color, #999);
    margin-right: 2px;
    font-weight: 400;
}
.xpo-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xpo-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xpo-new-chat-btn {
    height: 32px;
    border-radius: 6px;
    border: 1.5px solid var(--main-border-color, #e0e0e0);
    background: var(--main-bg-color, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--main-sub-color, #999);
    transition: all .2s;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
}
.xpo-new-chat-btn:hover {
    color: var(--main-color, #1677ff);
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-tutorial-btn {
    height: 32px;
    border-radius: 6px;
    border: 1.5px solid var(--main-border-color, #e0e0e0);
    background: var(--main-bg-color, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--main-sub-color, #999);
    transition: all .2s;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
}
.xpo-tutorial-btn:hover {
    color: #fa8c16;
    border-color: #fa8c16;
    background: rgba(250,140,22,.04);
}
.xpo-current-model {
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color, #333);
}
.xpo-mode-badge {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(22,119,255,.1);
    color: var(--main-color, #1677ff);
    font-weight: 500;
}
.xpo-mode-badge.own-badge {
    background: rgba(82,196,26,.1);
    color: #52c41a;
}

/* 对话区 */
.xpo-chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--main-bg-color, #fff);
}
.xpo-chat-area::-webkit-scrollbar { width: 5px; }
.xpo-chat-area::-webkit-scrollbar-thumb { background: var(--main-border-color, #ddd); border-radius: 3px; }

/* 欢迎区 */
.xpo-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    text-align: center;
    padding: 24px 20px 40px;
}
.xpo-welcome-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--main-color, #1677ff), #69c0ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(22,119,255,.25);
}
.xpo-welcome h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--main-color, #333);
    margin: 0 0 8px;
}
.xpo-welcome > p {
    font-size: 14px;
    color: var(--main-sub-color, #999);
    margin: 0 0 28px;
}
.xpo-welcome-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 500px;
}
.xpo-tip-item {
    padding: 10px 18px;
    border: 1px solid var(--main-border-color, #eee);
    border-radius: 20px;
    font-size: 13px;
    color: var(--main-sub-color, #888);
    cursor: pointer;
    transition: all .2s;
    background: var(--main-bg-color, #fff);
}
.xpo-tip-item:hover {
    border-color: var(--main-color, #1677ff);
    color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.03);
}

/* 消息气泡 */
.xpo-msg {
    display: flex;
    gap: 10px;
    max-width: 80%;
    animation: xpo-fade-in .3s ease;
}
@keyframes xpo-fade-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.xpo-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.xpo-msg.ai {
    align-self: flex-start;
}
.xpo-msg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.xpo-msg.user .xpo-msg-avatar {
    background: var(--main-color, #1677ff);
    color: #fff;
}
.xpo-msg.ai .xpo-msg-avatar {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    color: #fff;
}
.xpo-msg-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
    white-space: pre-wrap;
}
.xpo-msg.user .xpo-msg-bubble {
    background: var(--main-color, #1677ff);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.xpo-msg.ai .xpo-msg-bubble {
    background: var(--main-sub-bg, #f5f5f5);
    color: var(--main-color, #333);
    border-bottom-left-radius: 4px;
}
.xpo-msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.xpo-msg-file-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    background: rgba(255,255,255,.2);
    color: inherit;
}
.xpo-msg.ai .xpo-msg-file-tag {
    background: var(--main-border-color, #e8e8e8);
}

/* AI 消息底部操作 */
.xpo-msg-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.xpo-msg-copy,
.xpo-msg-retry,
.xpo-msg-followup {
    font-size: 12px;
    color: var(--main-sub-color, #bbb);
    cursor: pointer;
    background: none;
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all .15s;
}
.xpo-msg-copy:hover,
.xpo-msg-retry:hover,
.xpo-msg-followup:hover {
    color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.06);
}

/* v8.4.3: 用户消息复制按钮 */
.xpo-msg-bubble .xpo-msg-actions-user {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding: 0;
}
.xpo-msg.user .xpo-msg-bubble .xpo-msg-actions-user .xpo-msg-copy {
    color: rgba(255,255,255,0.85);
}
.xpo-msg.user .xpo-msg-bubble .xpo-msg-actions-user .xpo-msg-copy:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}
/* AI 输出字数 */
.xpo-output-chars {
    margin-left: auto;
    font-size: 11px;
    color: var(--main-sub-color, #aaa);
    white-space: nowrap;
    align-self: center;
}

/* ============ 底部输入栏 ============ */
.xpo-input-bar {
    position: relative; /* 为 @ 提及下拉提供定位上下文 */
    padding: 12px 20px 16px;
    border-top: 2px solid var(--main-border-color, #d9d9d9);
    flex-shrink: 0;
    background: var(--main-bg-color, #fff);
    box-shadow: 0 -2px 12px rgba(0,0,0,.04);
}
/* 移动端优化：输入栏始终可见 */
@media (max-width: 768px) {
    .xpo-input-bar {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
}
.xpo-upload-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--main-border-color, #e0e0e0);
    border-radius: 50%;
    background: var(--main-bg-color, #fff);
    cursor: pointer;
    color: var(--main-sub-color, #999);
    transition: all .2s;
    vertical-align: bottom;
    margin-right: 10px;
}
.xpo-upload-trigger:hover {
    color: var(--main-color, #1677ff);
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}

/* 文件标签 */
.xpo-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding-left: 48px;
}
.xpo-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    background: var(--main-sub-bg, #f0f0f0);
    border: 1px solid var(--main-border-color, #eee);
    color: var(--main-color, #333);
    max-width: 200px;
}
.xpo-file-chip .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.xpo-file-chip .remove {
    cursor: pointer;
    font-size: 14px;
    color: var(--main-sub-color, #bbb);
    line-height: 1;
    padding: 0 2px;
}
.xpo-file-chip .remove:hover { color: #ff4d4f; }
.xpo-file-chip .thumb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

/* 输入行 */
.xpo-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid var(--main-color, #1677ff);
    border-radius: 16px;
    background: var(--main-bg-color, #fff);
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 1px 6px rgba(22,119,255,.08);
}
.xpo-input-wrap:focus-within {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 1px 10px rgba(22,119,255,.15);
}
.xpo-input-wrap:focus-within {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 0 0 3px rgba(22,119,255,.08);
    background: var(--main-bg-color, #fff);
}
.xpo-chat-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--main-color, #333);
    background: transparent;
    font-family: inherit;
    min-height: 24px;
    max-height: 160px;
    padding: 2px 0;
}
.xpo-chat-input::placeholder {
    color: var(--main-sub-color, #ccc);
}
.xpo-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--main-border-color, #e0e0e0);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s;
    padding: 0;
}
.xpo-send-btn:not(:disabled) {
    background: var(--main-color, #1677ff);
    box-shadow: 0 2px 8px rgba(22,119,255,.3);
}
.xpo-send-btn:not(:disabled):hover {
    filter: brightness(1.1);
}
.xpo-send-btn:disabled {
    cursor: not-allowed;
    opacity: .4;
}

/* 输入底部信息 */
.xpo-input-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--main-sub-color, #ccc);
    padding: 0 4px;
}
.xpo-advanced-link {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.xpo-advanced-link:hover { color: var(--main-color, #1677ff); }
.xpo-arrow-d { font-size: 10px; margin-left: 2px; }

/* 高级设置 */
.xpo-advanced-drop {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--main-sub-bg, #f8f8f8);
    border: 1px solid var(--main-border-color, #eee);
}
.xpo-adv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--main-sub-color, #888);
}
.xpo-adv-row:last-child { margin-bottom: 0; }
.xpo-adv-row label { min-width: 100px; font-size: 12px; }
.xpo-adv-row input[type="range"] { flex: 1; accent-color: var(--main-color, #1677ff); }

/* ============ Toast ============ */
.xpo-toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    animation: xpo-toast-in .3s ease;
    pointer-events: none;
}
.xpo-toast-success { background: #52c41a; color: #fff; }
.xpo-toast-error { background: #ff4d4f; color: #fff; }
.xpo-toast-info { background: var(--main-color, #1677ff); color: #fff; }
@keyframes xpo-toast-in { from { opacity:0; transform:translateX(-50%) translateY(-16px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.xpo-toast-out { animation: xpo-toast-out .25s ease forwards; }
@keyframes xpo-toast-out { to { opacity:0; transform:translateX(-50%) translateY(-16px); } }

/* ============ 自有密钥免积分会员提示条 ============ */
.xpo-own-key-sub-banner {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #fff7e6 0%, #fff1b8 100%);
    border: 1px solid #ffd591;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #873800;
}
.xpo-sub-banner-text {
    margin-bottom: 10px;
}
.xpo-sub-banner-icon {
    margin-right: 4px;
}
.xpo-sub-banner-btn {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: #fa8c16;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.xpo-sub-banner-btn:hover {
    background: #d46b08;
}
body.dark-theme .xpo-own-key-sub-banner,
body[data-theme="dark"] .xpo-own-key-sub-banner,
.dark-mode .xpo-own-key-sub-banner {
    background: linear-gradient(135deg, #2b2113 0%, #3d2e0b 100%);
    border-color: #7c4d00;
    color: #ffbb52;
}
body.dark-theme .xpo-sub-banner-btn,
body[data-theme="dark"] .xpo-sub-banner-btn,
.dark-mode .xpo-sub-banner-btn {
    background: #d48806;
}
body.dark-theme .xpo-sub-banner-btn:hover,
body[data-theme="dark"] .xpo-sub-banner-btn:hover,
.dark-mode .xpo-sub-banner-btn:hover {
    background: #ad6800;
}

/* ============ 手机菜单按钮 ============ */
.xpo-mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.xpo-mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--main-color, #333);
    border-radius: 1px;
}

/* 侧栏遮罩 */
.xpo-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 99;
}

/* ============ 响应式 ============ */
@media (max-width: 768px) {
    .xpo-app {
        height: auto;
        min-height: 100vh;
        max-height: none;
        border-radius: 0;
        margin: 0;
        border: none;
    }
    .xpo-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 100;
        width: 260px;
        min-width: 260px;
        transition: left .25s ease;
        box-shadow: 2px 0 20px rgba(0,0,0,.1);
        border-radius: 0 12px 12px 0;
    }
    .xpo-sidebar.open {
        left: 0;
    }
    .xpo-sidebar-overlay.active {
        display: block;
    }
    .xpo-mobile-menu-btn { display: flex; }
    .xpo-msg { max-width: 92%; }
    .xpo-chat-area { padding: 12px; }
    .xpo-input-bar { padding: 10px 12px 14px; }
    .xpo-welcome h2 { font-size: 18px; }
    .xpo-welcome-tips { flex-direction: column; align-items: center; }
    .xpo-file-chips { padding-left: 0; }
}
@media (max-width: 480px) {
    .xpo-sidebar { width: calc(100vw - 40px); min-width: 0; }
    .xpo-msg { max-width: 96%; }
    .xpo-msg-bubble { font-size: 13px; padding: 10px 14px; }
}

/* ============ 深色模式 ============ */
body.dark-theme .xpo-app,
body[data-theme="dark"] .xpo-app,
.dark-mode .xpo-app {
    background: #111827;
    border-color: #1f2937;
}
body.dark-theme .xpo-sidebar,
body[data-theme="dark"] .xpo-sidebar,
.dark-mode .xpo-sidebar {
    background: #0f172a;
    border-color: #1f2937;
}
body.dark-theme .xpo-topbar,
body[data-theme="dark"] .xpo-topbar,
.dark-mode .xpo-topbar,
body.dark-theme .xpo-chat-area,
body[data-theme="dark"] .xpo-chat-area,
.dark-mode .xpo-chat-area,
body.dark-theme .xpo-input-bar,
body[data-theme="dark"] .xpo-input-bar,
.dark-mode .xpo-input-bar {
    background: #111827;
    border-color: #1f2937;
}
body.dark-theme .xpo-input-wrap,
body[data-theme="dark"] .xpo-input-wrap,
.dark-mode .xpo-input-wrap {
    background: #1f2937;
    border-color: #374151;
}
body.dark-theme .xpo-chat-input,
body[data-theme="dark"] .xpo-chat-input,
.dark-mode .xpo-chat-input {
    color: #e5e7eb;
}
body.dark-theme .xpo-msg.ai .xpo-msg-bubble,
body[data-theme="dark"] .xpo-msg.ai .xpo-msg-bubble,
.dark-mode .xpo-msg.ai .xpo-msg-bubble {
    background: #1f2937;
    color: #e5e7eb;
}
body.dark-theme .xpo-side-input,
body[data-theme="dark"] .xpo-side-input,
.dark-mode .xpo-side-input {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}
body.dark-theme .xpo-mode-btn,
body[data-theme="dark"] .xpo-mode-btn,
.dark-mode .xpo-mode-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-theme .xpo-model-opt,
body[data-theme="dark"] .xpo-model-opt,
.dark-mode .xpo-model-opt {
    background: transparent;
    color: #d1d5db;
}
body.dark-theme .xpo-model-opt.active,
body[data-theme="dark"] .xpo-model-opt.active,
.dark-mode .xpo-model-opt.active {
    background: rgba(59,130,246,.15);
}
body.dark-theme .xpo-points-box,
body[data-theme="dark"] .xpo-points-box,
.dark-mode .xpo-points-box {
    background: #1f2937;
}
body.dark-theme .xpo-history-item:hover,
body[data-theme="dark"] .xpo-history-item:hover,
.dark-mode .xpo-history-item:hover {
    background: #1f2937;
}
body.dark-theme .xpo-file-chip,
body[data-theme="dark"] .xpo-file-chip,
.dark-mode .xpo-file-chip {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}
body.dark-theme .xpo-advanced-drop,
body[data-theme="dark"] .xpo-advanced-drop,
.dark-mode .xpo-advanced-drop {
    background: #1f2937;
    border-color: #374151;
}
body.dark-theme .xpo-tip-item,
body[data-theme="dark"] .xpo-tip-item,
.dark-mode .xpo-tip-item {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}

/* 深色模式: 模型列表 */
body.dark-theme .xpo-model-opt,
body[data-theme="dark"] .xpo-model-opt,
.dark-mode .xpo-model-opt {
    background: #1f2937;
    color: #d1d5db;
}
body.dark-theme .xpo-model-opt:hover,
body[data-theme="dark"] .xpo-model-opt:hover,
.dark-mode .xpo-model-opt:hover {
    background: rgba(59,130,246,.12);
}
body.dark-theme .xpo-model-opt.active,
body[data-theme="dark"] .xpo-model-opt.active,
.dark-mode .xpo-model-opt.active {
    background: rgba(59,130,246,.15);
    border-color: #3b82f6;
}
body.dark-theme .xpo-model-opt .pts-detail,
body[data-theme="dark"] .xpo-model-opt .pts-detail,
.dark-mode .xpo-model-opt .pts-detail {
    color: #9ca3af;
}
/* 深色模式: 模型下拉框 */
body.dark-theme .xpo-model-display,
body[data-theme="dark"] .xpo-model-display,
.dark-mode .xpo-model-display {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}
body.dark-theme .xpo-selected-model-display,
body[data-theme="dark"] .xpo-selected-model-display,
.dark-mode .xpo-selected-model-display {
    background: rgba(59,130,246,.08);
    border-color: rgba(59,130,246,.18);
}
body.dark-theme .xpo-selected-model-name,
body[data-theme="dark"] .xpo-selected-model-name,
.dark-mode .xpo-selected-model-name {
    color: #60a5fa;
}
body.dark-theme .xpo-model-dropdown,
body[data-theme="dark"] .xpo-model-dropdown,
.dark-mode .xpo-model-dropdown {
    background: #1f2937;
    border-color: #3b82f6;
}

/* 深色模式: 历史分页 */
body.dark-theme .xpo-pg-btn,
body[data-theme="dark"] .xpo-pg-btn,
.dark-mode .xpo-pg-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-theme .xpo-pg-btn.active,
body[data-theme="dark"] .xpo-pg-btn.active,
.dark-mode .xpo-pg-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
body.dark-theme .xpo-pg-ellipsis,
body[data-theme="dark"] .xpo-pg-ellipsis,
.dark-mode .xpo-pg-ellipsis {
    color: #6b7280;
}
body.dark-theme .xpo-new-chat-btn,
body[data-theme="dark"] .xpo-new-chat-btn,
.dark-mode .xpo-new-chat-btn,
body.dark-theme .xpo-tutorial-btn,
body[data-theme="dark"] .xpo-tutorial-btn,
.dark-mode .xpo-tutorial-btn {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-theme .xpo-new-chat-btn:hover,
body[data-theme="dark"] .xpo-new-chat-btn:hover,
.dark-mode .xpo-new-chat-btn:hover {
    color: #60a5fa;
    border-color: #3b82f6;
}

/* 深色模式: 积分费用总结横幅 */
body.dark-theme .xpo-cost-summary,
body[data-theme="dark"] .xpo-cost-summary,
.dark-mode .xpo-cost-summary {
    background: linear-gradient(135deg, #1e293b 0%, #1a2332 100%);
    border-color: #2d3748;
    color: #9ca3af;
}
body.dark-theme .xpo-cost-sep,
body[data-theme="dark"] .xpo-cost-sep,
.dark-mode .xpo-cost-sep {
    background: #2d3748;
}

/* ============ v9.4.2: 自密会员开通弹窗美化 ============ */
.xpo-own-key-sub-panel .xpo-promo-panel-content {
    max-width: 460px;
    width: 92%;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.xpo-sub-content,
.xpo-pay-content,
.xpo-qr-content {
    padding: 28px 26px 30px !important;
}
.xpo-sub-header {
    text-align: center;
    margin-bottom: 20px;
}
.xpo-sub-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 8px;
}
.xpo-sub-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
}
.xpo-sub-subtitle {
    font-size: 13px;
    color: #6b7280;
}
.xpo-sub-subtitle span {
    color: #ff4d4f;
    font-weight: 700;
}
.xpo-sub-active-badge {
    padding: 10px 14px;
    background: #d1fae5;
    border: 1px solid #10b981;
    border-radius: 10px;
    color: #065f46;
    font-size: 13px;
    margin-bottom: 18px;
    text-align: center;
}
.xpo-sub-tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.xpo-sub-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    cursor: pointer;
    transition: all .18s ease;
    background: #fff;
}
.xpo-sub-tier:hover {
    border-color: #f59e0b;
    box-shadow: 0 6px 20px rgba(245,158,11,.12);
    transform: translateY(-1px);
}
.xpo-sub-tier-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}
.xpo-sub-tier-meta {
    font-size: 13px;
    color: #6b7280;
}
.xpo-sub-tier-meta strong {
    color: #ff4d4f;
    font-size: 16px;
}
.xpo-sub-tier-btn {
    flex: 0 0 auto;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #fa8c16 0%, #ffbb52 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s;
}
.xpo-sub-tier-btn:hover {
    transform: scale(1.03);
}

/* 支付方式选择 */
.xpo-pay-head {
    text-align: center;
    margin-bottom: 22px;
}
.xpo-pay-title {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 6px;
}
.xpo-pay-tier {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}
.xpo-pay-price {
    margin-top: 6px;
    color: #ff4d4f;
}
.xpo-pay-price strong {
    font-size: 32px;
}
.xpo-pay-price span {
    font-size: 14px;
}
.xpo-pay-duration {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.xpo-pay-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}
.xpo-pay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xpo-pay-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all .18s ease;
    background: #fff;
}
.xpo-pay-method:hover {
    border-color: #1677ff;
    background: #f0f7ff;
}
.xpo-pay-method-icon {
    font-size: 22px;
    width: 32px;
    text-align: center;
}
.xpo-pay-method-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}
.xpo-pay-method-extra {
    font-size: 12px;
    color: #9ca3af;
}

/* 扫码支付 */
.xpo-qr-head {
    text-align: center;
    margin-bottom: 18px;
}
.xpo-qr-icon {
    font-size: 36px;
    margin-bottom: 4px;
}
.xpo-qr-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}
.xpo-qr-tip {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.xpo-qr-box {
    width: 220px;
    height: 220px;
    margin: 0 auto 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xpo-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.xpo-qr-fallback {
    padding: 16px;
    text-align: center;
}
.xpo-qr-url {
    font-size: 11px;
    color: #6b7280;
    word-break: break-all;
    margin-bottom: 10px;
    max-height: 80px;
    overflow: auto;
}
.xpo-qr-copy {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #1677ff;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.xpo-qr-status {
    text-align: center;
    font-size: 14px;
    color: #1677ff;
    font-weight: 600;
    margin-bottom: 6px;
}
.xpo-qr-status.timeout {
    color: #ff4d4f;
}
.xpo-qr-help {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

/* 深色模式: 自密会员弹窗 */
body.dark-theme .xpo-own-key-sub-panel .xpo-promo-panel-content,
body[data-theme="dark"] .xpo-own-key-sub-panel .xpo-promo-panel-content,
.dark-mode .xpo-own-key-sub-panel .xpo-promo-panel-content {
    background: #1f2937;
}
body.dark-theme .xpo-sub-title,
body[data-theme="dark"] .xpo-sub-title,
.dark-mode .xpo-sub-title,
body.dark-theme .xpo-pay-tier,
body[data-theme="dark"] .xpo-pay-tier,
.dark-mode .xpo-pay-tier,
body.dark-theme .xpo-qr-title,
body[data-theme="dark"] .xpo-qr-title,
.dark-mode .xpo-qr-title,
body.dark-theme .xpo-pay-method-name,
body[data-theme="dark"] .xpo-pay-method-name,
.dark-mode .xpo-pay-method-name,
body.dark-theme .xpo-sub-tier-name,
body[data-theme="dark"] .xpo-sub-tier-name,
.dark-mode .xpo-sub-tier-name {
    color: #f3f4f6;
}
body.dark-theme .xpo-sub-tier,
body[data-theme="dark"] .xpo-sub-tier,
.dark-mode .xpo-sub-tier,
body.dark-theme .xpo-pay-method,
body[data-theme="dark"] .xpo-pay-method,
.dark-mode .xpo-pay-method {
    background: #111827;
    border-color: #374151;
}
body.dark-theme .xpo-sub-tier:hover,
body[data-theme="dark"] .xpo-sub-tier:hover,
.dark-mode .xpo-sub-tier:hover,
body.dark-theme .xpo-pay-method:hover,
body[data-theme="dark"] .xpo-pay-method:hover,
.dark-mode .xpo-pay-method:hover {
    border-color: #f59e0b;
    background: #2a1f0d;
}
body.dark-theme .xpo-qr-box,
body[data-theme="dark"] .xpo-qr-box,
.dark-mode .xpo-qr-box {
    background: #fff;
}


/* ============ 深色模式: 推广/支付弹窗 ============ */
body.dark-theme .xpo-promo-panel-content,
body[data-theme="dark"] .xpo-promo-panel-content,
.dark-mode .xpo-promo-panel-content {
    background: #1f2937;
    color: #e5e7eb;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
body.dark-theme .xpo-promo-panel-close,
body[data-theme="dark"] .xpo-promo-panel-close,
.dark-mode .xpo-promo-panel-close {
    background: rgba(255,255,255,.08);
    color: #d1d5db;
}
body.dark-theme .xpo-promo-panel-close:hover,
body[data-theme="dark"] .xpo-promo-panel-close:hover,
.dark-mode .xpo-promo-panel-close:hover {
    background: rgba(255,255,255,.15);
    color: #f3f4f6;
}
/* 推广弹窗内文字 */
body.dark-theme .xpo-promo-panel-content h3,
body.dark-theme .xpo-promo-panel-content h2,
body[data-theme="dark"] .xpo-promo-panel-content h3,
body[data-theme="dark"] .xpo-promo-panel-content h2,
.dark-mode .xpo-promo-panel-content h3,
.dark-mode .xpo-promo-panel-content h2 {
    color: #f3f4f6;
}
body.dark-theme .xpo-promo-panel-content p,
body[data-theme="dark"] .xpo-promo-panel-content p,
.dark-mode .xpo-promo-panel-content p {
    color: #d1d5db;
}

/* 深色模式: 购买信息弹窗 */
body.dark-theme .xpo-purchase-body h3,
body[data-theme="dark"] .xpo-purchase-body h3,
.dark-mode .xpo-purchase-body h3 {
    color: #f3f4f6;
}
body.dark-theme .xpo-purchase-info-table td,
body[data-theme="dark"] .xpo-purchase-info-table td,
.dark-mode .xpo-purchase-info-table td {
    border-bottom-color: #374151;
    color: #d1d5db;
}
body.dark-theme .xpo-purchase-info-table td:last-child,
body[data-theme="dark"] .xpo-purchase-info-table td:last-child,
.dark-mode .xpo-purchase-info-table td:last-child {
    color: #e5e7eb;
}
/* ================================================================
   微信扫码支付弹窗
   ================================================================ */
.xpo-wxpay-modal-content {
    background: #fff;
}
.xpo-wxpay-qr-wrap {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.xpo-wxpay-qr-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* 微信支付深色模式：弹窗主体暗色，二维码区域保持白色 */
body.dark-theme .xpo-wxpay-modal-content,
body[data-theme="dark"] .xpo-wxpay-modal-content,
.dark-mode .xpo-wxpay-modal-content {
    background: #1f2937;
    color: #e5e7eb;
}
body.dark-theme .xpo-wxpay-qr-wrap,
body[data-theme="dark"] .xpo-wxpay-qr-wrap,
.dark-mode .xpo-wxpay-qr-wrap {
    background: #fff;
}
/* 微信扫码支付支付状态文字 */
#xpo-payment-status {
    font-size: 13px;
    color: var(--main-color, #1677ff);
}
body.dark-theme #xpo-payment-status,
body[data-theme="dark"] #xpo-payment-status,
.dark-mode #xpo-payment-status {
    color: #60a5fa;
}
/* 微信扫码支付弹窗 */
.xpo-wxpay-modal-content {
    background: #fff;
}
.xpo-wxpay-qr-wrap {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.xpo-wxpay-qr-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* 扫码支付深色模式 */
body.dark-theme .xpo-wxpay-modal-content,
body[data-theme="dark"] .xpo-wxpay-modal-content,
.dark-mode .xpo-wxpay-modal-content {
    background: #1f2937;
    color: #e5e7eb;
}
body.dark-theme .xpo-wxpay-qr-wrap,
body[data-theme="dark"] .xpo-wxpay-qr-wrap,
.dark-mode .xpo-wxpay-qr-wrap {
    background: #fff;
    /* 二维码区域保持白色背景，确保扫码成功 */
}

/* ================================================================
   我的主体 - 侧栏
   ================================================================ */
.xpo-subjects-section { margin-top: 2px; }
.xpo-subject-create-btn {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px dashed var(--main-border-color, #ddd);
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #1677ff); font-size: 16px; font-weight: 700;
    line-height: 24px; padding: 0; cursor: pointer; text-align: center; transition: all .2s;
}
.xpo-subject-create-btn:hover { background: var(--main-color, #1677ff); color: #fff; border-color: var(--main-color, #1677ff); }
.xpo-subject-create-full-btn { font-weight: 600; }
.xpo-subjects-list { max-height: 160px; overflow-y: auto; }
.xpo-subjects-empty { font-size: 11px; color: var(--main-sub-color, #aaa); padding: 8px 0; text-align: center; }
.xpo-subject-card {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0;
    border-radius: 8px; background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #eee); cursor: pointer; transition: all .2s; position: relative;
}
.xpo-subject-card:hover { border-color: var(--main-color, #1677ff); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.xpo-subject-preview {
    width: 36px; height: 36px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: #f0f0f0;
}
.xpo-subject-thumb { width: 100%; height: 100%; object-fit: cover; }
.xpo-subject-video-thumb { width: 100%; height: 100%; }
.xpo-subject-video-thumb video { width: 100%; height: 100%; object-fit: cover; }
.xpo-subject-icon { font-size: 20px; }
.xpo-subject-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xpo-subject-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpo-subject-count { font-size: 10px; color: var(--main-sub-color, #999); }
.xpo-subject-del {
    position: absolute; top: 4px; right: 6px; width: 18px; height: 18px;
    line-height: 16px; font-size: 12px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.1); color: #999; cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity .2s;
}
.xpo-subject-card:hover .xpo-subject-del { opacity: 1; }
.xpo-subject-del:hover { background: #ff4d4f; color: #fff; }

/* ============ 设置主体弹窗（即梦风格） ============ */
.xpo-subject-ref-wrap { margin-bottom: 16px; }
.xpo-subject-ref-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #333; }
.xpo-subject-ref-upload {
    min-height: 140px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px; padding: 20px 16px; cursor: pointer;
    transition: border-color .25s, background .25s;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
    background: #fafafa;
}
.xpo-subject-ref-upload:hover, .xpo-subject-dragover {
    border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04);
}
.xpo-subject-ref-placeholder { text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; }
.xpo-subject-ref-plus {
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--main-border-color, #d9d9d9);
    color: #999; font-size: 28px; font-weight: 300; line-height: 44px; text-align: center;
    transition: all .25s; user-select: none;
}
.xpo-subject-ref-upload:hover .xpo-subject-ref-plus { border-color: var(--main-color, #1677ff); color: var(--main-color, #1677ff); }
.xpo-subject-file-previews { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.xpo-subject-file-chip {
    display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative;
    width: 150px;
}
.xpo-subject-file-chip img {
    width: 150px; height: 150px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--main-border-color, #e8e8e8);
}
.xpo-subject-file-chip .xpo-subject-file-icon { font-size: 36px; }
.xpo-subject-file-chip .xpo-subject-file-thumb-wrap {
    width: 150px; height: 150px; border-radius: 10px; overflow: hidden;
    position: relative; border: 1px solid var(--main-border-color, #e8e8e8);
    background: #000;
}
.xpo-subject-file-chip .xpo-subject-file-thumb-wrap video {
    width: 100%; height: 100%; object-fit: cover;
}
.xpo-subject-file-chip .xpo-subject-file-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55);
    color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.xpo-subject-file-chip .xpo-subject-file-name {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #666;
}
.xpo-subject-file-remove {
    position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 2;
}

/* v7.8.5: 角色参考图网格布局（正面大图+侧面/反面小图） */
.xpo-subj-character-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 320px;
}
.xpo-subj-char-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
}
.xpo-subj-char-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-char-slot:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.xpo-subj-char-slot:nth-child(2) { grid-row: 1; grid-column: 2; }
.xpo-subj-char-slot:nth-child(3) { grid-row: 2; grid-column: 2; }
.xpo-subj-char-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-char-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-char-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-char-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-char-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-char-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v8.1.0: 背景/道具参考图网格布局（3列等宽） */
.xpo-subj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}
.xpo-subj-grid-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
    min-height: 120px;
}
.xpo-subj-grid-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-grid-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-grid-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-grid-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-grid-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-grid-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-grid-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v7.9.0: 角色声音区（label 关联 input） */
#xpo-subj-voice-area {
    position: relative; display: block;
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
#xpo-subj-voice-input { display: none; }
#xpo-subj-voice-area .xpo-subj-voice-preview audio { max-width: 100%; vertical-align: middle; }


/* v7.8.5: 角色参考图网格布局（正面大图+侧面/反面小图） */
.xpo-subj-character-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 320px;
}
.xpo-subj-char-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
}
.xpo-subj-char-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-char-slot:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.xpo-subj-char-slot:nth-child(2) { grid-row: 1; grid-column: 2; }
.xpo-subj-char-slot:nth-child(3) { grid-row: 2; grid-column: 2; }
.xpo-subj-char-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-char-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-char-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-char-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-char-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-char-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v8.1.0: 背景/道具参考图网格布局（3列等宽） */
.xpo-subj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}
.xpo-subj-grid-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
    min-height: 120px;
}
.xpo-subj-grid-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-grid-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-grid-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-grid-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-grid-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-grid-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-grid-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v7.9.0: 角色声音区（label 关联 input） */
#xpo-subj-voice-area {
    position: relative; display: block;
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
#xpo-subj-voice-input { display: none; }
#xpo-subj-voice-area .xpo-subj-voice-preview audio { max-width: 100%; vertical-align: middle; }


/* v7.8.5: 角色参考图网格布局（正面大图+侧面/反面小图） */
.xpo-subj-character-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 320px;
}
.xpo-subj-char-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
}
.xpo-subj-char-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-char-slot:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.xpo-subj-char-slot:nth-child(2) { grid-row: 1; grid-column: 2; }
.xpo-subj-char-slot:nth-child(3) { grid-row: 2; grid-column: 2; }
.xpo-subj-char-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-char-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-char-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-char-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-char-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-char-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v8.1.0: 背景/道具参考图网格布局（3列等宽） */
.xpo-subj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}
.xpo-subj-grid-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
    min-height: 120px;
}
.xpo-subj-grid-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-grid-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-grid-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-grid-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-grid-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-grid-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-grid-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v7.9.0: 角色声音区（label 关联 input） */
#xpo-subj-voice-area {
    position: relative; display: block;
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
#xpo-subj-voice-input { display: none; }
#xpo-subj-voice-area .xpo-subj-voice-preview audio { max-width: 100%; vertical-align: middle; }

.xpo-subject-field { margin-bottom: 14px; }
.xpo-subject-field label { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #333; }
.xpo-subject-field label span { flex-shrink: 0; }
.xpo-subject-field textarea.xpo-side-input {
    padding: 10px 12px; font-size: 13px; line-height: 1.5; font-family: inherit;
}

/* ============ v7.8.0 主体4版块Tab系统 ============ */
.xpo-subject-edit {
    position: absolute; top: 4px; right: 28px; width: 18px; height: 18px;
    line-height: 16px; font-size: 11px; border-radius: 50%; border: none;
    background: rgba(22,119,255,.12); color: #1677ff; cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity .2s;
}
.xpo-subject-card:hover .xpo-subject-edit { opacity: 1; }
.xpo-subject-edit:hover { background: #1677ff; color: #fff; }

#xpo-subject-modal .xpo-subj-tabs {
    display: flex; gap: 0; border-bottom: 1px solid #e8e8e8; margin-bottom: 14px;
    overflow-x: auto; scrollbar-width: none;
}
#xpo-subject-modal .xpo-subj-tabs::-webkit-scrollbar { display: none; }
#xpo-subject-modal .xpo-subj-tab {
    flex: 1 0 auto; min-width: 60px; padding: 8px 2px; font-size: 11px; font-weight: 500; text-align: center;
    cursor: pointer; border: none; background: none; color: #999; transition: all .2s;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
#xpo-subject-modal .xpo-subj-tab:hover { color: #1677ff; }
#xpo-subject-modal .xpo-subj-tab.active {
    color: #1677ff; font-weight: 600; border-bottom-color: #1677ff;
}
#xpo-subject-modal .xpo-subj-panel { display: none; }
#xpo-subject-modal .xpo-subj-panel.active { display: block; }

/* IP剧本 文本区域 */
#xpo-subject-modal .xpo-subject-field + .xpo-subject-field { margin-top: 12px; }
#xpo-subject-modal .xpo-subject-field label {
    display: block; font-size: 12px; font-weight: 500; color: #333; margin-bottom: 6px;
}
#xpo-subject-modal .xpo-subject-ipscript-script { margin-bottom: 8px; }


/* IP剧本 文本区域 */
#xpo-subject-modal .xpo-subject-field + .xpo-subject-field { margin-top: 12px; }
#xpo-subject-modal .xpo-subject-field label {
    display: block; font-size: 12px; font-weight: 500; color: #333; margin-bottom: 6px;
}
#xpo-subject-modal .xpo-subject-ipscript-script { margin-bottom: 8px; }

.xpo-subj-pos-label {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    font-size: 9px; color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px;
    border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 1;
}

#xpo-subj-voice-area {
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
.xpo-subj-voice-placeholder { font-size: 12px; color: #999; padding: 6px 0; }
.xpo-subj-voice-preview { display: flex; align-items: center; gap: 8px; }
.xpo-subj-voice-preview audio { flex: 1; height: 32px; }
.xpo-subj-voice-remove {
    width: 22px; height: 22px; border-radius: 50%; border: none; background: #ff4d4f;
    color: #fff; font-size: 13px; cursor: pointer; flex-shrink: 0;
}

/* AI识别按钮 */
.xpo-subject-recognize-btn {
    font-size: 11px; font-weight: 500; padding: 3px 10px;
    border: 1px solid #1677ff; background: #e6f4ff; color: #1677ff;
    border-radius: 12px; cursor: pointer; transition: all 0.2s;
    white-space: nowrap; flex-shrink: 0;
}
.xpo-subject-recognize-btn:hover {
    background: #1677ff; color: #fff;
}
.xpo-subject-recognize-btn:disabled,
.xpo-subject-recognize-btn.xpo-loading {
    opacity: 0.6; cursor: not-allowed; pointer-events: none;
}

/* AI识别模型选择器 */
.xpo-subject-recognize-model-wrap {
    background: #f9fafb;
    border: 1px solid var(--main-border-color, #eee);
    border-radius: 8px;
    padding: 8px 10px;
}
.xpo-subject-recognize-model-wrap label {
    margin-bottom: 4px !important;
}
/* 深色模式 */
body.dark-theme .xpo-subject-recognize-model-wrap,
body[data-theme="dark"] .xpo-subject-recognize-model-wrap,
.dark-mode .xpo-subject-recognize-model-wrap {
    background: #1f2937;
    border-color: #374151;
}
body.dark-theme .xpo-subject-recognize-model-wrap label,
body[data-theme="dark"] .xpo-subject-recognize-model-wrap label,
.dark-mode .xpo-subject-recognize-model-wrap label {
    color: #9ca3af !important;
}

/* @提及下拉（v8.0.2: 即梦风格分类面板，v8.1.8 改为 fixed 定位并由 JS 动态计算位置） */
.xpo-mention-dropdown {
    position: fixed; top: auto; left: auto; right: auto; bottom: auto; transform: none; width: 640px; max-width: calc(100% - 40px); max-height: 320px; overflow-y: auto;
    background: var(--main-bg-color, #fff); border: 1px solid var(--main-border-color, #e5e7eb);
    border-radius: 12px; box-shadow: 0 -6px 24px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.08);
    z-index: 10000; display: none;
}
/* 面板头部 */
.xpo-mention-header {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px 4px; font-size: 13px; color: var(--main-sub-color, #888);
}
.xpo-mention-at-symbol {
    width: 22px; height: 22px; line-height: 20px; text-align: center;
    background: linear-gradient(135deg, #1677ff, #69b1ff);
    color: #fff; border-radius: 6px; font-size: 13px; font-weight: 700;
}
.xpo-mention-hint { font-size: 11px; color: var(--main-sub-color, #aaa); }
/* Tab栏 */
.xpo-mention-tabs {
    display: flex; gap: 2px; padding: 6px 10px; flex-wrap: wrap;
}
.xpo-mtab {
    padding: 3px 10px; border: 1px solid transparent; border-radius: 14px;
    background: transparent; font-size: 12px; cursor: pointer; color: var(--main-sub-color, #888);
    transition: all .15s; white-space: nowrap;
}
.xpo-mtab:hover { background: rgba(22,119,255,.06); color: var(--main-color, #333); }
.xpo-mtab.active {
    background: rgba(22,119,255,.1); color: var(--main-color, #1677ff);
    border-color: rgba(22,119,255,.25); font-weight: 600;
}
/* 创建主体入口 */
.xpo-mention-create-subj {
    display: flex; align-items: center; gap: 5px;
    margin: 4px 12px 6px; padding: 6px 10px;
    border: 1px dashed var(--main-border-color, #ddd); border-radius: 8px;
    font-size: 12px; color: var(--main-color, #555); cursor: pointer;
    transition: all .15s; background: rgba(22,119,255,.02);
}
.xpo-mention-create-subj:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.06); color: var(--main-color, #1677ff);
}
.xpo-mcs-icon { font-size: 16px; font-weight: 700; }
/* 面板内容区 */
.xpo-mention-body { padding: 0 8px 8px; min-height: 40px; }
/* 空状态 */
.xpo-mention-empty {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 24px 12px; font-size: 12px; color: var(--main-sub-color, #bbb);
}
.xpo-me-icon { font-size: 18px; opacity: .6; }
/* 分组标题 */
.xpo-mention-group-title {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 6px 4px; font-size: 11px; font-weight: 600;
    color: var(--main-sub-color, #999); letter-spacing: .3px;
}
.xpo-mgt-icon {
    display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
}
.xpo-mgt-img { background: #e6f4ff; }
.xpo-mgt-img::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #1677ff;border-radius:2px;margin:2.5px 3px; }
.xpo-mgt-video { background: #fff7e6; }
.xpo-mgt-video::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #fa8c16;border-radius:2px;margin:2.5px 3px; }
.xpo-mgt-doc { background: #f6ffed; }
.xpo-mgt-doc::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #52c41a;border-radius:2px;margin:2.5px 3px; }
.xpo-mgt-audio { background: #fff0f6; }
.xpo-mgt-audio::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #eb2f96;border-radius:50%;margin:2.5px 3px; }
.xpo-mgt-subj { background: #f9f0ff; }
.xpo-mgt-subj::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #722ed1;border-radius:3px;margin:2.5px 3px; }

.xpo-mgt-count {
    font-size: 10px; font-weight: 400; color: var(--main-sub-color, #bbb);
    background: rgba(0,0,0,.04); padding: 1px 6px; border-radius: 8px; margin-left: auto;
}
/* 卡片网格 */
.xpo-mention-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
}
.xpo-mention-subj-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
/* 单个卡片 */
.xpo-mention-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding: 6px; border-radius: 8px; cursor: pointer; transition: all .15s;
    border: 1px solid var(--main-border-color, #eee); background: var(--main-bg-color, #fff);
    overflow: hidden;
}
.xpo-mention-card:hover {
    border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04);
    transform: translateY(-1px); box-shadow: 0 2px 8px rgba(22,119,255,.1);
}
/* 缩略图区域 */
.xpo-mention-card {
    height: 80px; justify-content: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.xpo-mention-card:not([style*="background-image"]) {
    background: linear-gradient(135deg, rgba(22,119,255,.06), rgba(22,119,255,.02));
}
.xpo-mention-subj-card { height: 80px; }
.xpo-mc-noimg { font-size: 32px; opacity: .85; line-height: 1; }
/* 文件名 */
.xpo-mc-name {
    font-size: 12px; font-weight: 500; color: var(--main-color, #333); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 100%; max-width: 110px; margin-top: 6px;
    text-shadow: 0 1px 2px rgba(255,255,255,.7);
}
.xpo-mention-card:hover .xpo-mc-name { color: var(--main-color, #1677ff); }
.xpo-file-chip .xpo-at-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 10px;
    background: rgba(82,196,26,.12); color: #52c41a;
    margin-left: 2px; cursor: pointer; flex-shrink: 0;
}
.xpo-file-chip .xpo-at-badge:hover { background: #52c41a; color: #fff; }

/* 文件chip拖拽排序 */
.xpo-file-chip-draggable { cursor: grab; user-select: none; -webkit-user-select: none; }
.xpo-file-chip-draggable:active { cursor: grabbing; }
.xpo-file-chip-dragging { opacity: 0.4; transform: scale(0.95); }
.xpo-file-chip-dragover {
    outline: 2px dashed var(--main-color, #1677ff) !important;
    outline-offset: 2px;
    background: rgba(22,119,255,.06) !important;
    border-radius: 6px;
}

/* 文件chip主体标签 */
.xpo-file-chip-subject { border: 1px dashed var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
.xpo-file-subject-tag { font-size: 9px; padding: 1px 5px; border-radius: 10px; background: rgba(22,119,255,.1); color: var(--main-color, #1677ff); white-space: nowrap; }

/* 历史记录调回按钮 */
.xpo-h-actions { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.xpo-h-recall {
    width: 20px; height: 20px; line-height: 18px; font-size: 11px; border-radius: 50%; border: none;
    background: rgba(22,119,255,.08); color: var(--main-color, #1677ff); cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity .2s;
}
.xpo-history-item:hover .xpo-h-recall { opacity: 1; }
.xpo-h-recall:hover { background: var(--main-color, #1677ff); color: #fff; }

/* 深色模式 - 主体 */
body.dark-theme .xpo-subject-card, body[data-theme="dark"] .xpo-subject-card, .dark-mode .xpo-subject-card { background: #1f2937; border-color: #374151; }
body.dark-theme .xpo-subject-card:hover, body[data-theme="dark"] .xpo-subject-card:hover, .dark-mode .xpo-subject-card:hover { border-color: #60a5fa; }
body.dark-theme .xpo-subject-preview, body[data-theme="dark"] .xpo-subject-preview, .dark-mode .xpo-subject-preview { background: #374151; }
/* 深色模式 - @提及面板 v8.0.2 */
body.dark-theme .xpo-mention-dropdown, body[data-theme="dark"] .xpo-mention-dropdown, .dark-mode .xpo-mention-dropdown { background: #1f2937; border-color: #374151; box-shadow: 0 -6px 24px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); }
body.dark-theme .xpo-mention-hint, body[data-theme="dark"] .xpo-mention-hint, .dark-mode .xpo-mention-hint { color: #6b7280; }
body.dark-theme .xpo-mtab, body[data-theme="dark"] .xpo-mtab, .dark-mode .xpo-mtab { color: #9ca3af; }
body.dark-theme .xpo-mtab:hover, body[data-theme="dark"] .xpo-mtab:hover, .dark-mode .xpo-mtab:hover { color: #e5e7eb; background: rgba(96,165,250,.08); }
body.dark-theme .xpo-mtab.active, body[data-theme="dark"] .xpo-mtab.active, .dark-mode .xpo-mtab.active { color: #60a5fa; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.12); }
body.dark-theme .xpo-mention-create-subj, body[data-theme="dark"] .xpo-mention-create-subj, .dark-mode .xpo-mention-create-subj { border-color: #374151; color: #d1d5db; background: rgba(96,165,250,.04); }
body.dark-theme .xpo-mention-create-subj:hover, body[data-theme="dark"] .xpo-mention-create-subj:hover, .dark-mode .xpo-mention-create-subj:hover { border-color: #60a5fa; background: rgba(96,165,250,.1); color: #60a5fa; }
body.dark-theme .xpo-mention-group-title, body[data-theme="dark"] .xpo-mention-group-title, .dark-mode .xpo-mention-group-title { color: #6b7280; }
body.dark-theme .xpo-mention-card, body[data-theme="dark"] .xpo-mention-card, .dark-mode .xpo-mention-card { border-color: #374151; background: #111827; }
body.dark-theme .xpo-mention-card:hover, body[data-theme="dark"] .xpo-mention-card:hover, .dark-mode .xpo-mention-card:hover { border-color: #60a5fa; background: rgba(96,165,250,.08); box-shadow: 0 2px 8px rgba(96,165,250,.15); }
body.dark-theme .xpo-mc-name, body[data-theme="dark"] .xpo-mc-name, .dark-mode .xpo-mc-name { color: #9ca3af; }
body.dark-theme .xpo-mention-card:hover .xpo-mc-name, body[data-theme="dark"] .xpo-mention-card:hover .xpo-mc-name, .dark-mode .xpo-mention-card:hover .xpo-mc-name { color: #60a5fa; }
body.dark-theme .xpo-subject-file-chip, body[data-theme="dark"] .xpo-subject-file-chip, .dark-mode .xpo-subject-file-chip { background: #374151; }
body.dark-theme .xpo-subject-upload-area, body[data-theme="dark"] .xpo-subject-upload-area, .dark-mode .xpo-subject-upload-area { border-color: #374151; }
/* v8.1.0: 背景/道具网格深色模式 */
body.dark-theme .xpo-subj-grid, body[data-theme="dark"] .xpo-subj-grid, .dark-mode .xpo-subj-grid { border-color: #374151; }
body.dark-theme .xpo-subj-grid-slot, body[data-theme="dark"] .xpo-subj-grid-slot, .dark-mode .xpo-subj-grid-slot { background: #1f2937; border-color: #374151; }
body.dark-theme .xpo-subj-grid-slot:hover, body[data-theme="dark"] .xpo-subj-grid-slot:hover, .dark-mode .xpo-subj-grid-slot:hover { border-color: #60a5fa; background: rgba(96,165,250,.08); }
body.dark-theme .xpo-subj-grid-label, body[data-theme="dark"] .xpo-subj-grid-label, .dark-mode .xpo-subj-grid-label { color: #9ca3af; background: rgba(31,41,55,.85); }
body.dark-theme .xpo-subj-grid-plus, body[data-theme="dark"] .xpo-subj-grid-plus, .dark-mode .xpo-subj-grid-plus { color: #4b5563; }
body.dark-theme .xpo-subj-grid-slot img, body[data-theme="dark"] .xpo-subj-grid-slot img, .dark-mode .xpo-subj-grid-slot img { background: #111827; }

/* ================================================================
   我的主体 - 侧栏
   ================================================================ */
.xpo-subjects-section {
    margin-top: 2px;
}
.xpo-subject-create-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px dashed var(--main-border-color, #ddd);
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #1677ff);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.xpo-subject-create-btn:hover {
    background: var(--main-color, #1677ff);
    color: #fff;
    border-color: var(--main-color, #1677ff);
}
.xpo-subjects-list {
    max-height: 160px;
    overflow-y: auto;
}
.xpo-subjects-empty {
    font-size: 11px;
    color: var(--main-sub-color, #aaa);
    padding: 8px 0;
    text-align: center;
}
.xpo-subject-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    border-radius: 8px;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #eee);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.xpo-subject-card:hover {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.xpo-subject-preview {
    width: 36px; height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}
.xpo-subject-thumb {
    width: 100%; height: 100%; object-fit: cover;
}
.xpo-subject-video-thumb { width: 100%; height: 100%; }
.xpo-subject-video-thumb video { width: 100%; height: 100%; object-fit: cover; }
.xpo-subject-icon {
    font-size: 20px;
}
.xpo-subject-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}
.xpo-subject-name {
    font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xpo-subject-count {
    font-size: 10px; color: var(--main-sub-color, #999);
}
.xpo-subject-del {
    position: absolute; top: 4px; right: 6px;
    width: 18px; height: 18px;
    line-height: 16px; font-size: 12px;
    border-radius: 50%; border: none;
    background: rgba(0,0,0,.1); color: #999;
    cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity 0.2s;
}
.xpo-subject-card:hover .xpo-subject-del { opacity: 1; }
.xpo-subject-del:hover { background: #ff4d4f; color: #fff; }

/* ================================================================
   创建主体弹窗
   ================================================================ */
.xpo-subject-upload-area {
    min-height: 80px;
    border: 2px dashed var(--main-border-color, #ddd);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.xpo-subject-upload-area:hover,
.xpo-subject-dragover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.03);
}
.xpo-subject-upload-placeholder {
    width: 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; color: #aaa; font-size: 12px;
}
.xpo-subject-file-previews {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.xpo-subject-file-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 6px;
    background: #f5f5f5; font-size: 11px;
    position: relative;
}
.xpo-subject-file-chip img {
    width: 40px; height: 40px; object-fit: cover; border-radius: 4px;
}
.xpo-subject-file-icon { font-size: 20px; }
.xpo-subject-file-thumb-wrap {
    width: 40px; height: 40px; border-radius: 4px; overflow: hidden;
    position: relative; border: 1px solid var(--main-border-color, #e8e8e8);
    background: #000;
}
.xpo-subject-file-thumb-wrap video {
    width: 100%; height: 100%; object-fit: cover;
}
.xpo-subject-file-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.55);
    color: #fff; font-size: 8px; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.xpo-subject-file-name {
    max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xpo-subject-file-remove {
    position: absolute; top: -6px; right: -6px;
    width: 16px; height: 16px; font-size: 10px; line-height: 14px;
    border-radius: 50%; border: none;
    background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0;
}


.xpo-mention-group-header {
    padding: 6px 12px 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--main-sub-color, #aaa);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--main-border-color, #f0f0f0);
}
.xpo-mention-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px; font-size: 13px;
    cursor: pointer; transition: background 0.15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--main-color, #333);
}
.xpo-mention-item:hover,
.xpo-mention-item:focus {
    background: rgba(22,119,255,.08);
    color: var(--main-color, #1677ff);
}
.xpo-mention-item .xpo-mention-from {
    font-size: 9px;
    padding: 0px 5px;
    border-radius: 10px;
    background: rgba(22,119,255,.1);
    color: var(--main-color, #1677ff);
    margin-left: 4px;
    flex-shrink: 0;
}
.xpo-mention-item .xpo-mention-count {
    font-size: 10px;
    color: var(--main-sub-color, #999);
    flex-shrink: 0;
}
/* @提示小标签 - 文件chip上的@标识 */
.xpo-file-chip .xpo-at-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(82,196,26,.12);
    color: #52c41a;
    margin-left: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.xpo-file-chip .xpo-at-badge:hover {
    background: #52c41a;
    color: #fff;
}

/* ================================================================
   文件chip中的主体标签
   ================================================================ */
.xpo-file-chip-subject {
    border: 1px dashed var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-file-subject-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(22,119,255,.1);
    color: var(--main-color, #1677ff);
    white-space: nowrap;
}

/* ================================================================
   历史记录调回按钮
   ================================================================ */
.xpo-h-actions {
    display: flex; gap: 2px; align-items: center; flex-shrink: 0;
}
.xpo-h-recall {
    width: 20px; height: 20px;
    line-height: 18px; font-size: 11px;
    border-radius: 50%; border: none;
    background: rgba(22,119,255,.08);
    color: var(--main-color, #1677ff);
    cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity 0.2s;
}
.xpo-history-item:hover .xpo-h-recall { opacity: 1; }
.xpo-h-recall:hover {
    background: var(--main-color, #1677ff);
    color: #fff;
}

/* 深色模式 - 主体 */
body.dark-theme .xpo-subject-card,
body[data-theme="dark"] .xpo-subject-card,
.dark-mode .xpo-subject-card {
    background: #1f2937; border-color: #374151;
}
body.dark-theme .xpo-subject-card:hover,
body[data-theme="dark"] .xpo-subject-card:hover,
.dark-mode .xpo-subject-card:hover {
    border-color: #60a5fa;
}
body.dark-theme .xpo-subject-preview,
body[data-theme="dark"] .xpo-subject-preview,
.dark-mode .xpo-subject-preview {
    background: #374151;
}
body.dark-theme .xpo-mention-dropdown,
body[data-theme="dark"] .xpo-mention-dropdown,
.dark-mode .xpo-mention-dropdown {
    background: #1f2937; border-color: #374151;
}
body.dark-theme .xpo-mention-item,
body[data-theme="dark"] .xpo-mention-item,
.dark-mode .xpo-mention-item {
    color: #d1d5db;
}
body.dark-theme .xpo-mention-item:hover,
body[data-theme="dark"] .xpo-mention-item:hover,
.dark-mode .xpo-mention-item:hover {
    background: rgba(96,165,250,.12);
    color: #60a5fa;
}
body.dark-theme .xpo-subject-file-chip,
body[data-theme="dark"] .xpo-subject-file-chip,
.dark-mode .xpo-subject-file-chip {
    background: #374151;
}
body.dark-theme .xpo-subject-upload-area,
body[data-theme="dark"] .xpo-subject-upload-area,
.dark-mode .xpo-subject-upload-area {
    border-color: #374151;
}

/* ================================================================
   v5.0.0 豆包风格 - 底部控制区（Tab + 模型选择 + 参数面板 + 输入框）
   ================================================================ */

/* ========== 底部控制条容器 ========== */
.xpo-bottom-bar {
    flex-shrink: 0;
    border-top: 2px solid var(--main-border-color, #d9d9d9);
    background: var(--main-bg-color, #fff);
    box-shadow: 0 -2px 12px rgba(0,0,0,.04);
    padding: 0 20px 12px;
}
@media (max-width: 768px) {
    .xpo-bottom-bar { position: sticky; bottom: 0; z-index: 10; padding: 0 12px 10px; }
}

/* ========== Tab 切换栏 ========== */
.xpo-tab-bar {
    display: flex;
    gap: 4px;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--main-border-color, #eee);
}
.xpo-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1.5px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--main-sub-color, #888);
    transition: all .2s;
    position: relative;
    bottom: -1px;
}
.xpo-tab-btn:hover {
    color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.03);
}
.xpo-tab-btn.active {
    color: var(--main-color, #1677ff);
    border-color: var(--main-border-color, #eee);
    border-bottom-color: var(--main-bg-color, #fff);
    background: var(--main-bg-color, #fff);
    font-weight: 600;
}
.xpo-tab-icon { font-size: 16px; }
.xpo-tab-text { font-size: 13px; }

/* 图片Tab激活色 */
.xpo-tab-btn[data-tab="image"].active {
    color: #fa8c16;
    border-bottom-color: var(--main-bg-color, #fff);
}
/* 视频Tab激活色 */
.xpo-tab-btn[data-tab="video"].active {
    color: #eb2f96;
    border-bottom-color: var(--main-bg-color, #fff);
}

/* ========== 底部控制区（v5.4.5: 豆包风格悬浮输入卡片） ========== */
.xpo-bottom-bar {
    padding: 0 16px 24px;
    width: 860px;
    max-width: 100%;
    margin: 0 auto;
}
.xpo-input-card {
    width: 100%;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #e5e7eb);
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02);
    padding: 10px 14px 8px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.xpo-input-card:focus-within {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 2px 20px rgba(22,119,255,.1), 0 0 0 3px rgba(22,119,255,.06);
}

/* 积分消耗提示 */
.xpo-cost-hint {
    font-size: 11.5px;
    color: var(--main-sub-color, #888);
    padding: 2px 4px 6px;
    line-height: 1.4;
}
.xpo-cost-hint b { color: var(--main-color, #1677ff); font-weight: 600; }

/* 输入框区域 */
.xpo-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 2px 0;
}
.xpo-chat-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    resize: none;
    font-size: 14px;
    line-height: 1.6;
    min-height: 24px;
    max-height: 120px;
    padding: 6px 4px;
    color: var(--main-color, #333);
    font-family: inherit;
    box-shadow: none !important;
}
.xpo-chat-input::placeholder { color: var(--main-sub-color, #aaa); }

/* 上传按钮 */
.xpo-upload-trigger {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: transparent;
    color: var(--main-sub-color, #888);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.xpo-upload-trigger:hover { background: rgba(0,0,0,.05); color: var(--main-color, #1677ff); }

/* 发送按钮 */
.xpo-send-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border: none; border-radius: 50%;
    background: var(--main-color, #1677ff);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.xpo-send-btn:disabled { background: #d1d5db; cursor: not-allowed; }
.xpo-send-btn:not(:disabled):hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(22,119,255,.3); }

/* 工具栏（v5.4.6: 桌面端一排不换行） */
.xpo-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 6px;
    flex-wrap: nowrap;
    min-height: 38px;
    overflow: hidden;
}

/* Tab 切换栏 */
.xpo-tab-bar {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.xpo-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--main-sub-color, #888);
    cursor: pointer;
    transition: all .15s;
}
.xpo-tab-btn:hover { background: rgba(0,0,0,.04); color: var(--main-color, #555); }
.xpo-tab-btn.active {
    background: rgba(22,119,255,.08);
    color: var(--main-color, #1677ff);
    font-weight: 600;
}
.xpo-tab-icon { font-size: 13px; }
.xpo-tab-text { font-size: 12px; }

/* 模型选择（v5.4.5: 嵌入工具栏） */
.xpo-bottom-model-wrap {
    flex-shrink: 0;
    padding: 0;
}

/* 参数按钮（v5.4.6: 一排不换行，允许收缩） */
.xpo-param-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}
.xpo-param-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--main-border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--main-bg-color, #fff);
    font-size: 12px;
    color: var(--main-sub-color, #666);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}
.xpo-param-btn:hover { border-color: var(--main-color, #1677ff); color: var(--main-color, #1677ff); }
.xpo-param-btn.open { border-color: var(--main-color, #1677ff); color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
.xpo-param-btn-label { font-weight: 500; opacity: .7; flex-shrink: 0; }
.xpo-param-btn-value { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.xpo-param-btn-arrow { font-size: 10px; opacity: .5; transition: transform .2s; flex-shrink: 0; }
.xpo-param-btn.open .xpo-param-btn-arrow { transform: rotate(180deg); opacity: 1; }

/* 参数弹出面板（挂载body，v5.4.6: 向上展开+标题+单选框） */
.xpo-param-popover {
    position: fixed;
    z-index: 99998;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
    min-width: 160px;
    display: none;
}
.xpo-param-popover-title {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.xpo-param-popover-item {
    padding: 9px 12px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: all .12s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 2px;
    border-radius: 8px;
}
.xpo-param-popover-item:hover { background: rgba(22,119,255,.06); color: #1677ff; }
.xpo-param-popover-item.active { color: #1677ff; font-weight: 600; background: rgba(22,119,255,.04); }
.xpo-param-radio { font-size: 14px; color: #ccc; flex-shrink: 0; line-height: 1; }
.xpo-param-popover-item.active .xpo-param-radio { color: #1677ff; }
.xpo-param-label-text { flex: 1; }
.xpo-param-check { color: #1677ff; font-size: 13px; flex-shrink: 0; }

/* v5.4.9: 密钥区折叠 */
.xpo-key-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background .15s;
    padding: 4px 6px;
    margin: -4px -6px 4px;
    border-radius: 6px;
}
.xpo-key-header:hover { background: rgba(0,0,0,.03); }
.xpo-key-toggle {
    font-size: 11px;
    color: var(--main-color, #1677ff);
    font-weight: 500;
    cursor: pointer;
}
.xpo-key-body {
    padding-top: 4px;
}

/* 文件chips */
.xpo-file-chips { margin-bottom: 4px; }

/* 字数提示 */
.xpo-input-footer {
    text-align: right;
    padding: 4px 8px 0;
    font-size: 11px;
    color: var(--main-sub-color, #aaa);
}

/* ========== 底部模型选择器（v5.4.0: 自定义下拉，挂载body绕过overflow:hidden） ========== */
.xpo-bottom-model-wrap {
    padding: 8px 0 6px;
}
/* 触发按钮（v5.4.6: 嵌入工具栏，自适应宽度） */
.xpo-bottom-model-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    max-width: 200px;
    padding: 5px 10px;
    border: 1px solid var(--main-border-color, #ddd);
    border-radius: 8px;
    background: var(--main-bg-color, #fff);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-sub-color, #666);
    transition: all .18s ease;
    outline: none;
    user-select: none;
}
.xpo-bottom-model-trigger:hover {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 2px 8px rgba(22,119,255,.1);
    color: var(--main-color, #1677ff);
}
.xpo-bottom-model-trigger.open {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 2px 12px rgba(22,119,255,.15);
    color: var(--main-color, #1677ff);
}
.xpo-bmt-icon { font-size: 15px; flex-shrink: 0; }
.xpo-bmt-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpo-bmt-arrow {
    font-size: 11px; transition: transform .2s ease; flex-shrink: 0; opacity: .55;
    font-family: system-ui, -apple-system, sans-serif;
}
.xpo-bottom-model-trigger.open .xpo-bmt-arrow { transform: rotate(180deg); opacity: 1; }

/* 下拉面板（挂载到body，fixed定位） */
.xpo-bottom-model-dropdown {
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    max-height: 320px;
    overflow-y: auto;
    padding: 5px 0;
    display: none;
}
.xpo-bmd-empty { padding:20px;text-align:center;color:#aaa;font-size:13px; }

/* 下拉项 */
.xpo-bmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: all .12s ease;
    font-size: 13.2px;
    color: #444;
    border-left: 3px solid transparent;
    margin: 1px 4px;
    border-radius: 8px;
}
.xpo-bmd-item:hover {
    background: rgba(22,119,255,.06);
    color: #1677ff;
    border-left-color: #1677ff;
}
.xpo-bmd-item.active {
    background: rgba(22,119,255,.1);
    color: #1677ff;
    font-weight: 600;
    border-left-color: #1677ff;
}
.xpo-bmd-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xpo-bmd-tags { font-size:11px; flex-shrink:0; opacity:.75; letter-spacing:.5px; }

/* ========== 动态参数面板 ========== */
.xpo-param-panel {
    padding: 8px 0 4px;
    overflow-y: auto;
    max-height: 200px;}
.xpo-param-panel::-webkit-scrollbar { width: 4px; }
.xpo-param-panel::-webkit-scrollbar-thumb { background: var(--main-border-color,#ddd); border-radius: 2px; }

.xpo-param-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xpo-param-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xpo-param-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--main-color, #555);
    min-width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.xpo-param-label input[type="checkbox"] {
    accent-color: var(--main-color, #1677ff);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* 参数选项按钮组 */
.xpo-param-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.xpo-param-opt {
    padding: 5px 12px;
    border: 1.5px solid var(--main-border-color, #ddd);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-sub-color, #666);
    cursor: pointer;
    transition: all .15s;
    background: var(--main-bg-color, #fff);
    white-space: nowrap;
}
.xpo-param-opt:hover {
    border-color: var(--main-color, #1677ff);
    color: var(--main-color, #1677ff);
}
.xpo-param-opt.active {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.06);
    color: var(--main-color, #1677ff);
    font-weight: 600;
}
/* 图片Tab下选项高亮色 */
.xpo-tab-btn[data-tab="image"].active ~ .xpo-bottom-model-wrap ~ .xpo-param-panel .xpo-param-opt.active,
.xpo-param-panel:has(#xpo-param-image:not([style*="none"])) .xpo-param-opt.active {
    border-color: #fa8c16;
    background: rgba(250,140,22,.06);
    color: #fa8c16;
}
/* 视频Tab下选项高亮色 */
.xpo-param-panel:has(#xpo-param-video:not([style*="none"])) .xpo-param-opt.active {
    border-color: #eb2f96;
    background: rgba(235,47,150,.06);
    color: #eb2f96;
}

/* 参考图上传区域 */
.xpo-param-ref-upload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px dashed var(--main-border-color, #ccc);
    border-radius: 10px;
    font-size: 12px;
    color: var(--main-sub-color, #888);
    cursor: pointer;
    transition: all .2s;
    background: var(--main-sub-bg, #fafafa);
}
.xpo-param-ref-upload:hover {
    border-color: var(--main-color, #1677ff);
    color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.03);
}
.xpo-ref-placeholder {
    white-space: nowrap;
}
.xpo-param-ref-preview {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.xpo-param-ref-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    border: 1.5px solid var(--main-border-color, #eee);
    position: relative;
}
.xpo-param-ref-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.xpo-param-ref-thumb .xpo-ref-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    font-size: 11px;
    border-radius: 50%;
    border: none;
    background: #ff4d4f;
    color: #fff;
    cursor: pointer;
    text-align: center;
    padding: 0;
}

/* 输入框区域在底部bar内微调 */
.xpo-bottom-bar .xpo-input-bar {
    border-top: none;
    box-shadow: none;
    padding: 8px 0 0;
}

/* ========== 图片/视频生成结果展示 ========== */
.xpo-gen-result {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--main-sub-bg, #f8f9fa);
    border: 1px solid var(--main-border-color, #eee);
}
.xpo-gen-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--main-border-color, #e0e0e0);
    background: #000;
    flex-shrink: 0;
}
.xpo-gen-item img,
.xpo-gen-item video {
    display: block;
    max-width: 320px;
    max-height: 320px;
    object-fit: contain;
}
.xpo-gen-item video {
    min-width: 200px;
    min-height: 150px;
}
.xpo-gen-item-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    opacity: 0;
    transition: opacity .2s;
}
.xpo-gen-item:hover .xpo-gen-item-actions { opacity: 1; }
.xpo-gen-action-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,.9);
    color: #333;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.xpo-gen-action-btn:hover {
    background: #fff;
    color: var(--main-color, #1677ff);
}

/* ========== 深色模式 - 底部控制区 ========== */
body.dark-theme .xpo-bottom-bar,
body[data-theme="dark"] .xpo-bottom-bar,
.dark-mode .xpo-bottom-bar {
    background: #111827;
    border-color: #1f2937;
}
body.dark-theme .xpo-tab-btn,
body[data-theme="dark"] .xpo-tab-btn,
.dark-mode .xpo-tab-btn {
    color: #9ca3af;
}
body.dark-theme .xpo-tab-btn.active,
body[data-theme="dark"] .xpo-tab-btn.active,
.dark-mode .xpo-tab-btn.active {
    color: #60a5fa;
    border-color: #374151;
    background: #111827;
    border-bottom-color: #111827;
}
body.dark-theme .xpo-tab-btn[data-tab="image"].active,
body[data-theme="dark"] .xpo-tab-btn[data-tab="image"].active,
.dark-mode .xpo-tab-btn[data-tab="image"].active {
    color: #fbbf24;
}
body.dark-theme .xpo-tab-btn[data-tab="video"].active,
body[data-theme="dark"] .xpo-tab-btn[data-tab="video"].active,
.dark-mode .xpo-tab-btn[data-tab="video"].active {
    color: #f472b6;
}
body.dark-theme .xpo-bottom-model-trigger,
body[data-theme="dark"] .xpo-bottom-model-trigger,
.dark-mode .xpo-bottom-model-trigger {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}
body.dark-theme .xpo-bottom-model-trigger:hover,
body[data-theme="dark"] .xpo-bottom-model-trigger:hover,
.dark-mode .xpo-bottom-model-trigger:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59,130,246,.15);
    color: #60a5fa;
}
body.dark-theme .xpo-bottom-model-trigger.open,
body[data-theme="dark"] .xpo-bottom-model-trigger.open,
.dark-mode .xpo-bottom-model-trigger.open {
    border-color: #3b82f6;
    box-shadow: 0 2px 12px rgba(59,130,246,.2);
    color: #60a5fa;
}
body.dark-theme .xpo-bottom-model-dropdown,
body[data-theme="dark"] .xpo-bottom-model-dropdown,
.dark-mode .xpo-bottom-model-dropdown {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 8px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
}
body.dark-theme .xpo-bmd-item,
body[data-theme="dark"] .xpo-bmd-item,
.dark-mode .xpo-bmd-item {
    color: #d1d5db;
}
body.dark-theme .xpo-bmd-item:hover,
body[data-theme="dark"] .xpo-bmd-item:hover,
.dark-mode .xpo-bmd-item:hover {
    background: rgba(59,130,246,.12);
    color: #60a5fa;
    border-left-color: #3b82f6;
}
body.dark-theme .xpo-bmd-item.active,
body[data-theme="dark"] .xpo-bmd-item.active,
.dark-mode .xpo-bmd-item.active {
    background: rgba(59,130,246,.18);
    color: #60a5fa;
    border-left-color: #3b82f6;
}
/* v5.4.6: 参数按钮和弹出面板深色适配 */
body.dark-theme .xpo-param-btn,
body[data-theme="dark"] .xpo-param-btn,
.dark-mode .xpo-param-btn {
    background: #1f2937; border-color:#374151; color:#9ca3af;
}
body.dark-theme .xpo-param-btn:hover,
body[data-theme="dark"] .xpo-param-btn:hover,
.dark-mode .xpo-param-btn:hover {
    border-color:#3b82f6; color:#60a5fa;
}
body.dark-theme .xpo-param-btn.open,
body[data-theme="dark"] .xpo-param-btn.open,
.dark-mode .xpo-param-btn.open {
    border-color:#3b82f6; color:#60a5fa; background:rgba(59,130,246,.08);
}
body.dark-theme .xpo-param-popover,
body[data-theme="dark"] .xpo-param-popover,
.dark-mode .xpo-param-popover {
    background:#1f2937; border-color:#374151;
    box-shadow:0 4px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
}
body.dark-theme .xpo-param-popover-title,
body[data-theme="dark"] .xpo-param-popover-title,
.dark-mode .xpo-param-popover-title {
    color:#6b7280;
}
body.dark-theme .xpo-param-popover-item,
body[data-theme="dark"] .xpo-param-popover-item,
.dark-mode .xpo-param-popover-item {
    color:#d1d5db;
}
body.dark-theme .xpo-param-popover-item:hover,
body[data-theme="dark"] .xpo-param-popover-item:hover,
.dark-mode .xpo-param-popover-item:hover {
    background:rgba(59,130,246,.12); color:#60a5fa;
}
body.dark-theme .xpo-param-popover-item.active,
body[data-theme="dark"] .xpo-param-popover-item.active,
.dark-mode .xpo-param-popover-item.active {
    color:#60a5fa; background:rgba(59,130,246,.1);
}
body.dark-theme .xpo-param-radio,
body[data-theme="dark"] .xpo-param-radio,
.dark-mode .xpo-param-radio {
    color:#4b5563;
}
body.dark-theme .xpo-param-popover-item.active .xpo-param-radio,
body[data-theme="dark"] .xpo-param-popover-item.active .xpo-param-radio,
.dark-mode .xpo-param-popover-item.active .xpo-param-radio {
    color:#60a5fa;
}
body.dark-theme .xpo-param-label,
body[data-theme="dark"] .xpo-param-label,
.dark-mode .xpo-param-label {
    color: #9ca3af;
}
body.dark-theme .xpo-param-opt,
body[data-theme="dark"] .xpo-param-opt,
.dark-mode .xpo-param-opt {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-theme .xpo-param-opt:hover,
body[data-theme="dark"] .xpo-param-opt:hover,
.dark-mode .xpo-param-opt:hover {
    border-color: #4b5563;
    color: #60a5fa;
}
body.dark-theme .xpo-param-opt.active,
body[data-theme="dark"] .xpo-param-opt.active,
.dark-mode .xpo-param-opt.active {
    background: rgba(59,130,246,.12);
    border-color: #3b82f6;
    color: #60a5fa;
}
body.dark-theme .xpo-param-ref-upload,
body[data-theme="dark"] .xpo-param-ref-upload,
.dark-mode .xpo-param-ref-upload {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-theme .xpo-gen-result,
body[data-theme="dark"] .xpo-gen-result,
.dark-mode .xpo-gen-result {
    background: #1f2937;
    border-color: #374151;
}
body.dark-theme .xpo-gen-item,
body[data-theme="dark"] .xpo-gen-item,
.dark-mode .xpo-gen-item {
    border-color: #374151;
}

/* ================================================================
   v7.2.3 图片 Lightbox 放大查看（点击图片弹出全屏预览）
   ================================================================ */
.xpo-gen-img-zoom {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.xpo-gen-img-zoom:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Lightbox 遮罩层 */
.xpo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.xpo-lightbox.xpo-lightbox-show {
    opacity: 1;
    visibility: visible;
}

/* 半透明黑色背景 */
.xpo-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
}

/* 图片本身 */
.xpo-lightbox-img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,.4);
    object-fit: contain;
    animation: xpo-lb-scale-in .25s ease;
}

/* 关闭按钮 */
.xpo-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    backdrop-filter: blur(4px);
}
.xpo-lightbox-close:hover {
    background: rgba(255,255,255,.3);
}

@keyframes xpo-lb-scale-in {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* 深色模式 Lightbox */
body.dark-theme .xpo-lightbox-close,
body[data-theme="dark"] .xpo-lightbox-close,
.dark-mode .xpo-lightbox-close {
    background: rgba(255,255,255,.1);
}
body.dark-theme .xpo-lightbox-close:hover,
body[data-theme="dark"] .xpo-lightbox-close:hover,
.dark-mode .xpo-lightbox-close:hover {
    background: rgba(255,255,255,.22);
}

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }

/* ================================================================
   v7.2.3 图片 Lightbox 放大查看（点击图片弹出全屏预览）
   ================================================================ */
.xpo-gen-img-zoom {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.xpo-gen-img-zoom:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Lightbox 遮罩层 */
.xpo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.xpo-lightbox.xpo-lightbox-show {
    opacity: 1;
    visibility: visible;
}

/* 半透明黑色背景 */
.xpo-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
}

/* 图片本身 */
.xpo-lightbox-img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,.4);
    object-fit: contain;
    animation: xpo-lb-scale-in .25s ease;
}

/* 关闭按钮 */
.xpo-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    backdrop-filter: blur(4px);
}
.xpo-lightbox-close:hover {
    background: rgba(255,255,255,.3);
}

@keyframes xpo-lb-scale-in {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* 深色模式 Lightbox */
body.dark-theme .xpo-lightbox-close,
body[data-theme="dark"] .xpo-lightbox-close,
.dark-mode .xpo-lightbox-close {
    background: rgba(255,255,255,.1);
}
body.dark-theme .xpo-lightbox-close:hover,
body[data-theme="dark"] .xpo-lightbox-close:hover,
.dark-mode .xpo-lightbox-close:hover {
    background: rgba(255,255,255,.22);
}

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }
/* 深色模式: 支付方式选择区域 */
body.dark-theme #xpo-pay-method-select,
body[data-theme="dark"] #xpo-pay-method-select,
.dark-mode #xpo-pay-method-select {
    background: #111827;
    border-color: #374151;
}
body.dark-theme #xpo-pay-method-select p,
body[data-theme="dark"] #xpo-pay-method-select p,
.dark-mode #xpo-pay-method-select p {
    color: #9ca3af;
}
body.dark-theme .xpo-pay-method-option,
body[data-theme="dark"] .xpo-pay-method-option,
.dark-mode .xpo-pay-method-option {
    border-color: #374151;
    background: #1f2937;
}
body.dark-theme .xpo-pay-method-option:hover,
body[data-theme="dark"] .xpo-pay-method-option:hover,
.dark-mode .xpo-pay-method-option:hover {
    border-color: #4b5563;
    background: #283548;
}
/* 深色模式: 余额不足提示 */
body.dark-theme #xpo-balance-insufficient-tip,
body[data-theme="dark"] #xpo-balance-insufficient-tip,
.dark-mode #xpo-balance-insufficient-tip {
    background: #3b1818;
    border-color: #662424;
    color: #fca5a5;
}
/* 深色模式: 确认按钮 */
body.dark-theme #xpo-purchase-confirm-btn:disabled,
body[data-theme="dark"] #xpo-purchase-confirm-btn:disabled,
.dark-mode #xpo-purchase-confirm-btn:disabled {
    opacity: .5;
}

/* ============ 深色模式: 子比支付 iframe 弹窗 ============ */
body.dark-theme .xpo-zibpay-wrapper,
body[data-theme="dark"] .xpo-zibpay-wrapper,
.dark-mode .xpo-zibpay-wrapper {
    /* iframe wrapper 使用弹窗通用深色样式 */
}
/* 覆盖弹窗内所有硬编码的白色/深色文字 */
body.dark-theme .xpo-promo-panel-content *[style*="color:#333"],
body[data-theme="dark"] .xpo-promo-panel-content *[style*="color:#333"],
.dark-mode .xpo-promo-panel-content *[style*="color:#333"] {
    color: #e5e7eb !important;
}
body.dark-theme .xpo-promo-panel-content *[style*="color:#666"],
body[data-theme="dark"] .xpo-promo-panel-content *[style*="color:#666"],
.dark-mode .xpo-promo-panel-content *[style*="color:#666"] {
    color: #9ca3af !important;
}
body.dark-theme .xpo-promo-panel-content *[style*="color:#999"],
body[data-theme="dark"] .xpo-promo-panel-content *[style*="color:#999"],
.dark-mode .xpo-promo-panel-content *[style*="color:#999"] {
    color: #6b7280 !important;
}

/* ============ 推广按钮 ============ */
.xpo-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1.5px solid;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all .2s;
    white-space: nowrap;
}
.xpo-points-btn {
    background: #fff7e6;
    border-color: #ffd591;
    color: #d46b08;
}
.xpo-points-btn:hover {
    background: #fff1d1;
    border-color: #ffc069;
}
.xpo-free-btn {
    background: #f0fdf4;
    border-color: #86efac;
    color: #15803d;
}
.xpo-free-btn:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

/* ============ 推广弹出面板 ============ */
.xpo-promo-panel {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: xpo-fade-in .25s ease;
}
/* 购买弹窗专用：更高 z-index 确保在所有内容之上 */
.xpo-purchase-panel {
    z-index: 100000;
}
@keyframes xpo-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.xpo-promo-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    cursor: pointer;
    z-index: 0;
}
.xpo-promo-panel-content {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.15);
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    animation: xpo-slide-up .3s ease;
}
@keyframes xpo-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.xpo-promo-panel-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.06);
    color: #666;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    z-index: 10;
}
.xpo-promo-panel-close:hover {
    background: rgba(0,0,0,.12);
    color: #333;
}
.xpo-promo-panel-body {
    padding: 32px 24px 28px;
}
.xpo-promo-panel-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* 响应式 */
@media (max-width: 767px) {
    .xpo-promo-panel-content {
        max-width: 95%;
        max-height: 85vh;
        border-radius: 12px;
    }
    .xpo-promo-panel-body {
        padding: 24px 16px 20px;
    }
}

/* ============ 子比支付弹窗包裹器 ============ */
.xpo-zibpay-native-wrap {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: visible;
}
.xpo-zibpay-inner {
    /* 让子比弹窗内的扫码/支付区域正常显示 */
}
.xpo-zibpay-close-btn {
    background: rgba(0,0,0,.06);
    color: #666;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xpo-zibpay-close-btn:hover {
    background: rgba(0,0,0,.12);
    color: #333;
}
/* 深色模式：子比支付弹窗 */
body.dark-theme .xpo-zibpay-native-wrap,
body[data-theme="dark"] .xpo-zibpay-native-wrap,
.dark-mode .xpo-zibpay-native-wrap {
    background: #1f2937;
}
body.dark-theme .xpo-zibpay-close-btn,
body[data-theme="dark"] .xpo-zibpay-close-btn,
.dark-mode .xpo-zibpay-close-btn {
    background: rgba(255,255,255,.08);
    color: #d1d5db;
}
body.dark-theme .xpo-zibpay-close-btn:hover,
body[data-theme="dark"] .xpo-zibpay-close-btn:hover,
.dark-mode .xpo-zibpay-close-btn:hover {
    background: rgba(255,255,255,.15);
    color: #f3f4f6;
}
.xpo-zibpay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: xpo-fade-in .25s ease;
}
.xpo-zibpay-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    cursor: pointer;
    z-index: 0;
}
/* 子比原生支付弹窗内容（覆盖其自带的 fixed 定位，确保在 wrapper 内居中） */
.xpo-zibpay-wrapper > .pay-modal,
.xpo-zibpay-wrapper > .zibpay-modal,
.xpo-zibpay-wrapper > div[id*="pay"],
.xpo-zibpay-wrapper > [class*="pay-modal"] {
    position: relative !important;
    z-index: 1;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0;
}
/* 子比支付弹窗内可能出现的 fixed overlay 改 absolute */
.xpo-zibpay-wrapper .modal-backdrop,
.xpo-zibpay-wrapper .pay-overlay,
.xpo-zibpay-wrapper [class*="modal-background"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
}

/* ============ 连续对话指示器 ============ */
.xpo-conv-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    color: #52c41a;
    background: rgba(82, 196, 26, .08);
    margin-right: 8px;
    white-space: nowrap;
    user-select: none;
}
.xpo-conv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #52c41a;
    animation: xpo-conv-pulse 1.6s infinite ease-in-out;
}
@keyframes xpo-conv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.7); }
}
.xpo-conv-label {
    font-weight: 500;
}
.xpo-conv-clear {
    color: #999;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    margin-left: 2px;
    padding: 0 2px;
    cursor: pointer;
}
.xpo-conv-clear:hover {
    color: #ff4d4f;
}

/* ============ 付费模板购买弹窗 ============ */
.xpo-purchase-body {
    padding: 20px 24px;
    min-width: 280px;
}
.xpo-purchase-body h3 {
    font-size: 18px;
    margin: 0 0 12px;
    color: #333;
}
/* 购买弹窗内文字和区域 */
.xpo-purchase-title {
    color: #333;
}
.xpo-purchase-info-box {
    border: 1px solid #ffe58f;
    background: #fffbe6;
    border-radius: 8px;
    padding: 14px;
    margin: 12px 0;
}
.xpo-purchase-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #333;
}
.xpo-purchase-row:last-child { margin-bottom: 0; }
.xpo-purchase-price {
    font-weight: 600;
    color: #fa8c16;
}
.xpo-purchase-duration {
    font-weight: 600;
    color: #52c41a;
}
.xpo-balance-ok { color: #52c41a; }
.xpo-balance-low { color: #ff4d4f; }
/* 支付方式选择 */
#xpo-pay-method-select {
    margin: 12px 0;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #eee;
}
.xpo-pay-method-title {
    margin: 0 0 10px;
    font-size: 13px;
    color: #666;
    text-align: center;
    font-weight: 600;
}
.xpo-pay-method-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    background: #fff;
    color: #333;
}
.xpo-pay-method-option:hover {
    border-color: #d0d0d0;
    background: #f5f5f5;
}
.xpo-pay-method-label {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
}
.xpo-pay-method-desc {
    font-size: 11px;
    color: #999;
}
#xpo-balance-insufficient-tip {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff2f0;
    border: 1px solid #ffccc7;
    border-radius: 6px;
    color: #ff4d4f;
    font-size: 12px;
    text-align: center;
}
.xpo-purchase-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.xpo-purchase-body .xpo-purchase-info-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.xpo-purchase-body .xpo-purchase-info-table td:last-child {
    text-align: right;
    font-weight: 600;
}
#xpo-purchase-confirm-btn {
    width: 100%;
    margin-top: 12px;
    cursor: pointer;
}
#xpo-purchase-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ================================================================
   微信扫码支付弹窗
   ================================================================ */
.xpo-wxpay-modal-content {
    background: #fff;
}
.xpo-wxpay-qr-wrap {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.xpo-wxpay-qr-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* 微信支付深色模式：弹窗主体暗色，二维码保持白色 */
body.dark-theme .xpo-wxpay-modal-content,
body[data-theme="dark"] .xpo-wxpay-modal-content,
.dark-mode .xpo-wxpay-modal-content {
    background: #1f2937;
    color: #e5e7eb;
}
body.dark-theme .xpo-wxpay-qr-wrap,
body[data-theme="dark"] .xpo-wxpay-qr-wrap,
.dark-mode .xpo-wxpay-qr-wrap {
    background: #fff;
}
/* 深色模式：购买弹窗 */
body.dark-theme .xpo-purchase-title,
body[data-theme="dark"] .xpo-purchase-title,
.dark-mode .xpo-purchase-title {
    color: #e5e7eb;
}
body.dark-theme .xpo-purchase-info-box,
body[data-theme="dark"] .xpo-purchase-info-box,
.dark-mode .xpo-purchase-info-box {
    background: #1e293b;
    border-color: #53441a;
    color: #d1d5db;
}
body.dark-theme .xpo-purchase-row,
body[data-theme="dark"] .xpo-purchase-row,
.dark-mode .xpo-purchase-row {
    color: #d1d5db;
}
body.dark-theme .xpo-purchase-row span,
body[data-theme="dark"] .xpo-purchase-row span,
.dark-mode .xpo-purchase-row span {
    color: #d1d5db;
}
body.dark-theme #xpo-pay-method-select,
body[data-theme="dark"] #xpo-pay-method-select,
.dark-mode #xpo-pay-method-select {
    background: #111827;
    border-color: #374151;
}
body.dark-theme .xpo-pay-method-title,
body[data-theme="dark"] .xpo-pay-method-title,
.dark-mode .xpo-pay-method-title {
    color: #9ca3af;
}
body.dark-theme .xpo-pay-method-option,
body[data-theme="dark"] .xpo-pay-method-option,
.dark-mode .xpo-pay-method-option {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}
body.dark-theme .xpo-pay-method-option:hover,
body[data-theme="dark"] .xpo-pay-method-option:hover,
.dark-mode .xpo-pay-method-option:hover {
    background: #283548;
    border-color: #4b5563;
}
body.dark-theme .xpo-pay-method-desc,
body[data-theme="dark"] .xpo-pay-method-desc,
.dark-mode .xpo-pay-method-desc {
    color: #6b7280;
}
body.dark-theme #xpo-balance-insufficient-tip,
body[data-theme="dark"] #xpo-balance-insufficient-tip,
.dark-mode #xpo-balance-insufficient-tip {
    background: #3b1818;
    border-color: #662424;
    color: #fca5a5;
}
body.dark-theme .xpo-purchase-info-table td,
body[data-theme="dark"] .xpo-purchase-info-table td,
.dark-mode .xpo-purchase-info-table td {
    border-bottom-color: #374151;
    color: #d1d5db;
}
body.dark-theme .xpo-purchase-info-table td:last-child,
body[data-theme="dark"] .xpo-purchase-info-table td:last-child,
.dark-mode .xpo-purchase-info-table td:last-child {
    color: #e5e7eb;
}
/* ================================================================
   微信扫码支付弹窗
   ================================================================ */
.xpo-wxpay-modal-content {
    background: #fff;
}
.xpo-wxpay-qr-wrap {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.xpo-wxpay-qr-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* 微信支付深色模式：弹窗主体暗色，二维码区域保持白色 */
body.dark-theme .xpo-wxpay-modal-content,
body[data-theme="dark"] .xpo-wxpay-modal-content,
.dark-mode .xpo-wxpay-modal-content {
    background: #1f2937;
    color: #e5e7eb;
}
body.dark-theme .xpo-wxpay-qr-wrap,
body[data-theme="dark"] .xpo-wxpay-qr-wrap,
.dark-mode .xpo-wxpay-qr-wrap {
    background: #fff;
}
/* 微信扫码支付支付状态文字 */
#xpo-payment-status {
    font-size: 13px;
    color: var(--main-color, #1677ff);
}
body.dark-theme #xpo-payment-status,
body[data-theme="dark"] #xpo-payment-status,
.dark-mode #xpo-payment-status {
    color: #60a5fa;
}
/* 微信扫码支付弹窗 */
.xpo-wxpay-modal-content {
    background: #fff;
}
.xpo-wxpay-qr-wrap {
    display: inline-block;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.xpo-wxpay-qr-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* 扫码支付深色模式 */
body.dark-theme .xpo-wxpay-modal-content,
body[data-theme="dark"] .xpo-wxpay-modal-content,
.dark-mode .xpo-wxpay-modal-content {
    background: #1f2937;
    color: #e5e7eb;
}
body.dark-theme .xpo-wxpay-qr-wrap,
body[data-theme="dark"] .xpo-wxpay-qr-wrap,
.dark-mode .xpo-wxpay-qr-wrap {
    background: #fff;
    /* 二维码区域保持白色背景，确保扫码成功 */
}

/* ================================================================
   我的主体 - 侧栏
   ================================================================ */
.xpo-subjects-section { margin-top: 2px; }
.xpo-subject-create-btn {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px dashed var(--main-border-color, #ddd);
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #1677ff); font-size: 16px; font-weight: 700;
    line-height: 24px; padding: 0; cursor: pointer; text-align: center; transition: all .2s;
}
.xpo-subject-create-btn:hover { background: var(--main-color, #1677ff); color: #fff; border-color: var(--main-color, #1677ff); }
.xpo-subject-create-full-btn { font-weight: 600; }
.xpo-subjects-list { max-height: 160px; overflow-y: auto; }
.xpo-subjects-empty { font-size: 11px; color: var(--main-sub-color, #aaa); padding: 8px 0; text-align: center; }
.xpo-subject-card {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0;
    border-radius: 8px; background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #eee); cursor: pointer; transition: all .2s; position: relative;
}
.xpo-subject-card:hover { border-color: var(--main-color, #1677ff); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.xpo-subject-preview {
    width: 36px; height: 36px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; background: #f0f0f0;
}
.xpo-subject-thumb { width: 100%; height: 100%; object-fit: cover; }
.xpo-subject-video-thumb { width: 100%; height: 100%; }
.xpo-subject-video-thumb video { width: 100%; height: 100%; object-fit: cover; }
.xpo-subject-icon { font-size: 20px; }
.xpo-subject-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xpo-subject-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpo-subject-count { font-size: 10px; color: var(--main-sub-color, #999); }
.xpo-subject-del {
    position: absolute; top: 4px; right: 6px; width: 18px; height: 18px;
    line-height: 16px; font-size: 12px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.1); color: #999; cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity .2s;
}
.xpo-subject-card:hover .xpo-subject-del { opacity: 1; }
.xpo-subject-del:hover { background: #ff4d4f; color: #fff; }

/* ============ 设置主体弹窗（即梦风格） ============ */
.xpo-subject-ref-wrap { margin-bottom: 16px; }
.xpo-subject-ref-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #333; }
.xpo-subject-ref-upload {
    min-height: 140px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px; padding: 20px 16px; cursor: pointer;
    transition: border-color .25s, background .25s;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
    background: #fafafa;
}
.xpo-subject-ref-upload:hover, .xpo-subject-dragover {
    border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04);
}
.xpo-subject-ref-placeholder { text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; }
.xpo-subject-ref-plus {
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--main-border-color, #d9d9d9);
    color: #999; font-size: 28px; font-weight: 300; line-height: 44px; text-align: center;
    transition: all .25s; user-select: none;
}
.xpo-subject-ref-upload:hover .xpo-subject-ref-plus { border-color: var(--main-color, #1677ff); color: var(--main-color, #1677ff); }
.xpo-subject-file-previews { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.xpo-subject-file-chip {
    display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative;
    width: 150px;
}
.xpo-subject-file-chip img {
    width: 150px; height: 150px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--main-border-color, #e8e8e8);
}
.xpo-subject-file-chip .xpo-subject-file-icon { font-size: 36px; }
.xpo-subject-file-chip .xpo-subject-file-thumb-wrap {
    width: 150px; height: 150px; border-radius: 10px; overflow: hidden;
    position: relative; border: 1px solid var(--main-border-color, #e8e8e8);
    background: #000;
}
.xpo-subject-file-chip .xpo-subject-file-thumb-wrap video {
    width: 100%; height: 100%; object-fit: cover;
}
.xpo-subject-file-chip .xpo-subject-file-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55);
    color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.xpo-subject-file-chip .xpo-subject-file-name {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #666;
}
.xpo-subject-file-remove {
    position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 2;
}

/* v7.8.5: 角色参考图网格布局（正面大图+侧面/反面小图） */
.xpo-subj-character-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 320px;
}
.xpo-subj-char-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
}
.xpo-subj-char-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-char-slot:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.xpo-subj-char-slot:nth-child(2) { grid-row: 1; grid-column: 2; }
.xpo-subj-char-slot:nth-child(3) { grid-row: 2; grid-column: 2; }
.xpo-subj-char-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-char-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-char-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-char-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-char-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-char-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v8.1.0: 背景/道具参考图网格布局（3列等宽） */
.xpo-subj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}
.xpo-subj-grid-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
    min-height: 120px;
}
.xpo-subj-grid-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-grid-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-grid-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-grid-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-grid-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-grid-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-grid-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v7.9.0: 角色声音区（label 关联 input） */
#xpo-subj-voice-area {
    position: relative; display: block;
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
#xpo-subj-voice-input { display: none; }
#xpo-subj-voice-area .xpo-subj-voice-preview audio { max-width: 100%; vertical-align: middle; }


/* v7.8.5: 角色参考图网格布局（正面大图+侧面/反面小图） */
.xpo-subj-character-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 320px;
}
.xpo-subj-char-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
}
.xpo-subj-char-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-char-slot:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.xpo-subj-char-slot:nth-child(2) { grid-row: 1; grid-column: 2; }
.xpo-subj-char-slot:nth-child(3) { grid-row: 2; grid-column: 2; }
.xpo-subj-char-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-char-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-char-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-char-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-char-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-char-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v8.1.0: 背景/道具参考图网格布局（3列等宽） */
.xpo-subj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}
.xpo-subj-grid-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
    min-height: 120px;
}
.xpo-subj-grid-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-grid-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-grid-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-grid-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-grid-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-grid-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-grid-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v7.9.0: 角色声音区（label 关联 input） */
#xpo-subj-voice-area {
    position: relative; display: block;
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
#xpo-subj-voice-input { display: none; }
#xpo-subj-voice-area .xpo-subj-voice-preview audio { max-width: 100%; vertical-align: middle; }


/* v7.8.5: 角色参考图网格布局（正面大图+侧面/反面小图） */
.xpo-subj-character-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 320px;
}
.xpo-subj-char-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
}
.xpo-subj-char-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-char-slot:nth-child(1) { grid-row: 1 / 3; grid-column: 1; }
.xpo-subj-char-slot:nth-child(2) { grid-row: 1; grid-column: 2; }
.xpo-subj-char-slot:nth-child(3) { grid-row: 2; grid-column: 2; }
.xpo-subj-char-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-char-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-char-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-char-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-char-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-char-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v8.1.0: 背景/道具参考图网格布局（3列等宽） */
.xpo-subj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
    border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 12px;
    padding: 12px;
    min-height: 160px;
}
.xpo-subj-grid-slot {
    position: relative;
    border-radius: 10px;
    background: #fafafa;
    border: 1px dashed var(--main-border-color, #d9d9d9);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s, background .25s;
    min-height: 120px;
}
.xpo-subj-grid-slot:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-subj-grid-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 12px; color: #999; background: rgba(255,255,255,.85); padding: 2px 10px; border-radius: 10px;
    pointer-events: none; z-index: 1;
}
.xpo-subj-grid-plus {
    font-size: 40px; color: #ccc; font-weight: 300; pointer-events: none;
}
.xpo-subj-grid-slot img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; background: #f5f5f5;
}
.xpo-subj-grid-slot .xpo-subject-file-name {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #333; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 3;
}
.xpo-subj-grid-slot .xpo-subject-file-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; font-size: 12px; line-height: 18px;
    border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); z-index: 4;
}
.xpo-subj-grid-slot input[type="file"] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 5;
}

/* v7.9.0: 角色声音区（label 关联 input） */
#xpo-subj-voice-area {
    position: relative; display: block;
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
#xpo-subj-voice-input { display: none; }
#xpo-subj-voice-area .xpo-subj-voice-preview audio { max-width: 100%; vertical-align: middle; }

.xpo-subject-field { margin-bottom: 14px; }
.xpo-subject-field label { font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; color: #333; }
.xpo-subject-field label span { flex-shrink: 0; }
.xpo-subject-field textarea.xpo-side-input {
    padding: 10px 12px; font-size: 13px; line-height: 1.5; font-family: inherit;
}

/* ============ v7.8.0 主体4版块Tab系统 ============ */
.xpo-subject-edit {
    position: absolute; top: 4px; right: 28px; width: 18px; height: 18px;
    line-height: 16px; font-size: 11px; border-radius: 50%; border: none;
    background: rgba(22,119,255,.12); color: #1677ff; cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity .2s;
}
.xpo-subject-card:hover .xpo-subject-edit { opacity: 1; }
.xpo-subject-edit:hover { background: #1677ff; color: #fff; }

#xpo-subject-modal .xpo-subj-tabs {
    display: flex; gap: 0; border-bottom: 1px solid #e8e8e8; margin-bottom: 14px;
    overflow-x: auto; scrollbar-width: none;
}
#xpo-subject-modal .xpo-subj-tabs::-webkit-scrollbar { display: none; }
#xpo-subject-modal .xpo-subj-tab {
    flex: 1 0 auto; min-width: 60px; padding: 8px 2px; font-size: 11px; font-weight: 500; text-align: center;
    cursor: pointer; border: none; background: none; color: #999; transition: all .2s;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
#xpo-subject-modal .xpo-subj-tab:hover { color: #1677ff; }
#xpo-subject-modal .xpo-subj-tab.active {
    color: #1677ff; font-weight: 600; border-bottom-color: #1677ff;
}
#xpo-subject-modal .xpo-subj-panel { display: none; }
#xpo-subject-modal .xpo-subj-panel.active { display: block; }

/* IP剧本 文本区域 */
#xpo-subject-modal .xpo-subject-field + .xpo-subject-field { margin-top: 12px; }
#xpo-subject-modal .xpo-subject-field label {
    display: block; font-size: 12px; font-weight: 500; color: #333; margin-bottom: 6px;
}
#xpo-subject-modal .xpo-subject-ipscript-script { margin-bottom: 8px; }


/* IP剧本 文本区域 */
#xpo-subject-modal .xpo-subject-field + .xpo-subject-field { margin-top: 12px; }
#xpo-subject-modal .xpo-subject-field label {
    display: block; font-size: 12px; font-weight: 500; color: #333; margin-bottom: 6px;
}
#xpo-subject-modal .xpo-subject-ipscript-script { margin-bottom: 8px; }

.xpo-subj-pos-label {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    font-size: 9px; color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px;
    border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 1;
}

#xpo-subj-voice-area {
    min-height: 56px; border: 2px dashed var(--main-border-color, #d9d9d9);
    border-radius: 10px; padding: 10px; cursor: pointer; text-align: center;
    transition: border-color .25s, background .25s; background: #fafafa;
}
#xpo-subj-voice-area:hover { border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
.xpo-subj-voice-placeholder { font-size: 12px; color: #999; padding: 6px 0; }
.xpo-subj-voice-preview { display: flex; align-items: center; gap: 8px; }
.xpo-subj-voice-preview audio { flex: 1; height: 32px; }
.xpo-subj-voice-remove {
    width: 22px; height: 22px; border-radius: 50%; border: none; background: #ff4d4f;
    color: #fff; font-size: 13px; cursor: pointer; flex-shrink: 0;
}

/* AI识别按钮 */
.xpo-subject-recognize-btn {
    font-size: 11px; font-weight: 500; padding: 3px 10px;
    border: 1px solid #1677ff; background: #e6f4ff; color: #1677ff;
    border-radius: 12px; cursor: pointer; transition: all 0.2s;
    white-space: nowrap; flex-shrink: 0;
}
.xpo-subject-recognize-btn:hover {
    background: #1677ff; color: #fff;
}
.xpo-subject-recognize-btn:disabled,
.xpo-subject-recognize-btn.xpo-loading {
    opacity: 0.6; cursor: not-allowed; pointer-events: none;
}

/* AI识别模型选择器 */
.xpo-subject-recognize-model-wrap {
    background: #f9fafb;
    border: 1px solid var(--main-border-color, #eee);
    border-radius: 8px;
    padding: 8px 10px;
}
.xpo-subject-recognize-model-wrap label {
    margin-bottom: 4px !important;
}
/* 深色模式 */
body.dark-theme .xpo-subject-recognize-model-wrap,
body[data-theme="dark"] .xpo-subject-recognize-model-wrap,
.dark-mode .xpo-subject-recognize-model-wrap {
    background: #1f2937;
    border-color: #374151;
}
body.dark-theme .xpo-subject-recognize-model-wrap label,
body[data-theme="dark"] .xpo-subject-recognize-model-wrap label,
.dark-mode .xpo-subject-recognize-model-wrap label {
    color: #9ca3af !important;
}

/* @提及下拉（v8.0.2: 即梦风格分类面板，v8.1.8 改为 fixed 定位并由 JS 动态计算位置） */

/* 面板头部 */
.xpo-mention-header {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px 4px; font-size: 13px; color: var(--main-sub-color, #888);
}
.xpo-mention-at-symbol {
    width: 22px; height: 22px; line-height: 20px; text-align: center;
    background: linear-gradient(135deg, #1677ff, #69b1ff);
    color: #fff; border-radius: 6px; font-size: 13px; font-weight: 700;
}
.xpo-mention-hint { font-size: 11px; color: var(--main-sub-color, #aaa); }
/* Tab栏 */
.xpo-mention-tabs {
    display: flex; gap: 2px; padding: 6px 10px; flex-wrap: wrap;
}
.xpo-mtab {
    padding: 3px 10px; border: 1px solid transparent; border-radius: 14px;
    background: transparent; font-size: 12px; cursor: pointer; color: var(--main-sub-color, #888);
    transition: all .15s; white-space: nowrap;
}
.xpo-mtab:hover { background: rgba(22,119,255,.06); color: var(--main-color, #333); }
.xpo-mtab.active {
    background: rgba(22,119,255,.1); color: var(--main-color, #1677ff);
    border-color: rgba(22,119,255,.25); font-weight: 600;
}
/* 创建主体入口 */
.xpo-mention-create-subj {
    display: flex; align-items: center; gap: 5px;
    margin: 4px 12px 6px; padding: 6px 10px;
    border: 1px dashed var(--main-border-color, #ddd); border-radius: 8px;
    font-size: 12px; color: var(--main-color, #555); cursor: pointer;
    transition: all .15s; background: rgba(22,119,255,.02);
}
.xpo-mention-create-subj:hover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.06); color: var(--main-color, #1677ff);
}
.xpo-mcs-icon { font-size: 16px; font-weight: 700; }
/* 面板内容区 */
.xpo-mention-body { padding: 0 8px 8px; min-height: 40px; }
/* 空状态 */
.xpo-mention-empty {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 24px 12px; font-size: 12px; color: var(--main-sub-color, #bbb);
}
.xpo-me-icon { font-size: 18px; opacity: .6; }
/* 分组标题 */
.xpo-mention-group-title {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 6px 4px; font-size: 11px; font-weight: 600;
    color: var(--main-sub-color, #999); letter-spacing: .3px;
}
.xpo-mgt-icon {
    display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
}
.xpo-mgt-img { background: #e6f4ff; }
.xpo-mgt-img::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #1677ff;border-radius:2px;margin:2.5px 3px; }
.xpo-mgt-video { background: #fff7e6; }
.xpo-mgt-video::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #fa8c16;border-radius:2px;margin:2.5px 3px; }
.xpo-mgt-doc { background: #f6ffed; }
.xpo-mgt-doc::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #52c41a;border-radius:2px;margin:2.5px 3px; }
.xpo-mgt-audio { background: #fff0f6; }
.xpo-mgt-audio::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #eb2f96;border-radius:50%;margin:2.5px 3px; }
.xpo-mgt-subj { background: #f9f0ff; }
.xpo-mgt-subj::before { content:''; display:inline-block; width:8px;height:8px;border:1.5px solid #722ed1;border-radius:3px;margin:2.5px 3px; }

.xpo-mgt-count {
    font-size: 10px; font-weight: 400; color: var(--main-sub-color, #bbb);
    background: rgba(0,0,0,.04); padding: 1px 6px; border-radius: 8px; margin-left: auto;
}
/* 卡片网格 */
.xpo-mention-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
}
.xpo-mention-subj-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
/* 单个卡片 */
.xpo-mention-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding: 6px; border-radius: 8px; cursor: pointer; transition: all .15s;
    border: 1px solid var(--main-border-color, #eee); background: var(--main-bg-color, #fff);
    overflow: hidden;
}
.xpo-mention-card:hover {
    border-color: var(--main-color, #1677ff); background: rgba(22,119,255,.04);
    transform: translateY(-1px); box-shadow: 0 2px 8px rgba(22,119,255,.1);
}
/* 缩略图区域 */
.xpo-mention-card {
    height: 80px; justify-content: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.xpo-mention-card:not([style*="background-image"]) {
    background: linear-gradient(135deg, rgba(22,119,255,.06), rgba(22,119,255,.02));
}
.xpo-mention-subj-card { height: 80px; }
.xpo-mc-noimg { font-size: 32px; opacity: .85; line-height: 1; }
/* 文件名 */
.xpo-mc-name {
    font-size: 12px; font-weight: 500; color: var(--main-color, #333); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 100%; max-width: 110px; margin-top: 6px;
    text-shadow: 0 1px 2px rgba(255,255,255,.7);
}
.xpo-mention-card:hover .xpo-mc-name { color: var(--main-color, #1677ff); }
.xpo-file-chip .xpo-at-badge {
    font-size: 9px; padding: 1px 5px; border-radius: 10px;
    background: rgba(82,196,26,.12); color: #52c41a;
    margin-left: 2px; cursor: pointer; flex-shrink: 0;
}
.xpo-file-chip .xpo-at-badge:hover { background: #52c41a; color: #fff; }

/* 文件chip拖拽排序 */
.xpo-file-chip-draggable { cursor: grab; user-select: none; -webkit-user-select: none; }
.xpo-file-chip-draggable:active { cursor: grabbing; }
.xpo-file-chip-dragging { opacity: 0.4; transform: scale(0.95); }
.xpo-file-chip-dragover {
    outline: 2px dashed var(--main-color, #1677ff) !important;
    outline-offset: 2px;
    background: rgba(22,119,255,.06) !important;
    border-radius: 6px;
}

/* 文件chip主体标签 */
.xpo-file-chip-subject { border: 1px dashed var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
.xpo-file-subject-tag { font-size: 9px; padding: 1px 5px; border-radius: 10px; background: rgba(22,119,255,.1); color: var(--main-color, #1677ff); white-space: nowrap; }

/* 历史记录调回按钮 */
.xpo-h-actions { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.xpo-h-recall {
    width: 20px; height: 20px; line-height: 18px; font-size: 11px; border-radius: 50%; border: none;
    background: rgba(22,119,255,.08); color: var(--main-color, #1677ff); cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity .2s;
}
.xpo-history-item:hover .xpo-h-recall { opacity: 1; }
.xpo-h-recall:hover { background: var(--main-color, #1677ff); color: #fff; }

/* 深色模式 - 主体 */
body.dark-theme .xpo-subject-card, body[data-theme="dark"] .xpo-subject-card, .dark-mode .xpo-subject-card { background: #1f2937; border-color: #374151; }
body.dark-theme .xpo-subject-card:hover, body[data-theme="dark"] .xpo-subject-card:hover, .dark-mode .xpo-subject-card:hover { border-color: #60a5fa; }
body.dark-theme .xpo-subject-preview, body[data-theme="dark"] .xpo-subject-preview, .dark-mode .xpo-subject-preview { background: #374151; }
/* 深色模式 - @提及面板 v8.0.2 */
body.dark-theme .xpo-mention-dropdown, body[data-theme="dark"] .xpo-mention-dropdown, .dark-mode .xpo-mention-dropdown { background: #1f2937; border-color: #374151; box-shadow: 0 -6px 24px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); }
body.dark-theme .xpo-mention-hint, body[data-theme="dark"] .xpo-mention-hint, .dark-mode .xpo-mention-hint { color: #6b7280; }
body.dark-theme .xpo-mtab, body[data-theme="dark"] .xpo-mtab, .dark-mode .xpo-mtab { color: #9ca3af; }
body.dark-theme .xpo-mtab:hover, body[data-theme="dark"] .xpo-mtab:hover, .dark-mode .xpo-mtab:hover { color: #e5e7eb; background: rgba(96,165,250,.08); }
body.dark-theme .xpo-mtab.active, body[data-theme="dark"] .xpo-mtab.active, .dark-mode .xpo-mtab.active { color: #60a5fa; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.12); }
body.dark-theme .xpo-mention-create-subj, body[data-theme="dark"] .xpo-mention-create-subj, .dark-mode .xpo-mention-create-subj { border-color: #374151; color: #d1d5db; background: rgba(96,165,250,.04); }
body.dark-theme .xpo-mention-create-subj:hover, body[data-theme="dark"] .xpo-mention-create-subj:hover, .dark-mode .xpo-mention-create-subj:hover { border-color: #60a5fa; background: rgba(96,165,250,.1); color: #60a5fa; }
body.dark-theme .xpo-mention-group-title, body[data-theme="dark"] .xpo-mention-group-title, .dark-mode .xpo-mention-group-title { color: #6b7280; }
body.dark-theme .xpo-mention-card, body[data-theme="dark"] .xpo-mention-card, .dark-mode .xpo-mention-card { border-color: #374151; background: #111827; }
body.dark-theme .xpo-mention-card:hover, body[data-theme="dark"] .xpo-mention-card:hover, .dark-mode .xpo-mention-card:hover { border-color: #60a5fa; background: rgba(96,165,250,.08); box-shadow: 0 2px 8px rgba(96,165,250,.15); }
body.dark-theme .xpo-mc-name, body[data-theme="dark"] .xpo-mc-name, .dark-mode .xpo-mc-name { color: #9ca3af; }
body.dark-theme .xpo-mention-card:hover .xpo-mc-name, body[data-theme="dark"] .xpo-mention-card:hover .xpo-mc-name, .dark-mode .xpo-mention-card:hover .xpo-mc-name { color: #60a5fa; }
body.dark-theme .xpo-subject-file-chip, body[data-theme="dark"] .xpo-subject-file-chip, .dark-mode .xpo-subject-file-chip { background: #374151; }
body.dark-theme .xpo-subject-upload-area, body[data-theme="dark"] .xpo-subject-upload-area, .dark-mode .xpo-subject-upload-area { border-color: #374151; }
/* v8.1.0: 背景/道具网格深色模式 */
body.dark-theme .xpo-subj-grid, body[data-theme="dark"] .xpo-subj-grid, .dark-mode .xpo-subj-grid { border-color: #374151; }
body.dark-theme .xpo-subj-grid-slot, body[data-theme="dark"] .xpo-subj-grid-slot, .dark-mode .xpo-subj-grid-slot { background: #1f2937; border-color: #374151; }
body.dark-theme .xpo-subj-grid-slot:hover, body[data-theme="dark"] .xpo-subj-grid-slot:hover, .dark-mode .xpo-subj-grid-slot:hover { border-color: #60a5fa; background: rgba(96,165,250,.08); }
body.dark-theme .xpo-subj-grid-label, body[data-theme="dark"] .xpo-subj-grid-label, .dark-mode .xpo-subj-grid-label { color: #9ca3af; background: rgba(31,41,55,.85); }
body.dark-theme .xpo-subj-grid-plus, body[data-theme="dark"] .xpo-subj-grid-plus, .dark-mode .xpo-subj-grid-plus { color: #4b5563; }
body.dark-theme .xpo-subj-grid-slot img, body[data-theme="dark"] .xpo-subj-grid-slot img, .dark-mode .xpo-subj-grid-slot img { background: #111827; }

/* ================================================================
   我的主体 - 侧栏
   ================================================================ */
.xpo-subjects-section {
    margin-top: 2px;
}
.xpo-subject-create-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px dashed var(--main-border-color, #ddd);
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #1677ff);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.xpo-subject-create-btn:hover {
    background: var(--main-color, #1677ff);
    color: #fff;
    border-color: var(--main-color, #1677ff);
}
.xpo-subjects-list {
    max-height: 160px;
    overflow-y: auto;
}
.xpo-subjects-empty {
    font-size: 11px;
    color: var(--main-sub-color, #aaa);
    padding: 8px 0;
    text-align: center;
}
.xpo-subject-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    border-radius: 8px;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #eee);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.xpo-subject-card:hover {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.xpo-subject-preview {
    width: 36px; height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}
.xpo-subject-thumb {
    width: 100%; height: 100%; object-fit: cover;
}
.xpo-subject-video-thumb { width: 100%; height: 100%; }
.xpo-subject-video-thumb video { width: 100%; height: 100%; object-fit: cover; }
.xpo-subject-icon {
    font-size: 20px;
}
.xpo-subject-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}
.xpo-subject-name {
    font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xpo-subject-count {
    font-size: 10px; color: var(--main-sub-color, #999);
}
.xpo-subject-del {
    position: absolute; top: 4px; right: 6px;
    width: 18px; height: 18px;
    line-height: 16px; font-size: 12px;
    border-radius: 50%; border: none;
    background: rgba(0,0,0,.1); color: #999;
    cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity 0.2s;
}
.xpo-subject-card:hover .xpo-subject-del { opacity: 1; }
.xpo-subject-del:hover { background: #ff4d4f; color: #fff; }

/* ================================================================
   创建主体弹窗
   ================================================================ */
.xpo-subject-upload-area {
    min-height: 80px;
    border: 2px dashed var(--main-border-color, #ddd);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.xpo-subject-upload-area:hover,
.xpo-subject-dragover {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.03);
}
.xpo-subject-upload-placeholder {
    width: 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; color: #aaa; font-size: 12px;
}
.xpo-subject-file-previews {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.xpo-subject-file-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 6px;
    background: #f5f5f5; font-size: 11px;
    position: relative;
}
.xpo-subject-file-chip img {
    width: 40px; height: 40px; object-fit: cover; border-radius: 4px;
}
.xpo-subject-file-icon { font-size: 20px; }
.xpo-subject-file-thumb-wrap {
    width: 40px; height: 40px; border-radius: 4px; overflow: hidden;
    position: relative; border: 1px solid var(--main-border-color, #e8e8e8);
    background: #000;
}
.xpo-subject-file-thumb-wrap video {
    width: 100%; height: 100%; object-fit: cover;
}
.xpo-subject-file-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.55);
    color: #fff; font-size: 8px; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.xpo-subject-file-name {
    max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xpo-subject-file-remove {
    position: absolute; top: -6px; right: -6px;
    width: 16px; height: 16px; font-size: 10px; line-height: 14px;
    border-radius: 50%; border: none;
    background: #ff4d4f; color: #fff; cursor: pointer;
    text-align: center; padding: 0;
}


.xpo-mention-group-header {
    padding: 6px 12px 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--main-sub-color, #aaa);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--main-border-color, #f0f0f0);
}
.xpo-mention-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px; font-size: 13px;
    cursor: pointer; transition: background 0.15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--main-color, #333);
}
.xpo-mention-item:hover,
.xpo-mention-item:focus {
    background: rgba(22,119,255,.08);
    color: var(--main-color, #1677ff);
}
.xpo-mention-item .xpo-mention-from {
    font-size: 9px;
    padding: 0px 5px;
    border-radius: 10px;
    background: rgba(22,119,255,.1);
    color: var(--main-color, #1677ff);
    margin-left: 4px;
    flex-shrink: 0;
}
.xpo-mention-item .xpo-mention-count {
    font-size: 10px;
    color: var(--main-sub-color, #999);
    flex-shrink: 0;
}
/* @提示小标签 - 文件chip上的@标识 */
.xpo-file-chip .xpo-at-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(82,196,26,.12);
    color: #52c41a;
    margin-left: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.xpo-file-chip .xpo-at-badge:hover {
    background: #52c41a;
    color: #fff;
}

/* ================================================================
   文件chip中的主体标签
   ================================================================ */
.xpo-file-chip-subject {
    border: 1px dashed var(--main-color, #1677ff);
    background: rgba(22,119,255,.04);
}
.xpo-file-subject-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(22,119,255,.1);
    color: var(--main-color, #1677ff);
    white-space: nowrap;
}

/* ================================================================
   历史记录调回按钮
   ================================================================ */
.xpo-h-actions {
    display: flex; gap: 2px; align-items: center; flex-shrink: 0;
}
.xpo-h-recall {
    width: 20px; height: 20px;
    line-height: 18px; font-size: 11px;
    border-radius: 50%; border: none;
    background: rgba(22,119,255,.08);
    color: var(--main-color, #1677ff);
    cursor: pointer; text-align: center; padding: 0;
    opacity: 0; transition: opacity 0.2s;
}
.xpo-history-item:hover .xpo-h-recall { opacity: 1; }
.xpo-h-recall:hover {
    background: var(--main-color, #1677ff);
    color: #fff;
}

/* 深色模式 - 主体 */
body.dark-theme .xpo-subject-card,
body[data-theme="dark"] .xpo-subject-card,
.dark-mode .xpo-subject-card {
    background: #1f2937; border-color: #374151;
}
body.dark-theme .xpo-subject-card:hover,
body[data-theme="dark"] .xpo-subject-card:hover,
.dark-mode .xpo-subject-card:hover {
    border-color: #60a5fa;
}
body.dark-theme .xpo-subject-preview,
body[data-theme="dark"] .xpo-subject-preview,
.dark-mode .xpo-subject-preview {
    background: #374151;
}
body.dark-theme .xpo-mention-dropdown,
body[data-theme="dark"] .xpo-mention-dropdown,
.dark-mode .xpo-mention-dropdown {
    background: #1f2937; border-color: #374151;
}
body.dark-theme .xpo-mention-item,
body[data-theme="dark"] .xpo-mention-item,
.dark-mode .xpo-mention-item {
    color: #d1d5db;
}
body.dark-theme .xpo-mention-item:hover,
body[data-theme="dark"] .xpo-mention-item:hover,
.dark-mode .xpo-mention-item:hover {
    background: rgba(96,165,250,.12);
    color: #60a5fa;
}
body.dark-theme .xpo-subject-file-chip,
body[data-theme="dark"] .xpo-subject-file-chip,
.dark-mode .xpo-subject-file-chip {
    background: #374151;
}
body.dark-theme .xpo-subject-upload-area,
body[data-theme="dark"] .xpo-subject-upload-area,
.dark-mode .xpo-subject-upload-area {
    border-color: #374151;
}

/* ================================================================
   v5.0.0 豆包风格 - 底部控制区（Tab + 模型选择 + 参数面板 + 输入框）
   ================================================================ */

/* ========== 底部控制条容器 ========== */
.xpo-bottom-bar {
    flex-shrink: 0;
    border-top: 2px solid var(--main-border-color, #d9d9d9);
    background: var(--main-bg-color, #fff);
    box-shadow: 0 -2px 12px rgba(0,0,0,.04);
    padding: 0 20px 12px;
}
@media (max-width: 768px) {
    .xpo-bottom-bar { position: sticky; bottom: 0; z-index: 10; padding: 0 12px 10px; }
}

/* ========== Tab 切换栏 ========== */
.xpo-tab-bar {
    display: flex;
    gap: 4px;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--main-border-color, #eee);
}
.xpo-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1.5px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--main-sub-color, #888);
    transition: all .2s;
    position: relative;
    bottom: -1px;
}
.xpo-tab-btn:hover {
    color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.03);
}
.xpo-tab-btn.active {
    color: var(--main-color, #1677ff);
    border-color: var(--main-border-color, #eee);
    border-bottom-color: var(--main-bg-color, #fff);
    background: var(--main-bg-color, #fff);
    font-weight: 600;
}
.xpo-tab-icon { font-size: 16px; }
.xpo-tab-text { font-size: 13px; }

/* 图片Tab激活色 */
.xpo-tab-btn[data-tab="image"].active {
    color: #fa8c16;
    border-bottom-color: var(--main-bg-color, #fff);
}
/* 视频Tab激活色 */
.xpo-tab-btn[data-tab="video"].active {
    color: #eb2f96;
    border-bottom-color: var(--main-bg-color, #fff);
}

/* ========== 底部控制区（v5.4.5: 豆包风格悬浮输入卡片） ========== */
.xpo-bottom-bar {
    padding: 0 16px 24px;
    width: 860px;
    max-width: 100%;
    margin: 0 auto;
}
.xpo-input-card {
    width: 100%;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #e5e7eb);
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02);
    padding: 10px 14px 8px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.xpo-input-card:focus-within {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 2px 20px rgba(22,119,255,.1), 0 0 0 3px rgba(22,119,255,.06);
}

/* 积分消耗提示 */
.xpo-cost-hint {
    font-size: 11.5px;
    color: var(--main-sub-color, #888);
    padding: 2px 4px 6px;
    line-height: 1.4;
}
.xpo-cost-hint b { color: var(--main-color, #1677ff); font-weight: 600; }

/* 输入框区域 */
.xpo-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 2px 0;
}
.xpo-chat-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    resize: none;
    font-size: 14px;
    line-height: 1.6;
    min-height: 24px;
    max-height: 120px;
    padding: 6px 4px;
    color: var(--main-color, #333);
    font-family: inherit;
    box-shadow: none !important;
}
.xpo-chat-input::placeholder { color: var(--main-sub-color, #aaa); }

/* 上传按钮 */
.xpo-upload-trigger {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: transparent;
    color: var(--main-sub-color, #888);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.xpo-upload-trigger:hover { background: rgba(0,0,0,.05); color: var(--main-color, #1677ff); }

/* 发送按钮 */
.xpo-send-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border: none; border-radius: 50%;
    background: var(--main-color, #1677ff);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.xpo-send-btn:disabled { background: #d1d5db; cursor: not-allowed; }
.xpo-send-btn:not(:disabled):hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(22,119,255,.3); }

/* 工具栏（v5.4.6: 桌面端一排不换行） */
.xpo-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 6px;
    flex-wrap: nowrap;
    min-height: 38px;
    overflow: hidden;
}

/* Tab 切换栏 */
.xpo-tab-bar {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.xpo-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--main-sub-color, #888);
    cursor: pointer;
    transition: all .15s;
}
.xpo-tab-btn:hover { background: rgba(0,0,0,.04); color: var(--main-color, #555); }
.xpo-tab-btn.active {
    background: rgba(22,119,255,.08);
    color: var(--main-color, #1677ff);
    font-weight: 600;
}
.xpo-tab-icon { font-size: 13px; }
.xpo-tab-text { font-size: 12px; }

/* 模型选择（v5.4.5: 嵌入工具栏） */
.xpo-bottom-model-wrap {
    flex-shrink: 0;
    padding: 0;
}

/* 参数按钮（v5.4.6: 一排不换行，允许收缩） */
.xpo-param-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}
.xpo-param-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--main-border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--main-bg-color, #fff);
    font-size: 12px;
    color: var(--main-sub-color, #666);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}
.xpo-param-btn:hover { border-color: var(--main-color, #1677ff); color: var(--main-color, #1677ff); }
.xpo-param-btn.open { border-color: var(--main-color, #1677ff); color: var(--main-color, #1677ff); background: rgba(22,119,255,.04); }
.xpo-param-btn-label { font-weight: 500; opacity: .7; flex-shrink: 0; }
.xpo-param-btn-value { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.xpo-param-btn-arrow { font-size: 10px; opacity: .5; transition: transform .2s; flex-shrink: 0; }
.xpo-param-btn.open .xpo-param-btn-arrow { transform: rotate(180deg); opacity: 1; }

/* 参数弹出面板（挂载body，v5.4.6: 向上展开+标题+单选框） */
.xpo-param-popover {
    position: fixed;
    z-index: 99998;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
    min-width: 160px;
    display: none;
}
.xpo-param-popover-title {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.xpo-param-popover-item {
    padding: 9px 12px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: all .12s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 2px;
    border-radius: 8px;
}
.xpo-param-popover-item:hover { background: rgba(22,119,255,.06); color: #1677ff; }
.xpo-param-popover-item.active { color: #1677ff; font-weight: 600; background: rgba(22,119,255,.04); }
.xpo-param-radio { font-size: 14px; color: #ccc; flex-shrink: 0; line-height: 1; }
.xpo-param-popover-item.active .xpo-param-radio { color: #1677ff; }
.xpo-param-label-text { flex: 1; }
.xpo-param-check { color: #1677ff; font-size: 13px; flex-shrink: 0; }

/* v5.4.9: 密钥区折叠 */
.xpo-key-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background .15s;
    padding: 4px 6px;
    margin: -4px -6px 4px;
    border-radius: 6px;
}
.xpo-key-header:hover { background: rgba(0,0,0,.03); }
.xpo-key-toggle {
    font-size: 11px;
    color: var(--main-color, #1677ff);
    font-weight: 500;
    cursor: pointer;
}
.xpo-key-body {
    padding-top: 4px;
}

/* 文件chips */
.xpo-file-chips { margin-bottom: 4px; }

/* 字数提示 */
.xpo-input-footer {
    text-align: right;
    padding: 4px 8px 0;
    font-size: 11px;
    color: var(--main-sub-color, #aaa);
}

/* ========== 底部模型选择器（v5.4.0: 自定义下拉，挂载body绕过overflow:hidden） ========== */
.xpo-bottom-model-wrap {
    padding: 8px 0 6px;
}
/* 触发按钮（v5.4.6: 嵌入工具栏，自适应宽度） */
.xpo-bottom-model-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto;
    max-width: 200px;
    padding: 5px 10px;
    border: 1px solid var(--main-border-color, #ddd);
    border-radius: 8px;
    background: var(--main-bg-color, #fff);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-sub-color, #666);
    transition: all .18s ease;
    outline: none;
    user-select: none;
}
.xpo-bottom-model-trigger:hover {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 2px 8px rgba(22,119,255,.1);
    color: var(--main-color, #1677ff);
}
.xpo-bottom-model-trigger.open {
    border-color: var(--main-color, #1677ff);
    box-shadow: 0 2px 12px rgba(22,119,255,.15);
    color: var(--main-color, #1677ff);
}
.xpo-bmt-icon { font-size: 15px; flex-shrink: 0; }
.xpo-bmt-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpo-bmt-arrow {
    font-size: 11px; transition: transform .2s ease; flex-shrink: 0; opacity: .55;
    font-family: system-ui, -apple-system, sans-serif;
}
.xpo-bottom-model-trigger.open .xpo-bmt-arrow { transform: rotate(180deg); opacity: 1; }

/* 下拉面板（挂载到body，fixed定位） */
.xpo-bottom-model-dropdown {
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    max-height: 320px;
    overflow-y: auto;
    padding: 5px 0;
    display: none;
}
.xpo-bmd-empty { padding:20px;text-align:center;color:#aaa;font-size:13px; }

/* 下拉项 */
.xpo-bmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: all .12s ease;
    font-size: 13.2px;
    color: #444;
    border-left: 3px solid transparent;
    margin: 1px 4px;
    border-radius: 8px;
}
.xpo-bmd-item:hover {
    background: rgba(22,119,255,.06);
    color: #1677ff;
    border-left-color: #1677ff;
}
.xpo-bmd-item.active {
    background: rgba(22,119,255,.1);
    color: #1677ff;
    font-weight: 600;
    border-left-color: #1677ff;
}
.xpo-bmd-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xpo-bmd-tags { font-size:11px; flex-shrink:0; opacity:.75; letter-spacing:.5px; }

/* ========== 动态参数面板 ========== */
.xpo-param-panel {
    padding: 8px 0 4px;
    overflow-y: auto;
    max-height: 200px;}
.xpo-param-panel::-webkit-scrollbar { width: 4px; }
.xpo-param-panel::-webkit-scrollbar-thumb { background: var(--main-border-color,#ddd); border-radius: 2px; }

.xpo-param-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xpo-param-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xpo-param-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--main-color, #555);
    min-width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.xpo-param-label input[type="checkbox"] {
    accent-color: var(--main-color, #1677ff);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* 参数选项按钮组 */
.xpo-param-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.xpo-param-opt {
    padding: 5px 12px;
    border: 1.5px solid var(--main-border-color, #ddd);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-sub-color, #666);
    cursor: pointer;
    transition: all .15s;
    background: var(--main-bg-color, #fff);
    white-space: nowrap;
}
.xpo-param-opt:hover {
    border-color: var(--main-color, #1677ff);
    color: var(--main-color, #1677ff);
}
.xpo-param-opt.active {
    border-color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.06);
    color: var(--main-color, #1677ff);
    font-weight: 600;
}
/* 图片Tab下选项高亮色 */
.xpo-tab-btn[data-tab="image"].active ~ .xpo-bottom-model-wrap ~ .xpo-param-panel .xpo-param-opt.active,
.xpo-param-panel:has(#xpo-param-image:not([style*="none"])) .xpo-param-opt.active {
    border-color: #fa8c16;
    background: rgba(250,140,22,.06);
    color: #fa8c16;
}
/* 视频Tab下选项高亮色 */
.xpo-param-panel:has(#xpo-param-video:not([style*="none"])) .xpo-param-opt.active {
    border-color: #eb2f96;
    background: rgba(235,47,150,.06);
    color: #eb2f96;
}

/* 参考图上传区域 */
.xpo-param-ref-upload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px dashed var(--main-border-color, #ccc);
    border-radius: 10px;
    font-size: 12px;
    color: var(--main-sub-color, #888);
    cursor: pointer;
    transition: all .2s;
    background: var(--main-sub-bg, #fafafa);
}
.xpo-param-ref-upload:hover {
    border-color: var(--main-color, #1677ff);
    color: var(--main-color, #1677ff);
    background: rgba(22,119,255,.03);
}
.xpo-ref-placeholder {
    white-space: nowrap;
}
.xpo-param-ref-preview {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.xpo-param-ref-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    border: 1.5px solid var(--main-border-color, #eee);
    position: relative;
}
.xpo-param-ref-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.xpo-param-ref-thumb .xpo-ref-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    font-size: 11px;
    border-radius: 50%;
    border: none;
    background: #ff4d4f;
    color: #fff;
    cursor: pointer;
    text-align: center;
    padding: 0;
}

/* 输入框区域在底部bar内微调 */
.xpo-bottom-bar .xpo-input-bar {
    border-top: none;
    box-shadow: none;
    padding: 8px 0 0;
}

/* ========== 图片/视频生成结果展示 ========== */
.xpo-gen-result {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--main-sub-bg, #f8f9fa);
    border: 1px solid var(--main-border-color, #eee);
}
.xpo-gen-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--main-border-color, #e0e0e0);
    background: #000;
    flex-shrink: 0;
}
.xpo-gen-item img,
.xpo-gen-item video {
    display: block;
    max-width: 320px;
    max-height: 320px;
    object-fit: contain;
}
.xpo-gen-item video {
    min-width: 200px;
    min-height: 150px;
}
.xpo-gen-item-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    opacity: 0;
    transition: opacity .2s;
}
.xpo-gen-item:hover .xpo-gen-item-actions { opacity: 1; }
.xpo-gen-action-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,.9);
    color: #333;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.xpo-gen-action-btn:hover {
    background: #fff;
    color: var(--main-color, #1677ff);
}

/* ========== 深色模式 - 底部控制区 ========== */
body.dark-theme .xpo-bottom-bar,
body[data-theme="dark"] .xpo-bottom-bar,
.dark-mode .xpo-bottom-bar {
    background: #111827;
    border-color: #1f2937;
}
body.dark-theme .xpo-tab-btn,
body[data-theme="dark"] .xpo-tab-btn,
.dark-mode .xpo-tab-btn {
    color: #9ca3af;
}
body.dark-theme .xpo-tab-btn.active,
body[data-theme="dark"] .xpo-tab-btn.active,
.dark-mode .xpo-tab-btn.active {
    color: #60a5fa;
    border-color: #374151;
    background: #111827;
    border-bottom-color: #111827;
}
body.dark-theme .xpo-tab-btn[data-tab="image"].active,
body[data-theme="dark"] .xpo-tab-btn[data-tab="image"].active,
.dark-mode .xpo-tab-btn[data-tab="image"].active {
    color: #fbbf24;
}
body.dark-theme .xpo-tab-btn[data-tab="video"].active,
body[data-theme="dark"] .xpo-tab-btn[data-tab="video"].active,
.dark-mode .xpo-tab-btn[data-tab="video"].active {
    color: #f472b6;
}
body.dark-theme .xpo-bottom-model-trigger,
body[data-theme="dark"] .xpo-bottom-model-trigger,
.dark-mode .xpo-bottom-model-trigger {
    background: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}
body.dark-theme .xpo-bottom-model-trigger:hover,
body[data-theme="dark"] .xpo-bottom-model-trigger:hover,
.dark-mode .xpo-bottom-model-trigger:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59,130,246,.15);
    color: #60a5fa;
}
body.dark-theme .xpo-bottom-model-trigger.open,
body[data-theme="dark"] .xpo-bottom-model-trigger.open,
.dark-mode .xpo-bottom-model-trigger.open {
    border-color: #3b82f6;
    box-shadow: 0 2px 12px rgba(59,130,246,.2);
    color: #60a5fa;
}
body.dark-theme .xpo-bottom-model-dropdown,
body[data-theme="dark"] .xpo-bottom-model-dropdown,
.dark-mode .xpo-bottom-model-dropdown {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 8px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
}
body.dark-theme .xpo-bmd-item,
body[data-theme="dark"] .xpo-bmd-item,
.dark-mode .xpo-bmd-item {
    color: #d1d5db;
}
body.dark-theme .xpo-bmd-item:hover,
body[data-theme="dark"] .xpo-bmd-item:hover,
.dark-mode .xpo-bmd-item:hover {
    background: rgba(59,130,246,.12);
    color: #60a5fa;
    border-left-color: #3b82f6;
}
body.dark-theme .xpo-bmd-item.active,
body[data-theme="dark"] .xpo-bmd-item.active,
.dark-mode .xpo-bmd-item.active {
    background: rgba(59,130,246,.18);
    color: #60a5fa;
    border-left-color: #3b82f6;
}
/* v5.4.6: 参数按钮和弹出面板深色适配 */
body.dark-theme .xpo-param-btn,
body[data-theme="dark"] .xpo-param-btn,
.dark-mode .xpo-param-btn {
    background: #1f2937; border-color:#374151; color:#9ca3af;
}
body.dark-theme .xpo-param-btn:hover,
body[data-theme="dark"] .xpo-param-btn:hover,
.dark-mode .xpo-param-btn:hover {
    border-color:#3b82f6; color:#60a5fa;
}
body.dark-theme .xpo-param-btn.open,
body[data-theme="dark"] .xpo-param-btn.open,
.dark-mode .xpo-param-btn.open {
    border-color:#3b82f6; color:#60a5fa; background:rgba(59,130,246,.08);
}
body.dark-theme .xpo-param-popover,
body[data-theme="dark"] .xpo-param-popover,
.dark-mode .xpo-param-popover {
    background:#1f2937; border-color:#374151;
    box-shadow:0 4px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
}
body.dark-theme .xpo-param-popover-title,
body[data-theme="dark"] .xpo-param-popover-title,
.dark-mode .xpo-param-popover-title {
    color:#6b7280;
}
body.dark-theme .xpo-param-popover-item,
body[data-theme="dark"] .xpo-param-popover-item,
.dark-mode .xpo-param-popover-item {
    color:#d1d5db;
}
body.dark-theme .xpo-param-popover-item:hover,
body[data-theme="dark"] .xpo-param-popover-item:hover,
.dark-mode .xpo-param-popover-item:hover {
    background:rgba(59,130,246,.12); color:#60a5fa;
}
body.dark-theme .xpo-param-popover-item.active,
body[data-theme="dark"] .xpo-param-popover-item.active,
.dark-mode .xpo-param-popover-item.active {
    color:#60a5fa; background:rgba(59,130,246,.1);
}
body.dark-theme .xpo-param-radio,
body[data-theme="dark"] .xpo-param-radio,
.dark-mode .xpo-param-radio {
    color:#4b5563;
}
body.dark-theme .xpo-param-popover-item.active .xpo-param-radio,
body[data-theme="dark"] .xpo-param-popover-item.active .xpo-param-radio,
.dark-mode .xpo-param-popover-item.active .xpo-param-radio {
    color:#60a5fa;
}
body.dark-theme .xpo-param-label,
body[data-theme="dark"] .xpo-param-label,
.dark-mode .xpo-param-label {
    color: #9ca3af;
}
body.dark-theme .xpo-param-opt,
body[data-theme="dark"] .xpo-param-opt,
.dark-mode .xpo-param-opt {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-theme .xpo-param-opt:hover,
body[data-theme="dark"] .xpo-param-opt:hover,
.dark-mode .xpo-param-opt:hover {
    border-color: #4b5563;
    color: #60a5fa;
}
body.dark-theme .xpo-param-opt.active,
body[data-theme="dark"] .xpo-param-opt.active,
.dark-mode .xpo-param-opt.active {
    background: rgba(59,130,246,.12);
    border-color: #3b82f6;
    color: #60a5fa;
}
body.dark-theme .xpo-param-ref-upload,
body[data-theme="dark"] .xpo-param-ref-upload,
.dark-mode .xpo-param-ref-upload {
    background: #1f2937;
    border-color: #374151;
    color: #9ca3af;
}
body.dark-theme .xpo-gen-result,
body[data-theme="dark"] .xpo-gen-result,
.dark-mode .xpo-gen-result {
    background: #1f2937;
    border-color: #374151;
}
body.dark-theme .xpo-gen-item,
body[data-theme="dark"] .xpo-gen-item,
.dark-mode .xpo-gen-item {
    border-color: #374151;
}

/* ================================================================
   v7.2.3 图片 Lightbox 放大查看（点击图片弹出全屏预览）
   ================================================================ */
.xpo-gen-img-zoom {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.xpo-gen-img-zoom:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Lightbox 遮罩层 */
.xpo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.xpo-lightbox.xpo-lightbox-show {
    opacity: 1;
    visibility: visible;
}

/* 半透明黑色背景 */
.xpo-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
}

/* 图片本身 */
.xpo-lightbox-img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,.4);
    object-fit: contain;
    animation: xpo-lb-scale-in .25s ease;
}

/* 关闭按钮 */
.xpo-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    backdrop-filter: blur(4px);
}
.xpo-lightbox-close:hover {
    background: rgba(255,255,255,.3);
}

@keyframes xpo-lb-scale-in {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* 深色模式 Lightbox */
body.dark-theme .xpo-lightbox-close,
body[data-theme="dark"] .xpo-lightbox-close,
.dark-mode .xpo-lightbox-close {
    background: rgba(255,255,255,.1);
}
body.dark-theme .xpo-lightbox-close:hover,
body[data-theme="dark"] .xpo-lightbox-close:hover,
.dark-mode .xpo-lightbox-close:hover {
    background: rgba(255,255,255,.22);
}

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }

/* ================================================================
   v7.2.3 图片 Lightbox 放大查看（点击图片弹出全屏预览）
   ================================================================ */
.xpo-gen-img-zoom {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.xpo-gen-img-zoom:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Lightbox 遮罩层 */
.xpo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.xpo-lightbox.xpo-lightbox-show {
    opacity: 1;
    visibility: visible;
}

/* 半透明黑色背景 */
.xpo-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
}

/* 图片本身 */
.xpo-lightbox-img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,.4);
    object-fit: contain;
    animation: xpo-lb-scale-in .25s ease;
}

/* 关闭按钮 */
.xpo-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    backdrop-filter: blur(4px);
}
.xpo-lightbox-close:hover {
    background: rgba(255,255,255,.3);
}

@keyframes xpo-lb-scale-in {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* 深色模式 Lightbox */
body.dark-theme .xpo-lightbox-close,
body[data-theme="dark"] .xpo-lightbox-close,
.dark-mode .xpo-lightbox-close {
    background: rgba(255,255,255,.1);
}
body.dark-theme .xpo-lightbox-close:hover,
body[data-theme="dark"] .xpo-lightbox-close:hover,
.dark-mode .xpo-lightbox-close:hover {
    background: rgba(255,255,255,.22);
}

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }

/* v7.8.1: 角色版块大图+缩略图布局（参考即梦） */
#xpo-subject-modal .xpo-subj-chip-main { width: 240px; }
#xpo-subject-modal .xpo-subj-chip-main img { width: 240px; height: 300px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-main .xpo-subject-file-name { max-width: 240px; }
#xpo-subject-modal .xpo-subj-chip-thumb { width: 90px; }
#xpo-subject-modal .xpo-subj-chip-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
#xpo-subject-modal .xpo-subj-chip-thumb .xpo-subject-file-name { max-width: 90px; font-size: 9px; }

/* v8.6.7: 底部操作按钮（水平排列，纯文本） */
.xpo-msg-actions-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 8px 0 0 0;
    border-top: 1px solid var(--main-border-color, #eee);
}
.xpo-msg-actions-bottom button {
    background: transparent;
    border: none;
    color: var(--main-sub-color, #999);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 4px;
    transition: color .2s;
}
.xpo-msg-actions-bottom button:hover {
    color: var(--main-color, #1677ff);
    background: transparent;
}

/* v8.6.9: 推荐追问分割线（正文与推荐之间） */
.xpo-followup-divider {
    height: 1px;
    background: var(--main-border-color, #eee);
    margin: 12px 0 10px 0;
    border: none;
}

/* v8.6.5: 推荐追问提示 */
.xpo-followup-hints {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xpo-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
    width: fit-content;
}
.xpo-hint-btn:hover {
    background: var(--main-color, #1677ff);
    color: #fff;
    border-color: var(--main-color, #1677ff);
}

/* v8.6.5: 思考过程行 */
.xpo-thinking-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--main-sub-color, #999);
    font-size: 14px;
}
.xpo-loading-dot {
    width: 8px;
    height: 8px;
    background-color: var(--main-sub-color, #999);
    border-radius: 50%;
    animation: xpo-dot-pulse 1.4s infinite ease-in-out;
}
@keyframes xpo-dot-pulse {
    0%, 100% { transform: scale(0.6); opacity: 0.6; }
    50% { transform: scale(1); opacity: 1; }
}