/* 全局样式 - 微信风格 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    body {
        background: var(--bg-soft);
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        transition: background 0.3s ease;
    }

    body.dark {
        background: #1a1a1a;
    }

    /* 主容器 */
    .chat-container {
        width: 100%;
        max-width: 1000px;
        height: 90vh;
        background: white;
        border-radius: 32px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: background 0.3s, box-shadow 0.3s;
        position: relative;
    }

    body.dark .chat-container {
        background: #2c2c2c;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    /* 头部 */
    .chat-header {
        padding: 16px 24px;
        background: #ffffff;
        border-bottom: 1px solid var(--bg-soft);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.3s, border-color 0.3s;
        flex-wrap: nowrap;
        gap: 8px;
        position: relative;
    }

    body.dark .chat-header {
        background: var(--text-1);
        border-bottom-color: #444;
    }

    .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .header-title {
        font-size: 1.25rem;
        font-weight: normal;
        color: var(--text-1);
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        min-width: 0;
    }

    .header-title .dynamic-phrase {
        background: transparent;
        padding: 4px 12px;
        border-radius: 30px;
        font-size: 1.25rem;
        color: #444;
        transition: all 0.3s;
        font-weight: normal;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    body.dark .header-title .dynamic-phrase {
        background: transparent;
        color: #ccc;
    }

    /* 汉堡菜单按钮（移动端） */
    .menu-toggle {
        background: var(--bg-soft);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.3rem;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        color: var(--text-1);
        transition: background 0.2s;
        flex-shrink: 0;
    }

    body.dark .menu-toggle {
        background: #444;
        color: #eee;
    }

    .menu-toggle:hover {
        background: var(--bg-muted);
    }

    /* 更多按钮 */
    .more-menu-btn {
        background: var(--bg-soft);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 1.3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-1);
        transition: background 0.2s;
        flex-shrink: 0;
    }

    body.dark .more-menu-btn {
        background: #444;
        color: #eee;
    }

    .more-menu-btn:hover {
        background: var(--bg-muted);
    }

    /* 下拉菜单 */
    .dropdown-menu {
        display: none;
        position: fixed;
        background: var(--menu-bg);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        width: max-content;
        min-width: 150px;
        max-width: min(200px, 85vw);
        overflow: hidden;
        z-index: 2000;
        flex-direction: column;
    }

    body.dark .dropdown-menu {
        background: var(--menu-bg);
        color: var(--text-1);
    }

    .dropdown-menu.active {
        display: flex;
    }

    .dropdown-item {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: background 0.2s;
        font-size: 1rem;
        color: var(--text-1);
        border-bottom: 1px solid var(--bg-soft);
    }

    body.dark .dropdown-item {
        color: #eee;
        border-bottom-color: #444;
    }

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

    .dropdown-item:hover {
        background: var(--bg-soft);
    }

    body.dark .dropdown-item:hover {
        background: #4a4a4a;
    }

    .dropdown-item i {
        width: 20px;
        text-align: center;
        color: var(--success);
    }

    .dropdown-item.danger {
        color: var(--danger);
    }

    .dropdown-item.danger i {
        color: var(--danger);
    }

    /* PC端侧边栏 */
    .sidebar {
        width: 260px;
        background: #ffffff;
        border-right: 1px solid var(--bg-soft);
        display: flex;
        flex-direction: column;
        transition: width 0.3s ease, background 0.3s, border-color 0.3s;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    body.dark .sidebar {
        background: #2d2d2d;
        border-right-color: #444;
    }

    .sidebar.collapsed {
        width: 0;
    }

    .sidebar-header {
        padding: 20px 16px;
        border-bottom: 1px solid var(--bg-soft);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    body.dark .sidebar-header {
        border-bottom-color: #444;
    }

    .new-chat-btn {
        background: var(--success);
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 30px;
        font-size: 0.9rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: background 0.2s, transform 0.2s;
    }

    .new-chat-btn:hover {
        background: var(--success);
        transform: scale(1.02);
    }

    .session-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
    }

    /* 会话列表项美化 */
    .session-item {
        padding: 12px 16px;
        border-radius: 12px;
        margin-bottom: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--text-1);
        transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
        position: relative;
    }

    body.dark .session-item {
        color: #eee;
    }

    .session-item:hover {
        background: #e8f5e9;  /* 浅绿色背景 */
        transform: translateX(2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    body.dark .session-item:hover {
        background: #3a4a3a;   /* 深色模式下的悬停背景 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .session-item.active {
        background: #07c16020;  /* 主题色半透明 */
        color: var(--success);
        font-weight: 500;
        border-left: 4px solid var(--success); /* 左侧强调线 */
        box-shadow: inset 0 0 0 1px rgba(7, 193, 96, .15);
        position: relative;
        border-radius: 12px 8px 8px 12px; /* 微调圆角 */
    }

    body.dark .session-item.active {
        background: #1e4a2e;    /* 深色主题色背景 */
        color: #8bc34a;         /* 浅绿色文字 */
        border-left-color: #8bc34a;
    }

    .session-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.95rem;
        font-weight: inherit;
    }

    .session-actions {
        display: flex;
        gap: 8px;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .session-item:hover .session-actions {
        opacity: 1;
    }

    .session-actions button {
        background: rgba(0, 0, 0, 0.05);
        border: none;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        cursor: pointer;
        color: var(--text-2);
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s, color 0.2s, transform 0.1s;
    }

    body.dark .session-actions button {
        background: rgba(255, 255, 255, 0.1);
        color: #aaa;
    }

    .session-actions button:hover {
        background: var(--success);
        color: white;
        transform: scale(1.1);
    }

    .session-actions button i {
        pointer-events: none;
    }

    /* 折叠按钮 - 独立于侧边栏 */
    .sidebar-collapse-btn {
        position: absolute;
        left: 260px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: var(--bg-muted);
        border: none;
        border-radius: 50%;
        color: var(--text-2);
        font-size: 0.9rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 100;
        transition: left 0.3s ease, background 0.2s, transform 0.2s;
    }

    body.dark .sidebar-collapse-btn {
        background: #555;
        color: #ccc;
    }

    .sidebar-collapse-btn:hover {
        background: #ccc;
        transform: translateY(-50%) scale(1.1);
    }

    body.dark .sidebar-collapse-btn:hover {
        background: #777;
    }

    .sidebar.collapsed + .sidebar-collapse-btn {
        left: 0;
    }

    /* 主聊天区域 */
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        transition: background 0.3s;
        height: 100%;
        min-width: 0;
    }

    body.dark .main {
        background: #2d2d2d;
    }

    .header-actions {
        display: flex;
        gap: 10px;
    }

    .theme-toggle, .settings-btn {
        background: #f0f2f5;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;
    }

    body.dark .theme-toggle, body.dark .settings-btn {
        background: #4a4a4a;
        color: #eee;
    }

    .theme-toggle:hover, .settings-btn:hover {
        background: var(--bg-muted);
    }

    body.dark .theme-toggle:hover, body.dark .settings-btn:hover {
        background: #5a5a5a;
    }

    .messages-area {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        background: #fafafa;
    }

    body.dark .messages-area {
        background: #2a2a2a;
    }

    .message {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        animation: fadeIn 0.3s;
    }

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

    .message.user {
        flex-direction: row-reverse;
    }

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--success);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        margin: 0 12px;
        flex-shrink: 0;
    }

    .message.user .avatar {
        background: #9b59b6;
    }

    .bubble {
        max-width: 70%;
        padding: 12px 18px;
        border-radius: 18px 18px 18px 6px;
        background: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        position: relative;
        word-wrap: break-word;
        line-height: 1.5;
        transition: background 0.3s, color 0.3s;
        font-weight: 350;  /* 正常粗细，可改为300更轻盈 */
    }

    body.dark .bubble {
        background: #3a3a3a;
        color: #eee;
    }

    .message.user .bubble {
        background: var(--success);
        color: white;
        border-radius: 18px 18px 6px 18px;
    }

    .bubble .time {
        font-size: 0.7rem;
        color: #aaa;
        margin-top: 6px;
        text-align: right;
        font-weight: 350;
    }

    .message.user .bubble .time {
        color: rgba(255, 255, 255, 0.8);
    }

/* 复制按钮美化 */
.copy-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    color: #555;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, transform 0.1s, color 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 5;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bubble:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--success);
    transform: scale(1.05);
}

