/* 字体定义 */
@font-face {
    font-family: '江城圆体';
    font-weight: 400;
    src: url('assets/font/江城圆体400W.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: '江城圆体';
    font-weight: 600;
    src: url('assets/font/江城圆体600W.ttf') format('truetype');
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: '江城圆体', 'Arial', sans-serif;
}

:root {
    /* 主配色与层级 */
    --mj-color-primary: #996669;
    --mj-text-main: rgba(68, 68, 68, 0.9);
    --mj-text-muted: rgba(68, 68, 68, 0.6);
    --mj-bg-level1: rgba(255, 255, 255, 0.96);
    --mj-bg-level2: rgba(234, 234, 234, 0.9);

    /* 描边与阴影 */
    --mj-border-subtle: rgba(68, 68, 68, 0.12);
    --mj-border-strong: rgba(68, 68, 68, 0.3);
    --mj-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
    --mj-shadow-soft-sm: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* 字号系统 - 以 440px 屏幕为基准，正文字号 16px */
    --mj-font-size-base: 16px;
    --mj-font-size-description: 14px;
    --mj-font-size-h1: 2rem;      /* 32px */
    --mj-font-size-h2: 1.5rem;    /* 24px */
    --mj-font-size-h3: 1.25rem;   /* 20px */
    --mj-font-size-h4: 1.125rem;  /* 18px */
    --mj-font-size-h5: 1rem;      /* 16px */
    --mj-font-size-h6: 0.875rem;  /* 15.75px */
    --mj-font-size-small: 0.875rem; /* 15.75px */
}

/* 教程高亮动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px #FFD700, 0 0 60px #FFD700;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700;
    }
}

.tutorial-highlight {
    animation: pulse 1s infinite !important;
    z-index: 10000 !important;
    position: relative;
}

/* 人设修改系统样式 */
.persona-modal-content {
    width: 600px;
    max-width: 90%;
    max-height: 80vh;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

.persona-modification-body {
    padding: 20px;
}

.persona-file-selection {
    margin-bottom: 20px;
}

.persona-file-selection label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.persona-content-section {
    margin-bottom: 20px;
}

.persona-content-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.persona-textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-family: monospace;
    font-size: 16px;
    resize: vertical;
}

/* AI生成提示样式 */
.ai-disclaimer {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #666;
    padding: 4px 12px;
    z-index: 9999;
    pointer-events: none;
    font-family: Arial, sans-serif;
}

.status-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    display: none;
}

.status-message.success {
    background-color: var(--mj-bg-level2);
    color: var(--mj-color-primary);
    border: 1px solid var(--mj-border-subtle);
}

.status-message.error {
    background-color: rgba(234, 70, 70, 0.06);
    color: rgba(180, 40, 40, 0.9);
    border: 1px solid rgba(180, 40, 40, 0.16);
}

/* 实验性功能模态框样式 */
#experimental-features-modal .modal-content {
    width: 400px;
    max-width: 90%;
    text-align: center;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

/* 立绘修改模态框样式 */
.character-image-modal-content {
    width: 600px;
    max-width: 90%;
    max-height: 80vh;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--mj-shadow-soft);
}

.character-image-modal-content .modal-header {
    flex-shrink: 0;
    padding: 15px 20px;
    border-bottom: 1px solid var(--mj-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-image-modal-content .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.character-image-modal-content .action-buttons {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.character-image-selection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.character-image-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.character-image-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-preview-container {
    display: flex;
    justify-content: center;
    padding: 10px;
    border: 1px dashed var(--mj-border-subtle);
    border-radius: 8px;
}

.image-preview-container img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

#experimental-features-modal .modal-body {
    padding: 30px 20px;
}

#experimental-features-modal .action-btn {
    display: block;
    width: 280px;
    margin: 15px auto;
    padding: 15px 20px;
    background: var(--mj-color-primary);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-weight: 500;
    font-size: var(--mj-font-size-description);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
    box-shadow: var(--mj-shadow-soft-sm);
    color: #fff;
}

#experimental-features-modal .action-btn:hover {
    background: #8a5d5d;
    box-shadow: var(--mj-shadow-soft);
    transform: translateY(-1px);
}

#experimental-features-modal .action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* EULA确认按钮样式 */
.eula-confirm-btn {
    background: var(--mj-color-primary) !important;
    color: #fff !important;
    font-weight: 500;
    padding: 12px 30px;
    border-radius: 4px;
    border: 1px solid var(--mj-border-strong);
    box-shadow: var(--mj-shadow-soft-sm);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.eula-confirm-btn:hover {
    background: #8a5d5d !important;
    box-shadow: var(--mj-shadow-soft);
    transform: translateY(-1px);
}

/* 换装系统样式 */
.wardrobe-modal-content {
    width: 800px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

/* 讲故事系统样式 */
.story-type-btn {
    display: block;
    width: 200px;
    margin: 20px auto;
    padding: 15px 25px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
    box-shadow: var(--mj-shadow-soft-sm);
    color: var(--mj-text-main);
}

.story-type-btn:hover {
    background: var(--mj-bg-level2);
    box-shadow: var(--mj-shadow-soft);
    transform: translateY(-1px);
}

.story-type-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.story-restore-btn {
    margin-top: 30px;
    background: var(--mj-color-primary);
    color: #fff;
    border-color: var(--mj-color-primary);
}

.story-restore-btn:hover {
    background: #7a5254;
    border-color: #7a5254;
}

.story-restore-btn:active {
    background: #664446;
    border-color: #664446;
}

.wardrobe-body {
    padding: 20px;
}

.wardrobe-outfits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.wardrobe-outfit-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.wardrobe-outfit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* AI设置按钮样式 */
.ai-settings-btn {
    padding: 8px 16px;
    background: rgba(245, 240, 230, 0.95);
    border: none;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    width: auto;
    min-width: 100px;
    text-align: center;
    color: rgba(68, 68, 68, 0.9);
    white-space: nowrap;
}

/* AI设置按钮的个别ID样式已不再需要，通过flex布局自动排列 */

.activation-top-right-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.ai-settings-btn:hover {
    background: rgba(235, 230, 220, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* AI设置按钮禁用状态 */
.ai-settings-btn.disabled {
    background: rgba(234, 234, 234, 0.7);
    color: var(--mj-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
    border-color: var(--mj-border-subtle);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.ai-settings-btn.disabled:hover {
    background: rgba(234, 234, 234, 0.7);
    transform: none;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* AI设置模态框样式 */
#ai-settings-modal {
    z-index: 10000;
}

.ai-settings-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background: var(--mj-bg-level1);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
}

.ai-settings-body {
    padding: 40px;
    width: 70%;
    max-width: 1200px;
    margin: 0 auto;
}

.preset-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    justify-content: center;
}

.preset-btn {
    padding: 10px 20px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
    box-shadow: var(--mj-shadow-soft-sm);
    color: var(--mj-text-main);
}

.preset-btn:hover {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

/* 教程按钮样式 */
.tutorial-btn {
    position: relative;
    top: 0 !important;
    margin: 1rem auto 0;
    padding: 10px 20px;
    background: transparent;
    border: 1.5px solid #996669;
    border-radius: 12px;
    font-weight: 500;
    font-size: 15px;
    color: #996669;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    display: block;
    width: fit-content;
}

.tutorial-btn:hover {
    background: rgba(153, 102, 105, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(153, 102, 105, 0.2);
}

/* 教程选项按钮样式 */
.tutorial-option-btn {
    display: block;
    width: 90%;
    margin: 15px auto;
    padding: 15px 20px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
    box-shadow: var(--mj-shadow-soft-sm);
    color: var(--mj-text-main);
}

.tutorial-option-btn:hover:not(:disabled) {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.tutorial-option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(234, 234, 234, 0.7);
    color: var(--mj-text-muted);
}

/* 图片查看器模态框样式 */
.image-viewer-content {
    width: 90%;
    max-width: 1000px;
    height: 85vh;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--mj-shadow-soft);
}

.image-viewer-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.image-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    max-height: calc(100% - 40px);
}

.image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%;
    max-height: 100%;
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft-sm);
}

.nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mj-shadow-soft-sm);
    color: var(--mj-text-main);
}

.nav-btn:hover {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
}

.image-indicator {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--mj-text-muted);
}

/* 用户协议按钮样式 */
/* 用户协议按钮样式（已从主菜单移除） */
.start-menu-content .eula-btn,
.eula-btn,
#eula-btn {
    display: none !important;
}

/* 底部协议栏 */
.policy-bar {
    position: fixed;
    bottom: 90px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    z-index: 1002;
    pointer-events: none;
}
.policy-bar .policy-link,
.policy-bar .policy-sep {
    pointer-events: auto;
}
.policy-link {
    font-size: 11px;
    color: rgba(100, 80, 80, 0.5);
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: none;
    transition: color 0.15s;
}
.policy-link:hover {
    color: rgba(153, 102, 105, 0.85);
}
.policy-sep {
    font-size: 11px;
    color: rgba(100, 80, 80, 0.25);
}
/* 协议同意勾选框 */
.policy-agree-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    color: rgba(100, 80, 80, 0.5);
    padding: 4px 6px 4px 4px;
    user-select: none;
    pointer-events: auto;
}
.policy-agree-checkbox {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: #996669;
    flex-shrink: 0;
    pointer-events: auto;
}
/* 未同意时警告提示 */
.policy-warn-tip {
    position: fixed;
    bottom: 145px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(153, 102, 105, 0.92);
    color: #fff;
    padding: 10px 22px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 30000;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(153, 102, 105, 0.35);
}
.policy-warn-tip.visible {
    opacity: 1;
}
.policy-iframe-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.policy-iframe-container {
    background: #fff;
    width: 90%;
    max-width: 800px;
    height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.policy-iframe-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    z-index: 1;
    line-height: 1;
}
.policy-iframe-close:hover {
    color: #333;
}
#policy-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

/* 用户协议模态框样式 */
.eula-modal-content {
    width: 700px;
    max-width: 90%;
    max-height: 80vh;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

.eula-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

#eula-content {
    line-height: 1.6;
    color: var(--mj-text-main);
    font-size: 18px;
}

#eula-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--mj-text-main);
    border-bottom: 1px solid var(--mj-border-subtle);
    padding-bottom: 5px;
}

#eula-content p {
    margin-bottom: 10px;
    text-align: justify;
}

#eula-content ul {
    margin-left: 20px;
    margin-bottom: 10px;
}

#eula-content li {
    margin-bottom: 5px;
    list-style-type: disc;
}

.setting-group {
    margin-bottom: 20px;
}

.setting-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--mj-text-main);
}

.setting-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: 14px;
    background: var(--mj-bg-level1);
    transition: all 0.3s ease;
}

.setting-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(153, 102, 105, 0.3);
}

/* 自定义模型下拉列表样式 */
.model-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.model-list {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.model-list-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.model-list-item:last-child {
    border-bottom: none;
}

.model-list-item:hover {
    background-color: var(--mj-bg-level2);
}

.model-list-item.selected {
    background-color: rgba(153, 102, 105, 0.12);
}

/* 滚动条样式 */
.model-list::-webkit-scrollbar {
    width: 8px;
}

.model-list::-webkit-scrollbar-track {
    background: var(--mj-bg-level2);
}

.model-list::-webkit-scrollbar-thumb {
    background: rgba(68, 68, 68, 0.35);
    border-radius: 4px;
}

.model-list::-webkit-scrollbar-thumb:hover {
    background: rgba(68, 68, 68, 0.6);
}

.current-value {
    margin-top: 5px;
    font-size: var(--mj-font-size-description);
    color: var(--mj-text-muted);
    background: var(--mj-bg-level2);
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid var(--mj-border-subtle);
}

.current-value span {
    font-family: monospace;
    color: var(--mj-text-main);
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

.test-result {
    margin-top: 20px;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    display: none;
}

.test-result.success {
    display: block;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    color: var(--mj-text-main);
}

.test-result.error {
    display: block;
    background: rgba(234, 70, 70, 0.06);
    border: 1px solid rgba(180, 40, 40, 0.16);
    color: rgba(180, 40, 40, 0.9);
}

/* 日记系统样式 - 全屏版 */

/* 全屏容器 */
.diary-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--mj-bg-level1);
    z-index: 1001;
}

/* 顶部固定日期时间栏 */
/*
.diary-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--mj-bg-level1);
    border-bottom: 1px solid var(--mj-border-subtle);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1002;
    font-size: var(--mj-font-size-base);
    font-weight: 600;
    color: var(--mj-text-main);
}
*/

/* 左下角退出按钮 */
.diary-back-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1003;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 500;
    color: var(--mj-text-main);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: var(--mj-shadow-soft-sm);
}

.diary-back-btn:hover {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

/* 主体内容容器 */
.diary-main {
    display: flex;
    width: 100%;
    height: 100vh;
}

/* 左侧刻度容器 */
.diary-scale {
    width: 80px;
    height: 100%;
    background: var(--mj-bg-level2);
    border-right: 1px solid var(--mj-border-subtle);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 40px 0;
    overflow-y: auto;
}

/* 刻度轨道 */
.diary-scale-track {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 15px;
}

/* 单条刻度线 */
.diary-scale-tick {
    height: 1px;
    background: var(--mj-border-strong);
    margin-bottom: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, width 0.2s ease;
    border-radius: 1px;
}

/* 普通刻度 - 短 */
.diary-scale-tick.normal {
    width: 20px;
}

/* 当前/激活刻度 - 长且高亮 */
.diary-scale-tick.active {
    width: 45px;
    background: var(--mj-color-primary);
    height: 2px;
}

/* 刻度悬停效果 */
.diary-scale-tick:hover {
    background: var(--mj-color-primary);
    width: 35px;
}

.diary-scale-tick.active:hover {
    background: var(--mj-color-primary);
    width: 50px;
}

/* 日记滚动容器 */
.diary-scroll-area {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 40px 0px 100px 0px;
    scroll-behavior: smooth;
}

/* 日记列表 */
.diary-entries-list {
    max-width: 800px;
    margin: 0 auto;
}

/* 单条日记条目 */
.diary-entry {
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 12px;
    padding: 30px 35px;
    margin-bottom: 35px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: box-shadow 0.2s ease;
}

.diary-entry:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 日记日期标记 */
.diary-date-marker {
    position: absolute;
    top: -12px;
    left: 25px;
    background: var(--mj-color-primary);
    color: #fff;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* 日记时间 */
.diary-time {
    font-size: 2rem;
    color: var(--mj-text-main);
    margin-bottom: 8px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* 日期地点信息 */
.diary-date-location {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* 好感度显示 */
.diary-affection {
    display: inline-block;
    padding: 8px 16px;
    background: #44444460;
    color: #fff;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.affection-value {
    font-weight: bold;
    color: #FFDF5E;
}

/* 日记正文内容 */
.diary-content {
    line-height: 1.9;
    white-space: pre-wrap;
    color: var(--mj-text-main);
    font-size: 1rem;
    word-spacing: 0.1em;
}

/* 空日记状态 */
.diary-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 200px);
    color: #999;
}

.diary-empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.diary-empty-text {
    font-size: 1.3rem;
    color: #aaa;
}

.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 30px;
    height: 30px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    border: 1px solid var(--mj-border-strong);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: var(--mj-shadow-soft-sm);
}

.close-btn:hover {
    background: var(--mj-bg-level2);
    transform: scale(1.05);
}

/* 隐藏 story-modal 和 date-modal 的关闭按钮（所有设备） */
#story-modal .close-btn,
#date-modal .close-btn {
    display: none;
}

/* 讲故事系统样式 */
#story-modal .modal-content {
    width: 80%;
    max-width: 600px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

/* TRPG任务选择系统样式 */
#trpg-mission-select .modal-content {
    width: 80%;
    max-width: 600px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-bottom: 1px solid #00000015;
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
    padding: 20px;
    overflow-y: auto;
    max-height: 80vh;
}

#trpg-mission-select .modal-content h2 {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 24px;
    color: var(--mj-text-main);
}

#trpg-mission-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* TRPG任务卡片 - 样式已在统一卡片基础样式中定义 */

.mission-card h3 {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--mj-text-main);
}

.mission-card p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--mj-text-muted);
}

.mission-card > div {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--mj-text-muted);
}

/* 约会系统样式 */
#date-modal .modal-content {
    width: 80%;
    max-width: 600px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

/* 商店系统样式 */
.shop-modal-content {
    width: 90%;
    max-width: 1000px;
    max-height: 80vh;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

.shop-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px); /* 减去头部高度 */
}

.shop-info {
    text-align: center;
    margin-bottom: 25px;
    padding: 15px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
}

.shop-info p {
    margin: 5px 0;
    font-size: var(--mj-font-size-description);
}

.shop-info .price {
    font-weight: bold;
    color: #ff9800;
    font-size: var(--mj-font-size-base);
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 10px 0;
}

.shop-item {
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 300px; /* 固定高度确保对齐 */
}

.shop-item.owned {
    border-color: rgba(76, 175, 80, 0.5);
    background: rgba(76, 175, 80, 0.04);
}

.shop-item.affordable:hover {
    border-color: var(--mj-color-primary);
    background: rgba(153, 102, 105, 0.06);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.shop-item.unaffordable {
    opacity: 0.6;
    cursor: not-allowed;
}

.shop-item-preview {
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--mj-border-subtle);
    border-radius: 5px;
    flex-shrink: 0;
}

.shop-item-name {
    font-weight: bold;
    color: var(--mj-text-main);
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.3;
    flex-shrink: 0;
}

