/* === ChatGPT風Markdown拡張スタイル === */

/* ChatGPT風テーブルラッパー（横スクロール対応・スクロールバー非表示） */
.chatgpt-table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
    /* スクロールバーを非表示にする */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.chatgpt-table-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* ChatGPT風テーブル本体 */
.chatgpt-table,
.message-content table {
    width: max-content; /* コンテンツ幅に応じて横幅を決定 */
    min-width: 100%; /* 最低でもコンテナ幅 */
    table-layout: fixed;
    border-collapse: collapse; /* 横グリッド線が途切れないように結合 */
    border-spacing: 0;
    background: transparent;
    font-size: 14px;
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: 400;
}

.chatgpt-table-header,
.message-content table th {
    background: transparent;
    padding: 12px 32px 6px 2px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text-primary, #374151);
    vertical-align: middle;
    width: var(--chatgpt-table-column-width, 200px);
    max-width: var(--chatgpt-table-column-width, 200px);
}

.chatgpt-table-cell,
.message-content table td {
    padding: 12px 32px 10px 2px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--text-primary, #374151);
    vertical-align: top;
    line-height: 1.75;
    background: transparent;
    width: var(--chatgpt-table-column-width, 200px);
    max-width: var(--chatgpt-table-column-width, 200px);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-weight: 400;
}

.chatgpt-table {
    margin: 0;
}

.message-content table:not(.chatgpt-table) {
    margin: 16px 0 32px; /* テーブルと続く文章の間に余白を確保 */
}

.chatgpt-table tbody tr:last-child .chatgpt-table-cell,
.message-content table tbody tr:last-child td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    padding-bottom: 48px; /* 最終行のライン上下に余白を確保 */
}

.chatgpt-table-cell strong,
.message-content table td strong {
    font-weight: 600;
}

.chatgpt-table-cell > :where(p, div, span, strong, em, a),
.message-content table td > :where(p, div, span, strong, em, a) {
    margin: 0;
}

/* ChatGPT風リストスタイル */
.chatgpt-list {
    line-height: 1.75;
    margin: 12px 0;
}

.chatgpt-list li {
    margin: 8px 0;
}

.chatgpt-ordered-list {
    counter-reset: item;
}

.chatgpt-ordered-list > li {
    display: block;
    position: relative;
}

.chatgpt-ordered-list > li::before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: 600;
    margin-right: 8px;
    color: var(--text-secondary, #4a5568);
}