/* 用户消息气泡内的复制按钮（绿底） */
.message.user .copy-btn {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.message.user .copy-btn:hover {
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

/* 夜间模式下的复制按钮 */
body.dark .copy-btn {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ccc;
}

body.dark .copy-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

body.dark .message.user .copy-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    color: #eee;
}

body.dark .message.user .copy-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

    /* 输入区域美化 */
    .input-area {
        padding: 16px 24px;
        background: white;
        border-top: 1px solid var(--bg-soft);
        transition: background 0.3s, border-color 0.3s;
    }

    body.dark .input-area {
        background: var(--text-1);
        border-top-color: #444;
    }

    .input-row {
        display: flex;
        gap: 12px;
        align-items: flex-end;
    }

    #messageInput {
        flex: 1;
        padding: 12px 18px;
        border: 1px solid var(--bg-muted);
        border-radius: 20px;
        font-size: 1rem;
        outline: none;
        resize: vertical;
        min-height: 50px;
        max-height: 150px;
        background: white;
        color: var(--text-1);
        transition: border 0.2s, box-shadow 0.2s;
    }

    body.dark #messageInput {
        background: #4a4a4a;
        border-color: var(--text-2);
        color: #eee;
    }

    #messageInput:focus {
        border-color: var(--success);
        box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15);
    }

    .action-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        font-size: 1.3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s, transform 0.2s;
        flex-shrink: 0;
    }

    .send-btn {
        background: var(--success);
        color: white;
    }

    .send-btn:hover {
        background: var(--success);
        transform: scale(1.05);
    }

    .mic-btn {
        background: #4285f4;
        color: white;
    }

    .mic-btn:hover {
        background: #3367d6;
        transform: scale(1.05);
    }

    .mic-btn.listening {
        background: #ea4335;
        animation: pulse 1s infinite;
    }

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

    .upload-area {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .upload-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .upload-btn {
        background: var(--bg-soft);
        border: none;
        padding: 8px 16px;
        border-radius: 40px;
        cursor: pointer;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: background 0.2s;
    }

    body.dark .upload-btn {
        background: #4a4a4a;
        color: #eee;
    }

    .upload-btn:hover {
        background: var(--bg-muted);
    }

    body.dark .upload-btn:hover {
        background: #5a5a5a;
    }

    #uploadStatus {
        font-size: 0.8rem;
        color: var(--success);
        flex: 1;
    }

    body.dark #uploadStatus {
        color: #8bc34a;
    }

    .logout-btn {
        background: var(--danger);
        color: white;
        border: none;
        padding: 8px 18px;
        border-radius: 40px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background 0.2s;
    }

    .logout-btn:hover {
        background: #d32f2f;
    }

    .upload-progress {
        margin-top: 10px;
        padding: 0 4px;
    }
    .progress-bar {
        transition: width 0.3s ease;
    }
    .progress-text {
        font-size: 12px;
        color: var(--text-2);
        margin-top: 4px;
        text-align: center;
    }

    .hidden {
        display: none !important;
    }

    /* 登录区域 */
    .login-section {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #fafafa;
        transition: background 0.3s;
        width: 100%;
    }

    body.dark .login-section {
        background: #2a2a2a;
    }

    .login-card {
        background: white;
        padding: 36px 30px;
        border-radius: 28px;
        width: 90%;
        max-width: 380px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        text-align: center;
        transition: background 0.3s, box-shadow 0.3s;
    }

    body.dark .login-card {
        background: #3a3a3a;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .login-title {
        color: var(--text-1);
        font-size: 1.6rem;
        margin-bottom: 28px;
        font-weight: 600;
    }

    body.dark .login-title {
        color: #eee;
    }

    .login-input {
        width: 100%;
        padding: 14px 18px;
        margin: 8px 0;
        border: 1px solid var(--bg-muted);
        border-radius: 40px;
        font-size: 1rem;
        outline: none;
        transition: border 0.2s, box-shadow 0.2s;
        background: white;
        color: var(--text-1);
    }

    body.dark .login-input {
        background: #4a4a4a;
        border-color: var(--text-2);
        color: #eee;
    }

    .login-input:focus {
        border-color: var(--success);
        box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15);
    }

    .login-btn {
        background: var(--success);
        color: white;
        border: none;
        padding: 14px;
        width: 100%;
        border-radius: 40px;
        font-size: 1.1rem;
        font-weight: 600;
        margin-top: 16px;
        cursor: pointer;
        transition: background 0.2s, transform 0.2s;
    }

    .login-btn:hover {
        background: var(--success);
        transform: scale(1.02);
    }

    .register-link {
        margin-top: 20px;
        color: var(--text-2);
        cursor: pointer;
        text-decoration: underline;
        font-size: 0.95rem;
    }

    body.dark .register-link {
        color: #aaa;
    }

    .tech-support {
        text-align: right;
        font-size: 0.7rem;
        color: #aaa;
        margin-top: 20px;
    }

    /* 模态框样式美化 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 24px;
        padding: 28px;
        width: 90%;
        max-width: 400px;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    }

    body.dark .modal-content {
        background: #3a3a3a;
        color: #eee;
    }

    .modal-content h3 {
        margin-bottom: 20px;
        color: var(--success);
        font-size: 1.5rem;
    }

    .modal-content h3.black {
        color: var(--text-1);
    }

    body.dark .modal-content h3.black {
        color: #eee;
    }

    .modal-content label {
        display: block;
        text-align: left;
        font-size: 0.9rem;
        color: #555;
        margin-top: 12px;
        margin-bottom: 4px;
    }

    body.dark .modal-content label {
        color: #aaa;
    }

    .modal-content input,
    .modal-content textarea,
    .modal-content select {
        width: 100%;
        padding: 10px 14px;
        margin: 4px 0 8px;
        border: 1px solid #ddd;
        border-radius: 30px;
        font-size: 0.95rem;
        outline: none;
        transition: border 0.2s, box-shadow 0.2s;
        background: white;
        color: var(--text-1);
    }

    body.dark .modal-content input,
    body.dark .modal-content textarea,
    body.dark .modal-content select {
        background: #4a4a4a;
        border-color: var(--text-2);
        color: #eee;
    }

    .modal-content input:focus,
    .modal-content textarea:focus,
    .modal-content select:focus {
        border-color: var(--success);
        box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15);
    }

    .modal-content select:hover {
        background-color: #f9f9f9;
    }

    body.dark .modal-content select:hover {
        background-color: #555;
    }

    .modal-content .hint {
        font-size: 0.8rem;
        color: var(--text-3);
        text-align: left;
        margin-bottom: 8px;
    }

    .modal-content button {
        background: var(--success);
        color: white;
        border: none;
        padding: 12px;
        width: 100%;
        border-radius: 30px;
        font-size: 1rem;
        margin-top: 16px;
        cursor: pointer;
        transition: background 0.2s, transform 0.2s;
    }

    .modal-content button:hover {
        background: var(--success);
        transform: scale(1.02);
    }

    .modal-content .close-btn {
        background: var(--bg-muted);
        color: var(--text-1);
        margin-top: 8px;
    }

    .modal-content .close-btn:hover {
        background: #ccc;
    }

    body.dark .modal-content .close-btn {
        background: #555;
        color: #eee;
    }

    body.dark .modal-content .close-btn:hover {
        background: var(--text-2);
    }

    /* 移动端侧滑抽屉 */
    .drawer {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100%;
        background: white;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
        z-index: 2000;
        padding: 20px;
        overflow-y: auto;
    }

    body.dark .drawer {
        background: #3a3a3a;
        color: #eee;
    }

    .drawer.active {
        left: 0;
    }

    .drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1999;
        display: none;
    }

    .drawer-overlay.active {
        display: block;
    }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .drawer-close {
        background: none;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        color: var(--text-3);
        transition: color 0.2s;
    }

    .drawer-close:hover {
        color: var(--success);
    }

    .drawer .new-chat-btn {
        width: 100%;
        margin-bottom: 20px;
        justify-content: center;
    }

    .drawer .session-list {
        max-height: calc(100% - 120px);
        overflow-y: auto;
    }

/* 通用提示弹窗样式 */
.toast-content {
    width: 280px;           /* 适当缩小宽度 */
    text-align: left;       /* 内容左对齐（标题和消息均左对齐） */
    padding: 20px 25px;
    border-radius: 16px;    /* 圆角稍微调小 */
}

.toast-content h3 {
    margin: 0 0 12px 0;     /* 移除默认上下边距，只保留底部 */
    font-size: 1rem;        /* 缩小标题字体 */
    font-weight: normal;    /* 不加粗 */
    color: var(--text-1);            /* 保持原有颜色，夜间模式会覆盖 */
}

.toast-message {
    margin: 10px 0 25px 0;  /* 上下边距调整 */
    font-size: 1rem;
    color: var(--text-1);
    line-height: 1.5;
    word-wrap: break-word;
}

/* 确定按钮容器（如果需要可以加，但按钮本身已足够） */
.toast-btn {
    background: var(--success);
    color: white;
    border: none;
    padding: 8px 20px;      /* 缩小内边距，使按钮变窄 */
    border-radius: 30px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    width: auto;            /* 宽度由内容决定 */
    min-width: 60px;        /* 最小宽度，约为原来一半 */
    float: right;           /* 按钮右对齐（可根据需要改为居中对齐） */
    clear: both;
}

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

/* 夜间模式适配 */
body.dark .toast-content h3 {
    color: #eee;
}
body.dark .toast-message {
    color: #eee;
}



/* 移动端适配 */
@media (max-width: 600px) {

    /* 手机端弹窗微调 */
    .modal .toast-content {
        width: 85%;
        max-width: 300px;
        padding: 18px 20px;
    }
    .modal .toast-content h3 {
        font-size: 1rem;
        font-weight: normal;
        margin-bottom: 10px;
    }
    .modal .toast-message {
        font-size: 0.95rem;
        margin: 8px 0 20px 0;
    }
    .modal .toast-btn {
        padding: 8px 18px;
        font-size: 0.95rem;
        float: none;
        display: block;
        margin: 0 auto;
        width: fit-content;
    }
}


    .sidebar {
        display: none; /* 隐藏PC端侧边栏 */
    }

    .sidebar-collapse-btn {
        display: none; /* 隐藏折叠按钮 */
    }

    .menu-toggle {
        display: flex;
    }

    .chat-container {
        height: 100vh;
        border-radius: 0;
    }

    .chat-header {
        padding: 8px 12px;
    }

    /* 手机端缩小头部按钮 */
    .menu-toggle,
    .more-menu-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .header-left {
        gap: 6px; /* 减小汉堡菜单与标题之间的间距 */
    }

    /* 修复头部标题换行问题 */
    .header-title {
        flex-wrap: nowrap;          /* 禁止换行 */
        overflow: hidden;           /* 隐藏溢出内容 */
        white-space: nowrap;        /* 强制一行 */
        flex: 1;                    /* 占用剩余空间 */
        min-width: 0;               /* 允许收缩 */
        font-size: 0.9rem;          /* 缩小标题字体，与动态短语更协调 */
        line-height: 1.2;           /* 调整行高避免过高 */
    }

    .header-title .dynamic-phrase {
        background: rgba(7, 193, 96, 0.1);
        color: var(--success);
        font-size: 0.85rem;
        max-width: none;             /* 移除固定最大宽度 */
        flex-shrink: 1;              /* 允许收缩 */
        min-width: 60px;             /* 设置最小宽度，避免被挤得太小 */
        overflow: hidden;            /* 隐藏溢出 */
        text-overflow: ellipsis;     /* 显示省略号 */
        white-space: nowrap;         /* 强制一行 */
        display: inline-block;       /* 确保省略号生效 */
    }

    .messages-area {
        padding: 16px;
    }

    .bubble {
        max-width: 80%;
    }

    .bubble .time {
        font-size: 0.65rem; /* 时间文字稍小 */
    }

    .avatar {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        margin: 0 8px;
    }

    .input-area {
        padding: 12px 16px;
    }

    /* 输入框字体不小于16px，防止iOS自动缩放 */
    #messageInput {
        font-size: 16px;
        padding: 10px 14px;
    }

    .action-btn {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    /* 模态框优化 */
    .modal-content {
        padding: 20px;
        border-radius: 20px; /* 稍微减小圆角 */
    }

    .modal-content label {
        margin-top: 8px;
    }

    .modal-content input,
    .modal-content select {
        padding: 8px 12px;
    }

    .modal-content button {
        padding: 10px;
        margin-top: 12px;
    }

    /* 抽屉（移动端侧边栏）动画增强 */
    .drawer {
        transition: left 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
    }

    .drawer-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: opacity 0.3s ease;
    }
}
/* 输入行右侧按钮组 */
.right-buttons {
    display: flex;
    flex-direction: row;   /* 明确指定水平方向 */
    gap: 8px;
    align-items: center;
}

/* 相机按钮 */
.camera-btn {
    background: var(--bg-soft);
    color: var(--text-1);
}

.camera-btn:hover {
    background: var(--bg-muted);
}

/* 夜间模式适配 */
body.dark .camera-btn {
    background: #444;
    color: #eee;
}
body.dark .camera-btn:hover {
    background: #555;
}

/* 发送按钮（箭头） */
.send-btn {
    background: var(--success);
    color: white;
}