.shop-item-description {
    font-size: var(--mj-font-size-description);
    color: var(--mj-text-muted);
    margin-bottom: 15px;
    line-height: 1.4;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-item-price {
    margin-top: auto;
    flex-shrink: 0;
}

.shop-item-owned {
    font-size: 14px;
    color: rgba(76, 175, 80, 0.9);
    font-weight: bold;
}

.shop-item-cost {
    font-size: var(--mj-font-size-description);
    color: #ff9800;
    font-weight: bold;
    margin-bottom: 8px;
}

.shop-buy-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.shop-buy-btn.affordable {
    background: var(--mj-color-primary);
    color: #fff;
}

.shop-buy-btn.affordable:hover {
    background: #8a5d5d;
    transform: translateY(-1px);
}

.shop-buy-btn.unaffordable {
    background: rgba(234, 234, 234, 0.9);
    color: var(--mj-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* 商店标签页样式 */
.shop-tab-buttons {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
}

.shop-tab {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.shop-tab:hover {
    background: #e9ecef;
}

.shop-tab.active {
    background: #fff;
    color: #2196F3;
    border-bottom-color: #2196F3;
}

/* 礼物商店样式 */
.gift-item {
    height: auto !important;
    min-height: unset;
}

.gift-item-icon {
    display: none !important;
}

.gift-inventory-display {
    font-size: 12px;
    color: #28a745;
    font-weight: bold;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    flex-shrink: 0;
}

.gift-price-container {
    margin-top: 4px;
}

.gift-buy-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.quantity-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--mj-border-strong);
    background: var(--mj-bg-level1);
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.quantity-btn:hover {
    background: var(--mj-bg-level2);
    transform: scale(1.1);
}

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

.quantity-input {
    width: 60px;
    height: 30px;
    text-align: center;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
}

.quantity-input:focus {
    outline: none;
    border-color: var(--mj-color-primary);
    box-shadow: 0 0 0 2px rgba(153, 102, 105, 0.2);
}

.gift-buy-btn {
    margin-top: 5px;
}

/* 旅游系统样式 */
#travel-modal .modal-content {
    width: 80%;
    max-width: 600px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

#travel-destinations {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}

.destination-btn {
    padding: 20px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: left;
}

.destination-btn:hover {
    background: var(--mj-color-primary);
    color: #fff;
}

.destination-btn h3 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

.destination-btn p {
    margin: 0;
    color: var(--mj-text-muted);
    font-size: 0.9em;
}

.destination-btn:hover p {
    color: #ccc;
}

#travel-character {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 80%;
    z-index: 100;
    pointer-events: none;
}

#video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
}

#travel-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.date-locations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

/* 统一卡片基础样式 - 共享样式 */
.unified-card,
.date-location-btn,
.mission-card,
.quest-card {
    padding: 15px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: var(--mj-shadow-soft-sm);
}

.unified-card:hover:not(.disabled):not(.locked),
.date-location-btn:hover:not(.disabled),
.mission-card:hover,
.quest-card.unlocked:hover {
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

/* 禁用/锁定状态 */
.unified-card.disabled,
.unified-card.locked,
.date-location-btn.disabled,
.quest-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(234, 234, 234, 0.7);
}

.date-location-btn .location-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--mj-text-main);
}

.date-location-btn .location-desc {
    font-size: 0.9rem;
    color: var(--mj-text-muted);
    margin-bottom: 8px;
}

.date-location-btn .location-time {
    font-size: 0.85rem;
    color: var(--mj-text-muted);
    padding: 5px;
    background: var(--mj-bg-level2);
    border-radius: 5px;
    margin-bottom: 5px;
}

.date-location-btn .location-visits {
    font-size: 0.85rem;
    color: #333;
    font-weight: bold;
}

/* 自定义地点徽章 */
.date-location-btn .location-custom-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--mj-color-primary) 0%, #c88386 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    margin-top: 8px;
    font-weight: bold;
}

/* 图片选择弹窗 */
#image-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#image-selection-modal .image-selection-content {
    background: var(--mj-bg-level1);
    border-radius: 16px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    text-align: center;
    border: 1px solid var(--mj-border-strong);
    box-shadow: var(--mj-shadow-soft);
}

#image-selection-modal h3 {
    color: var(--mj-text-main);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

#image-selection-modal .modal-hint {
    color: var(--mj-text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

#image-selection-modal .image-selection-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

#image-selection-modal .selection-btn {
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: '江城圆体', 'Arial', sans-serif;
}

#image-selection-modal .capture-btn {
    background: linear-gradient(135deg, var(--mj-color-primary) 0%, #c88386 100%);
    color: white;
}

#image-selection-modal .upload-btn {
    background: linear-gradient(135deg, #5a9e8d 0%, #4a8e7d 100%);
    color: white;
}

#image-selection-modal .cancel-btn {
    background: var(--mj-bg-level2);
    color: var(--mj-text-muted);
    border: 1px solid var(--mj-border-subtle);
}

#image-selection-modal .selection-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--mj-shadow-soft);
}

#image-selection-modal .selection-btn:active {
    transform: translateY(0);
}

body {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 400;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    overflow: hidden;
    font-size: var(--mj-font-size-base);
}

/* 标题字体 - 使用 600 字重 */
h1 {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 600;
    font-size: var(--mj-font-size-h1);
}

h2 {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 600;
    font-size: var(--mj-font-size-h2);
}

h3 {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 600;
    font-size: var(--mj-font-size-h3);
}

h4 {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 600;
    font-size: var(--mj-font-size-h4);
}

h5 {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 600;
    font-size: var(--mj-font-size-h5);
}

h6 {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 600;
    font-size: var(--mj-font-size-h6);
}

.modal-header h2,
.start-menu-content h1,
.loading-content h1,
.chat-panel-title,
.user-name,
.shop-item-name,
.diary-content strong,
.battle-header h2,
.settings-section h3,
.current-model-section h3,
.sync-status h3 {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 600;
}

/* 正文字体 - 使用 400 字重 */
body,
p,
span,
div,
label,
button,
input,
textarea,
select,
.modal-body,
.chat-message,
.dialogue-content,
#dialogue-text {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 400;
    font-size: var(--mj-font-size-base);
}

/* 描述文字 - 使用较小字号 */
small,
.description,
.setting-description,
.field-hint,
.shop-item-description,
.diary-content,
.diary-time,
.user-email,
.sync-item span {
    font-family: '江城圆体', 'Arial', sans-serif;
    font-weight: 400;
    font-size: var(--mj-font-size-description);
}

/* 代码和等宽字体保持 monospace */
code,
pre,
.persona-textarea,
.current-value span,
#current-local-model,
.resource-value,
.monospace {
    font-family: monospace, 'Courier New', Courier;
}

/* 加载界面 */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mj-bg-level1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
}

.loading-content h1 {
    font-size: var(--mj-font-size-h1);
    margin-bottom: 2rem;
    color: var(--mj-text-main);
    font-weight: 600;
}

.loading-bar {
    width: 100%;
    height: 8px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--mj-shadow-soft-sm);
}

#loading-progress {
    height: 100%;
    background: var(--mj-color-primary);
    width: 0%;
    transition: width 0.3s ease;
}

#loading-text {
    font-size: var(--mj-font-size-description);
    color: var(--mj-text-muted);
}

/* 开始菜单 */
#start-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mj-bg-level1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    overflow: hidden;
}

.start-menu-content {
    text-align: center;
    max-width: 500px;
    width: 90%;
    padding: 2.5rem 2rem;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
    position: relative;
    z-index: 1;
}

.start-menu-content h1 {
    font-size: 0;
    margin-bottom: 0.5rem;
    color: transparent;
    font-weight: 600;
    border-bottom: none;
    padding-bottom: 0.5rem;
    position: relative;
    /* title image */
    height: 200px;
    background-image: url('../../assets/img/img_title.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.menu-buttons {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-btn {
    padding: 1rem 2rem;
    font-size: var(--mj-font-size-base);
    font-weight: 500;
    color: #ffffff;
    background: var(--mj-color-primary);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    text-transform: none;
    box-shadow: var(--mj-shadow-soft-sm);
}

.menu-btn:hover {
    background: #8a5d5d;
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.menu-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.menu-btn:disabled {
    background: rgba(234, 234, 234, 0.9);
    color: var(--mj-text-muted);
    border-color: var(--mj-border-subtle);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.game-info {
    margin-top: 1.5rem;
    border-top: none;
    padding-top: 0;
}

.game-info p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    line-height: 1.5;
}

.game-info p:first-child {
    font-weight: 500;
    color: #555;
    margin-bottom: 0.2rem;
}

/* 游戏容器 */
#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

#game-canvas {
    display: block;
    margin: 0 auto;
    filter: contrast(110%);
    position: relative;
    z-index: 2;
}

/* 约会背景层 */
#date-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 约会角色层 */
#date-character {
    position: absolute;
    bottom: 0;
    right: 20%;
    width: 400px;
    height: 600px;
    z-index: 50;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    pointer-events: none;
}

/* UI界面 */
#ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.ui-panel {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    padding: 15px;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 角色状态面板 - 点击好感度按钮后显示 */
#stats-panel {
    position: fixed;
    top: 50%;
    right: 140px;
    transform: translateY(-50%);
    width: 400px;
    z-index: 150;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#stats-panel h3 {
    margin-bottom: 16px;
    font-size: 1.1rem;
    text-align: center;
    border-bottom: 1px solid rgba(68, 68, 68, 0.1);
    padding-bottom: 8px;
    color: rgba(68, 68, 68, 0.9);
    font-weight: 600;
}

.stat-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.stat-item span:first-child {
    width: 50px;
    font-weight: 500;
    color: rgba(68, 68, 68, 0.8);
}

.stat-bar {
    flex: 1;
    height: 18px;
    background: rgba(234, 234, 234, 0.8);
    border: none;
    border-radius: 9px;
    overflow: hidden;
    margin: 0 10px;
}

.stat-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 192, 203, 0.9), rgba(255, 182, 193, 0.7));
    border-radius: 9px;
    transition: width 0.5s ease;
}

.stat-item span:last-child {
    width: 40px;
    text-align: right;
    font-weight: 600;
    color: rgba(68, 68, 68, 0.9);
}

/* 行动面板 - 底部居中 */
#action-panel {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    box-sizing: border-box;
}

#action-panel h3 {
    display: none;
}

.action-buttons-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0;
    width: 100%;
    box-sizing: border-box;
}

.action-buttons-container::-webkit-scrollbar {
    width: 6px;
}

.action-buttons-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.action-buttons-container::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
}

.action-buttons-container::-webkit-scrollbar-thumb:hover {
    background: #333;
}

.action-btn {
    width: 96px;
    height: 96px;
    padding: 10px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease, width 0.3s ease, height 0.3s ease;
    box-shadow: var(--mj-shadow-soft-sm);
    color: var(--mj-text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    gap: 4px;
    position: relative;
}

/* 文字上方，图标下方 - 默认使用内联块作为占位，支持图片或 emoji */
.action-btn::before {
    content: attr(data-icon);
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 1.6em;
    line-height: 32px;
    order: 2;
    margin-top: 4px;
    flex-shrink: 0;
}

/* 保留聊天按钮 emoji 图标 */
#talk-btn::before {
    content: '💬';
}

/* 替换为图片图标（相对于 src/css/main.css 使用 ../icon/ 路径） */
#trpg-btn::before {
    content: "";
    background-image: url('../../assets/icon/icon_func_todo.png');
}

#mission-btn::before {
    content: "";
    background-image: url('../../assets/icon/icon_func_battle.png');
}

#activity-btn::before {
    content: "";
    background-image: url('../../assets/icon/icon_func_game.png');
}

#story-btn::before {
    content: "";
    background-image: url('../../assets/icon/icon_func_story.png');
}

#date-btn::before {
    content: "";
    background-image: url('../../assets/icon/icon_func_date.png');
}

/* more 按钮没有图标：隐藏伪元素，让文字在按钮内垂直居中 */
#more-btn::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}


/* 超出容器宽度时自适应缩小 */
@media (max-width: 768px) {
    .action-btn {
        width: 80px;
        height: 80px;
        font-size: 12px;
    }

    .action-btn::before {
        font-size: 1.6em;
    }
}

@media (max-width: 540px) {
    .action-btn {
        width: 70px;
        height: 70px;
        font-size: 11px;
    }

    .action-btn::before {
        font-size: 1.4em;
    }
}

@media (max-width: 400px) {
    .action-btn {
        width: 60px;
        height: 60px;
        font-size: 10px;
    }

    .action-btn::before {
        font-size: 1.2em;
    }
}

.action-btn:hover {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.action-btn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 行动面板内的按钮 - 正方形卡片样式 */
#action-panel .action-btn {
    flex: 1;
    aspect-ratio: 1;
    min-width: 0;
    padding: 8px;
    margin-bottom: 0;
    /* 行动区按钮文字固定单行显示，避免换行导致上下错位 */
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* 按钮内文字根据视口宽度自适应缩放，避免在小尺寸下文字过大溢出 */
    font-size: clamp(11px, 1.4vw, 14px);
    font-weight: 500;
    color: rgba(68, 68, 68, 0.9);
    transition: all 0.2s ease;
    /* 使用 grid 精确控制“上文字 / 下图标” */
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    text-align: center;
    /* 不在中文字符中间强制断行，保持一整行 */
    word-break: keep-all;
}

/* 行动面板内的图标固定在第二行（文字行在上） */
#action-panel .action-btn::before {
    grid-row: 2;
}

#action-panel .action-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

#action-panel .action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.next-day {
    background: var(--mj-color-primary) !important;
    color: #fff !important;
}

.next-day:hover {
    background: #8a5d5d !important;
}

/* 更多菜单 - 向上弹出 */
#more-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 10px;
    box-shadow: none;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#more-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

#more-menu .action-btn {
    width: 80px; /* 宽度：80px */
    height: 40px; /* 高度：40px */
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row; /* 覆盖通用的 column 设置 */
    align-items: center; /* 文字垂直居中 */
    justify-content: center; /* 文字水平居中 */
    text-align: center;
    padding: 6px; /* 适当内边距，便于文本换行 */
    line-height: 1; /* 重置行高，避免影响垂直居中 */
    gap: 0; /* 移除 gap，避免影响布局 */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* 菜单显示时，按钮淡入 */
#more-menu.show .action-btn {
    opacity: 1;
    transform: scale(1);
}

/* 隐藏时立即淡出（无延迟） */
#more-menu:not(.show) .action-btn {
    transition-delay: 0s;
}

.more-menu-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}

/* 隐藏更多菜单按钮的图标（使用高优先级以覆盖通用规则） */
#more-menu .action-btn::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

/* ========== PC端聊天重构样式 ========== */

/* 隐藏原聊天按钮 (PC端) */
#talk-btn {
    display: none !important;
}

/* 调整 action-panel 位置，为常驻对话框腾出空间 */
#action-panel {
    bottom: 90px !important;
}

/* 常驻对话框样式 */
.persistent-chat-input {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 95%;
    max-width: 95vw;
    box-sizing: border-box;
    pointer-events: auto;
}

.persistent-chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(68, 68, 68, 0.9);
    min-width: 0;
}

.persistent-chat-input input::placeholder {
    color: rgba(68, 68, 68, 0.5);
}

.persistent-chat-input input:focus {
    outline: none;
    border-color: var(--mj-color-primary);
    box-shadow: 0 0 0 2px rgba(153, 102, 105, 0.2);
}

.persistent-send-btn {
    width: 48px;
    height: 48px;
    background: #fff;
    color: #996669;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.persistent-send-btn:hover {
    background: #FFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.persistent-send-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 让Yuki先说按钮 */
.persistent-greeting-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.persistent-greeting-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.persistent-greeting-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 聊天框体样式 */
.chat-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 95vw;
    background: #f5f5f5;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 500;
    display: flex;
    flex-direction: column;
    animation: chatPanelSlideUp 0.3s ease;
    box-sizing: border-box;
}

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

/* 聊天框体顶部栏 */
.chat-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: none;
    background: transparent;
    border-radius: 12px 12px 0 0;
}

