/* =========================================================
   CALL INTERACTIONS V2
   Row-list geometry/hierarchy/drawer-section-order from the locked
   design contract (LOCKED-call-interactions-nightops.html, sha256
   15ca12a5c2fb1f90cb318ae1072f1ac869a31a82017a46672b9964f25702f042).
   Panel/card surface values are duplicated from the production Ingest
   V2 "MOEBIUS DAYOPS" / "NIGHTOPS V2 PALETTE REPAIR" card treatment
   already shipping for the mailbox module right above this section
   (connector-workspace-v2.css `.connector-v2-inventory`) -- same
   numbers, kept as a separate class so this file has one owner and a
   change to the mailbox card can't silently reflow this one.
   ========================================================= */

.call-interactions-v2 { position: relative; }

.call-interactions-v2__gap {
  height: 1px;
  background: linear-gradient(90deg, rgba(31, 41, 55, 0.14) 0%, transparent 70%);
  margin: 32px 0 28px;
}

body[data-theme="night"] .call-interactions-v2__gap {
  background: linear-gradient(90deg, rgba(122, 171, 145, 0.16) 0%, transparent 70%);
}

.call-interactions-v2__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.call-interactions-v2__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(43, 52, 67, 0.72);
}

body[data-theme="night"] .call-interactions-v2__title {
  color: rgba(212, 229, 218, 0.78);
}

.call-interactions-v2__count {
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(43, 52, 67, 0.46);
}

body[data-theme="night"] .call-interactions-v2__count {
  color: rgba(151, 190, 164, 0.6);
}

.call-interactions-v2__muted {
  font-size: 13px;
  color: rgba(43, 52, 67, 0.6);
  margin: 0;
}

body[data-theme="night"] .call-interactions-v2__muted {
  color: rgba(212, 229, 218, 0.6);
}

.call-interactions-v2__error { color: var(--danger); }

/* Panel -- exact values duplicated from `.connector-v2-inventory`
   (base + `body[data-theme="daylight"]` + `body[data-theme="night"]`
   in connector-workspace-v2.css), see header comment. */
