/* SDR visual system — compact, calm and action-oriented. */
:root {
  --canvas: #edf2f7;
  --ink: #132033;
  --muted: #68768a;
  --line: rgb(100 116 139 / 16%);
  --primary-color: #2378d3;
  --primary-hover: #1767ba;
  --gold: #f3b23f;
  --glass: rgb(255 255 255 / 72%);
  --glass-strong: rgb(255 255 255 / 90%);
  --glass-border: rgb(255 255 255 / 70%);
  --shadow-xs: 0 1px 2px rgb(15 23 42 / 5%);
  --shadow-sm: 0 10px 30px rgb(30 50 75 / 8%);
  --shadow-lg: 0 28px 80px rgb(15 23 42 / 18%);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}

html {
  background: var(--canvas);
}
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 0%, rgb(76 148 221 / 11%), transparent 27rem),
    radial-gradient(circle at 96% 28%, rgb(243 178 63 / 8%), transparent 30rem),
    linear-gradient(145deg, #f5f8fb 0%, var(--canvas) 70%);
  min-height: 100vh;
}

button,
input,
textarea,
select {
  border-radius: var(--radius-sm);
}
button {
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
}
button:active:not(:disabled) {
  transform: translateY(0);
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid rgb(35 120 211 / 26%);
  outline-offset: 2px;
}

.platform-header {
  position: sticky;
  top: 0;
  z-index: 20;
  color: #f8fafc;
  background:
    radial-gradient(
      circle at 82% -30%,
      rgb(243 178 63 / 22%),
      transparent 24rem
    ),
    linear-gradient(118deg, rgb(14 25 39 / 96%), rgb(24 43 61 / 94%));
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  box-shadow: 0 12px 34px rgb(15 23 42 / 15%);
  backdrop-filter: blur(20px) saturate(135%);
}
.app-header,
.header-banner,
.stage-tabs {
  width: min(100%, 1488px);
  margin-inline: auto;
}
.app-header {
  min-height: 62px;
  padding: 10px 22px;
  gap: 18px;
  border: 0;
  background: transparent;
}
.app-header .brand {
  font-size: 20px;
  flex: 0 0 auto;
}
.app-header .brand-logo {
  width: 36px;
  height: 36px;
}
.brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffd77d, var(--gold));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 55%),
    0 8px 24px rgb(243 178 63 / 18%);
}
.app-header nav {
  gap: 3px;
  padding: 3px;
}
.app-header .nav {
  min-height: 36px;
  padding: 9px 12px;
  border-radius: 9px;
}
.app-header .nav.active,
.app-header .nav:hover {
  background: rgb(255 255 255 / 11%);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}
.account-chip,
.header-button {
  border-color: rgb(255 255 255 / 13%);
  background: rgb(255 255 255 / 7%);
  border-radius: 10px;
}
.app-header .header-context,
body:not(.admin-page) .app-header .header-context {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  min-height: 32px;
  padding: 0;
  margin-left: auto;
}
.app-header .account-chip,
.app-header .header-button {
  margin-left: 0;
}
.runtime-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgb(226 232 240 / 75%);
  font-size: 10px;
}
.runtime-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fd59a;
  box-shadow: 0 0 0 4px rgb(111 213 154 / 11%);
}
.tenant-picker select {
  min-height: 32px;
  border-color: rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 7%);
  border-radius: 9px;
}
.header-banner,
body:not(.admin-page) .header-banner {
  min-height: 58px;
  padding: 9px 22px 10px;
}
.header-title-group,
.header-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}
.header-title-group {
  gap: 14px;
}
.header-actions {
  gap: 12px;
  margin-left: auto;
}
.header-banner h1 {
  margin: 0;
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 650;
  letter-spacing: -0.75px;
}
.header-banner p:not(.eyebrow) {
  margin-top: 6px;
  line-height: 1.45;
}
.header-banner .primary,
.primary {
  border: 1px solid rgb(255 255 255 / 13%);
  background: linear-gradient(145deg, #3189df, var(--primary-color));
  box-shadow:
    0 8px 22px rgb(35 120 211 / 19%),
    inset 0 1px rgb(255 255 255 / 20%);
}
.header-banner .primary:hover:not(:disabled),
.primary:hover:not(:disabled) {
  background: linear-gradient(145deg, #277ed4, var(--primary-hover));
}
.stage-tabs {
  padding: 0 22px;
  gap: 6px;
}
.stage-tab {
  min-height: 38px;
  padding: 9px 13px;
  border-color: rgb(255 255 255 / 10%);
  border-radius: 11px 11px 0 0;
  background: rgb(255 255 255 / 6%);
}
.stage-tab.active {
  border-color: rgb(255 255 255 / 38%);
  background: rgb(245 248 251 / 96%);
  box-shadow: 0 -6px 22px rgb(2 8 23 / 9%);
}

main {
  width: min(100%, 1488px);
  margin-inline: auto;
  padding: 18px 22px 36px;
}
.workspace-breadcrumb,
.header-banner .eyebrow,
.page-heading > .eyebrow,
.section-heading .eyebrow,
.list-heading .eyebrow {
  display: none !important;
}
.page-heading {
  margin: 0 0 15px;
}
.page-heading h1 {
  margin-bottom: 4px;
  font-size: 22px;
  letter-spacing: -0.45px;
}
.page-heading p,
.section-caption {
  max-width: 62ch;
  line-height: 1.5;
}
.section-heading {
  margin: 0 0 13px;
}
.section-heading h2 {
  margin: 0;
  font-size: 17px;
}

.metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.metrics > div,
.metric-card {
  padding: 13px 15px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px rgb(255 255 255 / 65%);
  backdrop-filter: blur(16px) saturate(130%);
  border-radius: var(--radius);
}
.metrics span {
  font-size: 10px;
}
.metrics strong,
.metrics > div:last-child strong {
  margin-top: 3px;
  font-size: 23px;
}

.card,
.architecture-card,
.inbox,
.configuration,
.filterbar,
.quality-summary,
.table-card,
.config-entry,
.config-panel,
.operations-card,
.commercial-panel,
.qualification-panel,
.routing-panel,
.recovery-settings,
.appointment-form,
.appointment-list,
.lead-editor,
.work-card {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow:
    var(--shadow-xs),
    0 8px 28px rgb(30 50 75 / 6%);
  backdrop-filter: blur(18px) saturate(125%);
  border-radius: var(--radius);
}
.card,
.architecture-card {
  padding: 18px;
}
.cards {
  gap: 12px;
}
.cards.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card:hover {
  border-color: rgb(35 120 211 / 25%);
  box-shadow: var(--shadow-sm);
}
.qualification-suggestion:not([hidden]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
}
.tag,
.status-badge,
.count {
  border-radius: 999px;
}
.notice {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.small-note,
.muted {
  color: var(--muted);
}

.inbox {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  min-height: 480px;
  overflow: hidden;
}
body:not(.admin-page) #view-inbox {
  padding-top: 14px;
}
.conversation-list {
  min-width: 0;
  overflow: hidden;
  background: rgb(255 255 255 / 34%);
}
body:not(.admin-page) #conversations {
  overflow-x: hidden;
}
.list-heading {
  padding: 14px 15px 10px;
}
.search {
  margin: 0 14px 10px;
  width: calc(100% - 28px);
  background: rgb(255 255 255 / 76%);
}
.conversation-item {
  width: calc(100% - 14px);
  margin: 0 7px 4px;
  padding: 11px 10px;
  border-radius: 11px;
  border-left: 0;
}
.conversation-item.selected {
  padding-left: 10px;
  border-left: 0;
  background: rgb(35 120 211 / 9%);
  box-shadow: inset 0 0 0 1px rgb(35 120 211 / 11%);
}
.conversation-panel {
  background: rgb(255 255 255 / 44%);
}
.chat-header {
  padding: 14px 18px;
  background: rgb(255 255 255 / 56%);
}
.context-strip {
  padding: 9px 18px;
}
.messages {
  height: clamp(280px, 43vh, 430px);
  background: rgb(240 245 250 / 55%);
}
.bubble {
  border-radius: 14px 14px 14px 4px;
  box-shadow: var(--shadow-xs);
}
.bubble.customer {
  border-radius: 14px 14px 4px 14px;
  background: #e2effc;
}
.composer {
  background: rgb(255 255 255 / 68%);
}
.contact-rail {
  background: rgb(255 255 255 / 42%);
}

.empty,
.empty-list {
  min-height: 190px;
  padding: 26px 20px;
}
.empty-symbol {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}
.empty h2 {
  font-size: 16px;
}
.empty p {
  max-width: 42ch;
}

.work-items {
  gap: 10px;
}
.work-card {
  padding: 15px;
}
.work-card-heading {
  margin-bottom: 10px;
}
.work-card-heading h2 {
  font-size: 15px;
}
.work-card-heading p {
  margin-top: 3px;
}
.work-card .conversation-actions {
  margin-top: 10px;
}
.recovery-editor.handoff-active .recovery-settings {
  max-width: none;
}
.pipeline-layout:has(.lead-editor[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.pipeline-layout:has(.lead-editor[hidden]) .lead-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.lead-list {
  gap: 10px;
}

.filterbar {
  padding: 12px 14px;
  margin-bottom: 15px;
  gap: 10px;
}
.filter-field label {
  margin-bottom: 5px;
}
.filter-field select,
.config-field input,
.config-field textarea,
.config-field select,
.operations-form input,
.operations-form select,
.operations-form textarea {
  border-color: var(--line);
  background: rgb(255 255 255 / 72%);
}
.configuration-heading,
.config-panel {
  padding: 17px;
}
.config-entry {
  padding: 14px;
}
.config-tabs,
.automation-tabs,
.task-tabs,
.queue-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  background: rgb(255 255 255 / 48%);
  border-radius: 12px;
}
.config-tab,
.automation-tabs button,
.task-tab,
.queue-tabs button {
  border-radius: 9px;
  padding: 9px 11px;
}
.config-tab.active,
.automation-tabs .active,
.task-tab.active,
.queue-tabs .active {
  background: var(--glass-strong);
  box-shadow: 0 3px 12px rgb(30 50 75 / 9%);
}
.overview-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.quality-summary {
  padding: 16px 18px;
}
.quality-scores {
  gap: 14px;
}
.table-card {
  overflow: hidden;
}
.table-card th {
  background: rgb(241 245 249 / 72%);
}
.table-card td {
  border-bottom-color: rgb(100 116 139 / 10%);
}
.table-heading {
  padding: 14px 16px;
}
.table-empty {
  padding: 28px 20px !important;
}
.help-button {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
}

.secondary,
.text-button {
  border-color: var(--line);
  background: rgb(255 255 255 / 70%);
  box-shadow: var(--shadow-xs);
}
.secondary:hover:not(:disabled),
.text-button:hover:not(:disabled) {
  border-color: rgb(35 120 211 / 25%);
  background: rgb(255 255 255 / 92%);
}
.primary,
.secondary {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 10px;
}

.run-dialog {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px) saturate(135%);
}
.run-dialog::backdrop {
  background: rgb(9 18 31 / 62%);
  backdrop-filter: blur(4px);
}
.run-dialog-header {
  padding: 16px 20px;
  background: rgb(255 255 255 / 72%);
}
.close-dialog {
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  padding: 24px;
  color: var(--ink);
}
.close-dialog h2 {
  margin: 0 0 12px;
  font-size: 19px;
}
.close-dialog p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.45;
}
.close-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