.chat-panel-title {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

/* 聊天记录区域头部 */
.chat-panel-header {
    position: relative;
    padding: 12px 16px;
    border-bottom: none;
}

/* 聊天记录区域 - 固定8行高度 */
.chat-history-area {
    height: 192px;
    overflow-y: auto;
    padding: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* 聊天记录滚动条 */
.chat-history-area::-webkit-scrollbar {
    width: 6px;
}

.chat-history-area::-webkit-scrollbar-track {
    background: var(--mj-bg-level2);
    border-radius: 3px;
}

.chat-history-area::-webkit-scrollbar-thumb {
    background: rgba(68, 68, 68, 0.6);
    border-radius: 3px;
}

.chat-history-area::-webkit-scrollbar-thumb:hover {
    background: rgba(68, 68, 68, 0.9);
}

/* 聊天消息样式 */
.chat-message {
    margin-bottom: 10px;
    padding: 0;
    border-radius: 0;
    word-wrap: break-word;
}

.chat-message.user {
    background: transparent;
    text-align: left;
}

.chat-message.assistant {
    background: transparent;
    border: none;
}

/* YuKi（assistant）发送者名称 - 酒红色 */
.chat-message.assistant .sender {
    font-weight: 500;
    margin-right: 6px;
    color: #996669;
}

/* YuKi（assistant）消息内容 - 酒红色 */
.chat-message.assistant .content {
    color: #996669;
}

/* 你（user）发送者名称 - 黑色 */
.chat-message.user .sender {
    font-weight: 500;
    margin-right: 6px;
    color: #666;
}

/* 你（user）消息内容 - 黑色 */
.chat-message.user .content {
    color: #666;
}

/* 括号内容 - 灰色 */
.chat-message .parenthesis {
    color: #999;
}

/* 尖括号内容 - 黑色 */
.chat-message .angle-bracket {
    color: #999;
}

/* === 聊天特效动画 === */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}
.effect-shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes yandereText {
    0% { color: inherit; text-shadow: none; }
    100% { color: #8b0000; text-shadow: 0 0 8px rgba(139, 0, 0, 0.3); }
}
.effect-yandere {
    animation: yandereText 1.5s ease-in forwards;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.05); }
    30% { transform: scale(1); }
    45% { transform: scale(1.03); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}
.effect-heartbeat {
    animation: heartbeat 0.8s ease-in-out;
}

@keyframes glitch {
    0%, 100% { opacity: 1; transform: translate(0); filter: none; }
    10% { opacity: 0.8; transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
    20% { opacity: 1; transform: translate(1px, -1px); }
    30% { opacity: 0.7; transform: translate(-1px, 0); filter: hue-rotate(-90deg); }
    40% { opacity: 1; transform: translate(0); }
    50% { opacity: 0.9; transform: translate(2px, 1px); filter: hue-rotate(180deg); }
    60% { opacity: 1; transform: translate(0); }
}
.effect-glitch {
    animation: glitch 1s ease-in-out;
}

@keyframes darkenBg {
    0%, 100% { background-color: rgba(0, 0, 0, 0); }
    50% { background-color: rgba(0, 0, 0, 0.12); }
}
.effect-darken {
    animation: darkenBg 2s ease-in-out;
}

/* 结束对话按钮 */
.end-chat-btn {
    padding: 8px 16px;
    background: #d0d0d0;
    color: #666;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.end-chat-btn:hover {
    background: #c0c0c0;
    color: #555;
}

/* 展开/收起按钮 */
.expand-chat-btn {
    padding: 8px 16px;
    background: #d0d0d0;
    color: #666;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.expand-chat-btn:hover {
    background: #c0c0c0;
    color: #555;
}

/* 聊天面板展开状态 */
.chat-panel.expanded {
    top: 20px;
    bottom: 20px;
    height: auto;
    display: flex;
    flex-direction: column;
    transition: bottom 0.15s ease-out;
}

.chat-panel.expanded .chat-panel-header {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-panel.expanded .chat-history-area {
    height: auto;
    flex: 1;
    min-height: 300px;
}

/* 顶部按钮容器 */
.chat-panel-top-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 聊天历史按钮 */
.chat-history-btn {
    padding: 8px 12px;
    background: #d0d0d0;
    color: #666;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-history-btn:hover {
    background: #c0c0c0;
    color: #555;
}

/* 全屏聊天历史模态框 */
.chat-history-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: chatHistoryModalFadeIn 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}

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

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

.chat-history-modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #444;
}

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

.chat-history-modal-close:hover {
    background: #e0e0e0;
    color: #444;
}

.chat-history-modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    width: 100%;
}

.chat-history-modal-content .chat-message {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px #00000009;
}

.chat-history-modal-content .chat-message .sender {
    font-weight: 500;
    margin-right: 8px;
}

.chat-history-modal-content .chat-message.user {
    background: #00000015;
}

.chat-history-modal-content .chat-message.assistant {
    background: #fff;
}

/* 聊天输入区域 */
.chat-input-area {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    align-items: center;
    border-bottom: none;
}

.chat-panel-gift-btn {
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    border-radius: 50%;
    /* hide inline emoji text while keeping accessible content */
    font-size: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* gift icon */
    background-image: url('../../assets/icon/icon_gift.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
}

.chat-panel-gift-btn:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* ========== 家教模式拍照按钮 ========== */
.chat-panel-camera-btn {
    width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    border-radius: 50%;
    font-size: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../../assets/icon/icon_camera.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    position: relative;
}

.chat-panel-camera-btn:hover {
    background-color: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* 相机按钮已选中图片状态 - 绿色角标 */
.chat-panel-camera-btn.has-image::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #4CAF50;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* ========== OCR图片裁切模态框 ========== */
.ocr-crop-modal-content {
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.ocr-crop-modal-content .modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.ocr-crop-modal-content .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    min-height: 300px;
}

#ocr-crop-container {
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
}

#ocr-crop-image {
    max-width: 100%;
    display: block;
}

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

/* ========== 摄像头拍照模态框 ========== */
.camera-modal-content {
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

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

.camera-modal-content .modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.camera-modal-content .modal-body {
    background: #000;
}

#camera-video {
    width: 100%;
    max-height: 60vh;
    display: block;
}

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

/* ========== 聊天消息中的图片 ========== */
.chat-message .chat-image {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 5px;
    display: block;
    object-fit: cover;
}

.chat-message .chat-image:hover {
    opacity: 0.9;
}

/* ========== 图片预览模态框 ========== */
#image-preview-modal {
    z-index: 10000;
}

.image-preview-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-preview-modal-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    object-fit: contain;
}

.image-preview-close {
    position: absolute;
    top: -35px;
    right: 0;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.image-preview-close:hover {
    color: #ccc;
}

/* 通用按钮样式 */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #996669;
    color: #fff;
}

.btn-primary:hover {
    background: #7a5254;
}

.btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.btn-secondary:hover {
    background: #d0d0d0;
}

/* Cropper.js 样式覆盖 */
.cropper-container {
    max-height: 60vh !important;
}

.chat-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    background: #e8e8e8;
    color: #444;
    min-width: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-input-area input::placeholder {
    color: #999;
}

.chat-input-area input:focus {
    outline: none;
    background: #e0e0e0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-input-area input:disabled {
    background: rgba(234, 234, 234, 0.9);
    color: #996669;
    cursor: not-allowed;
    opacity: 0.7;
}

.chat-panel-send-btn {
    width: 40px;
    height: 40px;
    background: #996669;
    color: #FFF;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-panel-send-btn:hover {
    background: #b0b0b0;
    color: #555;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.chat-panel-send-btn:disabled {
    background: rgba(234, 234, 234, 0.9);
    cursor: not-allowed;
    transform: none;
}

/* 预制回复区域 - 固定在屏幕最上方 */
.chat-preset-replies {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-preset-replies:empty {
    display: none;
}

.chat-preset-replies .preset-reply-btn {
    flex: 1;
    min-width: calc(50% - 5px);
    padding: 10px 14px;
    background: #fff;
    color: #44444490;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-preset-replies .preset-reply-btn:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* 竖屏适配 - 调整布局 */
@media (max-width: 768px) {
    /* 竖屏下也显示常驻对话框，同时隐藏原聊天按钮 */
    #talk-btn {
        display: none !important;
    }
    #action-panel {
        bottom: 70px !important;
    }
    .persistent-chat-input {
        padding: 6px 10px;
    }
    .persistent-chat-input input {
        padding: 8px 12px;
        font-size: 14px;
    }
    .persistent-send-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    /* 聊天框体竖屏适配 */
    .chat-panel {
        width: 98%;
        max-width: 98vw;
    }
    .chat-history-area {
        height: 150px;
    }
    .chat-input-area {
        padding: 10px;
    }
    .chat-panel-gift-btn,
    .chat-panel-send-btn {
        width: 40px;
        height: 40px;
    }
    .chat-preset-replies {
        padding: 8px 10px 10px;
    }
}

/* ========== PC端聊天重构样式结束 ========== */

/* 右侧按钮区域 - 垂直居中 */
#right-side-buttons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
    pointer-events: auto;
}

#right-side-buttons .action-btn {
    width: 48px;
    height: 48px;
    padding: 0;
    margin-bottom: 0;
    white-space: nowrap;
    background-color: rgba(255, 255, 255, 0.55);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 50%;
    /* subtle drop shadow + inset radial highlight similar to SVG */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* hide text while keeping content for accessibility */
    transition: all 0.2s ease;
    overflow: visible;
    color: transparent;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 右侧按钮图标 */
#mood-btn {
    background-image: url('../../assets/icon/icon_char_mood.png');
}

#diary-btn {
    background-image: url('../../assets/icon/icon_char_dairy.png');
}

#wardrobe-btn {
    background-image: url('../../assets/icon/icon_char_cloth.png');
}

#right-side-buttons .action-btn:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#right-side-buttons .action-btn:active {
    transform: translateY(0) scale(1);
    box-shadow: 0 2.4px 4.8px rgba(0, 0, 0, 0.3);
}

/* 信息面板 - 左上角 */
#info-panel {
    top: 20px;
    left: 20px;
    width: auto;
    min-width: 280px;
    font-size: 0.9rem;
    max-height: 50vh;
    background: transparent;
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: none;
}

.info-content-container {
    max-height: calc(50vh - 30px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(68, 68, 68, 0.3) transparent;
    display: block;
}

.info-content-container::-webkit-scrollbar {
    width: 4px;
}

.info-content-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

.info-content-container::-webkit-scrollbar-thumb {
    background: rgba(68, 68, 68, 0.3);
    border-radius: 2px;
}

.info-content-container::-webkit-scrollbar-thumb:hover {
    background: rgba(68, 68, 68, 0.5);
}

#info-panel div {
    margin-bottom: 0;
    font-weight: normal;
    color: rgba(68, 68, 68, 0.8);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 天数横幅样式 */
#day-info {
    background: #44444460;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    text-align: center;
    font-size: 0.9rem !important;
    display: inline-block;
    width: fit-content;
}

/* 时间显示 - 大号粗体灰色 */
#time-info {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: rgba(100, 100, 100, 0.95) !important;
    margin-bottom: 4px !important;
    line-height: 1;
}

#time-info span {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: rgba(80, 80, 80, 0.95) !important;
}

/* 日期和城市信息 */
#date-info, #city-info, #coins-info {
    font-size: 0.9rem !important;
    margin-bottom: 10px !important;
}

#date-info, #city-info {
    color: #44444490 !important;
}

#date-info {
    margin-right: 8px !important;
    margin-bottom: 10px !important;
}

#city-info {
    margin-right: 0 !important;
    margin-bottom: 10px !important;
}

/* 日期和城市在一行 */
#date-info, #city-info {
    display: inline-block;
}

#coins-info {
    background: #44444460;
    border-radius: 12px;
    padding: 10px 14px;
    text-align: left;
    width: fit-content;
    color: #FFF !important;
}

/* 对话框 */
.dialogue-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    pointer-events: auto;
    z-index: 500;
}

.dialogue-content {
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--mj-shadow-soft);
}

#character-name {
    font-weight: 600;
    font-size: var(--mj-font-size-base);
    margin-bottom: 10px;
    color: var(--mj-text-main);
}

#dialogue-text {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    min-height: 60px;
}

#dialogue-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.choice-btn {
    padding: 8px 15px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.choice-btn:hover {
    background: rgba(153, 102, 105, 0.1);
    transform: translateY(-1px);
}

/* 模态框 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    pointer-events: auto;
    animation: fadeIn 0.2s ease;
}

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

.modal-content {
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    max-width: 90%;
    width: 90%;
    max-width: 600px;
    box-shadow: var(--mj-shadow-soft);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.modal-header {
    padding: 20px 20px 10px 20px;
    border-bottom: 1px solid var(--mj-border-subtle);
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    text-align: center;
    font-size: var(--mj-font-size-base);
    font-weight: 600;
    color: var(--mj-text-main);
    line-height: 1.4;
}

/* 全屏模态框的特殊头部样式 */
.ai-settings-content .modal-header {
    position: sticky;
    top: 0;
    background: var(--mj-bg-level1);
    z-index: 10;
    padding: 20px 40px;
    border-bottom: 1px solid var(--mj-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-settings-content .modal-header h2 {
    margin: 0;
    font-size: var(--mj-font-size-base);
    font-weight: 600;
    color: var(--mj-text-main);
}

.ai-settings-content .close-btn {
    width: 40px;
    height: 40px;
    font-size: 28px;
    line-height: 1;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mj-text-main);
    font-weight: bold;
}

.ai-settings-content .close-btn:hover {
    background: var(--mj-bg-level2);
    transform: rotate(90deg);
}

.modal-body {
    padding: 20px;
    line-height: 1.6;
    font-size: var(--mj-font-size-base);
    color: var(--mj-text-main);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-body p {
    margin-bottom: 12px;
    font-size: var(--mj-font-size-base);
    color: var(--mj-text-main);
}

.modal-body small,
.modal-body .description {
    font-size: var(--mj-font-size-description);
    color: var(--mj-text-muted);
}

/* 模态框滚动条样式 */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--mj-bg-level2);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(68, 68, 68, 0.6);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(68, 68, 68, 0.9);
}

.modal-footer {
    padding: 10px 20px 20px 20px;
    text-align: center;
    border-top: 1px solid var(--mj-border-subtle);
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.btn {
    padding: 10px 25px;
    background: var(--mj-color-primary);
    color: #fff;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: var(--mj-shadow-soft-sm);
}

.btn:hover {
    background: #8a5d5d;
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn:disabled {
    background: rgba(234, 234, 234, 0.9);
    color: var(--mj-text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ui-panel {
        padding: 10px;
        font-size: 0.9rem;
    }

    /* 商店系统平板适配 */
    .shop-modal-content {
        width: 95%;
        max-width: 95%;
    }

    .shop-body {
        padding: 15px;
    }

    .shop-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .shop-item {
        height: 280px;
        padding: 12px;
    }

    .shop-item-preview {
        height: 120px;
    }

    .shop-info p {
        font-size: 15px;
    }
    
    #stats-panel {
        width: 320px;
        right: 120px;
    }

    #action-panel {
        bottom: 10px;
        padding: 8px 10px;
    }

    #action-panel .action-btn {
        flex: 1;
        aspect-ratio: 1;
        min-width: 0;
        padding: 6px;
        font-size: 0.85rem;
    }

    #right-side-buttons {
        right: 10px;
        gap: 8px;
    }

    #right-side-buttons .action-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    #info-panel {
        top: 10px;
        left: 10px;
        max-height: 45vh;
    }
    
    .info-content-container {
        max-height: calc(45vh - 25px);
    }
    
    .dialogue-container {
        width: 95%;
    }
    
    .loading-content h1 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .ui-panel {
        padding: 8px;
        font-size: 0.8rem;
    }

    /* 商店系统手机端适配 */
    .shop-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .shop-body {
        padding: 10px;
        max-height: calc(100vh - 60px);
    }

    .shop-info {
        margin-bottom: 15px;
        padding: 10px;
    }

    .shop-info p {
        font-size: 14px;
    }

    .shop-info .price {
        font-size: 16px;
    }

    .shop-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .shop-item {
        height: 260px;
        padding: 10px;
    }

    .shop-item-preview {
        height: 100px;
        margin-bottom: 8px;
    }

    .shop-item-name {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .shop-item-description {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .shop-item-cost {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .shop-item-owned {
        font-size: 13px;
    }

    .shop-buy-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    #stats-panel {
        width: 280px;
        right: 100px;
    }

    #action-panel {
        bottom: 8px;
        padding: 6px 8px;
    }

    .action-buttons-container {
        flex-wrap: nowrap;
    }

    #action-panel .action-btn {
        flex: 1;
        aspect-ratio: 1;
        min-width: 0;
        padding: 4px;
        font-size: 0.75rem;
    }

    #right-side-buttons {
        right: 8px;
        gap: 6px;
    }

    #right-side-buttons .action-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    #info-panel {
        width: 160px;
        top: 10px;
        left: 10px;
        max-height: 40vh;
    }

    .info-content-container {
        max-height: calc(40vh - 25px);
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Dialogue专用淡入动画 - 保持水平居中的同时执行淡入 */
@keyframes dialogueFadeIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

.dialogue-fade-in {
    animation: dialogueFadeIn 0.5s ease-out;
}

/* 战斗界面 */
.battle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    z-index: 800;
    display: flex;
    flex-direction: column;
}

.battle-header {
    background: #fff;
    border-bottom: 4px solid #333;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
}

.battle-header h2 {
    margin: 0 0 10px 0;
    font-size: 2rem;
    color: #333;
}

.battle-status {
    font-size: 1.2rem;
    color: #666;
    font-weight: bold;
}

