/* Support Center landing and source placeholders. */

.cp #support-center-page {
  --support-accent-content: color-mix(in srgb, var(--cp-accent) 66%, var(--content-1));
  width: calc(100% - var(--inventory-side-space) * 2);
  max-width: none;
  padding-top: 0;
  color: var(--content-1);
}

/* Inboxes size themselves to the viewport (see .support-dialpad-shell), so the
   page's usual bottom padding would only add a scroll of empty space. */
.cp #support-center-page:has(.support-dialpad-workspace:not(.hidden)) {
  padding-bottom: var(--space-4);
}

.cp #support-center-page > .dashboard-breadcrumb {
  display: none;
}

.cp #support-center-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cp #support-center-page .support-center-workspace,
.cp #support-center-page .support-channel-workspace {
  overflow: hidden;
}

.cp #support-center-page .support-center-heading,
.cp #support-center-page .support-channel-heading {
  min-height: calc(var(--space-10) * 2);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-center-heading {
  justify-content: space-between;
}

.cp #support-center-page .support-center-heading-copy,
.cp #support-center-page .support-channel-heading > div {
  min-width: 0;
}

.cp #support-center-page .support-center-eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--support-accent-content);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.cp #support-center-page .support-center-heading h2,
.cp #support-center-page .support-channel-heading h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-center-heading p {
  margin: var(--space-1) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-center-view-label {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-center-body {
  padding: var(--space-8);
  background: var(--surface-2);
}

.cp #support-center-page .support-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.cp #support-center-page .support-source-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1200 / 630;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: var(--radius-lg);
  color: #fff;
  box-shadow: var(--shadow-sm);
  text-align: center;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-source-card--dialpad {
  padding: 0;
  background: #170638;
}

.cp #support-center-page .support-source-card--yelp {
  background: #ff1a1a;
}

.cp #support-center-page .support-source-card:hover,
.cp #support-center-page .support-source-card:focus-visible {
  border-color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--space-1) * -1));
}

.cp #support-center-page .support-source-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cp-accent) 65%, #fff);
  outline-offset: var(--space-1);
}

.cp #support-center-page .support-source-card:active {
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.cp #support-center-page .support-source-pending {
  position: absolute;
  z-index: 2;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #09051a 76%, transparent);
  color: #fff;
  box-shadow: var(--shadow-sm);
  text-align: left;
  backdrop-filter: blur(12px);
}

.cp #support-center-page .support-source-card--yelp .support-source-pending {
  background: color-mix(in srgb, #760808 76%, transparent);
}

.cp #support-center-page .support-source-pending > span {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-source-pending strong {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-source-pending small {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, #fff 82%, transparent);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-source-logo {
  display: block;
  object-fit: contain;
}

.cp #support-center-page .support-source-logo--dialpad {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.cp #support-center-page .support-source-logo--yelp {
  width: min(82%, calc(var(--space-10) * 9));
  height: auto;
}

.cp #support-center-page .support-view-all-area {
  width: min(100%, calc(var(--space-10) * 24));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
  margin-right: auto;
  margin-left: auto;
}

.cp #support-center-page .support-view-all {
  width: 100%;
  min-height: calc(var(--space-10) + var(--space-4));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--cp-accent);
  color: var(--content-on-accent, #fff);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  text-decoration: none;
  transition:
    box-shadow var(--dur-fast) var(--ease-standard),
    filter var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-view-all.support-metrics-link {
  border-color: var(--border-2);
  background: var(--surface);
  color: var(--content-1);
}

.cp #support-center-page .support-view-all.support-metrics-link:hover,
.cp #support-center-page .support-view-all.support-metrics-link:focus-visible {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 7%, var(--surface));
  color: var(--cp-accent);
  filter: none;
}

.cp #support-center-page .support-view-all:hover,
.cp #support-center-page .support-view-all:focus-visible {
  box-shadow: var(--shadow-md);
  filter: brightness(0.94);
  transform: translateY(calc(var(--space-1) * -1));
}

.cp #support-center-page .support-view-all:focus-visible,
.cp #support-center-page .support-channel-back:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cp-accent) 38%, transparent);
  outline-offset: var(--space-1);
}

.cp #support-center-page .support-view-all:active {
  box-shadow: none;
  transform: translateY(0);
}

.cp #support-center-page .support-view-all svg,
.cp #support-center-page .support-channel-back svg,
.cp #support-center-page .support-channel-mark--all svg,
.cp #support-center-page .support-channel-mark--metrics svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cp #support-center-page .support-channel-back {
  width: calc(var(--space-10) + var(--space-1));
  height: calc(var(--space-10) + var(--space-1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-channel-back:hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
}

.cp #support-center-page .support-channel-empty {
  min-height: calc(var(--space-10) * 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  background: var(--surface-2);
  text-align: center;
}

.cp #support-center-page .support-channel-mark {
  width: calc(var(--space-10) * 2.25);
  height: calc(var(--space-10) * 2.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-channel-mark--dialpad {
  width: calc(var(--space-10) * 5);
  height: calc(var(--space-10) * 2.625);
  background: transparent;
  box-shadow: none;
}

.cp #support-center-page .support-channel-mark--yelp {
  width: calc(var(--space-10) * 4.5);
  background: #ff1a1a;
}

.cp #support-center-page .support-channel-mark--all {
  background: var(--cp-accent);
  color: var(--content-on-accent, #fff);
}

.cp #support-center-page .support-channel-mark--metrics {
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-channel-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cp #support-center-page .support-channel-mark--dialpad img {
  border-radius: var(--radius-lg);
}

.cp #support-center-page .support-channel-mark--yelp img {
  width: 84%;
  height: auto;
}

.cp #support-center-page :is(.support-channel-mark--all, .support-channel-mark--metrics) svg {
  width: var(--space-8);
  height: var(--space-8);
}

.cp #support-center-page .support-channel-empty h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-channel-empty p {
  max-width: calc(var(--space-10) * 11);
  margin: var(--space-2) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* Support metrics: executive summary first, operational detail second. */

.cp #support-center-page .support-metrics-workspace {
  overflow: hidden;
  background: var(--surface-2);
}

.cp #support-center-page .support-metrics-topbar {
  justify-content: space-between;
  flex-wrap: wrap;
}

.cp #support-center-page .support-metrics-title-group,
.cp #support-center-page .support-metrics-controls,
.cp #support-center-page .support-metrics-segmented {
  display: flex;
  align-items: center;
}

.cp #support-center-page .support-metrics-title-group {
  min-width: 0;
  gap: var(--space-4);
}

.cp #support-center-page .support-metrics-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

.cp #support-center-page .support-metrics-sample-badge {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--space-8) + var(--space-1));
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 34%, var(--border-1));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-metrics-sample-badge.hidden {
  display: none;
}

.cp #support-center-page .support-metrics-segmented {
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #support-center-page .support-metrics-segmented button {
  min-height: calc(var(--space-8) + var(--space-1));
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-metrics-segmented button:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #support-center-page .support-metrics-segmented button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.cp #support-center-page .support-metrics-segmented button:active:not(:disabled) {
  transform: scale(.97);
}

.cp #support-center-page .support-metrics-segmented button.is-active {
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-metrics-segmented button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.cp #support-center-page .support-metrics-empty {
  min-height: calc(var(--space-10) * 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  background: var(--surface-2);
  text-align: center;
}

.cp #support-center-page .support-metrics-empty.hidden,
.cp #support-center-page .support-metrics-dashboard.hidden {
  display: none;
}

.cp #support-center-page .support-metrics-empty h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-metrics-empty p {
  max-width: calc(var(--space-10) * 12);
  margin: var(--space-2) 0 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-metrics-dashboard {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}

.cp #support-center-page .support-metrics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-metrics-kpi {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border-right: 1px solid var(--border-1);
}

.cp #support-center-page .support-metrics-kpi:last-child {
  border-right: 0;
}

.cp #support-center-page .support-metrics-kpi > span,
.cp #support-center-page .support-metric-label {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}

.cp #support-center-page .support-metrics-kpi > strong {
  margin-top: var(--space-1);
  color: var(--content-1);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-metrics-kpi > small {
  overflow: hidden;
  color: var(--support-accent-content);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-metrics-kpi--attention > small {
  color: var(--cp-danger);
}

.cp #support-center-page .support-metrics-kpi--positive > small {
  color: var(--cp-success);
}

.cp #support-center-page .support-metrics-primary-grid,
.cp #support-center-page .support-metrics-analysis-grid,
.cp #support-center-page .support-metrics-bottom-grid {
  display: grid;
  gap: var(--space-5);
}

.cp #support-center-page .support-metrics-primary-grid {
  grid-template-columns: minmax(0, 2fr) minmax(calc(var(--space-10) * 7), 1fr);
}

.cp #support-center-page .support-metrics-analysis-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cp #support-center-page .support-metrics-bottom-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(calc(var(--space-10) * 8), 1fr);
}

.cp #support-center-page .support-metric-panel {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-metric-panel-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.cp #support-center-page .support-metric-panel-head > div:first-child {
  min-width: 0;
}

.cp #support-center-page .support-metric-panel-head strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-volume-panel .support-metric-panel-head > div:first-child > strong {
  font-size: var(--text-xl);
}

.cp #support-center-page .support-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
}

.cp #support-center-page .support-chart-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-chart-key i,
.cp #support-center-page .support-donut-key::before,
.cp #support-center-page .support-channel-health-name i {
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: var(--cp-accent);
}

.cp #support-center-page .support-chart-key--yelp i,
.cp #support-center-page .support-channel-health-name--yelp i {
  background: color-mix(in srgb, var(--content-1) 62%, var(--cp-accent));
}

.cp #support-center-page .support-chart-key strong {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-volume-chart {
  height: calc(var(--space-10) * 5.8);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin-top: var(--space-4);
}

.cp #support-center-page .support-volume-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cp #support-center-page .support-chart-grid path {
  fill: none;
  stroke: var(--border-1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.cp #support-center-page .support-chart-area {
  fill: color-mix(in srgb, var(--cp-accent) 10%, transparent);
  stroke: none;
}

.cp #support-center-page .support-chart-line {
  fill: none;
  stroke: var(--cp-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.cp #support-center-page .support-chart-line--yelp {
  stroke: color-mix(in srgb, var(--content-1) 62%, var(--cp-accent));
}

.cp #support-center-page .support-chart-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-donut-layout {
  min-height: calc(var(--space-10) * 5.8);
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 3.6), auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}

.cp #support-center-page .support-donut-layout--compact {
  min-height: calc(var(--space-10) * 4.2);
  grid-template-columns: minmax(calc(var(--space-10) * 3), auto) minmax(0, 1fr);
}

.cp #support-center-page .support-donut {
  position: relative;
  width: calc(var(--space-10) * 3.6);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: conic-gradient(var(--cp-accent) 0 calc(var(--support-donut-primary, 50) * 1%), color-mix(in srgb, var(--content-3) 54%, var(--surface-3)) 0 100%);
}

.cp #support-center-page .support-donut-layout--compact .support-donut {
  width: calc(var(--space-10) * 3);
}

.cp #support-center-page .support-coverage-donut {
  background: conic-gradient(var(--cp-accent) 0 calc(var(--support-coverage-answered, 80) * 1%), var(--cp-warning) 0 calc(var(--support-coverage-waiting, 90) * 1%), var(--cp-danger) 0 100%);
}

.cp #support-center-page .support-donut::before {
  position: absolute;
  inset: var(--space-4);
  border-radius: inherit;
  background: var(--surface);
  content: "";
}

.cp #support-center-page .support-donut > span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--content-1);
  text-align: center;
}

.cp #support-center-page .support-donut > span strong {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-donut > span small {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-donut-legend {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.cp #support-center-page .support-donut-key {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-donut-key::before {
  content: "";
}

.cp #support-center-page .support-donut-key--secondary::before {
  background: color-mix(in srgb, var(--content-3) 54%, var(--surface-3));
}

.cp #support-center-page .support-donut-key--waiting::before {
  background: var(--cp-warning);
}

.cp #support-center-page .support-donut-key--missed::before {
  background: var(--cp-danger);
}

.cp #support-center-page .support-donut-key dt,
.cp #support-center-page .support-donut-key dd {
  margin: 0;
}

.cp #support-center-page .support-donut-key dd {
  color: var(--content-1);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-metric-bars {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.cp #support-center-page .support-metric-bars li {
  min-width: 0;
}

.cp #support-center-page .support-metric-bars li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-metric-bars li strong {
  color: var(--content-1);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-metric-bar {
  height: var(--space-2);
  display: block;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.cp #support-center-page .support-metric-bar > span {
  width: var(--support-metric-value, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--cp-accent);
  transform-origin: left;
}

.cp #support-center-page .support-outcome-bars .support-metric-bar > span {
  background: color-mix(in srgb, var(--cp-accent) 68%, var(--content-1));
}

.cp #support-center-page .support-attention-total {
  min-width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  color: var(--cp-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-attention-list {
  display: grid;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.cp #support-center-page .support-attention-list li {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-1);
}

.cp #support-center-page .support-attention-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cp #support-center-page .support-attention-icon {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-warning) 11%, var(--surface));
  color: var(--cp-warning);
}

.cp #support-center-page .support-attention-icon--message {
  background: color-mix(in srgb, var(--cp-danger) 9%, var(--surface));
  color: var(--cp-danger);
}

.cp #support-center-page .support-attention-icon--bookmark {
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-attention-icon svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cp #support-center-page .support-attention-list li > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cp #support-center-page .support-attention-list strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-attention-list small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-channel-health {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.cp #support-center-page .support-channel-health-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 2.2), 1.15fr) repeat(3, minmax(calc(var(--space-10) * 1.4), 1fr));
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-1);
}

.cp #support-center-page .support-channel-health-row:last-child {
  border-bottom: 0;
}

.cp #support-center-page .support-channel-health-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-channel-health-row > span:not(.support-channel-health-name) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cp #support-center-page .support-channel-health-row small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-channel-health-row strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-metrics-dashboard.is-animating .support-chart-line {
  animation: support-metric-line-draw var(--dur-slow) var(--ease-out) both;
}

.cp #support-center-page .support-metrics-dashboard.is-animating .support-chart-area {
  animation: support-metric-area-in var(--dur-slow) var(--ease-out) both;
}

.cp #support-center-page .support-metrics-dashboard.is-animating .support-donut {
  animation: support-metric-donut-in var(--dur-slow) var(--ease-out) both;
}

.cp #support-center-page .support-metrics-dashboard.is-animating .support-metric-bar > span {
  animation: support-metric-bar-in var(--dur-slow) var(--ease-out) both;
}

@keyframes support-metric-line-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@keyframes support-metric-area-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes support-metric-donut-in {
  from { opacity: 0; transform: scale(.92) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes support-metric-bar-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1180px) {
  .cp #support-center-page .support-metrics-primary-grid,
  .cp #support-center-page .support-metrics-bottom-grid {
    grid-template-columns: 1fr;
  }

  .cp #support-center-page .support-metrics-analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #support-center-page .support-coverage-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .cp #support-center-page .support-metrics-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .cp #support-center-page .support-metrics-controls {
    justify-content: flex-start;
  }

  .cp #support-center-page .support-metrics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #support-center-page .support-metrics-kpi:nth-child(2) {
    border-right: 0;
  }

  .cp #support-center-page .support-metrics-kpi:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border-1);
  }

  .cp #support-center-page .support-channel-health-row {
    grid-template-columns: minmax(calc(var(--space-10) * 2.2), 1.25fr) repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .cp #support-center-page .support-metrics-dashboard {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .cp #support-center-page .support-metrics-controls,
  .cp #support-center-page .support-metrics-segmented {
    width: 100%;
  }

  .cp #support-center-page .support-metrics-segmented button {
    flex: 1 1 0;
  }

  .cp #support-center-page .support-metrics-analysis-grid,
  .cp #support-center-page .support-metrics-kpis {
    grid-template-columns: 1fr;
  }

  .cp #support-center-page .support-metrics-kpi,
  .cp #support-center-page .support-metrics-kpi:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--border-1);
  }

  .cp #support-center-page .support-metrics-kpi:last-child {
    border-bottom: 0;
  }

  .cp #support-center-page .support-coverage-panel {
    grid-column: auto;
  }

  .cp #support-center-page .support-metric-panel {
    padding: var(--space-4);
  }

  .cp #support-center-page .support-volume-chart {
    height: calc(var(--space-10) * 4.5);
  }

  .cp #support-center-page .support-donut-layout,
  .cp #support-center-page .support-donut-layout--compact {
    min-height: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: var(--space-4);
  }

  .cp #support-center-page .support-donut-legend {
    width: 100%;
  }

  .cp #support-center-page .support-channel-health-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cp #support-center-page .support-channel-health-name {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .cp #support-center-page .support-center-body {
    padding: var(--space-6);
  }

  .cp #support-center-page .support-source-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 620px) {
  .cp #support-center-page .support-center-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .cp #support-center-page .support-channel-heading {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .cp #support-center-page .support-center-body {
    padding: var(--space-3);
  }

  .cp #support-center-page .support-source-grid {
    gap: var(--space-3);
  }

  .cp #support-center-page .support-source-card {
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .cp #support-center-page .support-source-pending {
    right: var(--space-3);
    bottom: var(--space-3);
    left: var(--space-3);
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }

  .cp #support-center-page .support-source-pending small {
    white-space: normal;
  }

  .cp #support-center-page .support-source-logo--dialpad {
    width: 100%;
    height: 100%;
  }

  .cp #support-center-page .support-source-card--dialpad {
    padding: 0;
  }

  .cp #support-center-page .support-source-logo--yelp {
    width: min(86%, calc(var(--space-10) * 7));
  }

  .cp #support-center-page .support-view-all-area {
    grid-template-columns: 1fr;
    margin-top: var(--space-5);
  }

  .cp #support-center-page .support-channel-empty {
    min-height: calc(var(--space-10) * 8);
    padding: var(--space-8) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp #support-center-page .support-source-card,
  .cp #support-center-page .support-view-all,
  .cp #support-center-page .support-channel-back {
    transition: none;
  }

  .cp #support-center-page .support-source-card:hover,
  .cp #support-center-page .support-source-card:focus-visible,
  .cp #support-center-page .support-view-all:hover,
  .cp #support-center-page .support-view-all:focus-visible {
    transform: none;
  }
}