.login-screen {
  background:
    radial-gradient(
      circle at 20% 24%,
      rgb(53 125 194 / 30%),
      transparent 32rem
    ),
    radial-gradient(
      circle at 85% 10%,
      rgb(243 178 63 / 15%),
      transparent 28rem
    ),
    linear-gradient(135deg, #0e1927, #182c3e 62%, #23384a);
}
.login-intro {
  padding: clamp(32px, 6vw, 78px);
}
.login-intro > div > p:last-child {
  font-size: 15px;
  line-height: 1.65;
}
.login-card {
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 22px;
  background: rgb(255 255 255 / 82%);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px rgb(255 255 255 / 75%);
  backdrop-filter: blur(22px) saturate(135%);
}
.login-card h1 {
  font-size: 27px;
}
.login-card form input {
  min-height: 44px;
  background: rgb(255 255 255 / 72%);
  border-radius: 11px;
}
.sso-link {
  display: block;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.login-card .login-tabs .stage-tab {
  border-radius: 10px 10px 0 0;
}

@media (max-width: 1100px) {
  .app-header .runtime-chip {
    display: none;
  }
}

@media (max-width: 900px) {
  .app-header {
    gap: 10px;
  }
  .app-header nav {
    order: 3;
    flex-basis: 100%;
  }
  .app-header .header-context {
    margin-left: auto;
  }
  .overview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quality-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .login-screen {
    grid-template-columns: 1fr;
    padding: 24px 0;
  }
  .login-intro {
    min-height: auto;
    padding: 22px 26px 8px;
  }
  .login-intro h1 {
    font-size: 35px;
  }
  .login-card {
    width: min(calc(100% - 32px), 500px);
  }
}

@media (max-width: 680px) {
  .platform-header {
    position: static;
  }
  .app-header,
  .header-banner,
  .stage-tabs {
    padding-inline: 12px;
  }
  .app-header {
    padding-top: 9px;
  }
  .app-header nav {
    margin-inline: -3px;
  }
  .app-header .nav {
    padding-inline: 10px;
  }
  .brand-sub,
  .tenant-picker label {
    display: none;
  }
  .account-chip {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-banner,
  body:not(.admin-page) .header-banner {
    min-height: 0;
    padding-block: 8px;
    flex-flow: row wrap;
    align-items: center;
    gap: 8px;
  }
  .header-title-group {
    flex: 1 1 auto;
    gap: 8px;
  }
  .header-actions {
    width: auto;
    gap: 8px;
    margin-left: auto;
    justify-content: space-between;
  }
  .app-header .header-context {
    max-width: min(48vw, 190px);
  }
  .app-header .tenant-picker,
  .app-header .tenant-picker select {
    width: calc(100% + 24px);
    max-width: 100%;
  }
  .header-banner p {
    display: none;
  }
  .header-banner .primary {
    padding-inline: 11px;
  }
  .stage-tabs {
    padding-bottom: 0;
  }
  main {
    padding: 13px 12px 28px;
  }
  .metrics {
    gap: 7px;
  }
  .metrics > div {
    padding: 10px;
  }
  .metrics span {
    font-size: 9px;
  }
  .metrics strong,
  .metrics > div:last-child strong {
    font-size: 19px;
  }
  .cards.two,
  .pipeline-layout:has(.lead-editor[hidden]) .lead-list {
    grid-template-columns: 1fr;
  }
  .inbox {
    grid-template-columns: 1fr;
    min-height: 430px;
  }
  .conversation-list {
    max-height: 390px;
  }
  body:not(.admin-page) #view-inbox {
    padding-top: 12px;
  }
  .conversation-panel {
    min-height: 430px;
  }
  .empty,
  .empty-list {
    min-height: 150px;
  }
  .overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quality-scores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .filterbar {
    align-items: stretch;
  }
  .filter-field {
    max-width: none;
    min-width: min(100%, 135px);
    flex: 1;
  }
  #metrics-scope {
    margin-left: 0;
  }
  .login-intro h1 {
    font-size: 29px;
    letter-spacing: -1.2px;
  }
  .login-intro > div > p:last-child {
    font-size: 13px;
  }
  .login-card {
    padding: 25px 21px;
    border-radius: 18px;
  }
  .run-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.service-flow-editor {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 20px;
}
.service-flow-editor[hidden] {
  display: none;
}
.service-flow-editor textarea {
  width: 100%;
  resize: vertical;
}
.service-flow-out-of-scope {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 2px 0;
  padding: 16px;
  border: 1px solid #c9dfd9;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7fcfa, #f1f8f7);
}
.service-flow-out-of-scope legend {
  padding: 0 7px;
  color: #075d52;
  font-weight: 700;
}
.service-flow-out-of-scope-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
}
.service-flow-out-of-scope-toggle input { margin-top: 3px; }
.service-flow-row {
  text-align: left;
  margin: 4px 8px 4px 0;
}
.service-flow-row.active {
  border-color: #2371d1;
  color: #1457a5;
}
.service-flow-item {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(200px, 2fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e8ebf0;
}
.service-flow-item .config-field {
  min-width: 0;
}
.service-flow-item .config-field input,
.service-flow-item .config-field textarea {
  width: 100%;
}
.service-flow-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .service-flow-item {
    grid-template-columns: 1fr;
  }
}

/* CRM-style shell: account context on the first row, clear navigation below. */
.platform-header {
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid #e4e9f0;
  box-shadow: 0 2px 12px rgb(15 23 42 / 4%);
  backdrop-filter: none;
}
.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 16px;
  padding: 8px 20px 0;
  background: #fff;
  border-bottom: 0;
}
.app-header .brand {
  width: fit-content;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -0.4px;
}
.app-header .brand-logo {
  width: 34px;
  height: 34px;
}
.app-header .brand-sub {
  display: none;
}
.app-header .header-context,
body:not(.admin-page) .app-header .header-context {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  padding: 0;
  margin: 0;
}
.app-header .tenant-picker {
  gap: 0;
}
.app-header .tenant-picker label {
  display: none;
}
.app-header .tenant-picker select {
  width: min(230px, 28vw);
  min-height: 34px;
  padding: 5px 9px;
  color: #3b4655;
  background: #f7f8fa;
  border: 1px solid #e3e7ec;
  font-size: 12px;
}
.app-header .account-chip,
.app-header .header-button {
  max-width: min(220px, 27vw);
  min-height: 34px;
  padding: 6px 10px;
  overflow: hidden;
  color: #3b4655;
  background: transparent;
  border: 1px solid transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.app-header .account-chip:hover,
.app-header .header-button:hover {
  background: #f3f5f8;
}
.app-header nav {
  grid-column: 1 / -1;
  order: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  overflow: visible;
  border-top: 1px solid #edf0f4;
}
.app-header .nav {
  min-height: 39px;
  padding: 9px 13px;
  color: #647184;
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
}
.app-header .nav.active,
.app-header .nav:hover {
  color: #1767ba;
  background: #f4f8fd;
  box-shadow: inset 0 -2px #2378d3;
}
.header-banner,
body:not(.admin-page) .header-banner {
  min-height: 48px;
  padding: 7px 20px;
  background: #f8fafc;
}
.header-banner h1,
body:not(.admin-page) .header-banner h1 {
  color: var(--ink);
  font-size: 19px;
}
.stage-tabs {
  gap: 3px;
  padding: 0 20px;
  background: #f8fafc;
}
.stage-tab {
  min-height: 34px;
  padding: 7px 12px;
  color: #647184;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px 7px 0 0;
}
.stage-tab.active {
  color: #1767ba;
  background: #fff;
  border-color: #e4e9f0;
  border-bottom-color: #fff;
  box-shadow: none;
}
@media (max-width: 680px) {
  .app-header,
  body:not(.admin-page) .app-header {
    padding: 8px 12px 0;
  }
  .app-header .brand {
    font-size: 15px;
  }
  .app-header .brand-logo {
    width: 30px;
    height: 30px;
  }
  .app-header .header-context,
  body:not(.admin-page) .app-header .header-context {
    max-width: none;
    gap: 3px;
  }
  .app-header .tenant-picker select {
    width: min(128px, 31vw);
    max-width: 100%;
    min-height: 32px;
  }
  .app-header .account-chip,
  .app-header .header-button,
  body:not(.admin-page) .app-header .account-chip,
  body:not(.admin-page) .app-header .header-button {
    width: auto;
    max-width: 58px;
    min-height: 32px;
    padding-inline: 8px;
    font-size: 0;
  }
  .app-header .account-chip::after,
  body:not(.admin-page) .app-header .account-chip::after {
    content: attr(data-mobile-label);
    font-size: 11px;
  }
  .app-header nav,
  body:not(.admin-page) .app-header nav {
    grid-column: 1 / -1;
    order: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% + 24px);
    margin: 7px -12px 0;
    padding: 0;
    overflow: visible;
    border-top: 1px solid #edf0f4;
  }
  .app-header nav::-webkit-scrollbar {
    display: none;
  }
  .app-header .nav {
    justify-content: center;
    min-width: 0;
    min-height: 34px;
    padding: 6px 4px;
    font-size: 11px;
  }
  .header-banner,
  body:not(.admin-page) .header-banner {
    padding: 8px 12px;
  }
  .stage-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    padding: 4px 12px 0;
    overflow: visible;
  }
  .stage-tab {
    justify-content: center;
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 7px 7px 0 0;
    font-size: 11px;
  }
  .commercial-delivery-head {
    flex: 0 1 auto;
  }
  body:not(.admin-page) .automation-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    overflow: visible;
  }
  body:not(.admin-page) .automation-tabs .secondary {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px 6px;
    white-space: normal;
  }
  body:not(.admin-page) .automation-tabs .secondary:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  body:not(.admin-page) .service-flow-editor {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px;
    overflow: hidden;
  }
  body:not(.admin-page) .service-flow-editor > *,
  body:not(.admin-page) #service-flow-questions,
  body:not(.admin-page) #service-flow-knowledge,
  body:not(.admin-page) .service-flow-item,
  body:not(.admin-page) .service-flow-item .config-field,
  body:not(.admin-page) .service-flow-item input,
  body:not(.admin-page) .service-flow-item textarea {
    max-width: 100%;
    min-width: 0;
  }
  body:not(.admin-page) .service-flow-editor .page-heading {
    flex-wrap: wrap;
  }
  body:not(.admin-page) .service-flow-editor .recovery-actions {
    flex-wrap: wrap;
    min-width: 0;
  }
  body:not(.admin-page) .service-flow-editor .recovery-actions button {
    flex: 1 1 140px;
    min-width: 0;
    white-space: normal;
  }

  .work-card {
    padding: 13px;
  }
  .work-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 6px 12px;
    margin: 12px 0;
    line-height: 1.35;
  }
  .work-facts span {
    min-width: 0;
  }
  .work-facts span + span::before {
    content: none;
  }
  .work-facts span:last-child {
    grid-column: 1 / -1;
  }
}

