/* Phase 2's investigation dashboard - deliberately its OWN fixed dark visual
   design, separate from the rest of the site's card layout and light/dark
   toggle. Same reasoning as styles.css's .logs-panel (a "terminal" look that
   never re-themes): this is meant to read like a dedicated investigator
   tool, not blend into the site chrome around it.

   Adapted from a reference mockup (aml-case-dashboard.html) the user
   provided - same palette/typography/component look, but the class names
   are prefixed "p2-" and every custom property lives under .p2-dash instead
   of :root. That prefixing matters for a real reason, not just tidiness:
   the mockup's original CSS variables were named --bg/--text/--border/etc,
   which are ALSO the names styles.css's shared theme uses for the same
   purpose - loading those at :root would have overridden the site-wide
   theme's values on every page (this file is only linked from phase2.html,
   but :root is document-wide, not per-file), permanently breaking the
   light/dark toggle and Phase 1/3's colors. Scoping under .p2-dash's own
   selector avoids that entirely.

   This file defines all the markup this dashboard introduces: the query
   bar, the tab strip (Alerts / Overview / Customer & Transactions / Triage /
   Write-up / Agent Info - see phase2.html and js/phase2-dashboard.js
   for what drives each one), and each tab's own content styling. */

.p2-dash {
  --p2-bg: #0b0e12;
  --p2-panel: #12161d;
  --p2-panel2: #161b22;
  --p2-border: #232a35;
  --p2-border-soft: #1b212b;
  --p2-text: #e7eaf0;
  --p2-muted: #838c9c;
  --p2-faint: #4e5666;
  --p2-critical: #e14b4b;
  --p2-high: #e08b3b;
  --p2-medium: #d9bd3f;
  --p2-low: #4c8fe0;
  --p2-clear: #3fae79;
  --p2-accent: #2fa6a0;

  background: var(--p2-bg);
  color: var(--p2-text);
  font-family: "IBM Plex Sans", sans-serif;
  border: 1px solid var(--p2-border);
  border-radius: var(--radius);
  padding: 20px 22px 28px;
}

/* Fills the entire screen below the nav, rather than sitting as a card
   inside the site's normal max-width <main> content area (phase2.html puts
   this markup OUTSIDE <main> entirely for that reason) - 61px matches the
   nav's actual rendered height, same value login.html's .login-wrap already
   uses for the same kind of calculation. No rounded corners/side borders
   here - a truly edge-to-edge panel looks wrong with them. */
.p2-dash--fullscreen {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  min-height: calc(100vh - 61px);
  padding: 28px 40px 60px;
}

.p2-dash button {
  font: inherit;
}

.p2-mono {
  font-family: "IBM Plex Mono", monospace;
}

/* --- Title row: what's being investigated, by whom, current status --- */
.p2-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.p2-title-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* The selected alert's severity, taken from the alert's own "severity" field
   (nothing is computed here). Colored by band with the same palette the
   mockup used for severity; --none is the neutral look before an alert is
   selected or when it has no severity. */
.p2-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--p2-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  color: var(--p2-accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 19.5px;
  font-weight: 500;
}

.p2-ring--critical {
  border-color: var(--p2-critical);
  color: var(--p2-critical);
}
.p2-ring--high {
  border-color: var(--p2-high);
  color: var(--p2-high);
}
.p2-ring--medium {
  border-color: var(--p2-medium);
  color: var(--p2-medium);
}
.p2-ring--low {
  border-color: var(--p2-low);
  color: var(--p2-low);
}
.p2-ring--none {
  border-color: var(--p2-border);
  color: var(--p2-faint);
}

.p2-ring-label--critical {
  color: var(--p2-critical);
}
.p2-ring-label--high {
  color: var(--p2-high);
}
.p2-ring-label--medium {
  color: var(--p2-medium);
}
.p2-ring-label--low {
  color: var(--p2-low);
}

/* Severity text in the Alerts table / detail view, same bands. */
.p2-sev--critical {
  color: var(--p2-critical);
}
.p2-sev--high {
  color: var(--p2-high);
}
.p2-sev--medium {
  color: var(--p2-medium);
}
.p2-sev--low {
  color: var(--p2-low);
}

.p2-ring-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p2-faint);
  text-align: center;
  margin-top: 4px;
}

