/* ============================================================
   Awall surface stylesheet: logs.css
   Split from styles.css (F1, issue #186) — NO rule changes.
   Owns: log detail side panel, filter buttons, prompt preview (S3)
   Concatenating every surfaces/*.css in base.html <link> order
   reproduces the original styles.css byte-for-byte.
   ============================================================ */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-panel);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.detail-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 560px;
  max-width: 95vw;
  height: 100vh;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  z-index: 201;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-panel.open {
  transform: translateX(0);
}

.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: var(--space-3);
}

.detail-panel-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0;
}

.detail-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-tag);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.detail-panel-close:focus-visible {
  outline: none;
  background: var(--color-surface);
  color: var(--color-text-heading);
  box-shadow: 0 0 0 3px var(--color-primary-focus-ring);
}

.detail-panel-close:hover {
  background: var(--color-surface);
  color: var(--color-text-heading);
}

.detail-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.detail-panel-body::-webkit-scrollbar {
  width: 8px;
}

.detail-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.detail-panel-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.detail-panel-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.detail-codeblock {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.detail-codeblock::-webkit-scrollbar {
  width: 8px;
}

.detail-codeblock::-webkit-scrollbar-track {
  background: transparent;
}

.detail-codeblock::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
}

.detail-codeblock::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Compact meta grid at the top of a log detail: 2-column key/value
   pairs that scan as a small reference card. Cells fall back to a
   single column under 380px panel width. */
.detail-meta {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.detail-meta-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.detail-meta-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  font-weight: 500;
  word-break: break-word;
}

.detail-meta-value--mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

.detail-meta-value-unit {
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 2px;
}

/* Vertical stack of named sections (Request, Response, Guardrails,
   AWall categories). Each section gets a label + body content. */
.detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detail-section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-section-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

/* Code-block body inside a detail section. Caps height so the panel
   doesn't grow forever; the inner content wraps to avoid any
   horizontal scroll. */
.detail-codeblock {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  border-radius: var(--radius-input);
}

.detail-codeblock pre,
pre.detail-codeblock {
  margin: 0;
  border-radius: var(--radius-input);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Tag list for guardrail / PII chips inside a detail section. Replaces
   the per-tag inline margin previously written from JS. */
.detail-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.detail-section-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.detail-section-note--warning {
  color: var(--color-warning-strong);
}

/* ---------------------------------------------------------
   Response section (#294): Pretty/Raw toggle, assembled
   message block, collapsed reasoning disclosure.
   --------------------------------------------------------- */

/* Section head holds the title + the Pretty/Raw toggle on one row. */
.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.response-view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  overflow: hidden;
  flex-shrink: 0;
}

.response-view-btn {
  padding: 2px var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: none;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.response-view-btn:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.response-view-btn:hover {
  background: var(--color-surface);
  color: var(--color-text-heading);
}

.response-view-btn--active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* The assembled assistant message is prose, not code: wrap and cap height
   (like .detail-codeblock) so the panel never grows unbounded. */
.response-message {
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text-body);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* Reasoning disclosure (DeepSeek-style), collapsed by default. The global reset
   only clears list markers on ul/ol, not <summary>, so suppress the native
   disclosure triangle here (standard + WebKit) and render our own ::before caret
   that rotates open — otherwise both show and the summary has a double caret
   (#298). Scoped to this disclosure so other <summary> markers are unaffected. */
.response-reasoning {
  margin-bottom: var(--space-2);
}

.response-reasoning > summary {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.response-reasoning > summary::-webkit-details-marker {
  display: none;
}

.response-reasoning > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-1);
  transition: transform var(--transition-fast);
}

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

.response-message--reasoning {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* Pretty REQUEST pane (#301). request_body is the '\n'-joined concatenation of
   every user message (apps/proxy/serializers.py) with no per-message boundary
   metadata, so the renderer cannot safely split it into separate prompts.
   Preserve the '\n' separators here so each prompt lands on its own line instead
   of collapsing into one run-on entry under the base white-space: normal (which
   the markdown-rendered Response pane still needs). */
.response-message--prompt {
  white-space: pre-wrap;
}

.response-caption {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Rendered markdown inside the Pretty response (#299). Scoped under
   .response-message so nothing leaks to other surfaces. Container no longer
   relies on pre-wrap; <pre>/<br> handle whitespace-sensitive cases. */
.response-message > :first-child { margin-top: 0; }
.response-message > :last-child { margin-bottom: 0; }

.response-message h1,
.response-message h2,
.response-message h3,
.response-message h4,
.response-message h5,
.response-message h6 {
  color: var(--color-text-heading);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--space-3) 0 var(--space-2);
}
.response-message h1 { font-size: var(--font-size-lg); }
.response-message h2 { font-size: var(--font-size-md); }
.response-message h3,
.response-message h4,
.response-message h5,
.response-message h6 { font-size: var(--font-size-sm); }

.response-message p { margin: 0 0 var(--space-2); }

.response-message ul,
.response-message ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
}
.response-message li { margin: var(--space-1) 0; }

.response-message a { color: var(--color-primary); text-decoration: underline; }
.response-message a:hover { color: var(--color-primary-hover); }

.response-message .md-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-input);
}

.response-message .md-pre {
  margin: 0 0 var(--space-2);
  padding: var(--space-3);
  /* Override the global dark `pre` pairing (near-white --color-pre-text on dark
     --color-pre-bg): once the background is the light --color-surface, the text
     MUST switch to --color-text-body too, or the inherited near-white pre text
     is invisible on the light card in light mode (#299 markdown code block; same
     fix as .code-block in overrides.css). The inner <code> inherits this via the
     global `pre code` rule. */
  background: var(--color-surface);
  color: var(--color-text-body);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  overflow-x: auto;
}
.response-message .md-pre code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  white-space: pre;
}