/* Operator workspace aligned with the CRM and Sites modules. */
body:not(.admin-page) { --canvas: #f6f8f8; --primary-color: #075245; --primary-hover: #086b5a; --line: #dfe7e9; background: #f6f8f8; }
body:not(.admin-page) .platform-header { color: #fff; background: #fff; border-bottom-color: #e2e8ea; box-shadow: none; }
body:not(.admin-page) .app-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 72px;
  padding: 9px 26px;
  color: #fff;
  background: radial-gradient(ellipse at 87% -35%, rgb(220 170 77 / 20%), transparent 34%), linear-gradient(108deg, #073e35, #07493b 66%, #073b34);
  border-bottom: 1px solid rgb(255 255 255 / 16%);
}
body:not(.admin-page) .app-header .brand { grid-column: 1; grid-row: 1; color: #fff; font-size: 22px; }
body:not(.admin-page) .app-header nav { grid-column: 2; grid-row: 1; order: 0; width: auto; min-width: 0; margin: 0; padding: 0; overflow-x: auto; flex-wrap: nowrap; border: 0; }
body:not(.admin-page) .app-header .nav { min-height: 42px; padding: 11px 14px; color: #e7f2ef; border-radius: 10px; font-size: 13px; }
body:not(.admin-page) .app-header .nav .count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 24px;
  min-height: 24px;
  margin-left: 2px;
  padding: 2px 7px;
  color: #fff;
  background: rgb(255 255 255 / 18%);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: normal;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body:not(.admin-page) .app-header .nav.active,
body:not(.admin-page) .app-header .nav:hover { color: #fff; background: rgb(255 255 255 / 13%); box-shadow: inset 0 -2px #71d9bd; }
body:not(.admin-page) .app-header .header-context { grid-column: 3; grid-row: 1; order: 0; margin: 0; gap: 9px; }
body:not(.admin-page) .app-header .tenant-picker select { width: min(250px, 20vw); color: #fff; background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 24%); }
body:not(.admin-page) .app-header .account-chip { max-width: 205px; color: #fff; border-color: transparent; }
body:not(.admin-page) .app-header .account-chip:hover { background: rgb(255 255 255 / 11%); }
body:not(.admin-page) .header-banner { width: 100%; min-height: 68px; padding: 16px 32px 2px; background: #fff; }
body:not(.admin-page) .header-banner h1 { margin: 0; color: #172434; font-size: 27px; font-weight: 730; letter-spacing: -.03em; }
body:not(.admin-page) .header-banner .primary { min-height: 44px; padding-inline: 20px; background: #075245; border-color: #075245; }
body:not(.admin-page) .stage-tabs { width: 100%; gap: 7px; padding: 8px 32px 11px; background: #fff; }
body:not(.admin-page) .stage-tab { min-height: 40px; padding: 10px 14px; color: #445265; border: 1px solid transparent; border-radius: 10px; font-size: 13px; }
body:not(.admin-page) .stage-tab.active { color: #075245; background: #e7f6f0; border-color: #e7f6f0; }
body:not(.admin-page) .stage-tab .count { color: #075245; background: rgb(7 82 69 / 10%); }
body:not(.admin-page) .stage-dot.blue { background: #6338d9; }
body:not(.admin-page) main { padding: 16px 24px 28px; }
body:not(.admin-page) .workspace-breadcrumb { display: none; }
body:not(.admin-page) #view-inbox { padding-top: 0; }
body:not(.admin-page) #view-inbox .inbox { gap: 14px; height: calc(100dvh - 240px); min-height: 570px; overflow: visible; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
body:not(.admin-page) #view-inbox .inbox.has-contact { grid-template-columns: minmax(270px, 23%) minmax(390px, 1fr) minmax(320px, 27%); }
body:not(.admin-page) #view-inbox :is(.conversation-list, .conversation-panel, .contact-rail) { min-width: 0; overflow: hidden; border: 1px solid #e0e7ea; border-radius: 12px; background: #fff; box-shadow: 0 7px 18px rgb(24 48 54 / 5%); }
body:not(.admin-page) #view-inbox .contact-rail { overflow-y: auto; }
body:not(.admin-page) #view-inbox .conversation-list .list-heading { padding: 18px 18px 10px; }
body:not(.admin-page) #view-inbox .conversation-list .list-heading h2 { font-size: 18px; }
body:not(.admin-page) #view-inbox .search { margin: 0 16px 13px; width: calc(100% - 32px); min-height: 43px; background: #fff; border-color: #dce5e9; }
body:not(.admin-page) #view-inbox .conversation-item { width: calc(100% - 16px); margin: 0 8px 5px; border: 1px solid #e2e8ed; border-radius: 11px; background: #fff; }
body:not(.admin-page) #view-inbox .conversation-item.selected { background: #ecf9f4; border-color: #9bdcc8; box-shadow: none; }
body:not(.admin-page) #view-inbox .item-content strong { font-size: 13px; }
body:not(.admin-page) #view-inbox .item-content small { font-size: 11px; }
body:not(.admin-page) #view-inbox .item-time { font-size: 10px; }
body:not(.admin-page) #view-inbox .chat-header { padding: 18px 20px; background: #fff; }
body:not(.admin-page) #view-inbox .chat-header h2 { font-size: 18px; }
body:not(.admin-page) #view-inbox .chat-header p { font-size: 12px; }
body:not(.admin-page) #view-inbox .context-strip { margin: 0 14px 10px; border: 1px solid #e0e8eb; border-radius: 10px; background: #fbfcfc; font-size: 11px; }
body:not(.admin-page) #view-inbox .messages { min-height: 0; background: #f9fcfc; }
body:not(.admin-page) #view-inbox .bubble { font-size: 14px; line-height: 1.55; }
body:not(.admin-page) #view-inbox .bubble small { font-size: 10px; }
body:not(.admin-page) #view-inbox .bubble.customer { background: #e8f8f2; }
body:not(.admin-page) #view-inbox .composer { padding: 13px 16px; border-top: 1px solid #e0e7ea; }
body:not(.admin-page) #view-inbox .contact-summary, body:not(.admin-page) #view-inbox .contact-rail .qualification-panel { padding: 19px 18px; background: #fff; }
body:not(.admin-page) #view-inbox .contact-summary h2 { font-size: 20px; }
body:not(.admin-page) #view-inbox .contact-summary .eyebrow, body:not(.admin-page) #view-inbox .qualification-heading .eyebrow { color: #176f9c; font-size: 9px; font-weight: 750; letter-spacing: .11em; }
body:not(.admin-page) #view-inbox .contact-summary dl { gap: 0; border: 1px solid #e0e7ea; border-radius: 10px; overflow: hidden; }
body:not(.admin-page) #view-inbox .contact-summary dl > div { grid-template-columns: 38% minmax(0, 1fr); gap: 0; border-bottom: 1px solid #e0e7ea; }
body:not(.admin-page) #view-inbox .contact-summary dl > div:last-child { border-bottom: 0; }
body:not(.admin-page) #view-inbox .contact-summary dt, body:not(.admin-page) #view-inbox .contact-summary dd { padding: 10px 11px; font-size: 12px; }
body:not(.admin-page) #view-inbox .contact-summary dt { background: #f8fafb; }
body:not(.admin-page) #view-inbox .contact-summary dd { font-weight: 620; }
body:not(.admin-page) #view-inbox .contact-summary dl > .navigation-summary-row { grid-template-columns: minmax(0, 1fr); }
body:not(.admin-page) #view-inbox .contact-summary #rail-navigation { padding: 9px; }
body:not(.admin-page) #view-inbox :is(button, input, select, textarea):focus-visible { outline: 2px solid #0a725f; outline-offset: 2px; }
@media (max-width: 1180px) {
  body:not(.admin-page) #view-inbox .inbox.has-contact { grid-template-columns: 250px minmax(0, 1fr) 310px; }
  body:not(.admin-page) .app-header { grid-template-columns: auto minmax(0, 1fr); }
  body:not(.admin-page) .app-header .header-context { grid-column: 2; justify-self: end; }
  body:not(.admin-page) .app-header nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
@media (max-width: 700px) {
  body:not(.admin-page) #view-inbox .inbox, body:not(.admin-page) #view-inbox .inbox.has-contact { display: block; height: auto; min-height: 0; }
  body:not(.admin-page) #view-inbox :is(.conversation-list, .conversation-panel, .contact-rail) { margin-bottom: 12px; }
  body:not(.admin-page) #view-inbox .conversation-list { max-height: 280px; }
  body:not(.admin-page) #view-inbox #conversation-active .messages { min-height: 340px; max-height: 52dvh; }
  body:not(.admin-page) .app-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 14px; }
  body:not(.admin-page) .app-header .brand { grid-column: 1; font-size: 15px; }
  body:not(.admin-page) .app-header .brand-logo { width: 30px; height: 30px; }
  body:not(.admin-page) .app-header .header-context { grid-column: 2; }
  body:not(.admin-page) .app-header .tenant-picker select { width: min(106px, 27vw); }
  body:not(.admin-page) .app-header nav { display: flex; grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; overflow-x: auto; }
  body:not(.admin-page) .app-header .nav { flex: 0 0 auto; }
  body:not(.admin-page) .header-banner, body:not(.admin-page) .stage-tabs { padding-inline: 15px; }
}
@media (min-width: 701px) and (max-width: 920px) {
  body:not(.admin-page) #view-inbox .inbox.has-contact { grid-template-columns: 240px minmax(0, 1fr); height: auto; }
  body:not(.admin-page) #view-inbox .contact-rail { grid-column: 1 / -1; max-height: none; }
}

/* Internal agent activity shares the existing SDR rail rather than a fourth column. */
body:not(.admin-page) #view-inbox .agentic-panel {
  min-width: 0;
  padding: 18px;
  border-bottom: 1px solid #e0e7ea;
  background: #fff;
}
body:not(.admin-page) #view-inbox .agentic-panel[hidden] { display: none; }
.agentic-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.agentic-panel-heading h3 { margin: 0; font-size: 15px; color: #172b33; }
.agentic-panel #agentic-status { margin: 0 0 8px; color: #596b72; line-height: 1.4; }
.agentic-panel #agentic-status:empty { display: none; }
.agentic-panel #agentic-retry { margin-bottom: 10px; }
.agentic-section { border-top: 1px solid #e3e9e8; }
.agentic-section > summary { padding: 12px 1px; color: #18323a; font-size: 13px; font-weight: 700; cursor: pointer; }
.agentic-section > summary span { color: #5e7579; font-weight: 600; }
.agentic-section > summary:hover { color: #075245; }
.agentic-section > summary:focus-visible, .agentic-run > summary:focus-visible { outline: 2px solid #0a725f; outline-offset: 2px; border-radius: 4px; }
.agentic-activity-list, .agentic-understanding-content, .agentic-candidates-list { padding: 0 0 13px; }
.agentic-activity-list .small-note, .agentic-understanding-content .small-note, .agentic-candidates-list .small-note { margin: 4px 0; color: #596b72; line-height: 1.45; }
.agentic-run { margin: 0 0 8px; border: 1px solid #e1e9e8; border-radius: 9px; background: #fbfdfc; }
.agentic-run > summary { padding: 9px 10px; color: #18323a; font-size: 12px; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.agentic-event-list { margin: 0; padding: 0 10px 10px 24px; list-style: none; }
.agentic-event { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 7px 0; border-top: 1px solid #e8eded; font-size: 11px; line-height: 1.35; }
.agentic-event::before { position: absolute; top: 10px; left: -13px; width: 6px; height: 6px; border-radius: 50%; background: #0c8a69; content: ""; }
.agentic-event-started::before, .agentic-event-pending::before { background: #d4922e; }
.agentic-event-failed::before, .agentic-event-superseded::before { background: #b75252; }
.agentic-event strong { color: #263a40; font-weight: 630; }
.agentic-event time, .agentic-event small { color: #60747b; font-size: 10px; font-variant-numeric: tabular-nums; }
.agentic-event small { grid-column: 1 / -1; }
.agentic-activity-heading { margin: 0; padding: 2px 0 9px; font-size: 15px; }
.agentic-event-current::before { animation: agentic-current-pulse 1.6s ease-in-out infinite; width: 8px; height: 8px; }
.agentic-event-current strong, .agentic-event-current .agentic-current-label,
.agentic-processing { animation: agentic-current-text 1.6s ease-in-out infinite; }
.agentic-processing { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: #fff4df; color: #755015; font-size: 12px; font-weight: 650; }
#agentic-activity-section { overflow-anchor: none; scroll-behavior: auto; scrollbar-color: #a2b4b7 transparent; }
.agentic-activity-heading { position: sticky; top: 0; z-index: 1; background: #fff; }
@keyframes agentic-current-text { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.agentic-event-current .agentic-current-label { color: #755015; font-weight: 650; }
@keyframes agentic-current-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .agentic-event-current::before, .agentic-event-current strong,
  .agentic-event-current .agentic-current-label, .agentic-processing { animation: none; }
}
.agentic-understanding-item { padding: 10px 0; border-top: 1px solid #e8eded; }
.agentic-understanding-item:first-of-type { border-top: 0; }
.agentic-understanding-item p, .agentic-open-questions p { margin: 5px 0 0; color: #22353b; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.agentic-motivation { margin: 0 0 8px; color: #31464c; font-size: 12px; line-height: 1.45; }
.agentic-basis { display: inline-block; padding: 3px 7px; border-radius: 999px; background: #e8f5f0; color: #075245; font-size: 10px; font-weight: 700; }
.agentic-basis-inference { background: #fff4df; color: #805518; }
.agentic-basis-operator_statement { background: #e9effd; color: #3a52a6; }
.agentic-source { display: block; margin-top: 5px; padding: 0; border: 0; background: transparent; color: #075d8b; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.agentic-open-questions { margin-top: 8px; padding: 10px; border-radius: 8px; background: #f5f8f8; }
.agentic-open-questions strong { color: #4e6369; font-size: 11px; }
.agentic-correction-open { margin-top: 10px; font-size: 11px; }
.agentic-correction-form { display: grid; gap: 8px; padding: 12px 0 0; border-top: 1px solid #e3e9e8; }
.agentic-correction-form[hidden] { display: none; }
.agentic-correction-form label { color: #263a40; font-size: 12px; font-weight: 650; }
.agentic-correction-form textarea { width: 100%; min-height: 74px; resize: vertical; font: inherit; }
.agentic-correction-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.agentic-correction-actions button { min-height: 34px; font-size: 11px; }
.agentic-ranking-warning { margin: 0 0 9px; padding: 8px 10px; border-radius: 8px; background: #fff4df; color: #805518; font-size: 11px; line-height: 1.4; }
.agentic-candidate { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; margin-bottom: 8px; padding: 9px; border: 1px solid #e1e8e7; border-radius: 10px; background: #fbfcfc; color: inherit; text-decoration: none; }
a.agentic-candidate:hover { border-color: #8fcab7; background: #f4fbf8; }
a.agentic-candidate:focus-visible { outline: 2px solid #0a725f; outline-offset: 2px; }
.agentic-candidate-media { display: grid; align-content: start; justify-items: center; gap: 4px; min-width: 0; }
.agentic-candidate-visual { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: #edf2f1; }
.agentic-candidate-visual img { width: 100%; height: 100%; object-fit: cover; }
.agentic-photo-missing { color: #677b80; font-size: 9px; text-align: center; }
.agentic-candidate-code { max-width: 56px; color: #5c7075; font-size: 9px; text-align: center; overflow-wrap: anywhere; }
.agentic-candidate-copy { display: grid; gap: 3px; min-width: 0; }
.agentic-candidate-copy strong { color: #23383e; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agentic-candidate-copy small { color: #42585f; font-size: 10px; line-height: 1.35; }
.agentic-candidate-copy .agentic-candidate-fit { color: #096348; }
.agentic-candidate-copy .agentic-candidate-tradeoff, .agentic-candidate-copy .agentic-candidate-unknown { color: #835d24; }
@media (max-width: 920px) {
  body:not(.admin-page) #view-inbox .agentic-panel { grid-column: 1 / -1; }
}

/* Conversation workspace — operator-first layout, aligned with the approved reference. */
body:not(.admin-page):has(#view-inbox:not([hidden])) {
  --sdr-green: #06483b;
  --sdr-ink: #142244;
  --sdr-blue: #065ac8;
  background: #f5faff;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .platform-header {
  min-height: 80px;
  background:
    radial-gradient(ellipse at 80% -65%, rgb(91 194 148 / 25%), transparent 45%),
    linear-gradient(108deg, #06392f, #005445 55%, #063c32);
  box-shadow: none;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header {
  width: 100%;
  max-width: none;
  min-height: 80px;
  padding-inline: 28px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header .brand {
  font-size: 23px;
  letter-spacing: -.035em;
  white-space: nowrap;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header .nav {
  font-size: 14px;
  font-weight: 600;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header nav {
  scrollbar-width: none;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header nav::-webkit-scrollbar { display: none; }
body:not(.admin-page):has(#view-inbox:not([hidden])) .header-banner {
  width: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .header-title-group { display: none; }
body:not(.admin-page):has(#view-inbox:not([hidden])) .header-actions #open-widget {
  position: fixed;
  z-index: 31;
  left: 17px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 70px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 12px;
  background: rgb(255 255 255 / 11%);
  color: #fff;
  font-size: 0;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .header-actions #open-widget span {
  margin: 0;
  font-size: 24px;
  line-height: 1;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tabs {
  position: fixed;
  z-index: 30;
  top: 80px;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 104px;
  height: calc(100dvh - 80px);
  gap: 12px;
  padding: 25px 10px 84px;
  overflow-y: auto;
  background: linear-gradient(180deg, #075143, #063c32);
  border-right: 1px solid rgb(255 255 255 / 14%);
  scrollbar-width: thin;
}
body:not(.admin-page) .stage-tabs[hidden] { display: none !important; }
body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab,
body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab.active {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 96px;
  padding: 12px 4px;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 16px;
  color: #f2faf7;
  background: rgb(255 255 255 / 5%);
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  box-shadow: none;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab:hover,
body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab.active {
  background: rgb(20 153 122 / 29%);
  border-color: rgb(255 255 255 / 70%);
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab .count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 21px;
  height: 21px;
  padding: 2px 4px;
  border-radius: 999px;
  background: #e7fff5;
  color: #075143;
  font-size: 10px;
}
body:not(.admin-page):has(#view-inbox:not([hidden])) main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 25px 16px 20px 126px;
}
body:not(.admin-page) #view-inbox .inbox,
body:not(.admin-page) #view-inbox .inbox.has-contact {
  height: calc(100dvh - 125px);
  min-height: 650px;
  gap: 16px;
}
body:not(.admin-page) #view-inbox .inbox.has-contact {
  grid-template-columns: minmax(270px, 22%) minmax(420px, 1fr) minmax(330px, 26%);
}
body:not(.admin-page) #view-inbox :is(.conversation-list, .conversation-panel, .contact-rail) {
  border-color: #dbe5f2;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgb(28 63 90 / 6%);
}
body:not(.admin-page) #view-inbox .conversation-list .list-heading { padding: 22px 19px 14px; }
body:not(.admin-page) #view-inbox .conversation-list .list-heading h2 { color: var(--sdr-ink); font-size: 19px; }
body:not(.admin-page) #view-inbox .conversation-list .count { background: #eef2ff; color: #183b7b; }
body:not(.admin-page) #view-inbox .search { margin-inline: 15px; width: calc(100% - 30px); min-height: 47px; border-color: #dce4f4; font-size: 13px; }
body:not(.admin-page) #view-inbox .conversation-item { width: calc(100% - 14px); margin: 0 7px 7px; min-height: 81px; padding: 13px 11px; border-color: #dce5f2; border-radius: 12px; }
body:not(.admin-page) #view-inbox .conversation-item.selected { padding-left: 11px; border-color: #75d9bb; background: linear-gradient(115deg, #effdf8, #e9faf7); }
body:not(.admin-page) #view-inbox .avatar { width: 42px; height: 42px; border-radius: 11px; color: #174367; background: #e5f6f8; }
body:not(.admin-page) #view-inbox .item-content strong { color: var(--sdr-ink); font-size: 13px; }
body:not(.admin-page) #view-inbox .item-content small { font-size: 11px; }
body:not(.admin-page) #view-inbox .item-time { color: #54709b; font-size: 10px; font-variant-numeric: tabular-nums; }
body:not(.admin-page) #view-inbox #conversation-active {
  display: grid;
  grid-template-rows: auto auto auto minmax(180px, 1fr) auto minmax(145px, 180px);
  height: 100%;
  min-height: 0;
}
body:not(.admin-page) #view-inbox #conversation-active[hidden] { display: none; }
body:not(.admin-page) #view-inbox .chat-header { padding: 20px 19px 13px; border-bottom: 0; align-items: flex-start; }
body:not(.admin-page) #view-inbox .chat-header h2 { color: var(--sdr-ink); font-size: 19px; }
body:not(.admin-page) #view-inbox .chat-header p { color: #49628f; font-size: 12px; }
body:not(.admin-page) #view-inbox .conversation-actions { max-width: 55%; flex-wrap: wrap; gap: 6px; }
body:not(.admin-page) #view-inbox .context-strip { margin: 0 18px; border-color: #e1e8f5; background: #f7faff; color: #445679; }
body:not(.admin-page) #view-inbox .contact-summary { min-width: 0; padding: 9px 17px 13px; border-bottom: 1px solid #e4eaf4; }
body:not(.admin-page) #view-inbox .contact-summary :is(.eyebrow, h2),
body:not(.admin-page) #view-inbox .contact-summary dl > div:first-child { display: none; }
body:not(.admin-page) #view-inbox .contact-summary dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; }
body:not(.admin-page) #view-inbox .contact-summary dl > div { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 5px; padding: 2px 10px; border-right: 1px solid #e0e8f4; }
body:not(.admin-page) #view-inbox .contact-summary dl > div:last-child { border-right: 0; }
body:not(.admin-page) #view-inbox .contact-summary dl > div[hidden] { display: none; }
body:not(.admin-page) #view-inbox .contact-summary dt { padding: 0; background: transparent; color: #607298; font-size: 10px; }
body:not(.admin-page) #view-inbox .contact-summary dd { min-width: 0; margin: 0; padding: 0; color: var(--sdr-ink); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
body:not(.admin-page) #view-inbox .contact-summary .navigation-summary-row { grid-column: 1 / -1; padding-top: 7px; }
body:not(.admin-page) #view-inbox .contact-summary #rail-navigation { margin: 0; padding-left: 19px; }
body:not(.admin-page) #view-inbox .messages { min-height: 0; height: auto; padding: 22px 18px; overflow-y: auto; background: #fff; }
body:not(.admin-page) #view-inbox .bubble { max-width: 84%; padding: 15px 18px; border-radius: 14px; color: var(--sdr-ink); font-size: 14px; }
body:not(.admin-page) #view-inbox .bubble.customer { background: #e6f9f5; }
body:not(.admin-page) #view-inbox .bubble.assistant { background: #f2f5fb; }
body:not(.admin-page) #view-inbox .composer { padding: 12px 16px; border-block: 1px solid #e4eaf4; background: #fff; }
body:not(.admin-page) #view-inbox .composer input { min-height: 47px; font-size: 13px; }
body:not(.admin-page) #view-inbox .composer .primary { min-height: 47px; padding-inline: 20px; background: linear-gradient(135deg, #0778d5, #064c9f); }
body:not(.admin-page) #view-inbox .agentic-activity-dock {
  display: grid;
  grid-template-columns: minmax(155px, 36%) minmax(0, 1fr);
  min-height: 0;
  padding: 14px 18px;
  background: #fff;
}
body:not(.admin-page) #view-inbox .agentic-activity-dock[hidden] { display: none; }
body:not(.admin-page) #view-inbox .agentic-activity-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-right: 1px solid #dae5f3;
  color: #20316b;
}
body:not(.admin-page) #view-inbox .agentic-activity-brand img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 7px 16px rgb(118 95 233 / 22%)); }
body:not(.admin-page) #view-inbox .agentic-activity-brand strong { font-size: 17px; letter-spacing: -.03em; }
body:not(.admin-page) #view-inbox .agentic-activity-brand strong span { color: #1259ca; }
body:not(.admin-page) #view-inbox .agentic-activity-brand small { color: #5971a0; font-size: 11px; }
body:not(.admin-page) #view-inbox .agentic-activity-dock .agentic-section { min-height: 0; padding-left: 19px; border: 0; overflow-y: auto; }
body:not(.admin-page) #view-inbox .agentic-activity-dock .agentic-section > summary { padding: 2px 0 9px; color: var(--sdr-ink); font-size: 15px; }
body:not(.admin-page) #view-inbox .agentic-run { margin: 0 0 5px; border: 0; background: transparent; }
body:not(.admin-page) #view-inbox .agentic-run > summary { padding: 5px 0; color: #395688; }
body:not(.admin-page) #view-inbox .agentic-event { border: 0; padding-block: 4px; font-size: 11px; }
body:not(.admin-page) #view-inbox .contact-rail { display: block; background: #fff; }
body:not(.admin-page) #view-inbox .contact-rail[hidden] { display: none; }
body:not(.admin-page) #view-inbox .agentic-panel { padding: 22px 17px; border-bottom: 1px solid #e0e8f4; }
body:not(.admin-page) #view-inbox .agentic-panel-heading { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
body:not(.admin-page) #view-inbox .agentic-panel-heading h3 { color: var(--sdr-ink); font-size: 20px; }
body:not(.admin-page) #view-inbox .agentic-panel-modes { justify-content: flex-start; }
body:not(.admin-page) #view-inbox .agentic-section > summary { color: var(--sdr-ink); font-size: 16px; }
body:not(.admin-page) #view-inbox .agentic-understanding-item { position: relative; min-height: 86px; margin: 7px 0 12px; padding: 14px 14px 14px 72px; border: 1px solid #dce6f5; border-radius: 12px; background: linear-gradient(125deg, #fff, #f7fbff); }
body:not(.admin-page) #view-inbox .agentic-understanding-item::before { position: absolute; top: 24px; left: 18px; width: 38px; height: 38px; border-radius: 50%; background: #e4f6fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23154c7f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V10Z'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E") center / 22px no-repeat; content: ''; }
body:not(.admin-page) #view-inbox .agentic-understanding-item p { color: var(--sdr-ink); font-size: 13px; font-weight: 650; }
body:not(.admin-page) #view-inbox .agentic-candidates-list { max-height: 510px; overflow-y: auto; padding: 0 3px 2px 0; }
body:not(.admin-page) #view-inbox .agentic-candidate { position: relative; grid-template-columns: 23px 56px minmax(0, 1fr) 10px; gap: 7px; min-height: 88px; align-items: center; padding: 10px 9px; border-color: #dbe5f3; border-radius: 11px; background: #fff; }
body:not(.admin-page) #view-inbox .agentic-candidate-origin { border-color: #ffc374; background: #fffaf4; }
body:not(.admin-page) #view-inbox .agentic-candidate-media { display: contents; }
body:not(.admin-page) #view-inbox .agentic-candidate-rank { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e6fbf8; color: #17354e; font-size: 10px; font-weight: 800; }
body:not(.admin-page) #view-inbox .agentic-candidate-origin .agentic-candidate-rank { background: #ffe6b0; }
body:not(.admin-page) #view-inbox .agentic-candidate-visual { width: 54px; height: 62px; border-radius: 8px; }
body:not(.admin-page) #view-inbox .agentic-candidate-code { display: none; }
body:not(.admin-page) #view-inbox .agentic-candidate-copy { position: relative; gap: 2px; }
body:not(.admin-page) #view-inbox .agentic-candidate-copy strong { padding-right: 29px; color: var(--sdr-ink); font-size: 12px; }
body:not(.admin-page) #view-inbox .agentic-candidate-copy small { color: #556b95; font-size: 10px; }
body:not(.admin-page) #view-inbox .agentic-candidate-copy .agentic-candidate-fit { color: #08724f; }
body:not(.admin-page) #view-inbox .agentic-candidate-origin-label { position: absolute; top: 0; right: 0; padding: 2px 5px; border-radius: 7px; background: #ecaa59; color: #fff; font-size: 9px; font-weight: 750; }
body:not(.admin-page) #view-inbox .agentic-candidate-chevron { width: 7px; height: 7px; border-top: 1.5px solid #6c87b2; border-right: 1.5px solid #6c87b2; transform: rotate(45deg); }
body:not(.admin-page) #view-inbox :is(button, input, select, textarea, a):focus-visible { outline: 2px solid #087e78; outline-offset: 2px; }

@media (max-width: 1290px) {
  body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header { grid-template-columns: auto minmax(0, 1fr); }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header .header-context { grid-column: 2; justify-self: end; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .platform-header { min-height: 118px; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tabs { top: 118px; height: calc(100dvh - 118px); }
  body:not(.admin-page) #view-inbox .inbox,
  body:not(.admin-page) #view-inbox .inbox.has-contact { height: calc(100dvh - 163px); }
  body:not(.admin-page) #view-inbox .inbox.has-contact { grid-template-columns: minmax(235px, 22%) minmax(350px, 1fr) minmax(290px, 27%); }
}
@media (max-width: 1010px) {
  body:not(.admin-page) #view-inbox .inbox.has-contact { grid-template-columns: minmax(230px, 29%) minmax(0, 1fr); height: auto; }
  body:not(.admin-page) #view-inbox .contact-rail { grid-column: 1 / -1; max-height: 470px; }
  body:not(.admin-page) #view-inbox .agentic-candidates-list { max-height: 330px; }
}
@media (max-width: 700px) {
  body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header { padding: 9px 12px; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header .brand { font-size: 15px; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .app-header nav { min-width: 0; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .platform-header { min-height: 0; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tabs { position: static; flex-direction: row; width: 100%; height: auto; gap: 6px; padding: 8px 12px; overflow-x: auto; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab,
  body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab.active { width: auto; min-width: 76px; min-height: 60px; gap: 2px; padding: 6px 9px; border-radius: 9px; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab svg { width: 18px; height: 18px; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .stage-tab .count { position: static; min-height: 17px; height: 17px; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) .header-actions #open-widget { left: auto; right: 14px; bottom: 14px; width: 46px; height: 46px; background: #075245; }
  body:not(.admin-page):has(#view-inbox:not([hidden])) main { padding: 12px 12px 72px; }
  body:not(.admin-page) #view-inbox .inbox,
  body:not(.admin-page) #view-inbox .inbox.has-contact { display: block; height: auto; min-height: 0; }
  body:not(.admin-page) #view-inbox #conversation-active { display: flex; flex-direction: column; min-height: 580px; }
  body:not(.admin-page) #view-inbox #conversation-active[hidden] { display: none; }
  body:not(.admin-page) #view-inbox .chat-header { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
  body:not(.admin-page) #view-inbox .chat-header > div:first-of-type { min-width: 0; }
  body:not(.admin-page) #view-inbox .conversation-actions { max-width: none; width: 100%; justify-content: flex-start; }
  body:not(.admin-page) #view-inbox .conversation-actions button { min-height: 35px; }
  body:not(.admin-page) #view-inbox .contact-summary { padding: 10px 13px 14px; }
  body:not(.admin-page) #view-inbox .contact-summary dl > div { padding: 6px 9px; }
  body:not(.admin-page) #view-inbox .messages { min-height: 280px; max-height: 46dvh; }
  body:not(.admin-page) #view-inbox .contact-summary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.admin-page) #view-inbox .agentic-activity-dock { min-height: 170px; }
  body:not(.admin-page) #view-inbox .contact-rail { max-height: none; }
}

/* Agent activity preview translated to live events; motion never invents steps. */
body:not(.admin-page) #view-inbox #conversation-active {
  grid-template-rows: auto auto auto minmax(180px, 1fr) auto minmax(190px, 220px);
}
body:not(.admin-page) #view-inbox .conversation-item {
  min-height: 53px;
  margin: 0 7px;
  padding: 7px 11px;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid #e8edf2;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
body:not(.admin-page) #view-inbox .conversation-item.selected {
  padding: 7px 11px;
  border: 1px solid #75d9bb;
  border-radius: 10px;
  background: #ecfaf6;
}
body:not(.admin-page) #view-inbox .conversation-item:hover:not(.selected) { background: #f6fafb; }
body:not(.admin-page) #view-inbox .avatar {
  position: relative;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  font-size: 10px;
}
body:not(.admin-page) #view-inbox .avatar::after {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #2eb192;
  content: "";
}
body:not(.admin-page) #view-inbox .conversation-closed .avatar::after { background: #a0aabd; }
body:not(.admin-page) #view-inbox .item-content strong { font-size: 11px; line-height: 1.25; }
body:not(.admin-page) #view-inbox .item-content small { margin-top: 3px; font-size: 10px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:not(.admin-page) #view-inbox .item-time { padding-left: 4px; font-size: 10px; }

body:not(.admin-page) #view-inbox .agentic-activity-dock {
  grid-template-columns: minmax(130px, 39%) minmax(0, 1fr);
  padding: 14px 20px;
  background: #fff;
}
body:not(.admin-page) #view-inbox .agentic-orb-wrap {
  display: grid;
  place-items: center;
  min-width: 0;
  border-right: 1px solid #e3e5ef;
  background: radial-gradient(ellipse at 48% 55%, #f4f0ff 0, #fff 64%);
}
body:not(.admin-page) #view-inbox .agentic-orb {
  position: relative;
  width: min(158px, 75%);
  aspect-ratio: 1;
  isolation: isolate;
  overflow: hidden;
  contain: paint;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, #e9e1fb 0, #eee9ff 51%, #f7f4ff 77%, #d9d3ee 100%);
  box-shadow: inset 8px 10px 19px #ffffffb3, inset -12px -17px 24px #7776b15c, 0 15px 27px -17px #5f50b67d;
}
.agentic-orb::before { position: absolute; inset: -3%; z-index: 3; border-radius: 50%; background: radial-gradient(ellipse at 26% 12%, #ffffffd9 0, #ffffff15 36%, transparent 55%), radial-gradient(ellipse at 80% 92%, #27379e8a, transparent 53%); content: ""; pointer-events: none; }
.agentic-orb::after { position: absolute; inset: 0; z-index: 4; border-radius: 50%; box-shadow: inset 0 0 15px 7px #fffefaeb, inset 0 -12px 22px #7781ce91; content: ""; pointer-events: none; }
.agentic-fluid { position: absolute; display: block; width: 112%; height: 82%; left: -7%; top: 10%; border-radius: 51% 49% 65% 35% / 54% 44% 56% 46%; filter: blur(14px); }
.agentic-fluid.one { background: radial-gradient(ellipse at 43% 47%, #2167f1 0, #5046e8 52%, #9e4be6 79%, transparent 100%); }
.agentic-fluid.two { background: radial-gradient(ellipse at 55% 50%, #fca2cf 0, #d751d9 50%, #9c5ce8 76%, transparent 100%); }
.agentic-fluid.three { background: radial-gradient(ellipse at 50% 50%, #273bd7 0, #6748de 57%, transparent 100%); }
.agentic-fluid.four { width: 74%; height: 64%; left: 13%; top: 18%; background: radial-gradient(ellipse at 45% 48%, #7ccff8 0, #5a89f8 47%, transparent 86%); filter: blur(17px); mix-blend-mode: screen; }
.agentic-activity-dock.is-processing .agentic-orb { animation: agentic-orb-breathe 4.6s ease-in-out infinite; }
.agentic-activity-dock.is-processing .agentic-orb::before { animation: agentic-light-turn 8s linear infinite; }
.agentic-activity-dock.is-processing .agentic-fluid.one { animation: agentic-flow-one 4.8s ease-in-out infinite; }
.agentic-activity-dock.is-processing .agentic-fluid.two { animation: agentic-flow-two 5.7s ease-in-out infinite; }
.agentic-activity-dock.is-processing .agentic-fluid.three { animation: agentic-flow-three 6.4s ease-in-out infinite; }
.agentic-activity-dock.is-processing .agentic-fluid.four { animation: agentic-flow-four 4.1s ease-in-out infinite; }
.agentic-activity-dock.is-failed .agentic-orb { filter: grayscale(.35); }
@keyframes agentic-orb-breathe { 0%, 100% { transform: translateY(1px) scale(.985); } 50% { transform: translateY(-3px) scale(1.025); } }
@keyframes agentic-light-turn { to { transform: rotate(360deg); } }
@keyframes agentic-flow-one { 0%, 100% { transform: translate(-32%, 21%) rotate(-34deg) scale(.92, 1.12); opacity: .9; } 25% { transform: translate(18%, -17%) rotate(54deg) scale(1.08, .79); opacity: 1; } 50% { transform: translate(27%, 31%) rotate(144deg) scale(.76, 1.14); opacity: .7; } 75% { transform: translate(-21%, -23%) rotate(232deg) scale(1.14, .88); opacity: 1; } }
@keyframes agentic-flow-two { 0%, 100% { transform: translate(33%, -30%) rotate(29deg) scale(.84); opacity: .9; } 25% { transform: translate(-20%, 17%) rotate(-63deg) scale(1.17, .77); opacity: .64; } 50% { transform: translate(-30%, -14%) rotate(-149deg) scale(.94, 1.18); opacity: 1; } 75% { transform: translate(18%, 27%) rotate(-231deg) scale(1.07, .86); opacity: .75; } }
@keyframes agentic-flow-three { 0%, 100% { transform: translate(7%, 56%) rotate(42deg) scale(.9); opacity: .76; } 25% { transform: translate(-26%, -13%) rotate(116deg) scale(1.08, .76); opacity: .96; } 50% { transform: translate(20%, -44%) rotate(204deg) scale(.88, 1.16); opacity: .68; } 75% { transform: translate(28%, 21%) rotate(300deg) scale(1.1, .87); opacity: .92; } }
@keyframes agentic-flow-four { 0%, 100% { transform: translate(-37%, 28%) scale(.55); opacity: .15; } 25% { transform: translate(29%, -31%) scale(1.02); opacity: .56; } 50% { transform: translate(48%, 35%) scale(.68); opacity: .19; } 75% { transform: translate(-28%, -26%) scale(1.08); opacity: .62; } }
body:not(.admin-page) #view-inbox .agentic-activity-dock .agentic-section { padding-left: 19px; }
.agentic-activity-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0 9px; background: #fff; }
body:not(.admin-page) #view-inbox .agentic-activity-heading { position: static; padding: 0; color: #172c31; background: transparent; font-size: 14px; }
.agentic-activity-heading span { color: #899598; font-weight: 450; }
#agentic-activity-state { display: inline-flex; align-items: center; gap: 6px; color: #397263; font-size: 10px; white-space: nowrap; }
#agentic-activity-state::before { width: 6px; height: 6px; border-radius: 50%; background: #20a883; content: ""; }
.is-failed #agentic-activity-state { color: #9d4c4c; }
.is-failed #agentic-activity-state::before { background: #ba5a5a; }
body:not(.admin-page) #view-inbox .agentic-event-list { position: relative; display: grid; gap: 3px; padding: 0 0 0 35px; }
body:not(.admin-page) #view-inbox .agentic-event-list::before { position: absolute; top: 15px; bottom: 17px; left: 12px; width: 1px; background: linear-gradient(#a99bed, #dedde3 45%); content: ""; }
body:not(.admin-page) #view-inbox .agentic-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; min-height: 39px; padding: 5px 8px 5px 12px; border: 0; border-radius: 10px; color: #4d5e62; }
body:not(.admin-page) #view-inbox .agentic-event::before { top: 10px; left: -26px; width: 8px; height: 8px; border: 2px solid #fff; background: #55bca8; }
body:not(.admin-page) #view-inbox .agentic-event-current { background: linear-gradient(90deg, #f4f1ff, #fbfaff 72%, transparent); }
body:not(.admin-page) #view-inbox .agentic-event-current::before { width: 9px; height: 9px; background: #8665e7; box-shadow: 0 0 0 3px #e9e5fa; }
body:not(.admin-page) #view-inbox .agentic-event strong { color: #263a40; font-size: 11px; }
body:not(.admin-page) #view-inbox .agentic-event small { color: #52686d; font-size: 10px; }
body:not(.admin-page) #view-inbox .agentic-event time { font-size: 10px; }
body:not(.admin-page) #view-inbox .agentic-event-started::before { background: #d4922e; }
body:not(.admin-page) #view-inbox .agentic-event-failed::before { background: #b75252; }
body:not(.admin-page) #view-inbox .agentic-processing { margin: 0 0 3px 35px; background: #f4f1ff; color: #3f3773; }

body:not(.admin-page) #view-inbox .agentic-rail-tabs { display: flex; gap: 0; margin: -8px -6px 16px; border-bottom: 1px solid #e2e8ef; }
body:not(.admin-page) #view-inbox .agentic-rail-tabs button { flex: 1 1 50%; min-width: 0; padding: 12px 3px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #42547a; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
body:not(.admin-page) #view-inbox .agentic-rail-tabs button[aria-selected="true"] { border-bottom-color: #008563; color: #00614e; }
body:not(.admin-page) #view-inbox .agentic-rail-tabs button:hover { background: #f5faf9; }
body:not(.admin-page) #view-inbox .agentic-rail-tabs button:focus-visible { outline: 2px solid #087e78; outline-offset: -2px; }
body:not(.admin-page) #view-inbox .agentic-rail-section-heading { margin: 0 0 12px; color: #162954; font-size: 14px; }
body:not(.admin-page) #view-inbox #agentic-panel:not([data-active-tab="candidates"]) [data-agentic-panel="candidates"],
body:not(.admin-page) #view-inbox #agentic-panel[data-active-tab="candidates"] [data-agentic-panel="understanding"] { display: none; }
body:not(.admin-page) #view-inbox .agentic-understanding-item { min-height: 0; margin: 0; padding: 15px 9px 15px 57px; border: 0; border-top: 1px solid #e4e9f0; border-radius: 0; background: #fff; }
body:not(.admin-page) #view-inbox .agentic-understanding-item::before { top: 17px; left: 7px; width: 37px; height: 37px; }
body:not(.admin-page) #view-inbox .agentic-candidates-list { max-height: calc(100dvh - 305px); }
@media (max-width: 700px) {
  body:not(.admin-page) #view-inbox #conversation-active { display: flex; flex-direction: column; }
  body:not(.admin-page) #view-inbox .agentic-activity-dock { min-height: 195px; grid-template-columns: minmax(95px, 30%) minmax(0, 1fr); padding: 12px; }
  body:not(.admin-page) #view-inbox .agentic-orb { width: min(115px, 80%); }
  body:not(.admin-page) #view-inbox .agentic-activity-dock .agentic-section { padding-left: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .agentic-activity-dock .agentic-orb, .agentic-activity-dock .agentic-orb::before, .agentic-activity-dock .agentic-fluid,
  .agentic-event-current::before, .agentic-event-current strong, .agentic-event-current .agentic-current-label, .agentic-processing { animation: none !important; }
}

/* One recovery block holds the entire cadence; the final destination stays a choice. */
body:not(.admin-page) .recovery-editor:not(.handoff-active) {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 900px);
  margin-inline: auto;
}
body:not(.admin-page) #recovery-crm-delay[hidden] { display: none !important; }
body:not(.admin-page) .recovery-inline-delay {
  padding: 0 12px 7px 39px;
}
body:not(.admin-page) .recovery-inline-delay select {
  max-width: 260px;
}
body:not(.admin-page) .recovery-window {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
body:not(.admin-page) .recovery-options-intro {
  margin: 0 0 7px;
  color: #345e54;
  font-size: 12px;
  line-height: 1.5;
}
body:not(.admin-page) .recovery-none-option {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  text-align: left;
  color: #1d3e35;
  background: #fff;
}
body:not(.admin-page) .recovery-none-option.selected {
  border-color: #45a28c;
  background: #f0faf6;
}
body:not(.admin-page) .recovery-option input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #087c62;
}
body:not(.admin-page) .recovery-manual-option {
  margin-top: 4px;
  color: #526a64;
  font-size: 12px;
}
body:not(.admin-page) .recovery-manual-option summary {
  width: fit-content;
  min-height: 28px;
  padding: 5px 0;
}
body:not(.admin-page) .recovery-manual-option .recovery-option { margin-top: 6px; }
body:not(.admin-page) .recovery-whatsapp-block {
  overflow: hidden;
  border: 1px solid #d8e7e3;
  border-radius: 12px;
  background: #fff;
}
body:not(.admin-page) .recovery-whatsapp-block:has(#recovery-use-whatsapp:checked) {
  border-color: #45a28c;
  box-shadow: 0 8px 24px rgb(12 96 77 / 9%);
}
body:not(.admin-page) .recovery-whatsapp-block:has(#recovery-use-whatsapp:checked) > .recovery-option,
body:not(.admin-page) .recovery-crm-option.selected {
  border-color: #45a28c;
  background: #f0faf6;
}
body:not(.admin-page) .recovery-whatsapp-block > .recovery-option {
  margin: -1px;
  border-radius: 11px;
}
body:not(.admin-page) .recovery-whatsapp-block .recovery-option small {
  margin-top: 4px;
  color: #526b66;
  font-size: 11px;
}
body:not(.admin-page) .whatsapp-schedule {
  padding: 16px;
  border-top: 1px solid #dcebe7;
  background: #f7fbfa;
}
body:not(.admin-page) .whatsapp-schedule[hidden] { display: none; }
body:not(.admin-page) .whatsapp-schedule-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
body:not(.admin-page) .whatsapp-schedule h3 {
  margin: 0;
  color: #113a31;
  font-size: 14px;
  font-weight: 700;
}
body:not(.admin-page) .whatsapp-schedule-heading p {
  margin: 4px 0 0;
  color: #536a64;
  font-size: 12px;
  line-height: 1.45;
}
body:not(.admin-page) .recovery-step-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e6f3ef;
  color: #075a48;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
body:not(.admin-page) .recovery-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body:not(.admin-page) .recovery-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid #dbe8e4;
  border-radius: 10px;
  background: #fff;
}
body:not(.admin-page) .recovery-step-index {
  color: #0a735d;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body:not(.admin-page) .recovery-step label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #274a42;
  font-size: 12px;
  white-space: nowrap;
}
body:not(.admin-page) .recovery-step input,
body:not(.admin-page) .recovery-step select {
  width: 68px;
  min-width: 0;
  min-height: 34px;
  padding: 5px 6px;
  border: 1px solid #b9d4cb;
  border-radius: 7px;
  background: #fff;
  color: #12342d;
  font-size: 12px;
}
body:not(.admin-page) .recovery-step select { width: 82px; }
body:not(.admin-page) .recovery-step-remove {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #667f78;
  font-size: 22px;
  line-height: 1;
}
body:not(.admin-page) .recovery-step-remove:hover:not(:disabled) {
  background: #fff0ed;
  color: #a43c32;
}
body:not(.admin-page) .recovery-add-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 10px;
  padding: 7px 11px;
  border: 1px dashed #6aa893;
  border-radius: 8px;
  background: #fff;
  color: #075a48;
  font-size: 12px;
  font-weight: 700;
}
body:not(.admin-page) .recovery-add-step:hover { background: #eef8f4; }
body:not(.admin-page) .recovery-add-step span { font-size: 18px; line-height: 1; }
body:not(.admin-page) .recovery-activation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #a8d2c4;
  border-radius: 9px;
  background: #eef8f4;
  color: #123e33;
  cursor: pointer;
}
body:not(.admin-page) .recovery-activation input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: #087c62;
}
body:not(.admin-page) .recovery-activation strong,
body:not(.admin-page) .recovery-activation small { display: block; }
body:not(.admin-page) .recovery-activation strong { font-size: 12px; }
body:not(.admin-page) .recovery-activation small {
  margin-top: 3px;
  color: #3b6256;
  font-size: 11px;
  line-height: 1.45;
}
body:not(.admin-page) .recovery-activation:focus-within {
  outline: 2px solid #087c62;
  outline-offset: 2px;
}
body:not(.admin-page) .recovery-final-choice {
  display: grid;
  gap: 7px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #dcebe7;
}
body:not(.admin-page) .recovery-final-choice h3 { margin-bottom: 3px; }
body:not(.admin-page) .recovery-final-choice label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  color: #25433c;
  font-size: 12px;
}
body:not(.admin-page) .recovery-final-choice input { accent-color: #087c62; }
body:not(.admin-page) .recovery-safety-note {
  margin: 11px 0 0;
  color: #75582c;
  font-size: 11px;
  line-height: 1.4;
}
@media (max-width: 700px) {
  body:not(.admin-page) .recovery-crm-option {
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
  }
  body:not(.admin-page) .recovery-crm-option em {
    grid-column: 2;
  }
  body:not(.admin-page) .recovery-steps { grid-template-columns: minmax(0, 1fr); }
  body:not(.admin-page) .recovery-step {
    grid-template-columns: 20px minmax(0, 1fr) 30px;
    gap: 5px;
    padding: 7px;
  }
  body:not(.admin-page) .recovery-step label { flex-wrap: wrap; white-space: normal; }
  body:not(.admin-page) .whatsapp-schedule { padding: 12px; }
  body:not(.admin-page) .recovery-window { grid-template-columns: minmax(0, 1fr); }
  body:not(.admin-page) .recovery-inline-delay { padding-left: 12px; }
}