/* ═══════════════════════════════════════════════════════
   CODE BLOCK STYLES  — add to your ai-chat.css
   ════════════════════════════════════════════════════════ */

/* Wrapper around the whole code block */
.ll-code-wrap {
  margin: 12px 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1e1e2e;
  /* dark background for all themes */
}

/* Toolbar: language label + copy button */
.ll-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Language badge (e.g. "python", "javascript") */
.ll-code-lang {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: lowercase;
}

/* Copy button */
.ll-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ll-copy-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
}

.ll-copy-btn i {
  font-size: 11px;
}

/* The <pre> element — no extra margin, flush with the wrapper */
.ll-code-pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: transparent;
  /* Preserve ALL whitespace and indentation exactly.
     !important defeats any CSS reset in theme.css / dashboard.css
     that might set white-space: normal on pre elements. */
  white-space: pre !important;
  word-break: normal;
  overflow-wrap: normal;
}

/* The <code> element inside <pre> */
.ll-code-pre code {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.65;
  /* Explicit white-space + display: block so newlines in the text content
     are always rendered as line breaks, and the element fills the full width. */
  white-space: pre;
  display: block;
  tab-size: 4;
  -moz-tab-size: 4;
}

/* Inline code (not inside a code block) */
.ll-inline-code {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(var(--accent-rgb, 123, 63, 242), 0.1);
  border: 1px solid rgba(var(--accent-rgb, 123, 63, 242), 0.2);
  color: var(--accent, #7b3ff2);
  white-space: nowrap;
}

/* Prism token overrides — ensure colours show inside .ll-code-pre */
.ll-code-pre .token.keyword {
  color: #c792ea;
}

.ll-code-pre .token.string {
  color: #c3e88d;
}

.ll-code-pre .token.comment {
  color: #546e7a;
  font-style: italic;
}

.ll-code-pre .token.function {
  color: #82aaff;
}

.ll-code-pre .token.number {
  color: #f78c6c;
}

.ll-code-pre .token.operator {
  color: #89ddff;
}

.ll-code-pre .token.class-name {
  color: #ffcb6b;
}

.ll-code-pre .token.punctuation {
  color: #89ddff;
}

.ll-code-pre .token.builtin {
  color: #82aaff;
}

/* Scrollbar inside code blocks */
.ll-code-pre::-webkit-scrollbar {
  height: 5px;
}

.ll-code-pre::-webkit-scrollbar-track {
  background: transparent;
}

.ll-code-pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.ll-code-pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}