/* Support workflow overlay: channel policy, per-conversation precedence,
   business-hours SLA, internal notes, business links, and required outcomes. */
.cp #support-center-page .support-channel-topbar-tools,
.cp #support-center-page .support-all-policy-shortcuts {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.cp #support-center-page .support-mia-policy-menu {
  position: relative;
  flex: 0 0 auto;
}

.cp #support-center-page .support-mia-policy-trigger {
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
}

.cp #support-center-page .support-mia-policy-trigger:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 5%, var(--surface));
}

.cp #support-center-page .support-mia-policy-trigger:active { transform: translateY(1px); }
.cp #support-center-page .support-mia-policy-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cp #support-center-page .support-mia-policy-trigger[aria-expanded="true"] {
  border-color: var(--cp-accent);
  box-shadow: var(--focus-ring);
}

.cp #support-center-page .support-mia-policy-trigger > span:not(.support-policy-dot):not(.support-mia-icon) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.cp #support-center-page .support-mia-policy-trigger strong {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-mia-policy-trigger small {
  color: var(--content-3);
  font-size: 10px;
  white-space: nowrap;
}

.cp #support-center-page .support-mia-policy-trigger .support-mia-policy-chevron {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-mia-policy-trigger[aria-expanded="true"] .support-mia-policy-chevron {
  transform: rotate(180deg);
}

.cp #support-center-page .support-mia-policy-dropdown {
  min-width: calc(var(--space-10) * 16);
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown, 20);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.cp #support-center-page .support-mia-policy-dropdown.hidden { display: none; }

.cp #support-center-page .support-mia-policy-dropdown .support-channel-policy-trigger {
  width: 100%;
}

.cp #support-center-page .support-channel-policy-trigger {
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
}

.cp #support-center-page .support-channel-policy-trigger:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 5%, var(--surface));
}

.cp #support-center-page .support-channel-policy-trigger:active { transform: translateY(1px); }
.cp #support-center-page .support-channel-policy-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cp #support-center-page .support-channel-policy-trigger > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.cp #support-center-page .support-channel-policy-trigger strong {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-channel-policy-trigger small {
  color: var(--content-3);
  font-size: 10px;
  white-space: nowrap;
}

.cp #support-center-page .support-policy-dot {
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: var(--cp-gray-40);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-gray-40) 14%, transparent);
}

.cp #support-center-page .support-channel-policy-trigger.is-on .support-policy-dot,
.cp #support-center-page .support-mia-policy-trigger.is-on .support-policy-dot {
  background: var(--cp-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-success) 14%, transparent);
}

.cp #support-center-page .support-channel-policy-trigger.is-pending .support-policy-dot,
.cp #support-center-page .support-mia-policy-trigger.is-pending .support-policy-dot {
  background: var(--cp-warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-warning) 14%, transparent);
}

.cp #support-center-page .support-channel-policy-trigger--compact {
  min-height: calc(var(--space-10) - var(--space-1));
  padding: var(--space-1) var(--space-2);
}

.cp .support-ops-dialog-card .support-global-policy-status {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.cp .support-ops-dialog-card .support-global-policy-status li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp .support-ops-dialog-card .support-global-policy-status li > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cp .support-ops-dialog-card .support-global-policy-status small,
.cp .support-ops-dialog-card .support-global-policy-status em {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-style: normal;
}

.cp .support-ops-dialog-card .support-global-policy-status em.is-ready {
  color: var(--cp-success);
  font-weight: var(--weight-bold);
}

.cp #support-center-page [data-support-ops-key] {
  position: relative;
  border-top: 1px solid var(--border-1);
}

.cp #support-center-page [data-support-ops-key].is-saving::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  cursor: wait;
}

.cp #support-center-page .support-ops-section {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-ops-section-head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.cp #support-center-page .support-ops-icon {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-ops-icon svg,
.cp #support-center-page .support-ops-inline-card svg,
.cp #support-center-page .support-ops-note-list svg,
.cp #support-center-page .support-ops-link-list svg,
.cp #support-center-page :is(.support-ops-close-button, .support-ops-closed) svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cp #support-center-page .support-ops-section-head > span:nth-child(2) { min-width: 0; }
.cp #support-center-page .support-ops-section-head h4 { margin: 0; color: var(--content-1); font-size: var(--text-sm); font-weight: var(--weight-black); }
.cp #support-center-page .support-ops-section-head small { display: block; margin-top: 2px; overflow: hidden; color: var(--content-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

.cp #support-center-page .support-ops-status,
.cp #support-center-page .support-ops-count {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: 10px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.cp #support-center-page .support-ops-status.is-on {
  background: color-mix(in srgb, var(--cp-success) 11%, var(--surface));
  color: var(--cp-success);
}

.cp #support-center-page .support-ops-status.is-pending {
  background: color-mix(in srgb, var(--cp-warning) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 82%, var(--content-1));
}

.cp #support-center-page .support-ops-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #support-center-page .support-ops-choice button {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font: inherit;
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  cursor: pointer;
}

.cp #support-center-page .support-ops-choice button:hover { color: var(--content-1); }
.cp #support-center-page .support-ops-choice button.is-active { background: var(--surface); color: var(--cp-accent); box-shadow: var(--shadow-sm); }
.cp #support-center-page .support-ops-choice button:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 1px; box-shadow: none; }

.cp #support-center-page .support-ops-helper,
.cp #support-center-page .support-ops-close-section > p,
.cp #support-center-page .support-ops-empty {
  margin: 0;
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-ops-inline-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #support-center-page .support-ops-inline-card > span:first-child {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 11%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-ops-inline-card > span:last-child { min-width: 0; display: grid; gap: 2px; }
.cp #support-center-page .support-ops-inline-card small { color: var(--content-3); font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .04em; }
.cp #support-center-page .support-ops-inline-card strong { color: var(--content-1); font-size: var(--text-sm); }
.cp #support-center-page .support-ops-inline-card em { color: var(--content-3); font-size: 10px; font-style: normal; }
.cp #support-center-page .support-ops-inline-card.is-at_risk { border-color: color-mix(in srgb, var(--cp-warning) 40%, var(--border-1)); background: color-mix(in srgb, var(--cp-warning) 7%, var(--surface)); }
.cp #support-center-page .support-ops-inline-card.is-at_risk > span:first-child { color: var(--cp-warning); }
.cp #support-center-page .support-ops-inline-card.is-overdue { border-color: color-mix(in srgb, var(--cp-danger) 40%, var(--border-1)); background: var(--cp-danger-soft); }
.cp #support-center-page .support-ops-inline-card.is-overdue > span:first-child { color: var(--cp-danger); }

.cp #support-center-page .support-ops-note-form {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 28%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 5%, var(--surface));
}

.cp #support-center-page .support-ops-note-form:focus-within { border-color: var(--cp-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-warning) 14%, transparent); }
.cp #support-center-page .support-ops-note-form textarea { width: 100%; min-height: calc(var(--space-10) * 1.25); padding: var(--space-2); resize: vertical; border: 0; outline: 0; background: transparent; color: var(--content-1); font: inherit; font-size: var(--text-xs); line-height: var(--leading-body); box-shadow: none; }
.cp #support-center-page .support-ops-note-form textarea:focus { outline: 0; box-shadow: none; }
.cp #support-center-page .support-ops-note-form button { justify-self: end; min-height: var(--space-8); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--content-1); color: var(--surface); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold); cursor: pointer; }

.cp #support-center-page .support-ops-note-list { display: grid; gap: var(--space-2); }
.cp #support-center-page .support-ops-note-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border-1); }
.cp #support-center-page .support-ops-note-list article > span { color: var(--content-3); }
.cp #support-center-page .support-ops-note-list p { margin: 0; color: var(--content-1); font-size: var(--text-xs); line-height: var(--leading-body); overflow-wrap: anywhere; }
.cp #support-center-page .support-ops-note-list small { color: var(--content-3); font-size: 10px; }
.cp #support-center-page .support-ops-more-notes { border-top: 1px solid var(--border-1); }
.cp #support-center-page .support-ops-more-notes > summary { padding: var(--space-2) 0; color: var(--cp-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); cursor: pointer; }
.cp #support-center-page .support-ops-more-notes > div { display: grid; gap: var(--space-2); }

.cp #support-center-page .support-ops-customer-notes { border-top: 1px solid var(--border-1); }
.cp #support-center-page .support-ops-customer-notes summary { display: flex; justify-content: space-between; padding-top: var(--space-3); color: var(--content-2); font-size: var(--text-xs); font-weight: var(--weight-bold); cursor: pointer; }
.cp #support-center-page .support-ops-customer-notes summary span { color: var(--content-3); }
.cp #support-center-page .support-ops-customer-notes > div { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.cp #support-center-page .support-ops-customer-notes article { padding: var(--space-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-2); }
.cp #support-center-page .support-ops-customer-notes article.is-important { border-color: color-mix(in srgb, var(--cp-warning) 35%, var(--border-1)); background: color-mix(in srgb, var(--cp-warning) 6%, var(--surface)); }
.cp #support-center-page .support-ops-customer-notes :is(strong, p, small) { display: block; }
.cp #support-center-page .support-ops-customer-notes strong { color: var(--content-1); font-size: var(--text-xs); }
.cp #support-center-page .support-ops-customer-notes p { margin: var(--space-1) 0; color: var(--content-2); font-size: var(--text-xs); line-height: var(--leading-body); }
.cp #support-center-page .support-ops-customer-notes small { color: var(--content-3); font-size: 10px; }

.cp #support-center-page .support-ops-link-list { display: grid; gap: var(--space-2); }
.cp #support-center-page .support-ops-link-list > button:not(.support-ops-text-action) {
  width: 100%; min-height: calc(var(--space-10) + var(--space-3)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); color: var(--content-1); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.cp #support-center-page .support-ops-link-list > button:not(.support-ops-text-action):hover { border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--border-1)); background: color-mix(in srgb, var(--cp-accent) 4%, var(--surface)); }
.cp #support-center-page .support-ops-link-list > button > span:first-child { width: var(--space-8); height: var(--space-8); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--surface-3); color: var(--content-2); }
.cp #support-center-page .support-ops-link-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.cp #support-center-page .support-ops-link-list small { color: var(--content-3); font-size: 10px; }
.cp #support-center-page .support-ops-link-list strong { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.cp #support-center-page .support-ops-link-list em { color: var(--cp-success); font-size: 10px; font-style: normal; }
.cp #support-center-page .support-ops-text-action { justify-self: start; margin-top: calc(var(--space-2) * -1); padding: var(--space-1) 0; border: 0; background: transparent; color: var(--content-3); font: inherit; font-size: 10px; cursor: pointer; }
.cp #support-center-page .support-ops-text-action:hover { color: var(--cp-danger); }

.cp #support-center-page .support-ops-close-section { align-items: start; background: var(--surface-2); }
.cp #support-center-page .support-ops-close-button,
.cp #support-center-page .support-ops-reopen-button { min-height: var(--space-10); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); border: 1px solid var(--border-2); border-radius: var(--radius-md); background: var(--surface); color: var(--content-1); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-bold); cursor: pointer; }
.cp #support-center-page .support-ops-close-button:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
.cp #support-center-page .support-ops-reopen-button { color: var(--cp-accent); }
.cp #support-center-page .support-ops-closed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); color: var(--cp-success); }
.cp #support-center-page .support-ops-closed > span:last-child { display: grid; gap: 2px; }
.cp #support-center-page .support-ops-closed small { color: var(--content-3); font-size: 10px; text-transform: uppercase; }
.cp #support-center-page .support-ops-closed strong { color: var(--content-1); font-size: var(--text-sm); }
.cp #support-center-page .support-ops-closed p { margin: var(--space-1) 0 0; color: var(--content-2); font-size: var(--text-xs); }

.cp #support-center-page .support-ops-loading,
.cp #support-center-page .support-ops-error { min-height: calc(var(--space-10) * 3); display: flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-4); color: var(--content-3); }
.cp #support-center-page .support-ops-loading span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-circle); background: var(--cp-accent); animation: support-ops-pulse 900ms var(--ease-in-out) infinite; }
.cp #support-center-page .support-ops-loading span:nth-child(2) { animation-delay: 120ms; }
.cp #support-center-page .support-ops-loading span:nth-child(3) { animation-delay: 240ms; }
.cp #support-center-page .support-ops-loading small { margin-left: var(--space-2); }
.cp #support-center-page .support-ops-error { align-items: flex-start; flex-direction: column; }

@keyframes support-ops-pulse { 0%, 100% { opacity: .32; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.cp #support-center-page .support-metrics-business-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cp #support-center-page .support-metrics-business-strip > span { display: grid; gap: var(--space-1); padding: var(--space-4); border-right: 1px solid var(--border-1); }
.cp #support-center-page .support-metrics-business-strip > span:last-child { border-right: 0; }
.cp #support-center-page .support-metrics-business-strip small { color: var(--content-3); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.cp #support-center-page .support-metrics-business-strip strong { color: var(--content-1); font-size: var(--text-lg); font-weight: var(--weight-black); }
.cp #support-center-page .support-metric-no-data { display: flex; align-items: center; justify-content: center; min-height: var(--space-10); color: var(--content-3); font-size: var(--text-sm); }
.cp #support-center-page .support-attention-list li > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.cp #support-center-page .support-donut-key dt { display: flex; align-items: center; gap: var(--space-2); }
.cp #support-center-page .support-donut-key dt i { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-circle); }

.support-ops-dialog {
  width: min(calc(100vw - var(--space-6) * 2), calc(var(--space-10) * 14));
  max-height: min(88dvh, calc(var(--space-10) * 19));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}
.support-ops-dialog::backdrop { background: rgba(17, 24, 39, .52); backdrop-filter: blur(2px); animation: cp-overlay-in var(--dur-fast) var(--ease-standard); }
.support-ops-dialog-card { max-height: inherit; display: grid; gap: var(--space-5); padding: var(--space-5); overflow: auto; border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface); color: var(--content-1); box-shadow: var(--shadow-lg); animation: cp-card-in var(--dur-base) var(--ease-out); }
.support-ops-dialog-card > header { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.support-ops-dialog-card > header > span:nth-child(2) { min-width: 0; }
.support-ops-dialog-card header h3 { margin: 0; color: var(--content-1); font-size: var(--text-xl); font-weight: var(--weight-black); }
.support-ops-dialog-card header small { display: block; margin-bottom: 2px; color: var(--content-3); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.support-ops-dialog-card header > button { width: var(--space-8); height: var(--space-8); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--content-2); cursor: pointer; }
.support-ops-dialog-card svg { width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.support-ops-dialog-icon { width: var(--space-10); height: var(--space-10); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface)); color: var(--cp-accent); }
.support-ops-dialog-icon .support-mia-icon { width: var(--space-6); height: var(--space-6); }
.support-ops-dialog-icon.is-yelp { background: color-mix(in srgb, var(--cp-danger) 9%, var(--surface)); color: var(--cp-danger); }
.support-ops-dialog-icon.is-unconfirmed { background: color-mix(in srgb, var(--cp-warning) 12%, var(--surface)); color: var(--cp-warning); }
.support-ops-dialog-icon.is-failed { background: var(--cp-danger-soft); color: var(--cp-danger); }
.support-ops-dialog-icon.is-confirmed { background: color-mix(in srgb, var(--cp-success) 11%, var(--surface)); color: var(--cp-success); }
.support-ops-dialog-card footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-1); }
.support-ops-dialog-card footer button { min-height: var(--space-10); padding: 0 var(--space-4); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); color: var(--content-1); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.support-ops-dialog-card footer button.is-primary { border-color: var(--cp-accent); background: var(--cp-accent); color: var(--cp-accent-content); }
.support-ops-dialog-card :is(button, input, textarea):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.support-ops-dialog-card input:focus,
.support-ops-dialog-card textarea:focus { outline: none; }

.support-policy-main-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface-2); }
.support-policy-main-row > span { display: grid; gap: var(--space-1); }
.support-policy-main-row strong { font-size: var(--text-sm); }
.support-policy-main-row small { color: var(--content-3); font-size: var(--text-xs); line-height: var(--leading-body); }
.support-policy-switch { min-width: calc(var(--space-10) * 2); min-height: var(--space-8); display: grid; grid-template-columns: var(--space-6) auto; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--border-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--content-2); font: inherit; cursor: pointer; }
.support-policy-switch span { width: var(--space-5); height: var(--space-5); border-radius: var(--radius-circle); background: var(--cp-gray-40); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-standard); }
.support-policy-switch em { font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-bold); }
.support-policy-switch.is-on { border-color: color-mix(in srgb, var(--cp-success) 40%, var(--border-1)); color: var(--cp-success); }
.support-policy-switch.is-on span { background: var(--cp-success); transform: translateX(var(--space-1)); }
.support-ops-policy-dialog fieldset,
.support-ops-close-dialog fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.support-ops-policy-dialog legend,
.support-ops-close-dialog legend { margin-bottom: var(--space-2); color: var(--content-1); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.support-ops-close-dialog legend small { color: var(--content-3); font-weight: var(--weight-regular); }
.support-policy-sla-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.support-policy-sla-options button { min-height: var(--space-10); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); color: var(--content-2); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.support-policy-sla-options button.is-active { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); }
.support-ops-policy-dialog fieldset > p { margin: var(--space-2) 0 0; color: var(--content-3); font-size: var(--text-xs); }
.support-policy-connection { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--cp-warning) 30%, var(--border-1)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--cp-warning) 6%, var(--surface)); }
.support-policy-connection > span { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-circle); background: var(--cp-warning); }
.support-policy-connection.is-ready { border-color: color-mix(in srgb, var(--cp-success) 30%, var(--border-1)); background: color-mix(in srgb, var(--cp-success) 6%, var(--surface)); }
.support-policy-connection.is-ready > span { background: var(--cp-success); }
.support-policy-connection div { display: grid; gap: 2px; }
.support-policy-connection strong { font-size: var(--text-sm); }
.support-policy-connection small { color: var(--content-3); font-size: var(--text-xs); }