.p2-title-left h2 {
  font-family: "Source Serif 4", serif;
  font-size: 23px;
  font-weight: 500;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.p2-subtitle {
  font-size: 14.5px;
  color: var(--p2-muted);
}

.p2-assignee {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14.5px;
  color: var(--p2-muted);
  flex-shrink: 0;
}

.p2-meta-label {
  color: var(--p2-faint);
  margin-bottom: 2px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.p2-meta-value {
  color: var(--p2-text);
}

.p2-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid currentColor;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--p2-muted);
}

.p2-pill--idle {
  color: var(--p2-faint);
}
.p2-pill--running {
  color: var(--p2-medium);
}
.p2-pill--done {
  color: var(--p2-clear);
}
.p2-pill--error {
  color: var(--p2-critical);
}

/* --- Meta strip: timing/session detail for the last investigation --- */
.p2-meta-strip {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--p2-muted);
  border-bottom: 1px solid var(--p2-border);
  padding-bottom: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* --- Pipeline progress strip (only while agents work - see renderP2Pipeline()).
   Done stages are solid teal, the active one pulses, the connector leading
   into it flows. --- */
.p2-pipe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--p2-muted);
  margin: -4px 0 18px;
}
.p2-pipe[hidden] {
  display: none;
}
.p2-pipe-node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.p2-pipe-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--p2-border);
  box-sizing: border-box;
}
.p2-pipe-node--done .p2-pipe-dot {
  background: var(--p2-accent);
  border-color: var(--p2-accent);
}
.p2-pipe-node--error .p2-pipe-dot {
  background: var(--p2-critical);
  border-color: var(--p2-critical);
}
.p2-pipe-node--active {
  color: var(--p2-text);
}
.p2-pipe-node--active .p2-pipe-dot {
  border-color: var(--p2-accent);
  background: var(--p2-accent);
}
.p2-pipe-node--active .p2-pipe-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--p2-accent);
  border-radius: 50%;
  animation: p2-pipe-ring 1.8s ease-out infinite;
}
.p2-pipe-line {
  width: 36px;
  height: 0;
  border-top: 2px dashed var(--p2-border);
}
.p2-pipe-line--done {
  border-top-style: solid;
  border-top-color: var(--p2-accent);
}
.p2-pipe-line--active {
  border-top: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--p2-accent) 0 5px, transparent 5px 11px);
  background-size: 11px 2px;
  animation: p2-pipe-flow 0.8s linear infinite;
}
.p2-pipe-note {
  margin-left: 6px;
  color: var(--p2-faint);
}
@keyframes p2-pipe-ring {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(2.1);
    opacity: 0;
  }
}
@keyframes p2-pipe-flow {
  to {
    background-position: 11px 0;
  }
}

/* --- Loading placeholder inside an agent's tab while it works (see
   p2LoadingHtml()). The shimmer's delay is offset by --p2-ld-phase so a
   re-render carries the sweep on rather than restarting it. --- */
.p2-ld {
  padding: 4px 0 8px;
}
.p2-ld-line {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 3px;
  background: var(--p2-border-soft);
  margin-bottom: 10px;
}
.p2-ld-line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: rgba(47, 166, 160, 0.28);
  animation: p2-ld-sweep 1.8s ease-in-out infinite;
  animation-delay: var(--p2-ld-phase, 0s);
}
.p2-ld-line:nth-child(2)::after {
  animation-delay: calc(var(--p2-ld-phase, 0s) + 0.15s);
}
.p2-ld-line:nth-child(3)::after {
  animation-delay: calc(var(--p2-ld-phase, 0s) + 0.3s);
}
.p2-ld-line:nth-child(4)::after {
  animation-delay: calc(var(--p2-ld-phase, 0s) + 0.45s);
}
.p2-ld-line:nth-child(5)::after {
  animation-delay: calc(var(--p2-ld-phase, 0s) + 0.6s);
}
.p2-ld-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  color: var(--p2-muted);
}
.p2-ld-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p2-medium);
  animation: p2-tl-pulse 1.4s ease-in-out infinite;
}
@keyframes p2-ld-sweep {
  from {
    left: -40%;
  }
  to {
    left: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p2-pipe-node--active .p2-pipe-dot::after,
  .p2-pipe-line--active,
  .p2-ld-line::after,
  .p2-ld-dot {
    animation: none;
  }
}

/* --- Tabs --- */
.p2-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--p2-border);
}