.battle-field {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.battle-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.player-side {
    justify-content: flex-end;
}

.enemy-side {
    justify-content: flex-start;
}

.character-info {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid #333;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2);
    min-width: 200px;
}

.character-info h3 {
    margin: 0 0 15px 0;
    font-size: 1.5rem;
    color: #333;
}

.hp-bar {
    background: #ddd;
    border: 2px solid #333;
    border-radius: 10px;
    height: 25px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.hp-fill {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    height: 100%;
    width: 100%;
    transition: width 0.5s ease;
}

.hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
    text-shadow: 1px 1px 0px #fff;
}

.character-sprite {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 2px solid #333;
    border-radius: 50%;
    font-size: 2.5rem;
    transition: transform 0.3s ease;
}

.character-sprite.attacking {
    transform: scale(1.2) rotate(10deg);
}

.character-sprite.hit {
    animation: hit-flash 0.5s ease;
}

@keyframes hit-flash {
    0%, 100% { background: #f5f5f5; }
    50% { background: #ffcccb; }
}

.battle-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.battle-effects {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    position: relative;
}

.battle-log {
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid #333;
    border-radius: 10px;
    padding: 15px;
    min-height: 150px;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    max-width: 400px;
}

.log-entry {
    margin-bottom: 8px;
    padding: 8px;
    background: #f9f9f9;
    border-left: 3px solid #333;
    border-radius: 5px;
    animation: log-appear 0.5s ease;
}

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

.enemies-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.enemy-info {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid #666;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2);
    min-width: 150px;
    transition: all 0.3s ease;
}

.enemy-info.defeated {
    opacity: 0.5;
    transform: scale(0.8);
    filter: grayscale(100%);
}

.enemy-sprite {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 2px solid #666;
    border-radius: 50%;
    font-size: 2rem;
    transition: transform 0.3s ease;
}

.battle-controls {
    background: #fff;
    border-top: 4px solid #333;
    padding: 20px;
    text-align: center;
    box-shadow: 0 -4px 0px rgba(0, 0, 0, 0.2);
}

.battle-btn {
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    background: #333;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 10px;
    transition: all 0.2s ease;
}

.battle-btn:hover {
    background: #555;
    transform: translateY(-2px);
}

.battle-btn:active {
    transform: translateY(0);
}

/* 战斗特效 */
.effect-damage {
    position: absolute;
    color: #ff4444;
    font-weight: bold;
    font-size: 2rem;
    animation: damage-float 1s ease-out forwards;
    pointer-events: none;
}

@keyframes damage-float {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

.effect-heal {
    position: absolute;
    color: #44ff44;
    font-weight: bold;
    font-size: 1.5rem;
    animation: heal-float 1s ease-out forwards;
    pointer-events: none;
}

@keyframes heal-float {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(1.2);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .battle-field {
        flex-direction: column;
        gap: 15px;
    }
    
    .battle-side {
        flex: none;
    }
    
    .character-info {
        min-width: 150px;
        padding: 15px;
    }
    
    .battle-center {
        order: 2;
    }
    
    .enemy-side {
        order: 3;
    }
    
    /* AI设置模态框移动端适配 */
    .ai-settings-content {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100%;
        overflow-y: auto;
    }
    
    .ai-settings-body {
        padding: 15px;
    }
    
    .preset-buttons {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .preset-btn {
        width: 100%;
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .setting-group {
        margin-bottom: 15px;
    }
    
    .setting-group label {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: bold;
    }
    
    .setting-input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        font-size: 14px;
        border: 2px solid #000;
        border-radius: 4px;
    }
    
    .current-value {
        margin-top: 5px;
        font-size: 12px;
        color: #666;
        word-break: break-all;
    }
    
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    
    .action-btn {
        width: 100%;
        padding: 12px;
        font-size: 14px;
        background: #fff;
        border: 2px solid #000;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 2px 2px 0px #000;
    }
    
    .test-result {
        margin-top: 10px;
        padding: 10px;
        font-size: 13px;
        word-wrap: break-word;
    }
}

@media (max-width: 480px) {
    /* 更小屏幕的进一步优化 */
    .ai-settings-content {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
        overflow-y: auto;
    }
    
    .modal-header h2 {
        font-size: 18px;
    }
    
    .ai-settings-body {
        padding: 10px;
    }
    
    .preset-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .setting-input {
        padding: 8px;
        font-size: 13px;
    }
    
    .current-value {
        font-size: 11px;
    }
    
    .action-btn {
        padding: 10px;
        font-size: 13px;
    }
}

/* 设置菜单样式 */
#settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#settings-modal[style*="display: block"] {
    display: flex !important;
}

.settings-modal-content {
    width: 90%;
    max-width: 600px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.settings-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    flex: 1;
}

.settings-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mj-border-subtle);
}

.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-section h3 {
    font-size: var(--mj-font-size-h3);
    margin-bottom: 12px;
    color: var(--mj-text-main);
    font-weight: 600;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.setting-item:hover {
    background: var(--mj-bg-level1);
    border-color: var(--mj-border-strong);
}

.setting-item label {
    font-weight: 500;
    color: var(--mj-text-main);
    font-size: var(--mj-font-size-base);
    min-width: 120px;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    max-width: 300px;
}

.volume-slider {
    flex: 1;
    height: 6px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.volume-slider:hover {
    background: var(--mj-border-subtle);
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--mj-color-primary);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--mj-shadow-soft-sm);
    transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--mj-shadow-soft);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--mj-color-primary);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--mj-shadow-soft-sm);
}

.volume-value {
    min-width: 50px;
    text-align: center;
    font-weight: 500;
    color: var(--mj-text-main);
    font-size: var(--mj-font-size-base);
}

.toggle-checkbox {
    width: 48px;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.toggle-checkbox:hover {
    border-color: var(--mj-border-strong);
}

.toggle-checkbox:checked {
    background: var(--mj-color-primary);
    border-color: var(--mj-color-primary);
}

.toggle-checkbox::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    top: 2px;
    left: 2px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-checkbox:checked::before {
    transform: translateX(24px);
    background: #ffffff;
}

.toggle-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.toggle-label {
    display: none;
}

/* Voice Toggle Styles */
.voice-toggle-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
}

.voice-toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: rgba(68, 68, 68, 0.8);
    user-select: none;
}

/* AI Settings Group Styles */
.ai-settings-group {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 1000;
    background: rgba(245, 240, 230, 0.9);
    padding: 12px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.setting-description {
    display: block;
    font-size: var(--mj-font-size-description);
    color: var(--mj-text-muted);
    margin-top: 5px;
    font-style: italic;
}

.settings-placeholder {
    text-align: center;
    color: var(--mj-text-muted);
    font-style: italic;
    padding: 20px;
    background: var(--mj-bg-level2);
    border: 1px dashed var(--mj-border-subtle);
    border-radius: 8px;
}

.settings-btn {
    padding: 12px 30px;
    background: #fff;
    color: #000;
    border: 3px solid #000;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 3px 3px 0px #000;
    margin: 0 10px;
}

.settings-btn:hover {
    background: #f0f0f0;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000;
}

.settings-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
}

/* 大乱斗游戏样式 */
.smash-modal {
    animation: fadeIn 0.3s ease;
}

.smash-modal canvas {
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

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

/* 备份恢复功能样式 - 黑白画风适配 */
.backup-restore-section {
    margin-top: 10px;
}

.backup-btn, .restore-btn {
    padding: 10px 20px;
    background: #fff;
    color: #000;
    border: 3px solid #000;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 3px 3px 0px #000;
    margin-left: auto;
    min-width: 120px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.backup-btn:hover, .restore-btn:hover {
    background: #f0f0f0;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000;
}

.backup-btn:active, .restore-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
    background: #e0e0e0;
}

/* 区分两个按钮的样式 */
.restore-btn {
    background: #000;
    color: #fff;
}

.restore-btn:hover {
    background: #333;
    color: #fff;
}

.restore-btn:active {
    background: #555;
}

.backup-status {
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #000;
    min-height: 20px;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 0px #000;
    background: #fff;
    color: #000;
}

.backup-status.info {
    background: #f8f8f8;
    color: #000;
    border-color: #000;
}

.backup-status.success {
    background: #fff;
    color: #000;
    border-color: #000;
    animation: pulse 0.5s ease-in-out;
}

.backup-status.success::before {
    content: "✓ ";
    font-weight: bold;
}

.backup-status.error {
    background: #000;
    color: #fff;
    border-color: #000;
    animation: shake 0.5s ease-in-out;
}

.backup-status.error::before {
    content: "✗ ";
    font-weight: bold;
}

.backup-status.warning {
    background: #f0f0f0;
    color: #000;
    border-color: #000;
    border-style: dashed;
}

.backup-status.warning::before {
    content: "⚠ ";
    font-weight: bold;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 全局等级系统样式 */
.global-level-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #000;
}

.global-level-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

#global-level-display,
#global-exp-display {
    font-size: 14px;
    margin-bottom: 5px;
}

.player-stats {
    margin-top: 8px;
    font-size: 12px;
}

.player-stats div {
    margin-bottom: 3px;
    color: #666;
}

#global-level {
    color: #ffd700;
    font-weight: bold;
}

#attack-power {
    color: #ff6666;
    font-weight: bold;
}

#defense-power {
    color: #6666ff;
    font-weight: bold;
}

/* 本地AI设置模态框样式 */
#local-ai-settings-modal {
    z-index: 10001 !important;
}

.local-ai-settings-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background: var(--mj-bg-level1);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
}

.local-ai-settings-body {
    padding: 20px;
}

.current-model-section {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f8f8;
    border: 2px solid #000;
    border-radius: 8px;
}

.current-model-section h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

#current-local-model {
    font-family: monospace;
    background: #fff;
    padding: 8px 12px;
    border: 2px solid #666;
    border-radius: 4px;
    color: #000;
    font-weight: bold;
}

.model-management-section {
    margin-bottom: 25px;
}

.model-management-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
}

.list-models-btn, #refresh-models-btn {
    padding: 12px 24px;
    background: #fff;
    border: 3px solid #000;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 3px 3px 0px #000;
}

.list-models-btn:hover, #refresh-models-btn:hover {
    background: #f0f0f0;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000;
}

.list-models-btn:active, #refresh-models-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
}

#installed-models-section, #recommended-models-section {
    margin-top: 20px;
    display: none;
}

#installed-models-section h4, #recommended-models-section h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #000;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

#installed-models-list, #recommended-models-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.model-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 2px solid #666;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.model-item.selectable-model {
    cursor: pointer;
    border-color: #000;
}

.model-item.selectable-model:hover {
    background: #f9f9f9;
    transform: translateY(-2px);
    box-shadow: 0 4px 0px #666;
}

.model-item.selected {
    background: #e8e8e8;
    border-color: #000;
    border-width: 3px;
    box-shadow: 0 0 0 2px #000;
}

.model-info {
    flex: 1;
}

.model-name {
    font-weight: bold;
    font-size: 1rem;
    color: #000;
    margin-bottom: 5px;
}

.model-description {
    font-size: 0.9rem;
    color: #666;
}

.select-model-btn, .download-model-btn {
    padding: 8px 16px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 0px #000;
    min-width: 80px;
}

.select-model-btn:hover, .download-model-btn:hover {
    background: #f0f0f0;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #000;
}

.select-model-btn.selected {
    background: #000;
    color: #fff;
}

.select-model-btn.selected:hover {
    background: #333;
}

.download-model-btn {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.download-model-btn:hover {
    background: #0056b3;
    border-color: #0056b3;
}

#download-progress-section {
    margin-top: 20px;
    padding: 20px;
    background: #f8f8f8;
    border: 2px solid #000;
    border-radius: 8px;
    display: none;
}

#download-progress-section h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #000;
    font-weight: bold;
    text-align: center;
}

#downloading-model-name {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    color: #000;
}

.progress-bar {
    width: 100%;
    height: 25px;
    background: #e0e0e0;
    border: 2px solid #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}

#download-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #007bff, #0056b3);
    width: 0%;
    transition: width 0.5s ease;
}

#download-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #000;
    font-size: 0.9rem;
    text-shadow: 1px 1px 0px #fff;
}

#download-status {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

#cancel-download-btn {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    background: #dc3545;
    color: #fff;
    border: 2px solid #dc3545;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 0px #000;
}

#cancel-download-btn:hover {
    background: #c82333;
    border-color: #c82333;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #000;
}

#save-local-model-btn {
    display: block;
    margin: 25px auto 0 auto;
    padding: 12px 30px;
    background: #28a745;
    color: #fff;
    border: 3px solid #28a745;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 3px 3px 0px #000;
}

#save-local-model-btn:hover {
    background: #218838;
    border-color: #218838;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000;
}

#save-local-model-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
}

#ollama-status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    min-height: 20px;
    border: 2px solid transparent;
}

#ollama-status.info {
    background: #f8f9fa;
    color: #000;
    border-color: #000;
}

#ollama-status.success {
    background: #f8f9fa;
    color: #000;
    border-color: #000;
}

#ollama-status.error {
    background: #000;
    color: #fff;
    border-color: #000;
}

#ollama-status.warning {
    background: #f8f9fa;
    color: #000;
    border-color: #000;
    border-style: dashed;
}

/* 推荐模型列表样式 */
#recommended-models-list .model-item {
    border-color: #007bff;
}

#recommended-models-list .model-item:hover {
    border-color: #0056b3;
    box-shadow: 0 4px 0px #0056b3;
}

/* 响应式设计 */
@media (max-width: 768px) {    
    .local-ai-settings-body {
        padding: 15px;
    }
    
    .model-management-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .list-models-btn, #refresh-models-btn {
        width: 100%;
        max-width: 250px;
    }
    
    .model-item {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .model-info {
        flex: none;
    }
    
    .select-model-btn, .download-model-btn {
        width: 100%;
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .local-ai-settings-body {
        padding: 10px;
    }
    
    .current-model-section {
        margin-bottom: 20px;
        padding: 10px;
    }
    
    .model-management-controls {
        gap: 10px;
    }
    
    .list-models-btn, #refresh-models-btn {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    #save-local-model-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* 嵌入模型相关样式 */

.mode-selection-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ddd;
}

.mode-selection-section h3 {
    margin-bottom: 15px;
    color: #000;
    font-size: 18px;
}

.mode-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mode-btn {
    padding: 10px 20px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    background: var(--mj-bg-level1);
    font-weight: 500;
    font-size: var(--mj-font-size-base);
    color: var(--mj-text-main);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 80px;
    box-shadow: var(--mj-shadow-soft-sm);
}

.mode-btn:hover {
    background: var(--mj-bg-level2);
    border-color: var(--mj-border-strong);
}

.mode-btn.active {
    background: var(--mj-color-primary);
    color: #fff;
    border-color: var(--mj-color-primary);
}

.config-section {
    margin-bottom: 20px;
}

.local-model-info {
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: var(--mj-shadow-soft-sm);
}

.local-model-info h4 {
    margin: 0 0 8px 0;
    color: var(--mj-text-main);
    font-size: var(--mj-font-size-description);
    font-weight: 600;
}

.local-model-info p {
    margin: 0;
    color: var(--mj-text-muted);
    font-size: var(--mj-font-size-description);
}

.install-status {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    font-size: var(--mj-font-size-description);
    line-height: 1.4;
}

.status-success {
    background: rgba(76, 175, 80, 0.06);
    color: rgba(46, 125, 50, 0.9);
    border: 1px solid rgba(46, 125, 50, 0.16);
}

.status-error {
    background: rgba(234, 70, 70, 0.06);
    color: rgba(180, 40, 40, 0.9);
    border: 1px solid rgba(180, 40, 40, 0.16);
}

.status-warning {
    background: rgba(255, 193, 7, 0.06);
    color: rgba(133, 100, 4, 0.9);
    border: 1px solid rgba(133, 100, 4, 0.16);
}

.status-info {
    background: rgba(23, 162, 184, 0.06);
    color: rgba(12, 84, 96, 0.9);
    border: 1px solid rgba(12, 84, 96, 0.16);
}

.progress-section {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    background: var(--mj-bg-level2);
    box-shadow: var(--mj-shadow-soft-sm);
}

.progress-section h4 {
    margin: 0 0 15px 0;
    color: var(--mj-text-main);
    font-size: var(--mj-font-size-description);
    font-weight: 600;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--mj-bg-level2);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--mj-border-subtle);
}

.progress-fill {
    height: 100%;
    background: var(--mj-color-primary);
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    min-width: 40px;
    font-weight: 500;
    color: var(--mj-text-main);
    font-size: var(--mj-font-size-description);
}

.download-status {
    margin-bottom: 15px;
    font-size: var(--mj-font-size-description);
    color: var(--mj-text-muted);
    font-style: italic;
}

.cancel-btn {
    background: rgba(234, 70, 70, 0.9) !important;
    color: white !important;
    border: 1px solid rgba(180, 40, 40, 0.3) !important;
}

.cancel-btn:hover {
    background: rgba(234, 70, 70, 1) !important;
}

.api-info, .local-info {
    margin-top: 15px;
    padding: 10px;
    background: var(--mj-bg-level2);
    border-radius: 4px;
    border-left: 2px solid var(--mj-color-primary);
}

.info-text {
    margin: 0;
    font-size: var(--mj-font-size-description);
    color: var(--mj-text-muted);
    line-height: 1.4;
}

.info-text a {
    color: var(--mj-color-primary);
    text-decoration: none;
}

.info-text a:hover {
    color: #8a5d5d;
    text-decoration: underline;
}

/* 嵌入式模型设置响应式样式 */
@media (max-width: 768px) {
    .mode-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .mode-btn {
        width: 100%;
        max-width: 200px;
    }
    
    .progress-bar-container {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .progress-text {
        text-align: center;
        min-width: auto;
    }
}

/* 送礼功能样式 */
.chat-gift-btn:hover {
    background: #FF5252 !important;
    border-color: #FF3D3D !important;
    transform: scale(1.05);
}

.gift-selection-modal {
    animation: fadeIn 0.3s ease-in-out;
}

.gift-selection-content {
    animation: slideIn 0.3s ease-out;
}

.gift-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
}

.gift-option:active {
    transform: translateY(0px);
}

/* 动画定义 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* 移动端适配 */
@media (max-width: 768px) {
    .gift-selection-content {
        width: 95%;
        max-height: 400px;
    }
    
    .gift-option {
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .chat-gift-btn {
        min-width: 40px;
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* ==================== 账号系统样式 ==================== */

/* 账号模态框动画 */
#account-modal {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

#account-modal.open {
    opacity: 1;
}

/* 账号视图切换 */
.account-view {
    display: none;
}

.account-view.active {
    display: block;
}

/* Tab 标签 */
.account-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--mj-border-subtle);
}

