/* ============================================================
   ダークモード時のカラー定義 (背景色: #1B1B1B)
   ============================================================ */

/* ダークモード時にアイコンを左右反転させる処理 */
html[data-theme="dark"] #darkModeToggleBtn span {
    transform: scaleX(-1);
}

html[data-theme="dark"] {
    background-color: #1B1B1B;
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: #1B1B1B;
    color: #FFFFFF;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] .main-content-message-title {
    color: #FFFFFF;
    transition: color 0.3s ease;
}

html[data-theme="dark"] .input-container {
    background-color: #2A2A2A;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .starter-prompt {
    color: #E8EAED;
}

html[data-theme="dark"] .starter-prompt:hover {
    background: #303134;
}

html[data-theme="dark"] #user-prompt {
    color: #FFFFFF;
}

html[data-theme="dark"] #user-prompt::placeholder {
    color: #888888;
}

html[data-theme="dark"] .send-button {
    background-color: #333333;
    color: #898989;
    transition: width 0.3s cubic-bezier(0.16, 0.5, 0.3, 1.4), background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] .send-button.active {
    background: #FFFFFF;
    color: #1B1B1B;
}

html[data-theme="dark"] .send-button.active:hover {
    background: linear-gradient(#34cdff, #0061fe);
    color: #FFFFFF;
}

/* Chat 画面用の調整 */
html[data-theme="dark"] .chat-bottom-controls {
    background-color: #1B1B1B;
}

html[data-theme="dark"] .new-chat-button {
    background-color: #2A2A2A;
    color: #FFFFFF;
    border: 2px solid #3A3A3A;
}

html[data-theme="dark"] .new-chat-button:hover {
    transform: scale(1.06);
    background-color: #3A3A3A;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .new-chat-button:active {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .message-bubble {
    color: #FFFFFF;
}

html[data-theme="dark"] .user-message .message-bubble {
    background-color: #2A2A2A;
}

html[data-theme="dark"] .ai-message .message-bubble strong {
    color: #FFFFFF;
}

html[data-theme="dark"] .ai-message .message-bubble code {
    background-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .ai-message .message-bubble pre {
    background-color: #252525;
    border: 1px solid #383838;
}

html[data-theme="dark"] .ai-message .message-bubble pre code {
    color: #E1E4E8;
}

html[data-theme="dark"] .ai-message .message-bubble h1,
html[data-theme="dark"] .ai-message .message-bubble h2,
html[data-theme="dark"] .ai-message .message-bubble h3 {
    color: #FFFFFF;
}

/* ダイアログ */
html[data-theme="dark"] .custom-dialog {
    background-color: #2A2A2A;
}

html[data-theme="dark"] .dialog-title {
    color: #FFFFFF;
}

html[data-theme="dark"] .dialog-body {
    color: #dedede;
}

html[data-theme="dark"] .dialog-body strong {
    color: #FFFFFF;
}

html[data-theme="dark"] .dialog-disclosure {
    border-top-color: #484848;
    color: #dedede;
}

html[data-theme="dark"] .dialog-disclosure summary {
    color: #FFFFFF;
}

html[data-theme="dark"] .confirm-btn {
    background-color: #FFFFFF;
    color: #1B1B1B;
}

html[data-theme="dark"] .cancel-btn {
    background-color: #3A3A3A;
    color: #FFFFFF;
}

html[data-theme="dark"] .cancel-btn:hover {
    background-color: #4A4A4A;
}

html[data-theme="dark"] .custom-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0);
}

html[data-theme="dark"] .custom-dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

/* スクロールバー */
html[data-theme="dark"] {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

html[data-theme="dark"] .ai-message.loading-state .message-bubble {
    color: #898989;
}

html[data-theme="dark"] .ai-message .message-bubble li li {
    color: #AAAAAA;
}

html[data-theme="dark"] .header-logo img {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .send-button.stop-active {
    background: #FFFFFF;
    color: #1B1B1B;
}

html[data-theme="dark"] .send-button.stop-active:hover {
    background: #d93025;
    color: #FFFFFF;
}

/* コントロールボタン群 (インフォ/テーマ切替共通) */
html[data-theme="dark"] .control-icon-btn {
    color: #FFFFFF;
    background-color: #2A2A2A;
    border: 2px solid #3A3A3A;
}

html[data-theme="dark"] .control-icon-btn:hover {
    transform: scale(1.08);
    background-color: #3A3A3A;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .control-icon-btn:active {
    transform: scale(1.04);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .control-icon-btn span {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .new-chat-button span {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .chat-gradient-mask {
    background-color: #1B1B1B;
}

/* Error page */
html[data-theme="dark"] .error-icon {
    color: #FFFFFF;
}

html[data-theme="dark"] .error-title {
    color: #FFFFFF;
}

html[data-theme="dark"] .error-body {
    color: #B6B6B6;
}

@media (max-width: 720px) {
    html[data-theme="dark"] .new-chat-button:hover {
        transform: scale(1);
        background-color: #2A2A2A;
        box-shadow: none;
    }

    html[data-theme="dark"] .new-chat-button:active {
        transform: scale(1.04);
        background-color: #3A3A3A;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    }

    html[data-theme="dark"] .control-icon-btn:hover {
        background-color: #2A2A2A;
        transform: scale(1);
        box-shadow: none;
    }

    html[data-theme="dark"] .control-icon-btn:active {
        transform: scale(1.08);
        background-color: #3A3A3A;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    }
}