/* ========================================================== */
/*           コードブロックのスタイル（<pre><code>対応）          */
/* ========================================================== */

/* pre要素の基本スタイル */
.chat-message.bot .message-content pre {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  line-height: 1.5;
}

/* ダークモード時のpre要素 */
:root.dark-mode .chat-message.bot .message-content pre {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* code要素の基本スタイル */
.chat-message.bot .message-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-color);
  display: block;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}

/* インラインコードの場合（pre内ではない） */
.chat-message.bot .message-content code:not(pre code) {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--text-color);
}

/* ダークモード時のインラインコード */
:root.dark-mode .chat-message.bot .message-content code:not(pre code) {
  background-color: rgba(255, 255, 255, 0.12);
}

/* コードブロック内のスクロールバーのスタイル */
.chat-message.bot .message-content pre::-webkit-scrollbar {
  height: 8px;
}

.chat-message.bot .message-content pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.chat-message.bot .message-content pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.chat-message.bot .message-content pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ダークモード時のスクロールバー */
:root.dark-mode .chat-message.bot .message-content pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

:root.dark-mode .chat-message.bot .message-content pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

:root.dark-mode .chat-message.bot .message-content pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}