.account-tab {
    flex: 1;
    padding: 12px 20px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
    font-size: var(--mj-font-size-base);
    color: var(--mj-text-main);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.account-tab:hover {
    background: var(--mj-bg-level2);
    border-color: var(--mj-border-strong);
}

.account-tab.active {
    background: var(--mj-color-primary);
    color: #fff;
    border-color: var(--mj-color-primary);
}

/* 表单样式 */
.account-form {
    display: none;
    padding: 20px 0;
}

.account-form.active {
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: var(--mj-font-size-base);
    color: var(--mj-text-main);
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: var(--mj-font-size-base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
}

.form-input:focus {
    outline: none;
    border-color: var(--mj-color-primary);
    box-shadow: 0 0 0 2px rgba(153, 102, 105, 0.2);
}

.form-input::placeholder {
    color: var(--mj-text-muted);
}

.form-actions {
    margin-top: 20px;
}

/* 按钮样式 */
.primary-btn {
    width: 100%;
    padding: 12px 24px;
    background: var(--mj-color-primary);
    color: #fff;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: var(--mj-shadow-soft-sm);
}

.primary-btn:hover {
    background: #8a5d5d;
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.primary-btn:disabled {
    background: rgba(234, 234, 234, 0.9);
    color: var(--mj-text-muted);
    border-color: var(--mj-border-subtle);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.secondary-btn {
    width: 100%;
    padding: 10px 20px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: var(--mj-shadow-soft-sm);
}

.secondary-btn:hover {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.secondary-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.danger-btn {
    width: 100%;
    padding: 10px 20px;
    background: rgba(234, 70, 70, 0.9);
    color: #fff;
    border: 1px solid rgba(180, 40, 40, 0.3);
    border-radius: 4px;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: var(--mj-shadow-soft-sm);
}

.danger-btn:hover {
    background: rgba(234, 70, 70, 1);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.danger-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 错误和成功消息 */
.error-message {
    margin-top: 10px;
    padding: 10px;
    background: rgba(234, 70, 70, 0.06);
    color: rgba(180, 40, 40, 0.9);
    border: 1px solid rgba(180, 40, 40, 0.16);
    border-radius: 4px;
    font-size: 16px;
}

.success-message {
    margin-top: 10px;
    padding: 10px;
    background: rgba(76, 175, 80, 0.06);
    color: rgba(46, 125, 50, 0.9);
    border: 1px solid rgba(46, 125, 50, 0.16);
    border-radius: 4px;
    font-size: 16px;
}

/* 用户信息显示 */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: var(--mj-shadow-soft-sm);
}

.user-avatar {
    width: 60px;
    height: 60px;
    background: var(--mj-color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 500;
    flex-shrink: 0;
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--mj-text-main);
    margin-bottom: 5px;
}

.user-email {
    font-size: 16px;
    color: var(--mj-text-muted);
}

/* 同步状态 */
.sync-status {
    padding: 20px;
    background: var(--mj-bg-level2);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: var(--mj-shadow-soft-sm);
}

.sync-status h3 {
    margin-bottom: 15px;
    color: var(--mj-text-main);
    font-size: 18px;
    font-weight: 600;
}

.sync-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mj-border-subtle);
}

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

.sync-item span:first-child {
    font-weight: 500;
    font-size: 18px;
    color: var(--mj-text-main);
}

.sync-item span:last-child {
    font-size: 16px;
    color: var(--mj-text-muted);
}

/* 同步操作按钮 */
.sync-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.sync-actions .secondary-btn {
    grid-column: 1 / -1;
}

/* 账号操作 */
.account-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mj-border-subtle);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .account-tabs {
        gap: 5px;
    }

    .account-tab {
        padding: 10px 15px;
        font-size: 14px;
    }

    .user-info {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    .sync-actions {
        grid-template-columns: 1fr;
    }

    .sync-actions .secondary-btn {
        grid-column: 1;
    }

    .sync-status {
        padding: 15px;
    }

    .account-actions {
        margin-top: 15px;
        padding-top: 15px;
    }
}

@media (max-width: 480px) {
    .form-input {
        padding: 10px;
        font-size: 13px;
    }

    .primary-btn, .secondary-btn, .danger-btn {
        padding: 10px 15px;
        font-size: 14px;
    }

    .user-name {
        font-size: 18px;
    }

    .sync-status h3 {
        font-size: 16px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .user-avatar {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* 安卓移动端优化 */
@media (max-width: 600px) and (orientation: portrait) {
    /* 账号模态框在移动端全屏显示 */
    #account-modal {
        align-items: flex-start !important;
    }

    #account-modal .modal-content,
    #account-modal .account-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    #account-modal .modal-header {
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--mj-bg-level1);
        border-bottom: 1px solid var(--mj-border-subtle);
    }

    #account-modal .modal-body,
    #account-modal .account-modal-body {
        flex: 1;
        padding: 15px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
        overscroll-behavior: contain; /* 防止滚动穿透 */
    }

    /* 确保账号视图也能滚动 */
    #account-modal .account-view {
        min-height: min-content;
    }

    /* 增大触摸目标 */
    .account-tab {
        padding: 14px 12px;
        font-size: 15px;
        min-height: 48px; /* Android 推荐最小触摸目标 */
    }

    .form-input {
        padding: 14px;
        font-size: 16px; /* 防止iOS自动缩放 */
        min-height: 48px;
    }

    .primary-btn, .secondary-btn, .danger-btn {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 48px;
    }

    /* 优化表单间距 */
    .form-group {
        margin-bottom: 18px;
    }

    .form-group label {
        font-size: 15px;
        margin-bottom: 10px;
    }

    /* 用户信息卡片优化 */
    .user-info {
        padding: 20px 15px;
        gap: 12px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .user-name {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .user-email {
        font-size: 15px;
    }

    /* 同步状态优化 */
    .sync-status {
        padding: 18px 15px;
    }

    .sync-status h3 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .sync-item {
        padding: 12px 0;
        font-size: 15px;
    }

    /* 按钮组优化 */
    .sync-actions {
        gap: 12px;
        margin-bottom: 18px;
    }

    .account-actions {
        margin-top: 18px;
        padding-top: 18px;
    }

    /* 消息提示优化 */
    .error-message, .success-message {
        padding: 12px;
        font-size: 15px;
        margin-top: 12px;
    }

    /* Tab切换动画优化 */
    .account-form {
        animation: fadeIn 0.2s ease-in;
    }

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

/* 横屏模式优化 */
@media (max-width: 960px) and (orientation: landscape) {
    #account-modal .modal-content {
        width: 90% !important;
        max-height: 90vh !important;
    }

    #account-modal .modal-body {
        max-height: calc(90vh - 100px);
        overflow-y: auto;
    }

    .user-info {
        flex-direction: row;
        text-align: left;
    }

    .sync-actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   实时语音对话样式
   ======================================== */

.realtime-chat-content {
    width: 500px;
    max-width: 90%;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

.realtime-chat-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 语音状态区域 */
.voice-status-section {
    text-align: center;
    position: relative;
}

/* 麦克风选择区域 */
.microphone-selection {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--mj-bg-level2);
    border-radius: 8px;
    border: 1px solid var(--mj-border-subtle);
}

.microphone-selection label {
    font-size: 16px;
    font-weight: 500;
    color: var(--mj-text-main);
    white-space: nowrap;
}

.microphone-select-dropdown {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: 16px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.microphone-select-dropdown:hover:not(:disabled) {
    border-color: var(--mj-color-primary);
}

.microphone-select-dropdown:focus {
    outline: none;
    border-color: var(--mj-color-primary);
    box-shadow: 0 0 0 2px rgba(153, 102, 105, 0.2);
}

.microphone-select-dropdown:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.refresh-microphone-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: var(--mj-shadow-soft-sm);
}

.refresh-microphone-btn:hover {
    background: var(--mj-color-primary);
    border-color: var(--mj-color-primary);
    color: #fff;
    transform: rotate(180deg);
}

.refresh-microphone-btn:active {
    transform: rotate(180deg) scale(0.95);
}

.voice-status {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.voice-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.pulse-ring {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    animation: pulse-animation 1.5s ease-out infinite;
}

@keyframes pulse-animation {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

/* 转写显示区域 */
.transcription-display {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 15px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.transcription-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.transcription-label {
    font-weight: bold;
    font-size: 14px;
    color: #666;
}

.user-transcription .transcription-label {
    color: #4CAF50;
}

.ai-transcription .transcription-label {
    color: #2196F3;
}

.transcription-text {
    background: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.6;
    min-height: 40px;
    border-left: 3px solid #ddd;
}

.user-transcription .transcription-text {
    border-left-color: #4CAF50;
}

.ai-transcription .transcription-text {
    border-left-color: #2196F3;
}

/* 语音控制按钮 */
.voice-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.voice-control-btn {
    flex: 1;
    max-width: 200px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

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

#start-voice-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

#stop-voice-btn {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

#stop-voice-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
}

/* 提示信息 */
.voice-tips {
    background: var(--mj-bg-level2);
    border-left: 4px solid var(--mj-color-primary);
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--mj-text-main);
}

.voice-tips p {
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--mj-color-primary);
}

.voice-tips ul {
    margin-left: 20px;
    list-style-type: disc;
}

.voice-tips li {
    margin-bottom: 5px;
    color: var(--mj-text-muted);
}

/* 响应式设计 */
@media (max-width: 600px) {
    .realtime-chat-content {
        width: 95%;
    }

    .voice-controls {
        flex-direction: column;
    }

    .voice-control-btn {
        max-width: 100%;
    }

    .transcription-display {
        min-height: 120px;
    }

    .microphone-selection {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .microphone-selection label {
        text-align: left;
    }
}

/* ========================================
   屏幕旋转悬浮球样式（仅安卓）
   ======================================== */

.rotation-float-ball {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--mj-color-primary);
    color: #fff;
    border: 1px solid var(--mj-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;
    box-shadow: var(--mj-shadow-soft);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    touch-action: none; /* 防止触摸时的默认行为 */
    user-select: none;
    -webkit-user-select: none;
    bottom: 80px;
    right: 20px;
}

.rotation-float-ball:hover {
    background: #8a5d5d;
    transform: scale(1.05);
    box-shadow: var(--mj-shadow-soft);
}

.rotation-float-ball:active {
    transform: scale(0.95);
}

.rotation-float-ball.dragging {
    opacity: 0.7;
    transition: none;
}

.rotation-icon {
    font-size: 28px;
    color: #fff;
    pointer-events: none;
}

/* ========================================
   安卓Start Menu响应式适配
   ======================================== */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .start-menu-content {
        max-width: 450px;
        padding: 2.5rem;
    }

    .start-menu-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }

    .menu-btn {
        padding: 0.9rem 1.8rem;
        font-size: 1.3rem;
    }

    .game-info p {
        font-size: 0.95rem;
    }
}

/* 中等手机设备 (481px - 767px) */
@media (max-width: 767px) and (min-width: 481px) {
    .start-menu-content {
        max-width: 90%;
        padding: 2rem;
        margin: 0 auto;
    }

    .start-menu-content h1 {
        font-size: 2.2rem;
        margin-bottom: 1.2rem;
        padding-bottom: 0.8rem;
    }

    .menu-buttons {
        margin: 2rem 0;
        gap: 1.2rem;
    }

    .menu-btn {
        padding: 0.85rem 1.5rem;
        font-size: 1.2rem;
    }

    .game-info {
        margin-top: 1.5rem;
        padding-top: 1.2rem;
    }

    .game-info p {
        font-size: 0.9rem;
    }

    .tutorial-btn, .eula-btn {
        height: 52px;
        width: 120px;
        font-size: 15px;
    }
}

/* 小屏手机设备 (max-width: 480px) */
@media (max-width: 480px) {
    .start-menu-content {
        max-width: 95%;
        padding: 1.5rem;
        margin: 0 auto;
    }

    .start-menu-content h1 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        padding-bottom: 0.6rem;
        border-bottom-width: 2px;
    }

    .menu-buttons {
        margin: 1.5rem 0;
        gap: 1rem;
    }

    .menu-btn {
        padding: 0.75rem 1.2rem;
        font-size: 1.1rem;
    }

    .game-info {
        margin-top: 1.2rem;
        padding-top: 1rem;
    }

    .game-info p {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
    }

    .tutorial-btn {
        bottom: 70px;
        right: 15px;
        padding: 8px 14px;
        font-size: 13px;
    }

    .eula-btn {
        bottom: 15px;
        right: 15px;
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* 超小屏手机设备 (max-width: 360px) */
@media (max-width: 360px) {
    .start-menu-content {
        max-width: 98%;
        padding: 1.2rem;
    }

    .start-menu-content h1 {
        font-size: 1.5rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.5rem;
    }

    .menu-buttons {
        margin: 1.2rem 0;
        gap: 0.8rem;
    }

    .menu-btn {
        padding: 0.65rem 1rem;
        font-size: 1rem;
    }

    .game-info {
        margin-top: 1rem;
        padding-top: 0.8rem;
    }

    .game-info p {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    .tutorial-btn {
        bottom: 60px;
        right: 10px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .eula-btn {
        bottom: 10px;
        right: 10px;
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* 横屏模式适配 */
@media (max-height: 500px) and (orientation: landscape) {
    .start-menu-content {
        max-width: 400px;
        padding: 1rem 2rem;
    }

    .start-menu-content h1 {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.5rem;
    }

    .menu-buttons {
        margin: 1rem 0;
        gap: 0.8rem;
    }

    .menu-btn {
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
    }

    .game-info {
        margin-top: 0.8rem;
        padding-top: 0.6rem;
    }

    .game-info p {
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
        line-height: 1.2;
    }

    .tutorial-btn {
        bottom: 50px;
        right: 15px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .eula-btn {
        bottom: 10px;
        right: 15px;
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* 特定安卓设备适配 */
/* 小米、华为等全面屏手机 (高度较长) */
@media (min-height: 800px) and (max-width: 480px) and (orientation: portrait) {
    .start-menu-content {
        padding: 2rem 1.5rem;
    }

    .start-menu-content h1 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .menu-buttons {
        margin: 2.5rem 0;
        gap: 1.3rem;
    }

    .menu-btn {
        padding: 0.9rem 1.5rem;
        font-size: 1.2rem;
    }
}

/* 安卓平板横屏模式 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .start-menu-content {
        max-width: 500px;
        padding: 1.5rem 2.5rem;
    }

    .start-menu-content h1 {
        font-size: 2.3rem;
    }

    .menu-buttons {
        margin: 1.8rem 0;
        gap: 1.2rem;
    }
}

/* ========================================
   问题反馈悬浮球样式
   ======================================== */
.feedback-float-ball {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99998;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    transition: all 0.3s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    bottom: 150px;
    right: 20px;
}

.feedback-float-ball:hover {
    background: rgba(52, 152, 219, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.5);
}

.feedback-float-ball:active {
    transform: scale(0.95);
}

.feedback-float-ball.dragging {
    opacity: 0.7;
    transition: none;
}

.feedback-icon {
    font-size: 28px;
    color: #fff;
    pointer-events: none;
}

/* ========================================
   问题反馈模态框样式
   ======================================== */
.feedback-modal-content {
    max-width: 500px;
    width: 90%;
}

.feedback-body {
    padding: 20px;
}

.feedback-field {
    margin-bottom: 20px;
}

.feedback-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.feedback-field label .required {
    color: #e74c3c;
    margin-left: 4px;
}

.feedback-textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

.feedback-textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.feedback-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

.feedback-input:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.char-counter {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.feedback-status {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: none;
}

.feedback-status.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
}

.feedback-status.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
}

.feedback-status.loading {
    display: block;
    background-color: #fff3cd;
    color: #856404;
}

.feedback-actions {
    text-align: center;
}

.feedback-submit-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    padding: 12px 40px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.feedback-submit-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1a5276);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.feedback-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==================== 性别选择模态框样式 ==================== */
.gender-selection-content {
    max-width: 500px;
    border-radius: 8px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    box-shadow: var(--mj-shadow-soft);
    animation: fadeInScale 0.3s ease-out;
}

.gender-buttons {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==================== 存档选择弹窗样式 ==================== */

.save-slot-content {
    max-width: 500px;
    width: 90%;
}

.save-slot-body {
    padding: 15px !important;
}

.save-slot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.save-slot-card {
    padding: 14px 16px;
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    background: var(--mj-bg-level1);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.save-slot-card:hover:not(.disabled) {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft-sm);
}

.save-slot-card:active:not(.disabled) {
    transform: translateY(0);
}

.save-slot-card.occupied {
    border-color: var(--mj-color-primary);
    border-width: 1.5px;
}

.save-slot-card.empty {
    border-style: dashed;
    opacity: 0.8;
}

.save-slot-card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

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

.slot-number {
    font-weight: 600;
    font-size: var(--mj-font-size-base);
    color: var(--mj-text-main);
}

.slot-delete-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: var(--mj-text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.slot-delete-btn:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.slot-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--mj-text-main);
    margin-bottom: 4px;
}

.slot-time {
    font-size: 12px;
    color: var(--mj-text-muted);
}

.slot-empty {
    text-align: center;
    padding: 10px 0;
    color: var(--mj-text-muted);
    font-size: 14px;
}

/* ==================== 存档选择弹窗样式结束 ==================== */

.gender-btn {
    flex: 1;
    min-width: 180px;
    max-width: 200px;
    padding: 30px 20px;
    background: var(--mj-color-primary);
    border: 1px solid var(--mj-border-strong);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: var(--mj-shadow-soft-sm);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.gender-btn:hover {
    background: #8a5d5d;
    transform: translateY(-2px);
    box-shadow: var(--mj-shadow-soft);
}

.gender-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.gender-btn:first-child {
    background: var(--mj-color-primary);
}

.gender-btn:last-child {
    background: var(--mj-color-primary);
}

.gender-icon {
    font-size: 48px;
    margin-bottom: 15px;
    animation: bounce 2s infinite;
}

.gender-label {
    font-size: 24px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.gender-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 8px;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 性别选择模态框 - 移动端适配 */
@media (max-width: 600px) {
    .gender-selection-content {
        max-width: 90%;
        margin: 20px;
    }

    .gender-buttons {
        flex-direction: column;
        gap: 20px;
    }

    .gender-btn {
        min-width: 100%;
        max-width: 100%;
        padding: 25px 20px;
    }

    .gender-icon {
        font-size: 40px;
    }

    .gender-label {
        font-size: 20px;
    }

    .gender-desc {
        font-size: 13px;
    }
}
/* TRPG系统样式 */
.trpg-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--mj-bg-level1);
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}

/* 顶部资源栏 */
.trpg-resource-bar {
    background: var(--mj-color-primary);
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    position: relative;
    gap: 25px;
}

.trpg-close-btn {
    position: relative;
    order: -1;
    margin-right: 10px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    border: 1px solid var(--mj-border-strong);
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.trpg-close-btn:hover {
    background: var(--mj-bg-level2);
    transform: rotate(90deg);
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.resource-label {
    font-weight: bold;
}

.resource-value {
    font-family: monospace;
    font-size: 16px;
}

/* 体力条样式 */
.stamina-bar-container {
    width: 120px;
    height: 20px;
    background: var(--mj-bg-level2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.stamina-bar-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    transition: width 0.3s ease, background 0.3s ease;
    width: 100%;
}

/* 自定义状态条样式 */
.custom-stat-resource {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-stat-icon {
    font-size: 16px;
    line-height: 1;
}

.custom-stat-bar-container {
    width: 80px;
    height: 16px;
    background: var(--mj-bg-level2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.custom-stat-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 8px;
}

.custom-stat-value {
    font-family: monospace;
    font-size: 13px;
    min-width: 45px;
}

/* 导航Tab */
.trpg-nav-tabs {
    display: flex;
    background: var(--mj-bg-level2);
    border-bottom: 1px solid var(--mj-border-subtle);
    flex-shrink: 0;
}

.trpg-tab {
    flex: 1;
    padding: 15px;
    background: var(--mj-bg-level1);
    border: none;
    border-right: 1px solid var(--mj-border-subtle);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.trpg-tab:last-child {
    border-right: none;
}

.trpg-tab:hover {
    background: var(--mj-bg-level2);
}

.trpg-tab.active {
    background: var(--mj-color-primary);
    color: #fff;
}

.trpg-tab.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
}

/* ===== TRPG V2 左侧竖排导航布局 ===== */
.trpg-layout-v2 {
    display: flex;
    flex-direction: column;
}

.trpg-layout-v2 .trpg-main-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 左侧导航栏 */
.trpg-sidebar-nav {
    width: 70px;
    min-width: 50px;
    max-width: 200px;
    background: var(--mj-bg-level2);
    border-right: 1px solid var(--mj-border-subtle);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 10px 0;
    position: relative;
}

/* 侧边栏拖动调整宽度的手柄 */
.trpg-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
}

.trpg-sidebar-resize-handle:hover,
.trpg-sidebar-resize-handle.dragging {
    background: var(--mj-color-primary);
    opacity: 0.5;
}

.trpg-sidebar-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    margin: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--mj-text-secondary);
}

.trpg-sidebar-tab:hover {
    background: var(--mj-bg-level3);
    color: var(--mj-text-main);
}

.trpg-sidebar-tab.active {
    background: var(--mj-color-primary);
    color: #fff;
}

.trpg-tab-icon {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: bold;
    display: none;  /* 隐藏图标 */
}

.trpg-tab-text {
    font-size: 13px;
    font-weight: 500;
}

/* 历史记录区域 */
.trpg-history-section {
    margin-top: auto;
    border-top: 1px solid var(--mj-border-subtle);
    padding-top: 10px;
}

.trpg-history-toggle {
    position: relative;
    width: calc(100% - 16px);
}

.trpg-history-arrow {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    transition: transform 0.3s ease;
}

.trpg-history-toggle.expanded .trpg-history-arrow {
    transform: translateY(-50%) rotate(90deg);
}

.trpg-history-list {
    max-height: 200px;
    overflow-y: auto;
    background: var(--mj-bg-level1);
    border-radius: 4px;
    margin: 4px 8px;
}

.trpg-history-list::-webkit-scrollbar {
    width: 4px;
}

.trpg-history-list::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.4);
    border-radius: 2px;
}

.trpg-history-item {
    padding: 8px 10px;
    font-size: 11px;
    color: var(--mj-text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--mj-border-subtle);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.trpg-history-item:last-child {
    border-bottom: none;
}

.trpg-history-item:hover {
    background: var(--mj-bg-level2);
    color: var(--mj-text-main);
}

.trpg-history-item-icon {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.trpg-history-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trpg-history-empty {
    padding: 12px;
    text-align: center;
    font-size: 11px;
    color: var(--mj-text-muted);
}

/* V2布局下的主内容区 */
.trpg-layout-v2 .trpg-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* 主要内容 */
.trpg-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.trpg-view {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
}

/* 对话视图 */
.trpg-chat-view {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.trpg-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trpg-chat-input-container {
    padding: 15px;
    background: var(--mj-bg-level2);
    border-top: 1px solid var(--mj-border-subtle);
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.trpg-chat-input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: 14px;
    resize: none;
    font-family: inherit;
    min-height: 60px;
}

.trpg-chat-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(153, 102, 105, 0.2);
}

.trpg-send-btn {
    padding: 12px 30px;
    background: var(--mj-color-primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-end;
}

.trpg-send-btn:hover {
    background: #8a5d5d;
    transform: translateY(-2px);
    box-shadow: var(--mj-shadow-soft-sm);
}

.trpg-send-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 地点卡片 */
.location-card {
    transition: all 0.2s;
}

.location-card:hover {
    transform: translateX(3px);
    box-shadow: var(--mj-shadow-soft-sm);
}

/* 道具卡片 */
.inventory-item {
    transition: all 0.2s;
}

.inventory-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--mj-shadow-soft-sm);
}

/* 任务选择卡片 - 样式已在统一卡片基础样式中定义 */

/* 骰子判定弹窗 */
.trpg-dice-content {
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    padding: 40px;
    box-shadow: var(--mj-shadow-soft);
    text-align: center;
    max-width: 400px;
}

.trpg-dice-content h2 {
    margin: 0 0 30px 0;
    font-size: 28px;
}

.dice-display {
    margin: 30px 0;
}

.dice-number {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: #000;
    color: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    font-weight: bold;
    font-family: monospace;
    animation: dice-roll-animation 0.5s ease;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
}

@keyframes dice-roll-animation {
    0%, 100% {
        transform: rotateY(0deg) scale(1);
    }
    25% {
        transform: rotateY(90deg) scale(0.8);
    }
    50% {
        transform: rotateY(180deg) scale(1.1);
    }
    75% {
        transform: rotateY(270deg) scale(0.9);
    }
}

.dice-total, .dice-difficulty {
    margin: 15px 0;
    font-size: 18px;
    color: #333;
}

.dice-outcome {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
    padding: 15px;
    border-radius: 10px;
    background: #f0f0f0;
    border: 2px solid #000;
}

.dice-result {
    animation: dice-result-pulse 0.6s ease;
}

@keyframes dice-result-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.critical-success {
    background: #4CAF50 !important;
    color: #fff !important;
    animation: critical-success-flash 0.8s ease;
}

.critical-failure {
    background: #F44336 !important;
    color: #fff !important;
    animation: critical-failure-shake 0.6s ease;
}

@keyframes critical-success-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

@keyframes critical-failure-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px) rotate(-5deg);
    }
    75% {
        transform: translateX(10px) rotate(5deg);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .trpg-container {
        width: 100%;
        height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
        box-shadow: none;
    }

    /* V2布局移动端：保持左侧导航但变窄 */
    .trpg-sidebar-nav {
        width: 50px;
        padding: 5px 0;
    }

    .trpg-sidebar-tab {
        padding: 10px 4px;
        margin: 2px 4px;
    }

    .trpg-tab-icon {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .trpg-tab-text {
        font-size: 9px;
    }

    .trpg-history-list {
        max-height: 150px;
        margin: 2px 4px;
    }

    .trpg-history-item {
        padding: 6px 8px;
        font-size: 10px;
    }

    .trpg-resource-bar {
        padding: 10px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .resource-item {
        font-size: 12px;
    }

    .stamina-bar-container {
        width: 80px;
        height: 16px;
    }

    .trpg-tab {
        padding: 12px;
        font-size: 14px;
    }

    .trpg-chat-messages {
        padding: 15px;
    }

    .trpg-chat-input-container {
        padding: 10px;
    }

    .trpg-chat-input {
        min-height: 50px;
    }

    .trpg-send-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .trpg-dice-content {
        padding: 30px 20px;
        max-width: 90%;
    }

    .dice-number {
        width: 100px;
        height: 100px;
        font-size: 50px;
    }

    .trpg-dice-content h2 {
        font-size: 24px;
    }
}

/* 滚动条样式（极简风格） */
.trpg-chat-messages::-webkit-scrollbar,
.trpg-view::-webkit-scrollbar {
    width: 6px;
}

.trpg-chat-messages::-webkit-scrollbar-track,
.trpg-view::-webkit-scrollbar-track {
    background: var(--mj-bg-level2);
    border-radius: 3px;
}

.trpg-chat-messages::-webkit-scrollbar-thumb,
.trpg-view::-webkit-scrollbar-thumb {
    background: rgba(68, 68, 68, 0.6);
    border-radius: 3px;
}

.trpg-chat-messages::-webkit-scrollbar-thumb:hover,
.trpg-view::-webkit-scrollbar-thumb:hover {
    background: rgba(68, 68, 68, 0.9);
}

/* ===== TRPG UI 组件样式 ===== */

/* 面板通用样式 */
.trpg-panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--mj-border-subtle);
    background: var(--mj-bg-level2);
}

.trpg-panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mj-text-main);
}

.trpg-empty-text {
    text-align: center;
    color: var(--mj-text-secondary);
    padding: 40px 20px;
    font-size: 14px;
}

/* 地点面板组件样式 */
.trpg-locations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
}

.trpg-location-card {
    padding: 15px;
    border: 2px solid var(--mj-border-strong);
    border-radius: 8px;
    background: var(--mj-bg-level1);
    cursor: pointer;
    transition: all 0.2s;
}

.trpg-location-card:hover:not(.locked):not(.current) {
    border-color: var(--mj-color-primary);
    background: var(--mj-bg-level2);
    transform: translateX(4px);
}

.trpg-location-card.current {
    background: var(--mj-bg-level2);
    border-color: var(--mj-color-primary);
}

.trpg-location-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

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

.trpg-location-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mj-text-main);
}

.trpg-location-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--mj-color-primary);
    color: #fff;
    border-radius: 10px;
}

