/* チャットページ専用コードハイライト CSS */
/* 他のCSSと競合しないよう、.chat-containerスコープで制限 */
/* Shikiベースに統一。Prism/Pygments(.codehilite)依存は削除 */

.chat-container .message-wrapper.ai-message .message-content {
    /* Shiki 出力の基本調整 */
    pre.shiki {
        border-radius: 8px !important;
        padding: 16px !important;
        margin: 12px 0 !important;
        font-family: 'Monaco', 'Consolas', 'Lucida Console', monospace !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        overflow-x: auto !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid rgba(96, 112, 135, 0.6) !important; /* 少し強め */
    }

    pre.shiki code {
        font-family: inherit !important;
    }

    /* Prism互換のフォールバック（将来の互換用、Shiki未適用時のみ） */
    pre[class*="language-"] {
        background: #243042 !important;
        color: #e6edf3 !important;
        border-radius: 8px !important;
        padding: 16px !important;
        margin: 12px 0 !important;
        font-family: 'Monaco', 'Consolas', 'Lucida Console', monospace !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        overflow-x: auto !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid #46556b !important;
    }

    code[class*="language-"] {
        background: transparent !important;
        color: inherit !important;
        font-family: 'Monaco', 'Consolas', 'Lucida Console', monospace !important;
        font-size: 14px !important;
        text-shadow: none !important;
    }

    /* インラインコードのスタイル（既存のスタイルを拡張） */
    code:not(pre > code):not([class*="language-"]) {
        background: #eef2f7 !important;
        color: #1f2937 !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-family: 'Monaco', 'Consolas', 'Lucida Console', monospace !important;
        font-size: 13px !important;
        border: 1px solid #cbd5e1 !important;
        margin: 0 2px !important;
    }

    /* 新しいインラインコードクラス */
    .chat-inline-code {
        background: #f7fafc !important;
        color: #2d3748 !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-family: 'Monaco', 'Consolas', 'Lucida Console', monospace !important;
        font-size: 13px !important;
        border: 1px solid #e2e8f0 !important;
        margin: 0 2px !important;
    }

    /* コピーボタンのスタイル */
    .copy-to-clipboard-button {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        background: #4a5568 !important;
        color: #e2e8f0 !important;
        border: none !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        z-index: 10 !important;
        opacity: 0.8 !important;
    }

    .copy-to-clipboard-button:hover {
        background: #2d3748 !important;
        color: #ffffff !important;
        opacity: 1 !important;
    }

    /* コードブロックのコンテナ */
    .code-toolbar {
        position: relative !important;
        margin: 12px 0 !important;
    }

    .code-toolbar pre {
        margin: 0 !important;
    }

    /* Shiki/フォールバック用のコピーボタン */
    .code-toolbar { position: relative !important; margin: 12px 0 !important; }
    .code-toolbar pre { margin: 0 !important; }
    .copy-to-clipboard-button {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        background: rgba(74, 85, 104, 0.95) !important;
        color: #f1f5f9 !important;
        border: none !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        z-index: 10 !important;
        opacity: 0.9 !important;
    }

    /* スクロールバーのスタイル */
    pre[class*="language-"]::-webkit-scrollbar {
        height: 8px !important;
    }

    pre[class*="language-"]::-webkit-scrollbar-track {
        background: #4a5568 !important;
        border-radius: 4px !important;
    }

    pre[class*="language-"]::-webkit-scrollbar-thumb {
        background: #718096 !important;
        border-radius: 4px !important;
    }

    pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
        background: #a0aec0 !important;
    }

    /* 行番号のスタイル（必要に応じて） */
    .line-numbers .line-numbers-rows {
        padding-left: 0 !important;
        border-right: 1px solid #4a5568 !important;
    }

    .line-numbers-rows > span:before {
        color: #718096 !important;
        padding-right: 0.8em !important;
    }

    /* レスポンシブデザイン */
    @media (max-width: 768px) {
    pre[class*="language-"] {
            font-size: 12px !important;
            padding: 12px !important;
        }
        
        code:not(pre > code),
        .chat-inline-code {
            font-size: 12px !important;
            padding: 1px 4px !important;
        }
    }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    .chat-container .message-wrapper.ai-message .message-content {
        code:not(pre > code):not([class*="language-"]),
        .chat-inline-code {
            background: #4a5568 !important;
            color: #e2e8f0 !important;
            border-color: #718096 !important;
        }
    }
}