/* ChatGPT風インラインコード */
.chatgpt-inline-code {
    background: var(--bg-code, #ededed);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.9em;
    color: var(--text-primary, #2d3748);
    border: 1px solid var(--border-primary, #d1d5db);
}

/* コードブロックのシンタックスハイライト（Pygments） */
.codehilite {
    margin: 16px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-primary, #d1d5db);
}

.codehilite pre {
    margin: 0;
    padding: 16px;
    background: var(--bg-code-ai, #f3f4f6) !important;
    overflow-x: auto;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.9em;
    line-height: 1.6;
}

.codehilite pre::-webkit-scrollbar {
    height: 8px;
}

.codehilite pre::-webkit-scrollbar-track {
    background: var(--bg-secondary, #e5e7eb);
}

.codehilite pre::-webkit-scrollbar-thumb {
    background: var(--border-secondary, #9ca3af);
    border-radius: 4px;
}

/* 通常のコードブロック（Pygmentsなし） */
.chatgpt-code-block {
    margin: 16px 0;
    border-radius: 8px;
    background: var(--bg-code-ai, #f3f4f6);
    border: 1px solid var(--border-primary, #d1d5db);
    overflow-x: auto;
}

.chatgpt-code-block code {
    display: block;
    padding: 16px;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.9em;
    line-height: 1.6;
    color: var(--text-primary, #1f2937);
}

/* Pygments用のトークンカラー（ライトモード・GitHub風） */
.codehilite .hll { background-color: #ffffcc }
.codehilite .c { color: #6a737d; font-style: italic } /* Comment */
.codehilite .k { color: #d73a49; font-weight: bold } /* Keyword */
.codehilite .o { color: #d73a49 } /* Operator */
.codehilite .cm { color: #6a737d; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #d73a49; font-weight: bold } /* Comment.Preproc */
.codehilite .c1 { color: #6a737d; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #6a737d; font-style: italic } /* Comment.Special */
.codehilite .kc { color: #005cc5; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #d73a49; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #d73a49; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #d73a49; font-weight: bold } /* Keyword.Pseudo */
.codehilite .kr { color: #d73a49; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #d73a49; font-weight: bold } /* Keyword.Type */
.codehilite .m { color: #005cc5 } /* Literal.Number */
.codehilite .s { color: #032f62 } /* Literal.String */
.codehilite .na { color: #005cc5 } /* Name.Attribute */
.codehilite .nb { color: #005cc5 } /* Name.Builtin */
.codehilite .nc { color: #6f42c1; font-weight: bold } /* Name.Class */
.codehilite .no { color: #005cc5 } /* Name.Constant */
.codehilite .nd { color: #6f42c1 } /* Name.Decorator */
.codehilite .ni { color: #005cc5 } /* Name.Entity */
.codehilite .ne { color: #6f42c1; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #6f42c1; font-weight: bold } /* Name.Function */
.codehilite .nl { color: #005cc5 } /* Name.Label */
.codehilite .nn { color: #6f42c1 } /* Name.Namespace */
.codehilite .nt { color: #22863a } /* Name.Tag */
.codehilite .nv { color: #e36209 } /* Name.Variable */
.codehilite .ow { color: #d73a49; font-weight: bold } /* Operator.Word */
.codehilite .mb { color: #005cc5 } /* Literal.Number.Bin */
.codehilite .mf { color: #005cc5 } /* Literal.Number.Float */
.codehilite .mh { color: #005cc5 } /* Literal.Number.Hex */
.codehilite .mi { color: #005cc5 } /* Literal.Number.Integer */
.codehilite .mo { color: #005cc5 } /* Literal.Number.Oct */
.codehilite .sb { color: #032f62 } /* Literal.String.Backtick */
.codehilite .sc { color: #032f62 } /* Literal.String.Char */
.codehilite .sd { color: #032f62; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #032f62 } /* Literal.String.Double */
.codehilite .se { color: #032f62 } /* Literal.String.Escape */
.codehilite .sh { color: #032f62 } /* Literal.String.Heredoc */
.codehilite .si { color: #032f62 } /* Literal.String.Interpol */
.codehilite .sx { color: #032f62 } /* Literal.String.Other */
.codehilite .sr { color: #032f62 } /* Literal.String.Regex */
.codehilite .s1 { color: #032f62 } /* Literal.String.Single */
.codehilite .ss { color: #032f62 } /* Literal.String.Symbol */

/* Pygments用のトークンカラー（ダークモード・Monokai風） */
@media (prefers-color-scheme: dark) {
    .chatgpt-table-header,
    .message-content table th {
        border-bottom-color: rgba(107, 114, 128, 0.45);
        color: var(--text-primary, #e5e7eb);
    }
    
    .chatgpt-table-cell,
    .message-content table td {
        border-bottom-color: rgba(107, 114, 128, 0.45);
        color: var(--text-secondary, #d1d5db);
    }
    
    .chatgpt-inline-code {
        background: var(--bg-code, #3a3a3a);
        color: var(--text-primary, #e8e8e8);
        border-color: var(--border-primary, #505050);
    }
    
    .codehilite {
        border-color: var(--border-primary, #505050);
    }
    
    .codehilite pre {
        background: var(--bg-code-ai, #2b2b2b) !important;
    }
    
    .chatgpt-code-block {
        background: var(--bg-code-ai, #2b2b2b);
        border-color: var(--border-primary, #505050);
    }
    
    .chatgpt-code-block code {
        color: var(--text-primary, #e8e8e8);
    }
    
    .codehilite .hll { background-color: #3e3d32 }
    .codehilite .c { color: #75715e } /* Comment */
    .codehilite .k { color: #f92672 } /* Keyword */
    .codehilite .o { color: #f92672 } /* Operator */
    .codehilite .cm { color: #75715e } /* Comment.Multiline */
    .codehilite .cp { color: #75715e } /* Comment.Preproc */
    .codehilite .c1 { color: #75715e } /* Comment.Single */
    .codehilite .cs { color: #75715e } /* Comment.Special */
    .codehilite .kc { color: #66d9ef } /* Keyword.Constant */
    .codehilite .kd { color: #66d9ef } /* Keyword.Declaration */
    .codehilite .kn { color: #f92672 } /* Keyword.Namespace */
    .codehilite .kp { color: #66d9ef } /* Keyword.Pseudo */
    .codehilite .kr { color: #66d9ef } /* Keyword.Reserved */
    .codehilite .kt { color: #66d9ef } /* Keyword.Type */
    .codehilite .m { color: #ae81ff } /* Literal.Number */
    .codehilite .s { color: #e6db74 } /* Literal.String */
    .codehilite .na { color: #a6e22e } /* Name.Attribute */
    .codehilite .nb { color: #f8f8f2 } /* Name.Builtin */
    .codehilite .nc { color: #a6e22e } /* Name.Class */
    .codehilite .no { color: #66d9ef } /* Name.Constant */
    .codehilite .nd { color: #a6e22e } /* Name.Decorator */
    .codehilite .ni { color: #f8f8f2 } /* Name.Entity */
    .codehilite .ne { color: #a6e22e } /* Name.Exception */
    .codehilite .nf { color: #a6e22e } /* Name.Function */
    .codehilite .nl { color: #f8f8f2 } /* Name.Label */
    .codehilite .nn { color: #f8f8f2 } /* Name.Namespace */
    .codehilite .nt { color: #f92672 } /* Name.Tag */
    .codehilite .nv { color: #f8f8f2 } /* Name.Variable */
    .codehilite .ow { color: #f92672 } /* Operator.Word */
    .codehilite .mb { color: #ae81ff } /* Literal.Number.Bin */
    .codehilite .mf { color: #ae81ff } /* Literal.Number.Float */
    .codehilite .mh { color: #ae81ff } /* Literal.Number.Hex */
    .codehilite .mi { color: #ae81ff } /* Literal.Number.Integer */
    .codehilite .mo { color: #ae81ff } /* Literal.Number.Oct */
    .codehilite .sb { color: #e6db74 } /* Literal.String.Backtick */
    .codehilite .sc { color: #e6db74 } /* Literal.String.Char */
    .codehilite .sd { color: #e6db74 } /* Literal.String.Doc */
    .codehilite .s2 { color: #e6db74 } /* Literal.String.Double */
    .codehilite .se { color: #ae81ff } /* Literal.String.Escape */
    .codehilite .sh { color: #e6db74 } /* Literal.String.Heredoc */
    .codehilite .si { color: #e6db74 } /* Literal.String.Interpol */
    .codehilite .sx { color: #e6db74 } /* Literal.String.Other */
    .codehilite .sr { color: #e6db74 } /* Literal.String.Regex */
    .codehilite .s1 { color: #e6db74 } /* Literal.String.Single */
    .codehilite .ss { color: #e6db74 } /* Literal.String.Symbol */
}

/* テーブルのレスポンシブ改善 */
@media (max-width: 768px) {
    .chatgpt-table-wrapper {
        margin: 12px -12px; /* モバイルで画面幅いっぱいに */
    }
    
    .chatgpt-table-header,
    .chatgpt-table-cell,
    .message-content table th,
    .message-content table td {
        padding: 12px 12px; /* モバイルでも余白を確保しつつ圧縮 */
    }
}