.trpg-location-desc {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--mj-text-secondary);
    line-height: 1.5;
}

.trpg-location-cost {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: var(--mj-text-tertiary);
}

.trpg-location-cost .cost-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trpg-location-cost .cost-icon {
    opacity: 0.7;
}

.trpg-location-locked {
    font-size: 12px;
    color: var(--mj-text-tertiary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trpg-locked-text {
    font-weight: 500;
}

.trpg-unlock-condition {
    font-size: 11px;
    color: var(--mj-text-muted);
    font-style: italic;
}

/* 背包面板组件样式 */
.trpg-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 15px;
}

.trpg-inventory-item {
    padding: 12px;
    border: 2px solid var(--mj-border-strong);
    border-radius: 8px;
    background: var(--mj-bg-level1);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.trpg-inventory-item.usable:hover {
    border-color: var(--mj-color-primary);
    transform: translateY(-3px);
    box-shadow: var(--mj-shadow-soft-sm);
}

.trpg-inventory-item.unusable {
    opacity: 0.6;
    cursor: default;
}

.trpg-item-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border: 2px solid #888;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--mj-bg-level2);
}

.trpg-item-info {
    text-align: center;
}

.trpg-item-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--mj-text-main);
}

.trpg-item-desc {
    font-size: 11px;
    color: var(--mj-text-secondary);
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trpg-item-quantity {
    font-size: 12px;
    color: var(--mj-text-tertiary);
}

/* 聊天消息样式 */
.trpg-chat-message {
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 80%;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.6;
}

.trpg-chat-message.user {
    background: var(--mj-color-primary);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.trpg-chat-message.assistant {
    background: var(--mj-bg-level2);
    color: var(--mj-text-main);
    border-bottom-left-radius: 4px;
}

.trpg-chat-message.system {
    background: var(--mj-bg-level3);
    color: var(--mj-text-secondary);
    font-size: 13px;
    text-align: center;
    margin: 10px auto;
    max-width: 90%;
    border-radius: 6px;
}

/* GM思考中提示样式 - 与任务加载提示字体大小一致 */
.trpg-chat-message.trpg-thinking-message {
    font-size: 14px;
}

/* 骰子弹窗组件样式 */
.trpg-dice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.trpg-dice-title {
    margin: 0 0 20px 0;
    font-size: 24px;
    color: var(--mj-text-main);
}

.trpg-dice-display {
    margin: 20px 0;
}

.trpg-dice-number {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: #000;
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    font-family: monospace;
}

.trpg-dice-total,
.trpg-dice-difficulty {
    margin: 10px 0;
    font-size: 16px;
    color: var(--mj-text-secondary);
}

.trpg-dice-outcome {
    margin-top: 15px;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--mj-bg-level2);
}

/* 任务完成弹窗组件样式 */
.trpg-result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.trpg-result-content {
    width: 90%;
    max-width: 450px;
    background: var(--mj-bg-level1);
    border: 2px solid var(--mj-border-strong);
    border-radius: 12px;
    padding: 35px;
    text-align: center;
}

.trpg-result-content.mobile {
    padding: 25px 20px;
}

.trpg-result-title {
    margin: 0 0 15px 0;
    font-size: 26px;
}

.trpg-result-message {
    margin: 0 0 20px 0;
    font-size: 15px;
    color: var(--mj-text-secondary);
    line-height: 1.6;
}

.trpg-result-stats {
    margin-bottom: 25px;
}

.trpg-stat-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--mj-bg-level2);
    border-radius: 6px;
    margin-bottom: 8px;
}

.trpg-stat-item .stat-label {
    color: var(--mj-text-secondary);
}

.trpg-stat-item .stat-value {
    font-weight: 600;
    color: var(--mj-text-main);
}

.trpg-result-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.trpg-result-continue-btn,
.trpg-result-close-btn {
    padding: 12px 28px;
    border: 2px solid var(--mj-border-strong);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.trpg-result-continue-btn {
    background: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
}

.trpg-result-continue-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.trpg-result-close-btn {
    background: #666;
    color: #fff;
    border-color: #666;
}

.trpg-result-close-btn:hover {
    background: #555;
    transform: translateY(-2px);
}

/* 资源栏时间项特殊样式 - 确保不被遮挡 */
.resource-item.time-item {
    margin-left: auto;
}

/* 移动端组件适配 */
@media (max-width: 768px) {
    .trpg-inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .trpg-inventory-item {
        padding: 10px;
    }

    .trpg-item-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .trpg-location-card {
        padding: 12px;
    }

    .trpg-chat-message {
        max-width: 85%;
        padding: 10px 14px;
    }

    .trpg-result-content {
        padding: 25px 15px;
    }

    .trpg-result-buttons {
        flex-direction: column;
    }

    .trpg-result-continue-btn,
    .trpg-result-close-btn {
        width: 100%;
    }
}

/* ===== 玩家信息收集模态框样式 ===== */

.player-info-content {
    max-width: 500px;
    width: 90%;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    box-shadow: var(--mj-shadow-soft);
}

.player-info-field {
    margin-bottom: 20px;
    text-align: left;
}

.player-info-field label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--mj-text-main);
}

.player-info-field .setting-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
}

.field-hint {
    font-size: 16px;
    color: var(--mj-text-muted);
    margin-top: 5px;
}

.birthday-selector {
    display: flex;
    gap: 10px;
}

.birthday-dropdown {
    flex: 1;
}

.identity-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.identity-btn {
    flex: 1;
    padding: 15px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 8px;
    background-color: var(--mj-bg-level1);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    box-shadow: var(--mj-shadow-soft-sm);
}

.identity-btn:hover {
    border-color: var(--mj-color-primary);
    background-color: rgba(153, 102, 105, 0.06);
}

.identity-btn.active {
    border-color: var(--mj-color-primary);
    background-color: var(--mj-color-primary);
    color: white;
    box-shadow: var(--mj-shadow-soft);
}

.identity-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.identity-label {
    font-size: 16px;
    font-weight: bold;
}

/* 错误提示 */
.error-message {
    padding: 10px;
    background-color: rgba(234, 70, 70, 0.06);
    color: rgba(180, 40, 40, 0.9);
    border: 1px solid rgba(180, 40, 40, 0.16);
    border-radius: 4px;
    margin-top: 15px;
    font-size: 16px;
}

.player-info-content .action-btn {
    padding: 12px 30px;
    font-size: 18px;
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    background-color: var(--mj-color-primary);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: var(--mj-shadow-soft-sm);
}

