/*
 * DermaGuard additions on top of DocuLens's style.css (copied verbatim).
 * Only result-specific pieces live here, and they use DocuLens's own tokens,
 * so light/dark themes and contrast follow the original design system.
 */

/* Status chips reuse .cite; ok / warn / fail only change the colour. */
.dg-chip { margin-left: 0; margin-right: 6px; }
.dg-ok {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
}
.dg-warn {
  border-color: var(--accent-soft-2);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.dg-fail {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}

/* The uploaded image takes the place of the user's question bubble. */
.dg-user { display: flex; flex-direction: column; gap: 8px; white-space: normal; }
.dg-thumb {
  display: block;
  width: min(320px, 100%);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.dg-caption { margin: 0; font-size: var(--text-sm); color: var(--text-soft); }

/* Big decision line in the triage message. */
.dg-decision .cite { font-size: var(--text-md); padding: 7px 12px; }

/* Probability table: a quiet bar per class, terracotta for high-risk classes. */
.dg-probs td:last-child { width: 40%; }
.dg-bar {
  display: block;
  height: 8px;
  min-width: 2px;
  border-radius: 999px;
  background: var(--border-strong);
}
.dg-bar-risk { background: var(--accent); }

/* Quality check slips: a thin coloured edge for warn / fail. */
.slip.dg-slip-warn { box-shadow: inset 3px 0 0 var(--accent); }
.slip.dg-slip-fail { box-shadow: inset 3px 0 0 var(--danger); }

/* Grad-CAM figure. */
.dg-figure { margin: 0; }
.dg-figure img {
  display: block;
  width: min(360px, 100%);
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.dg-figure figcaption { margin-top: 8px; font-size: var(--text-sm); color: var(--text-soft); }

.dg-disclaimer { font-size: var(--text-sm); color: var(--text-faint); }

/* The composer's text area becomes a quiet "choose a file" prompt. */
.composer-prompt {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-faint);
  user-select: none;
}
label.composer-send { cursor: pointer; display: inline-grid; place-items: center; }

/* DocuLens captions the margin "Sources"; here each agent names its own column. */
@container (min-width: 860px) {
  .answer.has-notes .notes[data-caption]::before { content: attr(data-caption); }
}

/* Keep the probability header on one line. */
.dg-probs th { white-space: nowrap; }
.dg-probs td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }