/* visibility-v2/frontend/public/components/render-response.css
 *
 * Shared styles for prompt-response rendering. The site rule:
 *  - Body text renders plain or bold only.
 *  - Links collapse to numbered [N] markers inline.
 *  - Footnote list (numbered, with domain + URL) sits directly under the body.
 *
 * These styles back the markup produced by renderResponseWithFootnotes() in
 * components/render-response.js. Any page that displays an AI prompt response
 * should load this stylesheet.
 */

.viv-response-body {
  line-height: 1.55;
  /* A Markdown table arrives as text ("| a | b |" and "|---|---|"), and an
     answer can carry a long unbroken URL or token. Without a break rule one
     such line widened the drawer past a 390px screen and pushed the question
     and its actions off the side (fixture F18). */
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.viv-response-body strong {
  font-weight: 700;
}

.viv-response-body .viv-fn-marker {
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, sans-serif);
  font-size: 0.85em;
  color: var(--accent, #1A3A5C);
  font-weight: 600;
  white-space: nowrap;
}

.viv-response-footnotes {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule, #D4D4CC);
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, sans-serif);
  font-size: 0.875rem;
  color: var(--muted, #4A5361);
  line-height: 1.6;
}

.viv-response-footnotes ol {
  margin: 0;
  padding-left: 20px;
}

.viv-response-footnotes li {
  margin: 0 0 2px 0;
  word-break: break-word;
}

.viv-response-footnotes a {
  color: var(--accent, #1A3A5C);
  word-break: break-all;
  text-decoration: none;
}

.viv-response-footnotes a:hover {
  text-decoration: underline;
}

.viv-response-footnotes .viv-fn-domain {
  font-weight: 600;
  color: var(--text, #1B1B18);
  margin-right: 6px;
}

/* ---------------------------------------------------------------------------
   Attached sources
   ---------------------------------------------------------------------------
   Sources a platform returned alongside an answer without linking to them in
   the text. Visually quieter than footnotes and collapsed by default, because
   they are context rather than a reference the reader is chasing: the numbered
   footnote list answers "what is [3]?", this answers "what did the platform
   look at?". Deliberately unnumbered — a number would imply a marker in the
   body, and there isn't one.
   --------------------------------------------------------------------------- */
.viv-response-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule, #D4D4CC);
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, sans-serif);
  font-size: 0.875rem;
  color: var(--muted, #4A5361);
  line-height: 1.6;
}

.viv-response-sources > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent, #1A3A5C);
  list-style: none;
}

.viv-response-sources > summary::-webkit-details-marker { display: none; }

.viv-response-sources > summary::before {
  content: '\25B8';           /* ► collapsed */
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}

.viv-response-sources[open] > summary::before { transform: rotate(90deg); }

.viv-response-sources .viv-sources-hint {
  font-weight: 400;
  color: var(--muted, #4A5361);
}

.viv-response-sources ul {
  margin: 6px 0 0 0;
  padding-left: 18px;
  list-style: disc;
}

.viv-response-sources li {
  margin: 0 0 2px 0;
  word-break: break-word;
}

.viv-response-sources a {
  color: var(--accent, #1A3A5C);
  word-break: break-all;
  text-decoration: none;
}

.viv-response-sources a:hover { text-decoration: underline; }

.viv-response-sources .viv-fn-domain {
  font-weight: 600;
  color: var(--text, #1B1B18);
  margin-right: 6px;
}

/* ---------------------------------------------------------------------------
   Earlier runs (prompt detail)
   ---------------------------------------------------------------------------
   Every response for a prompt on one platform beyond the newest. Indented and
   rule-marked so the headline response stays visually dominant.
   --------------------------------------------------------------------------- */
.pp-earlier {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--rule, #D4D4CC);
  font-size: 0.875rem;
}

.pp-earlier > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent, #1A3A5C);
  list-style: none;
}

.pp-earlier > summary::-webkit-details-marker { display: none; }

.pp-earlier > summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}

.pp-earlier[open] > summary::before { transform: rotate(90deg); }

.pp-earlier-list {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
}

.pp-earlier-item {
  margin: 0 0 12px 0;
  padding-left: 12px;
  border-left: 2px solid var(--rule, #D4D4CC);
}

.pp-earlier-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pp-earlier-date {
  font-weight: 600;
  color: var(--muted, #4A5361);
  font-size: 0.875rem;
}

/* A footnote marker whose source is known renders as an anchor rather than an
   inert span (see swapPlaceholders). It must not pick up the site's default
   link chrome — blue and underlined mid-sentence, three in a row, reads as
   damage. Same weight and color as the span; the affordance is the hover. */
.viv-response-body a.viv-fn-marker {
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, sans-serif);
  font-size: 0.85em;
  color: var(--accent, #1A3A5C);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px dotted var(--accent, #1A3A5C);
}
.viv-response-body a.viv-fn-marker:hover {
  background: var(--accent-bg, #EAF0F6);
  border-bottom-style: solid;
}

/* Fragments under one page (DEV06, report B05): the passage a link points
   to, decoded, under the page it belongs to. */
.viv-fn-passage { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 2px; word-break: break-word; }
.viv-fn-fragments { margin: 4px 0 0 0; padding-left: 16px; }
.viv-fn-fragments a { text-decoration: none; }
/* The stored answer, exactly as collected, one click away. */
.viv-raw-answer { margin-top: 10px; font-size: 0.875rem; }
.viv-raw-answer > summary { cursor: pointer; color: var(--muted); }
.viv-raw-answer pre { white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8125rem; line-height: 1.5; background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; max-height: 340px; overflow: auto; margin: 6px 0 0 0; }
.viv-repeats-note { font-size: 0.8125rem; color: var(--muted); margin-top: 8px; }