:root {
  --sdi-ink: #061929;
  --sdi-navy: #002f5f;
  --sdi-blue: #075a96;
  --sdi-cyan: #19a8c9;
  --sdi-cyan-soft: #dff6fb;
  --page: #eef4f8;
  --panel: #ffffff;
  --panel-soft: #f6f9fc;
  --panel-warm: #fffdf7;
  --line: #d8e2ea;
  --line-strong: #b8c8d4;
  --text: #102030;
  --muted: #526575;
  --success: #198754;
  --success-soft: #e8f7ee;
  --warning: #a66b00;
  --warning-soft: #fff2d6;
  --danger: #b3261e;
  --danger-soft: #fdebea;
  --focus: 0 0 0 3px rgba(25, 168, 201, 0.28);
  --shadow-sm: 0 4px 12px rgba(6, 25, 41, 0.08);
  --shadow-md: 0 14px 34px rgba(6, 25, 41, 0.12);
  --radius-lg: 18px;
  --radius-md: 14px;
  --agent-width: 320px;
  --rail-width: 370px;
  --service-width: 360px;
  --ops-min-width: 760px;
  --gap: 16px;
}

* { box-sizing: border-box; }
html { min-width: 0; background: var(--page); }
html, body { margin: 0; min-height: 100%; }
.startup-error-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,190,190,.75);
  background: #fff1f0;
  color: #8f1d16;
  font-weight: 850;
  box-shadow: 0 6px 18px rgba(16,24,40,.16);
}
.startup-error-banner[hidden] { display: none !important; }

body {
  min-height: 100vh;
  font-family: Inter, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 4% 0%, rgba(25, 168, 201, 0.16), transparent 32rem),
    linear-gradient(180deg, #eef5f9 0%, #f8fbfd 48%, #ffffff 100%);
  color: var(--text);
  overflow-x: auto;
}
button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus); }

/* Keep the embedded CCP alive for Streams/WebRTC without showing the stock softphone. */
#container-div,
.ccp-host {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 320px !important;
  height: 520px !important;
  max-width: 320px !important;
  max-height: 520px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: -1 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #00274d 0%, #003966 58%, #00274d 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 8px 26px rgba(0, 39, 77, 0.18);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-icon { width: 42px; height: 42px; border-radius: 999px; background: #fff; border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 1px; font-size: 1.34rem; letter-spacing: .01em; line-height: 1.05; }
h2 { margin-bottom: 5px; font-size: 1.04rem; line-height: 1.2; }
h3 { margin-bottom: 8px; font-size: .92rem; line-height: 1.25; }
h4 { margin: 0 0 4px; font-size: .86rem; }
.app-subtitle { margin: 0; color: #dbe9f2; font-size: .82rem; }
.header-status-stack { display: grid; justify-items: end; gap: 6px; }
.build-version-badge { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.connection-banner { max-width: 560px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.10); color: #fff; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connection-banner.ready { background: rgba(25,135,84,.28); border-color: rgba(176,230,197,.35); }
.connection-banner.error { background: rgba(179,38,30,.28); border-color: rgba(255,190,190,.35); }

/* Top-level layout: three side-by-side columns. Agent Console | Operations Dashboard | ServiceNow. */
#gridDiv.app-grid {
  display: grid !important;
  grid-template-columns: var(--agent-width) minmax(var(--ops-min-width), 1fr) var(--service-width) !important;
  gap: var(--gap) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  min-width: calc(var(--agent-width) + var(--ops-min-width) + var(--service-width) + (var(--gap) * 2) + 32px) !important;
  margin: 0 !important;
  padding: 16px !important;
  overflow: visible !important;
}
#customCCPDiv.agent-card {
  grid-column: 1 !important;
  width: var(--agent-width) !important;
  min-width: var(--agent-width) !important;
  max-width: var(--agent-width) !important;
  justify-self: start !important;
}
#operationsWorkspace.ops-workspace {
  grid-column: 2 !important;
  min-width: var(--ops-min-width) !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}
#dashboard.dashboard-card {
  min-width: var(--ops-min-width) !important;
  width: 100% !important;
  max-width: none !important;
}
#serviceNowPanel.service-now-card {
  grid-column: 3 !important;
  width: var(--service-width) !important;
  min-width: var(--service-width) !important;
  max-width: var(--service-width) !important;
  justify-self: start !important;
}
#rightRail.side-rail { display: contents !important; }
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(480px, 1.35fr) minmax(280px, .85fr);
  gap: var(--gap);
  align-items: stretch;
}
#queue-status { min-width: 0; }
#agentScriptPanel { min-width: 0; }
#connectAssistantPanel { min-height: 112px; }
.agent-card,
.dashboard-card,
.service-now-card,
#agentScriptPanel,
#connectAssistantPanel {
  border: 1px solid rgba(184, 200, 212, .9);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.dashboard-card, .service-now-card, #agentScriptPanel, #connectAssistantPanel { padding: 14px; display: grid; gap: 14px; }

.agent-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(135deg, #00274d 0%, #003c70 100%);
  color: #fff;
}
#greetingImageContainer { display: flex; flex: 0 0 auto; }
#greetingImage { width: 44px; height: 44px; border: 2px solid #fff; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.status-control { position: relative; flex: 1; min-width: 0; }
#statusDropdown {
  width: 100%;
  min-height: 36px;
  padding: 0 88px 0 14px;
  border: 1px solid rgba(135,160,175,.9);
  border-radius: 999px;
  appearance: none;
  background: rgba(0, 39, 77, .92);
  color: #dceaf2;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}