.p2-tab {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px 14px;
  font-size: 14.5px;
  color: var(--p2-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  margin-bottom: -1px;
}

.p2-tab.active {
  color: var(--p2-text);
  border-bottom-color: var(--p2-accent);
}

/* Each tab body is always in the DOM (never torn down/rebuilt) rather than
   swapped via innerHTML, so per-tab state (the Agent Info tab's live-growing
   step list, for instance) survives switching tabs mid-investigation.
   [hidden] (not display:none written per-element) keeps this consistent
   with the rest of the site's convention of toggling visibility via the
   hidden attribute. */
.p2-tab-panel[hidden] {
  display: none;
}

.p2-tab-panel {
  min-height: 320px;
}

.p2-empty {
  font-size: 14.5px;
  color: var(--p2-muted);
  padding: 40px 10px;
  text-align: center;
}

/* --- Per-tab chat widgets (Customer/Transactions/Triage/Write-up) ---
   Reuses chat.js's structural classes (.chat-messages/.chat-message/
   .chat-input-row - see initChatWidget()) rather than inventing new ones,
   but reskinned under .p2-dash with this file's own palette instead of the
   site theme's - same reasoning as every other override in this file (see
   the top comment). The chat sits BELOW the agent's response on each tab,
   so its divider is on top. */
.p2-chat {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--p2-border);
}

.p2-dash .chat-messages {
  max-height: 220px;
}

.p2-dash .chat-message--agent {
  background: var(--p2-panel2);
  border: 1px solid var(--p2-border-soft);
  color: var(--p2-text);
}

.p2-dash .chat-message--user {
  background: rgba(47, 166, 160, 0.18);
  color: var(--p2-text);
}

.p2-dash .chat-input-row input {
  background: var(--p2-panel2);
  border: 1px solid var(--p2-border);
  color: var(--p2-text);
  font-family: "IBM Plex Sans", sans-serif;
}

.p2-dash .chat-input-row input:focus {
  outline: 1px solid var(--p2-accent);
}

.p2-chat-send-btn {
  border: 1px solid var(--p2-accent);
  color: var(--p2-accent);
  background: transparent;
  border-radius: 6px;
  padding: 0 18px;
  font-size: 15px;
  cursor: pointer;
}

.p2-chat-send-btn:hover {
  background: rgba(47, 166, 160, 0.1);
}

/* --- Shared card/grid pieces used across several tabs --- */
.p2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.p2-card {
  background: var(--p2-panel2);
  border: 1px solid var(--p2-border-soft);
  border-radius: 5px;
  padding: 14px;
}

.p2-card h3 {
  font-size: 13px;
  color: var(--p2-muted);
  margin: 0 0 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Same look as .p2-card h3, but for section headers standing on their own
   within a tab body (not inside a card) - used on the Agent Info tab to
   separate its identity/actions/input/output sections. */
.p2-tab-subhead {
  font-size: 13px;
  color: var(--p2-muted);
  margin: 22px 0 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.p2-tab-subhead:first-child {
  margin-top: 0;
}

.p2-card-metric {
  font-family: "IBM Plex Mono", monospace;
  font-size: 25.5px;
  color: var(--p2-text);
}

.p2-card-note {
  font-size: 13px;
  color: var(--p2-faint);
  margin-top: 2px;
}

.p2-detail-list {
  display: grid;
  gap: 9px;
}

.p2-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--p2-border-soft);
}

.p2-detail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.p2-detail-key {
  color: var(--p2-faint);
}

.p2-detail-value {
  color: var(--p2-text);
  text-align: right;
  word-break: break-word;
}

.p2-about {
  margin-bottom: 14px;
}

.p2-about-name {
  margin-left: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--p2-faint);
}

/* Longer text than the identity card's short values: label on the left, text
   reading left-to-right beside it instead of right-aligned. */
.p2-about .p2-detail-row {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr;
}

.p2-about .p2-detail-value {
  text-align: left;
  line-height: 1.55;
}

/* --- Investigation Trace tab: one card per step, in order --- */
.p2-trace-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p2-trace-step {
  background: var(--p2-panel2);
  border: 1px solid var(--p2-border-soft);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--p2-muted);
}

.p2-trace-step-index {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--p2-accent);
  margin-bottom: 4px;
  display: block;
}

/* --- Alerts tab: full alert table (GET /api/phase2/alerts), row → detail --- */
.p2-table--clickable .p2-table-row {
  cursor: pointer;
}