.support-close-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.support-intent-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.support-close-options label,
.support-intent-options label { position: relative; cursor: pointer; }
.support-close-options input,
.support-intent-options input { position: absolute; opacity: 0; pointer-events: none; }
.support-close-options span { min-height: var(--space-10); display: flex; align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); color: var(--content-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.support-intent-options span { display: inline-flex; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-1); border-radius: var(--radius-pill); color: var(--content-2); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.support-close-options input:checked + span,
.support-intent-options input:checked + span { border-color: var(--cp-accent); background: var(--cp-accent-soft); color: var(--cp-accent); }
.support-close-options input:focus-visible + span,
.support-intent-options input:focus-visible + span { box-shadow: var(--focus-ring); }
.support-ops-dialog-field { display: grid; gap: var(--space-2); color: var(--content-1); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.support-ops-dialog-field > span small { color: var(--content-3); font-weight: var(--weight-regular); }
.support-ops-dialog-field :is(textarea, input) { width: 100%; padding: var(--space-3); border: 1px solid var(--field-filled-border); border-radius: var(--radius-md); background: var(--field-filled-surface); color: var(--content-1); font: inherit; font-size: var(--text-sm); }
.support-ops-dialog-field textarea { resize: vertical; }
.support-ops-check { display: flex; align-items: center; gap: var(--space-2); color: var(--content-1); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.support-ops-check input { width: var(--space-5); height: var(--space-5); accent-color: var(--cp-accent); }
.support-ops-check span { display: inline-flex; align-items: center; gap: var(--space-2); }
.support-ops-dialog-error { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--cp-danger-soft); color: var(--cp-danger); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.support-ops-dialog-error.hidden { display: none; }
.support-delivery-detail-note { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-2); color: var(--content-2); font-size: var(--text-sm); }

.support-ops-search { min-height: calc(var(--space-10) + var(--space-2)); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--field-empty-border); border-radius: var(--radius-md); background: var(--field-empty-surface); color: var(--content-3); }
.support-ops-search:focus-within { border-color: var(--cp-accent); background: var(--surface); box-shadow: var(--focus-ring); }
.support-ops-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--content-1); font: inherit; font-size: var(--text-sm); box-shadow: none; }
.support-ops-search input:focus { box-shadow: none; }
.support-ops-search-results { min-height: calc(var(--space-10) * 4); display: grid; align-content: start; gap: var(--space-2); }
.support-ops-search-results > p { margin: auto; color: var(--content-3); font-size: var(--text-sm); }
.support-ops-search-results > button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); color: var(--content-1); font: inherit; text-align: left; cursor: pointer; }
.support-ops-search-results > button:hover { border-color: var(--cp-accent); background: var(--cp-accent-soft); }
.support-ops-search-results > button > span:nth-child(2) { min-width: 0; display: grid; gap: var(--space-1); }
.support-ops-search-results strong { font-size: var(--text-sm); }
.support-ops-search-results small { overflow: hidden; color: var(--content-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .cp #support-center-page .support-channel-topbar-tools { width: 100%; }
  .cp #support-center-page .support-channel-policy-trigger { flex: 0 0 auto; }
  .cp #support-center-page .support-metrics-business-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp #support-center-page .support-metrics-business-strip > span:nth-child(2) { border-right: 0; }
  .cp #support-center-page .support-metrics-business-strip > span:nth-child(-n + 2) { border-bottom: 1px solid var(--border-1); }
}

@media (max-width: 620px) {
  .cp #support-center-page .support-channel-topbar-tools { align-items: stretch; flex-direction: column; }
  .cp #support-center-page .support-channel-policy-trigger { justify-content: center; }
  .cp #support-center-page .support-ops-choice,
  .support-close-options { grid-template-columns: 1fr; }
  .support-policy-sla-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-ops-dialog { width: calc(100vw - var(--space-4) * 2); max-height: 92dvh; }
  .support-ops-dialog-card { padding: var(--space-4); }
  .cp #support-center-page .support-metrics-business-strip { grid-template-columns: 1fr; }
  .cp #support-center-page .support-metrics-business-strip > span { border-right: 0; border-bottom: 1px solid var(--border-1); }
  .cp #support-center-page .support-metrics-business-strip > span:last-child { border-bottom: 0; }
}

/* Dialpad operations workspace. The provider influences the content, while the
   interaction model and visual language remain native to Compupod. */
.cp #support-center-page .support-dialpad-workspace {
  min-width: 0;
  background: var(--surface);
}

.cp #support-center-page .support-dialpad-topbar {
  min-height: calc(var(--space-10) + var(--space-6));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-dialpad-topbar > .support-dialpad-title-group {
  justify-self: start;
}

.cp #support-center-page .support-dialpad-topbar > .support-global-search {
  justify-self: center;
}

.cp #support-center-page .support-dialpad-topbar > :is(.support-channel-topbar-tools, .support-all-topbar-tools) {
  justify-self: end;
}

.cp #support-center-page .support-dialpad-title-group,
.cp #support-center-page .support-conversation-identity,
.cp #support-center-page .support-conversation-actions,
.cp #support-center-page .support-row-title,
.cp #support-center-page .support-call-meta,
.cp #support-center-page .support-section-heading,
.cp #support-center-page .support-transcript-head,
.cp #support-center-page .support-transcript-toolbar {
  display: flex;
  align-items: center;
}

.cp #support-center-page .support-dialpad-title-group {
  min-width: 0;
  gap: var(--space-3);
}

.cp #support-center-page .support-dialpad-title-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-3);
  row-gap: 2px;
}

.cp #support-center-page .support-dialpad-title-copy .support-center-eyebrow {
  line-height: 1;
}

.cp #support-center-page .support-dialpad-header-logo {
  box-sizing: border-box;
  width: var(--space-8);
  height: var(--space-8);
  display: block;
  flex: 0 0 auto;
  padding: 0;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 22%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-conversation-identity {
  min-width: 0;
  gap: var(--space-2);
}

.cp #support-center-page .support-dialpad-title-group h2 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-global-search,
.cp #support-center-page .support-transcript-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
  color: var(--content-3);
}

.cp #support-center-page .support-global-search {
  width: min(34vw, calc(var(--space-10) * 10));
  padding: 0 var(--space-3);
}

.cp #support-center-page .support-global-search:focus-within,
.cp #support-center-page .support-transcript-search:focus-within {
  border-color: var(--cp-accent);
  background: var(--field-filled-surface);
  box-shadow: var(--focus-ring);
}

.cp #support-center-page .support-global-search svg,
.cp #support-center-page .support-transcript-search svg,
.cp #support-center-page .support-icon-button svg,
.cp #support-center-page .support-mobile-back svg,
.cp #support-center-page .support-header-action svg,
.cp #support-center-page .support-event-avatar svg,
.cp #support-center-page .support-call-icon svg,
.cp #support-center-page .support-transcript-button svg,
.cp #support-center-page .support-system-event svg,
.cp #support-center-page .support-ticket-card svg,
.cp #support-center-page .support-profile-primary-actions svg,
.cp #support-center-page .support-link-state svg,
.cp #support-center-page .support-open-customer svg,
.cp #support-center-page .support-inline-back svg,
.cp #support-center-page .support-audio-preview svg,
.cp #support-center-page .support-transcript-summary svg {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.cp #support-center-page .support-global-search input,
.cp #support-center-page .support-transcript-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--content-1);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-global-search input {
  min-height: calc(var(--space-8) + var(--space-1));
}

/* The field shell owns the focus treatment. Global form rules otherwise draw
   a second outline around the nested input and make one control look like two. */
.cp #support-center-page :is(.support-global-search, .support-transcript-search) input:is(:focus, :focus-visible) {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

.cp #support-center-page :is(.support-global-search, .support-transcript-search) input::placeholder,
.cp #support-center-page .support-composer textarea::placeholder {
  color: var(--content-placeholder);
}

.cp #support-center-page .support-dialpad-shell {
  position: relative;
  min-height: calc(var(--space-10) * 11);
  /* Fills the viewport below the inbox topbar. app-support-center-shared.js
     measures --support-shell-top (topbars wrap, banners appear); the fallback
     matches the usual desktop header. */
  height: max(calc(var(--space-10) * 11), calc(100dvh - var(--support-shell-top, calc(var(--space-10) * 5))));
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 6.5), .82fr) minmax(calc(var(--space-10) * 9.5), 1.5fr) minmax(calc(var(--space-10) * 6.7), .9fr);
  background: var(--surface);
}

.cp #support-center-page .support-yelp-workspace {
  --support-provider-accent: var(--cp-danger);
}

.cp #support-center-page .support-yelp-header-logo {
  box-sizing: border-box;
  width: calc(var(--space-8) * 1.55);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  padding: var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--support-provider-accent) 30%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--cp-gray-90);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-yelp-header-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.cp #support-center-page .support-yelp-workspace .support-inbox-tabs button.is-active {
  border-bottom-color: var(--support-provider-accent);
  color: var(--support-provider-accent);
}

.cp #support-center-page .support-yelp-workspace .support-conversation-row.is-selected {
  border-left-color: var(--support-provider-accent);
  background: color-mix(in srgb, var(--support-provider-accent) 8%, var(--surface));
}

/* Unified operations inbox. Provider marks identify transport while selection,
   focus, and actions continue to use the Compupod design language. */
.cp #support-center-page .support-all-header-mark {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-all-header-mark svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cp #support-center-page .support-all-topbar-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.cp #support-center-page .support-source-switcher {
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #support-center-page .support-source-switcher button {
  min-height: calc(var(--space-10) - var(--space-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-source-switcher button:hover { color: var(--content-1); }

.cp #support-center-page .support-source-switcher button:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 1px;
}

.cp #support-center-page .support-source-switcher button.is-active {
  background: var(--surface);
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-source-switcher img {
  width: var(--space-4);
  height: var(--space-4);
  display: block;
  object-fit: contain;
}

.cp #support-center-page .support-all-shell {
  grid-template-columns: minmax(calc(var(--space-10) * 7), .9fr) minmax(calc(var(--space-10) * 9), 1.45fr) minmax(calc(var(--space-10) * 6.5), .85fr);
}

.cp #support-center-page .support-all-connection-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--cp-warning) 24%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 8%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-all-connection-status.hidden { display: none; }

.cp #support-center-page .support-all-connection-status > span:first-child {
  width: var(--space-6);
  height: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-warning) 16%, var(--surface));
  color: var(--cp-warning);
}

.cp #support-center-page .support-all-connection-status svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cp #support-center-page .support-all-connection-status a {
  grid-column: 2;
  justify-self: start;
  color: var(--cp-accent);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.cp #support-center-page .support-all-workspace .support-header-action[data-support-all-action="open-profile"] {
  display: none;
}

.cp #support-center-page .support-all-conversation-row.is-selected {
  border-left-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
}

.cp #support-center-page :is(.support-all-row-context, .support-all-header-context, .support-all-profile-source, .support-all-composer-context) {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cp #support-center-page .support-all-row-context {
  min-width: 0;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-all-row-context .support-wait-label { margin-left: auto; }

.cp #support-center-page .support-all-inline-mark {
  width: var(--space-4);
  height: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--surface);
}

.cp #support-center-page .support-all-inline-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.cp #support-center-page .support-all-inline-mark.is-yelp {
  width: calc(var(--space-4) + var(--space-2));
  padding: 1px;
  background: var(--cp-gray-90);
}

.cp #support-center-page .support-all-header-context { white-space: nowrap; }

.cp #support-center-page .support-all-workspace .support-message-event.is-outgoing .support-message-bubble {
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #support-center-page .support-all-detail-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 28%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-danger) 7%, var(--surface));
  color: var(--content-1);
}

.cp #support-center-page .support-all-detail-error > span:first-child {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-danger) 13%, var(--surface));
  color: var(--cp-danger);
}

.cp #support-center-page .support-all-detail-error svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.cp #support-center-page .support-all-detail-error > span:nth-child(2) {
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-all-detail-error strong { font-size: var(--text-sm); }
.cp #support-center-page .support-all-detail-error small { color: var(--content-2); font-size: var(--text-xs); }

.cp #support-center-page .support-all-detail-error button {
  min-height: var(--space-8);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page .support-all-detail-error button:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
.cp #support-center-page .support-all-detail-error button:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

.cp #support-center-page .support-all-composer { gap: var(--space-1); }

.cp #support-center-page .support-all-feedback {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-all-feedback.hidden { display: none; }

.cp #support-center-page .support-all-feedback.is-success {
  border-color: color-mix(in srgb, var(--cp-success) 32%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 8%, var(--surface));
  color: var(--cp-success);
}

/* Dialpad can't text this number (landline / international): stays above the composer. */
.cp #support-center-page .support-all-feedback.is-warning {
  border-color: color-mix(in srgb, var(--cp-warning) 40%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
}

.cp #support-center-page .support-all-feedback.is-error {
  border-color: color-mix(in srgb, var(--cp-danger) 32%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger) 8%, var(--surface));
  color: var(--cp-danger);
}

.cp #support-center-page .support-all-composer .support-composer-row {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.cp #support-center-page .support-all-composer-context {
  min-height: var(--space-5);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-all-composer-context em {
  margin-left: auto;
  color: var(--cp-warning);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-all-profile-source {
  justify-content: center;
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-all-request > strong {
  display: block;
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-all-request > p {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-all-request dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.cp #support-center-page .support-all-request dl > div {
  display: grid;
  grid-template-columns: calc(var(--space-10) * 1.5) minmax(0, 1fr);
  gap: var(--space-2);
}

.cp #support-center-page .support-all-request :is(dt, dd) {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-all-request dt { color: var(--content-3); }
.cp #support-center-page .support-all-request dd { color: var(--content-1); font-weight: var(--weight-medium); }

.cp #support-center-page .support-all-related > button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 0;
  border-top: 1px solid var(--border-1);
  background: transparent;
  color: var(--content-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cp #support-center-page .support-all-related > button:hover { background: var(--surface-hover); }

.cp #support-center-page .support-all-related > button:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: -2px;
}

.cp #support-center-page .support-all-related > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cp #support-center-page .support-all-related :is(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-all-related strong { color: var(--content-1); font-size: var(--text-xs); }
.cp #support-center-page .support-all-related small { color: var(--content-3); font-size: var(--text-xs); }

.cp #support-center-page .support-all-related svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.cp #support-center-page .support-all-empty-links { display: flex; gap: var(--space-2); }
.cp #support-center-page .support-human-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border-1); font-size: var(--text-xs); }
.cp #support-center-page .support-all-workspace[data-human-support="true"] .support-inbox-pane { display: flex; flex-direction: column; overflow: hidden; }
.cp #support-center-page .support-all-workspace[data-human-support="true"] .support-inbox-list { flex: 1; min-height: 0; overflow: auto; }
.cp #support-center-page .support-human-pagination button { border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); color: var(--content-1); padding: var(--space-2) var(--space-3); cursor: pointer; }
.cp #support-center-page .support-human-pagination button:disabled { color: var(--content-3); cursor: default; }
.cp #support-center-page [data-support-inbox-mode-link] { color: var(--cp-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); text-decoration: none; }
.cp #support-center-page .support-human-pagination button:focus-visible,
.cp #support-center-page [data-support-inbox-mode-link]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cp #support-center-page .support-all-empty-links a { color: var(--cp-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); text-decoration: none; }

.cp #support-center-page .support-all-workspace.is-loading [data-support-all-action="refresh"] svg {
  animation: support-all-refresh-spin var(--dur-slow) linear infinite;
}

@keyframes support-all-refresh-spin {
  to { transform: rotate(360deg); }
}

.cp #support-center-page .support-consumer-photo {
  overflow: hidden;
}

.cp #support-center-page .support-consumer-photo img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.cp #support-center-page .support-message-attachment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-message-attachment svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.cp #support-center-page .support-message-photo {
  position: relative;
  width: min(calc(var(--space-10) * 6.5), 42vw);
  max-width: 100%;
  display: grid;
  align-items: start;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: zoom-in;
}

.cp #support-center-page .support-message-photo img {
  width: 100%;
  height: auto;
  max-height: calc(var(--space-10) * 6.5);
  display: block;
  object-fit: contain;
  background: var(--surface-3);
}

.cp #support-center-page .support-message-photo > span {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cp-gray-90) 78%, transparent);
  color: var(--cp-gray-00);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.cp #support-center-page .support-message-photo:hover > span { background: var(--cp-gray-90); }
.cp #support-center-page .support-message-photo:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.support-media-viewer-open { overflow: hidden; }

.cp #support-center-page .support-media-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.cp #support-center-page .support-media-viewer.hidden { display: none; }

.cp #support-center-page .support-media-viewer-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cp-gray-90) 76%, transparent);
  backdrop-filter: blur(3px);
  animation: cp-overlay-in var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-media-viewer-dialog {
  position: relative;
  width: min(68rem, calc(100vw - var(--space-10)));
  max-height: calc(100dvh - var(--space-10));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
  animation: cp-card-in var(--dur-base) var(--ease-out);
}

.cp #support-center-page .support-media-viewer-dialog > header,
.cp #support-center-page .support-media-viewer-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.cp #support-center-page .support-media-viewer-dialog > header { border-bottom: 1px solid var(--border-1); }
.cp #support-center-page .support-media-viewer-dialog > footer { border-top: 1px solid var(--border-1); }
.cp #support-center-page .support-media-viewer-dialog h3 { margin: 0; font-size: var(--text-lg); }
.cp #support-center-page .support-media-viewer-dialog small,
.cp #support-center-page .support-media-viewer-dialog footer > span { color: var(--content-3); font-size: var(--text-xs); }

