/* ========================================
   코드 블록 스타일 (Code Blocks)
   Phase 2.1c - 2025-10-02 07:30
   ======================================== */

/* 기본 코드 블록 스타일 */
.message-text pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  padding: 16px;
  margin: 12px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}

/* 코드 복사 버튼 */
.code-copy-btn {
  background: var(--code-copy-btn-bg);
  color: var(--code-copy-btn-fg);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0.8;
  transition: background 0.15s, color 0.15s;
}

.code-copy-btn:hover {
  background: var(--code-copy-btn-hover);
  color: #000;
  opacity: 1;
}

/* ========================================
   다크모드 VSCode 스타일
   ======================================== */

[data-theme="dark"] {
  --code-bg: #1e1e1e;
  --code-fg: #d4d4d4;
  --code-border: #333842;
  --code-inline-bg: #242830;
  --code-copy-btn-bg: #23272b;
  --code-copy-btn-fg: #bbb;
  --code-copy-btn-hover: #2d333b;
}

[data-theme="dark"] .message-text pre {
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
}

[data-theme="dark"] .message-text code {
  background: var(--code-inline-bg);
  color: var(--code-fg);
  border: 1px solid #333842;
}

[data-theme="dark"] .code-copy-btn {
  background: var(--code-copy-btn-bg);
  color: var(--code-copy-btn-fg);
}

[data-theme="dark"] .code-copy-btn:hover {
  background: var(--code-copy-btn-hover);
  color: #fff;
  opacity: 1;
}

/* ========================================
   VSCode 스타일 하이라이트 (토큰 색상)
   Highlight.js, Prism 등과 함께 사용
   ======================================== */

/* 다크모드 토큰 색상 */
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag {
  color: #569cd6;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-meta .hljs-string {
  color: #ce9178;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal {
  color: #b5cea8;
}

[data-theme="dark"] .hljs-comment {
  color: #6a9955;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-function {
  color: #dcdcaa;
}

[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable {
  color: #9cdcfe;
}

[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-type {
  color: #4ec9b0;
}

[data-theme="dark"] .hljs-attr {
  color: #d7ba7d;
}

[data-theme="dark"] .hljs-params {
  color: #9cdcfe;
}

[data-theme="dark"] .hljs-strong,
[data-theme="dark"] .hljs-emphasis {
  color: #fff;
  font-weight: bold;
}

[data-theme="dark"] .hljs-error,
[data-theme="dark"] .hljs-deletion {
  color: #f44747;
}

/* 라이트모드 토큰 색상 */
.hljs-keyword,
.hljs-selector-tag {
  color: #007acc;
}

.hljs-string,
.hljs-meta .hljs-string {
  color: #a31515;
}

.hljs-number,
.hljs-literal {
  color: #098658;
}

.hljs-comment {
  color: #008000;
}

.hljs-title,
.hljs-function {
  color: #795e26;
}

.hljs-variable,
.hljs-template-variable {
  color: #267f99;
}

.hljs-built_in,
.hljs-type {
  color: #267f99;
}

.hljs-attr {
  color: #795e26;
}

.hljs-params {
  color: #001080;
}

.hljs-strong,
.hljs-emphasis {
  color: #000;
  font-weight: bold;
}

.hljs-error,
.hljs-deletion {
  color: #b94a48;
}