.player-info-content .action-btn:hover {
    background-color: #8a5d5d;
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

.player-info-content .action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 移动端适配 */
@media (max-width: 600px) {
    .player-info-content {
        max-width: 95%;
    }

    .identity-buttons {
        flex-direction: column;
    }

    .identity-btn {
        width: 100%;
    }
}

/* ==================== 多端自适应字号调整 ==================== */
/* 以 440px 屏幕为基准，正文字号 18px */

/* 小手机（< 440px）- 稍微缩小 */
@media (max-width: 439px) {
    :root {
        --mj-font-size-base: 16px;
        --mj-font-size-description: 14px;
        --mj-font-size-h1: 1.75rem;     /* 28px */
        --mj-font-size-h2: 1.3125rem;   /* 21px */
        --mj-font-size-h3: 1.09375rem;  /* 17.5px */
        --mj-font-size-h4: 0.984375rem; /* 15.75px */
        --mj-font-size-h5: 0.875rem;    /* 14px */
        --mj-font-size-h6: 0.765625rem; /* 12.25px */
        --mj-font-size-small: 0.765625rem; /* 12.25px */
    }
}

/* 手机基准（440px - 479px）- 基准 18px */
@media (min-width: 440px) and (max-width: 479px) {
    :root {
        --mj-font-size-base: 18px;
        --mj-font-size-description: 16px;
        --mj-font-size-h1: 2rem;        /* 36px */
        --mj-font-size-h2: 1.5rem;      /* 27px */
        --mj-font-size-h3: 1.25rem;     /* 22.5px */
        --mj-font-size-h4: 1.125rem;    /* 20.25px */
        --mj-font-size-h5: 1rem;        /* 18px */
        --mj-font-size-h6: 0.875rem;    /* 15.75px */
        --mj-font-size-small: 0.875rem; /* 15.75px */
    }
}

/* 手机（480px - 767px）- 稍微放大 */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --mj-font-size-base: 19px;
        --mj-font-size-description: 17px;
        --mj-font-size-h1: 2.1rem;       /* 39.9px */
        --mj-font-size-h2: 1.575rem;    /* 29.925px */
        --mj-font-size-h3: 1.3125rem;   /* 24.9375px */
        --mj-font-size-h4: 1.18125rem;  /* 22.44375px */
        --mj-font-size-h5: 1.05rem;     /* 19.95px */
        --mj-font-size-h6: 0.91875rem;  /* 17.45625px */
        --mj-font-size-small: 0.91875rem; /* 17.45625px */
    }
}

/* 平板（768px - 1199px）- 进一步放大 */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --mj-font-size-base: 20px;
        --mj-font-size-description: 18px;
        --mj-font-size-h1: 2.2rem;       /* 44px */
        --mj-font-size-h2: 1.65rem;      /* 33px */
        --mj-font-size-h3: 1.375rem;     /* 27.5px */
        --mj-font-size-h4: 1.2375rem;    /* 24.75px */
        --mj-font-size-h5: 1.1rem;       /* 22px */
        --mj-font-size-h6: 0.9625rem;    /* 19.25px */
        --mj-font-size-small: 0.9625rem; /* 19.25px */
    }
}

/* 中等屏幕（1200px - 1920px）- 继续放大 */
@media (min-width: 1200px) and (max-width: 1920px) {
    :root {
        --mj-font-size-base: 21px;
        --mj-font-size-description: 19px;
        --mj-font-size-h1: 2.3rem;       /* 48.3px */
        --mj-font-size-h2: 1.725rem;     /* 36.225px */
        --mj-font-size-h3: 1.4375rem;    /* 30.1875px */
        --mj-font-size-h4: 1.29375rem;   /* 27.16875px */
        --mj-font-size-h5: 1.15rem;      /* 24.15px */
        --mj-font-size-h6: 1.00625rem;   /* 21.13125px */
        --mj-font-size-small: 1.00625rem; /* 21.13125px */
    }
}

/* 大屏幕（> 1920px）- 最大字号 */
@media (min-width: 1921px) {
    :root {
        --mj-font-size-base: 22px;
        --mj-font-size-description: 20px;
        --mj-font-size-h1: 2.4rem;       /* 52.8px */
        --mj-font-size-h2: 1.8rem;       /* 39.6px */
        --mj-font-size-h3: 1.5rem;       /* 33px */
        --mj-font-size-h4: 1.35rem;      /* 29.7px */
        --mj-font-size-h5: 1.2rem;       /* 26.4px */
        --mj-font-size-h6: 1.05rem;      /* 23.1px */
        --mj-font-size-small: 1.05rem;   /* 23.1px */
    }
}

/* 新游戏确认/取消按钮 - 矩形按钮样式 */
#new-game-confirm-btn,
#new-game-cancel-btn {
    width: auto;
    height: auto;
    padding: 10px 20px;
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-strong);
    border-radius: 4px;
    font-size: var(--mj-font-size-base);
    font-weight: 500;
    color: var(--mj-text-main);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
    box-shadow: var(--mj-shadow-soft-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

#new-game-confirm-btn {
    background: var(--mj-color-primary);
    color: rgba(255, 255, 255, 0.9);
    border-color: var(--mj-color-primary);
}

#new-game-confirm-btn:hover {
    background: #8a5d5d;
    border-color: #8a5d5d;
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

#new-game-confirm-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#new-game-cancel-btn:hover {
    background: var(--mj-bg-level2);
    transform: translateY(-1px);
    box-shadow: var(--mj-shadow-soft);
}

#new-game-cancel-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#new-game-confirm-btn:disabled,
#new-game-cancel-btn:disabled {
    background: var(--mj-bg-level2);
    color: var(--mj-text-muted);
    border-color: var(--mj-border-subtle);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ===== TRPG 任务选择界面 - 全屏布局（与游戏界面风格统一） ===== */
.trpg-mission-select-fullscreen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mj-bg-level1);
    z-index: 9999;
    font-family: '江城圆体', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.trpg-mission-main {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--mj-bg-level1);
}

/* 左侧导航栏 - 使用与游戏界面相同的样式 */
.trpg-mission-sidebar {
    width: 180px;
    min-width: 180px;
    background: var(--mj-bg-level2);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mj-border-subtle);
}

.trpg-sidebar-header {
    padding: 20px;
    background: var(--mj-color-primary);
    text-align: center;
}

.trpg-sidebar-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.trpg-nav-menu {
    flex: 1;
    padding: 10px 0;
    overflow-y: auto;
}

.trpg-nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--mj-text-secondary);
    background: transparent;
}

.trpg-nav-item:hover {
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
}

.trpg-nav-item.active {
    background: var(--mj-color-primary);
    color: #fff;
}

.trpg-nav-text {
    font-size: 14px;
}

/* 右侧内容区 - 使用游戏界面的配色 */
.trpg-mission-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--mj-bg-level1);
    overflow: hidden;
}

.trpg-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: var(--mj-color-primary);
    color: #fff;
}

.trpg-content-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.trpg-mission-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #fff;
}

.trpg-mission-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* 任务列表容器 */
.trpg-mission-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--mj-bg-level1);
}

.trpg-mission-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 任务卡片 - 简洁设计 */
.trpg-mission-card {
    display: flex;
    background: var(--mj-bg-level2);
    border: 2px solid var(--mj-border-subtle);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.trpg-mission-card:hover {
    border-color: var(--mj-color-primary);
    box-shadow: 0 4px 15px rgba(153, 102, 105, 0.2);
    transform: translateY(-2px);
}

.trpg-mission-card:hover .trpg-mission-arrow {
    color: var(--mj-color-primary);
}

.trpg-mission-info {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.trpg-mission-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.trpg-mission-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mj-text-main);
    line-height: 1.3;
}

.trpg-mission-tags {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 10px;
}

.trpg-tag {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.trpg-tag-new {
    background: #ff4757;
    color: #fff;
}

.trpg-tag-hot {
    background: #ffa502;
    color: #fff;
}

.trpg-mission-desc {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--mj-text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trpg-mission-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    color: var(--mj-text-muted);
}

.trpg-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trpg-meta-label {
    color: var(--mj-text-muted);
}

.trpg-meta-value {
    color: var(--mj-text-secondary);
}

.trpg-mission-arrow {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mj-text-muted);
    font-size: 24px;
    font-weight: 300;
    transition: color 0.2s;
}

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

.trpg-empty-title {
    font-size: 18px;
    margin: 0 0 10px 0;
    color: var(--mj-text-secondary);
}

.trpg-empty-desc {
    font-size: 14px;
    margin: 0;
    color: var(--mj-text-muted);
}

/* 加载遮罩 */
.trpg-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.trpg-loading-overlay.visible {
    display: flex;
}

.trpg-loading-content {
    text-align: center;
}

.trpg-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--mj-border-subtle);
    border-top-color: var(--mj-color-primary);
    border-radius: 50%;
    animation: trpg-spin 0.8s linear infinite;
    margin: 0 auto 20px;
}

@keyframes trpg-spin {
    to {
        transform: rotate(360deg);
    }
}

.trpg-loading-text {
    font-size: 16px;
    color: var(--mj-text-secondary);
    margin: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .trpg-mission-sidebar {
        width: 60px;
        min-width: 60px;
    }

    .trpg-sidebar-header {
        padding: 15px 10px;
    }

    .trpg-sidebar-title {
        font-size: 12px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

    .trpg-nav-item {
        padding: 12px 10px;
        justify-content: center;
    }

    .trpg-nav-text {
        font-size: 12px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

    .trpg-content-header {
        padding: 12px 15px;
    }

    .trpg-content-title {
        font-size: 16px;
    }

    .trpg-mission-close-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .trpg-mission-list-container {
        padding: 10px;
    }

    .trpg-mission-list {
        gap: 10px;
    }

    .trpg-mission-card {
        border-radius: 8px;
    }

    .trpg-mission-info {
        padding: 12px 15px;
    }

    .trpg-mission-title {
        font-size: 15px;
    }

    .trpg-mission-desc {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .trpg-mission-meta {
        gap: 10px;
        font-size: 11px;
    }

    .trpg-mission-arrow {
        width: 30px;
        font-size: 18px;
    }
}

/* 极窄屏幕适配 */
@media (max-width: 480px) {
    .trpg-mission-sidebar {
        width: 50px;
        min-width: 50px;
    }

    .trpg-sidebar-title {
        font-size: 11px;
    }

    .trpg-nav-text {
        font-size: 11px;
    }
}

/* 任务卡片更多按钮 */
.trpg-mission-title-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* 收藏按钮样式 */
.trpg-mission-fav-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trpg-mission-fav-btn:hover {
    transform: scale(1.15);
}

.trpg-mission-more-btn {
    background: none;
    border: none;
    color: var(--mj-text-muted);
    font-size: 16px;
    font-weight: bold;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    flex-shrink: 0;
}

.trpg-mission-more-btn:hover {
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
}

.trpg-mission-card.expanded .trpg-mission-more-btn {
    background: var(--mj-color-primary);
    color: #fff;
}

/* 任务卡片展开状态 */
.trpg-mission-card.expanded {
    flex-direction: column;
    border-color: var(--mj-color-primary);
}

.trpg-mission-card.expanded .trpg-mission-arrow {
    display: none;
}

/* 详情面板 */
.trpg-mission-detail-panel {
    background: var(--mj-bg-level1);
    border-top: 1px solid var(--mj-border-subtle);
    padding: 15px 20px;
}

.trpg-detail-content {
    margin-bottom: 15px;
}

.trpg-detail-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.trpg-detail-row.trpg-detail-info {
    align-items: flex-start;
    flex-direction: column;
}

.trpg-detail-label {
    color: var(--mj-text-muted);
    width: 60px;
    flex-shrink: 0;
}

.trpg-detail-value {
    color: var(--mj-text-secondary);
}

.trpg-detail-separator {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--mj-border-subtle);
    margin: 0 12px;
    vertical-align: middle;
}

.trpg-detail-info-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--mj-text-muted);
    margin-top: 4px;
    width: 100%;
}

.trpg-detail-id {
    font-family: monospace;
    background: var(--mj-bg-level2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* 详情操作栏 */
.trpg-detail-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px dashed var(--mj-border-subtle);
}

.trpg-detail-delete-btn {
    background: #fff;
    border: 1px solid #ff4757;
    color: #ff4757;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.trpg-detail-delete-btn:hover {
    background: #ff4757;
    color: #fff;
}


.trpg-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.trpg-confirm-dialog {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.trpg-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.trpg-confirm-message {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.trpg-confirm-warning {
    color: #ff4757;
    font-size: 12px;
}

.trpg-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.trpg-confirm-cancel {
    background: #f0f0f0;
    border: none;
    color: #666;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.trpg-confirm-cancel:hover {
    background: #e0e0e0;
}

.trpg-confirm-delete {
    background: #ff4757;
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.trpg-confirm-delete:hover {
    background: #ee3545;
}

/* 收藏星标图片样式 */
.trpg-fav-star-icon {
    width: 20px;
    height: 20px;
    transition: all 0.2s;
}

/* 侧边栏底部 - 清除历史记录按钮 */
.trpg-sidebar-footer {
    padding: 15px;
    border-top: 1px solid var(--mj-border-subtle);
    margin-top: auto;
}

.trpg-clear-history-btn {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--mj-border-subtle);
    border-radius: 6px;
    color: var(--mj-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.trpg-clear-history-btn:hover {
    background: rgba(255, 71, 87, 0.1);
    border-color: #ff4757;
    color: #ff4757;
}

/* Toast 提示样式 */
.trpg-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
}

.trpg-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 恢复上一次进度按钮 */
.trpg-resume-last-btn {
    width: 100%;
    padding: 10px 12px;
    background: var(--mj-color-primary);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
    display: block;  /* 始终显示 */
}

.trpg-resume-last-btn:hover:not(:disabled) {
    background: #8a5d5d;
    transform: translateY(-1px);
}

.trpg-resume-last-btn:disabled,
.trpg-resume-last-btn.disabled {
    background: var(--mj-bg-level2);
    color: var(--mj-text-muted);
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* API错误弹窗样式 */
.api-error-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    pointer-events: auto;
    animation: fadeIn 0.2s ease;
}

.api-error-content {
    background: var(--mj-bg-level1);
    border: 1px solid var(--mj-border-subtle);
    border-radius: 12px;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.api-error-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mj-border-subtle);
    display: flex;
    align-items: center;
    gap: 10px;
}

.api-error-header .error-icon {
    width: 24px;
    height: 24px;
    background: #ff6b6b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.api-error-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mj-text-main);
}

.api-error-body {
    padding: 16px 20px;
    max-height: 300px;
    overflow-y: auto;
}

.api-error-summary {
    font-size: 14px;
    color: var(--mj-text-main);
    margin-bottom: 8px;
    line-height: 1.5;
    font-weight: 500;
}

.api-error-hint {
    font-size: 13px;
    color: var(--mj-text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.api-error-details-label {
    font-size: 12px;
    color: var(--mj-text-muted);
    margin-bottom: 6px;
}

.api-error-details {
    background: var(--mj-bg-level2);
    border-radius: 8px;
    padding: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--mj-text-secondary);
    word-break: break-all;
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--mj-border-subtle);
    line-height: 1.4;
}

.api-error-details::-webkit-scrollbar {
    width: 6px;
}

.api-error-details::-webkit-scrollbar-track {
    background: transparent;
}

.api-error-details::-webkit-scrollbar-thumb {
    background: var(--mj-border-strong);
    border-radius: 3px;
}

.api-error-footer {
    padding: 12px 20px 16px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.api-error-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--mj-border-strong);
}

.api-error-btn.primary {
    background: var(--mj-text-main);
    color: var(--mj-bg-level1);
    border-color: var(--mj-text-main);
}

.api-error-btn.primary:hover {
    opacity: 0.9;
}

.api-error-btn.secondary {
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
}

.api-error-btn.secondary:hover {
    background: var(--mj-bg-level2);
}

/* ============================================
   MJ 面板布局系统 - QQ风格暖色主题
   ============================================ */

/* 模态框遮罩 - 奶油毛玻璃效果 */
.modal {
    background: rgba(242, 236, 224, 0.6) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* --- 面板基础样式 --- */
.mj-settings-panel {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--mj-bg-level1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
}

/* 面板头部 */
.mj-settings-panel > .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    background: linear-gradient(135deg, rgba(153, 102, 105, 0.06), rgba(153, 102, 105, 0.02)) !important;
    border-bottom: 1px solid rgba(153, 102, 105, 0.1) !important;
    flex-shrink: 0 !important;
    position: static !important;
}

.mj-settings-panel > .modal-header h2 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--mj-text-main) !important;
    text-align: left !important;
}

.mj-settings-panel .close-btn {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--mj-text-muted) !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
    line-height: 32px !important;
}

.mj-settings-panel .close-btn:hover {
    background: rgba(153, 102, 105, 0.08) !important;
    color: var(--mj-color-primary) !important;
    transform: none !important;
}

/* 面板内 modal-body 滚动条 */
.mj-settings-panel .modal-body::-webkit-scrollbar,
.mj-panel-content::-webkit-scrollbar {
    width: 5px;
}

.mj-settings-panel .modal-body::-webkit-scrollbar-track,
.mj-panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.mj-settings-panel .modal-body::-webkit-scrollbar-thumb,
.mj-panel-content::-webkit-scrollbar-thumb {
    background: rgba(153, 102, 105, 0.15);
    border-radius: 3px;
}

.mj-settings-panel .modal-body::-webkit-scrollbar-thumb:hover,
.mj-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(153, 102, 105, 0.3);
}