.cp #support-center-page .support-media-viewer-dialog button,
.cp #support-center-page .support-media-viewer-dialog footer a {
  min-width: var(--space-10);
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.cp #support-center-page .support-media-viewer-dialog header button { padding: 0; }
.cp #support-center-page .support-media-viewer-dialog button:hover,
.cp #support-center-page .support-media-viewer-dialog footer a:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
.cp #support-center-page .support-media-viewer-dialog :is(button, a):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cp #support-center-page .support-media-viewer-dialog svg { width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: 1.8; }

.cp #support-center-page .support-media-viewer-stage {
  position: relative;
  min-height: min(62vh, 34rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--cp-gray-90);
}

.cp #support-center-page .support-media-viewer-stage img {
  max-width: 100%;
  max-height: calc(100dvh - 11rem);
  display: block;
  object-fit: contain;
}

.cp #support-center-page .support-media-viewer-stage p {
  position: absolute;
  inset: auto;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-gray-90) 82%, transparent);
  color: var(--cp-gray-00);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

@media (max-width: 640px) {
  .cp #support-center-page .support-message-photo { width: min(calc(var(--space-10) * 5.5), 64vw); }
  .cp #support-center-page .support-media-viewer { padding: var(--space-2); }
  .cp #support-center-page .support-media-viewer-dialog { width: calc(100vw - var(--space-4)); max-height: calc(100dvh - var(--space-4)); }
  .cp #support-center-page .support-media-viewer-stage { min-height: 60vh; padding: var(--space-2); }
  .cp #support-center-page .support-media-viewer-dialog footer > span { display: none; }
  .cp #support-center-page .support-media-viewer-dialog footer { justify-content: flex-end; }
}

.cp #support-center-page .support-yelp-workspace .support-message-event.is-outgoing .support-message-bubble {
  background: var(--support-provider-accent);
  color: var(--content-inv);
}

.cp #support-center-page .support-yelp-workspace .support-bot-badge {
  background: color-mix(in srgb, var(--support-provider-accent) 12%, var(--surface));
  color: var(--support-provider-accent);
}

.cp #support-center-page .support-yelp-delivery {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.cp #support-center-page .support-yelp-delivery svg {
  width: var(--space-3);
  height: var(--space-3);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cp #support-center-page .support-yelp-delivery.is-sent {
  color: var(--cp-success);
}

.cp #support-center-page .support-yelp-delivery.is-failed {
  color: var(--cp-danger);
}

.cp #support-center-page .support-yelp-delivery.is-pending {
  color: var(--cp-accent);
}

.cp #support-center-page .support-yelp-delivery.is-unconfirmed {
  color: var(--cp-warning);
}

.cp #support-center-page .support-delivery-status-button {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.cp #support-center-page .support-delivery-status-button:hover span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp #support-center-page .support-delivery-status-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp #support-center-page .support-delivery-review-button {
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 34%, var(--border-1));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent) 7%, var(--surface));
  color: var(--cp-accent);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-delivery-review-button:hover {
  background: color-mix(in srgb, var(--cp-accent) 13%, var(--surface));
  transform: translateY(-1px);
}

.cp #support-center-page .support-delivery-review-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp #support-center-page :is(.support-inbox-pane, .support-conversation-pane, .support-profile-pane) {
  min-width: 0;
  min-height: 0;
  background: var(--surface);
}

.cp #support-center-page .support-inbox-pane,
.cp #support-center-page .support-profile-pane {
  overflow: auto;
}

.cp #support-center-page .support-inbox-pane {
  border-right: 1px solid var(--border-1);
}

.cp #support-center-page .support-profile-pane {
  border-left: 1px solid var(--border-1);
  background: var(--surface-2);
}

.cp #support-center-page .support-pane-heading,
.cp #support-center-page .support-profile-mobile-head {
  min-height: calc(var(--space-10) * 1.65);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

.cp #support-center-page .support-pane-heading h3 {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}

/* Filters and sort share one row; on a narrow queue the tools wrap under the
   filters instead of overlapping them. */
.cp #support-center-page .support-queue-bar {
  min-height: 0;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  row-gap: 0;
  padding: 0 var(--space-2) 0 0;
}

.cp #support-center-page .support-queue-bar .support-pane-tools {
  margin-left: auto;
}

.cp #support-center-page .support-queue-bar .support-inbox-tabs {
  min-width: 0;
  min-height: calc(var(--space-10) + var(--space-1));
  flex: 1 0 auto;
  display: flex;
  padding-inline: var(--space-2) 0;
  border-bottom: 0;
}

.cp #support-center-page .support-queue-bar .support-inbox-tabs button {
  padding-inline: calc(var(--space-2) - 2px);
}

.cp #support-center-page .support-queue-bar .support-pane-tools {
  flex: 0 0 auto;
  gap: var(--space-1);
}

.cp #support-center-page .support-queue-bar :is(.support-sort-trigger, .support-icon-button) {
  height: var(--space-8);
}

/* Sort is icon-only here; its tooltip and menu show the current order. */
.cp #support-center-page .support-queue-bar .support-sort-trigger {
  width: var(--space-8);
  min-width: 0;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

.cp #support-center-page .support-queue-bar .support-sort-trigger :is([data-support-sort-label], [data-support-all-sort-label], .support-sort-chevron) {
  display: none;
}

.cp #support-center-page .support-queue-bar .support-icon-button {
  width: var(--space-8);
}

.cp #support-center-page .support-tab-count {
  min-width: calc(var(--space-4) + 2px);
  height: calc(var(--space-4) + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  font-size: 11px;
  font-weight: var(--weight-black);
  line-height: 1;
}

.cp #support-center-page .support-tab-count[hidden] {
  display: none;
}

.cp #support-center-page .support-pane-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.cp #support-center-page .support-sort-menu {
  position: relative;
  min-width: 0;
}

.cp #support-center-page .support-sort-trigger {
  min-width: calc(var(--space-10) * 2.8);
  height: var(--space-10);
  display: grid;
  grid-template-columns: var(--space-4) minmax(0, 1fr) var(--space-3);
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-2);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-sort-trigger:hover,
.cp #support-center-page .support-sort-trigger.is-open {
  border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 5%, var(--surface));
}

.cp #support-center-page .support-sort-trigger:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

.cp #support-center-page :is(.support-sort-trigger, .support-sort-options button) svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cp #support-center-page .support-sort-trigger .support-sort-chevron {
  width: var(--space-3);
  height: var(--space-3);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-sort-trigger.is-open .support-sort-chevron {
  transform: rotate(180deg);
}

.cp #support-center-page .support-sort-options {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--space-2));
  right: 0;
  width: calc(var(--space-10) * 3.8);
  display: grid;
  gap: 2px;
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: support-sort-menu-in var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-sort-options.hidden {
  display: none;
}

.cp #support-center-page .support-sort-options button {
  min-height: calc(var(--space-10) - var(--space-1));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-4);
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.cp #support-center-page .support-sort-options button:hover,
.cp #support-center-page .support-sort-options button:focus-visible,
.cp #support-center-page .support-sort-options button.is-selected {
  outline: 0;
  background: var(--cp-accent-soft);
  color: var(--content-1);
}

.cp #support-center-page .support-sort-options button svg {
  opacity: 0;
  color: var(--cp-accent);
}

.cp #support-center-page .support-sort-options button.is-selected svg {
  opacity: 1;
}

@keyframes support-sort-menu-in {
  from { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}

.cp #support-center-page .support-pane-kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cp #support-center-page .support-icon-button,
.cp #support-center-page .support-mobile-back {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-2);
  cursor: pointer;
}

.cp #support-center-page :is(.support-icon-button, .support-mobile-back):hover {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
}

.cp #support-center-page .support-inbox-tabs {
  min-height: calc(var(--space-10) + var(--space-2));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

.cp #support-center-page .support-inbox-tabs button,
.cp #support-center-page .support-transcript-tabs button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: var(--space-3) var(--space-2) calc(var(--space-3) - 2px);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page :is(.support-inbox-tabs, .support-transcript-tabs) button:hover {
  color: var(--content-1);
}

.cp #support-center-page :is(.support-inbox-tabs, .support-transcript-tabs) button.is-active {
  border-bottom-color: var(--cp-accent);
  color: var(--cp-accent);
}

.cp #support-center-page .support-inbox-list {
  overflow: auto;
}

.cp #support-center-page .support-conversation-row {
  position: relative;
  width: 100%;
  min-height: calc(var(--space-10) * 1.65);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  transition: background var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard);
}

.cp #support-center-page .support-conversation-row:hover {
  background: var(--surface-hover);
}

.cp #support-center-page .support-conversation-row.is-selected {
  border-left-color: var(--cp-accent);
  background: var(--cp-accent-soft);
}

.cp #support-center-page .support-conversation-select {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cp #support-center-page .support-conversation-select:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

.cp #support-center-page .support-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
}

.cp #support-center-page :is(.support-row-avatar, .support-header-avatar, .support-event-avatar, .support-profile-avatar) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 15%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 78%, var(--content-1));
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-marble-avatar {
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--surface) 65%, var(--border-1));
  background: transparent;
  color: transparent;
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-marble-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp #support-center-page .support-row-avatar {
  width: var(--space-8);
  height: var(--space-8);
  font-size: var(--text-xs);
}

.cp #support-center-page :is(.support-row-avatar, .support-header-avatar).is-unknown {
  background: var(--surface-3);
  color: var(--content-2);
}

.cp #support-center-page .support-row-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
}

.cp #support-center-page .support-row-detail {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.cp #support-center-page .support-row-detail .support-row-preview {
  flex: 1 1 auto;
}

.cp #support-center-page .support-row-title {
  min-width: 0;
  justify-content: space-between;
  gap: var(--space-2);
}

.cp #support-center-page .support-row-title strong {
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-row-title time,
.cp #support-center-page .support-message-event time,
.cp #support-center-page .support-call-event time,
.cp #support-center-page .support-system-event time {
  color: var(--content-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.cp #support-center-page .support-row-preview {
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-wait-label {
  width: fit-content;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cp #support-center-page .support-wait-label.is-overdue {
  color: var(--cp-danger);
}

.cp #support-center-page .support-unread-count {
  min-width: var(--space-5);
  height: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-unread-count.is-dot {
  min-width: var(--space-2);
  width: var(--space-2);
  height: var(--space-2);
  padding: 0;
}

.cp #support-center-page .support-reminder-toggle {
  width: calc(var(--space-8) - var(--space-1));
  height: calc(var(--space-8) - var(--space-1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--content-3);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-reminder-toggle svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.cp #support-center-page .support-reminder-toggle:hover,
.cp #support-center-page .support-reminder-toggle:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
  background: var(--surface);
  color: color-mix(in srgb, var(--cp-accent) 72%, var(--content-1));
  transform: translateY(-1px);
}

.cp #support-center-page .support-reminder-toggle.is-active {
  border-color: transparent;
  background: color-mix(in srgb, var(--cp-accent) 72%, var(--content-1));
  color: var(--content-inv);
  box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
  .cp #support-center-page .support-reminder-toggle:not(.is-active) {
    opacity: 0;
  }

  .cp #support-center-page .support-conversation-row:is(:hover, :focus-within) .support-reminder-toggle {
    opacity: 1;
  }
}

.cp #support-center-page .support-reminder-toggle.is-active svg path:last-child {
  fill: currentColor;
}

.cp #support-center-page .support-reminder-toggle:active {
  transform: scale(.94);
}

.cp #support-center-page .support-list-empty,
.cp #support-center-page .support-center-empty,
.cp #support-center-page .support-profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  color: var(--content-3);
  text-align: center;
}

.cp #support-center-page .support-list-empty svg {
  width: var(--space-8);
  height: var(--space-8);
  fill: none;
  stroke: var(--content-3);
  stroke-width: 1.5;
}

.cp #support-center-page .support-list-empty strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-list-empty span {
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-older-conversations {
  display: flex;
  justify-content: center;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.cp #support-center-page .support-show-older {
  width: 100%;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 45%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body);
  cursor: pointer;
}

.cp #support-center-page .support-show-older:hover {
  background: color-mix(in srgb, var(--cp-accent) 16%, var(--surface));
}

.cp #support-center-page .support-show-older:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

.cp #support-center-page .support-conversation-pane {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.cp #support-center-page .support-mia-proposal-slot.hidden { display: none; }

.cp #support-center-page .support-mia-proposal-slot {
  min-width: 0;
  max-height: min(38dvh, 19rem);
  overflow: auto;
  padding: var(--space-2) var(--space-4) 0;
  background: var(--surface);
  color: var(--content-1);
}

@media (max-width: 700px) {
  .cp #support-center-page .support-mia-proposal-slot {
    max-height: min(15dvh, 6rem);
  }
}

.cp #support-center-page .support-mia-proposal {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 40%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 6%, var(--surface));
}

.cp #support-center-page .support-mia-proposal.is-collapsed {
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
}

.cp #support-center-page .support-mia-proposal.is-reviewed {
  border-color: var(--border-1);
  background: var(--surface-2);
}

.cp #support-center-page .support-mia-proposal-head,
.cp #support-center-page .support-mia-proposal-actions,
.cp #support-center-page .support-mia-review-dialog footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cp #support-center-page .support-mia-proposal-head { flex-wrap: nowrap; }
.cp #support-center-page .support-mia-proposal-head strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-mia-proposal-mark {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--cp-accent);
}

.cp #support-center-page :is(.support-mia-proposal-mark, .support-mia-proposal-toggle) svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.cp #support-center-page .support-mia-proposal-state {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.cp #support-center-page .support-mia-proposal-state:is(.is-failed, .is-undelivered) {
  background: color-mix(in srgb, var(--cp-danger) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-danger) 70%, var(--content-1));
}

.cp #support-center-page .support-mia-proposal-state:is(.is-sent, .is-delivered) {
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: var(--cp-success);
}

.cp #support-center-page .support-mia-proposal-when {
  margin-left: auto;
  color: var(--content-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.cp #support-center-page .support-mia-proposal-toggle {
  width: calc(var(--space-6) + 2px);
  height: calc(var(--space-6) + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--content-3);
  cursor: pointer;
}

.cp #support-center-page .support-mia-proposal-head > strong + .support-mia-proposal-state + .support-mia-proposal-toggle {
  margin-left: auto;
}

.cp #support-center-page .support-mia-proposal-toggle svg {
  transition: transform var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-mia-proposal.is-collapsed .support-mia-proposal-toggle svg {
  transform: rotate(-90deg);
}

.cp #support-center-page .support-mia-proposal-toggle:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #support-center-page .support-mia-proposal-toggle:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 1px;
}

.cp #support-center-page .support-mia-proposal-summary {
  margin: 0;
  overflow: hidden;
  color: var(--content-2);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-mia-proposal-copy,
.cp #support-center-page .support-mia-proposal-meta,
.cp #support-center-page .support-mia-proposal-note { margin: 0; }

.cp #support-center-page .support-mia-proposal-copy {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--leading-body);
}

.cp #support-center-page .support-mia-proposal-decision {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-inline-start: 3px solid var(--cp-accent);
  background: var(--surface);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-mia-proposal-decision p { margin: 0; }
.cp #support-center-page .support-mia-proposal-decision label { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--weight-bold); }
.cp #support-center-page .support-mia-proposal-decision input {
  flex: 0 0 var(--space-5);
  width: var(--space-5);
  height: var(--space-5);
  min-width: var(--space-5);
  min-height: var(--space-5);
  margin: 0;
  padding: 0;
  accent-color: var(--cp-accent);
}

.cp #support-center-page .support-mia-proposal-meta,
.cp #support-center-page .support-mia-proposal-note {
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-mia-proposal-note.is-error { color: color-mix(in srgb, var(--cp-danger) 65%, var(--content-1)); }

.cp #support-center-page .support-mia-proposal-actions {
  justify-content: flex-end;
}

.cp #support-center-page .support-mia-proposal-actions button,
.cp #support-center-page .support-mia-review-dialog button {
  min-height: var(--space-8);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page .support-mia-proposal-actions button.is-primary,
.cp #support-center-page .support-mia-review-dialog button.is-primary {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-gray-90);
}

.cp #support-center-page .support-mia-proposal-actions button:disabled,
.cp #support-center-page .support-mia-review-dialog button:disabled { opacity: .55; cursor: not-allowed; }

.cp #support-center-page .support-mia-proposal-actions button:focus-visible,
.cp #support-center-page .support-mia-review-dialog :is(button, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cp #support-center-page .support-mia-review-dialog {
  width: min(36rem, calc(100vw - var(--space-4)));
  max-height: calc(100dvh - var(--space-4));
  overflow: auto;
  padding: var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}

.cp #support-center-page .support-mia-review-dialog::backdrop { background: color-mix(in srgb, var(--cp-gray-90) 62%, transparent); }
.cp #support-center-page .support-mia-review-dialog h3 { margin: 0; }
.cp #support-center-page .support-mia-review-dialog p { color: var(--content-2); }
.cp #support-center-page .support-mia-review-dialog form,
.cp #support-center-page .support-mia-review-dialog label { display: grid; gap: var(--space-2); }
.cp #support-center-page .support-mia-review-dialog form { gap: var(--space-4); }
.cp #support-center-page .support-mia-review-dialog label { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.cp #support-center-page .support-mia-review-dialog textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
  resize: vertical;
}
.cp #support-center-page .support-mia-review-dialog footer { justify-content: flex-end; }

.cp #support-center-page .support-drop-overlay {
  position: absolute;
  z-index: var(--z-dropdown);
  inset: var(--space-3);
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  border: 2px dashed color-mix(in srgb, var(--cp-accent) 70%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--content-2);
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
  backdrop-filter: blur(12px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    visibility 0s linear var(--dur-fast);
}

.cp #support-center-page .support-conversation-pane.is-dragging .support-drop-overlay {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}

.cp #support-center-page .support-drop-overlay-icon {
  width: calc(var(--space-10) * 1.5);
  height: calc(var(--space-10) * 1.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: var(--cp-accent);
  box-shadow: var(--shadow-md);
}

.cp #support-center-page .support-conversation-pane.is-dragging .support-drop-overlay-icon {
  animation: support-drop-ready 1.15s var(--ease-standard) infinite alternate;
}

