/* PixelPals markdown rendering — warm pixel aesthetic */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Inline code */
.msg-text code {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 15px;
  background: #F0E4C4;
  border: 2px solid #C8A050;
  padding: 1px 6px;
  color: var(--text);
  line-height: 1.5;
  display: inline;
}

/* Blockquotes */
.msg-text blockquote {
  border-left: 4px solid #C8A050;
  margin: 4px 0;
  padding: 4px 10px;
  color: var(--text-muted);
  font-style: italic;
  background: rgba(200,160,80,0.08);
}

/* Links */
.msg-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg-text a:hover { color: var(--accent-light); }

/* Bold / italic */
.msg-text strong { font-weight: 800; }
.msg-text em { font-style: italic; }

/* Code blocks */
.code-block-wrapper {
  position: relative;
  margin: 6px 0;
  border: 2px solid #C8A050;
  background: #F0E4C4;
  overflow: hidden;
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background: #E8D0A0;
  border-bottom: 2px solid #C8A050;
}

.code-lang-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #8A6030;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.code-block-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.code-copy-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  background: #C86420;
  color: #FFF8EC;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 2px 2px 0 #A04010;
  transition: all 0.15s;
  outline: none;
}
.code-copy-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #A04010;
}
.code-copy-btn.copied {
  background: #4A7A2A;
  box-shadow: 2px 2px 0 #2A5A0A;
}

.code-expand-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  background: #E8D0A0;
  color: #8A6030;
  border: 2px solid #C8A050;
  padding: 3px 6px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 2px 2px 0 #A08040;
  transition: all 0.15s;
  outline: none;
  line-height: 1;
  min-width: 28px;
  text-align: center;
}
.code-expand-btn:hover {
  background: #F0E4C4;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #A08040;
}

/* Code pre with height cap */
.code-pre-expandable {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 16px;
  line-height: 1.5;
  color: #3A2010;
  max-height: 400px;
  transition: max-height 0.2s ease;
}
.code-pre-expandable.code-expanded {
  max-height: none;
}

/* Show expand button only when content exceeds 400px */
.code-block-wrapper:not([data-code-id^="_dmcb"]) .code-pre-expandable,
.code-block-wrapper[data-code-id^="cb"] .code-pre-expandable {
  max-height: 400px;
}

.code-pre-expandable::-webkit-scrollbar { height: 4px; }
.code-pre-expandable::-webkit-scrollbar-thumb { background: #C8A050; }

/* Scanline CRT overlay */
.code-block-scanline {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* Inline code pixel pill */
.inline-code-pixel,
.msg-text code {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 15px;
  background: #F0E4C4;
  border: 2px solid #C8A050;
  padding: 1px 6px;
  color: var(--text, #3A2010);
  line-height: 1.5;
  display: inline;
}

/* Syntax token colors */
.tok-comment  { color: #5A8F5A; }  /* soft sage green */
.tok-string   { color: #C86828; }  /* warm terracotta */
.tok-keyword  { color: #A83868; }  /* deep dusty rose */
.tok-number   { color: #B07800; }  /* mustard gold */
.tok-func     { color: #4878A8; }  /* dusty periwinkle */
.tok-operator { color: #7A5030; }  /* warm brown */
.tok-type     { color: #3A7878; }  /* muted teal */
.tok-prop     { color: #8A6030; }  /* warm bronze */
.tok-punct    { color: #9A7048; }  /* light warm brown */
.tok-heading  { color: #A83868; font-weight: bold; }  /* markdown headings */
.tok-strong   { color: #3A2010; font-weight: 800; }  /* markdown bold */