body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 5px;
            padding-left: 20px;
            padding-right: 20px;
            background: linear-gradient(to bottom right, #f8f9f8, #e0e0f0);
            min-height: 98vh;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background 0.3s ease;
        }
        #chat-container {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: calc(100% - 40px);
            max-width: 1000px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        #chat-messages {
            position: relative;
            min-height: 340px;
            max-height: 340px;
            overflow-y: auto;
            margin-bottom: 20px;
            padding: 20px;
            transition: background-color 0.3s ease;
        }
        #chat-messages::before {
            content: "我是CZLJChat，很高兴见到你！";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            color: #000;
            opacity: 0.4;
            font-weight: bold;
            z-index: 1;
            white-space: nowrap;
            transition: color 0.3s ease;
        }
        #chat-messages:has(.message)::before {
            display: none;
        }
        .message {
            margin-bottom: 8px;
            padding: 5px 10px;
            border-radius: 10px;
            display: flex;
            align-items: flex-start;
            line-height: 1.5;
            position: relative;
            transition: background-color 0.3s ease;
        }
        .user-message {
            background-color: #e3f2fd;
            margin-left: auto;
            margin-right: 0;
            max-width: 80%;
            width: fit-content;
            padding-top: 0px;
            padding-bottom: 0px;
            transition: background-color 0.3s ease;
        }
        .bot-message {
            background-color: #ffffff;
            margin-right: auto;
            margin-left: 0;
            max-width: 80%;
            width: fit-content;
            transition: background-color 0.3s ease;
        }
        .code-block {
            background-color: #f0f0f0;
            color: #333;
            padding: 10px;
            border-radius: 5px;
            font-family: Consolas, monospace;
            overflow-x: auto;
            white-space: pre-wrap;
            margin: 10px 0;
            position: relative;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .code-block .code-language {
            position: absolute;
            top: 5px;
            left: 5px;
            padding: 2px 5px;
            font-size: 12px;
            background-color: #444;
            color: #fff;
            border-radius: 3px;
            font-family: Consolas, monospace;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .code-block .copy-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            padding: 2px 5px;
            font-size: 12px;
            background-color: #444;
            color: #fff;
            border-radius: 3px;
            cursor: pointer;
            font-family: Arial, sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .code-block .copy-btn:hover {
            background-color: #666;
        }
        .code-block .line-numbers {
            float: left;
            width: 40px;
            user-select: none;
            color: #999;
            transition: color 0.3s ease;
        }
        .code-block .line-contents {
            margin-left: 40px;
            transition: color 0.3s ease;
        }
        #input-container {
            position: relative;
        }
        #user-input {
            width: calc(100% - 20px);
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            resize: vertical;
            min-height: 70px;
            max-height: 150px;
            overflow-y: auto;
            background-color: #fafafa;
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }
        .button-container {
            position: absolute;
            right: 10px;
            bottom: 10px;
            display: flex;
            gap: 8px;
        }
        .left-button-container {
            position: absolute;
            left: 10px;
            bottom: 10px;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .model-select {
            padding: 4px 8px;
            border: 1px solid #cccccc;
            border-radius: 15px;
            background-color: #ffffff;
            font-size: 12px;
            transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        }
        .reason-button {
            padding: 4px 8px;
            border: 1px solid #cccccc;
            border-radius: 15px;
            background-color: #ffffff;
            color: #000;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .reason-button.active {
            border-color: #007bff;
            color: #007bff;
            box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
        }
        #reason-toggle {
            display: none;
            margin-left: 8px;
        }
        .send-button {
            width: 32px;
            height: 32px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        .send-button:hover {
            background-color: #0056b3;
        }
        .send-button::after {
            content: "➜";
            font-size: 16px;
        }
        .file-upload-label {
            width: 32px;
            height: 32px;
            background-color: #fefefe;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        .file-upload-label:hover {
            background-color: #eeeeee;
        }
        .file-upload-label::after {
            content: "✚";
            font-size: 16px;
            color: #666666;
            transition: color 0.3s ease;
        }
        #file-input {
            display: none;
        }
        .delete-button {
            width: 32px;
            height: 32px;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        .delete-button:hover {
            background-color: #bb2d3b;
        }
        .delete-button::after {
            content: "🗑";
            font-size: 16px;
        }
        .send-button.loading::after {
            content: "";
            width: 16px;
            height: 16px;
            border: 2px solid #fff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        @media (max-width: 768px) {
            body {
                padding: 10px;
                background-color: #fff;
            }
            #chat-container {
                padding: 12px;
                border-radius: 8px;
                box-shadow: none;
            }
            #chat-messages {
                min-height: 60vh;
                max-height: 60vh;
                margin-bottom: 15px;
                padding: 8px;
            }
            #chat-messages::before {
                font-size: 18px;
            }
            .message {
                font-size: 14px;
                max-width: 85%;
                margin-bottom: 10px;
                padding: 8px;
            }
            #user-input {
                min-height: 70px;
                max-height: 150px;
                font-size: 14px;
                padding: 8px;
            }
            .send-button,
            .file-upload-label {
                width: 28px;
                height: 28px;
            }
            .send-button::after,
            .file-upload-label::after {
                font-size: 14px;
            }
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #f0f0f0;
            transition: background-color 0.3s ease;
        }
        .kimi-avatar {
            background-image: url("https://chat.czlj.net/icon/k.png");
            background-size: cover;
        }
        .chatgpt-avatar {
            background-image: url("https://chat.czlj.net/icon/c.png");
            background-size: cover;
        }
        .claude-avatar {
            background-image: url("https://chat.czlj.net/icon/cl.png");
            background-size: cover;
        }
        .deepseek-avatar {
            background-image: url("https://chat.czlj.net/icon/d.png");
            background-size: cover;
        }
        .message-actions {
            position: absolute;
            bottom: 5px;
            display: flex;
            gap: 5px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .user-message .message-actions {
            left: 10px;
        }
        .bot-message .message-actions {
            right: 10px;
        }
        .message:hover .message-actions {
            opacity: 1;
        }
        .copy-message, .delete-message {
            width: 24px;
            height: 24px;
            background-color: #f0f0f0;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            color: #333;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .copy-message:hover, .delete-message:hover {
            background-color: #e0e0e0;
        }
        .copy-message::after {
            content: "📋";
        }
        .delete-message::after {
            content: "🗑";
        }
        body.dark-theme {
            background: linear-gradient(to bottom right, #2c2c2c, #3a3a3a);
            color: #ffffff;
        }
        body.dark-theme #chat-container {
            background-color: #333333;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        body.dark-theme #chat-messages {
            background-color: #333333;
            color: #ffffff;
        }
        body.dark-theme #chat-messages::before {
            color: #ffffff;
        }
        body.dark-theme .message {
            background-color: #444444;
            color: #ffffff;
        }
        body.dark-theme .user-message {
            background-color: #3a506b;
            color: #ffffff;
        }
        body.dark-theme .bot-message {
            background-color: #444444;
            color: #ffffff;
        }
        body.dark-theme .code-block {
            background-color: #333333;
            color: #e0e0e0;
        }
        body.dark-theme .code-block .code-language {
            background-color: #222222;
            color: #e0e0e0;
        }
        body.dark-theme .code-block .copy-btn {
            background-color: #222222;
            color: #e0e0e0;
        }
        body.dark-theme .code-block .line-numbers {
            color: #999999;
        }
        body.dark-theme #user-input {
            background-color: #2f2f2f;
            border-color: #444444;
            color: #e0e0e0;
        }
        body.dark-theme .model-select {
            background-color: #333333;
            border-color: #444444;
            color: #e0e0e0;
        }
        body.dark-theme .reason-button {
            background-color: #333333;
            border-color: #444444;
            color: #e0e0e0;
        }
        body.dark-theme .reason-button.active {
            border-color: #007bff;
            color: #007bff;
        }
        body.dark-theme .send-button {
            background-color: #0056b3;
        }
        body.dark-theme .send-button:hover {
            background-color: #003d7a;
        }
        body.dark-theme .file-upload-label {
            background-color: #333333;
        }
        body.dark-theme .file-upload-label:hover {
            background-color: #444444;
        }
        body.dark-theme .file-upload-label::after {
            color: #e0e0e0;
        }
        body.dark-theme .delete-button {
            background-color: #a83232;
        }
        body.dark-theme .delete-button:hover {
            background-color: #8c2828;
        }
        body.dark-theme .avatar {
            background-color: #444444;
        }
        body.dark-theme .copy-message, body.dark-theme .delete-message {
            background-color: #444444;
            color: #e0e0e0;
        }
        body.dark-theme .copy-message:hover, body.dark-theme .delete-message:hover {
            background-color: #555555;
        }
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        body.dark-theme ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        body.dark-theme ::-webkit-scrollbar-track {
            background: #2a2a2a;
        }
        body.dark-theme ::-webkit-scrollbar-thumb {
            background: #555;
            border-radius: 4px;
        }
        body.dark-theme ::-webkit-scrollbar-thumb:hover {
            background: #777;
        }
        .theme-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: #ffffff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 100;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .theme-toggle:hover {
            background-color: #f0f0f0;
        }
        body.dark-theme .theme-toggle {
            background-color: #333333;
        }
        body.dark-theme .theme-toggle:hover {
            background-color: #444444;
        }
        .theme-toggle::after {
            content: "🌙";
            font-size: 20px;
        }
        body.dark-theme .theme-toggle::after {
            content: "☀️";
        }

        /* 结果容器样式 */
        .image-result-container {
            margin-top: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
            white-space: pre-wrap;
            color: #333;
            overflow-y: auto;
            max-height: 150px;
        }