.cp #support-center-page .support-drop-overlay-icon svg {
  width: var(--space-6);
  height: var(--space-6);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cp #support-center-page .support-drop-overlay strong {
  color: var(--content-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-drop-overlay small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

@keyframes support-drop-ready {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(calc(-1 * var(--space-1))) scale(1.04); }
}

.cp #support-center-page .support-conversation-header {
  min-height: calc(var(--space-10) + var(--space-5));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-mobile-back {
  display: none;
}

.cp #support-center-page .support-header-avatar {
  width: var(--space-8);
  height: var(--space-8);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-header-name {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cp #support-center-page .support-header-name strong {
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-header-name small {
  overflow: hidden;
  color: var(--content-3);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-conversation-actions {
  flex: 0 0 auto;
  gap: var(--space-2);
}

.cp #support-center-page .support-conversation-ai {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.cp #support-center-page .support-conversation-ai.is-active {
  border-color: color-mix(in srgb, var(--cp-accent) 34%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 7%, var(--surface));
}

.cp #support-center-page .support-conversation-ai.is-pending {
  border-color: color-mix(in srgb, var(--cp-warning) 34%, var(--border-1));
}

.cp #support-center-page .support-conversation-ai-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.cp #support-center-page .support-conversation-ai-label svg,
.cp #support-center-page .support-conversation-ai-default svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Static Mia face: pink body and two eyes, matching Chat without animation. */
.cp #support-center-page .support-mia-icon {
  width: var(--space-4);
  height: var(--space-4);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  vertical-align: middle;
}

.cp #support-center-page .support-mia-icon[data-size="medium"] {
  width: var(--space-8);
  height: var(--space-8);
}

.cp #support-center-page .support-mia-icon-body {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 38%;
  background: #e5488d;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #000 12%, transparent);
}

.cp #support-center-page .support-mia-icon-eyes {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 18%;
}

.cp #support-center-page .support-mia-icon-eyes i {
  display: block;
  width: 13%;
  height: 30%;
  border-radius: 40%;
  background: #fff;
  transform-origin: center;
}

.cp #support-center-page .support-mia-icon-eyes i:first-child { rotate: -8deg; }
.cp #support-center-page .support-mia-icon-eyes i:last-child { rotate: 8deg; }

.cp #support-center-page .support-event-avatar.is-mia,
.cp #support-center-page .support-system-event .support-mia-icon {
  width: var(--space-8);
  height: var(--space-8);
}

.cp #support-center-page .support-event-avatar.is-mia {
  display: inline-grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
}

.cp #support-center-page .support-event-avatar.is-mia .support-mia-icon {
  width: var(--space-8);
  height: var(--space-8);
}

.cp #support-center-page .support-conversation-ai-switch {
  width: var(--space-10);
  height: var(--space-6);
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.cp #support-center-page .support-conversation-ai-switch > span {
  width: var(--space-4);
  height: var(--space-4);
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  border-radius: var(--radius-circle);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}

.cp #support-center-page .support-conversation-ai-switch[aria-checked="true"] {
  background: var(--cp-accent);
}

.cp #support-center-page .support-conversation-ai.is-pending .support-conversation-ai-switch[aria-checked="true"] {
  background: var(--cp-warning);
}

.cp #support-center-page .support-conversation-ai-switch[aria-checked="true"] > span {
  transform: translateX(var(--space-4));
}

.cp #support-center-page .support-conversation-ai-switch:disabled {
  opacity: .55;
  cursor: wait;
}

.cp #support-center-page :is(.support-conversation-ai-switch, .support-conversation-ai-default):focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

.cp #support-center-page .support-conversation-ai-default {
  width: calc(var(--space-6) + var(--space-1));
  height: calc(var(--space-6) + var(--space-1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--content-3);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.cp #support-center-page .support-conversation-ai-default:hover {
  background: var(--surface-3);
  color: var(--cp-accent);
  transform: rotate(-18deg);
}

.cp #support-center-page .support-header-action,
.cp #support-center-page .support-transcript-button,
.cp #support-center-page .support-inline-back,
.cp #support-center-page .support-open-customer {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page :is(.support-header-action, .support-transcript-button, .support-inline-back, .support-open-customer):not(:disabled):hover {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
}

/* "Mark handled" is the one decision this header asks for. */
.cp #support-center-page .support-header-action[data-support-ops-handled] {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #support-center-page .support-header-action[data-support-ops-handled]:not(:disabled):hover {
  border-color: var(--cp-accent-hover);
  background: var(--cp-accent-hover);
  color: var(--cp-accent-content);
}

.cp #support-center-page .support-header-action:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.cp #support-center-page .support-header-action[data-support-action="open-profile"] {
  display: none;
}

.cp #support-center-page .support-conversation-placeholder {
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-conversation-placeholder strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-conversation-placeholder span {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-conversation-scroll {
  min-height: 0;
  overflow: auto;
  background: var(--surface-2);
}

.cp #support-center-page .support-preview-action-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 9%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-profile-primary-actions button,
.cp #support-center-page .support-link-search button {
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page :is(.support-profile-primary-actions, .support-link-search) button:hover {
  border-color: var(--cp-accent);
  color: var(--cp-accent);
}

.cp #support-center-page .support-profile-primary-actions button.is-primary,
.cp #support-center-page .support-link-search button {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #support-center-page .support-timeline {
  max-width: none;
  min-height: 100%;
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-8);
}

.cp #support-center-page .support-date-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-date-divider::before,
.cp #support-center-page .support-date-divider::after {
  height: 1px;
  flex: 1;
  background: var(--border-1);
  content: "";
}

.cp #support-center-page .support-history-loader {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--content-3);
  text-align: center;
}

.cp #support-center-page .support-history-loader .support-inline-back {
  border-color: var(--border-2);
  background: var(--surface);
}

.cp #support-center-page .support-history-loader small {
  max-width: 34rem;
  color: var(--danger);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-message-event {
  display: flex;
  justify-content: flex-start;
  padding: var(--space-2) 0;
}

.cp #support-center-page .support-message-event.is-outgoing {
  justify-content: flex-end;
}

.cp #support-center-page .support-message-cluster {
  max-width: 78%;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.cp #support-center-page .support-message-event.is-outgoing .support-message-cluster {
  flex-direction: row-reverse;
}

.cp #support-center-page .support-message-stack {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-message-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  background: var(--surface-3);
  color: var(--content-1);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-message-event.is-outgoing .support-message-bubble {
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}

.cp #support-center-page .support-event-avatar {
  width: var(--space-8);
  height: var(--space-8);
  margin-top: var(--space-1);
  font-size: 10px;
}

.cp #support-center-page .support-employee-avatar {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--cp-accent) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 78%, var(--content-1));
}

.cp #support-center-page .support-employee-avatar > span {
  font-size: 10px;
  font-weight: var(--weight-black);
  line-height: 1;
}

.cp #support-center-page .support-employee-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.cp #support-center-page .support-message-meta,
.cp #support-center-page .support-call-event header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cp #support-center-page .support-message-meta {
  padding: 0 var(--space-1);
}

.cp #support-center-page .support-message-event.is-outgoing .support-message-meta {
  justify-content: flex-end;
}

.cp #support-center-page .support-message-meta strong,
.cp #support-center-page .support-call-event header strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-message-event p {
  margin: 0;
  color: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.cp #support-center-page .support-bot-badge {
  padding: 1px var(--space-1);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--cp-accent) 13%, var(--surface));
  color: var(--cp-accent);
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-call-inline-audio {
  width: min(100%, calc(var(--space-10) * 14));
  margin-top: var(--space-2);
}

.cp #support-center-page .support-call-inline-audio audio {
  width: 100%;
  height: var(--space-8);
}

.cp #support-center-page .support-call-event {
  max-width: calc(var(--space-10) * 16);
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) auto;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-call-event.is-missed {
  border-left: 3px solid var(--cp-danger);
}

.cp #support-center-page .support-call-icon,
.cp #support-center-page .support-ticket-icon {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: var(--cp-success);
}

.cp #support-center-page .support-call-event.is-missed .support-call-icon {
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  color: var(--cp-danger);
}

.cp #support-center-page .support-call-copy {
  min-width: 0;
}

.cp #support-center-page .support-call-copy p {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-call-meta {
  gap: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-transcript-button {
  align-self: center;
  white-space: nowrap;
}

.cp #support-center-page .support-recording-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-top: var(--space-2);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.cp #support-center-page .support-recording-link:hover {
  color: var(--content-1);
}

.cp #support-center-page .support-voicemail-event {
  width: min(calc(100% - var(--space-8)), calc(var(--space-10) * 18));
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) auto;
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-voicemail-event.is-new {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 4%, var(--surface));
}

.cp #support-center-page .support-voicemail-head {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.cp #support-center-page .support-voicemail-head > span:nth-child(2) {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.cp #support-center-page .support-voicemail-head strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-voicemail-head time,
.cp #support-center-page .support-voicemail-copy > span,
.cp #support-center-page .support-voicemail-transcript-state {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-voicemail-state {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-voicemail-event.is-new .support-voicemail-state {
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-voicemail-audio {
  width: 100%;
  min-height: var(--space-10);
  color-scheme: light;
}

.cp #support-center-page .support-voicemail-processing {
  display: flex;
  align-items: center;
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--content-3);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-voicemail-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.cp #support-center-page .support-voicemail-copy p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.cp #support-center-page .support-voicemail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cp #support-center-page .support-voicemail-actions > button,
.cp #support-center-page .support-voicemail-actions > details > summary {
  min-height: var(--space-9);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page .support-voicemail-actions > button:not(:disabled):hover,
.cp #support-center-page .support-voicemail-actions > details > summary:hover {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  color: var(--cp-accent);
}

.cp #support-center-page .support-voicemail-actions details {
  max-width: 100%;
}

.cp #support-center-page .support-voicemail-actions details p {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-audio-preview.is-ready audio {
  width: 100%;
}

.cp #support-center-page .support-voicemail-metrics {
  margin-top: var(--space-5);
}

.cp #support-center-page .support-voicemail-period {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-voicemail-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cp #support-center-page .support-voicemail-metric-grid > span {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cp #support-center-page .support-voicemail-metric-grid small,
.cp #support-center-page .support-voicemail-metric-foot {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-voicemail-metric-grid strong {
  color: var(--content-1);
  font-size: var(--text-xl);
}

.cp #support-center-page .support-voicemail-metric-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.cp #support-center-page .support-voicemail-metric-foot strong {
  color: var(--content-2);
}

.cp #support-center-page .support-system-event {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--content-2);
}

.cp #support-center-page .support-system-event > span {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: var(--surface);
  color: var(--cp-accent);
}

.cp #support-center-page .support-system-event p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-system-event > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-system-event strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-system-event.is-external_reply > span {
  background: color-mix(in srgb, var(--cp-success) 11%, var(--surface));
  color: var(--cp-success);
}

.cp #support-center-page .support-system-event.is-resolution > span {
  background: color-mix(in srgb, var(--cp-accent) 11%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-yelp-request-event {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--support-provider-accent) 20%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--support-provider-accent) 4%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-yelp-request-event > header {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.cp #support-center-page .support-yelp-request-event > header > span {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--support-provider-accent) 12%, var(--surface));
  color: var(--support-provider-accent);
}

.cp #support-center-page .support-yelp-request-event svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.cp #support-center-page .support-yelp-request-event > header > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-yelp-request-event small,
.cp #support-center-page .support-yelp-request-event dt {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-yelp-request-event > header strong {
  color: var(--content-1);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-yelp-request-event > header em {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent) 11%, var(--surface));
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--weight-bold);
  text-transform: capitalize;
}

.cp #support-center-page .support-yelp-request-event dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.cp #support-center-page .support-yelp-request-event dl > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-1);
}

.cp #support-center-page .support-yelp-request-event dd {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.cp #support-center-page .support-composer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-composer-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  transition:
    border-color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.cp #support-center-page .support-composer-row > .sr-only {
  position: absolute;
  grid-area: 1 / 1;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.cp #support-center-page .support-composer textarea {
  min-height: var(--space-10);
  max-height: calc(var(--space-10) * 3);
  /* Grows with its text (also text set by code, e.g. Mia's proposal);
     app-support-center-shared.js sizes it where field-sizing is missing. */
  field-sizing: content;
  resize: none;
  padding: calc(var(--space-2) + var(--space-1)) var(--space-1);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-composer textarea:focus,
.cp #support-center-page .support-composer textarea:focus-visible {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.cp #support-center-page .support-composer textarea::placeholder {
  color: var(--content-3);
}

.cp #support-center-page .support-composer.is-ai-managed .support-composer-row {
  background: color-mix(in srgb, var(--cp-accent) 5%, var(--surface-2));
}

.cp #support-center-page .support-composer.is-ai-managed textarea {
  cursor: default;
}

.cp #support-center-page .support-composer-action {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  transition:
    transform var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.cp #support-center-page :is(.support-attachment-button, .support-emoji-button) {
  border: 1px solid transparent;
  background: transparent;
  color: var(--content-2);
  cursor: pointer;
}

.cp #support-center-page :is(.support-attachment-button, .support-emoji-button):not(:disabled):hover {
  transform: translateY(-1px) rotate(-4deg);
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--cp-accent);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page :is(.support-attachment-button, .support-emoji-button):not(:disabled):active {
  transform: scale(.95);
}

.cp #support-center-page .support-emoji-button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--cp-accent);
}

.cp #support-center-page .support-send-button {
  border: 0;
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  opacity: .55;
}

.cp #support-center-page .support-send-button:not(:disabled):hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-send-button:not(:disabled):active {
  transform: scale(.95);
}

.cp #support-center-page .support-composer-action:disabled {
  cursor: not-allowed;
}

.cp #support-center-page .support-composer-action:focus-visible,
.cp #support-center-page .support-attachment-remove:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

.cp #support-center-page .support-send-button svg,
.cp #support-center-page .support-attachment-button svg,
.cp #support-center-page .support-emoji-button svg,
.cp #support-center-page .support-attachment-remove svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cp #support-center-page .support-send-button svg,
.cp #support-center-page .support-attachment-button svg,
.cp #support-center-page .support-emoji-button svg {
  transition: transform var(--dur-fast) ease;
}

.cp #support-center-page .support-send-button:hover svg {
  transform: translate(1px, -1px);
}

.cp #support-center-page .support-mia-composer-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--cp-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.cp #support-center-page .support-mia-composer-banner .support-mia-icon {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
}

.cp #support-center-page .support-mia-composer-reason {
  display: grid;
  gap: var(--space-1);
  color: var(--content-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.cp #support-center-page .support-mia-composer-reason[hidden] {
  display: none;
}

.cp #support-center-page .support-composer .support-mia-composer-reason textarea {
  min-height: calc(var(--space-10) + var(--space-4));
  max-height: calc(var(--space-10) * 4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
}

.cp #support-center-page .support-composer .support-mia-composer-reason textarea:focus,
.cp #support-center-page .support-composer .support-mia-composer-reason textarea:focus-visible {
  border-color: var(--cp-accent);
  outline: 2px solid color-mix(in srgb, var(--cp-accent) 35%, transparent);
  background: var(--surface);
  box-shadow: none;
}

/* Mia's proposal must be readable in full before it is approved: the text
   takes the whole width, tools and the send button sit on a row below it. */
.cp #support-center-page .support-composer.is-mia-proposal .support-composer-row {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "text text text text"
    "attach emoji . send";
  row-gap: var(--space-1);
}

.cp #support-center-page .support-composer.is-mia-proposal .support-composer-row > textarea {
  grid-area: text;
  width: 100%;
  max-height: min(40dvh, calc(var(--space-10) * 7));
  overflow-y: auto;
  padding-inline: var(--space-2);
}

.cp #support-center-page .support-composer.is-mia-proposal .support-composer-row > .support-attachment-button { grid-area: attach; }
.cp #support-center-page .support-composer.is-mia-proposal .support-composer-row > .support-emoji-anchor { grid-area: emoji; }
.cp #support-center-page .support-composer.is-mia-proposal .support-composer-row > .support-send-button { grid-area: send; }

.cp #support-center-page .support-composer.is-mia-proposal .support-composer-row {
  border-color: color-mix(in srgb, var(--cp-accent) 55%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 6%, var(--surface-2));
}

.cp #support-center-page .support-composer.is-mia-proposal .support-send-button {
  width: auto;
  min-width: var(--space-10);
  height: var(--space-10);
  padding: 0 var(--space-3);
  gap: var(--space-2);
  opacity: 1;
}

.cp #support-center-page .support-composer.is-mia-proposal .support-send-button:disabled {
  opacity: .55;
}

.cp #support-center-page .support-send-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.cp #support-center-page .support-attachment-button:not(:disabled):hover svg {
  transform: scale(1.06);
}

.cp #support-center-page .support-emoji-button:not(:disabled):hover svg {
  transform: rotate(9deg) scale(1.08);
}

.cp #support-center-page .support-emoji-anchor {
  position: relative;
  width: var(--space-10);
  height: var(--space-10);
}

.cp #support-center-page .support-emoji-picker {
  position: absolute;
  z-index: var(--z-dropdown);
  bottom: calc(100% + var(--space-3));
  left: calc(-1 * (var(--space-10) + var(--space-1)));
  width: min(calc(var(--space-10) * 8), calc(100vw - var(--space-10) * 2));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface) 65%, var(--border-1));
  border-radius: calc(var(--radius-lg) + var(--space-1));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  transform-origin: bottom left;
  animation: support-emoji-picker-in var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-emoji-picker.hidden {
  display: none;
}

@keyframes support-emoji-picker-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2)) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cp #support-center-page .support-emoji-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.cp #support-center-page .support-emoji-picker-head strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-emoji-picker-head button {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--content-3);
  cursor: pointer;
}

.cp #support-center-page .support-emoji-picker-head button:hover {
  background: var(--surface-hover);
  color: var(--content-1);
}

.cp #support-center-page .support-emoji-picker-head svg,
.cp #support-center-page .support-emoji-search svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cp #support-center-page .support-emoji-search {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
  color: var(--content-3);
}