/* --- 侧边栏布局容器 --- */
.mj-panel-body {
    display: flex !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.mj-panel-sidebar {
    width: 140px;
    min-width: 140px;
    background: rgba(153, 102, 105, 0.03);
    border-right: 1px solid rgba(153, 102, 105, 0.08);
    padding: 14px 8px;
    overflow-y: auto;
    flex-shrink: 0;
}

.mj-panel-sidebar::-webkit-scrollbar {
    width: 3px;
}

.mj-panel-sidebar::-webkit-scrollbar-thumb {
    background: rgba(153, 102, 105, 0.2);
    border-radius: 3px;
}

.mj-panel-content {
    flex: 1;
    padding: 24px 20px;
    overflow-y: auto;
    min-width: 0;
}

/* --- 侧边栏子项 --- */
.mj-sidebar-group {
    margin-bottom: 20px;
}

.mj-sidebar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mj-text-muted);
    letter-spacing: 0.5px;
    padding: 0 8px 8px;
}

.mj-sidebar-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 2px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mj-text-main);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    box-shadow: none;
    min-width: unset;
}

.mj-sidebar-item:hover {
    background: rgba(153, 102, 105, 0.06);
    transform: none;
    box-shadow: none;
}

.mj-sidebar-item.active,
.mj-sidebar-item.mode-btn.active {
    background: rgba(153, 102, 105, 0.1) !important;
    color: var(--mj-color-primary) !important;
    font-weight: 600;
    border-color: transparent !important;
}

.mj-sidebar-item.preset-btn {
    font-size: 12px;
    padding: 7px 12px;
    color: var(--mj-text-muted);
    font-weight: 400;
    border: none;
    background: transparent;
    box-shadow: none;
}

.mj-sidebar-item.preset-btn:hover {
    background: rgba(153, 102, 105, 0.06);
    color: var(--mj-color-primary);
    transform: none;
    box-shadow: none;
}

/* --- 面板按钮 --- */
.mj-panel-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(153, 102, 105, 0.08);
}

.mj-btn-primary {
    padding: 10px 24px;
    background: var(--mj-color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(153, 102, 105, 0.2);
}

.mj-btn-primary:hover {
    background: #8a5d5d;
    box-shadow: 0 4px 12px rgba(153, 102, 105, 0.3);
    transform: translateY(-1px);
}

.mj-btn-secondary {
    padding: 10px 24px;
    background: transparent;
    color: var(--mj-color-primary);
    border: 1px solid rgba(153, 102, 105, 0.25);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mj-btn-secondary:hover {
    background: rgba(153, 102, 105, 0.05);
    border-color: var(--mj-color-primary);
}

/* ============================================
   云端AI设置面板 - 覆盖全屏为面板
   ============================================ */
/* 云端AI面板 - 全屏由基类处理 */

/* 面板内 setting-group */
.mj-panel-content .setting-group {
    margin-bottom: 18px;
}

.mj-panel-content .setting-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mj-text-main);
    margin-bottom: 6px;
}

.mj-panel-content .setting-input {
    padding: 10px 14px;
    border: 1px solid rgba(153, 102, 105, 0.15);
    border-radius: 10px;
    font-size: 14px;
    background: var(--mj-bg-level1);
    transition: all 0.15s ease;
}

.mj-panel-content .setting-input:focus {
    border-color: rgba(153, 102, 105, 0.4);
    box-shadow: 0 0 0 3px rgba(153, 102, 105, 0.08);
}

.mj-panel-content .current-value {
    font-size: 11px;
    color: var(--mj-text-muted);
    margin-top: 4px;
}

/* 面板内 action-btn 覆盖 */
.mj-panel-content .action-btn {
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--mj-color-primary) !important;
    border: 1px solid rgba(153, 102, 105, 0.25) !important;
    box-shadow: none !important;
    flex-direction: row !important;
}

.mj-panel-content .action-btn:hover {
    background: rgba(153, 102, 105, 0.05) !important;
    border-color: var(--mj-color-primary) !important;
    transform: none !important;
}

/* info-text */
.mj-panel-content .info-text,
.mj-panel-content .server-model-info .info-text {
    font-size: 12px;
    color: var(--mj-text-muted);
    line-height: 1.6;
}

.mj-panel-content .info-text a {
    color: var(--mj-color-primary);
    text-decoration: none;
}

.mj-panel-content .info-text a:hover {
    text-decoration: underline;
}

/* select 样式 */
.mj-panel-content select.setting-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23996669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* 测试结果 */
.mj-panel-content .test-result {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}

/* 注册链接 */
.mj-panel-content .registration-link {
    color: var(--mj-color-primary) !important;
    font-size: 13px;
}

/* ============================================
   面板通用样式
   ============================================ */
/* 面板 - 全屏由基类处理 */

.mj-panel-content .api-info {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(153, 102, 105, 0.03);
    border: 1px solid rgba(153, 102, 105, 0.06);
    border-radius: 10px;
}

/* 本地嵌入模型区域 */
.mj-panel-content .local-model-info {
    background: rgba(153, 102, 105, 0.04);
    border: 1px solid rgba(153, 102, 105, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.mj-panel-content .local-model-info h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mj-text-main);
}

.mj-panel-content .local-model-info p {
    margin: 0;
    font-size: 13px;
    color: var(--mj-text-muted);
}

.mj-panel-content .local-info {
    margin-top: 12px;
}

/* 下载进度条 */
.mj-panel-content .progress-bar,
.mj-panel-content .progress-bar-container .progress-bar {
    background: rgba(153, 102, 105, 0.08);
    border-radius: 8px;
    overflow: hidden;
    height: 8px;
}

.mj-panel-content .progress-fill,
.mj-panel-content #download-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mj-color-primary), #b88a8a);
    border-radius: 8px;
    transition: width 0.3s ease;
}

.mj-panel-content .progress-text {
    font-size: 12px;
    color: var(--mj-text-muted);
    margin-top: 4px;
}

/* cancel 按钮 */
.mj-panel-content .cancel-btn {
    background: transparent !important;
    color: #c75050 !important;
    border-color: rgba(199, 80, 80, 0.3) !important;
}

.mj-panel-content .cancel-btn:hover {
    background: rgba(199, 80, 80, 0.05) !important;
    border-color: #c75050 !important;
}

/* server-model-info */
.mj-panel-content .server-model-info {
    background: rgba(153, 102, 105, 0.03);
    border: 1px solid rgba(153, 102, 105, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

/* ============================================
   本地AI模型面板
   ============================================ */
/* 本地AI面板 - 全屏由基类处理 */

.mj-settings-panel .local-ai-settings-body {
    padding: 24px 20px;
    flex: 1;
    overflow-y: auto;
}

.mj-settings-panel .current-model-section {
    background: rgba(153, 102, 105, 0.04);
    border: 1px solid rgba(153, 102, 105, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.mj-settings-panel .current-model-section h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--mj-text-muted);
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mj-settings-panel #current-local-model {
    font-size: 18px;
    font-weight: 600;
    color: var(--mj-color-primary);
}

.mj-settings-panel .model-management-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.mj-settings-panel .list-models-btn {
    padding: 8px 16px;
    background: transparent;
    color: var(--mj-color-primary);
    border: 1px solid rgba(153, 102, 105, 0.25);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mj-settings-panel .list-models-btn:hover {
    background: rgba(153, 102, 105, 0.05);
    border-color: var(--mj-color-primary);
}

.mj-settings-panel .model-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--mj-bg-level1);
    border: 1px solid rgba(153, 102, 105, 0.08);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.15s ease;
}

.mj-settings-panel .model-item:hover {
    border-color: rgba(153, 102, 105, 0.2);
    box-shadow: 0 2px 8px rgba(153, 102, 105, 0.06);
}

.mj-settings-panel .model-name {
    font-weight: 600;
    color: var(--mj-text-main);
    font-size: 14px;
}

.mj-settings-panel .model-description {
    font-size: 12px;
    color: var(--mj-text-muted);
    margin-top: 2px;
}

.mj-settings-panel .download-model-btn {
    padding: 6px 14px;
    background: var(--mj-color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mj-settings-panel .download-model-btn:hover {
    background: #8a5d5d;
}

.mj-settings-panel #save-local-model-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    background: var(--mj-color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mj-settings-panel #save-local-model-btn:hover {
    background: #8a5d5d;
}

.mj-settings-panel #cancel-download-btn {
    padding: 6px 14px;
    background: transparent;
    color: #c75050;
    border: 1px solid rgba(199, 80, 80, 0.3);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 8px;
}

.mj-settings-panel #cancel-download-btn:hover {
    background: rgba(199, 80, 80, 0.05);
    border-color: #c75050;
}

.mj-settings-panel .status-message {
    font-size: 13px;
    color: var(--mj-text-muted);
    padding: 8px 0;
}

.mj-settings-panel h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--mj-text-main);
    margin: 16px 0 10px;
}

/* ============================================
   游戏设置面板
   ============================================ */
/* 游戏设置面板 - 全屏由基类处理 */

/* 设置面板标题 */
.settings-pane-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--mj-text-main);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(153, 102, 105, 0.1);
}

.mj-settings-panel.settings-modal-content .setting-item {
    border-radius: 10px;
    border: 1px solid rgba(153, 102, 105, 0.06);
    background: rgba(153, 102, 105, 0.02);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: all 0.15s ease;
    flex-wrap: wrap;
}

.mj-settings-panel.settings-modal-content .setting-item:hover {
    background: rgba(153, 102, 105, 0.04);
    border-color: rgba(153, 102, 105, 0.12);
}

.mj-settings-panel.settings-modal-content .setting-description {
    flex-basis: 100%;
    margin-top: 6px;
    font-size: 12px;
    color: var(--mj-text-muted);
}

.mj-settings-panel .toggle-container {
    flex: 0 0 auto;
}

.mj-settings-panel .toggle-label {
    min-width: 44px;
    max-width: 44px;
    flex-shrink: 0;
}

/* 设置面板 - 底部操作按钮已移至 mj-panel-actions */

/* toggle 开关美化 */
.mj-settings-panel .toggle-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: rgba(153, 102, 105, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mj-settings-panel .toggle-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.mj-settings-panel .toggle-checkbox:checked + .toggle-label {
    background: var(--mj-color-primary);
}

.mj-settings-panel .toggle-checkbox:checked + .toggle-label::after {
    left: 22px;
}

.mj-settings-panel .toggle-checkbox {
    display: none;
}

/* volume slider */
.mj-settings-panel .volume-slider::-webkit-slider-thumb {
    background: var(--mj-color-primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(153, 102, 105, 0.3);
}

/* backup/restore buttons */
.mj-settings-panel .backup-btn,
.mj-settings-panel .restore-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid rgba(153, 102, 105, 0.25);
    background: transparent;
    color: var(--mj-color-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mj-settings-panel .backup-btn:hover,
.mj-settings-panel .restore-btn:hover {
    background: rgba(153, 102, 105, 0.05);
    border-color: var(--mj-color-primary);
}

/* ============================================
   模型下拉列表美化
   ============================================ */
.mj-panel-content .model-dropdown {
    border: 1px solid rgba(153, 102, 105, 0.15);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 16px rgba(140, 90, 90, 0.1);
}

.mj-panel-content .model-list-item:hover {
    background: rgba(153, 102, 105, 0.06);
}

/* ============================================
   服务端登录弹窗美化
   ============================================ */
#server-login-required-modal .modal-content {
    border-radius: 16px;
    border: 1px solid rgba(153, 102, 105, 0.12);
    box-shadow: 0 8px 40px rgba(140, 90, 90, 0.12);
}

/* ============================================
   Android移动端侧边栏适配
   ============================================ */
@media (max-width: 600px) {
    .mj-panel-body {
        flex-direction: column !important;
    }
    .mj-panel-sidebar {
        width: 100%;
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid rgba(153, 102, 105, 0.08);
        padding: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow-y: visible;
    }
    .mj-sidebar-group {
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }
    .mj-sidebar-label {
        padding: 0 4px;
        margin-bottom: 0;
        font-size: 11px;
        width: auto;
    }
    .mj-sidebar-item {
        display: inline-block;
        width: auto;
        padding: 6px 12px;
        font-size: 12px;
    }
    .mj-panel-content {
        padding: 16px;
    }
}

/* ============================================
   账号面板全屏 - 内容居中
   ============================================ */
.mj-settings-panel.account-modal-content .account-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
    display: flex;
    justify-content: center;
}

.mj-settings-panel.account-modal-content .account-view {
    width: 100%;
    max-width: 480px;
}

/* ============================================
   记忆浏览器
   ============================================ */
.memory-viewer-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mj-border-subtle);
}

.memory-viewer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mj-text-main);
    margin: 0 0 14px 0;
}

.memory-viewer-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.memory-filter-select {
    padding: 7px 12px;
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    font-size: 13px;
    outline: none;
    cursor: pointer;
    min-width: 100px;
}

.memory-filter-select:focus {
    border-color: var(--mj-color-primary);
}

.memory-search-input {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--mj-border-subtle);
    border-radius: 8px;
    background: var(--mj-bg-level1);
    color: var(--mj-text-main);
    font-size: 13px;
    outline: none;
}

.memory-search-input:focus {
    border-color: var(--mj-color-primary);
}

.memory-search-btn {
    padding: 7px 16px;
    background: var(--mj-color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.memory-search-btn:hover {
    opacity: 0.85;
}

.memory-stats-bar {
    font-size: 12px;
    color: var(--mj-text-muted);
    margin-bottom: 8px;
    min-height: 18px;
}

.memory-list-container {
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.memory-list-container::-webkit-scrollbar {
    width: 4px;
}

.memory-list-container::-webkit-scrollbar-thumb {
    background: rgba(153, 102, 105, 0.2);
    border-radius: 2px;
}

.memory-empty-hint,
.memory-loading {
    text-align: center;
    color: var(--mj-text-muted);
    padding: 40px 0;
    font-size: 13px;
}

.memory-card {
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid rgba(153, 102, 105, 0.08);
    border-radius: 10px;
    background: rgba(153, 102, 105, 0.02);
    transition: all 0.2s ease;
}

.memory-card:hover {
    border-color: rgba(153, 102, 105, 0.18);
    background: rgba(153, 102, 105, 0.04);
}

.memory-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.memory-card-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.memory-type-entity {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.memory-type-event {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.memory-type-concept {
    background: rgba(147, 51, 234, 0.1);
    color: #9333ea;
}

.memory-card-event-time {
    font-size: 11px;
    color: var(--mj-color-primary);
    opacity: 0.8;
}

.memory-card-time {
    font-size: 11px;
    color: var(--mj-text-muted);
    margin-left: auto;
}

.memory-card-content {
    font-size: 13px;
    color: var(--mj-text-main);
    line-height: 1.6;
    word-break: break-word;
}

.memory-card-expand {
    font-size: 12px;
    color: var(--mj-color-primary);
    text-decoration: none;
    cursor: pointer;
}

.memory-card-expand:hover {
    text-decoration: underline;
}

.memory-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.memory-edge-btn,
.memory-delete-btn {
    padding: 3px 10px;
    font-size: 11px;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
}

.memory-edge-btn {
    color: var(--mj-color-primary);
    border: 1px solid rgba(153, 102, 105, 0.2);
    margin-right: 6px;
}

.memory-delete-btn {
    color: #c75050;
    border: 1px solid rgba(199, 80, 80, 0.2);
}

.memory-card:hover .memory-edge-btn,
.memory-card:hover .memory-delete-btn {
    opacity: 1;
}

.memory-edge-btn:hover {
    background: rgba(153, 102, 105, 0.06);
    border-color: rgba(153, 102, 105, 0.35);
}

.memory-delete-btn:hover {
    background: rgba(199, 80, 80, 0.08);
    border-color: rgba(199, 80, 80, 0.4);
}

/* 关联边面板 */
.memory-edge-panel {
    margin-top: 10px;
    padding: 10px 12px;
    border-top: 1px dashed rgba(153, 102, 105, 0.15);
    animation: memoryEdgeFadeIn 0.2s ease;
}

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

.memory-edge-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--mj-text-main);
    margin-bottom: 8px;
}

.memory-edge-loading,
.memory-edge-empty {
    font-size: 12px;
    color: var(--mj-text-muted);
    text-align: center;
    padding: 8px 0;
}

.memory-edge-graph {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.memory-edge-row {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 12px;
    line-height: 1.4;
}

.memory-edge-node {
    padding: 3px 8px;
    border-radius: 5px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.memory-edge-self {
    background: rgba(153, 102, 105, 0.1);
    color: var(--mj-color-primary);
    font-weight: 500;
}

.memory-edge-other {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    flex-shrink: 1;
    min-width: 0;
}

.memory-edge-arrow {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 60px;
    padding: 0 4px;
}

.memory-edge-line {
    flex: 1;
    height: 1px;
    background: rgba(153, 102, 105, 0.25);
    min-width: 8px;
}

.memory-edge-relation {
    padding: 1px 6px;
    font-size: 10px;
    color: var(--mj-text-muted);
    background: rgba(153, 102, 105, 0.05);
    border: 1px solid rgba(153, 102, 105, 0.12);
    border-radius: 3px;
    white-space: nowrap;
}

.memory-edge-dir {
    font-size: 13px;
    color: rgba(153, 102, 105, 0.5);
    margin-left: -2px;
}

.memory-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
}

.memory-page-btn {
    padding: 5px 14px;
    font-size: 12px;
    color: var(--mj-color-primary);
    background: transparent;
    border: 1px solid rgba(153, 102, 105, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.memory-page-btn:hover:not(:disabled) {
    background: rgba(153, 102, 105, 0.06);
    border-color: rgba(153, 102, 105, 0.35);
}

.memory-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.memory-page-info {
    font-size: 12px;
    color: var(--mj-text-main);
    min-width: 80px;
    text-align: center;
}

.memory-total-info {
    font-size: 12px;
    color: var(--mj-text-muted);
}