.send-btn:hover {
    background: var(--success);
    transform: scale(1.05);
}

/* 隐藏类（确保与已有.hidden一致） */
.hidden {
    display: none !important;
}

/* 如果需要统一按钮尺寸，可调整 */
.action-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
/* 修复夜间模式头部标题颜色（提高优先级） */
body.dark .chat-header .header-title,
body.dark .chat-header .header-title span {
    color: #eee !important;
}
/* 打字指示器动画 */
.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 8px 0;
}

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

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

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

/* 夜间模式适配 */
body.dark .typing-indicator span {
    background: #ccc;
    /* 移动端复制按钮始终可见 */
    .copy-btn {
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.5); /* 半透明白色背景，适配亮色/暗色模式 */
    }
    body.dark .copy-btn {
        background: rgba(0, 0, 0, 0.5); /* 暗色模式下的背景 */
    }
    .message.user .copy-btn {
        background: rgba(0, 0, 0, 0.2); /* 用户消息气泡内背景 */
    }
    body.dark .message.user .copy-btn {
        background: rgba(255, 255, 255, 0.15);
    }
}
@media (max-width: 600px) {
    /* ... 现有其他规则 ... */

    /* 增强复制按钮在移动端的可点击性 */
    .copy-btn {
        opacity: 1 !important;
        z-index: 20 !important;
        padding: 12px 16px !important;        /* 更大的点击区域 */
        background: rgba(255, 255, 255, 0.8); /* 提高背景可见度 */
        touch-action: manipulation;            /* 优化触摸 */
        -webkit-tap-highlight-color: transparent; /* 移除默认高亮 */
        border-radius: 8px;                    /* 保持圆角 */
        top: 8px;                               /* 微调位置 */
        right: 8px;
    }
    body.dark .copy-btn {
        background: rgba(0, 0, 0, 0.7);
    }
    .message.user .copy-btn {
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
    }
    body.dark .message.user .copy-btn {
        background: rgba(255, 255, 255, 0.25);
        color: #eee;
    }
/* 复制按钮默认隐藏，尺寸缩小 */
    .copy-btn {
        opacity: 0 !important;
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
        padding: 4px;
        transition: opacity 0.2s;
        /* 确保按钮可见时不被遮挡 */
        z-index: 10;
    }
    /* 显示类 */
    .copy-btn.mobile-visible {
        opacity: 1 !important;
    }
    /* 调整按钮内部图标大小 */
    .copy-btn i {
        font-size: 0.8rem;
    }
    /* 用户消息内按钮背景微调 */
    .message.user .copy-btn {
        background: rgba(0, 0, 0, 0.2);
    }
    body.dark .message.user .copy-btn {
        background: rgba(255, 255, 255, 0.15);
    }

 /* 修复右侧按钮组换行问题 */
    .right-buttons {
        flex-wrap: nowrap !important;  /* 强制不换行 */
        gap: 4px;                      /* 缩小间距，适配窄屏 */
    }

    /* 适当缩小按钮尺寸，避免溢出 */
    .action-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    /* 相机按钮也保持一致 */
    .camera-btn {
        width: 38px;
        height: 38px;
    }

    /* 如果有发送按钮（箭头） */
    .send-btn {
        width: 38px;
        height: 38px;
    }

/* 输入行整体强制不换行 */
    .input-row {
        flex-wrap: nowrap !important;
        gap: 4px; /* 缩小间距 */
    }

    /* 输入框允许缩小，防止溢出 */
    #messageInput {
        flex: 1 1 auto;
        min-width: 40px;  /* 允许非常窄 */
        width: auto;
        padding: 8px 10px; /* 稍微缩小内边距 */
    }

    /* 右侧按钮组强制不换行，且不伸缩 */
    .right-buttons {
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        gap: 4px;
    }

    /* 所有操作按钮统一缩小尺寸 */
    .action-btn,
    .camera-btn,
    .mic-btn,
    .plus-btn,
    .send-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    /* 确保隐藏按钮不占位 */
    .hidden {
        display: none !important;
    }

    /* 提高选择器权重 */
    .chat-container .main .input-area .input-row .right-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px;
    }
    /* 确保按钮不拉伸宽度 */
    .chat-container .main .input-area .input-row .right-buttons .action-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

}

/* 电脑端（宽度 > 600px）按钮水平排列 */
@media (min-width: 601px) {
    .right-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px;
    }
}

.mic-btn.recording i {
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
/* 输入框内图片缩略图（多图） */
.input-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 8px 0;
}
.input-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bg-muted);
    flex-shrink: 0;
}
.input-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.input-thumb .thumb-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}

/* 点击消息显示的复制按钮（全设备，含桌面触屏） */
.copy-btn.mobile-visible {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.5);
}
body.dark .copy-btn.mobile-visible {
    background: rgba(0, 0, 0, 0.5);
}


/* 图片缩略图处理中转圈 + 错误状态 + 发送按钮禁用 */
.input-thumb .thumb-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    z-index: 1;
}
.input-thumb .thumb-spinner::after {
    content: '';
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: thumbSpin 0.8s linear infinite;
}
@keyframes thumbSpin { to { transform: rotate(360deg); } }
.input-thumb.error {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.3);
}
#sendBtn.disabled {
    opacity: 0.45;
    pointer-events: none;
}


/* 相机按钮录像中 */
#cameraBtn.recording {
    color: var(--danger);
    background: rgba(244, 67, 54, 0.12);
    animation: thumbSpin 1.2s linear infinite;
}


/* 相机窗口快门录像中 */
#cameraShutter.recording {
    background: rgba(244, 67, 54, 0.55);
    border-color: var(--danger);
}


/* ===== 断点自续进度条 ===== */
.task-progress-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; margin: 0 12px 6px; border-radius: 8px;
    font-size: 13px; color: var(--color-text-secondary, var(--text-2));
    background: var(--color-background-tertiary, var(--bg-soft));
    border: 1px solid var(--color-border-secondary, var(--bg-muted));
}
.tpb-spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid rgba(102, 126, 234, 0.25); border-top-color: var(--brand);
    animation: tpb-spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes tpb-spin { to { transform: rotate(360deg); } }
body.dark .task-progress-bar {
    color: #bbb; background: #26272b; border-color: #3a3b40;
}