.cp #support-center-page .support-emoji-search:focus-within {
  border-color: color-mix(in srgb, var(--cp-accent) 38%, var(--field-empty-border));
  background: var(--field-filled-surface);
  box-shadow: none;
}

.cp #support-center-page .support-emoji-search input {
  min-width: 0;
  width: 100%;
  height: var(--space-10);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
}

.cp #support-center-page .support-emoji-search input:focus,
.cp #support-center-page .support-emoji-search input:focus-visible {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.cp #support-center-page .support-emoji-result-label {
  padding: var(--space-3) var(--space-4) var(--space-1);
  color: var(--content-3);
  font-size: 10px;
  font-weight: var(--weight-black);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cp #support-center-page .support-emoji-grid {
  min-height: calc(var(--space-10) * 4.25);
  max-height: calc(var(--space-10) * 5.25);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: start;
  gap: var(--space-1);
  overflow-y: auto;
  padding: var(--space-2) var(--space-3) var(--space-4);
}

.cp #support-center-page .support-emoji-grid button,
.cp #support-center-page .support-emoji-categories button {
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-emoji-grid .support-emoji-more {
  grid-column: 1 / -1;
  width: fit-content;
  min-height: var(--space-8);
  margin: var(--space-2) auto 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-emoji-grid .support-emoji-more:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cp-accent) 35%, var(--border-1));
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-emoji-grid button {
  min-width: 0;
  height: var(--space-10);
  padding: 0;
  border-radius: var(--radius-md);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--text-xl);
  line-height: 1;
}

.cp #support-center-page .support-emoji-grid button:hover {
  transform: scale(1.2);
  background: var(--surface-hover);
}

.cp #support-center-page .support-emoji-grid button:active {
  transform: scale(.9);
}

.cp #support-center-page .support-emoji-grid button:focus-visible,
.cp #support-center-page .support-emoji-categories button:focus-visible,
.cp #support-center-page .support-emoji-picker-head button:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 1px;
}

.cp #support-center-page .support-emoji-empty {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  color: var(--content-3);
  font-size: var(--text-sm);
  text-align: center;
}

.cp #support-center-page .support-emoji-categories {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: thin;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-1);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.cp #support-center-page .support-emoji-categories button {
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  color: var(--content-3);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--text-base);
}

.cp #support-center-page .support-emoji-categories button:hover,
.cp #support-center-page .support-emoji-categories button.is-active {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
}


.cp #support-center-page .support-attachment-preview {
  min-width: 0;
}

.cp #support-center-page .support-attachment-preview.hidden {
  display: none;
}

.cp #support-center-page .support-attachment-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-danger) 34%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-danger) 7%, var(--surface));
  color: var(--cp-danger);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-attachment-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-attachment-status > span {
  width: var(--space-3);
  height: var(--space-3);
  border: 2px solid color-mix(in srgb, var(--cp-accent) 24%, transparent);
  border-top-color: var(--cp-accent);
  border-radius: var(--radius-circle);
  animation: support-attachment-spin .8s linear infinite;
}

@keyframes support-attachment-spin {
  to { transform: rotate(360deg); }
}

.cp #support-center-page .support-attachment-chip {
  display: grid;
  grid-template-columns: calc(var(--space-10) + var(--space-2)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 22%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-accent) 4%, var(--surface));
}

.cp #support-center-page .support-attachment-chip img {
  width: calc(var(--space-10) + var(--space-2));
  height: calc(var(--space-10) + var(--space-2));
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

.cp #support-center-page .support-attachment-chip > span {
  min-width: 0;
}

.cp #support-center-page .support-attachment-chip strong,
.cp #support-center-page .support-attachment-chip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-attachment-chip strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-attachment-chip small {
  margin-top: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-attachment-remove {
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--content-3);
  cursor: pointer;
  transition:
    transform var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.cp #support-center-page .support-attachment-remove:hover {
  transform: rotate(8deg);
  background: var(--surface-3);
  color: var(--content-1);
}

.cp #support-center-page .support-attachment-remove:active {
  transform: scale(.92);
}

.cp #support-center-page .support-profile-mobile-head {
  display: none;
}

.cp #support-center-page .support-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-auto-flow: row dense;
  align-items: center;
  justify-items: start;
  column-gap: var(--space-3);
  row-gap: 2px;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
  text-align: left;
}

.cp #support-center-page .support-profile-hero > :not(.support-profile-avatar, h3, p, .support-link-state) {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.cp #support-center-page .support-profile-hero > :is(h3, p, .support-link-state) {
  grid-column: 2;
  max-width: 100%;
}

.cp #support-center-page .support-profile-hero.is-google-ads {
  background: var(--cp-accent);
  border-bottom-color: var(--cp-accent-hover);
  color: var(--cp-gray-90);
}

.cp #support-center-page .support-profile-hero.is-google-ads h3,
.cp #support-center-page .support-profile-hero.is-google-ads p,
.cp #support-center-page .support-profile-hero.is-google-ads .support-phone-match,
.cp #support-center-page .support-profile-hero.is-google-ads .support-all-profile-source {
  color: var(--cp-gray-90);
}

.cp #support-center-page .support-profile-hero.is-google-ads .support-link-state {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.cp #support-center-page .support-profile-hero.is-google-ads .support-link-state.is-unlinked {
  color: var(--content-2);
}

.cp #support-center-page .support-google-ads-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.cp #support-center-page .support-google-ads-lead img {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
}

.cp #support-center-page .support-google-ads-lead svg {
  width: var(--space-4);
  height: var(--space-4);
}

.cp #support-center-page .support-google-ads-lead:hover {
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

.cp #support-center-page .support-google-ads-lead:focus-visible {
  outline: 2px solid var(--cp-accent-content);
  outline-offset: 2px;
}

.cp #support-center-page .support-google-ads-matched-phone {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--cp-gray-90);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-profile-avatar {
  width: calc(var(--space-10) + var(--space-2));
  height: calc(var(--space-10) + var(--space-2));
  grid-row: span 3;
  font-size: var(--text-lg);
}

.cp #support-center-page .support-profile-hero--unknown .support-profile-avatar {
  background: var(--surface-3);
  color: var(--content-3);
}

.cp #support-center-page .support-profile-hero h3 {
  margin: 0;
  overflow: hidden;
  color: var(--content-1);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-profile-hero p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-link-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-success) 11%, var(--surface));
  color: var(--cp-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-link-state.is-unlinked {
  background: var(--surface-3);
  color: var(--content-3);
}

.cp #support-center-page .support-open-customer {
  width: 100%;
}

.cp #support-center-page .support-detail-missing {
  margin: var(--space-3) 0 0;
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-detail-missing button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cp-accent);
  font: inherit;
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
}

.cp #support-center-page .support-detail-missing button:hover {
  text-decoration: underline;
}

.cp #support-center-page .support-detail-missing button:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.cp #support-center-page .support-detail-missing svg {
  width: var(--space-3);
  height: var(--space-3);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.cp #support-center-page .support-profile-section {
  margin: 0;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-profile-section h4,
.cp #support-center-page .support-recent-tickets summary {
  margin: 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-section-heading {
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.cp #support-center-page :is(.support-section-heading, .support-recent-tickets summary) > span {
  min-width: var(--space-5);
  height: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-profile-primary-actions {
  display: grid;
  gap: var(--space-2);
}

.cp #support-center-page .support-profile-quick-actions {
  padding-block: var(--space-4);
}

.cp #support-center-page .support-profile-primary-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.cp #support-center-page .support-ticket-list {
  display: grid;
  gap: var(--space-2);
}

.cp #support-center-page .support-ticket-card {
  width: 100%;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  text-align: left;
}

.cp #support-center-page .support-ticket-card[data-support-ticket] {
  cursor: pointer;
}

.cp #support-center-page .support-ticket-card[data-support-ticket]:hover {
  border-color: var(--cp-accent);
}

.cp #support-center-page .support-ticket-preview-label,
.cp #support-center-page .support-phone-match {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.cp #support-center-page .support-ticket-icon {
  background: color-mix(in srgb, var(--cp-accent) 11%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-ticket-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cp #support-center-page .support-ticket-card strong,
.cp #support-center-page .support-ticket-card small,
.cp #support-center-page .support-ticket-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-ticket-card strong {
  font-size: var(--text-sm);
}

.cp #support-center-page .support-ticket-card small,
.cp #support-center-page .support-ticket-card em {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-style: normal;
}

.cp #support-center-page .support-ticket-status {
  max-width: calc(var(--space-10) * 2.5);
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-ticket-status.is-open {
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-recent-tickets summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
}

.cp #support-center-page .support-recent-tickets summary::-webkit-details-marker {
  display: none;
}

.cp #support-center-page .support-recent-tickets[open] summary {
  margin-bottom: var(--space-3);
}

.cp #support-center-page .support-recent-tickets[open] summary > svg {
  transform: rotate(90deg);
}

.cp #support-center-page .support-detail-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}

.cp #support-center-page :is(.support-important-note, .support-contact-warning) {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 34%, var(--border-1));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cp-warning) 8%, var(--surface));
}

.cp #support-center-page :is(.support-important-note, .support-contact-warning) strong {
  color: var(--content-1);
  font-size: var(--text-xs);
}

.cp #support-center-page :is(.support-important-note, .support-contact-warning) p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-detail-list > div {
  display: grid;
  gap: 2px;
}

.cp #support-center-page .support-detail-list dt {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-yelp-lead-details {
  display: grid;
  gap: var(--space-3);
}

.cp #support-center-page .support-yelp-request-heading {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.cp #support-center-page .support-yelp-request-mark,
.cp #support-center-page .support-yelp-request-focus-icon,
.cp #support-center-page .support-yelp-request-context > div > span:first-child,
.cp #support-center-page .support-yelp-request-outcome > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
}

.cp #support-center-page .support-yelp-request-mark {
  width: var(--space-10);
  height: var(--space-10);
  background: color-mix(in srgb, var(--support-provider-accent) 11%, var(--surface));
  color: var(--support-provider-accent);
}

.cp #support-center-page :is(.support-yelp-request-mark, .support-yelp-request-focus-icon, .support-yelp-request-context, .support-yelp-request-outcome) svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.cp #support-center-page .support-yelp-request-heading > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-yelp-request-heading small,
.cp #support-center-page .support-yelp-request-focus small,
.cp #support-center-page .support-yelp-request-context small,
.cp #support-center-page .support-yelp-request-outcome small {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-yelp-request-heading h4 {
  overflow: hidden;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-yelp-request-status {
  justify-self: end;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.cp #support-center-page .support-yelp-request-status.is-active {
  background: color-mix(in srgb, var(--cp-accent) 11%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-yelp-request-status.is-success {
  background: color-mix(in srgb, var(--cp-success) 11%, var(--surface));
  color: var(--cp-success);
}

.cp #support-center-page .support-yelp-request-status.is-danger {
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  color: var(--cp-danger);
}

.cp #support-center-page .support-yelp-request-status.is-pending {
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 76%, var(--content-1));
}

.cp #support-center-page .support-yelp-request-focus {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.cp #support-center-page .support-yelp-request-focus-icon {
  width: var(--space-8);
  height: var(--space-8);
  background: var(--surface);
  color: var(--content-2);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-yelp-request-focus > span:last-child,
.cp #support-center-page .support-yelp-request-context > div > span:last-child,
.cp #support-center-page .support-yelp-request-outcome > span:last-child {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-yelp-request-focus strong,
.cp #support-center-page .support-yelp-request-context strong,
.cp #support-center-page .support-yelp-request-outcome strong {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.cp #support-center-page .support-yelp-request-focus p {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-yelp-request-context {
  display: grid;
}

.cp #support-center-page .support-yelp-request-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.cp #support-center-page .support-yelp-request-detail-list > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(var(--space-10), 0.8fr) minmax(0, 1.4fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.cp #support-center-page .support-yelp-request-detail-list > div + div {
  border-top: 1px solid var(--border-1);
}

.cp #support-center-page .support-yelp-request-detail-list dt,
.cp #support-center-page .support-yelp-request-detail-list dd {
  margin: 0;
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.cp #support-center-page .support-yelp-request-detail-list dt {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-yelp-request-detail-list dd {
  color: var(--content-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-yelp-request-empty {
  margin: 0;
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-yelp-request-context > div {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.cp #support-center-page .support-yelp-request-context > div + div {
  border-top: 1px solid var(--border-1);
}

.cp #support-center-page .support-yelp-request-context > div > span:first-child {
  width: var(--space-8);
  height: var(--space-8);
  color: var(--content-3);
}

.cp #support-center-page .support-yelp-request-outcome {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
  color: var(--content-3);
}

.cp #support-center-page .support-yelp-request-outcome > span:first-child {
  width: var(--space-8);
  height: var(--space-8);
  background: var(--surface-3);
}

.cp #support-center-page .support-yelp-request-outcome.is-success > span:first-child {
  background: color-mix(in srgb, var(--cp-success) 11%, var(--surface));
  color: var(--cp-success);
}

.cp #support-center-page .support-yelp-request-outcome.is-danger > span:first-child {
  background: color-mix(in srgb, var(--cp-danger) 10%, var(--surface));
  color: var(--cp-danger);
}

.cp #support-center-page .support-yelp-request-outcome.is-pending > span:first-child {
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 76%, var(--content-1));
}

.cp #support-center-page .support-compact-empty {
  padding: var(--space-4);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-md);
  color: var(--content-3);
  font-size: var(--text-xs);
  text-align: center;
}

.cp #support-center-page .support-link-search {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-1);
}

.cp #support-center-page .support-link-search > label {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-link-search > div:first-of-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.cp #support-center-page .support-link-search input {
  min-width: 0;
  min-height: var(--space-10);
  padding: 0 var(--space-3);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--field-empty-surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
}

.cp #support-center-page .support-link-results {
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-link-results > button {
  min-height: calc(var(--space-10) + var(--space-2));
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-color: var(--border-1);
  background: var(--surface);
  color: var(--content-1);
  text-align: left;
}

.cp #support-center-page .support-link-results > button > span:last-child {
  min-width: 0;
  display: grid;
}

.cp #support-center-page .support-link-results small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-profile-scrim {
  display: none;
}

.cp #support-center-page .support-transcript-review {
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.cp #support-center-page .support-transcript-head {
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

.cp #support-center-page .support-transcript-head > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.cp #support-center-page .support-transcript-head > div > span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.cp #support-center-page .support-transcript-head > div > strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-transcript-head strong small {
  margin-left: var(--space-2);
  color: var(--content-3);
  font-weight: var(--weight-medium);
}

.cp #support-center-page .support-audio-preview {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
}

.cp #support-center-page .support-audio-preview button {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  opacity: .65;
}

.cp #support-center-page .support-audio-track {
  height: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--border-2);
}

.cp #support-center-page .support-audio-track i {
  width: 0;
  height: 100%;
  display: block;
  background: var(--cp-accent);
}

.cp #support-center-page .support-audio-preview time,
.cp #support-center-page .support-audio-preview small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-transcript-toolbar {
  min-height: calc(var(--space-10) + var(--space-2));
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-1);
}

.cp #support-center-page .support-transcript-tabs {
  display: flex;
  align-self: stretch;
}

.cp #support-center-page .support-transcript-tabs button {
  min-width: calc(var(--space-10) * 2.2);
}

.cp #support-center-page .support-transcript-search {
  width: min(calc(var(--space-10) * 5.5), 42%);
  padding: var(--space-2);
}

.cp #support-center-page .support-transcript-summary {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-5);
}

.cp #support-center-page .support-transcript-summary > span {
  width: var(--space-10);
  height: var(--space-10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-transcript-summary strong {
  color: var(--content-1);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-transcript-summary p {
  margin: var(--space-2) 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

.cp #support-center-page .support-transcript-summary small {
  color: var(--content-3);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-transcript-lines {
  padding: var(--space-3) 0;
}

.cp #support-center-page .support-transcript-line {
  width: 100%;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 0;
  background: transparent;
  color: var(--content-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cp #support-center-page .support-transcript-line:hover {
  background: var(--surface-hover);
}

.cp #support-center-page div.support-transcript-line {
  cursor: default;
}

.cp #support-center-page div.support-transcript-line:hover {
  background: transparent;
}

.cp #support-center-page .support-transcript-line time {
  color: var(--cp-accent);
  font-family: var(--mono);
  font-size: var(--text-xs);
}

.cp #support-center-page .support-transcript-line > span {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-transcript-line strong {
  font-size: var(--text-xs);
}

.cp #support-center-page .support-transcript-no-results {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--content-3);
  font-size: var(--text-sm);
  text-align: center;
}

@media (max-width: 1180px) {
  .cp #support-center-page .support-header-action[data-support-action="open-profile"] {
    display: inline-flex;
  }

  .cp #support-center-page .support-all-workspace .support-header-action[data-support-all-action="open-profile"] {
    display: inline-flex;
  }

  .cp #support-center-page .support-dialpad-shell {
    grid-template-columns: minmax(calc(var(--space-10) * 6.5), .8fr) minmax(0, 1.45fr);
  }

  .cp #support-center-page .support-profile-pane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    width: min(calc(var(--space-10) * 9), 88%);
    border-left: 1px solid var(--border-1);
    box-shadow: var(--shadow-lg);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }

  .cp #support-center-page .support-profile-mobile-head {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    background: var(--surface);
  }

  .cp #support-center-page .support-profile-scrim {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    border: 0;
    background: color-mix(in srgb, var(--content-1) 34%, transparent);
  }

  .cp #support-center-page .support-dialpad-workspace.is-profile-open .support-profile-pane {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .cp #support-center-page .support-dialpad-workspace.is-profile-open .support-profile-scrim {
    display: block;
  }
}