.response-message .md-table-wrap {
  margin: 0 0 var(--space-2);
  overflow-x: auto;
}
.response-message .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.response-message .md-table th,
.response-message .md-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
  text-align: left;
  vertical-align: top;
}
.response-message .md-table th {
  background: var(--color-surface);
  color: var(--color-text-heading);
  font-weight: 600;
}

/* AWall categories table inside the detail panel. The default
   .data-table is sized for the full content area (1140px); inside
   the 560px panel we need numeric columns to right-align, flag
   column to center on a small dot, and rationale to take whatever
   horizontal space remains. */
.detail-categories-table {
  table-layout: fixed;
  width: 100%;
  font-size: 13px;
}

.detail-categories-table th {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
  white-space: nowrap;
}

.detail-categories-table td {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-categories-table th.detail-categories-cat,
.detail-categories-table td.detail-categories-cat {
  width: 28%;
  font-weight: 600;
  color: var(--color-text-heading);
}

.detail-categories-table th.detail-categories-num,
.detail-categories-table td.detail-categories-num {
  width: 14%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--color-text-body);
}

.detail-categories-table th.detail-categories-flag,
.detail-categories-table td.detail-categories-flag {
  width: 12%;
  text-align: center;
}

.detail-categories-table td.detail-categories-rationale {
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Compact triggered-flag indicator: a circular dot with an inset
   icon. Replaces the bulkier status-tag pills inside the table so
   the row reads as one visual line. */
.detail-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.detail-flag--on {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.detail-flag--off {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

/* Legacy kept for any caller still emitting .detail-field markup. */
.detail-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detail-field-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-field-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
}

/* ---------------------------------------------------------
   23. Filter buttons (log list)
   --------------------------------------------------------- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

/* Status filters travel as one labelled group (role="group") so the links
   keep their own gap/wrap independent of the trailing page-controls. */
.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-body);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
}

.filter-btn:hover {
  background: var(--color-surface);
  color: var(--color-text-heading);
  text-decoration: none;
}

.filter-btn.active,
.filter-btn[aria-pressed="true"],
.filter-btn[aria-current="true"] {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-ring-strong);
  font-weight: 600;
}

/* Mobile status dropdown: hidden on desktop (the card row is the desktop
   affordance); responsive.css swaps it in for the cards below 768px. Reuses
   .form-input for the control look. (#210) */
.filter-select {
  display: none;
}

/* Date inputs (search bar): open the native picker from anywhere in the field
   (the page script calls showPicker on click — mobile otherwise needs a precise
   tap on the icon) and let the popup follow the theme. Matches the audit-log /
   report calendar affordance. (#210) */
.search-date-group input[type="date"] {
  cursor: pointer;
  color-scheme: light;
}

[data-theme="dark"] .search-date-group input[type="date"] {
  color-scheme: dark;
}

/* ---------------------------------------------------------
   23b. Prompt preview (log table)
   --------------------------------------------------------- */
.prompt-preview {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  vertical-align: top;
}
.prompt-preview .trigger-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
.prompt-preview .prompt-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* REQUEST cell: agent tool-loop turn marker — the turn appended only
   tool/assistant messages, so there is no new user input to preview (#293). */
.prompt-tool-turn {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   23c. Conv·Turn + Findings columns (log list, #293)
   --------------------------------------------------------- */

/* Short conversation id + turn index. Mono + muted so it reads as a stable
   identifier, not content. (Becomes a link once the Full Conversation page
   lands — #295.) */
.conv-turn {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  vertical-align: top;
}
.conv-turn-sep {
  margin: 0 3px;
  opacity: 0.6;
}

/* Findings cell: compact role·type chips. New-this-turn chips are info-toned
   (mirrors the old .status-tag--role); re-sent chips are muted with a ↺ so the
   honest "logged every turn" record (#258) reads as de-emphasized, not absent.
   Chips are aggregated (role·type ×N) and capped with a "+N more" overflow
   (#297) so a late agentic turn stays ~2 lines instead of a tall stack. */
.findings-cell {
  vertical-align: top;
}
.finding-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 4px 4px 0;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--color-info-bg);
  color: var(--color-info-strong);
}
.finding-chip-sep {
  margin: 0 2px;
  opacity: 0.55;
  font-weight: 400;
}
.finding-chip--resent {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-weight: 500;
}
/* Overflow affordance for the capped Findings column (#297). Muted + dashed so
   it reads as "more available" rather than a finding in its own right; the row
   click opens the detail panel and links to the full transcript. */
.finding-chip--more {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  font-weight: 500;
}


/* ---------------------------------------------------------
   24. Full Conversation transcript page (#295)
   --------------------------------------------------------- */
.transcript {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.transcript-gap {
  padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

.turn-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-4);
  background: var(--color-bg);
}
.turn-card--retry {
  border-left: 3px solid var(--color-warning, var(--color-border));
}

.turn-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.turn-card-index {
  font-weight: 700;
  color: var(--color-text-heading);
}
.turn-card-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.turn-retry-tag {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.turn-section {
  margin-top: var(--space-3);
}
.turn-section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.turn-raw > summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}

/* CONV·TURN cell link → Full Conversation page (#295). */
.conv-turn-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--color-border);
}
.conv-turn-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* "View full conversation" link in the detail panel (#295). */
.detail-conversation-link {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
}