/* XACT v13: two correction workflows, image and evidence side by side. */
:root {
  --bg: #f5f7f8; --panel: #fff; --panel-strong: #fff;
  --line: #dfe6e7; --ink: #182e32; --muted: #66767b;
  --accent: #176b60; --accent-soft: #edf5f2; --danger: #984141;
  --warm-soft: #faf5f0; --viewer-bg: #111b20;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body); --font-mono: var(--font-body);
}
html { font-size: 18px; scrollbar-gutter: stable; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.6 var(--font-body); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, summary:focus-visible { outline: 3px solid #76b9ac; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 24px; letter-spacing: -.4px; line-height: 1.3; }
.demo-header { min-height: 88px; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: #fff; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--accent); color: #fff; border-radius: 12px; font-size: 27px; font-weight: 700; }
.brand h1 { font-size: 25px; letter-spacing: 2px; }
.task-picker { display: flex; padding: 5px; gap: 5px; background: #f0f4f3; border: 1px solid var(--line); border-radius: 12px; }
.task-pill { border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; padding: 11px 20px; }
.task-pill.active { background: #fff; color: var(--accent); border-color: #d4e4df; box-shadow: 0 2px 4px #15302b08; }
.quiet-button, .gallery-refresh-btn { border: 0; background: transparent; color: var(--muted); padding: 7px 10px; font-size: 14px; }
.quiet-button:hover, .gallery-refresh-btn:hover { color: var(--accent); background: var(--accent-soft); border-radius: 7px; }
.workspace { max-width: 1680px; margin: auto; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.study-pane, .chat-pane { min-width: 0; }
.viewer-shell { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.viewer-toolbar, .viewer-actions, .chat-header, .composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.viewer-title { font-size: 20px; }
.attach-button, .clear-det-button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--accent); font-size: 14px; font-weight: 600; }
.attach-button:hover, .clear-det-button:hover { background: var(--accent-soft); }
.viewer-canvas { margin-top: 16px; position: relative; height: clamp(300px, 48vh, 560px); display: grid; place-items: center; overflow: hidden; background: var(--viewer-bg); border-radius: 10px; }
.viewer-canvas img { display: block; max-width: 100%; max-height: 100%; }
.viewer-empty { display: grid; gap: 9px; text-align: center; color: #aab9bf; font-size: 15px; }
.viewer-empty strong { color: #e7eef1; font-size: 18px; font-weight: 500; }
.upload-symbol { font-size: 35px; color: #8caaa9; }
.bbox-canvas { position: absolute; pointer-events: none; z-index: 1; }
.grounding-labels { position: absolute; z-index: 2; pointer-events: none; }
.grounding-label {
  position: absolute; display: flex; align-items: center; gap: 7px; height: 28px;
  padding: 3px 8px; border: 1px solid var(--grounding-color); border-radius: 5px;
  background: #10242c; color: #fff; font: 600 13px/20px var(--font-body);
  box-shadow: 0 2px 5px #0008; pointer-events: auto; cursor: zoom-in; text-align: left;
}
.grounding-label::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--grounding-color); flex: 0 0 auto; }
.grounding-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grounding-label:hover { background: #203b44; }
.viewer-canvas.grounding-hit { cursor: zoom-in; }
.inspect-grounding-button {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 1px solid #708b90; border-radius: 10px;
  color: #fff; background: #10242c; box-shadow: 0 3px 12px #0005;
}
.inspect-grounding-button:hover { background: #25454e; }
body.grounding-inspecting { overflow: hidden; }
.grounding-inspector {
  width: min(1120px, calc(100vw - 40px)); height: min(850px, calc(100dvh - 48px));
  max-width: none; max-height: none; padding: 0; border: 1px solid #496068; border-radius: 16px;
  background: #101c22; color: #edf5f5; box-shadow: 0 24px 100px #0007; overflow: hidden;
}
.grounding-inspector[open] { display: flex; flex-direction: column; }
.grounding-inspector::backdrop { background: #071317b8; backdrop-filter: blur(5px); }
.grounding-inspector-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #30444c; }
.grounding-inspector-header h2 { flex: 1; min-width: 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.grounding-region-nav, .grounding-zoom-controls, .grounding-view-controls { display: flex; align-items: center; gap: 6px; }
.grounding-region-count { font-size: 13px; white-space: nowrap; color: #b9cbd0; font-variant-numeric: tabular-nums; }
.inspector-icon-button, .inspector-text-button { border: 1px solid transparent; color: #e6f0f2; background: transparent; border-radius: 7px; }
.inspector-icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; font-size: 24px; line-height: 1; flex: 0 0 auto; }
.inspector-text-button { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
.inspector-icon-button:hover, .inspector-text-button:hover { background: #293e47; }
.inspector-icon-button:disabled { opacity: .35; cursor: default; }
.inspector-text-button[aria-pressed="true"] { border-color: #58757b; background: #25424a; }
.grounding-detail-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; }
.grounding-detail-stage.dragging { cursor: grabbing; }
.grounding-detail-stage canvas { display: block; width: 100%; height: 100%; }
.grounding-inspector-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid #30444c; }
#grounding-zoom-level { min-width: 58px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: #b9cbd0; }
@media (max-width: 600px) {
  .grounding-inspector { width: calc(100vw - 16px); height: calc(100dvh - 24px); border-radius: 12px; }
  .grounding-inspector-header { gap: 6px; padding: 10px; }
  .grounding-inspector-header h2 { font-size: 15px; }
  .grounding-inspector-toolbar { gap: 6px; padding: 8px; flex-wrap: wrap; justify-content: center; }
  .grounding-view-controls { gap: 2px; }
  .inspector-text-button { padding: 7px 8px; }
}
.thumbnail-strip { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; }
.thumbnail-strip.empty { display: none; }
.thumbnail { flex: 0 0 68px; width: 68px; padding: 4px; border: 2px solid transparent; border-radius: 8px; background: #eef2f2; color: var(--muted); }
.thumbnail.active { border-color: var(--accent); }
.thumbnail img { width: 56px; height: 48px; object-fit: cover; border-radius: 4px; display: block; }
.thumbnail-label { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; margin-top: 4px; }
.thumbnail.drag-over { border-color: var(--accent); }
.chat-pane { padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.chat-header { align-items: start; }
.request-pill { flex: 0 0 auto; max-width: 140px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.request-pill.error { border-color: #dfbcbc; color: var(--danger); }
.composer { padding: 16px 0; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.primary-button { padding: 11px 17px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); font-weight: 600; white-space: nowrap; }
.primary-button:hover { background: #11574d; }
summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.composer-advanced-details > summary { font-size: 13px; }
.composer-advanced { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.prompt-field { margin-top: 12px; }
.field { display: grid; gap: 5px; }
label { font-size: 13px; color: var(--muted); font-weight: 500; }
input[type="number"], input[type="text"], select, textarea { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #76b9ac; outline-offset: 1px; }
.optional-label { margin-left: 8px; font-size: 12px; color: var(--muted); font-weight: 400; }
.chat-thread { display: grid; gap: 16px; margin-top: 18px; min-width: 0; }
.result-empty { margin: 20px 0 12px; padding: 24px; background: #f7f9f9; border: 1px dashed #d5e0de; border-radius: 12px; }
.result-empty h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.result-empty p { font-size: 15px; color: var(--muted); line-height: 1.8; }
.example-gallery-details { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.example-gallery-details summary { font-weight: 600; color: var(--ink); }
.gallery-badge { margin-left: 6px; font-size: 12px; padding: 2px 6px; color: var(--accent); background: var(--accent-soft); border-radius: 5px; }
.gallery-actions { display: flex; justify-content: flex-end; margin-top: 5px; }
.example-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 8px; max-height: 195px; overflow-y: auto; margin-top: 5px; }
.gallery-card { display: flex; flex-direction: column; padding: 0; text-align: left; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; }
.gallery-card:hover { border-color: var(--accent); }
.gallery-card-img { width: 100%; height: 65px; object-fit: cover; background: var(--viewer-bg); }
.gallery-card-info { padding: 6px; display: grid; gap: 2px; }
.gallery-card-label { color: var(--muted); font-size: 12px; }
.message {
  display: flex;
}

.message--assistant,
.message--system {
  justify-content: flex-start;
}

.message--user {
  justify-content: flex-end;
}

.message-bubble {
  width: min(980px, 86%);
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  box-shadow: 0 10px 26px rgba(21, 38, 34, 0.04);
}

.message--user .message-bubble {
  background: rgba(255, 249, 246, 0.98);
  border-color: rgba(164, 104, 82, 0.16);
}

.message-bubble.welcome {
  background:
    linear-gradient(180deg, rgba(28, 107, 94, 0.08), rgba(28, 107, 94, 0.03)),
    var(--panel-strong);
}

.message-bubble.error {
  background: rgba(152, 65, 65, 0.06);
  border-color: rgba(152, 65, 65, 0.16);
}

.message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.message-role {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
}

.message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

code,
.message-text,
.message-section-text {
  font-family: var(--font-mono);
}

.message-text,
.message-section-text,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

.message-text,
.message-section-text {
  margin: 0;
  line-height: 1.72;
  font-size: 0.92rem;
}

code {
  display: block;
  font-size: 0.82rem;
}

.message-sections {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.message-section {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(245, 248, 247, 0.92);
}

.message-section.accent {
  background: rgba(28, 107, 94, 0.08);
}

.message-section.warm {
  background: var(--warm-soft);
}

.message-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(19, 37, 33, 0.08);
}

.message-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
}

.message-details summary::-webkit-details-marker {
  display: none;
}

.uncertainty-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(28, 107, 94, 0.14);
  background: rgba(243, 248, 246, 0.94);
  display: grid;
  gap: 12px;
  min-width: 0;
}

.uncertainty-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.uncertainty-title,
.uncertainty-section-title,
.uncertainty-item-heading {
  font-size: 0.84rem;
  font-weight: 700;
}

.uncertainty-level {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(28, 107, 94, 0.1);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
}

.uncertainty-warnings,
.uncertainty-list,
.uncertainty-qa-list {
  display: grid;
  gap: 8px;
}

.uncertainty-warning {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(152, 65, 65, 0.16);
  background: rgba(152, 65, 65, 0.06);
  color: var(--danger);
  font-size: 0.82rem;
  line-height: 1.5;
}

.uncertainty-metrics,
.uncertainty-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.uncertainty-metric {
  min-width: 104px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(19, 37, 33, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.uncertainty-metric-label {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.uncertainty-metric-value {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 700;
}

.uncertainty-section {
  display: grid;
  gap: 8px;
}

.uncertainty-class-list {
  display: grid;
  gap: 6px;
}

.uncertainty-class-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(80px, 160px) 42px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(19, 37, 33, 0.07);
  background: rgba(255, 255, 255, 0.88);
}

.uncertainty-class-name {
  font-size: 0.84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uncertainty-class-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(19, 37, 33, 0.07);
  overflow: hidden;
}

.uncertainty-class-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent, #1c6b5e);
  transition: width 0.3s ease;
}

.uncertainty-class-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
  text-align: right;
}

.uncertainty-item {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(19, 37, 33, 0.08);
  background: rgba(255, 255, 255, 0.88);
  display: grid;
  gap: 10px;
  min-width: 0;
}

.uncertainty-item-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.6;
  font-size: 0.86rem;
}

.uncertainty-qa-item {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(250, 252, 251, 0.9);
  border: 1px solid rgba(19, 37, 33, 0.06);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ── Detection chips in messages ── */

.detection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.detection-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
}

.detection-chip .det-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.detection-chip .det-coords {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}


/* ── Self-Correction ── */

.self-correct-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(28, 107, 94, 0.3);
  background: linear-gradient(135deg, rgba(28, 107, 94, 0.1), rgba(28, 107, 94, 0.06));
  color: var(--accent);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.self-correct-button:hover {
  background: linear-gradient(135deg, rgba(28, 107, 94, 0.18), rgba(28, 107, 94, 0.1));
  border-color: rgba(28, 107, 94, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(28, 107, 94, 0.12);
}

.self-correction-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(28, 107, 94, 0.18);
  background: rgba(240, 248, 245, 0.94);
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sc-diagnosis-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(19, 37, 33, 0.08);
  background: rgba(255, 255, 255, 0.9);
  transition: opacity 200ms ease;
}

.sc-diagnosis-row.removed {
  opacity: 0.55;
  background: rgba(152, 65, 65, 0.04);
  border-color: rgba(152, 65, 65, 0.12);
}

.sc-diagnosis-row.selected {
  background: rgba(28, 107, 94, 0.08);
  border-color: rgba(28, 107, 94, 0.25);
}

.sc-diagnosis-label {
  font-size: 0.86rem;
  font-weight: 700;
  min-width: 0;
}

.sc-action-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sc-action-kept {
  background: rgba(28, 107, 94, 0.12);
  color: var(--accent);
}

.sc-action-removed {
  background: rgba(152, 65, 65, 0.12);
  color: var(--danger);
}

.sc-reason {
  font-size: 0.78rem;
  color: var(--muted);
}

.sc-verification {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.sc-bbox-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  margin-inline-start: auto;
  padding: 7px 12px;
  border-radius: 7px;
  font: 600 14px/1.4 var(--font-body);
  white-space: nowrap;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 4px #15302b14;
}

.sc-bbox-chip::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) center / 1.5px 7px no-repeat,
    linear-gradient(currentColor, currentColor) center / 7px 1.5px no-repeat;
}

.sc-bbox-chip:hover {
  background: #11574d;
  border-color: #11574d;
}

.sc-selected-result {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #b6d5cb;
  border-inline-start: 4px solid var(--accent);
  box-shadow: 0 2px 8px #15302b08;
  line-height: 1.5;
}

.sc-selected-label { color: var(--accent); font-size: 13px; font-weight: 700; }
.sc-selected-answer { color: var(--ink); font-size: 22px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }

/* ── Collaborative Report Inputs ── */

.collab-inputs-details {
  min-width: 0;
}

.collab-inputs-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  padding: 6px 0;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.collab-inputs-details summary:hover {
  color: var(--text-primary, #1e293b);
}

.collab-inputs-details .collab-fields {
  margin-top: 8px;
}

.collab-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c8884c;
  background: rgba(200, 136, 76, 0.1);
  border: 1px solid rgba(200, 136, 76, 0.25);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.collab-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.collab-field-wide {
  grid-column: 1 / -1;
}

.collab-fields textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 0.82rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 6px 10px;
  background: var(--panel);
  color: var(--ink);
}

.collab-fields input[type="text"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.82rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 6px 10px;
  background: var(--panel);
  color: var(--ink);
}

/* ── Collaborative Report Panel ── */

.collab-report-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
}

.collab-report-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.collab-report-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent);
}

.collab-section {
  margin-bottom: 14px;
}

.collab-section-title {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
  padding-left: 2px;
}

.collab-sentence-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collab-sentence-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  transition: background 120ms ease, border-color 120ms ease;
  position: relative;
}

.collab-sentence-row .collab-sentence-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collab-sentence-row:hover {
  background: rgba(28, 107, 94, 0.04);
  border-color: rgba(28, 107, 94, 0.18);
}

.collab-sentence-text {
  flex: 1;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
  min-width: 0;
}

.collab-unc-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 5px;
  cursor: default;
}

.collab-unc-low {
  color: #1c6b5e;
  background: rgba(28, 107, 94, 0.1);
}

.collab-unc-moderate {
  color: #c8884c;
  background: rgba(200, 136, 76, 0.1);
}

.collab-unc-high {
  color: #fff;
  background: #c0392b;
}

.collab-sentence-row:has(.collab-unc-high) {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.35);
  border-left: 3px solid #c0392b;
}

.collab-sentence-row:has(.collab-unc-high) .collab-sentence-text {
  color: #7a1a1a;
}

.collab-ground-btn,
.collab-reason-btn {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--accent);
  cursor: pointer;
  transition: all 120ms ease;
  font-family: var(--font-body);
}

.collab-ground-btn:hover,
.collab-reason-btn:hover {
  background: var(--accent-soft);
  border-color: rgba(28, 107, 94, 0.3);
}

.lesion-term {
  appearance: none;
  display: inline;
  border: 0;
  border-bottom: 1.5px dashed rgba(28, 107, 94, 0.4);
  border-radius: 2px;
  padding: 0 0 1px;
  margin: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: inherit;
}

.lesion-term:hover,
.lesion-term:focus-visible {
  background: rgba(28, 107, 94, 0.1);
  border-bottom-color: var(--accent);
}

.lesion-term-active {
  background: rgba(28, 107, 94, 0.18);
  border-bottom: 1.5px solid var(--accent);
}

.collab-reason-popup {
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(164, 104, 82, 0.06);
  border: 1px solid rgba(164, 104, 82, 0.18);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
  animation: collabFadeIn 150ms ease;
}

@keyframes collabFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Compact result presentation. */
.message { display: block; min-width: 0; }
.message-bubble { width: 100%; max-width: none; border-radius: 10px; padding: 16px; box-shadow: none; }

@property --analysis-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.message-bubble--pending {
  position: relative;
}

.message-bubble--pending::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--analysis-angle),
    transparent 0deg 200deg, #76b9ac 260deg, var(--accent) 310deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: analysis-border-spin 2.4s linear infinite;
}

@keyframes analysis-border-spin {
  to { --analysis-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .message-bubble--pending::before { animation: none; }
}

.message-role { font-family: var(--font-body); font-size: 16px; }
.message-text, .message-section-text { font-size: 17px; line-height: 1.7; }
.message-meta { gap: 6px; margin-bottom: 10px; }
.meta-chip { color: var(--muted); font-size: 12px; }
.meta-chip + .meta-chip::before { content: "·"; margin-right: 6px; }
.message-details summary { font-size: 13px; font-weight: 500; }
.uncertainty-panel { border: 0; border-radius: 8px; padding: 10px; margin-top: 10px; }
.uncertainty-class-row { grid-template-columns: minmax(90px, 1fr) minmax(50px, 110px) 38px; padding: 8px; gap: 8px; border-radius: 6px; }
.uncertainty-class-name { white-space: normal; font-size: 14px; }
.self-correct-button { border-radius: 8px; box-shadow: none; font-size: 15px; }
.self-correction-panel { border-radius: 8px; margin-top: 4px; padding: 12px; }
.sc-diagnosis-row { border-radius: 7px; padding: 10px; }
.collab-report-panel { margin-top: 4px; padding: 0; border: 0; }
.collab-sentence-row { border-radius: 7px; padding: 10px; }
.collab-sentence-row .collab-sentence-head { flex-wrap: wrap; }
.collab-sentence-text { flex-basis: 180px; font-size: 17px; line-height: 1.65; }
.collab-unc-badge { font-size: 12px; }
.collab-report-head { margin-bottom: 14px; }
.det-coords { display: none; }
@media (min-width: 1100px) { .study-pane { position: sticky; top: 20px; } }
@media (max-width: 1000px) {
  .demo-header { padding: 16px 20px; gap: 12px; flex-wrap: wrap; }
  .task-pill { padding: 10px 12px; font-size: 14px; }
  .workspace { padding: 18px; gap: 18px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .chat-pane { padding: 18px; }
  .composer-footer { align-items: stretch; flex-direction: column; }
  .composer-advanced { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .task-picker { order: 3; width: 100%; }
  .task-pill { flex: 1; }
  .workspace { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 14px; }
  .viewer-canvas { height: 340px; }
  .chat-header { flex-wrap: wrap; }
  .collab-fields { grid-template-columns: minmax(0, 1fr); }
  .viewer-actions { gap: 5px; }
  .attach-button, .clear-det-button { font-size: 12px; padding: 8px; }
  .uncertainty-class-row { grid-template-columns: minmax(70px, 1fr) minmax(40px, 80px) 36px; }
}

.uncertainty-mode { margin-top: 12px; padding: 6px 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid #d4e4df; border-radius: 7px; font-size: 13px; width: fit-content; }

/* Clinical context is formatted for reading; expand the form to edit source text. */
.clinical-context-preview { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 16px; }
.clinical-context-preview dt { color: var(--muted); font-size: 14px; }
.clinical-context-preview dd { margin: 0; overflow-wrap: anywhere; }
#collab-inputs[open] + .clinical-context-preview { display: none; }
.composer-footer { justify-content: flex-end; }
.collab-fields input[type="text"], .collab-fields textarea { font-size: 16px; }
.task-pill { overflow-wrap: anywhere; }
@media (max-width: 720px) { .clinical-context-preview { grid-template-columns: minmax(0, 1fr); gap: 2px; } .clinical-context-preview dd + dt { margin-top: 8px; } }