@media (max-width: 900px) {
  .cp #support-center-page .support-dialpad-topbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .cp #support-center-page .support-dialpad-topbar > .support-global-search,
  .cp #support-center-page .support-dialpad-topbar > :is(.support-channel-topbar-tools, .support-all-topbar-tools) {
    justify-self: stretch;
  }

  .cp #support-center-page .support-global-search {
    width: 100%;
  }

  .cp #support-center-page .support-all-topbar-tools {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .cp #support-center-page .support-source-switcher { align-self: flex-start; }

  .cp #support-center-page .support-dialpad-shell {
    min-height: calc(var(--space-10) * 9);
    height: clamp(calc(var(--space-10) * 9), calc(100dvh - calc(var(--space-10) * 8)), calc(var(--space-10) * 17));
    grid-template-columns: minmax(calc(var(--space-10) * 6.2), .85fr) minmax(0, 1.4fr);
  }

  .cp #support-center-page .support-conversation-actions .support-header-action span {
    display: none;
  }

  .cp #support-center-page .support-header-action {
    width: var(--space-10);
    padding: 0;
  }

  .cp #support-center-page .support-call-event {
    grid-template-columns: var(--space-10) minmax(0, 1fr);
  }

  .cp #support-center-page .support-transcript-button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .cp #support-center-page .support-dialpad-workspace {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .cp #support-center-page .support-dialpad-title-group {
    flex-wrap: wrap;
  }

  .cp #support-center-page .support-source-switcher { width: 100%; }
  .cp #support-center-page .support-source-switcher button { flex: 1; }

  .cp #support-center-page .support-dialpad-header-logo {
    width: calc(var(--space-10) - var(--space-1));
    height: calc(var(--space-10) - var(--space-1));
  }

  .cp #support-center-page .support-message-cluster {
    max-width: 88%;
  }

  .cp #support-center-page .support-dialpad-shell {
    min-height: calc(var(--space-10) * 8.5);
    height: clamp(calc(var(--space-10) * 8.5), calc(100dvh - calc(var(--space-10) * 9.25)), calc(var(--space-10) * 13));
    display: block;
    overflow: hidden;
  }

  .cp #support-center-page .support-inbox-pane,
  .cp #support-center-page .support-conversation-pane {
    width: 100%;
    height: 100%;
  }

  .cp #support-center-page .support-conversation-pane {
    display: none;
  }

  .cp #support-center-page .support-dialpad-workspace.is-mobile-conversation .support-inbox-pane {
    display: none;
  }

  .cp #support-center-page .support-dialpad-workspace.is-mobile-conversation .support-conversation-pane {
    display: grid;
  }

  .cp #support-center-page .support-mobile-back {
    display: inline-flex;
  }

  .cp #support-center-page .support-profile-pane {
    width: min(calc(var(--space-10) * 8.5), 94%);
  }

  .cp #support-center-page .support-timeline {
    padding: var(--space-3);
  }

  .cp #support-center-page .support-call-event {
    padding: var(--space-3);
  }

  .cp #support-center-page .support-voicemail-event {
    width: 100%;
    padding: var(--space-3);
  }

  .cp #support-center-page .support-voicemail-head {
    grid-template-columns: var(--space-10) minmax(0, 1fr);
  }

  .cp #support-center-page .support-voicemail-state {
    grid-column: 2;
    justify-self: start;
  }

  .cp #support-center-page .support-voicemail-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cp #support-center-page .support-voicemail-metric-foot {
    flex-direction: column;
  }

  .cp #support-center-page .support-audio-preview {
    grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  }

  .cp #support-center-page .support-audio-preview small {
    display: none;
  }

  .cp #support-center-page .support-transcript-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 0 var(--space-3) var(--space-3);
  }

  .cp #support-center-page .support-transcript-search {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .cp #support-center-page .support-dialpad-topbar {
    padding: var(--space-3);
  }

  .cp #support-center-page .support-dialpad-title-group h2 {
    font-size: var(--text-lg);
  }

  .cp #support-center-page .support-source-switcher button { padding: 0 var(--space-1); }
  .cp #support-center-page .support-source-switcher img { display: none; }

  .cp #support-center-page .support-conversation-header {
    padding: var(--space-2);
  }

  .cp #support-center-page .support-header-avatar {
    display: none;
  }

  .cp #support-center-page .support-conversation-actions {
    gap: var(--space-1);
  }

  .cp #support-center-page .support-conversation-ai-label > span,
  .cp #support-center-page .support-conversation-ai-default {
    display: none;
  }

  .cp #support-center-page .support-conversation-ai {
    padding: 0 var(--space-2);
  }

  .cp #support-center-page .support-header-action {
    width: calc(var(--space-10) - var(--space-1));
    min-height: calc(var(--space-10) - var(--space-1));
  }

  .cp #support-center-page .support-ticket-card {
    grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  }

  .cp #support-center-page .support-ticket-status {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp #support-center-page .support-profile-pane,
  .cp #support-center-page .support-drop-overlay,
  .cp #support-center-page .support-conversation-row,
  .cp #support-center-page .support-reminder-toggle,
  .cp #support-center-page .support-conversation-ai,
  .cp #support-center-page .support-conversation-ai-switch,
  .cp #support-center-page .support-conversation-ai-switch > span,
  .cp #support-center-page .support-conversation-ai-default,
  .cp #support-center-page .support-sort-trigger,
  .cp #support-center-page .support-composer-row,
  .cp #support-center-page .support-composer-action,
  .cp #support-center-page .support-attachment-remove,
  .cp #support-center-page .support-send-button svg,
  .cp #support-center-page .support-attachment-button svg,
  .cp #support-center-page .support-emoji-button svg,
  .cp #support-center-page .support-emoji-grid button,
  .cp #support-center-page .support-emoji-categories button,
  .cp #support-center-page .support-metrics-segmented button {
    transition: none;
  }

  .cp #support-center-page .support-sort-options,
  .cp #support-center-page .support-emoji-picker,
  .cp #support-center-page .support-conversation-pane.is-dragging .support-drop-overlay-icon,
  .cp #support-center-page .support-attachment-status > span,
  .cp #support-center-page .support-metrics-dashboard.is-animating .support-chart-line,
  .cp #support-center-page .support-metrics-dashboard.is-animating .support-chart-area,
  .cp #support-center-page .support-metrics-dashboard.is-animating .support-donut,
  .cp #support-center-page .support-metrics-dashboard.is-animating .support-metric-bar > span {
    animation: none;
  }

  .cp #support-center-page .support-all-workspace.is-loading [data-support-all-action="refresh"] svg {
    animation: none;
  }
}

/* Keep the master and both channel policies reachable at every supported width. */
@media (min-width: 901px) and (max-width: 1320px) {
  .cp #support-center-page .support-all-topbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .cp #support-center-page .support-mia-policy-dropdown {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

/* Support AI Lab: the production drafting agent in a read-only test shell. */
.cp #support-center-page .support-view-all-area {
  width: min(100%, calc(var(--space-10) * 30));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cp #support-center-page .support-view-all.support-ai-lab-link {
  border-color: color-mix(in srgb, var(--cp-accent) 36%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
  color: var(--support-accent-content);
}

.cp #support-center-page .support-view-all.support-ai-lab-link:hover,
.cp #support-center-page .support-view-all.support-ai-lab-link:focus-visible {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 14%, var(--surface));
  color: var(--cp-accent);
  filter: none;
}

.cp #support-center-page .support-ai-lab-workspace {
  min-height: calc(100vh - var(--space-10) * 3);
  background: var(--surface-2);
}

.cp #support-center-page .support-ai-lab-topbar {
  justify-content: space-between;
}

.cp #support-center-page .support-ai-lab-title-group,
.cp #support-center-page .support-ai-lab-mode,
.cp #support-center-page .support-ai-lab-chat-head,
.cp #support-center-page .support-ai-lab-chat-head > div,
.cp #support-center-page .support-ai-lab-selected,
.cp #support-center-page .support-ai-lab-grounding,
.cp #support-center-page .support-ai-lab-guardrail {
  display: flex;
  align-items: center;
}

.cp #support-center-page .support-ai-lab-review {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}
.cp #support-center-page .support-ai-lab-review:is(.is-waiting, .is-unavailable) {
  background: color-mix(in srgb, var(--cp-warning) 8%, var(--surface));
  color: var(--cp-warning);
}
.cp #support-center-page .support-ai-lab-review svg,
.cp #support-center-page .support-ai-lab-workshop-card header svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}
.cp #support-center-page .support-ai-lab-review > div,
.cp #support-center-page .support-ai-lab-workshop-card header > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}
.cp #support-center-page .support-ai-lab-review strong,
.cp #support-center-page .support-ai-lab-workshop-card strong {
  color: var(--content-1);
  font-size: var(--text-xs);
}
.cp #support-center-page .support-ai-lab-review :is(small, p),
.cp #support-center-page .support-ai-lab-workshop-card small {
  margin: 0;
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}
.cp #support-center-page .support-ai-lab-workshop-card {
  min-width: 0;
  padding: var(--space-4);
  margin-top: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 32%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-warning) 5%, var(--surface));
}
.cp #support-center-page .support-ai-lab-workshop-card.is-resolved {
  border-color: var(--border-1);
  background: var(--surface-2);
}
.cp #support-center-page .support-ai-lab-workshop-card header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--cp-warning);
}
.cp #support-center-page .support-ai-lab-workshop-question {
  margin: var(--space-3) 0;
  color: var(--content-1);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cp #support-center-page .support-ai-lab-quote-breakdown {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  overflow-wrap: anywhere;
}
.cp #support-center-page .support-ai-lab-quote-breakdown dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.cp #support-center-page .support-ai-lab-quote-breakdown dl > div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cp #support-center-page .support-ai-lab-quote-breakdown dd {
  margin: 0;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.cp #support-center-page .support-ai-lab-quote-breakdown .is-total {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-1);
  color: var(--cp-accent);
}
.cp #support-center-page .support-ai-lab-workshop-card ol {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  max-height: calc(var(--space-10) * 5);
  overflow-y: auto;
}
.cp #support-center-page .support-ai-lab-workshop-card li {
  border-left: 2px solid var(--border-2);
  padding-left: var(--space-3);
}
.cp #support-center-page .support-ai-lab-workshop-card li p {
  margin: var(--space-1) 0;
  font-size: var(--text-xs);
  color: var(--content-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cp #support-center-page .support-ai-lab-workshop-timing {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--content-3);
  font-size: var(--text-xs);
}
.cp #support-center-page .support-ai-lab-workshop-card form {
  margin-top: var(--space-4);
}
.cp #support-center-page .support-ai-lab-workshop-card label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--content-1);
}
.cp #support-center-page .support-ai-lab-workshop-card textarea {
  display: block;
  width: 100%;
  min-height: calc(var(--space-10) * 2);
  padding: var(--space-3);
  resize: vertical;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  outline: none;
}
.cp #support-center-page .support-ai-lab-workshop-card textarea:focus {
  border-color: var(--cp-accent);
  box-shadow: none;
}
.cp #support-center-page .support-ai-lab-workshop-help {
  margin: var(--space-2) 0;
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}
.cp #support-center-page .support-ai-lab-workshop-card form > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.cp #support-center-page .support-ai-lab-workshop-card button {
  min-height: var(--space-8);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.cp #support-center-page .support-ai-lab-workshop-card button[type="submit"] {
  border-color: var(--cp-accent);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
}
.cp #support-center-page .support-ai-lab-workshop-card button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.cp #support-center-page .support-ai-lab-workshop-card button:hover:not(:disabled) {
  filter: brightness(.96);
}
.cp #support-center-page .support-ai-lab-workshop-error {
  color: var(--cp-danger);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-ai-lab-title-group {
  min-width: 0;
  gap: var(--space-4);
}

.cp #support-center-page .support-ai-lab-mark {
  width: calc(var(--space-10) + var(--space-1));
  height: calc(var(--space-10) + var(--space-1));
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 24%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-ai-lab-mark svg,
.cp #support-center-page .support-ai-lab-avatar svg,
.cp #support-center-page .support-ai-lab-turn-avatar svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cp #support-center-page .support-ai-lab-mode {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-success) 28%, var(--border-1));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-success) 8%, var(--surface));
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-ai-lab-mode > span,
.cp #support-center-page .support-ai-lab-guardrail > span {
  width: var(--space-2);
  height: var(--space-2);
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: var(--cp-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-success) 14%, transparent);
}

.cp #support-center-page .support-ai-lab-layout {
  min-height: calc(100vh - var(--space-10) * 5);
  display: grid;
  grid-template-columns: minmax(calc(var(--space-10) * 6), 0.86fr) minmax(calc(var(--space-10) * 10), 1.75fr) minmax(calc(var(--space-10) * 6), 0.9fr);
  background: var(--surface);
}

.cp #support-center-page :is(.support-ai-lab-setup, .support-ai-lab-inspector) {
  min-width: 0;
  padding: var(--space-5);
  background: var(--surface);
}

.cp #support-center-page .support-ai-lab-setup {
  border-right: 1px solid var(--border-1);
}

.cp #support-center-page .support-ai-lab-inspector {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-1);
}

.cp #support-center-page .support-ai-lab-panel-head > span {
  color: var(--support-accent-content);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cp #support-center-page .support-ai-lab-panel-head h3 {
  margin: var(--space-1) 0 0;
  color: var(--content-1);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.cp #support-center-page .support-ai-lab-panel-head p {
  margin: var(--space-2) 0 0;
  color: var(--content-2);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cp #support-center-page .support-ai-lab-channel {
  margin: var(--space-6) 0 0;
  padding: 0;
  border: 0;
}

.cp #support-center-page .support-ai-lab-channel legend,
.cp #support-center-page .support-ai-lab-field-head > :first-child {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-ai-lab-channel > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: var(--space-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cp #support-center-page .support-ai-lab-channel button {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-ai-lab-channel button.is-active {
  border-color: var(--border-1);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--content-1);
}

.cp #support-center-page .support-ai-lab-channel img {
  width: var(--space-5);
  height: var(--space-5);
  object-fit: contain;
}

.cp #support-center-page .support-ai-lab-identity,
.cp #support-center-page .support-ai-lab-tickets {
  margin-top: var(--space-6);
}

.cp #support-center-page .support-ai-lab-field-help {
  margin: var(--space-2) 0 0;
  color: var(--content-3);
  font-size: 11px;
  line-height: var(--leading-body);
}

.cp #support-center-page .support-ai-lab-field-head {
  min-height: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cp #support-center-page .support-ai-lab-field-head button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cp-accent);
  font: inherit;
  font-size: 11px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page .support-ai-lab-search {
  min-height: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-ai-lab-search:focus-within {
  border-color: var(--cp-accent);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.cp #support-center-page .support-ai-lab-search svg {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 auto;
  fill: none;
  stroke: var(--content-3);
  stroke-linecap: round;
  stroke-width: 2;
}

.cp #support-center-page .support-ai-lab-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
}

.cp #support-center-page .support-ai-lab-customer-results,
.cp #support-center-page .support-ai-lab-ticket-list {
  max-height: calc(var(--space-10) * 5);
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  overflow: auto;
  overscroll-behavior: contain;
}

.cp #support-center-page :is(.support-ai-lab-customer-results, .support-ai-lab-ticket-list) > p {
  margin: 0;
  padding: var(--space-3);
  color: var(--content-3);
  font-size: var(--text-xs);
  text-align: center;
}

.cp #support-center-page .support-ai-lab-customer-results > button,
.cp #support-center-page .support-ai-lab-ticket-list > button {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--content-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page :is(.support-ai-lab-customer-results, .support-ai-lab-ticket-list) > button:hover,
.cp #support-center-page .support-ai-lab-ticket-list > button.is-selected {
  border-color: color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 7%, var(--surface));
}

.cp #support-center-page .support-ai-lab-customer-results > button > span:first-child,
.cp #support-center-page .support-ai-lab-selected > span:first-child {
  width: var(--space-8);
  height: var(--space-8);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: var(--support-accent-content);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

.cp #support-center-page :is(.support-ai-lab-customer-results, .support-ai-lab-ticket-list) button > span:nth-child(2),
.cp #support-center-page .support-ai-lab-selected > div {
  min-width: 0;
  display: grid;
  flex: 1;
  gap: 2px;
}

.cp #support-center-page :is(.support-ai-lab-customer-results, .support-ai-lab-ticket-list) strong,
.cp #support-center-page .support-ai-lab-selected strong {
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page :is(.support-ai-lab-customer-results, .support-ai-lab-ticket-list) small,
.cp #support-center-page .support-ai-lab-selected small {
  overflow: hidden;
  color: var(--content-3);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-ai-lab-selected {
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-success) 24%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-success) 6%, var(--surface));
}

.cp #support-center-page .support-ai-lab-selected > svg {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: var(--cp-success);
  stroke-width: 2.4;
}

.cp #support-center-page .support-ai-lab-ticket-list > button {
  align-items: flex-start;
  justify-content: space-between;
  border-color: var(--border-1);
}

.cp #support-center-page .support-ai-lab-ticket-list em {
  flex: 0 0 auto;
  color: var(--content-3);
  font-size: 10px;
  font-style: normal;
}

.cp #support-center-page .support-ai-lab-grounding {
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-success) 24%, var(--border-1));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cp-success) 6%, var(--surface));
}

.cp #support-center-page .support-ai-lab-grounding.is-warning {
  border-color: color-mix(in srgb, var(--cp-warning) 32%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 7%, var(--surface));
}

.cp #support-center-page .support-ai-lab-grounding-icon {
  width: var(--space-8);
  height: var(--space-8);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--surface);
  color: var(--cp-success);
}

.cp #support-center-page .support-ai-lab-grounding.is-warning .support-ai-lab-grounding-icon { color: var(--cp-warning); }
.cp #support-center-page .support-ai-lab-grounding-icon svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 2; }
.cp #support-center-page .support-ai-lab-grounding > div { min-width: 0; display: grid; gap: 2px; }
.cp #support-center-page .support-ai-lab-grounding strong { color: var(--content-1); font-size: var(--text-xs); }
.cp #support-center-page .support-ai-lab-grounding small { color: var(--content-3); font-size: 10px; line-height: var(--leading-body); }

