@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
:root {
  --color-navy: #043873;
  --color-ink: #1f2428;
  --color-ink-soft: #2a2f34;
  --color-muted: #6b7280;
  --color-border: #d7dce2;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f7fb;
  --color-accent: #0b4aa6;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-soft: 0 18px 45px rgba(4, 56, 115, 0.12);
  --shadow-tight: 0 8px 20px rgba(31, 36, 40, 0.12);
  --app-header-height: 67px;
  --agent-top-nav-height: 64px;
  --app-chrome-height: var(--app-header-height);
  --shell-bg: #ffffff;
  --shell-bg-deep: #f8fafc;
  --shell-bg-hover: rgba(4, 56, 115, 0.06);
  --shell-bg-active: rgba(4, 56, 115, 0.1);
  --shell-border: #dce4ef;
  --shell-text: #172033;
  --shell-text-soft: #334155;
  --shell-text-muted: #66758a;
  --shell-accent: #0b4aa6;
  --header-bg: rgba(255, 255, 255, 0.96);
  --header-border: #dce4ef;
  --header-text: #172033;
  --header-muted: #637083;
  --app-grid-background: #f8f8f8;
  --app-grid-background-size: auto;
  --app-noise-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.55'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--app-grid-background);
  background-size: var(--app-grid-background-size);
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--app-noise-texture);
  background-size: 160px 160px;
  opacity: 0.1;
  mix-blend-mode: multiply;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  align-items: start;
  background: var(--app-grid-background);
  background-size: var(--app-grid-background-size);
}

.sidebar {
  display: none;
  background: var(--shell-bg);
  border: 1px solid var(--shell-border);
  border-radius: 0 0 18px 18px;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 0;
  width: 264px;
  max-height: 100vh;
  margin: 0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  z-index: 20;
  overflow: hidden;
  transition: height 0.26s ease, width 0.22s ease, box-shadow 0.22s ease, border-radius 0.22s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 60px;
  padding-left: 12px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--shell-border);
  margin-bottom: 14px;
}

.sidebar-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.sidebar-brand span {
  font-size: 16px;
  font-weight: 800;
  color: var(--shell-text);
  letter-spacing: 0.01em;
}

.sidebar-nav {
  flex: 0 1 auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--shell-text-muted);
  margin-top: 4px;
}

.sidebar-section-title + .sidebar-menu {
  margin-top: 4px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 0 1 auto;
  max-height: calc(100vh - 172px);
  display: grid;
  gap: 4px;
  align-content: start;
  grid-auto-rows: max-content;
  padding-right: 20px;
  margin-right: -20px;
  scrollbar-gutter: stable;
}

.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(4, 56, 115, 0.18);
  border-radius: 999px;
}

.sidebar-item {
  display: grid;
  gap: 6px;
}

.sidebar-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--shell-text-soft);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.sidebar-link:hover {
  background: var(--shell-bg-hover);
  color: var(--shell-text);
}

.sidebar-link-external .menu-external-icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shell-text-muted);
  flex-shrink: 0;
}

.sidebar-link-external .menu-external-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2px;
}

.sidebar-link-external:hover .menu-external-icon {
  color: var(--shell-text);
}


.sidebar-link.is-active {
  background: var(--shell-bg-active);
  border-color: rgba(4, 56, 115, 0.12);
  color: var(--shell-text);
}

.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 6px;
  width: 3px;
  border-radius: 999px;
  background: var(--shell-accent);
}

.sidebar-link.is-active .menu-icon svg {
  stroke: var(--shell-accent);
}

.menu-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.menu-icon {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shell-text-soft);
}

.menu-icon.small {
  width: 14px;
  height: 14px;
  color: var(--shell-text-muted);
}

.menu-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.8px;
}

.menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  display: grid;
  gap: 6px;
  position: relative;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
}

.submenu.is-collapsed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
}

.submenu:not(.is-collapsed) {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
}

.submenu::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(4, 56, 115, 0.12);
  border-radius: 999px;
}

.actions-integrations-list {
  padding-left: 0;
  margin-top: 6px;
}

.actions-integrations-list::before {
  display: none;
}

[data-actions-integrations-wrapper] > .submenu-link {
  padding-left: 12px;
}

.actions-integrations-list .submenu-link {
  padding-left: 12px;
}



.submenu-link {
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--shell-text-soft);
  background: transparent;
  border: 1px solid transparent;
}


.submenu-link:hover {
  background: var(--shell-bg-hover);
  color: var(--shell-text);
}

button.submenu-link.submenu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.submenu-link.is-active {
  background: var(--shell-bg-active);
  color: var(--shell-text);
  border-color: rgba(4, 56, 115, 0.12);
}

.hidden {
  display: none;
}

.submenu-link .menu-dot {
  width: 6px;
  height: 6px;
  background: rgba(4, 56, 115, 0.45);
}

.submenu-link .menu-label {
  width: 100%;
  justify-content: flex-start;
}

.voip-sidebar-submenu,
.copilot-sidebar-submenu {
  gap: 3px;
  padding-left: 24px;
}
.voip-sidebar-submenu::before,
.copilot-sidebar-submenu::before {
  left: 11px;
  width: 1px;
  background: color-mix(in srgb, var(--shell-text-muted) 32%, transparent);
}
.voip-sidebar-submenu .submenu-link,
.copilot-sidebar-submenu .submenu-link {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-size: 14px;
}
.voip-sidebar-submenu .menu-icon.small,
.voip-sidebar-submenu .menu-icon.small svg,
.copilot-sidebar-submenu .menu-icon.small,
.copilot-sidebar-submenu .menu-icon.small svg {
  width: 16px;
  height: 16px;
}
.voip-sidebar-submenu .submenu-link.is-active,
.copilot-sidebar-submenu .submenu-link.is-active { border-color: transparent; }

.app-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f7f9fb;
  z-index: 9999;
  opacity: 1;
  transition: opacity 260ms ease;
}

/* Workspace notification delivery settings. */
.notifications-page {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding-bottom: 56px;
}

.notifications-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.notifications-page-header h1 {
  margin: 0;
  color: #10213a;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.notifications-page-header p {
  max-width: 680px;
  margin: 10px 0 0;
  color: #607089;
  font-size: 16px;
  line-height: 1.55;
}

.notifications-page-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  padding-bottom: 2px;
}

.notification-save-status {
  min-width: 96px;
  color: #9a6a17;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.notification-save-status.is-saved {
  color: #18734d;
}

.notification-save-status.is-error {
  max-width: 360px;
  color: #b42318;
  line-height: 1.4;
}

.notification-loading-state,
.notification-load-error {
  border: 1px solid rgba(4, 56, 115, 0.13);
  border-radius: 12px;
  background: #ffffff;
}

.notification-loading-state {
  display: grid;
  gap: 12px;
  padding: 22px 24px;
  color: #51637a;
  font-size: 13px;
  font-weight: 700;
}

.notification-loading-state > div {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ecf3;
}

.notification-loading-state > div > span {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: #2768b2;
  animation: notification-loading-slide 1.1s ease-in-out infinite;
}

@keyframes notification-loading-slide {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(310%);
  }
}

.notification-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
}

.notification-load-error > div {
  display: grid;
  gap: 5px;
}

.notification-load-error strong {
  color: #7f1d1d;
}

.notification-load-error span {
  color: #8b5960;
  font-size: 13px;
}

.notification-load-error button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d8a7a2;
  border-radius: 8px;
  background: #fff8f7;
  color: #a2291f;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.notification-save-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #0a3f78;
  border-radius: 8px;
  background: #0a3f78;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.notification-save-button:hover:not(:disabled) {
  border-color: #2468ff;
  background: #2468ff;
}

.notification-save-button:disabled {
  border-color: #d6dee9;
  background: #e8edf3;
  color: #8996a8;
  cursor: default;
}

.notification-save-button svg {
  width: 15px;
  height: 15px;
}

.notification-save-button:focus-visible {
  outline: 3px solid rgba(36, 104, 255, 0.23);
  outline-offset: 2px;
}

.notification-channel-tabs {
  display: flex;
  gap: 28px;
  margin: 0 0 24px;
  overflow-x: auto;
  border-bottom: 1px solid #d8e0ea;
  scrollbar-width: none;
}

.notification-channel-tabs::-webkit-scrollbar {
  display: none;
}

.notification-channel-tab {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 8px;
  padding: 0 2px 14px;
  border: 0;
  background: transparent;
  color: #66758b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 160ms ease;
}

.notification-channel-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #0b4a8f;
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

.notification-channel-tab:hover,
.notification-channel-tab.is-active {
  color: #102846;
}

.notification-channel-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.notification-channel-tab svg {
  width: 17px;
  height: 17px;
}

.notification-channel-tab:focus-visible {
  outline: 3px solid rgba(36, 104, 255, 0.23);
  outline-offset: -2px;
}

.notification-channel-panel {
  animation: notification-panel-enter 180ms ease both;
}

@keyframes notification-panel-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-recipients,
.notification-webhook-card,
.notification-group {
  overflow: hidden;
  border: 1px solid #d9e1ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(15, 35, 62, 0.055);
}

.notification-recipients {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(380px, 1.2fr);
  gap: 42px;
  align-items: center;
  padding: 24px 26px;
  margin-bottom: 22px;
}

.notification-webhook-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(440px, 1.22fr);
  gap: 48px;
  align-items: start;
  padding: 24px 26px;
  margin-bottom: 22px;
}

.notification-webhook-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 14px;
}

.notification-channel-mark {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 10px;
  background: #eef3f9;
  color: #20466f;
}

.notification-channel-mark.is-slack {
  background: #f7eef8;
  color: #8a2f85;
}

.notification-channel-mark.is-discord {
  background: #eef0ff;
  color: #5865f2;
}

.notification-channel-mark.is-teams {
  background: #eeeffb;
  color: #5059c9;
}

.notification-channel-mark.is-webhook {
  background: #eef6f4;
  color: #157465;
}

.notification-channel-mark svg {
  width: 20px;
  height: 20px;
}

.notification-destination-title-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 12px;
}

.notification-webhook-heading h2 {
  margin: 0;
  color: #12233d;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.notification-webhook-heading p {
  max-width: 430px;
  margin: 6px 0 0;
  color: #6a7890;
  font-size: 14px;
  line-height: 1.5;
}

.notification-connection-status {
  padding: 4px 7px;
  border-radius: 5px;
  background: #eff2f6;
  color: #6d798a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.notification-connection-status.is-configured {
  background: #e9f5ef;
  color: #18734d;
}

.notification-webhook-settings {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.notification-webhook-field {
  min-width: 0;
  display: grid;
  grid-column: 1 / -1;
  gap: 7px;
}

.notification-webhook-field + .notification-webhook-field {
  grid-column: auto;
}

.notification-webhook-field > span {
  color: #32465f;
  font-size: 12px;
  font-weight: 750;
}

.notification-webhook-field small {
  margin-left: 5px;
  color: #8793a4;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.notification-webhook-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #cdd7e4;
  border-radius: 8px;
  background: #fff;
  color: #14243b;
  font-size: 13px;
  outline: none;
}

.notification-webhook-field input:focus {
  border-color: #2468ff;
  box-shadow: 0 0 0 3px rgba(36, 104, 255, 0.11);
}

.notification-webhook-field input::placeholder {
  color: #98a3b2;
}

.notification-webhook-meta {
  grid-column: 1 / -1;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.notification-webhook-meta > p {
  margin: 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.45;
}

.notification-webhook-meta > p.is-error {
  color: #bd322b;
}

.notification-delivery-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  color: #32465f;
  font-size: 12px;
  font-weight: 700;
}

.notification-recipients-heading,
.notification-group-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.notification-recipients-heading > span,
.notification-group-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 10px;
  background: #edf4ff;
  color: #2468ff;
}

.notification-recipients-heading svg,
.notification-group-icon svg {
  width: 20px;
  height: 20px;
}

.notification-recipients h2,
.notification-group-header h2 {
  margin: 0;
  color: #12233d;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.notification-recipients-heading p,
.notification-group-header p {
  margin: 5px 0 0;
  color: #6a7890;
  font-size: 14px;
  line-height: 1.5;
}

.notification-recipient-settings {
  min-width: 0;
}

.notification-recipient-list {
  display: flex;
  min-height: 30px;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.notification-recipient-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 5px 7px 5px 10px;
  border: 1px solid #d5dfeb;
  border-radius: 7px;
  background: #f7f9fc;
  color: #263952;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.notification-recipient-chip button {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #738197;
}

.notification-recipient-chip button:hover {
  background: #e7edf5;
  color: #10213a;
}

.notification-recipient-chip svg {
  width: 14px;
  height: 14px;
}

.notification-recipient-empty {
  align-self: center;
  color: #75839a;
  font-size: 13px;
}

.notification-recipient-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.notification-recipient-form input {
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #cdd7e4;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  color: #14243b;
  font-size: 14px;
  outline: none;
}

.notification-recipient-form input:focus {
  border-color: #2468ff;
  box-shadow: 0 0 0 3px rgba(36, 104, 255, 0.11);
}

.notification-recipient-form button[type="submit"] {
  height: 42px;
  padding: 0 17px;
  border: 1px solid #123b70;
  border-radius: 0 8px 8px 0;
  background: #123b70;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.notification-recipient-form button[type="submit"]:hover:not(:disabled) {
  border-color: #2468ff;
  background: #2468ff;
}

.notification-recipient-form input:disabled,
.notification-recipient-form button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.notification-recipient-helper {
  display: block;
  min-height: 18px;
  margin-top: 5px;
  color: #6b788d;
  font-size: 12px;
}

.notification-recipient-helper.is-error {
  color: #bd322b;
}

.notification-groups {
  display: grid;
  gap: 22px;
  transition: opacity 180ms ease, filter 180ms ease;
}

.notification-groups.is-disabled {
  opacity: 0.46;
  filter: saturate(0.55);
  pointer-events: none;
  user-select: none;
}

.notification-rules-disabled-note {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid #d9e1ec;
  border-radius: 9px;
  background: #f7f9fc;
  color: #66758a;
  font-size: 12px;
}

.notification-rules-disabled-note[hidden] {
  display: none;
}

.notification-rules-disabled-note svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #52657a;
}

.notification-group-header {
  padding: 23px 26px;
  border-bottom: 1px solid #e1e7ef;
  background: #f8fafc;
}

.notification-group-icon.is-copilot {
  background: #eaf5f5;
  color: #0d7c80;
}

.notification-rule-list {
  display: grid;
}

.notification-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto) 44px;
  gap: 24px;
  align-items: center;
  min-height: 88px;
  padding: 17px 26px;
  border-bottom: 1px solid #e7ebf1;
  transition: background-color 180ms ease;
}

.notification-rule:last-child {
  border-bottom: 0;
}

.notification-rule.is-enabled {
  background: #fff;
}

.notification-rule:not(.is-enabled) {
  background: #fbfcfd;
}

.notification-rule-copy strong {
  display: block;
  color: #172940;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.notification-rule-copy p {
  max-width: 690px;
  margin: 5px 0 0;
  color: #6d7a8f;
  font-size: 13px;
  line-height: 1.5;
}

.notification-rule-control {
  justify-self: end;
}

.notification-rule-static {
  color: #7a8799;
  font-size: 13px;
  font-weight: 600;
}

.notification-condition {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #ccd6e3;
  border-radius: 8px;
  background: #fff;
}

.notification-condition > span {
  padding: 0 10px;
  color: #69788d;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.notification-condition input,
.notification-condition select {
  height: 36px;
  border: 0;
  border-left: 1px solid #dde4ed;
  border-radius: 0;
  background-color: #fff;
  color: #15263e;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.notification-condition input {
  width: 76px;
  padding: 0 9px;
}

.notification-condition select {
  min-width: 78px;
  padding: 0 29px 0 10px;
}

.notification-condition input:focus,
.notification-condition select:focus {
  box-shadow: inset 0 0 0 2px rgba(36, 104, 255, 0.35);
}

.notification-condition input:disabled,
.notification-condition select:disabled {
  cursor: not-allowed;
  background: #f1f4f7;
  color: #9aa5b5;
}

.notification-rule:not(.is-enabled) .notification-rule-static,
.notification-rule:not(.is-enabled) .notification-condition {
  opacity: 0.62;
}

.notification-switch {
  position: relative;
  width: 42px;
  height: 24px;
  justify-self: end;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c9d2df;
  transition: background-color 180ms ease;
}

.notification-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 35, 62, 0.28);
  transition: transform 180ms ease;
}

.notification-switch.is-on {
  background: #2468ff;
}

.notification-switch.is-on span {
  transform: translateX(18px);
}

.notification-switch:focus-visible,
.notification-recipient-chip button:focus-visible,
.notification-recipient-form button:focus-visible {
  outline: 3px solid rgba(36, 104, 255, 0.28);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .notification-recipients,
  .notification-webhook-card {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .notification-rule {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 14px 20px;
  }

  .notification-rule-control {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .notification-switch {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 560px) {
  .notifications-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .notifications-page-actions {
    justify-content: space-between;
  }

  .notifications-page-header h1 {
    font-size: 34px;
  }

  .notification-load-error {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-load-error button {
    width: 100%;
  }

  .notification-recipients,
  .notification-webhook-card,
  .notification-group-header,
  .notification-rule {
    padding-right: 18px;
    padding-left: 18px;
  }

  .notification-recipient-form > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .notification-recipient-form input,
  .notification-recipient-form button[type="submit"] {
    width: 100%;
    border: 1px solid #cdd7e4;
    border-radius: 8px;
  }

  .notification-recipient-form button[type="submit"] {
    border-color: #123b70;
  }

  .notification-condition {
    max-width: 100%;
  }

  .notification-channel-tabs {
    gap: 20px;
  }

  .notification-webhook-settings {
    grid-template-columns: 1fr;
  }

  .notification-webhook-field + .notification-webhook-field,
  .notification-webhook-meta {
    grid-column: 1;
  }

  .notification-webhook-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notification-channel-panel,
  .notification-loading-state > div > span {
    animation: none;
  }
}

/* Portal activation boundary */
.portal-activation-page,
.portal-activation-checkout-page,
.portal-activation-loading-page {
  position: relative;
  min-height: calc(100dvh - 112px);
  padding: 28px;
}

.portal-activation-loading-page {
  place-items: center;
}

.portal-activation-page {
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.portal-activation-skeleton {
  position: absolute;
  inset: 28px;
  overflow: hidden;
  border: 1px solid #d9e2ef;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 18px 48px rgba(15, 35, 64, 0.06);
}

.portal-activation-skeleton-head {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  border-bottom: 1px solid #dfe6f0;
  background: #ffffff;
}

.portal-activation-skeleton-head > div {
  display: grid;
  gap: 12px;
}

.portal-activation-skeleton-head span,
.portal-activation-skeleton-head > i,
.portal-activation-skeleton-body aside span,
.portal-activation-skeleton-row i,
.portal-activation-skeleton-avatar,
.portal-activation-skeleton-chip {
  display: block;
  border-radius: 7px;
  background: #dfe7f1;
}

.portal-activation-skeleton-head span:first-child {
  width: 210px;
  height: 22px;
}

.portal-activation-skeleton-head span:last-child {
  width: 330px;
  max-width: 45vw;
  height: 12px;
}

.portal-activation-skeleton-head > i {
  width: 132px;
  height: 40px;
}

.portal-activation-skeleton-body {
  display: grid;
  min-height: 470px;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
}

.portal-activation-skeleton-body aside {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 28px;
  border-right: 1px solid #dfe6f0;
  background: #f2f6fb;
}

.portal-activation-skeleton-body aside span {
  width: 100%;
  height: 42px;
}

.portal-activation-skeleton-body aside span:first-child {
  width: 68%;
  height: 16px;
  margin-bottom: 8px;
}

.portal-activation-skeleton-body main {
  display: grid;
  align-content: start;
  gap: 1px;
  margin: 28px;
  overflow: hidden;
  border: 1px solid #dfe6f0;
  border-radius: 13px;
  background: #dfe6f0;
}

.portal-activation-skeleton-row {
  display: grid;
  min-height: 74px;
  grid-template-columns: 38px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: #ffffff;
}

.portal-activation-skeleton-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.portal-activation-skeleton-copy {
  display: grid;
  gap: 9px;
}

.portal-activation-skeleton-copy i:first-child {
  width: min(220px, 70%);
  height: 12px;
}

.portal-activation-skeleton-copy i:last-child {
  width: min(340px, 88%);
  height: 9px;
  background: #edf1f6;
}

.portal-activation-skeleton-chip {
  width: 82px;
  height: 26px;
}

.portal-activation-tint {
  position: absolute;
  inset: 28px;
  z-index: 1;
  border-radius: 16px;
  background: rgba(240, 245, 251, 0.76);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.portal-activation-card {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(520px, calc(100vw - 56px));
  flex-direction: column;
  align-items: flex-start;
  padding: 34px;
  border: 1px solid #d2ddec;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 72px rgba(15, 35, 64, 0.16);
}

.portal-activation-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 13px;
  color: #0b4f91;
  background: #eaf3ff;
}

.portal-activation-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}

.portal-activation-label {
  margin-bottom: 8px;
  color: #51677f;
  font-size: 13px;
  font-weight: 700;
}

.portal-activation-card h1 {
  margin: 0;
  color: #10213a;
  font-size: clamp(27px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.portal-activation-card > p {
  max-width: 47ch;
  margin: 14px 0 0;
  color: #52677f;
  font-size: 16px;
  line-height: 1.58;
}

.portal-activation-requirement {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  margin: 25px 0 20px;
  padding: 14px 15px;
  border: 1px solid #dbe5f1;
  border-radius: 11px;
  color: #344a63;
  background: #f5f8fc;
  font-size: 14px;
  line-height: 1.4;
}

.portal-activation-requirement svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #2d6daf;
}

.portal-activation-card .button {
  min-width: 132px;
  min-height: 44px;
  border-radius: 10px;
}

.portal-activation-card .button:active {
  transform: translateY(1px);
}

.portal-activation-checkout-page {
  max-width: 1380px;
  margin: 0 auto;
  animation: portal-activation-checkout-enter 280ms cubic-bezier(0.22, 0.72, 0.28, 1) both;
}

.portal-activation-checkout-page .portal-billing-shell.is-onboarding {
  min-height: 500px;
}

@keyframes portal-activation-checkout-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .portal-activation-page,
  .portal-activation-checkout-page,
  .portal-activation-loading-page {
    min-height: calc(100dvh - 88px);
    padding: 16px;
  }

  .portal-activation-skeleton,
  .portal-activation-tint {
    inset: 16px;
  }

  .portal-activation-skeleton-body {
    grid-template-columns: 1fr;
  }

  .portal-activation-skeleton-body aside {
    display: none;
  }

  .portal-activation-skeleton-body main {
    margin: 16px;
  }

  .portal-activation-card {
    width: min(100%, 520px);
    padding: 26px 22px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .portal-activation-checkout-page {
    animation: none;
  }
}

.app-loader-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 32px;
}

.app-loader-status {
  width: min(240px, 100%);
  display: grid;
  gap: 8px;
  animation: loader-status-enter 360ms ease both;
}

.app-loader-text {
  color: #172d44;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-loader-progress {
  width: 100%;
  height: 2px;
  margin-top: 3px;
  overflow: hidden;
  background: #dce4ea;
}

.app-loader-progress > span {
  display: block;
  width: 38%;
  height: 100%;
  background: #1a5c78;
  animation: loader-progress 1.15s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.app-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes loader-status-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loader-progress {
  from { transform: translateX(-105%); }
  to { transform: translateX(265%); }
}

@media (max-width: 700px) {
  .app-loader-stage {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loader-status,
  .app-loader-progress > span {
    animation: none;
  }

  .app-loader-progress > span {
    width: 100%;
    opacity: 0.55;
  }
}

.app-shell.is-loading {
  visibility: hidden;
}

.submenu-meta .submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.chevron {
  font-size: 12px;
  color: var(--shell-text-muted);
  transition: transform 0.2s ease;
}

.menu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(4, 56, 115, 0.45);
  display: inline-block;
}

.sidebar-link.is-open .chevron {
  transform: rotate(180deg);
}

.sidebar-credits {
  border-top: 1px solid var(--shell-border);
  padding-top: 12px;
  display: grid;
  gap: 8px;
  color: var(--shell-text-soft);
}

.untrained-card {
  border: 1px solid rgba(234, 179, 8, 0.5);
  background: rgba(234, 179, 8, 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.untrained-copy {
  display: grid;
  gap: 4px;
}

.untrained-title {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
}

.untrained-subtitle {
  font-size: 11px;
  color: #92400e;
}

.untrained-card .button-ghost {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
}

.untrained-status {
  font-size: 12px;
  color: var(--color-muted);
}

.untrained-hint {
  position: fixed;
  z-index: 80;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  color: #111827;
}

.untrained-hint::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fff;
  filter: drop-shadow(-1px 0 0 rgba(15, 23, 42, 0.12));
}

.untrained-hint button {
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: 6px;
}

.untrained-hint-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 6px;
}

.untrained-hint-body {
  line-height: 1.4;
  color: #4b5563;
}

.agent-top-training.untrained-card {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  margin-left: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.agent-top-training .untrained-subtitle {
  display: none;
}

.agent-training-button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #e6b95d;
  border-radius: 8px;
  background: #fffaf0;
  color: #8a5707;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}

.agent-training-button:hover {
  border-color: #d7a53e;
  background: #fff5dc;
}

.agent-training-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.untrained-hint::before {
  top: -8px;
  right: 18px;
  left: auto;
  border-top: 0;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
  filter: drop-shadow(0 -1px 0 rgba(15, 23, 42, 0.12));
}

.storage-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--shell-text-soft);
}

.storage-meta strong {
  font-weight: 600;
}

.credits-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--shell-text);
}

.credits-bar {
  height: 8px;
  background: #dbe5f0;
  border-radius: 999px;
  overflow: hidden;
}

.credits-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0b4aa6, #4ea7d8);
  transition: width 0.4s ease;
}

.credits-meta {
  font-size: 12px;
  color: var(--shell-text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credits-meta [data-credits-usage],
.credits-meta [data-credits-extra] {
  color: var(--shell-text-soft);
  font-weight: 600;
}

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-grid-background);
  background-size: var(--app-grid-background-size);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--header-border);
  padding: 0 24px;
}

.app-header-inner {
  width: min(100%, 1480px);
  margin: 0 auto;
  min-height: var(--app-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.agent-top-nav {
  width: min(100%, 1480px);
  min-height: var(--agent-top-nav-height);
  height: var(--agent-top-nav-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid rgba(220, 228, 239, 0.72);
}

.agent-top-nav[hidden] {
  display: none;
}

.agent-top-back,
.agent-top-link,
.agent-top-menu-panel button {
  border: 0;
  background: transparent;
  color: #334155;
  font: inherit;
  cursor: pointer;
}

.agent-top-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  padding: 0 10px 0 0;
  color: #0b4aa6;
  font-size: 13px;
  font-weight: 800;
}

.agent-top-back svg,
.agent-top-link svg {
  width: 15px;
  height: 15px;
}

.agent-top-nav-scroll {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow: visible;
  scrollbar-width: none;
}

.agent-top-nav-scroll::-webkit-scrollbar {
  display: none;
}

.agent-top-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: max-content;
  padding: 0;
  color: #52627a;
  font-size: 13px;
  font-weight: 800;
}

.agent-top-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: #0b4aa6;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.agent-top-link:hover,
.agent-top-link.is-active,
.agent-top-menu.is-active > .agent-top-link {
  color: #081834;
}

.agent-top-link.is-active::after,
.agent-top-menu.is-active > .agent-top-link::after {
  opacity: 1;
  transform: scaleX(1);
}

.agent-top-menu {
  position: relative;
  display: flex;
  align-items: stretch;
}

.agent-top-menu-panel {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  min-width: 210px;
  padding: 7px;
  border: 1px solid rgba(203, 216, 236, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.agent-top-menu.is-open .agent-top-menu-panel {
  display: grid;
  gap: 2px;
}

.agent-top-menu-panel button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.agent-top-menu-panel button:hover,
.agent-top-menu-panel button.is-active {
  background: #edf4fb;
  color: #0b4aa6;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  color: var(--header-text);
  font-size: 16px;
  font-weight: 800;
}

.header-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.header-center {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  gap: 12px;
}

.mobile-header-brand {
  display: none;
}

body.nav-locked .sidebar-nav,
body.nav-locked .sidebar-credits {
  display: none;
}

body.workspace-selected:not(.agent-selected) .sidebar-nav [data-nav-item] {
  display: none;
}

body.workspace-selected:not(.agent-selected) .sidebar-nav [data-nav-section] {
  display: none;
}

body.workspace-selected:not(.agent-selected) .sidebar-nav [data-pre-agent-section] {
  display: list-item;
}

body.workspace-selected:not(.agent-selected) .sidebar-nav [data-pre-agent-item] {
  display: list-item;
}

body.workspace-selected.agent-selected .sidebar-nav [data-nav-section],
body.workspace-selected.agent-selected .sidebar-nav [data-nav-item] {
  display: none;
}

body.workspace-selected.agent-selected .sidebar-nav [data-pre-agent-section],
body.workspace-selected.agent-selected .sidebar-nav [data-settings-section],
body.workspace-selected.agent-selected .sidebar-nav [data-settings-item],
body.workspace-selected.agent-selected .sidebar-nav [data-pre-agent-item] {
  display: none;
}

body.workspace-selected.agent-selected .sidebar-nav [data-agent-nav-root] {
  display: list-item;
}

body.dispatcher-context .sidebar-nav [data-pre-agent-section],
body.dispatcher-context .sidebar-nav [data-pre-agent-item] {
  display: none;
}

body.dispatcher-context .sidebar-nav [data-agent-nav-root] {
  display: list-item;
}

body.dispatcher-context .sidebar-nav [data-nav-section],
body.dispatcher-context .sidebar-nav [data-nav-item] {
  display: none;
}

body.dispatcher-context .sidebar-nav [data-dispatcher-nav-section],
body.dispatcher-context .sidebar-nav [data-dispatcher-nav-item] {
  display: none;
}

body.workspace-selected:not(.agent-selected) .sidebar-nav [data-settings-section],
body.workspace-selected:not(.agent-selected) .sidebar-nav [data-settings-item] {
  display: list-item;
}

body.workspace-selected:not(.agent-selected) .sidebar-credits [data-sidebar-storage] {
  display: none;
}

body.workspace-selected:not(.agent-selected) .sidebar-credits [data-untrained-card],
body.workspace-selected:not(.agent-selected) .sidebar-credits [data-untrained-status] {
  display: none !important;
}

body.workspace-selected:not(.workspace-owner) .sidebar-nav [data-settings-section],
body.workspace-selected:not(.workspace-owner) .sidebar-nav [data-settings-item] {
  display: none;
}

[data-pre-agent-section],
[data-pre-agent-item] {
  display: none;
}

[data-dispatcher-nav-section],
[data-dispatcher-nav-item] {
  display: none;
}

.agent-nested-nav {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  gap: 5px;
  animation: nav-panel-slide 0.24s ease both;
}

.agent-nested-nav::before {
  display: none;
}

body.agent-selected:not(.dispatcher-context) .agent-nested-nav.is-agent-nav,
body.agent-selected.dispatcher-context .agent-nested-nav.is-dispatcher-nav {
  display: grid;
}

body.agent-selected .sidebar-nav [data-agent-nav-root] > .sidebar-link {
  display: none;
}

.agent-nested-current {
  min-width: 0;
  padding: 8px 10px 4px;
  color: var(--shell-text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-back-link {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--shell-accent);
  background: rgba(4, 56, 115, 0.06);
  border: 1px solid rgba(4, 56, 115, 0.1);
}

.nav-back-link:hover {
  background: rgba(4, 56, 115, 0.1);
}

@keyframes nav-panel-slide {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[data-pre-agent-section][hidden],
[data-pre-agent-item][hidden],
[data-dispatcher-nav-section][hidden],
[data-dispatcher-nav-item][hidden] {
  display: none !important;
}

.header-context {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--header-muted);
}

.header-link {
  border: none;
  background: none;
  padding: 0;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
}

.header-link:hover {
  text-decoration: underline;
}

.header-separator {
  color: var(--header-muted);
  font-weight: 500;
}

.header-separator.is-hidden {
  display: none;
}

.header-agent {
  color: var(--header-text);
  cursor: pointer;
}

.header-agent:hover {
  text-decoration: underline;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--header-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  flex: 1;
}

.icon-link {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--header-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--header-text);
  background: #ffffff;
}

.icon-link:hover {
  background: #f4f7fb;
  border-color: #c8d4e3;
}

.user-name {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--header-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.user-menu {
  position: relative;
}

.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-tight);
  padding: 8px;
  min-width: 160px;
  display: none;
  z-index: 40;
}

.user-menu.is-open .user-dropdown {
  display: grid;
  gap: 6px;
}

.user-dropdown button {
  border: none;
  background: rgba(4, 56, 115, 0.06);
  color: var(--color-ink);
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}

.user-dropdown button:hover {
  background: rgba(4, 56, 115, 0.12);
}

.button {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}

.button-primary {
  background: var(--color-navy);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.button-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-ink);
}

.icon-button {
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-ink);
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.menu-toggle {
  padding: 8px 10px;
  display: none;
  flex-direction: column;
  align-items: center;
}

.menu-line {
  width: 18px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 999px;
  display: block;
}


.content {
  padding: 32px 32px 48px;
  background: var(--app-grid-background);
  background-size: var(--app-grid-background-size);
}

body.activity-full .content,
body.playground-full .content,
body.chat-page-full .content,
body.apps-full .content,
body.human-agents-full .content,
body.dynamic-sources-full .content,
body.live-channels-full .content {
  padding: 0;
}

body.apps-full .app-shell,
body.apps-full .main {
  height: 100vh;
}

body.apps-full .main {
  min-height: 0;
  overflow: hidden;
}

body.apps-full .content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body.apps-full .workspace {
  min-height: 100%;
}

body.human-agents-full .content {
  padding: 24px 32px 48px;
}

body.human-agents-full .workspace {
  width: min(100%, 1480px);
  margin: 0 auto;
}

.human-agents-page {
  min-height: calc(100vh - var(--app-header-height) - 72px);
}

.human-agents-page .apps-users-table {
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.workspace {
  min-height: calc(100vh - 160px);
  transition: opacity 0.2s ease;
}

.workspace.is-fading {
  opacity: 0;
}

html[data-dashboard-theme="dark"] body:has(.workspace.is-fading),
html[data-dashboard-theme="dark"] body:has(.workspace.is-fading) :is(.app-shell, .main, .content),
html[data-dashboard-theme="dark"] .workspace.is-fading {
  background: #111214 !important;
  background-image: none !important;
}


.workspace-ready {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  box-shadow: var(--shadow-tight);
  padding: 24px;
  max-width: 520px;
  font-weight: 600;
  color: #111827;
}

.workspace-page {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: none;
}

.workspace-select-page {
  min-height: calc(100vh - var(--app-header-height) - 96px);
  align-content: center;
  justify-items: center;
  text-align: center;
}

.workspace-select-page .page-header {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.workspace-select-page .page-header p {
  max-width: 520px;
}

.workspace-select-page .select-grid {
  width: min(100%, 760px);
  justify-content: center;
}

.team-page {
  align-content: start;
  justify-items: stretch;
  gap: 20px;
  text-align: left;
}

.activity-page {
  display: grid;
  grid-template-columns: minmax(300px, 38%) minmax(0, 62%);
  gap: 0;
  align-items: stretch;
  min-height: calc(100vh - 80px);
  height: calc(100vh - 80px);
}

.activity-list,
.activity-detail {
  min-height: 100%;
  height: 100%;
}

.activity-list {
  background: #f8fafc;
  border-right: 1px solid rgba(4, 56, 115, 0.1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 16px 0;
}

.activity-detail {
  background: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.activity-header-text h1 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.activity-header-text p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 12px;
}

.activity-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.activity-actions .icon-button.is-active-filter {
  background: rgba(4, 56, 115, 0.1);
  color: var(--color-navy);
}

.activity-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 10px;
  padding: 0 12px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}

.activity-search:focus-within {
  border-color: rgba(4, 56, 115, 0.4);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.06);
}

.activity-search i {
  color: var(--color-muted);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.activity-search input {
  flex: 1;
  border: none;
  background: none;
  padding: 9px 0;
  font-size: 13px;
  color: #111827;
  outline: none;
}

.activity-search input::placeholder {
  color: #9ca3af;
}

.activity-filters {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.activity-filters.is-collapsed {
  display: none;
}

.activity-filters-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.activity-filters label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.activity-filters input,
.activity-filters select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  font-size: 12px;
  background: #f8fafc;
  color: #111827;
}

.activity-clear-filters {
  margin-top: 10px;
  border: none;
  background: none;
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.activity-count {
  display: block;
  font-size: 11px;
  color: var(--color-muted);
  margin-bottom: 6px;
  padding: 0 2px;
}

.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 2px 20px;
  min-width: 0;
}

.conversation-card {
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  flex-shrink: 0;
}

.conversation-card:hover {
  border-color: rgba(4, 56, 115, 0.25);
  box-shadow: 0 2px 8px rgba(4, 56, 115, 0.06);
}

.conversation-card.is-active {
  background: #fff;
  border-color: var(--color-navy);
  box-shadow: 0 4px 14px rgba(4, 56, 115, 0.12);
}

.conversation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.conversation-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(4, 56, 115, 0.07);
  color: var(--color-navy);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.conversation-time {
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
}

.conversation-title {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  min-height: 1.4em;
}

.conversation-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 1.4em;
}

.conversation-subtitle {
  display: block;
  font-size: 11.5px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.conversation-count {
  font-size: 10.5px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

.activity-load-more {
  margin-top: 4px;
  border: 1px dashed rgba(4, 56, 115, 0.2);
  background: none;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}

.activity-load-more:hover {
  background: rgba(4, 56, 115, 0.04);
  border-color: rgba(4, 56, 115, 0.35);
}

.activity-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-muted);
}

.activity-empty-state i {
  width: 36px;
  height: 36px;
  opacity: 0.35;
}

.activity-empty-state p {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
}

.activity-empty-state span {
  font-size: 12px;
  color: #9ca3af;
  max-width: 220px;
  line-height: 1.5;
}

.activity-empty-state.detail-empty {
  padding: 80px 40px;
}

.activity-empty-state.detail-empty i {
  width: 48px;
  height: 48px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
  padding: 14px 16px 12px 20px;
  background: #fafbfc;
}

.detail-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.detail-header-source {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.detail-header-source h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-menu {
  position: relative;
  flex-shrink: 0;
}

.detail-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 12px;
  box-shadow: var(--shadow-tight);
  padding: 6px;
  display: none;
  min-width: 190px;
  z-index: 5;
}

.detail-menu.is-open .detail-dropdown {
  display: grid;
}

.detail-dropdown button {
  border: none;
  background: rgba(180, 35, 24, 0.07);
  color: #b42318;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.detail-dropdown button i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.detail-tabs {
  display: inline-flex;
  gap: 4px;
  background: rgba(4, 56, 115, 0.06);
  border-radius: 8px;
  padding: 3px;
}

.detail-tabs .tab {
  border: none;
  background: none;
  padding: 5px 12px;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.detail-tabs .tab.is-active {
  background: #fff;
  color: var(--color-navy);
  box-shadow: 0 1px 4px rgba(4, 56, 115, 0.1);
}

.detail-body {
  padding: 20px 20px 24px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.detail-body.hidden {
  display: none;
}

.detail-body[data-tab-content="chat"] {
  flex: 1;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

.chat-message {
  display: grid;
  gap: 5px;
  min-width: 0;
  align-content: start;
  align-items: start;
}

.chat-message .bubble {
  padding: 10px 14px;
  border-radius: 16px;
  width: fit-content;
  max-width: 75%;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  min-width: 0;
  height: fit-content;
  align-self: start;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message.user {
  justify-items: end;
}

.chat-message.user .bubble {
  background: #111827;
  color: #fff;
  border-bottom-right-radius: 4px;
  justify-self: end;
}

.chat-message.bot .bubble {
  background: #f1f5f9;
  color: #111827;
  border-bottom-left-radius: 4px;
  justify-self: start;
  width: fit-content;
  max-width: 75%;
  display: block;
  overflow: visible;
}

.chat-message.bot .bubble > *:first-child {
  margin-top: 0;
}

.chat-message.bot .bubble > *:last-child {
  margin-bottom: 0;
}

.chat-message.bot .bubble :where(p, ul, ol, li, blockquote, pre) {
  margin-block-start: 0;
  margin-block-end: 0;
}

.chat-message.bot .bubble p {
  margin: 0 0 0.28em;
}

.chat-message.bot .bubble ul,
.chat-message.bot .bubble ol {
  margin: 0.12em 0 0.28em;
  padding-left: 1.1em;
}

.chat-message.bot .bubble li + li {
  margin-top: 0.08em;
}

.chat-message.bot .bubble p + ul,
.chat-message.bot .bubble p + ol {
  margin-top: 0.08em;
}

.chat-message.bot .bubble ul + p,
.chat-message.bot .bubble ol + p {
  margin-top: 0.16em;
}

.chat-time {
  font-size: 10.5px;
  color: #9ca3af;
  padding: 0 4px;
}

.chat-message.user .chat-time {
  justify-self: end;
}

.details-grid {
  display: grid;
  gap: 0;
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.details-grid div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.07);
}

.details-grid div:last-child {
  border-bottom: none;
}

.details-grid div:nth-child(odd) {
  background: #fafbfc;
}

.details-grid span {
  color: var(--color-muted);
  font-size: 12px;
}

.details-grid strong {
  font-weight: 600;
  color: #111827;
}

@media (max-width: 980px) {
  .activity-page {
    grid-template-columns: 1fr;
  }
}

.page-header h1 {
  margin: 0 0 8px;
  font-size: 30px;
}

.page-header p {
  margin: 0;
  color: var(--color-ink-soft);
}

.select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
  gap: 20px;
  align-items: stretch;
  justify-content: start;
}

.agent-slot-section {
  margin-bottom: 22px;
}

.agent-slot-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.agent-slot-section h2 {
  margin: 0;
  font-size: 20px;
}

.agent-inline-usage {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
}

.section-helper {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--color-muted);
}

.agent-empty-state {
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  background: #fff;
  padding: 24px;
  box-shadow: var(--shadow-tight);
}

.create-form-shell {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 22px 24px 28px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(4, 56, 115, 0.28) transparent;
}

.create-kind-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
}

.create-kind-tab {
  border: none;
  background: none;
  padding: 0 0 10px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.create-kind-tab.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.create-kind-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.identity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}

.create-form-actions {
  justify-content: flex-end;
  margin-left: auto;
}

.create-form-actions .button-ghost {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #374151;
  box-shadow: none;
}

.create-form-actions .button-ghost:hover {
  background: #d1d5db;
  border-color: #c4cad3;
}

.create-form {
  display: grid;
  gap: 0;
}

.create-agent-modal-card .identity-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-bottom: 4px;
}

.agent-empty-state.dispatcher-create-state {
  width: min(100%, 860px);
  margin: 0 auto;
}

.agents-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.agents-toolbar h1 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.2;
  color: #0f172a;
}

.agents-toolbar-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.agents-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-capacity-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--color-muted);
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.agent-capacity-pill strong {
  color: var(--color-navy);
  font-size: 14px;
}

.agents-roster-page .agent-slot-section {
  margin-bottom: 24px;
}

.agents-roster-page .agent-slot-section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.agents-roster-page .agent-slot-section h2 {
  font-size: 15px;
  line-height: 1.2;
  color: #111827;
}

.agents-roster-page .section-helper {
  margin: 0;
}

.agent-roster-list {
  display: grid;
  gap: 8px;
}

.agent-roster-row.agent-slot-card {
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 40px minmax(220px, 1fr) minmax(230px, auto) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  cursor: default;
  position: relative;
  overflow: visible;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.agent-roster-row.agent-slot-card:has(.card-menu.is-open) {
  z-index: 30;
}

.agent-roster-row.agent-slot-card[data-slot-active="true"][data-agent-id],
.agent-roster-row.agent-slot-card.create-card[data-open-create] {
  cursor: pointer;
}

.agent-roster-row.agent-slot-card:hover {
  border-color: rgba(4, 56, 115, 0.2);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.agent-roster-row.agent-slot-card.is-inactive-slot {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.18);
  box-shadow: none;
  opacity: 1;
}

.agent-row-reorder {
  width: 40px;
  min-height: 62px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  color: #94a3b8;
}

.agent-row-reorder .drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: grab;
}

.agent-row-reorder .drag-handle:hover {
  background: rgba(4, 56, 115, 0.06);
  color: var(--color-navy);
}

.agent-row-reorder .drag-handle svg,
.agent-row-lock svg,
.agent-row-add-icon svg {
  width: 17px;
  height: 17px;
}

.agent-row-add-icon {
  display: inline-flex;
  color: var(--color-navy);
}

.agent-row-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.agent-row-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(4, 56, 115, 0.07);
  color: var(--color-navy);
}

.agent-row-icon svg {
  width: 17px;
  height: 17px;
}

.agent-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-row-copy strong {
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.agent-row-copy span {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.25;
}

.agent-row-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.agent-type-pill,
.agent-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.agent-type-pill {
  color: #334155;
  background: #f1f5f9;
}

.agent-status-pill.is-active {
  color: #116149;
  background: rgba(17, 97, 73, 0.1);
}

.agent-status-pill.is-inactive {
  color: #7c2d12;
  background: rgba(234, 88, 12, 0.1);
}

.agent-status-pill.is-empty {
  color: var(--color-navy);
  background: rgba(4, 56, 115, 0.08);
}

.agent-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 10px;
  position: relative;
  z-index: 5;
}

.agent-row-note {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
}

.agent-roster-row.agent-slot-card[data-drag-over="true"] {
  border-color: rgba(4, 56, 115, 0.42);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.1);
  transform: translateY(-1px);
}

.agent-roster-row.agent-slot-card.is-dragging {
  opacity: 0.56;
  transform: scale(0.99);
}

.dispatcher-agent-shell {
  display: flex;
  justify-content: center;
}

.dispatcher-agent-card {
  width: min(760px, 100%);
}

.dispatcher-agent-header {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.dispatcher-agent-header h2 {
  margin: 0;
  font-size: 30px;
}

.dispatcher-agent-header p {
  margin: 0;
  color: var(--color-ink-soft);
}

.dispatcher-intake-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px 48px;
  container: dispatcher-intake / inline-size;
}

.dispatcher-intake-shell {
  display: grid;
  gap: 18px;
}

.dispatcher-intake-header {
  padding: 24px 28px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(38, 50, 71, 0.05), rgba(20, 184, 166, 0.08)),
    #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.dispatcher-intake-kicker {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dispatcher-intake-header h2 {
  margin: 6px 0 0;
  color: var(--color-ink);
  font-size: 36px;
  line-height: 1.05;
}

.dispatcher-intake-header p {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.dispatcher-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 22px;
}

.dispatcher-config-stack {
  display: grid;
  gap: 14px;
}

.dispatcher-intake-form {
  display: grid;
  gap: 14px;
}

.dispatcher-name-section {
  border-color: rgba(20, 184, 166, 0.34);
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.06), transparent 54%),
    #fff;
}

.dispatcher-name-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.dispatcher-identity-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.dispatcher-identity-field > span,
.dispatcher-identity-field > label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.dispatcher-identity-field > input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--color-ink);
  font: inherit;
  font-weight: 700;
}

.dispatcher-identity-field > input:focus {
  border-color: rgba(4, 56, 115, 0.32);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.08);
  outline: none;
}

.dispatcher-timezone-picker {
  position: relative;
  min-width: 0;
}

.dispatcher-timezone-field {
  grid-column: 1;
  grid-row: 2;
}

.dispatcher-timezone-trigger {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.dispatcher-timezone-trigger:hover {
  border-color: rgba(4, 56, 115, 0.28);
}

.dispatcher-timezone-trigger:focus-visible,
.dispatcher-timezone-picker.is-open .dispatcher-timezone-trigger {
  border-color: rgba(4, 56, 115, 0.38);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.08);
  outline: none;
}

.dispatcher-timezone-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatcher-timezone-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--color-muted);
}

.dispatcher-timezone-popover {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 8px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.dispatcher-timezone-search-wrap {
  position: relative;
}

.dispatcher-timezone-search-wrap svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.dispatcher-timezone-search-wrap input {
  width: 100%;
  height: 38px;
  padding: 0 10px 0 34px;
  border: 1px solid rgba(4, 56, 115, 0.15);
  border-radius: 7px;
  background: #f8fafc;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
}

.dispatcher-timezone-search-wrap input:focus {
  border-color: rgba(4, 56, 115, 0.34);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.07);
  outline: none;
}

.dispatcher-timezone-options {
  max-height: 248px;
  margin-top: 7px;
  display: grid;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dispatcher-timezone-option {
  width: 100%;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.dispatcher-timezone-option:hover,
.dispatcher-timezone-option:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.dispatcher-timezone-option[aria-selected="true"] {
  background: rgba(20, 184, 166, 0.1);
  color: #0f766e;
}

.dispatcher-timezone-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatcher-timezone-option small {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
}

.dispatcher-timezone-empty {
  margin: 8px 4px 2px;
  padding: 12px;
  color: var(--color-muted);
  font-size: 12.5px;
  text-align: center;
}

.dispatcher-name-form > .field-count,
.dispatcher-name-form > .form-helper {
  align-self: center;
}

.dispatcher-name-form > .field-count {
  color: var(--color-muted);
  font-size: 12px;
}

.dispatcher-name-form .button.button-primary {
  height: 44px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid #111827;
  border-radius: 7px;
  background: #111827;
  color: #ffffff;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
}

.dispatcher-name-form .button.button-primary:hover {
  border-color: #050a12;
  background: #050a12;
}

.dispatcher-name-form .button.button-primary:active {
  transform: translateY(1px);
}

.dispatcher-intake-section {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 28px;
  padding: 20px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.dispatcher-intake-section:first-child {
  padding-top: 20px;
}

.dispatcher-intake-section-header {
  display: grid;
  align-content: start;
  gap: 10px;
}

.dispatcher-intake-section-header h3 {
  margin: 0;
  font-size: 17px;
  color: var(--color-ink);
  line-height: 1.2;
}

.dispatcher-section-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dispatcher-intake-section-header p {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.55;
}

.dispatcher-intake-list {
  display: grid;
  gap: 10px;
}

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

.dispatcher-intake-row {
  min-height: 74px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 1px 0 rgba(4, 56, 115, 0.04);
}

.dispatcher-intake-row > div {
  display: grid;
  gap: 5px;
}

.dispatcher-intake-row strong {
  color: var(--color-ink);
  font-size: 14px;
}

.dispatcher-intake-row span {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.35;
}

.dispatcher-ai-routing-panel {
  display: grid;
  gap: 12px;
}

.dispatcher-ai-routing-master {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 8px;
  background: #f8fafc;
}

.dispatcher-ai-routing-master > div {
  display: grid;
  gap: 5px;
}

.dispatcher-ai-routing-master strong {
  color: var(--color-ink);
  font-size: 15px;
}

.dispatcher-ai-routing-master span {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.45;
}

.dispatcher-ai-routing-list {
  transition: opacity 0.16s ease;
}

.dispatcher-ai-routing-list.is-disabled {
  opacity: 0.48;
}

.dispatcher-ai-agent-row {
  background: #fff;
}

.dispatcher-intake-empty {
  padding: 18px 16px;
  border: 1px dashed rgba(4, 56, 115, 0.18);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.45;
}

.dispatcher-custom-fields-panel {
  display: grid;
  gap: 12px;
}

.dispatcher-custom-fields-list {
  display: grid;
  gap: 10px;
}

.dispatcher-custom-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.dispatcher-custom-field-row input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--color-ink);
  font-size: 14px;
  font-family: var(--font-body);
  box-sizing: border-box;
}

.dispatcher-custom-field-row input::placeholder {
  color: #9aa3af;
}

.dispatcher-custom-field-remove {
  min-width: 44px;
  height: 44px;
  padding: 0;
}

.dispatcher-custom-field-add {
  width: max-content;
}

.dispatcher-intake-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  background: #f8fafc;
  color: var(--color-ink);
  font-size: 14px;
  font-family: var(--font-body);
  line-height: 1.55;
  resize: vertical;
  min-height: 190px;
  box-sizing: border-box;
}

.dispatcher-intake-form textarea::placeholder {
  color: #9aa3af;
}

.dispatcher-intake-form .field-meta {
  margin-top: 8px;
}

.dispatcher-intake-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 4px 0 0;
}

.dispatcher-summary-panel {
  display: grid;
  gap: 14px;
  position: sticky;
  top: calc(var(--app-header-height) + 18px);
}

.dispatcher-summary-card {
  padding: 18px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.dispatcher-summary-card.is-dark {
  border-color: rgba(255, 255, 255, 0.08);
  background: #263247;
  color: #fff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.dispatcher-summary-card > span {
  display: block;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dispatcher-summary-card.is-dark > span,
.dispatcher-summary-card.is-dark p {
  color: rgba(255, 255, 255, 0.72);
}

.dispatcher-summary-card > strong {
  display: block;
  margin-top: 8px;
  color: inherit;
  font-size: 21px;
  line-height: 1.18;
}

.dispatcher-summary-card p {
  margin: 12px 0 0;
  color: var(--color-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.dispatcher-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.dispatcher-summary-row:first-child {
  padding-top: 0;
}

.dispatcher-summary-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.dispatcher-summary-row span {
  color: var(--color-ink-soft);
  font-size: 13px;
}

.dispatcher-summary-row strong {
  color: var(--color-ink);
  font-size: 17px;
}

/* Stage 2: keep the Dispatcher summary rail, but give each configuration
   section its full usable width by placing its explanation above its controls. */
@container dispatcher-intake (max-width: 1160px) {
  .dispatcher-intake-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Stage 3: collapse the summary rail and all remaining multi-column controls
   into a single reading flow for narrow laptops, tablets, and phones. */
@container dispatcher-intake (max-width: 900px) {
  .dispatcher-workbench {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dispatcher-summary-panel {
    position: static;
    order: -1;
  }

  .dispatcher-intake-list-grid,
  .dispatcher-name-form {
    grid-template-columns: 1fr;
  }

  .dispatcher-name-form > * {
    grid-column: 1;
    grid-row: auto;
  }

  .dispatcher-name-form > .field-count,
  .dispatcher-name-form > .form-helper {
    justify-self: start;
  }
}

@media (max-width: 920px) {
  .dispatcher-intake-page {
    padding-inline: 20px;
  }
}

.select-card {
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 220px;
  box-shadow: var(--shadow-tight);
  cursor: pointer;
  text-align: left;
  position: relative;
  gap: 14px;
  align-self: stretch;
}

.agent-slot-card {
  min-height: 250px;
  gap: 14px;
  padding: 18px;
}

.agent-slot-card .card-subtitle {
  margin-top: auto;
  font-size: 14px;
}

.select-card:not(.create-card):not(.limit-card) .card-visual {
  flex: 1;
  min-height: 140px;
}

.select-card.create-card {
  justify-content: center;
  padding: 24px;
}

.select-card.create-card .create-form {
  margin-top: 0;
}


.select-card:hover {
  border-color: rgba(4, 56, 115, 0.25);
  transform: translateY(-2px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.select-card.create-card,
.select-card.limit-card {
  cursor: default;
}

.select-card.create-card[data-open-create] {
  cursor: pointer;
}

.agent-slot-card.create-card[data-open-create] {
  background: transparent;
  border: 1px dashed rgba(4, 56, 115, 0.35);
  box-shadow: none;
  justify-content: flex-start;
}

.agent-slot-card.create-card[data-open-create]:hover {
  border-color: rgba(4, 56, 115, 0.5);
  transform: translateY(-1px);
}

.card-visual-empty-slot::after {
  display: none;
}

.card-visual.card-visual-agent.card-visual-empty-slot {
  background: transparent;
  border: none;
  min-height: 138px;
  box-shadow: none;
}

.empty-slot-frame {
  margin: 0;
  min-height: 138px;
  border: none;
  border-radius: 0;
  display: grid;
  place-items: center;
  width: 100%;
  background: transparent;
}

.empty-slot-plus {
  font-size: 56px;
  line-height: 1;
  color: rgba(4, 56, 115, 0.75);
  font-weight: 500;
  user-select: none;
}

.agent-slot-card[data-slot-active="true"][data-agent-id] {
  cursor: pointer;
}

.agent-slot-card.is-inactive-slot {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
  border-color: rgba(100, 116, 139, 0.24);
  opacity: 0.7;
}

.agent-slot-card.is-inactive-slot .card-title.centered-title {
  color: rgba(4, 56, 115, 0.5);
}

.agent-slot-card[data-drag-over="true"] {
  border-color: rgba(4, 56, 115, 0.6);
  box-shadow: 0 0 0 4px rgba(4, 56, 115, 0.15), inset 0 0 0 1px rgba(4, 56, 115, 0.2);
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.agent-slot-card.is-dragging {
  opacity: 0.5;
  transform: scale(0.98);
  cursor: grabbing;
}

.slot-type-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.slot-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(4, 56, 115, 0.85);
}

.slot-type-icon svg {
  width: 16px;
  height: 16px;
}

.agent-slot-card.is-inactive-slot .slot-type-label {
  color: rgba(100, 116, 139, 0.82);
}

.agent-slot-card.is-inactive-slot .slot-type-icon {
  color: rgba(100, 116, 139, 0.74);
}

.agent-slot-card[data-agent-id] .card-title.centered-title {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  padding: 0 12px;
  word-break: break-word;
}

.card-visual {
  border-radius: 14px;
  min-height: 90px;
  background:
    linear-gradient(135deg, rgba(4, 56, 115, 0.12), rgba(255, 255, 255, 0.7)),
    repeating-linear-gradient(
      0deg,
      rgba(4, 56, 115, 0.12) 0,
      rgba(4, 56, 115, 0.12) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(4, 56, 115, 0.12) 0,
      rgba(4, 56, 115, 0.12) 1px,
      transparent 1px,
      transparent 10px
    );
  border: 1px solid rgba(4, 56, 115, 0.22);
  position: relative;
  overflow: hidden;
}

.card-visual::after {
  content: "";
  position: absolute;
  inset: 16px 20px;
  border: 1px dashed rgba(4, 56, 115, 0.35);
  border-radius: 10px;
}

.card-visual-workspace {
  background:
    radial-gradient(circle at top right, rgba(4, 56, 115, 0.2), transparent 65%),
    repeating-linear-gradient(
      0deg,
      rgba(4, 56, 115, 0.12) 0,
      rgba(4, 56, 115, 0.12) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(4, 56, 115, 0.12) 0,
      rgba(4, 56, 115, 0.12) 1px,
      transparent 1px,
      transparent 10px
    );
}

.card-visual-agent {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(235, 241, 249, 0.9));
  border: 1px solid rgba(4, 56, 115, 0.18);
}

.card-visual-create {
  background:
    radial-gradient(circle at top left, rgba(4, 56, 115, 0.18), transparent 55%),
    repeating-linear-gradient(
      0deg,
      rgba(4, 56, 115, 0.12) 0,
      rgba(4, 56, 115, 0.12) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(4, 56, 115, 0.12) 0,
      rgba(4, 56, 115, 0.12) 1px,
      transparent 1px,
      transparent 10px
    );
}

.card-visual-limit {
  background:
    radial-gradient(circle at center, rgba(31, 36, 40, 0.12), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(31, 36, 40, 0.1) 0,
      rgba(31, 36, 40, 0.1) 1px,
      transparent 1px,
      transparent 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(31, 36, 40, 0.1) 0,
      rgba(31, 36, 40, 0.1) 1px,
      transparent 1px,
      transparent 10px
    );
}

.card-title {
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.card-title.centered-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
  position: relative;
  z-index: 1;
}

.card-visual {
  display: grid;
  place-items: center;
  pointer-events: none;
}







.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px 0;
}

.card-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  cursor: grab;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.drag-handle:hover {
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle i {
  width: 16px;
  height: 16px;
}

.menu-button {
  border: 1px solid rgba(4, 56, 115, 0.2);
  background: rgba(4, 56, 115, 0.08);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1f2937;
  z-index: 2;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.menu-button:hover {
  background: rgba(4, 56, 115, 0.12);
  border-color: rgba(4, 56, 115, 0.3);
}

.menu-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.15);
  border-radius: 12px;
  box-shadow: var(--shadow-tight);
  padding: 8px;
  display: none;
  min-width: 160px;
  z-index: 10;
}

.card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.menu-dropdown button {
  border: none;
  background: rgba(4, 56, 115, 0.06);
  color: #111827;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}

.menu-dropdown button:hover {
  background: rgba(4, 56, 115, 0.12);
}

.menu-dropdown .danger {
  background: rgba(180, 35, 24, 0.08);
  color: #b42318;
}

.menu-dropdown .danger:hover {
  background: rgba(180, 35, 24, 0.16);
}

.card-subtitle {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 13px;
}

.agent-roster-row.agent-slot-card.create-card[data-open-create] {
  background: #fff;
  border: 1px dashed rgba(4, 56, 115, 0.22);
  box-shadow: none;
}

.agent-roster-row.agent-slot-card.create-card[data-open-create]:hover {
  border-color: rgba(4, 56, 115, 0.36);
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .agents-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-roster-row.agent-slot-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .agent-row-meta {
    grid-column: 2 / 4;
    justify-content: flex-start;
    padding: 0 10px 10px 0;
  }

  .agent-row-actions {
    padding-right: 8px;
  }
}

@media (max-width: 560px) {
  .agent-roster-row.agent-slot-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .agent-row-reorder {
    width: 34px;
  }

  .agent-row-actions {
    grid-column: 2 / 3;
    justify-content: flex-start;
    padding: 0 10px 10px 0;
  }

  .agent-row-meta {
    grid-column: 2 / 3;
  }
}

.content:has(.agents-roster-page) {
  padding: 22px 32px 42px;
}

.agents-roster-page,
.workspace-overview-page,
.portal-page {
  --dashboard-ink: #102033;
  --dashboard-muted: #647184;
  --dashboard-border: #d9e1e3;
  --dashboard-panel: #ffffff;
  --dashboard-panel-warm: #fffdf8;
  --dashboard-shadow: 0 18px 42px rgba(21, 38, 54, 0.09);
  --dashboard-shadow-tight: 0 10px 24px rgba(21, 38, 54, 0.07);
  max-width: 1480px;
  margin: 0 auto;
  min-height: calc(100vh - 130px);
  gap: 16px;
  position: relative;
  padding: 0;
}

.workspace-overview-page {
  display: grid;
  gap: 16px;
  align-content: start;
}

.agents-roster-page::before {
  display: none;
}

.agents-toolbar-kicker {
  color: #145270;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.agents-side-usage {
  display: grid;
  gap: 9px;
  justify-items: stretch;
  padding: 0 0 14px;
  border-bottom: 1px solid #dbe5f0;
}

.agents-side-usage .agent-capacity-pill {
  width: 100%;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: auto;
  background: transparent;
  box-shadow: none;
  color: #52657d;
}

.agents-side-usage .agent-capacity-pill strong {
  color: #10233d;
}

.agents-side-usage small {
  color: #52657d;
  font-size: 12px;
  font-weight: 700;
}

.agents-usage-meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe5f0;
}

.agents-usage-meter span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: #145270;
}

.agents-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}

/* Roster page header + back button */
.roster-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}

.roster-back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--dashboard-border);
  border-radius: 10px;
  background: #ffffff;
  color: #34495c;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--dashboard-shadow-tight);
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.roster-back-button:hover {
  border-color: rgba(20, 82, 112, 0.34);
  color: #145270;
  transform: translateY(-1px);
}

.roster-back-button svg {
  width: 17px;
  height: 17px;
}

.roster-page-heading {
  display: grid;
  gap: 2px;
}

.roster-page-heading h1 {
  margin: 0;
  color: var(--dashboard-ink);
  font-size: 26px;
  line-height: 1.1;
}

/* Portal scaffold pages (Email, Webhooks, Action Tools) */
.portal-page {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 4px 0 24px;
}

.portal-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.portal-page-heading {
  display: grid;
  gap: 8px;
  max-width: 640px;
}

.portal-page-kicker {
  color: #145270;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.portal-page-heading h1 {
  margin: 0;
  color: var(--dashboard-ink);
  font-size: 30px;
  line-height: 1.08;
}

.portal-page-heading p {
  margin: 0;
  color: var(--dashboard-muted);
  font-size: 15px;
  line-height: 1.55;
}

.portal-page-header-actions .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portal-page-header-actions .button svg {
  width: 16px;
  height: 16px;
}

.portal-integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.portal-integration-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--dashboard-border);
  border-radius: 14px;
  background: var(--dashboard-panel);
  box-shadow: var(--dashboard-shadow-tight);
}

.portal-integration-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-integration-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid #e2e8ec;
  background: #f6f8f9;
}

.portal-integration-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.portal-integration-logo svg {
  width: 23px;
  height: 23px;
  color: #145270;
}

.portal-integration-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--dashboard-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f4f6;
  border: 1px solid #e2e8ec;
}

.portal-integration-copy h3 {
  margin: 0 0 6px;
  color: var(--dashboard-ink);
  font-size: 17px;
}

.portal-integration-copy p {
  margin: 0;
  color: var(--dashboard-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.portal-integration-actions {
  display: flex;
}

.portal-integration-actions .button {
  width: 100%;
}

.portal-empty-panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 54px 24px;
  border: 1px dashed rgba(111, 151, 204, 0.4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.portal-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eef3f6;
  border: 1px solid #dde6ea;
  color: #145270;
}

.portal-empty-icon svg {
  width: 26px;
  height: 26px;
}

.portal-empty-panel h2 {
  margin: 4px 0 0;
  color: var(--dashboard-ink);
  font-size: 20px;
}

.portal-empty-panel p {
  margin: 0;
  max-width: 460px;
  color: var(--dashboard-muted);
  font-size: 14px;
  line-height: 1.55;
}

.portal-page-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e2e8ec;
  border-radius: 12px;
  background: #f8fafb;
  color: var(--dashboard-muted);
}

.portal-page-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #145270;
}

.portal-page-note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.human-agent-edit-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #d8e2e9;
  border-radius: 10px;
  background: #f7f9fb;
}

.human-agent-edit-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #e9f0f5;
  color: #145270;
}

.human-agent-edit-avatar svg {
  width: 18px;
  height: 18px;
}

.human-agent-edit-identity > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.human-agent-edit-identity strong,
.human-agent-edit-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.human-agent-edit-identity strong {
  color: var(--dashboard-ink);
  font-size: 14px;
}

.human-agent-edit-identity small {
  color: var(--dashboard-muted);
  font-size: 12px;
}

.human-agent-invite-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--dashboard-muted);
}

.human-agent-invite-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #145270;
}

.human-agent-invite-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.human-agent-invite-note strong {
  color: #344d64;
  font-weight: 700;
}

/* Portal developer API and webhook pages */
.portal-developer-page {
  --developer-navy: #0d2340;
  --developer-blue: #1769d2;
  gap: 18px;
  max-width: 1380px;
  margin: 0 auto;
}

.portal-developer-page .portal-page-heading {
  max-width: 720px;
}

.portal-developer-page .portal-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.portal-developer-page .button {
  min-height: 42px;
  border-radius: 9px;
}

.portal-developer-page .button-secondary {
  border: 1px solid var(--dashboard-border);
  background: #fff;
  color: var(--developer-navy);
}

.portal-api-endpoint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px 14px 18px;
  border: 1px solid #cfdde8;
  border-radius: 12px;
  background: #f5f8fb;
}

.portal-api-endpoint > div {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.portal-api-endpoint span,
.portal-webhook-url-row label > span,
.portal-webhook-secret > div > span {
  color: #60748c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.portal-api-endpoint code {
  overflow: hidden;
  color: var(--developer-navy);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  flex: 0 0 auto;
  border: 1px solid #cbd9e5;
  border-radius: 8px;
  background: #fff;
  color: var(--developer-navy);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.portal-copy-button svg {
  width: 14px;
  height: 14px;
}

.portal-dev-panel,
.portal-api-capabilities {
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: 14px;
  background: var(--dashboard-panel);
  box-shadow: var(--dashboard-shadow-tight);
}

.portal-dev-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--dashboard-border);
}

.portal-dev-panel-header h2,
.portal-section-intro h2 {
  margin: 0;
  color: var(--developer-navy);
  font-size: 20px;
  line-height: 1.2;
}

.portal-dev-panel-header p,
.portal-section-intro p {
  margin: 5px 0 0;
  color: var(--dashboard-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.portal-count-label {
  padding: 5px 9px;
  border: 1px solid #dbe4eb;
  border-radius: 999px;
  background: #f6f8fa;
  color: #536a80;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.portal-api-key-list {
  display: grid;
}

.portal-api-accounts-panel {
  display: flex;
  min-height: 640px;
  flex-direction: column;
}

.portal-api-accounts-panel > .portal-dev-panel-header {
  background: #f4f7f9;
}

.portal-api-accounts-panel .portal-api-key-list {
  flex: 1;
}

.portal-api-accounts-panel .portal-dev-empty {
  min-height: 555px;
}

.portal-service-account-empty-state {
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.portal-service-account-empty-state .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: 0;
  white-space: nowrap;
}

.portal-service-account-empty-state .button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke-width: 2.25;
}

.portal-api-account-workspace {
  display: grid;
  grid-template-columns: minmax(245px, 0.34fr) minmax(0, 1fr);
  min-height: 555px;
}

.portal-api-account-sidebar {
  min-width: 0;
  border-right: 1px solid var(--dashboard-border);
  background: #f8fafb;
}

.portal-api-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--dashboard-border);
  background: #fbfcfd;
}

.portal-api-column-header h3 {
  margin: 0;
  color: var(--developer-navy);
  font-size: 14px;
  line-height: 1.3;
}

.portal-api-column-header p {
  margin: 3px 0 0;
  color: var(--dashboard-muted);
  font-size: 11.5px;
}

.portal-service-account-list {
  display: grid;
}

.portal-service-account-nav-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 70px;
  padding-right: 10px;
  border-bottom: 1px solid var(--dashboard-border);
  transition: background 140ms ease;
}

.portal-service-account-nav-row:hover,
.portal-service-account-nav-row.is-selected {
  background: #fff;
}

.portal-service-account-nav-row.is-selected::before {
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #145270;
  content: "";
}

.portal-service-account-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  height: 100%;
  padding: 12px 10px 12px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.portal-service-account-select:focus-visible {
  outline: 2px solid rgba(20, 82, 112, 0.3);
  outline-offset: -3px;
}

.portal-service-account-select > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portal-service-account-select strong,
.portal-service-account-select small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-service-account-select strong {
  color: var(--developer-navy);
  font-size: 13px;
}

.portal-service-account-select small {
  color: var(--dashboard-muted);
  font-size: 11px;
}

.portal-service-account-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eaf1f5;
  color: #145270;
}

.portal-service-account-mark svg {
  width: 16px;
  height: 16px;
}

.portal-api-key-column {
  min-width: 0;
  background: #fff;
}

.portal-api-key-column-header {
  padding-right: 20px;
  padding-left: 22px;
}

.portal-api-selected-key-list {
  display: grid;
}

.portal-api-key-column .portal-api-key-row {
  grid-template-columns: auto minmax(175px, 1fr) minmax(135px, 0.55fr) minmax(90px, 0.32fr) auto;
}

.portal-api-keys-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  text-align: center;
}

.portal-api-keys-empty h3 {
  margin: 0;
  color: var(--developer-navy);
  font-size: 14px;
}

.portal-api-keys-empty .button svg {
  width: 16px;
  height: 16px;
}

.portal-service-key-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  white-space: nowrap;
}

.portal-service-key-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke-width: 2.15;
}

.portal-column-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  font-size: 11.5px;
  white-space: nowrap;
}

.portal-column-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.portal-developer-page .portal-column-action,
.portal-developer-page .portal-service-key-button {
  border-color: #bfd0db;
  background: #f1f6f8;
  color: #103f59;
  box-shadow: 0 1px 2px rgba(16, 63, 89, 0.05);
  font-weight: 750;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.portal-developer-page .portal-column-action:hover:not(:disabled),
.portal-developer-page .portal-service-key-button:hover:not(:disabled) {
  border-color: #9fb8c7;
  background: #e8f1f5;
  box-shadow: 0 2px 5px rgba(16, 63, 89, 0.08);
}

.portal-developer-page .portal-column-action:focus-visible,
.portal-developer-page .portal-service-key-button:focus-visible {
  outline: 3px solid rgba(20, 82, 112, 0.14);
  outline-offset: 2px;
}

.portal-api-key-row {
  display: grid;
  grid-template-columns: auto minmax(230px, 1fr) minmax(150px, 0.55fr) minmax(110px, 0.3fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--dashboard-border);
}

.portal-api-key-row:last-child {
  border-bottom: 0;
}

.portal-api-key-icon,
.portal-capability-icon,
.portal-event-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #edf3f7;
  color: #145270;
}

.portal-api-key-icon svg,
.portal-capability-icon svg,
.portal-event-group-icon svg {
  width: 18px;
  height: 18px;
}

.portal-api-key-identity,
.portal-api-key-meta,
.portal-api-key-used {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portal-api-key-identity strong,
.portal-api-key-used strong {
  overflow: hidden;
  color: var(--developer-navy);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-api-key-identity code {
  overflow: hidden;
  color: #63778c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-api-key-meta span {
  color: var(--developer-navy);
  font-size: 12px;
  font-weight: 700;
}

.portal-api-key-meta small,
.portal-api-key-used span {
  color: var(--dashboard-muted);
  font-size: 11.5px;
}

.portal-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d5e0e8;
  border-radius: 9px;
  background: #fff;
  color: #526a80;
  cursor: pointer;
}

.portal-icon-button svg {
  width: 16px;
  height: 16px;
}

.portal-icon-button.is-danger:hover {
  border-color: #f0c5c5;
  background: #fff6f6;
  color: #b42318;
}

.portal-dev-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 128px;
  padding: 24px;
  text-align: left;
}

.portal-dev-empty > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #edf3f7;
  color: #145270;
}

.portal-dev-empty svg {
  width: 19px;
  height: 19px;
}

.portal-dev-empty .portal-api-loading-spinner {
  transform-box: fill-box;
  transform-origin: center;
  animation: portal-api-loading-spin 0.8s linear infinite;
}

@keyframes portal-api-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-dev-empty .portal-api-loading-spinner {
    animation-duration: 1.6s;
  }
}

.portal-dev-empty h3 {
  margin: 0;
  color: var(--developer-navy);
  font-size: 15px;
}

.portal-dev-empty p {
  margin: 4px 0 0;
  color: var(--dashboard-muted);
  font-size: 13px;
}

.portal-api-capabilities {
  background: #fff;
}

.portal-section-intro {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-right: 1px solid var(--dashboard-border);
  background: var(--developer-navy);
}

.portal-section-intro .portal-page-kicker {
  color: #78a9ff;
}

.portal-section-intro h2 {
  margin-top: 10px;
  color: #fff;
  font-size: 26px;
}

.portal-section-intro p {
  color: #b9c8d9;
  font-size: 14px;
}

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

.portal-capability-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 135px;
  padding: 22px;
  border-right: 1px solid var(--dashboard-border);
  border-bottom: 1px solid var(--dashboard-border);
}

.portal-capability-item:nth-child(2n) {
  border-right: 0;
}

.portal-capability-item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.portal-capability-item h3 {
  margin: 1px 0 6px;
  color: var(--developer-navy);
  font-size: 14px;
}

.portal-capability-item h3 span,
.portal-event-group-header h3 span {
  display: inline-flex;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f0f3f6;
  color: #60758a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.portal-capability-item p {
  margin: 0;
  color: var(--dashboard-muted);
  font-size: 12.5px;
  line-height: 1.48;
}

.portal-api-catalog-header {
  padding: 22px 24px;
  border-bottom: 1px solid var(--dashboard-border);
  background: #f4f7f9;
}

.portal-api-catalog-header h2 {
  margin: 0;
  color: var(--developer-navy);
  font-size: 20px;
  line-height: 1.2;
}

.portal-api-catalog-header p {
  margin: 5px 0 0;
  color: var(--dashboard-muted);
  font-size: 13px;
  line-height: 1.5;
}

.portal-api-catalog-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-api-catalog-column + .portal-api-catalog-column {
  border-left: 1px solid var(--dashboard-border);
}

.portal-api-event-group {
  border-bottom: 1px solid var(--dashboard-border);
}

.portal-api-event-group:last-child {
  border-bottom: 0;
}

.portal-api-event-group summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 18px 20px;
  list-style: none;
  cursor: pointer;
  transition: background 140ms ease;
}

.portal-api-event-group summary::-webkit-details-marker {
  display: none;
}

.portal-api-event-group summary:hover,
.portal-api-event-group[open] summary {
  background: #f8fafb;
}

.portal-api-event-group summary:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(20, 82, 112, 0.28);
  outline-offset: -2px;
}

.portal-api-event-group-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.portal-api-event-group-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.portal-api-event-group-title strong {
  color: var(--developer-navy);
  font-size: 14px;
  line-height: 1.3;
}

.portal-api-event-group-title small {
  color: #718397;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.portal-api-event-group-description {
  color: var(--dashboard-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.portal-api-event-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #6d8092;
}

.portal-api-event-group-toggle svg {
  width: 17px;
  height: 17px;
  transition: transform 160ms ease;
}

.portal-api-event-group[open] .portal-api-event-group-toggle svg {
  transform: rotate(180deg);
}

.portal-api-event-list {
  padding: 2px 20px 12px 72px;
  border-top: 1px solid #e8eef2;
  background: #fbfcfd;
  animation: portal-api-event-reveal 160ms ease-out;
}

.portal-api-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 38px;
  border-bottom: 1px solid #e8eef2;
}

.portal-api-event-row:last-child {
  border-bottom: 0;
}

.portal-api-event-row code {
  min-width: 0;
  color: #173c54;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.portal-api-event-row > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #687c8e;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-api-event-row > span::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #64889b;
  content: "";
}

.portal-api-event-row > span.is-write {
  color: #765b32;
}

.portal-api-event-row > span.is-write::before {
  background: #b0874c;
}

@keyframes portal-api-event-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-api-event-list {
    animation: none;
  }

  .portal-api-event-group summary,
  .portal-api-event-group-toggle svg {
    transition: none;
  }
}

.portal-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 26px;
  color: #dbe9ff;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.portal-inline-link svg {
  width: 14px;
  height: 14px;
}

.portal-dev-modal {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.portal-dev-modal.hidden {
  display: none;
}

.portal-dev-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(8, 21, 38, 0.55);
  backdrop-filter: blur(2px);
}

.portal-dev-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  overflow: hidden;
  border: 1px solid #d5dfe7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8, 26, 48, 0.24);
}

.portal-dev-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--dashboard-border);
}

.portal-dev-modal-header h2 {
  margin: 7px 0 0;
  color: var(--developer-navy);
  font-size: 22px;
}

.portal-dev-modal-header p {
  margin: 7px 0 0;
  color: var(--dashboard-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.portal-dev-form {
  display: grid;
  gap: 20px;
  padding: 22px 24px 24px;
}

.portal-dev-form > label {
  display: grid;
  gap: 8px;
  color: var(--developer-navy);
  font-size: 12px;
  font-weight: 750;
}

.portal-dev-form input[type="text"] {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #cddae4;
  border-radius: 9px;
  color: var(--developer-navy);
  font: inherit;
  font-size: 14px;
  outline: 0;
}

.portal-dev-form input[type="text"]:focus {
  border-color: #3d7dd2;
  box-shadow: 0 0 0 3px rgba(55, 118, 207, 0.12);
}

.portal-dev-form fieldset {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
}

.portal-dev-form legend {
  margin-bottom: 8px;
  color: var(--developer-navy);
  font-size: 12px;
  font-weight: 750;
}

.portal-choice-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid #d7e1e8;
  border-radius: 10px;
  cursor: pointer;
}

.portal-choice-row input {
  margin-top: 3px;
  accent-color: var(--developer-blue);
}

.portal-choice-row span {
  display: grid;
  gap: 3px;
}

.portal-choice-row strong {
  color: var(--developer-navy);
  font-size: 13px;
}

.portal-choice-row small {
  color: var(--dashboard-muted);
  font-size: 12px;
}

.portal-dev-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.portal-secret-reveal {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 22px 24px 14px;
  padding: 14px;
  border: 1px solid #cbdbe8;
  border-radius: 10px;
  background: #f4f8fb;
}

.portal-secret-reveal > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.portal-secret-reveal > div > span {
  color: #60748c;
  font-size: 11px;
  font-weight: 800;
}

.portal-secret-reveal code {
  overflow: auto;
  color: var(--developer-navy);
  font-size: 12px;
  white-space: nowrap;
}

.portal-secret-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 24px 20px;
  color: #7a5a18;
}

.portal-secret-warning svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.portal-secret-warning p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.48;
}

.portal-secret-warning + .portal-dev-modal-actions {
  padding: 0 24px 24px;
}

.portal-enable-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--developer-navy);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.portal-enable-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.portal-enable-switch i {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #cbd6df;
  transition: background 160ms ease;
}

.portal-enable-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(5, 21, 37, 0.25);
  transition: transform 160ms ease;
}

.portal-enable-switch input:checked + i {
  background: #117061;
}

.portal-enable-switch input:checked + i::after {
  transform: translateX(18px);
}

.portal-webhook-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 20px 22px;
}

.portal-webhook-url-row label {
  display: grid;
  gap: 8px;
}

.portal-webhook-url-row label > div {
  position: relative;
  display: flex;
  align-items: center;
}

.portal-webhook-url-row label svg {
  position: absolute;
  left: 13px;
  width: 16px;
  height: 16px;
  color: #72879a;
}

.portal-webhook-url-row input {
  width: 100%;
  height: 44px;
  padding: 0 13px 0 40px;
  border: 1px solid #cddae4;
  border-radius: 9px;
  color: var(--developer-navy);
  font: inherit;
  font-size: 14px;
  outline: 0;
}

.portal-webhook-url-row input:focus {
  border-color: #3d7dd2;
  box-shadow: 0 0 0 3px rgba(55, 118, 207, 0.12);
}

.portal-webhook-url-row input:disabled {
  background: #f2f5f7;
  color: #8a9aaa;
}

.portal-webhook-secret {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, auto) auto auto;
  align-items: center;
  gap: 10px;
  margin: 0 22px 20px;
  padding: 14px;
  border: 1px solid #d7e1e8;
  border-radius: 10px;
  background: #f7f9fb;
}

.portal-webhook-secret > div p {
  margin: 4px 0 0;
  color: var(--dashboard-muted);
  font-size: 11.5px;
}

.portal-webhook-secret code {
  overflow: hidden;
  color: var(--developer-navy);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-webhook-form-error {
  margin: -8px 22px 20px;
  color: #b42318;
  font-size: 12.5px;
}

.portal-webhook-form-success {
  margin: -8px 22px 20px;
  color: #18794e;
  font-size: 12.5px;
}

.portal-event-catalog.is-disabled .portal-event-groups {
  opacity: 0.48;
  pointer-events: none;
  user-select: none;
}

.portal-events-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  background: #fff;
}

.portal-events-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex: 0 0 auto;
}

.portal-event-summary {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #60748c;
  font-size: 11px;
}

.portal-event-summary strong {
  color: var(--developer-navy);
  font-size: 18px;
}

.portal-event-groups {
  display: grid;
}

.portal-event-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid var(--dashboard-border);
}

.portal-event-group-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.portal-event-group-header h3 {
  margin: 1px 0 5px;
  color: var(--developer-navy);
  font-size: 14px;
}

.portal-event-group-header p {
  margin: 0;
  color: var(--dashboard-muted);
  font-size: 12px;
  line-height: 1.45;
}

.portal-group-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0 auto;
  padding: 7px 9px;
  flex: 0 0 auto;
  border: 1px solid #d7e1e8;
  border-radius: 8px;
  background: #f8fafb;
  color: #2d628d;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.portal-group-check:hover {
  border-color: #b8cad8;
  background: #f1f6f9;
}

.portal-group-check input,
.portal-event-option input {
  position: relative;
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  appearance: none;
  border: 1.5px solid #aebdca;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(13, 35, 64, 0.04);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.portal-group-check input:hover,
.portal-event-option input:hover {
  border-color: #4f83b5;
  background: #f5f9fc;
}

.portal-group-check input:checked,
.portal-event-option input:checked {
  border-color: #145270;
  background: #145270;
  box-shadow: 0 0 0 2px rgba(20, 82, 112, 0.1);
}

.portal-group-check input:checked::after,
.portal-event-option input:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.portal-group-check input:focus-visible,
.portal-event-option input:focus-visible {
  outline: 2px solid #77a9d3;
  outline-offset: 2px;
}

.portal-group-check input:active,
.portal-event-option input:active {
  transform: scale(0.92);
}

.portal-group-check input:disabled,
.portal-event-option input:disabled {
  border-color: #d7e0e7;
  background: #eef2f5;
  box-shadow: none;
  cursor: not-allowed;
}

.portal-event-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.portal-event-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 7px 0;
  cursor: pointer;
  border-radius: 7px;
  transition: color 140ms ease;
}

.portal-event-option input {
  margin: 1px 0 0;
}

.portal-event-option code {
  color: #314a61;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.portal-event-option:hover code {
  color: #145270;
}

.portal-event-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 22px;
  background: #f7f9fb;
}

.portal-event-savebar p {
  margin: 0;
  color: var(--dashboard-muted);
  font-size: 12px;
}

@media (max-width: 980px) {
  .portal-api-catalog-columns {
    grid-template-columns: 1fr;
  }

  .portal-api-catalog-column + .portal-api-catalog-column {
    border-left: 0;
  }

  .portal-api-catalog-column:first-child .portal-api-event-group:last-child {
    border-bottom: 1px solid var(--dashboard-border);
  }

  .portal-api-key-row {
    grid-template-columns: auto minmax(180px, 1fr) auto;
  }

  .portal-api-key-column .portal-api-key-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .portal-api-account-workspace {
    grid-template-columns: minmax(220px, 0.4fr) minmax(0, 1fr);
  }

  .portal-api-key-meta,
  .portal-api-key-used {
    display: none;
  }

  .portal-event-group {
    gap: 16px;
  }

  .portal-event-options {
    padding-left: 0;
  }
}

/* Portal Copilot ---------------------------------------------------------- */
.copilot-page {
  --copilot-bg: #f7f8fa;
  --copilot-panel: #fff;
  --copilot-panel-strong: #f1f4f6;
  --copilot-border: #dce1e6;
  --copilot-text: #17202a;
  --copilot-muted: #667382;
  --copilot-accent: #176b87;
  --copilot-accent-soft: #e5f3f6;
  width: 100%;
  min-height: 100%;
  padding: clamp(18px, 2vw, 26px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px);
  color: var(--copilot-text);
  background: var(--copilot-bg);
}

.copilot-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
}

.copilot-page-header h1 {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.copilot-period-selector {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--copilot-border);
  border-radius: 10px;
  background: var(--copilot-panel);
}

.copilot-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.copilot-buy-credits { display: inline-flex; min-height: 32px; align-items: center; gap: 5px; padding: 5px 2px; border: 0; color: var(--copilot-accent); background: transparent; font: inherit; font-size: 12px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.copilot-buy-credits svg { width: 16px; height: 16px; }
.copilot-buy-credits:hover { color: color-mix(in srgb, var(--copilot-accent) 78%, var(--copilot-text)); }
.copilot-buy-credits:focus-visible { border-radius: 5px; outline: 2px solid color-mix(in srgb, var(--copilot-accent) 28%, transparent); outline-offset: 2px; }

.copilot-period-selector button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: var(--copilot-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.copilot-period-selector button:hover { color: var(--copilot-text); background: var(--copilot-panel-strong); }
.copilot-period-selector button.is-active { color: #fff; background: var(--copilot-accent); }
.copilot-period-selector button:focus-visible { outline: 2px solid color-mix(in srgb, var(--copilot-accent) 30%, transparent); outline-offset: 1px; }

.copilot-page-header p,
.copilot-panel-heading p,
.copilot-guidance-panel > div > p {
  max-width: 720px;
  margin: 0;
  color: var(--copilot-muted);
  line-height: 1.55;
}

.copilot-eyebrow,
.copilot-panel-kicker,
.copilot-panel-heading > div > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--copilot-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.copilot-eyebrow svg,
.copilot-save svg {
  width: 15px;
  height: 15px;
}
.copilot-save .spin { animation: copilot-spin 0.8s linear infinite; }
@keyframes copilot-spin { to { transform: rotate(360deg); } }

.copilot-save {
  min-height: 42px;
  white-space: nowrap;
}

.copilot-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid #e4b6b6;
  border-radius: 10px;
  color: #8c2525;
  background: #fff4f4;
}

.copilot-alert svg { width: 18px; height: 18px; flex: 0 0 auto; }

.copilot-overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(170px, 0.75fr));
  gap: 14px;
  margin-bottom: 14px;
}

.copilot-credit-consumption-panel { margin-bottom: 14px; }
.copilot-credit-consumption-panel .copilot-panel-heading { align-items: flex-end; }
.copilot-credit-consumption-panel .copilot-panel-heading > strong { font-size: 18px; white-space: nowrap; }

.copilot-credit-bars {
  display: grid;
  grid-template-columns: repeat(var(--copilot-bar-count), minmax(18px, 1fr));
  align-items: end;
  gap: 8px;
  height: 250px;
  padding: 18px 4px 0;
  overflow-x: auto;
  border-top: 1px solid var(--copilot-border);
}

.copilot-credit-bar {
  display: grid;
  grid-template-rows: 22px minmax(0, 1fr) 28px;
  align-items: end;
  height: 100%;
  min-width: 0;
  text-align: center;
}

.copilot-credit-bar i {
  display: block;
  width: min(100%, 30px);
  min-height: 2px;
  margin: 0 auto;
  border-radius: 6px 6px 2px 2px;
  background: var(--copilot-accent);
}

.copilot-credit-bar span,
.copilot-credit-bar small {
  overflow: hidden;
  color: var(--copilot-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-credit-bar span { color: var(--copilot-text); font-weight: 750; }

.copilot-balance-card,
.copilot-stat-card,
.copilot-panel {
  border: 1px solid var(--copilot-border);
  border-radius: 14px;
  background: var(--copilot-panel);
}

.copilot-balance-card,
.copilot-stat-card {
  min-height: 154px;
  padding: 21px;
}

.copilot-balance-card {
  position: relative;
  overflow: hidden;
}

.copilot-balance-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}

.copilot-balance-head .copilot-card-label {
  margin-bottom: 0;
}

.copilot-balance-head .copilot-buy-credits {
  margin-top: -5px;
}

.copilot-balance-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -90px;
  top: -88px;
  border: 24px solid var(--copilot-accent-soft);
  border-radius: 50%;
  pointer-events: none;
}

.copilot-card-label,
.copilot-stat-card > span {
  display: block;
  margin-bottom: 11px;
  color: var(--copilot-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.copilot-balance-card > strong {
  display: block;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.copilot-stat-card > strong {
  display: block;
  margin-top: 23px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.035em;
}

.copilot-stat-card > strong em {
  color: var(--copilot-muted);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0;
}

.copilot-feature-mix-card { grid-column: span 3; }
.copilot-feature-horizontal-chart { display: flex; width: 100%; height: 22px; margin: 18px 0 17px; overflow: hidden; border-radius: 7px; background: var(--copilot-panel-strong); }
.copilot-feature-horizontal-chart i { display: block; height: 100%; background: var(--copilot-accent); }
.copilot-feature-horizontal-chart i.is-transcription { background: #7d9bb2; }
.copilot-feature-horizontal-chart i.is-intelligence { background: #b2bbc4; }
.copilot-feature-percentages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 18px; }
.copilot-feature-percentages > span { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.copilot-feature-percentages i { width: 11px; height: 11px; border-radius: 3px; background: var(--copilot-accent); }
.copilot-feature-percentages i.is-transcription { background: #7d9bb2; }
.copilot-feature-percentages i.is-intelligence { background: #b2bbc4; }
.copilot-feature-percentages b { overflow: hidden; color: var(--copilot-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.copilot-feature-percentages strong { color: var(--copilot-text); font-size: 15px; }

.copilot-balance-card p,
.copilot-balance-card small,
.copilot-stat-card small {
  color: var(--copilot-muted);
  font-size: 12px;
}

.copilot-balance-card p { margin: 7px 0 16px; }
.copilot-stat-card small { display: block; margin-top: 10px; }
.copilot-balance-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.copilot-balance-foot button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: var(--copilot-accent); background: transparent; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.copilot-balance-foot button svg { width: 12px; height: 12px; }

.copilot-progress {
  height: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--copilot-panel-strong);
}

.copilot-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--copilot-accent);
}

.copilot-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  gap: 14px;
  margin-bottom: 14px;
}

.copilot-panel { padding: 22px; }

.copilot-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.copilot-panel-heading h2,
.copilot-guidance-panel h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.copilot-panel-heading > small,
.copilot-permission-list-head small {
  color: var(--copilot-muted);
  white-space: nowrap;
}

.copilot-chart {
  display: grid;
  grid-template-columns: repeat(var(--copilot-bar-count, 14), minmax(20px, 1fr));
  align-items: end;
  gap: 7px;
  height: 210px;
  padding: 18px 4px 0;
  border-top: 1px solid var(--copilot-border);
}

.copilot-chart-column {
  display: grid;
  grid-template-rows: 20px minmax(0, 1fr) 30px;
  align-items: end;
  height: 100%;
  min-width: 0;
  text-align: center;
}

.copilot-chart-column i {
  display: block;
  width: min(100%, 24px);
  min-height: 2px;
  margin: 0 auto;
  border-radius: 5px 5px 2px 2px;
  background: var(--copilot-accent);
}

.copilot-feature-activity-row.is-transcription .copilot-chart-column i,
.copilot-feature-activity-row.is-transcription .copilot-agent-usage-row > div i { background: #7d9bb2; }
.copilot-feature-activity-row.is-intelligence .copilot-chart-column i,
.copilot-feature-activity-row.is-intelligence .copilot-agent-usage-row > div i { background: #b2bbc4; }

.copilot-chart-column small,
.copilot-chart-value {
  overflow: hidden;
  color: var(--copilot-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-chart-value { color: var(--copilot-text); font-weight: 700; }

.copilot-source-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--copilot-border); }
.copilot-source-strip > span { margin-right: 4px; color: var(--copilot-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.copilot-source-strip > b { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--copilot-border); border-radius: 7px; font-size: 10px; font-weight: 600; text-transform: capitalize; }
.copilot-source-strip small { color: var(--copilot-accent); font-size: 9px; }

.copilot-agent-usage { display: grid; gap: 16px; }
.copilot-agent-usage-row > span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.copilot-agent-usage-row b { font-size: 12px; }
.copilot-agent-usage-row small { color: var(--copilot-muted); }
.copilot-agent-usage-row > div { height: 5px; overflow: hidden; border-radius: 999px; background: var(--copilot-panel-strong); }
.copilot-agent-usage-row > div i { display: block; height: 100%; border-radius: inherit; background: #73a9bb; }

.copilot-empty {
  display: grid;
  place-items: center;
  min-height: 188px;
  padding: 24px;
  color: var(--copilot-muted);
  text-align: center;
}
.copilot-empty svg { width: 25px; height: 25px; color: var(--copilot-accent); }
.copilot-empty p { max-width: 280px; line-height: 1.5; }

.copilot-settings-panel,
.copilot-guidance-panel { margin-bottom: 14px; }
.copilot-settings-panel > .copilot-panel-heading { padding-bottom: 20px; border-bottom: 1px solid var(--copilot-border); }

.copilot-master-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.copilot-master-switch input { position: absolute; opacity: 0; pointer-events: none; }
.copilot-master-switch span { position: relative; width: 42px; height: 23px; border-radius: 999px; background: #aeb6bf; transition: 160ms ease; }
.copilot-master-switch span::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: 160ms ease; }
.copilot-master-switch input:checked + span { background: var(--copilot-accent); }
.copilot-master-switch input:checked + span::after { transform: translateX(19px); }
.copilot-master-switch b { font-size: 13px; }

.copilot-all-agents-toggle { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; padding: 14px 15px; border: 1px solid var(--copilot-border); border-radius: 10px; cursor: pointer; background: var(--copilot-panel-strong); transition: 140ms ease; }
.copilot-all-agents-toggle:hover { border-color: color-mix(in srgb, var(--copilot-accent) 56%, var(--copilot-border)); }
.copilot-all-agents-toggle > input,
.copilot-category-list input { position: absolute; opacity: 0; pointer-events: none; }
.copilot-checkbox { display: grid; flex: 0 0 auto; place-items: center; width: 19px; height: 19px; border: 1px solid var(--copilot-border); border-radius: 5px; color: transparent; background: var(--copilot-panel); transition: 140ms ease; }
.copilot-checkbox svg { width: 13px; height: 13px; stroke-width: 3; }
.copilot-all-agents-toggle > input:checked + .copilot-checkbox,
.copilot-category-list input:checked + .copilot-checkbox { border-color: var(--copilot-accent); color: #fff; background: var(--copilot-accent); }
.copilot-all-agents-toggle > input:focus-visible + .copilot-checkbox,
.copilot-category-list input:focus-visible + .copilot-checkbox { outline: 2px solid color-mix(in srgb, var(--copilot-accent) 35%, transparent); outline-offset: 2px; }
.copilot-all-agents-toggle > span:last-child { display: grid; gap: 3px; }
.copilot-all-agents-toggle b { font-size: 13px; }
.copilot-all-agents-toggle small { color: var(--copilot-muted); line-height: 1.4; }

.copilot-selected-access { display: grid; grid-template-columns: minmax(210px, 0.55fr) minmax(360px, 1.45fr); gap: 22px; transition: 160ms ease; }
.copilot-selected-access.is-muted { opacity: 0.42; filter: saturate(0.65); pointer-events: none; }
.copilot-category-picker { padding-right: 20px; border-right: 1px solid var(--copilot-border); }
.copilot-category-picker h3,
.copilot-permission-list h3 { margin: 0 0 13px; font-size: 13px; }
.copilot-category-list { display: grid; border-top: 1px solid var(--copilot-border); }
.copilot-category-list label { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 4px; border-bottom: 1px solid var(--copilot-border); cursor: pointer; color: var(--copilot-text); font-size: 12px; }
.copilot-category-list label:hover { color: var(--copilot-accent); }
.copilot-category-picker p,
.copilot-inline-empty { margin: 0; color: var(--copilot-muted); font-size: 12px; }

.copilot-permission-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.copilot-permission-row { display: grid; grid-template-columns: 34px minmax(130px, 1fr) minmax(330px, 1.45fr); align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--copilot-border); }
.copilot-person-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--copilot-accent); background: var(--copilot-accent-soft); font-size: 12px; font-weight: 800; }
.copilot-person-copy { display: grid; gap: 2px; min-width: 0; }
.copilot-person-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.copilot-person-copy small { color: var(--copilot-muted); }
.copilot-user-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.copilot-user-rules label { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; color: var(--copilot-muted); font-size: 11px; white-space: nowrap; }
.copilot-user-rules input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--copilot-accent); }
.copilot-user-rules input:checked + span { color: var(--copilot-text); font-weight: 700; }

.copilot-guidance-panel { display: grid; grid-template-columns: minmax(240px, 0.7fr) minmax(360px, 1.3fr); gap: 42px; }
.copilot-guidance-panel label { display: grid; gap: 7px; }
.copilot-guidance-panel label > span { font-size: 12px; font-weight: 700; }
.copilot-guidance-panel textarea { width: 100%; min-height: 130px; resize: vertical; padding: 13px 14px; border: 1px solid var(--copilot-border); border-radius: 10px; color: var(--copilot-text); background: var(--copilot-panel-strong); font: inherit; line-height: 1.5; }
.copilot-guidance-panel textarea:focus { outline: 2px solid color-mix(in srgb, var(--copilot-accent) 28%, transparent); border-color: var(--copilot-accent); }
.copilot-guidance-panel label small { justify-self: end; color: var(--copilot-muted); }
.copilot-save-status { min-height: 20px; margin: 4px 0 0; color: var(--copilot-muted); font-size: 12px; text-align: right; }
.copilot-save-status.is-success { color: #24745e; }
.copilot-save-status.is-error { color: #b13c3c; }

.copilot-skeleton { overflow: hidden; border-radius: 9px; background: linear-gradient(100deg, #e8ebee 20%, #f5f6f7 40%, #e8ebee 60%); background-size: 240% 100%; animation: copilot-shimmer 1.2s linear infinite; }
.copilot-skeleton-title { width: 260px; height: 44px; }
.copilot-skeleton-copy { width: min(560px, 80%); height: 18px; margin: 12px 0 34px; }
.copilot-skeleton-card { height: 154px; }
.copilot-skeleton-panel { height: 320px; margin-top: 14px; }
.copilot-section-loading { display: grid; align-content: center; gap: 13px; }
.copilot-section-loading .copilot-skeleton:nth-child(1) { width: 42%; height: 12px; }
.copilot-section-loading .copilot-skeleton:nth-child(2) { width: 62%; height: 30px; }
.copilot-section-loading .copilot-skeleton:nth-child(3) { width: 78%; height: 9px; }
.copilot-panel-local-loading { display: grid; align-content: end; gap: 12px; min-height: 210px; padding-top: 22px; border-top: 1px solid var(--copilot-border); }
.copilot-panel-local-loading .copilot-skeleton { height: 34px; }
.copilot-panel-local-loading .copilot-skeleton:nth-child(1) { width: 76%; }
.copilot-panel-local-loading .copilot-skeleton:nth-child(2) { width: 92%; }
.copilot-panel-local-loading .copilot-skeleton:nth-child(3) { width: 64%; }
.copilot-panel-local-loading.is-people { align-content: start; min-height: 188px; }
.copilot-permission-loading { border-top: 1px solid var(--copilot-border); }
.copilot-permission-loading-row { display: grid; grid-template-columns: 34px minmax(120px, 1fr) minmax(250px, 1.4fr); align-items: center; gap: 10px; min-height: 54px; border-bottom: 1px solid var(--copilot-border); }
.copilot-permission-loading-row .copilot-skeleton:nth-child(1) { width: 32px; height: 32px; border-radius: 9px; }
.copilot-permission-loading-row .copilot-skeleton:nth-child(2) { width: min(150px, 76%); height: 12px; }
.copilot-permission-loading-row .copilot-skeleton:nth-child(3) { width: 100%; height: 30px; }
.copilot-category-loading { display: grid; width: 100%; }
.copilot-category-loading .copilot-skeleton { width: 72%; height: 13px; margin: 16px 4px; }
.copilot-category-loading .copilot-skeleton + .copilot-skeleton { border-top: 1px solid var(--copilot-border); }
@keyframes copilot-shimmer { to { background-position: -240% 0; } }

.copilot-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 32px 0 16px; }
.copilot-section-title h2 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.025em; }
.copilot-section-title p { margin: 0; color: var(--copilot-muted); font-size: 14px; }
.copilot-date-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid var(--copilot-border); border-radius: 9px; color: var(--copilot-muted); background: var(--copilot-panel); font-size: 13px; font-weight: 700; white-space: nowrap; }
.copilot-date-chip svg { width: 16px; height: 16px; }
.copilot-feature-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.copilot-feature-kpis article { display: flex; align-items: flex-start; gap: 14px; min-height: 128px; padding: 20px; border: 1px solid var(--copilot-border); border-radius: 14px; background: var(--copilot-panel); }
.copilot-feature-icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--copilot-accent); background: var(--copilot-accent-soft); }
.copilot-feature-icon svg { width: 19px; height: 19px; }
.copilot-feature-kpis article > div { display: grid; gap: 5px; min-width: 0; }
.copilot-feature-kpis small { color: var(--copilot-muted); font-size: 13px; font-weight: 700; }
.copilot-feature-kpis strong { font-size: 26px; line-height: 1.1; letter-spacing: -.035em; }
.copilot-feature-kpis strong em { color: var(--copilot-muted); font-size: 13px; font-style: normal; letter-spacing: 0; }
.copilot-feature-kpis article > div > span { display: flex; align-items: center; gap: 5px; color: var(--copilot-muted); font-size: 12px; font-weight: 700; }
.copilot-feature-kpis article > div > span svg { width: 14px; height: 14px; }
.copilot-feature-kpis .is-positive { color: var(--copilot-accent); }
.copilot-feature-charts { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 14px; }
.copilot-feature-trend svg { display: block; width: 100%; height: 280px; overflow: visible; }
.copilot-chart-gridlines line { stroke: var(--copilot-border); stroke-width: 1; }
.copilot-trend-area { fill: color-mix(in srgb, var(--copilot-accent) 13%, transparent); }
.copilot-trend-line { fill: none; stroke: var(--copilot-accent); stroke-width: 3; stroke-linecap: round; }
.copilot-chart-labels text { fill: var(--copilot-muted); font-size: 11px; }
.copilot-usage-mix { display: grid; align-content: start; }
.copilot-donut { display: grid; place-items: center; width: 176px; height: 176px; margin: 8px auto 24px; border-radius: 50%; background: conic-gradient(var(--copilot-accent) 0 52%, #7d9bb2 52% 77%, #b2bbc4 77% 100%); }
.copilot-donut::before { content: ""; grid-area: 1 / 1; width: 116px; height: 116px; border-radius: 50%; background: var(--copilot-panel); }
.copilot-donut > span { z-index: 1; grid-area: 1 / 1; display: grid; text-align: center; }
.copilot-donut strong { font-size: 27px; letter-spacing: -.04em; }
.copilot-donut small { color: var(--copilot-muted); font-size: 12px; }
.copilot-mix-list { display: grid; gap: 11px; }
.copilot-mix-list span { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; color: var(--copilot-muted); font-size: 13px; }
.copilot-mix-list i { width: 9px; height: 9px; border-radius: 3px; background: var(--copilot-accent); }
.copilot-mix-list i.is-transcription { background: #7d9bb2; }
.copilot-mix-list i.is-intelligence { background: #b2bbc4; }
.copilot-mix-list strong { color: var(--copilot-text); font-size: 13px; }

.copilot-feature-page-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 14px; margin-bottom: 14px; }
.copilot-feature-settings .copilot-panel-heading { padding-bottom: 20px; border-bottom: 1px solid var(--copilot-border); }
.copilot-feature-settings .copilot-panel-heading > div > span { margin-bottom: 7px; }
.copilot-feature-settings .copilot-panel-heading h2 { margin-bottom: 6px; font-size: 22px; }
.copilot-rate-banner { display: flex; align-items: center; gap: 13px; margin: 0 0 22px; padding: 15px; border: 1px solid var(--copilot-border); border-radius: 11px; background: var(--copilot-panel-strong); }
.copilot-rate-banner > div { display: grid; gap: 3px; }
.copilot-rate-banner strong { font-size: 14px; }
.copilot-rate-banner small { color: var(--copilot-muted); font-size: 12px; line-height: 1.45; }
.copilot-field { display: grid; gap: 8px; }
.copilot-field > span { font-size: 13px; font-weight: 750; }
.copilot-field > small { color: var(--copilot-muted); font-size: 12px; }
.copilot-field input,
.copilot-field textarea,
.copilot-select select { width: 100%; border: 1px solid var(--copilot-border); border-radius: 9px; color: var(--copilot-text); background: var(--copilot-panel-strong); font: inherit; }
.copilot-field input,
.copilot-select select { min-height: 43px; padding: 0 42px 0 13px; }
.copilot-field textarea { padding: 12px 13px; resize: vertical; line-height: 1.5; }
.copilot-field :is(input, textarea):focus,
.copilot-select select:focus { border-color: var(--copilot-accent); outline: 2px solid color-mix(in srgb, var(--copilot-accent) 22%, transparent); outline-offset: 1px; }
.copilot-select { position: relative; }
.copilot-select select { appearance: none; }
.copilot-select svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
.copilot-feature-mini-stats { display: grid; padding: 0; overflow: hidden; }
.copilot-feature-mini-stats > div { display: grid; align-content: center; gap: 5px; min-height: 106px; padding: 18px 20px; border-bottom: 1px solid var(--copilot-border); }
.copilot-feature-mini-stats > div:last-child { border-bottom: 0; }
.copilot-feature-mini-stats span { color: var(--copilot-muted); font-size: 13px; font-weight: 700; }
.copilot-feature-mini-stats strong { font-size: 27px; line-height: 1; letter-spacing: -.035em; }
.copilot-feature-mini-stats small { display: flex; align-items: center; gap: 5px; color: var(--copilot-muted); font-size: 12px; }
.copilot-feature-mini-stats small svg { width: 13px; height: 13px; color: var(--copilot-accent); }
.copilot-preview-settings { margin-bottom: 14px; }
.copilot-preview-access-grid { display: grid; grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr); }
.copilot-preview-agent { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; min-height: 62px; border-top: 1px solid var(--copilot-border); }
.copilot-preview-agent > span:nth-child(2) { display: grid; gap: 3px; }
.copilot-preview-agent b { font-size: 13px; }
.copilot-preview-agent small { color: var(--copilot-muted); font-size: 12px; }
.copilot-preview-agent .copilot-master-switch b { display: none; }
.copilot-feature-history { margin-bottom: 14px; }
.copilot-mini-bars { display: grid; grid-template-columns: repeat(14, minmax(18px, 1fr)); align-items: end; gap: 10px; height: 230px; padding: 24px 8px 0; border-top: 1px solid var(--copilot-border); background-image: linear-gradient(to bottom, transparent calc(25% - 1px), var(--copilot-border) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), var(--copilot-border) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), var(--copilot-border) 75%, transparent calc(75% + 1px)); }
.copilot-mini-bars > span { display: grid; grid-template-rows: 1fr 22px; align-items: end; gap: 7px; height: 100%; text-align: center; }
.copilot-mini-bars i { display: block; width: min(24px, 78%); height: var(--height); margin: 0 auto; border-radius: 5px 5px 2px 2px; background: var(--copilot-accent); }
.copilot-mini-bars small { color: var(--copilot-muted); font-size: 10px; white-space: nowrap; }
.copilot-mini-bars.is-intelligence i { background: #7d9bb2; }
.copilot-admin-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 15px; border: 1px solid color-mix(in srgb, var(--copilot-accent) 32%, var(--copilot-border)); border-radius: 11px; background: var(--copilot-accent-soft); }
.copilot-admin-notice > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--copilot-accent); }
.copilot-admin-notice strong { font-size: 14px; }
.copilot-admin-notice p { margin: 4px 0 0; color: var(--copilot-muted); font-size: 12px; line-height: 1.5; }
.copilot-admin-notice > div { flex: 1; }
.copilot-admin-badge { align-self: center; padding: 6px 9px; border-radius: 999px; color: var(--copilot-accent); background: var(--copilot-panel); font-size: 11px; font-weight: 800; white-space: nowrap; }
.copilot-intelligence-config { margin-bottom: 14px; }
.copilot-intelligence-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.copilot-intelligence-options > label { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px; padding: 15px; border: 1px solid var(--copilot-border); border-radius: 10px; cursor: pointer; background: var(--copilot-panel-strong); }
.copilot-intelligence-options input { position: absolute; opacity: 0; pointer-events: none; }
.copilot-intelligence-options input:checked + .copilot-checkbox { border-color: var(--copilot-accent); color: #fff; background: var(--copilot-accent); }
.copilot-intelligence-options label > span:last-child { display: grid; gap: 4px; }
.copilot-intelligence-options b { font-size: 13px; }
.copilot-intelligence-options small { color: var(--copilot-muted); font-size: 12px; line-height: 1.45; }
.copilot-form-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 14px; }
.copilot-preview-actions { display: flex; justify-content: flex-end; margin-top: 20px; }

html[data-dashboard-theme="dark"] .copilot-page {
  --copilot-bg: #101214;
  --copilot-panel: #191c1f;
  --copilot-panel-strong: #141719;
  --copilot-border: #30363c;
  --copilot-text: #f0f1ef;
  --copilot-muted: #a4adb6;
  --copilot-accent: #8ec3d4;
  --copilot-accent-soft: #203039;
}
html[data-dashboard-theme="dark"] body:has(.copilot-page) :is(.main, .content, .workspace) {
  background: #101214;
  background-image: none;
}
html[data-dashboard-theme="dark"] .copilot-page .button-primary { border-color: #e5e7e5; color: #151719; background: #e5e7e5; box-shadow: none; }
html[data-dashboard-theme="dark"] .copilot-alert { border-color: #633f43; color: #f1b8bd; background: #2c1c1f; }
html[data-dashboard-theme="dark"] .copilot-user-rules input { color-scheme: dark; }
html[data-dashboard-theme="dark"] .copilot-skeleton { background: linear-gradient(100deg, #202428 20%, #2a3035 40%, #202428 60%); background-size: 240% 100%; }
html[data-dashboard-theme="dark"] body:has(.copilot-page) .modal-backdrop { background: rgba(0, 0, 0, 0.74); backdrop-filter: blur(4px); }
html[data-dashboard-theme="dark"] .copilot-page .portal-topup-modal-card { border-color: var(--copilot-border); background: var(--copilot-panel); color: var(--copilot-text); }
html[data-dashboard-theme="dark"] .copilot-page :is(.modal-card-head, .portal-topup-quantity-row, .portal-modal-actions) { border-color: var(--copilot-border); }
html[data-dashboard-theme="dark"] .copilot-page :is(.modal-card-head p, .portal-topup-bundles button small, .portal-topup-quantity-row > span small) { color: var(--copilot-muted); }
html[data-dashboard-theme="dark"] .copilot-page :is(.portal-topup-bundles button, .portal-seat-stepper) { border-color: var(--copilot-border); background: var(--copilot-panel-strong); color: var(--copilot-text); }
html[data-dashboard-theme="dark"] .copilot-page .portal-topup-bundles button.is-active { border-color: var(--copilot-accent); background: var(--copilot-accent-soft); }
html[data-dashboard-theme="dark"] .copilot-page :is(.portal-seat-stepper button, .portal-seat-stepper input) { border-color: var(--copilot-border); color: var(--copilot-text); background: transparent; }
html[data-dashboard-theme="dark"] .copilot-page .portal-modal-actions { background: var(--copilot-panel-strong); }

/* Portal Webhooks: complete graphite dark theme --------------------------- */
html[data-dashboard-theme="dark"] body:has(.portal-webhook-config) {
  --webhook-dark-canvas: #111214;
  --webhook-dark-surface: #191a1d;
  --webhook-dark-surface-raised: #1e2023;
  --webhook-dark-surface-soft: #151618;
  --webhook-dark-field: #131416;
  --webhook-dark-hover: #24262a;
  --webhook-dark-border: #303338;
  --webhook-dark-border-strong: #464a50;
  --webhook-dark-text: #ededeb;
  --webhook-dark-muted: #9b9ea3;
  --webhook-dark-faint: #74787e;
  --webhook-dark-accent: #8db6c6;
  --webhook-dark-accent-soft: #203039;
  color-scheme: dark;
  background: var(--webhook-dark-canvas);
}

html[data-dashboard-theme="dark"] body:has(.portal-webhook-config) :is(.main, .content, .workspace),
html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) {
  background: var(--webhook-dark-canvas) !important;
  color: var(--webhook-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) {
  --dashboard-ink: var(--webhook-dark-text);
  --dashboard-muted: var(--webhook-dark-muted);
  --dashboard-border: var(--webhook-dark-border);
  --dashboard-panel: var(--webhook-dark-surface);
  --developer-navy: var(--webhook-dark-text);
  --developer-blue: var(--webhook-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-dev-panel,
  .portal-webhook-config,
  .portal-event-catalog,
  .portal-event-group
) {
  border-color: var(--webhook-dark-border);
  background: var(--webhook-dark-surface);
  color: var(--webhook-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-dev-panel-header,
  .portal-event-group,
  .portal-event-savebar
) {
  border-color: var(--webhook-dark-border);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-page-heading h1,
  .portal-dev-panel-header h2,
  .portal-event-group-header h3,
  .portal-event-summary strong
) {
  color: var(--webhook-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-page-heading p,
  .portal-dev-panel-header p,
  .portal-event-group-header p,
  .portal-event-summary,
  .portal-event-savebar p,
  .portal-webhook-secret > div p
) {
  color: var(--webhook-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-page-kicker,
  .portal-webhook-url-row label > span,
  .portal-webhook-secret > div > span
) {
  color: var(--webhook-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-events-heading {
  border-color: var(--webhook-dark-border);
  background: var(--webhook-dark-surface);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-event-group-icon {
  background: var(--webhook-dark-accent-soft);
  color: var(--webhook-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-webhook-url-row input,
  .portal-webhook-secret,
  .portal-group-check,
  .portal-icon-button
) {
  border-color: var(--webhook-dark-border-strong);
  background: var(--webhook-dark-field);
  color: var(--webhook-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-webhook-url-row input::placeholder {
  color: var(--webhook-dark-faint);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-webhook-url-row label svg {
  color: var(--webhook-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-webhook-url-row input:focus {
  border-color: var(--webhook-dark-accent);
  box-shadow: 0 0 0 3px rgba(141, 182, 198, 0.13);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-webhook-url-row input:disabled {
  border-color: var(--webhook-dark-border);
  background: var(--webhook-dark-surface-soft);
  color: var(--webhook-dark-faint);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-webhook-secret code {
  color: #d7e1e5;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-icon-button:hover,
  .portal-group-check:hover
) {
  border-color: var(--webhook-dark-border-strong);
  background: var(--webhook-dark-hover);
  color: var(--webhook-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-group-check {
  color: var(--webhook-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-group-check input,
  .portal-event-option input
) {
  border-color: #5b6269;
  background: var(--webhook-dark-field);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-group-check input:hover,
  .portal-event-option input:hover
) {
  border-color: var(--webhook-dark-accent);
  background: var(--webhook-dark-accent-soft);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-group-check input:checked,
  .portal-event-option input:checked
) {
  border-color: var(--webhook-dark-accent);
  background: #47798c;
  box-shadow: 0 0 0 2px rgba(141, 182, 198, 0.12);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .portal-group-check input:focus-visible,
  .portal-event-option input:focus-visible
) {
  outline-color: var(--webhook-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-event-option code {
  color: #c1cbd0;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-event-option:hover code {
  color: #e4f0f3;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-event-savebar {
  background: var(--webhook-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-enable-switch {
  color: var(--webhook-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-enable-switch i {
  background: #3b3f44;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-enable-switch input:checked + i {
  background: #47798c;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-webhook-form-error {
  color: #ef9a9f;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .portal-webhook-form-success {
  color: #7fd3aa;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .button-secondary {
  border-color: var(--webhook-dark-border-strong);
  background: var(--webhook-dark-surface-raised);
  color: var(--webhook-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .button-secondary:hover:not(:disabled) {
  border-color: #596068;
  background: var(--webhook-dark-hover);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .button-primary {
  border-color: #e1e3e1;
  background: #e1e3e1;
  color: #17191b;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) .button-primary:hover:not(:disabled) {
  border-color: #f3f4f2;
  background: #f3f4f2;
  color: #111315;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-webhook-config) :is(
  .button:disabled,
  .portal-webhook-url-row input:disabled
) {
  opacity: 0.58;
}

/* Portal API: complete graphite dark theme ------------------------------- */
html[data-dashboard-theme="dark"] body:has(.portal-api-accounts-panel) {
  --api-dark-canvas: #111214;
  --api-dark-surface: #191a1d;
  --api-dark-surface-raised: #1e2023;
  --api-dark-surface-soft: #151618;
  --api-dark-field: #131416;
  --api-dark-hover: #24262a;
  --api-dark-border: #303338;
  --api-dark-border-strong: #464a50;
  --api-dark-text: #ededeb;
  --api-dark-muted: #9b9ea3;
  --api-dark-faint: #74787e;
  --api-dark-accent: #8db6c6;
  --api-dark-accent-soft: #203039;
  color-scheme: dark;
  background: var(--api-dark-canvas);
}

html[data-dashboard-theme="dark"] body:has(.portal-api-accounts-panel) :is(.main, .content, .workspace),
html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) {
  background: var(--api-dark-canvas) !important;
  color: var(--api-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) {
  --dashboard-ink: var(--api-dark-text);
  --dashboard-muted: var(--api-dark-muted);
  --dashboard-border: var(--api-dark-border);
  --dashboard-panel: var(--api-dark-surface);
  --developer-navy: var(--api-dark-text);
  --developer-blue: var(--api-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-dev-panel,
  .portal-api-capabilities
) {
  border-color: var(--api-dark-border);
  background: var(--api-dark-surface);
  color: var(--api-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-api-accounts-panel > .portal-dev-panel-header,
  .portal-api-catalog-header
) {
  border-color: var(--api-dark-border);
  background: var(--api-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-page-heading h1,
  .portal-dev-panel-header h2,
  .portal-api-column-header h3,
  .portal-api-keys-empty h3,
  .portal-dev-empty h3,
  .portal-api-catalog-header h2,
  .portal-api-event-group-title strong,
  .portal-api-key-identity strong,
  .portal-api-key-meta span,
  .portal-api-key-used strong,
  .portal-service-account-select strong,
  .portal-dev-modal-header h2,
  .portal-dev-form > label,
  .portal-dev-form legend,
  .portal-choice-row strong
) {
  color: var(--api-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-api-column-header p,
  .portal-dev-empty p,
  .portal-api-catalog-header p,
  .portal-api-event-group-description,
  .portal-api-event-group-title small,
  .portal-api-key-meta small,
  .portal-api-key-used span,
  .portal-service-account-select small,
  .portal-dev-modal-header p,
  .portal-choice-row small
) {
  color: var(--api-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-endpoint {
  border-color: var(--api-dark-border-strong);
  background: var(--api-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-endpoint span {
  color: var(--api-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-endpoint code {
  color: #dbe5e8;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-api-column-header,
  .portal-api-account-sidebar,
  .portal-api-key-column,
  .portal-api-key-row,
  .portal-service-account-nav-row,
  .portal-api-catalog-column,
  .portal-api-event-group
) {
  border-color: var(--api-dark-border);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-account-sidebar {
  background: var(--api-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-api-column-header,
  .portal-api-key-column
) {
  background: var(--api-dark-surface);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-service-account-nav-row:hover,
  .portal-service-account-nav-row.is-selected
) {
  background: var(--api-dark-surface-raised);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-service-account-nav-row.is-selected::before {
  background: var(--api-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-service-account-mark,
  .portal-api-key-icon,
  .portal-capability-icon,
  .portal-dev-empty > span
) {
  background: var(--api-dark-accent-soft);
  color: var(--api-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-key-identity code {
  color: #9fb3bd;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .button-secondary,
  .portal-copy-button,
  .portal-icon-button
) {
  border-color: var(--api-dark-border-strong);
  background: var(--api-dark-surface-raised);
  color: var(--api-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .button-secondary:hover:not(:disabled),
  .portal-copy-button:hover:not(:disabled),
  .portal-icon-button:hover:not(:disabled)
) {
  border-color: #5a5f66;
  background: var(--api-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-column-action,
  .portal-service-key-button
) {
  border-color: #46636f;
  background: var(--api-dark-accent-soft);
  color: #d9e7eb;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) :is(
  .portal-column-action:hover:not(:disabled),
  .portal-service-key-button:hover:not(:disabled)
) {
  border-color: #648593;
  background: #283b44;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .button-primary {
  border-color: #e1e3e1;
  background: #e1e3e1;
  color: #17191b;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .button-primary:hover:not(:disabled) {
  border-color: #f3f4f2;
  background: #f3f4f2;
  color: #111315;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-icon-button.is-danger:hover:not(:disabled) {
  border-color: #78494d;
  background: #2b1d20;
  color: #f09da3;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-group summary:hover,
html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-group[open] summary {
  background: var(--api-dark-surface-raised);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-group-toggle {
  color: var(--api-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-list {
  border-color: var(--api-dark-border);
  background: var(--api-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-row {
  border-color: var(--api-dark-border);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-row code {
  color: #cbd8dd;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-row > span {
  color: #91aab5;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-row > span::before {
  background: #7399a9;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-row > span.is-write {
  color: #c4a774;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-api-event-row > span.is-write::before {
  background: #c29a5e;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-dev-modal-backdrop {
  background: rgba(4, 5, 6, 0.72);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-dev-modal-card {
  border-color: var(--api-dark-border-strong);
  background: var(--api-dark-surface);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-dev-modal-header {
  border-color: var(--api-dark-border);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-dev-form input[type="text"] {
  border-color: var(--api-dark-border-strong);
  background: var(--api-dark-field);
  color: var(--api-dark-text);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-dev-form input[type="text"]::placeholder {
  color: var(--api-dark-faint);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-dev-form input[type="text"]:focus {
  border-color: var(--api-dark-accent);
  box-shadow: 0 0 0 3px rgba(141, 182, 198, 0.13);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-choice-row {
  border-color: var(--api-dark-border);
  background: var(--api-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-choice-row:hover {
  border-color: var(--api-dark-border-strong);
  background: var(--api-dark-surface-raised);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-secret-reveal {
  border-color: var(--api-dark-border-strong);
  background: var(--api-dark-field);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-secret-reveal > div > span {
  color: var(--api-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-secret-reveal code {
  color: #dbe5e8;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .portal-secret-warning {
  color: #d3b06d;
}

html[data-dashboard-theme="dark"] .portal-developer-page:has(.portal-api-accounts-panel) .button:disabled {
  opacity: 0.58;
}

@media (max-width: 1100px) {
  .copilot-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .copilot-feature-mix-card { grid-column: auto; }
  .copilot-content-grid { grid-template-columns: 1fr; }
  .copilot-feature-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .copilot-feature-charts,
  .copilot-feature-page-grid { grid-template-columns: 1fr; }
  .copilot-feature-mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .copilot-feature-mini-stats > div { border-right: 1px solid var(--copilot-border); border-bottom: 0; }
  .copilot-feature-mini-stats > div:last-child { border-right: 0; }
}

@media (max-width: 760px) {
  .copilot-page { padding: 20px 15px 32px; }
  .copilot-page-header { align-items: flex-start; flex-direction: column; }
  .copilot-header-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .copilot-period-selector { width: 100%; overflow-x: auto; }
  .copilot-period-selector button { flex: 1 0 auto; }
  .copilot-balance-head .copilot-buy-credits { width: auto; }
  .copilot-feature-percentages { grid-template-columns: 1fr; gap: 8px; }
  .copilot-save { width: 100%; justify-content: center; }
  .copilot-overview-grid,
  .copilot-selected-access,
  .copilot-guidance-panel,
  .copilot-feature-kpis,
  .copilot-preview-access-grid,
  .copilot-intelligence-options,
  .copilot-form-grid { grid-template-columns: 1fr; }
  .copilot-section-title { align-items: flex-start; flex-direction: column; }
  .copilot-feature-mini-stats { grid-template-columns: 1fr; }
  .copilot-feature-mini-stats > div { border-right: 0; border-bottom: 1px solid var(--copilot-border); }
  .copilot-mini-bars { gap: 4px; overflow-x: auto; }
  .copilot-mini-bars > span { min-width: 23px; }
  .copilot-category-picker { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--copilot-border); }
  .copilot-chart { gap: 3px; overflow-x: auto; }
  .copilot-chart-column { min-width: 24px; }
  .copilot-permission-row { grid-template-columns: 34px minmax(0, 1fr); }
  .copilot-user-rules { grid-column: 1 / -1; }
  .copilot-permission-loading-row { grid-template-columns: 34px minmax(0, 1fr); }
  .copilot-permission-loading-row .copilot-skeleton:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .portal-api-catalog-header {
    padding: 18px;
  }

  .portal-api-event-group summary {
    min-height: 86px;
    gap: 11px;
    padding: 15px 16px;
  }

  .portal-api-event-group-description {
    font-size: 12px;
  }

  .portal-api-event-list {
    padding-right: 16px;
    padding-left: 61px;
  }

  .portal-developer-page .portal-page-header-actions,
  .portal-developer-page .portal-page-header-actions .button {
    width: 100%;
  }

  .portal-api-endpoint,
  .portal-api-endpoint > div,
  .portal-dev-panel-header,
  .portal-webhook-secret,
  .portal-event-savebar {
    align-items: stretch;
  }

  .portal-api-endpoint > div {
    display: grid;
    gap: 5px;
  }

  .portal-api-key-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 14px 16px;
  }

  .portal-api-account-workspace {
    grid-template-columns: 1fr;
  }

  .portal-api-account-sidebar {
    max-height: 260px;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--dashboard-border);
  }

  .portal-api-key-column-header {
    align-items: flex-start;
  }

  .portal-api-key-column-header .button {
    min-height: 36px;
  }

  .portal-service-account-empty-state {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .portal-service-account-empty-state .button {
    width: 100%;
    margin-left: 0;
  }

  .portal-capability-grid,
  .portal-event-options {
    grid-template-columns: 1fr;
  }

  .portal-capability-item {
    min-height: 0;
    border-right: 0;
  }

  .portal-capability-item:nth-last-child(2) {
    border-bottom: 1px solid var(--dashboard-border);
  }

  .portal-webhook-url-row {
    grid-template-columns: 1fr;
  }

  .portal-webhook-secret {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .portal-webhook-secret > div {
    grid-column: 1 / -1;
  }

  .portal-event-options {
    padding-left: 0;
  }

  .portal-events-heading {
    flex-direction: column;
  }

  .portal-events-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .portal-event-group-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .portal-group-check {
    grid-column: 2;
    justify-self: start;
    margin: 2px 0 0;
  }

  .portal-event-savebar {
    flex-direction: column;
  }

  .portal-event-savebar .button {
    width: 100%;
  }

  .portal-dev-modal {
    padding: 12px;
  }

  .portal-secret-reveal {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Portal email provider workspace */
.content:has(.portal-email-page) {
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
}

.workspace:has(> .portal-email-page) {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
}

.portal-email-page {
  display: block;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  color: #13243a;
  background: #f7f9fb;
}

.email-integrations-shell {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 16px;
}

.email-provider-sidebar {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 10px 20px;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.email-provider-sidebar > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 9px 18px;
  margin-bottom: 13px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.email-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #d7e1e9;
  border-radius: 9px;
  background: #f1f5f7;
  color: #145270;
}

.email-sidebar-icon svg {
  width: 18px;
  height: 18px;
}

.email-provider-sidebar h1,
.email-provider-sidebar p {
  margin: 0;
}

.email-provider-sidebar h1 {
  color: #10233a;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.email-provider-sidebar header p {
  margin-top: 3px;
  color: #758397;
  font-size: 12px;
}

.email-provider-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 9px 7px;
  color: #77879a;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.email-provider-list-heading small {
  color: #9aa6b5;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.email-provider-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: none;
}

.email-provider-list::-webkit-scrollbar {
  display: none;
}

.email-provider-nav-item {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #31475e;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.email-provider-nav-item:hover {
  background: #f1f4f7;
}

.email-provider-nav-item.is-active {
  border-color: #dce4eb;
  background: #edf2f6;
  color: #10243b;
}

.email-provider-nav-item:focus-visible {
  outline: 2px solid rgba(20, 82, 112, 0.35);
  outline-offset: 1px;
}

.email-provider-nav-item > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-provider-nav-item strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-provider-nav-item small {
  color: #8795a6;
  font-size: 10.5px;
}

.email-provider-nav-item > svg {
  width: 15px;
  height: 15px;
  color: #9aa7b5;
}

.email-provider-nav-mark,
.email-provider-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(17, 34, 51, 0.1);
  background: #ffffff;
}

.email-provider-nav-mark img,
.email-provider-mark img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.email-provider-nav-mark.is-postmark img,
.email-provider-mark.is-postmark img {
  border-radius: 5px;
}

.email-provider-nav-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.email-provider-mark {
  width: 48px;
  height: 48px;
  border-radius: 11px;
}

.email-provider-nav-mark.is-resend,
.email-provider-mark.is-resend {
  background: #ffffff;
}

.email-provider-nav-mark.is-amazon-ses,
.email-provider-mark.is-amazon-ses {
  background: #fff5e8;
  color: #a54b08;
}

.email-provider-nav-mark.is-sendgrid,
.email-provider-mark.is-sendgrid {
  background: #edf6fd;
  color: #17699a;
}

.email-provider-nav-mark.is-mailgun,
.email-provider-mark.is-mailgun {
  background: #fff0f0;
  color: #a52e39;
}

.email-provider-nav-mark.is-postmark,
.email-provider-mark.is-postmark {
  background: #fff8d9;
  color: #745d00;
}

.email-sidebar-note {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  margin: auto 9px 0;
  padding-top: 16px;
  border-top: 1px solid #e2e8ed;
  color: #78879a;
}

.email-sidebar-note svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.email-sidebar-note p {
  font-size: 11.5px;
  line-height: 1.5;
}

.email-provider-main {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 10px;
  background: #ffffff;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.email-provider-main::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.email-provider-view {
  min-height: 100%;
}

.email-provider-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 30px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
  background: #ffffff;
}

.email-provider-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.email-provider-heading > div {
  min-width: 0;
}

.email-provider-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.email-provider-title-row h1 {
  margin: 0;
  color: #10233a;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.email-provider-heading p {
  max-width: 670px;
  margin: 6px 0 0;
  color: #68788c;
  font-size: 13px;
  line-height: 1.5;
}

.email-connection-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #68788c;
  font-size: 11.5px;
  font-weight: 650;
}

.email-connection-state > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a8b3bf;
}

.email-connect-button,
.email-save-button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #172333;
  border-radius: 7px;
  background: #172333;
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.email-connect-button:hover,
.email-save-button:hover {
  border-color: #0b111a;
  background: #0b111a;
}

.email-connect-button:active,
.email-save-button:active {
  transform: translateY(1px);
}

.email-provider-content {
  width: 100%;
  display: grid;
  gap: 0;
  padding: 0;
}

.email-settings-section {
  display: grid;
  gap: 20px;
  padding: 26px 30px 28px;
  border: 0;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 0;
  background: #ffffff;
}

.email-settings-section:last-child {
  border-bottom: 0;
}

.email-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.email-section-heading h2,
.email-section-heading p {
  margin: 0;
}

.email-section-heading h2 {
  color: #15283f;
  font-size: 15.5px;
  line-height: 1.3;
}

.email-section-heading p {
  margin-top: 4px;
  color: #748397;
  font-size: 12px;
  line-height: 1.5;
}

.email-section-heading > span {
  color: #8794a4;
  font-size: 10.5px;
  font-weight: 700;
}

.email-connection-form {
  display: grid;
  gap: 16px;
}

.email-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.email-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #53657a;
  font-size: 11.5px;
  font-weight: 650;
}

.email-field-wide {
  grid-column: 1 / -1;
}

.email-field small {
  margin-left: 4px;
  color: #95a0ae;
  font: inherit;
  font-weight: 500;
}

.email-field input,
.email-field select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #ced8e1;
  border-radius: 7px;
  background: #ffffff;
  color: #172b40;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.email-field input::placeholder {
  color: #9ba7b5;
}

.email-field input:focus,
.email-field select:focus {
  border-color: rgba(20, 82, 112, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 82, 112, 0.08);
}

.email-form-footer,
.email-settings-footer {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.email-form-footer p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #7c8b9d;
  font-size: 11px;
}

.email-form-footer svg {
  width: 13px;
  height: 13px;
}

.email-preview-helper {
  color: #68788c;
  font-size: 11px;
  line-height: 1.4;
}

.email-setting-rows {
  display: grid;
  border-top: 1px solid #e4e9ee;
}

.email-setting-row {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid #e4e9ee;
  cursor: pointer;
}

.email-setting-row > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.email-setting-row strong {
  color: #23384e;
  font-size: 12.5px;
  font-weight: 700;
}

.email-setting-row small {
  color: #7b899a;
  font-size: 11.5px;
  line-height: 1.4;
}

.email-setting-row input {
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  appearance: none;
  position: relative;
  border: 1px solid #cbd5df;
  border-radius: 999px;
  background: #dbe2e9;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.email-setting-row input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(18, 35, 52, 0.2);
  transition: transform 150ms ease;
}

.email-setting-row input:checked {
  border-color: #376e69;
  background: #376e69;
}

.email-setting-row input:checked::after {
  transform: translateX(16px);
}

.email-setting-row input:focus-visible {
  outline: 2px solid rgba(20, 82, 112, 0.35);
  outline-offset: 2px;
}

.email-settings-footer {
  justify-content: flex-end;
}

.email-settings-footer .email-preview-helper {
  margin-right: auto;
}

.email-connection-state.is-connected {
  color: #2e6f62;
}

.email-connection-state.is-connected > span {
  background: #39a27d;
  box-shadow: 0 0 0 3px rgba(57, 162, 125, 0.12);
}

.email-prototype-badge {
  padding: 4px 7px;
  border: 1px solid #d9e2ea;
  border-radius: 5px;
  background: #f5f7f9;
  color: #738397;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-direction-tabs {
  display: flex;
  align-items: flex-end;
  gap: 34px;
  padding: 0 30px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
  background: #ffffff;
}

.email-direction-tabs > button {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #68798c;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease;
}

.email-direction-tabs > button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background-color 150ms ease;
}

.email-direction-tabs > button:hover {
  color: #315b70;
}

.email-direction-tabs > button.is-active {
  color: #174d67;
}

.email-direction-tabs > button.is-active::after {
  background: #245f79;
}

.email-direction-tabs > button > svg {
  width: 18px;
  height: 18px;
}

.email-direction-tabs > button > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.email-direction-tabs strong {
  color: #23384d;
  font-size: 14px;
}

.email-direction-tabs small {
  display: none;
}

.email-direction-tabs .email-tab-check {
  width: 15px;
  height: 15px;
  color: #3b8a72;
}

.email-prototype-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 30px 0;
  padding: 10px 12px;
  border: 1px solid #d8e6e1;
  border-radius: 7px;
  background: #f2f8f6;
  color: #3d7064;
  font-size: 11.5px;
  line-height: 1.4;
}

.email-prototype-notice svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.email-flow {
  display: grid;
  padding: 8px 30px 34px;
}

.email-flow-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
}

.email-flow-step-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 27px;
}

.email-flow-step:not(:last-child) .email-flow-step-rail::after {
  content: "";
  position: absolute;
  top: 57px;
  bottom: -8px;
  left: 50%;
  width: 1px;
  background: #dce4ea;
}

.email-flow-step-rail > span {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfd9e1;
  border-radius: 50%;
  background: #ffffff;
  color: #7d8b9b;
  font-size: 11px;
  font-weight: 750;
}

.email-flow-step-rail svg {
  width: 14px;
  height: 14px;
}

.email-flow-step.is-active .email-flow-step-rail > span {
  border-color: #376f83;
  background: #376f83;
  color: #ffffff;
}

.email-flow-step.is-complete .email-flow-step-rail > span {
  border-color: #3b8a72;
  background: #3b8a72;
  color: #ffffff;
}

.email-flow-step.is-complete:not(:last-child) .email-flow-step-rail::after {
  background: #9bc7b9;
}

.email-flow-step-body {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 24px 0 28px;
  border-bottom: 1px solid #e2e8ed;
}

.email-flow-step:last-child .email-flow-step-body {
  padding-bottom: 0;
  border-bottom: 0;
}

.email-flow-step-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.email-flow-step-heading h2,
.email-flow-step-heading p {
  margin: 0;
}

.email-flow-step-heading h2 {
  color: #15283f;
  font-size: 15px;
  line-height: 1.35;
}

.email-flow-step-heading p {
  margin-top: 4px;
  color: #748397;
  font-size: 11.5px;
  line-height: 1.5;
}

.email-step-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid #dbe2e8;
  border-radius: 999px;
  background: #f7f9fa;
  color: #8592a1;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.email-step-status.is-active {
  border-color: #e3d7b3;
  background: #fff9e8;
  color: #8b6b14;
}

.email-step-status.is-complete {
  border-color: #cce1da;
  background: #eef7f4;
  color: #34725f;
}

.email-flow-form {
  padding: 18px;
  border: 1px solid #dfe6ec;
  border-radius: 9px;
  background: #fafcfd;
}

.email-connected-summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d8e6e1;
  border-radius: 8px;
  background: #f5faf8;
}

.email-connected-summary > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin-right: auto;
}

.email-connected-summary strong {
  overflow: hidden;
  color: #29473f;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-connected-summary small {
  color: #718a83;
  font-size: 10.5px;
}

.email-summary-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #cce0d9;
  border-radius: 8px;
  background: #ffffff;
  color: #3d7b69;
}

.email-summary-icon svg {
  width: 16px;
  height: 16px;
}

.email-summary-icon.is-domain {
  color: #52748b;
}

.email-summary-icon.is-webhook {
  color: #6b57a5;
}

.email-success-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: #3b7d69;
  font-size: 10.5px;
  font-weight: 700;
}

.email-success-label svg {
  width: 13px;
  height: 13px;
}

.email-locked-note,
.email-capability-note {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px dashed #d5dee5;
  border-radius: 8px;
  background: #fafbfc;
  color: #8290a0;
  font-size: 11.5px;
  line-height: 1.45;
}

.email-locked-note svg,
.email-capability-note svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.email-domain-card,
.email-webhook-card {
  overflow: hidden;
  border: 1px solid #dfe6ec;
  border-radius: 9px;
  background: #ffffff;
}

.email-domain-card-top,
.email-webhook-intro {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e3e9ee;
}

.email-domain-card-top > div,
.email-webhook-intro > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin-right: auto;
}

.email-domain-card-top small,
.email-webhook-intro small {
  color: #8391a1;
  font-size: 9.5px;
  line-height: 1.4;
}

.email-domain-card-top strong,
.email-webhook-intro strong {
  overflow: hidden;
  color: #283c51;
  font-size: 12.5px;
  text-overflow: ellipsis;
}

.email-dns-table {
  display: grid;
  padding: 4px 14px;
}

.email-dns-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(120px, 0.8fr) minmax(180px, 1.5fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid #edf0f3;
}

.email-dns-row:last-child {
  border-bottom: 0;
}

.email-dns-row.is-heading {
  min-height: 30px;
  color: #8a97a6;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.email-dns-row code {
  overflow: hidden;
  color: #536477;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-domain-actions {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid #e3e9ee;
  background: #fafbfc;
}

.email-domain-actions p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #7b8999;
  font-size: 10.5px;
  line-height: 1.4;
}

.email-domain-actions p svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.email-secondary-button,
.email-tertiary-button,
.email-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #cbd6df;
  border-radius: 7px;
  background: #ffffff;
  color: #30475e;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.email-secondary-button,
.email-tertiary-button {
  min-height: 36px;
  padding: 0 12px;
}

.email-secondary-button {
  border-color: #466e7d;
  color: #27566a;
}

.email-secondary-button:hover,
.email-tertiary-button:hover,
.email-icon-button:hover {
  border-color: #aebdc9;
  background: #f5f8fa;
}

.email-secondary-button svg,
.email-tertiary-button svg {
  width: 14px;
  height: 14px;
}

.email-address-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.email-address-toolbar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-address-toolbar strong {
  color: #31475c;
  font-size: 12px;
}

.email-address-toolbar small {
  color: #8290a1;
  font-size: 10.5px;
}

.email-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-inline-form {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid #cbdbe3;
  border-radius: 9px;
  background: #f8fbfc;
  box-shadow: 0 8px 20px rgba(26, 54, 74, 0.05);
}

.email-inline-form.is-compact {
  gap: 14px;
}

.email-inline-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.email-inline-form-heading > div {
  display: grid;
  gap: 3px;
}

.email-inline-form-heading strong {
  color: #263d52;
  font-size: 12.5px;
}

.email-inline-form-heading small {
  color: #7e8d9e;
  font-size: 10.5px;
}

.email-inline-form-heading > button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8190a0;
  cursor: pointer;
}

.email-inline-form-heading > button:hover {
  background: #edf2f5;
}

.email-inline-form-heading svg {
  width: 15px;
  height: 15px;
}

.email-inline-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.email-inline-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.email-inline-add-row .email-save-button {
  height: 42px;
}

.email-assignment-picker {
  display: grid;
  align-content: start;
  align-self: start;
  gap: 10px;
  padding: 0;
  border: 0;
}

.email-assignment-picker legend {
  margin-bottom: 8px;
  color: #53657a;
  font-size: 11.5px;
  font-weight: 650;
}

.email-permission-disabled-note {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #d9e1e7;
  border-radius: 7px;
  background: #f4f6f8;
  color: #71808f;
  font-size: 10px;
  font-weight: 650;
}

.email-permission-disabled-note.hidden {
  display: none;
}

.email-permission-disabled-note svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.email-assignment-picker.is-disabled .email-choice-grid,
.email-assignment-picker.is-disabled .email-assignment-options,
.email-assignment-picker.is-disabled .email-dispatcher-selection {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.email-assignment-picker.is-disabled .email-choice-card {
  cursor: not-allowed;
}

.email-choice-grid {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.email-choice-card {
  position: relative;
  cursor: pointer;
}

.email-choice-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.email-choice-card > span {
  min-height: 66px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-content: center;
  padding: 10px;
  border: 1px solid #d8e1e8;
  border-radius: 7px;
  background: #ffffff;
}

.email-choice-card svg {
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: #6d8194;
}

.email-choice-card strong {
  color: #364c61;
  font-size: 11px;
}

.email-choice-card small {
  color: #8794a3;
  font-size: 9.5px;
}

.email-choice-card > input:checked + span {
  border-color: #4f7a88;
  background: #f2f7f8;
  box-shadow: inset 0 0 0 1px rgba(49, 102, 120, 0.08);
}

.email-assignment-options {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e0e6eb;
  border-radius: 7px;
  background: #ffffff;
}

.email-assignment-options.hidden {
  display: none;
}

.email-assignment-option-list > label {
  position: relative;
  cursor: pointer;
}

.email-assignment-option-list > label > input {
  position: absolute;
  opacity: 0;
}

.email-assignment-option-list > label > span {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 1px solid #e7ecf0;
  color: #5b6f83;
  font-size: 10.5px;
}

.email-assignment-option-list > label:last-of-type > span {
  border-bottom: 0;
}

.email-assignment-option-list > label > span svg {
  width: 14px;
  height: 14px;
  padding: 2px;
  border: 1px solid #cbd6de;
  border-radius: 4px;
  color: transparent;
}

.email-assignment-option-list > label > input:checked + span {
  background: #edf5f6;
  color: #24566b;
}

.email-assignment-option-list > label > input:checked + span svg {
  border-color: #507b89;
  background: #507b89;
  color: #ffffff;
}

.email-assignment-option-list {
  display: grid;
  max-height: 204px;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid #e0e6eb;
  border-radius: 6px;
  scrollbar-width: thin;
  scrollbar-color: #c7d2da transparent;
}

.email-assignment-option-list > label.hidden {
  display: none;
}

.email-assignment-search {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #d8e1e8;
  border-radius: 6px;
  background: #ffffff;
  cursor: text;
}

.email-assignment-search > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #8190a0;
}

.email-assignment-search > input {
  position: static;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3e5267;
  font: inherit;
  font-size: 10.5px;
  opacity: 1;
  outline: 0;
}

.email-assignment-search > input::placeholder {
  color: #96a2ae;
}

.email-assignment-no-results {
  display: none;
  padding: 11px;
  color: #8b98a5;
  font-size: 10px;
  text-align: center;
}

.email-assignment-no-results.is-visible {
  display: block;
}

.email-address-list,
.email-inbound-list {
  display: grid;
  gap: 8px;
}

.email-address-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(150px, 0.8fr) minmax(180px, 1.2fr) auto 30px;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid #e0e6eb;
  border-radius: 8px;
  background: #ffffff;
}

.email-address-avatar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8e1e7;
  border-radius: 8px;
  background: #f5f8fa;
  color: #526f83;
}

.email-address-avatar.is-inbound {
  color: #596f9e;
}

.email-address-avatar svg {
  width: 15px;
  height: 15px;
}

.email-address-primary,
.email-address-access,
.email-inbound-identity > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-address-primary strong,
.email-inbound-identity strong {
  overflow: hidden;
  color: #2b4055;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-address-primary small,
.email-inbound-identity small {
  overflow: hidden;
  color: #8491a1;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-address-access small {
  color: #919dab;
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.email-address-access span {
  overflow: hidden;
  color: #53677b;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-icon-button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #7e8d9d;
}

.email-icon-button svg {
  width: 13px;
  height: 13px;
}

.email-empty-state {
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed #d6dfe6;
  border-radius: 8px;
  background: #fbfcfd;
  text-align: center;
}

.email-empty-state > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
  border-radius: 8px;
  background: #eef3f6;
  color: #6e8192;
}

.email-empty-state svg {
  width: 15px;
  height: 15px;
}

.email-empty-state strong {
  color: #41566b;
  font-size: 11.5px;
}

.email-empty-state p {
  margin: 4px 0 0;
  color: #8895a4;
  font-size: 10.5px;
}

.email-webhook-card {
  padding-bottom: 0;
}

.email-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 14px;
}

.email-webhook-url-field {
  position: relative;
  min-width: 0;
}

.email-webhook-url-field code {
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 42px 0 11px;
  border: 1px solid #dce4ea;
  border-radius: 6px;
  background: #f7f9fa;
  color: #506276;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-copy-icon-button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #65778a;
  cursor: pointer;
}

.email-copy-icon-button:hover {
  background: #e9eef2;
  color: #324d63;
}

.email-copy-icon-button svg {
  width: 14px;
  height: 14px;
}

.email-copy-field .email-add-webhook-button {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 13px;
  white-space: nowrap;
}

.email-copy-field .email-add-webhook-button svg {
  width: 13px;
  height: 13px;
}

.email-add-webhook-button::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 10;
  top: calc(100% + 7px);
  right: 0;
  width: max-content;
  max-width: 230px;
  padding: 7px 9px;
  border-radius: 5px;
  background: #172333;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.email-add-webhook-button:hover::after,
.email-add-webhook-button:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.email-event-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 14px 14px;
}

.email-event-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6d7f91;
  font-size: 10px;
}

.email-event-list svg {
  width: 12px;
  height: 12px;
  color: #43806f;
}

.email-capability-note {
  min-height: 42px;
  border-style: solid;
  border-color: #e3dcbf;
  background: #fffdf5;
  color: #80734a;
  font-size: 10.5px;
}

.email-inbound-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(130px, 0.75fr) minmax(140px, 0.85fr) 30px;
  align-items: end;
  gap: 10px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #e0e6eb;
  border-radius: 8px;
  background: #ffffff;
}

.email-inbound-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  align-self: center;
}

.email-route-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.email-route-field > span {
  color: #7f8d9c;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-route-field select {
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #d2dce4;
  border-radius: 6px;
  background: #ffffff;
  color: #43596e;
  font: inherit;
  font-size: 10.5px;
  outline: none;
}

.email-route-field select:focus {
  border-color: rgba(20, 82, 112, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 82, 112, 0.08);
}

.email-list-page {
  display: grid;
  gap: 18px;
  padding: 26px 30px 34px;
}

.email-list-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.email-list-page-heading h2,
.email-list-page-heading p {
  margin: 0;
}

.email-list-page-heading h2 {
  color: #15283f;
  font-size: 16px;
  line-height: 1.35;
}

.email-list-page-heading p {
  max-width: 650px;
  margin-top: 4px;
  color: #748397;
  font-size: 11.5px;
  line-height: 1.5;
}

.email-secondary-button:disabled {
  border-color: #dbe2e7;
  background: #f5f7f8;
  color: #a1abb5;
  cursor: not-allowed;
}

.email-account-list {
  display: grid;
  gap: 12px;
}

.email-account-form {
  border-color: #c8d8e0;
}

.email-account-card {
  overflow: hidden;
  border: 1px solid #dbe3e9;
  border-radius: 9px;
  background: #ffffff;
}

.email-account-card.is-collapsed .email-account-card-header {
  border-bottom: 0;
}

.email-account-card-header {
  min-height: 70px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8ed;
  background: #fafcfd;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.email-account-card-header:hover {
  background: #f6f9fa;
}

.email-account-card-header:focus-visible {
  outline: 2px solid rgba(20, 82, 112, 0.35);
  outline-offset: -2px;
}

.email-account-card-header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-account-card-header strong {
  overflow: hidden;
  color: #2a4055;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-account-card-header small {
  overflow: hidden;
  color: #8290a0;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.email-account-card-header > .email-account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.email-account-collapse-indicator {
  width: 26px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #738496;
}

.email-account-collapse-indicator svg {
  width: 15px;
  height: 15px;
}

.email-add-account-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.email-account-webhook {
  border-bottom: 1px solid #e2e8ed;
  background: #ffffff;
}

.email-account-webhook .email-webhook-intro {
  border-bottom: 0;
}

.email-webhook-state {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: #8793a0;
  font-size: 9.5px;
  font-weight: 700;
}

.email-webhook-state svg {
  width: 13px;
  height: 13px;
}

.email-webhook-state.is-added {
  color: #397461;
}

.email-webhook-state.is-not-added {
  color: #8c7a50;
}

.email-webhook-actions {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid #edf0f2;
  background: #fafcfd;
}

.email-webhook-actions > span:first-child {
  color: #7c8b9b;
  font-size: 10.5px;
  line-height: 1.4;
}

.email-webhook-actions .email-save-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.email-webhook-actions .email-save-button svg {
  width: 13px;
  height: 13px;
}

.email-webhook-added {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #397461 !important;
  font-size: 10px !important;
  font-weight: 700;
}

.email-webhook-added svg {
  width: 13px;
  height: 13px;
}

.email-provider-backend-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  border-bottom: 1px solid #e2e8ed;
  background: #fffaf0;
  color: #806d42;
  font-size: 10.5px;
  line-height: 1.45;
}

.email-provider-backend-note svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.email-account-domains {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.email-account-domains-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.email-account-domains-heading > div {
  display: grid;
  gap: 2px;
}

.email-account-domains-heading strong {
  color: #3d5266;
  font-size: 11.5px;
}

.email-account-domains-heading small {
  color: #8995a3;
  font-size: 9.5px;
}

.email-domain-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d9e3e8;
  border-radius: 8px;
  background: #f8fbfc;
}

.email-domain-add-form > button {
  height: 42px;
}

.email-account-domain-list {
  display: grid;
  border-top: 1px solid #e7ebef;
}

.email-add-domain-row {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 32px auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed #aebfca;
  border-radius: 8px;
  background: #fbfcfd;
  color: #40576a;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.email-add-domain-row:hover {
  border-color: #557c8b;
  background: #f4f8f9;
  color: #204f62;
}

.email-add-domain-row > span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccd8df;
  border-radius: 7px;
  background: #ffffff;
  color: #456b7b;
}

.email-add-domain-row > span svg {
  width: 15px;
  height: 15px;
}

.email-add-domain-row strong {
  font-size: 11.5px;
  white-space: nowrap;
}

.email-add-domain-row small {
  overflow: hidden;
  color: #8795a3;
  font-size: 9.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-domain-create-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 15px;
  border: 1px dashed #9eb4c0;
  border-radius: 8px;
  background: #f8fbfc;
}

.email-domain-create-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.email-domain-create-heading > div {
  display: grid;
  gap: 3px;
}

.email-domain-create-heading strong {
  color: #2c4358;
  font-size: 12px;
}

.email-domain-create-heading small {
  color: #7f8e9d;
  font-size: 10px;
}

.email-domain-create-heading > button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7f8f9d;
  cursor: pointer;
}

.email-domain-create-heading > button:hover {
  background: #edf2f5;
}

.email-domain-create-heading > button svg {
  width: 15px;
  height: 15px;
}

.email-domain-create-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 12px;
}

.email-domain-create-context {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 8px;
  padding: 7px 12px;
  border: 1px solid #d5dee5;
  border-radius: 7px;
  background: #ffffff;
}

.email-domain-create-context small {
  grid-column: 1 / -1;
  color: #82909d;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.email-domain-create-context strong {
  color: #30495d;
  font-size: 11px;
}

.email-domain-create-context span {
  align-self: center;
  color: #929daa;
  font-size: 9px;
  text-align: right;
}

.email-domain-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.email-account-domain-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border-bottom: 1px solid #e7ebef;
}

.email-account-domain-row:last-child {
  border-bottom: 0;
}

.email-domain-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #f1f5f7;
  color: #58748a;
}

.email-domain-icon svg {
  width: 14px;
  height: 14px;
}

.email-account-domain-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-account-domain-row strong {
  overflow: hidden;
  color: #34495d;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-domain-capabilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.email-account-domain-row > .email-domain-capabilities {
  display: flex;
}

.email-domain-capabilities > * + * {
  position: relative;
  margin-left: 15px;
}

.email-domain-capabilities > * + *::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: -8px;
  width: 1px;
  background: #e1e7eb;
}

.email-capability-badge {
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #586c7f;
  white-space: nowrap;
}

.email-capability-badge > svg,
.email-capability-action > svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 7px;
  border-radius: 7px;
  background: #edf6f3;
  color: #397461;
}

.email-domain-capabilities > :nth-child(2) > svg {
  background: #edf6f3;
  color: #397461;
}

.email-capability-badge > span,
.email-capability-action > span {
  display: grid;
  gap: 2px;
  text-align: left;
}

.email-capability-badge small,
.email-capability-action small {
  color: #8b98a5;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.email-capability-badge strong,
.email-capability-action strong {
  color: #40566a;
  font-size: 10px;
  line-height: 1.1;
}

.email-capability-action {
  min-width: 78px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 5px;
  border: 1px solid #cfc3e5;
  border-radius: 7px;
  background: #faf8fd;
  color: #66519a;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.email-capability-action:hover {
  border-color: #aa97cf;
  background: #f4f0fa;
  color: #59428d;
}

.email-domain-capabilities > .email-capability-action > svg {
  background: #eee8f7;
  color: #66519a;
}

.email-capability-action:hover > svg {
  background: #e6def3;
}

.email-domain-status {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 1px solid #e1e7eb;
  border-radius: 0;
  background: transparent;
  color: #84909e;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

.email-domain-status svg {
  width: 13px;
  height: 13px;
}

.email-domain-status.is-verified {
  border-color: #e1e7eb;
  background: transparent;
  color: #4f766b;
}

.email-domain-dns-setup {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #e7ebef;
  background: #f8fbfc;
}

.email-domain-dns-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.email-domain-dns-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-domain-dns-heading strong {
  color: #344d61;
  font-size: 13px;
}

.email-domain-dns-heading small {
  color: #7f8f9e;
  font-size: 11px;
  line-height: 1.45;
}

.email-domain-dns-table {
  overflow: hidden;
  border: 1px solid #d9e2e8;
  border-radius: 7px;
  background: #ffffff;
}

.email-domain-dns-table-head,
.email-domain-dns-record {
  display: grid;
  grid-template-columns: 76px minmax(170px, 0.9fr) minmax(240px, 1.4fr) 76px;
  align-items: center;
}

.email-domain-dns-table-head {
  min-height: 34px;
  background: #f1f5f7;
  color: #7f8e9c;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.email-domain-dns-table-head span,
.email-domain-dns-record > .email-dns-value {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid #e4e9ed;
}

.email-domain-dns-table-head span:last-child,
.email-domain-dns-record > .email-dns-value:last-child {
  border-right: 0;
}

.email-domain-dns-record {
  border-top: 1px solid #e4e9ed;
}

.email-dns-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.email-dns-value code {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #4b6173;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-dns-value button {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d6e0e6;
  border-radius: 5px;
  background: #ffffff;
  color: #5e7385;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.email-dns-value button:hover {
  border-color: #9fb3c2;
  background: #f3f7f9;
  color: #173e5c;
}

.email-dns-value button.is-copied {
  border-color: #acd7c9;
  background: #edf8f4;
  color: #18765e;
}

.email-dns-value button.is-error {
  border-color: #edb7b7;
  color: #b64242;
}

.email-dns-value button svg {
  width: 13px;
  height: 13px;
}

.email-domain-dns-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-domain-dns-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #748697;
  font-size: 11px;
}

.email-domain-dns-actions > span svg {
  width: 12px;
  height: 12px;
}

.email-receiving-setup {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #e7ebef;
  background: #faf8fd;
}

.email-receiving-setup-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.email-receiving-setup-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-receiving-setup-heading strong {
  color: #463d5f;
  font-size: 13px;
}

.email-receiving-setup-heading small {
  color: #817895;
  font-size: 11px;
  line-height: 1.45;
}

.email-receiving-dns {
  display: grid;
  gap: 8px;
}

.email-receiving-dns-record {
  display: grid;
  grid-template-columns: 90px minmax(170px, 0.8fr) minmax(240px, 1.2fr);
  gap: 8px;
}

.email-receiving-dns-record > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid #ded8e8;
  border-radius: 6px;
  background: #ffffff;
}

.email-receiving-dns small {
  color: #998eaa;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.email-receiving-dns code {
  overflow: hidden;
  color: #5c516f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-receiving-setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-receiving-setup-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7e7391;
  font-size: 11px;
}

.email-receiving-setup-actions > span svg {
  width: 12px;
  height: 12px;
}

.email-account-domain-row small {
  overflow: hidden;
  color: #8793a1;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-account-domain-empty {
  padding: 18px 4px 4px;
  color: #8b97a4;
  font-size: 10.5px;
  text-align: center;
}

.email-empty-state.is-large {
  min-height: 220px;
}

.email-empty-state .email-secondary-button {
  margin-top: 14px;
}

.email-delete-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 24, 37, 0.34);
  backdrop-filter: blur(2px);
}

.email-delete-dialog {
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  padding: 20px;
  border: 1px solid #d8e0e6;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 20px 55px rgba(17, 34, 51, 0.2);
}

.email-delete-dialog-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff0f0;
  color: #a7444c;
}

.email-delete-dialog-icon svg {
  width: 17px;
  height: 17px;
}

.email-delete-dialog-copy {
  min-width: 0;
}

.email-delete-dialog-copy h2,
.email-delete-dialog-copy p {
  margin: 0;
}

.email-delete-dialog-copy h2 {
  color: #20364b;
  font-size: 16px;
  line-height: 1.35;
}

.email-delete-dialog-copy p {
  margin-top: 7px;
  color: #68798b;
  font-size: 11.5px;
  line-height: 1.55;
}

.email-delete-dialog-copy small {
  display: block;
  margin-top: 7px;
  color: #8a96a3;
  font-size: 10.5px;
  line-height: 1.45;
}

.email-delete-dialog-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.email-delete-confirm-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #9e3943;
  border-radius: 7px;
  background: #a7444c;
  color: #ffffff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.email-delete-confirm-button:hover {
  border-color: #853039;
  background: #923740;
}

.email-address-builder {
  min-width: 0;
  height: 42px;
  display: grid;
  grid-template-columns: minmax(90px, 0.65fr) auto minmax(150px, 1.35fr);
  align-items: center;
  border: 1px solid #ced8e1;
  border-radius: 7px;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.email-address-builder:focus-within {
  border-color: rgba(20, 82, 112, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 82, 112, 0.08);
}

.email-field .email-address-builder input,
.email-field .email-address-builder select {
  min-width: 0;
  height: 40px;
  padding-inline: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.email-field .email-address-builder input {
  text-align: right;
}

.email-address-builder > span {
  color: #8190a0;
  font-size: 13px;
  font-weight: 600;
}

.email-address-routing-heading .email-toolbar-actions {
  flex: 0 0 auto;
}

.email-routing-explainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #dce5ea;
  border-radius: 8px;
  background: #f8fafb;
}

.email-routing-explainer > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
}

.email-routing-explainer > span > svg {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 7px;
  background: #edf3f5;
  color: #527184;
}

.email-routing-explainer > b {
  color: #98a5b2;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.email-routing-explainer strong {
  color: #344b5f;
  font-size: 11px;
}

.email-routing-explainer small {
  overflow: hidden;
  color: #8492a1;
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-address-route-form {
  gap: 20px;
}

.email-handler-picker {
  padding-top: 2px;
}

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

.email-handler-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
  align-items: start;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dce5ea;
  border-radius: 8px;
  background: #ffffff;
}

.email-handler-settings.hidden {
  display: none;
}

.email-agent-assignment-warning {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #d7e3ef;
  border-radius: 7px;
  background: #f5f8fc;
  color: #526a84;
  font-size: 11.5px;
  line-height: 1.45;
}

.email-agent-assignment-warning.hidden {
  display: none;
}

.email-agent-assignment-warning > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #2f73bb;
}

.email-agent-assignment-warning span {
  flex: 1 1 auto;
}

.email-agent-assignment-warning button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #175ea8;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.email-handler-callout {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.email-handler-callout > svg {
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 8px;
  background: #edf4f5;
  color: #3c7180;
}

.email-handler-callout > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.email-handler-callout strong {
  color: #31495d;
  font-size: 11.5px;
}

.email-handler-callout small {
  color: #7d8d9c;
  font-size: 10px;
  line-height: 1.45;
}

.email-ai-handoff-settings {
  grid-template-columns: 1fr;
  gap: 18px;
}

.email-ai-handoff-toggle {
  grid-template-columns: 18px 32px minmax(0, 1fr);
  align-items: start;
  cursor: pointer;
}

.email-ai-handoff-toggle > input {
  width: 14px;
  height: 14px;
  margin: 9px 0 0;
  accent-color: #3c7180;
}

.email-ai-handoff-settings [data-email-ai-handoff-categories] {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.email-ai-handoff-settings [data-email-ai-handoff-categories] > strong {
  color: #31495d;
  font-size: 11.5px;
}

.email-ai-handoff-settings [data-email-ai-handoff-categories].is-disabled {
  opacity: 0.46;
  filter: saturate(0.35);
  pointer-events: none;
  user-select: none;
}

.email-ai-send-permissions {
  padding-top: 18px;
  border-top: 1px solid #d9e3eb;
}

.email-ai-send-permissions .email-assignment-picker {
  margin: 0;
}

.email-portal-permissions {
  grid-template-columns: 1fr;
}

.email-permission-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  padding-top: 2px;
}

.email-permission-columns .email-choice-grid {
  grid-template-columns: 1fr;
}

.email-permission-columns .email-choice-card > span {
  min-height: 54px;
}

.email-dispatcher-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #35677b;
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
}

.email-dispatcher-link svg {
  width: 13px;
  height: 13px;
}

.email-dispatcher-selection {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid #dce5ea;
  border-radius: 7px;
  background: #f8fafb;
}

.email-dispatcher-selection.hidden {
  display: none;
}

.email-dispatcher-selection .email-dispatcher-link {
  justify-self: start;
  color: #7d8d9c;
  font-size: 9.5px;
  font-weight: 600;
}

.email-routing-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.email-routing-select-trigger {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 11px;
  border: 1px solid #ced8e1;
  border-radius: 7px;
  background: #ffffff;
  color: #172b40;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.email-routing-select-trigger:hover:not(:disabled) {
  border-color: #aebfcb;
  background: #fbfcfd;
}

.email-routing-select-trigger:focus-visible,
.email-routing-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: #2e718d;
  box-shadow: 0 0 0 2px rgba(46, 113, 141, 0.12);
}

.email-routing-select-trigger:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.email-routing-select-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.email-routing-select-value > svg,
.email-routing-select-option span > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #35677b;
}

.email-routing-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-routing-select-chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #718394;
  transition: transform 140ms ease;
}

.email-routing-select-trigger[aria-expanded="true"] .email-routing-select-chevron {
  transform: rotate(180deg);
}

.email-routing-select-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #d3dde4;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(18, 39, 55, 0.14);
}

.email-routing-select-menu[hidden] {
  display: none;
}

.email-routing-select-option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #243a4d;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.email-routing-select-option > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.email-routing-select-option:hover,
.email-routing-select-option:focus-visible {
  outline: none;
  background: #f1f5f7;
}

.email-routing-select-option.is-selected {
  background: #eaf2f4;
  color: #174e64;
}

.email-routing-select-check {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #23708c;
  opacity: 0;
}

.email-routing-select-option.is-selected .email-routing-select-check {
  opacity: 1;
}

html[data-dashboard-theme="dark"] .email-routing-select-trigger {
  border-color: #363a3f;
  background: #18191b;
  color: #f1f2f3;
}

html[data-dashboard-theme="dark"] .email-routing-select-trigger:hover:not(:disabled) {
  border-color: #4a5057;
  background: #202225;
}

html[data-dashboard-theme="dark"] .email-routing-select-menu {
  border-color: #363a3f;
  background: #18191b;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

html[data-dashboard-theme="dark"] .email-routing-select-option {
  color: #e7e9eb;
}

html[data-dashboard-theme="dark"] .email-routing-select-option:hover,
html[data-dashboard-theme="dark"] .email-routing-select-option:focus-visible {
  background: #24272b;
}

html[data-dashboard-theme="dark"] .email-routing-select-option.is-selected {
  background: #273139;
  color: #d8edf5;
}

.email-fallback-preview {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px dashed #ccd9e1;
  border-radius: 7px;
  color: #6d8091;
}

.email-fallback-preview > svg {
  width: 16px;
  height: 16px;
}

.email-fallback-preview > span {
  display: grid;
  gap: 2px;
}

.email-fallback-preview strong {
  color: #40566a;
  font-size: 10.5px;
}

.email-fallback-preview small {
  color: #83919f;
  font-size: 9.5px;
}

.email-route-section {
  display: grid;
  gap: 8px;
}

.email-route-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.email-route-section-heading strong {
  color: #40556a;
  font-size: 11.5px;
}

.email-route-section-heading small {
  color: #8a97a5;
  font-size: 9.5px;
}

.email-unified-address-row {
  grid-template-columns: 36px minmax(150px, 0.85fr) minmax(230px, 1.25fr) auto;
}

.email-unified-address-row.is-fallback {
  border-style: dashed;
  background: #fbfcfd;
}

.email-address-avatar.is-ai {
  border-color: #d9d6e8;
  background: #f6f4fb;
  color: #685c92;
}

.email-address-avatar.is-dispatcher {
  border-color: #d3e1df;
  background: #f1f8f6;
  color: #357467;
}

.email-address-avatar.is-portal {
  border-color: #d8e1e7;
  background: #f4f7f9;
  color: #526f83;
}

.email-address-access .email-handler-name {
  color: #344d62;
  font-weight: 700;
}

.email-address-access em {
  overflow: hidden;
  color: #82909f;
  font-size: 9.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-address-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.email-route-capabilities {
  display: flex;
  align-items: center;
  gap: 10px;
}

.email-route-capabilities span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4a756b;
  font-size: 9.5px;
  font-weight: 650;
  white-space: nowrap;
}

.email-route-capabilities span + span {
  padding-left: 10px;
  border-left: 1px solid #e2e7eb;
}

.email-route-capabilities span.is-unavailable {
  color: #9aa4ae;
}

.email-route-capabilities svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 900px) {
  .email-integrations-shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .email-provider-sidebar {
    padding-inline: 10px;
  }

  .email-provider-header,
  .email-settings-section {
    padding-inline: 22px;
  }

  .email-provider-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .email-fields-grid {
    grid-template-columns: 1fr;
  }

  .email-field-wide {
    grid-column: auto;
  }

  .email-address-row {
    grid-template-columns: 36px minmax(130px, 1fr) auto 30px;
  }

  .email-unified-address-row {
    grid-template-columns: 36px minmax(150px, 1fr) auto;
  }

  .email-address-access {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .email-inbound-row {
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.8fr) 30px;
  }

  .email-inbound-row .email-route-field:last-of-type {
    grid-column: 2;
    grid-row: 2;
  }

  .email-account-card-header {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }
}

@media (max-width: 680px) {
  .content:has(.portal-email-page) {
    overflow-y: auto;
  }

  .portal-email-page {
    height: auto;
    min-height: 100dvh;
  }

  .email-integrations-shell {
    display: block;
    padding: 12px;
  }

  .email-provider-sidebar {
    padding: 18px 14px 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(4, 56, 115, 0.11);
  }

  .email-provider-list-heading,
  .email-sidebar-note {
    display: none;
  }

  .email-provider-list {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
  }

  .email-provider-nav-item {
    min-width: max-content;
    grid-template-columns: 30px auto;
  }

  .email-provider-nav-item > svg,
  .email-provider-nav-item small {
    display: none;
  }

  .email-provider-nav-mark {
    width: 30px;
    height: 30px;
  }

  .email-provider-main {
    overflow: visible;
  }

  .email-provider-heading {
    align-items: flex-start;
  }

  .email-provider-content {
    padding: 0;
  }

  .email-settings-section {
    padding: 22px 20px;
  }

  .email-direction-tabs {
    gap: 26px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .email-direction-tabs > button {
    flex: 0 0 auto;
    min-height: 54px;
  }

  .email-direction-tabs::-webkit-scrollbar {
    display: none;
  }

  .email-direction-tabs .email-tab-check {
    display: none;
  }

  .email-prototype-notice {
    margin: 12px 20px 0;
  }

  .email-flow {
    padding: 4px 20px 28px;
  }

  .email-flow-step {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .email-flow-step-rail > span {
    width: 25px;
    height: 25px;
  }

  .email-flow-step:not(:last-child) .email-flow-step-rail::after {
    top: 54px;
  }

  .email-flow-step-heading,
  .email-address-toolbar,
  .email-domain-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .email-toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .email-choice-grid {
    grid-template-columns: 1fr;
  }

  .email-routing-explainer {
    grid-template-columns: 1fr;
  }

  .email-routing-explainer > b {
    display: none;
  }

  .email-handler-settings,
  .email-permission-columns {
    grid-template-columns: 1fr;
  }

  .email-dns-table {
    overflow-x: auto;
  }

  .email-dns-row {
    min-width: 560px;
  }

  .email-address-row {
    grid-template-columns: 36px minmax(0, 1fr) 30px;
  }

  .email-unified-address-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .email-unified-address-row .email-address-access {
    grid-column: 2 / -1;
    grid-row: auto;
  }

  .email-unified-address-row .email-address-row-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .email-address-row > .email-success-label {
    display: none;
  }

  .email-address-access {
    grid-column: 2 / -1;
  }

  .email-inbound-row {
    grid-template-columns: 1fr 30px;
    align-items: center;
  }

  .email-inbound-identity {
    grid-column: 1;
  }

  .email-inbound-row .email-route-field,
  .email-inbound-row .email-route-field:last-of-type {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .email-inbound-row > .email-icon-button {
    grid-column: 2;
    grid-row: 1;
  }

  .email-copy-field,
  .email-inline-add-row {
    grid-template-columns: 1fr;
  }

  .email-copy-field .email-add-webhook-button,
  .email-inline-add-row .email-save-button {
    min-height: 38px;
  }

  .email-list-page {
    padding: 22px 20px 28px;
  }

  .email-list-page-heading,
  .email-account-domains-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .email-account-card-header {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .email-account-actions {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-end;
  }

  .email-account-domain-row {
    grid-template-columns: 32px minmax(0, 1fr);
    padding-block: 9px;
  }

  .email-domain-capabilities {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .email-account-domain-row > .email-domain-status {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    min-height: 30px;
    margin-top: 3px;
    padding: 8px 0 0;
    border-top: 1px solid #e1e7eb;
    border-left: 0;
  }

  .email-add-domain-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .email-add-domain-row small {
    grid-column: 2;
    white-space: normal;
  }

  .email-domain-create-fields {
    grid-template-columns: 1fr;
  }

  .email-domain-dns-table {
    overflow-x: auto;
  }

  .email-domain-dns-table-head,
  .email-domain-dns-record {
    min-width: 700px;
  }

  .email-receiving-dns-record {
    grid-template-columns: 1fr;
  }

  .email-domain-dns-actions,
  .email-receiving-setup-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .email-webhook-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .email-address-builder {
    grid-template-columns: minmax(70px, 0.55fr) auto minmax(125px, 1.45fr);
  }
}

.workspace-command-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr);
  gap: 30px;
  align-items: center;
  min-height: 150px;
  padding: 28px 30px;
  border: 1px solid rgba(27, 57, 76, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: var(--dashboard-ink);
  box-shadow: var(--dashboard-shadow);
}

.workspace-command-hero::after {
  display: none;
}

.command-hero-copy,
.command-status-strip {
  position: relative;
  z-index: 1;
}

.command-hero-copy {
  display: grid;
  gap: 10px;
}

.workspace-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.command-eyebrow {
  width: fit-content;
  color: #145270;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.command-hero-copy h1 {
  margin: 0;
  max-width: 680px;
  color: var(--dashboard-ink);
  font-size: clamp(32px, 3.3vw, 50px);
  line-height: 1.03;
  letter-spacing: 0;
}

.workspace-switch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(20, 82, 112, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #145270;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(21, 38, 54, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.workspace-switch-button:hover {
  background: #ffffff;
  border-color: rgba(20, 82, 112, 0.34);
  box-shadow: 0 12px 24px rgba(21, 38, 54, 0.09);
  transform: translateY(-1px);
}

.workspace-switch-button svg {
  width: 18px;
  height: 18px;
}

.command-hero-copy p {
  margin: 0;
  max-width: 620px;
  color: var(--dashboard-muted);
  font-size: 16px;
  line-height: 1.55;
}

.command-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  justify-self: end;
  width: min(100%, 640px);
  padding: 8px 0;
  border-top: 1px solid rgba(27, 57, 76, 0.1);
  border-bottom: 1px solid rgba(27, 57, 76, 0.1);
}

.command-status-strip div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 54px;
  padding: 0 18px;
  border-left: 1px solid rgba(27, 57, 76, 0.12);
  border-right: 0;
}

.command-status-strip div:last-child {
  border-right: 0;
}

.command-status-strip div:first-child {
  border-left: 0;
  padding-left: 2px;
}

.command-status-strip svg,
.status-dot {
  grid-row: span 2;
}

.command-status-strip svg {
  width: 18px;
  height: 18px;
  color: #145270;
}

.status-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #41dd8a;
  box-shadow: 0 0 0 5px rgba(65, 221, 138, 0.12);
}

.command-status-strip span:not(.status-dot) {
  min-width: 0;
  color: var(--dashboard-muted);
  font-size: 12px;
  font-weight: 650;
}

.command-status-strip strong {
  min-width: 0;
  color: var(--dashboard-ink);
  font-size: 15px;
  font-weight: 800;
}

.workspace-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.command-module-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 40px;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px 16px;
  min-height: 178px;
  padding: 22px;
  border: 1px solid var(--dashboard-border);
  border-radius: 12px;
  background: var(--dashboard-panel);
  color: var(--dashboard-ink);
  text-align: left;
  box-shadow: var(--dashboard-shadow-tight);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.command-module-card {
  color: var(--dashboard-ink);
  text-decoration: none;
}

.command-module-card:hover {
  border-color: rgba(20, 82, 112, 0.34);
  box-shadow: 0 16px 30px rgba(21, 38, 54, 0.1);
  transform: translateY(-2px);
}

.command-module-card:hover .command-card-arrow {
  border-color: rgba(20, 82, 112, 0.34);
  color: #145270;
}

.command-card-icon {
  grid-row: 1 / 3;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eef3f6;
  border: 1px solid #dde6ea;
  color: #145270;
}

.command-card-icon svg {
  width: 23px;
  height: 23px;
}

.command-card-arrow {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8ec;
  color: #7d8a9a;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.command-card-arrow svg {
  width: 17px;
  height: 17px;
}

.command-module-card strong {
  grid-column: 2 / 4;
  align-self: end;
  margin-top: 2px;
  color: var(--dashboard-ink);
  font-size: 19px;
  line-height: 1.15;
}

.command-module-card > span:not(.command-card-icon):not(.command-card-arrow):not(.command-card-metric):not(.command-card-channels) {
  grid-column: 2 / 4;
  color: var(--dashboard-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.command-card-metric {
  grid-column: 2 / 4;
  align-self: end;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 14px;
  color: var(--dashboard-muted);
  font-size: 13px;
}

.command-card-metric em {
  font-style: normal;
}

.command-card-metric b {
  color: var(--dashboard-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.command-card-metric-muted {
  color: var(--dashboard-muted);
  font-weight: 700;
}

.command-card-channels {
  grid-column: 2 / 4;
  align-self: end;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  min-width: 0;
}

.command-card-channels-count {
  color: #13866f;
  font-size: 12px;
  font-weight: 800;
}

.command-card-channels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.command-card-channels-list .command-channel-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 4px 9px 4px 5px;
  border: 1px solid #e2e8ec;
  border-radius: 999px;
  background: #f6f8f9;
  color: var(--dashboard-muted);
  font-size: 12px;
  font-weight: 700;
}

.command-card-channels-list .command-channel-row-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 0;
  background: transparent;
}

.command-card-channels-list .command-channel-row-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.command-card-channels-list .command-channel-row strong {
  color: var(--dashboard-ink);
  font-size: 12px;
}

.command-card-channels-list .command-channel-row.is-connected {
  border-color: rgba(19, 134, 111, 0.28);
  background: rgba(239, 249, 244, 0.9);
  color: var(--dashboard-ink);
}

.command-card-channels-list .command-channel-empty {
  color: var(--dashboard-muted);
  font-size: 12px;
  font-weight: 650;
}

.command-module-card-portal {
  border-color: rgba(185, 121, 43, 0.28);
  background: linear-gradient(180deg, #ffffff, #fffcf6);
}

.command-module-card-portal .command-card-icon {
  background: #fbf1e2;
  border-color: #f0dcbe;
  color: #b9792b;
}

.command-module-card-portal:hover {
  border-color: rgba(185, 121, 43, 0.5);
}

.command-module-card-portal:hover .command-card-arrow {
  border-color: rgba(185, 121, 43, 0.4);
  color: #b9792b;
}

.command-channel-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.command-channel-row-icon img {
  object-fit: contain;
}

.agents-page-header {
  min-height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 8px;
}

.agents-page-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.agents-page-heading h1 {
  margin: 0;
  color: #102033;
  font-size: 26px;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.agents-page-heading > span,
.agents-page-availability {
  color: #68778b;
  font-size: 12.5px;
  font-weight: 650;
}

.agents-page-availability {
  padding-bottom: 2px;
  color: #40566e;
}

.agents-roster-panel {
  display: grid;
  gap: 20px;
  min-width: 0;
  container-name: agent-roster;
  container-type: inline-size;
}

.agents-combined-section {
  display: grid;
  gap: 22px;
}

.agent-slot-group {
  display: grid;
  gap: 12px;
}

.agent-slot-group + .agent-slot-group {
  padding-top: 18px;
  border-top: 1px solid #edf2f7;
}

.agents-roster-page .agent-slot-section {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(27, 57, 76, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(21, 38, 54, 0.05);
}

.agents-roster-page .agent-slot-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
  margin: 0;
}

.agents-roster-page .agent-slot-section-title div {
  display: grid;
  gap: 3px;
}

.agents-roster-page .agent-slot-section h2 {
  margin: 0;
  color: #172d45;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: none;
}

.agents-roster-page .section-helper {
  color: #66758a;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.agent-roster-list {
  gap: 10px;
}

.agent-roster-row.agent-slot-card {
  min-height: 76px;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  gap: 12px;
  border-color: rgba(27, 57, 76, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
}

.agent-roster-row.agent-slot-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: #145270;
  opacity: 0.8;
}

.agent-roster-row.agent-slot-card:hover {
  border-color: rgba(20, 82, 112, 0.3);
  box-shadow: 0 8px 18px rgba(21, 38, 54, 0.06);
}

.agent-roster-row.agent-slot-card.is-inactive-slot {
  background: #f7f9fc;
  border-color: #dbe3ee;
}

.agent-roster-row.agent-slot-card.is-inactive-slot::before {
  background: #c7772c;
}

.agent-roster-row.agent-slot-card.create-card[data-open-create] {
  background: #fbfdff;
  border-color: rgba(6, 68, 131, 0.32);
  box-shadow: none;
}

.agent-roster-row.agent-slot-card.create-card[data-open-create]::before {
  background: #13866f;
}

.agent-add-slot-action {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid #e6ecf1;
  border-radius: 0;
  background: transparent;
  color: #496077;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.agent-add-slot-action:hover {
  background: #f8fafc;
  color: #173f68;
}

.agent-add-slot-action:focus-visible {
  outline: 2px solid rgba(20, 82, 112, 0.34);
  outline-offset: 2px;
}

.agent-add-slot-action-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #dce5ec;
  border-radius: 6px;
  background: #fff;
}

.agent-add-slot-action-icon svg {
  width: 14px;
  height: 14px;
}

.agent-add-slot-action-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.agent-add-slot-action-copy strong {
  color: #203a53;
  font-size: 12.5px;
}

.agent-add-slot-action-copy span,
.agent-add-slot-action-label {
  color: #728197;
  font-size: 11.5px;
}

.agent-add-slot-action-label {
  padding-right: 4px;
  font-weight: 650;
}

.agent-row-reorder {
  width: 46px;
  min-height: 76px;
  color: #8da0b6;
}

.agent-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #edf6f4;
  color: #145270;
}

.agent-row-copy strong {
  font-size: 16px;
}

.agent-row-copy span {
  color: #66758a;
  font-size: 12px;
  font-weight: 650;
}

.agent-row-copy span:empty {
  display: none;
}

.agent-type-pill,
.agent-status-pill {
  min-height: 28px;
  border-radius: 8px;
  font-size: 12px;
}

.agent-type-pill {
  color: #17324d;
  background: #edf4fb;
}

.agent-status-pill.is-active {
  color: #116149;
  background: #e9f7f2;
}

.agent-status-pill.is-inactive {
  color: #7c2d12;
  background: #fff3e9;
}

.agent-status-pill.is-empty {
  color: #064483;
  background: #edf4fb;
}

.agents-side-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.agents-side-block {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(27, 57, 76, 0.14);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fbfcf9);
  color: var(--dashboard-ink);
  box-shadow: 0 12px 26px rgba(21, 38, 54, 0.07);
}

.agents-side-block .credits-header {
  color: var(--dashboard-ink);
}

.agents-side-block .credits-bar {
  background: #dfe8e5;
}

.agents-side-block .credits-bar span {
  background: linear-gradient(90deg, #145270, #13866f);
}

.agents-side-block .credits-meta {
  color: var(--dashboard-muted);
}

.agents-side-block .credits-meta [data-credits-usage],
.agents-side-block .credits-meta [data-credits-extra] {
  color: #2c4053;
}

.agents-side-kicker {
  color: var(--dashboard-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.agents-mix-list {
  display: grid;
  gap: 8px;
}

.agents-mix-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(27, 57, 76, 0.11);
}

.agents-mix-list div:last-child {
  border-bottom: 0;
}

.agents-mix-list span {
  margin: 0;
  color: #52657d;
  font-size: 13px;
  line-height: 1.45;
}

.agents-mix-list strong {
  color: #10233d;
  font-size: 18px;
}

.agents-side-note {
  grid-template-columns: 32px 1fr;
  align-items: start;
  background: #fafbfd;
  border-color: rgba(27, 57, 76, 0.11);
  box-shadow: none;
}

.agents-side-note svg {
  width: 18px;
  height: 18px;
  color: #718198;
}

.agents-side-note p {
  margin: 0;
  color: #5c6d82;
  font-size: 13px;
  line-height: 1.5;
}

.agents-docs-card {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}

.agents-docs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba(27, 57, 76, 0.11);
}

.agents-docs-header > div {
  display: grid;
  gap: 3px;
}

.agents-docs-header small {
  color: #718198;
  font-size: 11.5px;
}

.agents-docs-header > svg {
  width: 17px;
  height: 17px;
  color: #718198;
}

.agents-docs-list {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5, minmax(44px, 1fr));
}

.agents-docs-list a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(27, 57, 76, 0.09);
  color: #203a53;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}

.agents-docs-list a:last-child {
  border-bottom: 0;
}

.agents-docs-list a:hover {
  background: #f7f9fb;
  color: #0f4167;
}

.agents-docs-list a:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(20, 82, 112, 0.38);
  outline-offset: -2px;
}

.agents-docs-list a > span {
  min-width: 0;
}

.agents-docs-list strong {
  font-size: 12.5px;
  font-weight: 700;
}

.agents-docs-list a > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #8493a6;
}

@media (min-width: 1181px) {
  .main:has(.agents-roster-page) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .main:has(.agents-roster-page) .content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .main:has(.agents-roster-page) .workspace {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .agents-roster-page {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .agents-command-grid,
  .agents-roster-panel,
  .agents-roster-page .agent-slot-section,
  .agents-side-panel {
    min-height: 0;
    height: 100%;
  }

  .agents-command-grid {
    align-items: stretch;
  }

  .agents-roster-page .agent-slot-section {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .agents-roster-page .agent-slot-section::-webkit-scrollbar {
    display: none;
  }

  .agents-combined-section {
    align-content: start;
  }

  .agents-side-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .workspace-command-hero {
    grid-template-columns: 1fr;
  }

  .command-status-strip {
    max-width: 100%;
  }

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

  .agents-command-grid {
    grid-template-columns: 1fr;
  }

  .agents-side-panel {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .workspace-command-hero {
    padding: 24px;
  }

  .command-status-strip {
    grid-template-columns: 1fr;
    justify-self: stretch;
    gap: 0;
  }

  .command-status-strip div {
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid #dbe5f0;
  }

  .command-status-strip div:last-child {
    border-bottom: 0;
  }

  .workspace-command-grid {
    grid-template-columns: 1fr;
  }

  .agents-roster-page .agent-slot-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .agents-page-header,
  .agents-page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .agent-add-slot-action-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .agents-roster-page .section-helper {
    white-space: normal;
  }

  .agent-roster-row.agent-slot-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .agent-row-reorder {
    width: 42px;
  }

  .agents-side-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .agents-roster-page {
    padding: 0;
  }

  .workspace-command-hero {
    min-height: 0;
    padding: 20px;
  }

  .command-hero-copy h1 {
    font-size: 34px;
  }

  .command-module-card {
    grid-template-columns: 52px minmax(0, 1fr) 38px;
    min-height: 188px;
    padding: 18px;
  }

  .command-card-icon {
    width: 48px;
    height: 48px;
  }

  .command-card-metric b {
    font-size: 25px;
  }

  .command-card-metric-action b {
    font-size: 13px;
  }

  .agents-roster-page::before {
    inset: -32px -16px auto -16px;
  }

  .agent-roster-row.agent-slot-card {
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 8px 10px;
    align-items: center;
  }

  .agent-row-reorder {
    width: 38px;
    grid-row: 1 / 2;
  }

  .agent-row-main {
    grid-column: 2 / 3;
    padding: 12px 0;
  }

  .agent-row-meta {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    justify-content: flex-start;
    padding: 0;
  }

  .agent-row-actions {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    align-self: center;
    padding: 0 10px 0 0;
  }

  .agent-roster-row.agent-slot-card.agent-add-slot-card .agent-row-main {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding: 12px 0;
  }

  .agent-roster-row.agent-slot-card.agent-add-slot-card .agent-row-meta {
    display: none;
  }

  .agent-roster-row.agent-slot-card.agent-add-slot-card .agent-row-actions {
    display: none;
  }
}

@container agent-roster (max-width: 620px) {
  .agent-roster-row.agent-slot-card {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 0 12px;
  }

  .agent-row-reorder {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .agent-row-main,
  .agent-roster-row.agent-slot-card.agent-add-slot-card .agent-row-main {
    grid-column: 2;
    grid-row: 1;
    padding: 12px 0 6px;
  }

  .agent-row-meta,
  .agent-roster-row.agent-slot-card.agent-add-slot-card .agent-row-meta {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 0 12px;
  }

  .agent-row-actions,
  .agent-roster-row.agent-slot-card.agent-add-slot-card .agent-row-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    align-self: center;
    padding: 0 10px 0 0;
  }
}

@container agent-roster (max-width: 430px) {
  .agent-roster-row.agent-slot-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0 8px;
  }

  .agent-row-reorder {
    width: 38px;
  }

  .agent-row-icon {
    width: 34px;
    height: 34px;
  }

  .agent-row-copy strong {
    font-size: 15px;
  }

  .agent-row-actions {
    padding-right: 8px;
  }
}

body.workspace-selected .app-shell,
body.workspace-selected .main,
body.workspace-selected .content,
.app-shell:has(.agents-roster-page),
.main:has(.agents-roster-page),
.main:has(.agents-roster-page) .content {
  background: var(--app-grid-background);
  background-size: auto;
}

.main:has(.agents-roster-page) .app-header {
  position: sticky;
  height: auto;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  padding: 0 24px;
  pointer-events: auto;
}

.main:has(.agents-roster-page) .app-header-inner {
  min-height: var(--app-header-height);
  justify-content: space-between;
}

.main:has(.agents-roster-page) .header-left,
.main:has(.agents-roster-page) .header-center {
  display: flex;
}

.main:has(.agents-roster-page) .header-actions,
.main:has(.agents-roster-page) .user-menu,
.main:has(.agents-roster-page) .user-name,
.main:has(.agents-roster-page) .user-dropdown {
  pointer-events: auto;
}

.main:has(.agents-roster-page) .user-name {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.agent-selected .content {
  --app-chrome-height: calc(var(--app-header-height) + var(--agent-top-nav-height));
  padding: 24px 32px 42px;
}

body.agent-selected.playground-full .content,
body.agent-selected.activity-full .content,
body.agent-selected.chat-page-full .content,
body.agent-selected.live-channels-full .content,
body.agent-selected.dynamic-sources-full .content,
body.agent-selected.apps-full .content {
  padding: 0;
}

body.agent-selected .workspace {
  width: min(100%, 1480px);
  margin: 0 auto;
}

body.agent-selected.playground-full .workspace,
body.agent-selected.chat-page-full .workspace,
body.agent-selected.live-channels-full .workspace,
body.agent-selected.dynamic-sources-full .workspace,
body.agent-selected.apps-full .workspace {
  width: 100%;
  max-width: none;
}

body.dispatcher-context .agent-top-menu,
body.dispatcher-context .agent-top-link[data-agent-nav-page="crm"] {
  display: none;
}

body.agent-selected .activity-page,
body.agent-selected .web-embed-shell,
body.agent-selected .playground-shell,
body.agent-selected .dynamic-sources-page,
body.agent-selected .dynamic-sources-shell {
  min-height: calc(100vh - var(--app-chrome-height));
  height: calc(100vh - var(--app-chrome-height));
}

body.agent-selected .live-channels-page {
  min-height: calc(100vh - var(--app-chrome-height));
}

body.agent-selected .lc-layout {
  min-height: calc(100vh - var(--app-chrome-height) - 48px);
}

body.agent-selected .dispatcher-summary-panel {
  top: calc(var(--app-chrome-height) + 18px);
}

.content:has(.agents-roster-page) {
  padding: 28px 32px 28px;
}

.agents-roster-page {
  --dashboard-ink: #081834;
  --dashboard-muted: #42526e;
  --dashboard-border: rgba(111, 151, 204, 0.24);
  --dashboard-shadow: 0 24px 60px rgba(31, 41, 55, 0.14), 0 3px 8px rgba(31, 41, 55, 0.06);
  --dashboard-shadow-tight: 0 22px 54px rgba(31, 41, 55, 0.15), 0 2px 7px rgba(31, 41, 55, 0.06);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-height: calc(100vh - 56px);
  gap: 12px;
}

.agents-roster-page .agents-command-grid {
  width: 100%;
}

.workspace-command-hero {
  grid-template-columns: minmax(280px, 0.74fr) minmax(440px, 0.66fr);
  min-height: 98px;
  padding: 4px 18px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-title-row {
  gap: 9px;
}

.command-hero-copy {
  gap: 7px;
}

.command-hero-copy h1 {
  font-size: clamp(34px, 3.2vw, 43px);
  font-weight: 800;
  line-height: 1;
}

.command-hero-copy p {
  max-width: none;
  color: #3f5170;
  font-size: 15px;
  font-weight: 600;
}

.workspace-switch-button {
  width: 34px;
  height: 34px;
  border-color: rgba(94, 133, 192, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.command-status-strip {
  width: min(100%, 690px);
  min-height: 68px;
  align-self: end;
  padding: 13px 18px;
  border: 1px solid rgba(192, 202, 216, 0.86);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(31, 41, 55, 0.1), 0 1px 3px rgba(31, 41, 55, 0.06);
  overflow: hidden;
}

.command-status-strip div {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 46px;
  padding: 0 22px;
  border-left-color: rgba(169, 188, 218, 0.5);
  gap: 0 12px;
}

.command-status-strip div:first-child {
  padding-left: 0;
}

.command-status-strip svg {
  width: 20px;
  height: 20px;
}

.command-status-strip div > svg {
  box-sizing: content-box;
  width: 21px;
  height: 21px;
  padding: 13px;
  border-radius: 16px;
  background: #edf4ff;
  color: #1f63df;
}

.command-status-strip .is-ai > svg {
  background: #f0efff;
  color: #1f36df;
}

.command-status-strip .is-dispatch > svg {
  background: #eaf9fb;
  color: #0d7f9b;
}

.command-status-strip span:not(.status-dot) {
  color: #263a56;
  font-size: 13px;
  font-weight: 700;
}

.command-status-strip strong {
  color: #071832;
  font-size: 21px;
  line-height: 1;
}

.command-module-card {
  border-radius: 14px;
  box-shadow: var(--dashboard-shadow-tight);
  border-color: rgba(190, 200, 214, 0.88);
  grid-template-columns: 52px minmax(0, 1fr) 40px;
  min-height: 178px;
  padding: 22px;
  background: #ffffff;
}

.command-module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(31, 41, 55, 0.13), 0 4px 12px rgba(31, 41, 55, 0.06);
}

.command-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border-color: #dde6ea;
  background: #eef3f6;
  color: #145270;
}

.command-card-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.command-card-arrow {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
  border-color: #e2e8ec;
  box-shadow: 0 6px 16px rgba(44, 70, 116, 0.06);
}

.command-module-card strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.command-module-card > span:not(.command-card-icon):not(.command-card-arrow):not(.command-card-metric):not(.command-card-channels) {
  max-width: 320px;
  color: #344968;
  font-size: 14px;
  font-weight: 600;
}

.command-card-metric {
  grid-column: 2 / 4;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
}

.command-card-metric b {
  font-size: 24px;
}

.command-card-metric em {
  color: #4a5b76;
  font-style: normal;
}

.command-card-metric-action b {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--command-accent, #67599f) 28%, #d9e1e3);
  border-radius: 8px;
  background: color-mix(in srgb, var(--command-accent, #67599f) 9%, #ffffff);
  color: #332a5e;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .main:has(.agents-roster-page) .app-header,
  .main:has(.workspace-overview-page) .app-header {
    position: sticky;
    height: auto;
    padding: 0 24px;
    background: rgba(255, 255, 255, 0.78);
    pointer-events: auto;
  }

  .main:has(.agents-roster-page) .header-left,
  .main:has(.agents-roster-page) .header-center,
  .main:has(.workspace-overview-page) .header-left,
  .main:has(.workspace-overview-page) .header-center {
    display: flex;
  }

  .workspace-command-hero {
    grid-template-columns: 1fr;
    padding: 4px 0 0;
  }

  .command-status-strip {
    justify-self: stretch;
  }

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

@media (max-width: 860px) {
  .content:has(.agents-roster-page),
  .content:has(.workspace-overview-page) {
    padding: 18px 16px 28px;
  }

  .command-status-strip {
    grid-template-columns: 1fr;
  }

  .command-status-strip div {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 12px 0;
  }

}

@media (max-width: 620px) {
  .workspace-command-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .command-hero-copy h1 {
    font-size: 34px;
  }

  .command-module-card {
    grid-template-columns: 48px minmax(0, 1fr) 36px;
    padding: 18px;
  }

  .command-card-icon {
    width: 46px;
    height: 46px;
  }

  .command-card-arrow {
    width: 36px;
    height: 36px;
  }
}

.create-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.create-form label {
  font-size: 13px;
  color: var(--color-muted);
}

.create-form input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
}

.create-form button {
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  background: var(--color-navy);
  color: #fff;
  cursor: pointer;
}

.form-helper {
  font-size: 12px;
  color: var(--color-muted);
}

.form-helper.error,
.form-helper.is-error {
  color: #b91c1c;
  font-weight: 600;
}

.empty-note {
  margin: 0;
  color: var(--color-muted);
}

.apps-preview-stage {
  position: relative;
  display: grid;
  gap: 0;
  min-height: calc(100vh - 80px);
  height: calc(100vh - 80px);
}

.apps-preview-page {
  position: relative;
  gap: 0;
  min-height: 100%;
}

.apps-preview-page.is-busy .apps-preview-stage {
  pointer-events: none;
  user-select: none;
}

.apps-preview-page.is-locked .apps-preview-stage {
  filter: none;
  pointer-events: none;
  user-select: none;
}

.apps-preview-page-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 17, 31, 0.46);
  z-index: 3;
}

.apps-preview-page-overlay-card {
  min-width: min(100%, 360px);
  max-width: 420px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(4, 56, 115, 0.14);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.apps-preview-page-overlay-card .spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.apps-preview-page-overlay-copy {
  display: grid;
  gap: 4px;
}

.apps-preview-page-overlay-copy h3 {
  margin: 0;
  font-size: 18px;
  color: var(--color-ink-soft);
}

.apps-preview-page-overlay-copy p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.apps-preview-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 17, 31, 0.62);
  z-index: 2;
}

.apps-preview-overlay-card {
  width: min(100%, 640px);
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(4, 56, 115, 0.14);
  padding: 28px;
  display: grid;
  gap: 20px;
  justify-items: start;
}

.apps-preview-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 100%;
  height: 100%;
}

.apps-preview-column {
  display: grid;
  gap: 0;
  align-content: start;
  min-height: 100%;
  min-width: 0;
}

.apps-preview-column-apps {
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
}

.apps-preview-section-header h2 {
  margin: 0;
  font-size: 22px;
  color: var(--color-ink-soft);
}

.apps-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.apps-preview-card {
  background: #fff;
  border-top: 1px solid rgba(4, 56, 115, 0.12);
  border-right: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
  display: grid;
  gap: 22px;
  min-height: 220px;
}

.apps-preview-card-top,
.apps-preview-card-bottom,
.apps-preview-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.apps-preview-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
}

.apps-preview-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(31, 36, 40, 0.08);
  color: #4b5563;
}

.apps-preview-copy h3 {
  margin: 0 0 8px;
}

.apps-preview-copy p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.apps-preview-docs {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--color-navy);
  font-weight: 700;
  justify-self: end;
  text-decoration: none;
}

.apps-preview-manage-group {
  margin-left: auto;
  display: inline-flex;
  align-items: stretch;
  height: 38px;
  border: 1px solid #cfd8e3;
  border-radius: 999px;
  overflow: hidden;
  background: #eef2f7;
}

.apps-preview-manage-group.is-enabled {
  background: rgba(22, 163, 74, 0.14);
}

.apps-preview-manage-group.is-disabled {
  background: rgba(107, 114, 128, 0.12);
}

.apps-preview-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  height: 100%;
  background: transparent;
}

.apps-preview-manage-group.is-enabled .apps-preview-status {
  color: #15803d;
}

.apps-preview-manage-group.is-disabled .apps-preview-status {
  color: #556376;
}

.apps-preview-manage {
  min-width: 102px;
  height: calc(100% + 2px);
  min-height: calc(100% + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfd8e3 !important;
  border-radius: 999px !important;
  padding: 0 !important;
  font-weight: 700;
  background: #fff !important;
  margin: -1px -1px -1px -8px !important;
  box-shadow: none;
  color: #0f172a;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.apps-preview-manage:hover {
  background: #f8fafc !important;
  box-shadow: 0 0 0 1px rgba(4, 56, 115, 0.1);
}

.apps-preview-manage:active {
  transform: translateY(1px);
}

.apps-preview-switch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.apps-preview-switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.apps-preview-switch-track {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #d8dee8;
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  box-sizing: border-box;
}

.apps-preview-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.1);
  transition: transform 0.18s ease;
  box-sizing: border-box;
}

.apps-preview-switch input:checked + .apps-preview-switch-track {
  background: rgba(39, 169, 111, 0.78);
}

.apps-preview-switch input:checked + .apps-preview-switch-track::after {
  transform: translateX(22px);
}

.apps-preview-panel {
  width: 100%;
  max-width: none;
}

.apps-preview-gate {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.apps-preview-gate-copy {
  display: grid;
  gap: 8px;
}

.apps-preview-gate-copy h2 {
  margin: 0;
  font-size: 22px;
}

.apps-preview-gate-copy p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

.apps-users-table {
  background: #fff;
  min-height: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.apps-users-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
}

.apps-users-table-head h2 {
  margin: 0;
  font-size: 22px;
}

.human-agents-users-table .apps-users-table-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.human-agents-users-table .apps-users-toolbar {
  justify-self: end;
}

.human-agents-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.human-agents-back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 50px;
  padding: 0 13px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: #17324d;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}

.human-agents-back-button:hover {
  border-color: rgba(4, 56, 115, 0.28);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.06);
}

.human-agents-back-button svg {
  width: 16px;
  height: 16px;
}

.human-filter-search {
  width: 260px;
  flex: 0 0 260px;
  height: 50px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  background: #fff;
  border-radius: 8px;
  color: var(--color-ink);
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.human-filter-search:focus-within {
  border-color: rgba(4, 56, 115, 0.28);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.06);
}

.human-filter-search svg {
  width: 16px;
  height: 16px;
  color: var(--color-navy);
  flex: 0 0 auto;
}

.human-filter-search span {
  display: grid;
  gap: 1px;
  min-width: 0;
  width: 100%;
}

.human-filter-search small {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.human-filter-search input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.human-filter-search input::placeholder {
  color: var(--color-muted);
  font-weight: 600;
}

.human-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
}

.human-filter-dropdown {
  position: relative;
  min-width: 178px;
}

.human-filter-trigger {
  width: 100%;
  height: 50px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  background: #fff;
  border-radius: 8px;
  color: var(--color-ink);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.human-filter-trigger:hover,
.human-filter-trigger[aria-expanded="true"] {
  border-color: rgba(4, 56, 115, 0.28);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.06);
}

.human-filter-trigger small,
.human-filter-trigger strong {
  display: block;
}

.human-filter-trigger small {
  margin-bottom: 1px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.human-filter-trigger strong {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.human-filter-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--color-navy);
  flex: 0 0 auto;
}

.human-filter-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 25;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-tight);
  padding: 6px;
}

.human-filter-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  border-radius: 6px;
  padding: 8px 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.human-filter-option-check {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex: 0 0 auto;
}

.human-filter-option-check svg {
  width: 12px;
  height: 12px;
}

.human-filter-option.is-active .human-filter-option-check {
  border-color: rgba(39, 169, 111, 0.78);
  background: rgba(39, 169, 111, 0.14);
  color: #087443;
}

.human-filter-option:hover,
.human-filter-option.is-active {
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
}

.human-agent-categories-strip {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  border-radius: 10px;
  background: #fff;
  padding: 0 10px 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #1b3048;
  font: 700 13px var(--font-body, sans-serif);
  cursor: pointer;
  justify-self: center;
  white-space: nowrap;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.human-agent-categories-strip:hover {
  border-color: rgba(4, 56, 115, 0.3);
  background: #f6f8fa;
}

.human-agent-categories-strip > svg {
  width: 16px;
  height: 16px;
}

.human-agent-categories-strip > strong {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #e8edf2;
  color: #142a42;
  font-size: 11px;
  font-weight: 800;
}

.human-agent-categories-manage {
  margin-left: 3px;
  padding-left: 11px;
  border-left: 1px solid #dce3e9;
  color: #4c6177;
  font-size: 12px;
}

.human-agent-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  background: #f8fafc;
  color: #1f2937;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.human-agent-category-chip small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.09);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 800;
}

.human-agent-category-chip.is-create {
  background: #fff;
  color: var(--color-navy);
  border-style: dashed;
}

.apps-users-toolbar,
.apps-users-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.apps-users-icon-button,
.apps-users-row-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 10px;
  background: #fff;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.apps-preview-apps-head {
  position: relative;
  background: #fff;
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.apps-preview-open-portal {
  border: none;
  background: transparent;
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  justify-self: center;
  padding: 0;
}

.apps-preview-open-portal:hover {
  opacity: 0.78;
}

.apps-preview-open-portal i,
.apps-preview-open-portal svg {
  width: 15px;
  height: 15px;
}

.apps-preview-apps-head > h2 {
  justify-self: start;
}

.apps-preview-apps-head .apps-preview-menu-shell {
  justify-self: end;
}

.apps-preview-menu-shell {
  position: relative;
}

.apps-preview-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(4, 56, 115, 0.14);
  padding: 8px;
  z-index: 5;
}

.apps-preview-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-navy);
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.apps-preview-menu-item:hover {
  background: rgba(4, 56, 115, 0.08);
}

.apps-preview-menu-item-danger {
  color: #b42318;
}

.apps-preview-menu-item-danger:hover {
  background: rgba(180, 35, 24, 0.08);
}

.apps-users-icon-button:hover,
.apps-users-row-button:hover {
  background: rgba(4, 56, 115, 0.05);
}

.apps-users-table-grid {
  display: grid;
  align-content: start;
  background: #fff;
}

.apps-users-table-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 420px) minmax(160px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #edf1f6;
  background: #fff;
}

.human-agents-users-table .apps-users-table-row {
  grid-template-columns: minmax(240px, 1.6fr) minmax(86px, 0.55fr) minmax(132px, 0.8fr) minmax(104px, auto);
}

.apps-users-table-row > :nth-child(2) {
  justify-self: center;
}

.apps-users-table-row > :nth-child(3) {
  justify-self: end;
}

.human-agents-users-table .apps-users-table-row > :nth-child(2),
.human-agents-users-table .apps-users-table-row > :nth-child(3) {
  justify-self: center;
}

.human-agents-users-table .apps-users-table-row > :nth-child(4) {
  justify-self: end;
}

.apps-users-table-row-header {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: rgba(4, 56, 115, 0.03);
}

.apps-preview-column-users {
  background: #fff;
}

.apps-users-table-user {
  display: grid;
  gap: 4px;
}

.apps-users-table-user strong,
.apps-users-table-user span {
  display: block;
}

.apps-users-table-user span {
  color: var(--color-muted);
}

.apps-users-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 24px 32px;
  color: var(--color-muted);
  background: #fff;
}

.apps-users-empty-loading {
  align-items: center;
}

.apps-user-modal-card {
  width: min(560px, 100%);
  position: relative;
  max-height: min(760px, calc(100vh - 48px));
  overflow-y: auto;
}

.apps-config-modal-card {
  width: min(520px, calc(100vw - 32px));
}

.apps-config-modal-header {
  align-items: flex-start;
}

.apps-config-close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(4, 56, 115, 0.18);
  background: #fff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.apps-config-close:hover {
  border-color: rgba(4, 56, 115, 0.35);
}

.apps-config-modal-body {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.apps-config-note {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

.apps-user-form {
  display: grid;
  gap: 16px;
}

.apps-user-form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 16px;
}

.apps-user-form-fieldset[disabled] {
  pointer-events: none;
}

.apps-user-field,
.apps-user-access-group,
.apps-user-access-fields {
  display: grid;
  gap: 8px;
}

.apps-user-field span,
.apps-user-access-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.apps-user-access-group {
  gap: 10px;
}

.apps-user-access-group.is-empty .apps-user-access-fields {
  padding: 14px 16px;
}

.apps-user-field input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  font-size: 14px;
  background: #fff;
}

.human-category-picker {
  position: relative;
}

.human-category-picker-trigger {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  background: #fff;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.human-category-picker-trigger:hover,
.human-category-picker-trigger[aria-expanded="true"] {
  border-color: rgba(4, 56, 115, 0.32);
}

.human-category-picker-trigger i,
.human-category-picker-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  flex: 0 0 auto;
}

.human-category-picker-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 190px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(4, 56, 115, 0.16);
}

.human-category-picker-option {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #111827;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
}

.human-category-picker-option:hover {
  background: rgba(4, 56, 115, 0.06);
}

.human-category-picker-option.is-active {
  background: rgba(4, 56, 115, 0.1);
  color: var(--color-navy);
  font-weight: 700;
}

.human-agent-user-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.human-agent-access-cell,
.human-agent-category-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.human-agent-access-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 62px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.human-agent-access-status svg {
  width: 14px;
  height: 14px;
}

.human-agent-access-status.is-enabled {
  background: rgba(39, 169, 111, 0.12);
  color: #087443;
}

.human-agent-access-status.is-disabled {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.human-agent-category-badge {
  background: rgba(4, 56, 115, 0.07);
  color: var(--color-navy);
}

.human-agent-category-badge.is-empty {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.human-category-form {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.human-category-list {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.human-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 12px;
  background: #fff;
}

.human-category-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.human-category-row strong {
  color: var(--color-ink-soft);
}

.human-category-row span {
  color: var(--color-muted);
  font-size: 12px;
}

.apps-user-password-wrap {
  position: relative;
}

.apps-user-password-wrap input {
  padding-right: 46px;
}

.apps-user-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}

.apps-user-password-toggle:hover {
  background: rgba(4, 56, 115, 0.06);
  color: var(--color-navy);
}

.apps-user-access-fields {
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  grid-template-columns: 1fr;
}

.apps-user-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid rgba(4, 56, 115, 0.08);
  cursor: pointer;
}

.apps-user-access-row:first-of-type {
  border-top: none;
}

.apps-user-access-empty {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
}

.apps-user-access-copy {
  display: grid;
  gap: 3px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.apps-user-access-copy strong {
  font: inherit;
  color: inherit;
}

.apps-user-access-copy small {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.apps-user-toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.apps-user-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.apps-user-toggle-track {
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #d8dee8;
  border: none;
  position: relative;
  transition: background 0.18s ease;
  box-sizing: border-box;
}

.apps-user-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.1);
  transition: transform 0.18s ease;
  box-sizing: border-box;
}

.apps-user-toggle input:checked + .apps-user-toggle-track {
  background: rgba(39, 169, 111, 0.78);
}

.apps-user-toggle input:checked + .apps-user-toggle-track::after {
  transform: translateX(22px);
}

.apps-user-form-helper {
  min-height: 18px;
  margin: 0;
  color: #b42318;
  font-size: 13px;
}

.apps-user-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.apps-user-modal-card.is-busy .apps-user-form {
  opacity: 0.62;
}

.apps-user-modal-lock {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  z-index: 2;
}

.apps-user-modal-lock p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.apps-disable-modal-body {
  display: grid;
  gap: 10px;
}

.apps-disable-modal-body p {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: 1.6;
}

.apps-disable-modal-warning {
  color: #b42318;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .apps-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apps-preview-card {
    min-height: 208px;
    padding: 22px;
  }

  .apps-users-table-row {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 300px) auto;
  }
}

@media (max-width: 860px) {
  .apps-preview-page,
  .apps-preview-stage {
    min-height: auto;
    height: auto;
  }

  .apps-preview-layout {
    min-height: auto;
    height: auto;
  }

  .apps-preview-column,
  .apps-users-table {
    min-height: auto;
    height: auto;
  }

  .apps-preview-grid {
    grid-template-columns: 1fr;
  }

  .apps-preview-card {
    min-height: 0;
    padding: 20px;
    border-right: none;
    border-bottom: 1px solid rgba(4, 56, 115, 0.12);
  }

  .apps-users-table-head,
  .apps-preview-apps-head {
    padding: 20px;
  }

  .human-agents-users-table .apps-users-table-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "filters toolbar"
      "categories categories";
  }

  .human-agents-filter-row {
    grid-area: filters;
    align-items: stretch;
    flex-direction: column;
    padding: 0;
  }

  .human-agents-users-table .apps-users-toolbar {
    grid-area: toolbar;
  }

  .human-agent-categories-strip {
    grid-area: categories;
    justify-self: stretch;
    justify-content: flex-start;
    max-width: 100%;
  }

  .human-filter-search {
    width: 100%;
    flex-basis: auto;
  }

  .human-filter-group {
    flex-direction: column;
    align-items: stretch;
  }

  .human-filter-dropdown {
    min-width: 0;
    width: 100%;
  }

  .human-filter-trigger strong {
    max-width: none;
  }

  .apps-users-table-row,
  .human-agents-users-table .apps-users-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "user actions"
      "admin admin"
      "category category";
    padding: 16px 20px;
    gap: 12px;
  }

  .apps-users-table-row > :nth-child(1) {
    grid-area: user;
  }

  .human-agents-users-table .apps-users-table-row > :nth-child(2) {
    grid-area: admin;
    justify-self: start;
  }

  .human-agents-users-table .apps-users-table-row > :nth-child(3) {
    grid-area: category;
    justify-self: start;
  }

  .apps-users-table-row > :nth-child(3),
  .human-agents-users-table .apps-users-table-row > :nth-child(4) {
    grid-area: actions;
    justify-self: end;
  }

  .human-agent-access-cell::before,
  .human-agent-category-cell::before {
    width: 104px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
  }

  .human-agent-access-cell:nth-child(2)::before {
    content: "Admin";
  }

  .human-agent-access-cell:nth-child(3)::before {
    content: "Human Agents";
  }

  .human-agent-category-cell::before {
    content: "Category";
  }

  .apps-users-table-row-header {
    display: none;
  }
}

@media (max-width: 560px) {
  .apps-preview-overlay {
    padding: 16px;
  }

  .apps-preview-overlay-card {
    width: 100%;
    padding: 22px 20px;
    border-radius: 18px;
  }

  .apps-users-table-head,
  .apps-preview-apps-head {
    padding: 18px 16px;
  }

  .apps-preview-card {
    padding: 18px 16px;
  }

  .apps-preview-copy p {
    line-height: 1.5;
  }

  .apps-users-table-row {
    padding: 16px;
  }

  .apps-user-form-actions {
    flex-direction: column-reverse;
  }

  .apps-user-form-actions .button {
    width: 100%;
  }

  .apps-preview-switch-track {
    width: 48px;
    height: 28px;
  }

  .apps-preview-switch-track::after {
    width: 22px;
    height: 22px;
  }

  .apps-preview-switch input:checked + .apps-preview-switch-track::after {
    transform: translateX(20px);
  }
}

.team-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 4px 2px 0;
}

.team-page-header h1 {
  margin: 0;
  color: #0f1c2e;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.team-page-header p {
  max-width: 620px;
  margin: 10px 0 0;
  color: #607087;
  font-size: 16px;
  line-height: 1.55;
}

.team-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  min-width: min(100%, 440px);
  overflow: hidden;
  border: 1px solid rgba(4, 56, 115, 0.13);
  border-radius: 12px;
  background: #ffffff;
}

.team-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px 15px;
}

.team-summary > div + div {
  border-left: 1px solid rgba(4, 56, 115, 0.11);
}

.team-summary span {
  color: #708096;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.065em;
  line-height: 1.25;
  text-transform: uppercase;
}

.team-summary strong {
  overflow: hidden;
  color: #122238;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-invite-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(420px, 1.25fr);
  align-items: center;
  gap: 40px;
  padding: 26px 28px;
  border: 1px solid rgba(4, 56, 115, 0.13);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(25, 50, 82, 0.06);
}

.team-invite-copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.team-invite-icon,
.team-member-avatar,
.team-empty-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #edf5ff;
  color: #0f5ca8;
}

.team-invite-icon svg {
  width: 20px;
  height: 20px;
}

.team-invite-copy h2,
.team-list-header h2 {
  margin: 0;
  color: #112035;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.team-invite-copy p,
.team-list-header p {
  margin: 6px 0 0;
  color: #6a7a90;
  font-size: 14px;
  line-height: 1.5;
}

.team-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.team-form > label {
  color: #26384e;
  font-size: 13px;
  font-weight: 700;
}

.team-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.team-input-row input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  outline: none;
  background: #fbfcfe;
  color: #112035;
  font: inherit;
  font-size: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.team-input-row input::placeholder {
  color: #8a98aa;
}

.team-input-row input:focus {
  border-color: #2a6fb7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(42, 111, 183, 0.12);
}

.team-input-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  padding: 0 17px;
  border: 1px solid #043873;
  border-radius: 8px;
  background: var(--color-navy);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.team-input-row button svg {
  width: 16px;
  height: 16px;
}

.team-input-row button:hover:not(:disabled) {
  background: #092e5b;
  box-shadow: 0 7px 18px rgba(4, 56, 115, 0.18);
}

.team-input-row button:active:not(:disabled) {
  transform: translateY(1px);
}

.team-input-row button:focus-visible,
.team-action:focus-visible {
  outline: 3px solid rgba(42, 111, 183, 0.2);
  outline-offset: 2px;
}

.team-input-row button:disabled {
  border-color: #a8b7ca;
  background: #a8b7ca;
  color: #f8fafc;
  cursor: not-allowed;
}

.team-form .form-helper {
  min-height: 18px;
  color: #718097;
  font-size: 12px;
  line-height: 1.5;
}

.team-list {
  overflow: hidden;
  border: 1px solid rgba(4, 56, 115, 0.13);
  border-radius: 14px;
  background: #ffffff;
}

.team-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}

.team-member-count {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: #eef3f8;
  color: #17324f;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.team-list-columns,
.team-item {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(90px, 120px);
  align-items: center;
  gap: 20px;
}

.team-list-columns {
  padding: 11px 24px;
  border-top: 1px solid #e8edf3;
  border-bottom: 1px solid #e8edf3;
  background: #f7f9fc;
  color: #748399;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.team-list-columns > :nth-child(2) {
  justify-self: start;
}

.team-list-columns > :last-child {
  justify-self: end;
}

.team-list-body ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-item {
  min-width: 0;
  padding: 16px 24px;
  border-bottom: 1px solid #edf1f5;
  color: #112035;
  font-size: 14px;
}

.team-item:last-child {
  border-bottom: 0;
}

.team-member-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.team-member-avatar {
  width: 38px;
  height: 38px;
  background: #f0f4f8;
  color: #47627f;
}

.team-member-avatar svg,
.team-empty-icon svg {
  width: 17px;
  height: 17px;
}

.team-member-identity > div {
  min-width: 0;
}

.team-member-identity > div strong,
.team-member-identity > div span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-identity > div strong {
  color: #132238;
  font-weight: 700;
}

.team-member-identity > div span {
  margin-top: 3px;
  color: #748399;
  font-size: 12px;
}

.team-member-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  color: #285f48;
  font-size: 13px;
  font-weight: 650;
}

.team-member-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ca36c;
  box-shadow: 0 0 0 3px rgba(44, 163, 108, 0.11);
}

.team-item.empty {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 112px;
  color: #718097;
}

.team-item.empty > div > strong,
.team-item.empty > div > span {
  display: block;
}

.team-item.empty strong {
  margin-bottom: 4px;
  color: #26384e;
}

.team-empty-icon {
  background: #f2f5f8;
  color: #6b7f95;
}

.team-actions {
  display: inline-flex;
  justify-self: end;
  gap: 8px;
}

.team-action {
  min-width: 72px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #cad5e2;
  border-radius: 8px;
  background: #ffffff;
  color: #26384e;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.team-action:hover {
  border-color: #9caec2;
  background: #f7f9fc;
}

.team-action.danger {
  border-color: #efb8b3;
  background: #fff8f7;
  color: #b42318;
}

.team-action.danger:hover {
  border-color: #dd8f87;
  background: #fff1ef;
}

.team-action[hidden] {
  display: none;
}

.team-pending-list .team-list-header {
  border-bottom: 1px solid #e8edf3;
}

.team-pending-item {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 15px 24px;
  border-bottom: 1px solid #edf1f5;
}

.team-pending-item:last-child {
  border-bottom: 0;
}

.team-member-avatar.is-pending {
  background: #f2f5f8;
  color: #62768d;
}

.team-pending-status {
  color: #7b5a16;
  font-size: 12px;
  font-weight: 700;
}

.team-pending-empty,
.team-pending-error {
  margin: 0;
  padding: 20px 24px;
  color: #718097;
  font-size: 13px;
  list-style: none;
}

.team-pending-error {
  color: #b42318;
}

@media (max-width: 980px) {
  .team-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }

  .team-summary {
    width: 100%;
    min-width: 0;
  }

  .team-invite-panel {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .team-page {
    gap: 14px;
  }

  .team-page-header h1 {
    font-size: 30px;
  }

  .team-summary > div {
    padding: 12px;
  }

  .team-summary span {
    font-size: 9px;
  }

  .team-summary strong {
    font-size: 14px;
  }

  .team-invite-panel {
    padding: 20px;
  }

  .team-input-row {
    grid-template-columns: 1fr;
  }

  .team-input-row button {
    width: 100%;
  }

  .team-list-header {
    padding: 20px;
  }

  .team-list-columns {
    display: none;
  }

  .team-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 16px 20px;
  }

  .team-member-status {
    grid-column: 1;
    margin-left: 50px;
  }

  .team-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .team-item.empty {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .team-pending-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 16px 20px;
  }

  .team-pending-status {
    grid-column: 1;
    margin-left: 50px;
  }

  .team-pending-item > .team-action {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.identity-page {
  gap: 24px;
  justify-items: center;
}

.identity-page .page-header {
  text-align: center;
}

.identity-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 24px;
  width: min(720px, 100%);
}

.identity-form {
  display: grid;
  gap: 12px;
}

.identity-form label {
  font-size: 13px;
  color: var(--color-muted);
}

.identity-form input,
.identity-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
  resize: vertical;
}

.identity-form input::placeholder,
.identity-form textarea::placeholder {
  color: #9aa3af;
}

.role-field {
  position: relative;
  display: grid;
}

.role-field textarea {
  padding-right: 52px;
  min-height: 120px;
}

.info-chip {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(4, 56, 115, 0.2);
  background: rgba(4, 56, 115, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  cursor: help;
}

.info-tooltip {
  position: absolute;
  right: 0;
  top: 38px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-ink);
  width: 220px;
  box-shadow: var(--shadow-tight);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.info-chip:hover .info-tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.field-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-muted);
}

.field-count {
  font-weight: 600;
  color: #111827;
}

.identity-policies-list {
  display: grid;
  gap: 8px;
}

.identity-policy-trigger {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  border: 1px dashed rgba(4, 56, 115, 0.5);
  background: transparent;
  color: var(--color-navy);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.identity-policy-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.identity-policy-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.identity-policy-entry[hidden] {
  display: none;
}

.identity-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-helper.is-success {
  color: #0f766e;
  font-weight: 600;
}

.faqs-page {
  gap: 24px;
}

.faqs-shell {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 8px;
  box-shadow: none;
  max-width: 1200px;
  margin: 0;
}

.faqs-list {
  display: grid;
  gap: 16px;
}

.faqs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.faqs-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.faq-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 20px;
  display: grid;
  gap: 12px;
}

.faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq-header h3 {
  margin: 0;
  font-size: 16px;
}

.faq-card-menu {
  position: relative;
}

.faq-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.faq-card-menu .menu-dropdown {
  top: 36px;
}

.faq-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.faq-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.faq-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}

.notes-page {
  gap: 24px;
}

.notes-shell {
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.notes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.notes-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.notes-list {
  display: grid;
  gap: 16px;
}

.note-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.note-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.note-title {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

.note-content {
  margin: 0;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
}

.note-card-menu {
  position: relative;
}

.note-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.note-card-menu .menu-dropdown {
  top: 36px;
}

.note-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.note-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}

.note-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
}

.note-form-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.note-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.note-form-header p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.note-storage {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 8px;
}

.note-storage strong {
  color: #111827;
}

.note-form {
  display: grid;
  gap: 10px;
}

.note-form input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.note-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
  resize: vertical;
}

.note-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.products-page {
  gap: 24px;
}

.products-shell {
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.products-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.products-list {
  display: grid;
  gap: 16px;
}

.product-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.product-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.product-header h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.product-description {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.product-card-menu {
  position: relative;
}

.product-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.product-card-menu .menu-dropdown {
  top: 36px;
}

.product-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.product-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}

.product-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
}

.product-form-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.product-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.product-form-header p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.product-storage {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 8px;
}

.product-storage strong {
  color: #111827;
}

.product-form {
  display: grid;
  gap: 10px;
}

.product-form input,
.product-form textarea,
.product-form select {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.product-form textarea {
  resize: vertical;
}

.product-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.product-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-api-page {
  gap: 24px;
}

.custom-api-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.custom-api-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.custom-api-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.custom-api-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.custom-api-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.custom-api-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.custom-api-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.custom-api-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.custom-api-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.custom-api-list {
  display: grid;
  gap: 16px;
}

.custom-api-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.custom-api-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.custom-api-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-api-card-menu {
  position: relative;
}

.custom-api-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.custom-api-card-menu .menu-dropdown {
  top: 36px;
}

.custom-api-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.custom-api-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-api-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}

.custom-api-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.custom-api-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.custom-api-method {
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.custom-api-url {
  font-size: 12px;
  color: var(--color-muted);
  word-break: break-all;
}

.custom-api-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
  width: 100%;
}

.custom-api-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.custom-api-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.custom-api-form-header p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.custom-api-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.custom-api-form input,
.custom-api-form textarea,
.custom-api-form select {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.custom-api-form textarea {
  resize: vertical;
}

.custom-api-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
}

.custom-api-row > div {
  min-width: 0;
}

.custom-api-row input,
.custom-api-row select {
  width: 100%;
}

.custom-api-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-api-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.02);
}

.custom-api-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.custom-api-group-header h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.custom-api-group-header p {
  margin: 0;
  font-size: 12px;
  color: var(--color-ink-soft);
}

.custom-api-items {
  display: grid;
  gap: 10px;
}

.custom-api-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.custom-api-item[data-body-item] {
  grid-template-columns: minmax(0, 1fr) 140px auto auto auto auto auto;
}

.custom-api-item input,
.custom-api-item select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-family: var(--font-body);
}

.custom-api-type-locked {
  display: none;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: rgba(17, 24, 39, 0.04);
}

.custom-api-type-locked.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-api-item.is-object-locked select {
  display: none;
}

.custom-api-array,
.custom-api-required {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

.custom-api-array input,
.custom-api-required input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.custom-api-shell.is-creating {
  grid-template-columns: 1fr;
}

@media (max-width: 960px) {
  .custom-api-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .custom-api-shell {
    grid-template-columns: 1fr;
  }
}

.custom-button-page {
  gap: 24px;
}

.custom-button-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.custom-button-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.custom-button-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.custom-button-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.custom-button-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.custom-button-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.custom-button-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.custom-button-shell.is-creating {
  grid-template-columns: minmax(0, 1fr);
}

.custom-button-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.custom-button-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.custom-button-list {
  display: grid;
  gap: 16px;
}

.custom-button-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.custom-button-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.custom-button-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-button-card-menu {
  position: relative;
}

.custom-button-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.custom-button-card-menu .menu-dropdown {
  top: 36px;
}

.custom-button-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.custom-button-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-button-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}
.zapier-card-menu {
  position: relative;
}

.zapier-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.zapier-card-menu .menu-dropdown {
  top: 36px;
}

.zapier-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.zapier-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zapier-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}
.make-card-menu {
  position: relative;
}

.make-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.make-card-menu .menu-dropdown {
  top: 36px;
}

.make-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.make-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.make-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}
.slack-card-menu {
  position: relative;
}

.slack-card-menu .menu-button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.slack-card-menu .menu-dropdown {
  top: 36px;
}

.slack-card-menu.is-open .menu-dropdown {
  display: grid;
  gap: 6px;
}

.slack-card-menu .menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slack-card-menu .menu-dropdown svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}
.gmail-page {
  gap: 24px;
}

.gmail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.gmail-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.gmail-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.gmail-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.gmail-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.gmail-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.gmail-shell {
  display: grid;
  gap: 18px;
  max-width: 960px;
}

.gmail-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 20px;
  display: grid;
  gap: 12px;
}

.gmail-section {
  display: grid;
  gap: 12px;
}

.gmail-section-divider {
  border-top: 1px solid rgba(4, 56, 115, 0.12);
  padding-top: 16px;
}

.gmail-card h2 {
  margin: 0;
  font-size: 18px;
}

.gmail-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.gmail-card label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.gmail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.gmail-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.gmail-status-pill {
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.gmail-status-pill.is-connected {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.gmail-status-meta {
  font-size: 12px;
  color: var(--color-muted);
}

.gmail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gmail-action-item {
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.gmail-action-item p {
  margin-top: 4px;
}

.gmail-action-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.gmail-action-item .button.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.calendar-page {
  gap: 24px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.calendar-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.calendar-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.calendar-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.calendar-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.calendar-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.calendar-shell {
  display: grid;
  gap: 18px;
  max-width: 960px;
}

.calendar-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 20px;
  display: grid;
  gap: 12px;
}

.calendar-card h2 {
  margin: 0;
  font-size: 18px;
}

.calendar-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.calendar-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.calendar-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.calendar-status-pill {
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.calendar-status-pill.is-connected {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.calendar-status-meta {
  font-size: 12px;
  color: var(--color-muted);
}

.calendar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-access-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.08);
  border: 1px solid rgba(4, 56, 115, 0.12);
  isolation: isolate;
}

.calendar-access-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-tight);
  transform: translateX(calc(var(--access-index, 0) * 100%));
  transition: transform 0.25s ease;
  z-index: 0;
}

.calendar-access-option {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
  border-radius: 999px;
  transition: color 0.2s ease;
}

.calendar-access-option.is-active {
  color: var(--color-navy);
}

.calendar-access-toggle.is-disabled {
  opacity: 0.7;
}

.calendar-access-option.is-disabled {
  cursor: not-allowed;
}

.calendar-access-hint {
  font-size: 12px;
  color: var(--color-muted);
}

.calendar-settings {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.calendar-settings-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.calendar-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
}

.calendar-field input,
.calendar-field select {
  border: 1px solid rgba(4, 56, 115, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--color-ink);
  background: #fff;
}

.calendar-field input:disabled,
.calendar-field select:disabled {
  background: rgba(4, 56, 115, 0.04);
  color: var(--color-muted);
}

.calendar-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-ink-soft);
}

.calendar-checkbox input {
  width: 16px;
  height: 16px;
}

.calendar-settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .calendar-settings-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.priority-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.priority-high {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.priority-normal {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.priority-low {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.custom-button-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.custom-button-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.custom-button-pill {
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.custom-button-url {
  font-size: 12px;
  color: var(--color-muted);
  word-break: break-all;
}

.custom-button-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
}

.custom-button-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.custom-button-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.custom-button-form-header p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.custom-button-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}

.custom-button-form {
  display: grid;
  gap: 10px;
}

.custom-button-form input,
.custom-button-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.custom-button-form textarea {
  resize: vertical;
}

.custom-button-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.custom-button-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-button-color-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

.custom-button-colors input[type="color"] {
  padding: 0;
  height: 42px;
  border: none;
  background: transparent;
}

.custom-button-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-button-preview {
  background: #f8fafc;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.custom-button-preview-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.custom-button-preview .chat-widget {
  width: min(360px, 100%);
  height: 520px;
  margin: 0 auto;
  box-shadow: var(--shadow-tight);
}

.custom-button-preview .chat-body {
  min-height: 260px;
}

.custom-button-preview-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-ink-soft);
  text-align: center;
}

.chat-action-button {
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  background: #111827;
  color: #fff;
  cursor: pointer;
  align-self: flex-start;
}

@media (max-width: 960px) {
  .custom-button-builder {
    grid-template-columns: 1fr;
  }
}

.settings-page {
  gap: 24px;
}

.settings-grid {
  display: grid;
  gap: 18px;
  max-width: 720px;
}

.settings-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 20px;
  display: grid;
  gap: 10px;
}

.settings-card h2 {
  margin: 0;
  font-size: 18px;
}

.settings-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.settings-form {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.settings-form input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.danger-zone {
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.us-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 6px 24px;
  gap: 18px;
}

.us-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 6px 2px;
}

.us-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(135deg, #043873, #0b4aa6);
  box-shadow: 0 10px 24px rgba(4, 56, 115, 0.25);
}

.us-hero-text h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  color: #0f172a;
}

.us-hero-text p {
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 15px;
}

.us-panel {
  display: grid;
  gap: 14px;
}

.us-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  overflow: hidden;
}

.us-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px 12px;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.us-section-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.9px;
  color: #1f2937;
}

.us-section-body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 14px;
}

.us-row {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

form.us-row {
  margin: 0;
}

.us-row-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.us-row-hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.us-row-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.us-row-control input {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 460px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  color: #111827;
}

.us-row-control input::placeholder {
  color: #9ca3af;
}

.us-row-control input:focus {
  outline: none;
  border-color: rgba(4, 56, 115, 0.45);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.12);
}

.us-row-control .button {
  height: 40px;
  padding: 0 18px;
}

.us-row-control .form-helper {
  width: 100%;
}

.us-row-divider {
  height: 1px;
  border: 0;
  background: rgba(4, 56, 115, 0.12);
  margin: 2px 0;
}

.us-danger-section {
  border-color: rgba(180, 35, 24, 0.25);
}

.us-danger-section > summary {
  list-style: none;
  cursor: pointer;
}

.us-danger-section > summary::-webkit-details-marker {
  display: none;
}

.us-danger-section > summary.us-section-label {
  border-bottom: none;
}

.us-danger-section[open] > summary.us-section-label {
  border-bottom: 1px solid rgba(180, 35, 24, 0.18);
}

.us-danger-label {
  color: #7f1d1d;
  border-bottom-color: rgba(180, 35, 24, 0.18);
}

.us-danger-label .us-section-icon {
  color: #b42318;
}

.us-danger-chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: #b42318;
  transition: transform 0.18s ease;
}

.us-danger-section[open] .us-danger-chevron {
  transform: rotate(180deg);
}

.us-danger-control .button {
  border-radius: 999px;
}

.us-danger-control .button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.us-delete-modal-card {
  width: min(560px, 100%);
}

.us-delete-modal-note {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.us-delete-modal-message {
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(180, 35, 24, 0.22);
  background: rgba(180, 35, 24, 0.08);
  color: #7f1d1d;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.us-delete-modal-message.is-success {
  border-color: rgba(22, 163, 74, 0.28);
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.us-delete-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 960px) {
  .us-page {
    max-width: 100%;
    padding: 4px 0 18px;
  }

  .us-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .us-row-control input {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .us-hero {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 2px 0;
  }

  .us-avatar {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }

  .us-section-label {
    font-size: 18px;
    padding: 12px 14px 10px;
  }

  .us-section-body {
    padding: 14px;
  }
}

/* Profile settings: align the account surface with the current dashboard UI. */
.us-page {
  width: min(100%, 1120px);
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 0 64px;
  display: grid;
  align-content: start;
  gap: 28px;
  color: #102940;
}

.us-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 8px 2px 24px;
  margin-bottom: 6px;
  border-bottom: 1px solid #d9e3e9;
}

.us-page-heading {
  min-width: 0;
  max-width: 620px;
}

.us-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #35627d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.us-page-heading h1,
.us-page-heading p,
.us-identity-copy strong,
.us-identity-copy span,
.us-section-label h2,
.us-section-label p {
  margin: 0;
}

.us-page-heading h1 {
  color: #0b2238;
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.us-page-heading p {
  max-width: 58ch;
  margin-top: 10px;
  color: #526a7f;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.us-identity {
  min-width: 270px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding-left: 28px;
  border-left: 1px solid #d9e3e9;
}

.us-avatar {
  width: 48px;
  height: 48px;
  border: 1px solid #18364f;
  border-radius: 11px;
  background: #142f47;
  box-shadow: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.us-identity-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.us-identity-copy strong,
.us-identity-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.us-identity-copy strong {
  color: #122b42;
  font-size: 14px;
  font-weight: 750;
}

.us-identity-copy span {
  color: #63798c;
  font-size: 12.5px;
  font-weight: 500;
}

.us-panel {
  display: grid;
  gap: 18px;
}

.us-section {
  overflow: hidden;
  border: 1px solid #d9e3e9;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}

.us-section-label {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  border-bottom: 1px solid #e0e7ec;
  background: #fbfcfd;
  color: #102940;
  font-size: inherit;
  font-weight: inherit;
}

.us-section-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #d8e4ea;
  border-radius: 8px;
  background: #eef4f6;
  color: #245b76;
}

.us-section-mark svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9px;
}

.us-section-label h2 {
  color: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.us-section-label p {
  margin-top: 3px;
  color: #607589;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.us-section-body {
  padding: 0 20px;
  display: grid;
  gap: 0;
}

.us-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.55fr);
  align-items: start;
  gap: clamp(28px, 5vw, 70px);
  padding: 22px 0 24px;
}

.us-row-meta {
  padding-top: 4px;
}

.us-row-title {
  color: #132d44;
  font-size: 13.5px;
  font-weight: 750;
}

.us-row-hint {
  max-width: 42ch;
  margin-top: 5px;
  color: #63798c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.us-row-control {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.us-field-action {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.us-row-control input {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 42px;
  flex: 1 1 auto;
  padding: 0 12px;
  border: 1px solid #cfdae2;
  border-radius: 7px;
  background: #ffffff;
  color: #102940;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.us-row-control input:hover {
  border-color: #b9c9d4;
}

.us-row-control input:focus {
  outline: none;
  border-color: #47748d;
  box-shadow: 0 0 0 3px rgba(50, 103, 129, 0.11);
}

.us-row-control .button {
  min-width: 112px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0 16px;
  border-radius: 7px;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, transform 140ms ease;
}

.us-row-control .button-primary {
  border-color: #14263a;
  background: #14263a;
  color: #ffffff;
}

.us-row-control .button-primary:hover {
  border-color: #071421;
  background: #071421;
}

.us-row-control .button:active {
  transform: translateY(1px);
}

.us-row-control .button:focus-visible,
.us-danger-section > summary:focus-visible {
  outline: 3px solid rgba(50, 103, 129, 0.2);
  outline-offset: 2px;
}

.us-row-control .form-helper {
  width: 100%;
  min-height: 0;
  color: #6b7f91;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.45;
}

.us-row-control .form-helper:empty {
  display: none;
}

.us-row-control .form-helper.is-success {
  color: #247064;
}

.us-row-divider {
  height: 1px;
  margin: 0;
  background: #e3eaee;
}

.us-danger-section {
  border-color: #d8e0e6;
}

.us-danger-section > summary {
  list-style: none;
  cursor: pointer;
}

.us-danger-section > summary::-webkit-details-marker {
  display: none;
}

.us-danger-section > summary.us-section-label {
  border-bottom: 0;
  background: #f7f9fa;
}

.us-danger-section[open] > summary.us-section-label {
  border-bottom: 1px solid #dde4e9;
}

.us-danger-label,
.us-danger-label h2 {
  color: #405366;
}

.us-danger-label p {
  color: #738293;
}

.us-danger-label .us-section-mark {
  border-color: #d7e0e6;
  background: #edf1f4;
  color: #64778a;
}

.us-danger-chevron {
  width: 17px;
  height: 17px;
  margin-left: auto;
  color: #718193;
  transition: transform 180ms ease;
}

.us-danger-section[open] .us-danger-chevron {
  transform: rotate(180deg);
}

.us-danger-section .us-section-body {
  background: #fbfcfc;
}

.us-danger-control .button {
  min-width: 0;
  border-radius: 7px;
}

.us-muted-danger-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #cbd5dc;
  border-radius: 7px;
  background: #f3f5f6;
  color: #42566a;
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.us-muted-danger-button:hover:not(:disabled) {
  border-color: #aebbc5;
  background: #e9edef;
  color: #25394c;
}

.us-muted-danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.us-workspace-deletion-row {
  align-items: start;
}

.us-owned-workspaces {
  display: grid;
  gap: 8px;
}

.us-owned-workspace {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #dde4e9;
  border-radius: 8px;
  background: #ffffff;
}

.us-owned-workspace-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: #edf1f4;
  color: #506579;
  font-size: 12px;
  font-weight: 800;
}

.us-owned-workspace strong {
  min-width: 0;
  overflow: hidden;
  color: #263d51;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.us-owned-workspaces-empty {
  margin: 0;
  padding: 12px 0;
  color: #748394;
  font-size: 12.5px;
}

.us-delete-modal-card {
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  border-radius: 10px;
}

.us-delete-terms {
  max-height: 280px;
  margin: 0 24px;
  padding: 18px 20px;
  overflow-y: auto;
  border: 1px solid #dbe3e8;
  border-radius: 8px;
  background: #f7f9fa;
  color: #52677a;
  scrollbar-width: thin;
}

.us-delete-terms h3 {
  margin: 0 0 12px;
  color: #243b50;
  font-size: 14px;
}

.us-delete-terms ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.55;
}

.us-delete-terms p {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #dbe3e8;
  font-size: 12px;
  line-height: 1.55;
}

.us-delete-confirmation {
  display: grid;
  gap: 9px;
  margin: 20px 24px 0;
  color: #596d7f;
  font-size: 12.5px;
  line-height: 1.5;
}

.us-delete-confirmation strong {
  color: #263d51;
}

.us-delete-confirmation input {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid #cbd6de;
  border-radius: 7px;
  background: #ffffff;
  color: #1d3347;
  font: inherit;
  font-size: 13px;
}

.us-delete-confirmation input:focus {
  outline: none;
  border-color: #637b8e;
  box-shadow: 0 0 0 3px rgba(80, 101, 121, 0.12);
}

.us-delete-modal-actions {
  padding-inline: 24px;
}

@media (max-width: 900px) {
  .us-page {
    max-width: 100%;
    padding: 20px 0 44px;
  }

  .us-page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .us-identity {
    width: 100%;
    min-width: 0;
    padding: 0;
    border-left: 0;
  }

  .us-row {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .us-row-meta {
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .us-page {
    gap: 22px;
  }

  .us-page-header {
    padding-bottom: 22px;
  }

  .us-page-heading h1 {
    font-size: 29px;
  }

  .us-section-label {
    padding: 15px 14px;
  }

  .us-section-body {
    padding: 0 14px;
  }

  .us-field-action {
    align-items: stretch;
    flex-direction: column;
  }

  .us-row-control .button {
    width: fit-content;
  }

  .us-owned-workspace {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .us-owned-workspace .us-muted-danger-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .us-delete-terms,
  .us-delete-confirmation {
    margin-inline: 16px;
  }
}

.agent-context-heading {
  min-width: 0;
  display: flex;
  align-self: center;
  align-items: baseline;
  gap: 9px;
  padding-left: 2px;
}

.agent-context-heading strong {
  max-width: 260px;
  overflow: hidden;
  color: #0b172d;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-context-heading span {
  color: #7a889e;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.agent-context-heading span::before {
  content: "/";
  margin-right: 9px;
  color: #c1cad7;
}

.agent-overview-page {
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: clamp(40px, 5vw, 68px);
  padding: 4px 0 72px;
  scroll-behavior: smooth;
}

.agent-overview-main {
  min-width: 0;
}

.agent-overview-profile {
  scroll-margin-top: 88px;
  margin-bottom: 34px;
  padding: 18px 20px 20px;
  border: 1px solid #dce4ee;
  border-radius: 12px;
  background: #fff;
}

.agent-overview-hero {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0;
}

.agent-overview-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #d9e5ee;
  border-radius: 11px;
  background: #eef6f5;
  color: #145e73;
}

.agent-overview-mark svg {
  width: 20px;
  height: 20px;
}

.agent-overview-heading span,
.agent-overview-field-label,
.agent-overview-index > span {
  color: #728198;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.agent-overview-heading h1 {
  margin: 3px 0 0;
  color: #081834;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.agent-overview-edit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: #174e78;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.agent-overview-edit svg {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.agent-overview-edit:hover svg {
  transform: translate(2px, -2px);
}

.agent-overview-identity {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 32px;
  margin: 18px 0 0;
  padding-top: 16px;
}

.agent-overview-identity > div {
  min-width: 0;
  padding: 0;
}

.agent-overview-identity > div + div {
  border-left: 0;
}

.agent-overview-identity p {
  max-width: 62ch;
  margin: 6px 0 0;
  overflow: hidden;
  color: #26364d;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agent-directory-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "knowledge knowledge knowledge knowledge knowledge knowledge knowledge knowledge knowledge knowledge knowledge knowledge"
    "actions actions actions actions actions actions actions actions actions actions actions actions"
    "deployment deployment deployment deployment deployment deployment deployment conversations conversations conversations conversations conversations";
  gap: 16px;
}

.agent-directory-section {
  min-width: 0;
  scroll-margin-top: 88px;
  overflow: hidden;
  border: 1px solid #d8e1eb;
  border-radius: 10px;
  background: #fff;
}

.agent-directory-knowledge {
  grid-area: knowledge;
}

.agent-directory-actions {
  grid-area: actions;
}

.agent-directory-deployment {
  grid-area: deployment;
}

.agent-directory-conversations {
  grid-area: conversations;
}

.agent-directory-section + .agent-directory-section {
  margin-top: 0;
}

.agent-directory-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 0;
  padding: 16px 18px 15px;
  border-bottom: 1px solid #dce4ee;
  background: #f8fafc;
}

.agent-directory-heading > span {
  padding-top: 5px;
  color: #8a98ab;
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.agent-directory-heading h2 {
  margin: 0;
  color: #0b172d;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.agent-directory-heading p {
  margin: 6px 0 0;
  color: #66758c;
  font-size: 13px;
  line-height: 1.5;
}

.agent-directory-list {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  background: #fff;
}

.agent-directory-knowledge .agent-directory-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-directory-actions .agent-directory-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agent-directory-row {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 13px;
  padding: 9px 18px 9px 0;
  border: 0;
  border-bottom: 1px solid #dce4ee;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, padding 160ms ease;
}

.agent-directory-row:nth-child(odd) {
  padding-right: 18px;
  border-right: 0;
}

.agent-directory-row:nth-child(even) {
  padding-left: 0;
}

.agent-directory-knowledge .agent-directory-row {
  padding-right: 14px;
  padding-left: 14px;
  border-right: 1px solid #dce4ee;
}

.agent-directory-knowledge .agent-directory-row:nth-child(3n) {
  border-right: 0;
}

.agent-directory-knowledge .agent-directory-row:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.agent-directory-actions .agent-directory-row {
  grid-template-columns: 34px minmax(0, 1fr) 15px;
  padding-right: 14px;
  padding-left: 14px;
  border-right: 1px solid #dce4ee;
}

.agent-directory-actions .agent-directory-row:nth-child(4n) {
  border-right: 0;
}

.agent-directory-actions .agent-directory-row:nth-child(n + 5) {
  border-bottom: 0;
}

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

.agent-directory-deployment .agent-directory-row {
  padding-right: 14px;
  padding-left: 14px;
}

.agent-directory-deployment .agent-directory-row:nth-child(odd) {
  border-right: 1px solid #dce4ee;
}

.agent-directory-deployment .agent-directory-row:nth-last-child(-n + 2),
.agent-directory-conversations .agent-directory-row:last-child {
  border-bottom: 0;
}

.agent-directory-row:hover {
  background: #f7f9fc;
}

.agent-directory-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  background: #f8fafc;
  color: #365a79;
}

.agent-directory-icon svg {
  width: 17px;
  height: 17px;
}

.agent-directory-icon.has-logo {
  background: #fff;
}

.agent-directory-icon img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.agent-directory-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agent-directory-copy strong {
  color: #10203a;
  font-size: 14px;
  font-weight: 750;
}

.agent-directory-copy span {
  color: #728096;
  font-size: 12px;
  line-height: 1.4;
}

.agent-directory-arrow {
  width: 15px;
  height: 15px;
  color: #8d9aae;
  transition: color 160ms ease, transform 160ms ease;
}

.agent-directory-row:hover .agent-directory-arrow {
  color: #174e78;
  transform: translate(2px, -2px);
}

.agent-overview-index {
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  gap: 2px;
  padding: 16px 0 0 17px;
  border-left: 1px solid #dce4ee;
}

.agent-overview-index > span {
  margin-bottom: 9px;
}

.agent-overview-index a {
  position: relative;
  margin-left: -18px;
  padding: 7px 10px 7px 17px;
  border-left: 2px solid transparent;
  color: #6a788d;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.agent-overview-index a:hover {
  color: #174e78;
}

.agent-overview-index a.is-active {
  border-left-color: #276486;
  background: #f0f5f8;
  color: #143f60;
  font-weight: 780;
}

@media (max-width: 980px) {
  .agent-overview-page {
    grid-template-columns: 1fr;
  }

  .agent-overview-index {
    display: none;
  }
}

@media (max-width: 700px) {
  .agent-context-heading span {
    display: none;
  }

  .agent-overview-page {
    padding-top: 0;
  }

  .agent-overview-hero {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .agent-overview-mark {
    width: 46px;
    height: 46px;
  }

  .agent-overview-edit {
    grid-column: 2;
    justify-self: start;
  }

  .agent-overview-identity,
  .agent-directory-list {
    grid-template-columns: 1fr;
  }

  .agent-directory-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "knowledge"
      "actions"
      "deployment"
      "conversations";
  }

  .agent-directory-knowledge .agent-directory-list,
  .agent-directory-actions .agent-directory-list,
  .agent-directory-deployment .agent-directory-list {
    grid-template-columns: 1fr;
  }

  .agent-directory-knowledge .agent-directory-row,
  .agent-directory-actions .agent-directory-row,
  .agent-directory-deployment .agent-directory-row {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
  }

  .agent-directory-knowledge .agent-directory-row:not(:last-child),
  .agent-directory-actions .agent-directory-row:not(:last-child),
  .agent-directory-deployment .agent-directory-row:not(:last-child) {
    border-bottom: 1px solid #dce4ee;
  }

  .agent-overview-identity > div + div {
    border-top: 0;
    border-left: 0;
  }

  .agent-directory-row:nth-child(odd),
  .agent-directory-row:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
  }

  .agent-directory-heading {
    padding-right: 20px;
    padding-left: 20px;
  }

  .agent-directory-list {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Persistent dashboard shell -------------------------------------------------
   The primary workspace uses one stable left rail. Agent configuration keeps
   the same shell and swaps the rail contents for the selected agent's tools. */
@media (min-width: 1101px) {
  body.workspace-selected .app-shell {
    grid-template-columns: 272px minmax(0, 1fr);
  }

  body.workspace-selected .app-shell > .sidebar {
    display: flex !important;
    position: sticky;
    inset: 0 auto auto 0;
    width: 272px;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 20px 16px 18px;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: none;
    overflow: hidden;
  }

  body.workspace-selected:not(.agent-selected) .sidebar-brand,
  body.workspace-selected:not(.agent-selected) .sidebar-credits {
    display: flex !important;
  }

  body.workspace-selected .sidebar-brand {
    min-height: 52px;
    margin: 0 0 20px;
    padding: 0 10px 16px;
    border-bottom-color: #e2e8f0;
  }

  body.workspace-selected .sidebar-nav {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
  }

  body.workspace-selected .sidebar-menu {
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -8px;
  }

  body.workspace-selected .sidebar-link {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 9px;
    font-weight: 600;
  }

  body.workspace-selected .sidebar-link.is-active {
    background: #e8eef8;
    border-color: transparent;
    color: #073b79;
  }

  body.workspace-selected .sidebar-link.is-active::before {
    inset: 9px auto 9px 3px;
    width: 2px;
    border-radius: 2px;
  }

  body.workspace-selected .sidebar-credits {
    flex-direction: column;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
  }

  body.workspace-selected .main {
    min-width: 0;
  }
}

@media (max-width: 1100px) {
  body.workspace-selected .app-header {
    padding: 0;
    background: var(--header-bg);
  }

  body.workspace-selected .app-header-inner {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 66px;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
    overflow: hidden;
    background: #0b1a2f;
  }

  body.workspace-selected .app-header-inner::before,
  body.workspace-selected .app-header-inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(135, 169, 211, 0.12);
    border-radius: 50%;
    pointer-events: none;
  }

  body.workspace-selected .app-header-inner::before {
    width: 184px;
    height: 184px;
    top: -128px;
    right: -38px;
  }

  body.workspace-selected .app-header-inner::after {
    width: 112px;
    height: 112px;
    top: -82px;
    right: -2px;
  }

  body.workspace-selected .header-left {
    position: relative;
    z-index: 1;
    grid-column: 1;
    min-width: 0;
  }

  body.workspace-selected .header-context {
    display: none;
  }

  body.workspace-selected .header-center {
    position: relative;
    z-index: 1;
    grid-column: 2;
    min-width: 0;
  }

  body.workspace-selected .header-center > .icon-link {
    display: none;
  }

  body.workspace-selected .mobile-header-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  body.workspace-selected .mobile-header-brand img {
    width: 31px;
    height: 31px;
    object-fit: contain;
  }

  body.workspace-selected .header-actions {
    grid-column: 3;
    min-width: 44px;
    visibility: hidden;
    pointer-events: none;
  }

  body.workspace-selected .menu-toggle {
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 4px;
    border: 1px solid rgba(177, 202, 232, 0.26);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(2, 10, 24, 0.18);
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  body.workspace-selected .menu-toggle:hover,
  body.workspace-selected .menu-toggle:focus-visible {
    border-color: rgba(177, 202, 232, 0.42);
    background: rgba(255, 255, 255, 0.14);
  }

  body.workspace-selected .menu-toggle:active {
    transform: scale(0.96);
  }

  body.workspace-selected .menu-toggle:focus-visible {
    outline: 2px solid rgba(133, 181, 238, 0.72);
    outline-offset: 2px;
  }

  body.workspace-selected .menu-line {
    width: 18px;
    height: 1.5px;
    background: #ffffff;
  }

  body.workspace-selected .header-workspace-back {
    display: none !important;
  }

  body.workspace-selected .agent-top-nav {
    width: 100%;
    padding-inline: 16px;
    background: var(--header-bg);
  }

  body.workspace-selected .app-shell > .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(292px, 86vw);
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    transform: translateX(-110%);
    z-index: 60;
  }

  body.workspace-selected .app-shell > .sidebar-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 23, 42, 0.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  body.workspace-selected .app-shell > .sidebar.is-open {
    transform: translateX(0) !important;
  }

  body.workspace-selected .app-shell > .sidebar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Selected AI agents keep the workspace rail. Their configuration navigation
   already lives in the header, so duplicating it in the sidebar adds noise. */
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-pre-agent-section],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-pre-agent-item],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-settings-section],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-settings-item] {
  display: list-item;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-agent-nav-root] > .sidebar-link {
  display: flex;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .agent-nested-nav {
  display: none !important;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-brand {
  display: flex !important;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-credits,
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-credits [data-sidebar-storage],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-credits [data-untrained-card],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-credits [data-untrained-status] {
  display: none !important;
}

body.workspace-selected.agent-selected:not(.dispatcher-context):not(.workspace-owner) .sidebar-nav [data-settings-section],
body.workspace-selected.agent-selected:not(.dispatcher-context):not(.workspace-owner) .sidebar-nav [data-settings-item] {
  display: none;
}

/* Full-bleed workspace tools: their internal rails and tables already provide
   structure, so they should not sit inside an additional padded card. */
body.live-channels-full .content,
body.human-agents-full .content {
  padding: 0 !important;
}

body.live-channels-full .workspace,
body.human-agents-full .workspace {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.live-channels-page {
  min-height: calc(100dvh - var(--app-chrome-height));
  padding: 0 !important;
  justify-items: stretch;
}

.lc-layout {
  width: 100%;
  min-height: calc(100dvh - var(--app-chrome-height));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.human-agents-page {
  min-height: calc(100dvh - var(--app-chrome-height));
  gap: 0;
}

.human-agents-page .apps-users-table {
  min-height: calc(100dvh - var(--app-chrome-height));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 700px) {
  .live-channels-page {
    padding: 0 !important;
  }
}

/* Channels workspace — aligned with the Emails two-panel layout */
.content:has(.live-channels-page) {
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
}

.workspace:has(> .live-channels-page) {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
}

.live-channels-page {
  display: block;
  width: 100%;
  height: calc(100dvh - var(--app-chrome-height));
  min-height: 0;
  padding: 0 !important;
  color: #13243a;
  background: #f7f9fb;
}

.live-channels-page .lc-layout {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.live-channels-page .lc-sidebar {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 10px 20px;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.live-channels-page .lc-sidebar-header {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 13px;
  padding: 0 9px 18px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.lc-sidebar-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7e1e9;
  border-radius: 9px;
  background: #f1f5f7;
  color: #145270;
}

.lc-sidebar-icon svg {
  width: 18px;
  height: 18px;
}

.live-channels-page .lc-sidebar-header h1,
.live-channels-page .lc-sidebar-header p {
  margin: 0;
}

.live-channels-page .lc-sidebar-header h1 {
  color: #10233a;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.live-channels-page .lc-sidebar-header p {
  margin-top: 3px;
  color: #758397;
  font-size: 12px;
}

.lc-nav-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 9px 7px;
  color: #77879a;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lc-nav-heading small {
  color: #9aa6b5;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.live-channels-page .lc-nav {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.live-channels-page .lc-nav::-webkit-scrollbar,
.live-channels-page .lc-main::-webkit-scrollbar {
  display: none;
}

.live-channels-page .lc-nav-item {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #31475e;
  text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.live-channels-page .lc-nav-item:hover {
  background: #f1f4f7;
}

.live-channels-page .lc-nav-item.is-active {
  border-color: #dce4eb;
  background: #edf2f6;
  color: #10243b;
  box-shadow: none;
}

.live-channels-page .lc-nav-item:focus-visible {
  outline: 2px solid rgba(20, 82, 112, 0.35);
  outline-offset: 1px;
}

.live-channels-page .lc-nav-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.live-channels-page .lc-nav-text {
  display: grid;
  gap: 3px;
}

.live-channels-page .lc-nav-title {
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-channels-page .lc-nav-text small {
  color: #8795a6;
  font-size: 10.5px;
}

.live-channels-page .lc-nav-item > svg {
  width: 15px;
  height: 15px;
  color: #9aa7b5;
}

.live-channels-page .lc-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: stretch;
  padding: 0;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 10px;
  background: #ffffff;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.live-channels-page .lc-detail-panel {
  min-height: 100%;
}

.live-channels-page .lc-detail-header {
  min-height: 106px;
  padding: 16px 28px;
}

@media (max-width: 900px) {
  .live-channels-page .lc-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .live-channels-page .lc-detail-header,
  .live-channels-page .lc-detail-section,
  .live-channels-page .lc-detail-footer {
    padding-inline: 22px;
  }
}

@media (max-width: 700px) {
  .content:has(.live-channels-page) {
    overflow-y: auto;
  }

  .live-channels-page {
    height: auto;
    min-height: calc(100dvh - var(--app-chrome-height));
  }

  .live-channels-page .lc-layout {
    display: block;
    height: auto;
    min-height: 0;
    padding: 12px;
    overflow: visible;
  }

  .live-channels-page .lc-sidebar {
    margin-bottom: 12px;
    padding: 18px 14px 12px;
  }

  .lc-nav-heading {
    display: none;
  }

  .live-channels-page .lc-nav {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
  }

  .live-channels-page .lc-nav-item {
    min-width: max-content;
    grid-template-columns: 30px auto;
  }

  .live-channels-page .lc-nav-logo {
    width: 30px;
    height: 30px;
  }

  .live-channels-page .lc-nav-item > svg,
  .live-channels-page .lc-nav-text small {
    display: none;
  }

  .live-channels-page .lc-main {
    min-height: calc(100dvh - var(--app-chrome-height) - 24px);
  }

  .live-channels-page .lc-detail-panel {
    min-height: inherit;
  }
}

/* Agent workspace knowledge and action pages */
.agent-workspace-content :is(.agent-resource-page, .agent-action-page) {
  width: 100%;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 30px 34px 44px;
  color: #10233b;
  container-name: agent-subpage;
  container-type: inline-size;
}

.agent-subpage-header {
  min-width: 0;
  min-height: 86px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.11);
}

.agent-subpage-header > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.agent-subpage-kicker {
  color: #6f8299;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.agent-subpage-header h1 {
  margin: 0;
  color: #10233b;
  font-size: 27px;
  font-weight: 740;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.agent-subpage-header p {
  max-width: 690px;
  margin: 0;
  color: #687a90;
  font-size: 13.5px;
  line-height: 1.55;
}

.agent-subpage-primary-action {
  min-height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid #0d315d;
  border-radius: 7px;
  background: #0d315d;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
}

.agent-subpage-primary-action:hover {
  border-color: #081f3c;
  background: #081f3c;
  transform: none;
}

.agent-subpage-primary-action svg {
  width: 15px;
  height: 15px;
}

.agent-subpage-count {
  flex: 0 0 auto;
  color: #708197;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

.agent-workspace-content :is(
  .faqs-shell,
  .notes-shell,
  .products-shell,
  .notion-shell,
  .custom-api-shell,
  .custom-button-shell,
  .zapier-shell,
  .make-shell,
  .slack-shell
) {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.agent-workspace-content :is(
  .custom-api-shell,
  .custom-button-shell,
  .zapier-shell,
  .make-shell,
  .slack-shell
) {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.agent-workspace-content :is(
  .faqs-toolbar,
  .notes-toolbar,
  .products-toolbar,
  .custom-api-toolbar,
  .custom-button-toolbar,
  .zapier-toolbar,
  .make-toolbar,
  .slack-toolbar
) {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  padding: 0 2px 11px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.09);
}

.agent-workspace-content :is(
  .faqs-toolbar,
  .notes-toolbar,
  .products-toolbar,
  .custom-api-toolbar,
  .custom-button-toolbar,
  .zapier-toolbar,
  .make-toolbar,
  .slack-toolbar
) h2 {
  margin: 0;
  color: #203a54;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: 0;
}

.agent-workspace-content :is(
  .faqs-list,
  .notes-list,
  .products-list,
  .custom-api-list,
  .custom-button-list,
  .zapier-list,
  .make-list,
  .slack-list,
  .notion-list
) {
  display: grid;
  gap: 10px;
}

.agent-workspace-content :is(
  .faq-card,
  .note-card,
  .product-card,
  .custom-api-card,
  .custom-button-card,
  .zapier-card,
  .make-card,
  .slack-card,
  .notion-item,
  .docs-card
) {
  min-width: 0;
  border: 1px solid rgba(4, 56, 115, 0.13);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.agent-workspace-content :is(
  .faq-card,
  .note-card,
  .product-card,
  .custom-api-card,
  .custom-button-card,
  .zapier-card,
  .make-card,
  .slack-card
) {
  padding: 16px 18px;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.agent-workspace-content :is(
  .faq-card,
  .note-card,
  .product-card,
  .custom-api-card,
  .custom-button-card,
  .zapier-card,
  .make-card,
  .slack-card
):hover {
  border-color: rgba(4, 56, 115, 0.25);
  background: #fcfdff;
}

.agent-workspace-content :is(
  .faq-header,
  .note-header,
  .product-header,
  .custom-api-card-header,
  .custom-button-card-header,
  .zapier-card-header,
  .make-card-header,
  .slack-card-header
) {
  min-width: 0;
  align-items: flex-start;
  gap: 16px;
}

.agent-workspace-content :is(
  .faq-header,
  .note-header,
  .product-header,
  .custom-api-card-header,
  .custom-button-card-header,
  .zapier-card-header,
  .make-card-header,
  .slack-card-header
) > :first-child {
  min-width: 0;
}

.agent-workspace-content :is(
  .faq-header h3,
  .note-title,
  .product-header h3,
  .custom-api-card h3,
  .custom-button-card h3,
  .zapier-card h3,
  .make-card h3,
  .slack-card h3
) {
  color: #10233b;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.agent-workspace-content :is(
  .note-content,
  .product-description,
  .custom-api-card p,
  .custom-button-card p,
  .zapier-card p,
  .make-card p,
  .slack-card p
) {
  color: #52677f;
  font-size: 12.5px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.agent-workspace-content .faq-section {
  gap: 7px;
  color: #354b63;
  font-size: 12.5px;
  line-height: 1.55;
}

.agent-workspace-content .faq-section + .faq-section {
  padding-top: 12px;
  border-top: 1px solid rgba(4, 56, 115, 0.08);
}

.agent-workspace-content .section-label {
  color: #78899d;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.1em;
}

.agent-workspace-content .faq-answer {
  color: #263b52;
  line-height: 1.6;
}

.agent-workspace-content .product-meta {
  padding-top: 11px;
  border-top: 1px solid rgba(4, 56, 115, 0.08);
}

.agent-workspace-content .product-meta .tag {
  border-radius: 6px;
  background: #f2f5f8;
  color: #52677f;
}

.agent-workspace-content .product-meta strong {
  color: #10233b;
  font-size: 13px;
}

.agent-workspace-content :is(
  .custom-api-url,
  .custom-button-url,
  .zapier-url,
  .make-url,
  .slack-url
) {
  min-width: 0;
  margin-top: 2px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(4, 56, 115, 0.08);
  border-radius: 7px;
  background: #f7f9fb;
  color: #60738a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.agent-workspace-content :is(.custom-api-method, .custom-button-pill) {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.05em;
}

.agent-workspace-content :is(
  .faq-card-menu,
  .note-card-menu,
  .product-card-menu,
  .custom-api-card-menu,
  .custom-button-card-menu,
  .zapier-card-menu,
  .make-card-menu,
  .slack-card-menu
) .menu-button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 7px;
  background: #f6f8fb;
  color: #49627d;
}

.agent-workspace-content :is(
  .faq-card-menu,
  .note-card-menu,
  .product-card-menu,
  .custom-api-card-menu,
  .custom-button-card-menu,
  .zapier-card-menu,
  .make-card-menu,
  .slack-card-menu
) .menu-button:hover {
  border-color: rgba(4, 56, 115, 0.26);
  background: #edf2f7;
}

.agent-workspace-content .empty-note {
  min-height: 126px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  border: 1px dashed rgba(4, 56, 115, 0.2);
  border-radius: 10px;
  background: #fbfcfe;
  color: #718298;
  font-size: 12.5px;
  text-align: center;
}

.agent-workspace-content :is(
  .faq-form-section,
  .note-form-section,
  .product-form-section,
  .custom-api-form-section,
  .custom-button-form-section,
  .zapier-form-section,
  .make-form-section,
  .slack-form-section
) {
  width: 100%;
  max-width: 960px;
  padding: 22px;
  border: 1px solid rgba(4, 56, 115, 0.13);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.agent-workspace-content :is(
  .faq-form-header,
  .note-form-header,
  .product-form-header,
  .custom-api-form-header,
  .custom-button-form-header,
  .zapier-form-header,
  .make-form-header,
  .slack-form-header
) {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.09);
}

.agent-workspace-content :is(
  .faq-form,
  .note-form,
  .product-form,
  .custom-api-form,
  .custom-button-form,
  .zapier-form,
  .make-form,
  .slack-form
) {
  gap: 11px;
  margin-top: 18px;
}

.agent-workspace-content :is(
  .faq-form,
  .note-form,
  .product-form,
  .custom-api-form,
  .custom-button-form,
  .zapier-form,
  .make-form,
  .slack-form
) :is(input, textarea, select) {
  border-radius: 7px;
  border-color: rgba(4, 56, 115, 0.16);
  background: #fff;
}

.agent-workspace-content :is(
  .faq-form,
  .note-form,
  .product-form,
  .custom-api-form,
  .custom-button-form,
  .zapier-form,
  .make-form,
  .slack-form
) :is(input, textarea, select):focus {
  border-color: rgba(24, 95, 168, 0.58);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(24, 95, 168, 0.09);
}

.agent-workspace-content .docs-grid {
  min-width: 0;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 14px;
}

.agent-workspace-content .docs-card {
  align-content: start;
  padding: 18px;
}

.agent-workspace-content .docs-card-header {
  align-items: flex-start;
}

.agent-workspace-content .docs-card-header h2 {
  color: #203a54;
  font-size: 15px;
  font-weight: 720;
}

.agent-workspace-content .docs-card-header p {
  max-width: 430px;
  color: #687a90;
  font-size: 12.5px;
  line-height: 1.5;
}

.agent-workspace-content .dropzone {
  padding: 20px;
  border-radius: 9px;
  background: #f7faff;
  box-shadow: none;
}

.agent-workspace-content .dropzone-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.agent-workspace-content .doc-row,
.agent-workspace-content .upload-item {
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #fafbfd;
}

.agent-workspace-content .notion-shell {
  display: grid;
  gap: 12px;
}

.agent-workspace-content .notion-header {
  min-height: 54px;
  align-items: center;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 9px;
  background: #fafbfd;
}

.agent-workspace-content .notion-title {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
}

.agent-workspace-content .notion-title img {
  width: 28px;
  height: 28px;
}

.agent-workspace-content .notion-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-workspace-content .notion-title h2 {
  margin: 0;
  color: #203a54;
  font-size: 14px;
  font-weight: 720;
}

.agent-workspace-content .notion-title p {
  grid-column: auto;
  color: #718298;
  font-size: 11.5px;
}

.agent-workspace-content .notion-item {
  padding: 14px 16px;
}

.agent-workspace-content .notion-item h3 {
  color: #10233b;
  font-size: 14px;
}

.agent-workspace-content .notion-connect {
  max-width: none;
  min-height: 250px;
  place-items: center;
  align-content: center;
  padding: 36px;
  border: 1px dashed rgba(4, 56, 115, 0.21);
  border-radius: 10px;
  background: #fbfcfe;
  box-shadow: none;
  text-align: center;
}

.agent-workspace-content .dynamic-sources-page {
  min-height: 100%;
}

.agent-workspace-content .dynamic-sources-shell {
  min-height: 0;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.agent-workspace-content .dynamic-sources-topbar {
  position: static;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 0;
}

.agent-workspace-content .dynamic-topbar-controls {
  border-radius: 8px;
}

@container agent-subpage (max-width: 820px) {
  .agent-workspace-content .docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-workspace-content :is(
    .custom-api-item[data-body-item],
    .zapier-item[data-zapier-body-item],
    .make-item[data-make-body-item]
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container agent-subpage (max-width: 620px) {
  .agent-subpage-header {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .agent-subpage-primary-action {
    align-self: flex-start;
  }

  .agent-workspace-content :is(
    .faq-header,
    .note-header,
    .product-header,
    .custom-api-card-header,
    .custom-button-card-header,
    .zapier-card-header,
    .make-card-header,
    .slack-card-header,
    .notion-item
  ) {
    align-items: flex-start;
  }

  .agent-workspace-content :is(
    .custom-api-card-header,
    .custom-button-card-header,
    .zapier-card-header,
    .make-card-header,
    .slack-card-header,
    .notion-item
  ) {
    flex-direction: column;
  }

  .agent-workspace-content :is(
    .custom-api-card-actions,
    .custom-button-card-actions,
    .zapier-card-actions,
    .make-card-actions,
    .slack-card-actions,
    .notion-item-actions
  ) {
    width: 100%;
    justify-content: space-between;
  }

  .agent-workspace-content :is(.doc-row, .upload-item) {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-workspace-content .notion-title {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .agent-workspace-content .notion-title .tag {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .agent-workspace-content :is(.agent-resource-page, .agent-action-page) {
    padding: 24px 22px 36px;
  }
}

@media (max-width: 520px) {
  .agent-workspace-content :is(.agent-resource-page, .agent-action-page) {
    padding: 22px 16px 32px;
  }

  .agent-subpage-header h1 {
    font-size: 24px;
  }

  .agent-workspace-content :is(
    .faq-form-header,
    .note-form-header,
    .product-form-header,
    .custom-api-form-header,
    .custom-button-form-header,
    .zapier-form-header,
    .make-form-header,
    .slack-form-header
  ) {
    flex-direction: column;
  }
}

/* Portal action tools workspace */
.content:has(.portal-action-tools-page) {
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
}

.workspace:has(> .portal-action-tools-page) {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
}

.portal-action-tools-page {
  display: block;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  color: #13243a;
  background: #f7f9fb;
  container-name: portal-action-tools;
  container-type: inline-size;
}

.portal-tools-root,
.portal-tools-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.portal-tools-layout {
  display: grid;
  grid-template-columns: 394px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
}

.portal-tools-library,
.portal-tool-editor {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 10px;
  background: #ffffff;
}

.portal-tools-library {
  display: flex;
  flex-direction: column;
  padding: 16px 10px 18px;
  overflow: hidden;
}

.portal-tools-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 9px 16px;
  margin-bottom: 13px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.portal-tools-library-head span,
.portal-tool-editor-head > div:first-child > span,
.portal-tool-welcome > span {
  display: block;
  margin-bottom: 4px;
  color: #708198;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.portal-tools-library-head h1,
.portal-tool-editor-head h2,
.portal-tool-welcome h2 {
  margin: 0;
  color: #10233a;
  letter-spacing: -0.025em;
}

.portal-tools-library-head h1 {
  font-size: 19px;
  line-height: 1.25;
}

.portal-tools-icon-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #d5dfe8;
  border-radius: 7px;
  background: #ffffff;
  color: #35516d;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.portal-tools-icon-button:hover {
  border-color: #bac7d3;
  background: #f3f6f8;
  color: #142b43;
}

.portal-tools-library-add {
  border-color: #14263a;
  background: #14263a;
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(20, 38, 58, 0.15);
}

.portal-tools-library-add:hover {
  border-color: #071421;
  background: #071421;
  color: #ffffff;
  box-shadow: 0 7px 16px rgba(20, 38, 58, 0.2);
}

.portal-tools-library-add:active {
  transform: translateY(1px);
}

.portal-tools-icon-button.is-danger {
  color: #9b4b50;
}

.portal-tools-icon-button.is-danger:hover {
  border-color: #e6c9cb;
  background: #fff5f5;
  color: #9b252e;
}

.portal-tools-icon-button svg {
  width: 16px;
  height: 16px;
}

.portal-tools-search {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 8px 10px;
  padding: 0 11px;
  border: 1px solid #d8e0e8;
  border-radius: 8px;
  background: #fbfcfd;
  color: #8290a0;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.portal-tools-search:focus-within {
  border-color: rgba(20, 82, 112, 0.5);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(20, 82, 112, 0.07);
}

.portal-tools-search svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.portal-tools-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172b40;
  font: inherit;
  font-size: 12.5px;
}

.portal-tools-search input::placeholder {
  color: #9aa6b4;
}

.portal-tools-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 0 3px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.portal-tools-list::-webkit-scrollbar,
.portal-tool-editor::-webkit-scrollbar {
  display: none;
}

.portal-tool-list-item {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 3px;
  padding: 4px 5px 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.portal-tool-list-item:hover {
  background: #f4f6f8;
}

.portal-tool-list-item.is-active {
  border-color: #d9e2e9;
  background: #edf2f6;
}

.portal-tool-list-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.portal-tool-method {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 1px solid #d8e1e9;
  border-radius: 6px;
  background: #f5f7f9;
  color: #50677e;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.portal-tool-method.is-post {
  border-color: #cfe3df;
  background: #eef6f4;
  color: #306b64;
}

.portal-tool-list-copy {
  min-width: 0;
}

.portal-tool-list-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-tool-list-copy strong {
  color: #183047;
  font-size: 13px;
  font-weight: 700;
}

.portal-tool-list-delete {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9aa6b4;
  opacity: 0;
  cursor: pointer;
  transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease;
}

.portal-tool-list-item:hover .portal-tool-list-delete,
.portal-tool-list-item:focus-within .portal-tool-list-delete {
  opacity: 1;
}

.portal-tool-list-delete:hover {
  background: #fff1f1;
  color: #a33c44;
}

.portal-tool-list-delete svg {
  width: 15px;
  height: 15px;
}

.portal-tool-delete-confirm {
  display: grid;
  gap: 3px;
}

.portal-tool-delete-confirm button {
  min-height: 23px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: #f0f3f6;
  color: #536579;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.portal-tool-delete-confirm button:first-child {
  background: #a93d45;
  color: #ffffff;
}

.portal-tools-library-note p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
}

.portal-tools-library-note {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  margin: auto 8px 0;
  padding-top: 15px;
  border-top: 1px solid #e2e8ed;
  color: #7a899a;
}

.portal-tools-library-note svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.portal-tool-editor {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.portal-tool-editor > form {
  min-height: 100%;
}

.portal-tool-form-body {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.portal-tool-editor-head {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 30px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.portal-tool-editor-head h2 {
  max-width: min(56vw, 720px);
  overflow: hidden;
  font-size: 22px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-tool-editor-back {
  display: none;
}

.portal-tool-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.portal-tool-save-status {
  min-width: 72px;
  color: #7a8999;
  font-size: 11px;
  font-weight: 650;
  text-align: right;
}

.portal-tool-save-status.is-success {
  color: #2d7166;
}

.portal-tool-save-status.is-error {
  max-width: 270px;
  color: #a33e47;
}

.portal-tool-primary-button,
.portal-tool-secondary-button,
.portal-tool-test-button,
.portal-tool-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.portal-tool-primary-button,
.portal-tool-secondary-button,
.portal-tool-test-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 7px;
}

.portal-tool-primary-button {
  border: 1px solid #172333;
  background: #172333;
  color: #ffffff;
}

.portal-tool-primary-button:hover {
  border-color: #0b111a;
  background: #0b111a;
}

.portal-tool-secondary-button {
  border: 1px solid #d4dde6;
  background: #ffffff;
  color: #4a5d72;
}

.portal-tool-secondary-button:hover {
  border-color: #bac7d3;
  background: #f5f7f9;
  color: #172c42;
}

.portal-tool-primary-button:active,
.portal-tool-secondary-button:active,
.portal-tool-test-button:active {
  transform: translateY(1px);
}

.portal-tool-primary-button:disabled,
.portal-tool-secondary-button:disabled,
.portal-tool-test-button:disabled,
.portal-tool-text-button:disabled,
.portal-tools-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.portal-tool-primary-button svg,
.portal-tool-secondary-button svg,
.portal-tool-test-button svg,
.portal-tool-text-button svg {
  width: 15px;
  height: 15px;
}

.portal-tool-form-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 27px 30px 30px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.portal-tool-form-section:last-child {
  border-bottom: 0;
}

.portal-tool-section-label {
  display: block;
  align-content: start;
}

.portal-tool-section-label > span {
  padding-top: 2px;
  color: #9aa6b3;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.05em;
}

.portal-tool-section-label h3,
.portal-tool-section-label p,
.portal-tool-section-toolbar p,
.portal-tool-test-head h4,
.portal-tool-test-head p {
  margin: 0;
}

.portal-tool-section-label h3 {
  color: #172d44;
  font-size: 14.5px;
  line-height: 1.35;
}

.portal-tool-section-label p {
  margin-top: 5px;
  color: #536a82;
  font-size: 12px;
  line-height: 1.55;
}

.portal-tool-section-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 17px;
}

.portal-tool-request-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 15px;
}

.portal-tool-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #53657a;
  font-size: 11.5px;
  font-weight: 650;
}

.portal-tool-field > span {
  min-width: 0;
}

.portal-tool-field > span small {
  margin-left: 5px;
  color: #96a1ae;
  font: inherit;
  font-weight: 500;
}

.portal-tool-field > small {
  color: #8996a5;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.45;
}

.portal-tool-field input,
.portal-tool-field select,
.portal-tool-field textarea,
.portal-tool-test-field > input {
  width: 100%;
  min-width: 0;
  border: 1px solid #ced8e1;
  border-radius: 7px;
  background: #ffffff;
  color: #172b40;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.portal-tool-field input,
.portal-tool-field select,
.portal-tool-test-field > input {
  height: 42px;
  padding: 0 12px;
}

.portal-tool-field textarea {
  min-height: 76px;
  padding: 11px 12px;
  line-height: 1.55;
  resize: vertical;
}

.portal-tool-field input::placeholder,
.portal-tool-field textarea::placeholder,
.portal-tool-test-field > input::placeholder {
  color: #9ba7b5;
}

.portal-tool-field input:focus,
.portal-tool-field select:focus,
.portal-tool-field textarea:focus,
.portal-tool-test-field > input:focus {
  border-color: rgba(20, 82, 112, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 82, 112, 0.08);
}

.portal-tool-field textarea:disabled {
  background: #f3f5f7;
  color: #8a97a5;
}

.portal-tool-method-switch,
.portal-tool-permission-switch {
  display: grid;
  padding: 3px;
  border: 1px solid #d2dce5;
  border-radius: 7px;
  background: #f3f6f8;
}

.portal-tool-method-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 42px;
}

.portal-tool-method-switch button,
.portal-tool-permission-switch button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #6d7d8f;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.portal-tool-method-switch button.is-active,
.portal-tool-permission-switch button.is-active {
  background: #ffffff;
  color: #172d44;
  box-shadow: 0 1px 3px rgba(23, 43, 64, 0.1);
}

.portal-tool-section-toolbar,
.portal-tool-test-head,
.portal-tool-returned-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.portal-tool-section-toolbar.is-actions-only {
  justify-content: flex-end;
}

.portal-tool-section-toolbar p {
  color: #7a899a;
  font-size: 11.5px;
  line-height: 1.5;
}

.portal-tool-text-button {
  flex: 0 0 auto;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: #315d76;
}

.portal-tool-text-button:hover {
  color: #123f59;
}

.portal-tool-config-list,
.portal-tool-variable-list {
  display: grid;
  border-top: 1px solid #e2e8ed;
}

.portal-tool-inline-empty {
  padding: 24px 4px;
  border-bottom: 1px solid #e2e8ed;
  color: #8794a4;
  text-align: center;
}

.portal-tool-inline-empty p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
}

.portal-tool-config-row,
.portal-tool-mapping-row {
  display: grid;
  align-items: end;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e2e8ed;
}

.portal-tool-config-row {
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr) 34px;
}

.portal-tool-mapping-row {
  grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1.15fr) auto 58px 34px;
}

.portal-tool-mapping-order {
  height: 34px;
  display: inline-grid;
  grid-template-columns: repeat(2, 27px);
  align-items: center;
  overflow: hidden;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
}

.portal-tool-mapping-order button {
  width: 27px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-right: 1px solid #e1e7ec;
  background: #ffffff;
  color: #677a8e;
  cursor: pointer;
}

.portal-tool-mapping-order button:last-child {
  border-right: 0;
}

.portal-tool-mapping-order button:hover:not(:disabled) {
  background: #f2f5f7;
  color: #263f57;
}

.portal-tool-mapping-order button:disabled {
  cursor: default;
  opacity: 0.35;
}

.portal-tool-mapping-order svg {
  width: 13px;
  height: 13px;
}

.portal-tool-variable {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #e2e8ed;
}

.portal-tool-variable-index {
  align-self: center;
  color: #9aa6b3;
  font-size: 10px;
  font-weight: 750;
}

.portal-tool-variable-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1fr) 92px minmax(180px, 1.15fr);
  gap: 10px;
}

.portal-tool-token-input {
  height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #ced8e1;
  border-radius: 7px;
  background: #ffffff;
  color: #8a98a7;
}

.portal-tool-token-input:focus-within {
  border-color: rgba(20, 82, 112, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 82, 112, 0.08);
}

.portal-tool-token-input input {
  height: 38px;
  padding: 0 4px;
  border: 0;
  box-shadow: none !important;
}

.portal-tool-variable-controls {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.portal-tool-mini-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #66788b;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.portal-tool-mini-check input {
  width: 15px;
  height: 15px;
  accent-color: #356d67;
}

.portal-tool-code-field textarea {
  min-height: 190px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  tab-size: 2;
}

.portal-tool-variable-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portal-tool-variable-pills button,
.portal-tool-category-grid button,
.portal-tool-returned-row button {
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #ffffff;
  color: #4c6278;
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
}

.portal-tool-variable-pills button {
  padding: 6px 9px;
  font-family: "SFMono-Regular", Consolas, monospace;
  cursor: grab;
  user-select: none;
}

.portal-tool-variable-pills button.is-dragging {
  opacity: 0.46;
  cursor: grabbing;
}

.portal-tool-drop-mirror {
  position: fixed;
  z-index: 10020;
  overflow: hidden;
  border-color: transparent !important;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  pointer-events: auto;
  user-select: text;
}

.portal-tool-drop-caret {
  position: fixed;
  z-index: 10021;
  width: 2px;
  min-height: 14px;
  border-radius: 999px;
  background: #185f7c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
  pointer-events: none;
  transition: left 35ms linear, top 35ms linear, height 35ms linear;
}

.portal-tool-variable-pills button:hover,
.portal-tool-category-grid button:hover,
.portal-tool-returned-row button:hover {
  border-color: #b9c7d3;
  background: #f5f7f9;
}

.portal-tool-test-panel {
  display: grid;
  gap: 17px;
  padding: 18px;
  border: 1px solid #dce4ea;
  border-radius: 8px;
  background: #f8fafb;
}

.portal-tool-test-head h4 {
  color: #1c3349;
  font-size: 13px;
}

.portal-tool-test-head p {
  margin-top: 4px;
  color: #8290a0;
  font-size: 10.5px;
}

.portal-tool-test-button {
  border: 1px solid #d0dae3;
  background: #ffffff;
  color: #31556d;
}

.portal-tool-test-button:hover {
  border-color: #b5c5d1;
  background: #f1f5f7;
}

.portal-tool-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.portal-tool-test-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #53657a;
}

.portal-tool-test-field > label:first-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.portal-tool-test-field strong {
  overflow: hidden;
  color: #42586e;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-tool-test-field small {
  color: #929eab;
  font-size: 9.5px;
  white-space: nowrap;
}

.portal-tool-test-boolean {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #ced8e1;
  border-radius: 7px;
  background: #ffffff;
  color: #4c6176;
  font-size: 11.5px;
}

.portal-tool-test-boolean input {
  width: 16px;
  height: 16px;
  accent-color: #356d67;
}

.portal-tool-test-no-fields {
  grid-column: 1 / -1;
  margin: 0;
  color: #8794a4;
  font-size: 11.5px;
}

.portal-tool-test-message,
.portal-tool-test-result {
  border-radius: 7px;
  font-size: 11.5px;
}

.portal-tool-test-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #ecd4d5;
  background: #fff6f6;
  color: #9c3f47;
}

.portal-tool-test-message svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.portal-tool-test-message p {
  margin: 0;
  line-height: 1.5;
}

.portal-tool-test-result {
  overflow: hidden;
  border: 1px solid #d8e2e8;
  background: #ffffff;
}

.portal-tool-test-result > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  border-bottom: 1px solid #e1e7ec;
}

.portal-tool-test-result > header span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #476077;
  font-weight: 700;
}

.portal-tool-test-result > header svg {
  width: 15px;
  height: 15px;
}

.portal-tool-test-result > header strong {
  color: #78889a;
  font-size: 10.5px;
}

.portal-tool-test-result.is-success > header span {
  color: #2e7166;
}

.portal-tool-test-result.is-error > header span,
.portal-tool-test-error-copy {
  color: #a03e47;
}

.portal-tool-test-error-copy,
.portal-tool-test-result > pre {
  margin: 0;
  padding: 12px 13px;
}

.portal-tool-test-result > pre {
  max-height: 240px;
  overflow: auto;
  color: #344c63;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  white-space: pre-wrap;
}

.portal-tool-returned-paths {
  display: grid;
}

.portal-tool-returned-head {
  padding: 10px 13px;
  border-bottom: 1px solid #e4e9ee;
  color: #6f8092;
  font-size: 10.5px;
}

.portal-tool-returned-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 13px;
  border-bottom: 1px solid #e8edf1;
}

.portal-tool-returned-row:last-child {
  border-bottom: 0;
}

.portal-tool-returned-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.portal-tool-returned-row strong,
.portal-tool-returned-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-tool-returned-row strong {
  color: #365069;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
}

.portal-tool-returned-row small {
  color: #8a97a5;
  font-size: 9.5px;
}

.portal-tool-returned-row button {
  min-width: 66px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.portal-tool-returned-row button:disabled {
  cursor: default;
  opacity: 0.55;
}

.portal-tool-returned-row button svg {
  width: 13px;
  height: 13px;
}

.portal-tool-response-block {
  display: grid;
  gap: 4px;
}

.portal-tool-permission-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 360px);
  height: 42px;
}

.portal-tool-permission-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #738397;
  font-size: 11.5px;
}

.portal-tool-permission-note svg {
  width: 15px;
  height: 15px;
}

.portal-tool-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.portal-tool-category-grid button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.portal-tool-category-grid button.is-selected {
  border-color: #b7d5cf;
  background: #edf6f4;
  color: #2d665f;
}

.portal-tool-category-grid button svg {
  width: 13px;
  height: 13px;
}

.portal-tool-welcome {
  display: block;
  padding: 0;
}

.portal-tool-welcome-shell {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px) clamp(26px, 4.5vw, 54px) 72px;
}

.portal-tool-welcome-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ced8e2;
}

.portal-tool-welcome-title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.portal-tool-welcome-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid #d7e1e8;
  border-radius: 8px;
  background: #f1f5f7;
  color: #315d76;
}

.portal-tool-welcome-mark svg {
  width: 19px;
  height: 19px;
}

.portal-tool-welcome-title span {
  display: block;
  margin: 1px 0 4px;
  color: #536b83;
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.portal-tool-welcome-title h2 {
  max-width: 560px;
  margin: 0;
  color: #10263e;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.portal-tool-welcome-title p {
  max-width: 590px;
  margin: 7px 0 0;
  color: #49627b;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
}

.portal-tool-welcome-head > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 7px 1px;
  color: #264f6b;
  font-size: 12px;
  font-weight: 730;
}

.portal-tool-welcome-head > a:hover {
  color: #0f314a;
}

.portal-tool-welcome-head > a:focus-visible,
.portal-tool-welcome-shortcuts > a:focus-visible,
.portal-tool-welcome-shortcuts > button:focus-visible {
  outline: 3px solid rgba(20, 82, 112, 0.18);
  outline-offset: 3px;
}

.portal-tool-welcome-head > a svg {
  width: 14px;
  height: 14px;
}

.portal-tool-welcome-shortcuts {
  width: min(100%, 720px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 26px 0 42px;
  border: 1px solid #cdd8e2;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.portal-tool-welcome-shortcuts > button,
.portal-tool-welcome-shortcuts > a {
  min-width: 0;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border: 0;
  border-right: 1px solid #d9e2e9;
  border-radius: 0;
  background: #ffffff;
  color: #19334d;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.portal-tool-welcome-shortcuts > :last-child {
  border-right: 0;
}

.portal-tool-welcome-shortcuts > button:hover,
.portal-tool-welcome-shortcuts > a:hover {
  background: #f2f6f8;
  color: #0f3c59;
}

.portal-tool-welcome-shortcuts > button:active,
.portal-tool-welcome-shortcuts > a:active {
  background: #eaf0f4;
}

.portal-tool-welcome-shortcuts > button > svg,
.portal-tool-welcome-shortcuts > a > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #3c6982;
}

.portal-tool-welcome-shortcuts span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.portal-tool-welcome-shortcuts strong {
  font-size: 12.5px;
}

.portal-tool-welcome-shortcuts small {
  color: #526980;
  font-size: 11px;
  font-weight: 520;
}

.portal-tool-welcome-section {
  width: min(100%, 720px);
  padding: 28px 0 34px;
  border-top: 1px solid #ced8e2;
}

.portal-tool-welcome-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 21px;
}

.portal-tool-welcome-section h3,
.portal-tool-welcome-section header p {
  margin: 0;
}

.portal-tool-welcome-section h3 {
  color: #132c45;
  font-size: 13px;
  letter-spacing: -0.005em;
}

.portal-tool-welcome-section header p {
  margin-top: 5px;
  color: #526980;
  font-size: 11.5px;
  font-weight: 500;
}

.portal-tool-welcome-section > header > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #526980;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}

.portal-tool-welcome-section > header > span svg {
  width: 13px;
  height: 13px;
}

.portal-tool-welcome-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-tool-welcome-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #e5ebf0;
}

.portal-tool-welcome-steps li:last-child {
  border-bottom: 0;
}

.portal-tool-welcome-steps li > span {
  padding-top: 1px;
  color: #60758a;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.portal-tool-welcome-steps li div {
  min-width: 0;
}

.portal-tool-welcome-steps strong {
  display: block;
  color: #1a344e;
  font-size: 12px;
}

.portal-tool-welcome-steps p {
  margin: 3px 0 0;
  color: #526980;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
}

.portal-tool-welcome-examples {
  scroll-margin-top: 24px;
}

.portal-tool-welcome-examples ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-tool-welcome-examples li {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #e5ebf0;
}

.portal-tool-welcome-examples li > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #3f6d85;
}

.portal-tool-welcome-examples li span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.portal-tool-welcome-examples strong {
  color: #1d3852;
  font-size: 11.5px;
}

.portal-tool-welcome-examples small {
  overflow: hidden;
  color: #526980;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Action Tools landing: clear primary action and functional service templates. */
.portal-tool-welcome-shell {
  width: min(100%, 1020px);
  padding: clamp(34px, 4.5vw, 58px) clamp(28px, 4vw, 50px) 76px;
}

.portal-tool-welcome-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
  align-items: center;
  gap: clamp(32px, 5vw, 68px);
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid #d7e1e8;
  border-radius: 12px;
  background: #f2f6f8;
}

.portal-tool-template-section > header span {
  display: block;
  color: #49647d;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-tool-welcome-copy h2 {
  max-width: 620px;
  margin: 0;
  color: #0e263e;
  font-size: clamp(29px, 3.2vw, 39px);
  line-height: 1.08;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.portal-tool-welcome-copy > p {
  max-width: 610px;
  margin: 14px 0 0;
  color: #405b75;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.62;
  text-wrap: pretty;
}

.portal-tool-welcome-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 24px;
}

.portal-tool-welcome-create {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 19px;
  border: 1px solid #14263a;
  border-radius: 8px;
  background: #14263a;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(20, 38, 58, 0.14);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}

.portal-tool-welcome-create:hover {
  border-color: #071421;
  background: #071421;
  box-shadow: 0 10px 22px rgba(20, 38, 58, 0.2);
  transform: translateY(-1px);
}

.portal-tool-welcome-create:active {
  transform: translateY(1px);
}

.portal-tool-welcome-create svg {
  width: 17px;
  height: 17px;
}

.portal-tool-welcome-actions > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 1px;
  color: #244f6d;
  font-size: 13.5px;
  font-weight: 700;
}

.portal-tool-welcome-actions > a:hover {
  color: #0e3049;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.portal-tool-welcome-actions > a svg {
  width: 15px;
  height: 15px;
}

.portal-tool-welcome-create:focus-visible,
.portal-tool-welcome-actions > a:focus-visible,
.portal-tool-template-card:focus-visible {
  outline: 3px solid rgba(20, 82, 112, 0.22);
  outline-offset: 3px;
}

.portal-tool-welcome-visual {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 8px 0 8px 30px;
}

.portal-tool-welcome-request {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 15px;
  border-bottom: 1px solid #c4d2dc;
}

.portal-tool-welcome-request > span {
  padding: 5px 7px;
  border-radius: 5px;
  background: #173149;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.portal-tool-welcome-request > strong {
  color: #173149;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  font-weight: 650;
}

.portal-tool-welcome-request-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3d5b73;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.portal-tool-welcome-request-detail svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #39728f;
}

.portal-tool-welcome-request-detail.is-result {
  color: #20665c;
}

.portal-tool-welcome-request-detail.is-result svg {
  color: #2b7c70;
}

.portal-tool-template-section {
  margin-top: 52px;
}

.portal-tool-template-section > header {
  max-width: 720px;
  margin-bottom: 24px;
}

.portal-tool-template-section h3,
.portal-tool-template-section p {
  margin: 0;
}

.portal-tool-template-section h3 {
  margin-top: 7px;
  color: #102940;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.portal-tool-template-section > header p {
  margin-top: 8px;
  color: #49627a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.portal-tool-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.portal-tool-template-card {
  min-width: 0;
  min-height: 216px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
  border: 1px solid #d4dfe7;
  border-radius: 10px;
  background: #ffffff;
  color: #173049;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 150ms ease;
}

.portal-tool-template-card:hover {
  border-color: #9eb3c3;
  box-shadow: 0 12px 26px rgba(29, 57, 82, 0.1);
  transform: translateY(-2px);
}

.portal-tool-template-card:active {
  transform: translateY(0);
}

.portal-tool-template-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
}

.portal-tool-template-icon {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #edf3f6;
  color: #32627e;
}

.portal-tool-template-icon svg {
  width: 18px;
  height: 18px;
}

.portal-tool-template-service {
  color: #36536e;
  font-size: 12.5px;
  font-weight: 730;
}

.portal-tool-template-method {
  margin-left: auto;
  padding: 4px 6px;
  border: 1px solid #d2dde5;
  border-radius: 5px;
  color: #4f657a;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.portal-tool-template-card > strong {
  color: #102a43;
  font-size: 16px;
  line-height: 1.3;
}

.portal-tool-template-card > p {
  margin: 7px 0 20px;
  color: #49627a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.portal-tool-template-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #e4eaf0;
}

.portal-tool-template-card-foot small {
  max-width: 65%;
  color: #5b7084;
  font-size: 10.5px;
  font-weight: 550;
  line-height: 1.4;
}

.portal-tool-template-card-foot b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #174e70;
  font-size: 11.5px;
  white-space: nowrap;
}

.portal-tool-template-card-foot b svg {
  width: 14px;
  height: 14px;
  transition: transform 150ms ease;
}

.portal-tool-template-card:hover .portal-tool-template-card-foot b svg {
  transform: translateX(3px);
}

/* Keep instructional and secondary copy legible throughout the editor. */
.portal-tool-section-label p,
.portal-tool-section-toolbar p,
.portal-tool-permission-note,
.portal-tool-inline-empty,
.portal-tool-test-no-fields {
  color: #405a73;
  font-weight: 500;
}

.portal-tool-section-label p,
.portal-tool-section-toolbar p,
.portal-tool-permission-note,
.portal-tool-test-no-fields {
  font-size: 12.5px;
}

.portal-tool-field > span small,
.portal-tool-field > small,
.portal-tool-test-field small,
.portal-tool-returned-head,
.portal-tool-returned-row small,
.portal-tools-library-note {
  color: #526980;
}

.portal-tool-method-switch button,
.portal-tool-permission-switch button {
  color: #405a73;
}

.portal-tools-list-skeleton {
  display: grid;
  gap: 5px;
}

.portal-tool-list-skeleton-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 4px 39px 4px 6px;
}

.portal-tool-list-skeleton-method,
.portal-tool-list-skeleton-name {
  position: relative;
  overflow: hidden;
  display: block;
  background: #e8edf1;
}

.portal-tool-list-skeleton-method {
  width: 43px;
  height: 27px;
  border-radius: 6px;
}

.portal-tool-list-skeleton-name {
  width: min(82%, 180px);
  height: 12px;
  border-radius: 4px;
}

.portal-tool-list-skeleton-method::after,
.portal-tool-list-skeleton-name::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%);
  animation: portal-tools-skeleton 1.25s ease-in-out infinite;
}

@keyframes portal-tools-skeleton {
  to { transform: translateX(100%); }
}

@media (max-width: 1240px) {
  .portal-tools-layout {
    grid-template-columns: 343px minmax(0, 1fr);
  }

  .portal-tool-form-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-inline: 24px;
  }

  .portal-tool-variable {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .portal-tool-variable-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-tool-variable-controls {
    grid-column: 2;
    justify-content: flex-start;
  }

  .portal-tool-welcome-head {
    grid-template-columns: 1fr;
  }

  .portal-tool-welcome-visual {
    display: none;
  }
}

@media (max-width: 900px) {
  .portal-tools-layout {
    grid-template-columns: 293px minmax(0, 1fr);
  }

  .portal-tool-editor-head {
    align-items: flex-start;
    padding-inline: 22px;
  }

  .portal-tool-form-section {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-inline: 22px;
  }

  .portal-tool-section-label {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .portal-tool-config-row,
  .portal-tool-mapping-row,
  .portal-tool-request-grid,
  .portal-tool-test-grid {
    grid-template-columns: 1fr;
  }

  .portal-tool-config-row > .portal-tools-icon-button,
  .portal-tool-mapping-row > .portal-tools-icon-button {
    justify-self: end;
  }

  .portal-tool-welcome-shell {
    padding-inline: 28px;
  }

  .portal-tool-template-grid {
    grid-template-columns: 1fr;
  }

  .portal-tool-welcome-shortcuts,
  .portal-tool-welcome-section {
    width: 100%;
  }

  .portal-tool-welcome-examples ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .content:has(.portal-action-tools-page) {
    overflow-y: auto;
  }

  .portal-action-tools-page {
    height: auto;
    min-height: 100dvh;
  }

  .portal-tools-layout {
    display: block;
    padding: 12px;
  }

  .portal-tools-library {
    min-height: auto;
    margin-bottom: 12px;
  }

  .portal-tools-library-note {
    display: none;
  }

  .portal-tools-list {
    max-height: 220px;
  }

  .portal-tool-editor {
    overflow: visible;
  }

  .portal-tool-editor-head {
    position: static;
    flex-direction: column;
    gap: 14px;
  }

  .portal-tool-editor-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .portal-tool-save-status {
    margin-right: auto;
    text-align: left;
  }

  .portal-tool-variable-fields {
    grid-template-columns: 1fr;
  }

  .portal-tool-test-field > label:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .portal-tool-welcome-shell {
    padding: 28px 20px 50px;
  }

  .portal-tool-welcome-head {
    padding: 25px 22px;
  }

  .portal-tool-welcome-copy h2 {
    font-size: 29px;
  }

  .portal-tool-welcome-visual {
    display: none;
  }

  .portal-tool-welcome-head {
    gap: 16px;
  }

  .portal-tool-welcome-title {
    gap: 11px;
  }

  .portal-tool-welcome-mark {
    width: 38px;
    height: 38px;
  }

  .portal-tool-welcome-shortcuts {
    grid-template-columns: 1fr;
  }

  .portal-tool-welcome-shortcuts > button,
  .portal-tool-welcome-shortcuts > a {
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid #d9e2e9;
  }

  .portal-tool-welcome-shortcuts > :last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-tool-list-skeleton-method::after,
  .portal-tool-list-skeleton-name::after {
    animation: none;
  }
}

/* The workspace rail has one invariant state. Agent and dispatcher state is
   represented only in the main pane and agent top navigation. */
@media (min-width: 1101px) {
  html body.workspace-selected:not(.workspace-transition-to-launcher):not(.launcher-transition-to-workspace) .app-shell {
    grid-template-columns: 272px minmax(0, 1fr) !important;
  }

  html body.workspace-selected:not(.workspace-transition-to-launcher):not(.launcher-transition-to-workspace) .app-shell > .sidebar {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    flex-basis: 272px !important;
    padding: 20px 16px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

html body.workspace-selected .sidebar-brand {
  display: flex !important;
}

html body.workspace-selected .sidebar-nav [data-pre-agent-section],
html body.workspace-selected .sidebar-nav [data-pre-agent-item] {
  display: list-item !important;
}

html body.workspace-selected.workspace-owner .sidebar-nav [data-settings-section],
html body.workspace-selected.workspace-owner .sidebar-nav [data-settings-item] {
  display: list-item !important;
}

html body.workspace-selected:not(.workspace-owner) .sidebar-nav [data-settings-section],
html body.workspace-selected:not(.workspace-owner) .sidebar-nav [data-settings-item],
html body.workspace-selected .sidebar-nav [data-dispatcher-nav-section],
html body.workspace-selected .sidebar-nav [data-dispatcher-nav-item] {
  display: none !important;
}

html body.workspace-selected .sidebar-nav [data-agent-nav-root] > .sidebar-link {
  display: flex !important;
}

html body.workspace-selected .agent-nested-nav {
  display: none !important;
}


/* One invariant dashboard rail width across roster and selected-agent views. */
@media (min-width: 1101px) {
  html body.workspace-selected:not(.workspace-transition-to-launcher):not(.launcher-transition-to-workspace) .app-shell {
    grid-template-columns: 272px minmax(0, 1fr) !important;
  }

  html body.workspace-selected:not(.workspace-transition-to-launcher):not(.launcher-transition-to-workspace) .app-shell > .sidebar {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    flex-basis: 272px !important;
    box-sizing: border-box;
  }
}

/* Final sidebar footer geometry overrides legacy credit-footer rules. */
html body.workspace-selected .sidebar-credits,
html body.workspace-selected:not(.agent-selected) .sidebar-credits,
html body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-credits {
  display: none !important;
}

body.workspace-selected .sidebar-footer {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(203, 216, 235, 0.11);
}

@keyframes sidebar-workspace-enter {
  from {
    opacity: 0.7;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 1101px) {
  body.workspace-cold-entry.workspace-selected .app-shell > .sidebar {
    animation: sidebar-workspace-enter 280ms cubic-bezier(0.22, 0.72, 0.28, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-selected .app-shell > .sidebar {
    animation: none !important;
  }
}

body.workspace-transition-out .workspace {
  opacity: 0;
  pointer-events: none;
}

body.workspace-transition-out .app-shell > .sidebar {
  opacity: 0;
  transform: translateX(110%) !important;
  animation: none !important;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.8, 0.2), opacity 210ms ease !important;
}

body.workspace-transition-to-launcher .workspace {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1101px) {
  body.workspace-transition-to-launcher .app-shell {
    grid-template-columns: clamp(340px, 31vw, 560px) minmax(0, 1fr) !important;
    transition: grid-template-columns 320ms cubic-bezier(0.22, 0.72, 0.28, 1);
  }

  body.workspace-transition-to-launcher .app-shell > .sidebar {
    display: flex !important;
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: 20px 26px 30px !important;
    border: 0;
    border-radius: 0;
    background: #0b1628 !important;
    opacity: 1;
    transform: translateX(0) !important;
    animation: none !important;
    transition: width 320ms cubic-bezier(0.22, 0.72, 0.28, 1) !important;
  }

  body.workspace-transition-to-launcher .sidebar-brand {
    display: flex !important;
    margin: 0 !important;
    padding: 0 0 18px;
    border-bottom-color: rgba(203, 216, 235, 0.11);
  }

  body.workspace-transition-to-launcher .sidebar-brand span {
    color: #f4f7fb !important;
  }

  body.workspace-transition-to-launcher .sidebar-workspace-switch,
  body.workspace-transition-to-launcher .sidebar-nav,
  body.workspace-transition-to-launcher .sidebar-footer {
    display: none !important;
  }

  body.workspace-transition-to-launcher .sidebar-launcher-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    animation: sidebar-launcher-content-reveal 180ms ease 90ms both;
  }
}

@keyframes sidebar-launcher-content-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.launcher-transition-out .workspace-launcher-main,
body.launcher-transition-out .workspace-launcher-intro,
body.launcher-transition-out .workspace-launcher-rail-footer {
  opacity: 0;
  transition: opacity 150ms ease;
}

body.launcher-transition-to-workspace .workspace-launcher-rail {
  opacity: 0;
}

@keyframes sidebar-launcher-contract {
  from {
    width: clamp(340px, 31vw, 560px);
  }
  to {
    width: 272px;
  }
}

@keyframes sidebar-dashboard-content-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.shell-morph-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: 272px;
  overflow: hidden;
  background: #0b1628;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 80;
}

.shell-morph-rail::after,
body.workspace-selected .app-shell > .sidebar::after,
body.workspace-transition-to-launcher .app-shell > .sidebar::after,
body.nav-locked:has(.workspace-launcher-page) .app-shell > .sidebar::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -155px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(173, 197, 225, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(173, 197, 225, 0.025), 0 0 0 140px rgba(173, 197, 225, 0.018);
  pointer-events: none;
}

.shell-morph-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 78px;
  padding: 20px 26px;
  color: #ffffff;
  white-space: nowrap;
}

.shell-morph-brand img {
  width: auto;
  height: 36px;
  object-fit: contain;
}

.shell-morph-brand span {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.015em;
}

@keyframes shell-morph-expand {
  from { width: 272px; }
  to { width: clamp(340px, 31vw, 560px); }
}

@keyframes shell-morph-contract {
  from { width: clamp(340px, 31vw, 560px); }
  to { width: 272px; }
}

body.workspace-transition-to-launcher .shell-morph-rail {
  opacity: 1;
  animation: shell-morph-expand 330ms cubic-bezier(0.22, 0.72, 0.28, 1) both;
}

body.launcher-transition-out .shell-morph-rail {
  width: clamp(340px, 31vw, 560px);
  opacity: 1;
}

body.launcher-transition-to-workspace .shell-morph-rail {
  opacity: 1;
  animation: shell-morph-contract 340ms cubic-bezier(0.22, 0.72, 0.28, 1) both;
}

body.workspace-selected .app-shell > .sidebar {
  isolation: isolate;
}

body.workspace-selected .sidebar-brand,
body.workspace-selected .sidebar-workspace-switch,
body.workspace-selected .sidebar-nav,
body.workspace-selected .sidebar-footer {
  position: relative;
  z-index: 1;
}

@media (min-width: 1101px) {
  body.launcher-transition-to-workspace.workspace-selected .app-shell > .sidebar {
    animation: sidebar-launcher-contract 340ms cubic-bezier(0.22, 0.72, 0.28, 1) both !important;
    transform: translateX(0) !important;
  }

  body.launcher-transition-to-workspace .sidebar-workspace-switch,
  body.launcher-transition-to-workspace .sidebar-nav,
  body.launcher-transition-to-workspace .sidebar-footer {
    animation: sidebar-dashboard-content-enter 170ms ease 120ms both;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-transition-to-launcher .app-shell,
  body.workspace-transition-to-launcher .app-shell > .sidebar,
  body.launcher-transition-to-workspace.workspace-selected .app-shell > .sidebar,
  body.launcher-transition-to-workspace .sidebar-workspace-switch,
  body.launcher-transition-to-workspace .sidebar-nav,
  body.launcher-transition-to-workspace .sidebar-footer {
    animation: none !important;
    transition: none !important;
  }

  .shell-morph-rail {
    animation: none !important;
    transition: none !important;
  }
}

.workspace-utility-actions {
  display: none;
}

body.nav-locked {
  --app-header-height: 0px;
  --app-chrome-height: 0px;
}

body.nav-locked .app-header {
  position: fixed !important;
  inset: 0 0 auto auto;
  width: auto;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  z-index: 30;
}

body.nav-locked .app-header-inner {
  width: auto;
  min-height: 0;
  margin: 0;
}

body.nav-locked .app-header .header-left,
body.nav-locked .app-header .header-center,
body.nav-locked .app-header .user-menu {
  display: none !important;
}

body.nav-locked .workspace-utility-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.workspace-utility-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #536176;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.workspace-utility-actions button:hover {
  background: rgba(20, 43, 71, 0.055);
  color: #172b43;
}

.workspace-utility-actions button:focus-visible {
  outline: 2px solid rgba(20, 82, 112, 0.4);
  outline-offset: 2px;
}

body.nav-locked .main,
body.nav-locked .content,
body.nav-locked .workspace {
  min-height: 100dvh;
}

body.nav-locked .content {
  display: grid;
  flex: 1 1 auto;
  padding: 0 32px;
}

body.nav-locked .workspace-select-page {
  min-height: 100dvh;
  padding: 72px 0;
}

body.nav-locked:has(.workspace-launcher-page) .app-header {
  display: none !important;
}

body.nav-locked:has(.workspace-launcher-page) .content {
  padding: 0;
}

body.nav-locked .workspace-launcher-page {
  display: grid;
  grid-template-columns: clamp(340px, 31vw, 560px) minmax(0, 1fr);
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  gap: 0;
  align-content: stretch;
  justify-items: stretch;
  text-align: left;
}

.workspace-launcher-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 20px 26px 30px;
  overflow: hidden;
  background: #0b1628;
  color: #eef4fb;
}

.workspace-launcher-rail::after {
  content: "";
  position: absolute;
  inset: auto -14% -22% auto;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(173, 197, 225, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(173, 197, 225, 0.025), 0 0 0 140px rgba(173, 197, 225, 0.018);
  pointer-events: none;
}

.workspace-launcher-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  color: #ffffff;
}

.workspace-launcher-brand img {
  width: auto;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
}

.workspace-launcher-brand span {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.015em;
}

.workspace-launcher-intro {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  max-width: 390px;
  margin: auto 0;
  padding: 80px clamp(4px, 2vw, 40px);
}

.workspace-launcher-kicker {
  color: #8296af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workspace-launcher-intro h1 {
  max-width: 360px;
  margin: 0;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.workspace-launcher-intro p {
  max-width: 34ch;
  margin: 0;
  color: #9aacbf;
  font-size: 14px;
  line-height: 1.65;
}

.workspace-launcher-rail-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
}

.workspace-launcher-rail-footer a,
.workspace-launcher-rail-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #8294aa;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.workspace-launcher-rail-footer a:hover,
.workspace-launcher-rail-footer button:hover {
  color: #ffffff;
}

.workspace-launcher-main {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 100dvh;
  padding: 70px clamp(46px, 7vw, 120px);
  background: #f4f6f8;
}

.launcher-invitations-shell {
  width: min(100%, 820px);
  margin-inline: 0 auto;
}

.launcher-invitations-heading {
  margin-bottom: 28px;
}

.launcher-invitations-heading h2 {
  margin: 0;
  color: #0e2239;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.launcher-invitations-list {
  display: grid;
  gap: 10px;
}

.launcher-invitation-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 14px 15px;
  border: 1px solid #d9e1e8;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 38, 62, 0.04);
  animation: workspace-row-enter 260ms ease both;
  animation-delay: calc(var(--invitation-index, 0) * 45ms);
}

.launcher-invitation-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #e9eef3;
  color: #21435f;
}

.launcher-invitation-icon svg {
  width: 19px;
  height: 19px;
}

.launcher-invitation-copy {
  min-width: 0;
}

.launcher-invitation-copy strong,
.launcher-invitation-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.launcher-invitation-copy strong {
  color: #132238;
  font-size: 15px;
}

.launcher-invitation-copy small {
  margin-top: 4px;
  color: #748399;
  font-size: 12px;
}

.launcher-invitation-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.launcher-invitation-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.launcher-invitation-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.launcher-invitation-reject {
  border: 1px solid #cad5e2;
  background: #ffffff;
  color: #32465e;
}

.launcher-invitation-accept {
  border: 1px solid #043873;
  background: #043873;
  color: #ffffff;
}

.launcher-invitations-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: #718097;
}

.launcher-invitations-empty svg {
  width: 24px;
  height: 24px;
  color: #315979;
}

.launcher-invitations-empty strong {
  color: #607087;
  font-size: 14px;
  font-weight: 600;
}

.launcher-invitations-empty span {
  font-size: 13px;
  line-height: 1.55;
}

.launcher-invitations-empty.is-error svg,
.launcher-invitations-empty.is-error strong,
.launcher-invitations-empty.is-error span {
  color: #b42318;
}

.launcher-invitations-loading {
  display: grid;
  gap: 10px;
  width: min(100%, 340px);
  margin: 34px auto;
  color: #607087;
  font-size: 13px;
}

.launcher-invitations-loading-bar {
  position: relative;
  overflow: hidden;
  height: 2px;
  background: #dbe3eb;
}

.launcher-invitations-loading-bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: #1f69b3;
  content: "";
  animation: launcher-invitations-loading 900ms ease-in-out infinite alternate;
}

@keyframes launcher-invitations-loading {
  to { transform: translateX(138%); }
}

@media (max-width: 640px) {
  .launcher-invitation-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .launcher-invitation-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

.workspace-launcher-heading,
.workspace-launcher-list {
  width: min(100%, 780px);
  margin-inline: 0 auto;
}

.workspace-launcher-heading {
  display: grid;
  gap: 7px;
  margin-bottom: 28px;
}

.workspace-launcher-heading > span {
  color: #708096;
  font-size: 11px;
  font-weight: 650;
}

.workspace-launcher-heading h2 {
  margin: 0;
  color: #0e2239;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.workspace-launcher-heading p {
  margin: 0;
  color: #68778b;
  font-size: 13px;
}

.workspace-launcher-list {
  display: grid;
  gap: 10px;
}

.workspace-launcher-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 13px 14px 13px 16px;
  border: 1px solid #d9e1e8;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 38, 62, 0.04);
  cursor: pointer;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
  animation: workspace-row-enter 260ms ease both;
  animation-delay: calc(var(--workspace-row-index, 0) * 45ms);
}

.workspace-launcher-row:hover {
  border-color: #b9c7d4;
  box-shadow: 0 7px 22px rgba(17, 38, 62, 0.075);
  transform: translateX(3px);
}

.workspace-launcher-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #53667b;
}

.workspace-launcher-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.75;
}

.workspace-create-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #e9eef3;
  color: #21435f;
  font-size: 14px;
  font-weight: 750;
}

.workspace-launcher-row-copy,
.workspace-create-disclosure summary > span:nth-child(2),
.workspace-create-disclosure.is-disabled > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.workspace-launcher-row-copy strong,
.workspace-create-disclosure strong {
  color: #132941;
  font-size: 14px;
  font-weight: 700;
}

.workspace-launcher-row-copy small,
.workspace-create-disclosure small {
  color: #7b899b;
  font-size: 10px;
}

.workspace-launcher-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #53667b;
  font-size: 11px;
  font-weight: 650;
}

.workspace-launcher-open svg {
  width: 15px;
  height: 15px;
  transition: transform 170ms ease;
}

.workspace-launcher-row:hover .workspace-launcher-open svg {
  transform: translateX(2px);
}

.workspace-create-disclosure {
  width: 100%;
  border: 1px solid #d9e1e8;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.56);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* These two launcher rows are mutually exclusive. Their grid declarations
   otherwise override the browser's default `[hidden] { display: none; }`,
   causing the inactive limit notice to appear beside the create action. */
.workspace-create-disclosure[hidden] {
  display: none !important;
}

button.workspace-create-disclosure {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  min-height: 70px;
  padding: 12px 17px;
  transition: border-color 170ms ease, background-color 170ms ease;
}

button.workspace-create-disclosure:hover {
  border-color: #b9c7d4;
  background: #ffffff;
}

.workspace-create-disclosure summary,
.workspace-create-disclosure.is-disabled {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  min-height: 70px;
  padding: 12px 17px;
  list-style: none;
  cursor: pointer;
}

.workspace-create-disclosure summary::-webkit-details-marker {
  display: none;
}

.workspace-create-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px dashed #aebdca;
}

.workspace-create-icon svg,
.workspace-create-chevron {
  width: 16px;
  height: 16px;
}

.workspace-create-chevron {
  color: #75859a;
  transition: transform 180ms ease;
}

.workspace-create-disclosure[open] .workspace-create-chevron {
  transform: rotate(180deg);
}

.workspace-creation-view {
  display: grid;
  width: min(100%, 620px);
  margin-inline: 0 auto;
  animation: workspace-creation-enter 220ms ease both;
}

.workspace-creation-view[hidden],
[data-workspace-list-view][hidden] {
  display: none !important;
}

.workspace-creation-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 36px;
  margin-bottom: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #52657a;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.workspace-creation-back:hover {
  background: rgba(20, 43, 71, 0.055);
  color: #172b43;
}

.workspace-creation-back svg {
  width: 15px;
  height: 15px;
}

.workspace-creation-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
}

.workspace-creation-heading > span {
  color: #708096;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workspace-creation-heading h2 {
  margin: 0;
  color: #0e2239;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.workspace-creation-heading p {
  max-width: 52ch;
  margin: 0;
  color: #68778b;
  font-size: 13px;
  line-height: 1.6;
}

.workspace-creation-view .workspace-launcher-form {
  gap: 10px;
  padding: 0;
}

.workspace-creation-view .workspace-launcher-form input {
  min-height: 48px;
  padding: 11px 13px;
  font-size: 13px;
}

.workspace-creation-view .workspace-launcher-form button {
  width: fit-content;
  min-height: 42px;
  margin-top: 4px;
  padding-inline: 18px;
}

@keyframes workspace-creation-enter {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.workspace-launcher-form {
  display: grid;
  gap: 8px;
  padding: 0 17px 17px 75px;
}

.workspace-launcher-form label {
  color: #53657a;
  font-size: 11px;
  font-weight: 650;
}

.workspace-launcher-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.workspace-launcher-form input,
.workspace-launcher-form button {
  min-height: 40px;
  border-radius: 7px;
  font: inherit;
}

.workspace-launcher-form input {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #cbd6df;
  background: #ffffff;
  color: #182b41;
}

.workspace-launcher-form button {
  padding: 9px 15px;
  border: 1px solid #143b64;
  background: #143b64;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.workspace-launcher-form .form-helper {
  color: #8190a1;
  font-size: 9px;
}

.workspace-launcher-empty {
  display: grid;
  gap: 4px;
  padding: 22px;
  border: 1px dashed #c5d0da;
  border-radius: 10px;
  color: #738296;
  font-size: 11px;
}

.workspace-launcher-empty strong {
  color: #20354c;
  font-size: 13px;
}

@keyframes workspace-row-enter {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  body.nav-locked .workspace-launcher-page {
    grid-template-columns: 1fr;
  }

  .workspace-launcher-rail {
    min-height: auto;
    padding: 24px;
  }

  .workspace-launcher-intro {
    margin: 48px 0;
    padding: 0;
  }

  .workspace-launcher-intro h1 {
    font-size: 38px;
  }

  .workspace-launcher-main {
    min-height: auto;
    padding: 48px 24px 60px;
  }
}

/* Keep sidebar scrolling internal and visually scrollbar-free. */
html body.workspace-selected .app-shell > .sidebar,
html body.workspace-selected.agent-selected:not(.dispatcher-context) .app-shell > .sidebar {
  overflow: hidden !important;
}

html body.workspace-selected .sidebar-nav {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
}

html body.workspace-selected .sidebar-menu,
html body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html body.workspace-selected .sidebar-menu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (max-width: 560px) {
  .workspace-launcher-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .workspace-launcher-open {
    display: none;
  }

  .workspace-launcher-form {
    padding-left: 17px;
  }

  .workspace-launcher-form > div {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-launcher-row {
    animation: none;
    transition: none;
  }
}

/* One persistent rail for launcher and dashboard modes. */
.sidebar-launcher-content {
  display: none;
}

body.nav-locked:has(.workspace-launcher-page) .app-shell {
  grid-template-columns: clamp(340px, 31vw, 560px) minmax(0, 1fr) !important;
}

body.nav-locked:has(.workspace-launcher-page) .app-shell > .sidebar {
  display: flex !important;
  position: sticky;
  top: 0;
  width: clamp(340px, 31vw, 560px) !important;
  height: 100dvh;
  max-height: 100dvh;
  padding: 20px 26px 30px !important;
  border: 0;
  border-radius: 0;
  background: #0b1628 !important;
  box-shadow: none;
  transform: translateX(0) !important;
}

body.nav-locked:has(.workspace-launcher-page) .sidebar-brand {
  display: flex !important;
  margin: 0 !important;
  padding: 0 0 18px;
  border-bottom-color: rgba(203, 216, 235, 0.11);
}

body.nav-locked:has(.workspace-launcher-page) .sidebar-brand span {
  color: #f4f7fb !important;
}

body.nav-locked:has(.workspace-launcher-page) .sidebar-workspace-switch,
body.nav-locked:has(.workspace-launcher-page) .sidebar-nav,
body.nav-locked:has(.workspace-launcher-page) .sidebar-credits,
body.nav-locked:has(.workspace-launcher-page) .sidebar-footer {
  display: none !important;
}

body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.sidebar-launcher-intro {
  display: grid;
  gap: 30px;
  max-width: 390px;
  margin: auto 0;
  padding: 80px clamp(4px, 2vw, 40px);
}

.sidebar-launcher-intro h1 {
  margin: 0;
  color: #eef4fb;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.sidebar-launcher-menu {
  display: grid;
  gap: 5px;
  width: min(100%, 310px);
}

.sidebar-launcher-link {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 9px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aab7c8;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, transform 120ms ease;
}

.sidebar-launcher-link > svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.sidebar-launcher-link:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #f4f7fb;
}

.sidebar-launcher-link:active {
  transform: translateY(1px);
}

.sidebar-launcher-link:focus-visible {
  outline: 2px solid #79a9ff;
  outline-offset: 2px;
}

.sidebar-launcher-link.is-active {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

.sidebar-launcher-external {
  width: 15px !important;
  height: 15px !important;
  color: #71839a;
}

@keyframes sidebar-launcher-copy-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The launcher copy is animated by one explicit lifecycle class. Tying this
   animation to :has(.workspace-launcher-page) caused it to restart as the
   workspace view mounted and the transition state cleared. */
body.workspace-transition-to-launcher:not(.workspace-launcher-copy-enter) .sidebar-launcher-intro h1,
body.workspace-transition-to-launcher:not(.workspace-launcher-copy-enter) .sidebar-launcher-menu,
body.workspace-launcher-cold-entry:not(.workspace-launcher-copy-enter) .sidebar-launcher-intro h1,
body.workspace-launcher-cold-entry:not(.workspace-launcher-copy-enter) .sidebar-launcher-menu {
  opacity: 0;
  transform: translateY(10px);
}

body.workspace-launcher-copy-enter .sidebar-launcher-intro h1 {
  animation: sidebar-launcher-copy-enter 360ms cubic-bezier(0.22, 0.72, 0.28, 1) 90ms both;
}

body.workspace-launcher-copy-enter .sidebar-launcher-menu {
  animation: sidebar-launcher-copy-enter 360ms cubic-bezier(0.22, 0.72, 0.28, 1) 155ms both;
}

html body.workspace-transition-to-launcher.workspace-selected .sidebar-workspace-switch,
html body.workspace-transition-to-launcher.workspace-selected .sidebar-nav,
html body.workspace-transition-to-launcher.workspace-selected .sidebar-credits,
html body.workspace-transition-to-launcher.workspace-selected .sidebar-footer {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sidebar-launcher-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
}

.sidebar-launcher-footer a,
.sidebar-launcher-footer button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #8294aa;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.sidebar-launcher-footer a:hover,
.sidebar-launcher-footer button:hover {
  color: #ffffff;
}

body.nav-locked .workspace-launcher-page {
  display: block;
  width: 100%;
  min-height: 100dvh;
}

body.nav-locked .workspace-launcher-settings-page {
  padding-top: clamp(32px, 4vw, 52px);
}

body.nav-locked .workspace-launcher-main {
  min-height: 100dvh;
}

@keyframes persistent-launcher-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 1101px) {
  body.workspace-launcher-cold-entry.nav-locked:has(.workspace-launcher-page) .app-shell > .sidebar {
    animation: persistent-launcher-fade 220ms ease both;
  }

  body.launcher-transition-to-workspace.workspace-selected .app-shell > .sidebar {
    display: flex !important;
    animation: sidebar-launcher-contract 340ms cubic-bezier(0.22, 0.72, 0.28, 1) both !important;
  }
}

@media (max-width: 900px) {
  body.nav-locked:has(.workspace-launcher-page) .app-shell {
    grid-template-columns: 1fr !important;
  }

  body.nav-locked:has(.workspace-launcher-page) .app-shell > .sidebar {
    position: relative;
    width: 100% !important;
    height: auto;
    min-height: 340px;
    padding: 20px 24px 24px;
  }

  .sidebar-launcher-intro {
    margin: 44px 0;
    padding: 0;
  }

  body.nav-locked .workspace-launcher-main {
    min-height: auto;
    align-content: start;
    padding: 32px 24px 52px;
  }
}

@media (max-width: 640px) {
  body.nav-locked .app-header {
    padding: 12px;
  }

  body.nav-locked .content {
    padding: 0 16px;
  }

  .workspace-utility-actions button {
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-transition-out .workspace,
  body.workspace-transition-out .app-shell > .sidebar {
    transition: none !important;
  }
}

/* Sidebar-owned desktop utilities */
.sidebar-workspace-switch {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f4f7fb;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.sidebar-workspace-switch[hidden] {
  display: none !important;
}

.sidebar-workspace-switch:hover {
  background: rgba(255, 255, 255, 0.045);
}

.sidebar-workspace-switch:focus-visible {
  outline: 2px solid rgba(125, 183, 239, 0.7);
  outline-offset: 2px;
}

.sidebar-workspace-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sidebar-workspace-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: #b7c7d9;
}

.sidebar-workspace-icon svg {
  width: 15px;
  height: 15px;
}

.sidebar-workspace-copy small {
  color: #7f90a8;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-workspace-copy strong {
  overflow: hidden;
  color: #edf3fa;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-workspace-action {
  width: 15px;
  height: 15px;
  color: #71839b;
  transition: color 160ms ease;
}

.sidebar-workspace-switch:hover .sidebar-workspace-action {
  color: #cbd8e7;
}

body.workspace-selected .sidebar-section-title[data-sidebar-primary-section] {
  margin-top: 10px;
}

.sidebar-footer {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  border-top: 0;
}

.sidebar-footer-actions {
  display: block;
}

.sidebar-footer-actions:has(.sidebar-theme-toggle:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: center;
}

body.workspace-selected .sidebar-credits {
  display: none !important;
}

.sidebar-utility-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #aab8ca;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-utility-link:hover {
  background: rgba(255, 255, 255, 0.055);
  color: #f4f7fb;
}

.sidebar-utility-link > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.sidebar-utility-external {
  margin-left: auto;
  width: 13px !important;
  height: 13px !important;
  color: #697b93;
}

@media (min-width: 1101px) {
  body.workspace-selected:not(.agent-selected) {
    --app-header-height: 0px;
    --app-chrome-height: 0px;
  }

  body.workspace-selected:not(.agent-selected) .app-header {
    display: none !important;
  }

  body.workspace-selected.agent-selected .app-header-inner {
    display: none !important;
  }

  body.workspace-selected.agent-selected .app-header {
    min-height: var(--agent-top-nav-height);
    padding-top: 0;
  }

  body.workspace-selected.agent-selected .content {
    --app-chrome-height: var(--agent-top-nav-height);
  }
}

/* Dark workspace navigation */
body.workspace-selected .app-shell > .sidebar {
  --sidebar-ink: #f4f7fb;
  --sidebar-muted: #8796ad;
  --sidebar-line: rgba(203, 216, 235, 0.11);
  --sidebar-hover: rgba(255, 255, 255, 0.045);
  --sidebar-active: rgba(255, 255, 255, 0.075);
  background: #0b1628 !important;
  border-right-color: #1d2c42 !important;
  color: var(--sidebar-ink);
  transition: transform 220ms ease !important;
}

body.workspace-selected .sidebar-brand {
  min-height: 58px;
  gap: 11px;
  margin-bottom: 4px !important;
  padding: 0 10px 18px;
  border-bottom-color: var(--sidebar-line);
}

body.workspace-selected .sidebar-brand img {
  width: 36px;
  height: 36px;
}

body.workspace-selected .sidebar-brand span {
  color: var(--sidebar-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Keep the brand on exactly the same geometry while the persistent rail
   morphs between dashboard and launcher modes. */
html body.workspace-transition-to-launcher .sidebar-brand,
html body.nav-locked:has(.workspace-launcher-page) .sidebar-brand {
  min-height: 58px;
  gap: 11px;
  margin: 0 !important;
  padding: 0 0 18px;
}

html body.workspace-transition-to-launcher .sidebar-brand img,
html body.nav-locked:has(.workspace-launcher-page) .sidebar-brand img {
  width: 36px;
  height: 36px;
}

html body.workspace-transition-to-launcher .sidebar-brand span,
html body.nav-locked:has(.workspace-launcher-page) .sidebar-brand span {
  color: #f4f7fb !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.workspace-selected .sidebar-nav {
  gap: 7px;
}

body.workspace-selected .sidebar-section-title {
  margin: 22px 12px 7px;
  padding: 0;
  border: 0;
  color: #718199;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.2;
}

body.workspace-selected .sidebar-section-title::before {
  display: none;
}

body.workspace-selected .sidebar-link {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  color: #b8c4d5;
  font-size: 14px;
  font-weight: 560;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.workspace-selected .sidebar-link .menu-icon,
body.workspace-selected .sidebar-link .menu-external-icon {
  color: #8fa1b8;
  transition: color 180ms ease;
}

body.workspace-selected .sidebar-link:hover {
  background: var(--sidebar-hover);
  color: #ffffff;
}

body.workspace-selected .sidebar-link:hover .menu-icon,
body.workspace-selected .sidebar-link:hover .menu-external-icon {
  color: #dce8f7;
}

body.workspace-selected .sidebar-link:active {
  transform: translateY(1px);
}

body.workspace-selected .sidebar-link:focus-visible {
  outline: 2px solid rgba(90, 167, 255, 0.7);
  outline-offset: 2px;
}

body.workspace-selected .sidebar-link.is-active {
  background: var(--sidebar-active);
  color: #ffffff;
  box-shadow: none;
}

body.workspace-selected .sidebar-link.is-active::before {
  display: none;
}

body.workspace-selected .sidebar-link.is-active .menu-icon,
body.workspace-selected .sidebar-link.is-active .menu-external-icon {
  color: #d5e2f2;
}

body.workspace-selected .sidebar-link.is-active .menu-icon svg,
body.workspace-selected .sidebar-link.is-active .menu-external-icon svg {
  stroke: currentColor !important;
}

body.workspace-selected .sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(167, 190, 220, 0.22);
}

body.workspace-selected .sidebar-credits {
  border-top-color: var(--sidebar-line);
  color: var(--sidebar-muted);
}

.header-workspace-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--header-text);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.header-workspace-back:hover {
  background: var(--shell-bg-hover);
  color: var(--shell-accent);
}

.header-workspace-back:active {
  transform: translateY(1px);
}

.header-workspace-back:focus-visible {
  outline: 2px solid rgba(11, 74, 166, 0.45);
  outline-offset: 2px;
}

.header-workspace-back[hidden] {
  display: none;
}

.header-workspace-back svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke-width: 2px;
}

.header-workspace-back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workspace-selected:not(.dispatcher-context) .sidebar-nav [data-settings-section],
body.workspace-selected:not(.dispatcher-context) .sidebar-nav [data-settings-item] {
  display: list-item !important;
}

/* Workspace home preview */
.content:has(.home-dashboard-page) {
  --home-canvas: #f4f6f8;
  --home-surface: #ffffff;
  --home-surface-subtle: #fbfcfd;
  --home-surface-inset: #fcfdfe;
  --home-selector-hover: #f1f4f7;
  --home-selector-active: #e9eef3;
  --home-border: #d7e0e8;
  --home-border-control: #dce4eb;
  --home-divider: #e3e9ee;
  --home-divider-soft: #edf1f4;
  --home-text: #102033;
  --home-text-strong: #0d2138;
  --home-heading: #15243a;
  --home-text-body: #25364b;
  --home-muted: #718096;
  --home-muted-strong: #5d6b7e;
  --home-faint: #8a96a6;
  --home-accent: #145270;
  --home-accent-soft: #f1f6f8;
  --home-accent-secondary: #91a3b8;
  --home-positive: #16745a;
  --home-positive-bg: #edf7f3;
  --home-positive-track: #e4ebe9;
  --home-warning: #8a6870;
  --home-warning-bg: #f8f1f1;
  --home-map-empty: #dfe5e9;
  --home-map-stroke: #f7f9fa;
  --home-map-accent: #145270;
  --home-focus: rgba(20, 82, 112, 0.45);
  --home-shadow: rgba(20, 43, 71, 0.05);
  padding: 26px 30px 44px;
  background: var(--home-canvas);
  color-scheme: light;
}

html[data-dashboard-theme="dark"] .content:has(.home-dashboard-page) {
  --home-canvas: #111214;
  --home-surface: #191a1d;
  --home-surface-subtle: #1c1e21;
  --home-surface-inset: #141517;
  --home-selector-hover: #24262a;
  --home-selector-active: #2b2e33;
  --home-border: #303338;
  --home-border-control: #3a3e44;
  --home-divider: #303237;
  --home-divider-soft: #27292d;
  --home-text: #e7e8e9;
  --home-text-strong: #f2f2f0;
  --home-heading: #f0f0ee;
  --home-text-body: #d6d7d8;
  --home-muted: #96999e;
  --home-muted-strong: #aaadb1;
  --home-faint: #767a80;
  --home-accent: #6c94ba;
  --home-accent-soft: #20262c;
  --home-accent-secondary: #7b8087;
  --home-positive: #6bb79c;
  --home-positive-bg: #1c302a;
  --home-positive-track: #29332f;
  --home-warning: #d29aa2;
  --home-warning-bg: #342529;
  --home-map-empty: #303338;
  --home-map-stroke: #191a1d;
  --home-map-accent: #6c94ba;
  --home-focus: rgba(108, 148, 186, 0.72);
  --home-shadow: rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* The application shell paints its own grid background on both `.main` and
   `.content`. Cover every right-hand Home surface so that global shell rules
   cannot leave a light canvas visible between dark panels. */
html[data-dashboard-theme="dark"] body:has(.home-dashboard-page) .main,
html[data-dashboard-theme="dark"] body:has(.home-dashboard-page) .content,
html[data-dashboard-theme="dark"] body:has(.home-dashboard-page) .workspace,
html[data-dashboard-theme="dark"] body:has(.home-dashboard-page) .home-dashboard-page {
  background: #111214 !important;
}

.home-dashboard-page {
  width: min(100%, 1480px);
  margin: 0 auto;
  gap: 20px;
  color: var(--home-text);
}

.home-dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 3px 3px;
}

.home-dashboard-header h1 {
  margin: 0;
  color: var(--home-heading);
  font-size: 27px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.home-dashboard-header p,
.home-panel-header p {
  margin: 4px 0 0;
  color: var(--home-muted);
  font-size: 12px;
}

.home-dashboard-error {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--home-warning) 42%, var(--home-border));
  border-radius: 8px;
  background: var(--home-warning-bg);
  color: var(--home-warning);
  font-size: 12px;
  font-weight: 650;
}

.home-dashboard-error[hidden] {
  display: none;
}

.home-preview-label {
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 600;
}

.home-period-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--home-border-control);
  border-radius: 8px;
  background: var(--home-surface);
  box-shadow: 0 1px 2px var(--home-shadow);
}

.home-period-selector button {
  min-width: 38px;
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--home-muted);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.home-period-selector button:hover {
  background: var(--home-selector-hover);
  color: var(--home-text-body);
}

.home-period-selector button.is-active {
  background: var(--home-selector-active);
  color: var(--home-text-strong);
  box-shadow: inset 0 0 0 1px var(--home-border);
}

.home-period-selector button:focus-visible {
  outline: 2px solid var(--home-focus);
  outline-offset: 1px;
}


/* Conversation and call overview panels. */
.home-overview-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.home-overview-card {
  min-width: 0;
  padding: 26px 28px;
  border: 1px solid var(--home-border);
  border-radius: 12px;
  background: var(--home-surface);
  box-shadow: 0 1px 2px var(--home-shadow);
}
.home-overview-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--home-text-strong);
  font-size: 18px;
  font-weight: 700;
}
.home-overview-card h2 svg { width: 21px; height: 21px; color: var(--home-accent); stroke-width: 1.8; }
.home-overview-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.home-overview-total > strong { color: var(--home-text-strong); font-size: 42px; line-height: 1.1; letter-spacing: -.035em; font-weight: 720; font-variant-numeric: tabular-nums; }
.home-overview-total > span { font-size: 15px; color: var(--home-text-body); }
.home-overview-comparison { margin: 10px 0 24px; color: var(--home-muted-strong); font-size: 14px; line-height: 1.5; }
.home-overview-comparison strong { font-weight: 650; color: var(--home-text-body); }
.home-overview-share { height: 7px; display: flex; gap: 3px; overflow: hidden; border-radius: 4px; background: var(--home-selector-hover); margin-bottom: 22px; }
.home-overview-share span { min-width: 0; background: var(--home-accent); }
.home-overview-share span + span { background: var(--home-accent-secondary); }
.home-overview-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.home-overview-breakdown.is-calls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-overview-breakdown dt { display: flex; gap: 7px; align-items: center; color: var(--home-text-body); font-size: 14px; line-height: 1.5; }
.home-overview-breakdown dd { margin: 8px 0 0; color: var(--home-text-strong); font-size: 23px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.home-overview-breakdown dd small { margin-left: 10px; font-size: 14px; font-weight: 500; color: var(--home-muted-strong); }
.home-overview-dot { flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--home-accent); }
.home-overview-dot.is-secondary { background: var(--home-accent-secondary); }
@media (max-width: 1199px) {
  .home-overview-summary { grid-template-columns: 1fr; }
}
@media (max-width: 539px) {
  .home-overview-card { padding: 22px 20px; }
  .home-overview-breakdown.is-calls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .home-overview-breakdown dd small { display: block; margin: 5px 0 0; }
}

.is-positive {
  color: var(--home-positive) !important;
}

.home-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.72fr);
  gap: 18px;
  align-items: stretch;
}

.home-secondary-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.55fr);
  gap: 18px;
  align-items: stretch;
}

.home-geography-panel {
  display: flex;
  flex-direction: column;
}

.home-geography-header {
  align-items: center;
}

.home-map-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--home-muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.home-map-legend i {
  width: 92px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--home-map-accent) 18%, var(--home-map-empty)), var(--home-map-accent));
}

.home-map-wrap {
  position: relative;
  padding: 18px 26px 8px;
  background: var(--home-surface-inset);
}

.home-audience-map {
  width: 100%;
  height: auto;
  aspect-ratio: 2.08 / 1;
  overflow: hidden;
}

.home-audience-map .jvm-container {
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
}

.home-audience-map.is-panning .jvm-container,
.home-audience-map.is-panning .jvm-region {
  cursor: grabbing !important;
}

.home-map-zoom-control {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--home-border-control);
  border-radius: 7px;
  background: var(--home-surface);
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.1);
}

.home-audience-map .home-map-zoom-control .jvm-zoom-btn {
  position: static !important;
  inset: auto !important;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--home-text);
  box-shadow: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.home-audience-map .jvm-zoom-btn:hover {
  border-color: var(--home-muted);
  background: var(--home-surface-subtle);
}

.home-audience-map .jvm-zoom-btn:active {
  transform: translateY(1px);
}

.home-audience-map .jvm-zoom-btn:focus-visible {
  outline: 2px solid var(--home-map-accent);
  outline-offset: 2px;
}

.home-map-zoom-percentage {
  display: grid;
  min-width: 54px;
  height: 30px;
  padding: 0 9px;
  place-items: center;
  border-right: 1px solid var(--home-border-control);
  border-left: 1px solid var(--home-border-control);
  color: var(--home-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}

.home-audience-map .jvm-region {
  transition: fill 150ms ease, fill-opacity 150ms ease;
}

.home-map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  color: var(--home-muted);
  font-size: 12px;
}

body:has(.home-dashboard-page) .jvm-tooltip {
  z-index: 1000 !important;
  padding: 8px 10px !important;
  border: 1px solid #d7dce2 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2) !important;
  opacity: 1 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  pointer-events: none;
}

html[data-dashboard-theme="dark"] body:has(.home-dashboard-page) .jvm-tooltip {
  border-color: #3a3d42 !important;
  background: #17181a !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48) !important;
}

.home-volume-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.home-volume-panel {
  display: flex;
  height: auto;
  min-height: 0;
  flex-direction: column;
}

.home-volume-list {
  display: grid;
  min-height: 540px;
  flex: 0 0 auto;
  grid-auto-rows: max-content;
  align-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.home-volume-table-head,
.home-volume-row {
  display: grid;
  grid-template-columns: 32px minmax(110px, 1fr) 76px 92px 54px;
  align-items: center;
  column-gap: 10px;
}

.home-volume-table-head {
  min-height: 36px;
  padding: 0 20px;
  border-bottom: 1px solid var(--home-divider-soft);
  color: var(--home-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.home-volume-table-head span:first-child {
  grid-column: 1 / 3;
}

.home-volume-table-head span:not(:first-child) {
  text-align: right;
}

.home-volume-row {
  min-height: 54px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--home-divider-soft);
}

.home-volume-row:last-child {
  border-bottom: 0;
}

.home-volume-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.home-volume-symbol img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.home-volume-symbol.is-channel svg {
  width: 21px;
  height: 21px;
  color: var(--home-muted);
  stroke-width: 1.8;
}

.home-volume-symbol.is-country img {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.home-volume-symbol.is-country-fallback {
  color: var(--home-muted);
}

.home-volume-symbol.is-country-fallback svg {
  width: 20px;
  height: 20px;
}

.home-volume-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.home-volume-copy strong {
  overflow: hidden;
  color: var(--home-text-body);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-volume-number,
.home-volume-share {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.home-volume-number {
  color: var(--home-text-strong);
  font-size: 13px;
  font-weight: 700;
}

.home-volume-share {
  color: var(--home-muted);
  font-size: 12px;
  font-weight: 650;
}

.home-volume-empty {
  padding: 20px;
  color: var(--home-muted);
  font-size: 12px;
}

.home-volume-pagination {
  display: grid;
  min-height: 52px;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid var(--home-divider-soft);
  background: var(--home-surface-subtle);
}

.home-volume-pagination.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.home-volume-pagination button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--home-border);
  border-radius: 7px;
  background: var(--home-surface);
  color: var(--home-text-body);
  font: inherit;
  font-size: 11px;
  font-weight: 680;
  cursor: pointer;
}

.home-volume-pagination button:hover:not(:disabled) {
  border-color: var(--home-muted-strong);
  background: var(--home-surface-raised, var(--home-surface));
  color: var(--home-text-strong);
}

.home-volume-pagination button:focus-visible {
  outline: 2px solid var(--home-accent);
  outline-offset: 2px;
}

.home-volume-pagination button:disabled {
  color: var(--home-muted);
  cursor: default;
  opacity: 0.48;
}

.home-volume-pagination button svg {
  width: 14px;
  height: 14px;
}

.home-volume-page-status {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--home-text-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.home-volume-page-status strong {
  color: var(--home-text-strong);
  font-size: 11px;
}

.home-volume-page-status small {
  color: var(--home-muted);
  font-size: 10px;
}

.home-panel {
  min-width: 0;
  background: var(--home-surface);
  border: 1px solid var(--home-border);
  border-radius: 11px;
  box-shadow: 0 1px 2px var(--home-shadow), 0 8px 24px color-mix(in srgb, var(--home-shadow) 55%, transparent);
  overflow: hidden;
}

.home-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 22px;
  border-bottom: 1px solid var(--home-divider);
  background: var(--home-surface-subtle);
}

.home-panel-header h2 {
  margin: 0;
  color: var(--home-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-panel-header > span,
.home-panel-header > strong {
  color: var(--home-muted-strong);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.home-chart-legend {
  display: flex;
  gap: 14px;
  color: var(--home-muted);
  font-size: 11px;
}

.home-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.home-chart-legend i {
  width: 14px;
  height: 2px;
  background: var(--home-accent);
}

.home-chart-legend i.is-outgoing {
  background: var(--home-accent-secondary);
}

.home-chart-summary {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 21px 22px 3px;
}

.home-chart-summary strong {
  color: var(--home-text-strong);
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.home-chart-summary span {
  color: var(--home-muted);
  font-size: 13px;
  font-weight: 550;
}

.home-chart-summary small {
  color: var(--home-muted);
  font-size: 11px;
}

.home-chart-summary small {
  margin-left: auto;
}

.home-chart {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 250px;
  margin: 7px 12px 12px;
  padding: 17px 10px 10px 2px;
  border: 1px solid var(--home-divider-soft);
  border-radius: 8px;
  background: var(--home-surface-inset);
}

.home-chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 22px;
  color: var(--home-faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.home-chart-plot {
  position: relative;
  min-width: 0;
  height: 220px;
}

.home-chart-gridline {
  position: absolute;
  inset: auto 0;
  height: 1px;
  background: var(--home-divider-soft);
}

.home-chart-plot svg {
  position: absolute;
  inset: 0 0 22px;
  width: 100%;
  height: calc(100% - 22px);
  overflow: visible;
}

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

.home-chart-line.is-outgoing {
  stroke: var(--home-accent-secondary);
  stroke-width: 2;
}

.home-chart-days {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  color: var(--home-faint);
  font-size: 9px;
  text-align: center;
}

.home-credits-panel {
  display: flex;
  flex-direction: column;
}

.home-credit-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 24px 22px 13px;
}

.home-credit-number strong {
  color: var(--home-text-strong);
  font-size: 27px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.home-credit-number span {
  color: var(--home-muted);
  font-size: 13px;
  font-weight: 500;
}

.home-credit-track {
  height: 7px;
  margin: 0 22px 20px;
  border-radius: 2px;
  background: var(--home-positive-track);
  overflow: hidden;
}

.home-credit-track span {
  display: block;
  min-width: 2px;
  height: 100%;
  background: var(--home-positive);
}

.home-copilot-credits-panel .home-credit-track span {
  background: var(--home-accent);
}

.home-credit-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0 22px 18px;
}

.home-credit-details div:last-child {
  margin-top: auto;
}

.home-credit-details div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 11px 0;
  border-top: 1px solid var(--home-divider-soft);
}

.home-credit-details dt,
.home-credit-details dd {
  margin: 0;
  color: var(--home-muted);
  font-size: 13px;
}

.home-credit-details dd {
  color: var(--home-text-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home-credits-panel .home-panel-header > strong {
  color: var(--home-text-body);
  font-size: 13px;
  font-weight: 700;
}

.home-credit-projection {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: auto 20px 18px;
  padding: 12px;
  background: var(--home-positive-bg);
  color: var(--home-positive);
}

.home-credit-projection svg {
  width: 16px;
  height: 16px;
}

.home-credit-projection span {
  display: grid;
  gap: 2px;
}

.home-credit-projection strong,
.home-credit-projection small {
  font-size: 10px;
}

.home-credit-projection small {
  color: var(--home-muted);
}

.home-agent-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--home-divider-soft);
}

.home-agent-summary > div {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-agent-summary > div > span:last-child {
  display: grid;
  gap: 2px;
}

.home-agent-icon,
.home-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--home-border);
  border-radius: 7px;
  color: var(--home-accent);
  background: var(--home-accent-soft);
}

.home-agent-icon svg,
.home-channel-icon svg {
  width: 16px;
  height: 16px;
}

.home-agent-summary strong,
.home-agent-summary b {
  color: var(--home-text-body);
  font-size: 12px;
}

.home-agent-summary b {
  font-size: 17px;
  text-align: right;
}

.home-agent-summary small {
  color: var(--home-muted);
  font-size: 9px;
}

.home-agent-count-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--home-divider-soft);
}

.home-agents-panel {
  display: grid;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
}

.home-agent-count-row:last-child {
  border-bottom: 0;
}

.home-agent-count-row strong {
  color: var(--home-text-body);
  font-size: 14px;
  font-weight: 650;
}

.home-agent-count-row b {
  min-width: 28px;
  color: var(--home-text-strong);
  font-size: 17px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.home-response-stat {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  color: var(--home-muted);
  font-size: 11px;
}

.home-response-stat strong {
  color: var(--home-text-body);
  font-variant-numeric: tabular-nums;
}

.home-channels-panel ul,
.home-conversations-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-channel-row {
  display: grid;
  grid-template-columns: 36px minmax(180px, 1fr) minmax(90px, auto) minmax(94px, auto);
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--home-divider-soft);
}

.home-channel-row:last-child {
  border-bottom: 0;
}

.home-channel-copy,
.home-conversation-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-channel-copy strong,
.home-conversation-copy strong {
  color: var(--home-text-body);
  font-size: 13px;
}

.home-channel-copy small,
.home-conversation-copy small {
  overflow: hidden;
  color: var(--home-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-channel-state {
  justify-self: end;
  color: var(--home-warning);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--home-warning-bg);
}

.home-channel-state.is-healthy {
  color: var(--home-positive);
  background: var(--home-positive-bg);
}

.home-channel-metric {
  display: grid;
  gap: 2px;
  text-align: right;
}

.home-channel-metric small {
  color: var(--home-faint);
  font-size: 10px;
}

.home-channel-metric strong {
  color: var(--home-text-body);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.home-conversation-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(90px, auto) 28px;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--home-divider-soft);
}

.home-conversation-row:last-child {
  border-bottom: 0;
}

.home-conversation-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--home-selector-active);
  color: var(--home-accent);
  font-size: 10px;
  font-weight: 700;
}

.home-conversation-owner,
.home-conversation-row time {
  color: var(--home-muted);
  font-size: 9px;
}

.home-conversation-row time {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  .home-secondary-grid {
    grid-template-columns: minmax(250px, 0.75fr) minmax(440px, 1.25fr);
  }
}

@media (max-width: 820px) {
  .content:has(.home-dashboard-page) {
    padding: 20px;
  }



  .home-primary-grid,
  .home-secondary-grid,
  .home-volume-grid {
    grid-template-columns: 1fr;
  }

  .home-volume-panel {
    height: auto;
  }



  .home-conversations-panel {
    grid-column: auto;
  }

  .home-audience-map {
    height: 330px;
  }
}

@media (max-width: 560px) {
  .content:has(.home-dashboard-page) {
    padding: 16px;
  }

  .home-dashboard-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .home-period-selector {
    width: 100%;
  }

  .home-period-selector button {
    flex: 1 1 0;
    min-width: 0;
  }

  .home-chart-summary {
    flex-wrap: wrap;
  }

  .home-chart-summary small {
    width: 100%;
    margin-left: 0;
  }

  .home-chart-legend,
  .home-conversation-owner {
    display: none;
  }

  .home-conversation-row {
    grid-template-columns: 30px minmax(0, 1fr) 28px;
  }

  .home-channel-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .home-channel-metric {
    display: none;
  }

  .home-geography-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .home-map-wrap {
    padding: 12px 10px 4px;
  }

  .home-audience-map {
    height: 250px;
  }

  .home-volume-row {
    padding-inline: 16px;
  }

  .home-volume-table-head {
    padding-inline: 16px;
  }

  .home-volume-pagination {
    padding-inline: 10px;
  }
}

@media (max-width: 520px) {
  .home-volume-table-head,
  .home-volume-row {
    grid-template-columns: 24px minmax(82px, 1fr) 62px 76px 42px;
    column-gap: 7px;
  }

  .home-volume-table-head {
    font-size: 9px;
    letter-spacing: 0;
  }

  .home-volume-number {
    font-size: 12px;
  }

  .home-volume-share {
    font-size: 11px;
  }

  .home-volume-pagination button span {
    display: none;
  }

  .home-volume-pagination button {
    width: 34px;
    padding-inline: 0;
  }
}

.stripe-page {
  gap: 24px;
}

.stripe-page .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.stripe-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.stripe-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.stripe-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.stripe-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.stripe-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.zapier-page {
  gap: 24px;
}

.zapier-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.zapier-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.zapier-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.zapier-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.zapier-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.zapier-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.zapier-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.zapier-shell.is-creating {
  grid-template-columns: 1fr;
}

.zapier-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.zapier-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.zapier-list {
  display: grid;
  gap: 16px;
}

.zapier-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.zapier-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.zapier-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zapier-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.zapier-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.zapier-url {
  font-size: 12px;
  color: var(--color-muted);
  word-break: break-all;
}

.zapier-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
}

.zapier-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.zapier-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.zapier-form-header p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.zapier-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.zapier-form input,
.zapier-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.zapier-form textarea {
  resize: vertical;
}

.zapier-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zapier-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.02);
}

.zapier-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.zapier-group-header h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.zapier-group-header p {
  margin: 0;
  font-size: 12px;
  color: var(--color-ink-soft);
}

.zapier-items {
  display: grid;
  gap: 10px;
}

.zapier-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.zapier-item[data-zapier-body-item] {
  grid-template-columns: minmax(0, 1fr) 140px auto auto auto auto auto;
}

.zapier-item input,
.zapier-item select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-family: var(--font-body);
}

.zapier-type-locked {
  display: none;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: rgba(17, 24, 39, 0.04);
}

.zapier-type-locked.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.zapier-item.is-object-locked select {
  display: none;
}

.zapier-array,
.zapier-required {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

.zapier-array input,
.zapier-required input {
  width: 14px;
  height: 14px;
  margin: 0;
}

@media (max-width: 960px) {
  .zapier-shell {
    grid-template-columns: 1fr;
  }
}

.make-page {
  gap: 24px;
}

.make-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.make-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.make-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.make-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.make-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.make-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.make-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.make-shell.is-creating {
  grid-template-columns: 1fr;
}

.make-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.make-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.make-list {
  display: grid;
  gap: 16px;
}

.make-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.make-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.make-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.make-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.make-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.make-url {
  font-size: 12px;
  color: var(--color-muted);
  word-break: break-all;
}

.make-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
}

.make-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.make-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.make-form-header p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.make-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.make-form input,
.make-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.make-form textarea {
  resize: vertical;
}

.make-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.make-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.02);
}

.make-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.make-group-header h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.make-group-header p {
  margin: 0;
  font-size: 12px;
  color: var(--color-ink-soft);
}

.make-items {
  display: grid;
  gap: 10px;
}

.make-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.make-item[data-make-body-item] {
  grid-template-columns: minmax(0, 1fr) 140px auto auto auto auto auto;
}

.make-item input,
.make-item select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-family: var(--font-body);
}

.make-type-locked {
  display: none;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: rgba(17, 24, 39, 0.04);
}

.make-type-locked.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.make-item.is-object-locked select {
  display: none;
}

.make-array,
.make-required {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

.make-array input,
.make-required input {
  width: 14px;
  height: 14px;
  margin: 0;
}

@media (max-width: 960px) {
  .make-shell {
    grid-template-columns: 1fr;
  }
}

.slack-page {
  gap: 24px;
}

.slack-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.slack-usage {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--shadow-tight);
  min-width: 200px;
}

.slack-usage-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.slack-usage-value {
  margin-top: 4px;
  font-size: 13px;
  color: #111827;
}

.slack-usage-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 56, 115, 0.12);
  overflow: hidden;
}

.slack-usage-bar span {
  display: block;
  height: 100%;
  background: var(--color-navy);
  transition: width 0.2s ease;
}

.slack-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.slack-shell.is-creating {
  grid-template-columns: 1fr;
}

.slack-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.slack-toolbar h2 {
  margin: 0;
  font-size: 18px;
}

.slack-list {
  display: grid;
  gap: 16px;
}

.slack-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.slack-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.slack-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slack-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.slack-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.slack-url {
  font-size: 12px;
  color: var(--color-muted);
  word-break: break-all;
}

.slack-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
}

.slack-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.slack-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.slack-form-header p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.slack-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.slack-form input,
.slack-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.slack-form textarea {
  resize: vertical;
}


.slack-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}



@media (max-width: 960px) {
  .slack-shell {
    grid-template-columns: 1fr;
  }
}

.stripe-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 960px;
}

.stripe-form-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 20px;
  display: grid;
  gap: 12px;
}

.stripe-form-card h2 {
  margin: 0;
  font-size: 18px;
}

.stripe-form-card p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.stripe-status-pill {
  justify-self: start;
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.stripe-status-pill.is-live {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.stripe-status-meta {
  font-size: 12px;
  color: var(--color-muted);
}

.stripe-status-key {
  font-size: 13px;
  color: #111827;
  font-weight: 600;
}

.stripe-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stripe-status-inline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stripe-form {
  display: grid;
  gap: 10px;
}

.stripe-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.stripe-form input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.stripe-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stripe-label-row .info-chip {
  position: relative;
  right: auto;
  top: auto;
  width: 24px;
  height: 24px;
}

.stripe-label-row .info-tooltip {
  right: 0;
  top: 28px;
  width: 240px;
}

.stripe-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stripe-actions-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.stripe-actions-card {
  margin-top: 18px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 20px;
  display: grid;
  gap: 16px;
  max-width: 960px;
}

.stripe-actions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.stripe-actions-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.stripe-actions-header p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.stripe-actions-note {
  font-size: 12px;
  color: var(--color-muted);
}

.stripe-actions-list {
  display: grid;
  gap: 12px;
}

.stripe-actions-list.is-disabled {
  opacity: 0.6;
}

.stripe-actions-footer .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agent-workspace-content .agent-deployment-page {
  width: 100%;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 30px 34px 44px;
  color: #10233b;
  container-name: agent-api-page;
  container-type: inline-size;
}

.agent-api-docs-link {
  min-height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-color: rgba(13, 49, 93, 0.2);
  border-radius: 7px;
  background: #fff;
  color: #0d315d;
  font-size: 12.5px;
  font-weight: 700;
}

.agent-api-docs-link svg {
  width: 15px;
  height: 15px;
}

.api-deploy-shell {
  width: 100%;
}

.api-deploy-section {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 0.66fr);
  gap: 34px;
  padding: 28px 0 30px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.11);
}

.api-deploy-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.api-deploy-header > div {
  min-width: 0;
}

.api-section-label {
  display: block;
  margin: 0 0 8px;
  color: #6f8299;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.api-deploy-header h2 {
  margin: 0 0 7px;
  color: #10233b;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.api-deploy-header p {
  max-width: 300px;
  margin: 0;
  color: #687a90;
  font-size: 12.75px;
  line-height: 1.55;
}

.api-deploy-header .stripe-status-pill {
  flex: 0 0 auto;
  margin-top: 1px;
}

.api-key-control {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 13px;
}

.api-key-row {
  display: block;
}

.api-key-input-wrap {
  position: relative;
}

.api-key-row input {
  width: 100%;
  min-height: 46px;
  padding: 11px 112px 11px 14px;
  border: 1px solid rgba(4, 56, 115, 0.15);
  border-radius: 7px;
  background: rgba(244, 248, 252, 0.72);
  color: #10233b;
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  font-size: 13px;
  outline: none;
}

.api-key-row input:focus {
  border-color: rgba(42, 106, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(42, 106, 255, 0.08);
}

.api-key-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.api-key-actions .button {
  min-height: 37px;
  border-radius: 7px;
  box-shadow: none;
  font-size: 12.25px;
}

.api-key-icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 6px;
  background: #fff;
  color: var(--color-navy);
  cursor: pointer;
}

.api-key-icon-btn:hover {
  border-color: rgba(4, 56, 115, 0.3);
  background: #f6f9fc;
}

.api-key-icon-btn i {
  width: 16px;
  height: 16px;
}

.api-key-inline-copy {
  position: absolute;
  right: 47px;
  top: 50%;
  min-height: 30px;
  padding: 5px 10px;
  transform: translateY(-50%);
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 6px;
  background: #fff;
  color: var(--color-navy);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.api-generated-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.api-generated-row input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
}

.api-revoke-modal-card .modal-header {
  justify-content: center;
  text-align: center;
}

.modal-card.api-revoke-modal-card {
  width: fit-content;
  max-width: calc(100vw - 48px);
  justify-items: center;
  padding: 24px 28px;
}

.api-revoke-modal-card .team-actions {
  justify-content: center;
}

.api-deploy-instructions {
  grid-template-areas:
    "heading endpoint"
    "heading examples";
}

.api-deploy-instructions > .api-deploy-header {
  grid-area: heading;
}

.api-endpoint-row {
  grid-area: endpoint;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(4, 56, 115, 0.13);
  border-radius: 7px;
  background: rgba(244, 248, 252, 0.72);
}

.api-method {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 4px;
  background: #0d315d;
  color: #fff;
  font-size: 9.5px;
  font-weight: 780;
  letter-spacing: 0.055em;
}

.api-endpoint-row code {
  min-width: 0;
  overflow: hidden;
  color: #10233b;
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-request-grid {
  grid-area: examples;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding-top: 9px;
}

.api-request-step {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.api-request-step-heading {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.api-request-step-heading > span {
  color: #2a6aff;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.5;
}

.api-request-step-heading h3 {
  margin: 0 0 3px;
  color: #10233b;
  font-size: 12.75px;
  font-weight: 700;
  line-height: 1.35;
}

.api-request-step-heading p {
  margin: 0;
  color: #75869a;
  font-size: 11.5px;
  line-height: 1.45;
}

.api-deploy-instructions pre {
  min-height: 88px;
  margin: 0;
  padding: 13px 14px;
  overflow-x: auto;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 7px;
  background: #f5f8fc;
  box-shadow: none;
}

.api-request-step:last-child pre {
  min-height: 142px;
}

.api-deploy-instructions pre code {
  color: #17324d;
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre;
}

@container agent-api-page (max-width: 760px) {
  .api-deploy-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .api-deploy-instructions {
    grid-template-areas:
      "heading"
      "endpoint"
      "examples";
  }

  .api-request-grid {
    gap: 14px;
  }
}

@container agent-api-page (max-width: 520px) {
  .agent-api-docs-link {
    width: 100%;
  }

  .api-request-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .api-key-actions .button {
    flex: 1 1 auto;
  }
}

.stripe-divider {
  height: 1px;
  background: rgba(4, 56, 115, 0.12);
  margin: 4px 0 6px;
}

.stripe-action-otp {
  border: 1px solid rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.08);
}

.stripe-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.03);
}

.stripe-action-item strong {
  display: block;
  font-size: 14px;
  color: #111827;
}

.stripe-action-item span {
  display: block;
  font-size: 12px;
  color: var(--color-ink-soft);
  margin-top: 4px;
}

.stripe-action-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stripe-action-tag {
  margin-top: 0;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  padding: 2px 8px;
  border-radius: 999px;
}

.stripe-action-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

@media (max-width: 960px) {
  .stripe-shell {
    grid-template-columns: 1fr;
  }
  .stripe-form-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.playground-page {
  padding: 0;
}

.web-embed-page {
  gap: 0;
  padding: 0;
  container-name: agent-deployment-split;
  container-type: inline-size;
}

.deployment-pane-tabs {
  display: none;
}

.web-embed-shell {
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 80px);
  min-height: calc(100vh - 80px);
  overflow: hidden;
}

.web-embed-menu {
  background: #fff;
  border-right: 1px solid rgba(4, 56, 115, 0.12);
  padding: 20px;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
}

.web-embed-menu h2 {
  margin: 0;
  font-size: 16px;
}

.web-embed-section {
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.web-embed-section h3 {
  margin: 0;
  font-size: 13px;
  color: #1f2937;
}

.web-embed-heading-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.web-embed-heading-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.web-embed-label {
  font-size: 12px;
  color: var(--color-muted);
}

.web-embed-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
}

.web-embed-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.web-embed-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.web-embed-color-row input[type="color"] {
  width: 44px;
  height: 34px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.web-embed-color-row input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.web-embed-text-input {
  width: 100%;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.web-embed-code {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.5;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(15, 23, 42, 0.03);
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.web-embed-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.web-embed-page .button.is-copied {
  border-color: rgba(22, 163, 74, 0.35);
  color: #166534;
  background: rgba(22, 163, 74, 0.08);
  animation: webEmbedCopiedPulse 220ms ease;
}

.web-embed-page .button-copy-check {
  display: inline-block;
  font-weight: 700;
  transform-origin: center;
  animation: webEmbedCheckPop 220ms ease;
}

.web-embed-snippet-help {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.web-embed-snippet-help p {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
}

.web-embed-snippet-help code {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 11px;
}

.web-embed-help-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.web-embed-help-list li {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.45;
  display: grid;
  gap: 2px;
}

.web-embed-help-list li strong {
  font-weight: 700;
}

.web-embed-help-list li span {
  color: var(--color-muted);
}

.web-embed-wordpress-help {
  font-size: 14px !important;
  line-height: 1.5;
}

.web-embed-wordpress-link {
  color: #3b6ea8;
  font-weight: 600;
  text-decoration: underline;
}

.web-embed-wordpress-link:hover {
  color: #325f93;
}

@keyframes webEmbedCopiedPulse {
  0% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes webEmbedCheckPop {
  0% {
    transform: scale(0.4) rotate(-14deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.web-embed-board {
  position: relative;
  min-height: 0;
  padding: 36px;
  background:
    radial-gradient(circle at top right, rgba(4, 56, 115, 0.18), transparent 55%),
    radial-gradient(circle at 30% 20%, rgba(11, 74, 166, 0.12), transparent 45%),
    radial-gradient(circle, rgba(4, 56, 115, 0.16) 1.2px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
  display: grid;
  place-items: center;
}

.web-embed-preview-frame {
  position: relative;
  width: min(410px, 100%);
  height: calc(100vh - 170px);
  min-height: 620px;
  max-height: 760px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(4, 56, 115, 0.16);
  box-shadow: var(--shadow-tight);
  background: #fff;
}

.web-embed-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.web-embed-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 18px;
}

.web-embed-overlay-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  box-shadow: var(--shadow-tight);
  padding: 18px;
  display: grid;
  gap: 10px;
  text-align: center;
  width: min(320px, 100%);
}

.web-embed-overlay-card h3 {
  margin: 0;
  font-size: 18px;
}

.web-embed-overlay-card p {
  margin: 0;
  color: var(--color-muted);
}

.chat-page-deploy-textarea {
  width: 100%;
  resize: vertical;
  min-height: 100px;
}

.chat-page-deploy-theme-group {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.chat-page-deploy-theme-group + .chat-page-deploy-theme-group {
  margin-top: 18px;
}

.chat-page-deploy-page .chat-page-deploy-section {
  border: 0;
  border-radius: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
}

.web-embed-page .web-embed-deploy-section {
  border: 0;
  border-radius: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
}

.web-embed-deploy-section-bottom {
  margin-top: auto;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.web-embed-deploy-danger {
  border-top: 1px solid rgba(4, 56, 115, 0.12);
  padding-top: 10px;
}

.web-embed-deploy-danger summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.web-embed-deploy-danger summary::-webkit-details-marker {
  display: none;
}

.web-embed-deploy-danger summary i {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

.web-embed-deploy-danger[open] summary i {
  transform: rotate(180deg);
}

.web-embed-deploy-danger-body {
  padding-top: 12px;
}

.chat-page-deploy-section-grouped {
  padding-bottom: 16px;
}

.chat-page-deploy-section-bottom {
  margin-top: auto;
  border-bottom: 0;
  padding-bottom: 0;
}

.chat-page-deploy-danger {
  border-top: 1px solid rgba(4, 56, 115, 0.12);
  padding-top: 10px;
}

.chat-page-deploy-danger summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-page-deploy-danger summary::-webkit-details-marker {
  display: none;
}

.chat-page-deploy-danger summary i {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

.chat-page-deploy-danger[open] summary i {
  transform: rotate(180deg);
}

.chat-page-deploy-danger-body {
  padding-top: 12px;
}

.chat-page-deploy-theme-head {
  display: grid;
  gap: 4px;
}

.chat-page-deploy-theme-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
}

.chat-page-deploy-theme-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
}

.chat-page-deploy-select {
  width: 100%;
}

.chat-page-custom-domain-panel {
  margin-top: 4px;
  display: grid;
  gap: 10px;
}

.chat-page-custom-domain-panel.is-locked .chat-page-custom-domain-body {
  opacity: 0.5;
  pointer-events: none;
}

.chat-page-custom-domain-required {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.chat-page-custom-domain-body {
  display: grid;
  gap: 10px;
}

.chat-page-custom-domain-dns {
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 10px;
  background: rgba(4, 56, 115, 0.03);
  padding: 10px;
  display: grid;
  gap: 6px;
}

.chat-page-custom-domain-dns h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
}

.chat-page-custom-domain-empty {
  font-size: 12px;
  color: var(--color-muted);
}

.chat-page-custom-domain-dns-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--color-muted);
}

.chat-page-custom-domain-dns-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--color-ink);
}

.chat-page-deploy-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px dashed rgba(4, 56, 115, 0.18);
  border-radius: 12px;
  background: rgba(4, 56, 115, 0.02);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.chat-page-deploy-upload:hover,
.chat-page-deploy-upload:focus-visible,
.chat-page-deploy-upload.is-dragover {
  border-color: rgba(4, 56, 115, 0.34);
  background: rgba(4, 56, 115, 0.05);
}

.chat-page-deploy-upload.is-uploading {
  opacity: 0.72;
  pointer-events: none;
}

.chat-page-deploy-upload-preview {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.chat-page-deploy-upload-preview[hidden],
.chat-page-deploy-upload-placeholder[hidden] {
  display: none !important;
}

.chat-page-deploy-upload-delete[hidden] {
  display: none !important;
}

.chat-page-deploy-upload-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.04);
  color: rgba(4, 56, 115, 0.45);
  display: grid;
  place-items: center;
}

.chat-page-deploy-upload-placeholder i,
.chat-page-deploy-upload-placeholder svg {
  width: 18px;
  height: 18px;
}

.chat-page-deploy-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chat-page-deploy-upload-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chat-page-deploy-upload-copy strong {
  font-size: 13px;
  color: var(--color-ink);
}

.chat-page-deploy-upload-copy span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-muted);
}

.chat-page-deploy-upload-delete {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(180, 35, 24, 0.14);
  background: rgba(180, 35, 24, 0.04);
  color: #b42318;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.chat-page-deploy-upload-delete:hover {
  background: rgba(180, 35, 24, 0.08);
  border-color: rgba(180, 35, 24, 0.22);
}

.chat-page-deploy-upload-delete i,
.chat-page-deploy-upload-delete svg {
  width: 15px;
  height: 15px;
}

.chat-page-password-fields.hidden {
  display: none !important;
}

.chat-page-deploy-switch {
  position: relative;
  width: 40px;
  height: 24px;
  display: inline-flex;
  flex: 0 0 auto;
}

.chat-page-deploy-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.chat-page-deploy-switch-slider {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.24);
  border: 1px solid rgba(100, 116, 139, 0.2);
  position: relative;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.chat-page-deploy-switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  transition: transform 0.16s ease;
}

.chat-page-deploy-switch input:checked + .chat-page-deploy-switch-slider {
  background: #0f172a;
  border-color: #0f172a;
}

.chat-page-deploy-switch input:checked + .chat-page-deploy-switch-slider::after {
  transform: translateX(16px);
}

.chat-page-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.chat-page-password-input-shell {
  position: relative;
}

.chat-page-password-input-shell .chat-page-deploy-text-input {
  padding-right: 44px;
}

.chat-page-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.chat-page-password-toggle i,
.chat-page-password-toggle svg {
  width: 16px;
  height: 16px;
}

.chat-page-password-save-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  background: rgba(4, 56, 115, 0.05);
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.chat-page-password-save-icon:hover {
  background: rgba(4, 56, 115, 0.09);
  border-color: rgba(4, 56, 115, 0.22);
}

.chat-page-password-save-icon i,
.chat-page-password-save-icon svg {
  width: 15px;
  height: 15px;
}

.chat-page-password-save-icon.is-loading {
  cursor: wait;
  opacity: 0.82;
}

.chat-page-password-save-icon.is-loading i,
.chat-page-password-save-icon.is-loading svg {
  animation: chatPagePasswordSpin 0.8s linear infinite;
}

@keyframes chatPagePasswordSpin {
  to {
    transform: rotate(360deg);
  }
}

.chat-page-deploy-board {
  padding: 0;
  background: transparent;
  display: block;
  min-height: 0;
  height: 100%;
}

.chat-page-deploy-preview-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.chat-page-deploy-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: block;
}

.chat-page-deploy-link-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.web-embed-link-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-page-deploy-link-actions .button {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  line-height: 1;
  box-shadow: none;
}

.web-embed-link-actions .button {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  line-height: 1;
  box-shadow: none;
}

.chat-page-deploy-link-actions .button.button-ghost {
  border-color: rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.04);
  color: #0f172a;
}

.web-embed-link-actions .button.button-ghost {
  border-color: rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.04);
  color: #0f172a;
}

.chat-page-deploy-link-actions .button.button-ghost:hover {
  border-color: rgba(4, 56, 115, 0.18);
  background: rgba(4, 56, 115, 0.08);
}

.web-embed-link-actions .button.button-ghost:hover {
  border-color: rgba(4, 56, 115, 0.18);
  background: rgba(4, 56, 115, 0.08);
}

.chat-page-deploy-link-actions .button i,
.chat-page-deploy-link-actions .button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.web-embed-link-actions .button i,
.web-embed-link-actions .button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.chat-page-deploy-link-actions .button span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.web-embed-link-actions .button span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.chat-page-deploy-page .button.is-copied {
  border-color: rgba(15, 118, 110, 0.22);
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.chat-page-deploy-page .button-copy-check {
  font-size: 12px;
  font-weight: 700;
}

.chat-page-deploy-overlay-card h3,
.chat-page-deploy-overlay-card p {
  margin: 0;
}

.chat-page-deploy-overlay-card p {
  color: var(--color-muted);
}

.chat-page-deploy-overlay {
  border-radius: 0;
}

.playground-shell {
  display: grid;
  grid-template-columns: minmax(380px, 440px) 1fr;
  min-height: calc(100vh - 80px);
  border-radius: 0;
  overflow: visible;
}

.playground-menu {
  background: #fff;
  border-right: 1px solid rgba(4, 56, 115, 0.12);
  padding: 24px;
  display: grid;
  align-content: start;
  gap: 16px;
  height: 100%;
  overflow-y: auto;
}

.playground-menu h2 {
  margin: 0;
  font-size: 20px;
}

.playground-menu > p {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.playground-identity-form {
  gap: 10px;
}

.playground-identity-form .role-field textarea {
  min-height: 220px;
}

.identity-form .role-field textarea {
  min-height: 220px;
}

[data-playground-setup-overlay] {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 36px;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(2px);
}

[data-playground-setup-overlay][hidden] {
  display: none !important;
}

.playground-setup-modal {
  width: 100%;
  display: flex;
  justify-content: center;
}

.playground-setup-card {
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 16px;
  box-shadow: var(--shadow-tight);
  padding: 24px;
  display: grid;
  gap: 12px;
}

.playground-setup-card h3,
.playground-setup-card p {
  margin: 0;
}

.playground-setup-card p {
  color: var(--color-muted);
}

.playground-setup-form .identity-actions {
  justify-content: flex-end;
}

.playground-board {
  position: relative;
  padding: 40px;
  background:
    radial-gradient(circle at top right, rgba(4, 56, 115, 0.18), transparent 55%),
    radial-gradient(circle at 30% 20%, rgba(11, 74, 166, 0.12), transparent 45%),
    radial-gradient(circle, rgba(4, 56, 115, 0.16) 1.2px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.chat-widget {
  position: relative;
  width: min(400px, 100%);
  height: calc(100% - 80px);
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  box-shadow: var(--shadow-tight);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #111827;
  color: #fff;
  min-height: 56px;
}

.chat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat-title img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.chat-header h3 {
  margin: 0;
  font-size: 14px;
}

.chat-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  overflow-y: auto;
}

.chat-bubble {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 70%;
  width: fit-content;
}

.chat-bubble.bot {
  background: rgba(4, 56, 115, 0.08);
  color: #111827;
  align-self: flex-start;
}

.chat-bubble-action {
  display: grid;
  gap: 10px;
  max-width: 75%;
}

.chat-bubble-action .chat-action-button {
  align-self: flex-start;
}

.chat-bubble.user {
  background: #111827;
  color: #fff;
  align-self: flex-end;
}

.chat-footer {
  padding: 12px 14px 14px;
  display: grid;
  gap: 8px;
}

.chat-powered {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(31, 41, 55, 0.3);
  justify-self: center;
}

.chat-powered img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.3;
}

.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 14px;
  padding: 6px 8px 6px 14px;
}

.chat-input input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 12px;
  outline: none;
}

.chat-mic,
.chat-send {
  border: none;
  background: transparent;
  color: rgba(17, 24, 39, 0.35);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.chat-mic svg,
.chat-send svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.chat-mic:enabled,
.chat-send:enabled {
  color: #111827;
}

.chat-mic:disabled,
.chat-send:disabled {
  color: rgba(17, 24, 39, 0.35);
  cursor: not-allowed;
}

.chat-bubble {
  white-space: pre-wrap;
}

.chat-bubble-enter {
  opacity: 0;
  transform: translateY(-6px);
  animation: chatBubbleEnter 220ms ease forwards;
}

@keyframes chatBubbleEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubble.bot.is-pending {
  opacity: 0.7;
  white-space: normal;
  padding-top: 9px;
  padding-bottom: 9px;
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 14px;
}

.chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
  animation: chatTypingBounce 1s infinite ease-in-out;
}

.chat-typing-dot:nth-child(2) {
  animation-delay: 0.12s;
}

.chat-typing-dot:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes chatTypingBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-4px);
    opacity: 0.9;
  }
}

.chat-word {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
}

.chat-word.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.chat-menu-button {
  border: none;
  background: transparent;
  color: #fff;
  padding: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}

.chat-menu-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 960px) {
  .web-embed-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .chat-page-deploy-preview-frame,
  .chat-page-deploy-preview-frame iframe {
    min-height: 640px;
    height: 640px;
  }

  .web-embed-preview-frame {
    width: 100%;
    max-height: 720px;
    min-height: 560px;
  }

  .playground-shell {
    grid-template-columns: 1fr;
  }

  .chat-widget {
    position: static;
    width: 100%;
  }
}

.dynamic-sources-page {
  gap: 0;
  width: 100%;
  min-height: calc(100vh - 80px);
}

.dynamic-sources-shell {
  padding: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  gap: 0;
  min-height: calc(100vh - 80px);
  grid-template-rows: auto 1fr;
}

.dynamic-sources-topbar {
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(11, 74, 166, 0.09), rgba(247, 249, 252, 0) 42%),
    linear-gradient(180deg, #f8fbff, #f2f6fc);
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 0 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: stretch;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 6;
}


.dynamic-topbar-middle {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  flex: 0 0 auto;
}

.dynamic-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dynamic-topbar-controls {
  display: inline-flex;
  align-items: stretch;
  align-self: auto;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  gap: 0;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  overflow: hidden;
}

.dynamic-control-tile {
  min-height: 100%;
  padding: 0 14px;
  display: grid;
  align-content: center;
  gap: 4px;
  background: transparent;
  border-radius: 0;
}

.dynamic-control-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
}

.dynamic-control-value {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.dynamic-name-tile {
  min-width: 260px;
  cursor: text;
}

.dynamic-name-tile:hover {
  background: rgba(11, 74, 166, 0.05);
}

.dynamic-name-inline-input {
  width: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  font-family: var(--font-body);
}

.dynamic-name-inline-input.hidden {
  display: none;
}

.dynamic-enabled-tile {
  min-width: 170px;
}

.dynamic-control-divider {
  width: 1px;
  background: rgba(4, 56, 115, 0.14);
}

.dynamic-enabled-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 22px;
}

.dynamic-topbar-main {
  display: grid;
  gap: 10px;
}

.dynamic-topbar-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #274472;
  font-weight: 700;
}

.dynamic-topbar-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dynamic-stat-chip {
  border: 1px solid rgba(4, 56, 115, 0.16);
  background: rgba(255, 255, 255, 0.74);
  border-radius: 6px;
  min-height: 30px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1f2937;
}

.dynamic-stat-chip svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.1;
  color: #4b6282;
}

.dynamic-stat-chip strong {
  font-size: 13px;
  font-weight: 800;
  color: #0b4aa6;
}

.dynamic-stat-chip em {
  font-style: normal;
  font-size: 12px;
  color: #475569;
}

.dynamic-settings {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dynamic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #111827;
}

.dynamic-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dynamic-switch-slider {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #c7d1e0;
  position: relative;
  transition: background 0.2s ease;
}

.dynamic-switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.dynamic-switch-input:checked + .dynamic-switch-slider {
  background: #0b4aa6;
}

.dynamic-switch-input:checked + .dynamic-switch-slider::after {
  transform: translateX(18px);
}

.dynamic-switch-input:focus-visible + .dynamic-switch-slider {
  outline: 2px solid rgba(11, 74, 166, 0.35);
  outline-offset: 2px;
}

.dynamic-topbar-controls {
  display: inline-flex;
  align-items: stretch;
  align-self: auto;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  gap: 0;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
  overflow: hidden;
}

.dynamic-topbar-middle {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  flex: 0 0 auto;
}

.dynamic-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dynamic-csv-button {
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  white-space: nowrap;
}

.dynamic-csv-button svg {
  width: 14px;
  height: 14px;
}

.dynamic-csv-button span {
  display: none;
}

@media (min-width: 1280px) {
  .dynamic-csv-button span {
    display: inline;
  }
}

.dynamic-search-field,
.dynamic-filter-field {
  display: grid;
  gap: 4px;
}

.dynamic-search-field > i {
  display: none;
}

.dynamic-search-field > span,
.dynamic-filter-field > span {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
}

.dynamic-search-field input,
.dynamic-filter-field input,
.dynamic-filter-field select {
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(4, 56, 115, 0.16);
  background: #fff;
  font-size: 13px;
  color: #111827;
  padding: 0 10px;
  font-family: var(--font-body);
}

.dynamic-search-field input {
  min-width: 200px;
}

.dynamic-filter-field select,
.dynamic-filter-field input {
  min-width: 130px;
}

.dynamic-menu-select {
  position: relative;
  min-width: 130px;
}

[data-ds-filter-column-select] {
  min-width: 170px;
}

[data-ds-filter-operator-select] {
  min-width: 190px;
}

.dynamic-menu-trigger {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(4, 56, 115, 0.2);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  cursor: pointer;
}

.dynamic-menu-trigger:hover {
  border-color: rgba(4, 56, 115, 0.36);
}

.dynamic-menu-trigger:focus-visible {
  outline: none;
  border-color: #0b4aa6;
  box-shadow: 0 0 0 3px rgba(11, 74, 166, 0.12);
}

.dynamic-menu-trigger svg {
  width: 14px;
  height: 14px;
  color: #516379;
}

.dynamic-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 230px;
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.22);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  padding: 6px;
  display: none;
  z-index: 30;
}

.dynamic-menu-select.is-open .dynamic-menu-list {
  display: grid;
  gap: 4px;
}

[data-ds-filter-column-select] .dynamic-menu-list {
  min-width: 200px;
}

[data-ds-filter-operator-select] .dynamic-menu-list {
  min-width: 250px;
}

[data-ds-column-type-select] {
  width: 100%;
  min-width: 0;
}

[data-ds-column-type-select] .dynamic-menu-trigger {
  height: 40px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

[data-ds-column-type-select] .dynamic-menu-list {
  min-width: 100%;
}

.dynamic-menu-item {
  border: none;
  background: #fff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.dynamic-menu-item:hover {
  background: rgba(11, 74, 166, 0.08);
}

.dynamic-menu-item.is-selected {
  background: rgba(11, 74, 166, 0.14);
  color: #0b4aa6;
}

.dynamic-filter-field select,
.dynamic-form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid rgba(4, 56, 115, 0.2);
  padding-right: 34px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23516379' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 10px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.dynamic-filter-field select:hover,
.dynamic-form-field select:hover {
  border-color: rgba(4, 56, 115, 0.36);
}

.dynamic-filter-field select:focus,
.dynamic-form-field select:focus {
  outline: none;
  border-color: #0b4aa6;
  box-shadow: 0 0 0 3px rgba(11, 74, 166, 0.12);
}

.dynamic-filter-field select option,
.dynamic-form-field select option {
  color: #0f172a;
  background: #fff;
}

.dynamic-filter-add,
.dynamic-filter-clear {
  height: 34px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dynamic-filter-add-icon {
  width: 34px;
  min-width: 34px;
  padding: 0;
  justify-content: center;
}

.dynamic-filter-add-icon svg {
  width: 16px;
  height: 16px;
}

.dynamic-filters-dropdown {
  position: relative;
}

.dynamic-filters-toggle {
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.dynamic-filters-dropdown.is-open .dynamic-filters-toggle {
  border-color: rgba(11, 74, 166, 0.35);
  background: rgba(11, 74, 166, 0.08);
}

.dynamic-filters-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: min(92vw, 320px);
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.2);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
  padding: 10px;
  display: none;
  z-index: 32;
}

.dynamic-filters-dropdown.is-open .dynamic-filters-menu {
  display: block;
}

.dynamic-active-filters {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  max-height: 210px;
  overflow: auto;
}

.dynamic-active-filter-chip {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 28px;
  border: 1px solid rgba(4, 56, 115, 0.18);
  border-radius: 999px;
  background: rgba(11, 74, 166, 0.07);
  color: #1f2937;
  padding: 4px 9px;
  font-size: 13px;
  line-height: 1.25;
}

.dynamic-active-filter-chip span,
.dynamic-active-filter-chip strong,
.dynamic-active-filter-chip em {
  font-size: 13px;
  line-height: 1.25;
}

.dynamic-active-filter-chip strong {
  color: #1e3a66;
  font-weight: 700;
}

.dynamic-active-filter-chip em {
  font-style: normal;
  color: #1f2937;
  font-weight: 600;
}

.dynamic-active-filter-chip button {
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

.dynamic-active-filter-empty {
  font-size: 12px;
  color: #64748b;
  padding: 4px 2px;
}

.dynamic-filters-menu-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(4, 56, 115, 0.12);
  display: flex;
  justify-content: flex-end;
}

.dynamic-filters-menu-actions .dynamic-filter-clear {
  height: 30px;
  font-size: 12px;
}

.dynamic-import-error-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
  z-index: 210;
  padding: 16px;
}

.dynamic-import-error-modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #991b1b;
}

.dynamic-import-error-modal p {
  margin: 0;
  color: #1f2937;
  line-height: 1.45;
  white-space: pre-wrap;
  max-height: 280px;
  overflow: auto;
}

.dynamic-import-error-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}


.dynamic-table-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: visible;
}

.dynamic-table-scroll {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border-top: none;
}

.dynamic-table {
  width: max-content;
  min-width: 0;
  border-collapse: collapse;
}

.dynamic-table th,
.dynamic-table td {
  border: 1px solid rgba(4, 56, 115, 0.14);
  padding: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  color: #1f2937;
  background: #ffffff;
  height: 46px;
  min-height: 46px;
  white-space: nowrap;
}

.dynamic-table th:not(.dynamic-select-header-cell):not(.dynamic-add-header-cell),
.dynamic-table td:not(.dynamic-row-index-cell):not(.dynamic-first-cell) {
  min-width: 170px;
}

.dynamic-table thead th {
  background: #f3f6fb;
  color: #111827;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 4;
}

.dynamic-column-header-cell {
  cursor: grab;
  user-select: none;
  position: relative;
}

.dynamic-column-header-cell:hover {
  background: #eaf2ff;
}

.dynamic-column-header-cell.is-dragging {
  opacity: 0.55;
}

.dynamic-column-header-cell.is-drop-target {
  background: #dbeafe;
  box-shadow: inset 0 0 0 2px rgba(11, 74, 166, 0.28);
}

.dynamic-col-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 8px;
}

.dynamic-col-name {
  font-size: 14px;
  font-weight: 600;
}

.dynamic-col-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dynamic-col-type-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.dynamic-col-type-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2px;
}

.dynamic-col-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dynamic-col-filter-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #64748b;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dynamic-col-filter-icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.7;
}

.dynamic-col-actions .icon-button,
.dynamic-row-index-cell .icon-button {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b7280;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dynamic-col-actions .icon-button:hover,
.dynamic-row-index-cell .icon-button:hover {
  color: #111827;
  border-color: rgba(4, 56, 115, 0.2);
  background: rgba(4, 56, 115, 0.06);
}

.dynamic-select-header-cell {
  width: 42px;
  min-width: 42px;
  background: #eef3fb;
}

.dynamic-add-header-cell,
.dynamic-row-index-cell {
  width: 42px;
  min-width: 42px;
  text-align: center;
}

.dynamic-trailing-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  background: #ffffff;
}

.dynamic-add-header-cell,
.dynamic-first-cell,
.dynamic-row-insert-cell {
  cursor: pointer;
}

.dynamic-add-header-cell:focus-visible,
.dynamic-first-cell:focus-visible,
.dynamic-row-insert-cell:focus-visible {
  outline: 2px solid rgba(11, 74, 166, 0.35);
  outline-offset: -2px;
}

.dynamic-add-header-cell:hover,
.dynamic-first-cell:hover,
.dynamic-row-insert-cell:hover {
  background: #eef5ff;
}

.dynamic-row-index-cell[data-ds-edit-row] {
  cursor: pointer;
}

.dynamic-row-index-cell[data-ds-edit-row]:hover {
  background: #eef5ff;
}

.dynamic-trailing-cell[data-ds-edit-row] {
  cursor: pointer;
}

.dynamic-trailing-cell[data-ds-edit-row]:hover {
  background: #eef5ff;
}

.dynamic-row-index-cell {
  padding: 0;
  color: #64748b;
  background: #f7f9fc;
}

.dynamic-row-index {
  font-size: 14px;
  display: inline-block;
  min-width: 16px;
}

.dynamic-table tbody tr:hover td {
  background: #f8fbff;
}

.dynamic-empty-cell {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  padding: 0;
  height: 46px;
  background: #ffffff;
}

.dynamic-first-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 46px;
  text-align: center;
  padding: 0;
  background: #ffffff;
}

.dynamic-insert-row td {
  background: #fbfdff;
  height: 40px;
  min-height: 40px;
}

.dynamic-insert-row {
  cursor: pointer;
}

.dynamic-insert-row-label {
  color: #6b7280;
  font-size: 14px;
  padding: 0 8px;
  text-align: center;
}

.dynamic-cell-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: #eef5ff;
  text-align: center;
  font-size: 14px;
  color: #111827;
  font-family: var(--font-body);
  border-radius: 0;
}

td.is-editing {
  padding: 0;
}

.dynamic-cell-bool-editor {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef5ff;
}

.dynamic-cell-bool-editor .dynamic-switch-slider {
  transform: scale(0.92);
}

.dynamic-row-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px;
  border-top: 1px solid rgba(4, 56, 115, 0.14);
  background: #ffffff;
}

.dynamic-empty-state {
  border: 1px dashed rgba(4, 56, 115, 0.28);
  border-radius: 8px;
  padding: 20px;
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 12px;
  background: #ffffff;
}

.dynamic-empty-state p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

.dynamic-inline-form {
  border-bottom: 1px solid rgba(4, 56, 115, 0.14);
  background: #f9fbff;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.dynamic-modal-form {
  display: grid;
  gap: 12px;
}

.dynamic-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(540px, 94vw);
  height: 100vh;
  background: #ffffff;
  border-left: 1px solid rgba(4, 56, 115, 0.16);
  box-shadow: -18px 0 36px rgba(15, 23, 42, 0.16);
  z-index: 120;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  pointer-events: none;
}

.dynamic-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.dynamic-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.12);
}

.dynamic-drawer-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.dynamic-drawer-header p {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
}

.dynamic-drawer .dynamic-modal-form {
  align-content: start;
  padding: 16px 18px 20px;
  overflow-y: auto;
}

.dynamic-drawer .dynamic-form-grid {
  grid-template-columns: 1fr;
}

.dynamic-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

.dynamic-form-field {
  display: grid;
  gap: 6px;
}

.dynamic-form-field label {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.dynamic-form-field input,
.dynamic-form-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
  font-family: var(--font-body);
}

.dynamic-checkbox {
  align-self: end;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
}

.dynamic-filter-switch {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.dynamic-filter-switch-control {
  display: inline-flex;
  align-items: center;
}

.dynamic-inline-help {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(4, 56, 115, 0.25);
  background: rgba(4, 56, 115, 0.06);
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.dynamic-inline-tooltip {
  position: absolute;
  right: 0;
  left: auto;
  top: 24px;
  width: 280px;
  max-width: min(280px, calc(100vw - 48px));
  border: 1px solid rgba(4, 56, 115, 0.18);
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 9;
}

.dynamic-inline-help:hover .dynamic-inline-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.dynamic-bool-switch {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  color: #1f2937;
}

.dynamic-bool-field-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.dynamic-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dynamic-table-card .status-text {
  padding: 8px 0 0;
  color: #6b7280;
}

.dynamic-plus-glyph {
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: #0b4aa6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  .dynamic-sources-topbar {
    align-items: flex-start;
  }

  .dynamic-topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .dynamic-topbar-controls {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 0;
    margin-bottom: 0;
  }

  .dynamic-topbar-middle {
    width: 100%;
    min-width: 0;
  }

  .dynamic-control-divider {
    width: 100%;
    height: 1px;
  }

  .dynamic-name-tile,
  .dynamic-enabled-tile {
    min-width: 0;
  }
}

@media (max-width: 860px) {
  .dynamic-form-grid,
  .dynamic-row-grid {
    grid-template-columns: 1fr;
  }
}

.notion-page {
  gap: 24px;
}

.notion-shell {
  padding: 0 8px;
  max-width: 1200px;
  margin: 0;
}

.notion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.notion-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.notion-title {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
}

.notion-title img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.notion-title h2 {
  margin: 0;
  font-size: 18px;
}

.notion-title p {
  grid-column: 1 / -1;
}

.tag-success {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.3);
}

.button-danger {
  background: #b42318;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.button-danger:hover {
  background: #922018;
}

.button-outline-danger {
  background: transparent;
  color: #b42318;
  border-radius: 999px;
  padding: 8px 16px;
  border: 1px solid rgba(180, 35, 24, 0.4);
  font-weight: 600;
  cursor: pointer;
}

.button-outline-danger:hover {
  background: rgba(180, 35, 24, 0.08);
}

.button-outline-danger.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.button-outline-danger.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.notion-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.notion-header p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.notion-connect {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 24px;
  display: grid;
  gap: 12px;
  max-width: 520px;
}

.notion-connect h3 {
  margin: 0;
  font-size: 16px;
}

.notion-connect p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.notion-list {
  display: grid;
  gap: 12px;
}

.notion-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.notion-item {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 16px;
  box-shadow: var(--shadow-tight);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.notion-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.notion-item-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
  min-height: 16px;
}

.notion-item h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.notion-item p {
  margin: 0;
  color: var(--color-muted);
  font-size: 12px;
}

.docs-page {
  gap: 24px;
}

.docs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: start;
}

.docs-card {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  box-shadow: var(--shadow-tight);
  padding: 20px;
  display: grid;
  gap: 16px;
}

.docs-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.docs-card-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.docs-card-header p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.dropzone {
  border: 1px dashed rgba(4, 56, 115, 0.35);
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(4, 56, 115, 0.08), rgba(255, 255, 255, 0.8));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.dropzone.is-dragging {
  border-color: rgba(4, 56, 115, 0.6);
  box-shadow: 0 10px 24px rgba(4, 56, 115, 0.12);
}

.dropzone-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dropzone-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(4, 56, 115, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
}

.dropzone-title {
  font-weight: 600;
  color: #111827;
}

.dropzone-meta {
  font-size: 12px;
  color: var(--color-muted);
}

.docs-uploads {
  display: grid;
  gap: 12px;
}

.docs-uploads-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.docs-uploads-header h3 {
  margin: 0;
  font-size: 14px;
}

.docs-uploads-list {
  display: grid;
  gap: 10px;
}

.upload-item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.upload-name {
  font-weight: 600;
  font-size: 13px;
}

.upload-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
}

.upload-status.is-failed {
  color: #b42318;
}

.upload-meta {
  font-size: 12px;
  color: var(--color-muted);
}

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(4, 56, 115, 0.2);
  border-top-color: var(--color-navy);
  animation: spin 0.8s linear infinite;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.status-dot.is-ready {
  background: #16a34a;
}

.status-dot.is-error {
  background: #b42318;
}

.docs-list {
  display: grid;
  gap: 12px;
}

.doc-row {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.doc-name {
  font-weight: 600;
  font-size: 13px;
}

.doc-meta {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 4px;
}

.doc-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.status-badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid transparent;
}

.status-badge.is-ready {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.2);
}

.status-badge.is-processing {
  background: rgba(4, 56, 115, 0.08);
  color: var(--color-navy);
  border-color: rgba(4, 56, 115, 0.2);
}

.docs-list-card .button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.toast-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 10px;
  z-index: 60;
}

.toast {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  color: #111827;
  box-shadow: var(--shadow-tight);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.toast-success {
  border-color: rgba(22, 163, 74, 0.3);
}

.toast.toast-error {
  border-color: rgba(180, 35, 24, 0.4);
}

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

/* ── Live Channels page ───────────────────────────────────────── */

.live-channels-page {
  width: 100%;
  min-height: calc(100vh - var(--app-header-height));
  padding: 24px 32px !important;
  max-width: none !important;
  align-content: start;
  justify-items: center;
}

/* Two-column layout */
.lc-layout {
  width: min(100%, 1480px);
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - var(--app-header-height) - 48px);
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

/* Left sidebar */
.lc-sidebar {
  border-right: 1px solid rgba(4, 56, 115, 0.1);
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

.lc-sidebar-header {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 114px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.08);
}

.lc-back-button {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #17324d;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.lc-back-button:hover {
  border-color: rgba(4, 56, 115, 0.22);
  background: #f8fafc;
}

.lc-back-button svg {
  width: 15px;
  height: 15px;
}

.lc-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

.lc-nav {
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  gap: 2px;
}

.lc-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
}

.lc-nav-item:hover {
  background: rgba(4, 56, 115, 0.05);
}

.lc-nav-item.is-active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(4, 56, 115, 0.08);
}

.lc-nav-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lc-nav-logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.lc-nav-logo i,
.lc-detail-header-logo i,
.lc-detail-empty-logo i {
  width: 20px;
  height: 20px;
  color: #064483;
}

.lc-nav-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.lc-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.lc-nav-hint {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-nav-status {
  flex-shrink: 0;
}

.lc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: #f1f5f9;
  color: #9ca3af;
  white-space: nowrap;
}

.lc-status-pill.is-connected {
  background: #dcfce7;
  color: #166534;
}

.lc-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Right detail panel */
.live-channels-page .lc-main {
  background: #fff;
  overflow-y: auto;
  display: grid;
  align-content: start;
  padding: 0;
}

.live-channels-page .lc-detail-panel {
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: calc(100dvh - var(--app-chrome-height));
  margin: 0;
}

.live-channels-page .lc-detail-panel.is-active {
  display: flex;
}

/* Detail header */
.lc-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 114px;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.08);
  background: #fafbfc;
}

.lc-detail-header-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f1f5f9;
  border: 1px solid rgba(4, 56, 115, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lc-detail-header-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.lc-detail-header > div:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}

.lc-detail-header h2 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.lc-detail-header p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

/* Detail body */
.lc-detail-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Disconnected (empty) state */
.lc-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  gap: 12px;
  flex: 1;
}

.lc-detail-empty-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #f1f5f9;
  border: 1px solid rgba(4, 56, 115, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.lc-detail-empty-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.lc-detail-empty-logo i {
  width: 30px;
  height: 30px;
}

.lc-detail-empty h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.lc-detail-empty p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  max-width: 300px;
  line-height: 1.5;
}

.lc-detail-connect-btn {
  margin-top: 8px;
  min-width: 180px;
  justify-content: center;
}

.lc-detail-connect-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
  max-width: 340px;
}

.lc-detail-connect-form .auth-field {
  width: 100%;
}

/* Detail sections */
.lc-detail-section {
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.07);
}

.lc-detail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lc-detail-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9ca3af;
}

.lc-label-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

/* Connected info */
.lc-connected-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #166534;
}

.lc-connected-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #16a34a;
}

.lc-review-note {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 760px;
}

.lc-whatsapp-refresh {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  color: #365675;
  font-size: 12px;
}

.lc-whatsapp-refresh svg {
  width: 14px;
  height: 14px;
}

.lc-whatsapp-refresh.is-loading {
  cursor: wait;
  opacity: 0.68;
}

.lc-whatsapp-refresh.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.channel-connect-modal-card {
  width: min(620px, 100%);
}

.channel-connect-confirm-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 18px;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.channel-connect-confirm-list li::marker {
  color: #16a34a;
}

.channel-connection-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
  opacity: 0;
  transition: opacity 160ms ease;
}

.channel-connection-progress-overlay.is-visible {
  opacity: 1;
}

.channel-connection-progress-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 30px 28px 28px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.channel-connection-brand-flow {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(70px, 1fr) 54px;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.channel-connection-brand {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe5ef;
  border-radius: 14px;
  background: #f8fafc;
}

.channel-connection-brand img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.channel-connection-brand.is-meta img {
  width: 40px;
}

.channel-connection-brand-line {
  position: relative;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce6f0;
}

.channel-connection-brand-line > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: #2563eb;
  animation: channel-brand-progress 1.1s ease-in-out infinite;
}

.channel-connection-progress-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
}

.channel-connection-progress-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

@keyframes channel-brand-progress {
  0% {
    transform: translateX(-105%);
  }
  100% {
    transform: translateX(345%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .channel-connection-progress-overlay {
    transition: none;
  }

  .channel-connection-brand-line > span {
    animation: none;
    transform: none;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .channel-connection-progress-overlay {
    padding: 16px;
  }

  .channel-connection-progress-card {
    padding: 26px 22px 24px;
  }
}

.channel-connect-confirm-actions {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
}

.channel-connect-confirm-actions .button {
  border-radius: 10px;
}

.channel-connect-confirm-actions [data-channel-connect-confirm-cancel] {
  justify-self: start;
  padding: 10px 0;
  background: transparent;
  border: 0;
  color: #334155;
  box-shadow: none;
}

.channel-connect-confirm-actions [data-channel-connect-confirm-cancel]:hover {
  color: #0f172a;
  background: transparent;
}

.channel-connect-confirm-actions [data-channel-connect-confirm-proceed] {
  justify-self: end;
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.channel-connect-confirm-actions [data-channel-connect-confirm-proceed]:hover {
  background: #15803d;
  border-color: #15803d;
}

.channel-disconnect-actions {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
}

.channel-disconnect-actions .button {
  border-radius: 10px;
}

.channel-disconnect-actions [data-channel-meta-disconnect-cancel],
.channel-disconnect-actions [data-live-meta-disconnect-cancel] {
  justify-self: start;
  padding: 10px 0;
  background: transparent;
  border: 0;
  color: #334155;
  box-shadow: none;
}

.channel-disconnect-actions [data-channel-meta-disconnect-cancel]:hover,
.channel-disconnect-actions [data-live-meta-disconnect-cancel]:hover {
  color: #0f172a;
  background: transparent;
}

.channel-disconnect-actions [data-channel-meta-disconnect-confirm],
.channel-disconnect-actions [data-live-meta-disconnect-confirm] {
  justify-self: end;
}

.channel-routing-modal-card {
  width: min(520px, 100%);
}

.channel-routing-options {
  display: grid;
  gap: 8px;
  max-height: min(420px, calc(100vh - 260px));
  overflow-y: auto;
  padding-right: 2px;
}

.channel-routing-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.channel-routing-option:hover,
.channel-routing-option.is-active {
  border-color: #0b4a8b;
  background: #f5f9ff;
  color: #073763;
}

/* Account rows */
.lc-account-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lc-account-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid rgba(4, 56, 115, 0.09);
  border-radius: 10px;
}

.lc-account-avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.1);
  flex-shrink: 0;
}

.lc-account-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
}

.lc-phone-icon i,
.lc-user-icon i {
  width: 15px;
  height: 15px;
  color: #9ca3af;
}

.lc-account-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-account-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.lc-account-actions .button {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 8px;
}

.lc-account-row-wide {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.lc-account-actions-stack {
  width: min(420px, 100%);
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  margin-top: 8px;
  flex-wrap: wrap;
}

.lc-routing-control {
  grid-column: 2;
  margin-top: 8px;
  flex-wrap: wrap;
}

.lc-routing-status {
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}

.lc-assign-field {
  min-width: 0;
  margin-bottom: 0;
  flex: 1 1 260px;
}

.lc-agent-select {
  width: 100%;
}

.lc-agent-select .crm-select-trigger,
.lc-agent-select .crm-select-option {
  font-size: 13px;
}

.lc-agent-select .crm-select-menu {
  max-height: 240px;
  overflow: auto;
}

.lc-inline-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.lc-account-subtle {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 500;
  color: #6b7280;
}

.lc-telegram-connect-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr) auto;
  gap: 12px;
  align-items: end;
}

.lc-line-connect-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.lc-line-connect-form.hidden,
.lc-line-connect-panel.hidden {
  display: none;
}

.lc-line-manager {
  display: grid;
  gap: 12px;
}

.lc-line-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
}

.lc-line-manager-head h3 {
  margin: 0;
  font-size: 16px;
  color: #111827;
}

.lc-line-manager-head p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #64748b;
}

.lc-line-connect-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 10px;
  background: #f8fafc;
}

.lc-line-connect-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lc-line-connect-panel-head strong {
  color: #111827;
  font-size: 14px;
}

.lc-line-form-close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lc-line-form-close:hover {
  color: #0f172a;
  border-color: rgba(4, 56, 115, 0.24);
}

.lc-line-form-close svg {
  width: 15px;
  height: 15px;
}

.lc-line-plain-guide {
  display: block;
}

.lc-line-plain-guide h3 {
  margin: 0;
  font-size: 16px;
  color: #111827;
}

.lc-line-plain-guide p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
  max-width: 760px;
}

.lc-line-empty-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(6, 196, 82, 0.12);
  color: #06c755;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lc-line-empty-icon svg {
  width: 18px;
  height: 18px;
}

.lc-line-webhook-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 12px;
}

.lc-line-webhook-inline code,
.lc-line-table code {
  color: #0f172a;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.lc-table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(4, 56, 115, 0.09);
  border-radius: 10px;
  background: #fff;
}

.lc-line-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.lc-line-table th,
.lc-line-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.07);
  text-align: left;
  vertical-align: top;
  font-size: 12.5px;
  color: #334155;
}

.lc-line-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lc-line-table tbody tr:last-child td {
  border-bottom: 0;
}

.lc-line-route-cell {
  min-width: 280px;
}

.lc-line-route-cell .lc-account-actions-stack {
  grid-column: auto;
  width: 100%;
  margin-top: 0;
}

.lc-line-card-list {
  display: grid;
  gap: 10px;
}

.lc-line-add-row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px dashed rgba(4, 56, 115, 0.16);
  border-radius: 10px;
  background: #fbfdff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.lc-line-add-row.hidden {
  display: none;
}

.lc-line-add-row:hover {
  border-color: rgba(4, 56, 115, 0.28);
  background: #f7fbff;
}

.lc-line-add-row span:last-child {
  display: grid;
  gap: 3px;
}

.lc-line-add-row strong {
  color: #111827;
  font-size: 14px;
}

.lc-line-add-row small {
  color: #64748b;
  font-size: 12.5px;
}

.lc-line-channel-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 10px;
  background: #fff;
}

.lc-line-channel-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.lc-line-channel-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lc-line-channel-copy strong {
  color: #111827;
  font-size: 14px;
}

.lc-line-channel-copy span {
  color: #64748b;
  font-size: 12px;
}

.lc-line-channel-copy code {
  color: #0f172a;
}

.lc-line-channel-actions .lc-account-actions-stack {
  grid-column: auto;
  width: 100%;
  margin-top: 0;
  justify-content: flex-end;
}

.lc-bot-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lc-bot-card {
  border: 1px solid rgba(4, 56, 115, 0.09);
  border-radius: 14px;
  background: #f8fafc;
  padding: 16px;
}

.lc-bot-card-header {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.lc-bot-card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #111827;
}

.lc-bot-card-header p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}

@media (max-width: 980px) {
  .live-channels-page .lc-main {
    padding: 0;
  }

  .live-channels-page .lc-detail-panel {
    width: 100%;
  }

  .lc-account-row-wide {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lc-account-actions-stack {
    grid-column: 1 / -1;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .lc-telegram-connect-form {
    grid-template-columns: 1fr;
  }

  .lc-line-connect-form {
    grid-template-columns: 1fr;
  }

  .lc-line-plain-guide {
    flex-direction: column;
    gap: 12px;
  }

  .lc-line-manager-head {
    flex-direction: column;
    align-items: stretch;
  }

  .lc-line-channel-card {
    grid-template-columns: 1fr;
  }

  .lc-line-channel-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .lc-line-channel-actions .lc-account-actions-stack {
    justify-content: flex-start;
  }

  .lc-bot-card-header {
    flex-direction: column;
  }
}

.lc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1d5db;
  flex-shrink: 0;
}

.lc-status-dot.is-connected {
  background: #16a34a;
}

.lc-empty-row {
  padding: 12px 14px;
  font-size: 12.5px;
  color: #9ca3af;
  background: #f8fafc;
  border: 1px dashed rgba(4, 56, 115, 0.12);
  border-radius: 10px;
}

/* Badges */
.lc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
}

.lc-badge-green {
  background: #dcfce7;
  color: #166534;
}

/* Info note */
.lc-info-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid rgba(4, 56, 115, 0.08);
  border-radius: 10px;
  font-size: 12.5px;
  color: #6b7280;
}

.lc-info-note i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #9ca3af;
}

/* Toggle switch */
.lc-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.lc-toggle-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.lc-toggle-hint {
  display: block;
  font-size: 12px;
  color: #9ca3af;
}

.lc-switch {
  position: relative;
  flex-shrink: 0;
}

.lc-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.lc-switch-track {
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #d1d5db;
  transition: background 0.2s;
  position: relative;
  cursor: pointer;
}

.lc-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}

.lc-switch input:checked + .lc-switch-track {
  background: var(--color-navy);
}

.lc-switch input:checked + .lc-switch-track::after {
  transform: translateX(16px);
}

/* Footer (disconnect) */
.lc-detail-footer {
  position: sticky;
  z-index: 3;
  bottom: 0;
  padding: 16px 28px;
  margin-top: auto;
  border-top: 1px solid rgba(4, 56, 115, 0.07);
  background: #fafafa;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.035);
}

.lc-detail-footer .button {
  font-size: 13px;
  min-height: 34px;
  padding: 6px 14px;
}

/* Loading spinner compat */
.live-channel-actions .button.is-loading {
  position: relative;
  pointer-events: none;
}

.live-channel-actions .button.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 999px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}

.live-channel-oauth-note {
  border: 1px dashed rgba(4, 56, 115, 0.22);
  background: rgba(4, 56, 115, 0.04);
  color: #0f172a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Hidden legacy panel wrappers */
.live-channel-panel,
.live-channel-panel-body {
  display: none;
}

@media (max-width: 700px) {
  .live-channels-page {
    padding: 14px !important;
  }

  .lc-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .live-channels-page .lc-detail-panel {
    min-height: calc(100dvh - var(--app-chrome-height));
  }

  .lc-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(4, 56, 115, 0.1);
  }
}

/* ── CRM page ───────────────────────────────────────────────────── */

body.crm-full .content {
  padding: 0;
}

.crm-page {
  padding: 0 !important;
  max-width: none !important;
}

.crm-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 80px);
  height: calc(100vh - 80px);
}

/* Sidebar */
.crm-sidebar {
  border-right: 1px solid rgba(4, 56, 115, 0.1);
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.crm-sidebar-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.08);
}

.crm-sidebar-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 4px;
}

.crm-sidebar-note {
  display: block;
  font-size: 11px;
  color: #9ca3af;
}

.crm-nav {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 3px;
}

.crm-nav-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
}

.crm-nav-item:hover {
  background: rgba(4, 56, 115, 0.05);
}

.crm-nav-item.is-active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(4, 56, 115, 0.08);
}

.crm-nav-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
}

.crm-nav-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crm-nav-logo i {
  width: 18px;
  height: 18px;
  color: #64748b;
}

.crm-nav-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.crm-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.crm-nav-hint {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crm-nav-status {
  flex-shrink: 0;
  padding-top: 1px;
}

.crm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: #f1f5f9;
  color: #9ca3af;
  white-space: nowrap;
}

.crm-status-pill.is-connected {
  background: #dcfce7;
  color: #166534;
}

.crm-status-pill.is-locked {
  background: #fef3c7;
  color: #92400e;
  gap: 4px;
}

.crm-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Main detail area */
.crm-main {
  background: #fff;
  overflow-y: auto;
}

.crm-detail-panel {
  display: none;
  flex-direction: column;
  min-height: 100%;
}

.crm-detail-panel.is-active {
  display: flex;
}

.crm-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.08);
  background: #fafbfc;
}

.crm-detail-header-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(4, 56, 115, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px;
}

.crm-detail-header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crm-detail-header-logo i {
  width: 24px;
  height: 24px;
  color: #64748b;
}

.crm-detail-header h2 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.crm-detail-header p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  max-width: 480px;
}

.crm-detail-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Disconnected empty state */
.crm-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  gap: 10px;
  flex: 1;
}

.crm-detail-empty-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(4, 56, 115, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  padding: 14px;
}

.crm-detail-empty-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crm-detail-empty h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.crm-detail-empty p {
  margin: 0;
  font-size: 13.5px;
  color: #6b7280;
  max-width: 340px;
  line-height: 1.55;
}

.crm-connect-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
  max-width: 360px;
}

.crm-connect-btn {
  width: 100%;
  justify-content: center;
}

.crm-blocked-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fef9ee;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: #92400e;
  max-width: 380px;
  text-align: left;
  line-height: 1.5;
  margin-top: 6px;
}

.crm-blocked-note i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #d97706;
}

/* Detail sections */
.crm-detail-section {
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.07);
}

.crm-detail-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9ca3af;
}

.crm-connected-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #166534;
}

.crm-connected-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #16a34a;
}

/* How it works steps */
.crm-how-it-works {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid rgba(4, 56, 115, 0.08);
  border-radius: 10px;
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}

.crm-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Footer */
.crm-detail-footer {
  padding: 16px 28px;
  margin-top: auto;
  border-top: 1px solid rgba(4, 56, 115, 0.07);
  background: #fafafa;
}

.crm-detail-footer .button {
  font-size: 13px;
  min-height: 34px;
  padding: 6px 14px;
}

.crm-settings-form,
.crm-settings-grid {
  display: grid;
  gap: 10px;
}

.crm-settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: #334155;
}

.crm-settings-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-navy);
}

.crm-loading-state {
  display: grid;
  gap: 10px;
  place-items: center;
  text-align: center;
  padding: 80px 24px;
  color: #6b7280;
  flex: 1;
}

.crm-loading-state h3 {
  margin: 0;
  font-size: 16px;
  color: #111827;
}

.crm-loading-state p {
  margin: 0;
  font-size: 13px;
}

.crm-loading-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(4, 56, 115, 0.18);
  border-top-color: var(--color-navy);
  animation: crm-spin 0.8s linear infinite;
}

.crm-disconnect-modal-card {
  width: min(520px, 100%);
}

.crm-disconnect-modal-error {
  margin: 0;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.45;
}

.crm-plan-lock {
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 24px;
  border: 1px solid #d9e1ec;
  border-radius: 20px;
  background: #ffffff;
}

.crm-plan-lock-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8e7e7;
  color: #9a1c1c;
  margin-bottom: 14px;
}

.crm-plan-lock h2 {
  margin: 0 0 10px;
}

.crm-plan-lock p {
  margin: 0 0 20px;
  max-width: 620px;
  color: #526071;
}

.crm-logs-toolbar {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: repeat(2, minmax(220px, 280px));
  justify-content: start;
}

.crm-logs-filters-section {
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 8px;
}

.crm-logs-filters-section .auth-field > span {
  font-size: 12px;
}

.crm-detail-panel[data-crm-detail="lead-logs"] .crm-detail-section {
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
}

.crm-detail-panel[data-crm-detail="lead-logs"] .crm-detail-body {
  min-height: 0;
}

.crm-detail-panel[data-crm-detail="lead-logs"] .crm-detail-section:last-of-type {
  flex: 1;
  min-height: 0;
}

.crm-logs-toolbar .auth-field {
  max-width: 280px;
}

.crm-select {
  position: relative;
  width: 100%;
}

.crm-select-trigger {
  width: 100%;
  height: 40px;
  border: 1px solid #ccd6e4;
  border-radius: 10px;
  padding: 0 38px 0 12px;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23526071' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  text-align: left;
  font-family: inherit;
}

.crm-select-trigger:focus {
  outline: none;
  border-color: #0b3f86;
  box-shadow: 0 0 0 3px rgba(11, 63, 134, 0.14);
}

.crm-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 35;
  border: 1px solid #ccd6e4;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.crm-select-option {
  width: 100%;
  border: none;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.crm-select-option:hover {
  background: #f4f7fb;
}

.crm-select-option.is-active {
  background: #edf3fb;
  color: #0b3f86;
  font-weight: 600;
}

.crm-logs-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  flex: 1;
  min-height: 0;
}

.crm-logs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

.crm-logs-table th,
.crm-logs-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f6;
  font-size: 12px;
  vertical-align: top;
}

.crm-logs-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: #f8fafc;
}

.crm-logs-table td:last-child {
  max-width: 280px;
  color: #b91c1c;
}

.crm-logs-empty-cell {
  color: #6b7280;
  text-align: center;
  padding: 22px 12px !important;
}

.crm-logs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.crm-logs-page-meta {
  font-size: 12px;
  color: #64748b;
}

.crm-logs-page-actions {
  display: inline-flex;
  gap: 8px;
}

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

@media (max-width: 700px) {
  .crm-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }

  .crm-logs-toolbar {
    grid-template-columns: 1fr;
  }

  .crm-logs-toolbar .auth-field {
    max-width: none;
  }
}

/* ── End CRM page ──────────────────────────────────────────────── */

.button-train {
  background: #16a34a;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.button-train:hover {
  background: #15803d;
}

.button-train[disabled] {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

.button-train[disabled]:hover {
  background: #9ca3af;
}

.faq-description {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.faq-section {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.faq-section ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.faq-answer {
  margin: 0;
  color: #111827;
}

.section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}


.faq-form {
  display: grid;
  gap: 10px;
}

.faq-form input,
.faq-form textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-body);
}

.faq-form textarea {
  resize: vertical;
}

.faq-examples {
  display: grid;
  gap: 8px;
}

.faq-form-section {
  background: #fff;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-tight);
}

.faq-form-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.faq-form-header h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.faq-form-header p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.faq-storage {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 8px;
}

.faq-storage strong {
  color: #111827;
}

.faq-example-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.faq-examples {
  display: grid;
  gap: 8px;
}

.example-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  background: rgba(4, 56, 115, 0.04);
  font-size: 13px;
}

.faq-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 45;
  padding: 24px;
}

.modal.hidden,
.modal-backdrop.hidden {
  display: none;
}

.modal-card {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  box-shadow: var(--shadow-tight);
  padding: 24px;
  display: grid;
  gap: 16px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.modal-header h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.modal-header p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 13px;
}

.modal-close {
  padding: 6px 10px;
}

[data-create-modal] {
  align-items: stretch;
  overflow-y: auto;
  padding: 24px;
}

[data-create-modal] .modal-card {
  width: min(880px, 100%);
  margin: auto;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  padding: 0;
}

.create-agent-modal-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
}

[data-create-modal] .create-form-shell::-webkit-scrollbar {
  width: 10px;
}

[data-create-modal] .create-form-shell::-webkit-scrollbar-track {
  background: transparent;
  margin: 10px 0;
}

[data-create-modal] .create-form-shell::-webkit-scrollbar-thumb {
  background: rgba(4, 56, 115, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-create-modal] .create-form-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(4, 56, 115, 0.32);
  border: 2px solid transparent;
  background-clip: padding-box;
}

@media (max-width: 760px) {
  [data-create-modal] {
    padding: 14px;
  }

  [data-create-modal] .modal-card {
    width: 100%;
    max-height: calc(100vh - 28px);
    border-radius: 14px;
    padding: 0;
  }

  .create-form-shell {
    max-height: calc(100vh - 28px);
    padding: 16px 10px 16px 16px;
  }

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

  .create-form-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.sidebar-backdrop {
  display: none;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.auth-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  width: min(420px, 100%);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 24px;
}

.auth-brand {
  display: flex;
  justify-content: center;
}

.auth-split {
  display: grid;
  gap: 20px;
}

.auth-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}

.tab-button {
  border: none;
  background: none;
  padding: 0 0 8px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
}

.tab-button.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

.auth-panel {
  display: grid;
  gap: 16px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.25s ease;
}

.auth-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 800px;
}

.auth-brand img {
  width: 160px;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field label {
  font-size: 13px;
  color: var(--color-muted);
}

.auth-field input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
}

.auth-actions {
  display: grid;
  gap: 12px;
}

.auth-links {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.auth-text-button {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.auth-text-button:hover {
  color: var(--color-navy);
}

.auth-helper {
  font-size: 12px;
  color: var(--color-muted);
}

.auth-card h1,
.auth-helper {
  text-align: center;
}

.status-text {
  font-size: 13px;
  color: var(--color-muted);
  min-height: 18px;
}

.status-text.is-error {
  color: #b42318;
}

.status-text.is-success {
  color: #15803d;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.insights-page {
  display: grid;
  gap: 16px;
}

.insights-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.insights-header h1 {
  margin: 0;
  font-size: 30px;
  color: var(--color-navy);
}

.insights-header p {
  margin: 6px 0 0;
  color: var(--color-muted);
}

.insights-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.insights-filters label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted);
}

.insights-filters select {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: var(--color-ink);
}

.insights-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.insights-kpi-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(4, 56, 115, 0.07);
  display: grid;
  gap: 6px;
}

.insights-kpi-card p {
  margin: 0;
  font-size: 12px;
  color: #111827;
  font-weight: 600;
}

.insights-kpi-card h3 {
  margin: 0;
  font-size: 24px;
  color: var(--color-navy);
}

.insights-kpi-card span {
  font-size: 12px;
  color: #4b5563;
}

.insights-grid {
  display: grid;
  gap: 12px;
}

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

.insights-card {
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.insights-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.insights-card-head h2 {
  margin: 0;
  font-size: 18px;
  color: var(--color-ink-soft);
}

.insights-card-head span {
  color: var(--color-muted);
  font-size: 12px;
}

.insights-bars {
  display: grid;
  gap: 8px;
}

.insights-bars.compact {
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.insights-line-wrap {
  display: grid;
  gap: 6px;
}

.insights-line-svg {
  width: 100%;
  height: 260px;
  display: block;
}

.insights-grid-line {
  stroke: #e7ecf4;
  stroke-width: 1;
}

.insights-grid-line.is-vertical {
  stroke: #f1f4f8;
}

.insights-axis-label {
  font-size: 10px;
  fill: #6b7280;
}

.insights-axis-titles {
  display: flex;
  justify-content: space-between;
  color: #4b5563;
  font-size: 12px;
}

.insights-line-empty {
  color: var(--color-muted);
  font-size: 13px;
  padding: 18px 0;
}

.insights-bar-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.insights-bar-track {
  height: 8px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}

.insights-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.insights-bar-fill.is-primary {
  background: linear-gradient(90deg, #0b4aa6, #3f78cf);
}

.insights-bar-fill.is-secondary {
  background: linear-gradient(90deg, #1f6870, #46a5b0);
}

.insights-table-wrap {
  overflow-x: auto;
}

.insights-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.insights-table caption {
  text-align: left;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.insights-table th,
.insights-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
}

.insights-table thead th {
  color: #4b5563;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.insights-channel-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--color-muted);
}

.insights-channel-stack-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.insights-channel-stack-legend i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.insights-channel-stack-list {
  display: grid;
  gap: 8px;
}

.insights-channel-pie-block {
  display: grid;
  place-items: center;
  padding: 8px 0 4px;
}

.insights-donut-wrap {
  position: relative;
  width: 220px;
  height: 220px;
}

.insights-donut {
  width: 220px;
  height: 220px;
  display: block;
}

.insights-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
}

.insights-donut-center strong {
  color: #111827;
  font-size: 24px;
}

.insights-donut-center span {
  color: var(--color-muted);
  font-size: 12px;
}

.stack-widget {
  background: #0b4aa6;
}

.stack-whatsapp {
  background: #0d907f;
}

.stack-telegram {
  background: #2796d6;
}

.stack-instagram {
  background: #cd4f8d;
}

.insights-retention-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.insights-retention-kpis div {
  border: 1px solid #edf1f6;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.insights-retention-kpis span {
  color: var(--color-muted);
  font-size: 12px;
}

.insights-retention-kpis strong {
  color: var(--color-navy);
  font-size: 20px;
}

.insights-progress-list {
  display: grid;
  gap: 10px;
}

.insights-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr auto;
  gap: 10px;
  align-items: center;
}

.insights-progress-row div:first-child {
  display: grid;
  gap: 4px;
}

.insights-progress-row span {
  color: var(--color-muted);
  font-size: 12px;
}

.insights-progress-row em {
  font-style: normal;
  font-size: 12px;
  color: #374151;
}

.insights-progress-track {
  height: 10px;
  border-radius: 999px;
  background: #edf1f6;
  overflow: hidden;
}

.insights-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0b4aa6, #58b3b3);
}

.insights-action-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.insights-action-overview div {
  border: 1px solid #edf1f6;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.insights-action-overview span {
  color: var(--color-muted);
  font-size: 12px;
}

.insights-action-overview strong {
  color: var(--color-navy);
  font-size: 20px;
}

.insights-micro-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.insights-micro-kpis div {
  border: 1px solid #edf1f6;
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

.insights-micro-kpis span {
  color: var(--color-muted);
  font-size: 11px;
}

.insights-micro-kpis strong {
  color: #111827;
  font-size: 13px;
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(-110%);
    transition: transform 0.3s ease;
    will-change: transform;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .sidebar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .docs-grid {
    grid-template-columns: 1fr;
  }

  .insights-header {
    flex-direction: column;
  }

  .insights-filters {
    width: 100%;
  }

  .insights-filters label {
    flex: 1;
    min-width: 180px;
  }

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

  .insights-grid-two {
    grid-template-columns: 1fr;
  }

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

  .insights-micro-kpis {
    grid-template-columns: 1fr;
  }

  .insights-progress-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .apps-preview-apps-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title menu"
      "portal portal";
    row-gap: 12px;
  }

  .apps-preview-apps-head > h2 {
    grid-area: title;
  }

  .apps-preview-apps-head .apps-preview-menu-shell {
    grid-area: menu;
  }

  .apps-preview-open-portal {
    grid-area: portal;
  }
}

@media (min-width: 961px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle {
  display: none !important;
}

.app-shell > .sidebar,
.app-shell > .sidebar-backdrop {
  display: none !important;
}

@media (max-width: 640px) {
  .app-header {
    padding: 14px 16px;
  }

  .agent-top-nav {
    min-height: 44px;
    gap: 10px;
  }

  .agent-top-nav-scroll {
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
  }

  .agent-top-back,
  .agent-top-link {
    font-size: 12px;
  }

  .content {
    padding: 24px 16px 32px;
  }

  .content-card {
    padding: 24px;
  }

  .insights-kpi-grid {
    grid-template-columns: 1fr;
  }

  .insights-retention-kpis {
    grid-template-columns: 1fr;
  }

  .insights-action-overview {
    grid-template-columns: 1fr;
  }

  .insights-bar-row {
    grid-template-columns: 48px 1fr auto;
    font-size: 11px;
  }

  .insights-donut-wrap,
  .insights-donut {
    width: 190px;
    height: 190px;
  }
}

@media (max-width: 720px) {
  .select-grid {
    grid-template-columns: 1fr;
  }
}

.header-agent.is-hidden {
  display: none;
}

/* Billing */
.billing-page {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.billing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.billing-header-manage {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 9px 17px;
  border-radius: 10px;
  background: #071938;
  box-shadow: none;
  transition: transform 160ms ease, background-color 160ms ease;
}

.billing-header-manage:hover {
  background: #0c2752;
  transform: translateY(-1px);
}

.billing-header-manage:active {
  transform: translateY(0) scale(.98);
}

.billing-product-tabs {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding: 0 2px;
  border-bottom: 1px solid #d7e0eb;
  background: transparent;
}

.billing-product-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 8px 4px 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #68768a;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}

.billing-product-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #0b4d91;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.billing-product-tabs button:hover:not(.is-active) {
  color: #13233c;
}

.billing-product-tabs button:active {
  transform: scale(.99);
}

.billing-product-tabs button:focus-visible {
  outline: 3px solid rgba(44, 110, 232, .25);
  outline-offset: 2px;
}

.billing-product-tabs button.is-active {
  color: #0b2f5f;
}

.billing-product-tabs button.is-active::after {
  transform: scaleX(1);
}

.billing-product-tabs svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.billing-product-tabs small {
  padding: 4px 8px;
  border-radius: 7px;
  background: #fff4d7;
  color: #80500a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.billing-product-tabs button.is-active small {
  background: #fff4d7;
  color: #80500a;
}

.billing-product-panel {
  display: grid;
  min-width: 0;
  gap: 24px;
}

.billing-product-panel[hidden] {
  display: none;
}

.billing-product-panel .portal-billing-stack {
  margin-bottom: 0;
}

.billing-back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(4, 56, 115, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: #17324d;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.billing-back-button:hover {
  background: #f6f9fd;
  border-color: rgba(4, 56, 115, 0.24);
}

.billing-back-button svg {
  width: 16px;
  height: 16px;
}

.billing-header h1 {
  margin: 0;
  font-size: 44px;
  letter-spacing: -0.03em;
}

.billing-loading-state {
  display: grid;
  gap: 20px;
}

.billing-loading-panel {
  overflow: hidden;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
}

.billing-loading-heading {
  display: grid;
  gap: 12px;
}

.billing-loading-line,
.billing-loading-metrics > span,
.billing-loading-plan-row > span,
.billing-loading-addon-row > span {
  display: block;
  border-radius: 8px;
  background: linear-gradient(100deg, #e8edf4 30%, #f7f9fc 50%, #e8edf4 70%);
  background-size: 220% 100%;
  animation: billing-skeleton-shimmer 1.25s ease-in-out infinite;
}

.billing-loading-line {
  width: 100%;
  height: 13px;
}

.billing-loading-line.is-short {
  width: 112px;
}

.billing-loading-line.is-medium {
  width: min(62%, 420px);
}

.billing-loading-line.is-title {
  width: min(42%, 300px);
  height: 28px;
}

.billing-loading-panel-portal {
  min-height: 224px;
}

.billing-loading-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.billing-loading-metrics > span {
  height: 104px;
}

.billing-loading-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
}

.billing-loading-panel-plan,
.billing-loading-panel-usage {
  min-height: 248px;
}

.billing-loading-panel-plan,
.billing-loading-panel-usage {
  display: grid;
  align-content: start;
  gap: 14px;
}

.billing-loading-plan-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.billing-loading-plan-row > span {
  height: 112px;
}

.billing-loading-panel-addons {
  min-height: 190px;
}

.billing-loading-addon-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.billing-loading-addon-row > span {
  height: 96px;
}

@keyframes billing-skeleton-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .billing-loading-line,
  .billing-loading-metrics > span,
  .billing-loading-plan-row > span,
  .billing-loading-addon-row > span {
    animation: none;
  }
}

.billing-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: stretch;
}

.billing-main-grid.is-subscribed {
  grid-template-columns: 1fr;
  align-items: start;
}

.billing-main-grid.is-unsubscribed {
  grid-template-columns: 1fr;
}

.billing-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: stretch;
}

.billing-main-left {
  display: grid;
  gap: 18px;
}

.billing-plans-shell {
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: 22px;
}

.billing-plans-shell h2 {
  margin: 0;
  font-size: 36px;
  letter-spacing: -0.02em;
}

.billing-plans-shell > p {
  margin: 8px 0 0;
  color: var(--color-muted);
}

.billing-plans-shell-unsubscribed {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.billing-plans-shell-unsubscribed h2 {
  font-size: 52px;
  letter-spacing: -0.03em;
}

.billing-plans-head {
  display: grid;
  justify-content: start;
  gap: 10px;
}

.billing-plans-head p {
  max-width: 760px;
  font-size: 18px;
  margin: 8px 0 0;
}

.billing-interval-toggle {
  display: inline-flex;
  border: 1px solid #cfd8e5;
  border-radius: 999px;
  padding: 4px;
  background: #e7edf5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  width: fit-content;
  justify-self: start;
  align-self: start;
}

.billing-interval-button {
  border: 0;
  background: transparent;
  color: #5a6d88;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.billing-interval-button.is-active {
  background: #ffffff;
  color: #0b1426;
  box-shadow: 0 1px 2px rgba(6, 24, 44, 0.16);
}

.billing-interval-badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #2f66ff;
}

.billing-interval-button.is-active .billing-interval-badge {
  color: #2f66ff;
}

.billing-plans-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.billing-plans-shell-unsubscribed .billing-plans-grid {
  gap: 20px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.billing-plan-card {
  border: 0;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  display: grid;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(4, 56, 115, 0.08);
}

.billing-plans-shell-unsubscribed .billing-plan-card {
  position: relative;
  border-radius: 18px;
  padding: 22px 20px 20px;
  gap: 12px;
  margin-top: 0;
  height: 100%;
  align-content: start;
  grid-auto-rows: max-content;
}

.billing-plans-shell-unsubscribed .billing-plan-card h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.billing-plans-shell-unsubscribed .billing-plan-price {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.14);
  font-size: 40px;
  line-height: 1.05;
  min-height: 62px;
}

.billing-plan-note {
  margin: 0;
  color: #4f637f;
  font-size: 17px;
}

.billing-plan-save {
  margin: -4px 0 2px;
  font-size: 13px;
  color: #2f66ff;
  font-weight: 700;
}

.billing-plan-badge {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  background: #071938;
  color: #fff;
  border-radius: 999px;
  font-size: 22px;
  font-weight: 700;
  padding: 8px 24px;
  letter-spacing: 0;
}

.billing-plan-card-popular {
  box-shadow: 0 10px 24px rgba(4, 56, 115, 0.12);
}

.billing-plans-shell-unsubscribed .billing-plan-card-popular {
  box-shadow: 0 12px 28px rgba(74, 145, 240, 0.24);
}

.billing-plan-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: #7a8699;
  font-weight: 700;
}

.billing-plan-card h3 {
  margin: 0;
  font-size: 30px;
}

.billing-plan-price {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
}

.billing-plan-price span {
  font-size: 16px;
  color: #7a8699;
  margin-left: 4px;
}

.billing-plan-price [data-plan-amount] {
  font-size: inherit;
  color: #111827;
  font-weight: 700;
  margin-left: 0;
}

.billing-plan-price [data-plan-unit] {
  font-size: 16px;
  color: #6b7a90;
}

.billing-plan-card ul {
  margin: 0;
  padding-left: 18px;
  color: #364152;
  display: grid;
  gap: 6px;
}

.billing-plans-shell-unsubscribed .billing-plan-card ul {
  list-style: none;
  padding: 0;
  gap: 8px;
  font-size: 16px;
}

.billing-plans-shell-unsubscribed .billing-plan-card li {
  position: relative;
  padding-left: 20px;
}

.billing-plans-shell-unsubscribed .billing-plan-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #356de6;
  font-weight: 700;
}

.billing-plans-shell-unsubscribed .billing-plan-card .button {
  width: 100%;
  font-size: 16px;
  border-radius: 12px;
  padding: 10px 14px;
}

.billing-plans-shell-unsubscribed .billing-plan-card .button.button-primary {
  background: #4a91f0;
  box-shadow: none;
}

.billing-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
}

.billing-bottom-grid[hidden] {
  display: none;
}

.billing-security-card,
.billing-enterprise-card,
.billing-current-plan-card,
.billing-human-agents-plan-card,
.billing-usage-card,
.billing-addon-card,
.billing-activity {
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(4, 56, 115, 0.08);
}

.billing-security-card,
.billing-enterprise-card {
  padding: 20px;
}

.billing-security-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 18px;
}

.billing-security-copy {
  display: grid;
  gap: 10px;
}

.billing-security-card h3,
.billing-enterprise-card h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.billing-security-card p,
.billing-enterprise-card p {
  margin: 10px 0 0;
  color: #576273;
  line-height: 1.55;
}

.billing-enterprise-card {
  display: grid;
  align-content: start;
  gap: 16px;
  background: #032f63;
  color: #ffffff;
}

.billing-enterprise-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: none;
  color: #d7e5ff;
}

.billing-enterprise-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  width: 100%;
}

.billing-enterprise-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-weight: 700;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  background: transparent;
  border-radius: 0;
  padding: 0;
  width: 100%;
}

.billing-enterprise-cta i {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
}

.billing-security-image-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}

.billing-security-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.billing-security-visual {
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(143, 209, 255, 0.28), transparent 55%),
    linear-gradient(155deg, rgba(1, 9, 28, 0.75), rgba(6, 38, 83, 0.92));
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 209, 255, 0.35);
}

.billing-security-visual-ring {
  width: 66%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(143, 209, 255, 0.35);
  background: radial-gradient(circle at center, rgba(143, 209, 255, 0.16), rgba(2, 12, 33, 0.45));
  display: grid;
  place-items: center;
}

.billing-security-visual-ring i {
  width: 46%;
  height: 46%;
  color: #9adaff;
  stroke-width: 1.9px;
}

.billing-current-plan-card {
  padding: 24px 28px;
  display: grid;
  gap: 16px;
}

.billing-ai-cancellation-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid #efd59d;
  border-radius: 12px;
  background: #fff8e8;
  color: #71470a;
}

.billing-ai-cancellation-message > svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: 0 0 auto;
  color: #b8750c;
}

.billing-ai-cancellation-message > div {
  display: grid;
  gap: 3px;
}

.billing-ai-cancellation-message strong {
  color: #5f3a07;
  font-size: 14px;
}

.billing-ai-cancellation-message span {
  font-size: 14px;
  line-height: 1.5;
}

.billing-ai-cancellation-message button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #084d91;
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.billing-ai-cancellation-message button:hover {
  color: #063b70;
}

.billing-human-agents-plan-card {
  padding: 20px 22px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.billing-human-agents-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.billing-product-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.billing-product-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef6ff;
  color: #04427c;
  flex: 0 0 auto;
}

.billing-product-icon i {
  width: 20px;
  height: 20px;
  stroke-width: 2px;
}

.billing-human-agents-plan-card h2 {
  margin: 4px 0 0;
  color: var(--color-ink);
  font-size: 24px;
  letter-spacing: -0.01em;
}

.billing-human-agents-plan-card > p {
  max-width: 620px;
  margin: 0;
  color: #576273;
  font-size: 15px;
  line-height: 1.45;
}

.billing-human-agents-rate-card {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 160px;
  padding: 0 20px 0 0;
  border-right: 1px solid rgba(4, 56, 115, 0.12);
  background: transparent;
}

.billing-human-agents-rate-card span,
.billing-human-agents-rate-card small {
  color: #7a8699;
  font-size: 12px;
  font-weight: 700;
}

.billing-human-agents-rate-card strong {
  color: var(--color-ink);
  font-size: 28px;
  line-height: 1;
}

.billing-human-agents-seat-panel {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: stretch;
  padding: 16px 18px;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 10px;
  background: #f8fafc;
}

.billing-human-agents-seat-grid span,
.billing-human-agents-seat-foot span {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.billing-human-agents-seat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.billing-human-agents-seat-grid > div {
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 0 18px;
  border-right: 1px solid rgba(4, 56, 115, 0.12);
}

.billing-human-agents-seat-grid > div:last-child {
  border-right: 0;
}

.billing-human-agents-seat-grid strong {
  color: var(--color-ink);
  font-size: 22px;
  line-height: 1;
}

.billing-human-agents-seat-grid small {
  color: #7a8699;
  font-size: 12px;
}

.billing-human-agents-seat-foot {
  display: grid;
  justify-items: end;
  align-items: end;
  min-width: 138px;
}

.billing-current-plan-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.billing-current-plan-head h2 {
  margin: 8px 0 0;
  font-size: 52px;
  letter-spacing: -0.03em;
}

.billing-current-plan-card > p {
  margin: 0;
  color: #576273;
  max-width: 620px;
  font-size: 32px;
  line-height: 1.3;
}

.billing-status-pill {
  align-self: flex-start;
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
}

.billing-status-pill.is-inactive {
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
}

.billing-current-plan-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}

.billing-current-plan-foot strong {
  display: block;
  font-size: 42px;
  letter-spacing: -0.02em;
}

.billing-current-plan-foot small {
  color: #7a8699;
  font-size: 14px;
}

.billing-current-plan-actions {
  display: flex;
  gap: 10px;
}

.billing-owner-note {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.billing-plan-modal-card {
  width: min(1240px, 100%);
}

.billing-plan-modal-card .billing-plans-grid {
  margin-top: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
  justify-content: center;
}

.billing-plans-grid-modal .billing-plan-card {
  min-height: 100%;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 12px;
}

.billing-plans-grid-modal .billing-plan-card .button {
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 16px;
}

.billing-plans-grid-modal .billing-plan-card .button:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: transparent;
  border: 1px solid var(--color-border);
  color: #364152;
  box-shadow: none;
}

.billing-usage-card {
  background: #263247;
  color: #f8fafc;
  padding: 18px;
  display: grid;
  gap: 14px;
  box-shadow: 0 16px 34px rgba(1, 7, 16, 0.3);
}

.billing-human-agents-summary-card {
  padding: 18px;
  display: grid;
  gap: 14px;
  border: 0;
  border-radius: 18px;
  background: #263247;
  color: #f8fafc;
  box-shadow: 0 16px 34px rgba(38, 50, 71, 0.28);
}

.billing-usage-card h3 {
  margin: 0;
  font-size: 26px;
}

.billing-human-agents-summary-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
}

.billing-usage-item {
  display: grid;
  gap: 7px;
}

.billing-usage-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #c3d2ea;
}

.billing-usage-row strong {
  color: #fff;
}

.billing-usage-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.billing-usage-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f8fafc, #8fd1ff);
}

.billing-usage-item small {
  font-size: 12px;
  color: #91a4c0;
}

.billing-usage-kpi-list {
  display: grid;
  gap: 12px;
}

.billing-usage-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.billing-human-agents-summary-card .billing-usage-kpi {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.billing-usage-kpi:last-child {
  border-bottom: 0;
}

.billing-usage-kpi span {
  color: #d7e5ff;
  font-size: 15px;
}

.billing-human-agents-summary-card .billing-usage-kpi span {
  color: #d7e5ff;
  font-size: 13px;
}

.billing-usage-kpi strong {
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}

.billing-human-agents-summary-card .billing-usage-kpi strong {
  color: #ffffff;
  font-size: 15px;
  text-align: right;
}

.billing-section {
  display: grid;
  gap: 14px;
}

.billing-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.billing-section-head-stacked {
  display: grid;
  justify-content: start;
  gap: 4px;
}

.billing-section-head h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.billing-section-head p {
  margin: 0;
  color: #6b7280;
}

.billing-section-head a {
  color: #667388;
  font-weight: 700;
  font-size: 14px;
}

.billing-addon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.billing-addon-lock-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.billing-addon-grid.is-locked {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.billing-addon-card {
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  overflow: hidden;
}

.billing-addon-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.billing-addon-icon i {
  width: 26px;
  height: 26px;
  stroke-width: 2.2px;
}

.billing-addon-icon.is-blue {
  background: #eaf1fd;
  color: #2f69ee;
}

.billing-addon-icon.is-purple {
  background: #f5eefc;
  color: #8a3cec;
}

.billing-addon-icon.is-orange {
  background: #fcf5e9;
  color: #cc7a0a;
}

.billing-addon-icon.is-green {
  background: #e8f8f1;
  color: #13996b;
}

.billing-addon-card h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.billing-addon-card p {
  margin: 0;
  color: #6b7280;
  min-height: 88px;
  font-size: 17px;
  line-height: 1.45;
}

.billing-addon-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e4e9f1;
}

.billing-addon-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.billing-addon-price strong {
  font-size: 20px;
}

.billing-addon-price span {
  color: #7a8699;
  font-size: 14px;
}

.billing-addon-action-link {
  border: 0;
  background: transparent;
  color: #1f2428;
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}

.billing-addon-manage-bottom {
  margin: 10px -18px -14px;
  width: calc(100% + 36px);
  border: 0;
  background: #5b6574;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 16px;
  cursor: pointer;
  border-radius: 0 0 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.18s ease;
}

.billing-addon-manage-bottom:hover {
  background: #4e5866;
}

.billing-addon-add-btn {
  border: 0;
  border-radius: 4px;
  background: #020917;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
}

.billing-addon-toggle {
  position: relative;
  width: 52px;
  height: 30px;
  display: inline-flex;
  align-items: center;
}

.billing-addon-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.billing-addon-toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #020917;
}

.billing-addon-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 25px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(2, 9, 23, 0.25);
}

.billing-addon-table {
  margin-top: 8px;
  border-top: 1px solid #e4e9f1;
  padding-top: 10px;
  display: grid;
  gap: 6px;
}

.billing-addon-table-title {
  font-size: 12px;
  font-weight: 700;
  color: #5f6f86;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.billing-addon-table-head,
.billing-addon-table-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.billing-addon-table-head {
  font-size: 12px;
  font-weight: 700;
  color: #7a8699;
}

.billing-addon-table-row {
  font-size: 13px;
  color: #334155;
  padding: 4px 0;
  border-top: 1px solid #f1f4f8;
}

.billing-addon-table-row:first-of-type {
  border-top: 0;
}

.billing-addon-table-empty {
  font-size: 13px;
  color: #7a8699;
  padding: 4px 0 2px;
}

.billing-activity {
  min-height: 520px;
  padding: 24px;
}

.billing-activity-table {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(4, 56, 115, 0.08);
  transition: opacity 160ms ease;
}

.billing-activity-panel.is-updating .billing-activity-table {
  opacity: .52;
}

.billing-activity-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.8fr;
  gap: 18px;
  min-height: 52px;
  padding: 15px 18px;
  border-top: 1px solid rgba(4, 56, 115, 0.08);
  font-size: 15px;
}

.billing-activity-row:first-child {
  border-top: 0;
}

.billing-activity-row-head {
  background: #f8fafc;
  color: #667388;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.billing-activity-row .is-paid {
  color: #15803d;
  font-weight: 700;
}

.billing-activity-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.billing-activity-pager span {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

.billing-history-modal-card {
  width: min(1040px, 100%);
  max-height: min(86vh, 920px);
  overflow: hidden;
}

[data-billing-history-backdrop] {
  z-index: 70;
}

[data-billing-history-modal] {
  z-index: 75;
}

[data-billing-sync-backdrop] {
  z-index: 80;
}

[data-billing-sync-modal] {
  z-index: 85;
}

[data-billing-plan-confirm-backdrop] {
  z-index: 76;
}

[data-billing-plan-confirm-modal] {
  z-index: 79;
}

.billing-plan-confirm-modal-card {
  width: min(520px, 100%);
  gap: 14px;
}

.billing-plan-confirm-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid #d7dde8;
  border-radius: 12px;
  background: #f8fbff;
}

.billing-plan-confirm-amount span {
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.billing-plan-confirm-amount strong {
  color: #111827;
  font-size: 19px;
}

[data-billing-plan-error-backdrop] {
  z-index: 81;
}

[data-billing-plan-error-modal] {
  z-index: 86;
}

.billing-plan-error-modal-card {
  width: min(520px, 100%);
  gap: 12px;
}

.billing-plan-error-icon {
  width: 64px;
  height: 64px;
  margin: 2px auto 4px;
  border-radius: 999px;
  background: #fff1f2;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.billing-plan-error-icon i {
  width: 38px;
  height: 38px;
  stroke-width: 2.2;
}

.billing-sync-modal-card {
  width: min(480px, 100%);
  justify-items: center;
  text-align: center;
  gap: 10px;
}

.billing-sync-modal-card h2 {
  margin: 0;
  font-size: 26px;
}

.billing-sync-modal-card p {
  margin: 0;
  color: #64748b;
}

.billing-sync-spinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(4, 56, 115, 0.18);
  border-top-color: var(--color-navy);
  animation: billing-spin 0.9s linear infinite;
}

@keyframes billing-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.billing-history-modal-card .billing-activity-table {
  max-height: min(58vh, 560px);
  overflow-y: auto;
}

.billing-history-modal-card .billing-activity-row-head {
  position: sticky;
  top: 0;
  z-index: 2;
}

.addon-manage-modal-card {
  width: min(620px, 100%);
  max-height: min(90vh, 800px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.addon-manage-content {
  flex: 1;
  overflow-y: auto;
  display: grid;
  gap: 24px;
  padding: 24px 24px;
}

.addon-manage-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #f8fafc;
}

.addon-manage-info-compact {
  margin-bottom: 4px;
}

.addon-manage-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.addon-manage-icon i {
  width: 28px;
  height: 28px;
  stroke-width: 2.2px;
}

.addon-manage-icon.is-blue {
  background: #eaf1fd;
  color: #2f69ee;
}

.addon-manage-icon.is-purple {
  background: #f5eefc;
  color: #8a3cec;
}

.addon-manage-icon.is-orange {
  background: #fcf5e9;
  color: #cc7a0a;
}

.addon-manage-icon.is-green {
  background: #e8f8f1;
  color: #13996b;
}

.addon-manage-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.addon-manage-price {
  font-weight: 600;
  font-size: 16px;
  color: #1f2428;
}

.addon-manage-details-pricing {
  width: 100%;
}

.extra-agents-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.extra-agents-price-amount {
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.extra-agents-price-unit {
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}

.extra-agents-price-compare {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 17px;
  font-weight: 700;
}

.extra-agents-price-compare[hidden] {
  display: none !important;
}

.extra-agents-price-compare-value {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.95;
}

.addon-manage-section {
  display: grid;
  gap: 12px;
}

.addon-manage-section h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2428;
}

.addon-manage-table {
  display: grid;
  gap: 0;
  border: 1px solid #e4e9f1;
  border-radius: 8px;
  overflow: hidden;
}

.addon-manage-table-header {
  background: #f8fafc;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 12px;
  color: #667388;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #e4e9f1;
}

.addon-manage-table-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px solid #f1f4f8;
  align-items: center;
}

.addon-manage-table-row:last-child {
  border-bottom: 0;
}

.addon-manage-table-row-extra-agents {
  grid-template-columns: 96px 120px 1fr;
}

.addon-manage-table-row-extra-agents span:nth-child(2) {
  text-align: left;
}

.addon-manage-col-action {
  display: flex;
  justify-content: flex-end;
}

.addon-manage-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: #7a8699;
  text-align: center;
}

.addon-manage-remove-btn {
  border: 0;
  background: transparent;
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  transition: color 0.2s;
}

.addon-manage-remove-btn:hover {
  color: #991b1b;
}

.addon-manage-toggle-section {
  display: grid;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e4e9f1;
}

.addon-manage-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  color: #1f2428;
  font-weight: 500;
}

.addon-manage-toggle {
  position: relative;
  width: 52px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.addon-manage-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.addon-manage-toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #020917;
  transition: background 0.2s;
}

.addon-manage-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(2, 9, 23, 0.25);
  transition: left 0.2s;
}

.addon-manage-toggle input:checked ~ .addon-manage-toggle-track {
  background: #13996b;
}

.addon-manage-toggle input:checked ~ .addon-manage-toggle-track::after {
  left: 25px;
}

.addon-manage-threshold {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e4e9f1;
}

.addon-manage-threshold-extra-agents {
  gap: 14px;
}

.addon-inline-cta {
  width: 100%;
  justify-content: center;
}

.billing-interval-button-switch-only {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}

.addon-manage-threshold-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.addon-manage-threshold-input label {
  font-size: 14px;
  color: #334155;
  font-weight: 500;
  flex: 1;
}

.addon-manage-threshold-input input {
  width: 80px;
  padding: 8px 12px;
  border: 1px solid #d7dce2;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2428;
}

.addon-manage-threshold-input select {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #d7dce2;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2428;
  background: #fff;
}

.addon-manage-threshold-input span {
  font-size: 14px;
  color: #7a8699;
  min-width: 50px;
}

.addon-help-inline {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

.addon-manage-note {
  margin: 0;
  font-size: 13px;
  color: #5b687b;
  line-height: 1.5;
}

.addon-consent-check {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.addon-consent-check input[type="checkbox"] {
  margin-top: 3px;
}

.addon-manage-custom-domain {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e4e9f1;
}

.addon-manage-custom-domain label {
  font-size: 14px;
  color: #334155;
  font-weight: 500;
  display: block;
}

.addon-manage-domain-input-group {
  display: flex;
  gap: 8px;
}

.addon-manage-domain-input-group input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d7dce2;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2428;
}

.addon-manage-domain-input-group .button {
  padding: 8px 16px;
  font-size: 14px;
}

.addon-manage-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #e4e9f1;
  background: #f8fafc;
}

@media (max-width: 1280px) {
  .billing-main-grid,
  .billing-product-row {
    grid-template-columns: 1fr;
  }

  .billing-loading-columns {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 960px) {
  .billing-page {
    gap: 16px;
  }

  .billing-header {
    gap: 18px;
  }

  .billing-header h1 {
    font-size: 34px;
  }

  .billing-loading-panel {
    padding: 18px;
  }

  .billing-loading-metrics,
  .billing-loading-addon-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-loading-plan-row {
    grid-template-columns: 1fr;
  }

  .billing-plans-shell h2 {
    font-size: 28px;
  }

  .billing-plans-shell-unsubscribed h2 {
    font-size: 34px;
  }

  .billing-plans-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-plans-head p {
    font-size: 16px;
  }

  .billing-plans-grid {
    grid-template-columns: 1fr;
  }

  .billing-bottom-grid {
    grid-template-columns: 1fr;
  }

  .billing-security-card {
    grid-template-columns: 1fr;
  }

  .billing-security-image-wrap {
    max-width: 280px;
  }

  .billing-enterprise-card p {
    font-size: 16px;
    max-width: none;
  }

  .billing-enterprise-cta {
    font-size: 18px;
  }

  .billing-current-plan-head h2 {
    font-size: 38px;
  }

  .billing-human-agents-plan-card h2 {
    font-size: 22px;
  }

  .billing-human-agents-plan-card > p {
    font-size: 16px;
  }

  .billing-human-agents-seat-panel {
    grid-template-columns: 1fr;
  }

  .billing-human-agents-rate-card {
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(4, 56, 115, 0.12);
  }

  .billing-human-agents-seat-grid {
    grid-template-columns: 1fr;
  }

  .billing-human-agents-seat-grid > div {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(4, 56, 115, 0.12);
  }

  .billing-human-agents-seat-grid > div:last-child {
    border-bottom: 0;
  }

  .billing-human-agents-seat-foot {
    justify-items: start;
    align-items: start;
  }

  .billing-current-plan-card > p {
    font-size: 22px;
  }

  .billing-current-plan-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-addon-grid {
    grid-template-columns: 1fr;
  }

  .billing-addon-card h3 {
    font-size: 28px;
  }

  .billing-addon-card p {
    min-height: 0;
    font-size: 16px;
  }

  .billing-activity-row {
    grid-template-columns: 1fr 1fr;
  }
}

@container agent-deployment-split (max-width: 780px) {
  .deployment-pane-tabs {
    position: sticky;
    z-index: 5;
    top: 0;
    min-height: 49px;
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(4, 56, 115, 0.12);
    background: rgba(255, 255, 255, 0.97);
  }

  .deployment-pane-tabs button {
    position: relative;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #718197;
    font: inherit;
    font-size: 12.75px;
    font-weight: 680;
    cursor: pointer;
  }

  .deployment-pane-tabs button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: #164e82;
    opacity: 0;
    transform: scaleX(0.55);
    transition: opacity 140ms ease, transform 140ms ease;
    content: "";
  }

  .deployment-pane-tabs button:hover {
    color: #294967;
  }

  .deployment-pane-tabs button.is-active {
    color: #102b4c;
  }

  .deployment-pane-tabs button.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .deployment-pane-tabs button:focus-visible {
    outline: 2px solid rgba(22, 78, 130, 0.35);
    outline-offset: -4px;
  }

  .web-embed-page .web-embed-shell {
    display: block;
    height: calc(100vh - var(--app-chrome-height) - 81px);
    min-height: 600px;
    overflow: hidden;
  }

  .web-embed-page .web-embed-menu {
    width: min(620px, 100%);
    height: 100%;
    margin: 0 auto;
    padding: 24px clamp(20px, 5vw, 38px) 38px;
    border-right: 0;
    overflow-y: auto;
  }

  .web-embed-page .web-embed-board {
    width: 100%;
    height: 100%;
    min-height: 600px;
  }

  .web-embed-page[data-deployment-pane="customization"] [data-deployment-pane-panel="preview"],
  .web-embed-page[data-deployment-pane="preview"] [data-deployment-pane-panel="customization"] {
    display: none;
  }

  .web-embed-page[data-deployment-pane="preview"] .web-embed-board {
    display: grid;
  }

  .chat-page-deploy-page[data-deployment-pane="preview"] .chat-page-deploy-board {
    display: block;
  }

  .web-embed-page .web-embed-preview-frame {
    max-height: calc(100% - 48px);
  }

  .chat-page-deploy-page .chat-page-deploy-preview-frame,
  .chat-page-deploy-page .chat-page-deploy-preview-frame iframe {
    height: calc(100vh - var(--app-chrome-height) - 81px);
    min-height: 600px;
  }
}

@container agent-deployment-split (max-width: 480px) {
  .deployment-pane-tabs {
    justify-content: space-between;
    gap: 16px;
    padding: 0 18px;
  }

  .deployment-pane-tabs button {
    flex: 1 1 0;
  }
}

@media (max-width: 700px) {
  .billing-header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .billing-header-manage {
    width: 100%;
  }

  .billing-product-tabs {
    gap: 0;
    padding: 0;
  }

  .billing-product-tabs button {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: auto auto;
    gap: 5px 8px;
    min-height: 58px;
    padding: 8px 10px 12px;
  }

  .billing-product-tabs button small {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

.insights-page {
  max-width: 1320px;
  margin: 0 auto;
  gap: 18px;
}

.insights-builder-panel,
.insights-report-shell {
  background: #ffffff;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.insights-builder-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 22px;
  align-items: end;
  padding: 22px;
}

.insights-eyebrow {
  display: inline-flex;
  color: #064483;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.insights-builder-copy h1 {
  margin: 4px 0 6px;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.15;
}

.insights-builder-copy p,
.insights-panel-head p,
.insights-report-head p {
  margin: 0;
  color: #617086;
  font-size: 13px;
}

.insights-builder-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.insights-control {
  display: grid;
  gap: 7px;
}

.insights-control > span {
  color: #617086;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insights-periods {
  display: inline-grid;
  grid-template-columns: repeat(5, 72px);
  height: 42px;
  padding: 3px;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #f5f8fc;
}

.insights-periods button,
.insights-select > button,
.insights-select-menu button {
  border: 0;
  background: transparent;
  color: #17324d;
  font: inherit;
}

.insights-periods button {
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.insights-periods button.is-active {
  background: #ffffff;
  color: #053f7d;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.09);
}

.insights-select {
  position: relative;
  width: 220px;
}

.insights-date-range {
  display: grid;
  grid-template-columns: repeat(2, 146px);
  gap: 10px;
}

.insights-date-field {
  display: grid;
  gap: 7px;
}

.insights-date-field span {
  color: #617086;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insights-date-field input {
  width: 100%;
  height: 42px;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #ffffff;
  color: #17324d;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.insights-date-field input:focus {
  border-color: rgba(6, 68, 131, 0.42);
  box-shadow: 0 0 0 3px rgba(6, 68, 131, 0.08);
  outline: none;
}

.insights-select > button {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.insights-select > button svg,
.insights-generate svg,
.insights-report-toolbar svg {
  width: 16px;
  height: 16px;
}

.insights-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  padding: 6px;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

.insights-select.is-open .insights-select-menu {
  display: grid;
  gap: 2px;
}

.insights-select-menu button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.insights-select-menu button:hover,
.insights-select-menu button.is-selected {
  background: #edf4fb;
  color: #064483;
}

.insights-generate {
  height: 42px;
  gap: 8px;
}

.button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: insights-spin 0.8s linear infinite;
}

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

.insights-error {
  grid-column: 1 / -1;
  margin: 0;
  color: #b42318;
  font-size: 13px;
}

.insights-report-shell {
  overflow: hidden;
}

.insights-report-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #d7e0ec;
  background: #f6f9fd;
}

.insights-report-toolbar > div:first-child {
  display: grid;
  gap: 2px;
}

.insights-report-toolbar span {
  color: #617086;
  font-size: 12px;
}

.insights-report-toolbar strong {
  color: #0f172a;
  font-size: 14px;
}

.insights-report-toolbar > div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.insights-report {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: #eef2f7;
}

.insights-report-head,
.insights-panel,
.insights-metric {
  background: #ffffff;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
}

.insights-report-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
}

.insights-report-head h1 {
  margin: 3px 0 5px;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.1;
}

.insights-generated {
  display: grid;
  gap: 3px;
  align-content: center;
  text-align: right;
}

.insights-generated span,
.insights-generated strong {
  white-space: nowrap;
}

.insights-generated span {
  color: #617086;
  font-size: 12px;
}

.insights-generated strong {
  color: #0f172a;
  font-size: 13px;
}

.insights-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.insights-metric {
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 14px;
}

.insights-metric span,
.insights-metric small {
  color: #617086;
  font-size: 12px;
}

.insights-metric span {
  font-weight: 750;
}

.insights-metric strong {
  color: #0f172a;
  font-size: 24px;
  line-height: 1;
}

.insights-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 14px;
}

.insights-report-grid:has(.insights-panel:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insights-panel.is-full {
  grid-column: 1 / -1;
}

.insights-panel {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 16px;
}

.insights-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.insights-panel-head h2 {
  margin: 0 0 4px;
  color: #132238;
  font-size: 16px;
  line-height: 1.2;
}

.insights-panel-head > strong {
  color: #064483;
  font-size: 13px;
  white-space: nowrap;
}

.insights-chart-line {
  width: 100%;
  height: 280px;
  display: block;
}

.insights-chart-grid {
  stroke: #dce5f0;
  stroke-width: 1;
}

.insights-chart-grid.is-faint {
  stroke: #edf2f7;
}

.insights-chart-label {
  fill: #66758a;
  font-size: 10px;
}

.insights-chart-area {
  fill: rgba(6, 68, 131, 0.12);
}

.insights-chart-stroke {
  fill: none;
  stroke: #064483;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.insights-empty {
  display: grid;
  min-height: 96px;
  place-items: center;
  color: #617086;
  font-size: 13px;
  border: 1px dashed #ccd7e5;
  border-radius: 8px;
  background: #f8fafc;
}

.insights-channel-list,
.insights-country-list {
  display: grid;
}

.insights-channel-row,
.insights-country-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border-bottom: 1px solid #edf2f7;
}

.insights-channel-row:last-child,
.insights-country-row:last-child {
  border-bottom: 0;
}

.insights-channel-row {
  grid-template-columns: 34px 1fr auto;
}

.insights-channel-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #f6f9fd;
  color: #064483;
}

.insights-channel-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.insights-channel-icon svg {
  width: 17px;
  height: 17px;
}

.insights-channel-row div {
  display: grid;
  gap: 2px;
}

.insights-channel-row strong,
.insights-country-row strong {
  color: #132238;
  font-size: 13px;
}

.insights-channel-row small,
.insights-country-row small {
  color: #617086;
  font-size: 12px;
}

.insights-channel-row em,
.insights-country-row em {
  color: #0f172a;
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}

.insights-split-kpis {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
}

.insights-split-kpis div,
.insights-action-card {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid #e2e9f2;
  border-radius: 8px;
  background: #f8fafc;
}

.insights-split-kpis div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.insights-split-kpis span,
.insights-action-card span {
  color: #617086;
  font-size: 12px;
}

.insights-split-kpis strong,
.insights-action-card strong {
  color: #0f172a;
}

.insights-split-kpis strong {
  font-size: 22px;
  text-align: right;
}

.insights-action-card strong {
  font-size: 34px;
  line-height: 1;
}

.insights-country-row {
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
}

.insights-country-row > span {
  color: #617086;
  font-size: 12px;
}

.insights-bars-list {
  display: grid;
  gap: 8px;
}

.insights-bars-list.is-months {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.insights-bar-line {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 24px;
}

.insights-bars-list.is-compact .insights-bar-line {
  grid-template-columns: minmax(118px, 0.9fr) minmax(120px, 1.1fr) auto;
}

.insights-bars-list.is-compact .insights-bar-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insights-bar-line span {
  color: #526277;
  font-size: 12px;
}

.insights-bar-line div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
}

.insights-bar-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #13866f;
}

.insights-bar-line strong {
  color: #132238;
  font-size: 12px;
}

.insights-hour-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px;
}

.insights-hour-cell {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 9px 7px;
  border: 1px solid rgba(6, 68, 131, 0.18);
  border-radius: 8px;
  background: rgba(6, 68, 131, calc(0.06 + var(--heat) * 0.28));
}

.insights-hour-cell span {
  color: #214261;
  font-size: 11px;
  font-weight: 750;
}

.insights-hour-cell strong {
  color: #0f172a;
  font-size: 13px;
}

@media print {
  .insights-builder,
  .insights-report-toolbar,
  .sidebar,
  .topbar {
    display: none !important;
  }

  .insights-page,
  .workspace-page {
    max-width: none;
    margin: 0;
  }

  .insights-report {
    background: #ffffff;
    padding: 0;
  }

  .insights-panel,
  .insights-report-head,
  .insights-metric {
    break-inside: avoid;
  }
}

@media (max-width: 1180px) {
  .insights-builder-panel {
    grid-template-columns: 1fr;
  }

  .insights-report-head,
  .insights-report-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .insights-builder-controls,
  .insights-report-toolbar > div:last-child {
    justify-content: flex-start;
  }

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

  .insights-report-grid,
  .insights-report-grid:has(.insights-panel:nth-child(3)) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .insights-builder-panel,
  .insights-report {
    padding: 12px;
  }

  .insights-periods {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
    width: 100%;
  }

  .insights-select {
    width: 100%;
  }

  .insights-date-range {
    grid-template-columns: 1fr;
  }

  .insights-builder-controls {
    display: grid;
  }

  .insights-metrics-grid,
  .insights-split-kpis,
  .insights-bars-list.is-months {
    grid-template-columns: 1fr;
  }

  .insights-hour-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.portal-billing-shell {
  margin-bottom: 24px;
  border: 1px solid #d8e1ec;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(18, 36, 61, 0.055);
}

.portal-billing-stack {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.portal-billing-stack > .portal-billing-shell {
  margin-bottom: 0;
}

.portal-billing-shell .button {
  min-height: 40px;
  border-radius: 10px;
  padding: 9px 16px;
  box-shadow: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.portal-billing-shell .button:hover {
  transform: translateY(-1px);
}

.portal-billing-shell .button:active {
  transform: translateY(0);
}

.portal-billing-shell .button:focus-visible,
.portal-seat-stepper button:focus-visible,
.portal-seat-stepper input:focus-visible,
.portal-topup-bundles button:focus-visible,
.portal-modal-close:focus-visible {
  outline: 3px solid rgba(45, 111, 229, 0.22);
  outline-offset: 2px;
}

.portal-billing-shell.is-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(450px, 0.88fr);
  background: #0f1d33;
  color: #fff;
}

.portal-billing-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 42px 42px;
}

.portal-billing-intro .billing-plan-label {
  color: #79a6ff;
}

.portal-billing-intro h2,
.portal-billing-head h2 {
  margin: 7px 0 10px;
  font-size: 28px;
  line-height: 1.15;
}

.portal-billing-intro p {
  max-width: 670px;
  margin: 0;
  color: #bdc8d8;
  font-size: 15px;
  line-height: 1.65;
}

.portal-billing-intro ul {
  display: grid;
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: #e6edf7;
  font-size: 14px;
}

.portal-billing-intro li::before {
  content: "✓";
  margin-right: 10px;
  color: #75a3ff;
  font-weight: 800;
}

.portal-billing-checkout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 30px 30px;
  background: #f5f8fc;
  color: #101d31;
}

.portal-billing-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: #e9eef5;
}

.portal-billing-toggle button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #637086;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.portal-billing-toggle button.is-active {
  background: #fff;
  color: #101d31;
  box-shadow: 0 2px 8px rgba(18, 36, 61, 0.1);
}

.portal-billing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.portal-billing-price strong {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.portal-billing-price span,
.portal-billing-checkout > p {
  color: #69778b;
}

.portal-billing-purchase-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-top: 24px;
}

.portal-billing-checkout > p {
  margin: 10px 0 0;
  font-size: 13px;
}

.portal-billing-checkout > .button {
  width: 100%;
  margin-top: 14px;
}

.portal-checkout-trial-choice,
.portal-activate-trial {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid #d7e1ee;
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.portal-checkout-trial-choice {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fff;
}

.portal-checkout-trial-choice:has(input:checked),
.portal-activate-trial:has(input:checked) {
  border-color: #76a2ed;
  background: #f1f6ff;
}

.portal-checkout-trial-choice input,
.portal-activate-trial input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: #175fc7;
}

.portal-checkout-trial-choice > span,
.portal-activate-trial > span {
  display: grid;
  gap: 3px;
}

.portal-checkout-trial-choice strong,
.portal-activate-trial strong {
  color: #1a2940;
  font-size: 13px;
}

.portal-checkout-trial-choice small,
.portal-activate-trial small {
  color: #6c7a8e;
  font-size: 11.5px;
  line-height: 1.45;
}

.portal-checkout-payment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 11px;
  background: #e8edf4;
}

.portal-checkout-payment-summary > span {
  display: grid;
  gap: 2px;
}

.portal-checkout-payment-summary small {
  color: #6b788b;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.portal-checkout-payment-summary strong {
  color: #101d31;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.portal-checkout-payment-summary p {
  max-width: 190px;
  margin: 0;
  color: #5d6b80;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: right;
}

.portal-seat-stepper {
  display: grid;
  grid-template-columns: 42px 86px 42px auto;
  align-items: center;
  gap: 0;
  width: max-content;
  border: 1px solid #d5deea;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.portal-seat-stepper button,
.portal-seat-stepper input {
  height: 42px;
  border: 0;
  border-right: 1px solid #e1e7ef;
  background: #fff;
  color: #132039;
  text-align: center;
  font: inherit;
  font-weight: 750;
}

.portal-seat-stepper button {
  cursor: pointer;
  font-size: 19px;
}

.portal-seat-stepper button[aria-disabled="true"] {
  background: #f4f6f9;
  color: #9aa5b5;
  cursor: not-allowed;
}

.portal-seat-stepper input {
  width: 86px;
  appearance: textfield;
}

.portal-seat-stepper > span {
  padding: 0 14px;
  color: #66748a;
  font-size: 13px;
}

.portal-billing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid #e5eaf1;
}

.portal-billing-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.portal-billing-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.portal-billing-head-actions .billing-status-pill {
  align-self: center;
}

.portal-billing-head-actions .button {
  min-height: 36px;
  padding: 7px 14px;
}

.portal-billing-head.has-scheduled-cancellation {
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(320px, 1fr) auto;
  gap: 24px;
}

.portal-cancellation-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  color: #80500a;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.portal-cancellation-message svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #b8750c;
}

.portal-cancellation-message button,
.portal-seat-cancellation-notice button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #084d91;
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.portal-cancellation-message button:hover,
.portal-seat-cancellation-notice button:hover {
  color: #063b70;
}

.portal-billing-pending {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 18px 24px 0;
  padding: 14px 16px;
  border: 1px solid #c9daf8;
  border-radius: 11px;
  background: #eef5ff;
  color: #19345e;
}

.portal-billing-pending svg {
  width: 20px;
  color: #2c6ee8;
}

.portal-billing-pending div {
  display: grid;
  gap: 3px;
}

.portal-billing-pending span {
  color: #5a6c86;
  font-size: 13px;
}

.portal-billing-overview {
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(0, 3.15fr);
}

.portal-billing-seat-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  border-right: 1px solid #e5eaf1;
  background: #fbfcfe;
}

.portal-billing-seat-summary > span,
.portal-billing-metrics {
  color: #67758a;
}

.portal-billing-seat-summary > span {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.portal-billing-seat-summary > strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 5px;
  color: #101d31;
  font-weight: 600;
}

.portal-billing-seat-summary > strong b {
  font-size: 37px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.portal-billing-seat-summary > strong small {
  color: #657287;
  font-size: 13px;
  font-weight: 650;
}

.portal-seat-occupancy {
  height: 5px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4eaf2;
}

.portal-seat-occupancy span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2d6fe5;
}

.portal-billing-seat-summary p {
  margin: 8px 0 0;
  color: #657287;
  font-size: 13px;
}

.portal-billing-seat-summary p b {
  color: #23324a;
  font-weight: 750;
}

.portal-billing-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-billing-metrics.is-subscription {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-billing-metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 22px 20px;
  border-right: 1px solid #e5eaf1;
}

.portal-billing-metrics > div:last-child { border-right: 0; }
.portal-billing-metrics span { color: #67758a; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.portal-billing-metrics strong { color: #101d31; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.2; }
.portal-billing-metrics small { color: #718096; font-size: 12.5px; line-height: 1.45; }

.portal-billing-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 24px;
  border-top: 1px solid #e5eaf1;
  background: #f8fafc;
}

.portal-billing-actions > p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #657287;
  font-size: 12.5px;
  line-height: 1.45;
}

.portal-billing-actions > p svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #356fca;
}

.portal-billing-actions > div,
.portal-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

.portal-billing-actions.is-trial {
  justify-content: flex-end;
}

.portal-billing-actions.is-trial > p {
  margin-right: auto;
}

.portal-copilot-card {
  overflow: hidden;
  border: 1px solid #d8e1ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 36, 61, 0.045);
}

.portal-copilot-card .button {
  min-height: 40px;
  border-radius: 10px;
  padding: 9px 16px;
  box-shadow: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.portal-copilot-card .button:hover {
  transform: translateY(-1px);
}

.portal-copilot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5eaf1;
}

.portal-copilot-head h2 {
  margin: 0;
  color: #101d31;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.portal-copilot-head .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.portal-copilot-head .button svg {
  width: 16px;
  height: 16px;
}

.billing-product-icon.is-copilot {
  background: #f0f4ff;
  color: #2d64c8;
}

.portal-copilot-overview {
  display: grid;
  grid-template-columns: minmax(230px, .95fr) minmax(0, 3.05fr);
}

.portal-copilot-allowance {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  border-right: 1px solid #e5eaf1;
  background: #fbfcfe;
}

.portal-copilot-allowance > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.portal-copilot-allowance span,
.portal-copilot-metrics span {
  color: #67758a;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.portal-copilot-allowance strong {
  color: #101d31;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.portal-copilot-progress {
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4eaf2;
}

.portal-copilot-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2d6fe5;
}

.portal-copilot-allowance p {
  margin: 8px 0 0;
  color: #657287;
  font-size: 12.5px;
}

.portal-copilot-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-copilot-metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 22px 20px;
  border-right: 1px solid #e5eaf1;
}

.portal-copilot-metrics > div:last-child {
  border-right: 0;
}

.portal-copilot-metrics strong {
  color: #101d31;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.portal-copilot-metrics small {
  color: #718096;
  font-size: 12.5px;
}

.portal-copilot-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-top: 1px solid #e5eaf1;
  background: #f8fafc;
  color: #657287;
  font-size: 12.5px;
  line-height: 1.45;
}

.portal-copilot-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #356fca;
}

.portal-seats-modal-card {
  width: min(600px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 40px));
  overflow: auto;
}

.portal-topup-modal-card {
  width: min(740px, calc(100vw - 32px));
  overflow: hidden;
}

.portal-skip-trial-modal-card {
  width: min(560px, calc(100vw - 32px));
  overflow: hidden;
}

.portal-seats-modal-card,
.portal-topup-modal-card,
.portal-skip-trial-modal-card {
  display: block;
  padding: 0;
  border: 1px solid #d8e1ec;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 29, 51, 0.22);
}

.modal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px 22px;
}

.modal-card-head > div {
  min-width: 0;
}

.modal-card-head h2 {
  margin: 0;
  color: #101d31;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.modal-card-head p {
  max-width: 490px;
  margin: 8px 0 0;
  color: #657287;
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.portal-modal-close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid #d8e1ec;
  border-radius: 10px;
  background: #fff;
  color: #23324a;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.portal-modal-close:hover {
  border-color: #bcc9d9;
  background: #f5f7fa;
}

.portal-modal-close:active {
  transform: scale(.96);
}

.portal-modal-close svg {
  width: 18px;
  height: 18px;
}

.portal-seat-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 28px;
  padding: 16px 18px;
  border: 1px solid #dce4ee;
  border-radius: 12px;
  background: #f8fafc;
}

.portal-seat-cancellation-notice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  margin: 0 28px 14px;
  padding: 13px 15px;
  border: 1px solid #ead4a7;
  border-radius: 11px;
  background: #fff9ec;
  color: #5f4519;
}

.portal-seat-cancellation-notice svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #b8750c;
}

.portal-seat-cancellation-notice > div {
  display: grid;
  gap: 3px;
}

.portal-seat-cancellation-notice strong {
  color: #49340f;
  font-size: 13px;
}

.portal-seat-cancellation-notice span {
  font-size: 12.5px;
  line-height: 1.45;
}

.portal-seat-control-copy,
.portal-topup-quantity-row > span {
  display: grid;
  gap: 3px;
}

.portal-seat-control-copy strong,
.portal-topup-quantity-row > span strong {
  color: #223149;
  font-size: 13px;
}

.portal-seat-control-copy span,
.portal-topup-quantity-row > span small {
  color: #728096;
  font-size: 11.5px;
}

.portal-topup-bundles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 28px 0;
}

.portal-topup-bundles button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
  padding: 16px 17px;
  border: 1px solid #dce4ee;
  border-radius: 12px;
  background: #fff;
  color: #17243a;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.portal-topup-bundles button:hover {
  border-color: #b9c7d8;
  transform: translateY(-1px);
}

.portal-topup-bundles button.is-active {
  border-color: #2d6fe5;
  background: #f3f7ff;
  box-shadow: inset 3px 0 0 #2d6fe5;
}

.portal-topup-bundles button > span {
  display: grid;
  gap: 4px;
}

.portal-topup-bundles button strong {
  display: grid;
  gap: 1px;
  font-size: 14px;
  line-height: 1.2;
}

.portal-topup-bundles button small {
  color: #728096;
  font-size: 11.5px;
}

.portal-topup-bundles button b {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.portal-topup-quantity-row,
.portal-topup-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.portal-topup-quantity-row {
  margin: 20px 28px 0;
  padding: 17px 0;
  border-top: 1px solid #e4e9f0;
  border-bottom: 1px solid #e4e9f0;
}

.portal-topup-total {
  margin: 18px 28px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: #101e34;
  color: #fff;
}

.portal-topup-total > span {
  display: grid;
  gap: 3px;
}

.portal-topup-total > span:last-child {
  justify-items: end;
}

.portal-topup-total strong {
  color: #fff;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.portal-topup-total small {
  color: #aebbd0;
  font-size: 11px;
}

.portal-seat-change-summary {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 10px;
  margin: 12px 28px 0;
  padding: 13px 15px;
  border-radius: 11px;
  background: #edf4ff;
  color: #3f526e;
  font-size: 12.5px;
  line-height: 1.5;
}

.portal-seat-change-summary::before {
  content: "i";
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  background: #2d6fe5;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: Georgia, serif;
}

.portal-seat-price-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 28px 0;
  overflow: hidden;
  border: 1px solid #dce4ee;
  border-radius: 12px;
  background: #fff;
}

.portal-seat-price-preview > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 15px 16px;
}

.portal-seat-price-preview > div + div {
  border-left: 1px solid #dce4ee;
  background: #f8fafc;
}

.portal-seat-price-preview span {
  color: #6d7b90;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.portal-seat-price-preview > div > strong {
  color: #101d31;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.portal-seat-price-preview > div > strong small {
  margin-left: 4px;
  color: #5f6f84;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.portal-seat-price-preview > div > small {
  overflow: hidden;
  color: #728096;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
}

.portal-seat-price-preview.is-loading strong,
.portal-seat-price-preview.is-loading > div > small {
  color: #8490a2;
}

.portal-seat-price-preview.is-error > div:first-child {
  background: #fff6f5;
}

.portal-seat-price-preview.is-error > div:first-child strong,
.portal-seat-price-preview.is-error > div:first-child > small {
  color: #a62920;
}

.portal-skip-trial-summary {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 28px;
  padding: 16px;
  border: 1px solid #d7e3f3;
  border-radius: 12px;
  background: #f3f7fd;
}

.portal-skip-trial-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: #dfeaff;
  color: #245fbe;
}

.portal-skip-trial-icon svg {
  width: 19px;
  height: 19px;
}

.portal-skip-trial-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portal-skip-trial-summary strong {
  color: #17263d;
  font-size: 13.5px;
}

.portal-skip-trial-summary > div > span {
  color: #62728a;
  font-size: 12.5px;
  line-height: 1.5;
}

.portal-skip-trial-price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 28px 0;
  overflow: hidden;
  border: 1px solid #dce4ee;
  border-radius: 12px;
  background: #fff;
}

.portal-skip-trial-price > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px;
}

.portal-skip-trial-price > div + div {
  border-left: 1px solid #dce4ee;
  background: #f8fafc;
}

.portal-skip-trial-price span {
  color: #6d7b90;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.portal-skip-trial-price > div > strong {
  color: #101d31;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.portal-skip-trial-price > div > strong small {
  margin-left: 4px;
  color: #5f6f84;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.portal-skip-trial-price > div > small {
  color: #728096;
  font-size: 11px;
  line-height: 1.4;
}

.portal-skip-trial-price.is-loading strong,
.portal-skip-trial-price.is-loading > div > small {
  color: #8490a2;
}

.portal-skip-trial-price.is-error > div:first-child {
  background: #fff6f5;
}

.portal-skip-trial-price.is-error > div:first-child strong,
.portal-skip-trial-price.is-error > div:first-child > small {
  color: #a62920;
}

.portal-activate-trial {
  margin: 12px 28px 0;
  padding: 12px 14px;
  background: #fff;
}

.portal-seat-selection {
  margin: 18px 28px 0;
  padding-top: 17px;
  border-top: 1px solid #e2e8f0;
}

.portal-seat-selection-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.portal-seat-selection-head span,
.portal-seat-selection > p {
  color: #6f7d90;
  font-size: 12px;
}

.portal-seat-user-list {
  display: grid;
  gap: 7px;
  max-height: 230px;
  margin-top: 13px;
  padding-right: 3px;
  overflow-y: auto;
}

.portal-seat-user {
  display: grid;
  grid-template-columns: 18px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #e1e7ef;
  border-radius: 9px;
  cursor: pointer;
}

.portal-seat-user:has(input:checked) {
  border-color: #8bb2f6;
  background: #f2f7ff;
}

.portal-seat-user-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e7eef8;
  color: #24446f;
  font-size: 13px;
  font-weight: 800;
}

.portal-seat-user-copy { display: grid; gap: 2px; min-width: 0; }
.portal-seat-user-copy strong,
.portal-seat-user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-seat-user-copy strong { font-size: 13px; }
.portal-seat-user-copy small { color: #718096; font-size: 11.5px; }
.portal-seat-user-tag { padding: 4px 7px; border-radius: 99px; background: #fff0d8; color: #8a5410; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.portal-seat-error { margin: 14px 28px 0; padding: 11px 13px; border: 1px solid #f3c6c2; border-radius: 10px; background: #fff5f4; color: #a62920; font-size: 12px; line-height: 1.45; }
.portal-seat-error:empty { display: none; }
.portal-seat-empty { color: #718096; font-size: 13px; }

.portal-modal-actions {
  margin-top: 20px;
  padding: 17px 28px 20px;
  border-top: 1px solid #e4e9f0;
  background: #fafbfd;
}

.portal-modal-actions .button {
  min-height: 40px;
  border-radius: 10px;
  padding: 9px 16px;
  box-shadow: none;
}

@media (max-width: 980px) {
  .portal-billing-shell.is-onboarding { grid-template-columns: 1fr; }
  .portal-billing-head.has-scheduled-cancellation { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; }
  .portal-billing-head.has-scheduled-cancellation .portal-cancellation-message { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; text-align: left; }
  .portal-billing-overview { grid-template-columns: minmax(190px, .75fr) minmax(0, 2.25fr); }
  .portal-billing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-billing-metrics > div { border-bottom: 1px solid #e5eaf1; }
  .portal-billing-metrics > div:nth-child(2n) { border-right: 0; }
  .portal-billing-metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 700px) {
  .portal-billing-intro,
  .portal-billing-checkout { padding: 25px 21px; }
  .portal-billing-head { padding: 20px; }
  .portal-billing-overview { grid-template-columns: 1fr; }
  .portal-billing-seat-summary { border-right: 0; border-bottom: 1px solid #e5eaf1; }
  .portal-billing-actions { align-items: stretch; flex-direction: column; padding: 16px 20px 20px; }
  .portal-billing-actions > div { justify-content: flex-start; }
  .portal-billing-pending { grid-template-columns: 22px 1fr; margin: 16px 20px 0; }
  .portal-billing-pending .button { grid-column: 1 / -1; }
  .portal-copilot-head { padding: 18px 20px; }
  .portal-copilot-overview { grid-template-columns: 1fr; }
  .portal-copilot-allowance { border-right: 0; border-bottom: 1px solid #e5eaf1; }
  .portal-copilot-note { padding-right: 20px; padding-left: 20px; }
  .modal-card-head { padding: 22px 20px 18px; }
  .modal-card-head h2 { font-size: 22px; }
  .portal-seat-control { align-items: flex-start; flex-direction: column; margin: 0 20px; }
  .portal-seat-cancellation-notice { margin-right: 20px; margin-left: 20px; }
  .portal-seat-change-summary,
  .portal-seat-price-preview,
  .portal-activate-trial,
  .portal-seat-selection,
  .portal-seat-error { margin-right: 20px; margin-left: 20px; }
  .portal-skip-trial-summary,
  .portal-skip-trial-price { margin-right: 20px; margin-left: 20px; }
  .portal-topup-bundles { grid-template-columns: 1fr; margin-right: 20px; margin-left: 20px; }
  .portal-topup-quantity-row { margin-right: 20px; margin-left: 20px; }
  .portal-topup-total { margin-right: 20px; margin-left: 20px; }
  .portal-modal-actions { padding-right: 20px; padding-left: 20px; }
}

@media (max-width: 480px) {
  .portal-billing-metrics { grid-template-columns: 1fr; }
  .portal-billing-metrics.is-subscription { grid-template-columns: 1fr; }
  .portal-billing-metrics > div { border-right: 0; }
  .portal-billing-metrics > div:nth-last-child(2) { border-bottom: 1px solid #e5eaf1; }
  .portal-billing-head,
  .portal-copilot-head { align-items: flex-start; }
  .portal-billing-head.has-scheduled-cancellation { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .portal-cancellation-message { justify-content: flex-start; text-align: left; }
  .portal-billing-head-actions { align-items: flex-end; flex-direction: column-reverse; }
  .portal-copilot-head { flex-direction: column; }
  .portal-copilot-head .button { width: 100%; }
  .portal-copilot-metrics { grid-template-columns: 1fr; }
  .portal-copilot-metrics > div { border-right: 0; border-bottom: 1px solid #e5eaf1; }
  .portal-copilot-metrics > div:last-child { border-bottom: 0; }
  .portal-billing-actions > div,
  .portal-modal-actions { align-items: stretch; flex-direction: column-reverse; }
  .portal-billing-actions .button,
  .portal-modal-actions .button { width: 100%; }
  .portal-topup-quantity-row { align-items: flex-start; flex-direction: column; }
  .portal-seat-price-preview { grid-template-columns: 1fr; }
  .portal-seat-price-preview > div + div { border-top: 1px solid #dce4ee; border-left: 0; }
  .portal-skip-trial-price { grid-template-columns: 1fr; }
  .portal-skip-trial-price > div + div { border-top: 1px solid #dce4ee; border-left: 0; }
  .portal-checkout-payment-summary { align-items: flex-start; flex-direction: column; }
  .portal-checkout-payment-summary p { max-width: none; text-align: left; }
  .portal-billing-purchase-row { align-items: flex-start; flex-direction: column; gap: 16px; }
}

/* Agent workspace: local navigation and preview live inside the content area.
   The global application sidebar intentionally remains independent. */
body.agent-workspace-active .content,
body.agent-workspace-active.playground-full .content,
body.agent-workspace-active.activity-full .content,
body.agent-workspace-active.chat-page-full .content,
body.agent-workspace-active.live-channels-full .content,
body.agent-workspace-active.dynamic-sources-full .content,
body.agent-workspace-active.apps-full .content {
  padding: 0;
  overflow: visible;
}

body.agent-workspace-active .workspace,
body.agent-workspace-active.playground-full .workspace,
body.agent-workspace-active.activity-full .workspace,
body.agent-workspace-active.chat-page-full .workspace,
body.agent-workspace-active.live-channels-full .workspace,
body.agent-workspace-active.dynamic-sources-full .workspace,
body.agent-workspace-active.apps-full .workspace {
  width: 100%;
  max-width: none;
  margin: 0;
}

.agent-workspace-shell {
  --agent-local-nav-width: 228px;
  --agent-preview-width: 430px;
  --agent-preview-column-width: var(--agent-preview-width);
  display: grid;
  grid-template-columns: var(--agent-local-nav-width) minmax(0, 1fr) var(--agent-preview-column-width);
  gap: 12px;
  align-items: stretch;
  padding: 16px;
  height: calc(100vh - var(--app-chrome-height));
  min-height: 0;
  overflow: hidden;
  background: #f7f9fb;
  transition: grid-template-columns 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(158, 178, 203, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #aab8ca;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.sidebar-theme-toggle[hidden] {
  display: none !important;
}

.sidebar-launcher-theme-toggle {
  display: none;
}

body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-theme-toggle {
  display: inline-grid;
  position: absolute;
  top: 20px;
  right: 26px;
  z-index: 2;
}

@media (max-width: 900px) {
  body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-theme-toggle {
    right: 24px;
  }
}

.sidebar-theme-toggle:hover {
  border-color: rgba(182, 201, 224, 0.28);
  background: rgba(255, 255, 255, 0.075);
  color: #f4f7fb;
}

.sidebar-theme-toggle:active {
  transform: translateY(1px);
}

.sidebar-theme-toggle:focus-visible {
  outline: 2px solid rgba(111, 168, 224, 0.7);
  outline-offset: 2px;
}

.sidebar-theme-icon {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
}

.sidebar-theme-icon.is-sun,
html[data-dashboard-theme="dark"] .sidebar-theme-icon.is-moon {
  opacity: 0;
  transform: scale(0.75);
}

html[data-dashboard-theme="dark"] .sidebar-theme-icon.is-sun {
  opacity: 1;
  transform: scale(1);
}

/* Route changes may alter whether a page reserves desktop preview space. Do
   not animate that structural change; explicit preview open/close actions keep
   their normal motion. */
.agent-workspace-shell.is-route-switching,
.agent-workspace-shell.is-route-switching > .agent-workspace-preview {
  transition: none !important;
}

.agent-workspace-status-metrics {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.agent-top-metrics {
  height: 100%;
  margin-left: auto;
}

body.dispatcher-context .agent-top-metrics {
  display: none;
}

.agent-workspace-status-metrics::-webkit-scrollbar {
  display: none;
}

.agent-workspace-status-metrics > div {
  min-width: 104px;
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  align-items: baseline;
  justify-content: end;
  gap: 7px;
  padding: 0 14px;
  border-left: 1px solid rgba(4, 56, 115, 0.09);
  white-space: nowrap;
}

.agent-workspace-status-metrics > div:first-child {
  border-left: 0;
}

.agent-workspace-status-metrics dt,
.agent-workspace-status-metrics dd {
  margin: 0;
}

.agent-workspace-status-metrics dt {
  color: #7a8a9f;
  font-size: 12px;
  font-weight: 650;
}

.agent-workspace-status-metrics dd {
  color: #183552;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.agent-training-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agent-training-state::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #718096;
  content: "";
}

.agent-training-state[data-state="ready"]::before {
  background: #2f7d66;
}

.agent-training-state[data-state="needed"]::before {
  background: #b7791f;
}

.agent-training-state[data-state="training"]::before {
  background: #4d6f94;
}

.agent-workspace-shell.has-collapsed-preview {
  --agent-preview-column-width: 0px;
}

.agent-workspace-local-nav {
  position: static;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.agent-workspace-local-nav:hover {
  scrollbar-color: rgba(80, 103, 130, 0.32) transparent;
}

.agent-workspace-nav-panel {
  height: 100%;
  min-height: 0;
  padding: 16px 10px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 10px;
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.agent-workspace-local-heading {
  display: grid;
  gap: 3px;
  padding: 0 9px 18px;
  margin-bottom: 13px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.1);
}

.agent-workspace-local-heading span,
.agent-workspace-nav-group h2 {
  margin: 0;
  color: #70839c;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.agent-workspace-local-heading strong {
  overflow: hidden;
  color: #0d2545;
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-workspace-local-nav nav {
  display: grid;
  gap: 19px;
}

.agent-workspace-nav-group {
  display: grid;
  gap: 7px;
}

.agent-workspace-nav-group h2 {
  padding: 0 9px;
}

.agent-workspace-nav-items {
  display: grid;
  gap: 2px;
}

.agent-workspace-nav-item {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #4b607a;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.agent-workspace-nav-item:hover {
  color: #0d315d;
  background: rgba(4, 56, 115, 0.055);
}

.agent-workspace-nav-item.is-active {
  color: #102b4c;
  background: #e8edf3;
  box-shadow: none;
}

.agent-workspace-nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #607a96;
}

.agent-workspace-nav-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.agent-workspace-nav-icon.has-logo {
  width: 22px;
  height: 22px;
  padding: 3px;
  border: 1px solid rgba(4, 56, 115, 0.1);
  border-radius: 5px;
  background: #fff;
}

.agent-workspace-nav-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.agent-workspace-main {
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 10px;
  background: #fff;
}

.agent-workspace-nav-panel::-webkit-scrollbar,
.agent-workspace-main::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.agent-workspace-content {
  min-width: 0;
}

.agent-workspace-content > .workspace-page {
  max-width: none;
  margin: 0;
}

body.agent-workspace-active .agent-workspace-content .playground-shell {
  display: block;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: #fff;
}

.agent-workspace-content .playground-menu {
  height: auto;
  padding: 30px 34px 38px;
  overflow: visible;
  border-right: 0;
}

.agent-workspace-content .playground-identity-form {
  display: grid;
  gap: 0;
  margin: 0;
}

.agent-setup-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(4, 56, 115, 0.11);
}

.agent-setup-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.identity-form .agent-setup-name-input {
  width: auto;
  max-width: min(420px, 48vw);
  min-width: 4ch;
  field-sizing: content;
  padding: 3px 24px 3px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #10233b;
  font-size: 25px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
}

.identity-form .agent-setup-name-input[readonly] {
  cursor: default;
}

.identity-form .agent-setup-name-input.is-editing {
  border-color: rgba(4, 56, 115, 0.2);
  background: #f8fafc;
  outline: 0;
}

.identity-form .agent-setup-name-input.is-editing:focus {
  border-color: rgba(4, 56, 115, 0.42);
  box-shadow: 0 0 0 3px rgba(4, 56, 115, 0.07);
}

.agent-name-edit-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #6f8196;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.agent-name-edit-button:hover,
.agent-name-edit-button.is-editing {
  border-color: rgba(4, 56, 115, 0.11);
  background: #f2f5f8;
  color: #173f68;
}

.agent-name-edit-button:focus-visible {
  outline: 2px solid rgba(4, 56, 115, 0.35);
  outline-offset: 2px;
}

.agent-name-edit-button svg {
  width: 16px;
  height: 16px;
}

.agent-name-edit-button > span {
  display: grid;
  place-items: center;
}

.agent-name-edit-button > span[hidden] {
  display: none;
}

.agent-setup-toolbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.agent-setup-toolbar-actions .form-helper {
  max-width: 240px;
  color: #6d7d91;
  font-size: 12px;
  text-align: right;
}

.agent-setup-toolbar-actions .button.button-primary {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid #111827;
  border-radius: 7px;
  background: #111827;
  color: #fff;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
}

.agent-setup-toolbar-actions .button.button-primary:hover {
  border-color: #050a12;
  background: #050a12;
  transform: none;
}

.agent-setup-toolbar-actions .button.button-primary:active {
  transform: translateY(1px);
}

.agent-form-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 26px 0 28px;
  border: 0;
  border-bottom: 1px solid rgba(4, 56, 115, 0.11);
  border-radius: 0;
  background: transparent;
}

.agent-form-section > header {
  display: grid;
  gap: 5px;
  margin: 0;
}

.agent-form-section > header h3,
.agent-form-section > header p {
  margin: 0;
}

.agent-form-section > header h3 {
  color: #102b4c;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.35;
}

.agent-form-section > header p {
  max-width: 62ch;
  color: #718198;
  font-size: 12.5px;
  line-height: 1.55;
}

.agent-form-section-fields,
.agent-setup-field {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.agent-form-section-fields {
  gap: 18px;
}

.agent-setup-field > label {
  color: #53667c;
  font-size: 12.5px;
  font-weight: 620;
}

.agent-intelligence-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.agent-intelligence-options > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agent-intelligence-option {
  position: relative;
  min-width: 0;
  height: 100%;
  display: block;
  cursor: pointer;
}

.agent-intelligence-option > input {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 15px;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #175ea8;
  cursor: pointer;
}

.agent-intelligence-option-body {
  box-sizing: border-box;
  height: 100%;
  min-height: 122px;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 14px 15px 15px 42px;
  border: 1px solid rgba(4, 56, 115, 0.15);
  border-radius: 8px;
  background: #fff;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.agent-intelligence-option:hover .agent-intelligence-option-body {
  border-color: rgba(4, 56, 115, 0.3);
}

.agent-intelligence-option > input:focus-visible + .agent-intelligence-option-body {
  outline: 2px solid rgba(23, 94, 168, 0.38);
  outline-offset: 2px;
}

.agent-intelligence-option > input:checked + .agent-intelligence-option-body {
  border-color: #2f73bb;
  background: #f5f9fe;
  box-shadow: inset 0 0 0 1px rgba(47, 115, 187, 0.16);
}

.agent-intelligence-option-heading {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 3px;
}

.agent-intelligence-option-heading strong {
  color: #102b4c;
  font-size: 13.5px;
  font-weight: 720;
  line-height: 1.35;
}

.agent-intelligence-option-heading > span {
  color: #526a84;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
}

.agent-intelligence-option-copy {
  color: #61758c;
  font-size: 12.5px;
  line-height: 1.5;
}

.agent-capability-toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(4, 56, 115, 0.15);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.agent-capability-toggle > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.agent-capability-toggle-control {
  position: relative;
  width: 38px;
  height: 21px;
  margin-top: 1px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background-color 140ms ease;
}

.agent-capability-toggle-control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  transition: transform 140ms ease;
}

.agent-capability-toggle > input:checked + .agent-capability-toggle-control {
  background: #175ea8;
}

.agent-capability-toggle > input:checked + .agent-capability-toggle-control::after {
  transform: translateX(17px);
}

.agent-capability-toggle:has(input:checked) {
  border-color: #2f73bb;
  background: #f5f9fe;
}

.agent-capability-toggle:has(input:focus-visible) {
  outline: 2px solid rgba(23, 94, 168, 0.38);
  outline-offset: 2px;
}

.agent-capability-toggle-copy {
  display: grid;
  gap: 4px;
}

.agent-capability-toggle-copy strong {
  color: #102b4c;
  font-size: 13.5px;
  line-height: 1.35;
}

.agent-capability-toggle-copy small {
  color: #61758c;
  font-size: 12.5px;
  line-height: 1.5;
}

.agent-capability-toggle.is-disabled { opacity: .62; cursor: not-allowed; }
.agent-handoff-categories { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.agent-handoff-categories legend { font-weight: 700; margin-bottom: 10px; }
.agent-handoff-categories label { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--border-color, #d9e0ea); border-radius: 10px; }
.agent-handoff-categories input { width: 17px; height: 17px; }
.agent-handoff-fields { position: relative; transition: opacity .2s ease, filter .2s ease; }
.agent-handoff-fields.is-disabled { opacity: .46; filter: saturate(.35); cursor: not-allowed; user-select: none; }
.agent-handoff-fields.is-disabled::after { content: ""; position: absolute; inset: 0; z-index: 2; cursor: not-allowed; }
.agent-handoff-fields.is-disabled :is(input, textarea, select, button, label) { cursor: not-allowed; }

.agent-form-section input,
.agent-form-section select,
.agent-form-section textarea {
  background: #fff;
}

.agent-workspace-content .playground-board {
  display: none;
}

.agent-workspace-content .activity-page,
.agent-workspace-content .dynamic-sources-page,
.agent-workspace-content .dynamic-sources-shell,
.agent-workspace-content .web-embed-shell,
.agent-workspace-content .live-channels-page {
  min-height: 0;
  height: auto;
}

.agent-workspace-preview {
  position: static;
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 160ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-workspace-preview-panel {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.agent-workspace-preview header {
  display: none;
}

.agent-workspace-preview header button {
  width: 32px;
  height: 32px;
  display: none;
  place-items: center;
  border: 1px solid rgba(4, 56, 115, 0.12);
  border-radius: 7px;
  background: #fff;
  color: #385777;
  cursor: pointer;
}

.agent-workspace-preview header button svg {
  width: 16px;
  height: 16px;
}

.agent-workspace-preview-frame {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(65, 83, 105, 0.16);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.agent-workspace-preview-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.agent-workspace-shell.has-collapsed-preview > .agent-workspace-preview {
  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
}

.agent-workspace-shell.has-collapsed-preview.is-preview-open > .agent-workspace-preview {
  position: fixed;
  z-index: 1050;
  top: calc(var(--app-chrome-height) + 16px);
  right: 16px;
  width: min(440px, calc(100vw - 24px));
  height: calc(100vh - var(--app-chrome-height) - 32px);
  overflow: visible;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  box-shadow: -18px 0 42px rgba(14, 35, 61, 0.16);
}

.agent-workspace-shell.has-collapsed-preview .agent-workspace-preview header button {
  display: grid;
}

.agent-workspace-shell.has-collapsed-preview .agent-workspace-preview header {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: block;
}

.agent-preview-launcher {
  position: fixed;
  z-index: 1020;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(4, 56, 115, 0.18);
  border-radius: 50%;
  background: #fff;
  color: #0a3b70;
  box-shadow: 0 8px 24px rgba(15, 42, 72, 0.13);
  font: inherit;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.agent-preview-launcher:hover {
  transform: translateY(-2px);
  background: #f8fbff;
  box-shadow: 0 11px 28px rgba(15, 42, 72, 0.17);
}

.agent-preview-launcher span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agent-preview-launcher svg {
  width: 20px;
  height: 20px;
}

.agent-preview-launcher[hidden] {
  display: none !important;
}

.agent-workspace-shell:not(.has-collapsed-preview) > .agent-preview-launcher {
  display: none;
}

@media (max-width: 1480px) {
  .agent-workspace-shell:not(.has-collapsed-preview) {
    --agent-local-nav-width: 210px;
    --agent-preview-column-width: 0px;
  }

  .agent-workspace-shell:not(.has-collapsed-preview) > .agent-workspace-preview {
    position: fixed;
    z-index: 1050;
    top: calc(var(--app-chrome-height) + 16px);
    right: 16px;
    height: calc(100vh - var(--app-chrome-height) - 32px);
    width: min(440px, calc(100vw - 24px));
    transform: translateX(100%);
    visibility: hidden;
    box-shadow: -18px 0 42px rgba(14, 35, 61, 0.16);
    transition: transform 200ms ease, visibility 200ms ease;
  }

  .agent-workspace-shell:not(.has-collapsed-preview).is-preview-open > .agent-workspace-preview {
    transform: translateX(0);
    visibility: visible;
  }

  .agent-workspace-shell:not(.has-collapsed-preview) .agent-workspace-preview header button {
    display: grid;
  }

  .agent-workspace-shell:not(.has-collapsed-preview) .agent-workspace-preview header {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: block;
  }

  .agent-workspace-shell:not(.has-collapsed-preview) > .agent-preview-launcher {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .agent-workspace-shell,
  .agent-workspace-shell.has-collapsed-preview {
    display: block;
    height: auto;
    min-height: calc(100vh - var(--app-chrome-height));
    overflow: visible;
    padding: 12px;
  }

  .agent-workspace-status-metrics > div {
    min-width: 92px;
    padding: 0 10px;
  }

  .agent-workspace-local-nav {
    position: static;
    width: 100%;
    height: auto;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 0;
    margin-top: 12px;
  }

  .agent-workspace-nav-panel {
    width: max-content;
    height: auto;
    min-height: 0;
    padding: 7px;
    overflow-y: visible;
    border-radius: 9px;
  }

  .agent-workspace-local-heading {
    display: none;
  }

  .agent-workspace-local-nav nav {
    display: flex;
    gap: 8px;
    width: max-content;
  }

  .agent-workspace-nav-group {
    display: flex;
  }

  .agent-workspace-nav-group h2 {
    display: none;
  }

  .agent-workspace-nav-items {
    display: flex;
    gap: 4px;
  }

  .agent-workspace-main {
    height: auto;
    min-height: 0;
    margin-top: 12px;
    padding: 0 0 40px;
    overflow-y: visible;
  }

  .agent-form-section {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 0 24px;
  }

  .agent-setup-toolbar {
    align-items: flex-start;
    gap: 14px;
  }

  .identity-form .agent-setup-name-input {
    max-width: min(100%, 320px);
    font-size: 22px;
  }

  .agent-setup-toolbar-actions .form-helper {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-launcher-copy-enter .sidebar-launcher-intro h1,
  body.workspace-launcher-copy-enter .sidebar-launcher-intro p,
  .agent-workspace-shell,
  .agent-workspace-preview {
    transition: none !important;
    animation: none !important;
  }
}

/* Keep these shell rules last: legacy page-mode overrides above intentionally
   specialize many screens, while the dashboard frame must remain persistent. */
@media (min-width: 1101px) {
  body.workspace-selected .app-shell {
    grid-template-columns: 272px minmax(0, 1fr) !important;
  }

  body.workspace-selected .app-shell > .sidebar {
    display: flex !important;
    position: sticky;
    top: 0;
    width: 272px;
    height: 100dvh;
    max-height: 100dvh;
    padding: 20px 16px 18px;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: none;
  }

  body.workspace-selected:not(.agent-selected) .sidebar-brand,
  body.workspace-selected:not(.agent-selected) .sidebar-credits {
    display: flex !important;
  }
}

@media (max-width: 1100px) {
  body.workspace-selected .menu-toggle {
    display: inline-flex !important;
  }

  body.workspace-selected .header-workspace-back {
    display: none !important;
  }

  body.workspace-selected .app-shell > .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(292px, 86vw);
    height: 100dvh;
    max-height: 100dvh;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-radius: 0;
    transform: translateX(-110%);
    z-index: 60;
  }

  body.workspace-selected .app-shell > .sidebar-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 23, 42, 0.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
  }

  body.workspace-selected .app-shell > .sidebar.is-open {
    transform: translateX(0) !important;
  }

  body.workspace-selected .app-shell > .sidebar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 900px) {
  .agent-intelligence-options {
    grid-template-columns: 1fr;
  }

  .agent-intelligence-option-body {
    min-height: 0;
  }
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-pre-agent-section],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-pre-agent-item],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-settings-section],
body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-settings-item] {
  display: list-item;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-nav [data-agent-nav-root] > .sidebar-link {
  display: flex;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .agent-nested-nav {
  display: none !important;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-brand {
  display: flex !important;
}

body.workspace-selected.agent-selected:not(.dispatcher-context) .sidebar-credits {
  display: none !important;
}

body.workspace-selected.agent-selected:not(.dispatcher-context):not(.workspace-owner) .sidebar-nav [data-settings-section],
body.workspace-selected.agent-selected:not(.dispatcher-context):not(.workspace-owner) .sidebar-nav [data-settings-item] {
  display: none;
}

body.live-channels-full .content,
body.human-agents-full .content {
  padding: 0 !important;
}

body.live-channels-full .workspace,
body.human-agents-full .workspace {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.live-channels-page {
  min-height: calc(100dvh - var(--app-chrome-height));
  padding: 0 !important;
  justify-items: stretch;
}

.lc-layout {
  width: 100%;
  min-height: calc(100dvh - var(--app-chrome-height));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.human-agents-page {
  min-height: calc(100dvh - var(--app-chrome-height));
  gap: 0;
}

.human-agents-page .apps-users-table {
  min-height: calc(100dvh - var(--app-chrome-height));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 700px) {
  .live-channels-page {
    padding: 0 !important;
  }
}
.email-operation-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 30px 0;
  padding: 12px 14px;
  border: 1px solid #cbd9e7;
  border-radius: 10px;
  color: #173653;
  background: #f3f8fc;
  font-size: 14px;
}

.email-operation-notice svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.email-operation-notice.is-error {
  border-color: #f1b6b2;
  color: #a52a22;
  background: #fff5f4;
}

.email-settings-loading {
  width: min(180px, calc(100% - 40px));
  margin: 48px auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #173653;
  font-size: 13px;
  text-align: center;
}

.email-settings-loading strong {
  display: block;
  margin-bottom: 9px;
  font-weight: 600;
}

.email-settings-loading span {
  position: relative;
  display: block;
  width: 132px;
  height: 2px;
  margin: 0 auto;
  overflow: hidden;
  background: #dce6ef;
  border-radius: 999px;
}

.email-settings-loading span::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: #0c5aa6;
  content: "";
  animation: email-settings-loading 1.1s ease-in-out infinite;
}

@keyframes email-settings-loading {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(390%);
  }
}

.email-save-button.is-loading,
.email-secondary-button.is-loading,
.email-icon-button.is-loading,
.email-delete-confirm-button.is-loading,
.email-capability-action.is-loading {
  cursor: wait;
  pointer-events: none;
}

.email-button-loading-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.email-button-loading-content svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  animation: email-button-loading-spin 0.72s linear infinite;
}

.email-icon-button.is-loading {
  opacity: 1;
}

.email-icon-button.is-loading .email-button-loading-content svg {
  width: 15px;
  height: 15px;
}

@keyframes email-button-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .email-button-loading-content svg {
    animation-duration: 1.4s;
  }
}

@media (max-width: 700px) {
  .email-operation-notice {
    margin-right: 20px;
    margin-left: 20px;
  }
}

/* Emails: mobile provider workspace
   The desktop two-column console remains unchanged. On the same breakpoint as
   the mobile app shell, providers become a compact horizontal rail and the
   selected provider becomes the only vertical workspace. */
@media (max-width: 900px) {
  .content:has(.portal-email-page) {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .workspace:has(> .portal-email-page),
  .portal-email-page,
  .email-integrations-shell,
  .email-provider-sidebar,
  .email-provider-main,
  .email-provider-view,
  .email-provider-content {
    min-width: 0;
    max-width: 100%;
  }

  .workspace:has(> .portal-email-page) {
    min-height: 0;
  }

  .portal-email-page {
    height: auto;
    min-height: calc(100dvh - var(--app-chrome-height));
    overflow-x: clip;
  }

  .email-integrations-shell {
    display: block;
    height: auto;
    padding: 12px;
  }

  .email-provider-sidebar {
    display: block;
    padding: 18px 16px 0;
    margin: 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }

  .email-provider-sidebar > header {
    padding: 0 2px 16px;
    margin: 0;
    border: 0;
  }

  .email-provider-sidebar header p,
  .email-provider-list-heading,
  .email-sidebar-note {
    display: none;
  }

  .email-sidebar-icon {
    width: 36px;
    height: 36px;
  }

  .email-provider-sidebar h1 {
    font-size: 21px;
  }

  .email-provider-list {
    display: flex;
    align-items: stretch;
    gap: 22px;
    margin: 0 -2px;
    padding: 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid rgba(4, 56, 115, 0.12);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .email-provider-list::-webkit-scrollbar {
    display: none;
  }

  .email-provider-nav-item {
    position: relative;
    width: auto;
    min-width: max-content;
    min-height: 54px;
    flex: 0 0 auto;
    grid-template-columns: 30px auto;
    gap: 9px;
    padding: 8px 0 11px;
    border: 0;
    border-radius: 0;
    background: transparent;
    scroll-snap-align: center;
  }

  .email-provider-nav-item:hover,
  .email-provider-nav-item.is-active {
    border: 0;
    background: transparent;
  }

  .email-provider-nav-item::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    content: "";
  }

  .email-provider-nav-item.is-active::after {
    background: #145270;
  }

  .email-provider-nav-item > svg {
    display: none;
  }

  .email-provider-nav-item > span:nth-child(2) {
    gap: 1px;
  }

  .email-provider-nav-item strong {
    font-size: 13px;
  }

  .email-provider-nav-item small {
    display: block;
    max-width: 96px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .email-provider-nav-mark {
    width: 30px;
    height: 30px;
  }

  .email-provider-main {
    margin: 0;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    overflow: visible;
  }

  .email-provider-header {
    min-height: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 14px;
    padding: 18px;
  }

  .email-provider-heading {
    align-items: center;
    gap: 12px;
  }

  .email-provider-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .email-provider-title-row h1 {
    font-size: 20px;
  }

  .email-direction-tabs {
    gap: 26px;
    padding: 0 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .email-direction-tabs::-webkit-scrollbar {
    display: none;
  }

  .email-direction-tabs > button {
    min-height: 54px;
    flex: 0 0 auto;
  }

  .email-direction-tabs .email-tab-check {
    display: none;
  }

  .email-operation-notice {
    margin: 14px 18px 0;
  }

  .email-settings-section,
  .email-list-page {
    padding: 20px 18px 24px;
  }

  .email-fields-grid,
  .email-choice-grid,
  .email-owner-choice-grid,
  .email-handler-settings,
  .email-permission-columns,
  .email-routing-explainer,
  .email-domain-create-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-field-wide {
    grid-column: auto;
  }

  .email-routing-explainer > b {
    display: none;
  }

  .email-section-heading,
  .email-flow-step-heading,
  .email-address-toolbar,
  .email-list-page-heading,
  .email-account-domains-heading,
  .email-domain-actions,
  .email-domain-dns-actions,
  .email-receiving-setup-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .email-toolbar-actions,
  .email-inline-form-actions,
  .email-settings-footer,
  .email-form-footer,
  .email-domain-create-actions,
  .email-webhook-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .email-inline-add-row,
  .email-copy-field,
  .email-domain-add-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-address-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .email-address-access {
    grid-column: 2 / -1;
    grid-row: auto;
  }

  .email-unified-address-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .email-unified-address-row .email-address-access {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .email-unified-address-row .email-address-row-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .email-inbound-row {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .email-inbound-identity {
    grid-column: 1;
  }

  .email-inbound-row .email-route-field,
  .email-inbound-row .email-route-field:last-of-type {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .email-inbound-row > .email-icon-button {
    grid-column: 2;
    grid-row: 1;
  }

  .email-account-card-header {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .email-account-domain-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .email-domain-capabilities,
  .email-account-domain-row > .email-domain-capabilities {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .email-account-domain-row > .email-domain-status {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    min-height: 30px;
    margin-top: 3px;
    padding: 8px 0 0;
    border-top: 1px solid #e1e7eb;
    border-left: 0;
  }

  .email-add-domain-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .email-add-domain-row small {
    grid-column: 2;
    white-space: normal;
  }

  .email-dns-table,
  .email-domain-dns-table,
  .email-receiving-dns {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .email-domain-dns-table-head,
  .email-domain-dns-record,
  .email-receiving-dns-record {
    min-width: 590px;
  }

  .email-delete-dialog {
    width: min(520px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }
}

@media (max-width: 520px) {
  .email-integrations-shell {
    padding: 8px;
  }

  .email-provider-sidebar {
    padding: 16px 12px 0;
  }

  .email-provider-sidebar > header {
    padding-bottom: 12px;
  }

  .email-provider-list {
    gap: 18px;
  }

  .email-provider-nav-item small {
    display: none;
  }

  .email-provider-header {
    padding: 16px;
  }

  .email-direction-tabs {
    gap: 22px;
    padding-inline: 16px;
  }

  .email-settings-section,
  .email-list-page {
    padding: 18px 16px 22px;
  }

  .email-settings-section {
    gap: 17px;
  }

  .email-form-footer,
  .email-settings-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .email-form-footer .email-save-button,
  .email-settings-footer .email-save-button,
  .email-inline-form-actions > button,
  .email-domain-create-actions > button {
    width: 100%;
  }

  .email-settings-footer .email-preview-helper {
    margin-right: 0;
  }

  .email-address-builder {
    grid-template-columns: minmax(72px, 0.7fr) auto minmax(110px, 1.3fr);
  }

  .email-account-card-header {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .email-account-card-header > .email-account-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 46px;
  }

  .email-delete-dialog {
    display: block;
    padding: 20px;
  }

  .email-delete-dialog-icon {
    margin-bottom: 14px;
  }
}

/* Agent workspace: mobile context and navigation live in the page flow. */
@media (max-width: 900px) {
  body.workspace-selected.agent-selected.agent-workspace-active {
    overflow-x: hidden;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .content {
    --app-chrome-height: var(--app-header-height);
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow-x: clip;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .agent-workspace-shell,
  .agent-workspace-shell.has-collapsed-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
  }

  .agent-workspace-shell > .agent-top-nav {
    position: static;
    order: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 14px;
    margin: 0;
    padding: 14px 16px 13px;
    border-top: 0;
    border-bottom: 1px solid rgba(4, 56, 115, 0.11);
    background: #fff;
  }

  .agent-workspace-shell > .agent-top-nav[hidden] {
    display: none;
  }

  .agent-workspace-shell > .agent-top-nav .agent-top-back {
    grid-column: 1;
    min-width: 0;
    padding: 0;
  }

  .agent-workspace-shell > .agent-top-nav .agent-context-heading {
    grid-column: 2;
    min-width: 0;
    justify-content: flex-end;
    overflow: hidden;
  }

  .agent-workspace-shell > .agent-top-nav .agent-context-heading strong {
    max-width: min(48vw, 220px);
  }

  .agent-workspace-shell > .agent-top-nav .agent-context-heading span {
    display: none;
  }

  .agent-workspace-shell > .agent-top-nav .agent-top-metrics {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    overflow: visible;
    border: 1px solid rgba(4, 56, 115, 0.1);
    border-radius: 9px;
    background: #f8fafc;
  }

  .agent-workspace-shell > .agent-top-nav .agent-workspace-status-metrics > div {
    min-width: 0;
    min-height: 46px;
    justify-content: start;
    padding: 9px 12px;
    border-left: 0;
    border-bottom: 1px solid rgba(4, 56, 115, 0.08);
    white-space: normal;
  }

  .agent-workspace-shell > .agent-top-nav .agent-workspace-status-metrics > div:nth-child(even) {
    border-left: 1px solid rgba(4, 56, 115, 0.08);
  }

  .agent-workspace-shell > .agent-top-nav .agent-workspace-status-metrics > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .agent-workspace-shell > .agent-top-nav .agent-top-training {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
  }

  .agent-workspace-local-nav {
    order: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(4, 56, 115, 0.11);
    background: #fff;
  }

  .agent-workspace-nav-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border: 0;
    border-radius: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .agent-workspace-nav-panel::-webkit-scrollbar {
    display: none;
  }

  .agent-workspace-local-nav nav {
    width: max-content;
    min-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .agent-workspace-nav-group,
  .agent-workspace-nav-items {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .agent-workspace-nav-item {
    width: auto;
    min-width: max-content;
    min-height: 38px;
    display: inline-grid;
    flex: 0 0 auto;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .agent-workspace-main {
    order: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 36px;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .agent-workspace-content,
  .agent-workspace-content > .workspace-page,
  .agent-workspace-content .playground-shell,
  .agent-workspace-content .playground-menu,
  .agent-workspace-content .playground-identity-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .agent-workspace-content .playground-menu {
    padding: 22px 16px 34px;
  }

  .agent-workspace-content :is(
    .agent-resource-page,
    .agent-action-page,
    .agent-deployment-page
  ) {
    max-width: 100%;
    min-width: 0;
    padding: 22px 16px 34px;
    box-sizing: border-box;
  }

  .agent-workspace-content :is(
    .activity-page,
    .dynamic-sources-page,
    .dynamic-sources-shell,
    .web-embed-shell,
    .chat-page-deploy-page,
    .live-channels-page
  ) {
    max-width: 100%;
    min-width: 0;
  }

  .agent-workspace-content :is(input, select, textarea) {
    max-width: 100%;
    box-sizing: border-box;
  }

  .agent-setup-toolbar {
    min-width: 0;
    flex-wrap: wrap;
  }

  .agent-setup-toolbar-actions {
    margin-left: auto;
  }
}

/* Invited workspace members may manage workspace notifications. Team and
   Billing remain owner-only, while the Settings heading stays visible for
   the shared Notifications entry. */
html body.workspace-selected:not(.workspace-owner):not(.dispatcher-context) .sidebar-nav [data-settings-section],
html body.workspace-selected:not(.workspace-owner):not(.dispatcher-context) .sidebar-nav [data-shared-settings-item] {
  display: list-item !important;
}

/* Dashboard dark mode: carry the neutral graphite canvas into every persistent
   navigation rail, including the workspace launcher. */
html[data-dashboard-theme="dark"] body.workspace-selected .app-shell > .sidebar {
  --sidebar-ink: #f1f1ef;
  --sidebar-muted: #92969c;
  --sidebar-line: rgba(255, 255, 255, 0.1);
  --sidebar-hover: rgba(255, 255, 255, 0.055);
  --sidebar-active: #24262a;
  background: #0d0e10 !important;
  border-right-color: #292c31 !important;
}

html[data-dashboard-theme="dark"] body.workspace-selected .app-shell > .sidebar::after {
  border-color: rgba(255, 255, 255, 0.055);
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, 0.018),
    0 0 0 140px rgba(255, 255, 255, 0.012);
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-brand {
  border-bottom-color: var(--sidebar-line);
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-section-title {
  color: #777b82;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-switch {
  color: #f1f1ef;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-switch:hover,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-utility-link:hover {
  background: rgba(255, 255, 255, 0.055);
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-icon {
  background: #202226;
  color: #b2b5ba;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-copy small {
  color: #7f838a;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-copy strong {
  color: #ececea;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-action,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-utility-external {
  color: #777b82;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-switch:hover .sidebar-workspace-action {
  color: #c8c9c7;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link {
  color: #b7b9bd;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link .menu-icon,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link .menu-external-icon {
  color: #8c9096;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link:hover,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link.is-active {
  color: #f6f6f4;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link:hover .menu-icon,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link:hover .menu-external-icon,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link.is-active .menu-icon,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link.is-active .menu-external-icon {
  color: #d5d6d3;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-link:focus-visible,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-workspace-switch:focus-visible,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-theme-toggle:focus-visible {
  outline-color: rgba(207, 210, 214, 0.72);
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-utility-link,
html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-theme-toggle {
  color: #a7aaaf;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-theme-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  background: #17191c;
}

html[data-dashboard-theme="dark"] body.workspace-selected .sidebar-theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: #232529;
  color: #f1f1ef;
}

/* Sidebar notification center ------------------------------------------------
   The bell stays visually quiet in the brand row. The panel is a separate
   fixed layer so the sidebar can keep clipping its decorative background. */
.sidebar-notifications-trigger {
  display: none;
  position: absolute;
  top: 17px;
  right: 24px;
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b9c8d9;
  opacity: 0.9;
  cursor: pointer;
  transition: color 150ms ease, opacity 150ms ease;
}

body.workspace-selected .sidebar-notifications-trigger {
  display: inline-flex;
}

.sidebar-notifications-trigger:hover,
.sidebar-notifications-trigger[aria-expanded="true"] {
  color: #ffffff;
  opacity: 1;
}

.sidebar-notifications-trigger:focus-visible {
  outline: 2px solid rgba(143, 184, 226, 0.75);
  outline-offset: 2px;
}

.sidebar-notifications-trigger svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.sidebar-notifications-indicator {
  position: absolute;
  top: 0;
  right: -1px;
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #f5a623;
  color: #17120a;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sidebar-notifications-indicator[hidden] {
  display: none !important;
}

.sidebar-notifications-panel {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 372px;
  height: 620px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d8e0e9;
  border-radius: 14px;
  background: #ffffff;
  color: #10233d;
  box-shadow: 0 22px 58px rgba(15, 35, 61, 0.2);
  opacity: 0;
  transform: translateX(-8px) scale(0.985);
  transform-origin: left top;
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-notifications-panel[hidden] {
  display: none !important;
}

.sidebar-notifications-panel.is-open {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.sidebar-notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 15px;
  border-bottom: 1px solid #e3e8ef;
}

.sidebar-notifications-header h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.sidebar-notifications-header span {
  display: block;
  margin-top: 3px;
  color: #708096;
  font-size: 12px;
}

.sidebar-notifications-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #718096;
  cursor: pointer;
}

.sidebar-notifications-close:hover {
  background: #f2f5f8;
  color: #10233d;
}

.sidebar-notifications-close svg,
.sidebar-notifications-settings svg {
  width: 16px;
  height: 16px;
}

.sidebar-notifications-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-notification-item {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid #e8edf2;
  background: transparent;
}

.sidebar-notification-marker {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}

.sidebar-notification-item.is-unread .sidebar-notification-marker {
  background: #2677b9;
}

.sidebar-notification-content {
  min-width: 0;
}

.sidebar-notification-content strong {
  display: block;
  color: #10233d;
  font-size: 13px;
  line-height: 1.35;
}

.sidebar-notification-content p {
  margin: 5px 0 0;
  color: #5f7086;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sidebar-notification-content time {
  display: block;
  margin-top: 7px;
  color: #8a97a8;
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-notifications-loading,
.sidebar-notifications-error {
  min-height: 190px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #66768a;
  font-size: 12px;
  text-align: center;
}

.sidebar-notifications-loading-bar {
  position: relative;
  width: 132px;
  height: 2px;
  margin-top: 12px;
  overflow: hidden;
  background: #e2e8ef;
}

.sidebar-notifications-loading-bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: #2677b9;
  content: "";
  animation: sidebar-notifications-loading 1s ease-in-out infinite;
}

@keyframes sidebar-notifications-loading {
  from { transform: translateX(-110%); }
  to { transform: translateX(260%); }
}

.sidebar-notifications-error {
  gap: 12px;
}

.sidebar-notifications-error strong {
  color: #25384e;
  font-size: 13px;
}

.sidebar-notifications-error button {
  padding: 7px 11px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  background: transparent;
  color: #27415f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sidebar-notifications-error button:hover {
  background: #f2f5f8;
}

.sidebar-notifications-empty {
  min-height: 208px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sidebar-notifications-empty > svg {
  width: 20px;
  height: 20px;
  margin-bottom: 13px;
  color: #32806c;
}

.sidebar-notifications-empty strong {
  font-size: 14px;
}

.sidebar-notifications-empty span {
  max-width: 230px;
  margin-top: 5px;
  color: #77869a;
  font-size: 12px;
  line-height: 1.5;
}

.sidebar-notifications-settings {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  border: 0;
  border-top: 1px solid #e3e8ef;
  background: transparent;
  color: #27415f;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.sidebar-notifications-settings:hover {
  background: #f6f8fa;
  color: #10233d;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-panel {
  border-color: #303237;
  background: #191a1d;
  color: #f1f1ef;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
}

html[data-dashboard-theme="dark"] .sidebar-notifications-header,
html[data-dashboard-theme="dark"] .sidebar-notifications-settings {
  border-color: #303237;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-header span,
html[data-dashboard-theme="dark"] .sidebar-notifications-empty span {
  color: #93979e;
}

html[data-dashboard-theme="dark"] .sidebar-notification-item {
  border-color: #2c2e32;
}

html[data-dashboard-theme="dark"] .sidebar-notification-item.is-unread .sidebar-notification-marker {
  background: #78a9d3;
}

html[data-dashboard-theme="dark"] .sidebar-notification-content strong,
html[data-dashboard-theme="dark"] .sidebar-notifications-error strong {
  color: #f1f1ef;
}

html[data-dashboard-theme="dark"] .sidebar-notification-content p,
html[data-dashboard-theme="dark"] .sidebar-notifications-loading,
html[data-dashboard-theme="dark"] .sidebar-notifications-error {
  color: #a8acb2;
}

html[data-dashboard-theme="dark"] .sidebar-notification-content time {
  color: #7f848c;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-loading-bar {
  background: #303237;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-loading-bar::after {
  background: #78a9d3;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-error button {
  border-color: #3b3e44;
  color: #d4d6d9;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-error button:hover {
  background: #24262a;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-close,
html[data-dashboard-theme="dark"] .sidebar-notifications-settings {
  color: #b5b8bd;
}

html[data-dashboard-theme="dark"] .sidebar-notifications-close:hover,
html[data-dashboard-theme="dark"] .sidebar-notifications-settings:hover {
  background: #24262a;
  color: #f5f5f3;
}

@media (max-width: 1100px) {
  .sidebar-notifications-trigger {
    right: 20px;
  }
}

/* AI Agents mobile containment ------------------------------------------------
   Keep the dashboard chrome and every agent subpage inside the visual viewport.
   These rules intentionally live last so older desktop-oriented page modes
   cannot reintroduce a minimum canvas width on phones. */
@media (max-width: 900px) {
  html,
  body.workspace-selected,
  body.workspace-selected .app-shell,
  body.workspace-selected .main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.workspace-selected .main {
    overflow-x: hidden;
  }

  /* The dark mobile bar is full bleed. A legacy <=640px rule otherwise adds
     white gutters around it, especially on the roster screen. */
  body.workspace-selected .app-header,
  .main:has(.agents-roster-page) .app-header,
  .main:has(.workspace-overview-page) .app-header {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
    background: #0b1a2f;
    box-sizing: border-box;
  }

  body.workspace-selected .app-header-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-shell,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-main,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-content,
  body.workspace-selected.agent-selected.agent-workspace-active .workspace-page,
  body.workspace-selected.agent-selected.agent-workspace-active .playground-page,
  body.workspace-selected.agent-selected.agent-workspace-active .playground-shell,
  body.workspace-selected.agent-selected.agent-workspace-active .playground-menu,
  body.workspace-selected.agent-selected.agent-workspace-active .playground-identity-form,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-form-section,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-form-section-fields,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-setup-field,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-intelligence-options,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-intelligence-option,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-intelligence-option-body,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-capability-toggle,
  body.workspace-selected.agent-selected.agent-workspace-active .agent-capability-toggle-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-form-section {
    grid-template-columns: minmax(0, 1fr);
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-intelligence-options {
    grid-template-columns: minmax(0, 1fr);
  }

  body.workspace-selected.agent-selected.agent-workspace-active :is(
    .agent-intelligence-option-copy,
    .agent-intelligence-option-heading,
    .agent-intelligence-option-heading strong,
    .agent-intelligence-option-heading span,
    .agent-capability-toggle-copy strong,
    .agent-capability-toggle-copy small
  ) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Only the local page switcher scrolls sideways; the page itself never does. */
  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-local-nav {
    overflow: visible;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-nav-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-nav-panel nav {
    width: max-content;
    min-width: max-content;
  }

  .content:has(.agents-roster-page),
  .agents-roster-page,
  .agents-command-grid,
  .agents-roster-panel,
  .agents-side-panel,
  .agent-slot-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 560px) {
  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-shell > .agent-top-nav {
    padding-inline: 14px;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-shell > .agent-top-nav .agent-context-heading strong {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-workspace-content .playground-menu {
    padding-inline: 14px;
  }

  body.workspace-selected.agent-selected.agent-workspace-active .agent-capability-toggle {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 14px;
  }
}

/* AI Agents roster: scoped dark theme. The sidebar intentionally keeps its own palette. */
html[data-dashboard-theme="dark"] body:has(.agents-roster-page) {
  --agents-dark-canvas: #111214;
  --agents-dark-surface: #191a1d;
  --agents-dark-surface-raised: #1e2023;
  --agents-dark-surface-soft: #151618;
  --agents-dark-border: #303338;
  --agents-dark-border-strong: #43474d;
  --agents-dark-text: #ededeb;
  --agents-dark-muted: #9b9ea3;
  --agents-dark-faint: #767a80;
  --agents-dark-accent: #6c94ad;
  --agents-dark-teal: #62aa94;
}

html[data-dashboard-theme="dark"] body:has(.agents-roster-page) :is(
  .main,
  .content,
  .workspace,
  .agents-roster-page
) {
  background: var(--agents-dark-canvas) !important;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agents-page-heading h1,
html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-section h2,
html[data-dashboard-theme="dark"] .agents-roster-page .agent-row-copy strong,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-side-kicker,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-side-block .credits-header,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-mix-list strong,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-docs-list a {
  color: var(--agents-dark-text);
}

html[data-dashboard-theme="dark"] .agents-roster-page :is(
  .agents-page-heading > span,
  .agents-page-availability,
  .section-helper,
  .agent-row-copy span,
  .agent-row-note,
  .agent-add-slot-action-copy span,
  .agent-add-slot-action-label,
  .agents-side-block .credits-meta,
  .agents-side-block .credits-meta [data-credits-usage],
  .agents-side-block .credits-meta [data-credits-extra],
  .agents-side-usage .agent-capacity-pill,
  .agents-side-usage small,
  .agents-mix-list span,
  .agents-docs-header small,
  .agents-docs-header > svg,
  .agents-docs-list a > svg,
  .empty-note
) {
  color: var(--agents-dark-muted);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agents-page-availability {
  color: #b5b7ba;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-section,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-side-block {
  border-color: var(--agents-dark-border);
  background: var(--agents-dark-surface);
  color: var(--agents-dark-text);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-group + .agent-slot-group,
html[data-dashboard-theme="dark"] .agents-roster-page .agent-add-slot-action,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-side-usage,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-mix-list div,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-docs-header,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-docs-list a {
  border-color: var(--agents-dark-border);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card {
  border-color: var(--agents-dark-border);
  background: var(--agents-dark-surface-raised);
  color: var(--agents-dark-text);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card:hover {
  border-color: var(--agents-dark-border-strong);
  background: #24262a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.is-inactive-slot {
  border-color: #373a3f;
  background: #191a1d;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.create-card[data-open-create] {
  border-color: #3e5759;
  background: #192120;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card::before {
  background: var(--agents-dark-accent);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.is-inactive-slot::before {
  background: #c58b52;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.create-card[data-open-create]::before {
  background: var(--agents-dark-teal);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-row-icon {
  background: #24292d;
  color: #7fa4b5;
}

html[data-dashboard-theme="dark"] .agents-roster-page :is(.agent-row-reorder, .drag-handle, .agent-row-lock, .agent-row-add-icon) {
  color: #85898e;
}

html[data-dashboard-theme="dark"] .agents-roster-page .drag-handle:hover {
  background: #2b2d31;
  color: #d2d3d4;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-type-pill {
  color: #d1d3d5;
  background: #2a2d31;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-status-pill.is-inactive {
  color: #f2bd8c;
  background: #3a291f;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-status-pill.is-empty {
  color: #a9c1d2;
  background: #252e36;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-add-slot-action {
  color: #b7b9bc;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-add-slot-action:hover {
  background: #232529;
  color: var(--agents-dark-text);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-add-slot-action-icon {
  border-color: var(--agents-dark-border);
  background: #232529;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-add-slot-action-copy strong,
html[data-dashboard-theme="dark"] .agents-roster-page .agents-side-usage .agent-capacity-pill strong {
  color: var(--agents-dark-text);
}

html[data-dashboard-theme="dark"] .agents-roster-page :is(.agents-side-block .credits-bar, .agents-usage-meter) {
  background: #303338;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agents-side-block .credits-bar span {
  background: var(--agents-dark-teal);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agents-usage-meter span {
  background: #668fa5;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agents-docs-card {
  background: var(--agents-dark-surface);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agents-docs-list a:hover {
  background: #24262a;
  color: var(--agents-dark-text);
}

html[data-dashboard-theme="dark"] .agents-roster-page .menu-button {
  border-color: #42464c;
  background: #25272b;
  color: #dedfdf;
}

html[data-dashboard-theme="dark"] .agents-roster-page .menu-button:hover {
  border-color: #585d64;
  background: #303338;
}

html[data-dashboard-theme="dark"] .agents-roster-page .menu-dropdown {
  border-color: var(--agents-dark-border-strong);
  background: #1d1f22;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
}

html[data-dashboard-theme="dark"] .agents-roster-page .menu-dropdown button {
  color: #e2e2e0;
  background: #24262a;
}

html[data-dashboard-theme="dark"] .agents-roster-page .menu-dropdown button:hover {
  background: #303338;
}

html[data-dashboard-theme="dark"] body:has(.agents-roster-page) :is(.modal-card, .create-agent-modal-card) {
  border-color: var(--agents-dark-border);
  background: var(--agents-dark-surface-raised);
  color: var(--agents-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.agents-roster-page) :is(.modal-card, .create-agent-modal-card) :is(h2, h3, label, strong) {
  color: var(--agents-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.agents-roster-page) :is(.modal-card, .create-agent-modal-card) :is(p, small, .form-helper) {
  color: var(--agents-dark-muted);
}

html[data-dashboard-theme="dark"] body:has(.agents-roster-page) :is(.modal-card, .create-agent-modal-card) :is(input, select, textarea) {
  border-color: var(--agents-dark-border-strong);
  background: #151618;
  color: var(--agents-dark-text);
}

/* Workspace launcher: neutral graphite dark theme. */
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page),
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher {
  --launcher-dark-canvas: #111214;
  --launcher-dark-surface: #191a1d;
  --launcher-dark-surface-raised: #1e2023;
  --launcher-dark-surface-soft: #151618;
  --launcher-dark-border: #303338;
  --launcher-dark-border-strong: #464a50;
  --launcher-dark-text: #ededeb;
  --launcher-dark-muted: #9b9ea3;
  --launcher-dark-faint: #777b81;
  color-scheme: dark;
}

/* Keep the launcher and dashboard on one continuous dark canvas while the
   selected workspace mounts. The launcher state is cleared before the Home
   page is painted, so these transient classes prevent the shared shell from
   briefly exposing its light-mode background during that handoff. */
html[data-dashboard-theme="dark"] body.launcher-transition-out,
html[data-dashboard-theme="dark"] body.launcher-transition-to-workspace,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher,
html[data-dashboard-theme="dark"] body.launcher-transition-out .app-shell,
html[data-dashboard-theme="dark"] body.launcher-transition-to-workspace .app-shell,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher .app-shell,
html[data-dashboard-theme="dark"] body.launcher-transition-out .main,
html[data-dashboard-theme="dark"] body.launcher-transition-to-workspace .main,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher .main,
html[data-dashboard-theme="dark"] body.launcher-transition-out .content,
html[data-dashboard-theme="dark"] body.launcher-transition-to-workspace .content,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher .content,
html[data-dashboard-theme="dark"] body.launcher-transition-out .workspace,
html[data-dashboard-theme="dark"] body.launcher-transition-to-workspace .workspace,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher .workspace {
  background-color: #111214 !important;
  background-image: none !important;
}

/* The launcher is the same navigation surface as the in-workspace sidebar.
   Override its legacy permanent-navy rules so dark mode does not switch color
   families while moving between the launcher and a workspace. */
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .app-shell > .sidebar,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher .app-shell > .sidebar,
html[data-dashboard-theme="dark"] .shell-morph-rail {
  --sidebar-ink: #f1f1ef;
  --sidebar-muted: #92969c;
  --sidebar-line: rgba(255, 255, 255, 0.1);
  --sidebar-hover: rgba(255, 255, 255, 0.055);
  --sidebar-active: #24262a;
  background: #0d0e10 !important;
  border-right-color: #292c31 !important;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .app-shell > .sidebar::after,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher .app-shell > .sidebar::after {
  border-color: rgba(255, 255, 255, 0.055);
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, 0.018),
    0 0 0 140px rgba(255, 255, 255, 0.012);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-brand,
html[data-dashboard-theme="dark"] body.workspace-transition-to-launcher .sidebar-brand {
  border-bottom-color: var(--sidebar-line);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-link {
  color: #b7b9bd;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-link:hover {
  background: var(--sidebar-hover);
  color: #f6f6f4;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-link.is-active {
  background: var(--sidebar-active);
  color: #f6f6f4;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-link > svg,
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-external {
  color: #8c9096;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-link:hover > svg,
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-link.is-active > svg {
  color: #d5d6d3;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-theme-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  background: #17191c;
  color: #a7aaaf;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .sidebar-launcher-theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: #232529;
  color: #f1f1ef;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .main,
  .content,
  .workspace,
  .workspace-launcher-page,
  .workspace-launcher-main
) {
  background: var(--launcher-dark-canvas) !important;
  color: var(--launcher-dark-text);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-heading h2,
  .workspace-creation-heading h2,
  .launcher-invitations-heading h2,
  .workspace-launcher-row-copy strong,
  .workspace-create-disclosure strong,
  .launcher-invitation-copy strong,
  .us-page-heading h1,
  .us-identity-copy strong,
  .us-section-label h2,
  .us-row-title,
  .us-owned-workspace strong
) {
  color: var(--launcher-dark-text);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-heading > span,
  .workspace-launcher-heading p,
  .workspace-creation-heading > span,
  .workspace-creation-heading p,
  .workspace-launcher-row-copy small,
  .workspace-create-disclosure small,
  .workspace-launcher-open,
  .workspace-launcher-form label,
  .workspace-launcher-form .form-helper,
  .workspace-launcher-empty,
  .launcher-invitation-copy small,
  .launcher-invitations-empty,
  .launcher-invitations-empty strong,
  .launcher-invitations-empty span,
  .launcher-invitations-loading,
  .us-page-heading p,
  .us-identity-copy span,
  .us-section-label p,
  .us-row-hint,
  .us-row-control .form-helper,
  .us-owned-workspaces-empty
) {
  color: var(--launcher-dark-muted);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-row,
  .launcher-invitation-row,
  .workspace-create-disclosure,
  .us-section,
  .us-owned-workspace
) {
  border-color: var(--launcher-dark-border);
  background: var(--launcher-dark-surface);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-row:hover,
  button.workspace-create-disclosure:hover
) {
  border-color: var(--launcher-dark-border-strong);
  background: var(--launcher-dark-surface-raised);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .launcher-invitation-icon,
  .us-section-mark,
  .us-owned-workspace-mark
) {
  border-color: var(--launcher-dark-border);
  background: #25272b;
  color: #b8c1c8;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .workspace-launcher-icon {
  color: #aeb7bf;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .workspace-create-icon {
  border-color: #555a61;
  background: transparent;
  color: #b8bbc0;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .workspace-create-chevron,
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .workspace-creation-back {
  color: #a3a6ab;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .workspace-creation-back:hover {
  background: #222428;
  color: var(--launcher-dark-text);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-form input,
  .us-row-control input,
  .us-delete-confirmation input
) {
  border-color: var(--launcher-dark-border-strong);
  background: var(--launcher-dark-surface-soft);
  color: var(--launcher-dark-text);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-form input,
  .us-row-control input,
  .us-delete-confirmation input
)::placeholder {
  color: var(--launcher-dark-faint);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-form button,
  .launcher-invitation-accept,
  .us-row-control .button-primary
) {
  border-color: #dedfdf;
  background: #dedfdf;
  color: #151618;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .workspace-launcher-form button,
  .launcher-invitation-accept,
  .us-row-control .button-primary
):hover {
  border-color: #ffffff;
  background: #ffffff;
  color: #111214;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .launcher-invitation-reject {
  border-color: var(--launcher-dark-border-strong);
  background: #232529;
  color: #d4d5d6;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .launcher-invitations-loading-bar,
  .us-row-divider
) {
  background: var(--launcher-dark-border);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .launcher-invitations-loading-bar::after {
  background: #8b9399;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-page-header,
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-identity {
  border-color: var(--launcher-dark-border);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-section-label {
  border-color: var(--launcher-dark-border);
  background: var(--launcher-dark-surface-raised);
  color: var(--launcher-dark-text);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-danger-section > summary.us-section-label,
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-danger-section .us-section-body {
  border-color: var(--launcher-dark-border);
  background: var(--launcher-dark-surface);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .us-danger-label,
  .us-danger-label h2,
  .us-danger-label p,
  .us-danger-chevron
) {
  color: var(--launcher-dark-muted);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-muted-danger-button {
  border-color: var(--launcher-dark-border-strong);
  background: #24262a;
  color: #c8cacc;
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-muted-danger-button:hover:not(:disabled) {
  border-color: #5a5f66;
  background: #2d3034;
  color: var(--launcher-dark-text);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) :is(
  .modal-card.us-delete-modal-card,
  .us-delete-terms
) {
  border-color: var(--launcher-dark-border);
  background: var(--launcher-dark-surface-raised);
  color: var(--launcher-dark-muted);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-delete-terms h3,
html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-delete-confirmation strong {
  color: var(--launcher-dark-text);
}

html[data-dashboard-theme="dark"] body.nav-locked:has(.workspace-launcher-page) .us-delete-terms p {
  border-color: var(--launcher-dark-border);
}

/* Opened AI Agent and AI Dispatcher: complete graphite dark theme -----------
   Keep previews and embedded iframes isolated so their configured customer
   theme remains an honest preview. Everything used to configure them follows
   the Console theme. */
html[data-dashboard-theme="dark"] body.agent-selected {
  --agent-dark-canvas: #111214;
  --agent-dark-surface: #191a1d;
  --agent-dark-surface-raised: #1e2023;
  --agent-dark-surface-soft: #151618;
  --agent-dark-field: #131416;
  --agent-dark-hover: #24262a;
  --agent-dark-border: #303338;
  --agent-dark-border-strong: #464a50;
  --agent-dark-text: #ededeb;
  --agent-dark-muted: #9b9ea3;
  --agent-dark-faint: #74787e;
  --agent-dark-accent: #7fa4b5;
  --agent-dark-accent-soft: #202b31;
  color-scheme: dark;
  background: var(--agent-dark-canvas);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(.main, .content, .workspace),
html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active :is(
  .agent-workspace-shell,
  .agent-workspace-content,
  .agent-workspace-main
),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .dispatcher-intake-page,
  .dispatcher-intake-shell
) {
  background: var(--agent-dark-canvas) !important;
  color: var(--agent-dark-text);
}

/* Agent header and persistent workspace chrome. */
html[data-dashboard-theme="dark"] body.agent-selected .agent-top-nav {
  border-color: var(--agent-dark-border);
  background: #151618;
  color: var(--agent-dark-text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

html[data-dashboard-theme="dark"] body.agent-selected .app-header {
  border-color: var(--agent-dark-border);
  background: #151618;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-top-back,
  .agent-top-link,
  .agent-context-heading span,
  .agent-workspace-status-metrics dt
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-context-heading strong,
  .agent-workspace-status-metrics dd
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-top-back:hover,
  .agent-top-link:hover,
  .agent-top-link.is-active,
  .agent-top-menu.is-active > .agent-top-link
) {
  color: #f7f7f5;
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-top-link::after {
  background: var(--agent-dark-accent);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-top-menu-panel,
html[data-dashboard-theme="dark"] body.agent-selected .agent-top-menu-panel button {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-top-menu-panel {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-top-menu-panel button:hover,
html[data-dashboard-theme="dark"] body.agent-selected .agent-top-menu-panel button.is-active {
  background: var(--agent-dark-hover);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-workspace-status-metrics > div {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-nav-panel,
html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-main,
html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-preview-panel {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface) !important;
  color: var(--agent-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-preview-frame {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-surface-soft);
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-local-heading {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active :is(
  .agent-workspace-local-heading span,
  .agent-workspace-nav-group h2
) {
  color: var(--agent-dark-faint);
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-local-heading strong {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-nav-item {
  color: #b2b5b9;
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-nav-icon {
  color: #8f9ca5;
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-nav-item:hover {
  background: #232529;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-nav-item.is-active {
  background: #2a2d31;
  color: #f4f4f2;
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-nav-item:is(:hover, .is-active) .agent-workspace-nav-icon {
  color: #c3d0d6;
}

html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-nav-icon.has-logo {
  border-color: var(--agent-dark-border);
  background: #f4f4f2;
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-preview-launcher,
html[data-dashboard-theme="dark"] body.agent-selected .agent-workspace-preview-controls button {
  border-color: var(--agent-dark-border-strong);
  background: #25272b;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-preview-launcher:hover,
html[data-dashboard-theme="dark"] body.agent-selected .agent-workspace-preview-controls button:hover {
  background: #303338;
}

/* Shared content, controls, menus, and modal foundations. */
html[data-dashboard-theme="dark"] body.agent-selected .agent-workspace-content,
html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-intake-page {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-workspace-content :is(
  h1, h2, h3, h4, h5, h6,
  label,
  legend,
  strong,
  .section-label,
  .field-label
),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  h1, h2, h3, h4,
  label,
  strong
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-workspace-content :is(
  p,
  small,
  .section-helper,
  .form-helper,
  .field-helper,
  .field-meta,
  .field-count,
  .empty-note
),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  p,
  small,
  .form-helper,
  .field-helper,
  .field-meta,
  .field-count
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-workspace-content,
  .modal-card
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea
) {
  border-color: var(--agent-dark-border-strong) !important;
  background: var(--agent-dark-field) !important;
  color: var(--agent-dark-text) !important;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-workspace-content,
  .modal-card
) :is(input, textarea)::placeholder,
html[data-dashboard-theme="dark"] body.dispatcher-context :is(input, textarea)::placeholder {
  color: #6f7379;
  opacity: 1;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-workspace-content,
  .modal-card
) :is(input, select, textarea):focus,
html[data-dashboard-theme="dark"] body.dispatcher-context :is(input, select, textarea):focus {
  border-color: #68737b !important;
  box-shadow: 0 0 0 3px rgba(127, 164, 181, 0.14) !important;
  outline: 0;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(.modal-card, .create-agent-modal-card),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(.modal-card, .create-agent-modal-card) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

html[data-dashboard-theme="dark"] body.agent-selected .modal-backdrop,
html[data-dashboard-theme="dark"] body.dispatcher-context .modal-backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(.modal-header, .form-section-header, .team-actions),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(.modal-header, .team-actions) {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(.menu-button, .icon-button, .modal-close),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(.menu-button, .icon-button, .modal-close) {
  border-color: var(--agent-dark-border);
  background: #24262a;
  color: #c9cbcc;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(.menu-button, .icon-button, .modal-close):hover,
html[data-dashboard-theme="dark"] body.dispatcher-context :is(.menu-button, .icon-button, .modal-close):hover {
  border-color: var(--agent-dark-border-strong);
  background: #303338;
  color: #f3f3f1;
}

html[data-dashboard-theme="dark"] body.agent-selected .menu-dropdown,
html[data-dashboard-theme="dark"] body.dispatcher-context .menu-dropdown {
  border-color: var(--agent-dark-border-strong);
  background: #1d1f22;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

html[data-dashboard-theme="dark"] body.agent-selected .menu-dropdown button,
html[data-dashboard-theme="dark"] body.dispatcher-context .menu-dropdown button {
  background: transparent;
  color: #dedfdd;
}

html[data-dashboard-theme="dark"] body.agent-selected .menu-dropdown button:hover,
html[data-dashboard-theme="dark"] body.dispatcher-context .menu-dropdown button:hover {
  background: #2b2e32;
  color: #fff;
}

html[data-dashboard-theme="dark"] body.agent-selected .button.button-primary,
html[data-dashboard-theme="dark"] body.dispatcher-context .button.button-primary {
  border-color: #e2e3e0;
  background: #e2e3e0;
  color: #151618;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body.agent-selected .button.button-primary:hover:not(:disabled),
html[data-dashboard-theme="dark"] body.dispatcher-context .button.button-primary:hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: #0f1011;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .button.button-ghost,
  .button.button-secondary,
  .button.button-outline
),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .button.button-ghost,
  .button.button-secondary,
  .button.button-outline
) {
  border-color: var(--agent-dark-border-strong);
  background: #24262a;
  color: #d4d5d3;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .button.button-ghost,
  .button.button-secondary,
  .button.button-outline
):hover:not(:disabled),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .button.button-ghost,
  .button.button-secondary,
  .button.button-outline
):hover:not(:disabled) {
  border-color: #5a5f66;
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(.button, .menu-button, .icon-button):focus-visible,
html[data-dashboard-theme="dark"] body.dispatcher-context :is(.button, .menu-button, .icon-button):focus-visible {
  outline-color: rgba(161, 188, 201, 0.8);
}

/* Agent setup. */
html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-content .playground-shell,
html[data-dashboard-theme="dark"] body.agent-selected.agent-workspace-active .agent-workspace-content .playground-menu {
  background: var(--agent-dark-surface) !important;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(.agent-setup-toolbar, .agent-form-section) {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected .identity-form .agent-setup-name-input {
  color: var(--agent-dark-text) !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-workspace-content .identity-form input.agent-setup-name-input[readonly]:not(.is-editing) {
  appearance: none;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .identity-form .agent-setup-name-input.is-editing {
  border-color: var(--agent-dark-border-strong) !important;
  background: var(--agent-dark-field) !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-name-edit-button {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-name-edit-button:hover,
html[data-dashboard-theme="dark"] body.agent-selected .agent-name-edit-button.is-editing {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-hover);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-form-section > header h3,
  .agent-intelligence-option-heading strong,
  .agent-capability-toggle-copy strong
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-form-section > header p,
  .agent-setup-field > label,
  .agent-intelligence-option-copy,
  .agent-capability-toggle-copy span
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-intelligence-option-body,
  .agent-capability-toggle
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-intelligence-option:hover .agent-intelligence-option-body {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-intelligence-option > input:checked + .agent-intelligence-option-body {
  border-color: #68818d;
  background: var(--agent-dark-accent-soft);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .apps-user-toggle-track,
  .agent-capability-toggle-control
) {
  border-color: var(--agent-dark-border-strong);
  background: #34373c;
}

/* Agent overview directory. */
html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-page {
  background: var(--agent-dark-surface);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-overview-profile,
  .agent-directory-section,
  .agent-overview-index
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-heading {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-overview-heading h1,
  .agent-overview-identity p,
  .agent-directory-heading h2,
  .agent-directory-copy strong
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-overview-heading > span,
  .agent-overview-field-label,
  .agent-overview-index > span,
  .agent-directory-heading > span,
  .agent-directory-heading p,
  .agent-directory-copy > span,
  .agent-overview-index a
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-mark {
  border-color: var(--agent-dark-border);
  background: #24292d;
  color: var(--agent-dark-accent);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-edit {
  border-color: var(--agent-dark-border-strong);
  background: #24262a;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-edit:hover {
  background: #303338;
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-identity,
html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-list {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-identity > div + div,
html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-row + .agent-directory-row {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-row {
  background: transparent;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-row:hover {
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-icon {
  border-color: var(--agent-dark-border);
  background: #24272b;
  color: var(--agent-dark-accent);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-icon.has-logo {
  background: #f1f2ef;
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-directory-arrow {
  color: var(--agent-dark-faint);
}

html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-index a:hover,
html[data-dashboard-theme="dark"] body.agent-selected .agent-overview-index a.is-active {
  background: var(--agent-dark-hover);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .info-tooltip {
  border-color: var(--agent-dark-border-strong);
  background: #24262a;
  color: #d8dad9;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

/* Knowledge and action subpages, including their create/edit interiors. */
html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-resource-page,
  .agent-action-page,
  .agent-deployment-page,
  .faqs-page,
  .notes-page,
  .products-page,
  .docs-page,
  .notion-page,
  .custom-api-page,
  .custom-button-page,
  .zapier-page,
  .make-page,
  .slack-page,
  .api-deploy-page
) {
  background: var(--agent-dark-surface);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-subpage-header,
  .faqs-toolbar,
  .notes-toolbar,
  .products-toolbar,
  .custom-api-toolbar,
  .custom-button-toolbar,
  .zapier-toolbar,
  .make-toolbar,
  .slack-toolbar,
  .docs-card-header,
  .docs-uploads-header,
  .notion-header
) {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .agent-subpage-kicker,
  .agent-subpage-header p,
  .agent-subpage-count,
  .faq-answer,
  .note-content,
  .product-description,
  .product-meta,
  .custom-api-card p,
  .custom-button-card p,
  .zapier-card p,
  .make-card p,
  .slack-card p,
  .docs-card-header p,
  .doc-meta,
  .upload-meta,
  .notion-item-status
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .faq-description,
  .faq-section li,
  .note-title,
  .product-title,
  .doc-title,
  .upload-title,
  .notion-item-title,
  .custom-api-card h3,
  .custom-button-card h3,
  .zapier-card h3,
  .make-card h3,
  .slack-card h3
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .faqs-shell,
  .notes-shell,
  .products-shell,
  .custom-api-shell,
  .custom-button-shell,
  .zapier-shell,
  .make-shell,
  .slack-shell,
  .docs-card,
  .docs-list-card,
  .notion-shell
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface);
  color: var(--agent-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .notion-header,
  .notion-connect
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .faq-card,
  .note-card,
  .product-card,
  .custom-api-card,
  .custom-button-card,
  .zapier-card,
  .make-card,
  .slack-card,
  .doc-row,
  .upload-item,
  .notion-item
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .faq-card,
  .note-card,
  .product-card,
  .custom-api-card,
  .custom-button-card,
  .zapier-card,
  .make-card,
  .slack-card,
  .doc-row,
  .notion-item
):hover {
  border-color: var(--agent-dark-border-strong);
  background: #232529;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .faq-form-section,
  .note-form-section,
  .product-form-section,
  .custom-api-form-section,
  .custom-button-form-section,
  .zapier-form-section,
  .make-form-section,
  .slack-form-section
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .faq-form-header,
  .note-form-header,
  .product-form-header,
  .custom-api-form-header,
  .custom-button-form-header,
  .zapier-form-header,
  .make-form-header,
  .slack-form-header,
  .custom-api-group-header,
  .custom-button-preview-header,
  .zapier-group-header,
  .make-group-header
) {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .faq-example-row,
  .custom-api-item,
  .custom-button-preview,
  .zapier-group,
  .make-group,
  .dropzone
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .dropzone:hover,
html[data-dashboard-theme="dark"] body.agent-selected .dropzone.is-dragover {
  border-color: #667782;
  background: var(--agent-dark-accent-soft);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .custom-api-method,
  .custom-button-pill,
  .tag,
  .status-badge,
  .stripe-status-pill
) {
  border-color: var(--agent-dark-border-strong);
  background: #292c30;
  color: #d8d9d7;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .custom-api-url,
  .custom-button-url,
  .zapier-url,
  .make-url,
  .slack-url,
  .web-embed-code,
  .api-key-inline-copy
) {
  border-color: var(--agent-dark-border);
  background: #121315;
  color: #c3ced4;
}

/* Dynamic sources: table, filters, drawers, import states, and cell editors. */
html[data-dashboard-theme="dark"] body.agent-selected .dynamic-sources-page,
html[data-dashboard-theme="dark"] body.agent-selected .dynamic-sources-shell {
  background: var(--agent-dark-surface) !important;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-sources-topbar,
  .dynamic-table-card,
  .dynamic-drawer,
  .dynamic-filters-menu,
  .dynamic-menu-list,
  .dynamic-import-error-modal
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-topbar-middle,
  .dynamic-topbar-controls
) {
  border-color: var(--agent-dark-border);
  background: rgba(25, 26, 29, 0.92);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-inline-tooltip {
  border-color: var(--agent-dark-border-strong);
  background: #24262a;
  color: #d8dad9;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-control-tile,
  .dynamic-name-tile,
  .dynamic-enabled-tile,
  .dynamic-search-field,
  .dynamic-filters-toggle,
  .dynamic-csv-button,
  .dynamic-menu-trigger,
  .dynamic-column-type-select,
  .dynamic-filter-field
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: #d7d8d6;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-control-tile,
  .dynamic-name-tile,
  .dynamic-filters-toggle,
  .dynamic-csv-button,
  .dynamic-menu-trigger
):hover {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-table,
  .dynamic-row-grid,
  .dynamic-column-header-cell,
  .dynamic-row-index-cell,
  .dynamic-first-cell,
  .dynamic-trailing-cell,
  .dynamic-insert-row,
  .dynamic-add-header-cell
) {
  border-color: var(--agent-dark-border) !important;
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-table :is(th, td),
html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-empty-cell,
  .dynamic-row-toolbar,
  .dynamic-empty-state,
  .dynamic-inline-form,
  .dynamic-cell-input,
  .dynamic-cell-bool-editor
) {
  border-color: var(--agent-dark-border) !important;
  background: var(--agent-dark-surface-soft) !important;
  color: var(--agent-dark-text) !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-table thead th {
  background: #202226 !important;
  color: #c6c9cb !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-table tbody tr:nth-child(even) td {
  background: #181a1d !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-table tbody tr:hover td {
  background: var(--agent-dark-hover) !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-table :is(
  .dynamic-add-header-cell,
  .dynamic-first-cell,
  .dynamic-row-index-cell,
  .dynamic-trailing-cell,
  .dynamic-row-insert-cell
):hover {
  background: #2b2e32 !important;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-control-value,
  .dynamic-name-inline-input,
  .dynamic-topbar-label,
  .dynamic-stat-chip,
  .dynamic-stat-chip strong,
  .dynamic-stat-chip em,
  .dynamic-toggle,
  .dynamic-active-filter-chip,
  .dynamic-active-filter-chip strong,
  .dynamic-active-filter-chip em,
  .dynamic-form-field label,
  .dynamic-checkbox,
  .dynamic-filter-switch,
  .dynamic-bool-switch
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-stat-chip,
  .dynamic-active-filter-chip,
  .dynamic-empty-state,
  .dynamic-inline-form
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-col-type-icon,
  .dynamic-col-filter-icon,
  .dynamic-menu-trigger svg,
  .dynamic-plus-glyph
) {
  color: var(--agent-dark-accent);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-form-field input,
  .dynamic-form-field select,
  .dynamic-cell-input
) {
  border-color: var(--agent-dark-border-strong) !important;
  background-color: var(--agent-dark-field) !important;
  color: var(--agent-dark-text) !important;
  box-shadow: none !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-row-grid:nth-child(even),
html[data-dashboard-theme="dark"] body.agent-selected .dynamic-table tbody tr:nth-child(even) {
  background: #181a1d;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-control-label,
  .dynamic-col-name,
  .dynamic-row-index,
  .dynamic-inline-help,
  .dynamic-active-filter-empty,
  .dynamic-insert-row-label
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .dynamic-menu-item,
  .dynamic-filter-add,
  .dynamic-filter-clear,
  .dynamic-custom-field-remove
) {
  color: #c9cbca;
}

html[data-dashboard-theme="dark"] body.agent-selected .dynamic-menu-item:hover,
html[data-dashboard-theme="dark"] body.agent-selected .dynamic-menu-item.is-selected {
  background: var(--agent-dark-hover);
  color: #fff;
}

/* API, web embed, and hosted chat deployment controls. */
html[data-dashboard-theme="dark"] body.agent-selected :is(
  .api-deploy-shell,
  .web-embed-shell,
  .chat-page-deploy-page,
  .web-embed-menu,
  .chat-page-deploy-menu
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface) !important;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .api-deploy-section,
  .api-request-step,
  .web-embed-section,
  .chat-page-deploy-section,
  .chat-page-deploy-section-grouped,
  .chat-page-custom-domain-panel,
  .web-embed-snippet-help
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .api-deploy-header,
  .api-key-section,
  .api-deploy-instructions,
  .web-embed-section + .web-embed-section,
  .chat-page-deploy-section + .chat-page-deploy-section,
  .deployment-pane-tabs,
  .chat-page-deploy-theme-group + .chat-page-deploy-theme-group
) {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .api-section-label,
  .api-deploy-header p,
  .api-request-step p,
  .web-embed-label,
  .web-embed-hint,
  .chat-page-deploy-label,
  .chat-page-deploy-hint,
  .chat-page-deploy-theme-head p,
  .chat-page-deploy-upload-copy span,
  .chat-page-custom-domain-empty
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .api-key-icon-btn,
  .chat-page-password-toggle,
  .chat-page-password-save-icon,
  .chat-page-deploy-upload-delete
) {
  border-color: var(--agent-dark-border);
  background: #24262a;
  color: #cbd0d2;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .api-endpoint-row,
  .api-deploy-instructions pre,
  .api-request-step pre
) {
  border-color: var(--agent-dark-border);
  background: #101113;
  color: #c5d1d7;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .api-endpoint-row code,
  .api-deploy-instructions pre code,
  .api-key-row input,
  .api-key-display
) {
  color: #d5dde1 !important;
}

html[data-dashboard-theme="dark"] body.agent-selected .api-request-step-heading > span {
  color: #88b2c5;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .web-embed-switch-row,
  .chat-page-deploy-switch-row,
  .chat-page-password-row,
  .chat-page-custom-domain-dns-row,
  .chat-page-deploy-upload,
  .chat-page-deploy-danger
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .web-embed-overlay-card,
  .chat-page-deploy-overlay-card
) {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
}

html[data-dashboard-theme="dark"] body.agent-selected .chat-page-deploy-danger[open] {
  background: #20191a;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .web-embed-code,
  .chat-page-deploy-code,
  .api-request-grid code,
  .chat-page-custom-domain-dns code
) {
  border-color: var(--agent-dark-border);
  background: #101113;
  color: #c5d1d7;
}

/* Chat logs, conversation details, and open action menus. */
html[data-dashboard-theme="dark"] body.agent-selected .activity-page {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface) !important;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .activity-list,
  .activity-detail,
  .activity-header,
  .activity-filters,
  .detail-header,
  .detail-tabs,
  .detail-body
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .activity-search,
  .activity-filters input,
  .activity-filters select,
  .activity-load-more,
  .detail-dropdown
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .conversation-card {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .conversation-card:hover {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.agent-selected .conversation-card.is-active {
  border-color: #647984;
  background: var(--agent-dark-accent-soft);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .conversation-time,
  .conversation-subtitle,
  .conversation-meta,
  .conversation-footer,
  .chat-time,
  .detail-header-source span,
  .details-grid span,
  .activity-count,
  .activity-empty-state
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .conversation-title,
  .detail-header-source h2,
  .details-grid strong
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .detail-dropdown button,
  .detail-tabs .tab
) {
  background: transparent;
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected .detail-dropdown button:hover,
html[data-dashboard-theme="dark"] body.agent-selected .detail-tabs .tab.is-active {
  background: var(--agent-dark-hover);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .chat-message .bubble {
  border-color: var(--agent-dark-border);
  background: #24262a;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .chat-message.user .bubble {
  background: #26343b;
  color: #f2f4f3;
}

html[data-dashboard-theme="dark"] body.agent-selected .details-grid div {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
}

/* Insights builder, generated report, charts, and selects. */
html[data-dashboard-theme="dark"] body.agent-selected :is(
  .insights-page,
  .insights-builder,
  .insights-report-shell,
  .insights-report
) {
  background: var(--agent-dark-surface) !important;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .insights-builder-panel,
  .insights-action-card,
  .insights-panel,
  .insights-metric,
  .insights-report-grid > *,
  .insights-select-menu,
  .insights-empty,
  .insights-error
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .insights-control,
  .insights-date-field,
  .insights-select,
  .insights-generate,
  .insights-periods,
  .insights-periods button,
  .insights-select > button
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: #d6d8d7;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .insights-eyebrow,
  .insights-builder-copy p,
  .insights-panel-head span,
  .insights-metric span,
  .insights-chart-label,
  .insights-country-row span,
  .insights-channel-row span,
  .insights-hour-cell span
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .insights-grid-line,
  .insights-chart-grid,
  .insights-bar-line
) {
  border-color: var(--agent-dark-border);
  stroke: var(--agent-dark-border-strong);
}

html[data-dashboard-theme="dark"] body.agent-selected .insights-select-menu button {
  background: transparent;
  color: #d7d8d6;
}

html[data-dashboard-theme="dark"] body.agent-selected .insights-select-menu button:hover,
html[data-dashboard-theme="dark"] body.agent-selected .insights-select-menu button.is-selected {
  background: var(--agent-dark-hover);
  color: #fff;
}

/* Channel connection, routing, detail panels, and nested dialogs. */
html[data-dashboard-theme="dark"] body.agent-selected :is(
  .live-channels-page,
  .lc-layout,
  .lc-sidebar,
  .lc-main,
  .lc-detail-panel,
  .lc-detail-body
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface) !important;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .lc-sidebar-header,
  .lc-detail-header,
  .lc-detail-footer,
  .lc-detail-section,
  .lc-line-manager-head,
  .lc-line-connect-panel-head
) {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.agent-selected .lc-detail-header {
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .lc-sidebar-icon {
  border-color: var(--agent-dark-border);
  background: #24292d;
  color: var(--agent-dark-accent);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .lc-nav-item,
  .lc-account-row,
  .lc-bot-card,
  .lc-line-channel-card,
  .lc-line-connect-panel,
  .lc-info-note,
  .lc-line-plain-guide,
  .lc-detail-empty,
  .channel-routing-option,
  .channel-connect-confirm-list
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .lc-nav-item:hover,
html[data-dashboard-theme="dark"] body.agent-selected .lc-nav-item.is-active,
html[data-dashboard-theme="dark"] body.agent-selected :is(.lc-account-row, .lc-line-channel-card):hover,
html[data-dashboard-theme="dark"] body.agent-selected .channel-routing-option:hover {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .lc-nav-heading,
  .lc-nav-text small,
  .lc-account-subtle,
  .lc-detail-section-label,
  .lc-toggle-hint,
  .lc-empty-row,
  .lc-line-channel-copy span,
  .lc-detail-empty p
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .lc-nav-title,
  .lc-account-name,
  .lc-toggle-title,
  .lc-line-channel-copy strong,
  .lc-detail-section-heading
) {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .crm-select-trigger,
  .lc-agent-select,
  .auth-field,
  .lc-line-connect-form input,
  .lc-telegram-connect-form input
) {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-field);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.agent-selected .crm-select-menu {
  border-color: var(--agent-dark-border-strong);
  background: #1d1f22;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

html[data-dashboard-theme="dark"] body.agent-selected .crm-select-option {
  background: transparent;
  color: #d6d8d7;
}

html[data-dashboard-theme="dark"] body.agent-selected .crm-select-option:hover,
html[data-dashboard-theme="dark"] body.agent-selected .crm-select-option.is-selected {
  background: var(--agent-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .channel-connect-modal-card,
  .channel-routing-modal-card
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
}

/* AI Dispatcher setup, routing lists, custom fields, and sticky summary. */
html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-workbench,
html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-config-stack {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .dispatcher-intake-section,
  .dispatcher-summary-card,
  .dispatcher-ai-routing-panel,
  .dispatcher-custom-fields-panel
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-raised);
  color: var(--agent-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .dispatcher-intake-section-header,
  .dispatcher-intake-actions,
  .dispatcher-summary-row,
  .dispatcher-name-section,
  .dispatcher-ai-routing-master
) {
  border-color: var(--agent-dark-border);
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-ai-routing-master {
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .dispatcher-section-kicker,
  .dispatcher-intake-section-header p,
  .dispatcher-identity-field > span,
  .dispatcher-identity-field > label,
  .dispatcher-intake-row span,
  .dispatcher-ai-routing-master span,
  .dispatcher-summary-card > span,
  .dispatcher-summary-card p,
  .dispatcher-summary-row span,
  .dispatcher-intake-empty
) {
  color: var(--agent-dark-muted);
}

html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .dispatcher-identity-field > input,
  .dispatcher-timezone-trigger,
  .dispatcher-timezone-popover,
  .dispatcher-timezone-search-wrap input
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-timezone-popover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-timezone-option {
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-timezone-option:hover,
html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-timezone-option:focus-visible {
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-timezone-option[aria-selected="true"] {
  background: rgba(20, 184, 166, 0.18);
  color: #99f6e4;
}

html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .dispatcher-intake-row,
  .dispatcher-ai-agent-row,
  .dispatcher-custom-field-row,
  .dispatcher-intake-empty
) {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  .dispatcher-intake-row,
  .dispatcher-ai-agent-row
):hover {
  border-color: var(--agent-dark-border-strong);
  background: var(--agent-dark-hover);
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-summary-card.is-dark {
  border-color: #3b4b53;
  background: #1c252a;
  color: var(--agent-dark-text);
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-custom-field-remove,
html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-custom-field-add {
  border-color: var(--agent-dark-border);
  background: #24262a;
  color: #d4d6d5;
}

html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-custom-field-remove:hover,
html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-custom-field-add:hover {
  border-color: var(--agent-dark-border-strong);
  background: #303338;
  color: #fff;
}

/* Disabled, empty, and status states must remain legible in either workspace. */
html[data-dashboard-theme="dark"] body.agent-selected :is(
  [disabled],
  .is-disabled,
  .is-faint,
  .is-locked
),
html[data-dashboard-theme="dark"] body.dispatcher-context :is(
  [disabled],
  .is-disabled
) {
  opacity: 0.58;
}

html[data-dashboard-theme="dark"] body.agent-selected :is(
  .empty-note,
  .activity-empty-state,
  .insights-empty,
  .lc-detail-empty,
  .dynamic-active-filter-empty
),
html[data-dashboard-theme="dark"] body.dispatcher-context .dispatcher-intake-empty {
  border-color: var(--agent-dark-border);
  background: var(--agent-dark-surface-soft);
}

html[data-dashboard-theme="dark"] body.agent-selected ::selection,
html[data-dashboard-theme="dark"] body.dispatcher-context ::selection {
  background: rgba(127, 164, 181, 0.34);
  color: #fff;
}

/* Workspace Channels: all four services and their nested interaction states. */
html[data-dashboard-theme="dark"] body:has(.live-channels-page) {
  --channels-dark-canvas: #111214;
  --channels-dark-surface: #191a1d;
  --channels-dark-surface-raised: #1e2023;
  --channels-dark-surface-soft: #151618;
  --channels-dark-field: #131416;
  --channels-dark-hover: #24262a;
  --channels-dark-border: #303338;
  --channels-dark-border-strong: #464a50;
  --channels-dark-text: #ededeb;
  --channels-dark-muted: #9b9ea3;
  --channels-dark-faint: #74787e;
  --channels-dark-accent: #7fa4b5;
  color-scheme: dark;
  background: var(--channels-dark-canvas);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) :is(
  .main,
  .content,
  .workspace,
  .live-channels-page
) {
  background: var(--channels-dark-canvas) !important;
  color: var(--channels-dark-text);
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-layout,
  .lc-sidebar,
  .lc-main,
  .lc-detail-panel,
  .lc-detail-body
) {
  border-color: var(--channels-dark-border);
  background: var(--channels-dark-surface) !important;
  color: var(--channels-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-sidebar {
  border-right-color: var(--channels-dark-border);
  background: var(--channels-dark-surface-soft) !important;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-sidebar-header,
  .lc-nav-heading,
  .lc-detail-header,
  .lc-detail-section,
  .lc-detail-footer,
  .lc-line-manager-head,
  .lc-line-connect-panel-head
) {
  border-color: var(--channels-dark-border);
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-sidebar-header h1,
  .lc-detail-header h2,
  .lc-detail-empty h2,
  .lc-account-name,
  .lc-toggle-title,
  .lc-line-manager-head h3,
  .lc-line-connect-panel-head strong,
  .lc-line-plain-guide h3,
  .lc-line-add-row strong,
  .lc-line-channel-copy strong,
  .lc-bot-card-header h3
) {
  color: var(--channels-dark-text);
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-sidebar-header p,
  .lc-nav-heading,
  .lc-nav-heading small,
  .lc-detail-header p,
  .lc-detail-empty p,
  .lc-detail-section-label,
  .lc-review-note,
  .lc-account-subtle,
  .lc-routing-status,
  .lc-toggle-hint,
  .lc-line-manager-head p,
  .lc-line-plain-guide p,
  .lc-line-add-row small,
  .lc-line-channel-copy span,
  .lc-bot-card-header p,
  .lc-empty-row
) {
  color: var(--channels-dark-muted);
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-sidebar-icon {
  border-color: var(--channels-dark-border);
  background: #24292d;
  color: var(--channels-dark-accent);
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-nav-item {
  background: transparent;
  color: #b5b8bc;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-nav-item:hover {
  background: #222428;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-nav-item.is-active {
  background: #2a2d31;
  color: #f5f5f3;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-nav-title {
  color: #c9cbcc;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-nav-item.is-active .lc-nav-title {
  color: #f5f5f3;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-nav-text small {
  color: var(--channels-dark-faint);
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-nav-logo,
  .lc-detail-header-logo,
  .lc-detail-empty-logo,
  .lc-account-avatar-wrap
) {
  border-color: var(--channels-dark-border);
  background: #f2f3f0;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-detail-header {
  background: var(--channels-dark-surface-raised) !important;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-detail-footer {
  background: rgba(25, 26, 29, 0.97);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-account-row,
  .lc-bot-card,
  .lc-line-channel-card,
  .lc-line-connect-panel,
  .lc-line-add-row,
  .lc-info-note,
  .lc-empty-row,
  .lc-line-plain-guide
) {
  border-color: var(--channels-dark-border);
  background: var(--channels-dark-surface-soft);
  color: var(--channels-dark-text);
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-account-row,
  .lc-bot-card,
  .lc-line-channel-card,
  .lc-line-add-row
):hover {
  border-color: var(--channels-dark-border-strong);
  background: var(--channels-dark-hover);
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-connected-info {
  border-color: #315d4d;
  background: #192a24;
  color: #8dd2b4;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-status-pill {
  background: #292c30;
  color: #a7aaae;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-status-pill.is-connected {
  background: #1d3028;
  color: #8dd2b4;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-badge {
  background: #3b3020;
  color: #e8bf78;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-badge-green {
  background: #1d3028;
  color: #8dd2b4;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .auth-field input,
  .lc-telegram-connect-form input,
  .lc-line-connect-form input,
  .crm-select-trigger
) {
  border-color: var(--channels-dark-border-strong) !important;
  background: var(--channels-dark-field) !important;
  color: var(--channels-dark-text) !important;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .auth-field input,
  .lc-telegram-connect-form input,
  .lc-line-connect-form input
)::placeholder {
  color: #6f7379;
  opacity: 1;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .auth-field input,
  .lc-telegram-connect-form input,
  .lc-line-connect-form input,
  .crm-select-trigger
):focus {
  border-color: #68737b !important;
  box-shadow: 0 0 0 3px rgba(127, 164, 181, 0.14) !important;
  outline: 0;
}

html[data-dashboard-theme="dark"] .live-channels-page .crm-select-menu {
  border-color: var(--channels-dark-border-strong);
  background: #1d1f22;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

html[data-dashboard-theme="dark"] .live-channels-page .crm-select-option {
  background: transparent;
  color: #d6d8d7;
}

html[data-dashboard-theme="dark"] .live-channels-page .crm-select-option:hover,
html[data-dashboard-theme="dark"] .live-channels-page .crm-select-option.is-selected {
  background: var(--channels-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-line-form-close,
  .lc-whatsapp-refresh,
  .lc-inline-actions .button.button-ghost,
  .lc-account-actions .button.button-ghost
) {
  border-color: var(--channels-dark-border-strong);
  background: #24262a;
  color: #d4d5d3;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-line-form-close,
  .lc-whatsapp-refresh,
  .lc-inline-actions .button.button-ghost,
  .lc-account-actions .button.button-ghost
):hover:not(:disabled) {
  border-color: #5a5f66;
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] .live-channels-page .button.button-primary {
  border-color: #e2e3e0;
  background: #e2e3e0;
  color: #151618;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .live-channels-page .button.button-primary:hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: #0f1011;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .button.button-ghost,
  .button.button-secondary
) {
  border-color: var(--channels-dark-border-strong);
  background: #24262a;
  color: #d4d5d3;
}

html[data-dashboard-theme="dark"] .live-channels-page .button.button-outline-danger {
  border-color: #744145;
  background: #28191b;
  color: #ef9b9f;
}

html[data-dashboard-theme="dark"] .live-channels-page .button.button-outline-danger:hover:not(:disabled) {
  border-color: #96545a;
  background: #381f22;
  color: #ffc2c5;
}

html[data-dashboard-theme="dark"] .live-channels-page :is(
  .lc-line-webhook-inline code,
  .lc-line-table code,
  .lc-line-channel-copy code
) {
  color: #c6d2d8;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-table-shell {
  border-color: var(--channels-dark-border);
  background: var(--channels-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-line-table :is(th, td) {
  border-color: var(--channels-dark-border);
  color: #c6c8ca;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-line-table th {
  background: #202226;
  color: var(--channels-dark-muted);
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-line-table tbody tr:nth-child(even) {
  background: #181a1d;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-switch-track {
  background: #3a3d42;
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-switch-track::after {
  background: #d8dad8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-dashboard-theme="dark"] .live-channels-page .lc-switch input:checked + .lc-switch-track {
  background: #557789;
}

/* Channel modals can sit outside the visible detail panel, so scope them from
   the page-bearing body rather than only from the page root. */
html[data-dashboard-theme="dark"] body:has(.live-channels-page) .modal-backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) :is(
  .modal-card,
  .channel-routing-modal-card,
  .channel-connect-modal-card
) {
  border-color: var(--channels-dark-border);
  background: var(--channels-dark-surface-raised);
  color: var(--channels-dark-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) :is(
  .modal-header,
  .modal-actions
) {
  border-color: var(--channels-dark-border);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .modal-header :is(h2, h3) {
  color: var(--channels-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .modal-header p,
html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connect-confirm-list {
  color: var(--channels-dark-muted);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-routing-option {
  border-color: var(--channels-dark-border);
  background: var(--channels-dark-surface-soft);
  color: #d8d9d7;
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-routing-option:hover,
html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-routing-option.is-active {
  border-color: #667b86;
  background: #243139;
  color: #f5f7f6;
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) :is(
  .channel-connect-confirm-list,
  .channel-routing-options
) {
  scrollbar-color: #4a4e54 transparent;
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connect-confirm-actions [data-channel-connect-confirm-cancel],
html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-disconnect-actions [data-channel-meta-disconnect-cancel] {
  color: #b9bbbe;
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connect-confirm-actions [data-channel-connect-confirm-cancel]:hover,
html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-disconnect-actions [data-channel-meta-disconnect-cancel]:hover {
  color: #fff;
}

/* OAuth and connection progress overlays. */
html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connection-progress-overlay {
  background: rgba(0, 0, 0, 0.76);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connection-progress-card {
  border-color: var(--channels-dark-border);
  background: var(--channels-dark-surface-raised);
  color: var(--channels-dark-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connection-brand {
  border-color: var(--channels-dark-border);
  background: #f2f3f0;
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connection-brand-line {
  background: #393d42;
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connection-progress-card h2 {
  color: var(--channels-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .channel-connection-progress-card p {
  color: var(--channels-dark-muted);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) .live-channel-oauth-note {
  border-color: var(--channels-dark-border-strong);
  background: var(--channels-dark-surface-soft);
  color: #c7cacc;
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) :is(
  .button,
  .lc-nav-item,
  .lc-line-add-row,
  .lc-line-form-close,
  .crm-select-trigger,
  .channel-routing-option
):focus-visible {
  outline-color: rgba(161, 188, 201, 0.82);
}

html[data-dashboard-theme="dark"] body:has(.live-channels-page) ::selection {
  background: rgba(127, 164, 181, 0.34);
  color: #fff;
}

/* Human Agents: table, filters, category management, invitations, and edits. */
html[data-dashboard-theme="dark"] body:has(.human-agents-page) {
  --humans-dark-canvas: #111214;
  --humans-dark-surface: #191a1d;
  --humans-dark-surface-raised: #1e2023;
  --humans-dark-surface-soft: #151618;
  --humans-dark-field: #131416;
  --humans-dark-hover: #24262a;
  --humans-dark-border: #303338;
  --humans-dark-border-strong: #464a50;
  --humans-dark-text: #ededeb;
  --humans-dark-muted: #9b9ea3;
  --humans-dark-faint: #74787e;
  --humans-dark-accent: #7fa4b5;
  color-scheme: dark;
  background: var(--humans-dark-canvas);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) :is(
  .main,
  .content,
  .workspace,
  .human-agents-page
) {
  background: var(--humans-dark-canvas) !important;
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .apps-users-table,
  .apps-users-table-grid
) {
  border-color: var(--humans-dark-border);
  background: var(--humans-dark-surface) !important;
  color: var(--humans-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .human-agents-page .apps-users-table-head {
  border-color: var(--humans-dark-border);
  background: var(--humans-dark-surface-raised);
}

html[data-dashboard-theme="dark"] .human-agents-page .apps-users-table-head h2,
html[data-dashboard-theme="dark"] .human-agents-page .apps-users-table-user strong {
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .apps-users-table-user span,
  .apps-users-table-row-header,
  .apps-users-empty
) {
  color: var(--humans-dark-muted);
}

html[data-dashboard-theme="dark"] .human-agents-page .apps-users-table-row {
  border-color: var(--humans-dark-border);
  background: var(--humans-dark-surface);
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] .human-agents-page .apps-users-table-row:not(.apps-users-table-row-header):hover {
  background: var(--humans-dark-hover);
}

html[data-dashboard-theme="dark"] .human-agents-page .apps-users-table-row-header {
  background: #202226;
}

html[data-dashboard-theme="dark"] .human-agents-page .apps-users-empty {
  border-color: var(--humans-dark-border);
  background: var(--humans-dark-surface-soft);
}

/* Search and filter dropdowns. */
html[data-dashboard-theme="dark"] .human-agents-page :is(
  .human-filter-search,
  .human-filter-trigger,
  .human-agents-back-button
) {
  border-color: var(--humans-dark-border-strong);
  background: var(--humans-dark-field);
  color: var(--humans-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .human-filter-search:focus-within,
  .human-filter-trigger:hover,
  .human-filter-trigger[aria-expanded="true"],
  .human-agents-back-button:hover
) {
  border-color: #68737b;
  background: var(--humans-dark-hover);
  box-shadow: 0 0 0 3px rgba(127, 164, 181, 0.14);
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .human-filter-search small,
  .human-filter-trigger small
) {
  color: var(--humans-dark-muted);
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .human-filter-search input,
  .human-filter-trigger strong
) {
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] .human-agents-page .human-filter-search input::placeholder {
  color: #70747a;
  opacity: 1;
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .human-filter-search svg,
  .human-filter-trigger svg
) {
  color: var(--humans-dark-muted);
}

html[data-dashboard-theme="dark"] .human-agents-page .human-filter-menu {
  border-color: var(--humans-dark-border-strong);
  background: #1d1f22;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
  scrollbar-color: #4a4e54 transparent;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-filter-option {
  background: transparent;
  color: #d6d8d7;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-filter-option-check {
  border-color: var(--humans-dark-border-strong);
  background: var(--humans-dark-field);
}

html[data-dashboard-theme="dark"] .human-agents-page .human-filter-option:hover,
html[data-dashboard-theme="dark"] .human-agents-page .human-filter-option.is-active {
  background: var(--humans-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-filter-option.is-active .human-filter-option-check {
  border-color: #4f846f;
  background: #20372e;
  color: #9bd5bc;
}

/* Category strip, status pills, and row controls. */
html[data-dashboard-theme="dark"] .human-agents-page .human-agent-category-chip {
  border-color: var(--humans-dark-border);
  background: #25272b;
  color: #d8d9d7;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-category-chip small {
  background: #34373c;
  color: #c7c9ca;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-category-chip.is-create {
  border-color: var(--humans-dark-border-strong);
  background: var(--humans-dark-surface-soft);
  color: var(--humans-dark-accent);
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-categories-strip {
  border-color: var(--humans-dark-border-strong);
  background: var(--humans-dark-surface-soft);
  color: var(--humans-dark-text);
}
html[data-dashboard-theme="dark"] .human-agents-page .human-agent-categories-strip:hover {
  border-color: #626970;
  background: var(--humans-dark-hover);
}
html[data-dashboard-theme="dark"] .human-agents-page .human-agent-categories-strip > strong {
  background: #393d42;
  color: #f0f2f3;
}
html[data-dashboard-theme="dark"] .human-agents-page .human-agent-categories-manage {
  border-color: #474c52;
  color: #c3c8cc;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-categories-strip:hover .human-agent-category-chip.is-create {
  background: var(--humans-dark-hover);
  color: #b9d0da;
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .apps-users-icon-button,
  .apps-users-row-button
) {
  border-color: var(--humans-dark-border);
  background: #24262a;
  color: #c9cbcc;
}

html[data-dashboard-theme="dark"] .human-agents-page :is(
  .apps-users-icon-button,
  .apps-users-row-button
):hover {
  border-color: var(--humans-dark-border-strong);
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-access-status.is-enabled {
  background: #1d3028;
  color: #8dd2b4;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-access-status.is-disabled {
  background: #292c30;
  color: #a7aaae;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-category-badge {
  background: #263039;
  color: #a9c6d4;
}

html[data-dashboard-theme="dark"] .human-agents-page .human-agent-category-badge.is-empty {
  background: #292c30;
  color: #96999e;
}

/* Shared Human Agent modal foundations. */
html[data-dashboard-theme="dark"] body:has(.human-agents-page) .modal-backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) :is(
  .modal-card,
  .apps-user-modal-card,
  .human-category-modal-card,
  .apps-disable-modal-card
) {
  border-color: var(--humans-dark-border);
  background: var(--humans-dark-surface-raised);
  color: var(--humans-dark-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  scrollbar-color: #4a4e54 transparent;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .modal-header {
  border-color: var(--humans-dark-border);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .modal-header :is(h2, h3),
html[data-dashboard-theme="dark"] body:has(.human-agents-page) :is(
  .apps-user-field span,
  .apps-user-access-label,
  .apps-user-access-copy,
  .human-category-row strong,
  .human-agent-edit-identity strong
) {
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) :is(
  .modal-header p,
  .apps-user-access-copy small,
  .apps-user-access-empty,
  .human-category-row span,
  .human-agent-edit-identity small,
  .apps-disable-modal-body p
) {
  color: var(--humans-dark-muted);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-field input {
  border-color: var(--humans-dark-border-strong);
  background: var(--humans-dark-field);
  color: var(--humans-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-field input::placeholder {
  color: #70747a;
  opacity: 1;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-field input:focus {
  border-color: #68737b;
  box-shadow: 0 0 0 3px rgba(127, 164, 181, 0.14);
  outline: 0;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) :is(
  .human-category-picker-trigger,
  .human-category-picker-menu,
  .apps-user-access-fields,
  .human-category-row
) {
  border-color: var(--humans-dark-border);
  background: var(--humans-dark-surface-soft);
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-picker-trigger:hover,
html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-picker-trigger[aria-expanded="true"] {
  border-color: var(--humans-dark-border-strong);
  background: var(--humans-dark-hover);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-picker-menu {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
  scrollbar-color: #4a4e54 transparent;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-picker-option {
  background: transparent;
  color: #d6d8d7;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-picker-option:hover,
html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-picker-option.is-active {
  background: var(--humans-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-form,
html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-access-row {
  border-color: var(--humans-dark-border);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-category-row:hover {
  border-color: var(--humans-dark-border-strong);
  background: var(--humans-dark-hover);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-agent-edit-avatar {
  border-color: var(--humans-dark-border);
  background: #24292d;
  color: var(--humans-dark-accent);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-agent-edit-identity {
  border-color: var(--humans-dark-border);
  background: var(--humans-dark-surface-soft);
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-agent-invite-note {
  border-color: transparent;
  background: transparent;
  color: #c4d2d8;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-agent-invite-note svg,
html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-agent-invite-note p,
html[data-dashboard-theme="dark"] body:has(.human-agents-page) .human-agent-invite-note strong {
  color: inherit;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-toggle-track {
  background: #3a3d42;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-toggle-track::after {
  border-color: #555a61;
  background: #d8dad8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-toggle input:checked + .apps-user-toggle-track {
  background: #4f846f;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-password-toggle {
  color: var(--humans-dark-muted);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-password-toggle:hover {
  background: var(--humans-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-modal-lock {
  background: rgba(17, 18, 20, 0.84);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-user-modal-lock p {
  color: var(--humans-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-disable-modal-warning {
  border-color: #65383c;
  background: #28191b;
  color: #ef9b9f;
}

/* Human Agent modal actions and destructive confirmations. */
html[data-dashboard-theme="dark"] body:has(.human-agents-page) .button.button-primary:not(.apps-disable-confirm) {
  border-color: #e2e3e0;
  background: #e2e3e0;
  color: #151618;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .button.button-primary:not(.apps-disable-confirm):hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: #0f1011;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .button.button-ghost {
  border-color: var(--humans-dark-border-strong);
  background: #24262a;
  color: #d4d5d3;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .button.button-ghost:hover:not(:disabled) {
  border-color: #5a5f66;
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-disable-confirm {
  border-color: #b94f56;
  background: #a83d45;
  color: #fff;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) .apps-disable-confirm:hover:not(:disabled) {
  border-color: #d2636a;
  background: #bd4b53;
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) :is(
  .button,
  .apps-users-icon-button,
  .apps-users-row-button,
  .human-filter-trigger,
  .human-agent-categories-strip,
  .human-category-picker-trigger,
  .human-category-picker-option,
  .human-filter-option
):focus-visible {
  outline-color: rgba(161, 188, 201, 0.82);
}

html[data-dashboard-theme="dark"] body:has(.human-agents-page) ::selection {
  background: rgba(127, 164, 181, 0.34);
  color: #fff;
}

/* Emails: provider integrations, expandable account setup, routing, and dialogs. */
html[data-dashboard-theme="dark"] body:has(.portal-email-page) {
  --email-dark-canvas: #111214;
  --email-dark-surface: #191a1d;
  --email-dark-surface-raised: #1e2023;
  --email-dark-surface-soft: #151618;
  --email-dark-field: #131416;
  --email-dark-hover: #24262a;
  --email-dark-border: #303338;
  --email-dark-border-strong: #464a50;
  --email-dark-text: #ededeb;
  --email-dark-muted: #9b9ea3;
  --email-dark-faint: #74787e;
  --email-dark-accent: #86aebe;
  color-scheme: dark;
  background: var(--email-dark-canvas);
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) :is(
  .main,
  .content,
  .workspace,
  .portal-email-page
) {
  background: var(--email-dark-canvas) !important;
  color: var(--email-dark-text);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-provider-sidebar,
  .email-provider-main,
  .email-provider-header,
  .email-direction-tabs,
  .email-provider-content,
  .email-settings-section
) {
  border-color: var(--email-dark-border);
  background: var(--email-dark-surface) !important;
  color: var(--email-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-provider-sidebar > header,
html[data-dashboard-theme="dark"] .portal-email-page .email-provider-list,
html[data-dashboard-theme="dark"] .portal-email-page .email-provider-header,
html[data-dashboard-theme="dark"] .portal-email-page .email-direction-tabs,
html[data-dashboard-theme="dark"] .portal-email-page .email-settings-section {
  border-color: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-provider-sidebar h1,
  .email-provider-title-row h1,
  .email-section-heading h2,
  .email-flow-step-heading h2,
  .email-list-page-heading h2,
  .email-direction-tabs strong,
  .email-inline-form-heading strong,
  .email-account-card-header strong,
  .email-account-domains-heading strong,
  .email-domain-create-heading strong,
  .email-domain-create-context strong,
  .email-account-domain-row strong,
  .email-domain-dns-heading strong,
  .email-webhook-intro strong,
  .email-receiving-setup-heading strong,
  .email-address-toolbar strong,
  .email-route-section-heading strong,
  .email-address-primary strong,
  .email-inbound-identity strong,
  .email-empty-state strong,
  .email-handler-callout strong,
  .email-ai-handoff-settings [data-email-ai-handoff-categories] > strong,
  .email-fallback-preview strong
) {
  color: var(--email-dark-text);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-provider-sidebar header p,
  .email-provider-heading p,
  .email-section-heading p,
  .email-flow-step-heading p,
  .email-list-page-heading p,
  .email-direction-tabs small,
  .email-inline-form-heading small,
  .email-account-card-header small,
  .email-account-domains-heading small,
  .email-domain-create-heading small,
  .email-domain-create-context small,
  .email-account-domain-row small,
  .email-domain-dns-heading small,
  .email-webhook-intro small,
  .email-receiving-setup-heading small,
  .email-address-toolbar small,
  .email-route-section-heading small,
  .email-address-primary small,
  .email-inbound-identity small,
  .email-empty-state p,
  .email-handler-callout small,
  .email-fallback-preview small
) {
  color: var(--email-dark-muted);
}

/* Provider navigation and persistent chrome. */
html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-provider-list-heading,
  .email-provider-list-heading small,
  .email-sidebar-note,
  .email-provider-nav-item small,
  .email-provider-nav-item > svg
) {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-sidebar-note {
  border-color: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-sidebar-icon {
  border-color: var(--email-dark-border-strong);
  background: #22282c;
  color: #a8cad7;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-provider-nav-item {
  color: #c6c8ca;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-provider-nav-item:hover,
html[data-dashboard-theme="dark"] .portal-email-page .email-provider-nav-item.is-active {
  background: var(--email-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-provider-nav-item.is-active {
  border-color: var(--email-dark-border-strong);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-provider-nav-item.is-active::after {
  background: var(--email-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-provider-nav-mark,
  .email-provider-mark
) {
  border-color: #45494f;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-direction-tabs > button {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-direction-tabs > button:hover {
  color: #c2d7df;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-direction-tabs > button.is-active {
  color: #d9edf4;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-direction-tabs > button.is-active::after {
  background: var(--email-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-direction-tabs .email-tab-check {
  color: #8fd0b5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-connection-state {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-connection-state > span {
  background: #656a70;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-connection-state.is-connected {
  color: #91cdb5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-connection-state.is-connected > span {
  background: #55a584;
  box-shadow: 0 0 0 3px rgba(85, 165, 132, 0.17);
}

/* Shared controls, fields, and focus states. */
html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-field,
  .email-assignment-picker legend
) {
  color: #c3c5c7;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-field small,
  .email-form-footer p,
  .email-preview-helper,
  .email-section-heading > span
) {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-field input,
  .email-field select,
  .email-route-field select,
  .email-address-builder,
  .email-assignment-search,
  .email-routing-select-trigger
) {
  border-color: var(--email-dark-border-strong);
  background: var(--email-dark-field);
  color: var(--email-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-field .email-address-builder :is(input, select) {
  border-color: transparent;
  background: transparent;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-field input::placeholder,
  .email-assignment-search > input::placeholder
) {
  color: #70747a;
  opacity: 1;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-field input:focus,
  .email-field select:focus,
  .email-route-field select:focus,
  .email-address-builder:focus-within,
  .email-routing-select-trigger:focus-visible,
  .email-routing-select-trigger[aria-expanded="true"]
) {
  border-color: #6a8794;
  box-shadow: 0 0 0 3px rgba(134, 174, 190, 0.14);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-address-builder > span,
  .email-route-field > span,
  .email-assignment-search > svg,
  .email-routing-select-chevron
) {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-assignment-search > input {
  color: var(--email-dark-text);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-connect-button,
  .email-save-button
) {
  border-color: #e1e3e3;
  background: #e1e3e3;
  color: #151618;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-connect-button,
  .email-save-button
):hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: #0f1011;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-secondary-button,
  .email-tertiary-button,
  .email-icon-button
) {
  border-color: var(--email-dark-border-strong);
  background: #24262a;
  color: #d2d4d5;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-secondary-button,
  .email-tertiary-button,
  .email-icon-button
):hover:not(:disabled) {
  border-color: #5a6067;
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-secondary-button:disabled {
  border-color: var(--email-dark-border);
  background: #1b1c1f;
  color: #666a70;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-inline-form-heading > button,
  .email-domain-create-heading > button,
  .email-copy-icon-button
) {
  background: transparent;
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-inline-form-heading > button,
  .email-domain-create-heading > button,
  .email-copy-icon-button
):hover {
  background: var(--email-dark-hover);
  color: #fff;
}

/* Notices, progress, switches, and state badges. */
html[data-dashboard-theme="dark"] .portal-email-page .email-setting-rows,
html[data-dashboard-theme="dark"] .portal-email-page .email-setting-row {
  border-color: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-setting-row strong {
  color: var(--email-dark-text);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-setting-row small {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-setting-row input {
  border-color: #4a4e54;
  background: #3a3d42;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-setting-row input::after {
  background: #d8dadb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-setting-row input:checked {
  border-color: #4f846f;
  background: #4f846f;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-prototype-badge {
  border-color: var(--email-dark-border);
  background: #25272b;
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-prototype-notice,
  .email-connected-summary
) {
  border-color: #345045;
  background: #192720;
  color: #9bceb9;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-connected-summary strong {
  color: #c8e6da;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-connected-summary small {
  color: #8caa9f;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-summary-icon {
  border-color: #3b574d;
  background: #203129;
  color: #91cdb5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-summary-icon.is-domain {
  color: #a8c2d1;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-summary-icon.is-webhook {
  color: #b6a8df;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-success-label {
  color: #91cdb5;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-locked-note,
  .email-permission-disabled-note
) {
  border-color: var(--email-dark-border-strong);
  background: var(--email-dark-surface-soft);
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-capability-note {
  border-color: #5a5033;
  background: #252216;
  color: #c9ba82;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-provider-backend-note {
  border-color: #51482f;
  background: #242016;
  color: #c5b47c;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-operation-notice {
  border-color: #375063;
  background: #18232b;
  color: #bad3e3;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-operation-notice.is-error {
  border-color: #663b3e;
  background: #2a191b;
  color: #f0a0a4;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-settings-loading {
  background: transparent;
  color: var(--email-dark-text);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-settings-loading span {
  background: #34383e;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-settings-loading span::after {
  background: var(--email-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-flow-step:not(:last-child) .email-flow-step-rail::after {
  background-color: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-flow-step-body {
  border-color: var(--email-dark-border);
  background: transparent;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-flow-step-rail > span {
  border-color: var(--email-dark-border-strong);
  background: var(--email-dark-surface);
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-step-status {
  border-color: var(--email-dark-border);
  background: #25272b;
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-step-status.is-active {
  border-color: #5a5033;
  background: #282318;
  color: #d4bd73;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-step-status.is-complete {
  border-color: #345044;
  background: #1d3028;
  color: #91cdb5;
}

/* Expandable accounts, domains, DNS, receiving, and webhooks. */
html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-flow-form,
  .email-inline-form,
  .email-account-form,
  .email-account-card,
  .email-domain-add-form,
  .email-domain-create-form,
  .email-domain-create-context,
  .email-domain-dns-table,
  .email-webhook-card,
  .email-domain-card
) {
  border-color: var(--email-dark-border);
  background: var(--email-dark-surface-raised);
  color: var(--email-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-inline-form {
  border-color: #3c4b52;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-account-card-header {
  border-color: var(--email-dark-border);
  background: #202226;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-account-card-header:hover {
  background: var(--email-dark-hover);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-account-collapse-indicator {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-account-webhook,
  .email-account-domains,
  .email-account-domain-list,
  .email-account-domain-row,
  .email-domain-dns-setup,
  .email-webhook-actions
) {
  border-color: var(--email-dark-border);
  background: var(--email-dark-surface);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-webhook-actions {
  background: var(--email-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-webhook-actions > span:first-child,
html[data-dashboard-theme="dark"] .portal-email-page .email-webhook-state,
html[data-dashboard-theme="dark"] .portal-email-page .email-domain-dns-actions > span,
html[data-dashboard-theme="dark"] .portal-email-page .email-receiving-setup-actions > span,
html[data-dashboard-theme="dark"] .portal-email-page .email-account-domain-empty {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-webhook-state.is-added,
  .email-webhook-added
) {
  color: #91cdb5 !important;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-webhook-state.is-not-added {
  color: #c9ba82;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-add-domain-row {
  border-color: var(--email-dark-border-strong);
  background: var(--email-dark-surface-soft);
  color: #cdd0d1;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-add-domain-row:hover {
  border-color: #687984;
  background: var(--email-dark-hover);
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-add-domain-row > span,
html[data-dashboard-theme="dark"] .portal-email-page .email-domain-icon {
  border-color: var(--email-dark-border-strong);
  background: #252a2e;
  color: #a8c6d3;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-add-domain-row small,
  .email-domain-create-context span,
  .email-capability-badge small,
  .email-capability-action small
) {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-domain-capabilities > * + *::before {
  background: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-capability-badge,
  .email-capability-badge strong,
  .email-capability-action strong
) {
  color: #c9ccce;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-capability-badge > svg,
  .email-domain-capabilities > :nth-child(2) > svg
) {
  background: #1d3028;
  color: #91cdb5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-capability-action {
  border-color: #554b70;
  background: #272330;
  color: #c2b4e3;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-capability-action:hover {
  border-color: #71658f;
  background: #312b3c;
  color: #ded4f4;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-domain-capabilities > .email-capability-action > svg,
html[data-dashboard-theme="dark"] .portal-email-page .email-capability-action:hover > svg {
  background: #383047;
  color: #c2b4e3;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-domain-status,
  .email-account-domain-row > .email-domain-status
) {
  border-color: var(--email-dark-border);
  background: transparent;
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-domain-status.is-verified {
  border-color: var(--email-dark-border);
  color: #91cdb5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-domain-dns-setup {
  background: var(--email-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-domain-dns-table-head {
  background: #25282c;
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-domain-dns-table-head span,
  .email-domain-dns-record,
  .email-domain-dns-record > .email-dns-value
) {
  border-color: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-dns-value code,
  .email-dns-row code
) {
  color: #c4c8cb;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-dns-value button {
  border-color: var(--email-dark-border-strong);
  background: #24262a;
  color: #c8cbcd;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-dns-value button:hover {
  border-color: #68717a;
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-dns-value button.is-copied {
  border-color: #426c5b;
  background: #1d3028;
  color: #9bd5bc;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-dns-value button.is-error {
  border-color: #754147;
  background: #2a191b;
  color: #f0a0a4;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-receiving-setup {
  border-color: var(--email-dark-border);
  background: #211e28;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-receiving-setup-heading strong {
  color: #e2dcf0;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-receiving-setup-heading small,
html[data-dashboard-theme="dark"] .portal-email-page .email-receiving-dns small {
  color: #a39aaf;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-receiving-dns-record > span {
  border-color: #494252;
  background: #18171c;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-receiving-dns code {
  color: #d5cedf;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-webhook-url-field code {
  border-color: var(--email-dark-border-strong);
  background: var(--email-dark-field);
  color: #c4c8cb;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-event-list span {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-event-list svg {
  color: #91cdb5;
}

/* Address routing, ownership, permissions, and nested open panels. */
html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-routing-explainer,
  .email-handler-settings,
  .email-dispatcher-selection
) {
  border-color: var(--email-dark-border);
  background: var(--email-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-routing-explainer > span > svg,
html[data-dashboard-theme="dark"] .portal-email-page .email-handler-callout > svg {
  background: #242d32;
  color: #a8c6d3;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-routing-explainer strong,
  .email-handler-name,
  .email-address-access .email-handler-name
) {
  color: #d7d9da;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-routing-explainer small,
  .email-address-access small,
  .email-address-access em,
  .email-dispatcher-selection .email-dispatcher-link
) {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-routing-explainer > b {
  color: var(--email-dark-faint);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-agent-assignment-warning {
  border-color: #3e5365;
  background: #1a252e;
  color: #b7ccdd;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-agent-assignment-warning > svg,
html[data-dashboard-theme="dark"] .portal-email-page .email-agent-assignment-warning button {
  color: #8cbce8;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-ai-send-permissions {
  border-color: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-dispatcher-link {
  color: var(--email-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-choice-card > span {
  border-color: var(--email-dark-border-strong);
  background: var(--email-dark-field);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-choice-card svg {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-choice-card strong {
  color: #d7d9da;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-choice-card small {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-choice-card > input:checked + span {
  border-color: #607985;
  background: #202a2f;
  box-shadow: inset 0 0 0 1px rgba(134, 174, 190, 0.12);
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-assignment-options,
  .email-assignment-option-list
) {
  border-color: var(--email-dark-border);
  background: var(--email-dark-field);
  scrollbar-color: #4a4e54 transparent;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-assignment-option-list > label > span {
  border-color: var(--email-dark-border);
  color: #c2c5c7;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-assignment-option-list > label > span svg {
  border-color: var(--email-dark-border-strong);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-assignment-option-list > label > input:checked + span {
  background: #202d32;
  color: #d8edf5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-assignment-option-list > label > input:checked + span svg {
  border-color: #658391;
  background: #658391;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-assignment-no-results {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-routing-select-menu {
  border-color: var(--email-dark-border-strong);
  background: #1d1f22;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.44);
  scrollbar-color: #4a4e54 transparent;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-routing-select-option {
  color: #d7d9da;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-routing-select-option:hover,
html[data-dashboard-theme="dark"] .portal-email-page .email-routing-select-option:focus-visible {
  background: var(--email-dark-hover);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-routing-select-option.is-selected {
  background: #263239;
  color: #d8edf5;
}

html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-routing-select-value > svg,
  .email-routing-select-option span > svg,
  .email-routing-select-check
) {
  color: var(--email-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-fallback-preview {
  border-color: var(--email-dark-border-strong);
  color: var(--email-dark-muted);
}

/* Address lists, route rows, and empty states. */
html[data-dashboard-theme="dark"] .portal-email-page :is(
  .email-address-row,
  .email-inbound-row
) {
  border-color: var(--email-dark-border);
  background: var(--email-dark-surface-raised);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-unified-address-row.is-fallback {
  background: var(--email-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-address-avatar {
  border-color: var(--email-dark-border-strong);
  background: #252a2e;
  color: #a8c6d3;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-address-avatar.is-ai {
  border-color: #4d485d;
  background: #27232f;
  color: #c0b4df;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-address-avatar.is-dispatcher {
  border-color: #3b554b;
  background: #1d3028;
  color: #91cdb5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-address-avatar.is-portal {
  border-color: var(--email-dark-border-strong);
  background: #252a2e;
  color: #a8c6d3;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-address-access span {
  color: #c3c6c8;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-route-capabilities span {
  color: #91cdb5;
}

html[data-dashboard-theme="dark"] .portal-email-page .email-route-capabilities span + span {
  border-color: var(--email-dark-border);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-route-capabilities span.is-unavailable {
  color: var(--email-dark-faint);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-empty-state {
  border-color: var(--email-dark-border-strong);
  background: var(--email-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-email-page .email-empty-state > span {
  background: #252a2e;
  color: #a8c6d3;
}

/* Disconnect confirmation. */
html[data-dashboard-theme="dark"] body:has(.portal-email-page) .email-delete-backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) .email-delete-dialog {
  border-color: var(--email-dark-border);
  background: var(--email-dark-surface-raised);
  color: var(--email-dark-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.54);
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) .email-delete-dialog-icon {
  background: #321d20;
  color: #ef969c;
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) .email-delete-dialog-copy h2 {
  color: var(--email-dark-text);
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) :is(
  .email-delete-dialog-copy p,
  .email-delete-dialog-copy small
) {
  color: var(--email-dark-muted);
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) .email-delete-confirm-button {
  border-color: #b94f56;
  background: #a83d45;
  color: #fff;
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) .email-delete-confirm-button:hover {
  border-color: #d2636a;
  background: #bd4b53;
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) :is(
  button,
  input,
  select,
  [tabindex]
):focus-visible {
  outline-color: rgba(161, 188, 201, 0.84);
}

html[data-dashboard-theme="dark"] body:has(.portal-email-page) ::selection {
  background: rgba(134, 174, 190, 0.34);
  color: #fff;
}

/* Email work-area readability ------------------------------------------------
   Keep the existing connection and routing grids intact while lifting the
   undersized type used below the primary tabs onto a consistent UI scale. */
.portal-email-page {
  --email-work-title-size: 17px;
  --email-work-body-size: 13px;
  --email-work-control-size: 12.5px;
  --email-work-meta-size: 11.5px;
  --email-work-micro-size: 10.5px;
}

.portal-email-page .email-provider-content {
  font-size: var(--email-work-body-size);
}

.portal-email-page .email-provider-content :is(
  button:not(.email-icon-button):not(.email-copy-icon-button),
  label,
  legend
) {
  font-size: var(--email-work-control-size);
}

.portal-email-page .email-provider-content :is(input, select, textarea) {
  font-size: var(--email-work-body-size);
}

.portal-email-page .email-provider-content strong {
  font-size: var(--email-work-body-size);
}

.portal-email-page .email-provider-content small,
.portal-email-page .email-provider-content :is(
  .email-section-heading p,
  .email-flow-step-heading p,
  .email-list-page-heading p,
  .email-address-access span,
  .email-address-access em,
  .email-route-capabilities span,
  .email-webhook-actions > span:first-child,
  .email-account-domain-empty,
  .email-event-list span,
  .email-delete-dialog-copy p
) {
  font-size: var(--email-work-meta-size);
}

.portal-email-page .email-provider-content :is(
  .email-step-status,
  .email-success-label,
  .email-webhook-state,
  .email-webhook-added,
  .email-domain-status,
  .email-route-field > span,
  .email-address-access small,
  .email-routing-explainer > b,
  .email-domain-dns-table-head,
  .email-capability-badge small,
  .email-capability-action small,
  .email-domain-create-context small,
  .email-domain-create-context span
) {
  font-size: var(--email-work-micro-size) !important;
}

.portal-email-page .email-provider-content :is(
  .email-capability-badge strong,
  .email-capability-action strong
) {
  font-size: var(--email-work-meta-size);
}

.portal-email-page .email-provider-content .email-domain-create-context strong {
  font-size: var(--email-work-control-size);
}

.portal-email-page .email-provider-content :is(
  .email-list-page-heading h2,
  .email-section-heading h2,
  .email-flow-step-heading h2,
  .email-delete-dialog-copy h2
) {
  font-size: var(--email-work-title-size);
}

.portal-email-page .email-provider-content :is(
  .email-secondary-button,
  .email-tertiary-button,
  .email-connect-button,
  .email-save-button
) {
  min-height: 38px;
}

.portal-email-page .email-provider-content :is(
  .email-choice-card > span,
  .email-address-row
) {
  min-height: 70px;
}

.portal-email-page .email-provider-content .email-webhook-url-field code,
.portal-email-page .email-provider-content .email-dns-value code,
.portal-email-page .email-provider-content .email-receiving-dns code {
  font-size: var(--email-work-meta-size);
}

@media (max-width: 700px) {
  .portal-email-page {
    --email-work-title-size: 16.5px;
    --email-work-body-size: 12.5px;
    --email-work-control-size: 12px;
    --email-work-meta-size: 11px;
    --email-work-micro-size: 10px;
  }
}

/* Action Tools: complete graphite dark theme ------------------------------- */
html[data-dashboard-theme="dark"] body:has(.portal-action-tools-page) {
  color-scheme: dark;
  background: #111214;
}

html[data-dashboard-theme="dark"] body:has(.portal-action-tools-page) :is(.main, .content, .workspace),
html[data-dashboard-theme="dark"] .portal-action-tools-page {
  background: #111214;
  color: #ededeb;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page {
  --pat-dark-canvas: #111214;
  --pat-dark-surface: #191a1d;
  --pat-dark-surface-raised: #1e2023;
  --pat-dark-surface-soft: #151618;
  --pat-dark-field: #131416;
  --pat-dark-hover: #24262a;
  --pat-dark-border: #303338;
  --pat-dark-border-strong: #464a50;
  --pat-dark-text: #ededeb;
  --pat-dark-muted: #9b9ea3;
  --pat-dark-faint: #74787e;
  --pat-dark-accent: #8cabb8;
  --pat-dark-accent-soft: #202b31;
  --pat-dark-success: #91cdb5;
  --pat-dark-danger: #ef969c;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tools-library,
  .portal-tool-editor
) {
  border-color: var(--pat-dark-border);
  background: var(--pat-dark-surface);
  color: var(--pat-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tools-library-head,
  .portal-tool-editor-head,
  .portal-tool-form-section,
  .portal-tools-library-note,
  .portal-tool-config-list,
  .portal-tool-variable-list,
  .portal-tool-variable,
  .portal-tool-config-row,
  .portal-tool-mapping-row,
  .portal-tool-returned-head,
  .portal-tool-returned-row,
  .portal-tool-template-card-foot,
  .portal-tool-welcome-section,
  .portal-tool-welcome-steps li,
  .portal-tool-welcome-examples li
) {
  border-color: var(--pat-dark-border);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor-head {
  background: rgba(25, 26, 29, 0.96);
  backdrop-filter: blur(12px);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tools-library-head h1,
  .portal-tool-editor-head h2,
  .portal-tool-section-label h3,
  .portal-tool-test-head h4,
  .portal-tool-list-copy strong,
  .portal-tool-test-field strong,
  .portal-tool-returned-row strong,
  .portal-tool-welcome-copy h2,
  .portal-tool-template-section h3,
  .portal-tool-template-card > strong,
  .portal-tool-welcome-title h2,
  .portal-tool-welcome-section h3,
  .portal-tool-welcome-steps strong,
  .portal-tool-welcome-examples strong
) {
  color: var(--pat-dark-text);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tools-library-head > div > span,
  .portal-tool-editor-head > div:first-child > span,
  .portal-tool-editor-back,
  .portal-tool-save-status,
  .portal-tool-section-label p,
  .portal-tool-section-toolbar p,
  .portal-tool-field > small,
  .portal-tool-field > span small,
  .portal-tool-test-head p,
  .portal-tool-test-field small,
  .portal-tool-inline-empty,
  .portal-tool-test-no-fields,
  .portal-tool-permission-note,
  .portal-tool-returned-head,
  .portal-tool-returned-row small,
  .portal-tools-library-note,
  .portal-tool-welcome-copy > p,
  .portal-tool-template-section > header p,
  .portal-tool-template-card > p,
  .portal-tool-template-card-foot small,
  .portal-tool-welcome-title p,
  .portal-tool-welcome-section header p,
  .portal-tool-welcome-steps p,
  .portal-tool-welcome-examples small
) {
  color: var(--pat-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor-back:hover {
  color: var(--pat-dark-text);
}

/* Library, search, loading, selection, and inline deletion. */
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-search {
  border-color: var(--pat-dark-border-strong);
  background: var(--pat-dark-field);
  color: var(--pat-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-search:focus-within {
  border-color: #687984;
  background: #17191b;
  box-shadow: 0 0 0 3px rgba(140, 171, 184, 0.13);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-search input {
  color: var(--pat-dark-text);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tools-search input,
  .portal-tool-field input,
  .portal-tool-field textarea,
  .portal-tool-test-field > input
)::placeholder {
  color: #70747a;
  opacity: 1;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-list-item {
  color: #c8cacc;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-list-item:hover {
  background: var(--pat-dark-hover);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-list-item.is-active {
  border-color: var(--pat-dark-border-strong);
  background: #292c30;
  color: var(--pat-dark-text);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-method {
  border-color: var(--pat-dark-border-strong);
  background: #25272b;
  color: #b9c8cf;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-method.is-post {
  border-color: #3d5b51;
  background: #1d3028;
  color: var(--pat-dark-success);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-list-delete {
  color: var(--pat-dark-faint);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-list-delete:hover,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-icon-button.is-danger:hover {
  border-color: #6b3c40;
  background: #321d20;
  color: var(--pat-dark-danger);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-delete-confirm button {
  background: #292c30;
  color: #c9cbcc;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-delete-confirm button:first-child {
  background: #a83d45;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-list-skeleton-method,
  .portal-tool-list-skeleton-name
) {
  background: #2b2e32;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-list-skeleton-method,
  .portal-tool-list-skeleton-name
)::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* Buttons and focus states. */
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-icon-button {
  border-color: var(--pat-dark-border-strong);
  background: #24262a;
  color: #c9cbcc;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-icon-button:hover {
  border-color: #5a5f66;
  background: #303338;
  color: #f3f3f1;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-library-add,
html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-primary-button,
  .portal-tool-welcome-create
) {
  border-color: #e2e3e0;
  background: #e2e3e0;
  color: #151618;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tools-library-add:hover,
html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-primary-button,
  .portal-tool-welcome-create
):hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: #0f1011;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-secondary-button,
  .portal-tool-test-button
) {
  border-color: var(--pat-dark-border-strong);
  background: #24262a;
  color: #d4d5d3;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-secondary-button,
  .portal-tool-test-button
):hover:not(:disabled) {
  border-color: #5a5f66;
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-text-button {
  color: var(--pat-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-text-button:hover:not(:disabled) {
  color: #c8e0e9;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-primary-button,
  .portal-tool-secondary-button,
  .portal-tool-test-button,
  .portal-tool-text-button,
  .portal-tools-icon-button
):disabled {
  opacity: 0.45;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  button,
  input,
  select,
  textarea,
  a,
  [tabindex]
):focus-visible {
  outline-color: rgba(161, 188, 201, 0.84);
}

/* Editor fields, segmented controls, variables, and mappings. */
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-field > span {
  color: #c8cbcd;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-field input,
  .portal-tool-field select,
  .portal-tool-field textarea,
  .portal-tool-test-field > input,
  .portal-tool-test-boolean,
  .portal-tool-token-input
) {
  border-color: var(--pat-dark-border-strong);
  background: var(--pat-dark-field);
  color: var(--pat-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-field input,
  .portal-tool-field select,
  .portal-tool-field textarea,
  .portal-tool-test-field > input,
  .portal-tool-token-input
):focus,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-token-input:focus-within {
  border-color: #687984;
  box-shadow: 0 0 0 3px rgba(140, 171, 184, 0.13);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-field textarea:disabled {
  background: #1d1f22;
  color: #6f7379;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-method-switch,
  .portal-tool-permission-switch
) {
  border-color: var(--pat-dark-border);
  background: var(--pat-dark-field);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-method-switch button,
  .portal-tool-permission-switch button
) {
  color: var(--pat-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-method-switch button,
  .portal-tool-permission-switch button
).is-active {
  background: #2b2e32;
  color: var(--pat-dark-text);
  box-shadow: inset 0 0 0 1px var(--pat-dark-border-strong);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-inline-empty {
  border-color: var(--pat-dark-border);
  background: var(--pat-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-variable-index {
  color: var(--pat-dark-faint);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-token-input > span,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-mini-check {
  color: #aeb1b4;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-mini-check input,
  .portal-tool-test-boolean input
) {
  accent-color: #7399a9;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-mapping-order {
  border-color: var(--pat-dark-border-strong);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-mapping-order button {
  border-color: var(--pat-dark-border);
  background: #24262a;
  color: #b9bdc0;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-mapping-order button:hover:not(:disabled) {
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-mapping-order button:disabled {
  background: #1d1f22;
  color: #55595e;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-variable-pills button,
  .portal-tool-category-grid button,
  .portal-tool-returned-row button
) {
  border-color: var(--pat-dark-border-strong);
  background: #24262a;
  color: #c8cbcd;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page :is(
  .portal-tool-variable-pills button,
  .portal-tool-category-grid button,
  .portal-tool-returned-row button
):hover:not(:disabled) {
  border-color: #5a5f66;
  background: #303338;
  color: #fff;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-category-grid button.is-selected {
  border-color: #587581;
  background: var(--pat-dark-accent-soft);
  color: #d8edf5;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-drop-caret {
  background: #8fc5d8;
  box-shadow: 0 0 0 1px rgba(17, 18, 20, 0.9);
}

/* Test execution, response discovery, feedback, and access notes. */
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-panel {
  border-color: var(--pat-dark-border);
  background: var(--pat-dark-surface-soft);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-message.is-error {
  border-color: #663b3e;
  background: #2a191b;
  color: #f0a0a4;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-result {
  border-color: var(--pat-dark-border-strong);
  background: var(--pat-dark-field);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-result > header,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-returned-head {
  border-color: var(--pat-dark-border);
  background: #202226;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-result > header strong,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-result > pre,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-error-copy {
  color: #c8cbcd;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-result.is-success > header span,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-save-status.is-success {
  color: var(--pat-dark-success);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-result.is-error > header span,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-save-status.is-error,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-test-error-copy {
  color: var(--pat-dark-danger);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-returned-row button:disabled {
  border-color: #345044;
  background: #1d3028;
  color: var(--pat-dark-success);
  opacity: 1;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-permission-note {
  border-color: #3c4b52;
  background: var(--pat-dark-accent-soft);
}

/* Welcome artwork, documentation action, and templates. */
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-shell {
  border-color: var(--pat-dark-border);
  background: var(--pat-dark-surface);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-head {
  border-color: var(--pat-dark-border-strong);
  background: #202226;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-visual {
  padding: 18px 20px;
  border: 1px solid var(--pat-dark-border);
  border-radius: 9px;
  background: #17191b;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-request {
  border-color: var(--pat-dark-border-strong);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-request > span {
  background: #284058;
  color: #bcd8e8;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-request > strong {
  color: #d9dcde;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-request-detail {
  color: #b7bdc1;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-request-detail svg {
  color: var(--pat-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-request-detail.is-result,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-request-detail.is-result svg {
  color: var(--pat-dark-success);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-actions > a {
  color: #b6cdd8;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-welcome-actions > a:hover {
  color: #e0f1f7;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-template-section > header > div > span,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-template-service,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-template-card-foot b {
  color: var(--pat-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-template-card {
  border-color: var(--pat-dark-border);
  background: var(--pat-dark-surface-raised);
  color: var(--pat-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-template-card:hover {
  border-color: #59616a;
  background: var(--pat-dark-hover);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-template-icon {
  background: #263239;
  color: #a8c6d3;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-template-method {
  border-color: var(--pat-dark-border-strong);
  color: #b7bdc1;
}

/* Action Tools editor contrast hierarchy. Keep the create/edit workflow from
   collapsing into one dark plane while leaving the welcome screen untouched. */
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome),
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-form-body {
  background: #141517;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-editor-head {
  border-color: #454a51;
  background: rgba(35, 37, 41, 0.97);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-form-section {
  border-color: #3b3f45;
  background: #1d1f22;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-form-section:nth-of-type(even) {
  background: #202226;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-section-content {
  padding: 18px;
  border: 1px solid #363a40;
  border-radius: 9px;
  background: #161719;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-section-label h3 {
  color: #f1f2f1;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-field > span {
  color: #d3d5d6;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) :is(
  .portal-tool-field input,
  .portal-tool-field select,
  .portal-tool-field textarea,
  .portal-tool-test-field > input,
  .portal-tool-test-boolean,
  .portal-tool-token-input
) {
  border-color: #555b63;
  background: #0f1012;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) :is(
  .portal-tool-field input,
  .portal-tool-field select,
  .portal-tool-field textarea,
  .portal-tool-test-field > input,
  .portal-tool-token-input
):focus,
html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-token-input:focus-within {
  border-color: #8298a3;
  box-shadow: 0 0 0 3px rgba(140, 171, 184, 0.17);
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) :is(
  .portal-tool-method-switch,
  .portal-tool-permission-switch
) {
  border-color: #4d535b;
  background: #0f1012;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) :is(
  .portal-tool-method-switch button,
  .portal-tool-permission-switch button
).is-active {
  background: #363a40;
  color: #fff;
  box-shadow: inset 0 0 0 1px #5b626a;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) :is(
  .portal-tool-config-list,
  .portal-tool-variable-list
) {
  border-color: #41464d;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-inline-empty {
  border-color: #41464d;
  background: #22252a;
  color: #b0b4b8;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) :is(
  .portal-tool-variable,
  .portal-tool-config-row,
  .portal-tool-mapping-row
) {
  border-color: #41464d;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-test-panel {
  border-color: #4a5058;
  background: #22252a;
}

html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-test-result {
  border-color: #555b63;
  background: #101113;
}

@media (max-width: 640px) {
  html[data-dashboard-theme="dark"] .portal-action-tools-page .portal-tool-editor:not(.portal-tool-welcome) .portal-tool-section-content {
    padding: 14px;
  }
}

html[data-dashboard-theme="dark"] .portal-action-tools-page ::selection {
  background: rgba(140, 171, 184, 0.34);
  color: #fff;
}

/* Account settings: Notifications, Team, Billing and Stripe. These pages use
   one neutral hierarchy so nested cards, forms and dialogs remain distinct. */
html[data-dashboard-theme="dark"] :is(.notifications-page, .team-page, .billing-page, .stripe-page) {
  --settings-dark-canvas: #111214;
  --settings-dark-surface: #191a1d;
  --settings-dark-raised: #1e2023;
  --settings-dark-soft: #151618;
  --settings-dark-field: #0f1012;
  --settings-dark-hover: #26292d;
  --settings-dark-border: #34383e;
  --settings-dark-border-strong: #4b5158;
  --settings-dark-text: #eeeeec;
  --settings-dark-muted: #a9adb2;
  --settings-dark-faint: #7f858b;
  --settings-dark-accent: #94bdcd;
  --settings-dark-success: #91d0b6;
  --settings-dark-warning: #ddc879;
  --settings-dark-danger: #f09ba1;
  color-scheme: dark;
  background: var(--settings-dark-canvas);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] body:has(:is(.notifications-page, .team-page, .billing-page, .stripe-page))
  :is(.main, .content, .workspace) {
  background: var(--dashboard-dark-canvas, #111214);
}

html[data-dashboard-theme="dark"] :is(.notifications-page, .team-page, .billing-page, .stripe-page)
  :is(input, select, textarea) {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-field);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] :is(.notifications-page, .team-page, .billing-page, .stripe-page)
  :is(input, textarea)::placeholder {
  color: var(--settings-dark-faint);
  opacity: 1;
}

html[data-dashboard-theme="dark"] :is(.notifications-page, .team-page, .billing-page, .stripe-page)
  :is(input, select, textarea):focus {
  border-color: #849ba6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(148, 189, 205, 0.15);
}

html[data-dashboard-theme="dark"] :is(.notifications-page, .team-page, .billing-page, .stripe-page)
  :is(h1, h2, h3, h4, label, strong) {
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] :is(.notifications-page, .team-page, .billing-page, .stripe-page)
  :is(p, small) {
  color: var(--settings-dark-muted);
}

/* Notifications */
html[data-dashboard-theme="dark"] .notifications-page :is(
  .notifications-channel-panel,
  .notifications-webhook-card,
  .notifications-recipients-card,
  .notifications-rules-card,
  .notifications-load-error,
  .notification-group,
  .notification-rule-row
) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notifications-header,
  .notifications-channel-tabs,
  .notifications-panel-header,
  .notifications-webhook-settings,
  .notifications-recipient-form,
  .notifications-rules-header,
  .notification-group-header,
  .notification-rule-row
) {
  border-color: var(--settings-dark-border);
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notifications-header p,
  .notifications-channel-tab,
  .notifications-panel-copy p,
  .notifications-webhook-copy p,
  .notifications-field > span,
  .notifications-recipient-helper,
  .notifications-rules-copy p,
  .notification-group-copy p,
  .notification-rule-copy p,
  .notification-condition-label
) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .notifications-page .notifications-channel-tab:hover {
  color: var(--settings-dark-text);
  background: var(--settings-dark-hover);
}

html[data-dashboard-theme="dark"] .notifications-page .notifications-channel-tab.is-active {
  color: var(--settings-dark-text);
  border-color: var(--settings-dark-accent);
  background: transparent;
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notifications-recipient-chip,
  .notifications-disabled-note,
  .notification-group-header,
  .notification-condition-static
) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-raised);
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .notifications-page .notification-rule-row.is-disabled {
  background: var(--settings-dark-soft);
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notifications-save-button, .notifications-add-recipient) {
  border-color: #e4e5e3;
  background: #e4e5e3;
  color: #161719;
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notifications-save-button, .notifications-add-recipient):hover:not(:disabled) {
  background: #f8f8f6;
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notifications-save-button, .notifications-add-recipient):disabled {
  border-color: var(--settings-dark-border);
  background: #2a2d31;
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .notifications-page .notifications-channel-mark {
  border-color: transparent;
  background: #283038;
  color: #b6d4df;
}

html[data-dashboard-theme="dark"] .notifications-page .notifications-channel-mark.is-slack {
  background: #332636;
  color: #e4b4de;
}

html[data-dashboard-theme="dark"] .notifications-page .notifications-channel-mark.is-discord {
  background: #282b42;
  color: #b9c0ff;
}

html[data-dashboard-theme="dark"] .notifications-page .notifications-channel-mark.is-teams {
  background: #292943;
  color: #c6c1ff;
}

html[data-dashboard-theme="dark"] .notifications-page .notifications-channel-mark.is-webhook {
  background: #20352e;
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notifications-connection-status, .notifications-save-status.is-success) {
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notifications-save-status.is-error, .notifications-load-error) {
  color: var(--settings-dark-danger);
}

html[data-dashboard-theme="dark"] .notifications-page .notification-switch {
  background: #464b52;
  box-shadow: inset 0 0 0 1px #565c64;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-switch.is-on {
  background: #719baa;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-switch::after {
  background: #f2f3f1;
}

/* Team */
html[data-dashboard-theme="dark"] .team-page :is(
  .team-summary,
  .team-invite-panel,
  .team-members-list,
  .team-pending-list,
  .team-list,
  .team-empty
) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .team-page :is(
  .team-header,
  .team-list-header,
  .team-list-columns,
  .team-member-item,
  .team-pending-item
) {
  border-color: var(--settings-dark-border);
}

html[data-dashboard-theme="dark"] .team-page .team-list-columns {
  background: var(--settings-dark-soft);
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .team-page :is(
  .team-header p,
  .team-invite-copy p,
  .team-invite-helper,
  .team-member-identity span,
  .team-pending-item span,
  .team-list-count
) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-invite-icon, .team-member-avatar) {
  border-color: #40505a;
  background: #243139;
  color: #b4d0dc;
}

html[data-dashboard-theme="dark"] .team-page .team-invite-button {
  border-color: #e4e5e3;
  background: #e4e5e3;
  color: #161719;
}

html[data-dashboard-theme="dark"] .team-page .team-invite-button:hover:not(:disabled) {
  background: #f8f8f6;
}

html[data-dashboard-theme="dark"] .team-page .team-invite-button:disabled {
  border-color: var(--settings-dark-border);
  background: #2a2d31;
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-member-action, .team-pending-action) {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-raised);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-member-action, .team-pending-action):hover {
  background: var(--settings-dark-hover);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-member-action.is-danger, .team-pending-action.is-danger) {
  border-color: #734147;
  background: #321d21;
  color: var(--settings-dark-danger);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-member-status, .team-status.is-active) {
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-pending-status, .team-status.is-pending) {
  color: var(--settings-dark-warning);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-error, .team-form-error) {
  border-color: #6b393f;
  background: #2c191d;
  color: var(--settings-dark-danger);
}

/* Billing: shared page structure, cards, tables and forms. */
html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-plans-shell,
  .billing-plan-card,
  .billing-current-plan,
  .billing-security-card,
  .billing-enterprise-card,
  .billing-human-plan-card,
  .billing-human-rate-card,
  .billing-seat-panel,
  .billing-usage-card,
  .billing-usage-kpi,
  .billing-addon-card,
  .billing-activity-card,
  .billing-loading-panel,
  .billing-history-card,
  .billing-sync-card,
  .billing-plan-confirm-card,
  .billing-plan-error-card,
  .billing-addon-manage-card,
  .billing-addon-manage-info,
  .billing-addon-manage-section,
  .portal-billing-shell,
  .portal-billing-checkout,
  .portal-billing-overview,
  .portal-billing-seat-summary,
  .portal-billing-metric,
  .portal-billing-copilot-card,
  .portal-seats-modal-card,
  .portal-topup-modal-card,
  .portal-skip-trial-modal-card,
  .portal-addon-modal-card,
  .modal-card
) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-header,
  .billing-product-tabs,
  .billing-section,
  .billing-card-header,
  .billing-plan-card-header,
  .billing-plan-card-footer,
  .billing-activity-header,
  .billing-activity-row,
  .billing-history-header,
  .billing-history-row,
  .billing-addon-manage-header,
  .billing-addon-manage-footer,
  .billing-addon-manage-table-row,
  .portal-billing-intro,
  .portal-billing-overview-header,
  .portal-billing-actions,
  .portal-modal-header,
  .portal-modal-footer,
  .modal-header,
  .modal-footer,
  .portal-topup-bundle,
  .portal-seat-user-row
) {
  border-color: var(--settings-dark-border);
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-header p,
  .billing-product-tab,
  .billing-section-copy,
  .billing-plan-description,
  .billing-plan-meta,
  .billing-current-plan p,
  .billing-human-plan-copy,
  .billing-human-rate-copy,
  .billing-seat-panel p,
  .billing-usage-label,
  .billing-addon-copy,
  .billing-addon-card p,
  .billing-activity-row,
  .billing-history-row,
  .billing-addon-manage-info p,
  .billing-addon-manage-section p,
  .portal-billing-intro p,
  .portal-billing-checkout p,
  .portal-billing-summary-label,
  .portal-billing-seat-copy,
  .portal-billing-metric span,
  .portal-billing-copilot-card p,
  .portal-seat-user-row span,
  .modal-card p
) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-tab:hover {
  color: var(--settings-dark-text);
  background: var(--settings-dark-hover);
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-tab.is-active {
  border-color: var(--settings-dark-accent);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-interval-toggle,
  .billing-plan-toggle,
  .portal-billing-interval-toggle,
  .portal-billing-trial-choice,
  .portal-billing-payment-summary,
  .portal-billing-seat-stepper,
  .billing-addon-manage-threshold,
  .billing-addon-manage-custom-domain,
  .billing-addon-manage-table-head,
  .billing-activity-head,
  .billing-history-head,
  .portal-seat-price-preview,
  .portal-skip-trial-summary
) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-soft);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-interval-toggle button,
  .billing-plan-toggle button,
  .portal-billing-interval-toggle button
) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-interval-toggle button.is-active,
  .billing-plan-toggle button.is-active,
  .portal-billing-interval-toggle button.is-active
) {
  background: var(--settings-dark-hover);
  color: var(--settings-dark-text);
  box-shadow: inset 0 0 0 1px var(--settings-dark-border-strong);
}

html[data-dashboard-theme="dark"] .billing-page .billing-plan-card:hover,
html[data-dashboard-theme="dark"] .billing-page .billing-addon-card:hover,
html[data-dashboard-theme="dark"] .billing-page .portal-billing-trial-choice:hover,
html[data-dashboard-theme="dark"] .billing-page .portal-topup-bundle:hover {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-raised);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-plan-card.is-popular, .portal-billing-trial-choice.is-selected, .portal-topup-bundle.is-selected) {
  border-color: #7196a5;
  background: #1c272c;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-plan-popular, .billing-plan-badge, .portal-billing-badge) {
  border-color: #527380;
  background: #263a42;
  color: #b9d8e4;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-plan-button,
  .billing-primary-button,
  .portal-billing-primary,
  .portal-modal-primary,
  .billing-addon-manage-primary
) {
  border-color: #e4e5e3;
  background: #e4e5e3;
  color: #161719;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-plan-button,
  .billing-primary-button,
  .portal-billing-primary,
  .portal-modal-primary,
  .billing-addon-manage-primary
):hover:not(:disabled) {
  background: #f8f8f6;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-back-button,
  .billing-secondary-button,
  .billing-ghost-button,
  .billing-history-button,
  .billing-addon-manage-button,
  .portal-billing-secondary,
  .portal-modal-secondary,
  .portal-billing-action,
  .modal-close,
  .portal-modal-close,
  .billing-addon-manage-close
) {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-raised);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-back-button,
  .billing-secondary-button,
  .billing-ghost-button,
  .billing-history-button,
  .billing-addon-manage-button,
  .portal-billing-secondary,
  .portal-modal-secondary,
  .portal-billing-action,
  .modal-close,
  .portal-modal-close,
  .billing-addon-manage-close
):hover:not(:disabled) {
  background: var(--settings-dark-hover);
  color: #f8f8f6;
}

html[data-dashboard-theme="dark"] .billing-page :is(button, .billing-plan-button):disabled {
  border-color: var(--settings-dark-border);
  background: #292c30;
  color: var(--settings-dark-faint);
  opacity: 1;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-addon-icon, .portal-billing-copilot-icon) {
  border-color: #40515a;
  background: #25343b;
  color: #b4d2de;
}

html[data-dashboard-theme="dark"] .billing-page .billing-addon-icon.is-success {
  border-color: #365a4c;
  background: #20372e;
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-usage-track, .portal-billing-progress-track) {
  background: #373b41;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-usage-fill, .portal-billing-progress-fill) {
  background: #83adbc;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-cancellation-message, .billing-warning, .portal-billing-note.is-warning) {
  border-color: #695b31;
  background: #2b2719;
  color: var(--settings-dark-warning);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-error, .billing-plan-error-card, .portal-billing-error, .portal-modal-error) {
  border-color: #6d3a40;
  background: #2d1a1e;
  color: var(--settings-dark-danger);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-success, .portal-billing-note.is-success, .billing-status.is-active) {
  border-color: #365a4c;
  background: #20372e;
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-pending, .portal-billing-pending) {
  border-color: #405768;
  background: #202c35;
  color: #a9c9dc;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-activity-row, .billing-history-row, .billing-addon-manage-table-row, .portal-seat-user-row) {
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-activity-row, .billing-history-row, .billing-addon-manage-table-row, .portal-seat-user-row):hover {
  background: var(--settings-dark-raised);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-activity-head, .billing-history-head, .billing-addon-manage-table-head) {
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-switch, .billing-addon-manage-toggle) {
  background: #464b52;
  box-shadow: inset 0 0 0 1px #565c64;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-switch.is-on, .billing-addon-manage-toggle.is-on) {
  background: #719baa;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-switch, .billing-addon-manage-toggle)::after {
  background: #f2f3f1;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-skeleton, .billing-loading-skeleton) {
  background: linear-gradient(90deg, #202226 20%, #2d3035 40%, #202226 60%);
  background-size: 220% 100%;
}

html[data-dashboard-theme="dark"] .billing-page :is(.modal-backdrop, .billing-modal-backdrop, .portal-modal-backdrop) {
  background: rgba(4, 5, 6, 0.78);
  backdrop-filter: blur(4px);
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-billing-price, .billing-plan-price, .billing-usage-value, .portal-billing-metric strong) {
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-billing-price small, .billing-plan-price small, .portal-billing-summary-value, .portal-topup-total) {
  color: var(--settings-dark-muted);
}

/* Stripe billing connection */
html[data-dashboard-theme="dark"] .stripe-page :is(.stripe-usage, .stripe-form-card, .stripe-actions-card, .stripe-action-item) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .stripe-page :is(.stripe-header, .stripe-card-header, .stripe-action-item, .stripe-divider) {
  border-color: var(--settings-dark-border);
}

html[data-dashboard-theme="dark"] .stripe-page :is(.stripe-header p, .stripe-field > span, .stripe-action-copy p, .stripe-usage p) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .stripe-page .stripe-action-item:hover {
  background: var(--settings-dark-raised);
}

html[data-dashboard-theme="dark"] .stripe-page :is(.stripe-action-icon, .stripe-info-icon) {
  border-color: #40515a;
  background: #25343b;
  color: #b4d2de;
}

html[data-dashboard-theme="dark"] .stripe-page .stripe-status.is-connected {
  border-color: #365a4c;
  background: #20372e;
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .stripe-page .stripe-status.is-disconnected {
  border-color: #5b4f35;
  background: #2a2519;
  color: var(--settings-dark-warning);
}

html[data-dashboard-theme="dark"] .stripe-page .stripe-tooltip {
  border-color: var(--settings-dark-border-strong);
  background: #292c30;
  color: var(--settings-dark-text);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

html[data-dashboard-theme="dark"] :is(.notifications-page, .team-page, .billing-page, .stripe-page) ::selection {
  background: rgba(148, 189, 205, 0.32);
  color: #f8f8f6;
}

/* Exact component hooks used by the settings renderers. */
html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-channel-panel,
  .notification-recipients,
  .notification-webhook-card,
  .notification-group,
  .notification-loading-state,
  .notification-load-error
) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-channel-tabs,
  .notification-webhook-settings,
  .notification-recipient-settings,
  .notification-group-header,
  .notification-rule
) {
  border-color: var(--settings-dark-border);
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-group-header,
  .notification-recipients-heading,
  .notification-rules-disabled-note,
  .notification-condition,
  .notification-rule-static
) {
  background: var(--settings-dark-raised);
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .notifications-page .notification-rule.is-enabled {
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .notifications-page .notification-rule:not(.is-enabled) {
  background: var(--settings-dark-soft);
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-channel-tab,
  .notification-rule-copy p,
  .notification-recipient-helper,
  .notification-recipient-empty,
  .notification-webhook-meta,
  .notification-destination
) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notification-channel-tab:hover, .notification-channel-tab.is-active) {
  color: var(--settings-dark-text);
  background: var(--settings-dark-hover);
}

html[data-dashboard-theme="dark"] .notifications-page .notification-channel-tab::after {
  background: var(--settings-dark-accent);
}

html[data-dashboard-theme="dark"] .notifications-page .notification-channel-mark {
  background: #29343a;
  color: #b9d6e1;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-channel-mark.is-slack {
  background: #332636;
  color: #e4b4de;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-channel-mark.is-webhook {
  background: #20372e;
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notification-recipient-chip, .notification-condition input, .notification-condition select, .notification-webhook-field input, .notification-recipient-form input) {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-field);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notification-condition input, .notification-condition select):disabled {
  border-color: var(--settings-dark-border);
  background: #24272b;
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notification-save-button, .notification-recipient-form button[type="submit"], .notification-load-error button) {
  border-color: #e4e5e3;
  background: #e4e5e3;
  color: #161719;
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notification-save-button, .notification-recipient-form button[type="submit"], .notification-load-error button):hover:not(:disabled) {
  background: #f8f8f6;
  color: #111214;
}

html[data-dashboard-theme="dark"] .notifications-page :is(.notification-connection-status.is-configured, .notification-save-status.is-saved) {
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .notifications-page .notification-group-icon {
  background: #29343a;
  color: #b9d6e1;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-group-icon.is-copilot {
  background: #2e2942;
  color: #c9c1ff;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-switch {
  background: #464b52;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-switch.is-on {
  background: #719baa;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-switch span {
  background: #f2f3f1;
}

html[data-dashboard-theme="dark"] .team-page :is(.team-list, .team-item, .team-invite-panel, .team-summary) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .team-page .team-item:hover {
  background: var(--settings-dark-raised);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-input-row input, .team-action) {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-field);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .team-page .team-input-row button {
  border-color: #e4e5e3;
  background: #e4e5e3;
  color: #161719;
}

html[data-dashboard-theme="dark"] .team-page .team-input-row button:hover:not(:disabled) {
  background: #f8f8f6;
}

html[data-dashboard-theme="dark"] .team-page .team-input-row button:disabled {
  border-color: var(--settings-dark-border);
  background: #292c30;
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .team-page .team-action:hover {
  background: var(--settings-dark-hover);
}

html[data-dashboard-theme="dark"] .team-page .team-action.danger {
  border-color: #734147;
  background: #321d21;
  color: var(--settings-dark-danger);
}

html[data-dashboard-theme="dark"] .team-page .team-action.danger:hover {
  background: #40242a;
}

html[data-dashboard-theme="dark"] .team-page :is(.team-invite-icon, .team-member-avatar, .team-empty-icon) {
  border-color: #40505a;
  background: #243139;
  color: #b4d0dc;
}

html[data-dashboard-theme="dark"] .team-page .team-member-avatar.is-pending {
  border-color: #635a38;
  background: #302a1b;
  color: var(--settings-dark-warning);
}

html[data-dashboard-theme="dark"] .team-page :is(.team-member-status, .team-member-count) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-raised);
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .team-page .team-member-status > span {
  background: var(--settings-dark-success);
}

/* Billing renderer class names and all of its expandable/table surfaces. */
html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-current-plan-card,
  .billing-human-agents-plan-card,
  .billing-human-agents-summary-card,
  .billing-human-agents-seat-panel,
  .billing-activity,
  .billing-addon-table,
  .billing-addon-table-empty,
  .billing-plan-confirm-amount,
  .portal-checkout-payment-summary,
  .portal-checkout-trial-choice,
  .portal-seat-control,
  .portal-seat-selection,
  .portal-seat-user,
  .portal-seat-price-preview,
  .portal-skip-trial-summary,
  .portal-skip-trial-price,
  .portal-topup-total,
  .portal-copilot-card,
  .portal-copilot-overview,
  .portal-copilot-metrics,
  .portal-copilot-allowance,
  .portal-copilot-note
) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-raised);
  color: var(--settings-dark-text);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-addon-table-head,
  .billing-activity-row-head,
  .billing-addon-table-row,
  .billing-product-row,
  .billing-current-plan-head,
  .billing-current-plan-foot,
  .billing-addon-foot,
  .billing-enterprise-divider,
  .portal-seat-selection-head,
  .portal-topup-quantity-row,
  .portal-seat-price-preview > div + div,
  .portal-skip-trial-price > div + div
) {
  border-color: var(--settings-dark-border);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-addon-table-head, .billing-activity-row-head, .portal-seat-selection-head) {
  background: var(--settings-dark-soft);
  color: var(--settings-dark-faint);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-addon-table-row, .billing-product-row, .portal-seat-user) {
  background: var(--settings-dark-surface);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-addon-table-row, .billing-product-row, .portal-seat-user):hover {
  background: var(--settings-dark-hover);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-product-tabs button, .billing-interval-button, .portal-billing-toggle button) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-product-tabs button:hover:not(.is-active), .billing-interval-button:hover, .portal-billing-toggle button:hover) {
  background: var(--settings-dark-hover);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-product-tabs button.is-active, .billing-interval-button.is-active, .portal-billing-toggle button.is-active) {
  background: var(--settings-dark-raised);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-tabs button::after {
  background: var(--settings-dark-accent);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-product-tabs small, .billing-product-tabs button.is-active small) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-product-icon, .billing-addon-icon, .portal-skip-trial-icon, .portal-seat-user-avatar) {
  border-color: #40515a;
  background: #25343b;
  color: #b4d2de;
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-icon.is-copilot {
  border-color: #51476b;
  background: #302b42;
  color: #d0c7ff;
}

html[data-dashboard-theme="dark"] .billing-page .billing-addon-icon.is-blue {
  background: #233343;
  color: #acd0eb;
}

html[data-dashboard-theme="dark"] .billing-page .billing-addon-icon.is-green {
  background: #20372e;
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .billing-page .billing-addon-icon.is-purple {
  background: #302a42;
  color: #d2c5ff;
}

html[data-dashboard-theme="dark"] .billing-page .billing-addon-icon.is-orange {
  background: #392b20;
  color: #e7b98c;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-header-manage, .billing-enterprise-cta, .billing-addon-add-btn, .billing-addon-manage-bottom, .billing-addon-action-link) {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-raised);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-header-manage, .billing-enterprise-cta, .billing-addon-add-btn, .billing-addon-manage-bottom, .billing-addon-action-link):hover {
  background: var(--settings-dark-hover);
  color: #f8f8f6;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-plan-save, .portal-activate-trial, .portal-modal-actions .button-primary) {
  border-color: #e4e5e3;
  background: #e4e5e3;
  color: #161719;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-plan-price [data-plan-amount], .billing-usage-kpi strong, .billing-usage-row strong, .billing-plan-confirm-amount strong, .portal-billing-metrics strong, .portal-billing-seat-summary > strong, .portal-billing-seat-summary p b, .portal-seat-price-preview > div > strong, .portal-skip-trial-price > div > strong, .portal-topup-total strong) {
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-addon-lock-note, .billing-status-pill, .billing-interval-badge) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-soft);
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .billing-page .billing-activity-row .is-paid {
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-addon-toggle-track, .portal-seat-occupancy) {
  background: #3b3f45;
}

html[data-dashboard-theme="dark"] .billing-page .billing-addon-toggle-track::after {
  background: #f2f3f1;
}

html[data-dashboard-theme="dark"] .billing-page .billing-addon-toggle input:checked + .billing-addon-toggle-track {
  background: #719baa;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-ai-cancellation-message, .portal-cancellation-message, .portal-seat-cancellation-notice) {
  border-color: #695b31;
  background: #2b2719;
  color: var(--settings-dark-warning);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-ai-cancellation-message, .portal-cancellation-message, .portal-seat-cancellation-notice) button {
  border-color: #75683e;
  background: #3a3320;
  color: #f0dc91;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-ai-cancellation-message, .portal-cancellation-message, .portal-seat-cancellation-notice) button:hover {
  background: #4a4127;
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-seat-stepper, .portal-topup-bundles button) {
  border-color: var(--settings-dark-border-strong);
  background: var(--settings-dark-field);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-seat-stepper button, .portal-seat-stepper input) {
  border-color: var(--settings-dark-border);
  background: transparent;
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page .portal-topup-bundles button.is-active,
html[data-dashboard-theme="dark"] .billing-page .portal-seat-user:has(input:checked),
html[data-dashboard-theme="dark"] .billing-page .portal-checkout-trial-choice:has(input:checked) {
  border-color: #7196a5;
  background: #1c292f;
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-seat-price-preview.is-error > div:first-child, .portal-skip-trial-price.is-error > div:first-child, .portal-seat-error) {
  border-color: #6d3a40;
  background: #2d1a1e;
  color: var(--settings-dark-danger);
}

html[data-dashboard-theme="dark"] .billing-page .portal-seat-user-tag {
  background: #392f1e;
  color: #e3c37c;
}

html[data-dashboard-theme="dark"] .billing-page .portal-seat-change-summary::before {
  background: var(--settings-dark-accent);
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-plan-error-icon, .portal-skip-trial-icon.is-danger) {
  background: #3a2025;
  color: var(--settings-dark-danger);
}

html[data-dashboard-theme="dark"] .stripe-page :is(.stripe-connection-card, .stripe-action-item, .modal-card) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .stripe-page :is(.stripe-status-key, .stripe-action-tag, .stripe-status-pill) {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-raised);
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .stripe-page .stripe-status-pill.is-live {
  border-color: #365a4c;
  background: #20372e;
  color: var(--settings-dark-success);
}

html[data-dashboard-theme="dark"] .stripe-page :is(.stripe-usage-value, .stripe-action-item strong) {
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-copilot-head, .portal-copilot-metrics > div, .portal-copilot-note) {
  border-color: var(--settings-dark-border);
}

html[data-dashboard-theme="dark"] .billing-page .portal-copilot-progress {
  background: #373b41;
}

html[data-dashboard-theme="dark"] .billing-page .portal-copilot-progress span {
  background: #83adbc;
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-copilot-head h2, .portal-copilot-allowance strong, .portal-copilot-metrics strong, .portal-seat-control-copy strong) {
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-copilot-allowance span, .portal-copilot-metrics span, .portal-copilot-metrics small, .portal-copilot-allowance p, .portal-copilot-note) {
  color: var(--settings-dark-muted);
}

html[data-dashboard-theme="dark"] .billing-page .portal-copilot-note svg {
  color: var(--settings-dark-accent);
}

/* AI Agents roster contrast hierarchy. This is intentionally quieter than the
   Action Tools editor: one nested group layer and clearer interactive rows. */
html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-section.agents-combined-section {
  border-color: #383c42;
  background: #161719;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-group {
  gap: 13px;
  padding: 14px;
  border: 1px solid #33373c;
  border-radius: 9px;
  background: #1b1d20;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-group + .agent-slot-group {
  padding-top: 14px;
  border-top: 1px solid #33373c;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-group.is-inactive-group {
  border-color: #303338;
  background: #18191b;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-section-title {
  min-height: 26px;
  padding-inline: 2px;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-section-title .section-helper {
  color: #a8adb3;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card {
  border-color: #3d4248;
  background: #232529;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card:hover {
  border-color: #596069;
  background: #292c30;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.is-inactive-slot {
  border-color: #393b40;
  background: #1e1f22;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.is-inactive-slot:hover {
  border-color: #51463c;
  background: #242322;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.create-card[data-open-create] {
  border-color: #46605e;
  background: #1d2725;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-roster-row.agent-slot-card.create-card[data-open-create]:hover {
  border-color: #5f7f79;
  background: #23302d;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-row-icon {
  border: 1px solid #343b40;
  background: #293036;
  color: #9abcca;
}

html[data-dashboard-theme="dark"] .agents-roster-page .is-inactive-slot .agent-row-icon {
  border-color: #403c38;
  background: #2a2928;
  color: #bd9e81;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-add-slot-action {
  margin-top: 1px;
  border-top-color: #363a40;
}

html[data-dashboard-theme="dark"] .agents-roster-page .agent-add-slot-action:hover {
  background: #24272a;
}

@media (max-width: 640px) {
  html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-section.agents-combined-section {
    padding: 10px;
  }

  html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-group,
  html[data-dashboard-theme="dark"] .agents-roster-page .agent-slot-group + .agent-slot-group {
    padding: 10px;
  }
}

/* Billing and Notifications dark-mode correction pass. These selectors match
   the renderer hooks directly so light component defaults cannot leak through. */
html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-loading-line,
  .billing-loading-metrics > span,
  .billing-loading-plan-row > span,
  .billing-loading-addon-row > span
) {
  background: linear-gradient(100deg, #24272b 30%, #34383e 50%, #24272b 70%);
  background-size: 220% 100%;
}

html[data-dashboard-theme="dark"] .billing-page .billing-loading-panel {
  border-color: #34383e;
  background: #191a1d;
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-tabs button,
html[data-dashboard-theme="dark"] .notifications-page .notification-channel-tab {
  background: transparent;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-tabs button:hover:not(.is-active),
html[data-dashboard-theme="dark"] .billing-page .billing-product-tabs button.is-active,
html[data-dashboard-theme="dark"] .notifications-page .notification-channel-tab:hover,
html[data-dashboard-theme="dark"] .notifications-page .notification-channel-tab.is-active {
  background: transparent;
  color: var(--settings-dark-text, #eeeeec);
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-tabs button::after,
html[data-dashboard-theme="dark"] .notifications-page .notification-channel-tab::after {
  background: #94bdcd;
}

html[data-dashboard-theme="dark"] .billing-page .billing-product-tabs,
html[data-dashboard-theme="dark"] .notifications-page .notification-channel-tabs {
  border-color: #34383e;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .portal-billing-head,
  .portal-billing-seat-summary,
  .portal-billing-metrics > div,
  .portal-billing-actions,
  .portal-copilot-head,
  .portal-copilot-allowance,
  .portal-copilot-metrics > div,
  .portal-copilot-note
) {
  border-color: #34383e;
}

html[data-dashboard-theme="dark"] .billing-page .portal-billing-seat-summary,
html[data-dashboard-theme="dark"] .billing-page .portal-copilot-allowance {
  background: #1b1d20;
}

html[data-dashboard-theme="dark"] .billing-page :is(.portal-billing-actions, .portal-copilot-note) {
  background: #18191b;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .portal-billing-seat-summary > span,
  .portal-billing-seat-summary > strong small,
  .portal-billing-seat-summary p,
  .portal-billing-metrics span,
  .portal-billing-metrics small,
  .portal-billing-actions > p
) {
  color: #a9adb2;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .portal-billing-seat-summary > strong,
  .portal-billing-seat-summary p b,
  .portal-billing-metrics strong
) {
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page .portal-billing-actions > p svg {
  color: #94bdcd;
}

html[data-dashboard-theme="dark"] .billing-page .button.button-ghost,
html[data-dashboard-theme="dark"] .billing-page .button.button-secondary {
  border-color: #535961;
  background: #202226;
  color: #e2e4e3;
}

html[data-dashboard-theme="dark"] .billing-page :is(.button.button-ghost, .button.button-secondary):hover:not(:disabled) {
  border-color: #686f78;
  background: #292c30;
  color: #f4f4f1;
}

html[data-dashboard-theme="dark"] .billing-page :is(.button.button-ghost, .button.button-secondary, .button.button-primary):disabled {
  border-color: #3b3f45;
  background: #1a1b1e;
  color: #858a90;
  opacity: 1;
}

html[data-dashboard-theme="dark"] .billing-page .billing-plans-grid-modal .billing-plan-card .button:disabled {
  border-color: #3b3f45;
  background: #1a1b1e;
  color: #858a90;
}

html[data-dashboard-theme="dark"] .billing-page :is(.billing-current-plan-card, .billing-usage-card) {
  border: 1px solid #34383e;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .billing-page .billing-current-plan-card {
  background: #1e2023;
}

html[data-dashboard-theme="dark"] .billing-page .billing-usage-card {
  background: #191a1d;
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-current-plan-card > p,
  .billing-current-plan-foot small,
  .billing-owner-note,
  .billing-plan-note,
  .billing-usage-item small
) {
  color: #a9adb2;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-current-plan-head h2,
  .billing-current-plan-foot strong,
  .billing-usage-card h3,
  .billing-usage-row strong
) {
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page .billing-usage-row {
  color: #c9cdd1;
}

html[data-dashboard-theme="dark"] .billing-page .billing-usage-bar {
  background: #3b3f45;
}

html[data-dashboard-theme="dark"] .billing-page .billing-usage-bar span {
  background: #94bdcd;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-human-agents-plan-card,
  .billing-human-agents-summary-card,
  .billing-human-agents-seat-panel
) {
  border-color: #34383e;
  background: #1e2023;
  color: #eeeeec;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-human-agents-rate-card,
  .billing-human-agents-seat-grid > div,
  .billing-human-agents-summary-card .billing-usage-kpi
) {
  border-color: #3b3f45;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-human-agents-plan-card h2,
  .billing-human-agents-rate-card strong,
  .billing-human-agents-seat-grid strong,
  .billing-human-agents-summary-card h3,
  .billing-human-agents-summary-card .billing-usage-kpi strong
) {
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .billing-human-agents-plan-card > p,
  .billing-human-agents-rate-card span,
  .billing-human-agents-rate-card small,
  .billing-human-agents-seat-grid span,
  .billing-human-agents-seat-grid small,
  .billing-human-agents-seat-foot span,
  .billing-human-agents-summary-card .billing-usage-kpi span
) {
  color: #a9adb2;
}

/* Add-on manager dialogs */
html[data-dashboard-theme="dark"] .billing-page .addon-manage-modal-card {
  border-color: #3b3f45;
  background: #1b1d20;
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-content {
  background: #1b1d20;
  scrollbar-color: #50555d #1b1d20;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .addon-manage-info,
  .addon-manage-threshold,
  .addon-manage-toggle-section,
  .addon-manage-custom-domain
) {
  border-color: #3b3f45;
  background: #22252a;
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-footer {
  border-color: #3b3f45;
  background: #18191b;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .addon-manage-section h3,
  .addon-manage-price,
  .extra-agents-price-amount,
  .addon-manage-toggle-label,
  .addon-manage-threshold-input label,
  .addon-manage-custom-domain label
) {
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .extra-agents-price-unit,
  .extra-agents-price-compare,
  .addon-manage-note,
  .addon-manage-threshold-input span,
  .addon-manage-empty
) {
  color: #a9adb2;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-table {
  border-color: #454a51;
  background: #17181a;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-table-header {
  border-color: #454a51;
  background: #25282d;
  color: #c5c9cd;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-table-row {
  border-color: #3b3f45;
  background: #191a1d;
  color: #d7dadd;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-table-row:not(.addon-manage-table-header):hover {
  background: #202226;
}

html[data-dashboard-theme="dark"] .billing-page :is(
  .addon-manage-threshold-input input,
  .addon-manage-threshold-input select,
  .addon-manage-domain-input-group input
) {
  border-color: #535961;
  background: #111214;
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-toggle-track {
  background: #4a4f56;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-toggle-track::after {
  background: #eeeeec;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-toggle input:checked ~ .addon-manage-toggle-track {
  background: #719baa;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-icon.is-blue {
  background: #233343;
  color: #acd0eb;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-icon.is-purple {
  background: #302a42;
  color: #d2c5ff;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-icon.is-green {
  background: #20372e;
  color: #91d0b6;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-icon.is-orange {
  background: #392b20;
  color: #e7b98c;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-threshold .billing-interval-toggle {
  border-color: #555b63;
  background: #111214;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-threshold .billing-interval-button {
  background: transparent;
  color: #a9adb2;
}

html[data-dashboard-theme="dark"] .billing-page .addon-manage-threshold .billing-interval-button.is-active {
  background: #30343a;
  color: #eeeeec;
  box-shadow: inset 0 0 0 1px #5b626a;
}

/* Notifications */
html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-recipients,
  .notification-webhook-card,
  .notification-group
) {
  border-color: #34383e;
  background: #1d1f22;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-recipient-settings {
  background: transparent;
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-webhook-field > span,
  .notification-delivery-toggle,
  .notification-webhook-heading h2,
  .notification-recipients h2,
  .notification-group-header h2,
  .notification-rule-copy strong
) {
  color: #e3e5e4;
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-webhook-heading p,
  .notification-webhook-meta > p,
  .notification-recipients-heading p,
  .notification-group-header p,
  .notification-rule-copy p,
  .notification-recipient-helper,
  .notification-recipient-empty
) {
  color: #a9adb2;
}

html[data-dashboard-theme="dark"] .notifications-page :is(
  .notification-webhook-field input,
  .notification-recipient-form input,
  .notification-condition,
  .notification-condition input,
  .notification-condition select
) {
  border-color: #535961;
  background: #151618;
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-recipient-form input {
  border-right: 0;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-recipient-chip {
  border-color: #454a51;
  background: #25282c;
  color: #d9dcde;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-recipient-chip button {
  color: #a9adb2;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-recipient-chip button:hover {
  background: #33373c;
  color: #eeeeec;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-group-header {
  border-color: #34383e;
  background: #202226;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-rule.is-enabled {
  background: #1d1f22;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-rule:not(.is-enabled) {
  background: #191a1d;
}

html[data-dashboard-theme="dark"] .notifications-page .notification-rule {
  border-color: #34383e;
}

/* Portal activation gate and checkout. Keep every pre-activation state on the
   same graphite hierarchy as Billing, including the obscured preview beneath
   the gate and the checkout renderer shared with the Billing page. */
html[data-dashboard-theme="dark"] :is(
  .portal-activation-page,
  .portal-activation-loading-page,
  .portal-activation-checkout-page
) {
  --portal-activation-dark-canvas: #111214;
  --portal-activation-dark-surface: #191a1d;
  --portal-activation-dark-raised: #1e2023;
  --portal-activation-dark-soft: #151618;
  --portal-activation-dark-border: #34383e;
  --portal-activation-dark-border-strong: #4b5158;
  --portal-activation-dark-text: #eeeeec;
  --portal-activation-dark-muted: #a9adb2;
  --portal-activation-dark-faint: #7f858b;
  --portal-activation-dark-accent: #94bdcd;
  color-scheme: dark;
  background: var(--portal-activation-dark-canvas);
  color: var(--portal-activation-dark-text);
}

html[data-dashboard-theme="dark"] body:has(:is(
  .portal-activation-page,
  .portal-activation-loading-page,
  .portal-activation-checkout-page
)) :is(.main, .content, .workspace) {
  background: var(--dashboard-dark-canvas, #111214);
}

html[data-dashboard-theme="dark"] .portal-activation-loading-page .app-loader-text {
  color: var(--portal-activation-dark-text);
}

html[data-dashboard-theme="dark"] .portal-activation-loading-page .app-loader-progress {
  background: #303338;
}

html[data-dashboard-theme="dark"] .portal-activation-loading-page .app-loader-progress > span {
  background: var(--portal-activation-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-activation-skeleton {
  border-color: var(--portal-activation-dark-border);
  background: var(--portal-activation-dark-soft);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

html[data-dashboard-theme="dark"] .portal-activation-skeleton-head {
  border-bottom-color: var(--portal-activation-dark-border);
  background: var(--portal-activation-dark-raised);
}

html[data-dashboard-theme="dark"] .portal-activation-skeleton-body aside {
  border-right-color: var(--portal-activation-dark-border);
  background: var(--portal-activation-dark-surface);
}

html[data-dashboard-theme="dark"] .portal-activation-skeleton-body main {
  border-color: var(--portal-activation-dark-border);
  background: var(--portal-activation-dark-border);
}

html[data-dashboard-theme="dark"] .portal-activation-skeleton-row {
  background: var(--portal-activation-dark-raised);
}

html[data-dashboard-theme="dark"] .portal-activation-skeleton :is(
  .portal-activation-skeleton-head span,
  .portal-activation-skeleton-head > i,
  .portal-activation-skeleton-body aside span,
  .portal-activation-skeleton-row i,
  .portal-activation-skeleton-avatar,
  .portal-activation-skeleton-chip
) {
  background: #303338;
}

html[data-dashboard-theme="dark"] .portal-activation-skeleton .portal-activation-skeleton-copy i:last-child {
  background: #282b2f;
}

html[data-dashboard-theme="dark"] .portal-activation-tint {
  background: rgba(12, 13, 15, 0.74);
}

html[data-dashboard-theme="dark"] .portal-activation-card {
  border-color: var(--portal-activation-dark-border-strong);
  background: rgba(30, 32, 35, 0.98);
  color: var(--portal-activation-dark-text);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
}

html[data-dashboard-theme="dark"] .portal-activation-card h1 {
  color: var(--portal-activation-dark-text);
}

html[data-dashboard-theme="dark"] .portal-activation-card > p {
  color: var(--portal-activation-dark-muted);
}

html[data-dashboard-theme="dark"] .portal-activation-label {
  color: var(--portal-activation-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-activation-icon {
  border: 1px solid #3d515b;
  background: #243139;
  color: #b8d2dc;
}

html[data-dashboard-theme="dark"] .portal-activation-icon.is-error {
  border-color: #704146;
  background: #321d21;
  color: #f09ba1;
}

html[data-dashboard-theme="dark"] .portal-activation-requirement {
  border-color: var(--portal-activation-dark-border);
  background: var(--portal-activation-dark-soft);
  color: #c7c9ca;
}

html[data-dashboard-theme="dark"] .portal-activation-requirement svg {
  color: var(--portal-activation-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-activation-card .button.button-primary {
  border: 1px solid #e4e5e3;
  background: #e4e5e3;
  color: #161719;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-activation-card .button.button-primary:hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: #0f1011;
}

html[data-dashboard-theme="dark"] .portal-activation-card .button:focus-visible {
  outline: 3px solid rgba(148, 189, 205, 0.24);
  outline-offset: 3px;
}

html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page .portal-billing-shell.is-onboarding {
  border-color: var(--settings-dark-border);
  background: var(--settings-dark-surface);
}

html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page .portal-billing-intro {
  border-right: 1px solid var(--settings-dark-border);
  background: #17191c;
}

html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page .portal-billing-checkout {
  background: #1e2023;
}

html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page :is(
  .portal-billing-intro h2,
  .portal-billing-intro li,
  .portal-billing-price strong,
  .portal-checkout-payment-summary strong,
  .portal-checkout-trial-choice strong
) {
  color: var(--settings-dark-text);
}

html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page .portal-billing-intro .billing-plan-label {
  color: var(--settings-dark-accent);
}

html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page .button.button-primary {
  border: 1px solid #e4e5e3;
  background: #e4e5e3;
  color: #161719;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page .button.button-primary:hover:not(:disabled) {
  border-color: #fff;
  background: #fff;
  color: #0f1011;
}

@media (max-width: 980px) {
  html[data-dashboard-theme="dark"] .portal-activation-checkout-page.billing-page .portal-billing-intro {
    border-right: 0;
    border-bottom: 1px solid var(--settings-dark-border);
  }
}
.referral-program-main {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 52px clamp(24px, 4vw, 64px) 88px;
}

[data-sidebar-launcher-referral][hidden] {
  display: none;
}

.referral-program-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  padding: 0 0 34px;
  border-bottom: 1px solid rgba(19, 42, 70, 0.14);
}

.referral-program-heading {
  max-width: 700px;
}

.referral-program-kicker {
  color: #657a93;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.referral-program-hero h2 {
  margin: 0;
  color: #0d1b30;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.referral-program-hero p,
.referral-program-section header p {
  margin: 0;
  color: #66778d;
  line-height: 1.55;
}

.referral-program-meta {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding-bottom: 2px;
}

.referral-program-rate {
  display: grid;
  justify-items: end;
}

.referral-program-rate strong {
  color: #0d1b30;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}

.referral-program-rate span {
  margin-top: 5px;
  color: #75869a;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.referral-program-message {
  margin-top: 20px;
  padding: 12px 16px;
  border-left: 3px solid #557ca9;
  background: #eaf2ff;
  color: #24528d;
}

.referral-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 34px;
  border-bottom: 1px solid rgba(19, 42, 70, 0.14);
}

.referral-stat-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 18px;
  padding: 25px 30px 27px;
  border-right: 1px solid rgba(19, 42, 70, 0.12);
}

.referral-stat-grid article:first-child {
  padding-left: 0;
}

.referral-stat-grid article:last-child {
  border-right: 0;
}

.referral-stat-grid span,
.referral-stat-grid strong,
.referral-stat-grid small {
  display: block;
}

.referral-stat-grid span {
  color: #52677f;
  font-size: 13px;
  font-weight: 650;
}

.referral-stat-grid strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #0d1b30;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}

.referral-stat-grid small {
  color: #8a98a9;
  font-size: 11px;
}

.referral-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(300px, 0.95fr);
  grid-template-areas: "primary rail";
  align-items: start;
  gap: clamp(22px, 3vw, 38px);
}

.referral-dashboard-primary {
  grid-area: primary;
  display: grid;
  gap: 24px;
}

.referral-dashboard-rail {
  grid-area: rail;
  display: grid;
  gap: 18px;
  align-self: start;
}

.referral-link-panel {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 3px 22px 22px 22px;
  background: #10243c;
  color: #fff;
}

.referral-link-panel::after {
  position: absolute;
  right: -70px;
  bottom: -92px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025), 0 0 0 58px rgba(255, 255, 255, 0.018);
  content: "";
}

.referral-link-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #b9c9da;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referral-link-panel-heading svg {
  width: 17px;
  height: 17px;
}

.referral-link-panel > strong {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  margin: 38px 0 0;
  color: #fff;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-link-panel p {
  position: relative;
  z-index: 1;
  max-width: 31ch;
  margin: 0;
  color: #9fb1c5;
  font-size: 12px;
  line-height: 1.55;
}

.referral-link-panel button,
.referral-program-form button,
.referral-viewer-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: #0d1b30;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.referral-link-panel button {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 24px;
  background: #f2f6fb;
  color: #10243c;
}

.referral-link-panel button:hover,
.referral-program-form button:hover,
.referral-viewer-form button:hover {
  transform: translateY(-1px);
}

.referral-link-panel button:active,
.referral-program-form button:active,
.referral-viewer-form button:active {
  transform: translateY(1px);
}

.referral-link-panel button:focus-visible,
.referral-program-form button:focus-visible,
.referral-viewer-form button:focus-visible,
.referral-program-form input:focus-visible,
.referral-program-form textarea:focus-visible,
.referral-viewer-form input:focus-visible {
  outline: 2px solid #5c86b4;
  outline-offset: 2px;
}

.referral-link-panel button:disabled,
.referral-program-form button:disabled,
.referral-viewer-form button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.referral-balance-panel {
  padding: 24px 4px 20px;
  border-top: 1px solid rgba(19, 42, 70, 0.14);
  border-bottom: 1px solid rgba(19, 42, 70, 0.14);
}

.referral-balance-grid {
  display: grid;
}

.referral-balance-card {
  padding: 22px 0 4px;
}

.referral-balance-card + .referral-balance-card {
  margin-top: 18px;
  border-top: 1px solid rgba(19, 42, 70, 0.1);
}

.referral-balance-card > span {
  color: #2d435b;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.referral-balance-card > strong {
  display: block;
  margin: 8px 0 20px;
  color: #0d1b30;
  font-size: clamp(30px, 3vw, 42px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.045em;
}

.referral-balance-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.referral-balance-card dl div {
  display: grid;
  gap: 3px;
}

.referral-balance-card dt,
.referral-balance-card dd {
  margin: 0;
}

.referral-balance-card dt {
  color: #8a98a8;
  font-size: 10px;
  text-transform: uppercase;
}

.referral-balance-card dd {
  color: #3d5168;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.referral-balance-card p {
  margin: -5px 0 8px;
  color: #8493a5;
  font-size: 12px;
  line-height: 1.55;
}

.referral-projection-grid {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(19, 42, 70, 0.1);
}

.referral-projection-card + .referral-projection-card {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(19, 42, 70, 0.08);
}

.referral-projection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.referral-projection-heading > span {
  color: #2d435b;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.referral-projection-heading > small {
  padding: 3px 6px;
  border: 1px solid rgba(84, 109, 136, 0.18);
  border-radius: 5px;
  color: #778a9f;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.referral-projection-card > strong {
  display: block;
  margin: 9px 0 7px;
  color: #435c75;
  font-size: clamp(26px, 2.6vw, 34px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}

.referral-projection-card > p {
  margin: 0;
  color: #7b8c9e;
  font-size: 11.5px;
  line-height: 1.5;
}

.referral-projection-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 17px 0 0;
}

.referral-projection-card dl div {
  display: grid;
  gap: 3px;
}

.referral-projection-card dt,
.referral-projection-card dd {
  margin: 0;
}

.referral-projection-card dt {
  color: #8a98a8;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.referral-projection-card dd {
  color: #4a6077;
  font-size: 12px;
  font-weight: 700;
}

.referral-projection-disclaimer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 17px;
  color: #8b99a9;
  font-size: 10px;
  line-height: 1.4;
}

.referral-projection-disclaimer svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.referral-program-section {
  padding: 28px;
  border: 1px solid rgba(19, 42, 70, 0.1);
  border-radius: 16px;
  background: var(--surface, #fff);
}

.referral-program-section header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.referral-program-section h3 {
  margin: 0;
  color: #0d1b30;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.referral-section-index + h3 {
  margin-top: 4px;
}

.referral-section-index,
.referral-section-note {
  color: #8998a9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.referral-section-note {
  padding-top: 5px;
}

.referral-activity-section {
  min-height: 430px;
}

.referral-activity-section > header {
  align-items: center;
  margin-bottom: 6px;
}

.referral-chart-period {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(19, 42, 70, 0.12);
  border-radius: 9px;
  background: #f3f6f9;
}

.referral-chart-period label {
  cursor: pointer;
}

.referral-chart-period input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.referral-chart-period span {
  display: grid;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 6px;
  place-items: center;
  color: #77889b;
  font-size: 11px;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.referral-chart-period input:checked + span {
  background: #fff;
  color: #162b43;
  box-shadow: 0 1px 4px rgba(19, 42, 70, 0.1);
}

.referral-chart-period input:focus-visible + span {
  outline: 2px solid #5c86b4;
  outline-offset: 2px;
}

.referral-chart-panels > [data-referral-chart-panel="90"] {
  display: none;
}

.referral-activity-section:has(.referral-chart-period input[value="90"]:checked) [data-referral-chart-panel="30"] {
  display: none;
}

.referral-activity-section:has(.referral-chart-period input[value="90"]:checked) [data-referral-chart-panel="90"] {
  display: block;
}

.referral-chart-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3px 16px;
  padding: 12px 4px 2px;
}

.referral-chart-summary span,
.referral-chart-summary small {
  color: #8494a7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.referral-chart-summary strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #0d1b30;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.035em;
}

.referral-chart-summary small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.referral-commission-chart {
  display: block;
  width: 100%;
  height: 310px;
  overflow: visible;
}

.referral-chart-grid-line {
  stroke: rgba(19, 42, 70, 0.1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.referral-chart-axis-label {
  fill: #8494a7;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.referral-chart-area {
  color: #4d7eaa;
  fill: url(#referral-commission-gradient-30);
}

.referral-chart-gradient-stop {
  stop-color: #4d7eaa;
}

.referral-chart-line {
  fill: none;
  stroke: #356e9d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.referral-chart-endpoint {
  fill: #fff;
  stroke: #356e9d;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.referral-chart-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  color: #8996a7;
  font-size: 13px;
}

.referral-table-wrap {
  overflow-x: auto;
  margin: 0 -8px -10px;
}

.referral-program-section table {
  width: 100%;
  border-collapse: collapse;
}

.referral-program-section th,
.referral-program-section td {
  padding: 15px 12px;
  border-bottom: 1px solid rgba(19, 42, 70, 0.08);
  color: #344960;
  text-align: left;
}

.referral-program-section th {
  color: #77879a;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referral-program-section td small {
  display: block;
  margin-top: 3px;
  color: #8996a7;
}

.referral-money {
  color: #15734b !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

.referral-money.is-negative {
  color: #b74242 !important;
}

.referral-table-empty {
  padding: 54px 32px !important;
  color: #8996a7 !important;
  text-align: center !important;
}

.referral-entry-type {
  display: inline-block;
  color: #536980;
  font-size: 12px;
  text-transform: capitalize;
}

.referral-access-section {
  padding: 24px;
  border-radius: 16px 16px 3px 16px;
}

.referral-access-section header {
  margin-bottom: 18px;
}

.referral-access-section h3 {
  font-size: 17px;
}

.referral-access-section header p {
  font-size: 12px;
}

.referral-operations {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(19, 42, 70, 0.14);
}

.referral-operations-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
}

.referral-operations-heading h3 {
  margin: 6px 0 0;
  color: #0d1b30;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.referral-operations-heading p {
  max-width: 52ch;
  margin: 0;
  color: #708197;
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.referral-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px;
}

.referral-form-grid.is-single {
  grid-template-columns: minmax(0, 0.72fr) minmax(240px, 0.28fr);
}

.referral-form-grid.is-single::after {
  min-height: 100%;
  border-radius: 3px 20px 20px 20px;
  background: rgba(112, 133, 157, 0.055);
  content: "";
}

.referral-form-section {
  border-radius: 3px 18px 18px 18px;
}

.referral-program-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.referral-program-form label,
.referral-viewer-form {
  color: #40546b;
  font-size: 13px;
  font-weight: 650;
}

.referral-program-form label:first-child,
.referral-program-form .is-wide {
  grid-column: 1 / -1;
}

.referral-program-form input,
.referral-program-form textarea,
.referral-viewer-form input {
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  border: 1px solid #ced7e2;
  border-radius: 8px;
  background: #fff;
  color: #0d1b30;
  font: inherit;
  resize: vertical;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.referral-program-form input:focus,
.referral-program-form textarea:focus,
.referral-viewer-form input:focus {
  border-color: #7596b9;
  box-shadow: 0 0 0 3px rgba(77, 117, 158, 0.1);
}

.referral-program-form button {
  width: max-content;
}

.referral-program-form [data-referral-form-status],
.referral-viewer-form [data-referral-form-status] {
  align-self: center;
  color: #65778d;
  font-size: 12px;
}

.referral-viewer-list {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.referral-viewer-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(19, 42, 70, 0.08);
  color: #344960;
  font-size: 12px;
}

.referral-viewer-list button {
  border: 0;
  background: transparent;
  color: #a43b3b;
  cursor: pointer;
}

.referral-viewer-list .is-empty {
  color: #8996a7;
}

.referral-viewer-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 10px;
}

.referral-viewer-form input {
  min-width: 0;
  margin-top: 0;
}

.referral-viewer-form [data-referral-form-status] {
  grid-column: 1 / -1;
}

.referral-program-loading,
.referral-program-empty {
  display: grid;
  place-items: center;
  min-height: 340px;
  color: #6b7b90;
  text-align: center;
}

.referral-program-loading {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.referral-program-loading span {
  height: 180px;
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(107, 126, 149, 0.08) 20%, rgba(107, 126, 149, 0.15) 40%, rgba(107, 126, 149, 0.08) 60%);
  background-size: 200% 100%;
  animation: referral-loading-shimmer 1.6s ease-in-out infinite;
}

@keyframes referral-loading-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -60% 0; }
}

.referral-program-empty strong,
.referral-program-empty span {
  display: block;
}

@media (max-width: 1080px) {
  .referral-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "primary";
  }

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

  .referral-access-section {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .referral-program-main {
    padding: 28px 16px 56px;
  }

  .referral-program-hero,
  .referral-operations-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .referral-program-meta {
    width: 100%;
    justify-content: space-between;
  }

  .referral-stat-grid {
    grid-template-columns: 1fr;
  }

  .referral-stat-grid article,
  .referral-stat-grid article:first-child {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(19, 42, 70, 0.1);
  }

  .referral-stat-grid article:last-child {
    border-bottom: 0;
  }

  .referral-dashboard-rail {
    grid-template-columns: 1fr;
  }

  .referral-access-section {
    grid-column: auto;
  }

  .referral-program-section {
    padding: 22px 18px;
  }

  .referral-operations-heading p {
    text-align: left;
  }

  .referral-form-grid,
  .referral-form-grid.is-single {
    grid-template-columns: 1fr;
  }

  .referral-form-grid.is-single::after {
    display: none;
  }

  .referral-program-form,
  .referral-viewer-form {
    grid-template-columns: 1fr;
  }

  .referral-program-form label {
    grid-column: 1 / -1;
  }

  .referral-program-loading {
    grid-template-columns: 1fr;
  }

  .referral-program-loading span:not(:first-child) {
    display: none;
  }
}
.billing-referral-reward {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 22px 2px 18px;
  border-top: 1px solid #d9e3ec;
}

.billing-referral-reward-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #0d1b30;
  border-radius: 9px;
  background: #0d1b30;
  color: #fff;
}

.billing-referral-reward-icon svg {
  width: 17px;
  height: 17px;
}

.billing-referral-reward strong,
.billing-referral-reward p {
  display: block;
  margin: 0;
}

.billing-referral-reward p {
  margin-top: 3px;
  color: #66778d;
  font-size: 13px;
  line-height: 1.45;
}

.billing-referral-reward-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.billing-referral-reward-form input {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #cfdbe5;
  border-radius: 8px;
  background: #fff;
  color: #102940;
  font: inherit;
  font-size: 13px;
}

.billing-referral-reward-form input:focus {
  border-color: #6686a3;
  outline: 2px solid rgba(72, 114, 150, 0.16);
  outline-offset: 1px;
}

.billing-referral-reward-form .button {
  min-height: 40px;
  padding-inline: 14px;
  border-color: #cfdbe5;
  background: transparent;
  color: #17324a;
  white-space: nowrap;
}

.billing-referral-reward-status {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  color: #66778d;
  font-size: 12px;
}

.billing-referral-reward-status:empty {
  display: none;
}

@media (max-width: 900px) {
  .billing-referral-reward {
    grid-template-columns: auto 1fr;
  }

  .billing-referral-reward-form {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .billing-referral-reward-form {
    grid-column: 1 / -1;
  }
}

html[data-dashboard-theme="dark"] .referral-program-hero,
html[data-dashboard-theme="dark"] .referral-stat-grid,
html[data-dashboard-theme="dark"] .referral-balance-panel,
html[data-dashboard-theme="dark"] .referral-operations {
  border-color: rgba(174, 195, 221, 0.16);
}

html[data-dashboard-theme="dark"] .referral-stat-grid article,
html[data-dashboard-theme="dark"] .referral-balance-card + .referral-balance-card,
html[data-dashboard-theme="dark"] .referral-viewer-list li {
  border-color: rgba(174, 195, 221, 0.12);
}

html[data-dashboard-theme="dark"] .referral-program-section {
  border-color: rgba(174, 195, 221, 0.13);
  background: #101e30;
}

html[data-dashboard-theme="dark"] .referral-link-panel {
  background: #172b43;
}

html[data-dashboard-theme="dark"] .referral-program-hero h2,
html[data-dashboard-theme="dark"] .referral-program-rate strong,
html[data-dashboard-theme="dark"] .referral-balance-card > strong,
html[data-dashboard-theme="dark"] .referral-stat-grid strong,
html[data-dashboard-theme="dark"] .referral-program-section h3,
html[data-dashboard-theme="dark"] .referral-operations-heading h3 {
  color: #edf4ff;
}

html[data-dashboard-theme="dark"] .referral-program-hero p,
html[data-dashboard-theme="dark"] .referral-program-section header p,
html[data-dashboard-theme="dark"] .referral-balance-card p,
html[data-dashboard-theme="dark"] .referral-stat-grid span,
html[data-dashboard-theme="dark"] .referral-stat-grid small,
html[data-dashboard-theme="dark"] .referral-operations-heading p {
  color: #9caec3;
}

html[data-dashboard-theme="dark"] .referral-balance-card > span,
html[data-dashboard-theme="dark"] .referral-balance-card dd {
  color: #c9d7e7;
}

html[data-dashboard-theme="dark"] .referral-projection-grid,
html[data-dashboard-theme="dark"] .referral-projection-card + .referral-projection-card {
  border-color: rgba(174, 195, 221, 0.12);
}

html[data-dashboard-theme="dark"] .referral-projection-heading > span,
html[data-dashboard-theme="dark"] .referral-projection-card > strong {
  color: #c9d7e7;
}

html[data-dashboard-theme="dark"] .referral-projection-heading > small {
  border-color: rgba(174, 195, 221, 0.2);
  color: #91a5bc;
}

html[data-dashboard-theme="dark"] .referral-projection-card > p,
html[data-dashboard-theme="dark"] .referral-projection-card dt,
html[data-dashboard-theme="dark"] .referral-projection-disclaimer {
  color: #879bb2;
}

html[data-dashboard-theme="dark"] .referral-projection-card dd {
  color: #b9c9da;
}

html[data-dashboard-theme="dark"] .referral-program-section th,
html[data-dashboard-theme="dark"] .referral-program-section td {
  border-color: rgba(174, 195, 221, 0.12);
  color: #c8d5e5;
}

html[data-dashboard-theme="dark"] .referral-chart-period {
  border-color: rgba(174, 195, 221, 0.14);
  background: #0b1728;
}

html[data-dashboard-theme="dark"] .referral-chart-period input:checked + span {
  background: #24374e;
  color: #edf4ff;
  box-shadow: none;
}

html[data-dashboard-theme="dark"] .referral-chart-summary strong {
  color: #edf4ff;
}

html[data-dashboard-theme="dark"] .referral-chart-grid-line {
  stroke: rgba(174, 195, 221, 0.12);
}

html[data-dashboard-theme="dark"] .referral-chart-axis-label,
html[data-dashboard-theme="dark"] .referral-chart-summary span,
html[data-dashboard-theme="dark"] .referral-chart-summary small {
  fill: #8fa3ba;
  color: #8fa3ba;
}

html[data-dashboard-theme="dark"] .referral-chart-gradient-stop {
  stop-color: #6d9bc5;
}

html[data-dashboard-theme="dark"] .referral-chart-line {
  stroke: #75a8d3;
}

html[data-dashboard-theme="dark"] .referral-chart-endpoint {
  fill: #101e30;
  stroke: #91bce0;
}

html[data-dashboard-theme="dark"] .referral-program-form input,
html[data-dashboard-theme="dark"] .referral-program-form textarea,
html[data-dashboard-theme="dark"] .referral-viewer-form input {
  border-color: rgba(174, 195, 221, 0.18);
  background: #0b1728;
  color: #e5eefb;
}

html[data-dashboard-theme="dark"] .referral-form-grid.is-single::after {
  background: rgba(168, 190, 216, 0.045);
}

html[data-dashboard-theme="dark"] .billing-referral-reward {
  border-color: rgba(174, 195, 221, 0.16);
}

html[data-dashboard-theme="dark"] .billing-referral-reward strong {
  color: #edf4ff;
}

html[data-dashboard-theme="dark"] .billing-referral-reward p {
  color: #a8bad0;
}

html[data-dashboard-theme="dark"] .billing-referral-reward-icon {
  border-color: #3c5b79;
  background: #2b4561;
  color: #fff;
}

html[data-dashboard-theme="dark"] .billing-referral-reward-form input {
  border-color: rgba(174, 195, 221, 0.22);
  background: #101e30;
  color: #edf4ff;
}

html[data-dashboard-theme="dark"] .billing-referral-reward-form .button {
  border-color: rgba(174, 195, 221, 0.22);
  color: #dbe7f4;
}

html[data-dashboard-theme="dark"] .billing-referral-reward-status {
  color: #a8bad0;
}

/* Voip navigation lives on the persistent dark workspace rail. */
body.workspace-selected .voip-sidebar-submenu::before,
body.workspace-selected .copilot-sidebar-submenu::before {
  background: rgba(174, 195, 221, 0.2);
}

body.workspace-selected .voip-sidebar-submenu .submenu-link,
body.workspace-selected .copilot-sidebar-submenu .submenu-link {
  color: #aebcd0;
}

body.workspace-selected .voip-sidebar-submenu .submenu-link .menu-icon,
body.workspace-selected .copilot-sidebar-submenu .submenu-link .menu-icon {
  color: #8fa1b8;
}

body.workspace-selected .voip-sidebar-submenu .submenu-link:hover,
body.workspace-selected .copilot-sidebar-submenu .submenu-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

body.workspace-selected .voip-sidebar-submenu .submenu-link:hover .menu-icon,
body.workspace-selected .copilot-sidebar-submenu .submenu-link:hover .menu-icon {
  color: #dce8f7;
}

body.workspace-selected .voip-sidebar-submenu .submenu-link.is-active,
body.workspace-selected .copilot-sidebar-submenu .submenu-link.is-active {
  background: rgba(255, 255, 255, 0.085);
  color: #ffffff;
}

body.workspace-selected .voip-sidebar-submenu .submenu-link.is-active .menu-icon,
body.workspace-selected .copilot-sidebar-submenu .submenu-link.is-active .menu-icon {
  color: #e2ebf7;
}

body.workspace-selected [data-voip-root] .chevron,
body.workspace-selected [data-copilot-root] .chevron {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #aebcd0;
}

body.workspace-selected [data-voip-root] .chevron svg,
body.workspace-selected [data-copilot-root] .chevron svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.25;
}

body.workspace-selected [data-voip-root]:hover .chevron,
body.workspace-selected [data-voip-root].is-active .chevron {
  color: #ffffff;
}

/* Voip is a full-size collapsible navigation section. */
[data-voip-nav] { margin-top:12px; padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid var(--shell-border); gap:4px; }
[data-voip-nav] > .voip-section-heading { min-height:32px; padding:5px 12px; border:0; border-radius:6px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--shell-text-muted); }
body.workspace-selected [data-voip-nav] > .voip-section-heading { color:#8095ae; }
[data-voip-nav] > .voip-section-heading[aria-disabled="true"] { cursor:default; background:transparent; }
[data-voip-nav] > .voip-section-heading .chevron svg { width:14px; height:14px; stroke-width:1.8; }
[data-voip-nav] .voip-sidebar-submenu { padding-left:0; gap:4px; }
[data-voip-nav] .voip-sidebar-submenu::before { display:none; }
[data-voip-nav] .voip-sidebar-submenu .submenu-link { min-height:44px; padding:10px 12px; font-size:14px; font-weight:600; border-radius:10px; }
[data-voip-nav] .voip-sidebar-submenu .menu-label { gap:10px; }
[data-voip-nav] .voip-sidebar-submenu .menu-icon.small,
[data-voip-nav] .voip-sidebar-submenu .menu-icon.small svg { width:20px; height:20px; }
body.workspace-selected [data-voip-nav] { border-bottom-color:rgba(174,195,221,.16); }
@media(prefers-reduced-motion:reduce) { [data-voip-nav] .voip-sidebar-submenu { transition:none; } }

/* Home activity comparison: removable as one row, original cards stay below. */
.home-activity-comparison { display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,3fr);gap:18px; }
.home-activity-comparison .home-panel { box-shadow:0 1px 2px var(--home-shadow); }
.home-activity-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:18px 22px;box-sizing:border-box; }
.home-activity-heading h2 { margin:0;color:var(--home-heading);font-size:17px;font-weight:650; }
.home-activity-tabs { display:flex;gap:4px;padding:4px;background:var(--home-surface-inset);border:1px solid var(--home-divider);border-radius:9px; }
.home-activity-tabs button { display:flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--home-muted-strong);border-radius:6px;padding:9px 12px;font:inherit;font-size:14px;font-weight:550;cursor:pointer; }
.home-activity-tabs button[aria-pressed="true"] { background:var(--home-surface);color:var(--home-heading);box-shadow:0 1px 4px var(--home-shadow); }
.home-activity-tabs button span { font-size:12px;font-variant-numeric:tabular-nums;opacity:.75; }
.home-activity-tabs button:focus-visible,.home-credit-manage:focus-visible { outline:2px solid var(--home-accent);outline-offset:2px; }
.home-activity-headline { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px 20px; }
.home-activity-headline>div { display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; }
.home-activity-headline>div>strong { color:var(--home-heading);font-size:36px;font-weight:650;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums; }
.home-activity-headline>div>span { color:var(--home-muted-strong);font-size:14px; }
.home-activity-headline p { display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0;font-size:12px;color:var(--home-muted); }
.home-activity-headline p>strong { font-size:14px;font-weight:600;color:var(--home-text); }
.home-activity-headline p>strong.is-positive { color:var(--home-accent); }
.home-activity-headline p>strong.is-negative { color:#bb4852; }
.home-activity-comparison .home-activity-legend { justify-content:flex-end;padding:0 24px 4px;font-size:12px; }
.home-activity-comparison .home-activity-plot { margin:0 24px 22px;padding-top:16px;border:0;background:transparent;min-height:244px; }
.home-activity-comparison .home-chart-plot { height:236px; }
.home-activity-comparison .home-chart-y,.home-activity-comparison .home-chart-days { font-size:11px; }
.home-credits-unified { display:flex;flex-direction:column; }
.home-credit-period { font-size:12px;color:var(--home-muted); }
.home-credit-compact { margin:0 22px;padding:15px 0 20px; }
.home-credit-compact + .home-credit-compact { border-top:1px solid var(--home-divider);padding-top:22px; }
.home-credit-title { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.home-credit-compact h3 { margin:0;color:var(--home-text);font-size:14px;font-weight:600; }
.home-credit-available { display:flex;align-items:baseline;gap:8px;margin:12px 0 15px;font-size:28px;line-height:1.1;font-weight:650;letter-spacing:-.5px;color:var(--home-heading);font-variant-numeric:tabular-nums; }
.home-credit-available span { font-size:13px;font-weight:400;letter-spacing:0;color:var(--home-muted-strong); }
.home-activity-comparison .home-credit-track { margin:0;height:4px;border-radius:4px; }
.home-credit-caption,.home-credit-extra { display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:12px;color:var(--home-muted-strong);margin-top:9px; }
.home-credit-extra { color:var(--home-muted);margin-top:12px; }
.home-activity-sample { font-size:10px;font-weight:400;color:var(--home-muted);letter-spacing:0; }
.home-credit-manage { display:flex;align-items:center;justify-content:space-between;margin:auto 0 0;padding:16px 22px;border:0;border-top:1px solid var(--home-divider);background:transparent;color:var(--home-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left; }
.home-credit-manage svg { width:16px;height:16px; }
.home-credit-manage:hover { background:var(--home-surface-subtle); }
@media(max-width:1100px) { .home-activity-comparison { grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); } .home-activity-heading {flex-wrap:wrap;} .home-activity-headline {align-items:flex-start;} }
@media(max-width:780px) { .home-activity-comparison {grid-template-columns:1fr;} .home-credits-unified {display:grid;grid-template-columns:1fr 1fr;} .home-credits-unified>.home-activity-heading,.home-credit-manage {grid-column:1/-1;} .home-credit-compact + .home-credit-compact {border-top:0;padding-top:15px;} }
@media(max-width:480px) { .home-activity-heading {padding:16px;} .home-activity-headline {padding:12px 16px;flex-wrap:wrap;} .home-activity-headline p {align-items:flex-start;} .home-activity-comparison .home-activity-plot {margin-inline:12px;} .home-credits-unified {display:flex;} .home-credit-compact + .home-credit-compact {border-top:1px solid var(--home-divider);} }

/* Stronger hierarchy for the home comparison layout. */
.home-activity-comparison { grid-template-columns:minmax(0,7fr) minmax(350px,3fr); }
.home-activity-comparison .home-activity-heading {min-height:86px;padding:20px 24px;}
.home-activity-heading h2 {font-size:19px;font-weight:650;}
.home-activity-tabs {padding:5px;gap:5px;background:var(--home-selector-active);border-color:var(--home-border);border-radius:12px;}
.home-activity-tabs button {min-height:44px;padding:10px 15px;gap:9px;font-size:15px;font-weight:600;color:var(--home-heading);transition:background .16s,color .16s;}
.home-activity-tabs button svg {width:18px;height:18px;}
.home-activity-tabs button span {font-size:13px;opacity:1;padding:2px 6px;border-radius:4px;background:var(--home-surface);color:var(--home-text);}
.home-activity-tabs button[aria-pressed="true"] {background:#174e6b;color:white;box-shadow:0 2px 5px #12354d22;}
.home-activity-tabs button[aria-pressed="true"] span {background:#ffffff24;color:white;}
.home-activity-tabs button[aria-pressed="false"]:hover {background:var(--home-surface);}
.home-activity-headline {padding-top:20px;padding-bottom:26px;}
.home-activity-headline>div>strong {font-size:42px;}
.home-activity-headline>div>span {font-size:15px;color:var(--home-text);}
.home-activity-headline p {font-size:13px;color:var(--home-muted-strong);}
.home-activity-headline p>strong {padding:5px 9px;border-radius:6px;background:var(--home-accent-soft);font-size:15px;}
.home-activity-comparison .home-activity-legend {font-size:13px;color:var(--home-text);gap:18px;}
.home-activity-comparison .home-activity-plot {min-height:260px;}
.home-activity-comparison .home-chart-plot {height:250px;}
.home-credits-unified {background:var(--home-surface-subtle);}
.home-activity-comparison .home-credits-unified > .home-activity-heading {min-height:58px;padding:16px 24px;}
.home-credit-period {font-size:13px;color:var(--home-muted-strong);}
.home-credit-compact {margin:0 22px 16px;padding:25px 18px;border:1px solid var(--home-border);border-radius:10px;background:var(--home-surface);border-left:3px solid #267c91;}
.home-credit-compact + .home-credit-compact {padding:25px 18px;border-top:1px solid var(--home-border);border-left-color:#6566a4;}
.home-credit-title h3 {display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650;}
.home-credit-symbol {font-size:23px;line-height:1;color:#267c91;}
.is-copilot .home-credit-symbol {color:#6566a4;}
.home-credit-available {display:flex;flex-direction:column;gap:5px;font-size:36px;font-weight:650;margin:16px 0 20px;}
.home-credit-available span {font-size:14px;color:var(--home-text);}
.home-credit-usage {display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--home-muted-strong);margin-bottom:10px;}
.home-credit-usage strong {font-weight:650;color:var(--home-heading);}
.home-activity-comparison .home-credit-track {height:6px;background:var(--home-border);overflow:hidden;}
.home-activity-comparison .home-credit-track>span {background:#267c91;}
.is-copilot .home-credit-track>span {background:#6566a4;}
.home-credit-extra {border-top:1px solid var(--home-divider);padding-top:13px;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;color:var(--home-muted-strong);}
.home-credit-extra>span {display:flex;flex-direction:column;gap:5px;}
.home-credit-extra strong {font-size:14px;font-weight:600;color:var(--home-heading);}
.home-activity-sample {font-size:11px;color:var(--home-muted-strong);}
.home-credit-manage {margin:0 22px 18px;padding:12px 14px;border:1px solid var(--home-border);border-radius:7px;background:var(--home-surface);font-size:14px;color:var(--home-heading);}
@media(max-width:1100px) {.home-activity-comparison {grid-template-columns:minmax(0,1.6fr) minmax(330px,1fr);}}
@media(max-width:780px) {.home-activity-comparison {grid-template-columns:1fr;}.home-credit-compact {margin-right:10px;}.home-credit-compact+.home-credit-compact {margin-left:10px;margin-right:22px;}}
@media(max-width:480px) {.home-activity-tabs {width:100%;}.home-activity-tabs button {flex:1;justify-content:center;padding-inline:8px;}.home-credit-compact,.home-credit-compact+.home-credit-compact {margin:0 16px 16px;}.home-credit-manage {margin-inline:16px;}}
@media(prefers-reduced-motion:reduce) {.home-activity-tabs button {transition:none;}}


/* Portal tools use the standard sidebar links, grouped into visible sections. */
[data-voip-nav],[data-copilot-nav],.console-dev-section{margin-top:12px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--shell-border);gap:4px}
body.workspace-selected [data-voip-nav],body.workspace-selected [data-copilot-nav],body.workspace-selected .console-dev-section{border-bottom-color:var(--sidebar-line,rgba(255,255,255,.1))}
.console-section-links{list-style:none;display:flex;flex-direction:column;gap:4px;padding:0;margin:0}
.console-section-links .menu-label{justify-content:flex-start}

/* The saved theme is applied in the document head, before the loader paints. */
html[data-dashboard-theme="dark"] .app-loader { background: #111214; color-scheme: dark; }
html[data-dashboard-theme="dark"] .app-loader-text { color: #e7e8e9; }
html[data-dashboard-theme="dark"] .app-loader-progress { background: #303338; }
html[data-dashboard-theme="dark"] .app-loader-progress > span { background: #6c94ba; }

/* All sidebar section labels share the Navigation/Portal typography. */
.sidebar-section-title,body.workspace-selected .sidebar-section-title{font-size:13px}
body.workspace-selected .console-section-heading{margin-top:8px}