/* ============================================================
   Daimond — rich rendering styles
   ------------------------------------------------------------
   Code-block container, syntax-token colours, copy button, and
   markdown tables.  Themed via the existing custom properties in
   variables.css so both dark and light render correctly.  Loaded
   after app.css so ties in specificity resolve here.
   ============================================================ */

/* ── Token palette (dark default) ── */
:root {
	--tok-comment:  #8b949e;
	--tok-keyword:  #ff7b72;
	--tok-string:   #a5d6ff;
	--tok-number:   #79c0ff;
	--tok-type:     #ffa657;
	--tok-literal:  #79c0ff;
}

/* ── Token palette (light) ──
   Keyed on the INK and not on any palette's name. Lollypop was once missing
   from the list here, so a code block in the candy theme kept the dark tokens:
   pale blue strings on a pale pink card at 1.3:1, which is not text, it is a
   stain. Every palette that takes dark lettering gets these, including the ones
   added after this line was written. */
:root[data-ink="dark"] {
	--tok-comment:  #6e7781;
	--tok-keyword:  #cf222e;
	--tok-string:   #0a3069;
	--tok-number:   #0550ae;
	--tok-type:     #953800;
	--tok-literal:  #0550ae;
}

/* ── Code block container ── */
.code-block {
	position: relative;
	margin: 8px 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-tertiary);
	overflow: hidden;
}

.code-block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 10px;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
	font-family: var(--font);
}

.code-block-lang {
	font-size: var(--fs-2xs);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--text-secondary);
	user-select: none;
}

.code-copy-btn {
	background: transparent;
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
	border-radius: var(--radius-sm);
	font-family: var(--font);
	font-size: var(--fs-2xs);
	padding: 2px 10px;
	cursor: pointer;
	transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.code-copy-btn:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}
.code-copy-btn.copied {
	color: var(--success);
	border-color: var(--success);
}

/* Code body: the container supplies the background, so the inner
   <pre> is transparent with its own scroll. */
.code-block pre {
	margin: 0;
	padding: 12px;
	background: transparent;
	border-radius: 0;
	overflow-x: auto;
}
.code-block pre code {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	line-height: 1.5;
	background: none;
	padding: 0;
	white-space: pre;
	color: var(--text-primary);
}

/* ── Syntax tokens ── */
.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-keyword { color: var(--tok-keyword); }
.tok-string  { color: var(--tok-string); }
.tok-number  { color: var(--tok-number); }
.tok-type    { color: var(--tok-type); }
.tok-literal { color: var(--tok-literal); }

/* ── Markdown tables ── */
.chat-msg-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 10px 0;
	font-family: var(--font);
	font-size: var(--fs-sm);
}
.chat-msg-content th,
.chat-msg-content td {
	border: 1px solid var(--border);
	padding: 6px 10px;
	text-align: left;
	white-space: nowrap;
}
.chat-msg-content th {
	background: var(--bg-secondary);
	color: var(--text-primary);
	font-weight: 600;
}
.chat-msg-content tbody tr:nth-child(even) td {
	background: var(--bg-secondary);
}


/* ── Links in rendered content ────────────────────────────────────────────
   Nothing styled a link inside a model's answer, so one arrived as the user
   agent's own #0000EE: navy on black at 1.38 on Dusk, and under 1.9 on every
   dark palette. A reply is mostly prose and links, which made this the one
   defect in the sweep that stopped content being readable rather than merely
   looking wrong. On the light palettes it was legible and still belonged to no
   palette in the set. */
.chat-msg-content a,
.crystal-body a,
.md-body a {
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.chat-msg-content a:visited,
.crystal-body a:visited,
.md-body a:visited { color: var(--accent-text); opacity: 0.82; }