.call-interactions-v2__panel {
  border-radius: 22px;
  border: 1px solid rgba(31, 41, 55, 0.10);
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

body[data-theme="daylight"] .call-interactions-v2__panel {
  border-color: rgba(39, 78, 65, 0.13);
  background: linear-gradient(180deg, rgba(255, 255, 252, 0.88), rgba(251, 248, 239, 0.76));
}

body[data-theme="night"] .call-interactions-v2__panel {
  border-color: rgba(122, 171, 145, 0.16);
  background: linear-gradient(180deg, rgba(12, 31, 26, 0.94), rgba(7, 19, 17, 0.86));
}

/* Row-list mechanics -- geometry from the locked reference: compact
   50px rows, five-column grid, whole row clickable, one chevron. */
.call-interactions-v2__col-head,
.call-interactions-v2__row {
  display: grid;
  grid-template-columns: 1.9fr 1.6fr 1fr 1.15fr 24px;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

.call-interactions-v2__col-head {
  height: 36px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(43, 52, 67, 0.46);
  border-bottom: 1px solid rgba(31, 41, 55, 0.09);
}

body[data-theme="night"] .call-interactions-v2__col-head {
  color: rgba(151, 190, 164, 0.64);
  border-bottom-color: rgba(122, 171, 145, 0.13);
}

.call-interactions-v2__row {
  height: 50px;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(31, 41, 55, 0.075);
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background 120ms ease;
}

.call-interactions-v2__row:last-child { border-bottom: none; }

.call-interactions-v2__row:hover,
.call-interactions-v2__row.is-selected {
  background: rgba(223, 233, 220, 0.34);
}

body[data-theme="night"] .call-interactions-v2__row {
  border-bottom-color: rgba(122, 171, 145, 0.10);
}

body[data-theme="night"] .call-interactions-v2__row:hover,
body[data-theme="night"] .call-interactions-v2__row.is-selected {
  background: rgba(99, 255, 175, 0.045);
}

/* A light, low-alpha green outline is invisible against the daylight
   panel's near-white background -- each theme needs its own contrast,
   not one shared translucent value. */
.call-interactions-v2__row:focus-visible {
  outline: 2px solid #1d7a4b;
  outline-offset: -2px;
}

body[data-theme="night"] .call-interactions-v2__row:focus-visible {
  outline-color: #63ffaf;
}

.call-interactions-v2__row:hover .call-interactions-v2__chev {
  transform: translateX(2px);
  color: rgba(43, 52, 67, 0.7);
}

body[data-theme="night"] .call-interactions-v2__row:hover .call-interactions-v2__chev {
  color: rgba(212, 229, 218, 0.8);
}

.call-interactions-v2__id-main {
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: #10231f;
}

body[data-theme="night"] .call-interactions-v2__id-main {
  color: rgba(238, 247, 240, 0.96);
}

.call-interactions-v2__source,
.call-interactions-v2__updated {
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 12px;
  color: rgba(16, 35, 31, 0.66);
}

.call-interactions-v2__updated {
  color: rgba(16, 35, 31, 0.44);
}

body[data-theme="night"] .call-interactions-v2__source {
  color: rgba(212, 229, 218, 0.72);
}

body[data-theme="night"] .call-interactions-v2__updated {
  color: rgba(151, 190, 164, 0.56);
}

.call-interactions-v2__chev {
  color: rgba(16, 35, 31, 0.4);
  font-size: 14px;
  text-align: right;
  transition: transform 120ms ease, color 120ms ease;
}

body[data-theme="night"] .call-interactions-v2__chev {
  color: rgba(151, 190, 164, 0.5);
}

/* Decision state -- dot + mono label, deliberately not a pill/badge
   (locked design: no oversized status chips in the row list).
   Colors: materialized/confirmed reuse the exact literal RGB values
   `.ui-badge--success` / `.ui-badge--warning` already use in both
   themes today (operator-workstation.css) -- same green/amber, so
   this doesn't introduce a new semantic hue. Advisory uses the
   theme's own muted-text tone (no dedicated "steel" token exists in
   production, so the closest already-defined neutral is reused rather
   than inventing one). */
.call-interactions-v2__state { display: flex; align-items: center; gap: 7px; }
.call-interactions-v2__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.call-interactions-v2__state-label {
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.call-interactions-v2__state--none .call-interactions-v2__dot { background: rgba(43, 52, 67, 0.22); }
.call-interactions-v2__state--none .call-interactions-v2__state-label { color: rgba(43, 52, 67, 0.4); }

.call-interactions-v2__state--advisory .call-interactions-v2__dot { background: rgba(43, 52, 67, 0.4); }
.call-interactions-v2__state--advisory .call-interactions-v2__state-label { color: rgba(43, 52, 67, 0.58); }

.call-interactions-v2__state--confirmed .call-interactions-v2__dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(217, 188, 115, 0.20);
}
.call-interactions-v2__state--confirmed .call-interactions-v2__state-label { color: #8a6a1f; }

.call-interactions-v2__state--materialized .call-interactions-v2__dot { background: #2f9e63; }
.call-interactions-v2__state--materialized .call-interactions-v2__state-label { color: #1d7a4b; }

body[data-theme="night"] .call-interactions-v2__state--none .call-interactions-v2__dot { background: rgba(160, 194, 180, 0.28); }
body[data-theme="night"] .call-interactions-v2__state--none .call-interactions-v2__state-label { color: rgba(160, 194, 180, 0.42); }

body[data-theme="night"] .call-interactions-v2__state--advisory .call-interactions-v2__dot { background: rgba(160, 194, 180, 0.54); }
body[data-theme="night"] .call-interactions-v2__state--advisory .call-interactions-v2__state-label { color: rgba(160, 194, 180, 0.72); }

/* Confirmed dot is theme-invariant (matches production's own
   `.ui-badge--warning`, which never redefines its amber for daylight) --
   only the bare-text label color needs a per-theme value for contrast. */
body[data-theme="night"] .call-interactions-v2__state--confirmed .call-interactions-v2__state-label { color: #ffe7b3; }

body[data-theme="night"] .call-interactions-v2__state--materialized .call-interactions-v2__dot { background: #63ffaf; }
body[data-theme="night"] .call-interactions-v2__state--materialized .call-interactions-v2__state-label { color: #d9ffe9; }

/* Drawer content -- built inside the shared `.drawer-v3` shell
   (drawer-v3.css), which already carries both themes. Only the
   Call-Interactions-specific pieces (decision card, facts list, state
   row, case outcome, quiet provenance) are defined here. */

.call-interactions-v2__decision {
  border-left: 2px solid rgba(124, 137, 152, 0.6);
  padding-left: 12px;
}
.call-interactions-v2__decision--advisory { border-left-color: rgba(124, 137, 152, 0.7); }
.call-interactions-v2__decision--confirmed { border-left-color: var(--warning); }
.call-interactions-v2__decision--materialized { border-left-color: #2f9e63; }
body[data-theme="night"] .call-interactions-v2__decision--materialized { border-left-color: #63ffaf; }

.call-interactions-v2__decision-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--drawer-text-primary);
  margin-bottom: 3px;
}

.call-interactions-v2__decision-sub {
  font-size: 12.5px;
  color: var(--drawer-text-body);
}

.call-interactions-v2__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.call-interactions-v2__facts li {
  font-size: 13px;
  color: var(--drawer-text-body);
  padding-left: 15px;
  position: relative;
  line-height: 1.4;
}

.call-interactions-v2__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--drawer-text-muted);
}

.call-interactions-v2__facts li.call-interactions-v2__fact--strong {
  color: var(--drawer-text-value);
  font-weight: 600;
}

.call-interactions-v2__facts li.call-interactions-v2__fact--strong::before {
  background: #2f9e63;
}

body[data-theme="night"] .call-interactions-v2__facts li.call-interactions-v2__fact--strong::before {
  background: #63ffaf;
}

.call-interactions-v2__state-note {
  font-size: 12px;
  color: var(--drawer-text-muted);
  margin: 7px 0 0;
}

.call-interactions-v2__outcome {
  font-size: 13px;
  color: var(--drawer-text-body);
  margin: 0;
}

.call-interactions-v2__outcome--none {
  color: var(--drawer-text-muted);
  font-style: italic;
}

.call-interactions-v2__outcome-ref {
  font-family: var(--drawer-font-mono);
  color: var(--drawer-text-value);
  font-weight: 650;
}

/* Provenance stays available but visually quiet: no accent bar, no
   rotating section-title hue from drawer-v3's default nth-of-type
   rainbow, lower-contrast text throughout. */
.call-interactions-v2__provenance.drawer-v3__section {
  background: transparent;
  border-color: var(--drawer-border);
  opacity: 0.86;
}

.call-interactions-v2__provenance .drawer-v3__section-title {
  color: var(--drawer-text-metadata) !important;
}

.call-interactions-v2__provenance .drawer-v3__section-title::before {
  background: var(--drawer-border-strong) !important;
}

/* Operator actions (Phase 2) -- deliberately small: no new section, no
   chips, reuses the existing `.ui-button` language already shipping in
   operator-workstation.css. Lives inside the "Proposal decision" section
   so the drawer's locked section count/order is unchanged. */
.call-interactions-v2__actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.call-interactions-v2__candidates {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.call-interactions-v2__candidate {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--drawer-text-body);
  cursor: pointer;
}

.call-interactions-v2__action {
  align-self: flex-start;
}

/* Call-to-Case UX Hotfix: the Analyze/Re-analyze control (section 1) stays
   secondary-styled and is never repositioned (drawer section order is
   locked, see module doc) -- this modifier only reduces its visual weight
   once an analysis already exists, so it never competes with the
   lifecycle primary action in "Proposal decision" below it. */
.call-interactions-v2__action--reanalyze {
  align-self: flex-start;
  font-size: 12px;
  opacity: 0.78;
}

.call-interactions-v2__action-error {
  margin: 0;
  font-size: 12.5px;
}

/* Call-to-Case UX Hotfix: state-derived next-action copy -- the explainer
   shown before an existing-case candidate is selected, and the terminal
   completion line shown once a decision is materialized. */
.call-interactions-v2__explainer {
  font-size: 12.5px;
  color: var(--drawer-text-body);
  margin: 0 0 2px;
}

.call-interactions-v2__completion {
  font-size: 13px;
  font-weight: 600;
  color: #2f9e63;
  margin: 12px 0 0;
}
body[data-theme="night"] .call-interactions-v2__completion { color: #63ffaf; }

.call-interactions-v2__historical-note {
  margin: 12px 0 0;
}