:root {
  --font-title: "Outfit", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --bg: #f4eee3;
  --bg-strong: #eadfce;
  --ink: #17202a;
  --ink-soft: #56606d;
  --sidebar: #122033;
  --sidebar-edge: #1f3552;
  --surface: rgba(255, 250, 243, 0.92);
  --surface-strong: #fff8ef;
  --surface-border: rgba(23, 32, 42, 0.08);
  --accent: #16a34a;
  --accent-strong: #0f766e;
  --accent-soft: rgba(22, 163, 74, 0.12);
  --success: #2e7d59;
  --success-soft: rgba(46, 125, 89, 0.12);
  --warning: #0f766e;
  --warning-soft: rgba(15, 118, 110, 0.14);
  --danger: #b23a3a;
  --danger-soft: rgba(178, 58, 58, 0.12);
  --shadow: 0 28px 80px rgba(18, 32, 51, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at top left, rgba(22, 163, 74, 0.18), transparent 32%),
    radial-gradient(circle at right 15%, rgba(18, 32, 51, 0.12), transparent 24%),
    linear-gradient(180deg, #faf5ed 0%, var(--bg) 48%, #efe5d5 100%);
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

h1,
h2,
h3,
.workspace-header h1,
.workspace-nav h2,
.surface-heading h2,
.list-block-header h3,
.auth-panel-header h2,
.action-card strong,
.agent-card strong,
.table-primary {
  font-family: var(--font-title);
}

.hidden {
  display: none !important;
}

.admin-app {
  min-height: 100vh;
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.login-view,
.dashboard-view {
  min-height: 100vh;
}

.login-view {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.login-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 460px);
  gap: 1.5rem;
  width: min(1180px, 100%);
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 32px;
  background: rgba(255, 248, 239, 0.68);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.login-copy {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(18, 32, 51, 0.96), rgba(31, 53, 82, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  color: #fff8ef;
}

.login-copy::after {
  content: "";
  position: absolute;
  inset: auto -8% -12% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.82) 0%, rgba(22, 163, 74, 0) 70%);
  opacity: 0.75;
}

.login-copy h1 {
  font-family: var(--font-title);
  margin: 0 0 1rem;
  max-width: 12ch;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.12;
  padding-bottom: 0.08em;
  overflow-wrap: anywhere;
}

.lede {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 54ch;
  color: rgba(255, 248, 239, 0.82);
  font-size: 1rem;
  line-height: 1.65;
}

.login-facts {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.login-facts li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 248, 239, 0.92);
}

.login-facts li::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #4ade80, var(--accent));
  box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.16);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2rem);
  border-radius: 26px;
  background: rgba(255, 252, 247, 0.96);
  border: 1px solid rgba(23, 32, 42, 0.08);
}

.auth-panel-header h2 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.18;
  padding-bottom: 0.05em;
  overflow-wrap: anywhere;
}

.auth-form {
  display: grid;
  gap: 0.95rem;
}

.auth-form-inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.auth-provider-group {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid rgba(23, 32, 42, 0.08);
  border-radius: 18px;
  background: rgba(18, 32, 51, 0.04);
}

.google-signin-button {
  min-height: 44px;
}

.auth-provider-status {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field span {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
}

.field input {
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(23, 32, 42, 0.12);
  border-radius: 14px;
  background: #fffdfa;
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.field input:focus {
  outline: none;
  border-color: rgba(22, 163, 74, 0.42);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
  transform: translateY(-1px);
}

/* Checkboxes must not inherit the full-width text-input sizing above (.field input),
   which rendered them as large detached blue blocks. Keep a real ~18px glyph. */
.field input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  accent-color: #16a34a;
  cursor: pointer;
  transform: none;
}
.field input[type="checkbox"]:focus {
  transform: none;
}

/* Checkbox fields lay out horizontally: glyph on the left, label beside it, with the
   whole row as a comfortable click/tap target. */
.field.signup-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  cursor: pointer;
}
.field.signup-check span {
  font-weight: 500;
}

/* Inline validation highlight (added by the signup form when a field fails). */
.field-invalid input,
.field-invalid textarea {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}
.field.signup-check.field-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 3px;
  border-radius: 8px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(23, 32, 42, 0.1);
}

.action-button,
.secondary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease, opacity 140ms ease;
}

.action-button {
  color: #fff8ef;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  box-shadow: 0 16px 28px rgba(22, 163, 74, 0.22);
}

.secondary-button {
  color: var(--ink);
  background: rgba(18, 32, 51, 0.08);
}

.ghost-button {
  color: #fff8ef;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.action-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

.status-banner {
  padding: 0.9rem 1rem;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.status-info {
  color: #20476f;
  background: rgba(32, 71, 111, 0.08);
  border-color: rgba(32, 71, 111, 0.14);
}

.status-success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(46, 125, 89, 0.18);
}

.status-warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(15, 118, 110, 0.18);
}

.status-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(178, 58, 58, 0.18);
}

.dashboard-view {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.workspace-nav {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  padding: 2rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(18, 32, 51, 0.98), rgba(31, 53, 82, 0.98)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  color: #fff8ef;
}

.workspace-nav h2 {
  margin: 0;
  font-size: 2.1rem;
  line-height: 1.16;
  padding-bottom: 0.06em;
  overflow-wrap: anywhere;
}

.nav-links {
  display: grid;
  gap: 0.7rem;
}

.nav-links a {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  color: rgba(255, 248, 239, 0.84);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: #fff8ef;
  border-color: rgba(255, 255, 255, 0.14);
  outline: none;
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: #fff8ef;
  background: rgba(22, 163, 74, 0.28);
  border-color: rgba(255, 248, 239, 0.22);
}

.workspace-nav-footer {
  display: grid;
  gap: 1rem;
}

.operator-chip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.operator-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.94), rgba(15, 118, 110, 0.94));
  color: #fff8ef;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.operator-chip strong,
.operator-chip span {
  display: block;
}

.operator-chip span:last-child {
  margin-top: 0.2rem;
  color: rgba(255, 248, 239, 0.66);
  font-size: 0.85rem;
}

/* Containment: a long role/email (e.g. "customer_service_manager") must wrap inside the
   fixed 320px sidebar instead of pushing ~3px of horizontal overflow (Codex Note 72).
   The avatar stays fixed; the text column can shrink and its long tokens wrap. */
.operator-chip { min-width: 0; }
.operator-mark { flex-shrink: 0; }
.operator-chip > div { min-width: 0; }
.operator-chip strong,
.operator-chip span { overflow-wrap: anywhere; word-break: break-word; }

.workspace-main {
  padding: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
}

@media (min-width: 1181px) {
  .dashboard-view {
    display: block;
  }

  .workspace-nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 320px;
  }

  .workspace-main {
    margin-left: 320px;
  }
}

.workspace-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.workspace-header h1 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.18;
  padding-bottom: 0.06em;
  overflow-wrap: anywhere;
}

.workspace-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: rgba(255, 248, 239, 0.82);
  border: 1px solid rgba(23, 32, 42, 0.08);
}

.sync-indicator {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--success), #1f5f43);
  box-shadow: 0 0 0 5px rgba(46, 125, 89, 0.14);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.surface {
  padding: 1.25rem;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: 0 18px 40px rgba(18, 32, 51, 0.08);
}

.surface-highlight {
  background:
    linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(255, 248, 239, 0.9)),
    var(--surface);
}

.surface-wide {
  grid-column: 1 / -1;
}

