/*
 * Code snippets (specs/005 R4, FR-015): a monospaced box with the language, a Copy button
 * and Rouge's token classes mapped onto palette tokens. Used in Meet and Home messages.
 */

figure.code-snippet {
  margin: var(--space-2) 0;
  overflow: hidden;
  background-color: var(--color-deep-night);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
}

.code-snippet .code-snippet__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.code-snippet .code-snippet__language {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-comment);
}

.code-snippet .code-snippet__copy {
  text-decoration: none;
  margin-left: auto;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-foreground);
  background-color: var(--color-selection);
  border: 0;
  border-radius: var(--radius-subtle);
  cursor: pointer;
}

.code-snippet .code-snippet__copy:hover {
  text-decoration: none;
  background-color: var(--color-card-raised);
}

.code-snippet .code-snippet__copy:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}

.code-snippet .code-snippet__code {
  display: block;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: none;
  border-radius: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-foreground);
  white-space: pre;
  tab-size: 2;
}

/* The block's <code> sits inside message bodies, whose inline-code look it must not take. */
.code-snippet .code-snippet__code code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
}

/* Rouge tokens (comment, keyword, string, number, name kinds, operator). */
.code-snippet .c, .code-snippet .c1, .code-snippet .cm, .code-snippet .cs { color: var(--color-comment); font-style: italic; }
.code-snippet .k, .code-snippet .kd, .code-snippet .kn, .code-snippet .kr, .code-snippet .kp { color: var(--color-pink); }
.code-snippet .kc, .code-snippet .kt, .code-snippet .nc, .code-snippet .no { color: var(--color-cyan); }
.code-snippet .s, .code-snippet .s1, .code-snippet .s2, .code-snippet .sb, .code-snippet .sh, .code-snippet .ss, .code-snippet .sx { color: var(--color-yellow); }
.code-snippet .m, .code-snippet .mi, .code-snippet .mf, .code-snippet .mh { color: var(--color-purple); }
.code-snippet .nf, .code-snippet .fm, .code-snippet .nb, .code-snippet .bp { color: var(--color-green); }
.code-snippet .na, .code-snippet .nt, .code-snippet .nv, .code-snippet .vi, .code-snippet .vc { color: var(--color-orange); }
.code-snippet .o, .code-snippet .ow { color: var(--color-pink); }
.code-snippet .err { color: var(--color-red); }
.code-snippet .gd { color: var(--color-red); }
.code-snippet .gi { color: var(--color-green); }

/* The code dialog. */
.code-snippet-dialog__code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre;
  tab-size: 2;
}

.code-snippet-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.code-snippet-dialog__actions .btn {
  width: auto;
}