#statusDropdown:hover, #statusDropdown:focus { border-color: #fff; color: #fff; box-shadow: var(--focus); }
#dropdownIcon { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #fff; pointer-events: none; }
.agent-state-timer { position:absolute; right:34px; top:50%; transform:translateY(-50%); pointer-events:none; color:rgba(255,255,255,.92); font-size:.74rem; font-weight:950; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
#dropdownIcon.open { transform: translateY(-50%) rotate(180deg); }
.agent-body { display: grid; gap: 13px; padding: 14px; }
.agent-greeting { color: var(--sdi-navy); font-weight: 850; }
.agent-meta { display: grid; gap: 3px; color: var(--muted); font-size: .80rem; line-height: 1.25; }
.transient-agent-state-list-item { color: var(--warning); font-weight: 850; }

.contact-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px; }
#answerDiv, #clearDiv { grid-column: 1 / -1 !important; }
.action-button, .secondary-button, .dialpad-grid button {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6f9fc;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.action-button { min-height: 42px; font-size: .88rem; }
.secondary-button { padding: 7px 10px; font-size: .80rem; }
.action-button:hover, .secondary-button:hover, .dialpad-grid button:hover { background: #edf5fa; border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.action-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .58; transform: none; box-shadow: none; }
.call-button { background: var(--success-soft); color: var(--success); border-color: #bfe6ce; }
.secondary-call-control.active-control, #muteDiv.active-control { background: var(--warning-soft); border-color: #e4b65c; color: #684000; }
@keyframes glowing { 0%,100%{background:var(--success);box-shadow:0 0 4px var(--success);color:#fff;} 50%{background:#49e819;box-shadow:0 0 18px #49e819;color:#102030;} }
.glowingButton { animation: glowing 1300ms infinite; border-color: transparent; }

.current-contact-card, .recent-answered-card, .dialpad-card, .metric-panel, .transcript-panel, .service-now-result-block {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}
.current-contact-card dl { display: grid; gap: 7px; margin: 0; }
.current-contact-card dl div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; align-items: start; }
.current-contact-card dt, .metric-table-row span, .field-label { color: var(--muted); font-size: .78rem; }
.current-contact-card dd { margin: 0; color: var(--sdi-navy); font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.recent-answered-card { background: #fbfdff; }
.recent-answered-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.recent-answered-list li { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 7px 9px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.recent-answered-list li.empty-state { display: block; border-style: dashed; background: transparent; }
.recent-answered-number { color: var(--sdi-navy); font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-answered-meta { color: var(--muted); font-size: .76rem; text-align: right; white-space: nowrap; }
html[data-theme="dark"] .recent-answered-list li { background: rgba(15, 23, 42, .42); }

.field-label { display: block; margin: 7px 0 4px; font-weight: 800; }
.text-input, .notes-box { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--text); }
.text-input { min-height: 38px; padding: 7px 10px; }
.notes-box { min-height: 104px; padding: 9px; resize: vertical; }
.dialpad-card { background: #fbfdff; }
.dialpad-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 7px; margin: 9px 0; }
.dialpad-grid button { min-height: 37px; font-size: .94rem; }
.dialpad-actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 7px; }
.quick-connect-panel { margin: 8px 0 12px; padding: 0 0 12px; border-top: 0; border-bottom: 1px solid var(--line); }
.quick-connect-row { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; margin-top: 8px; }
.panel-heading-row, .section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading-row p, .panel-note, .service-now-card p { margin-bottom: 0; color: var(--muted); font-size: .81rem; line-height: 1.35; }

.queue-panel-wide { min-height: 220px; background: var(--panel-warm); }
.queue-target-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: center; margin: 12px 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 13px; background: #fff; white-space: nowrap; overflow-x: auto; }
.queue-target-row .field-label { margin: 0; }
#queueMetricsQueueLabel { color: var(--sdi-navy); overflow: hidden; text-overflow: ellipsis; }
.metric-table { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.metric-table-row { display: grid; grid-template-columns: minmax(220px, 1fr) 120px; align-items: center; gap: 14px; min-width: 0; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.metric-table-row:last-child { border-bottom: 0; }
.metric-table-head { background: #edf4f8; font-weight: 850; }
.metric-table-row strong { color: var(--sdi-navy); text-align: right; }
.status-pill { padding: 4px 8px; border-radius: 999px; font-size: .68rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.status-pill.pending { background: var(--warning-soft); color: var(--warning); }
.status-pill.ready { background: var(--success-soft); color: var(--success); }
.status-pill.error { background: var(--danger-soft); color: var(--danger); }
.compact-list { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: .78rem; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.compact-list li { margin-bottom: 4px; overflow-wrap: normal; }
.legacy-metric-alias { display: none; }

.script-text, .assistant-body, .result-box, .transcript-messages { border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--text); }
.script-text, .assistant-body, .result-box { padding: 11px; line-height: 1.42; min-height: 96px; }
.transcript-messages { min-height: 250px; max-height: 430px; overflow-y: auto; padding: 10px; }
.transcript-line { margin-bottom: 10px; padding: 9px 10px; border-radius: 12px; background: var(--panel-soft); line-height: 1.38; }
.transcript-line .speaker { display: block; margin-bottom: 4px; color: var(--sdi-blue); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.empty-state { color: var(--muted); font-size: .82rem; }
.service-now-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.service-now-result-block h3 { margin-bottom: 7px; }
#dialPadStatus[data-state="error"], #quickConnectStatus[data-state="error"], #transcriptStatus[data-state="error"] { color: var(--danger); font-weight: 800; }
#dialPadStatus[data-state="ready"], #quickConnectStatus[data-state="ready"], #transcriptStatus[data-state="ready"] { color: var(--success); font-weight: 800; }

/* Guardrails against stale markup during CloudFront/browser cache transitions. */
#outboundQueue, label[for="outboundQueue"], .queue-arn, #contactQueueArnValue { display: none !important; }

@media (max-width: 1280px) {
  #gridDiv.app-grid {
    min-width: calc(var(--agent-width) + var(--ops-min-width) + var(--service-width) + (var(--gap) * 2) + 32px) !important;
  }
}
@media (max-width: 980px) {
  .app-header { position: static; align-items: flex-start; flex-direction: column; }
  .header-status-stack { justify-items: stretch; width: 100%; }
  .connection-banner { max-width: none; width: 100%; }
  #gridDiv.app-grid { grid-template-columns: 1fr !important; min-width: 0 !important; padding: 12px !important; }
  #customCCPDiv.agent-card, #serviceNowPanel.service-now-card { width: 100% !important; min-width: 0 !important; max-width: none !important; grid-column: auto !important; }
  #operationsWorkspace.ops-workspace, #dashboard.dashboard-card { grid-column: auto !important; min-width: 0 !important; }
  .dashboard-main-grid { grid-template-columns: 1fr !important; }
}


/* v26 retry: console state, collapsible dialpad/transcript/script panels, agent activity metrics, and ServiceNow staging. */
#softphoneDialPadDetails { display: grid; gap: 10px; }
#softphoneDialPadDetails:not([open]) { gap: 0; }
.panel-summary { display:flex; align-items:center; gap:10px; justify-content:space-between; cursor:pointer; color:var(--sdi-navy); font-weight:900; list-style:none; }
.panel-summary::-webkit-details-marker { display:none; }
.panel-summary::before { content:"▾"; color:var(--sdi-blue); }
details:not([open]) > .panel-summary::before { transform: rotate(-90deg); }
.summary-subtext { margin-left:auto; color:var(--muted); font-size:.74rem; font-weight:850; text-transform:none; max-width:62%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#scriptStatus { display:none !important; }
.legacy-metric-targets { display:none !important; }
#queueMetricsStatus { display:block; margin-top:0.35rem; }
#queueMetricsFreshness { display:inline-flex; }
.incoming-queue-alert { display:none; margin:6px 0 10px; padding:10px; border-radius:14px; background:#fff7df; color:var(--sdi-navy); font-size:1.24rem; font-weight:950; letter-spacing:.02em; text-align:center; text-transform:uppercase; }
.incoming-queue-alert.queue-alert-visible { display:block; }
.incoming-queue-alert.queue-alert-active { animation: queueIdentifierGlow 900ms ease-in-out infinite; }
@keyframes queueIdentifierGlow { 0%,100% { box-shadow:0 0 0 rgba(25,168,201,0); border-color:#f2ca70; } 50% { box-shadow:0 0 24px rgba(25,168,201,.65); border-color:var(--sdi-cyan); } }
#hangupDiv.on-call-control { background:var(--danger-soft); border-color:#f0aaa5; color:var(--danger); }
#hangupDiv.glowingButton { background:var(--danger-soft); border-color:#f0aaa5; color:var(--danger); animation:hangupRedGlow 1200ms ease-in-out infinite; }
.secondary-call-control.active-control, #holdDiv.active-control, #muteDiv.active-control { background:var(--warning-soft); border-color:#e4b65c; color:#684000; }
#joinDiv.glowingButton { animation:holdMuteYellowGlow 1200ms ease-in-out infinite; background:var(--warning-soft); border-color:#e4b65c; color:#684000; }
@keyframes hangupRedGlow { 0%,100% { box-shadow:0 0 4px rgba(179,38,30,.35); } 50% { box-shadow:0 0 18px rgba(179,38,30,.75); } }
@keyframes holdMuteYellowGlow { 0%,100% { box-shadow:0 0 4px rgba(166,107,0,.25); } 50% { box-shadow:0 0 18px rgba(255,190,80,.8); } }
#agentStatusDiv.status-sla-green #statusDropdown { background:rgba(25,135,84,.92); color:#fff; box-shadow:0 0 13px rgba(25,135,84,.55); border-color:#bfe6ce; }
#agentStatusDiv.status-sla-yellow #statusDropdown { background:rgba(166,107,0,.95); color:#fff; box-shadow:0 0 16px rgba(255,190,80,.75); border-color:#f2ca70; animation:statusYellowGlow 1200ms ease-in-out infinite; }
#agentStatusDiv.status-sla-red #statusDropdown { background:rgba(179,38,30,.95); color:#fff; border-color:#f0aaa5; animation:statusRedFlash 780ms ease-in-out infinite; }
@keyframes statusYellowGlow { 0%,100% { box-shadow:0 0 5px rgba(166,107,0,.35); } 50% { box-shadow:0 0 22px rgba(255,190,80,.95); } }
@keyframes statusRedFlash { 0%,100% { box-shadow:0 0 5px rgba(179,38,30,.45); } 50% { box-shadow:0 0 22px rgba(255,60,50,.95); } }
.agent-activity-table { width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:13px; background:#fff; }
.agent-activity-row { display:grid; grid-template-columns:minmax(120px,1.15fr) minmax(128px,1.1fr) minmax(100px,.9fr) 82px 52px 52px; gap:10px; align-items:center; min-width:660px; padding:9px 10px; border-bottom:1px solid var(--line); }
.agent-activity-row:last-child { border-bottom:0; }
.agent-activity-head { background:#edf4f8; font-weight:900; color:var(--muted); font-size:.78rem; }
.agent-activity-row strong { color:var(--sdi-navy); }
.agent-activity-duration { font-variant-numeric:tabular-nums; }
.activity-pill { display:inline-flex; align-items:center; width:fit-content; padding:3px 8px; border-radius:999px; font-size:.72rem; font-weight:900; background:var(--panel-soft); border:1px solid var(--line); color:var(--sdi-navy); }
.activity-pill.available { background:var(--success-soft); color:var(--success); border-color:#bfe6ce; }
.activity-pill.on-contact { background:#e7f4ff; color:var(--sdi-blue); border-color:#acd2f2; }
.activity-pill.acw { background:#fff7df; color:#684000; border-color:#e4b65c; }
.activity-pill.non-productive, .activity-pill.break, .activity-pill.lunch, .activity-pill.restroom-personal { background:var(--warning-soft); color:var(--warning); border-color:#e4b65c; }
.activity-pill.error { background:var(--danger-soft); color:var(--danger); border-color:#f0aaa5; }
.ticket-list { display:grid; gap:7px; }
.ticket-list-item { display:grid; gap:2px; width:100%; text-align:left; border:1px solid var(--line); border-radius:11px; background:#fff; padding:8px 9px; cursor:pointer; }
.ticket-list-item:hover, .ticket-list-item.selected { border-color:var(--sdi-cyan); box-shadow:var(--shadow-sm); }
.ticket-list-item strong { color:var(--sdi-navy); }
.ticket-list-meta { color:var(--muted); font-size:.74rem; }
.service-now-link-block .secondary-button { width:100%; margin-top:8px; }
.service-now-current-contact .result-box { min-height:74px; }


/* v27: Operations Dashboard sections are stacked, not side-by-side. */
.dashboard-main-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--gap) !important;
  align-items: stretch !important;
}
#agentScriptPanel,
#queue-metrics-panel,
#queues-panel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}
#agentScriptDetails > .panel-summary {
  align-items: center;
}
#scriptQueueSummary.summary-subtext {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-left: auto;
  max-width: 68%;
}
.agent-activity-row {
  grid-template-columns: minmax(155px,1.2fr) minmax(128px,1fr) minmax(100px,.9fr) 82px 52px 52px !important;
}


/* v29: metrics rows group each agent once and show every assigned queue membership. */
.agent-activity-row { grid-template-columns: minmax(120px, .85fr) minmax(190px, 1.55fr) minmax(110px, .85fr) 88px 62px 62px; }
.agent-queue-list { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.agent-queue-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: #edf4f8; border: 1px solid var(--line); color: var(--sdi-navy); font-size: .72rem; font-weight: 800; }
.metric-warning-note { color: var(--warning); font-size: .75rem; font-weight: 800; }


/* v31: Queue columns size to the longest queue name instead of absorbing extra dashboard width. */
#dashboard { --queue-name-column-ch: 18ch; --agent-name-column-ch: 18ch; --activity-column-ch: 14ch; }
#queueMetricsByQueue .metric-table-row {
  grid-template-columns: minmax(var(--queue-name-column-ch), var(--queue-name-column-ch)) minmax(0, 1fr) !important;
}
#queueMetricsByQueue .metric-table-row > span[role="cell"],
#queueMetricsByQueue .metric-table-row > span[role="columnheader"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#queueMetricsByQueue .metric-table-row strong {
  min-width: 0;
  text-align: left;
  white-space: normal;
}
.agent-activity-row {
  grid-template-columns: minmax(var(--agent-name-column-ch), var(--agent-name-column-ch)) minmax(var(--queue-name-column-ch), var(--queue-name-column-ch)) minmax(var(--activity-column-ch), var(--activity-column-ch)) 88px 62px 62px !important;
  min-width: calc(var(--agent-name-column-ch) + var(--queue-name-column-ch) + var(--activity-column-ch) + 320px) !important;
}
.agent-activity-row > span:nth-child(2),
.agent-activity-row > span:nth-child(2) .agent-queue-list {
  min-width: 0;
}
.agent-activity-row > strong:first-child,
.agent-activity-row > span:nth-child(3),
.agent-activity-row > span:nth-child(3) .activity-pill {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-queue-list {
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
}
.agent-queue-chip {
  max-width: calc(var(--queue-name-column-ch) - 1ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v32: remove visible deployment marker and keep Operations Dashboard section headers left-aligned. */
#operationsWorkspace .panel-summary {
  justify-content: flex-start !important;
}
#operationsWorkspace .panel-summary > span:first-of-type {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
#operationsWorkspace .panel-summary .summary-subtext,
#operationsWorkspace .panel-summary .status-pill {
  margin-left: auto !important;
}
#operationsWorkspace .section-heading-row {
  justify-content: flex-start !important;
  text-align: left !important;
}
#operationsWorkspace .section-heading-row > div {
  text-align: left !important;
}
#operationsWorkspace .section-heading-row > .secondary-button {
  margin-left: auto !important;
}


/* v36: hold/resume button state fix on top of warm-transfer and live metrics updates. */
#queueMetricsByQueue {
  margin-bottom: 10px;
}


/* v37: state timer inside status dropdown, centered metric headers, and quick connects above dial entry. */
.agent-activity-head > span,
.agent-activity-head > strong {
  text-align: center !important;
  justify-self: stretch;
}
.agent-activity-row > span:nth-child(4),
.agent-activity-row > span:nth-child(5),
.agent-activity-row > span:nth-child(6) {
  text-align: center;
}
#agentStatusDiv.status-sla-green #agentStateTimer,
#agentStatusDiv.status-sla-yellow #agentStateTimer,
#agentStatusDiv.status-sla-red #agentStateTimer {
  color: #fff;
}


/* v38: center queue dashboard metric values to match centered metric headers. */
.agent-activity-row > span,
.agent-activity-row > strong {
  text-align: center !important;
  justify-self: stretch;
}
.agent-activity-row .agent-queue-list {
  justify-content: center !important;
}
.agent-activity-row .activity-pill {
  margin-left: auto;
  margin-right: auto;
}
#queueMetricsByQueue .metric-table-row > span[role="columnheader"],
#queueMetricsByQueue .metric-table-row > strong[role="cell"] {
  text-align: center !important;
}


/* v39: contact-action state machine, one-next-action glow discipline, quick connects when idle, and touchtone dial pad mode. */

/* v39.2 multi-leg consult visibility */
.call-leg-workspace { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.call-leg-heading { font-size: .78rem; color: var(--muted); font-weight: 850; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.call-leg-grid { display: grid; gap: 8px; }
.call-leg-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; box-shadow: 0 8px 22px rgba(5, 31, 58, .06); }
.call-leg-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.call-leg-card p { margin: 6px 0 10px; color: var(--sdi-navy); font-size: .85rem; font-weight: 750; overflow-wrap: anywhere; }
.call-leg-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.call-leg-controls .secondary-button { min-height: 34px; padding: 7px 8px; }
.danger-lite { border-color: #f0aaa5 !important; color: var(--danger) !important; background: var(--danger-soft) !important; }
.call-leg-empty { color: var(--muted); font-size: .82rem; }
.call-leg-card.attention-glow, .call-leg-workspace.attention-glow { animation: holdMuteYellowGlow 1200ms ease-in-out infinite; border-color: #e4b65c; }
.conference-leg { background: #f8fbff; }

/* v40.3.9: compact agent metrics rows to one name-line height while preserving multi-queue visibility through a +N chip and full queue tooltip. */
.agent-activity-row {
  min-height: 30px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  align-items: center !important;
}
.agent-activity-row > strong,
.agent-activity-row > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
}
.agent-activity-row > strong:first-child {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.agent-activity-row > span:nth-child(2) {
  min-width: 0 !important;
}
.agent-activity-row .agent-queue-list {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  max-height: 22px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.agent-activity-row .agent-queue-chip {
  flex: 0 1 auto !important;
  max-width: calc(var(--queue-name-column-ch) - 5ch) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
.agent-activity-row .agent-queue-more {
  flex: 0 0 auto !important;
  max-width: none !important;
}
.agent-activity-row .activity-pill {
  max-height: 22px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  white-space: nowrap !important;
}

/* v40.8: Agent Console settings panel static fallback, cache-busted assets, browser-local theme/device controls, and true collapsed dashboard shells. */
.agent-settings-button {
  width: 100%;
  margin: 2px 0 7px;
  text-align: center;
}
.agent-settings-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
}
.agent-settings-panel[hidden] { display: none !important; }
.settings-section {
  display: grid;
  gap: 6px;
}
.settings-section h3 { margin-bottom: 2px; }
.settings-actions-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 4px 0 2px;
}
.settings-status { margin-top: 2px; }
.settings-status[data-state="ready"] { color: var(--success); font-weight: 850; }
.settings-status[data-state="error"] { color: var(--danger); font-weight: 850; }
.settings-status[data-state="pending"] { color: var(--warning); font-weight: 850; }

#operationsWorkspace .collapsible-shell.is-collapsed {
  min-height: 0 !important;
  padding: 8px 12px !important;
  gap: 0 !important;
  background: var(--panel-soft) !important;
}
#operationsWorkspace .collapsible-shell.is-collapsed details > :not(summary) {
  display: none !important;
}
#operationsWorkspace details:not([open]) > :not(summary) {
  display: none !important;
}
#operationsWorkspace .collapsible-shell.is-collapsed .panel-summary {
  margin: 0 !important;
}
#operationsWorkspace .queue-panel-wide.is-collapsed {
  min-height: 0 !important;
}

html[data-theme="dark"] {
  --sdi-ink: #ecf7ff;
  --sdi-navy: #d7ecff;
  --sdi-blue: #8ed2ff;
  --sdi-cyan: #55d4f2;
  --sdi-cyan-soft: #0b3441;
  --page: #07111b;
  --panel: #101c28;
  --panel-soft: #122334;
  --panel-warm: #1c2530;
  --line: #304454;
  --line-strong: #4b6476;
  --text: #ecf4fa;
  --muted: #aebdca;
  --success-soft: #0f3625;
  --warning-soft: #3b2b10;
  --danger-soft: #3b1515;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.34);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 4% 0%, rgba(85, 212, 242, 0.16), transparent 32rem),
    linear-gradient(180deg, #07111b 0%, #0a1723 54%, #08111a 100%);
}
html[data-theme="dark"] .agent-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .service-now-card,
html[data-theme="dark"] #agentScriptPanel,
html[data-theme="dark"] #connectAssistantPanel {
  background: rgba(16, 28, 40, .98);
  border-color: var(--line);
}
html[data-theme="dark"] .action-button,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .dialpad-grid button,
html[data-theme="dark"] .text-input,
html[data-theme="dark"] .notes-box,
html[data-theme="dark"] .script-text,
html[data-theme="dark"] .assistant-body,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .transcript-messages,
html[data-theme="dark"] .metric-table,
html[data-theme="dark"] .agent-activity-table,
html[data-theme="dark"] .queue-target-row,
html[data-theme="dark"] .ticket-list-item {
  background: #0e1b27;
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] .metric-table-head,
html[data-theme="dark"] .agent-activity-head,
html[data-theme="dark"] .transcript-line,
html[data-theme="dark"] .agent-queue-chip {
  background: #17293a;
  border-color: var(--line);
}
html[data-theme="dark"] .action-button:hover,
html[data-theme="dark"] .secondary-button:hover,
html[data-theme="dark"] .dialpad-grid button:hover {
  background: #182c3e;
}
html[data-theme="dark"] .incoming-queue-alert {
  background: #332914;
}

/* v40.8: hard-align Agent Metrics columns and reserve Current Queue for the live/ACW contact queue only. */
#dashboard {
  --agent-name-column-ch: 18ch;
  --agent-current-queue-column-ch: 16ch;
  --activity-column-ch: 14ch;
}
.agent-activity-table {
  --agent-metrics-duration-column: 92px;
  --agent-metrics-count-column: 62px;
  --agent-metrics-gap: 10px;
}
.agent-activity-row {
  grid-template-columns:
    minmax(150px, 1.35fr)
    minmax(130px, 1fr)
    minmax(116px, .9fr)
    var(--agent-metrics-duration-column)
    var(--agent-metrics-count-column)
    var(--agent-metrics-count-column) !important;
  gap: var(--agent-metrics-gap) !important;
  width: 100% !important;
  min-width: 680px !important;
  box-sizing: border-box !important;
}
.agent-activity-head > [role="columnheader"],
.agent-activity-row > [role="cell"],
.agent-activity-row > strong[role="cell"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}
.agent-activity-head > [role="columnheader"]:nth-child(4),
.agent-activity-head > [role="columnheader"]:nth-child(5),
.agent-activity-head > [role="columnheader"]:nth-child(6),
.agent-activity-row > [role="cell"]:nth-child(4),
.agent-activity-row > [role="cell"]:nth-child(5),
.agent-activity-row > [role="cell"]:nth-child(6) {
  justify-content: center !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}
.agent-current-queue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.agent-current-queue-chip {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.agent-queue-empty {
  color: var(--muted);
  font-weight: 900;
}

/* v40.8: strict Agent Metrics alignment and contact-only Current Queue rendering. */
#dashboard {
  --agent-name-column-ch: 18ch;
  --agent-current-queue-column-ch: 15ch;
  --activity-column-ch: 13ch;
}
.agent-activity-table {
  overflow-x: auto !important;
}
.agent-activity-row {
  display: grid !important;
  grid-template-columns:
    minmax(var(--agent-name-column-ch), var(--agent-name-column-ch))
    minmax(var(--agent-current-queue-column-ch), var(--agent-current-queue-column-ch))
    minmax(var(--activity-column-ch), var(--activity-column-ch))
    8ch
    5ch
    5ch !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  min-width: calc(var(--agent-name-column-ch) + var(--agent-current-queue-column-ch) + var(--activity-column-ch) + 34ch) !important;
  width: max-content !important;
  max-width: none !important;
}
.agent-activity-head > [role="columnheader"],
.agent-activity-row > [role="cell"],
.agent-activity-row > strong[role="cell"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  text-align: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.agent-activity-row > strong[role="cell"] {
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.agent-activity-row > [role="cell"]:nth-child(4),
.agent-activity-row > [role="cell"]:nth-child(5),
.agent-activity-row > [role="cell"]:nth-child(6),
.agent-activity-head > [role="columnheader"]:nth-child(4),
.agent-activity-head > [role="columnheader"]:nth-child(5),
.agent-activity-head > [role="columnheader"]:nth-child(6) {
  font-variant-numeric: tabular-nums !important;
}
.agent-current-queue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.agent-current-queue-chip {
  flex: 0 1 auto !important;
  max-width: calc(var(--agent-current-queue-column-ch) - 1ch) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.agent-queue-empty {
  display: inline-flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* v40.8: full-width Agent Metrics row lines and literal six-column alignment. */
.agent-activity-table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.agent-activity-rows {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.agent-activity-row {
  display: grid !important;
  grid-template-columns:
    minmax(145px, 1.35fr)
    minmax(120px, 0.95fr)
    minmax(116px, 0.85fr)
    74px
    54px
    54px !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  border-bottom: 1px solid var(--line) !important;
}
.agent-activity-head {
  width: 100% !important;
  border-bottom: 1px solid var(--line) !important;
}
.agent-activity-rows .agent-activity-row:last-child {
  border-bottom: 0 !important;
}
.agent-activity-row > [role="columnheader"],
.agent-activity-row > [role="cell"],
.agent-activity-row > strong[role="cell"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
}
.agent-activity-row > [role="columnheader"]:nth-child(3),
.agent-activity-row > [role="cell"]:nth-child(3) {
  grid-column: 3 !important;
}
.agent-activity-row > [role="columnheader"]:nth-child(4),
.agent-activity-row > [role="cell"]:nth-child(4) {
  grid-column: 4 !important;
  font-variant-numeric: tabular-nums !important;
}
.agent-activity-row > [role="columnheader"]:nth-child(5),
.agent-activity-row > [role="cell"]:nth-child(5) {
  grid-column: 5 !important;
  font-variant-numeric: tabular-nums !important;
}
.agent-activity-row > [role="columnheader"]:nth-child(6),
.agent-activity-row > [role="cell"]:nth-child(6) {
  grid-column: 6 !important;
  font-variant-numeric: tabular-nums !important;
}
.agent-activity-row .activity-pill,
.agent-activity-row .agent-current-queue,
.agent-activity-row .agent-queue-empty {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* v40.8: security-profile-aware feature visibility and privileged Agent Metrics columns. */
.metric-table-aggregate-row {
  background: #f7fbfe !important;
  font-weight: 900 !important;
}
.metric-table-aggregate-row span[role="cell"] {
  color: var(--sdi-navy) !important;
  font-weight: 950 !important;
}
.agent-activity-table.agent-activity-advanced {
  overflow-x: auto !important;
}
.agent-activity-table.agent-activity-advanced .agent-activity-row {
  grid-template-columns:
    minmax(145px, 1.35fr)
    minmax(120px, 0.95fr)
    minmax(116px, 0.85fr)
    74px
    54px
    54px
    58px
    108px
    74px !important;
  min-width: 920px !important;
  max-width: none !important;
}
.agent-activity-table.agent-activity-advanced .agent-activity-row > [role="columnheader"]:nth-child(7),
.agent-activity-table.agent-activity-advanced .agent-activity-row > [role="columnheader"]:nth-child(8),
.agent-activity-table.agent-activity-advanced .agent-activity-row > [role="columnheader"]:nth-child(9),
.agent-activity-table.agent-activity-advanced .agent-activity-row > [role="cell"]:nth-child(7),
.agent-activity-table.agent-activity-advanced .agent-activity-row > [role="cell"]:nth-child(8),
.agent-activity-table.agent-activity-advanced .agent-activity-row > [role="cell"]:nth-child(9) {
  justify-content: center !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-security-capabilities="pending"] #operationsWorkspace,
html[data-security-capabilities="pending"] #serviceNowPanel,
html[data-security-capabilities="pending"] #callTranscriptPanel,
html[data-security-capabilities="pending"] #connectAssistantPanel,
html[data-security-capabilities="error"] #operationsWorkspace,
html[data-security-capabilities="error"] #serviceNowPanel,
html[data-security-capabilities="error"] #callTranscriptPanel,
html[data-security-capabilities="error"] #connectAssistantPanel {
  display: none !important;
}

/* v40.8: normalize section surfaces so Agent Console, Operations, ServiceNow, settings, metric, transcript, and assistant panels share the same theme language. */
.agent-card,
.dashboard-card,
.service-now-card,
.agent-settings-panel,
.current-contact-card,
.recent-answered-card,
.dialpad-card,
.quick-connect-panel,
.script-panel,
.metric-panel,
.transcript-panel,
.connect-assistant-panel,
#agentScriptPanel,
#connectAssistantPanel {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.metric-table,
.agent-activity-table,
.queue-target-row,
.result-box,
.ticket-list-item,
.transcript-messages,
.script-text,
.assistant-body,
.notes-box,
.text-input {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.metric-table-head,
.agent-activity-head,
.panel-summary,
.metric-table-aggregate-row,
.incoming-queue-alert {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.metric-table-row strong,
.agent-activity-row strong,
.metric-table-aggregate-row span[role="cell"] {
  color: var(--sdi-navy) !important;
}
html[data-theme="dark"] .metric-table-row strong,
html[data-theme="dark"] .agent-activity-row strong,
html[data-theme="dark"] .metric-table-aggregate-row span[role="cell"] {
  color: var(--text) !important;
}
html[data-theme="dark"] .metric-table,
html[data-theme="dark"] .agent-activity-table,
html[data-theme="dark"] .queue-target-row,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .ticket-list-item,
html[data-theme="dark"] .transcript-messages,
html[data-theme="dark"] .script-text,
html[data-theme="dark"] .assistant-body,
html[data-theme="dark"] .notes-box,
html[data-theme="dark"] .text-input,
html[data-theme="dark"] .agent-settings-panel,
html[data-theme="dark"] .current-contact-card,
html[data-theme="dark"] .dialpad-card,
html[data-theme="dark"] .quick-connect-panel,
html[data-theme="dark"] .script-panel,
html[data-theme="dark"] .metric-panel,
html[data-theme="dark"] .transcript-panel,
html[data-theme="dark"] .connect-assistant-panel {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .metric-table-head,
html[data-theme="dark"] .agent-activity-head,
html[data-theme="dark"] .panel-summary,
html[data-theme="dark"] .metric-table-aggregate-row,
html[data-theme="dark"] .incoming-queue-alert {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}


.diagnostics-settings-section {
  border-top: 1px solid var(--sdi-border);
  padding-top: 0.85rem;
}
.diagnostics-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
#diagnosticsStatus[data-state="ready"], #settingsStatus[data-state="ready"] { color: var(--sdi-success); }
#diagnosticsStatus[data-state="pending"], #settingsStatus[data-state="pending"] { color: var(--sdi-warning); }
#diagnosticsStatus[data-state="error"], #settingsStatus[data-state="error"] { color: var(--sdi-danger); }

/* v40.8 supervisor controls, queue call-stat emphasis, and theme-normalized call screens */
.agent-activity-table.agent-activity-controls:not(.agent-activity-advanced) .agent-activity-row {
  grid-template-columns: minmax(120px, .9fr) minmax(170px, 1.35fr) minmax(100px, .75fr) 82px 54px 54px minmax(82px, .65fr) minmax(170px, 1.15fr) !important;
  min-width: 1040px !important;
}
.agent-activity-table.agent-activity-controls.agent-activity-advanced .agent-activity-row {
  grid-template-columns: minmax(120px, .85fr) minmax(170px, 1.25fr) minmax(100px, .75fr) 82px 54px 54px 62px 78px 78px minmax(82px, .65fr) minmax(170px, 1.15fr) !important;
  min-width: 1250px !important;
}
.agent-control-cell { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
.agent-status-control-cell { justify-content:flex-start; }
.agent-status-select {
  min-width: 104px;
  max-width: 135px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 7px;
  background: var(--card);
  color: var(--ink);
  font-weight: 750;
  font-size: .75rem;
}
.secondary-button.compact { min-height: 30px; padding: 6px 9px; font-size: .75rem; border-radius: 9px; }
.agent-monitor-button:not(:disabled) { box-shadow: 0 0 0 1px rgba(50, 130, 184, .18), 0 8px 18px rgba(50, 130, 184, .12); }
.agent-status-apply-button:not(:disabled) { box-shadow: 0 0 0 1px rgba(37, 112, 82, .18), 0 8px 18px rgba(37, 112, 82, .10); }
.queue-metric-line { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap: 0 6px; }
.queue-call-stat-highlight {
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(50, 130, 184, .28);
  background: rgba(50, 130, 184, .11);
  color: var(--sdi-navy);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 950;
  white-space: nowrap;
}
.theme-dark .queue-call-stat-highlight,
[data-theme="dark"] .queue-call-stat-highlight {
  border-color: rgba(125, 211, 252, .38);
  background: rgba(14, 165, 233, .18);
  color: #dff6ff;
}
:root {
  --call-panel-bg: #f8fbff;
  --call-panel-border: rgba(50, 83, 112, .22);
  --call-panel-ink: #071f38;
  --call-panel-muted: #52667a;
  --call-active-bg: #ecfdf5;
  --call-active-border: #21a67a;
  --call-consult-bg: #f4f0ff;
  --call-consult-border: #7b61ff;
  --call-waiting-bg: #fff8e6;
  --call-waiting-border: #d99b18;
  --call-ended-bg: #f3f4f6;
  --call-ended-border: #9ca3af;
  --call-danger-bg: #fff1f2;
  --call-danger-border: #e11d48;
}
.theme-dark, [data-theme="dark"] {
  --call-panel-bg: #0b1625;
  --call-panel-border: rgba(148, 163, 184, .36);
  --call-panel-ink: #eef6ff;
  --call-panel-muted: #b7c6d8;
  --call-active-bg: rgba(20, 83, 45, .58);
  --call-active-border: #4ade80;
  --call-consult-bg: rgba(76, 29, 149, .54);
  --call-consult-border: #a78bfa;
  --call-waiting-bg: rgba(113, 63, 18, .55);
  --call-waiting-border: #fbbf24;
  --call-ended-bg: rgba(31, 41, 55, .72);
  --call-ended-border: #94a3b8;
  --call-danger-bg: rgba(127, 29, 29, .62);
  --call-danger-border: #fb7185;
}
.current-contact-card, .call-leg-card {
  background: var(--call-panel-bg) !important;
  border-color: var(--call-panel-border) !important;
  color: var(--call-panel-ink) !important;
}
.call-leg-card p, .call-leg-title-row, .call-leg-card strong { color: var(--call-panel-ink) !important; }
.call-leg-empty { color: var(--call-panel-muted) !important; }
.call-leg-card.customer-leg, .call-leg-card[data-leg-role="customer"], .call-leg-card.connected, .current-contact-card.on-call {
  background: var(--call-active-bg) !important;
  border-color: var(--call-active-border) !important;
}
.call-leg-card.consult-leg, .call-leg-card[data-leg-role="consult"], .conference-leg {
  background: var(--call-consult-bg) !important;
  border-color: var(--call-consult-border) !important;
}
.call-leg-card.pending, .call-leg-card.incoming, .current-contact-card.incoming {
  background: var(--call-waiting-bg) !important;
  border-color: var(--call-waiting-border) !important;
}
.call-leg-card.ended, .call-leg-card.disconnected {
  background: var(--call-ended-bg) !important;
  border-color: var(--call-ended-border) !important;
}
.call-leg-card.error, .call-leg-card.failed {
  background: var(--call-danger-bg) !important;
  border-color: var(--call-danger-border) !important;
}
.status-pill.ready { background: var(--call-active-bg) !important; border-color: var(--call-active-border) !important; color: var(--call-panel-ink) !important; }
.status-pill.pending { background: var(--call-waiting-bg) !important; border-color: var(--call-waiting-border) !important; color: var(--call-panel-ink) !important; }
.status-pill.error { background: var(--call-danger-bg) !important; border-color: var(--call-danger-border) !important; color: var(--call-panel-ink) !important; }
#answerDiv:not(:disabled), #joinDiv:not(:disabled) { border-color: var(--call-active-border) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--call-active-border), transparent 68%); }
#holdDiv.active-control, #muteDiv.active-control, .secondary-call-control.active-control { border-color: var(--call-waiting-border) !important; background: var(--call-waiting-bg) !important; color: var(--call-panel-ink) !important; }
#hangupDiv.on-call-control, #hangupDiv.danger-control { border-color: var(--call-danger-border) !important; background: var(--call-danger-bg) !important; color: var(--call-panel-ink) !important; }

/* v40.8 stabilization polish: unavailable controls should read as unavailable, not broken. */
.agent-monitor-button:disabled,
.agent-status-apply-button:disabled:disabled,
.action-button:disabled,
.secondary-button:disabled {
  opacity: .74;
  filter: saturate(.65);
  border-style: dashed;
  background: color-mix(in srgb, var(--panel-soft), var(--line) 18%);
  color: var(--muted);
}
.agent-monitor-button:disabled,
.agent-status-apply-button:disabled {
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .12);
}
.current-contact-card.no-contact {
  background: var(--call-panel-bg) !important;
  border-color: var(--call-panel-border) !important;
}
.current-contact-card.consult,
.current-contact-card.conference {
  background: var(--call-consult-bg) !important;
  border-color: var(--call-consult-border) !important;
}
.current-contact-card.ended {
  background: var(--call-ended-bg) !important;
  border-color: var(--call-ended-border) !important;
}
.current-contact-card.error {
  background: var(--call-danger-bg) !important;
  border-color: var(--call-danger-border) !important;
}
.queue-call-stat-highlight {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

/* v40.8: keep per-queue metrics visually continuous and readable after wrapping. */
#queueMetricsByQueue .metric-table-row {
  align-items: start !important;
  grid-template-columns: minmax(var(--queue-name-column-ch), var(--queue-name-column-ch)) minmax(0, 1fr) !important;
}
#queueMetricsByQueue .queue-metrics-by-queue-rows .metric-table-row > span[role="cell"] {
  padding-top: 4px;
}
#queueMetricsByQueue .metric-table-row strong.queue-metric-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px 8px !important;
  min-width: 0 !important;
  text-align: left !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
.queue-metric-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  white-space: nowrap;
}
.queue-metric-label {
  font-weight: 850;
}
.queue-metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}
#queueMetricsByQueue .metric-table-row > strong[role="cell"] {
  justify-self: stretch;
}


/* v40.8: inline supervisor controls without losing Activity-column color language. */
.agent-current-queue-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.agent-current-queue.monitor-available,
.agent-monitor-button.monitor-ready {
  animation: monitorReadyPulse 1.55s ease-in-out infinite;
}
@keyframes monitorReadyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(50, 130, 184, .18); }
  50% { box-shadow: 0 0 0 4px rgba(50, 130, 184, .16); }
}
.agent-inline-status-control {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.agent-activity-cell .agent-status-select {
  min-width: 96px;
  max-width: 128px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .72rem;
  font-weight: 900;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--sdi-navy);
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="working"] {
  opacity: .82;
  cursor: progress;
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="ready"] {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="error"] {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}
html[data-theme="dark"] .agent-activity-cell .agent-status-select,
.theme-dark .agent-activity-cell .agent-status-select {
  background: rgba(148, 163, 184, .16);
  color: var(--text);
  border-color: rgba(148, 163, 184, .34);
}

/* v40.8: queue metrics must remain visible as wrapped token grids, never clipped strings. */
#queueMetricsByQueue.metric-table {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
#queueMetricsByQueue .metric-table-row {
  grid-template-columns: minmax(150px, 0.7fr) minmax(280px, 1.9fr) !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
}
#queueMetricsByQueue .metric-table-row > span[role="cell"],
#queueMetricsByQueue .metric-table-row > span[role="columnheader"] {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}
#queueMetricsByQueue .metric-table-row > strong[role="cell"],
#queueMetricsByQueue .metric-table-row strong.queue-metric-line {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  text-align: left !important;
  justify-self: stretch !important;
}
#queueMetricsByQueue .metric-table-row strong.queue-metric-line {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(86px, max-content)) !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  gap: 6px 8px !important;
}
.queue-metric-token {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
.queue-call-stat-highlight {
  min-width: 104px !important;
  justify-content: center !important;
}
@media (max-width: 1180px) {
  #queueMetricsByQueue .metric-table-row {
    grid-template-columns: minmax(132px, 0.65fr) minmax(0, 1.35fr) !important;
  }
  #queueMetricsByQueue .metric-table-row strong.queue-metric-line {
    grid-template-columns: repeat(auto-fit, minmax(78px, max-content)) !important;
    gap: 5px 7px !important;
  }
  .queue-call-stat-highlight { min-width: 96px !important; }
}

/* v40.8: Agent Metrics may scroll horizontally instead of clipping Activity plus inline status controls. */
.agent-activity-table {
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.agent-activity-rows {
  min-width: max-content !important;
}
.agent-activity-row {
  grid-template-columns:
    minmax(145px, 1.15fr)
    minmax(170px, 1fr)
    minmax(210px, 1.25fr)
    78px
    54px
    54px !important;
  min-width: 780px !important;
  width: 100% !important;
  max-width: none !important;
}
.agent-activity-table.agent-activity-advanced .agent-activity-row {
  grid-template-columns:
    minmax(145px, 1.1fr)
    minmax(170px, 1fr)
    minmax(210px, 1.25fr)
    78px
    54px
    54px
    58px
    108px
    74px !important;
  min-width: 1080px !important;
  max-width: none !important;
}
.agent-activity-cell {
  overflow: visible !important;
}
.agent-activity-status-stack {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.agent-activity-cell .activity-pill {
  flex: 0 1 auto !important;
  max-width: 96px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.agent-inline-status-control {
  flex: 0 0 auto !important;
  max-width: 112px !important;
}
.agent-activity-cell .agent-status-select {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  border-radius: 999px !important;
  padding: 4px 24px 4px 9px !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
}

/* v40.8: inline supervisor status dropdown inherits the current Activity color language. */
.agent-activity-cell .agent-status-select.available {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: #bfe6ce !important;
}
.agent-activity-cell .agent-status-select.on-contact,
.agent-activity-cell .agent-status-select.connected,
.agent-activity-cell .agent-status-select.connected-to-agent {
  background: #e7f4ff !important;
  color: var(--sdi-blue) !important;
  border-color: #acd2f2 !important;
}
.agent-activity-cell .agent-status-select.acw,
.agent-activity-cell .agent-status-select.after-contact-work {
  background: #fff7df !important;
  color: #684000 !important;
  border-color: #e4b65c !important;
}
.agent-activity-cell .agent-status-select.non-productive,
.agent-activity-cell .agent-status-select.break,
.agent-activity-cell .agent-status-select.lunch,
.agent-activity-cell .agent-status-select.restroom-personal {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
  border-color: #e4b65c !important;
}
.agent-activity-cell .agent-status-select.error {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: #f0aaa5 !important;
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="working"] {
  opacity: .82 !important;
  cursor: progress !important;
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="ready"] {
  box-shadow: 0 0 0 2px rgba(25, 135, 84, .24) !important;
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="error"] {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
html[data-theme="dark"] .agent-activity-cell .agent-status-select.available,
.theme-dark .agent-activity-cell .agent-status-select.available {
  background: rgba(21, 128, 61, .30) !important;
  color: #bbf7d0 !important;
  border-color: rgba(74, 222, 128, .48) !important;
}
html[data-theme="dark"] .agent-activity-cell .agent-status-select.on-contact,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.connected,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.connected-to-agent,
.theme-dark .agent-activity-cell .agent-status-select.on-contact,
.theme-dark .agent-activity-cell .agent-status-select.connected,
.theme-dark .agent-activity-cell .agent-status-select.connected-to-agent {
  background: rgba(14, 165, 233, .24) !important;
  color: #dff6ff !important;
  border-color: rgba(125, 211, 252, .48) !important;
}
html[data-theme="dark"] .agent-activity-cell .agent-status-select.acw,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.after-contact-work,
.theme-dark .agent-activity-cell .agent-status-select.acw,
.theme-dark .agent-activity-cell .agent-status-select.after-contact-work,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.non-productive,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.break,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.lunch,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.restroom-personal,
.theme-dark .agent-activity-cell .agent-status-select.non-productive,
.theme-dark .agent-activity-cell .agent-status-select.break,
.theme-dark .agent-activity-cell .agent-status-select.lunch,
.theme-dark .agent-activity-cell .agent-status-select.restroom-personal {
  background: rgba(113, 63, 18, .42) !important;
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, .50) !important;
}

/* v40.8: rollback-style stabilization for Agent Metrics alignment and single Activity status control. */
.agent-activity-table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.agent-activity-rows {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.agent-activity-row {
  display: grid !important;
  grid-template-columns:
    minmax(170px, 1.35fr)
    minmax(160px, 1.05fr)
    minmax(138px, .95fr)
    84px
    58px
    58px !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 760px !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.agent-activity-table.agent-activity-advanced .agent-activity-row {
  grid-template-columns:
    minmax(170px, 1.25fr)
    minmax(160px, 1fr)
    minmax(138px, .9fr)
    84px
    58px
    58px
    64px
    118px
    84px !important;
  min-width: 1020px !important;
}
.agent-activity-head,
.agent-activity-rows .agent-activity-row {
  box-sizing: border-box !important;
}
.agent-activity-head > [role="columnheader"],
.agent-activity-row > [role="cell"],
.agent-activity-row > strong[role="cell"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
  overflow: hidden !important;
}
.agent-activity-row > strong[role="cell"] {
  justify-content: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.agent-current-queue-cell,
.agent-activity-cell {
  overflow: visible !important;
}
.agent-current-queue-wrap,
.agent-activity-status-stack {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
.agent-current-queue,
.agent-current-queue-chip,
.agent-queue-empty {
  min-width: 0 !important;
  max-width: 100% !important;
}
.agent-current-queue-chip {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.agent-inline-status-control {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 132px !important;
  min-width: 0 !important;
}
.agent-activity-cell .agent-status-select.activity-pill {
  display: inline-block !important;
  width: 100% !important;
  min-width: 112px !important;
  max-width: 132px !important;
  border-radius: 999px !important;
  padding: 4px 24px 4px 10px !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-align-last: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
}
.agent-activity-cell .agent-status-select.activity-pill:disabled {
  cursor: not-allowed !important;
}
.agent-activity-cell .agent-status-select.available,
.agent-activity-cell .activity-pill.available {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: #bfe6ce !important;
}
.agent-activity-cell .agent-status-select.on-contact,
.agent-activity-cell .agent-status-select.connected,
.agent-activity-cell .agent-status-select.connected-to-agent,
.agent-activity-cell .agent-status-select.busy,
.agent-activity-cell .agent-status-select.pendingbusy,
.agent-activity-cell .agent-status-select.pending-busy,
.agent-activity-cell .activity-pill.on-contact,
.agent-activity-cell .activity-pill.connected,
.agent-activity-cell .activity-pill.busy,
.agent-activity-cell .activity-pill.pendingbusy,
.agent-activity-cell .activity-pill.pending-busy {
  background: #e7f4ff !important;
  color: var(--sdi-blue) !important;
  border-color: #acd2f2 !important;
}
.agent-activity-cell .agent-status-select.acw,
.agent-activity-cell .agent-status-select.after-contact-work,
.agent-activity-cell .agent-status-select.wrap-up,
.agent-activity-cell .agent-status-select.wrapup,
.agent-activity-cell .agent-status-select.non-productive,
.agent-activity-cell .agent-status-select.break,
.agent-activity-cell .agent-status-select.lunch,
.agent-activity-cell .agent-status-select.restroom-personal,
.agent-activity-cell .activity-pill.acw,
.agent-activity-cell .activity-pill.after-contact-work,
.agent-activity-cell .activity-pill.wrap-up,
.agent-activity-cell .activity-pill.wrapup,
.agent-activity-cell .activity-pill.non-productive,
.agent-activity-cell .activity-pill.break,
.agent-activity-cell .activity-pill.lunch,
.agent-activity-cell .activity-pill.restroom-personal {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
  border-color: #e4b65c !important;
}
.agent-activity-cell .agent-status-select.error,
.agent-activity-cell .activity-pill.error {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: #f0aaa5 !important;
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="working"] {
  opacity: .82 !important;
  cursor: progress !important;
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="ready"] {
  box-shadow: 0 0 0 2px rgba(25, 135, 84, .24) !important;
}
.agent-activity-cell .agent-status-select[data-supervisor-action-state="error"] {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
html[data-theme="dark"] .agent-activity-cell .agent-status-select.available,
.theme-dark .agent-activity-cell .agent-status-select.available {
  background: rgba(21, 128, 61, .30) !important;
  color: #bbf7d0 !important;
  border-color: rgba(74, 222, 128, .48) !important;
}
html[data-theme="dark"] .agent-activity-cell .agent-status-select.on-contact,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.connected,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.connected-to-agent,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.busy,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.pendingbusy,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.pending-busy,
.theme-dark .agent-activity-cell .agent-status-select.on-contact,
.theme-dark .agent-activity-cell .agent-status-select.connected,
.theme-dark .agent-activity-cell .agent-status-select.connected-to-agent,
.theme-dark .agent-activity-cell .agent-status-select.busy,
.theme-dark .agent-activity-cell .agent-status-select.pendingbusy,
.theme-dark .agent-activity-cell .agent-status-select.pending-busy {
  background: rgba(14, 165, 233, .24) !important;
  color: #dff6ff !important;
  border-color: rgba(125, 211, 252, .48) !important;
}
html[data-theme="dark"] .agent-activity-cell .agent-status-select.acw,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.after-contact-work,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.wrap-up,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.wrapup,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.non-productive,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.break,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.lunch,
html[data-theme="dark"] .agent-activity-cell .agent-status-select.restroom-personal,
.theme-dark .agent-activity-cell .agent-status-select.acw,
.theme-dark .agent-activity-cell .agent-status-select.after-contact-work,
.theme-dark .agent-activity-cell .agent-status-select.wrap-up,
.theme-dark .agent-activity-cell .agent-status-select.wrapup,
.theme-dark .agent-activity-cell .agent-status-select.non-productive,
.theme-dark .agent-activity-cell .agent-status-select.break,
.theme-dark .agent-activity-cell .agent-status-select.lunch,
.theme-dark .agent-activity-cell .agent-status-select.restroom-personal {
  background: rgba(113, 63, 18, .42) !important;
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, .50) !important;
}

/* v40.8: queue metrics stay a visible two-column table with a wrapping token grid. */
#queueMetricsByQueue.metric-table {
  overflow-x: auto !important;
  overflow-y: visible !important;
}
#queueMetricsByQueue .metric-table-row {
  display: grid !important;
  grid-template-columns: minmax(210px, .72fr) minmax(420px, 1.6fr) !important;
  align-items: start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 720px !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
}
#queueMetricsByQueue .queue-metrics-by-queue-rows .metric-table-row > span[role="cell"] {
  align-self: start !important;
  padding-top: 3px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#queueMetricsByQueue .metric-table-row strong.queue-metric-line {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(98px, max-content)) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: center !important;
  gap: 6px 9px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: left !important;
}
.queue-metric-token {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.queue-call-stat-highlight {
  justify-content: center !important;
  min-width: 108px !important;
}
@media (max-width: 900px) {
  #queueMetricsByQueue .metric-table-row {
    min-width: 640px !important;
    grid-template-columns: minmax(170px, .68fr) minmax(360px, 1.4fr) !important;
  }
  #queueMetricsByQueue .metric-table-row strong.queue-metric-line {
    grid-template-columns: repeat(auto-fit, minmax(88px, max-content)) !important;
  }
}

/* v40.8: silent-monitor lockdown reuses the existing contact-action button language. */
.contact-actions.monitor-lockdown {
  grid-template-columns: 1fr !important;
}

.contact-actions.monitor-lockdown #hangupDiv {
  grid-column: 1 / -1 !important;
}

.contact-actions.monitor-lockdown button[hidden] {
  display: none !important;
}

/* v40.8: Routing Profile column and clickable Current Queue monitor chip without changing theme language. */
.agent-activity-row {
  grid-template-columns:
    minmax(132px, 1.15fr)
    minmax(132px, 1fr)
    minmax(112px, .9fr)
    minmax(112px, .85fr)
    72px
    50px
    50px !important;
}
.agent-activity-table.agent-activity-advanced .agent-activity-row {
  grid-template-columns:
    minmax(132px, 1.15fr)
    minmax(132px, 1fr)
    minmax(112px, .9fr)
    minmax(112px, .85fr)
    72px
    50px
    50px
    56px
    104px
    72px !important;
  min-width: 980px !important;
}
.agent-routing-profile-cell,
.agent-inline-routing-profile-control,
.agent-routing-profile-select,
.routing-profile-pill {
  max-width: 100% !important;
  min-width: 0 !important;
}
.agent-routing-profile-select {
  cursor: pointer;
}
.agent-routing-profile-select:disabled:disabled {
  cursor: default;
}
.routing-profile-pill {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.agent-monitor-queue-chip {
  appearance: none !important;
  border: 1px solid var(--line) !important;
  cursor: pointer !important;
  font: inherit !important;
}
.agent-current-queue.monitor-available .agent-monitor-queue-chip,
.agent-monitor-queue-chip.monitor-ready {
  animation: queuePulse 1200ms ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0, 154, 222, .38);
}
.agent-monitor-queue-chip:hover,
.agent-monitor-queue-chip:focus-visible {
  border-color: var(--sdi-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 154, 222, .18), var(--shadow-sm) !important;
  outline: none !important;
}
@keyframes queuePulse {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 154, 222, .28); }
  50% { box-shadow: 0 0 16px rgba(0, 154, 222, .62); }
}
html[data-theme="dark"] .agent-monitor-queue-chip:hover,
html[data-theme="dark"] .agent-monitor-queue-chip:focus-visible {
  box-shadow: 0 0 0 2px rgba(77, 184, 255, .24), var(--shadow-sm) !important;
}

/* v40.8: Dropdown contrast hardening. Preserve the established theme language while making select/options readable. */
:root {
  --dropdown-bg: var(--panel);
  --dropdown-text: var(--text);
  --dropdown-option-bg: var(--panel);
  --dropdown-option-text: var(--text);
  --dropdown-border: var(--line-strong);
  --dropdown-focus-ring: var(--focus);
  --dropdown-disabled-bg: var(--panel-soft);
  --dropdown-disabled-text: var(--muted);
}
html[data-theme="dark"] {
  --dropdown-bg: #0e1b27;
  --dropdown-text: #ecf4fa;
  --dropdown-option-bg: #0e1b27;
  --dropdown-option-text: #ecf4fa;
  --dropdown-border: #4b6476;
  --dropdown-disabled-bg: #122334;
  --dropdown-disabled-text: #c4d0da;
}
select:not(.agent-status-select):not(#statusDropdown),
.text-input:is(select),
.agent-routing-profile-select,
.routing-profile-pill:is(select),
.settings-select {
  color: var(--dropdown-text) !important;
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}
select option,
#statusDropdown option,
.agent-status-select option,
.agent-routing-profile-select option,
.text-input:is(select) option {
  color: var(--dropdown-option-text) !important;
  background-color: var(--dropdown-option-bg) !important;
}
select:focus-visible,
#statusDropdown:focus-visible,
.agent-status-select:focus-visible,
.agent-routing-profile-select:focus-visible,
.text-input:is(select):focus-visible {
  outline: none !important;
  box-shadow: var(--dropdown-focus-ring) !important;
}
select:not(.agent-status-select):not(#statusDropdown):disabled,
.agent-status-select:disabled,
.agent-routing-profile-select:disabled,
.text-input:is(select):disabled {
  opacity: .88 !important;
  color: var(--dropdown-disabled-text) !important;
  background-color: var(--dropdown-disabled-bg) !important;
}

/* v40.8: unified status color language. Contrast preserves color-coded state backgrounds. */
#agentStatusDiv.status-activity-available #statusDropdown,
#statusDropdown.status-activity-available {
  background: rgba(25, 135, 84, .94) !important;
  color: #fff !important;
  border-color: #bfe6ce !important;
  box-shadow: 0 0 13px rgba(25,135,84,.42) !important;
}
#agentStatusDiv.status-activity-on-contact #statusDropdown,
#statusDropdown.status-activity-on-contact,
#agentStatusDiv.status-activity-busy #statusDropdown,
#statusDropdown.status-activity-busy,
#agentStatusDiv.status-activity-connected #statusDropdown,
#statusDropdown.status-activity-connected,
#agentStatusDiv.status-activity-monitoring #statusDropdown,
#statusDropdown.status-activity-monitoring {
  background: rgba(0, 94, 160, .96) !important;
  color: #fff !important;
  border-color: #acd2f2 !important;
  box-shadow: 0 0 13px rgba(25,168,201,.38) !important;
}
#agentStatusDiv.status-activity-acw #statusDropdown,
#statusDropdown.status-activity-acw,
#agentStatusDiv.status-activity-wrap-up #statusDropdown,
#statusDropdown.status-activity-wrap-up,
#agentStatusDiv.status-activity-break #statusDropdown,
#statusDropdown.status-activity-break,
#agentStatusDiv.status-activity-lunch #statusDropdown,
#statusDropdown.status-activity-lunch,
#agentStatusDiv.status-activity-restroom-personal #statusDropdown,
#statusDropdown.status-activity-restroom-personal {
  background: rgba(166,107,0,.96) !important;
  color: #fff !important;
  border-color: #f2ca70 !important;
  box-shadow: 0 0 13px rgba(255,190,80,.44) !important;
}
#agentStatusDiv.status-activity-offline #statusDropdown,
#statusDropdown.status-activity-offline,
#agentStatusDiv.status-activity-unknown #statusDropdown,
#statusDropdown.status-activity-unknown {
  background: rgba(83, 99, 111, .94) !important;
  color: #fff !important;
  border-color: rgba(216,226,234,.76) !important;
}
#agentStatusDiv.status-activity-missed-call #statusDropdown,
#statusDropdown.status-activity-missed-call,
.agent-activity-cell .agent-status-select.missed-call,
.agent-activity-cell .activity-pill.missed-call {
  background: rgba(179,38,30,.96) !important;
  color: #fff !important;
  border-color: #f0aaa5 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
}
#agentStatusDiv.status-activity-missed-call #statusDropdown,
#statusDropdown.status-activity-missed-call,
.agent-activity-cell .agent-status-select.missed-call.status-flash-critical,
.agent-activity-cell .activity-pill.missed-call,
.agent-activity-row.agent-activity-missed-call .agent-status-select,
.agent-activity-row.agent-activity-missed-call .activity-pill {
  animation: statusMissedCallFlash 780ms ease-in-out infinite !important;
}
@keyframes statusMissedCallFlash {
  0%,100% { box-shadow: 0 0 5px rgba(179,38,30,.50); filter: saturate(1); }
  50% { box-shadow: 0 0 24px rgba(255,60,50,.98); filter: saturate(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  #agentStatusDiv.status-activity-missed-call #statusDropdown,
  #statusDropdown.status-activity-missed-call,
  .agent-activity-cell .agent-status-select.missed-call,
  .agent-activity-cell .activity-pill.missed-call,
  .agent-activity-row.agent-activity-missed-call .agent-status-select,
  .agent-activity-row.agent-activity-missed-call .activity-pill {
    animation: none !important;
    box-shadow: 0 0 0 2px rgba(179,38,30,.38) !important;
  }
}
html[data-theme="dark"] #agentStatusDiv.status-activity-available #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-available,
.theme-dark #agentStatusDiv.status-activity-available #statusDropdown,
.theme-dark #statusDropdown.status-activity-available {
  background: rgba(21,128,61,.72) !important;
  color: #f7fff9 !important;
  border-color: rgba(74,222,128,.70) !important;
}
html[data-theme="dark"] #agentStatusDiv.status-activity-on-contact #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-on-contact,
html[data-theme="dark"] #agentStatusDiv.status-activity-monitoring #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-monitoring,
.theme-dark #agentStatusDiv.status-activity-on-contact #statusDropdown,
.theme-dark #statusDropdown.status-activity-on-contact,
.theme-dark #agentStatusDiv.status-activity-monitoring #statusDropdown,
.theme-dark #statusDropdown.status-activity-monitoring {
  background: rgba(14, 165, 233, .58) !important;
  color: #f2fbff !important;
  border-color: rgba(125,211,252,.72) !important;
}
html[data-theme="dark"] #agentStatusDiv.status-activity-acw #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-acw,
html[data-theme="dark"] #agentStatusDiv.status-activity-wrap-up #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-wrap-up,
html[data-theme="dark"] #agentStatusDiv.status-activity-break #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-break,
html[data-theme="dark"] #agentStatusDiv.status-activity-lunch #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-lunch,
.theme-dark #agentStatusDiv.status-activity-acw #statusDropdown,
.theme-dark #statusDropdown.status-activity-acw,
.theme-dark #agentStatusDiv.status-activity-wrap-up #statusDropdown,
.theme-dark #statusDropdown.status-activity-wrap-up,
.theme-dark #agentStatusDiv.status-activity-break #statusDropdown,
.theme-dark #statusDropdown.status-activity-break,
.theme-dark #agentStatusDiv.status-activity-lunch #statusDropdown,
.theme-dark #statusDropdown.status-activity-lunch {
  background: rgba(180,83,9,.72) !important;
  color: #fff7d6 !important;
  border-color: rgba(251,191,36,.72) !important;
}
html[data-theme="dark"] #agentStatusDiv.status-activity-missed-call #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-missed-call,
.theme-dark #agentStatusDiv.status-activity-missed-call #statusDropdown,
.theme-dark #statusDropdown.status-activity-missed-call {
  background: rgba(185,28,28,.78) !important;
  color: #fff !important;
  border-color: rgba(252,165,165,.78) !important;
}

/* v40.8: condense Agent Metrics Agent Name column to the longest visible name while preserving existing table conventions. */
#dashboard {
  --agent-name-column-ch: 10ch;
}
.agent-activity-row {
  grid-template-columns:
    minmax(var(--agent-name-column-ch), var(--agent-name-column-ch))
    minmax(132px, 1fr)
    minmax(112px, .9fr)
    minmax(112px, .85fr)
    72px
    50px
    50px !important;
  min-width: calc(var(--agent-name-column-ch) + 560px) !important;
}
.agent-activity-table.agent-activity-advanced .agent-activity-row {
  grid-template-columns:
    minmax(var(--agent-name-column-ch), var(--agent-name-column-ch))
    minmax(132px, 1fr)
    minmax(112px, .9fr)
    minmax(112px, .85fr)
    72px
    50px
    50px
    56px
    104px
    72px !important;
  min-width: calc(var(--agent-name-column-ch) + 800px) !important;
}
.agent-activity-head > .agent-name-column,
.agent-activity-row > .agent-name-cell,
.agent-activity-row > strong.agent-name-cell[role="cell"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.agent-name-text {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* v40.8.8: Break and Restroom/Personal SLA colors must override base warning dropdown colors without touching call controls. */
html[data-theme="dark"] #agentStatusDiv.status-activity-restroom-personal #statusDropdown,
html[data-theme="dark"] #statusDropdown.status-activity-restroom-personal,
.theme-dark #agentStatusDiv.status-activity-restroom-personal #statusDropdown,
.theme-dark #statusDropdown.status-activity-restroom-personal {
  background: rgba(180,83,9,.72) !important;
  color: #fff7d6 !important;
  border-color: rgba(251,191,36,.72) !important;
}
#agentStatusDiv.status-sla-green.status-activity-break #statusDropdown,
#agentStatusDiv.status-sla-green.status-activity-restroom-personal #statusDropdown,
#agentStatusDiv.status-sla-green.status-activity-lunch #statusDropdown {
  background: rgba(25,135,84,.96) !important;
  color: #fff !important;
  border-color: #bfe6ce !important;
  box-shadow: 0 0 13px rgba(25,135,84,.55) !important;
  animation: none !important;
}
#agentStatusDiv.status-sla-yellow.status-activity-break #statusDropdown,
#agentStatusDiv.status-sla-yellow.status-activity-restroom-personal #statusDropdown,
#agentStatusDiv.status-sla-yellow.status-activity-lunch #statusDropdown {
  background: rgba(166,107,0,.98) !important;
  color: #fff !important;
  border-color: #f2ca70 !important;
  box-shadow: 0 0 16px rgba(255,190,80,.75) !important;
  animation: statusYellowGlow 1200ms ease-in-out infinite !important;
}
#agentStatusDiv.status-sla-red.status-activity-break #statusDropdown,
#agentStatusDiv.status-sla-red.status-activity-restroom-personal #statusDropdown,
#agentStatusDiv.status-sla-red.status-activity-lunch #statusDropdown {
  background: rgba(179,38,30,.98) !important;
  color: #fff !important;
  border-color: #f0aaa5 !important;
  box-shadow: 0 0 16px rgba(255,60,50,.74) !important;
  animation: statusRedFlash 780ms ease-in-out infinite !important;
}
html[data-theme="dark"] #agentStatusDiv.status-sla-green.status-activity-break #statusDropdown,
html[data-theme="dark"] #agentStatusDiv.status-sla-green.status-activity-restroom-personal #statusDropdown,
html[data-theme="dark"] #agentStatusDiv.status-sla-green.status-activity-lunch #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-green.status-activity-break #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-green.status-activity-restroom-personal #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-green.status-activity-lunch #statusDropdown {
  background: rgba(21,128,61,.78) !important;
  color: #f7fff9 !important;
  border-color: rgba(74,222,128,.72) !important;
}
html[data-theme="dark"] #agentStatusDiv.status-sla-yellow.status-activity-break #statusDropdown,
html[data-theme="dark"] #agentStatusDiv.status-sla-yellow.status-activity-restroom-personal #statusDropdown,
html[data-theme="dark"] #agentStatusDiv.status-sla-yellow.status-activity-lunch #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-yellow.status-activity-break #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-yellow.status-activity-restroom-personal #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-yellow.status-activity-lunch #statusDropdown {
  background: rgba(180,83,9,.80) !important;
  color: #fff7d6 !important;
  border-color: rgba(251,191,36,.78) !important;
}
html[data-theme="dark"] #agentStatusDiv.status-sla-red.status-activity-break #statusDropdown,
html[data-theme="dark"] #agentStatusDiv.status-sla-red.status-activity-restroom-personal #statusDropdown,
html[data-theme="dark"] #agentStatusDiv.status-sla-red.status-activity-lunch #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-red.status-activity-break #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-red.status-activity-restroom-personal #statusDropdown,
.theme-dark #agentStatusDiv.status-sla-red.status-activity-lunch #statusDropdown {
  background: rgba(185,28,28,.82) !important;
  color: #fff !important;
  border-color: rgba(252,165,165,.80) !important;
}

/* v41.1.1 call-control safety: expose an explicit recovery path when the embedded Amazon Connect CCP is not ready. */
.reconnect-amazon-connect-button {
  margin-left: 0.75rem;
  white-space: nowrap;
}

/* v41.4.9: Current Contact and Phone Number History use the existing native details collapse grammar. */
#currentContactDetails,
#recentAnsweredNumbersDetails {
  display: grid;
  gap: 8px;
}
#currentContactDetails:not([open]),
#recentAnsweredNumbersDetails:not([open]) {
  gap: 0;
}
.current-contact-card details:not([open]) > :not(summary),
.recent-answered-card details:not([open]) > :not(summary) {
  display: none !important;
}
.current-contact-card .panel-summary,
.recent-answered-card .panel-summary {
  margin: 0 !important;
}