.surface-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.surface-heading h2,
.list-block-header h3 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.surface-kicker {
  margin: 0 0 0.3rem;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.surface-caption {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.metric-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

.access-receipt-panel {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255, 252, 247, 0.78);
  border: 1px solid rgba(23, 32, 42, 0.08);
}

.access-receipt-panel h3 {
  margin: 0;
  font-size: 1.05rem;
}

.access-receipt-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.access-receipt-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.receipt-status {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.metric-tile,
.detail-stat {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255, 252, 247, 0.88);
  border: 1px solid rgba(23, 32, 42, 0.08);
}

.metric-tile > *,
.detail-stat > * {
  min-width: 0;
}

.metric-tile span,
.detail-stat span {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.metric-tile strong,
.detail-stat strong {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.access-receipt-summary .detail-stat strong {
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.18;
  word-break: break-word;
}

.access-receipt-summary .detail-stat-account strong {
  display: block;
  max-width: 100%;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.receipt-email-line {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.metric-tile small,
.detail-stat small {
  color: var(--ink-soft);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.8rem;
}

.detail-grid-compact {
  margin-top: 1rem;
}

.list-block {
  margin-top: 1.1rem;
}

.split-list-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.list-block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.list-block-header span {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.rank-list,
.activity-list,
.health-checklist,
.document-list,
.quick-action-grid,
.agent-grid {
  display: grid;
  gap: 0.75rem;
}

.quick-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rank-row,
.activity-item,
.health-row,
.document-row,
.action-card,
.agent-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.76);
  border: 1px solid rgba(23, 32, 42, 0.07);
}

.action-card,
.agent-card {
  min-height: 9rem;
}

.action-card {
  flex-direction: column;
}

.action-card span,
.agent-card span {
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.action-card strong,
.agent-card strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.08rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.action-card p,
.agent-card p {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.support-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 0.8rem;
  align-items: end;
  margin-bottom: 1rem;
}

.support-search input {
  background: #fffdfa;
}

.action-result {
  min-height: 12rem;
  max-height: 26rem;
  overflow: auto;
  margin: 1rem 0 0;
  padding: 1rem;
  border-radius: 18px;
  color: #f5efe6;
  background: #111a28;
  white-space: pre-wrap;
  word-break: break-word;
}

.copy-fallback-box {
  display: block;
  width: 100%;
  min-height: 9rem;
  margin-top: 0.75rem;
  padding: 0.8rem;
  border: 1px solid rgba(23, 32, 42, 0.14);
  border-radius: 12px;
  background: #fffdfa;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  resize: vertical;
}

.agent-card {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.agent-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.agent-work {
  display: grid;
  gap: 0.45rem;
  max-height: 12rem;
  overflow: auto;
  padding: 0.75rem;
  border-radius: 14px;
  background: rgba(18, 32, 51, 0.05);
}

.agent-work span {
  display: block;
  color: var(--ink-soft);
  text-transform: none;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.agent-work-more {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.agent-controls {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.call-triage-panel {
  display: grid;
  gap: 1rem;
  max-height: 72vh;
  overflow: auto;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(23, 32, 42, 0.08);
}

.compact-heading {
  margin-bottom: 0;
}

.compact-heading h3 {
  margin: 0;
  font-size: 1.1rem;
}

.call-triage-table .data-table {
  min-width: 940px;
}

.call-action-stack {
  display: grid;
  gap: 0.45rem;
  min-width: 7rem;
}

.compact-button {
  min-height: 2.2rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
}

.document-row {
  color: inherit;
  text-decoration: none;
}

.document-row-button {
  width: 100%;
  border: 1px solid rgba(23, 32, 42, 0.07);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.document-row:hover,
.document-row:focus-visible {
  border-color: rgba(22, 163, 74, 0.28);
  outline: none;
}

.rank-row strong,
.activity-item strong,
.health-row strong,
.document-row strong {
  display: block;
  margin-bottom: 0.2rem;
}

.rank-row p,
.activity-item p,
.health-row p,
.document-row p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.rank-row span,
.activity-meta,
.health-meta,
.document-row span {
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
}

.employee-drive-viewer {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(23, 32, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.employee-drive-viewer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.employee-drive-viewer-head h3 {
  margin: 0.1rem 0 0.25rem;
  font-size: 1.05rem;
}

.employee-drive-viewer-head span {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.employee-drive-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.employee-drive-viewer-body {
  min-height: 14rem;
}

.employee-drive-frame {
  width: 100%;
  height: min(70vh, 46rem);
  border: 1px solid rgba(23, 32, 42, 0.12);
  border-radius: 8px;
  background: #fff;
}

.employee-drive-image,
.employee-drive-media {
  display: block;
  width: 100%;
  max-height: min(70vh, 42rem);
  border-radius: 8px;
  background: #0f172a;
  object-fit: contain;
}

.employee-drive-text-preview {
  max-height: min(70vh, 42rem);
  overflow: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(23, 32, 42, 0.1);
  border-radius: 8px;
  background: #ffffff;
  white-space: pre-wrap;
  word-break: break-word;
}

.employee-drive-sheet {
  max-height: min(70vh, 42rem);
}

.activity-meta-stack {
  display: grid;
  justify-items: end;
  gap: 0.45rem;
  min-width: 7.5rem;
}

.table-shell {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 42, 0.08);
  background: rgba(255, 252, 247, 0.84);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.data-table th,
.data-table td {
  max-width: 28rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(23, 32, 42, 0.07);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#agentControls table td,
#agentControls table th,
#agentControls pre,
#agentControls code,
#agentControls .inline-json,
.agent-controls table td,
.agent-controls table th,
.agent-controls pre,
.agent-controls code,
.agent-controls .inline-json {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
  overflow-x: hidden;
}

#agentControls table,
.agent-controls table {
  table-layout: fixed;
  width: 100%;
}

.data-table th {
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(18, 32, 51, 0.04);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.table-primary {
  font-weight: 700;
}

.subscriber-view-controls,
.feed-view-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.subscriber-view-controls label,
.feed-view-controls label {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.subscriber-view-controls select,
.feed-view-controls select {
  min-height: 40px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid rgba(23, 32, 42, 0.14);
  border-radius: 10px;
  background: rgba(255, 252, 247, 0.96);
  color: var(--ink);
  font: 600 0.84rem "Outfit", sans-serif;
}

.subscriber-view-controls select:focus-visible,
.feed-view-controls select:focus-visible {
  outline: 3px solid rgba(21, 169, 100, 0.28);
  outline-offset: 2px;
}

.subscriber-status-group th {
  padding: 0.7rem 1rem;
  color: var(--sidebar);
  background: rgba(21, 169, 100, 0.09);
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.feed-status-group {
  margin: 0.65rem 0 0.35rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: rgba(21, 169, 100, 0.09);
  color: var(--sidebar);
  font-size: 0.86rem;
  font-weight: 800;
}

.table-secondary {
  display: block;
  margin-top: 0.22rem;
  max-width: 100%;
  color: var(--ink-soft);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.inline-json {
  max-width: min(100%, 52rem);
  max-height: 28rem;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-success {
  color: var(--success);
  background: var(--success-soft);
}

.tag-warning {
  color: var(--warning);
  background: var(--warning-soft);
}

.tag-danger {
  color: var(--danger);
  background: var(--danger-soft);
}

.tag-neutral {
  color: #27445f;
  background: rgba(39, 68, 95, 0.1);
}

.empty-inline {
  padding: 1rem;
  border-radius: 18px;
  color: var(--ink-soft);
  background: rgba(255, 252, 247, 0.7);
  border: 1px dashed rgba(23, 32, 42, 0.14);
}

.activity-layout {
  display: grid;
  gap: 0.2rem;
}

.activity-note {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

@media (max-width: 1180px) {
  .dashboard-view {
    grid-template-columns: 1fr;
  }

  /* Compact horizontal top bar instead of a tall vertical rail, so the header no
     longer eats the first viewport on tablet/small-desktop widths (721-1180). */
  .workspace-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    max-height: none;
    overflow: visible;
    gap: 0.75rem 1.5rem;
    padding: 0.9rem 1.5rem;
  }

  .workspace-nav h2 {
    flex: 0 0 auto;
    font-size: 1.4rem;
  }

  .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1 1 auto;
    justify-content: center;
  }

  .nav-links a {
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
  }

  .workspace-nav-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
  }

  .workspace-main {
    padding-top: 1rem;
  }

  .metric-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .login-stage,
  .workspace-grid,
  .detail-grid,
  .access-receipt-summary,
  .split-list-block,
  .quick-action-grid,
  .agent-grid,
  .support-tools {
    grid-template-columns: 1fr;
  }

  .metric-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Single-column overview panels at tablet width: the two-up grid left a tall
     Live Feed beside a short Service Status card, producing dead space. */
  .xact-hub-panels {
    grid-template-columns: 1fr !important;
  }

  .surface-wide {
    grid-column: auto;
  }

  .workspace-header,
  .surface-heading,
  .list-block-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .login-view,
  .workspace-main {
    padding: 1rem;
  }

  /* Natural page scroll on mobile: no fixed 42vh header reserving nearly half the
     viewport with its own scroll (which hid Log out). The compact nav sits in flow
     at the top and scrolls away, giving the active page the full viewport. */
  .dashboard-view {
    display: block;
    height: auto;
    overflow: visible;
  }

  .workspace-nav {
    position: static;
    inset: auto;
    z-index: 20;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .workspace-main {
    position: static;
    inset: auto;
    overflow: visible;
    padding-top: 1rem;
  }

  .dashboard-view,
  .workspace-main,
  .workspace-nav,
  .workspace-grid,
  .surface,
  .metric-rail,
  .detail-grid {
    min-width: 0;
    width: 100%;
    max-width: 100vw;
  }

  .login-stage {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.8rem;
  }

  .login-view {
    justify-items: stretch;
    align-items: start;
  }

  .login-copy,
  .auth-panel,
  .auth-panel-header,
  .auth-provider-group,
  .auth-form,
  .field,
  .auth-divider {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .login-view .google-signin-button {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .login-view .action-button,
  .login-view .secondary-button,
  .login-view .ghost-button {
    width: 100%;
    max-width: 100%;
  }

  .login-facts li {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .auth-form-inline {
    grid-template-columns: 1fr;
  }

  .metric-rail,
  .detail-grid,
  .access-receipt-summary {
    grid-template-columns: 1fr;
  }

  .workspace-nav {
    position: static;
    inset: auto;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.25rem 1rem;
    gap: 1rem;
    height: auto;
    max-height: none;
    overflow: visible;
    background: linear-gradient(180deg, var(--sidebar), var(--sidebar-edge));
  }

  .nav-links {
    display: grid;
    justify-content: stretch;
  }

  .workspace-nav-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-nav h2 {
    font-size: 1.55rem;
  }

  .nav-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .nav-links a {
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
  }

  .operator-chip {
    padding: 0.75rem;
  }

  .operator-mark {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 14px;
  }

  .surface,
  .login-copy,
  .auth-panel {
    border-radius: 22px;
  }
}

/* ===== Overview live activity feed (unified event stream) ===== */
.live-feed-panel {
  margin-top: 1.25rem;
  padding: 1.1rem 1.15rem 1.25rem;
  border-radius: var(--radius-lg, 16px);
  background:
    linear-gradient(135deg, rgba(22,163,74,0.05), rgba(15,118,110,0.04)),
    var(--surface, #fff);
  border: 1px solid var(--surface-border, rgba(18,32,51,0.10));
  box-shadow: 0 18px 44px rgba(18,32,51,0.08);
  backdrop-filter: blur(8px);
}
.live-feed-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.85rem; }
.live-feed-header h3 { margin:.15rem 0 0; font-size:1.05rem; }
.live-feed-pulse { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#16a34a; padding:.28rem .6rem; border-radius:999px;
  background:rgba(22,163,74,0.10); border:1px solid rgba(22,163,74,0.22); white-space:nowrap; }
.live-feed-pulse .pulse-dot { width:.5rem; height:.5rem; border-radius:50%; background:#16a34a; }
.live-feed-counts { font-size:.75rem; color:var(--muted,#64748b); margin-top:.2rem; }
.live-feed-list { display:flex; flex-direction:column; gap:.5rem; max-height:26rem; overflow-y:auto; }
.feed-item { display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem; border-radius:12px;
  background:rgba(255,255,255,0.55); border:1px solid var(--surface-border, rgba(18,32,51,0.08));
  border-left:3px solid var(--tone,#94a3b8); animation:feedIn .38s ease both; }
@keyframes feedIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.feed-tone-good { --tone:#16a34a; } .feed-tone-info { --tone:#14a9ff; } .feed-tone-warn { --tone:#f59e0b; }
.feed-tone-bad { --tone:#ef4444; } .feed-tone-neutral { --tone:#94a3b8; }
.feed-emoji { font-size:1.3rem; line-height:1; flex:0 0 auto; }
.feed-body { flex:1; min-width:0; }
.feed-title { font-weight:650; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-sub { font-size:.8rem; color:var(--muted,#64748b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-meta { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex:0 0 auto; }
.feed-badge { font-size:.65rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:.16rem .5rem; border-radius:999px; color:#fff; background:var(--tone,#94a3b8); }
.feed-badge-good{background:#16a34a;} .feed-badge-info{background:#14a9ff;} .feed-badge-warn{background:#f59e0b;}
.feed-badge-bad{background:#ef4444;} .feed-badge-neutral{background:#94a3b8;}
.feed-time { font-size:.7rem; color:var(--muted,#94a3b8); }
@media (prefers-color-scheme: dark) { .feed-item { background:rgba(255,255,255,0.04); } }

/* CSM page — two-panel grid */
.csm-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1rem; }
.csm-grid .live-feed-panel { margin-top:0; }

/* ===== Messages Explorer ===== */
.msg-explorer { margin-top:1.25rem; }
.msg-explorer-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem; }
.msg-explorer-head h3 { margin:0; font-size:1.05rem; }
.msg-count { font-size:.78rem; color:var(--muted,#64748b); }
.msg-toolbar { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.75rem; }
.msg-search { flex:1; min-width:220px; padding:.55rem .8rem; border-radius:10px; border:1px solid var(--surface-border,rgba(18,32,51,0.14)); background:var(--surface,#fff); font-size:.9rem; }
.msg-filter { padding:.55rem .7rem; border-radius:10px; border:1px solid var(--surface-border,rgba(18,32,51,0.14)); background:var(--surface,#fff); font-size:.9rem; }
.msg-list { display:flex; flex-direction:column; gap:.55rem; max-height:34rem; overflow-y:auto; }
.msg-row { display:flex; gap:1rem; align-items:center; padding:.7rem .9rem; border-radius:12px;
  background:rgba(255,255,255,0.6); border:1px solid var(--surface-border,rgba(18,32,51,0.08));
  border-left:3px solid var(--tone,#94a3b8); animation:feedIn .35s ease both; }
.msg-main { flex:1; min-width:0; }
.msg-top { display:flex; align-items:center; gap:.55rem; }
.msg-who { font-weight:650; font-size:.95rem; }
.msg-meta { font-size:.78rem; color:var(--muted,#64748b); margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-transcript { font-size:.85rem; color:#334155; margin-top:.3rem; font-style:italic; }
.msg-transcript.msg-empty { color:#94a3b8; }
.msg-side { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; flex:0 0 auto; }
.msg-audio { height:2rem; max-width:12rem; }
.msg-noaudio { font-size:.72rem; color:#94a3b8; }
.msg-details { font-size:.72rem; padding:.28rem .6rem; }
/* modal */
.msg-modal-backdrop { position:fixed; inset:0; background:rgba(8,18,30,0.55); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:1.5rem; }
.msg-modal-backdrop.open { display:flex; animation:feedIn .25s ease; }
.msg-modal { background:var(--surface,#fff); border-radius:16px; max-width:620px; width:100%; max-height:86vh;
  overflow-y:auto; box-shadow:0 30px 80px rgba(8,18,30,0.4); }
.msg-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.3rem; border-bottom:1px solid var(--surface-border,rgba(18,32,51,0.1)); position:sticky; top:0; background:var(--surface-strong,#fff8ef); z-index:10; }
.msg-modal-header h3 { margin:0; font-size:1.1rem; }
/* Isolate the scrolling body into its own stacking context BELOW the sticky header
   (z-index:0 < header z-index:10) so no body descendant — hover-transform buttons like
   Convert to paid, nested tables, etc. — can ever paint over the header while scrolling.
   Fixes the 390/375px sticky-header overlap (Codex Note 66/67). */
.msg-modal-body { padding:1.2rem 1.3rem; position:relative; z-index:0; }
.msg-modal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem 1.2rem; }
.msg-kv { display:flex; flex-direction:column; gap:.15rem; }
.msg-kv span { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#94a3b8); }
.msg-kv strong { font-size:.9rem; font-weight:600; word-break:break-word; }
.msg-modal-audio { margin:1rem 0; }
.msg-modal-audio audio { width:100%; }
.msg-modal-transcript { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--surface-border,rgba(18,32,51,0.1)); }
.msg-modal-transcript h4 { margin:0 0 .4rem; font-size:.85rem; }
.msg-modal-transcript p { margin:0; font-size:.92rem; line-height:1.55; color:#334155; }

/* ===== Unified design pass: logo + liquid-glass elevation (all tabs) ===== */
.workspace-brand { display:flex; flex-direction:column; gap:.35rem; }
.workspace-logo { width:150px; max-width:80%; height:auto; margin-bottom:.35rem;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.35)); }

/* Surfaces gain a subtle glass sheen + depth without leaving the light aesthetic */
.surface { position:relative; overflow:hidden; backdrop-filter:blur(10px);
  transition:box-shadow .25s ease, transform .25s ease; }
.surface::before { content:""; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); opacity:.6; }
.surface-highlight { background:
  linear-gradient(135deg, rgba(22,163,74,0.08), rgba(15,118,110,0.05)), var(--surface-strong, #fff8ef); }

/* Metric tiles: glass cards with a gradient hairline + hover lift */
.metric-rail > *, .detail-stat {
  position:relative; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.35));
  border:1px solid var(--surface-border, rgba(23,32,42,0.08));
  box-shadow:0 10px 26px rgba(18,32,51,0.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.metric-rail > *:hover, .detail-stat:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(18,32,51,0.12); }
.metric-rail > *::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:16px 16px 0 0;
  background:linear-gradient(90deg, var(--accent,#16a34a), var(--accent-strong,#0f766e)); opacity:.9; }

/* Refresh button + primary CTAs: gradient sheen */
#refreshDataBtn, .primary-button {
  background:linear-gradient(135deg, var(--accent,#16a34a), #0f766e) !important;
  box-shadow:0 8px 22px rgba(22,163,74,0.28); border:none !important;
}

@media (prefers-color-scheme: dark) {
  .surface::before { background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); }
  .metric-rail > *, .detail-stat { background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
}

/* Graceful session re-auth banner (non-destructive) */
.reauth-banner { position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%) translateY(120%);
  display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem; border-radius:12px;
  background:var(--sidebar,#122033); color:#fff; box-shadow:0 18px 40px rgba(8,18,30,0.4);
  z-index:1200; font-size:.88rem; transition:transform .35s cubic-bezier(.2,.8,.2,1); max-width:92vw; }
.reauth-banner.show { transform:translateX(-50%) translateY(0); }
.reauth-signin { background:var(--accent,#16a34a); color:#fff; border:none; border-radius:8px;
  padding:.4rem .8rem; font-weight:600; cursor:pointer; }
.reauth-signin:hover { background:var(--accent-strong,#0f766e); }

/* ===== Marketing / Outreach & Retention ===== */
.mkt-toolbar { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-bottom:.9rem; }
.mkt-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.mkt-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .75rem; border-radius:999px;
  border:1px solid var(--surface-border,rgba(18,32,51,0.14)); background:var(--surface,#fff); font-size:.82rem;
  cursor:pointer; color:inherit; transition:background .15s,border-color .15s; }
.mkt-chip:hover { border-color:var(--accent,#16a34a); }
.mkt-chip.active { background:var(--sidebar,#122033); color:#fff; border-color:var(--sidebar,#122033); }
.mkt-chip-n { font-variant-numeric:tabular-nums; font-size:.72rem; opacity:.7; }
.mkt-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:.7rem; }
.lead-card { display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 1rem; border-radius:14px;
  background:var(--surface,#fff); border:1px solid var(--surface-border,rgba(18,32,51,0.08));
  border-left:4px solid var(--tone,#94a3b8); }
.lead-good{ --tone:#16a34a } .lead-warn{ --tone:#d97706 } .lead-bad{ --tone:#dc2626 } .lead-info{ --tone:#0f766e } .lead-neutral{ --tone:#94a3b8 }
.lead-icon { font-size:1.25rem; line-height:1.4; flex:0 0 auto; }
.lead-body { flex:1; min-width:0; }
.lead-top { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.lead-name { font-weight:650; font-size:.95rem; }
.lead-type-badge { font-size:.68rem; padding:.12rem .5rem; border-radius:6px; font-weight:600; color:#fff; background:var(--tone,#94a3b8); }
.lead-meta { font-size:.78rem; color:var(--muted,#64748b); margin-top:.2rem; }
.lead-note { font-size:.82rem; color:#334155; margin-top:.35rem; line-height:1.4; }
.lead-side { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex:0 0 auto; text-align:right; }
.lead-when { font-size:.72rem; color:var(--muted,#94a3b8); white-space:nowrap; }
.lead-hint { font-size:.7rem; color:var(--tone,#64748b); font-weight:600; white-space:nowrap; }

/* ===== Global elevation pass (restraint-based; brand palette; no AI-tell gradients) ===== */
/* Meaningful micro-interactions: interactive surfaces lift subtly on hover, smooth + purposeful. */
.surface, .detail-stat, .metric-card, .lead-card, .msg-row, .feed-item {
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.lead-card:hover, .msg-row:hover, .feed-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(18,32,51,0.12);
  border-color: var(--accent-soft, rgba(22,163,74,0.35));
}
.detail-stat:hover, .metric-card:hover { transform: translateY(-1px); }
/* Subtle glass on the fixed chrome (sidebar/topbar already dark) — refine the sync pill + actions */
.sync-pill { backdrop-filter: blur(8px); }
/* Nav active state: a subtle brand rail rather than flat fill */
.workspace-nav a.active { position: relative; }
.workspace-nav a.active::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--accent,#16a34a), var(--accent-strong,#0f766e));
}
/* Focus visibility for keyboard users (accessibility, not an AI tell) */
.workspace-nav a:focus-visible, .mkt-chip:focus-visible, .msg-details:focus-visible {
  outline: 2px solid var(--accent,#16a34a); outline-offset: 2px;
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .surface, .detail-stat, .metric-card, .lead-card, .msg-row, .feed-item { transition: none; }
  .lead-card:hover, .msg-row:hover, .feed-item:hover, .detail-stat:hover, .metric-card:hover { transform: none; }
}

/* ===== AI-slop remediation ===== */
/* Designed status dot replaces emoji-as-status (tells #57/58/65) */
.feed-dot { width:.5rem; height:.5rem; border-radius:2px; flex:0 0 auto; margin-top:.45rem;
  background: var(--dot,#94a3b8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot,#94a3b8) 18%, transparent); }
.feed-tone-good .feed-dot, .feed-item.feed-tone-good { --dot:#2e7d59; }
.feed-tone-bad .feed-dot { --dot:#b23a3a; }
.feed-tone-warn .feed-dot { --dot:#b7791f; }
.feed-tone-info .feed-dot { --dot:#0f766e; }
.feed-tone-neutral .feed-dot { --dot:#8a94a6; }
/* Badges: designed, not raw-enum color-only — square-ish, uppercase-tracking, a shape not just color (a11y tell #24) */
.feed-badge { border-radius:5px !important; font-weight:600; letter-spacing:.02em; padding:.14rem .5rem; font-size:.68rem;
  background: color-mix(in srgb, var(--dot,#8a94a6) 14%, transparent); color: var(--dot,#556); border:1px solid color-mix(in srgb, var(--dot,#8a94a6) 30%, transparent); }
.feed-badge-good{ --dot:#2e7d59 } .feed-badge-bad{ --dot:#b23a3a } .feed-badge-warn{ --dot:#b7791f } .feed-badge-info{ --dot:#0f766e } .feed-badge-neutral{ --dot:#8a94a6 }
/* Quiet live label (no pulsing dot) */
.live-feed-pulse, .pulse-dot { animation:none !important; }
.live-quiet { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft,#64748b); font-weight:600; }
/* Scope hover-lift to genuinely-clickable rows only (not every card) — tell #53/71 */
.detail-stat:hover, .metric-card:hover { transform:none; }
.lead-card:hover, .feed-item:hover { transform:none; box-shadow:0 2px 10px rgba(18,32,51,0.08); border-color:var(--surface-border,rgba(18,32,51,0.12)); }
.msg-row:hover { transform:none; background:rgba(22,163,74,0.03); }
/* Break the symmetric-identical-columns tell on the CSM grid: give the two feeds different weight */
.csm-grid { grid-template-columns: 1.35fr 1fr !important; }

/* ===== Issues Queue (managed call-issues: at-a-glance + archive) ===== */
.iq-critical{ --sv:#b23a3a } .iq-high{ --sv:#c2410c } .iq-medium{ --sv:#b7791f } .iq-warning{ --sv:#8a7a3f }
.iq-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.4rem; margin-bottom:.7rem; }
.iq-sum-cell { padding:.5rem .6rem; border-radius:8px; background:color-mix(in srgb, var(--sv,#8a94a6) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--sv,#8a94a6) 22%, transparent); border-left:3px solid var(--sv,#8a94a6); }
.iq-sum-sev { display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sv,#556); font-weight:700; }
.iq-sum-nums { font-size:.8rem; color:var(--ink-soft,#556); }
.iq-sum-nums b { font-variant-numeric:tabular-nums; color:var(--ink,#17202a); }
.iq-sum-nums b.iq-open-hot { color:var(--sv,#b23a3a); font-weight:800; }
.iq-sep { opacity:.4; }
.iq-tabs { display:flex; gap:.3rem; margin-bottom:.6rem; }
.iq-tab { padding:.28rem .7rem; border-radius:7px; border:1px solid var(--surface-border,rgba(18,32,51,0.14)); background:var(--surface,#fff); font-size:.76rem; cursor:pointer; color:inherit; }
.iq-tab.active { background:var(--sidebar,#122033); color:#fff; border-color:var(--sidebar,#122033); }
.iq-row { display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .7rem; border-radius:9px; border:1px solid var(--surface-border,rgba(18,32,51,0.07)); border-left:3px solid var(--sv,#94a3b8); margin-bottom:.4rem; }
.iq-row.iq-done { opacity:.62; }
.iq-dot { width:.5rem; height:.5rem; border-radius:2px; background:var(--sv,#94a3b8); margin-top:.4rem; flex:0 0 auto; }
.iq-body { flex:1; min-width:0; }
.iq-top { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.iq-title { font-weight:650; font-size:.86rem; }
.iq-sev-badge { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--sv,#556); }
.iq-status { font-size:.62rem; font-weight:600; padding:.08rem .4rem; border-radius:5px; }
.iq-status-open { background:color-mix(in srgb, var(--sv,#b23a3a) 16%, transparent); color:var(--sv,#b23a3a); }
.iq-status-done { background:rgba(46,125,89,0.14); color:#2e7d59; }
.iq-desc { font-size:.76rem; color:var(--ink-soft,#64748b); margin-top:.2rem; }
.iq-side { display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; flex:0 0 auto; }
.iq-when { font-size:.68rem; color:var(--ink-soft,#94a3b8); white-space:nowrap; }
.iq-archive { font-size:.68rem; padding:.2rem .55rem; border-radius:6px; border:1px solid var(--surface-border,rgba(18,32,51,0.18)); background:var(--surface,#fff); cursor:pointer; color:var(--ink-soft,#556); }
.iq-archive:hover { background:var(--sidebar,#122033); color:#fff; border-color:var(--sidebar,#122033); }

/* ===== action result summaries (CSM/Xact-facing) ===== */
.qa-result { display:flex; flex-direction:column; gap:.85rem; }
.qa-result-head { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.qa-result-title { font-size:.98rem; color:var(--ink,#122033); }
.qa-verdict { font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:6px; }
.qa-result-headline { margin:0; color:var(--ink-soft,#475569); font-size:.9rem; line-height:1.5; }
.qa-note { margin:0; font-size:.86rem; color:var(--ink-soft,#475569); line-height:1.5;
  padding:.55rem .7rem; background:color-mix(in srgb, var(--ink,#122033) 4%, transparent); border-radius:8px; }
.qa-note span { display:block; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft,#64748b); margin-bottom:.15rem; }
/* stat chips */
.qa-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.qa-chip { display:flex; flex-direction:column; gap:.1rem; min-width:7.5rem; padding:.5rem .7rem; border-radius:10px;
  background:color-mix(in srgb, var(--dot,#8a94a6) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--dot,#8a94a6) 24%, transparent); }
.qa-chip-label { font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft,#64748b); }
.qa-chip-value { font-size:.95rem; font-weight:650; color:var(--ink,#122033); }
.qa-chip-good{ --dot:#16a34a } .qa-chip-good .qa-chip-value, .qa-verdict.qa-chip-good{ color:#15803d }
.qa-chip-danger{ --dot:#dc2626 } .qa-chip-danger .qa-chip-value, .qa-verdict.qa-chip-danger{ color:#b91c1c }
.qa-chip-warn{ --dot:#d97706 } .qa-chip-warn .qa-chip-value, .qa-verdict.qa-chip-warn{ color:#b45309 }
.qa-chip-neutral{ --dot:#64748b }
.qa-verdict.qa-chip-good{ background:color-mix(in srgb,#16a34a 14%,transparent) }
.qa-verdict.qa-chip-danger{ background:color-mix(in srgb,#dc2626 14%,transparent) }
.qa-verdict.qa-chip-warn{ background:color-mix(in srgb,#d97706 16%,transparent) }
.qa-verdict.qa-chip-neutral{ background:color-mix(in srgb,#64748b 14%,transparent); color:#475569 }
/* collections */
.qa-collections { display:flex; flex-direction:column; gap:.85rem; }
.qa-collection { border:1px solid var(--surface-border,rgba(18,32,51,0.1)); border-radius:12px; padding:.7rem .8rem;
  background:color-mix(in srgb, var(--ink,#122033) 2%, transparent); }
.qa-collection-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.qa-collection-head strong { font-size:.82rem; color:var(--ink,#122033); }
.qa-count { font-size:.72rem; font-weight:700; color:var(--ink-soft,#64748b);
  background:color-mix(in srgb, var(--ink,#122033) 8%, transparent); padding:.1rem .5rem; border-radius:999px; }
.qa-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.qa-tag { font-size:.78rem; font-family:var(--font-mono,"IBM Plex Mono",monospace); color:var(--ink,#122033);
  background:color-mix(in srgb, var(--ink,#122033) 6%, transparent); padding:.15rem .5rem; border-radius:6px; }
.qa-more { font-size:.74rem; color:var(--ink-soft,#64748b); align-self:center; }
.qa-table-wrap { overflow-x:auto; }
.qa-table { width:100%; border-collapse:collapse; font-size:.83rem; }
.qa-table th { text-align:left; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft,#64748b); padding:.3rem .55rem; border-bottom:1px solid var(--surface-border,rgba(18,32,51,0.1)); }
.qa-table td { padding:.4rem .55rem; border-bottom:1px solid color-mix(in srgb, var(--ink,#122033) 5%, transparent);
  color:var(--ink,#122033); vertical-align:top; }
.qa-table tr:last-child td { border-bottom:none; }
.qa-cell-badge { font-size:.72rem; font-weight:650; padding:.08rem .4rem; border-radius:5px;
  background:color-mix(in srgb, var(--dot,#64748b) 12%, transparent); color:var(--dot,#475569); }
.qa-more-row { font-size:.74rem; color:var(--ink-soft,#64748b); padding-top:.45rem; }
/* raw JSON: opt-in only, never the default view */
.qa-raw { margin-top:.2rem; }
.qa-raw > summary { cursor:pointer; font-size:.76rem; color:var(--ink-soft,#64748b); font-weight:600;
  list-style:none; display:inline-flex; align-items:center; gap:.35rem; user-select:none; }
.qa-raw > summary::before { content:"›"; transition:transform .2s ease; display:inline-block; }
.qa-raw[open] > summary::before { transform:rotate(90deg); }
.qa-raw > summary:hover { color:var(--ink,#122033); }
.qa-raw pre { margin:.5rem 0 0; padding:.7rem .8rem; border-radius:8px; font-size:.76rem; line-height:1.5;
  background:#0f1b2d; color:#cbd5e1; overflow-x:auto; max-height:22rem; }

/* ===== action-result container: light surface (de-terminalized) ===== */
.action-result {
  color: var(--ink, #122033);
  background: var(--surface-card, #fffdf9);
  border: 1px solid var(--surface-border, rgba(18,32,51,0.1));
  white-space: normal;
  word-break: normal;
  max-height: none;
}
.action-result:empty { display: none; }

/* ===== glanceable drill-downs ===== */
:root { --dcg-ease: cubic-bezier(.22,1,.36,1); }
.metric-tile--link {
  position: relative; cursor: pointer;
  transition: transform .32s var(--dcg-ease), box-shadow .32s var(--dcg-ease), border-color .32s var(--dcg-ease);
  will-change: transform;
}
.metric-tile--link:hover,
.metric-tile--link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -12px rgba(18,32,51,0.32);
  border-color: color-mix(in srgb, var(--brand-green,#16a34a) 45%, transparent);
  outline: none;
}
.metric-tile--link:active { transform: translateY(-1px); transition-duration: .08s; }
/* the number itself leans into brand green on hover — a glanceable "this is live/actionable" cue */
.metric-tile--link:hover strong,
.metric-tile--link:focus-visible strong { color: var(--brand-green,#16a34a); transition: color .32s var(--dcg-ease); }
/* designed drill-in chevron: hidden at rest, slides in on hover (functional, not decorative) */
.metric-tile__go {
  position: absolute; top: .7rem; right: .7rem; display: inline-flex; color: var(--ink-soft,#64748b);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .28s var(--dcg-ease), transform .28s var(--dcg-ease), color .28s var(--dcg-ease);
  pointer-events: none;
}
.metric-tile--link:hover .metric-tile__go,
.metric-tile--link:focus-visible .metric-tile__go {
  opacity: 1; transform: translateX(0); color: var(--brand-green,#16a34a);
}
.metric-tile--link:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-green,#16a34a) 55%, transparent), 0 10px 26px -12px rgba(18,32,51,0.32); }
@media (prefers-reduced-motion: reduce) {
  .metric-tile--link, .metric-tile__go, .metric-tile--link strong { transition: none !important; }
  .metric-tile--link:hover, .metric-tile--link:focus-visible { transform: none; }
  .metric-tile__go { opacity: 1; transform: none; }
}

/* ===== designed empty states + drill breadcrumb ===== */
.empty-inline {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  text-align: center; padding: 1.5rem 1.1rem;
  color: var(--ink-soft, #64748b); font-size: .88rem; line-height: 1.5;
  background: color-mix(in srgb, var(--ink, #122033) 2.5%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ink, #122033) 13%, transparent);
  border-radius: 14px;
}
.empty-inline::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink, #122033) 16%, transparent);
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--brand-green, #16a34a) 30%, transparent) 0 3px, transparent 3px);
  opacity: .75;
}
/* drill-return breadcrumb chip */
.drill-return {
  display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .9rem;
  padding: .32rem .7rem .32rem .5rem; border-radius: 999px; cursor: pointer;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft, #475569);
  background: color-mix(in srgb, var(--ink, #122033) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink, #122033) 12%, transparent);
  transition: color .24s var(--dcg-ease, cubic-bezier(.22,1,.36,1)),
              background .24s var(--dcg-ease, cubic-bezier(.22,1,.36,1)),
              transform .24s var(--dcg-ease, cubic-bezier(.22,1,.36,1));
}
.drill-return:hover, .drill-return:focus-visible {
  color: var(--brand-green, #16a34a); transform: translateX(-2px);
  background: color-mix(in srgb, var(--brand-green, #16a34a) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-green, #16a34a) 32%, transparent); outline: none;
}
.drill-return svg { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .drill-return { transition: none; } .drill-return:hover { transform: none; } }

/* ============ Email Hub (Xact shared mailbox) ============ */
.email-topbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  min-width: 0;
}
.email-folder-control {
  display: grid;
  gap: 5px;
  min-width: min(260px, 100%);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 700;
}
.email-folder-control select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 8px 36px 8px 11px;
  background: var(--surface);
  color: var(--ink);
  font: 600 .9rem/1.25 inherit;
}
.email-folder-control select:focus-visible,
.email-ai-action:focus-visible {
  outline: 3px solid rgba(22,163,74,.4);
  outline-offset: 2px;
}
.email-refresh-meta {
  min-width: 0;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.email-explorer {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .email-explorer { grid-template-columns: minmax(0, 1fr); }
}
.email-list-pane,
.email-reader-pane {
  background: var(--surface-strong);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 320px;
}
.email-list-pane #emailList { max-height: 560px; overflow-y: auto; margin-top: 8px; }
.email-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "from date" "subject subject";
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.email-item:hover { background: var(--accent-soft); }
.email-item-from { grid-area: from; color: var(--ink); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-item-subject { grid-area: subject; color: var(--ink-soft); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-item-date { grid-area: date; color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; }
.email-item.email-unread .email-item-from,
.email-item.email-unread .email-item-subject { font-weight: 700; color: var(--ink); }
.email-item.email-active { background: var(--accent-soft); border-color: var(--accent); }
.email-reader { display: flex; flex-direction: column; gap: 12px; }
.email-reader-head { border-bottom: 1px solid var(--surface-border); padding-bottom: 10px; }
.email-reader-subject { margin: 0 0 6px; font-size: 1.1rem; color: var(--ink); }
.email-reader-meta { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; }
.email-reader-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.email-action {
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
.email-action:hover { border-color: var(--accent); color: var(--accent-strong); }
.email-action[disabled] { opacity: 0.5; cursor: not-allowed; }
.email-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0;
  max-height: 480px;
  overflow-y: auto;
  line-height: 1.55;
}
.email-html-frame {
  width: 100%;
  border: 0;
  min-height: 420px;
  height: 60vh;
  background: #fff;
  border-radius: var(--radius-sm);
}
.email-note { color: var(--ink-soft); font-size: 0.82rem; font-style: italic; }
.email-reply-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.email-reply-form textarea {
  width: 100%; min-height: 140px; resize: vertical;
  border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: 10px; font-family: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface);
}
.email-reply-form input[type="text"],
.email-reply-form input[type="email"] {
  width: 100%; border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-family: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface);
}
.email-reply-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.email-ai-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(20,169,255,.25);
  border-radius: var(--radius-sm);
  background: rgba(20,169,255,.055);
}
.email-ai-tools strong { color: var(--ink); font-size: .86rem; }
.email-ai-instruction {
  flex: 1 1 280px;
  min-width: min(220px, 100%);
  min-height: 40px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--ink);
  font: .86rem/1.3 inherit;
}
.email-ai-instruction:focus-visible { outline: 3px solid rgba(22,163,74,.4); outline-offset: 2px; }
.email-ai-action {
  min-height: 40px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--ink);
  font: 600 .82rem/1.2 inherit;
  cursor: pointer;
}
.email-ai-action:hover { border-color: var(--accent); color: var(--accent-strong); }
.email-ai-action[disabled] { opacity: .55; cursor: wait; }
.email-ai-provider { color: var(--ink-soft); font-size: .78rem; overflow-wrap: anywhere; }

.email-security-review { margin: 16px 0; padding: 16px 18px; border: 1px solid rgba(180,83,9,.32); border-left: 4px solid #b45309; border-radius: 12px; background: #fffbeb; color: #3f2d14; overflow-wrap: anywhere; }
.email-security-review > div:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.email-security-review h4 { margin: 0; font-size: 1rem; }
.email-security-review p { margin: 10px 0; line-height: 1.55; }
.email-security-score { padding: 4px 9px; border-radius: 999px; background: rgba(180,83,9,.12); color: #92400e; font-size: .78rem; }
.email-security-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.email-security-actions label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.email-security-actions select { max-width: 100%; padding: 8px 10px; border: 1px solid rgba(146,64,14,.3); border-radius: 8px; background: #fff; color: #3f2d14; }
.email-security-state { font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .email-topbar { align-items: stretch; padding: 12px; }
  .email-folder-control { width: 100%; min-width: 0; }
  .email-refresh-meta { width: 100%; margin-left: 0; }
  .email-reader-actions > *, .email-reply-actions > *, .email-ai-action { min-height: 44px; }
}

/* Fix: `.operator-chip span { display:block }` (specificity 0,1,1) was overriding the
   avatar `.operator-mark { display:grid }` (0,1,0), dropping its centering so the initials
   sat top-left. This higher-specificity rule restores grid centering; text-indent compensates
   the trailing letter-spacing so the glyphs are truly centered in the box. */
.operator-chip .operator-mark {
  display: grid;
  place-items: center;
  text-indent: 0.08em;
}

/* Xact Overview hub is injected as a child of the 5-column .metric-rail grid; without this it
   collapses to a single ~249px column and its inner panels overflow. Span the full rail width. */
.xact-hub {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}
.xact-hub-cards,
.xact-hub-panels {
  min-width: 0;
  max-width: 100%;
}

/* Quick actions are primary navigation, so give their icon, label, and supporting
   copy enough breathing room without changing compact metric tiles elsewhere. */
.xact-hub-cards .detail-stat {
  min-height: 9rem;
  padding: 1.35rem 1.4rem;
  gap: 0.55rem;
  align-content: start;
}

/* Support data tables need the full workspace width. Three 280px columns caused their
   640px table contents to overlap adjacent cards. Stack the operational panels and keep
   horizontal scrolling inside each panel instead of letting content escape its box. */
.xact-hub-panels {
  grid-template-columns: minmax(0, 1fr) !important;
}

.xact-hub .list-block,
.xact-hub .table-shell,
.xact-hub .table-scroll {
  min-width: 0;
  max-width: 100%;
}

/* Operational groups are real content panels, not edge-to-edge table fragments.
   Keep headings, counts, empty states, and scrollable rows comfortably inside the
   same visual boundary at desktop and phone widths. */
.xact-hub .list-block {
  box-sizing: border-box;
  padding: 1rem;
  border: 1px solid rgba(23, 32, 42, 0.08);
  border-radius: 22px;
  background: rgba(255, 252, 247, 0.62);
}

.xact-hub .list-block-header {
  padding-inline: 0.15rem;
}

.xact-hub .empty-inline {
  margin: 0.15rem;
}

.xact-hub .table-shell,
.xact-hub .table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.xact-hub .list-block-header > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.xact-escalation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.xact-escalation-form > * {
  min-width: 0;
}

.xact-escalation-wide {
  grid-column: 1 / -1;
}

.xact-crm-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 22px;
}

.xact-crm-form > *,
.xact-crm-filters > * {
  min-width: 0;
}

.xact-crm-wide {
  grid-column: 1 / -1;
}

.xact-sms-consent-panel {
  min-width: 0;
  margin: 8px 0 4px;
  padding: 18px;
  border: 1px solid rgba(56, 242, 163, 0.28);
  border-radius: 14px;
  background: rgba(56, 242, 163, 0.055);
}

.xact-sms-consent-panel legend {
  max-width: 100%;
  padding: 0 8px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.xact-consent-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  margin: 14px 0;
  line-height: 1.45;
}

.xact-consent-check input {
  flex: 0 0 auto;
  margin-top: 4px;
}

.xact-consent-check span,
.xact-consent-disclosure,
.xact-consent-disclosure p,
.xact-sms-actions,
.xact-sms-actions > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.xact-consent-disclosure {
  margin-top: 14px;
  padding: 14px;
  border-left: 3px solid var(--accent, #38f2a3);
  border-radius: 8px;
  background: rgba(2, 6, 17, 0.55);
}

.xact-consent-disclosure p {
  margin: 8px 0 0;
  line-height: 1.55;
}

.xact-sms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.xact-crm-filters {
  grid-template-columns: minmax(260px, 1fr) minmax(150px, .35fr) minmax(150px, .35fr) auto;
}

.xact-crm-customer-search { grid-template-columns: minmax(170px, .45fr) minmax(260px, 1fr) auto; align-items: end; }
.xact-crm-customer-search select { width: 100%; min-height: 48px; border: 1px solid var(--surface-border); border-radius: 13px; padding: 10px 36px 10px 12px; background: var(--surface); color: var(--ink); font: inherit; }
.xact-crm-customer-search select:focus-visible { outline: 3px solid rgba(22,163,74,.4); outline-offset: 2px; }
.xact-customer-results-region { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--surface-border); min-width: 0; }
.xact-results-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.xact-results-heading h4 { margin: 0; font-size: .95rem; }
.xact-results-heading span { color: var(--ink-soft); font-size: .82rem; }
.xact-customer-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-top: 12px; }
.xact-customer-result { width: 100%; min-width: 0; text-align: left; border: 1px solid var(--surface-border); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 12px; cursor: pointer; }
.xact-customer-result:hover { border-color: var(--accent); transform: translateY(-1px); }
.xact-customer-result:focus-visible { outline: 3px solid rgba(22,163,74,.45); outline-offset: 2px; }
.xact-issue-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.xact-issue-filters .active { background: var(--ink); color: #fff; }
.xact-help-chat { display: grid; grid-template-rows: minmax(320px, 56vh) auto; margin-top: 16px; border: 1px solid rgba(23,32,42,.13); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,247,241,.94)); box-shadow: 0 18px 46px rgba(23,32,42,.10); }
.xact-help-messages { overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; scroll-padding: 24px; }
.xact-help-message { display: flex; gap: 12px; max-width: min(860px, 96%); line-height: 1.55; overflow-wrap: anywhere; }
.xact-help-message p { margin: 4px 0 0; white-space: pre-line; }
.xact-help-user { align-self: flex-end; flex-direction: row-reverse; }
.xact-help-user > div { background: rgba(22,163,74,.11); border: 1px solid rgba(22,163,74,.22); border-radius: 16px 16px 4px 16px; padding: 11px 15px; box-shadow: 0 6px 16px rgba(22,163,74,.07); }
.xact-help-assistant > div { width: min(780px, 100%); min-width: 0; background: rgba(255,255,255,.9); border: 1px solid rgba(23,32,42,.09); border-radius: 4px 16px 16px 16px; padding: 16px 18px; box-shadow: 0 10px 26px rgba(23,32,42,.07); }
.xact-help-avatar { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--ink); color: #fff; font: 700 .65rem/1 "IBM Plex Mono", monospace; }
.xact-help-answer-label { display: block; margin-bottom: 12px; color: var(--ink); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.xact-help-answer { display: grid; gap: 8px; color: var(--ink); font-size: .95rem; line-height: 1.48; }
.xact-help-answer-heading { display: block; margin-top: 8px; color: var(--ink); font-family: var(--font-title); font-size: 1rem; }
.xact-help-answer-heading:first-child { margin-top: 0; }
.xact-help-answer-step { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: start; }
.xact-help-step-number { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: rgba(22,163,74,.12); color: #11753a; font: 700 .76rem/1 "IBM Plex Mono", monospace; }
.xact-help-answer-note { display: block; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(23,32,42,.09); color: var(--ink-soft); }
.xact-help-answer-space { height: 2px; }
.xact-help-source { display: block; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(23,32,42,.08); }
.xact-help-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 14px; border-top: 1px solid rgba(23,32,42,.1); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.xact-help-composer .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.xact-help-composer input { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--surface-border); border-radius: 13px; padding: 10px 14px; font: inherit; }
.xact-help-composer input:focus-visible { outline: 3px solid rgba(22,163,74,.4); outline-offset: 2px; }
.xact-help-status { margin: 9px 2px 18px; }

/* Email Hub organize: star indicator in the message list (inline SVG) */
.email-item-star { display: inline-block; margin-right: 6px; color: var(--accent); line-height: 1; }
.email-item-star svg { width: 12px; height: 12px; vertical-align: -1px; }

/* ============================================================================
   Accessibility + true-viewport corrections (Codex NOTE 43/44/46)
   ============================================================================ */

/* Email Label accessible dialog (replaces window.prompt) */
.email-label-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45); padding: 1rem; }
.email-label-dialog { width: min(420px, 96vw); background: var(--surface, #fffdfa); border: 1px solid var(--surface-border, rgba(23,32,42,.12));
  border-radius: 18px; box-shadow: 0 24px 60px rgba(15,23,42,.28); padding: 22px 22px 18px; }
.email-label-title { margin: 0 0 .8rem; font-size: 1.1rem; color: var(--ink, #17202a); }
.email-label-error { min-height: 1.1rem; margin: .3rem 0 .6rem; font-size: .84rem; color: var(--danger, #dc2626); }
.email-label-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.email-label-actions .action-button, .email-label-actions .secondary-button, .email-label-actions .ghost-button { min-height: 44px; }

/* Email HTML iframe: visible focus indicator. An iframe's own :focus outline is unreliable
   (focus moves into the frame document), so the wrapper shows the ring via :focus-within. */
.email-html-frame:focus, .email-html-frame:focus-visible { outline: 3px solid rgba(22,163,74,.55); outline-offset: 2px; }
.email-html-frame-wrap { border-radius: 8px; }
.email-html-frame-wrap:focus-within { outline: 3px solid rgba(22,163,74,.6); outline-offset: 2px; }

/* Attachment metadata list (surfaces attachment-only mail that otherwise looks empty) */
.email-attachments { margin: .6rem 0; padding: .6rem .8rem; border: 1px solid var(--surface-border, rgba(23,32,42,.12)); border-radius: 12px; background: rgba(23,32,42,.02); }
.email-attachments-title { font-size: .8rem; font-weight: 600; color: var(--ink-soft, #64748b); margin-bottom: .4rem; }
.email-attachment { display: flex; align-items: center; gap: .5rem; font-size: .86rem; padding: .15rem 0; color: var(--ink, #17202a); }
.email-attachment-name { font-weight: 500; overflow-wrap: anywhere; }
.email-attachment-size, .email-attachment-type { color: var(--ink-soft, #64748b); font-size: .78rem; }

/* Touch-target minimums at mobile (44px) — signup + email actions (Codex NOTE 46 P1/P2) */
@media (max-width: 720px) {
  .xact-escalation-form { grid-template-columns: 1fr; }
  .xact-escalation-wide { grid-column: 1; }
  .xact-crm-form, .xact-crm-filters, .xact-crm-customer-search { grid-template-columns: 1fr; }
  .xact-help-chat { grid-template-rows: minmax(420px, 66vh) auto; border-radius: 14px; }
  .xact-help-messages { padding: 12px; scroll-padding: 12px; }
  .xact-help-message { width: 100%; max-width: 100%; gap: 8px; }
  .xact-help-avatar { display: none; }
  .xact-help-assistant > div { width: 100%; padding: 14px; border-radius: 14px; }
  .xact-help-user > div { max-width: 92%; margin-left: auto; }
  .xact-help-answer { font-size: .92rem; gap: 9px; }
  .xact-help-answer-step { grid-template-columns: 26px minmax(0,1fr); gap: 8px; }
  .xact-help-composer { padding: 10px; }
  .xact-crm-wide { grid-column: 1; }
  #signup .field input, #signup .field select, #signup .field textarea { min-height: 44px; }
  #signup .field.signup-check { min-height: 44px; align-items: center; }
  #signup .field.signup-check input[type="checkbox"] { width: 24px; height: 24px; }
  .email-reader-actions .email-action, .email-reader-actions .secondary-button,
  .email-reply-actions .action-button, .email-reply-actions .secondary-button { min-height: 44px; padding: .55rem .9rem; }
  .email-item-star { min-width: 44px; min-height: 44px; }

  /* True-viewport containment (390/375/320): stop horizontal overflow of hub panels,
     list blocks, and tables — force single column + scroll wide content within its own box. */
  .xact-hub, .xact-hub-cards, .xact-hub-panels { grid-template-columns: 1fr !important; min-width: 0; }
  .list-block, .table-shell, .surface, .metric-rail, .detail-grid { min-width: 0; max-width: 100%; }
  .table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-shell table { min-width: 0; }
  #subscribers .table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #subscribers .data-table { min-width: 760px; }
  .list-block, .list-block-header { overflow-wrap: anywhere; }
  /* Live-feed / row text used white-space:nowrap → horizontal overflow at 320-390px.
     Force wrapping so no element's content exceeds its box (true-viewport clean). */
  .feed-item, .feed-body, .feed-meta { min-width: 0; }
  .feed-title, .feed-sub, .feed-badge,
  .crm-row-title, .crm-row-meta, .lead-name, .lead-meta,
  .table-secondary, .detail-stat { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  /* Modal form controls (e.g. profile interaction Type select) meet the 44px target. */
  .msg-modal select, .msg-modal input:not([type="checkbox"]):not([type="radio"]), .msg-modal textarea,
  #xactInteractionKind { min-height: 44px; }

  /* XACT operational tables become readable record cards on phones. Keeping the
     desktop nine-column CRM table at 390px produced one-letter vertical columns,
     which was technically contained but unusable for support work. */
  #xactCrmTable .table-scroll,
  #xactHubFeed .table-scroll,
  #xactHubRecent .table-scroll,
  #xactIssuesTable .table-scroll,
  #xactJourneyTable .table-scroll,
  #xactEscRecent .table-scroll,
  #xactKnowledgeSources .table-scroll { overflow: visible; }
  #xactCrmTable .data-table,
  #xactHubFeed .data-table,
  #xactHubRecent .data-table,
  #xactIssuesTable .data-table,
  #xactJourneyTable .data-table,
  #xactEscRecent .data-table,
  #xactKnowledgeSources .data-table { display: block; min-width: 0; width: 100%; }
  #xactCrmTable thead,
  #xactHubFeed thead,
  #xactHubRecent thead,
  #xactIssuesTable thead,
  #xactJourneyTable thead,
  #xactEscRecent thead,
  #xactKnowledgeSources thead { display: none; }
  #xactCrmTable tbody,
  #xactHubFeed tbody,
  #xactHubRecent tbody,
  #xactIssuesTable tbody,
  #xactJourneyTable tbody,
  #xactEscRecent tbody,
  #xactKnowledgeSources tbody { display: grid; gap: 12px; }
  #xactCrmTable tr,
  #xactHubFeed tr,
  #xactHubRecent tr,
  #xactIssuesTable tr,
  #xactJourneyTable tr,
  #xactEscRecent tr,
  #xactKnowledgeSources tr { display: block; border: 1px solid rgba(23,32,42,.09); border-radius: 14px; padding: 8px 12px; background: rgba(255,252,247,.9); }
  #xactCrmTable td,
  #xactHubFeed td,
  #xactHubRecent td,
  #xactIssuesTable td,
  #xactJourneyTable td,
  #xactEscRecent td,
  #xactKnowledgeSources td { display: grid; grid-template-columns: minmax(88px, .34fr) minmax(0, 1fr); gap: 10px; max-width: none; padding: 9px 0; border-bottom: 1px solid rgba(23,32,42,.07); overflow-wrap: anywhere; word-break: normal; }
  #xactCrmTable td:last-child,
  #xactHubFeed td:last-child,
  #xactHubRecent td:last-child,
  #xactIssuesTable td:last-child,
  #xactJourneyTable td:last-child,
  #xactEscRecent td:last-child,
  #xactKnowledgeSources td:last-child { border-bottom: 0; }
  #xactCrmTable td::before,
  #xactHubFeed td::before,
  #xactHubRecent td::before,
  #xactIssuesTable td::before,
  #xactJourneyTable td::before,
  #xactEscRecent td::before,
  #xactKnowledgeSources td::before { color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  #xactCrmTable td:nth-child(1)::before { content: "When"; } #xactCrmTable td:nth-child(2)::before { content: "Customer"; }
  #xactCrmTable td:nth-child(3)::before { content: "Type"; } #xactCrmTable td:nth-child(4)::before { content: "Direction"; }
  #xactCrmTable td:nth-child(5)::before { content: "Status"; } #xactCrmTable td:nth-child(6)::before { content: "Disposition"; }
  #xactCrmTable td:nth-child(7)::before { content: "Notes"; } #xactCrmTable td:nth-child(8)::before { content: "Agent"; }
  #xactCrmTable td:nth-child(9)::before { content: "Action"; }
  #xactHubFeed td:nth-child(1)::before { content: "When"; } #xactHubFeed td:nth-child(2)::before { content: "Type"; }
  #xactHubFeed td:nth-child(3)::before { content: "Detail"; }
  #xactHubRecent td:nth-child(1)::before { content: "Time"; } #xactHubRecent td:nth-child(2)::before { content: "Contact"; }
  #xactHubRecent td:nth-child(3)::before { content: "Inmate / booking"; } #xactHubRecent td:nth-child(4)::before { content: "Plan"; }
  #xactHubRecent td:nth-child(5)::before { content: "Status"; }
  #xactIssuesTable td:nth-child(1)::before { content: "When"; } #xactIssuesTable td:nth-child(2)::before { content: "State"; }
  #xactIssuesTable td:nth-child(3)::before { content: "Category"; } #xactIssuesTable td:nth-child(4)::before { content: "Issue"; }
  #xactIssuesTable td:nth-child(5)::before { content: "Resolution"; }
  #xactJourneyTable td:nth-child(1)::before { content: "Latest"; } #xactJourneyTable td:nth-child(2)::before { content: "Customer"; }
  #xactJourneyTable td:nth-child(3)::before { content: "Forms"; } #xactJourneyTable td:nth-child(4)::before { content: "State"; }
  #xactJourneyTable td:nth-child(5)::before { content: "Completed"; } #xactJourneyTable td:nth-child(6)::before { content: "Activity"; }
  #xactEscRecent td:nth-child(1)::before { content: "When"; } #xactEscRecent td:nth-child(2)::before { content: "Priority"; }
  #xactEscRecent td:nth-child(3)::before { content: "Customer"; } #xactEscRecent td:nth-child(4)::before { content: "Summary"; }
  #xactEscRecent td:nth-child(5)::before { content: "Email"; }
  #xactKnowledgeSources td:nth-child(1)::before { content: "Source"; } #xactKnowledgeSources td:nth-child(2)::before { content: "Type"; }
  #xactKnowledgeSources td:nth-child(3)::before { content: "Status"; }
}

/* Convert-to-paid flow (profile modal + New Signup) — payment link result + copy control */
.signup-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.convert-result { border: 1px solid var(--surface-border, rgba(23,32,42,.12)); border-left: 4px solid var(--success, #16a34a);
  background: var(--success-soft, rgba(22,163,74,.08)); border-radius: var(--radius-sm, 10px); padding: 12px 14px; }
.convert-result-head { font-size: .95rem; color: var(--ink, #17202a); margin-bottom: .3rem; }
.convert-plan { font-size: .86rem; color: var(--ink-soft, #64748b); margin-bottom: .55rem; }
.convert-link-row { display: flex; gap: .5rem; align-items: center; }
.convert-link-input { flex: 1 1 auto; min-width: 0; font-family: "IBM Plex Mono", monospace; font-size: .82rem;
  padding: .5rem .6rem; border: 1px solid var(--surface-border, rgba(23,32,42,.14)); border-radius: 8px; background: #fff; color: var(--ink, #17202a); }
.convert-link-row .secondary-button { min-height: 40px; white-space: nowrap; }
@media (max-width: 720px) {
  .signup-actions { flex-direction: column; align-items: stretch; }
  .signup-actions .action-button, .signup-actions .secondary-button { width: 100%; min-height: 44px; }
  .convert-link-row { flex-direction: column; align-items: stretch; }
  .convert-link-row .secondary-button { min-height: 44px; }
}

/* ============================================================================
   Service Reports (customer-service:reports) — Zendesk/Remedy-style analytics
   ============================================================================ */
.sr-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; margin-bottom: 1.1rem; }
.sr-toolbar label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft, #64748b); }
.sr-status { font-size: .84rem; color: var(--ink-soft, #64748b); }
.sr-run-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.sr-run-meta { color: var(--ink-soft, #64748b); font-weight: 400; font-size: .84rem; }
.sr-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-bottom: 1.4rem; }
.sr-metric { padding: 1.1rem 1.2rem; border: 1px solid var(--surface-border, rgba(23,32,42,.12)); border-radius: 16px;
  background: var(--surface, #fffdfa); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.sr-metric-value { font-family: "Outfit", system-ui, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink, #17202a); }
.sr-metric-label { margin-top: .35rem; font-size: .84rem; color: var(--ink-soft, #64748b); }
.sr-metric-note { margin-top: .4rem; font-size: .74rem; color: #b45309; }
.sr-metric-unavail { background: rgba(180,83,9,.04); border-color: rgba(180,83,9,.18); }
.sr-metric-unavail .sr-metric-value { color: var(--ink-soft, #94a3b8); }
@media (max-width: 720px) {
  .sr-toolbar { flex-direction: column; align-items: stretch; }
  .sr-toolbar .action-button, .sr-toolbar select { min-height: 44px; width: 100%; }
  .sr-metric-grid { grid-template-columns: 1fr; }
  .sr-metric-value { font-size: 1.7rem; }
}

/* The Xact PIN form is gated on selecting an account first. .auth-form sets
   display:grid, which beats the [hidden] attribute's default display:none,
   so the form must opt out explicitly or it renders before a selection. */
#xactAccountPinForm[hidden] {
  display: none;
}