.p2-table--clickable .p2-table-row:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.p2-table-row--selected td {
  background: rgba(47, 166, 160, 0.08);
}

/* Detail view a row flips into - Back top-left, Select Case bottom-right,
   per the design sketch. */
.p2-alert-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p2-detail-back {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--p2-border);
  color: var(--p2-muted);
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
}

.p2-detail-back:hover {
  color: var(--p2-text);
  border-color: var(--p2-accent);
}

.p2-detail-select {
  align-self: flex-end;
  background: var(--p2-accent);
  color: #06110f;
  border: 0;
  border-radius: 6px;
  padding: 11px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.p2-detail-select:hover {
  opacity: 0.88;
}

.p2-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--p2-border-soft);
  border-radius: 5px;
}

.p2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.p2-table th {
  text-align: left;
  color: var(--p2-faint);
  font-weight: 500;
  padding: 9px 10px;
  border-bottom: 1px solid var(--p2-border);
  white-space: nowrap;
}

.p2-table td {
  padding: 10px;
  border-bottom: 1px solid var(--p2-border-soft);
  color: var(--p2-muted);
}

.p2-table tr:last-child td {
  border-bottom: 0;
}

.p2-table .strong {
  color: var(--p2-text);
}

.p2-status-open {
  color: var(--p2-critical);
}
.p2-status-closed {
  color: var(--p2-clear);
}

/* --- Report-style callout box: the query-bar run's Write-up-tab summary
   ("Investigation complete"/"No real reply generated" - renderP2WriteupReport()
   in js/phase2-dashboard.js), and (with --error) any pipeline agent's error
   box (p2ErrorBoxHtml()) - a generic style, not specific to one tab, despite
   the class name predating the Write-up tab's current name. --- */
.p2-assessment {
  border-left: 3px solid var(--p2-accent);
  background: rgba(47, 166, 160, 0.07);
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 0 5px 5px 0;
}

.p2-assessment h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--p2-text);
}

.p2-assessment p {
  margin: 0;
  font-size: 14px;
  color: var(--p2-muted);
}

.p2-report-box {
  background: #0e1217;
  border: 1px solid var(--p2-border);
  border-radius: 5px;
  padding: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--p2-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  overflow-y: auto;
}

/* A markdown table inside a report box - see p2RenderReportText() in
   js/phase2-dashboard.js, which turns "| a | b |" text into one of these
   instead of leaving it as literal pipes and dashes. Reuses .p2-table's own
   look (the Alerts tab) but resets the white-space/word-break the report box
   sets for plain text - meant for prose, not a table's own layout - and
   drops the outer border, since the report box already has one. */
/* Rendered markdown inside a report box (the box itself is pre-wrap for the
   raw views like "full input"; markdown supplies its own line breaks). */
.p2-report-box.md {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.p2-report-box .p2-report-table {
  white-space: normal;
  word-break: normal;
  margin: 10px 0;
  border: 0;
}

.p2-report-box .p2-report-table:first-child {
  margin-top: 0;
}

.p2-report-box .p2-report-table:last-child {
  margin-bottom: 0;
}

.p2-report-box .p2-table {
  font-size: 12.5px;
}

.p2-report-box .p2-table th,
.p2-report-box .p2-table td {
  padding: 7px 9px;
  white-space: normal;
}

/* A verdict badge - Triage's classification, Write-up's escalation decision
   (see p2TriageVerdict()/p2WriteupVerdict()/p2VerdictHtml() in
   js/phase2-dashboard.js) - shown above that agent's report so the outcome
   reads at a glance. Same red/green/amber language as severity
   (p2-ring--critical etc.) and alert status (p2-status-open/closed)
   elsewhere on this dashboard, not a new color meaning of its own. */
.p2-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 14px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.p2-verdict::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.p2-verdict--negative {
  color: var(--p2-critical);
  background: rgba(225, 75, 75, 0.12);
  border: 1px solid rgba(225, 75, 75, 0.35);
}

.p2-verdict--positive {
  color: var(--p2-clear);
  background: rgba(63, 174, 121, 0.12);
  border: 1px solid rgba(63, 174, 121, 0.35);
}

.p2-verdict--warning {
  color: var(--p2-medium);
  background: rgba(217, 189, 63, 0.12);
  border: 1px solid rgba(217, 189, 63, 0.35);
}

/* --- Customer & Transactions: split screen, KYC agent left / transaction
   agent right (stacks to one column on narrow screens) --- */
.p2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.p2-split-col {
  min-width: 0; /* lets a wide report box scroll instead of stretching its column */
  border: 1px solid var(--p2-border-soft);
  border-radius: 6px;
  padding: 16px;
}

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

.p2-col-head h2,
.p2-agent-title {
  font-family: "Source Serif 4", serif;
  font-size: 18.5px;
  font-weight: 500;
  margin: 0;
}

.p2-agent-title {
  margin: 28px 0 12px;
}

.p2-agent-title:first-child {
  margin-top: 0;
}

/* The next-step bar: sticks to the bottom of the screen while there's more
   page below it (so the button is always in reach), and settles into its
   normal place at the very end. */
.p2-proceed-row {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 12px 0;
  background: var(--p2-bg);
  border-top: 1px solid var(--p2-border);
}

/* --- Scroll progress bar, fixed under the site nav (js sets top/width/colour) --- */
.p2-scrollbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 9; /* just under the nav (10) */
  background: var(--p2-border-soft);
}
.p2-scrollbar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--p2-faint);
  transition: background 0.2s;
}
.p2-scrollbar--off {
  visibility: hidden;
}

