/* ==========================================================================
   Atom One Dark (Customized for Chatbot UI)
   Base: highlight.js Atom One Dark theme
   Tweaks: better contrast in chat, padding, scrollbar, language label support
   ========================================================================== */

/* ---------- Base container for highlight.js ---------- */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 1rem 1.25rem;
  background: #282c34;          /* classic Atom One Dark background */
  color: #abb2bf;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  border-radius: 10px;
  border: 1px solid #303845;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* Smooth horizontal scrolling */
.hljs::-webkit-scrollbar {
  height: 8px;
}
.hljs::-webkit-scrollbar-track {
  background: transparent;
}
.hljs::-webkit-scrollbar-thumb {
  background: #3e4451;
  border-radius: 4px;
}

/* Slightly brighter selection inside code */
.hljs ::selection,
.hljs::selection {
  background: #3a3f4b;
}

/* ---------- Chatbot-specific wrapper (optional) ---------- */
/* Use if you wrap code blocks in e.g. <div class="ai-message"> ... */
.ai-message pre code.hljs,
.user-message pre code.hljs,
.chat-code-block pre code.hljs {
  background: transparent; /* hljs div already has bg */
}

/* If you prefer to wrap highlight.js in pre > code: */
pre code.hljs {
  display: block;
  padding: 0;
  margin: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Optional language label in top-right ---------- */
/* You can set data-lang="javascript" on the <pre> or container */
.hljs[data-lang]::before,
.chat-code-block[data-lang] .hljs::before {
  content: attr(data-lang);
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9da5b4;
  background: rgba(40, 44, 52, 0.9);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #3b4048;
}

/* ---------- Colors from Atom One Dark, with slight tweaks ---------- */
.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75;
}

.hljs-literal {
  color: #56b6c2;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
  color: #98c379;
}

.hljs-built_in,
.hljs-class .hljs-title {
  color: #e6c07b;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61afef;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 600;
}

/* Meta keywords (e.g. @decorators) */
.hljs-meta .hljs-keyword {
  color: #c678dd;
}

/* ---------- Diff / Insert / Delete highlighting ---------- */
.hljs-deletion {
  background-color: rgba(224, 108, 117, 0.15);
}

.hljs-addition {
  background-color: rgba(152, 195, 121, 0.12);
}

/* ---------- Inline code inside chat messages (non-hljs) ---------- */
.chat-message code:not(.hljs) {
  background: rgba(40, 44, 52, 0.85);
  color: #e5e9f0;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.85em;
}

/* ---------- Code block container in chat (recommended) ---------- */
.chat-code-block {
  margin: 0.5rem 0 1rem;
}

.chat-code-block pre {
  margin: 0;
  background: transparent;
  padding: 0;
  border-radius: 10px;
}

/* Optional: top bar for blocks, like many AI tools */
.chat-code-block.with-header {
  position: relative;
  margin-top: 0.75rem;
}

.chat-code-block.with-header::before {
  content: attr(data-title);
  display: block;
  font-size: 0.75rem;
  color: #9da5b4;
  background: #21252b;
  border-radius: 10px 10px 0 0;
  padding: 0.45rem 0.9rem;
  border: 1px solid #303845;
  border-bottom: none;
}

.chat-code-block.with-header .hljs {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ---------- Responsive font-size tweaks ---------- */
@media (max-width: 768px) {
  .hljs {
    font-size: 0.8rem;
    padding: 0.85rem 0.9rem;
  }
}