/* ===== 思考轨迹 / 纠正按钮 / 待办提醒 / 会话标记 ===== */
.agent-trace {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(102,126,234,0.25);
    font-size: 12px;
}
.trace-label { color: var(--text-3); }
.trace-chip {
    padding: 2px 8px; border-radius: 10px; font-size: 12px;
    background: rgba(102,126,234,0.1); color: var(--brand);
}
.correct-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px; padding: 3px 10px; border: none; border-radius: 12px;
    font-size: 12px; cursor: pointer; opacity: 0.55;
    background: transparent; color: var(--brand); transition: opacity 0.2s;
}
.correct-btn:hover { opacity: 1; background: rgba(102,126,234,0.1); }
.plan-reminder {
    display: flex; align-items: center; gap: 8px;
    margin: 0 12px 6px; padding: 8px 14px; border-radius: 8px;
    font-size: 13px; cursor: pointer;
    background: rgba(102,126,234,0.08); border: 1px solid rgba(102,126,234,0.25); color: #556;
}
.plan-reminder:hover { background: rgba(102,126,234,0.14); }
.plan-reminder-x { margin-left: auto; color: #aaa; font-size: 14px; }
.plan-reminder-x:hover { color: var(--danger); }
.sess-task-mark { font-size: 12px; margin-left: 4px; }
.pref-del-btn {
    padding: 3px 10px; border: none; border-radius: 10px; font-size: 12px; cursor: pointer;
    background: rgba(244,67,54,0.1); color: var(--danger);
}
.pref-del-btn:hover { background: rgba(244,67,54,0.2); }
body.dark .trace-chip { background: rgba(102,126,234,0.2); color: #9db2f0; }
body.dark .correct-btn { color: #9db2f0; }
body.dark .plan-reminder { color: #bbb; }


/* =====================================================
   UI 2.0 — 设计系统覆盖层
   ===================================================== */
:root {
    --brand: #667eea;
    --brand-2: #764ba2;
    --brand-grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    --brand-soft: rgba(102, 126, 234, 0.10);
    --bg: #eef1f8;
    --surface: #ffffff;
    --text-1: #1f2329;
    --text-2: #6b7280;
    --border: #e8eaf0;
    --shadow-sm: 0 2px 10px rgba(31,35,41,.06);
    --shadow-md: 0 10px 30px rgba(31,35,41,.12);
}
body.dark {
    --bg: #14161c;
    --surface: #1e2128;
    --text-1: #e8eaef;
    --text-2: #9aa1ad;
    --border: #2c3038;
    --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
    --shadow-md: 0 10px 30px rgba(0,0,0,.45);
}

/* 背景与容器 */
body { background: var(--bg); transition: background .3s; }
.chat-container { background: var(--surface); box-shadow: var(--shadow-md); transition: background .3s, box-shadow .3s; }
body.dark .chat-container { background: var(--surface); }

/* 桌面端：全宽满高，侧栏常驻 */
@media (min-width: 861px) {
    .chat-container { max-width: none; width: 100%; height: 100vh; border-radius: 0; }
    .sidebar { display: block; }
    .sidebar { width: 264px; flex-shrink: 0; }
    .sidebar-collapse-btn { display: none; }
    body.dark .sidebar { background: #191c22; }
}

/* 头部 */
.chat-header { background: var(--surface); padding: 14px 20px; }
body.dark .chat-header { background: var(--surface); }
.header-title { font-weight: 600; font-size: 1.05rem; color: var(--text-1); }
body.dark .header-title { color: var(--text-1); }

/* 侧栏 */
.sidebar { background: var(--bg); border-right: 1px solid var(--border); transition: background .3s; }
.sidebar-header { padding: 14px 12px; }
.new-chat-btn { border-radius: 12px; font-weight: 500; transition: all .2s; }
.session-item { border-radius: 10px; margin: 2px 8px; transition: background .15s, color .15s; }
.session-item:hover { background: var(--brand-soft); }
.session-item.active { background: var(--brand-grad); color: #fff !important; box-shadow: 0 3px 10px rgba(102,126,234,.25); }

/* 消息区 */
.messages-area {
    background: radial-gradient(1200px 500px at 80% -10%, rgba(102,126,234,.06), transparent 60%);
    background-color: var(--bg);
    scrollbar-width: thin;
}
body.dark .messages-area { background-color: #171a20; }

/* 消息气泡卡片化 */
.message.assistant .bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px 16px 16px 16px;
    box-shadow: var(--shadow-sm);
    color: var(--text-1);
}
.message.user .bubble {
    background: var(--brand-grad);
    color: #fff;
    border-radius: 16px 4px 16px 16px;
    box-shadow: 0 4px 14px rgba(102,126,234,.28);
}
.message.user .bubble .time { color: rgba(255,255,255,.78); }
body.dark .message.assistant .bubble { background: var(--surface); border-color: var(--border); color: var(--text-1); }

/* 输入区 */
.input-area { background: var(--surface); border-top: 1px solid var(--border); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
body.dark .input-area { background: var(--surface); }
.input-row textarea {
    border-radius: 22px;
    background: var(--bg);
    border: 1.5px solid transparent;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-row textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: var(--surface);
}
.action-btn { border-radius: 50%; transition: background .15s, transform .1s; }
.action-btn:hover { background: var(--brand-soft); transform: scale(1.05); }
.action-btn.send-btn, .send-btn { background: var(--brand-grad) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(102,126,234,.35); }

/* 按钮微交互 */
.login-btn, .toast-btn, .upload-btn, .close-btn, .pref-del-btn {
    transition: transform .1s, box-shadow .15s, opacity .15s;
}
.login-btn:hover, .toast-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102,126,234,.3); }

/* 消息入场动效 */
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.message { animation: msgIn .18s ease-out; }

/* 欢迎页 */
.messages-wrap { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.welcome-view {
    position: absolute; inset: 0; z-index: 3;
    display: none; align-items: center; justify-content: center;
    padding: 40px 20px; text-align: center;
    background: radial-gradient(900px 420px at 50% -5%, rgba(102,126,234,.10), transparent 65%);
    background-color: var(--bg);
}
body.dark .welcome-view { background-color: #171a20; }
.welcome-inner { max-width: 620px; width: 100%; }
.welcome-logo {
    width: 76px; height: 76px; margin: 0 auto 18px;
    border-radius: 22px; background: var(--brand-grad);
    color: #fff; font-size: 30px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(102,126,234,.35);
    animation: logoFloat 3.2s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.welcome-title { font-size: 1.5rem; color: var(--text-1); margin-bottom: 6px; font-weight: 600; }
body.dark .welcome-title { color: var(--text-1); }
.welcome-sub { color: var(--text-2); font-size: .9rem; margin-bottom: 26px; }
.welcome-suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.suggest-btn {
    padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-1); font-size: .9rem;
    cursor: pointer; transition: all .18s; text-align: left;
    box-shadow: var(--shadow-sm);
}
.suggest-btn:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
body.dark .suggest-btn { background: var(--surface); color: var(--text-1); border-color: var(--border); }

/* 深色模式容器统一 */
body.dark .chat-header { border-color: var(--border); }
body.dark .input-area { border-color: var(--border); }


/* ===== 纠正内联编辑器 / 轨迹展开 ===== */
.correct-editor {
    display: flex; gap: 8px; align-items: flex-end;
    margin-top: 8px; padding: 8px; border-radius: 10px;
    background: rgba(102,126,234,0.06); border: 1px solid rgba(102,126,234,0.18);
}
.correct-input {
    flex: 1; resize: none; border: 1px solid var(--border, var(--border));
    border-radius: 8px; padding: 8px 10px; font-size: 13px;
    background: var(--surface, #fff); color: var(--text-1, var(--text-1));
    outline: none;
}
.correct-input:focus { border-color: var(--brand, var(--brand)); box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }
.correct-send {
    padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer;
    background: var(--brand-grad, linear-gradient(135deg,var(--brand),var(--brand-2)));
    color: #fff; font-size: 13px; white-space: nowrap;
}
.trace-toggle {
    margin-left: auto; color: var(--text-3); font-size: 12px; cursor: pointer;
    padding: 0 4px; user-select: none;
}
.trace-detail {
    margin-top: 6px; padding: 8px 10px; border-radius: 8px;
    background: rgba(102,126,234,0.05); border-left: 2px solid rgba(102,126,234,0.35);
    font-size: 12px; color: var(--text-2, var(--text-2));
}
.trace-intent { font-weight: 600; margin-bottom: 4px; color: var(--text-1, var(--text-1)); }
.trace-desc { line-height: 1.6; }
.trace-panel { flex-basis: 100%; width: 100%; order: 99; min-width: 100%; margin: 4px 0 0; align-self: stretch; padding: 8px 10px; background: rgba(128,128,128,.06); border-radius: 8px; font-size: 12px; }
.trace-label { cursor: pointer; color: var(--text-3); font-weight: 600; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.trace-tools { margin-top: 4px; }
.trace-chip { display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0; background: rgba(102,126,234,.12); color: var(--brand); border-radius: 10px; font-size: 11px; }
.trace-src { display: flex; gap: 6px; padding: 3px 0; color: var(--text-2); align-items: baseline; }
.trace-src-label { flex-shrink: 0; color: var(--brand); font-size: 11px; }
.trace-src-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
body.dark .trace-panel { background: rgba(255,255,255,.05); }
body.dark .trace-src { color: #aaa; }
body.dark .correct-editor { background: rgba(102,126,234,0.12); border-color: rgba(102,126,234,0.3); }
body.dark .trace-detail { background: rgba(102,126,234,0.1); }


/* ===== 左侧贴边修复：消息区内边距 + AI 头像美化 ===== */
.messages-area { padding: 24px 28px; }
.message.assistant .avatar {
    background: var(--brand-grad, linear-gradient(135deg,var(--brand),var(--brand-2)));
    box-shadow: 0 2px 8px rgba(102,126,234,.35);
    border: 2px solid var(--surface, #fff);
}
body.dark .message.assistant .avatar { border-color: #1e2128; }


/* ===== Markdown 排版对齐（列表圆点缩进） ===== */
.markdown-body { line-height: 1.75; }
.markdown-body ul, .markdown-body ol {
    padding-left: 1.6em;
    margin: 6px 0;
}
.markdown-body li { margin: 4px 0; }
.markdown-body p { margin: 6px 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 12px 0 6px; line-height: 1.4;
}
.markdown-body blockquote {
    margin: 8px 0; padding: 6px 12px;
    border-left: 3px solid var(--brand, var(--brand));
    background: var(--brand-soft, rgba(102,126,234,.08));
    border-radius: 0 8px 8px 0;
}
.markdown-body code {
    padding: 1px 6px; border-radius: 5px; font-size: .92em;
    background: var(--brand-soft, rgba(102,126,234,.1));
}
.markdown-body pre {
    padding: 12px 14px; border-radius: 10px; overflow-x: auto;
    background: #f6f7fb;
}
body.dark .markdown-body pre { background: #101218; }

/* 消息区内边距显式化（桌面 / 移动） */
.messages-area { padding: 24px 28px; }
@media (max-width: 860px) {
    .messages-area { padding: 16px; }
}


/* ===== 聊天显示风格选择器 ===== */
.style-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.style-option {
    padding: 12px 8px; border-radius: 12px; text-align: center;
    border: 1.5px solid var(--border, var(--border)); background: var(--surface, #fff);
    cursor: pointer; transition: all .2s;
}
.style-option:hover { border-color: var(--brand, var(--brand)); transform: translateY(-1px); }
.style-option.active {
    border-color: var(--brand, var(--brand));
    background: var(--brand-soft, rgba(102,126,234,.08));
    box-shadow: 0 2px 10px rgba(102,126,234,.18);
}
.style-icon { font-size: 22px; margin-bottom: 6px; }
.style-name { font-weight: 600; font-size: 14px; color: var(--text-1, var(--text-1)); margin-bottom: 3px; }
.style-desc { font-size: 11px; color: var(--text-2, var(--text-2)); line-height: 1.5; }
body.dark .style-option { background: var(--surface, #1e2128); border-color: var(--border, #2c3038); }
body.dark .style-option.active { background: rgba(102,126,234,.16); }

/* ===== 气泡式：名称跑道 + 纵向布局（P3 迭代） ===== */
.message .name-pill {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-3);
    background: rgba(128,128,128,.08);
    margin-bottom: 3px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.message.user, .message.assistant {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
}
.message.user { padding-left: 23px; padding-right: 6px; }
.message.assistant { padding-left: 6px; padding-right: 23px; }
.msg-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}
.message.user .msg-block { margin-left: auto; margin-right: 0; }
.message.assistant .msg-block { margin-right: auto; margin-left: 0; }
.msg-block .name-pill {
    width: fit-content;
    max-width: 100%;
}
.msg-block .bubble {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    word-break: break-word;
}
/* 双保险：任何消息层级的气泡都不被基础 max-width 截断 */
.message.user .bubble, .message.assistant .bubble {
    max-width: 100%;
}
.message.user .msg-block { margin-left: auto; margin-right: 0; }
.message.assistant .msg-block { margin-right: auto; margin-left: 0; }
body.dark .message .name-pill { color: #aaa; background: rgba(255,255,255,.08); }
@media (max-width: 480px) {
    .message.user, .message.assistant { margin: 8px 0; }
    .message.user { padding-left: 20px; padding-right: 6px; }
    .message.assistant { padding-left: 6px; padding-right: 20px; }
    .message .name-pill { font-size: 11px; padding: 1px 10px; max-width: 160px; }
}

/* ===== 全屏式（豆包风格）：无气泡，满屏排版 ===== */
body.chat-full .messages-area { padding: 26px 4px 20px; }
body.chat-full .message { max-width: none; align-items: flex-start; }
body.chat-full .bubble {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    padding: 6px 12px;
    color: var(--text-1, var(--text-1));
}
body.chat-full .message.user { justify-content: flex-start; }
body.chat-full .message.user .bubble { color: var(--text-1, var(--text-1)); }
body.chat-full .bubble .time {
    color: var(--text-2, #9aa0a6) !important;
    font-size: 11px; margin-top: 4px; text-align: right;
}
body.chat-full .markdown-body { font-size: 15px; line-height: 1.9; }
body.chat-full .markdown-body p { margin: 6px 0; }
body.chat-full .message.assistant .bubble { padding-left: 14px; }
body.chat-full .message.user .bubble { padding-right: 14px; }
/* 全屏式下隐藏复制/纠正按钮悬浮态（保持简洁），hover 才显示 */
body.chat-full .copy-btn { opacity: 0; }
body.chat-full .bubble:hover .copy-btn { opacity: 1; }
/* 思考轨迹在全屏式下保持卡片感 */
body.chat-full .agent-trace {
    margin-left: 12px; margin-right: 12px;
    padding: 6px 10px; border-radius: 10px;
    background: var(--brand-soft, rgba(102,126,234,.07));
    border-top: none;
}
body.chat-full .correct-editor { margin-left: 12px; margin-right: 12px; }
body.dark.chat-full .bubble { color: var(--text-1, #e8eaef); }
body.dark.chat-full .message.user .bubble { color: var(--text-1, #e8eaef); }


/* 全屏式：隐藏头像，聊天内容真正全屏 */
body.chat-full .avatar { display: none !important; }
body.chat-full .message.assistant .bubble { padding-left: 4px; }
body.chat-full .message.user .bubble { padding-right: 4px; }
body.chat-full .message { margin: 2px 0; }


/* ===== 全屏式：头像不占位，消息占满整行 ===== */
.chat-full .message {
    width: 100%;
    max-width: 100%;
}
.chat-full .message .avatar {
    display: none !important;
}
.chat-full .message .bubble {
    max-width: 100% !important;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 3px 0;
    color: var(--text-1, var(--text-1));
}
.chat-full .message.user .bubble {
    color: var(--brand, var(--brand));
    text-align: left;
    font-style: italic;
}
.chat-full .message .time {
    display: inline-block;
    margin-top: 3px;
    text-align: left;
    opacity: .7;
}
.chat-full .message.ai .bubble, .chat-full .message.assistant .bubble {
    color: var(--text-1, var(--text-1));
}
body.dark .chat-full .message.ai .bubble,
body.dark .chat-full .message.assistant .bubble { color: #e8eaef; }
body.dark .chat-full .message.user .bubble { color: #9db2f0; font-style: italic; }


/* ===== 记忆与数据源配置 ===== */
.ds-block { margin: 4px 0 10px; }
.ds-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 6px; border-radius: 10px; margin-bottom: 6px;
    background: var(--surface-2, #f6f7fb);
}
.ds-row .ds-name { flex: 1; font-size: 13px; color: var(--text-1, var(--text-1)); white-space: nowrap; }
.ds-row .ds-enabled { width: 16px; height: 16px; accent-color: var(--brand, var(--brand)); cursor: pointer; }
.ds-row .ds-weight { flex: 1; min-width: 60px; accent-color: var(--brand, var(--brand)); cursor: pointer; }
.ds-row .ds-val {
    width: 26px; text-align: center; font-size: 13px; font-weight: 600;
    color: var(--brand, var(--brand)); background: rgba(102,126,234,.1);
    border-radius: 8px; padding: 2px 0;
}
body.dark .ds-row { background: var(--surface-2, #1b1e26); }
body.dark .ds-row .ds-name { color: #e8eaef; }

/* 缩略图区可滚动（多图时） */
.input-thumbs { max-height: 96px; overflow-y: auto; }


/* ===== 照片自适应与网格（2026-08-29） ===== */
.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 4px 0;
}
.markdown-body .photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 6px 0;
}
.markdown-body .photo-grid img {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
    border: 1px solid rgba(0,0,0,.06);
}
@media (max-width: 480px) {
    .markdown-body .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

/* ===== 照片管理弹窗（2026-08-29） ===== */
#photoList { display: flex; flex-direction: column; gap: 8px; }
.photo-manage-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
    background: rgba(0,0,0,.02);
}
body.dark .photo-manage-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.photo-manage-item img {
    width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: zoom-in;
}
.photo-manage-info { flex: 1; min-width: 0; }
.photo-manage-desc {
    font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.dark .photo-manage-desc { color: #ddd; }
.photo-manage-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.photo-manage-ops { display: flex; flex-direction: column; gap: 4px; }
.photo-manage-ops button {
    font-size: 12px; padding: 4px 10px; border: none; border-radius: 6px;
    background: var(--brand, var(--brand)); color: #fff; cursor: pointer; white-space: nowrap;
}
.photo-manage-ops button.danger { background: #e74c3c; }

/* ===== 照片编辑弹窗（2026-08-29 v20260829edit） ===== */
.photo-edit-field {
    width: 100%; margin: 4px 0 10px; padding: 8px; box-sizing: border-box;
    border: 1px solid #ddd; border-radius: 8px; font-size: 13px;
    background: #fff; color: var(--text-1);
}
.photo-edit-field:focus { outline: none; border-color: var(--brand, var(--brand)); }
body.dark .photo-edit-field { background: rgba(255,255,255,.08); color: #eee; border-color: rgba(255,255,255,.15); }
.photo-edit-save {
    flex: 1; padding: 8px; border: none; border-radius: 8px;
    background: var(--brand, var(--brand)); color: #fff; cursor: pointer; font-size: 13px;
}

/* ===== 设置弹窗按钮收缩（2026-08-30） ===== */
.modal-actions {
    display: flex;
    gap: 10px;
    max-width: 320px;
    margin: 16px auto 0;
}
.modal-actions button {
    flex: 1;
    margin-top: 0;
}

/* ===== 2026-08-30：保存/关闭按钮等高 + 登录页退出APP按钮 ===== */
.modal-actions .close-btn { margin-top: 0; }
.logout-app-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    background: var(--bg-muted);
    color: var(--text-1);
    border: none;
    border-radius: 30px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
}
.logout-app-btn:hover { background: #ccc; }
body.dark .logout-app-btn { background: #555; color: #eee; }
body.dark .logout-app-btn:hover { background: var(--text-2); }

/* ===== 登录/注册页视觉优化（2026-08-31） ===== */
.login-section {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
}
.login-card {
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}
.login-logo {
    width: 168px; height: auto;
    margin: 0 auto 8px;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(102, 126, 234, .35));
    animation: logoFloat 3.2s ease-in-out infinite;
}
.login-sub {
    text-align: center;
    font-size: 12px;
    color: var(--text-3, #999);
    margin: -2px 0 18px;
    letter-spacing: .5px;
}
.login-title {
    text-align: center;
    color: var(--text-1);
    font-size: 20px;
    margin-bottom: 22px;
}
.auth-tabs {
    display: flex;
    background: #f1f3f9;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
}
.auth-tab {
    flex: 1;
    padding: 9px 0;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 14px;
    color: var(--text-3);
    cursor: pointer;
    transition: all 0.2s;
}
.auth-tab.active {
    background: #fff;
    color: var(--brand);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.18);
}
.tab-panel.hidden { display: none; }
.input-group { position: relative; margin-bottom: 14px; }
.input-group i {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: #9aa0b4; font-size: 14px; z-index: 1;
}
.input-group input {
    width: 100%; box-sizing: border-box;
    padding: 13px 14px 13px 40px;
    border: 1px solid #e3e6ef; border-radius: 12px;
    font-size: 14px; outline: none;
    background: #f9fafc; color: var(--text-1);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.input-group input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    background: #fff;
}
body.dark .input-group input { background: #2a2d3a; border-color: #3a3f52; color: #eee; }
body.dark .input-group input:focus { border-color: var(--brand); background: #2f3342; }
.code-row { display: flex; gap: 8px; align-items: center; }
.code-row .input-group { flex: 1; }
.code-row input { flex: 1; }
.code-btn {
    flex-shrink: 0; padding: 13px 14px;
    border: none; border-radius: 12px;
    background: #eef0f7; color: var(--brand);
    font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: background 0.2s;
}
.code-btn:hover { background: #e2e6f5; }
.code-btn:disabled { color: #aaa; cursor: not-allowed; background: #f1f1f5; }
.auth-btn.primary {
    width: 100%; padding: 13px; margin-top: 4px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}
.auth-btn.primary:hover { opacity: 0.92; }
.auth-btn.primary:active { transform: scale(0.98); }
.register-link { text-align: center; margin-top: 16px; color: var(--text-3); font-size: 13px; }
.register-link span { color: var(--brand); font-weight: 600; cursor: pointer; }
#registerModal .input-group { margin-top: 14px; }

/* ===== 多账号选择弹窗（2026-08-31） ===== */
.account-option {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid #e3e6ef; border-radius: 10px; background: #f9fafc;
    cursor: pointer; transition: all 0.15s; text-align: left;
}
.account-option:hover { border-color: var(--brand); background: #eef0fb; }
.account-name { font-size: 14px; color: var(--text-1); font-weight: 600; }
.account-uid { font-size: 12px; color: #9aa0b4; }
body.dark .account-option { background: #2a2d3a; border-color: #3a3f52; }
body.dark .account-name { color: #eee; }

/* ===== 修复验证码按钮比例（2026-08-31）：覆盖 .modal-content button 旧样式 ===== */
.modal-content .code-row .code-btn {
    width: auto;
    flex-shrink: 0;
    padding: 13px 16px;
    border: none;
    border-radius: 12px;
    background: #eef0f7;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.modal-content .code-row .code-btn:hover { background: #e2e6f5; }
.modal-content .code-row .code-btn:disabled { background: #f1f1f5; color: #aaa; cursor: not-allowed; }
.modal-content .code-row input { flex: 1; min-width: 0; }

/* ===== 验证码行底部对齐（2026-08-31） ===== */
.modal-content .code-row { align-items: stretch; }
.modal-content .code-row .code-btn { display: flex; align-items: center; justify-content: center; }

/* ===== 用户设置：改密/注销（2026-08-31） ===== */
.user-actions-row {
    display: flex; gap: 10px; margin-top: 16px;
}
.user-action-btn {
    flex: 1; padding: 11px 0;
    border: 1px solid #e3e6ef; border-radius: 12px;
    background: #f9fafc; color: #555; font-size: 14px; cursor: pointer;
    transition: all 0.15s;
}
.user-action-btn:hover { border-color: var(--brand); color: var(--brand); }
.user-action-btn.danger { color: #e74c3c; border-color: #f3d9d9; background: #fdf5f5; }
.user-action-btn.danger:hover { border-color: #e74c3c; background: #fdecec; }
.pwd-eye {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    color: #9aa0b4; font-size: 14px; cursor: pointer; z-index: 2;
}
.pwd-eye:hover { color: var(--brand); }
.auth-btn.danger {
    width: 100%; padding: 13px; margin-top: 4px;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.auth-btn.danger:hover { opacity: 0.92; }

/* ===== 二次确认注销弹窗（大取消 + 小狠心注销 + 倒计时） ===== */
.confirm-delete { text-align: center; padding: 28px 24px 20px; }
.confirm-warning { font-size: 40px; margin-bottom: 8px; }
.confirm-delete h3 { margin: 0 0 6px; }
.confirm-text { font-size: 13px; color: #e74c3c; margin: 0 0 20px; }
.confirm-cancel-btn {
    display: block; width: 100%; padding: 14px 0; margin-bottom: 10px;
    border: none; border-radius: 12px;
    background: #f1f3f9; color: #555; font-size: 15px; font-weight: 600; cursor: pointer;
}
.confirm-cancel-btn:hover { background: #e7eaf3; }
.confirm-danger-btn {
    padding: 6px 18px;
    border: 1px solid #e74c3c; border-radius: 8px;
    background: transparent; color: #e74c3c; font-size: 12px; cursor: pointer;
}
.confirm-danger-btn:hover { background: #e74c3c; color: #fff; }

/* ===== 二次修复（2026-08-31） ===== */
#confirmDeleteModal .confirm-danger-btn {
    width: auto;
    padding: 6px 18px;
    margin: 0;
    border: 1px solid #e74c3c;
    border-radius: 8px;
    background: transparent;
    color: #e74c3c;
    font-size: 12px;
    cursor: pointer;
}
#confirmDeleteModal .confirm-danger-btn:hover { background: #e74c3c; color: #fff; }
#confirmDeleteModal .confirm-cancel-btn { margin-bottom: 10px; }
.modal-content .code-row .code-btn { margin: 0; }
.modal-content .code-row input { margin: 0; }

/* ===== 用户设置修复 v3（2026-08-31） ===== */
#toastModal { z-index: 5000 !important; }
#deleteAccountModal .auth-btn.danger:hover,
#deleteAccountModal .auth-btn.danger:active,
#deleteAccountModal .auth-btn.danger:focus {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    opacity: 0.92;
    color: #fff;
}
#changePwdModal .pwd-eye,
#deleteAccountModal .pwd-eye {
    left: auto !important;
    right: 14px;
}
#changePwdModal input,
#deleteAccountModal input {
    padding-right: 40px;
}

/* ===== 改密/注销文字链接（2026-08-31） ===== */
.user-links {
    display: flex;
    max-width: 320px;
    margin: 10px auto 0;
    font-size: 12px;
}
.user-links .user-link-col { flex: 1; display: flex; }
.user-links .col-left { justify-content: center; }
.user-links .col-right { justify-content: flex-end; }
.user-links a {
    color: #8892b0;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}
.user-links a:hover { color: var(--brand); }
.user-links a.danger { color: #b8b0b0; }
.user-links a.danger:hover { color: #e74c3c; }
.user-links-sep { color: #ccd0dc; }

/* ===== 登录卡片高度压缩（2026-08-31） ===== */
.login-card { padding: 22px 30px !important; }
.tech-support { margin-top: 6px !important; }
.register-link { margin-top: 10px !important; }
.logout-app-btn { margin-top: 8px !important; }

/* ===== 用户名文本显示（flex 并排，无输入框外观，2026-08-31 v12） ===== */
.auth-user-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.auth-user-display i {
    position: static;
    transform: none;
    color: #9aa0b4;
    font-size: 14px;
    flex-shrink: 0;
}
.auth-user-display span {
    display: inline-block;
    padding: 0;
    font-size: 14px;
    color: var(--text-1);
    background: transparent;
    border-radius: 0;
}
body.dark .auth-user-display span { background: transparent; color: #ddd; }
.login-card { padding: 22px 30px 12px 30px !important; }

/* ===== 五项修复（2026-08-31） ===== */
.login-card { padding: 32px 30px 12px 30px !important; }
@media (max-width: 768px) {
    .login-card { padding: 32px 30px 10px 30px !important; }
}
.account-option {
    width: auto;
    min-width: 250px;
    margin: 0 auto 8px;
    justify-content: center;
    gap: 6px;
}
.account-nick { font-size: 12px; color: #8892b0; font-weight: 400; }

/* ===== 移动端登录卡片压缩（2026-08-31） ===== */
@media (max-width: 768px) {
    .login-card { padding: 32px 20px 10px 20px !important; }
    .login-logo { font-size: 30px !important; line-height: 1 !important; margin-bottom: 2px !important; }
    .login-title { font-size: 17px !important; margin: 0 0 14px !important; }
    .auth-tabs { margin-bottom: 10px !important; padding: 3px !important; }
    .auth-tab { padding: 7px 0 !important; }
    .input-group { margin-bottom: 10px !important; }
    .input-group input { padding: 9px 12px 9px 36px !important; font-size: 13px !important; }
    .code-btn { padding: 9px 12px !important; font-size: 12px !important; }
    .auth-btn.primary, .auth-btn.danger { padding: 10px !important; font-size: 14px !important; margin-top: 5px !important; }
    .register-link { margin-top: 8px !important; font-size: 12px !important; }
    .logout-app-btn { margin-top: 6px !important; padding: 8px !important; font-size: 13px !important; }
    .tech-support { font-size: 11px !important; }
}

/* ===== 退出APP 与 footer 间距 20px（2026-08-31 v14） ===== */
.logout-app-btn { margin-bottom: 20px !important; }
.dropdown-item.menu-switch { color: var(--text-1) !important; }
.dropdown-item.menu-switch i { color: var(--success) !important; }

/* ===== 知识管理二级菜单（2026-08-31 v15） ===== */
.menu-parent .sub-arrow {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-3);
    transition: transform 0.2s;
}
.menu-parent.open .sub-arrow { transform: rotate(180deg); }
.dropdown-submenu { display: none; }
.dropdown-submenu.open { display: block; }
.dropdown-submenu .dropdown-item {
    padding-left: 46px;
    font-size: 0.92rem;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}
.dropdown-submenu .dropdown-item:hover { background: var(--menu-item-hover); }
.dropdown-submenu .dropdown-item i { color: var(--success); }
.dropdown-menu { max-height: 70vh; overflow-y: auto; }

/* ==================================================
   UI 3.0 — 皮肤工坊（2026-08-31 v16）
   5 套皮肤：深空智核 / 暗影圣翼 / 莫兰迪灰 / 雾樱甜梦 / 宫墙暮色
   追加于文件末尾（位于 body.dark 之后，同特异性后定义优先）
   ================================================== */
:root {
    /* 组件语义色 */
    --danger: #f44336;
    --danger-bg: rgba(244, 67, 54, 0.08);
    --success: #07c160;
    --success-bg: rgba(7, 193, 96, 0.08);
    --warn: #f5a623;
    --menu-bg: #ffffff;
    --menu-item-hover: #f5f6fa;
    --input-bg: #ffffff;
    --input-border: var(--border);
    --tag-bg: #f0f1f8;
    --tag-text: #4a4f8f;
}

/* 深空智核（= 现有 UI 2.0 视觉） */
body[data-skin="deep-space"] {
    --brand: #667eea; --brand-2: #764ba2;
    --brand-grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    --brand-soft: rgba(102, 126, 234, 0.10);
    --bg: #eef1f8; --surface: #ffffff;
    --text-1: #1f2329; --text-2: #6b7280; --border: #e8eaf0;
    --shadow-sm: 0 2px 10px rgba(31,35,41,.06);
    --shadow-md: 0 10px 30px rgba(31,35,41,.12);
    --menu-bg: #ffffff; --menu-item-hover: #f5f6fa;
    --input-bg: #ffffff; --input-border: var(--border);
    --tag-bg: #f0f1f8; --tag-text: #4a4f8f;
}

/* 暗影圣翼（= 现有暗色模式） */
body[data-skin="dark-wing"] {
    --brand: #667eea; --brand-2: #764ba2;
    --brand-grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    --brand-soft: rgba(102, 126, 234, 0.18);
    --bg: #14161c; --surface: #1e2128;
    --text-1: #e8eaef; --text-2: #9aa1ad; --border: #2c3038;
    --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
    --shadow-md: 0 10px 30px rgba(0,0,0,.45);
    --menu-bg: #2a2d37; --menu-item-hover: #353946;
    --input-bg: #23262f; --input-border: #333846;
    --tag-bg: #2c3038; --tag-text: #b9bfca;
}

/* 莫兰迪灰 */
body[data-skin="morandi"] {
    --brand: #8d7ba3; --brand-2: #a493b3;
    --brand-grad: linear-gradient(135deg, #8d7ba3 0%, #a493b3 100%);
    --brand-soft: rgba(141,123,163,.12);
    --bg: #f2f0f5; --surface: #ffffff;
    --text-1: #3a3540; --text-2: #8a8290; --border: #e4e0ea;
    --shadow-sm: 0 2px 10px rgba(58,53,64,.07);
    --shadow-md: 0 10px 30px rgba(58,53,64,.13);
    --menu-bg: #ffffff; --menu-item-hover: #f2f0f6;
    --input-bg: #ffffff; --input-border: #e4e0ea;
    --tag-bg: #efecf3; --tag-text: #6f6480;
}

/* 雾樱甜梦 */
body[data-skin="sakura"] {
    --brand: #e884a8; --brand-2: #f76b9f;
    --brand-grad: linear-gradient(135deg, #f2a0c3 0%, #f76b9f 100%);
    --brand-soft: rgba(232,132,168,.12);
    --bg: #fdf3f7; --surface: #ffffff;
    --text-1: #4a333c; --text-2: #a08a94; --border: #f3e0e8;
    --shadow-sm: 0 2px 10px rgba(74,51,60,.07);
    --shadow-md: 0 10px 30px rgba(74,51,60,.13);
    --menu-bg: #ffffff; --menu-item-hover: #fdf0f5;
    --input-bg: #ffffff; --input-border: #f3e0e8;
    --tag-bg: #fbeef4; --tag-text: #a05a78;
}

/* 宫墙暮色 */
body[data-skin="palace"] {
    --brand: #c0392b; --brand-2: #b8860b;
    --brand-grad: linear-gradient(135deg, #c0392b 0%, #b8860b 100%);
    --brand-soft: rgba(192,57,43,.12);
    --bg: #faf3ec; --surface: #fffdf9;
    --text-1: #3d2f26; --text-2: #96836f; --border: #eee0d0;
    --shadow-sm: 0 2px 10px rgba(61,47,38,.07);
    --shadow-md: 0 10px 30px rgba(61,47,38,.13);
    --menu-bg: #fffdf9; --menu-item-hover: #f7efe4;
    --input-bg: #fffdf9; --input-border: #eee0d0;
    --tag-bg: #f6ece0; --tag-text: #8a6a3c;
}

/* ===== 皮肤系统 S2：补充变量（text-3/bg-soft/bg-muted） ===== */
body.dark {
    --text-3: #7d8496;
    --bg-soft: #23262f;
    --bg-muted: #333846;
}
body[data-skin="deep-space"] {
    --text-3: #999;
    --bg-soft: #f5f5f5;
    --bg-muted: #e0e0e0;
}
body[data-skin="dark-wing"] {
    --text-3: #7d8496;
    --bg-soft: #23262f;
    --bg-muted: #333846;
}
body[data-skin="morandi"] {
    --text-3: #a39aa8;
    --bg-soft: #f0eef4;
    --bg-muted: #e2dde8;
}
body[data-skin="sakura"] {
    --text-3: #b48ba0;
    --bg-soft: #f9e9ef;
    --bg-muted: #f0dde5;
}
body[data-skin="palace"] {
    --text-3: #997a5e;
    --bg-soft: #faf3ec;
    --bg-muted: #eadfd3;
}

/* ===== 皮肤工坊（S3）：菜单项样式 ===== */
.skin-option { display: flex; align-items: center; gap: 8px; }
.skin-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
.dark-dot { border-color: rgba(255,255,255,.35); }
.skin-check { margin-left: auto; display: none; color: var(--brand); font-size: 12px; }
.skin-option.active { color: var(--brand); font-weight: 600; }
.skin-option.active .skin-check { display: inline-block; }

/* 照片管理上传按钮：自适应文字宽度（2026-08-31 v28，覆盖 .modal-content button 全宽样式） */
.modal-content #photoUploadBtn {
    width: auto;
    flex-shrink: 0;
    margin-top: 0;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--brand-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.modal-content #photoUploadBtn:hover {
    background: var(--brand-grad);
    opacity: 0.9;
    transform: none;
}

/* ==================================================
   UI 4.0 评审优化（2026-09-01 v29）
   评审：智聊UI评审与优化提示词.md（P0：输入栏统一 + 全局token）
   ================================================== */

/* ---------- 4.1 全局 Design Token ---------- */
:root {
    /* 浅色主题 */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F8FAFC;
    --color-bg-tertiary: #F1F5F9;
    --color-surface-ai: #F8FAFC;
    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-tertiary: #94A3B8;
    --color-border: #E2E8F0;
    --color-primary: #6366F1;
    --color-primary-hover: #4F46E5;
    --color-success: #22C55E;
    --color-danger: #EF4444;
    /* 间距 / 圆角 */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px;
}
body.dark {
    --color-bg-primary: #0F1115;
    --color-bg-secondary: #1A1D23;
    --color-bg-tertiary: #252A33;
    --color-surface-ai: #1E222A;
    --color-text-primary: #F1F3F6;
    --color-text-secondary: #9CA3AF;
    --color-text-tertiary: #6B7280;
    --color-border: #2D3139;
    --color-primary: #818CF8;
    --color-primary-hover: #A5B4FC;
    --color-danger: #F87171;
}

/* ---------- 4.5 输入栏统一（三端一致） ---------- */
.input-area {
    padding: 12px 20px;
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border);
}
body.dark .input-area {
    background: var(--color-bg-primary);
    border-top-color: var(--color-border);
}
.input-row {
    gap: 10px;
    align-items: center;
}
#messageInput {
    flex: 1;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 44px;
    resize: none;
    outline: none;
    overflow-y: auto;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#messageInput:focus {
    background: var(--color-bg-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
body.dark #messageInput {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}
body.dark #messageInput:focus {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}
#messageInput::placeholder {
    color: var(--color-text-tertiary);
    font-size: 14px;
}

/* 右侧按钮组：统一 36px 圆形 */
.right-buttons .action-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.right-buttons .mic-btn {
    background: #EEF2FF;
    color: #6366F1;
}
.right-buttons .mic-btn:hover { background: #E0E7FF; transform: scale(1.05); }
body.dark .right-buttons .mic-btn { background: #252A33; color: #818CF8; }
body.dark .right-buttons .mic-btn:hover { background: #2D3139; }
.right-buttons .plus-btn {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}
.right-buttons .plus-btn:hover { background: var(--color-border); transform: scale(1.05); }
body.dark .right-buttons .plus-btn { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.right-buttons .send-btn {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #fff;
}
.right-buttons .send-btn:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    transform: scale(1.05);
}
.right-buttons .action-btn i { font-size: 15px; }

/* 相机按钮 36px 圆形 */
.camera-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: none;
}
.camera-btn:hover { background: var(--color-border); }
body.dark .camera-btn { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
body.dark .camera-btn:hover { background: var(--color-bg-secondary); }

/* 移动端（≤768px）输入栏紧凑 */
@media (max-width: 768px) {
    .input-area { padding: 10px 12px; }
    #messageInput { height: 40px; min-height: 40px; max-height: 40px; line-height: 40px; font-size: 14px; }
    .right-buttons .action-btn { width: 36px; height: 36px; }
    .camera-btn { width: 36px; height: 36px; }
}

/* ---------- 4.11 暗色对比度修复（dark-wing / body.dark） ---------- */
body[data-skin="dark-wing"],
body.dark {
    --bg: #0F1115;            /* 页面主背景（非纯黑） */
    --surface: #1A1D23;       /* 卡片/侧栏 */
    --bg-soft: #1E222A;       /* AI 气泡 */
    --bg-muted: #252A33;      /* 输入框/悬停 */
    --text-1: #F1F3F6;
    --text-2: #9CA3AF;
    --text-3: #6B7280;
    --border: #2D3139;
    --menu-bg: #1A1D23;
    --menu-item-hover: #252A33;
    --input-bg: #1A1D23;
    --input-border: #2D3139;
    --tag-bg: #252A33;
    --tag-text: #9CA3AF;
    --brand: #818CF8;         /* 低饱和紫主色 */
    --brand-2: #A5B4FC;
    --brand-soft: rgba(129, 140, 248, 0.16);
}

/* AI 消息气泡：浅色 #F8FAFC / 深色 #1E222A + 边框 */
.bubble {
    background: var(--color-surface-ai);
    border: 1px solid transparent;
}
body.dark .bubble {
    background: var(--color-surface-ai);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* 用户消息气泡：品牌紫渐变（暗色降明度，避免刺眼） */
.message.user .bubble {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #fff;
    border: none;
}
body.dark .message.user .bubble {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}

/* 暗色下新对话按钮：低饱和绿 #10B981 */
body.dark .new-chat-btn {
    background: #10B981;
}
body.dark .new-chat-btn:hover {
    background: #0EA371;
}

/* 暗色下发送按钮：低饱和紫渐变 */
body.dark .right-buttons .send-btn {
    background: linear-gradient(135deg, #818CF8 0%, #A5B4FC 100%);
}
body.dark .right-buttons .send-btn:hover {
    background: linear-gradient(135deg, #818CF8 0%, #A5B4FC 100%);
    transform: scale(1.05);
}

/* 4.4 思考轨迹对比度（浅色下过淡修复） */
.trace-label { color: var(--color-text-secondary); }
.correct-btn { opacity: 0.75; }

/* 4.4 消息时间戳 12px 三级色 */
.bubble .time {
    font-size: 12px;
    color: var(--color-text-tertiary);
}
body.dark .bubble .time { color: var(--color-text-tertiary); }

/* ---------- 4.2 登录页：PC / 移动端卡片与表单规范 ---------- */
.login-section { align-items: center; }
.login-card {
    width: 420px;
    max-width: 92vw;
    padding: 40px 32px;
    border-radius: 24px;
}
@media (max-width: 768px) {
    .login-card {
        width: min(92vw, 400px);
        padding: 32px 24px;
        border-radius: 20px;
    }
}
.auth-tabs { gap: 6px; padding: 4px; background: var(--color-bg-tertiary); border-radius: 14px; margin-bottom: 20px; }
.auth-tab { height: 40px; border-radius: 12px; }
.auth-tab.active {
    background: #EEF2FF;
    color: #4F46E5;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.15);
}
body.dark .auth-tab.active { background: #252A33; color: #A5B4FC; }
.input-group { margin-bottom: 16px; }
.input-group input {
    height: 48px;
    padding: 0 14px 0 40px;
    border-color: #E2E8F0;
    background: var(--color-bg-primary);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group input:focus { border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
@media (max-width: 768px) {
    .input-group input { height: 44px; }
}
.auth-btn {
    height: 48px;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    width: 100%;
    margin-top: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: opacity 0.2s, transform 0.15s;
}
.auth-btn:hover { opacity: 0.92; transform: translateY(-1px); }
@media (max-width: 768px) { .auth-btn { height: 44px; } }
.code-btn {
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
}
.register-link span { color: #4F46E5; }
.register-link span:hover { color: #3730A3; }

/* ---------- 4.7 设置弹窗：PC 规范 ---------- */
#settingsModal .modal-content {
    width: 480px;
    max-width: 92vw;
    max-height: 85vh;
    padding: 28px 32px;
}
#settingsModal .modal-content label {
    font-size: 12px;
    color: #64748B;
    margin-bottom: 6px;
    display: block;
    text-align: left;
}
body.dark #settingsModal .modal-content label { color: #9CA3AF; }
#settingsModal .modal-content input[type="text"],
#settingsModal .modal-content select {
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: var(--text-1);
    font-size: 14px;
}
body.dark #settingsModal .modal-content input[type="text"],
body.dark #settingsModal .modal-content select {
    background: #252A33;
    border-color: #2D3139;
    color: var(--text-1);
}
#settingsModal .modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
#settingsModal .modal-actions button {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
#settingsModal #saveSettings {
    background: #6366F1;
    color: #fff;
    font-weight: 600;
}
#settingsModal #saveSettings:hover { background: #4F46E5; }
#settingsModal .modal-actions .close-btn {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}
body.dark #settingsModal #saveSettings { background: #6366F1; }
body.dark #settingsModal #saveSettings:hover { background: #4F46E5; }

/* ---------- 4.7 设置弹窗：移动端底部 Sheet ---------- */
@media (max-width: 768px) {
    #settingsModal { align-items: flex-end; }
    #settingsModal .modal-content {
        width: 100vw;
        max-width: 100vw;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 20px 20px 0 0;
        padding: 8px 20px 24px;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
    }
    #settingsModal .modal-content::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #CBD5E1;
        border-radius: 2px;
        margin: 8px auto 16px;
    }
    #settingsModal .modal-actions {
        position: sticky;
        bottom: 0;
        background: var(--color-bg-primary);
        padding: 12px 0 4px;
        margin-top: 16px;
    }
    #settingsModal .modal-actions button { height: 48px; }
    .style-picker { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------- 4.10 会话列表信息架构 ---------- */
.session-item {
    height: auto;
    min-height: 64px;
    padding: 10px 16px;
    border-radius: 12px;
    gap: 10px;
    position: relative;
}
.session-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.session-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: none;
}
.session-preview {
    font-size: 12px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
}
.session-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.session-time {
    font-size: 12px;
    color: var(--color-text-tertiary);
}
.session-item.active {
    background: #EEF2FF;
}
.session-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: #6366F1;
}
body.dark .session-item.active {
    background: #1E2230;
}
body.dark .session-item.active::before { background: #818CF8; }
.session-item:hover {
    background: #F1F5F9;
    transform: none;
    box-shadow: none;
}
body.dark .session-item:hover { background: #252A33; }
.session-item:hover .session-actions { opacity: 1; }
.session-actions { gap: 6px; }
.session-actions button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
}
@media (max-width: 768px) {
    .session-item { min-height: 72px; padding: 12px 16px; }
}

/* ---------- 4.8 照片管理弹窗 ---------- */
#photoModal .modal-content {
    width: 560px;
    max-width: 92vw;
    padding: 24px;
}
#photoModal .modal-content > div:first-child { margin-bottom: 14px; }
#photoUploadBtn {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    background: #6366F1;
}
#photoUploadBtn:hover { background: #4F46E5; opacity: 1; }
.photo-manage-item {
    padding: 12px;
    gap: 12px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}
body.dark .photo-manage-item { background: var(--color-bg-secondary); border-color: var(--color-border); }
.photo-manage-item img { width: 72px; height: 72px; border-radius: 8px; }
.photo-manage-desc { font-size: 14px; color: var(--color-text-primary); }
.photo-manage-meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.photo-manage-ops {
    flex-direction: row;
    gap: 6px;
    flex-shrink: 0;
}
.photo-manage-ops button {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.photo-manage-ops button:hover { background: var(--color-border); }
.photo-manage-ops button.danger { background: #FEE2E2; color: #EF4444; }
.photo-manage-ops button.danger:hover { background: #FECACA; }
body.dark .photo-manage-ops button { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
body.dark .photo-manage-ops button.danger { background: rgba(239, 68, 68, 0.15); color: #F87171; }
#photoModal .close-btn {
    width: 120px;
    height: 40px;
    border-radius: 10px;
    margin: 14px auto 0;
    display: block;
    border: none;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
}
.photo-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-tertiary);
    font-size: 14px;
}
.photo-empty .empty-icon { font-size: 56px; display: block; margin-bottom: 12px; }
.photo-empty .empty-sub { font-size: 12px; margin-top: 6px; }

/* ---------- 4.9 照片编辑弹窗 ---------- */
#photoEditModal .modal-content {
    width: 480px;
    max-width: 92vw;
    padding: 24px 28px;
}
#photoEditModal img {
    max-height: 200px;
    border-radius: 12px;
    margin: 0 auto 14px;
    display: block;
    object-fit: contain;
}
#photoEditModal label {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    display: block;
}
#editPhotoDesc {
    min-height: 120px;
    max-height: 240px;
    resize: vertical;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    box-sizing: border-box;
}
.photo-edit-field {
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}
#photoEditModal .photo-edit-save,
#photoEditModal .photo-edit-cancel {
    width: calc(50% - 6px);
    height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
#photoEditModal .photo-edit-save { background: #6366F1; color: #fff; }
#photoEditModal .photo-edit-save:hover { background: #4F46E5; }
#photoEditModal .photo-edit-cancel { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }

/* 照片弹窗移动端 Sheet */
@media (max-width: 768px) {
    #photoModal, #photoEditModal { align-items: flex-end; }
    #photoModal .modal-content, #photoEditModal .modal-content {
        width: 100vw;
        max-width: 100vw;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        padding: 8px 20px 24px;
    }
    .photo-manage-item { flex-wrap: wrap; }
    .photo-manage-ops { flex-direction: row; width: 100%; justify-content: flex-end; }
}

/* ---------- 3.5 按钮语义：主操作品牌紫蓝 / 新对话按皮肤 ---------- */
.new-chat-btn {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #fff;
    border: none;
}
.new-chat-btn:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    transform: scale(1.02);
}
body.dark .new-chat-btn { background: #10B981; }
body.dark .new-chat-btn:hover { background: #0EA371; transform: scale(1.02); }
body[data-skin="sakura"] .new-chat-btn { background: #EC4899; }
body[data-skin="sakura"] .new-chat-btn:hover { background: #DB2777; }

/* ---------- 4.6 右上角菜单规范 ---------- */
.dropdown-menu { width: 200px; }
@media (max-width: 768px) { .dropdown-menu { width: min(220px, 80vw); } }
.dropdown-item {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
    gap: 10px;
}
.dropdown-item i { font-size: 16px; color: #64748B; }
.dropdown-item:hover i { color: #6366F1; }
body.dark .dropdown-item i { color: #9CA3AF; }
body.dark .dropdown-item:hover i { color: #A5B4FC; }
.dropdown-submenu .dropdown-item { min-height: 40px; padding: 10px 16px 10px 46px; font-size: 13px; }
/* 危险项（退出APP） */
.dropdown-item.danger { color: #EF4444; }
.dropdown-item.danger i { color: #EF4444; }
.dropdown-item.danger:hover { background: #FEF2F2; }
.dropdown-item.danger:hover i { color: #EF4444; }
body.dark .dropdown-item.danger { color: #F87171; }
body.dark .dropdown-item.danger i { color: #F87171; }
body.dark .dropdown-item.danger:hover { background: #3F1C1C; }

/* ---------- 4.3 欢迎态 ---------- */
.welcome-title { font-size: 24px; font-weight: 700; }
@media (max-width: 768px) { .welcome-title { font-size: 20px; } }
.welcome-sub { font-size: 14px; color: #64748B; }
.welcome-logo {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.welcome-suggestions { gap: 12px; }
.suggest-btn {
    padding: 16px;
    border-radius: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    box-shadow: none;
}
.suggest-btn:hover {
    border-color: #6366F1;
    color: #6366F1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}
body.dark .suggest-btn { background: var(--color-bg-secondary); border-color: var(--color-border); }
body.dark .suggest-btn:hover { border-color: #818CF8; color: #A5B4FC; }

/* ---------- 4.12 雾樱甜梦皮肤优化 ---------- */
body[data-skin="sakura"] {
    --bg: #FFF5F7;
    --surface: #FFF0F3;
    --brand: #EC4899;
    --brand-2: #F472B6;
    --brand-grad: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
    --brand-soft: rgba(236, 72, 153, 0.12);
    --border: #FCE7EC;
    --menu-item-hover: #FDF0F5;
    --input-bg: #FFFFFF;
    --input-border: #FCE7EC;
    --tag-bg: #FBE9F1;
    --tag-text: #C25E83;
}
body[data-skin="sakura"] .bubble {
    background: #FFFFFF;
    border-color: #FCE7EC;
}
body[data-skin="sakura"] .message.user .bubble {
    background: linear-gradient(135deg, #F48FB1 0%, #E6649C 100%);
    border: none;
}
body[data-skin="sakura"] .right-buttons .send-btn {
    background: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
}
body[data-skin="sakura"] .right-buttons .send-btn:hover {
    background: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
    transform: scale(1.05);
}
body[data-skin="sakura"] .auth-btn {
    background: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
}
body[data-skin="sakura"] #saveSettings {
    background: #EC4899;
}
body[data-skin="sakura"] #saveSettings:hover { background: #DB2777; }
body[data-skin="sakura"] .session-item.active {
    background: #FBE9F1;
}
body[data-skin="sakura"] .session-item.active::before { background: #EC4899; }

/* ---------- UI4.0 回归修复（2026-09-01 v35） ---------- */
@media (max-width: 768px) {
    .login-card { padding: 32px 24px 16px 24px !important; }
    .dropdown-menu { width: min(220px, 80vw) !important; }
}
/* 清除会话选中项旧的绿色左侧指示条（保留 ::before 紫色指示条） */
.session-item.active { border-left: 4px solid transparent; }
body.dark .session-item.active { border-left: 4px solid transparent; }

/* ---------- UI4.0 回归修复 v36（2026-09-01） ---------- */
/* 1. AI 消息气泡背景（浅 #F8FAFC / 深 #1E222A），覆盖旧 var(--surface) 规则 */
.message.assistant .bubble { background: var(--color-surface-ai) !important; }
body.dark .message.assistant .bubble { background: var(--color-surface-ai) !important; }

/* 2. 暗色页面背景：硬编码 #171a20 → 变量（dark-wing 下 #0F1115） */
body.dark .messages-area { background-color: var(--bg) !important; }
body.dark .welcome-view { background-color: var(--bg) !important; }

/* 3. 登录卡片 PC 内边距 40/32（覆盖旧 !important） */
.login-card { padding: 40px 32px !important; }
@media (max-width: 768px) {
    .login-card { padding: 32px 24px 16px 24px !important; }
    .dropdown-menu { max-width: min(220px, 80vw) !important; }
}

/* 会话时间分组标题 */
.session-group {
    padding: 10px 12px 4px;
    font-size: 11px;
    color: var(--text-3, #999);
    letter-spacing: .5px;
    user-select: none;
}

/* 会话搜索框 */
.session-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 12px 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--surface-2, rgba(0,0,0,.05));
    color: var(--text-3, #999);
    transition: box-shadow .2s;
}
.session-search:focus-within {
    box-shadow: 0 0 0 2px var(--accent, #4f7cff);
    background: var(--surface-2, rgba(0,0,0,.05));
}
.session-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-1, #222);
    font-size: 13px;
    min-width: 0;
}
.session-search .search-kbd {
    font-size: 10px;
    color: var(--text-3, #999);
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 4px;
    padding: 1px 5px;
    font-family: inherit;
    display: none;
}
@media (min-width: 900px) {
    .session-search .search-kbd { display: inline-block; }
}

/* 停止生成态 */
.send-btn.generating {
    color: #f44336;
    background: rgba(244, 67, 54, .12);
}

/* 消息淡入动画 */
.message { animation: msgIn .32s ease both; }
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* AI 思考态文字 */
.thinking-text {
    font-size: 12px;
    color: var(--text-3, #999);
    margin-top: 6px;
    letter-spacing: .3px;
}
.typing-indicator { display: flex; gap: 5px; padding: 4px 0; }
.typing-indicator span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-3, #999);
    animation: blink 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .3; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }

/* 照片管理 FAB（移动端悬浮） */
 }

/* 欢迎页建议卡片升级 */
.suggest-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border, rgba(0,0,0,.08));
    background: var(--surface-2, rgba(255,255,255,.7));
    color: var(--text-1, #222);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
    backdrop-filter: blur(6px);
}
.suggest-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.10); border-color: var(--accent, #667eea); }
.suggest-btn:active { transform: scale(.97); }

/* 照片编辑区对比度增强 */
#photoModal .modal-content label { font-size: 13px; color: var(--text-1, #333); font-weight: 600; margin-top: 12px; }
.photo-edit-field {
    border: 1.5px solid var(--border, #e2e8f0) !important;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    background: var(--surface-2, #f8fafc);
    color: var(--text-1, #222);
}
.photo-edit-field:focus { outline: none; border-color: var(--accent, #667eea) !important; box-shadow: 0 0 0 3px rgba(102,126,234,.15); }

/* 按钮点击微反馈（ripple 简化） */
.action-btn:active, .dropdown-item:active, .session-item:active, .new-chat-btn:active { transform: scale(.96); }
.action-btn, .dropdown-item, .session-item, .new-chat-btn { transition: transform .12s ease, background .2s ease; }

/* 页面切换淡入（会话切换） */
.messages-area, .welcome-view { animation: pageIn .25s ease; }
@keyframes pageIn { from { opacity: .4; } to { opacity: 1; } }

/* 消息反馈按钮（点赞/点踩/分享） */
.msg-feedback-btn {
    background: none; border: none; cursor: pointer;
    opacity: .55; font-size: 13px; margin-left: 6px;
    color: var(--text-3, #999);
    transition: opacity .2s, transform .12s, color .2s;
    padding: 2px 4px;
}
.msg-feedback-btn:hover { opacity: 1; transform: scale(1.15); }
.msg-feedback-btn.active { opacity: 1; }