/* --- "View SQL and data" chip on a report --- */
.p2-view-data {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--p2-accent);
  color: var(--p2-accent);
  border-radius: 4px;
  padding: 5px 11px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  cursor: pointer;
}
.p2-view-data:hover {
  background: rgba(47, 166, 160, 0.12);
}

/* --- The SQL / full-input popup --- */
.p2-modal {
  position: fixed;
  inset: 0;
  z-index: 100; /* over the nav and the scroll bar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 7, 10, 0.72);
}
.p2-modal[hidden] {
  display: none;
}
.p2-modal-card {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  max-height: 100%;
  background: var(--p2-panel);
  border: 1px solid var(--p2-border);
  border-radius: 6px;
  color: var(--p2-text);
}
.p2-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--p2-border);
}
.p2-modal-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.p2-modal-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--p2-muted);
  padding: 13px 12px 11px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.p2-modal-tab.active {
  color: var(--p2-text);
  border-bottom-color: var(--p2-accent);
}
.p2-modal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.p2-modal-actions button {
  background: transparent;
  border: 1px solid var(--p2-border);
  color: var(--p2-muted);
  border-radius: 4px;
  padding: 5px 11px;
  font-size: 14px;
  cursor: pointer;
}
.p2-modal-actions button:hover {
  color: var(--p2-text);
  border-color: var(--p2-muted);
}
.p2-modal-actions button[hidden] {
  display: none;
}
.p2-modal-meta:empty {
  display: none;
}
.p2-modal-meta {
  padding: 12px 14px 0;
}
.p2-modal-sql {
  margin: 0;
  padding: 10px 12px;
  max-height: 120px;
  overflow: auto;
  background: #0e1217;
  border: 1px solid var(--p2-border);
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--p2-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.p2-modal-note {
  margin-top: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--p2-muted);
}
.p2-modal-body {
  padding: 12px 14px 16px;
  overflow: auto;
  min-height: 0;
}
.p2-mtable-wrap {
  overflow: auto;
  max-height: calc(100vh - 290px);
  border: 1px solid var(--p2-border);
  border-radius: 4px;
}
.p2-mtable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 14px;
}
.p2-mtable th,
.p2-mtable td {
  padding: 7px 12px;
  white-space: nowrap;
  text-align: left;
  border-bottom: 1px solid var(--p2-border-soft);
  font-family: "IBM Plex Mono", monospace;
}
.p2-mtable th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--p2-panel2);
  color: var(--p2-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.p2-mtable th:first-child,
.p2-mtable td:first-child {
  position: sticky;
  left: 0;
  background: var(--p2-panel);
  border-right: 1px solid var(--p2-border);
}
.p2-mtable th:first-child {
  z-index: 3;
  background: var(--p2-panel2);
}
.p2-mkv {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  border: 1px solid var(--p2-border);
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
}
.p2-mkv-key,
.p2-mkv-val {
  padding: 7px 12px;
  border-bottom: 1px solid var(--p2-border-soft);
  overflow-wrap: anywhere;
}
.p2-mkv-key {
  color: var(--p2-muted);
  background: var(--p2-panel2);
}
.p2-modal .p2-input-details {
  margin-top: 16px;
}

/* Phones: less padding, and the header wraps so the tabs and the Copy / Close
   buttons never have to fit one row. */
@media (max-width: 600px) {
  .p2-modal {
    padding: 10px;
  }
  .p2-modal-head {
    flex-wrap: wrap;
    padding: 0 10px;
    row-gap: 0;
  }
  .p2-modal-actions {
    padding: 6px 0;
    margin-left: auto;
  }
  .p2-mtable-wrap {
    max-height: calc(100vh - 250px);
  }
}

.p2-proceed-hint {
  font-size: 14px;
  color: var(--p2-muted);
}

.p2-detail-select:disabled {
  opacity: 0.4;
  cursor: default;
}

.p2-assessment--error {
  border-left-color: var(--p2-critical);
  background: rgba(225, 75, 75, 0.08);
}

.p2-steps,
.p2-input-details {
  margin-top: 12px;
}

.p2-steps summary,
.p2-input-details summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--p2-muted);
  margin-bottom: 8px;
}