.cp #support-center-page .support-ai-lab-chat {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(calc(var(--space-10) * 8), 1fr) auto;
  background: color-mix(in srgb, var(--surface-2) 56%, var(--surface));
}

.cp #support-center-page .support-ai-lab-chat-head {
  min-height: calc(var(--space-10) * 1.7);
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-ai-lab-chat-head > div { min-width: 0; gap: var(--space-3); }
.cp #support-center-page .support-ai-lab-chat-head > div > span:last-child { min-width: 0; display: grid; gap: 2px; }
.cp #support-center-page .support-ai-lab-chat-head strong { font-size: var(--text-sm); }
.cp #support-center-page .support-ai-lab-chat-head small { overflow: hidden; color: var(--content-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

.cp #support-center-page .support-ai-lab-avatar {
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 12%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-ai-lab-chat-head > button {
  min-height: calc(var(--space-8) + var(--space-1));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page .support-ai-lab-chat-head > button svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 2; }

.cp #support-center-page .support-ai-lab-safety {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid color-mix(in srgb, var(--cp-accent) 15%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 6%, var(--surface));
  color: var(--content-2);
  font-size: 11px;
  line-height: var(--leading-body);
}

.cp #support-center-page .support-ai-lab-safety svg { width: var(--space-4); height: var(--space-4); flex: 0 0 auto; fill: none; stroke: var(--cp-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.cp #support-center-page .support-ai-lab-safety strong { color: var(--content-1); }

.cp #support-center-page .support-ai-lab-transcript {
  min-height: 0;
  padding: var(--space-5);
  overflow: auto;
  overscroll-behavior: contain;
}

.cp #support-center-page .support-ai-lab-empty {
  max-width: calc(var(--space-10) * 10);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: auto;
  color: var(--content-2);
  text-align: center;
}

.cp #support-center-page .support-ai-lab-empty > span {
  width: calc(var(--space-10) + var(--space-3));
  height: calc(var(--space-10) + var(--space-3));
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--cp-accent) 9%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-ai-lab-empty svg { width: var(--space-6); height: var(--space-6); fill: none; stroke: currentColor; stroke-width: 1.8; }
.cp #support-center-page .support-ai-lab-empty strong { margin-top: var(--space-3); color: var(--content-1); font-size: var(--text-base); }
.cp #support-center-page .support-ai-lab-empty p { max-width: calc(var(--space-10) * 9); margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-body); }

.cp #support-center-page .support-ai-lab-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.cp #support-center-page .support-ai-lab-prompts button {
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 25%, var(--border-1));
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--support-accent-content);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cp #support-center-page .support-ai-lab-turn {
  max-width: 82%;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  animation: support-ai-lab-turn-in var(--dur-normal) var(--ease-standard) both;
}

.cp #support-center-page .support-ai-lab-turn--customer { margin-right: auto; }
.cp #support-center-page .support-ai-lab-turn--assistant { margin-left: auto; flex-direction: row-reverse; }

.cp #support-center-page .support-ai-lab-turn-avatar {
  width: var(--space-8);
  height: var(--space-8);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-circle);
  background: var(--surface);
  color: var(--content-2);
  font-size: 10px;
  font-weight: var(--weight-black);
}

.cp #support-center-page .support-ai-lab-turn--assistant .support-ai-lab-turn-avatar {
  border-color: color-mix(in srgb, var(--cp-accent) 24%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 9%, var(--surface));
  color: var(--cp-accent);
}

.cp #support-center-page .support-ai-lab-turn > div { min-width: 0; display: grid; gap: var(--space-1); }
.cp #support-center-page .support-ai-lab-turn--assistant > div { justify-items: end; }
.cp #support-center-page .support-ai-lab-turn small { padding: 0 var(--space-2); color: var(--content-3); font-size: 10px; }
.cp #support-center-page .support-ai-lab-turn p { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-1); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--space-1); background: var(--surface); color: var(--content-1); font-size: var(--text-sm); line-height: var(--leading-body); white-space: pre-wrap; }
.cp #support-center-page .support-ai-lab-turn--assistant p { border-color: color-mix(in srgb, var(--cp-accent) 44%, var(--cp-accent)); border-radius: var(--radius-lg) var(--radius-lg) var(--space-1) var(--radius-lg); background: var(--cp-accent); color: var(--content-on-accent, #fff); }
.cp #support-center-page .support-ai-lab-turn.is-status p { border-color: color-mix(in srgb, var(--cp-warning) 32%, var(--border-1)); background: color-mix(in srgb, var(--cp-warning) 8%, var(--surface)); color: var(--content-2); }

.cp #support-center-page .support-ai-lab-turn.is-thinking p { min-width: calc(var(--space-10) * 1.5); display: flex; gap: var(--space-1); justify-content: center; }
.cp #support-center-page .support-ai-lab-turn.is-thinking i { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-circle); background: currentColor; animation: support-ai-lab-dot 1s ease-in-out infinite; }
.cp #support-center-page .support-ai-lab-turn.is-thinking i:nth-child(2) { animation-delay: 120ms; }
.cp #support-center-page .support-ai-lab-turn.is-thinking i:nth-child(3) { animation-delay: 240ms; }

.cp #support-center-page .support-ai-lab-composer {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-1);
  background: var(--surface);
}

.cp #support-center-page .support-ai-lab-composer textarea {
  width: 100%;
  min-height: calc(var(--space-10) * 1.35);
  max-height: calc(var(--space-10) * 3);
  resize: vertical;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--field-empty-border);
  border-radius: var(--radius-lg);
  outline: 0;
  background: var(--surface-2);
  color: var(--content-1);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-ai-lab-composer textarea:focus {
  border-color: var(--cp-accent);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.cp #support-center-page .support-ai-lab-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.cp #support-center-page .support-ai-lab-composer small { color: var(--content-3); font-size: 10px; }

.cp #support-center-page .support-ai-lab-composer button {
  min-height: calc(var(--space-8) + var(--space-1));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--cp-accent);
  color: var(--content-on-accent, #fff);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.cp #support-center-page .support-ai-lab-composer button:hover:not(:disabled) { box-shadow: var(--shadow-sm); filter: brightness(0.94); transform: translateY(-1px); }
.cp #support-center-page .support-ai-lab-composer button:disabled { cursor: not-allowed; filter: grayscale(0.5); opacity: 0.5; }
.cp #support-center-page .support-ai-lab-composer button svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.cp #support-center-page .support-ai-lab-trace {
  flex: 1;
  margin-top: var(--space-5);
}

.cp #support-center-page .support-ai-lab-trace-empty {
  min-height: calc(var(--space-10) * 5);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
  color: var(--content-3);
  text-align: center;
}

.cp #support-center-page .support-ai-lab-trace-empty svg,
.cp #support-center-page .support-ai-lab-trace-section h4 svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cp #support-center-page .support-ai-lab-trace-empty p { margin: 0; font-size: var(--text-xs); line-height: var(--leading-body); }

.cp #support-center-page .support-ai-lab-decision-summary {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-1);
}

.cp #support-center-page .support-ai-lab-decision-summary > span {
  width: max-content;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-accent) 9%, var(--surface));
  color: var(--support-accent-content);
  font-size: 10px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

.cp #support-center-page .support-ai-lab-decision-summary > span.is-escalate,
.cp #support-center-page .support-ai-lab-decision-summary > span.is-error { background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface)); color: var(--cp-warning); }
.cp #support-center-page .support-ai-lab-decision-summary strong { margin-top: var(--space-1); color: var(--content-1); font-size: var(--text-base); }
.cp #support-center-page .support-ai-lab-decision-summary small { color: var(--content-3); font-size: var(--text-xs); }

.cp #support-center-page .support-ai-lab-trace-section { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-1); }
.cp #support-center-page .support-ai-lab-trace-section h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--content-2); font-size: var(--text-xs); }
.cp #support-center-page .support-ai-lab-trace-section ul { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.cp #support-center-page .support-ai-lab-trace-section li { display: flex; align-items: center; gap: var(--space-2); }
.cp #support-center-page .support-ai-lab-trace-section li > span { width: calc(var(--space-6) + var(--space-1)); height: calc(var(--space-6) + var(--space-1)); display: grid; flex: 0 0 auto; place-items: center; border-radius: var(--radius-circle); background: color-mix(in srgb, var(--cp-success) 8%, var(--surface)); color: var(--cp-success); }
.cp #support-center-page .support-ai-lab-trace-section li.is-warning > span { background: color-mix(in srgb, var(--cp-warning) 8%, var(--surface)); color: var(--cp-warning); }
.cp #support-center-page .support-ai-lab-trace-section li svg { width: var(--space-3); height: var(--space-3); fill: none; stroke: currentColor; stroke-width: 2; }
.cp #support-center-page .support-ai-lab-trace-section li > div { min-width: 0; display: grid; gap: 1px; }
.cp #support-center-page .support-ai-lab-trace-section li strong { font-size: var(--text-xs); }
.cp #support-center-page .support-ai-lab-trace-section li small { color: var(--content-3); font-size: 10px; }
.cp #support-center-page .support-ai-lab-trace-section > p,
.cp #support-center-page .support-ai-lab-no-tools { margin: var(--space-2) 0 0; color: var(--content-2); font-size: var(--text-xs); line-height: var(--leading-body); }
.cp #support-center-page .support-ai-lab-trace-section.is-workflow > div { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.cp #support-center-page .support-ai-lab-trace-section.is-workflow > div > span { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cp #support-center-page .support-ai-lab-trace-section.is-workflow span small { color: var(--content-3); font-size: 10px; }
.cp #support-center-page .support-ai-lab-trace-section.is-workflow span strong { font-size: var(--text-xs); text-align: right; }
.cp #support-center-page .support-ai-lab-trace-section.is-workflow > small { display: block; margin-top: var(--space-3); color: var(--cp-warning); font-size: 10px; }

.cp #support-center-page .support-ai-lab-guardrail {
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.cp #support-center-page .support-ai-lab-guardrail > div { display: grid; gap: 2px; }
.cp #support-center-page .support-ai-lab-guardrail strong { color: var(--content-1); font-size: var(--text-xs); }
.cp #support-center-page .support-ai-lab-guardrail small { color: var(--content-3); font-size: 10px; }

@keyframes support-ai-lab-turn-in {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes support-ai-lab-dot {
  0%, 60%, 100% { opacity: 0.45; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(calc(var(--space-1) * -1)); }
}

@media (min-width: 1321px) {
  .cp #support-center-page .support-ai-lab-layout {
    height: max(calc(var(--space-10) * 15), calc(100dvh - var(--space-10) * 7.5));
    min-height: 0;
  }
  .cp #support-center-page :is(.support-ai-lab-setup, .support-ai-lab-inspector) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cp #support-center-page .support-ai-lab-chat {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
}

@media (max-width: 1320px) {
  .cp #support-center-page .support-ai-lab-layout {
    grid-template-columns: minmax(calc(var(--space-10) * 6), 0.82fr) minmax(calc(var(--space-10) * 10), 1.6fr);
  }
  .cp #support-center-page .support-ai-lab-inspector {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-5);
    border-top: 1px solid var(--border-1);
    border-left: 0;
  }
  .cp #support-center-page .support-ai-lab-inspector .support-ai-lab-trace,
  .cp #support-center-page .support-ai-lab-inspector .support-ai-lab-guardrail { margin-top: 0; }
  .cp #support-center-page .support-ai-lab-inspector > :is(.support-ai-lab-panel-head, .support-ai-lab-guardrail) { grid-column: 1 / -1; }
  .cp #support-center-page .support-ai-lab-inspector .support-ai-lab-workshop-card { margin-top: 0; }
}

@media (max-width: 900px) {
  .cp #support-center-page .support-view-all-area { grid-template-columns: 1fr; }
  .cp #support-center-page .support-ai-lab-layout { grid-template-columns: 1fr; }
  .cp #support-center-page .support-ai-lab-setup { border-right: 0; border-bottom: 1px solid var(--border-1); }
  .cp #support-center-page .support-ai-lab-inspector { grid-column: auto; grid-template-columns: 1fr; }
  .cp #support-center-page .support-ai-lab-chat { min-height: calc(var(--space-10) * 14); }
}

@media (max-width: 620px) {
  .cp #support-center-page .support-ai-lab-topbar { align-items: flex-start; flex-direction: column; }
  .cp #support-center-page .support-ai-lab-mode { margin-left: calc(var(--space-10) + var(--space-8)); }
  .cp #support-center-page .support-ai-lab-turn { max-width: 94%; }
  .cp #support-center-page .support-ai-lab-chat-head > button { width: calc(var(--space-8) + var(--space-1)); padding: 0; justify-content: center; font-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cp #support-center-page .support-ai-lab-turn,
  .cp #support-center-page .support-ai-lab-turn.is-thinking i { animation: none; }
  .cp #support-center-page :is(.support-ai-lab-channel button, .support-ai-lab-search, .support-ai-lab-customer-results > button, .support-ai-lab-ticket-list > button, .support-ai-lab-composer textarea, .support-ai-lab-composer button) { transition: none; }
}

/* fix/support-inbox-live: Yelp inbox connection-health notice.
   Reuses .support-all-connection-status (Dialpad feed status); only the
   two-line copy is specific. Created by app-support-center-yelp.js. */
.cp #support-center-page .support-yelp-connection-status strong {
  color: var(--content-1);
  font-weight: var(--weight-bold);
}

.cp #support-center-page .support-yelp-connection-status small {
  display: block;
  color: var(--content-2);
  font-size: var(--text-xs);
}

/* Support blocklist: "Blocked" trigger, Details-panel action and manager dialog. */
.cp #support-center-page .support-blocklist-trigger {
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--content-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cp #support-center-page .support-blocklist-trigger svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cp #support-center-page .support-blocklist-trigger:hover { border-color: color-mix(in srgb, var(--cp-accent) 45%, var(--border-1)); color: var(--content-1); }
.cp #support-center-page .support-blocklist-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cp #support-center-page .support-blocklist-section { display: grid; justify-items: start; gap: var(--space-2); }
.cp #support-center-page .support-blocklist-section small { color: var(--content-3); font-size: var(--text-xs); line-height: 1.4; }
.cp #support-center-page .support-blocklist-action {
  min-height: var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--cp-danger);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.cp #support-center-page .support-blocklist-action svg { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cp #support-center-page .support-blocklist-action:hover { border-color: color-mix(in srgb, var(--cp-danger) 45%, var(--border-1)); background: var(--cp-danger-soft); }
.cp #support-center-page .support-blocklist-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.support-blocklist-dialog .support-ops-dialog-card > p { margin: 0; color: var(--content-2); font-size: var(--text-sm); line-height: 1.5; }
.support-blocklist-dialog .support-ops-dialog-card footer button.is-danger,
.support-blocklist-add button.is-danger { border-color: var(--cp-danger); background: var(--cp-danger); color: var(--cp-accent-content); }
.support-blocklist-warning { margin: 0; display: flex; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--cp-warning) 12%, var(--surface)); color: var(--content-1); font-size: var(--text-sm); line-height: 1.45; }
.support-blocklist-warning svg { flex: 0 0 auto; color: var(--cp-warning); }
.support-blocklist-manager { width: min(640px, 100%); }
.support-blocklist-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; gap: var(--space-3); }
.support-blocklist-add button { min-height: var(--space-10); padding: 0 var(--space-4); border: 1px solid var(--border-1); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.support-blocklist-add button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.support-blocklist-list { margin: 0; padding: 0; display: grid; list-style: none; border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.support-blocklist-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.support-blocklist-row + .support-blocklist-row { border-top: 1px solid var(--border-1); }
.support-blocklist-row-main { min-width: 0; display: grid; gap: var(--space-1); }
.support-blocklist-row-main strong { color: var(--content-1); font-size: var(--text-sm); font-weight: var(--weight-black); }
.support-blocklist-label { color: var(--content-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.support-blocklist-row-main p { margin: 0; color: var(--content-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.support-blocklist-row-main small { color: var(--content-3); font-size: var(--text-xs); }
.support-blocklist-sync { width: fit-content; display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-pill, 999px); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.support-blocklist-sync svg { width: 12px; height: 12px; }
.support-blocklist-sync.is-synced { background: color-mix(in srgb, var(--cp-success) 11%, var(--surface)); color: var(--cp-success); }
.support-blocklist-sync.is-pending { background: color-mix(in srgb, var(--cp-warning) 12%, var(--surface)); color: var(--content-1); }
.support-blocklist-sync.is-error { background: var(--cp-danger-soft); color: var(--cp-danger); }
.support-blocklist-unblock { flex: 0 0 auto; min-height: var(--space-8); padding: 0 var(--space-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--surface); color: var(--content-1); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-bold); cursor: pointer; }
.support-blocklist-unblock.is-confirming { border-color: var(--cp-danger); color: var(--cp-danger); }
.support-blocklist-unblock:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.support-blocklist-empty { margin: 0; padding: var(--space-4); border: 1px dashed var(--border-1); border-radius: var(--radius-md); color: var(--content-3); font-size: var(--text-sm); text-align: center; }
@media (max-width: 640px) {
  .support-blocklist-add { grid-template-columns: 1fr; }
  .support-blocklist-row { flex-direction: column; }
  .cp #support-center-page .support-blocklist-trigger { align-self: flex-start; }
}

/* Customer tapbacks (Liked “…”, 👍 to “…”) shown as reactions on the quoted message. */
.cp #support-center-page .support-message-reactions {
  position: relative;
  z-index: 1;
  justify-self: end;
  display: inline-flex;
  gap: var(--space-1);
  margin: calc(var(--space-3) * -1) var(--space-2) 0;
}

.cp #support-center-page .support-message-event.is-outgoing .support-message-reactions {
  justify-self: start;
}

.cp #support-center-page .support-reaction {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--space-6);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  line-height: 1;
  cursor: default;
}

.cp #support-center-page .support-reaction small {
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: 600;
}

.cp #support-center-page .support-reaction-event {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  color: var(--content-2);
  font-size: var(--text-sm);
}

.cp #support-center-page .support-reaction-event p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp #support-center-page .support-reaction-event strong {
  color: var(--content-1);
}