/* --- Overview: agent timeline (js/phase2-timeline.js) - one row per agent,
   with a nested row for each collaborator/tool call it made, all on one
   shared time axis. --p2-tl-grid (set inline) is the gridline spacing. --- */
.p2-tl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.p2-tl-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 12px;
  min-width: 560px;
}

.p2-tl-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--p2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p2-tl-label--sub {
  padding-left: 16px;
  color: var(--p2-muted);
}

.p2-tl-dur {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--p2-faint);
}

.p2-tl-axis {
  position: relative;
  height: 16px;
  margin-right: 10px; /* room for the last tick's label / a dot sitting at 100% */
}

.p2-tl-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--p2-faint);
}

.p2-tl-tick:first-child {
  transform: none;
}

.p2-tl-track {
  position: relative;
  margin-right: 10px;
  height: 18px;
  background-image: linear-gradient(to right, var(--p2-border-soft) 1px, transparent 1px);
  background-size: var(--p2-tl-grid) 100%;
}

.p2-tl-row--span .p2-tl-track {
  height: 10px;
}

.p2-tl-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: 3px;
}

/* Colors keyed on the modifier alone (not .p2-tl-bar) so the legend's
   swatches can reuse them. */
.p2-tl-bar--agent {
  background: var(--p2-accent);
}
.p2-tl-bar--agent.p2-tl-bar--error {
  background: var(--p2-critical);
}
.p2-tl-bar--delegate {
  background: var(--p2-low);
}
.p2-tl-bar--tool {
  background: var(--p2-medium);
}
.p2-tl-bar--kb {
  background: var(--p2-high);
}

.p2-tl-bar--running {
  animation: p2-tl-pulse 1.2s ease-in-out infinite;
}

@keyframes p2-tl-pulse {
  50% {
    opacity: 0.5;
  }
}

.p2-tl-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--p2-text);
  border: 1px solid var(--p2-bg);
}

/* Marks where idle time between stages was cut out of the timeline. */
.p2-tl-break {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 1px dashed var(--p2-faint);
}

.p2-tl-break--legend {
  position: static;
  display: inline-block;
  height: 10px;
  margin-right: 6px;
}

.p2-tl-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--p2-muted);
}

.p2-tl-swatch {
  display: inline-block;
  width: 14px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
}

.p2-tl-dot--legend {
  position: static;
  display: inline-block;
  margin: 0 6px 0 0;
}

@media (max-width: 900px) {
  .p2-grid,
  .p2-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .p2-dash {
    padding: 14px 14px 20px;
  }
  .p2-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .p2-title-left h2 {
    font-size: 19.5px;
  }
}

/* This dashboard's palette for rendered markdown (base rules: css/styles.css). */
.p2-dash {
  --md-text: var(--p2-text);
  --md-dim: var(--p2-muted);
  --md-border: var(--p2-border);
  --md-accent: var(--p2-accent);
  --md-surface: var(--p2-panel2);
  --md-code-bg: #0e1217;
}

/* The header's "Risk rating" line: red when triage/write-up raised the rating,
   green when lowered. */
.p2-rating {
  font-size: 14px;
}
.p2-rating--up {
  color: var(--p2-critical);
}
.p2-rating--down {
  color: var(--p2-clear);
}
.p2-rating--none {
  color: var(--p2-muted);
}