/* Palette aligned with the tellmachines.com website tokens (petrol/cyan). */
:root {
  --connection-flow: #1f7ba8;
  --connection-delivery: #2f9e59;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Fira Mono", "Source Code Pro", monospace;
  --bg: #f4f9fb;
  --bg-2: #e9f1f6;
  --bg-glow-1: #cfe9f3;
  --bg-glow-2: #e6f4f9;
  --surface: #ffffff;
  --surface-2: #eff6fa;
  --text: #132029;
  --muted: #566b78;
  --border: #d9e4ec;
  --accent: #0c7792;
  --accent-strong: #095e74;
  --accent-soft: #deedf4;
  --accent-focus: rgba(12, 119, 146, 0.25);
  --accent-shadow: rgba(9, 94, 116, 0.22);
  --danger: #c73f3f;
  --warning: #d68416;
  --shadow: 0 16px 44px rgba(4, 29, 43, 0.13);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

/* Superadmin billing and unit-economics console. */
.billing-admin {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #f6f8fb;
  color: #172033;
}


.billing-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #dfe5ee;
}

.billing-admin-header h2,
.billing-section-head h3,
.billing-plan-card h3 {
  margin: 0;
}

.billing-admin-header p {
  margin: 0.2rem 0 0;
}

.billing-admin-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.billing-admin-nav {
  display: flex;
  gap: 0.35rem;
  padding: 0.65rem 1.35rem 0;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #dfe5ee;
}

.billing-admin-nav button {
  min-width: max-content;
  padding: 0.72rem 0.9rem;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #5e6b80;
  text-align: left;
  font-weight: 650;
  box-shadow: none;
}

.billing-admin-nav button:hover,
.billing-admin-nav button.is-active {
  background: #eef6f8;
  color: #095e74;
  transform: none;
}

.billing-admin-nav button.is-active {
  box-shadow: inset 0 -3px #0c7792;
}

.billing-admin-body {
  overflow: auto;
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 2rem;
}

.billing-view-stack {
  display: grid;
  gap: 1rem;
  max-width: 1560px;
  margin: 0 auto;
}

.billing-view-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.billing-view-header h3,
.billing-view-header p {
  margin: 0;
}

.billing-view-header p {
  margin-top: 0.2rem;
}

.billing-filter-bar {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  background: #fff;
}

.billing-filter-bar label {
  display: grid;
  gap: 0.3rem;
  min-width: 145px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #57647a;
}

.billing-filter-bar select,
.billing-filter-bar input,
.billing-user-row select {
  min-height: 38px;
}

.billing-presets {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  padding-bottom: 1px;
}

.billing-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 0.9rem;
  margin: 0;
}

.billing-kpis article,
.billing-panel,
.billing-plan-card,
.billing-plan-form,
.billing-user-row {
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 15px rgb(31 43 68 / 5%);
}

.billing-kpis article {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
}

.billing-kpis span,
.billing-kpis small,
.billing-plan-code {
  color: #67748a;
}

.billing-kpis strong {
  font-size: 1.55rem;
}

.billing-kpis article.positive strong,
.money-positive {
  color: #087a52;
}

.billing-kpis article.negative strong,
.money-negative {
  color: #bd2c42;
}

.billing-panel,
.billing-plan-form {
  padding: 1rem;
}

.billing-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.billing-section-head p {
  margin: 0.25rem 0 0;
}

.billing-chart-wrap {
  overflow-x: auto;
}

.billing-chart {
  display: block;
  min-width: 680px;
  width: 100%;
  max-height: 320px;
}

.billing-chart-grid line {
  stroke: #e4e9f1;
}

.billing-chart text {
  fill: #637087;
  font-size: 12px;
}

.billing-chart-income {
  fill: #20a879;
}

.billing-chart-expense {
  fill: #ee8c55;
}

.billing-chart-legend {
  display: flex;
  justify-content: center;
  gap: 1rem;
  color: #5b687e;
}

.billing-chart-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.35rem;
  border-radius: 2px;
}

.billing-chart-legend .income { background: #20a879; }
.billing-chart-legend .expense { background: #ee8c55; }

.billing-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 295px);
}

.billing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
  font-size: 0.82rem;
}

.billing-table th,
.billing-table td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid #e7ebf2;
  text-align: right;
  vertical-align: top;
}

.billing-table th:first-child,
.billing-table td:first-child,
.billing-table th:nth-child(2),
.billing-table td:nth-child(2),
.billing-table th:nth-child(3),
.billing-table td:nth-child(3) {
  text-align: left;
}

.billing-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f6f8fb;
}

.billing-table tfoot th {
  position: sticky;
  bottom: 0;
  background: #edf2f7;
  border-bottom: 0;
}

.billing-table td small {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #758198;
}

.billing-table .billing-number {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.billing-empty {
  padding: 3rem 1rem;
  color: #6e7b91;
  text-align: center;
}

.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.billing-plan-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-width: 0;
  padding: 1.15rem;
}

.billing-plan-card.inactive {
  opacity: 0.65;
}

.billing-plan-card-head {
  display: grid;
  gap: 0.85rem;
}

.billing-plan-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
}

.billing-plan-title-row h3 {
  margin-top: 0.15rem;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.15;
}

.billing-plan-code {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.billing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.billing-plan-price strong {
  color: #142033;
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1;
}

.billing-plan-price span {
  color: #67748a;
  font-size: 0.8rem;
  font-weight: 650;
}

.billing-plan-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0;
  margin: 0;
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  background: #fbfcfe;
  overflow: hidden;
}

.billing-plan-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid #e7ebf2;
}

.billing-plan-detail:nth-child(odd) {
  border-right: 1px solid #e7ebf2;
}

.billing-plan-detail dt {
  min-width: 0;
  color: #65728a;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.3;
}

.billing-plan-detail dd {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: #1f2a3d;
  font-size: 0.76rem;
  font-weight: 750;
  text-align: right;
  overflow-wrap: anywhere;
}

.billing-plan-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.billing-plan-card-footer small {
  color: #718096;
  font-size: 0.72rem;
}

.billing-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 0.9rem;
}

.billing-editor-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.billing-editor-group {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid #e1e7ef;
  border-radius: 10px;
  background: #fafcfe;
}

.billing-editor-group legend {
  padding: 0 0.35rem;
  color: #27344a;
  font-size: 0.84rem;
  font-weight: 750;
}

.billing-editor-group label {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  color: #526078;
  font-size: 0.82rem;
  font-weight: 700;
}

.billing-editor-group .wide,
.billing-form-wide {
  grid-column: 1 / -1;
}

.billing-check-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.billing-check-grid label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.4rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: #fff;
  font-weight: 600;
}

.billing-check-grid input {
  width: auto;
}

.billing-field-help {
  color: #728097;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}

.billing-status-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #ccd7e5;
  background: #f5f8fb;
  color: #48566d;
  font-size: 0.72rem;
  font-weight: 700;
}

.billing-status-badge.good { border-color: #9dccb5; background: #edf9f2; color: #116340; }
.billing-status-badge.warn { border-color: #dfc77f; background: #fff8e3; color: #755700; }
.billing-status-badge.bad { border-color: #e2aaa9; background: #fff1f1; color: #8b2d2d; }

.billing-customer-cell {
  display: grid;
  gap: 0.12rem;
}

.billing-customer-cell small {
  max-width: none !important;
}

.billing-reference {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #6d7a8f;
}

.billing-form-grid label {
  display: grid;
  gap: 0.35rem;
  color: #526078;
  font-size: 0.82rem;
  font-weight: 700;
}

.billing-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.billing-user-list {
  display: grid;
  gap: 0.65rem;
}

.billing-user-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 280px) auto auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
}

.billing-user-row > div {
  display: grid;
  gap: 0.2rem;
}

.billing-user-row > label {
  display: grid;
  gap: 0.3rem;
  color: #57647a;
  font-size: 0.76rem;
  font-weight: 700;
}

.billing-user-row span {
  color: #748096;
  font-size: 0.78rem;
}

body.billing-admin-open {
  overflow: hidden;
}

.call-history-toolbar-button {
  position: relative;
  min-width: max-content;
  white-space: nowrap;
}

.call-history-unread {
  position: absolute;
  top: -0.5rem;
  right: -0.45rem;
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  padding: 0 0.3rem;
  background: #d92d20;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(112, 18, 18, 0.3);
  pointer-events: none;
}

.call-history-summary-processing {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.call-history-summary-spinner {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--muted) 28%, transparent);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: call-history-summary-spin 800ms linear infinite;
}

.knowledge-merge-card {
  padding: 1.5rem;
}

.knowledge-merge-content {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.knowledge-merge-content h3,
.knowledge-merge-content p {
  margin: 0;
}

.knowledge-merge-content p {
  margin-top: 0.35rem;
}

@keyframes call-history-summary-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .call-history-summary-spinner { animation: none; }
}

#call-history-modal {
  padding: clamp(0.5rem, 2vw, 1.25rem);
}

.modal-card.modal-xlarge.call-history-card {
  position: relative;
  width: min(1280px, calc(100vw - 2rem));
  height: min(840px, calc(100vh - 2rem));
  height: min(840px, calc(100dvh - 2rem));
  min-width: min(760px, calc(100vw - 1rem));
  min-height: min(520px, calc(100vh - 1rem));
  min-height: min(520px, calc(100dvh - 1rem));
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - 1rem);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "header"
    "filters"
    "content"
    "footer";
  resize: both;
}

.modal-card.modal-xlarge.call-history-card::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 12px;
  height: 12px;
  background: repeating-linear-gradient(135deg, transparent 0 3px, #69806c 3px 4px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.call-history-card .modal-header > div {
  min-width: 0;
}

.call-history-card > .modal-header {
  grid-area: header;
}

.call-history-back,
.call-history-filter-toggle {
  display: none;
}

.call-history-filter-toggle {
  grid-area: filter-toggle;
}

.call-history-subtitle {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.84rem;
}

.call-history-filters {
  grid-area: filters;
  display: grid;
  grid-template-columns: minmax(135px, 0.8fr) minmax(135px, 0.8fr) minmax(155px, 1fr) minmax(190px, 1.25fr) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.call-history-filters label {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.call-history-filters input,
.call-history-filters select,
.call-history-filters button {
  min-height: 2.5rem;
}

.call-history-filter-actions {
  display: flex;
  gap: 0.45rem;
}

.call-history-layout {
  grid-area: content;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(17.5rem, 24vw, 21.25rem) minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
}

.call-history-list-pane,
.call-history-detail {
  min-width: 0;
  min-height: 0;
}

.call-history-list-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: #f8fbf6;
}

.call-history-detail {
  overflow: auto;
  padding: 1rem;
  overscroll-behavior: contain;
}

.call-history-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 0.7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#call-history-load-more {
  flex: 0 0 auto;
  margin: 0 0.7rem 0.7rem;
}

.call-history-row {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 0.3rem;
  justify-content: stretch;
  justify-items: stretch;
  text-align: left;
  padding: 0.58rem 0.65rem;
  color: inherit;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
}

.call-history-row-main {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
}

.call-history-row-party {
  min-width: 0;
  display: block;
  text-align: left;
}

.call-history-row-party small {
  display: block;
  margin-bottom: 0.05rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1;
}

.call-history-row-party strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-history-row-status {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  border: 1px solid #bed2bc;
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
  background: #f4f9fb;
  color: #38513b;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-history-row-reason {
  width: 100%;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: left;
}

.call-history-row-meta {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-align: left;
}

.call-history-row-meta time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-history-row-meta > span {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.call-history-row:hover,
.call-history-row.is-active {
  border-color: var(--accent-strong);
  background: #edf8f4;
  filter: none;
}

.call-history-summary,
.call-history-section {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem;
  margin-bottom: 0.8rem;
  background: #fff;
}

.call-history-summary h4,
.call-history-section h4 {
  margin: 0 0 0.55rem;
}

.call-history-summary p,
.call-history-section p {
  overflow-wrap: anywhere;
}

.call-history-personal-data {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.call-history-personal-data h5 {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
}

.call-history-personal-data dl {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.call-history-personal-data dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
  gap: 0.65rem;
}

.call-history-personal-data dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.call-history-personal-data dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.call-history-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}

.call-history-facts div {
  min-width: 0;
  padding: 0.65rem;
  border-radius: 8px;
  background: #f4f7f2;
}

.call-history-facts .call-history-fact-wide {
  grid-column: 1 / -1;
}

.call-history-facts span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

.call-history-facts strong {
  display: block;
  overflow-wrap: anywhere;
}

.call-timeline {
  min-width: 0;
  display: grid;
  gap: 0.65rem;
}

.call-timeline-entry {
  min-width: 0;
  position: relative;
  padding: 0 0 0.1rem 1.1rem;
  border-left: 2px solid #b7c9b5;
}

.call-timeline-entry::before {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #638a65;
  left: -0.35rem;
  top: 0.25rem;
}

.call-timeline-entry header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.55rem;
}

.call-timeline-entry header strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.call-timeline-entry time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.call-timeline-entry p {
  margin: 0.35rem 0 0;
  white-space: pre-wrap;
}

.call-timeline-entry pre {
  max-width: 100%;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  background: #f4f7f2;
  padding: 0.55rem;
  border-radius: 6px;
}

.call-history-footer {
  grid-area: footer;
  min-height: 3rem;
  align-content: center;
  padding: 0.55rem 1rem;
}

@media (max-width: 900px) {
  .call-history-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-history-filter-actions {
    grid-column: 1 / -1;
  }

  .call-history-filter-actions button {
    flex: 1 1 0;
    width: 100%;
  }

  .modal-card.modal-xlarge.call-history-card {
    resize: none;
  }

  .modal-card.modal-xlarge.call-history-card::after {
    display: none;
  }

  .call-history-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(170px, 0.75fr) minmax(0, 1.25fr);
  }

  .call-history-list-pane {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .call-history-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  #call-history-modal {
    padding: 0;
  }

  .modal-card.modal-xlarge.call-history-card {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header"
      "filter-toggle"
      "filters"
      "content"
      "footer";
  }

  .call-history-card .modal-header {
    flex: 0 0 auto;
  }

  .call-history-card .modal-header > div {
    flex: 1 1 auto;
  }

  .call-history-card.showing-detail .call-history-back,
  .call-history-filter-toggle {
    display: inline-flex;
  }

  .call-history-filter-toggle {
    width: calc(100% - 1.5rem);
    justify-content: space-between;
    margin: 0.65rem 0.75rem;
  }

  .call-history-filter-toggle::after {
    content: "+";
    font-size: 1.1rem;
    line-height: 1;
  }

  .call-history-filter-toggle[aria-expanded="true"]::after {
    content: "−";
  }

  .call-history-card.filters-collapsed .call-history-filters {
    display: none;
  }

  .call-history-filters {
    grid-template-columns: minmax(0, 1fr);
    max-height: min(52vh, 28rem);
    overflow-y: auto;
  }

  .call-history-layout {
    grid-template-rows: minmax(0, 1fr);
  }

  .call-history-detail {
    display: none;
  }

  .call-history-card.showing-detail .call-history-list-pane {
    display: none;
  }

  .call-history-card.showing-detail .call-history-detail {
    display: block;
  }

  .call-history-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .call-history-personal-data dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .call-timeline-entry header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.1rem;
  }
}

@media (max-width: 900px) {
  .billing-admin-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .billing-admin-nav { flex-direction: row; overflow-x: auto; padding: 0.55rem; }
  .billing-admin-nav button { width: auto; white-space: nowrap; }
  .billing-kpis { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .billing-form-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .billing-editor-groups { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .billing-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .billing-admin-header { padding: 0.8rem; }
  .billing-admin-body { padding: 0.7rem; }
  .billing-kpis,
  .billing-form-grid,
  .billing-plan-grid,
  .billing-editor-group,
  .billing-check-grid { grid-template-columns: 1fr; }
  .billing-user-row { grid-template-columns: 1fr; }
  .billing-plan-detail-list { grid-template-columns: 1fr; }
  .billing-plan-detail:nth-child(odd) { border-right: 0; }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(1200px 520px at 4% -12%, var(--bg-glow-1) 0%, transparent 62%),
    radial-gradient(920px 460px at 100% 0%, var(--bg-glow-2) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Environments keep the shared website palette; only the badge marks them. */
body.env-dev .portal-env-badge {
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #ecfccb;
  color: #3f6212;
}

body.env-prev .portal-env-badge {
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #ffedd5;
  color: #b91c1c;
}

body.wait-cursor,
body.wait-cursor * {
  cursor: wait !important;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

.masked-secret-input {
  -webkit-text-security: disc;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.58rem 0.9rem;
  background: var(--accent-strong);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

button.secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

a.button-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.58rem 0.9rem;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

button.accent {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
}

button.danger {
  background: linear-gradient(180deg, #e26a6a 0%, var(--danger) 100%);
}

button.small {
  padding: 0.36rem 0.6rem;
  font-size: 0.82rem;
}

button.icon-only {
  min-width: 2.4rem;
  padding-inline: 0.64rem;
}

.button-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.button-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.icon-only .button-icon {
  width: 1.05rem;
  height: 1.05rem;
}

label {
  display: grid;
  gap: 0.36rem;
  font-size: 0.9rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.56rem 0.64rem;
}

input::placeholder,
textarea::placeholder {
  color: #9fadb7;
  opacity: 0.62;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

textarea {
  resize: vertical;
  min-height: 96px;
}

.infodesk-layout {
  display: grid;
  gap: 0.68rem;
}

.infodesk-crawl-inline {
  border-style: solid;
  margin-top: 0.12rem;
  width: 100%;
  box-sizing: border-box;
  gap: 0.38rem;
}

.infodesk-crawl-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.infodesk-crawl-header .helper-title {
  margin: 0;
}

.infodesk-crawl-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.pricing-knowledge-import {
  padding: 0.72rem 0.8rem;
}

.pricing-knowledge-import-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.pricing-knowledge-import-actions {
  flex-wrap: nowrap;
}

.pricing-knowledge-import-actions button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pricing-knowledge-import .infodesk-crawl-status:empty {
  display: none;
}

.knowledge-import-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.knowledge-import-url {
  flex: 1 1 20rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.knowledge-import-url > input {
  flex: 1;
  min-width: 0;
}

.knowledge-import-row .infodesk-crawl-actions {
  margin-left: 0;
}

.infodesk-crawl-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}

.infodesk-crawl-progress-row #crawl-progress-label {
  min-width: 3ch;
  line-height: 1;
  text-align: right;
}

.infodesk-crawl-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  border: 1px solid #c2d9e3;
  background: #eaf4f8;
  overflow: hidden;
}

.infodesk-crawl-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0c7792 0%, #58aec2 100%);
  transition: width 180ms ease;
}

.infodesk-crawl-progress.is-indeterminate .infodesk-crawl-progress-fill {
  background: linear-gradient(90deg, #0c7792 0%, #7fc9da 50%, #0c7792 100%);
  background-size: 180% 100%;
  animation: infodesk-crawl-progress-pulse 1.15s linear infinite;
}

.infodesk-crawl-status {
  margin: 0;
  width: 100%;
  text-align: center;
  min-height: 1.3em;
  max-height: 1.3em;
  font-size: 0.76rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The status line reports on the bar above it, so it sits right under it. */
.infodesk-crawl-progress-row + .infodesk-crawl-status {
  margin-top: -0.5rem;
}

@keyframes infodesk-crawl-progress-pulse {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.infodesk-knowledge-textarea {
  min-height: 220px;
}

.infodesk-live-state-block {
  display: grid;
  gap: 0.86rem;
}

.infodesk-live-state-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.68rem;
}

.infodesk-live-state-auth-toggle {
  justify-self: start;
}

.infodesk-open-hours-panel {
  container: business-hours / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  min-width: 0;
  max-width: 980px;
}

.infodesk-open-hours-panel h4 {
  margin: 0 0 0.25rem;
  font-size: 0.94rem;
}

.infodesk-open-hours-panel p {
  margin: 0;
}

.infodesk-open-hours-weekly {
  overflow: hidden;
  margin-top: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.infodesk-open-hours-day-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0.8rem;
  min-height: 3.25rem;
  padding: 0.65rem 0.78rem;
  border-top: 1px solid var(--border);
  align-items: start;
}

.infodesk-open-hours-day-row:first-child {
  border-top: 0;
}

.infodesk-open-hours-day-toggle {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  min-height: 2.1rem;
}

.switch-control {
  position: relative;
  display: inline-flex;
  width: 2.55rem;
  height: 1.45rem;
  flex: 0 0 auto;
}

.switch-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-control span {
  width: 100%;
  border-radius: 999px;
  background: #dfe7df;
  transition: background 140ms ease;
}

.switch-control span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(28 49 30 / 24%);
  transition: transform 140ms ease;
}

.switch-control input:checked + span {
  background: var(--accent-strong);
}

.switch-control input:checked + span::after {
  transform: translateX(1.1rem);
}

.switch-control input:focus-visible + span {
  outline: 3px solid rgb(55 116 76 / 22%);
  outline-offset: 2px;
}

.infodesk-open-hours-day-content {
  display: grid;
  min-width: 0;
  gap: 0.46rem;
  justify-items: start;
}

.infodesk-open-hours-closed {
  min-height: 2.1rem;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.infodesk-open-hours-period {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 2rem;
  width: 100%;
  max-width: 288px;
  min-width: 0;
  gap: 0.4rem;
  align-items: center;
}

.infodesk-open-hours-period input[type="time"] {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.infodesk-open-hours-period input[aria-invalid="true"] {
  border-color: var(--danger);
  outline-color: var(--danger);
}

.infodesk-open-hours-panel .text-button,
.infodesk-open-hours-panel .icon-button {
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
}

.infodesk-open-hours-panel .text-button {
  padding: 0.24rem 0.15rem;
}

.infodesk-open-hours-panel .icon-button {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--muted);
  font-size: 1.35rem;
}

.infodesk-open-hours-timezone {
  max-width: 620px;
}

.infodesk-open-hours-exceptions {
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}

.infodesk-open-hours-exceptions-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.infodesk-open-hours-filter {
  display: inline-flex;
  margin: 0.9rem 0 0.72rem;
  padding: 0.18rem;
  border-radius: 999px;
  background: #e8f2e6;
}

.infodesk-open-hours-filter button {
  border: 0;
  border-radius: 999px;
  padding: 0.36rem 0.7rem;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.infodesk-open-hours-filter button.is-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 4px rgb(31 55 34 / 14%);
}

.infodesk-open-hours-exception-head,
.infodesk-open-hours-exception-row {
  display: grid;
  grid-template-columns: 180px minmax(180px, 1fr) 100px 2rem;
  gap: 0.62rem;
  align-items: center;
}

.infodesk-open-hours-exception-head {
  grid-template-columns: 180px minmax(180px, 1fr) 132px;
  padding: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.infodesk-open-hours-exception-row {
  padding: 0.55rem 0.5rem;
  border-top: 1px solid var(--border);
}

.infodesk-open-hours-exception-row:first-child {
  border-top: 0;
}

.infodesk-open-hours-exception-summary {
  color: var(--muted);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.infodesk-open-hours-exception-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  padding: 0.72rem;
  border-radius: var(--radius-sm);
  background: #f6f9fb;
  justify-items: start;
}

/* Embedded editors need to respond to their card, independently of viewport size. */
@container business-hours (max-width: 620px) {
  .infodesk-open-hours-day-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .infodesk-open-hours-exceptions-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .infodesk-open-hours-exception-head {
    display: none;
  }

  .infodesk-open-hours-exception-row {
    grid-template-columns: minmax(0, 1fr) 2rem;
  }

  .infodesk-open-hours-exception-row > input,
  .infodesk-open-hours-exception-summary,
  .infodesk-open-hours-exception-row > .text-button {
    grid-column: 1;
  }

  .infodesk-open-hours-exception-row > .icon-button {
    grid-column: 2;
    grid-row: 1;
  }
}

.infodesk-open-hours-empty {
  padding: 0.8rem 0.5rem;
  border-top: 1px solid var(--border);
}

.infodesk-ambient-audio-block {
  display: grid;
  gap: 0.86rem;
  max-width: 620px;
}

.infodesk-ambient-preview {
  width: 100%;
  min-height: 42px;
}

.infodesk-agent-block {
  display: grid;
  gap: 1rem;
  max-width: 980px;
}

.infodesk-pronunciation-panel {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 0.8rem;
  max-width: min(100%, 980px);
}

.infodesk-pronunciation-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}

.infodesk-pronunciation-help {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.infodesk-pronunciation-table {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.infodesk-pronunciation-heading,
.infodesk-pronunciation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.55rem 2.2rem;
  gap: 0.55rem;
  align-items: center;
}

.infodesk-pronunciation-heading {
  padding: 0 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.infodesk-pronunciation-rows {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.infodesk-pronunciation-row label {
  min-width: 0;
}

.infodesk-pronunciation-row input {
  min-height: 2.55rem;
  border-radius: 12px;
}

.infodesk-pronunciation-row input[aria-invalid="true"] {
  border-color: var(--danger);
  outline-color: var(--danger);
}

.infodesk-pronunciation-delete {
  width: 2.2rem;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--danger);
  box-shadow: none;
}

.infodesk-pronunciation-preview {
  width: 2.55rem;
  min-width: 2.55rem;
  height: 2.55rem;
  padding: 0;
}

.infodesk-pronunciation-preview-status {
  margin: 0;
}

.infodesk-pronunciation-delete:hover,
.infodesk-pronunciation-delete:focus-visible {
  border-color: #efb5b5;
  background: #fff4f4;
  filter: none;
  transform: none;
}

.infodesk-pronunciation-row.is-empty .infodesk-pronunciation-delete,
.infodesk-pronunciation-row.is-empty .infodesk-pronunciation-preview {
  visibility: hidden;
  pointer-events: none;
}

.infodesk-radio-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.infodesk-radio-fieldset legend {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.infodesk-radio-table {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.infodesk-radio-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.65fr) minmax(0, 1.35fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.55rem 0.68rem;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.infodesk-radio-row:first-child {
  border-top: 0;
}

.infodesk-radio-row:has(input[type="radio"]:checked) {
  background: #f3f8f2;
}

.infodesk-speaking-styles .infodesk-radio-row {
  grid-template-columns: minmax(0, 1fr);
}

.infodesk-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-weight: 600;
}

.infodesk-radio-option input {
  width: auto;
  flex: 0 0 auto;
}

.infodesk-inline-radio-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.infodesk-inline-radio-options .infodesk-radio-option {
  min-width: 9rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.infodesk-inline-radio-options .infodesk-radio-option:has(input:checked) {
  border-color: #87aa82;
  background: #f3f8f2;
}

.infodesk-form-of-address-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 0.55rem;
}

.infodesk-form-of-address-options .infodesk-radio-option {
  width: 100%;
  min-width: 0;
  min-height: 1.75rem;
}

.infodesk-radio-description {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.infodesk-voice-speed-grid {
  align-items: end;
}

.infodesk-voice-field {
  display: grid;
  gap: 0.38rem;
}

.infodesk-audio-preview-field {
  display: grid;
  gap: 0.38rem;
}

.infodesk-voice-preview-row,
.infodesk-audio-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.infodesk-voice-preview-button {
  min-width: 6.8rem;
  white-space: nowrap;
}

.infodesk-audio-preview-button {
  width: 28px;
  min-width: 28px;
  padding: 4px;
  justify-self: end;
}

.infodesk-voice-preview-status {
  display: block;
  min-height: 1.2em;
  margin-top: 0.38rem;
}

.infodesk-setting-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid #e8c270;
  border-radius: var(--radius-md);
  background: #fff9e8;
  color: #684a0b;
  line-height: 1.45;
}

.infodesk-ai-disclosure-notice {
  display: grid;
  gap: 0.28rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid #a7c4d8;
  border-left: 4px solid #397aa8;
  border-radius: var(--radius-md);
  background: #f1f8fd;
  color: #244e6a;
  font-size: 0.86rem;
  line-height: 1.45;
}

.infodesk-ai-disclosure-notice p {
  margin: 0;
}

.infodesk-range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem;
  gap: 0.72rem;
  align-items: center;
}

.infodesk-range-row input[type="range"] {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.infodesk-range-row output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.infodesk-range-row output.is-disabled {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
  font-size: 0.88rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.row.right {
  justify-content: flex-end;
}

.brand-mark {
  display: block;
  width: 56px;
  height: auto;
}

.provider-status {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem 1rem;
  background: #ffb454;
  color: #452300;
  border-bottom: 1px solid #bd6900;
  font-size: 0.9rem;
}

.provider-status[hidden] { display: none; }
.provider-status-item { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; }
.provider-status a { color: inherit; text-decoration: underline; font-weight: 600; }

.auth-shell {
  min-height: calc(100vh - var(--provider-status-height, 0px));
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto;
  place-items: center;
  position: relative;
  isolation: isolate;
  padding: 2rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: #041d2b;
}

.auth-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #041d2b;
}

.auth-background canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(460px, 96vw);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
  animation: fadeUp 320ms ease;
}

.auth-card header {
  display: grid;
  gap: 0.45rem;
}

.auth-footer {
  position: relative;
  z-index: 1;
  padding-top: 1.5rem;
  color: rgba(233, 246, 251, 0.74);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.auth-form-status:empty {
  display: none;
}

.auth-form [aria-invalid="true"] {
  border-color: var(--danger);
  outline-color: var(--danger);
}

.surface-access-panel {
  display: grid;
  gap: 0.62rem;
  padding: 0.9rem;
  border: 1px solid #b9d4cc;
  border-radius: var(--radius-md);
  background: #f1faf7;
}

.surface-access-panel h2,
.surface-access-panel p {
  margin: 0;
}

.surface-access-panel h2 {
  font-size: 1rem;
}

.surface-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.auth-form {
  display: grid;
  gap: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  background: #fff;
}

.auth-form h2 {
  font-size: 1rem;
}

.auth-verification-heading {
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

.auth-verification-symbol {
  display: inline-flex;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f7f5;
  color: var(--accent-strong);
}

.auth-verification-symbol svg,
.auth-method-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-login-account {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.3rem 0.62rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-method-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.auth-method-fieldset legend {
  margin-bottom: 0.42rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.auth-method-options {
  display: grid;
  gap: 0.48rem;
}

.auth-method-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.62rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.66rem;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.auth-method-option:hover {
  border-color: #8fb8c8;
  background: #f7fbfd;
}

.auth-method-option:has(input:checked) {
  border-color: var(--accent-strong);
  background: #eef8fa;
  box-shadow: 0 0 0 1px var(--accent-strong);
}

.auth-method-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-method-option input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  accent-color: var(--accent-strong);
}

.auth-method-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: #e7f1f6;
  color: #245d72;
}

.auth-method-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.auth-method-copy {
  min-width: 0;
}

.auth-method-copy strong {
  font-size: 0.9rem;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.checkbox-inline input {
  width: auto;
}

.switch-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.46rem;
  align-self: end;
  min-height: 2.44rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.component-publish-setting {
  display: grid;
  gap: 0.22rem;
  justify-items: end;
  align-self: end;
}

.switch-inline input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  width: 2.72rem;
  height: 1.48rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid #aebead;
  background: #dce5da;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.04rem;
  height: 1.04rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 42, 31, 0.22);
  transform: translateY(-50%);
  transition: transform 140ms ease;
}

.switch-inline input:checked + .switch-track {
  border-color: var(--accent-strong);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.switch-inline input:checked + .switch-track::after {
  transform: translate(1.2rem, -50%);
}

.switch-inline input:focus-visible + .switch-track {
  outline: 2px solid rgba(13, 148, 136, 0.44);
  outline-offset: 2px;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.live-transfer-destination-types {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.live-transfer-mode-choice,
.live-transfer-mode-section {
  display: grid;
}

.live-transfer-mode-choice {
  gap: 0.28rem;
}

.live-transfer-mode-section {
  gap: 0.68rem;
}

.live-transfer-manager-row {
  align-items: center;
}

.inline-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.widget-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 12rem));
  gap: 0.72rem;
  justify-content: start;
}

.widget-color-input {
  width: 5rem;
  height: 3rem;
  padding: 0.2rem;
  cursor: pointer;
}

.compact-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem;
}

.compact-fieldset legend {
  padding: 0 0.25rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
}

.answering-machine-section-heading,
.answering-machine-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.answering-machine-section-heading p {
  margin: 0.2rem 0 0;
}

.answering-machine-card-list {
  display: grid;
  gap: 0.8rem;
}

.answering-machine-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 94%, #d97706 6%);
}

.answering-machine-flags,
.answering-machine-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.answering-machine-condition {
  background: var(--surface);
}




.caller-field-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.86rem;
}

.caller-field-table th,
.caller-field-table td {
  padding: 0.42rem 0.35rem;
  border-top: 1px solid #dce6ed;
  text-align: left;
  vertical-align: middle;
}

.caller-field-table thead th {
  border-top: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.caller-field-table tbody th {
  font-weight: 700;
}

.caller-field-table tbody tr:first-child th,
.caller-field-table tbody tr:first-child td {
  border-top: 0;
}

.radio-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 1.5rem;
}

.radio-cell input {
  width: auto;
}

.quick-note-identification {
  display: grid;
  gap: 0.45rem;
}

.email-sender-editor {
  display: grid;
  gap: 1rem;
  max-width: 760px;
}

.email-sender-eyebrow {
  color: #6d28d9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-sender-account-summary {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.email-sender-account-summary.is-ready {
  border-color: #b9ddc4;
  background: #f2fbf5;
  color: #285c38;
}

.email-sender-choice {
  display: grid;
  gap: 0.62rem;
}

.email-communication-section-heading {
  display: grid;
  gap: 0.34rem;
}

.email-communication-section-heading h4 {
  margin: 0;
  color: var(--text);
}

.email-communication-section-heading p,
.email-communication-target-summary p,
.email-communication-warning p {
  margin: 0;
  color: var(--muted);
}

.email-communication-eyebrow {
  color: #6d28d9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-communication-account-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.email-communication-account-actions {
  display: flex;
  gap: 0.45rem;
  padding-bottom: 0.02rem;
}

.email-communication-account-actions button {
  white-space: nowrap;
}

.email-communication-account-panel {
  display: grid;
  gap: 0.78rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.email-communication-account-panel.is-ready {
  border-color: #b9ddc4;
  box-shadow: inset 3px 0 #4f9e6b;
}

.email-communication-account-panel.is-error {
  border-color: #e0a8a8;
  box-shadow: inset 3px 0 #c73f3f;
}

.email-communication-account-heading,
.email-communication-account-heading > div {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.email-communication-account-heading strong {
  overflow-wrap: anywhere;
}

.email-communication-connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.email-communication-connection-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.42rem 0.58rem;
  align-items: center;
  padding: 0.68rem;
  border: 1px solid #dce6ed;
  border-radius: var(--radius-sm);
  background: #f9fbfc;
}

.email-communication-connection-card > div {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.email-communication-connection-icon {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 900;
}

.email-communication-target-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f8fafc;
}

.email-communication-warning {
  display: grid;
  gap: 0.25rem;
  padding: 0.72rem;
  border: 1px solid #dfc57f;
  border-radius: var(--radius-sm);
  background: #fff8df;
  color: #815710;
}

.email-communication-flow-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid #ddd6fe;
  border-radius: var(--radius-md);
  background: #faf9ff;
}

.email-communication-flow-step {
  display: grid;
  gap: 0.2rem;
  min-height: 5.2rem;
  align-content: center;
  justify-items: center;
  padding: 0.65rem;
  border: 1px solid #e7e0fa;
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: center;
}

.email-communication-flow-step small {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 800;
}

.email-communication-flow-step span {
  color: var(--muted);
}

.email-communication-flow-arrow {
  color: #7c3aed;
  font-size: 1.3rem;
  font-weight: 900;
}

.email-communication-poll-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.email-communication-poll-fieldset legend {
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.email-communication-poll-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.email-communication-poll-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
  padding: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
}

.email-communication-poll-option:has(input:checked) {
  border-color: #8b5cf6;
  background: #f5f3ff;
  box-shadow: 0 0 0 1px #8b5cf6;
}

.email-communication-poll-option input {
  margin-top: 0.18rem;
}

.email-communication-poll-option span {
  display: grid;
  gap: 0.2rem;
}

.email-communication-poll-option small {
  color: var(--muted);
  font-weight: 400;
}

.email-account-connection-section {
  display: grid;
  gap: 0.48rem;
  min-width: 0;
}

.email-account-connection-section h5,
.email-account-connection-section p {
  margin: 0;
}

.email-account-host-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  gap: 0.55rem;
  align-items: end;
}

.email-account-host-fields > label {
  min-width: 0;
}

@media (max-width: 680px) {
  .email-sender-account-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .email-communication-account-picker,
  .email-communication-connection-grid,
  .email-communication-poll-grid {
    grid-template-columns: 1fr;
  }

  .email-communication-account-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .email-communication-flow-preview {
    grid-template-columns: 1fr;
  }

  .email-communication-flow-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

.portal-shell {
  height: calc(100vh - var(--provider-status-height, 0px));
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 0.5rem;
  row-gap: 0;
  overflow: hidden;
}


.portal-shell.support-mode-active {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}


.portal-shell.view-mode-easy {
  grid-template-rows: auto minmax(0, 1fr);
}

.portal-shell.view-mode-easy.support-mode-active {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.portal-shell.view-mode-easy .component-bar,
.portal-shell.view-mode-easy .studio-shell,
.portal-shell.view-mode-easy .toolbar-status,
.portal-shell.view-mode-easy .canvas-toolbar-control {
  display: none;
}

.portal-shell:not(.view-mode-easy) .easy-mode-overlay {
  display: none;
}

.portal-menu-area {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
}

.portal-status-message {
  width: 100%;
  padding: 0.25rem 1rem;
  background: #b42318;
  color: #fff;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.portal-status-message-content {
  min-width: 0;
  text-align: center;
}

.portal-status-message-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  cursor: pointer;
}

.portal-status-message-link:hover,
.portal-status-message-link:focus-visible {
  color: inherit;
  text-decoration-thickness: 2px;
}

.portal-status-message-dismiss {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.portal-status-message-dismiss:hover,
.portal-status-message-dismiss:focus-visible {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.portal-status-message-dismiss:hover {
  opacity: 0.8;
}

.portal-header,
.component-bar {
  border: 1px solid var(--border);
  border-radius: 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: var(--shadow);
}

.toolbar-status {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.portal-header {
  position: relative;
  z-index: 30;
  grid-template-areas: "brand commands account";
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  gap: 0.62rem 1rem;
  align-items: center;
  min-height: 76px;
  padding: 0.72rem 1rem 0.78rem;
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: 0 4px 24px rgba(4, 29, 43, 0.07);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.portal-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.62rem;
  color: #041d2b;
}

.portal-brand-mark {
  display: block;
  width: 44px;
  height: auto;
  flex: 0 0 auto;
}

.portal-brand-copy {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.portal-title-line {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.45rem;
  flex-wrap: wrap;
  line-height: 1;
}

.portal-brand-word {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.portal-brand-product {
  padding-left: 0.48rem;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-env-badge {
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.portal-build-version {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.whatsapp-test-panel {
  padding: 0.55rem 0.62rem;
}

.whatsapp-test-panel .field-action-row > button {
  align-self: end;
  white-space: nowrap;
}

.whatsapp-verification-panel {
  border-color: #bfdbfe;
  background: #f5f9ff;
}

.secret-numeric-input {
  -webkit-text-security: disc;
}

.portal-account {
  grid-area: account;
  position: relative;
  display: flex;
  gap: 0.28rem;
  justify-content: flex-end;
  align-items: center;
  justify-self: end;
  min-width: max-content;
}

.portal-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
  flex-wrap: nowrap;
}

.portal-command-menu {
  display: contents;
}

.portal-command-menu-toggle,
.mobile-button-label {
  display: none;
}

.profile-avatar {
  width: 2.45rem;
  height: 2.45rem;
  min-width: 2.45rem;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent-strong);
  box-shadow: 0 10px 40px rgba(55, 211, 240, 0.24);
  font-size: 0.86rem;
  letter-spacing: 0;
}

.profile-avatar:hover,
.profile-avatar:focus-visible {
  background: var(--accent-strong);
  box-shadow: 0 0 0 4px rgba(12, 119, 146, 0.14);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 0.52rem);
  right: 0;
  z-index: 35;
  width: min(260px, calc(100vw - 2rem));
  padding: 0.38rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 18px 42px rgba(11, 23, 13, 0.24);
  display: grid;
  gap: 0.18rem;
}

.profile-menu-user {
  padding: 0.54rem 0.6rem 0.62rem;
  border-bottom: 1px solid #e0eadf;
  margin-bottom: 0.18rem;
  display: grid;
  gap: 0.1rem;
  font-size: 0.82rem;
}

.profile-menu-user strong,
.profile-menu-user span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-user span {
  color: var(--muted);
}

.profile-menu button {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.48rem 0.58rem;
  font-size: 0.88rem;
}

.profile-menu button:hover,
.profile-menu button:focus-visible {
  background: #edf6ec;
  filter: none;
  transform: none;
}

.profile-menu .danger-menu-item {
  color: var(--danger);
}

.portal-manage-menu {
  position: relative;
}

.portal-manage-menu-list {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  display: grid;
  width: max-content;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 2rem));
  gap: 0.18rem;
  padding: 0.38rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 18px 42px rgba(11, 23, 13, 0.24);
}

.portal-manage-menu-list [role="separator"] {
  width: 100%;
  margin: 0.25rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.portal-manage-menu-list button {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  padding: 0.5rem 0.62rem;
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  white-space: nowrap;
}

.portal-manage-menu-list button:hover,
.portal-manage-menu-list button:focus-visible {
  background: #edf6ec;
  filter: none;
  transform: none;
}

.toolbar-group {
  display: flex;
  gap: 0.38rem;
  align-items: center;
  flex-wrap: wrap;
}

.portal-actions {
  justify-content: center;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.trial-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.42rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.trial-status-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.easy-mode-autosave-status {
  display: none;
  align-items: center;
  gap: 0.42rem;
  min-width: max-content;
  padding: 0.3rem 0.42rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

.portal-shell.view-mode-easy .easy-mode-autosave-status {
  display: inline-flex;
}

.portal-shell.view-mode-easy .portal-actions #save-workspace-btn {
  display: none;
}

.easy-mode-autosave-indicator {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 0.5rem;
  border-radius: 50%;
  background: #2f7d3b;
  box-shadow: 0 0 0 3px rgba(47, 125, 59, 0.1);
}

.easy-mode-autosave-status[data-state="saving"] .easy-mode-autosave-indicator {
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(12, 119, 146, 0.1);
  animation: easyModeAutosavePulse 900ms ease-in-out infinite alternate;
}

.easy-mode-autosave-status[data-state="unsaved"] .easy-mode-autosave-indicator {
  background: #c78512;
  box-shadow: 0 0 0 3px rgba(199, 133, 18, 0.1);
}

@keyframes easyModeAutosavePulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .easy-mode-autosave-status[data-state="saving"] .easy-mode-autosave-indicator {
    animation: none;
  }
}

.portal-shell.is-phone-assistant-onboarding #portal-command-menu-control,
.portal-shell.is-phone-assistant-onboarding #portal-manage-menu-control {
  display: none;
}

.portal-shell.is-phone-assistant-onboarding .easy-mode-header {
  display: none;
}

.portal-shell.is-direct-registration-onboarding .portal-mode-nav,
.portal-shell.is-direct-registration-onboarding #call-history-btn {
  display: none;
}

.portal-header .portal-actions > button,
.portal-header .portal-actions > .activate-workspace-control > button,
.portal-header .portal-admin-actions > button,
.portal-header .portal-admin-actions > .portal-manage-menu > button {
  min-height: 2.35rem;
  border-radius: 999px;
}

.portal-header .portal-actions > .icon-only {
  width: 2.35rem;
  min-width: 2.35rem;
  padding-inline: 0;
}

.portal-header #activate-workspace-btn {
  border-color: var(--accent-strong);
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(12, 119, 146, 0.2);
}

.activate-workspace-control {
  position: relative;
  display: inline-flex;
}

.activate-workspace-disabled-reason {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.48rem 0.62rem;
  border: 1px solid #cbd8df;
  border-radius: var(--radius-sm);
  background: #17242b;
  color: #fff;
  box-shadow: 0 10px 28px rgba(11, 23, 31, 0.22);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.2rem);
  transition: opacity 120ms ease, transform 120ms ease;
}

.activate-workspace-control[data-disabled-reason="true"]:hover .activate-workspace-disabled-reason,
.activate-workspace-control[data-disabled-reason="true"]:focus-visible .activate-workspace-disabled-reason,
.activate-workspace-control[data-disabled-reason="true"]:focus-within .activate-workspace-disabled-reason {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .activate-workspace-disabled-reason {
    transition: none;
  }
}

.portal-mode-nav {
  display: flex;
  justify-content: center;
  min-width: 0;
  flex: 0 0 auto;
}

.portal-command-row {
  grid-area: commands;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.studio-mode-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.18rem;
  border: 1px solid #d5e2ea;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 68%, var(--accent-soft));
}

.studio-mode-switcher button {
  min-height: 2.1rem;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.studio-mode-switcher button.is-active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: #fff;
  color: var(--accent-strong);
  box-shadow: 0 2px 8px rgba(4, 29, 43, 0.1);
}

.toolbar-group > label {
  min-width: 180px;
}

.toolbar-status {
  min-height: 52px;
  padding: 0.46rem 0.62rem;
  display: grid;
  gap: 0.22rem;
  align-content: center;
}

#workspace-status {
  font-weight: 600;
  font-size: 0.93rem;
}

.workspace-validation-details {
  display: grid;
  gap: 0.3rem;
  padding: 0.5rem 0.58rem;
  border: 1px solid #e0a8a8;
  border-left: 4px solid #c73f3f;
  border-radius: var(--radius-sm);
  background: #fff3f3;
  color: #7f1d1d;
  font-size: 0.84rem;
}

.workspace-validation-details ul {
  display: grid;
  gap: 0.18rem;
  margin: 0;
  padding-left: 1.05rem;
}

.workspace-validation-details button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  box-shadow: none;
}

.workspace-validation-details button:hover,
.workspace-validation-details button:focus-visible {
  filter: none;
  transform: none;
  color: #a51d1d;
}

.workspace-validation-details.has-notices {
  border-color: #d5c26f;
  border-left-color: #aa8500;
  background: #fff9e7;
  color: #6b5500;
}

.workspace-validation-details.has-notices button:hover,
.workspace-validation-details.has-notices button:focus-visible {
  color: #4f3f00;
}

.portal-shell.view-mode-easy .workspace-validation-details {
  display: none;
}

.toolbar-group button.secondary.is-active {
  border-color: #095e74;
  background: #e7f5ec;
  color: #1f4d32;
}

.component-bar {
  grid-area: palette;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.component-bar-head {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 74%, #fff);
}

.component-bar-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  letter-spacing: 0.015em;
}

.easy-mode-overlay {
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d5e2ea;
  background:
    radial-gradient(circle at 15% 10%, rgba(12, 119, 146, 0.10), transparent 28rem),
    radial-gradient(circle at 90% 90%, rgba(12, 119, 146, 0.06), transparent 30rem),
    #f4f9fb;
  box-shadow: var(--shadow);
}

.easy-mode-panel {
  width: min(100%, 72rem);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-inline: 1px solid #cfdfe8;
  border-radius: 0;
  background: #f4f7f9;
  box-shadow: 0 24px 70px rgba(4, 29, 43, 0.16);
}

/* Slim actions-only bar; it disappears entirely while no action is visible,
   so the guide content is the first thing on screen. */
.easy-mode-header {
  grid-row: 1;
  padding: 0.6rem clamp(1rem, 2vw, 1.45rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
}

.easy-mode-header:not(:has(button:not(.hidden))) {
  display: none;
}

.easy-mode-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.easy-mode-header-actions button {
  white-space: nowrap;
}

.easy-mode-content {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: #f4f7f9;
}

.easy-mode-navigator {
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: #f4f7f9;
}

.easy-mode-navigator-view {
  position: relative;
  width: min(100%, 52rem);
  min-height: 100%;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.75rem, 3vw, 1.5rem) 7rem;
}

.easy-mode-navigator-header {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.easy-mode-navigator-header:has([data-easy-back]) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.easy-mode-navigator-header h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easy-mode-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.easy-mode-back-arrow {
  font-size: 1.05em;
  line-height: 1;
}

.easy-mode-intro,
.easy-mode-group-help {
  margin: 0.25rem 0 1rem;
  color: var(--muted);
}

.easy-mode-settings-group {
  margin-top: 1.4rem;
}

.easy-mode-group-label {
  margin: 0 0 0.42rem 0.72rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.easy-mode-group-help {
  margin-left: 0.72rem;
  font-size: 0.84rem;
}

.easy-mode-setting-list,
.easy-mode-empty {
  overflow: visible;
  border: 1px solid #dce5ea;
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(4, 29, 43, 0.04);
}

.easy-mode-setting-row,
.easy-mode-row-main {
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.62rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.easy-mode-setting-list > :first-child,
.easy-mode-setting-list > :first-child .easy-mode-row-main {
  border-radius: 0.85rem 0.85rem 0 0;
}

.easy-mode-setting-list > :last-child,
.easy-mode-setting-list > :last-child .easy-mode-row-main {
  border-radius: 0 0 0.85rem 0.85rem;
}

.easy-mode-setting-list > :only-child,
.easy-mode-setting-list > :only-child .easy-mode-row-main {
  border-radius: 0.85rem;
}

.easy-mode-setting-list > * + * {
  border-top: 1px solid #e8eef1;
}

.easy-mode-setting-row:hover,
.easy-mode-setting-row:focus-visible,
.easy-mode-row-main:hover,
.easy-mode-row-main:focus-visible {
  background: #f1f7fa;
  filter: none;
  transform: none;
}

.easy-mode-component-row {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
}

.easy-mode-component-icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.48rem;
  background: color-mix(in srgb, var(--accent-soft) 72%, #fff);
  color: var(--accent-strong);
}

.easy-mode-component-icon .component-glyph {
  font-size: 1.2rem;
  line-height: 1;
}

.easy-mode-row-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  gap: 0.12rem;
}

.easy-mode-row-copy strong,
.easy-mode-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easy-mode-row-copy small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.easy-mode-agent-row .easy-mode-row-copy strong {
  font-size: 1.1rem;
  line-height: 1.4;
}

.easy-mode-agent-phone {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: start;
}

.easy-mode-section-copy small {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.easy-mode-section-copy strong {
  color: #24343d;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.easy-mode-shared-badge {
  flex: 0 0 auto;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: #eef4f6;
  color: #60717a;
  font-size: 0.72rem;
  font-weight: 700;
}

.easy-mode-chevron,
.easy-mode-add-symbol {
  flex: 0 0 auto;
  color: #82939c;
  font-size: 1.5rem;
  font-weight: 400;
}

.easy-mode-add-symbol {
  color: var(--accent-strong);
}

.easy-mode-status {
  padding: 0.2rem 0.48rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #eef2f4;
  color: #53636b;
  font-size: 0.7rem;
  font-weight: 750;
}

.easy-mode-status.is-live { background: #e2f5e8; color: #166534; }
.easy-mode-status.is-pending,
.easy-mode-status.is-publishing { background: #fff2cc; color: #795500; }
.easy-mode-status.is-error { background: #fee2e2; color: #991b1b; }

.easy-mode-issue-marker {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #c73f3f;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1;
}

.easy-mode-issue-marker {
  align-self: center;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.easy-mode-issue-marker:hover,
.easy-mode-issue-marker:focus-visible {
  background: #a51d1d;
  filter: none;
  transform: none;
}

.easy-mode-row-menu {
  position: relative;
  align-self: center;
  margin-right: 0.45rem;
}

.easy-mode-more {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.easy-mode-more::-webkit-details-marker { display: none; }
.easy-mode-more:hover,
.easy-mode-more:focus-visible { background: #edf3f6; }

.easy-mode-row-menu-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  right: 0;
  width: max-content;
  min-width: 9rem;
  padding: 0.3rem;
  display: grid;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: var(--shadow);
}

.easy-mode-row-menu-popover button {
  justify-content: flex-start;
  border: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.easy-mode-row-menu-popover button:hover,
.easy-mode-row-menu-popover button:focus-visible {
  background: #edf3f6;
  filter: none;
  transform: none;
}

.easy-mode-row-menu-popover .danger-menu-item {
  color: var(--danger);
}

.easy-mode-empty {
  padding: 2.5rem 1.25rem;
  display: grid;
  place-items: center;
  gap: 0.6rem;
  text-align: center;
}

.easy-mode-empty h3,
.easy-mode-empty p { margin: 0; }
.easy-mode-empty p { color: var(--muted); }

.easy-mode-floating-add {
  position: fixed;
  z-index: 10;
  right: max(1.25rem, calc((100vw - 52rem) / 2 + 1.25rem));
  bottom: 3.6rem;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 30px rgba(12, 119, 146, 0.3);
}

.easy-mode-floating-add-icon {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.easy-mode-floating-add-icon::before,
.easy-mode-floating-add-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 0.18rem;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.easy-mode-floating-add-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.easy-mode-publish-bar {
  position: fixed;
  z-index: 9;
  left: 50%;
  bottom: 0;
  width: min(100%, 52rem);
  min-height: 4.5rem;
  padding: 0.65rem max(0.85rem, env(safe-area-inset-right)) calc(0.65rem + env(safe-area-inset-bottom)) max(0.85rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  border: 1px solid #d5e2ea;
  border-bottom: 0;
  border-radius: 0.9rem 0.9rem 0 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 28px rgba(4, 29, 43, 0.12);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.easy-mode-publish-bar.has-issues {
  border-color: #e0a8a8;
  background: rgba(255, 243, 243, 0.97);
}

.easy-mode-editor-context {
  margin: 0.15rem 0 0.65rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.easy-mode-inline-editor-host {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce5ea;
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(4, 29, 43, 0.04);
}

.easy-mode-inline-editor {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.easy-mode-inline-editor .node-editor-body {
  overflow: visible;
}

.easy-mode-inline-editor .component-dialog-layout {
  display: block;
  min-height: 0;
}

.easy-mode-inline-editor .component-dialog-panel:not(.is-open) {
  display: none;
}

.easy-mode-inline-editor .component-dialog-panel-body {
  padding: 0;
}

.easy-mode-inline-editor .component-dialog-content {
  overflow: visible;
  padding: clamp(0.8rem, 3vw, 1.15rem);
}

.easy-mode-inline-editor [data-node-editor-panel="static-knowledge"] {
  min-height: max(30rem, calc(100dvh - 18rem));
}

.easy-mode-inline-editor .infodesk-knowledge-textarea {
  min-height: max(15rem, calc(100dvh - 20rem));
}

.easy-mode-inline-editor .modal-footer {
  display: none;
}

.node-editor-modal-host {
  min-height: 0;
  display: contents;
}

@media (max-width: 620px) {
  .portal-shell.view-mode-easy .portal-actions #activate-workspace-control {
    display: none;
  }

  .easy-mode-navigator-view {
    padding-inline: 0.65rem;
  }

  .easy-mode-publish-bar button { white-space: nowrap; }
  .easy-mode-status { display: none; }

}

@media (max-width: 480px) {
  .easy-mode-back {
    gap: 0;
  }

  .easy-mode-back-label {
    display: none;
  }
}

.component-palette {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding: 0.58rem;
  background: color-mix(in srgb, var(--surface-2) 45%, #fff);
}

.palette-group {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--palette-group-border, var(--border));
  border-radius: 8px;
  background: #fff;
}

.palette-group.is-active {
  display: grid;
  grid-template-rows: auto auto;
}

.palette-group-toggle {
  width: 100%;
  min-height: 2.6rem;
  justify-content: flex-start;
  padding: 0.58rem 0.68rem;
  border: 0;
  border-radius: 0;
  background: var(--palette-group-background, var(--surface-2));
  color: var(--palette-group-foreground, var(--text));
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  box-shadow: none;
}

.palette-group-toggle::after {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.1rem, 0.1rem);
  transition: transform 140ms ease;
}

.palette-group-toggle[aria-expanded="false"]::after {
  transform: rotate(-45deg);
}

.palette-group-toggle:hover,
.palette-group-toggle:focus-visible {
  background: var(--palette-group-background, var(--surface-2));
  filter: brightness(0.97);
  transform: none;
}

.palette-group-items {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.42rem;
  padding: 0.5rem;
  overflow: hidden;
}

.palette-group-items[hidden] {
  display: none;
}

.palette-item {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.42rem 0.54rem;
  display: flex;
  align-items: center;
  gap: 0.52rem;
  animation: fadeIn 250ms ease;
  cursor: pointer;
  user-select: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.component-icon {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.9rem;
}

.component-glyph {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05rem;
  line-height: 1;
}

.component-icon .component-glyph {
  font-size: 1.3rem;
}

.palette-item .name {
  font-weight: 700;
  line-height: 1.15;
  font-size: 0.78rem;
  min-width: 0;
}

.palette-item:hover {
  border-color: #7fb4c6;
}

.palette-item.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.palette-item.is-selected {
  border-color: #095e74;
  box-shadow: 0 0 0 2px rgba(12, 119, 146, 0.2);
  transform: translateY(-1px);
}

@media (max-height: 700px) {
  .component-bar-head {
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
  }

  .component-palette {
    gap: 0.35rem;
    padding: 0.4rem;
  }

  .palette-group-toggle {
    min-height: 2.25rem;
    padding: 0.45rem 0.58rem;
    font-size: 0.76rem;
  }

  .palette-group-items {
    gap: 0.3rem;
    padding: 0.35rem;
  }

  .palette-item {
    min-height: 40px;
    padding: 0.32rem 0.45rem;
  }

  .palette-item .component-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-basis: 1.6rem;
  }

  .palette-item .name {
    font-size: 0.75rem;
  }
}

.studio-shell {
  --assistant-panel-width: 390px;
  --component-sidebar-width: 320px;
  min-height: 0;
  display: grid;
  grid-template-areas: "assistant assistant-resizer palette palette-resizer canvas";
  grid-template-columns: var(--assistant-panel-width) 7px var(--component-sidebar-width) 7px minmax(0, 1fr);
  gap: 0;
  position: relative;
}

.component-palette-info {
  position: absolute;
  z-index: 40;
  width: min(280px, calc(100% - 24px));
  padding: 0.78rem 0.86rem;
  border: 1px solid color-mix(in srgb, var(--component-color, #0c7792) 34%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #fff 96%, var(--component-color, #0c7792));
  box-shadow: 0 16px 34px rgba(23, 41, 23, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.74) inset;
  pointer-events: none;
  animation: componentPaletteInfoIn 150ms ease-out;
}

.component-palette-info::after {
  content: "";
  position: absolute;
  top: 22px;
  left: -7px;
  width: 12px;
  height: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--component-color, #0c7792) 34%, var(--border));
  border-left: 1px solid color-mix(in srgb, var(--component-color, #0c7792) 34%, var(--border));
  background: inherit;
  transform: rotate(45deg);
}

.component-palette-info-head {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  color: var(--text);
  font-size: 0.9rem;
}

.component-palette-info-head .component-icon {
  width: 1.7rem;
  height: 1.7rem;
  flex-basis: 1.7rem;
  color: var(--component-color, #0c7792);
}

.component-palette-info p {
  margin: 0.48rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.42;
}

@keyframes componentPaletteInfoIn {
  from { opacity: 0; transform: translateX(-7px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.studio-shell.assistant-hidden {
  grid-template-areas: "palette palette-resizer canvas";
  grid-template-columns: var(--component-sidebar-width) 7px minmax(0, 1fr);
}

.workspace-context-panel {
  grid-area: assistant;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}

.workspace-assistant-resizer {
  grid-area: assistant-resizer;
  min-width: 7px;
  position: relative;
  cursor: col-resize;
  touch-action: none;
  background: #eaf3f7;
  border-block: 1px solid var(--border);
}

.workspace-assistant-resizer::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  border-radius: 999px;
  background: #b9cfdb;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}

.workspace-assistant-resizer:hover::after,
.workspace-assistant-resizer:focus-visible::after,
.workspace-assistant-resizer.is-resizing::after {
  opacity: 1;
  background: #0c7792;
}

body.is-resizing-assistant {
  cursor: col-resize;
  user-select: none;
}

.component-palette-resizer {
  grid-area: palette-resizer;
  min-width: 7px;
  position: relative;
  cursor: col-resize;
  touch-action: none;
  background: #eaf3f7;
  border-block: 1px solid var(--border);
}

.component-palette-resizer::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  border-radius: 999px;
  background: #b9cfdb;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}

.component-palette-resizer:hover::after,
.component-palette-resizer:focus-visible::after,
.component-palette-resizer.is-resizing::after {
  opacity: 1;
  background: #0c7792;
}

body.is-resizing-component-panel {
  cursor: col-resize;
  user-select: none;
}

.first-steps-assistant {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  background:
    radial-gradient(circle at 92% 0%, rgba(12, 119, 146, 0.08), transparent 34%),
    linear-gradient(180deg, #fbfdfe 0%, #fff 48%);
}

.phone-onboarding-guide {
  width: min(100%, 64rem);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
}

.phone-onboarding-guide > .first-steps-back {
  margin-bottom: 1rem;
}

.phone-onboarding-guide-notice {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 12px;
  background: #eaf6fa;
  color: #123f4d;
}

.phone-onboarding-guide-notice > span {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-strong);
  font-size: 0.92rem;
  font-weight: 800;
}

.phone-onboarding-guide-notice > div {
  display: grid;
  gap: 0.08rem;
}

.phone-onboarding-guide-notice small {
  color: #496a75;
  line-height: 1.4;
}

.phone-onboarding-guide .first-steps-flow-heading {
  margin-block: 0 1.25rem;
}

.phone-onboarding-guide .first-steps-flow-heading h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -0.02em;
}

.phone-onboarding-guide .first-steps-accordion-content {
  padding: clamp(1rem, 2.5vw, 1.4rem);
}

.phone-onboarding-guide .first-steps-accordion-content:not([hidden]) {
  display: grid;
  gap: 1rem;
}

.phone-onboarding-guide [data-a1-knowledge-field]:not(.hidden) {
  min-height: max(14rem, calc(100dvh - 42rem));
  grid-template-rows: auto minmax(0, 1fr);
}

.phone-onboarding-guide [data-a1-knowledge] {
  height: 100%;
  min-height: 12rem;
}

.phone-onboarding-guide .first-steps-accordion-content > p,
.phone-onboarding-guide .first-steps-panel-actions {
  margin: 0;
}

.phone-onboarding-guide .first-steps-panel-actions {
  padding-top: 0.25rem;
}

.phone-onboarding-guide .first-steps-level-card[data-a1-forward] .first-steps-level-code {
  background: #deedf4;
  color: var(--accent-strong);
  font-size: 1.2rem;
}

@media (max-width: 620px) {
  .phone-onboarding-guide {
    padding: 0.75rem;
  }

  .phone-onboarding-guide-notice {
    align-items: flex-start;
  }
}

.guided-inline-actions,
.guided-inline-fields {
  display: flex;
  align-items: end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.guided-phone-guide.is-crawling,
.guided-phone-guide.is-crawling button,
.guided-phone-guide.is-crawling input {
  cursor: wait;
}

.guided-inline-fields > * {
  flex: 1 1 9rem;
}

.guided-calendar-connection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.65rem;
}

.guided-calendar-status {
  margin: 0.55rem 0 0.8rem;
  padding: 0.52rem 0.65rem;
  border: 1px solid #ead7ad;
  border-radius: 8px;
  background: #fff9ec;
  color: #74551c;
  font-size: 0.74rem;
}

.guided-calendar-status.is-ready {
  border-color: #b9d8b5;
  background: #f1f8ef;
  color: #286432;
}

/* Inside the guide, the caller-detail matrix reads as a plain block: the
   fieldset frame is one container line too many. */
.guided-caller-fields {
  margin-top: 0.75rem;
  overflow-x: auto;
  border: 0;
  padding: 0;
}

.guided-caller-fields legend {
  padding: 0;
  margin-bottom: 0.3rem;
  color: var(--text);
}

@media (max-width: 720px) {
  .guided-calendar-connection {
    grid-template-columns: 1fr;
  }
}

.first-steps-assistant [hidden] {
  display: none !important;
}

.guided-crawl-progress {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid #d3e2ea;
  border-radius: 10px;
  background: #f2f8fa;
}

.guided-crawl-progress > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
}

.guided-crawl-progress progress {
  width: 100%;
  accent-color: #0c7792;
}

.guided-error {
  margin: 0.7rem 0 0;
  color: #9d2019;
  font-size: 0.78rem;
}

.guided-phone-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem;
}

.guided-phone-input select {
  width: 7rem;
}

.guided-test-call-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: end;
}

.guided-test-call-row .first-steps-field {
  min-width: 0;
}

.guided-test-call-row [data-a1-call] {
  min-height: 2.55rem;
  white-space: nowrap;
}

.guided-call-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.55rem;
  align-items: center;
  margin-top: 0.8rem;
  padding: 0.7rem;
  border: 1px solid #dbe4ea;
  border-radius: 10px;
  background: #fff;
}

.guided-call-status small { grid-column: 2; color: var(--muted); }
.guided-status-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #e0a229; box-shadow: 0 0 0 5px #f9edcf; }
.guided-call-status.is-connected .guided-status-dot,
.guided-call-status.is-complete .guided-status-dot { background: #3e8a45; box-shadow: 0 0 0 5px #def0df; }
.guided-call-status.is-error .guided-status-dot { background: #c43e35; box-shadow: 0 0 0 5px #f8dfdd; }
.guided-call-status.is-error { border-color: #e8b7b3; background: #fff7f6; }
.guided-call-status.is-error strong { color: #9d2019; }
.guided-call-status.is-error small { color: #7d2c27; }
.guided-assistant-number { grid-column: 2; margin: 0.25rem 0 0; font-size: 0.8rem; font-weight: 700; color: #095e74; }
.guided-call-success { margin-top: 1rem; }
.guided-call-success h3 { margin: 0 0 0.6rem; font-size: 0.9rem; }
.guided-call-success .first-steps-level-card { margin-top: 0.5rem; }

@media (max-width: 640px) {
  .guided-test-call-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .guided-test-call-row [data-a1-call] {
    width: 100%;
  }
}

.guided-whatsapp-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.18rem 0.7rem;
  align-items: center;
  margin: 0.75rem 0;
  padding: 0.8rem;
  border: 1px solid #b8dbc1;
  border-radius: 12px;
  background: linear-gradient(135deg, #f4fbf5, #eaf8ee);
}

.guided-whatsapp-number > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.guided-whatsapp-number > strong {
  grid-column: 1;
  color: #235b31;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.guided-whatsapp-number > .button-link {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.guided-forwarding-card {
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1.1rem;
  border: 1px solid #c2dbe6;
  border-radius: 14px;
  background: linear-gradient(145deg, #fbfdfe, #edf6e9);
  box-shadow: 0 10px 24px rgba(4, 29, 43, 0.09);
}

.guided-forwarding-card h3 {
  margin: 0;
  color: #113240;
  font-size: 1.22rem;
  line-height: 1.3;
}

.guided-forwarding-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.guided-forwarding-card > ul,
.guided-forwarding-card > ol {
  margin-block: 0;
}

.guided-forwarding-card .guided-inline-actions {
  align-items: center;
  gap: 0.75rem;
}

.guided-forwarding-card > [data-forward-close] {
  justify-self: start;
  margin: 0.1rem 0 0;
}
.guided-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.guided-choice-grid button { min-height: 6rem; padding: 0.8rem; text-align: left; border: 1px solid #d3e2ea; background: #fff; color: var(--text); }
.guided-choice-grid strong, .guided-choice-grid small { display: block; }
.guided-choice-grid small { margin-top: 0.35rem; color: var(--muted); line-height: 1.35; }
.guided-code { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem; border: 1px solid #c4d8e2; border-radius: 9px; background: #fff; }
.guided-code code { overflow-wrap: anywhere; font-size: 0.92rem; font-weight: 800; }
.guided-system-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.guided-system-list button { display: flex; justify-content: space-between; padding: 0.65rem; border: 1px solid #d9e4ec; background: #fff; color: var(--text); }
.guided-instructions { padding-left: 1.2rem; color: #31434f; font-size: 0.82rem; line-height: 1.55; }
.guided-privacy { padding: 0.7rem; border-left: 3px solid #0c7792; background: rgba(255,255,255,.72); }

.guided-infodesk-picker { display: grid; gap: 0.9rem; }
.guided-infodesk-picker > p { margin: 0; color: var(--muted); line-height: 1.5; }
.guided-infodesk-picker-options { display: grid; gap: 0.55rem; max-height: min(50vh, 26rem); overflow-y: auto; }
.guided-infodesk-picker-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.85rem; border: 1px solid #d3e2ea; border-radius: 12px; background: #fff; cursor: pointer; }
.guided-infodesk-picker-option:has(input:checked) { border-color: #0c7792; background: #edf8fb; box-shadow: inset 0 0 0 1px #0c7792; }
.guided-infodesk-picker-option strong,
.guided-infodesk-picker-option small { display: block; }
.guided-infodesk-picker-option small { margin-top: 0.2rem; color: var(--muted); }

@media (max-width: 720px) {
  .guided-choice-grid,
  .guided-system-list { grid-template-columns: minmax(0, 1fr); }
}

.first-steps-view {
  min-height: 100%;
  padding: 1rem;
  animation: fadeIn 180ms ease;
}

.first-steps-level-view {
  width: min(100%, 64rem);
  margin-inline: auto;
  display: grid;
  align-content: center;
}

.first-steps-heading {
  margin-bottom: 1rem;
}

.first-steps-heading h2,
.first-steps-heading p,
.first-steps-flow-heading h2,
.first-steps-complete p {
  margin: 0;
}

.first-steps-heading h2 {
  margin-top: 0.2rem;
  color: #132029;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.first-steps-heading p {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.5;
}

.first-steps-level-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.first-steps-level-card {
  width: 100%;
  min-height: 7rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.72rem;
  border: 1px solid #d9e4ec;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--text);
  text-align: left;
  box-shadow: 0 6px 18px rgba(4, 29, 43, 0.06);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.first-steps-level-card:hover,
.first-steps-level-card:focus-visible {
  border-color: #0c7792;
  box-shadow: 0 10px 24px rgba(9, 94, 116, 0.12);
  filter: none;
  transform: translateY(-2px);
}

.first-steps-level-code {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #deedf4;
  color: #095e74;
  font-weight: 850;
}

.first-steps-level-card > span:not(.first-steps-level-code):not(.first-steps-arrow) {
  flex: 1 1 auto;
  min-width: 0;
}

.first-steps-level-code {
  flex: 0 0 auto;
}

.first-steps-level-card strong,
.first-steps-level-card small {
  display: block;
}

.first-steps-level-card strong {
  font-size: 1.2rem;
  line-height: 1.25;
}

.first-steps-level-card small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.35;
}

.first-steps-arrow {
  color: #6e8794;
  font-size: 1.1rem;
  transition: transform 150ms ease;
}

.first-steps-level-card:hover .first-steps-arrow {
  transform: translateX(3px);
}

.first-steps-back {
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0a6b83;
  font-size: 0.84rem;
  font-weight: 750;
  box-shadow: none;
}

.first-steps-back:hover,
.first-steps-back:focus-visible {
  color: #07404f;
  filter: none;
  transform: none;
  text-decoration: underline;
}

.first-steps-scenario-grid {
  display: grid;
  gap: 0.55rem;
}

.first-steps-scenario-grid.is-beginner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.first-steps-scenario-grid.is-expert {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.first-steps-scenario-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border: 1px solid #d9e4ec;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
  box-shadow: 0 5px 16px rgba(4, 29, 43, 0.06);
}

.first-steps-scenario-card:hover,
.first-steps-scenario-card:focus-visible {
  border-color: #0c7792;
  box-shadow: 0 9px 22px rgba(4, 29, 43, 0.12);
  filter: none;
  transform: translateY(-2px);
}

.first-steps-scenario-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e8f7fb;
}

.first-steps-scenario-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.first-steps-scenario-image svg,
.first-steps-flow-icon svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.first-steps-scenario-copy {
  width: 100%;
  padding: 0.9rem;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

.first-steps-flow-heading {
  margin: 0.75rem 0 1.5rem;
  padding: 0.65rem 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.first-steps-flow-heading h2 {
  font-size: 1.3rem;
  line-height: 1.4;
}

.first-steps-flow-icon {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #deedf4;
  color: #095e74;
}

.first-steps-accordion {
  display: grid;
  gap: 0.85rem;
}

.first-steps-accordion-item {
  overflow: hidden;
  border: 1px solid #dae1e6;
  border-radius: 9px;
  background: #fff;
}

.first-steps-accordion-item.is-open {
  border-color: #a8cfdd;
  box-shadow: 0 7px 20px rgba(4, 29, 43, 0.08);
}

.first-steps-accordion-title {
  width: 100%;
  min-height: 3.8rem;
  padding: 0.75rem 0.9rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.52rem;
  border: 0;
  border-radius: 0;
  background: #eef1f3;
  color: #3c4a52;
  text-align: left;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 760;
}

.first-steps-accordion-title:hover,
.first-steps-accordion-title:focus-visible {
  filter: none;
  transform: none;
  background: #e6ebe5;
}

.first-steps-accordion-title:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.first-steps-accordion-item.is-open .first-steps-accordion-title {
  background: #e3f0f6;
  color: #0a4a5c;
}

.first-steps-step-marker {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #aeb8bd;
  background: #f7f9f9;
  color: #7b878d;
  font-size: 0.88rem;
  font-weight: 900;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.first-steps-accordion-item.is-ready .first-steps-step-marker,
.first-steps-accordion-item.is-complete .first-steps-step-marker {
  border-color: #2f7d3b;
  background: #2f7d3b;
  color: #fff;
  transform: scale(1.04);
}

.first-steps-chevron {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(74, 101, 107, 0.09);
  color: #52686d;
  transition: background 140ms ease, color 140ms ease, transform 160ms ease;
}

.first-steps-chevron svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.first-steps-accordion-item.is-open .first-steps-chevron {
  transform: rotate(180deg);
  background: rgba(9, 94, 116, 0.13);
  color: #095e74;
}

.first-steps-accordion-content {
  padding: 1.25rem;
  border-top: 1px solid #dfe8dd;
}

.first-steps-accordion-content > .guided-inline-actions {
  margin-block: 1.15rem;
}

.guided-website-actions {
  justify-content: flex-end;
}

.first-steps-accordion-content > p {
  margin: 0 0 0.72rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.first-steps-form {
  display: grid;
  gap: 0.9rem;
}

.first-steps-field {
  display: grid;
  gap: 0.45rem;
  color: #374237;
  font-size: 0.92rem;
  font-weight: 700;
}

.first-steps-field input,
.first-steps-field select,
.first-steps-field textarea {
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

.first-steps-field textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.first-steps-checkbox {
  padding: 0.58rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
  border: 1px solid #dbe4d9;
  border-radius: 7px;
  background: #fafcf9;
  color: #455245;
  font-size: 0.92rem;
  font-weight: 620;
  line-height: 1.4;
}

.first-steps-checkbox input {
  margin-top: 0.12rem;
}

.first-steps-panel-actions {
  min-height: 2.25rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
}

.first-steps-next {
  min-width: 5.5rem;
  padding: 0.48rem 0.75rem;
}

.first-steps-complete {
  margin-top: 0.75rem;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  border: 1px solid #9bc899;
  border-radius: 9px;
  background: #edf8eb;
  color: #285d31;
}

.first-steps-complete > span {
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2f7d3b;
  color: #fff;
  font-weight: 850;
}

.first-steps-complete strong {
  display: block;
  font-size: 0.8rem;
}

.first-steps-complete p {
  margin-top: 0.18rem;
  color: #4f6d53;
  font-size: 0.7rem;
  line-height: 1.4;
}

.workspace-assistant {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0.85rem;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfdfe 0%, #fff 35%);
}

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

.workspace-assistant-header,
.workspace-assistant-controls,
.workspace-assistant-action-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.workspace-assistant-header h3,
.workspace-assistant-header p {
  margin: 0;
}

.workspace-assistant-header h3 { font-size: 1.22rem; letter-spacing: -0.01em; }
.workspace-assistant-header .compact { padding: 0.38rem 0.55rem; font-size: 0.76rem; }

.workspace-assistant-header-actions {
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

.workspace-assistant-header-actions .icon-only {
  min-width: 2rem;
}

#workspace-assistant-new {
  min-height: 2.55rem;
  padding: 0.55rem 0.9rem;
  border-color: #91b985;
  background: #f5fbf2;
  font-size: 0.92rem;
  box-shadow: 0 1px 2px rgba(38, 81, 31, 0.12);
}

.workspace-assistant-messages {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-right: 0.15rem;
  overscroll-behavior: contain;
}

.workspace-assistant-message {
  max-width: 92%;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px 10px 10px 2px;
  background: #fff;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.52;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.workspace-assistant-message.is-user {
  align-self: flex-end;
  border-color: #b9d8ad;
  border-radius: 10px 10px 2px 10px;
  background: #edf8e9;
}

.workspace-assistant-message.is-error { border-color: #efb5b5; background: #fff4f4; }

.workspace-assistant-message a {
  color: #2f6f28;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.workspace-assistant-message a:hover,
.workspace-assistant-message a:focus-visible {
  color: #1e521a;
}

.workspace-assistant-processing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px 10px 10px 2px;
  background: #fff;
  color: var(--muted);
  font-size: 0.78rem;
  max-width: min(100%, 32rem);
}

.workspace-assistant-processing > span:first-child {
  line-height: 1.4;
}

.workspace-assistant-processing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.workspace-assistant-processing-dots i {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #5d8f51;
  animation: workspace-assistant-thinking 1.1s infinite ease-in-out;
}

.workspace-assistant-processing-dots i:nth-child(2) { animation-delay: 0.14s; }
.workspace-assistant-processing-dots i:nth-child(3) { animation-delay: 0.28s; }

@keyframes workspace-assistant-thinking {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.18rem); }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-assistant-processing-dots i { animation: none; opacity: 0.7; }
}

.workspace-assistant-clarification {
  width: min(100%, 30rem);
  padding: 0.75rem;
  border: 1px solid #a6cc99;
  border-radius: 12px;
  background: #f4f9fb;
  box-shadow: 0 2px 8px rgba(38, 81, 31, 0.08);
}

.workspace-assistant-clarification > p {
  margin: 0 0 0.62rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.workspace-assistant-choice-list {
  display: grid;
  gap: 0.5rem;
}

.workspace-assistant-choice {
  width: 100%;
  min-height: 3rem;
  padding: 0.72rem 0.8rem;
  justify-content: flex-start;
  border: 1px solid #8fb982;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(38, 81, 31, 0.1);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.workspace-assistant-choice:not(.is-other)::after {
  content: "→";
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.55rem;
  color: #0c7792;
  font-size: 1.08rem;
  font-weight: 700;
}

.workspace-assistant-choice:hover,
.workspace-assistant-choice:focus-visible {
  border-color: #0c7792;
  background: #edf8e9;
  box-shadow: 0 3px 8px rgba(38, 81, 31, 0.16);
}

.workspace-assistant-choice:focus-visible {
  outline: 3px solid rgba(63, 127, 54, 0.24);
  outline-offset: 2px;
}

.workspace-assistant-choice.is-other {
  border-style: dashed;
  color: var(--muted);
  font-weight: 500;
}

.workspace-assistant-clarification.is-resolved {
  opacity: 0.65;
}

.workspace-assistant-choice:disabled {
  cursor: default;
}

.workspace-assistant-action {
  padding: 0.65rem;
  border: 1px solid #d7c68c;
  border-radius: 8px;
  background: #fffbed;
  font-size: 0.8rem;
}

.workspace-assistant-action p { margin: 0 0 0.55rem; }
.workspace-assistant-action-controls { justify-content: flex-end; }
.workspace-assistant-action-controls button { padding: 0.4rem 0.62rem; font-size: 0.76rem; }

.workspace-assistant-guide {
  max-height: 7rem;
  overflow-y: auto;
  padding: 0.55rem 0.65rem;
  border-left: 3px solid #0c7792;
  background: #f0f8ed;
  font-size: 0.8rem;
  line-height: 1.4;
}

.workspace-assistant-form { min-height: 0; display: grid; gap: 0.5rem; }
.workspace-assistant-form textarea { width: 100%; min-height: 4.5rem; max-height: 10rem; resize: vertical; }
.workspace-assistant-controls { justify-content: flex-end; }
.workspace-assistant-controls button { min-width: 5.25rem; }
.workspace-assistant-controls #workspace-assistant-voice { margin-right: auto; }
.workspace-assistant-controls #workspace-assistant-voice.is-listening { background: #b3261e; color: #fff; border-color: #b3261e; }

@media (max-width: 900px) {
  .studio-shell {
    --component-sidebar-width: 220px;
    grid-template-areas:
      "assistant assistant"
      "palette canvas";
    grid-template-columns: var(--component-sidebar-width) minmax(0, 1fr);
    grid-template-rows: minmax(16rem, 42%) minmax(0, 1fr);
  }
  .studio-shell.assistant-hidden {
    grid-template-areas: "palette canvas";
    grid-template-columns: var(--component-sidebar-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .workspace-context-panel { min-height: 0; }
  .workspace-assistant-resizer { display: none; }
  .component-palette-resizer { display: none; }
  .easy-mode-header { flex-direction: column; }
  .easy-mode-header-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .first-steps-level-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .first-steps-scenario-grid.is-beginner,
  .first-steps-scenario-grid.is-expert {
    grid-template-columns: 1fr;
  }
}

.canvas-scroll {
  grid-area: canvas;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #f8faf7;
  box-shadow: var(--shadow);
  overflow: auto;
  min-height: 0;
}

.canvas-scroll.is-drop-target {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--accent-focus), var(--shadow);
}

.canvas-board {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  position: relative;
  background:
    linear-gradient(90deg, rgba(83, 120, 83, 0.09) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(0deg, rgba(83, 120, 83, 0.09) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(90deg, rgba(83, 120, 83, 0.025) 1px, transparent 1px) 0 0 / 10px 10px,
    linear-gradient(0deg, rgba(83, 120, 83, 0.025) 1px, transparent 1px) 0 0 / 10px 10px,
    #fff;
}

.canvas-board.is-grid-disabled {
  background: #fff;
}

.canvas-selection-rectangle {
  position: absolute;
  z-index: 20;
  border: 1.5px dashed #d97706;
  background: rgba(245, 158, 11, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
  pointer-events: none;
}

.edge-layer,
.node-layer {
  position: absolute;
  inset: 0;
}

.edge-layer {
  pointer-events: none;
  overflow: visible;
}

.node-layer {
  pointer-events: none;
}

.edge-group {
  pointer-events: auto;
}

.edge-path,
.edge-path-temp {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edge-path {
  stroke: #146d84;
  stroke-width: 2.5;
  pointer-events: none;
}

.edge-group.is-source-inactive .edge-path {
  stroke-dasharray: 7 5;
}

.edge-group:hover .edge-path,
.edge-group:focus-within .edge-path,
.edge-group.is-selected .edge-path {
  stroke: #0c7792;
  stroke-width: 3;
}

.edge-path-capability {
  stroke: #111827;
  stroke-width: 2.4;
}

.edge-group:hover .edge-path-capability,
.edge-group:focus-within .edge-path-capability,
.edge-group.is-selected .edge-path-capability {
  stroke: #000;
  stroke-width: 3;
}

.edge-path-schedule {
  stroke: #7c3aed;
  stroke-dasharray: 5 4;
}

.edge-group:hover .edge-path-schedule,
.edge-group:focus-within .edge-path-schedule {
  stroke: #6d28d9;
}

.edge-group.has-validation-error .edge-path {
  stroke: #c73f3f;
  stroke-width: 3;
}

.edge-hit-area {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  pointer-events: stroke;
}

.edge-contract-label {
  fill: #334155;
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
}

.edge-group:hover .edge-contract-label,
.edge-group:focus-within .edge-contract-label,
.edge-group.is-selected .edge-contract-label {
  opacity: 1;
}

.edge-rewire-control {
  cursor: grab;
  opacity: 0;
  pointer-events: none;
}

.edge-group:hover .edge-rewire-control,
.edge-group:focus-within .edge-rewire-control,
.edge-group.is-selected .edge-rewire-control {
  opacity: 1;
  pointer-events: auto;
}

.edge-rewire-control circle {
  fill: #fff;
  stroke: #0c7792;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 3px rgba(31, 42, 31, 0.2));
}

.connection-create-menu {
  position: fixed;
  z-index: 1600;
  display: grid;
  gap: 4px;
  max-height: min(420px, calc(100vh - 24px));
  padding: 10px;
  overflow: auto;
  border: 1px solid rgba(15, 118, 145, 0.28);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
}

.connection-create-menu > span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
}

.connection-create-options {
  display: grid;
  gap: 6px;
}

.connection-create-options button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: start;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  cursor: pointer;
}

.connection-create-options button:hover,
.connection-create-options button:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: none;
  filter: none;
}

.connection-create-options button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.connection-create-options small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.edge-disconnect-control {
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}

.edge-group:hover .edge-disconnect-control,
.edge-group:focus-within .edge-disconnect-control,
.edge-disconnect-control:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.edge-disconnect-control circle {
  fill: #fff;
  stroke: rgba(199, 63, 63, 0.68);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 3px rgba(31, 42, 31, 0.2));
}

.edge-disconnect-control path {
  fill: none;
  stroke: var(--danger);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.edge-disconnect-control:hover circle,
.edge-disconnect-control:focus-visible circle {
  fill: var(--danger);
  stroke: var(--danger);
}

.edge-disconnect-control:hover path,
.edge-disconnect-control:focus-visible path {
  stroke: #fff;
}

.edge-path-temp {
  stroke: #5a9ec3;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  pointer-events: none;
}

.edge-path-temp-capability {
  stroke: #111827;
}

.edge-temp-endpoint {
  pointer-events: none;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 3px rgba(31, 42, 31, 0.24));
}

.edge-temp-endpoint-flow path {
  fill: #0c7792;
  stroke: #fff;
  stroke-width: 1;
  stroke-linejoin: round;
}

.edge-temp-endpoint-capability rect {
  fill: #111827;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1;
}

.edge-temp-endpoint.is-snapped {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px rgba(31, 127, 71, 0.58));
}

.flow-node {
  --node-radius: 14px;
  --node-text-offset: calc(1.55rem + 0.28rem + 2px);
  position: absolute;
  width: 320px;
  min-height: 128px;
  border-radius: var(--node-radius);
  border: 1px solid #bad0b8;
  background: linear-gradient(180deg, #fff 0%, #f2faf0 100%);
  box-shadow: 0 8px 18px rgba(23, 41, 23, 0.15);
  display: grid;
  gap: 0.08rem;
  grid-template-rows: auto auto auto auto auto;
  padding: 0.5rem 0.65rem 0.55rem;
  cursor: grab;
  pointer-events: auto;
}

.flow-node.is-flow-start {
  min-height: 128px;
}

.flow-node.is-topmost {
  z-index: 10;
}

.flow-node.is-dragging {
  z-index: 11;
}

.flow-node:active {
  cursor: grabbing;
}

.flow-node.flow-node-preview {
  opacity: 0.56;
  pointer-events: none;
  border-style: dashed;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(242, 250, 240, 0.88) 100%);
  box-shadow: 0 8px 16px rgba(18, 35, 18, 0.16);
  z-index: 5;
}

.flow-node .node-head {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  cursor: inherit;
}

.flow-node .node-icon {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
}

.flow-node .node-title {
  display: flex;
  align-items: center;
  transform: translateX(-5px);
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  font-weight: 700;
  line-height: 1.22;
}

.flow-node .node-label-trigger {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: -0.1rem -0.22rem;
  padding: 0.1rem 0.22rem;
  border-radius: 0.28rem;
  cursor: text;
}

.flow-node .node-summary {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.12;
  min-width: 0;
  max-width: calc(100% - var(--node-text-offset));
}

.infodesk-knowledge-usage {
  --knowledge-usage-color: #2f9e44;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  color: #286c35;
}

.infodesk-knowledge-usage.is-warning {
  --knowledge-usage-color: #d39b00;
  color: #755700;
}

.infodesk-knowledge-usage.is-danger {
  --knowledge-usage-color: #c73f3f;
  color: #8a2424;
}

.infodesk-knowledge-usage.is-pending {
  --knowledge-usage-color: #8b9690;
  color: var(--muted);
}

.infodesk-knowledge-usage-track {
  display: block;
  height: 0.48rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--knowledge-usage-color) 45%, #cfd8dc);
  border-radius: 999px;
  background: #e2e8e1;
}

.infodesk-knowledge-usage-fill {
  display: block;
  min-width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--knowledge-usage-color);
}

.infodesk-knowledge-usage-label {
  min-width: 2.3rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

.infodesk-knowledge-usage.is-canvas {
  width: calc(100% - var(--node-text-offset));
  margin: 0.18rem 0 0.1rem var(--node-text-offset);
}

.node-editor-knowledge-usage {
  width: min(22rem, 48vw);
}

.node-editor-footer-row {
  flex-wrap: nowrap;
}

.node-editor-footer-row .node-editor-knowledge-usage {
  margin-right: 0.2rem;
}

.node-publication-state {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  margin: 0.2rem 0 0 var(--node-text-offset);
}

.node-state-badge {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0.12rem 0.36rem;
  border: 1px solid #ccd7ca;
  border-radius: 999px;
  background: #f5f7f4;
  color: #58605a;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.node-state-badge.is-on {
  border-color: #9ac89d;
  background: #eef8ec;
  color: #1d5a29;
}

.node-state-badge.is-change {
  border-color: #d5c26f;
  background: #fff8dc;
  color: #6b5500;
}

.node-state-badge.is-error {
  border-color: #e3a3a3;
  background: #fff0f0;
  color: #8a2424;
}

.flow-node.is-selected .node-label-trigger:hover {
  background: rgba(15, 119, 145, 0.1);
  outline: 1px solid rgba(15, 119, 145, 0.2);
}

.flow-node .node-inline-label-input {
  width: 100%;
  min-width: 0;
  height: 1.62rem;
  padding: 0.08rem 0.24rem;
  border: 1px solid var(--accent-strong);
  border-radius: 0.28rem;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  line-height: 1.22;
  box-shadow: 0 0 0 2px rgba(15, 119, 145, 0.14);
  cursor: text;
}

.flow-node .node-summary {
  min-height: 2.24em;
  margin: 0 0 0 var(--node-text-offset);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.node-status-bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  border-radius: calc(var(--node-radius) - 1px) calc(var(--node-radius) - 1px) 0 0;
  background: #c73f3f;
  pointer-events: none;
}

.node-status-bar.is-running {
  background: #2f9e44;
}

.node-status-bar.is-problem {
  background: #c73f3f;
}

.node-status-bar.is-disabled {
  background: #9aa0a6;
}

.flow-node.is-pending {
  border-style: dashed;
}

.flow-node .node-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.flow-node .tiny-btn {
  font-size: 0.75rem;
  padding: 0.28rem 0.48rem;
  cursor: pointer;
}

.node-port-list {
  display: grid;
  gap: 0.18rem;
  margin: 0.42rem -0.65rem 0.18rem;
  padding: 0.38rem 0;
  border-top: 1px solid rgba(93, 115, 96, 0.16);
  border-bottom: 1px solid rgba(93, 115, 96, 0.16);
  background: rgba(255, 255, 255, 0.56);
}

.node-port-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.node-port-lane {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.node-schedule-attachment {
  width: 58%;
  border-bottom: 1px solid rgba(93, 115, 96, 0.12);
}

.node-schedule-attachment .node-port {
  min-height: 26px;
  color: #6d28d9;
  font-size: 0.66rem;
}

.node-port {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0.28rem 0.62rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #33453a;
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.15;
  cursor: pointer;
}

.node-port.is-input { justify-content: flex-start; text-align: left; }
.node-port.is-output { justify-content: flex-end; text-align: right; }
.node-port:hover, .node-port:focus-visible { background: rgba(12, 119, 146, 0.07); transform: none; }
.node-port.is-full { cursor: not-allowed; opacity: 0.68; }

.node-port-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-port-count {
  min-width: 1.18rem;
  padding: 0.1rem 0.26rem;
  border-radius: 999px;
  background: #e5ece6;
  color: #405348;
  text-align: center;
  font-size: 0.62rem;
}

.node-port-socket {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  background: #111827;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.48);
  transform: translateY(-50%);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.node-port.is-input .node-port-socket { left: -7px; }
.node-port.is-output .node-port-socket { right: -7px; }
.node-port.is-data .node-port-socket { border-radius: 50%; }
.node-port.contract-business_hours .node-port-socket { background: #8b5cf6; }
.node-port.contract-pricing .node-port-socket { background: #d97706; }
.node-port.contract-weather .node-port-socket { background: #0284c7; }
.node-port.contract-records .node-port-socket { background: #0f766e; }
.node-port.contract-appointment_action .node-port-socket { background: #7c3aed; }
.node-port.contract-voicemail_action .node-port-socket { background: #ea580c; }
.node-port.contract-call_events .node-port-socket { background: #475569; }
.node-port.contract-delivery .node-port-socket { background: #2563eb; }
.node-port.is-flow .node-port-socket {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #0c7792;
  border-right: 0;
  background: transparent;
  box-shadow: none;
}

.node-port.is-compatible-target .node-port-socket { animation: compatiblePortPulse 1.05s ease-in-out infinite; }
.node-port.is-connection-target .node-port-socket,
.node-port.is-connection-source .node-port-socket {
  animation: none;
  transform: translateY(-50%) scale(1.25);
  box-shadow: 0 0 0 5px rgba(31, 127, 71, 0.2);
}

.node-inherited-schedule {
  width: max-content;
  max-width: calc(100% - var(--node-text-offset));
  min-height: 28px;
  margin: 0;
  padding: 0.18rem 0.48rem;
  border: 1px solid #c4b5fd;
  border-radius: 999px;
  background: #f5f3ff;
  color: #5b21b6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 750;
  box-shadow: none;
}

.node-schedule-badge {
  display: flex;
  width: max-content;
  max-width: calc(100% - var(--node-text-offset));
  margin: 0.18rem 0 0 var(--node-text-offset);
  align-items: center;
}

.node-schedule-remove {
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin-left: 0.18rem;
  padding: 0;
  border: 1px solid #c4b5fd;
  border-radius: 50%;
  background: #fff;
  color: #6d28d9;
  box-shadow: none;
  line-height: 1;
}

.node-schedule-remove:hover,
.node-schedule-remove:focus-visible { background: #ede9fe; transform: none; }

.node-inherited-schedule:hover,
.node-inherited-schedule:focus-visible { background: #ede9fe; transform: none; }

.flow-node.is-selected {
  box-shadow: 0 0 0 2px rgba(219, 125, 35, 0.32), 0 10px 20px rgba(219, 125, 35, 0.16);
}

.flow-node.is-primary-selected {
  box-shadow: 0 0 0 3px rgba(219, 125, 35, 0.5), 0 12px 22px rgba(219, 125, 35, 0.2);
}

.flow-node.is-link-source {
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.35), 0 10px 20px rgba(13, 148, 136, 0.2);
}

.flow-node.is-link-target {
  box-shadow: 0 0 0 2px rgba(31, 127, 71, 0.35), 0 10px 20px rgba(31, 127, 71, 0.2);
}

.flow-node.is-compatible-link-target:not(.is-link-target) {
  box-shadow: 0 0 0 2px rgba(31, 127, 71, 0.2), 0 10px 20px rgba(31, 127, 71, 0.12);
}

@keyframes compatiblePortPulse {
  0%, 100% { transform: translateY(-50%) scale(1); filter: drop-shadow(0 0 2px rgba(31, 127, 71, 0.42)); }
  50% { transform: translateY(-50%) scale(1.28); filter: drop-shadow(0 0 7px rgba(31, 127, 71, 0.88)); }
}

@media (prefers-reduced-motion: reduce) {
  .component-palette-info,
  .node-port.is-compatible-target .node-port-socket {
    animation: none;
  }
}

.flow-node.has-validation-error {
  border-color: #c73f3f !important;
  box-shadow: 0 0 0 3px rgba(199, 63, 63, 0.2), 0 10px 20px rgba(127, 29, 29, 0.18);
}

.node-validation-marker {
  position: absolute;
  top: -0.58rem;
  left: -0.58rem;
  z-index: 7;
  width: 1.3rem;
  height: 1.3rem;
  min-width: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #c73f3f;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(127, 29, 29, 0.3);
}

.node-validation-marker:hover,
.node-validation-marker:focus-visible {
  filter: brightness(1.08);
  transform: scale(1.08);
}

.general-dialog-card {
  grid-template-rows: auto minmax(0, 1fr);
}

.general-dialog-card.is-compact {
  width: min(430px, 94vw);
}

.general-dialog-body {
  padding: 1.15rem;
}

.general-dialog-message-box {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid #bdd2bb;
  border-radius: var(--radius-md);
  background: #f2f8fa;
  color: #203522;
}

.general-dialog-message {
  margin: 0;
  line-height: 1.55;
  white-space: pre-line;
}

.general-dialog-symbol {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #dcebd9;
  color: #27552c;
  font-weight: 800;
}

.general-dialog-card.is-danger .general-dialog-message-box {
  border-color: #e5b5b0;
  background: #fff4f2;
  color: #6f211b;
}

.general-dialog-card.is-danger .general-dialog-symbol {
  background: #f5d5d1;
  color: #8c271f;
}

.general-dialog-card.is-success .general-dialog-message-box {
  border-color: #a9d5a2;
  background: linear-gradient(145deg, #f3fbf0, #fbfff9);
}

.general-dialog-card.is-success .general-dialog-symbol {
  background: #dff2da;
  font-size: 1.15rem;
}

.account-card {
  height: min(640px, calc(100vh - 2rem));
  height: min(640px, calc(100dvh - 2rem));
}

.modal-card.account-main-card {
  position: relative;
  width: min(1120px, calc(100vw - 3rem));
  height: min(760px, calc(100vh - 3rem));
  height: min(760px, calc(100dvh - 3rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  container: account-modal / inline-size;
}

@media (min-width: 900px) and (min-height: 620px) {
  .modal-card.account-main-card {
    min-width: 720px;
    min-height: 480px;
    resize: both;
  }

  .modal-card.account-main-card::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 4;
    width: 11px;
    height: 11px;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, transparent 0 3px, #78918a 3px 4px);
    opacity: 0.65;
  }
}

.node-editor-body {
  padding: 0;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

.component-dialog-layout {
  min-height: 0;
  display: block;
  height: 100%;
}

.component-dialog-content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0.86rem;
}

.component-dialog-field-panels {
  display: contents;
}

.component-dialog-panel {
  min-height: 0;
  align-content: start;
}

.component-dialog-panel + .component-dialog-panel,
.component-dialog-field-panels > .component-dialog-panel:first-child {
  margin-top: 0.3rem;
}

.component-dialog-section-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.42rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid #dfe4eb;
  border-radius: 8px;
  background: #fbfcfd;
  color: #273341;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  cursor: pointer;
}

.component-dialog-section-toggle:hover {
  border-color: #2f9e59;
  background: #f4faf6;
}

.section-toggle-icon {
  flex: none;
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: #2f9e59;
}

.section-toggle-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-toggle-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-dialog-panel-body {
  padding: 0.55rem 0.2rem 0.35rem;
}

.component-dialog-section-help {
  margin: 0 0 0.2rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Editor hierarchy: the shell/section owns the outline. Groups inside a
   section use headings, whitespace and row dividers in both studio modes. */
.component-dialog-panel .component-dialog-panel-body :is(
  fieldset,
  .helper-block,
  .appointment-summary,
  .resource-facts,
  .answering-machine-card,
  .email-sender-account-summary,
  .email-communication-account-panel,
  .email-communication-connection-card,
  .email-communication-target-summary,
  .email-communication-flow-preview,
  .email-communication-flow-step,
  .editable-websites-list,
  .infodesk-open-hours-weekly,
  .infodesk-radio-table,
  .whatsapp-template-location,
  .whatsapp-template-verification,
  .whatsapp-template-manager-layout,
  .whatsapp-template-meta-body,
  .whatsapp-template-contract,
  .whatsapp-template-variable-guide,
  .transfer-agent-card
) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.component-dialog-panel .component-dialog-panel-body :is(
  fieldset,
  .helper-block,
  .appointment-summary,
  .resource-facts,
  .answering-machine-card,
  .email-sender-account-summary,
  .email-communication-account-panel,
  .email-communication-connection-card,
  .email-communication-target-summary,
  .email-communication-flow-preview,
  .email-communication-flow-step,
  .whatsapp-template-location,
  .whatsapp-template-verification,
  .whatsapp-template-meta-body,
  .whatsapp-template-contract,
  .whatsapp-template-variable-guide,
  .transfer-agent-card
) {
  padding: 0.4rem 0;
}

.component-dialog-panel .component-dialog-panel-body fieldset > legend {
  padding-inline: 0;
}

.component-dialog-panel-body .appointment-summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

.component-dialog-panel-body .appointment-summary > .status-pill {
  justify-self: start;
}

.component-dialog-panel-body .appointment-summary > button {
  grid-column: 2;
  grid-row: 1;
}

.component-dialog-panel-body .appointment-summary > p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

.component-dialog-panel-body :is(
  .answering-machine-card + .answering-machine-card,
  .transfer-agent-card + .transfer-agent-card,
  .email-communication-connection-card + .email-communication-connection-card,
  .email-communication-flow-step + .email-communication-flow-step
) {
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
}

/* Notices keep their semantic color as a side rule, not another box. */
.component-dialog-panel .component-dialog-panel-body :is(
  .infodesk-setting-warning,
  .infodesk-ai-disclosure-notice,
  .email-communication-warning,
  .whatsapp-template-notice,
  .whatsapp-template-suggestion
) {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left-width: 3px;
  border-radius: 0;
  box-shadow: none;
}

.component-dialog-panel-fill-last:not(.hidden) {
  display: flex;
  flex-direction: column;
}

.component-dialog-panel-fill-last > #node-editor-general-fields {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* The control is the field's last child, with or without a label in front of
   it. A fixed two-row grid would place a label-less control in the auto row and
   leave the filling row empty, so the control kept its minimum height. */
.component-dialog-fill-field {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.component-dialog-fill-field > :last-child {
  flex: 1 1 auto;
  min-height: 0;
}

.component-dialog-panel-fill-last > .component-dialog-fill-field {
  flex: 1 1 auto;
}

.component-dialog-panel-fill-last > #node-editor-general-fields > .component-dialog-fill-field {
  flex: 1 1 auto;
}

.component-dialog-fill-textarea {
  min-height: 0;
  height: auto;
  resize: none;
}

.pricing-knowledge-editor-field {
  margin-top: 0.08rem;
}

.pricing-knowledge-limit {
  margin: 0;
}

.node-editor-top-row {
  display: flex;
  justify-content: end;
}

.account-main-card .modal-header {
  padding: 0.92rem 1.05rem;
  background: linear-gradient(115deg, #315f4b, #21483c);
  border-bottom-color: #183d33;
}

.account-main-card .modal-footer {
  padding: 0.72rem 1rem;
  background: #f6f8f7;
}

.account-modal-body {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #f4f7f6;
}

.account-dialog-content {
  min-width: 0;
  min-height: 100%;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 1rem;
  overflow-y: auto;
}

.account-dialog-content.is-tabbed {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.account-dialog-content.is-grid {
  grid-template-columns: 1fr;
}

.account-dialog-content.is-grid > [data-account-phone-panel] > .account-dialog-section {
  height: 100%;
}

.account-dialog-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
}

.account-dialog-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid #d8e3df;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 61, 51, 0.04);
}

.account-dialog-section h4 {
  margin: 0;
  color: #173e34;
}

.account-dialog-section > p,
.account-dialog-section > form,
.account-dialog-section > .account-record-list {
  margin-top: 0.08rem;
}

.account-eyebrow {
  display: block;
  margin-bottom: 0.2rem;
  color: #648078;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.account-tabbed-layout {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f4f7f6;
}

.account-dialog-tabs {
  min-width: 0;
  display: flex;
  gap: 0.35rem;
  padding: 0.62rem;
  overflow-x: auto;
  border-bottom: 1px solid #d8e3df;
  background: #edf3f1;
}

.account-dialog-tab {
  min-width: max-content;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.58rem 0.72rem;
  border-color: transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #536b64;
  box-shadow: none;
  text-align: left;
}

.account-dialog-tab:hover {
  transform: none;
  border-color: #cad9d4;
  background: rgba(255, 255, 255, 0.75);
}

.account-dialog-tab.is-active {
  border-color: #b8cdc6;
  background: #fff;
  color: #173e34;
  box-shadow: inset 3px 0 0 #2f745f, 0 1px 2px rgba(24, 61, 51, 0.06);
}

.account-tab-count,
.account-record-count {
  min-width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.38rem;
  border: 1px solid #cad9d4;
  border-radius: 999px;
  background: #f6faf8;
  color: #315f52;
  font-size: 0.74rem !important;
  font-weight: 700;
}

.account-dialog-panels {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.account-dialog-panel {
  padding: 0.85rem;
}

.account-dialog-panel:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.85rem;
}

.account-dialog-panel[hidden] {
  display: none;
}

.billing-dialog-context,
.account-load-warning {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.68rem 0.85rem;
  border-bottom: 1px solid #d8e3df;
  background: #fff;
}

.billing-dialog-context label {
  max-width: 34rem;
}

.account-load-warning {
  background: #fff6f4;
}

.account-form-grid,
.billing-profile-grid {
  grid-template-columns: 1fr;
}

.account-form-grid > .wide,
.billing-profile-grid > .wide,
.account-dialog-section-wide {
  grid-column: 1 / -1;
}

.account-attestation {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}

.account-attestation input {
  width: auto;
}

.account-key-values {
  display: grid;
  gap: 0.4rem;
}

.account-key-values > div,
.account-record-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid #e7eeeb;
}

.account-key-values > div:first-child,
.account-record-row:first-child {
  border-top: 0;
}

.account-key-values span,
.account-record-row > :last-child {
  color: var(--muted);
}

.account-key-values > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
}

.account-key-values > div > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.account-record-list {
  display: grid;
}

.account-record-row > span {
  overflow-wrap: anywhere;
}

.account-record-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
  color: var(--text);
}

.account-record-row small {
  color: var(--muted);
}

.account-record-actions,
.billing-status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.billing-status-line {
  align-items: baseline;
}

.billing-plan-heading {
  display: grid;
  gap: 0.4rem;
}

.billing-plan-heading > .account-eyebrow {
  margin-bottom: 0;
}

.billing-plan-heading-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.8rem;
}

.billing-plan-summary {
  background: linear-gradient(135deg, #fff, #f3faf6);
  border-color: #bdd4cb;
}

.billing-plan-price {
  color: #173e34;
  white-space: nowrap;
}

.billing-plan-price span {
  color: var(--muted);
  font-weight: 500;
}

.billing-contract-hero {
  gap: 0.8rem;
}

.billing-checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  border-block: 1px solid #d8e3df;
}

.billing-checkout-steps li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #60746d;
  font-size: 0.85rem;
}

.billing-checkout-steps li > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid #bdd4cb;
  border-radius: 50%;
}

.billing-checkout-steps .is-current {
  color: #173e34;
  font-weight: 700;
}

.billing-checkout-steps .is-current > span,
.billing-checkout-steps .is-complete > span {
  color: #fff;
  background: #286554;
  border-color: #286554;
}

.billing-payment-context h4,
.billing-payment-context p,
.pm-sandbox-notice p {
  margin: 0;
}

.billing-payment-context p,
.pm-sandbox-notice p + p {
  margin-top: 0.4rem;
}

.billing-status-detail {
  max-width: 62ch;
  margin: 0;
  color: #3f5a52;
}

.account-navigation-list {
  display: grid;
  gap: 0.45rem;
}

.account-navigation-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.68rem 0.75rem;
  border-color: #d8e3df;
  background: #f8fbfa;
  color: #173e34;
  text-align: left;
  box-shadow: none;
}

.account-navigation-item:hover {
  transform: none;
  border-color: #aac7bd;
  background: #f1f8f5;
}

.account-navigation-item > span:first-child {
  display: grid;
  gap: 0.1rem;
}

.account-navigation-item small {
  color: var(--muted);
  font-weight: 500;
}

.billing-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.billing-stat {
  min-width: 0;
  display: grid;
  /* Label, value and detail rows align across tiles in the same row. */
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 0.12rem;
  padding: 0.66rem;
  border: 1px solid #dce8e3;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.86);
}

.billing-stat > span,
.billing-stat > small {
  color: var(--muted);
}

.account-sessions-section .session-list {
  max-height: none;
}

.account-sessions-section .session-row {
  padding: 0.7rem;
  border: 1px solid #dce7e3;
  border-radius: var(--radius-sm);
  background: #f9fbfa;
}

.account-sessions-section .session-row:first-child {
  padding-top: 0.7rem;
  border-top: 1px solid #dce7e3;
}

@container account-modal (min-width: 740px) {
  .account-dialog-content.is-grid,
  .account-dialog-panel:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-tabbed-layout {
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .account-dialog-tabs {
    display: grid;
    align-content: start;
    padding: 0.8rem 0.62rem;
    overflow-x: visible;
    border-right: 1px solid #d8e3df;
    border-bottom: 0;
  }

  .account-dialog-tab {
    width: 100%;
    min-width: 0;
  }

  .account-form-grid,
  .billing-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .billing-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .account-sessions-section .session-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .modal-card.account-main-card {
    resize: none;
  }

  .account-dialog-content,
  .account-dialog-panel {
    padding: 0.7rem;
  }

  .account-dialog-modal .account-dialog-tabs {
    padding: 0.5rem 0.7rem;
    scroll-padding-inline: 0.7rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .account-dialog-modal .account-dialog-tab {
    min-height: 2.75rem;
    scroll-snap-align: start;
  }

  .account-dialog-modal .account-dialog-panels,
  .account-dialog-modal .account-dialog-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .account-dialog-modal .account-section-head,
  .account-dialog-modal .account-record-row,
  .account-dialog-modal .account-key-values > div,
  .account-dialog-modal .pm-row,
  .account-dialog-modal .account-status-row {
    align-items: stretch;
    flex-direction: column;
  }

  .account-dialog-modal .account-key-values > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-dialog-modal .account-key-values > div > strong {
    text-align: left;
  }

  .account-dialog-modal .account-record-actions,
  .account-dialog-modal .security-inline-actions,
  .account-dialog-modal .session-row-actions,
  .account-dialog-modal .pm-row-actions,
  .account-dialog-modal form > .row.right,
  .account-dialog-modal .pm-add-container > .row.right {
    width: 100%;
    justify-content: stretch;
  }

  .account-dialog-modal .account-record-actions > button,
  .account-dialog-modal .security-inline-actions > button,
  .account-dialog-modal .session-row-actions > button,
  .account-dialog-modal .pm-row-actions > button,
  .account-dialog-modal form > .row.right > button,
  .account-dialog-modal .pm-add-container > .row.right > button {
    flex: 1 1 10rem;
    min-height: 2.75rem;
  }

  .account-dialog-modal .account-dialog-toolbar > button,
  .account-dialog-modal .account-navigation-item {
    width: 100%;
    min-height: 2.75rem;
  }

  .account-dialog-modal .account-phone-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .account-dialog-modal .account-phone-summary > button {
    min-height: 2.75rem;
  }

  .account-dialog-modal .invoice-table-wrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .account-dialog-modal .modal-footer .row,
  .account-step-up-modal .modal-footer .row {
    justify-content: stretch;
  }

  .account-dialog-modal .modal-footer button,
  .account-step-up-modal .modal-footer button {
    width: 100%;
    min-height: 2.75rem;
  }

  .billing-stat-grid {
    grid-template-columns: 1fr;
  }
}

.account-address-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  border-bottom: 1px solid #dbe7ee;
  padding-bottom: 0.38rem;
}

.account-address-tab {
  min-width: 0;
  background: #fff;
  color: var(--text);
  border-color: var(--border);
  padding: 0.5rem 0.46rem;
  font-size: 0.84rem;
}

.account-address-tab.is-active {
  background: var(--accent-strong);
  color: #fff;
  border-color: var(--accent-strong);
}

.account-address-panel {
  display: grid;
  gap: 0.62rem;
}

.account-address-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.account-address-fields label {
  min-width: 0;
}

.account-empty-state {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.34rem;
  padding: 0.78rem;
  border: 1px dashed #bfd1bc;
  border-radius: var(--radius-sm);
  background: #fbfdfe;
}

.account-status-grid {
  display: grid;
  gap: 0.38rem;
}

.account-status-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #e4eef4;
  padding-bottom: 0.34rem;
}

.account-status-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.account-phone-section {
  margin-top: 0.08rem;
}

.account-phone-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 2.2rem;
}

.account-phone-summary strong {
  overflow-wrap: anywhere;
}

.account-phone-format-help {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
}

.account-phone-verify-form {
  gap: 1rem;
}

.account-phone-verification-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #c9dde3;
  border-radius: var(--radius-md);
  background: #f1f8fa;
  color: #244d58;
}

.account-phone-verification-intro > span {
  min-width: 3.1rem;
  padding: 0.42rem 0.5rem;
  border-radius: 999px;
  background: #095e74;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-align: center;
}

.account-phone-verification-intro p {
  margin: 0;
  line-height: 1.45;
}

.account-phone-code-field {
  display: grid;
  gap: 0.5rem;
  color: #24463d;
  font-weight: 750;
}

.account-phone-code-entry {
  position: relative;
  display: block;
  width: min(100%, 21rem);
}

.account-phone-code-field .account-phone-code-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: text;
  font-size: 16px !important;
}

.account-phone-code-digits {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  pointer-events: none;
}

.account-phone-code-field .account-phone-code-digits > span {
  display: grid;
  place-items: center;
  height: 3.5rem;
  border: 2px solid #9abac2;
  border-radius: 8px;
  background: #fbfdfd;
  color: #173e46;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 1.75rem !important;
  font-weight: 750;
}

.account-phone-code-input:focus + .account-phone-code-digits > .is-current {
  border-color: #087f9c;
  outline: 3px solid rgba(8, 127, 156, 0.17);
  outline-offset: 2px;
}

.account-phone-code-input[aria-invalid="true"] + .account-phone-code-digits > span {
  border-color: #b42318;
}

.account-phone-code-input:disabled + .account-phone-code-digits {
  opacity: 0.5;
}

.account-phone-verify-button {
  width: 100%;
  min-height: 3.15rem;
  font-size: 1rem;
  font-weight: 800;
}

.account-phone-verify-form .security-inline-actions {
  justify-content: center;
}

.account-phone-debug-code {
  margin: 0;
}

.workspace-version-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.68rem 0.72rem;
  border-bottom: 1px solid #d5c26f;
  background: #fff9e6;
}

.security-banner {
  margin-top: 0.2rem;
  padding: 0.68rem 0.72rem;
  border: 1px solid #d5c26f;
  border-radius: var(--radius-md);
  background: #fff9e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.security-banner-copy {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.security-banner-copy p {
  margin: 0;
}

.support-mode-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid #d99520;
  border-radius: 10px;
  background: #fff3cf;
  color: #563600;
}

.support-mode-copy,
.support-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  align-items: baseline;
}

.support-mode-actions {
  align-items: center;
  justify-content: flex-end;
}

.support-issue-badge {
  min-width: 1.28rem;
  height: 1.28rem;
  padding: 0 0.34rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

/* Superadmin entry tools keep navigation and actions fixed while large inventories scroll. */
.modal-card.modal-xlarge.superadmin-tools-card {
  width: min(1040px, calc(100vw - 2rem));
  height: min(780px, calc(100dvh - 2rem));
  grid-template-rows: auto minmax(0, 1fr);
  border-color: #b9d0da;
  background: #f5f8f9;
}

.superadmin-tools-card .modal-header {
  padding: 0.95rem 1.05rem;
  border-bottom-color: #064a5c;
  background: linear-gradient(115deg, #0b7189, #07576c);
}

.superadmin-tools-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
}

.superadmin-tool-nav {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  border-right: 1px solid #d4e1e6;
  background: linear-gradient(180deg, #edf5f7 0%, #f8faf9 100%);
}

.superadmin-tool-nav button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #49616a;
  text-align: left;
  overflow-wrap: anywhere;
  hyphens: auto;
  box-shadow: none;
}

.superadmin-tool-nav button:hover,
.superadmin-tool-nav button:focus-visible {
  transform: none;
  filter: none;
  border-color: #c6dbe3;
  background: rgba(255, 255, 255, 0.72);
  color: #123d49;
}

.superadmin-tool-nav button.is-active {
  border-color: #abcbd6;
  background: #fff;
  color: #07576c;
  box-shadow: 0 4px 14px rgba(12, 73, 89, 0.08), inset 3px 0 0 #0c7792;
}

.superadmin-tool-index {
  grid-column: 1;
  grid-row: 1;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid #c4d7de;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #69808a;
  font-size: 0.7rem !important;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.superadmin-tool-nav .pool-alert-badge {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  transform: translate(35%, 35%);
}

.superadmin-tool-nav button.is-active .superadmin-tool-index {
  border-color: #8dbac8;
  background: #e3f1f5;
  color: #07576c;
}

.superadmin-tools-shell,
.superadmin-tools-content {
  min-width: 0;
  min-height: 0;
}

.superadmin-tools-content {
  padding: 1.1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f7f9fa;
}

.superadmin-tool-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.superadmin-panel-heading,
.superadmin-subsection-heading {
  display: grid;
  gap: 0.3rem;
}

.superadmin-panel-heading {
  padding: 0.1rem 0.1rem 0.2rem;
}

.superadmin-panel-heading h4,
.superadmin-subsection-heading h4,
.superadmin-panel-heading p,
.superadmin-subsection-heading p,
.superadmin-status-row p {
  margin: 0;
}

.superadmin-panel-heading h4 {
  color: #123d49;
}

.superadmin-panel-heading p {
  max-width: 72ch;
}

.superadmin-panel-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid #d4e1e6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 51, 63, 0.04);
}

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

.superadmin-support-fields label,
.superadmin-panel-card > label {
  min-width: 0;
}

.superadmin-wide-field {
  grid-column: 1 / -1;
}

.superadmin-demo-fields {
  align-items: end;
}

.superadmin-demo-fields > label {
  align-content: start;
}

.superadmin-demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.3rem;
}

.superadmin-tools-shell:has(#superadmin-tool-panel-public-demo:not([hidden])) > .superadmin-tools-footer {
  display: none;
}

.superadmin-danger-card,
.superadmin-quarantine-card {
  border-left: 4px solid #d38b25;
}

.superadmin-component-gate-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.superadmin-component-gate-group {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid #d4e1e6;
  border-radius: 12px;
  background: #fff;
}

.superadmin-component-gate-group h4 {
  margin: 0 0 0.2rem;
}

.superadmin-component-gate-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.superadmin-component-gate-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.superadmin-component-gate-copy small {
  color: #5b7480;
}

.superadmin-pool-summary.support-fact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.superadmin-pool-summary .support-fact-row {
  min-width: 0;
  min-height: 4.4rem;
  display: grid;
  align-content: space-between;
  gap: 0.3rem;
  padding: 0.7rem;
  border: 1px solid #d4e1e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(8, 51, 63, 0.035);
}

.superadmin-pool-summary .support-fact-row span:first-child {
  color: #647a84;
}

.superadmin-pool-summary .support-fact-row strong {
  color: #123d49;
  text-align: left;
}

.superadmin-status-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.62rem 0.7rem;
  border-radius: 8px;
  background: #f2f7f8;
}

.superadmin-inventory-card {
  padding: 0;
  overflow: hidden;
}

.superadmin-inventory-card > .superadmin-subsection-heading {
  padding: 1rem 1rem 0.1rem;
}

.superadmin-inventory-card .support-resource-list {
  gap: 0;
}

.superadmin-inventory-card .support-operation-card {
  border-width: 1px 0 0;
  border-radius: 0;
  padding: 0.9rem 1rem;
  box-shadow: none;
}

.superadmin-inventory-card .support-operation-card:last-child {
  border-bottom: 0;
}

.superadmin-inventory-card .support-empty-state,
.superadmin-inventory-card > .support-resource-list > .form-error {
  margin: 0.8rem 1rem 1rem;
}

.superadmin-inventory-card .support-fact-row strong {
  max-width: 68%;
}

.superadmin-tools-footer.modal-footer {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 4rem;
  padding: 0.68rem 1rem;
  background: #fff;
}

.superadmin-tools-footer .modal-status {
  min-width: 0;
}

@media (max-width: 760px) {
  .modal-card.modal-xlarge.superadmin-tools-card {
    width: calc(100vw - 1rem);
    height: calc(100dvh - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    border-radius: 14px;
  }

  .superadmin-tools-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .superadmin-tool-nav {
    display: flex;
    gap: 0.3rem;
    padding: 0.55rem 0.65rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid #d4e1e6;
  }

  .superadmin-tool-nav button {
    width: auto;
    flex: 0 0 auto;
    display: block;
    padding: 0.55rem 0.7rem;
    white-space: nowrap;
  }

  .superadmin-tool-nav button.is-active {
    box-shadow: inset 0 -3px 0 #0c7792;
  }

  .superadmin-tool-index {
    display: none;
  }

  .superadmin-tool-nav .pool-alert-badge {
    margin-left: 0.35rem;
    transform: none;
    vertical-align: middle;
  }

  .superadmin-tools-content {
    padding: 0.8rem;
  }

  .superadmin-support-fields,
  .superadmin-pool-summary.support-fact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .superadmin-pool-summary.support-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .superadmin-panel-card {
    padding: 0.8rem;
  }

  .superadmin-inventory-card {
    padding: 0;
  }

  .superadmin-inventory-card .support-fact-row {
    display: grid;
    gap: 0.12rem;
  }

  .superadmin-inventory-card .support-fact-row strong {
    max-width: none;
    text-align: left;
  }

  .superadmin-tools-footer.modal-footer {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .superadmin-tools-footer .row {
    justify-content: stretch;
  }

  .superadmin-tools-footer button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .superadmin-pool-summary.support-fact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .superadmin-component-gate-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

.support-console {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 42;
  width: min(560px, 94vw);
  height: 100vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-left: 1px solid #d59a31;
  background: #fbfcfa;
  box-shadow: -20px 0 54px rgba(23, 37, 24, 0.24);
}

.support-console-header {
  padding: 1rem 1rem 0.86rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #ecd8ab;
  background: linear-gradient(180deg, #fff5d7 0%, #fffaf0 100%);
}

.support-console-header h2 {
  font-size: 1.2rem;
  line-height: 1.2;
}

.support-console-kicker {
  margin-bottom: 0.22rem;
  color: #8a5a00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.support-console-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.support-console-tabs {
  display: flex;
  gap: 0.18rem;
  padding: 0.48rem 0.62rem 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.support-console-tabs button {
  flex: 0 0 auto;
  padding: 0.46rem 0.58rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  box-shadow: none;
}

.support-console-tabs button:hover,
.support-console-tabs button:focus-visible {
  transform: none;
  filter: none;
  color: var(--text);
  background: #f4f9fb;
}

.support-console-tabs button.is-active {
  border-bottom-color: #b87808;
  color: #704600;
}

.support-console-body {
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem;
  display: grid;
  align-content: start;
  gap: 0.82rem;
}

.support-console-footer {
  min-height: 2.25rem;
  padding: 0.48rem 0.82rem;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
  background: #fff;
}

.support-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem;
}

.support-health-card,
.support-console-section,
.support-issue-card,
.support-operation-card,
.support-audit-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.support-health-card {
  padding: 0.7rem;
  display: grid;
  gap: 0.28rem;
  border-left-width: 4px;
}

.support-health-card.is-ok { border-left-color: #3f9a59; }
.support-health-card.is-warning { border-left-color: #d28b18; }
.support-health-card.is-danger { border-left-color: #cf4949; }
.support-health-card.is-muted { border-left-color: #94a394; }

.support-health-card strong {
  font-size: 0.84rem;
}

.support-health-card span {
  color: var(--muted);
  font-size: 0.76rem;
}

.support-console-section {
  padding: 0.8rem;
  display: grid;
  gap: 0.66rem;
}

.support-console-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.support-console-section h3 {
  font-size: 0.95rem;
}

.support-issue-list,
.support-operation-list,
.support-audit-list,
.support-resource-list {
  display: grid;
  gap: 0.52rem;
}

.support-issue-card,
.support-operation-card,
.support-audit-card {
  padding: 0.66rem;
  display: grid;
  gap: 0.4rem;
}

.support-issue-card.is-danger { border-color: #e4a2a2; background: #fff9f9; }
.support-issue-card.is-warning { border-color: #e7ca8d; background: #fffcf4; }

.support-operation-card.is-deleting {
  background: #f1f3f2;
  filter: grayscale(1);
  opacity: 0.58;
  pointer-events: none;
}

.support-card-title-row,
.support-fact-row,
.support-operation-title-row {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: flex-start;
}

.support-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  justify-content: flex-end;
}

.support-card-actions button.is-active {
  border-color: #b87808;
  background: #fff3cf;
  color: #704600;
}

.support-fact-grid {
  display: grid;
  gap: 0;
  border: 1px solid #e0e9de;
  border-radius: 8px;
  overflow: hidden;
}

.support-fact-row {
  padding: 0.48rem 0.58rem;
  border-bottom: 1px solid #e8eee6;
  font-size: 0.79rem;
}

.support-fact-row:last-child { border-bottom: 0; }
.support-fact-row span:first-child { color: var(--muted); }
.support-fact-row strong { text-align: right; overflow-wrap: anywhere; }

.support-provider-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem;
}

.support-provider-column {
  padding: 0.62rem;
  border: 1px solid #dce6ed;
  border-radius: 8px;
  background: #fafdf9;
  display: grid;
  gap: 0.28rem;
  font-size: 0.77rem;
}

.support-provider-column code,
.support-console code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.support-origination-card .modal-shell {
  gap: 0.82rem;
}

.support-origination-summary,
.support-origination-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.support-origination-summary {
  padding: 0.72rem;
  border: 1px solid #e2c783;
  border-radius: 9px;
  background: #fff9e9;
}

.support-origination-summary span {
  color: var(--muted);
  font-size: 0.8rem;
}

.support-origination-notice {
  padding: 0.72rem;
  border-left: 4px solid #d28b18;
  border-radius: 8px;
  background: #fff9e9;
  display: grid;
  gap: 0.28rem;
  font-size: 0.8rem;
}

.support-origination-confirm {
  align-items: flex-start;
}

.support-origination-results {
  display: grid;
  gap: 0.52rem;
}

.support-origination-conclusion {
  padding: 0.72rem;
  border: 1px solid #b9d4b8;
  border-radius: 9px;
  background: #f3faf2;
  display: grid;
  gap: 0.28rem;
  font-size: 0.8rem;
}

.support-origination-result {
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-left: 4px solid #94a394;
  border-radius: 9px;
  background: #fbfdfe;
  display: grid;
  gap: 0.48rem;
}

.support-origination-result.is-ok { border-left-color: #3f9a59; }
.support-origination-result.is-danger { border-left-color: #cf4949; background: #fff9f9; }

.support-empty-state {
  padding: 1.1rem;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 9px;
  background: #fbfdfe;
}

.support-audit-card {
  grid-template-columns: 8px minmax(0, 1fr);
}

.support-audit-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.34rem;
  border-radius: 50%;
  background: #b87808;
}

.support-audit-content {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

@media (max-width: 720px) {
  .support-mode-banner,
  .support-console-section-head,
  .support-card-title-row,
  .support-operation-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .support-mode-actions,
  .support-card-actions {
    justify-content: flex-start;
  }

  .support-console {
    width: 100vw;
  }

  .support-health-grid,
  .support-provider-compare {
    grid-template-columns: 1fr;
  }
}

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

.account-section-head p {
  margin: 0.12rem 0 0;
}

/* Centre a status pill on the heading line without letting its taller box push the heading down. */
.account-section-head > .security-pill {
  margin-block: -0.25rem;
}

.security-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.48rem;
  border-radius: 999px;
  border: 1px solid #dbe7ee;
  background: #fff;
  font-size: 0.76rem;
  white-space: nowrap;
}

.security-pill.good {
  border-color: #9ac89d;
  background: #eef8ec;
  color: #1d5a29;
}

.security-pill.warn {
  border-color: #d5c26f;
  background: #fff8dc;
  color: #6b5500;
}

.security-pill.bad {
  border-color: #e0a8a2;
  background: #fff1ef;
  color: #7a241d;
}

.security-detail-list,
.session-list {
  display: grid;
  gap: 0.5rem;
}

.security-detail-row,
.session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
  padding: 0.58rem 0;
  border-top: 1px solid #e4eef4;
}

.security-detail-row:first-child,
.session-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.security-detail-row strong,
.session-row strong {
  display: block;
  margin-bottom: 0.12rem;
}

.security-detail-row > :first-child,
.session-row > :first-child {
  min-width: 0;
}

.security-detail-row span,
.session-row span {
  display: block;
}

.security-inline-actions {
  display: flex;
  gap: 0.44rem;
  flex-wrap: wrap;
  align-items: center;
}

.account-inline-status {
  margin: 0.1rem 0 0;
  grid-column: 1 / -1;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.status-success {
  color: #1d5a29;
}

.status-pending {
  color: var(--muted);
}

.security-code-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.68rem;
  border: 1px dashed #bfd1bc;
  border-radius: var(--radius-sm);
  background: #fff;
}

.security-code-list code {
  display: block;
  padding: 0.34rem 0.4rem;
  border-radius: var(--radius-sm);
  background: #f5f8f4;
  font-size: 0.82rem;
}

.security-qr-wrap {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 0.72rem;
  align-items: start;
}

.security-qr-wrap img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1;
  border: 1px solid #dbe7ee;
  border-radius: var(--radius-sm);
  background: #fff;
}

.security-beginner-guide,
.security-recovery-notice {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid #dbe7e2;
  border-radius: var(--radius-sm);
  background: #f6faf8;
}

.security-setup-steps {
  margin: 0;
  padding-left: 1.35rem;
  color: #425f57;
}

.security-beginner-guide .security-setup-steps {
  margin-top: 0.45rem;
}

.security-setup-steps li + li {
  margin-top: 0.3rem;
}

.security-recovery-notice {
  color: #244f43;
}

.session-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.form-error {
  color: var(--danger);
}

.invoice-table-wrap {
  overflow-x: auto;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.invoice-table th,
.invoice-table td {
  padding: 0.62rem 0.68rem;
  border-bottom: 1px solid #e7eef3;
  text-align: left;
  vertical-align: middle;
  font-size: 0.86rem;
}

.invoice-table th {
  background: #f3f8ef;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.invoice-table tbody tr:hover {
  background: #f7fbfd;
}

.pm-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.payment-methods-dialog {
  width: min(100%, 960px);
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}

.pm-sandbox-notice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.64rem 0.75rem;
  border: 1px solid #b9d9cf;
  border-radius: var(--radius-sm);
  background: #eef8f4;
  color: var(--text);
}

.pm-sandbox-notice > span {
  flex: 0 0 auto;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pm-sandbox-notice p {
  margin: 0;
  font-size: 0.84rem;
}

.pm-empty-state {
  min-height: 0;
  padding: 0.9rem;
}

.pm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: 1px solid #e7eef3;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  background: #fbfdfe;
}

.pm-row-info {
  display: grid;
  gap: 0.12rem;
}

.pm-row-info .muted {
  font-size: 0.82rem;
}

.pm-row-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pm-default-badge {
  font-size: 0.78rem;
  color: var(--accent-strong);
  border: 1px solid #a9cfc4;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  background: #eef8f4;
  white-space: nowrap;
}

.pm-add-container {
  display: grid;
  gap: 0.9rem;
}

@media (max-width: 720px) {
  .pm-sandbox-notice {
    align-items: flex-start;
  }
}

.invoice-row {
  cursor: pointer;
}

.invoice-row.is-disabled {
  cursor: default;
  opacity: 0.72;
}

.invoice-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.invoice-number-cell {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

.invoice-credit-note-tag {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  vertical-align: middle;
}

th.invoice-amount,
td.invoice-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-status {
  display: inline-block;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  background: #f5fafc;
  white-space: nowrap;
}

.invoice-status-paid {
  color: var(--accent-strong);
  border-color: #a9cfc4;
  background: #eef8f4;
}

.invoice-status-overdue {
  color: var(--danger);
  border-color: #ddb0aa;
  background: #fbf1ef;
}

.invoice-status-void {
  color: var(--muted);
  background: #f2f4f1;
}

.modal-header-danger {
  justify-content: center;
  border-bottom-color: #8f1d16;
  background: #b42318;
  text-align: center;
}

.modal-title-icon {
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
}

.form-grid {
  display: grid;
  gap: 0.68rem;
}

.field-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.field-action-row > label {
  min-width: 0;
}

.field-action-row > button {
  white-space: nowrap;
}

.editable-websites-field {
  display: grid;
  gap: 0.5rem;
}

.editable-websites-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.7rem;
}

.editable-websites-heading p {
  margin: 0.12rem 0 0;
}

.editable-websites-list {
  display: grid;
  max-height: min(16rem, 38vh);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  scrollbar-gutter: stable;
}

.editable-website-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.58rem 0.65rem;
  border-bottom: 1px solid #e4eef4;
  cursor: pointer;
}

.editable-website-option:last-child {
  border-bottom: 0;
}

.editable-website-option input {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent-strong);
}

.editable-website-option span {
  overflow-wrap: anywhere;
}

.editable-website-option small,
.editable-website-option.is-unavailable {
  color: var(--muted);
}

.editable-websites-empty {
  margin: 0;
  padding: 0.7rem;
}

.remember-website-field {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 0.68rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.remember-website-field legend {
  padding: 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.remember-website-field label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.remember-website-field input {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent-strong);
}

.field-with-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.field-with-suffix > span {
  color: var(--muted);
  font-size: 0.88rem;
}

.helper-block {
  border: 1px dashed #b7cab5;
  background: #f8fdf6;
  border-radius: var(--radius-md);
  padding: 0.62rem;
  display: grid;
  gap: 0.55rem;
}

.helper-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.whatsapp-template-notice,
.whatsapp-template-location,
.whatsapp-template-suggestion {
  display: grid;
  gap: 0.38rem;
  padding: 0.72rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
}

.whatsapp-template-notice {
  border: 1px solid #e1c36f;
  border-left: 4px solid #c78512;
  background: #fff9e8;
}

.whatsapp-template-notice p,
.whatsapp-template-suggestion p {
  margin: 0;
  line-height: 1.45;
}

.whatsapp-template-notice strong,
.whatsapp-template-suggestion strong {
  font-size: 0.88rem;
}

.whatsapp-control-chat-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.whatsapp-control-chat-number {
  display: grid;
  gap: 0.1rem;
}

.whatsapp-control-chat-number > span {
  color: var(--muted);
  font-size: 0.76rem;
}

.whatsapp-template-location {
  border: 1px solid #d9e4ec;
  background: #f6f9fb;
  color: var(--muted);
  font-size: 0.8rem;
}

.whatsapp-template-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  color: var(--text);
  font-weight: 600;
}

.whatsapp-template-breadcrumb span:not(:last-child)::after {
  content: "›";
  margin-left: 0.28rem;
  color: #789077;
}

.whatsapp-template-breadcrumb a {
  color: #0b6f68;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.whatsapp-template-breadcrumb a::after {
  content: "›";
  margin-left: 0.28rem;
  color: #789077;
  text-decoration: none;
}

.whatsapp-template-suggestion {
  border: 1px solid #8fc9bd;
  border-left: 4px solid var(--accent);
  background: #eefbf8;
}

.whatsapp-template-suggestion strong {
  color: #08675f;
}

.whatsapp-template-verification {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.2rem;
  padding: 0.58rem 0.65rem;
  border: 1px solid #aacbc4;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
}

.whatsapp-template-verification.is-success {
  border-color: #79b993;
  background: #f0faf3;
  color: #17603b;
}

.whatsapp-template-verification.is-error {
  border-color: #dda1a1;
  background: #fff2f2;
  color: #8a2525;
}

.whatsapp-template-verification.is-info {
  color: #315a55;
}

.whatsapp-template-verification > strong {
  color: inherit;
}

.whatsapp-template-field-actions {
  align-self: end;
  flex-wrap: nowrap;
}

.whatsapp-template-verified-body {
  padding-top: 0.35rem;
  border-top: 1px solid currentColor;
  overflow-wrap: anywhere;
}

.whatsapp-template-verified-body > span {
  display: block;
  margin-bottom: 0.18rem;
  font-weight: 700;
}

.whatsapp-template-manager-body {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

#whatsapp-template-modal .modal-header .muted {
  color: inherit;
  opacity: 0.9;
  margin: 0.3rem 0 0;
}

.whatsapp-template-manager-body > .modal-status:empty {
  display: none;
}

.whatsapp-template-manager-status.is-error {
  color: #9f2424;
  font-weight: 600;
}

.whatsapp-template-manager-status.is-success {
  color: #17603b;
  font-weight: 600;
}

.whatsapp-template-manager-content,
.whatsapp-template-manager-layout,
.whatsapp-template-library,
.whatsapp-template-editor {
  min-height: 0;
  min-width: 0;
}

.whatsapp-template-manager-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.4fr);
  height: 100%;
  border: 1px solid #d9e4ec;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.whatsapp-template-library {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid #d9e4ec;
  background: #f6f9fb;
}

.whatsapp-template-library-heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.whatsapp-template-library-heading > .row {
  flex-wrap: wrap;
}

.whatsapp-template-library-heading h4,
.whatsapp-template-library-heading p,
.whatsapp-template-detail h4,
.whatsapp-template-create-form h4,
.whatsapp-template-create-form p,
.whatsapp-template-detail p {
  margin: 0;
}

.whatsapp-template-list {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  padding: 0.58rem;
  overflow-y: auto;
}

.whatsapp-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  text-align: start;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: none;
}

.whatsapp-template-row:hover,
.whatsapp-template-row:focus-visible,
.whatsapp-template-row.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: none;
  filter: none;
}

.whatsapp-template-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.whatsapp-template-row-title,
.whatsapp-template-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
}

.whatsapp-template-row-title .status-pill {
  white-space: normal;
  text-align: start;
}

.whatsapp-template-row > span:not(.whatsapp-template-row-title) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.whatsapp-template-row .is-compatible {
  color: #237348 !important;
}

.whatsapp-template-row .is-incompatible {
  color: #9f3a32 !important;
}

.whatsapp-template-editor {
  padding: 1rem;
  overflow-y: auto;
  background: #fff;
}

.whatsapp-template-detail {
  display: grid;
  gap: 0.75rem;
}

.whatsapp-template-create-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.whatsapp-template-field {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
}

.whatsapp-template-field label {
  font-weight: 600;
}

.whatsapp-template-field .muted,
.whatsapp-template-variable-guide p {
  line-height: 1.5;
}

.whatsapp-template-review-note {
  padding: 0.8rem;
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  line-height: 1.5;
}

.whatsapp-template-meta-body,
.whatsapp-template-contract,
.whatsapp-template-variable-guide {
  display: grid;
  gap: 0.38rem;
  padding: 0.7rem 0.76rem;
  border: 1px solid #d9e4ec;
  border-radius: var(--radius-sm);
  background: #f7fafc;
}

.whatsapp-template-meta-body p {
  line-height: 1.48;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.whatsapp-template-contract.is-valid {
  border-color: #83bd98;
  background: #f0faf3;
  color: #17603b;
}

.whatsapp-template-contract.is-invalid {
  border-color: #dda1a1;
  background: #fff2f2;
  color: #8a2525;
}

.whatsapp-template-variable-guide ul {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whatsapp-template-variable-guide li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: baseline;
}

.whatsapp-template-variable-guide code,
.whatsapp-template-contract code {
  font-weight: 700;
}

.whatsapp-template-create-form textarea {
  min-height: 13rem;
  resize: vertical;
}

.whatsapp-channel-immutable-values {
  display: grid;
  gap: 0.42rem;
  margin: 0;
  padding: 0.68rem 0.76rem;
  border: 1px solid #d7e2d5;
  border-radius: var(--radius-md);
  background: #f7fafc;
}

.whatsapp-channel-immutable-values > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.whatsapp-channel-immutable-values dt,
.whatsapp-channel-immutable-values dd {
  margin: 0;
}

.whatsapp-channel-immutable-values dd {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.resource-list {
  display: grid;
  gap: 0.5rem;
}

.resource-manager-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr);
  gap: 0.8rem;
  align-items: start;
}

.transfer-agent-manager-grid {
  grid-template-columns: minmax(260px, 0.85fr) minmax(390px, 1.15fr);
  gap: 1rem;
  align-items: start;
}

.transfer-agent-panel {
  display: grid;
  min-width: 0;
  gap: 0.8rem;
  align-content: start;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #f7fafc;
}

.transfer-agent-editor {
  background: #fff;
}

.transfer-agent-section-heading {
  display: grid;
  gap: 0.24rem;
  padding-bottom: 0.72rem;
  border-bottom: 1px solid #dce6ed;
}

.transfer-agent-eyebrow {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.transfer-agent-list-panel > .resource-list {
  max-height: 590px;
  overflow-y: auto;
}

.transfer-agent-card {
  display: grid;
  gap: 0.72rem;
  padding: 0.72rem;
  border: 1px solid #d7e2d5;
  border-radius: var(--radius-sm);
  background: #fff;
}

.transfer-agent-card-content {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.transfer-agent-card-content p {
  overflow-wrap: anywhere;
}

.transfer-agent-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.transfer-agent-status {
  flex: 0 0 auto;
  padding: 0.18rem 0.46rem;
  border: 1px solid #c8d8c5;
  border-radius: 999px;
  background: #f2f8fa;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
}

.transfer-agent-card-actions {
  flex-wrap: wrap;
}

.transfer-agent-destination-fields {
  display: grid;
  gap: 0.68rem;
}

.transfer-agent-form-actions {
  margin-top: 0.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #dce6ed;
}

.resource-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.62rem;
  background: #fff;
}

.resource-row.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.14);
}

.native-website-resource-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.9rem;
  padding: 0.8rem;
}

.native-website-resource-row.is-deletion-running {
  border-color: rgba(101, 119, 245, 0.48);
  background: linear-gradient(135deg, rgba(18, 185, 164, 0.035), rgba(101, 119, 245, 0.055), rgba(233, 90, 167, 0.035));
}

.native-website-resource-row.is-deletion-complete {
  border-color: rgba(30, 170, 98, 0.42);
  background: rgba(30, 170, 98, 0.045);
}

.native-website-resource-row.is-deletion-failed {
  border-color: rgba(204, 79, 79, 0.42);
}

.native-website-resource-content {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.native-website-resource-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
}

.native-website-progress {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  border: 1px solid #dfe8ec;
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: linear-gradient(135deg, #fbfffe 0%, #f8f9ff 55%, #fff9fd 100%);
}

.native-website-progress-ring {
  --website-progress: 1%;
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #6577f5 0 var(--website-progress), #e5ebef 0);
  box-shadow: 0 0.45rem 1.2rem rgba(67, 91, 133, 0.16);
}

.native-website-progress-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border-radius: inherit;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(32, 59, 78, 0.06);
}

.native-website-progress-ring span {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  font-weight: 800;
  color: #27364c;
  letter-spacing: -0.02em;
}

.native-website-progress.is-working .native-website-progress-ring {
  animation: native-website-progress-color 2.4s linear infinite, native-website-progress-pulse 1.6s ease-in-out infinite;
}

.native-website-progress.is-complete .native-website-progress-ring {
  background: conic-gradient(from -90deg, #1eaa62 0 100%, #e5ebef 0);
  box-shadow: 0 0.45rem 1.2rem rgba(30, 170, 98, 0.2);
}

.native-website-progress.is-attention .native-website-progress-ring {
  background: conic-gradient(from -90deg, #e4a22c 0 var(--website-progress), #f0e8d5 0);
}

.native-website-progress.is-failed .native-website-progress-ring {
  background: conic-gradient(from -90deg, #d95656 0 var(--website-progress), #f0dddd 0);
}

.native-website-progress-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.native-website-progress-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.native-website-progress-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #12b9a4, #6577f5 52%, #e95aa7);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
}

.native-website-progress.is-working .native-website-progress-icon {
  animation: native-website-working-icon 1.2s linear infinite;
}

.native-website-progress.is-complete .native-website-progress-icon {
  background: #1eaa62;
  box-shadow: 0 0.25rem 0.7rem rgba(30, 170, 98, 0.23);
}

.native-website-progress.is-attention .native-website-progress-icon {
  background: #d89522;
}

.native-website-progress.is-failed .native-website-progress-icon {
  background: #cc4f4f;
}

.native-website-progress-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.native-website-resource-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.operator-relaunch-status,
.operator-relaunch-form {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #7d67c7 20%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, #7d67c7 6%);
}

.operator-relaunch-status p,
.operator-relaunch-form p {
  margin: 8px 0;
}

.operator-relaunch-form {
  display: grid;
  gap: 12px;
}

.operator-relaunch-form h4 {
  margin: 0;
}

.operator-relaunch-confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.operator-relaunch-confirm input {
  flex: 0 0 auto;
  width: auto;
  margin: 0.18rem 0 0;
}

.operator-relaunch-status-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.operator-relaunch-progress {
  display: block;
  flex: 1 1 7rem;
  min-width: 6rem;
  max-width: 12rem;
  height: 0.5rem;
  margin-left: auto;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
}

.operator-relaunch-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7665d8, #4c9ae8);
}

.operator-relaunch-progress.is-indeterminate > span {
  width: 42%;
  animation: operator-relaunch-progress-travel 1.6s linear infinite;
  animation-delay: var(--operator-relaunch-animation-delay, 0ms);
  will-change: transform;
}

.operator-relaunch-progress.is-complete > span {
  width: 100%;
  opacity: 0.72;
}

@keyframes operator-relaunch-progress-travel {
  from {
    transform: translateX(-115%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .operator-relaunch-progress.is-indeterminate > span {
    width: 62%;
    animation: none;
  }
}

.operator-relaunch-elapsed {
  white-space: nowrap;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.operator-relaunch-live {
  margin: 0.8rem 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #7d67c7 22%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, #7d67c7 12%);
}

.operator-relaunch-live-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.84rem;
}

.operator-relaunch-live-head span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.operator-relaunch-live ol {
  display: grid;
  gap: 0.3rem;
  margin: 0.65rem 0 0;
  padding-left: 1.3rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.operator-relaunch-live li.is-current {
  color: var(--text);
  font-weight: 700;
}

.operator-relaunch-report {
  display: grid;
  gap: 1rem;
  white-space: normal;
}

.operator-relaunch-report > .status-pill {
  justify-self: start;
}

.operator-relaunch-report-summary {
  margin: 0;
  font-size: 0.95rem;
}

.operator-relaunch-report-section {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.operator-relaunch-report-section h4,
.operator-relaunch-report-section p {
  margin: 0;
}

.operator-relaunch-report-section ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.2rem;
}

.operator-relaunch-report-section.is-known-gaps li::marker {
  color: #a76219;
}

.operator-relaunch-diagnostic {
  margin: 0.8rem 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, #c47b16 62%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 84%, #f2b34b 16%);
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.native-website-deletion-action-label {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-weight: 700;
}

.modal-card.modal-large.website-domain-card {
  width: min(820px, 94vw);
  height: auto;
  min-height: 0;
}

.website-domain-body {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  background:
    radial-gradient(circle at 100% 0, rgba(101, 119, 245, 0.08), transparent 32%),
    radial-gradient(circle at 0 100%, rgba(18, 185, 164, 0.08), transparent 30%),
    #fbfdfd;
}

.website-domain-loading {
  display: grid;
  place-items: center;
  gap: 0.7rem;
  min-height: 260px;
  color: var(--muted);
}

.website-domain-intro {
  max-width: 650px;
}

.website-domain-intro h4,
.website-domain-choice-head h4,
.website-domain-panel h4,
.website-domain-hero h4 {
  margin: 0;
}

.website-domain-intro p,
.website-domain-choice-head p,
.website-domain-alert p,
.website-domain-panel p {
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

.website-domain-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.website-domain-choices > button {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.65rem;
  min-height: 190px;
  padding: 1.1rem;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e3e7;
  border-radius: 1rem;
  box-shadow: 0 0.7rem 1.8rem rgba(42, 70, 91, 0.08);
}

.website-domain-choices > button:hover {
  border-color: #6577f5;
  transform: translateY(-2px);
  box-shadow: 0 0.9rem 2rem rgba(67, 91, 133, 0.14);
}

.website-domain-choices > button > span:last-child {
  color: var(--muted);
  line-height: 1.45;
}

.website-domain-choice-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  aspect-ratio: 1;
  border-radius: 0.8rem;
  color: #fff;
  background: linear-gradient(135deg, #12b9a4, #6577f5 58%, #e95aa7);
  font-size: 1.4rem;
  box-shadow: 0 0.45rem 1rem rgba(101, 119, 245, 0.23);
}

.website-domain-choice-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.domain-back-link {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  color: #485a73;
  background: transparent;
  border: 0;
}

.website-domain-form {
  display: grid;
  gap: 1rem;
}

.website-domain-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.website-domain-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.website-domain-check,
.website-domain-confirmation > label:first-child {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.85rem;
  background: #fff;
  border: 1px solid #d9e4e7;
  border-radius: 0.7rem;
}

.website-domain-check input,
.website-domain-confirmation input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0.2rem;
}

.website-domain-order-summary,
.website-domain-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.website-domain-order-summary > div,
.website-domain-facts > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem;
  background: #fff;
  border: 1px solid #dbe5e8;
  border-radius: 0.75rem;
}

.website-domain-order-summary span,
.website-domain-facts span,
.website-domain-eyebrow {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.website-domain-confirmation {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  background: rgba(101, 119, 245, 0.06);
  border: 1px solid rgba(101, 119, 245, 0.22);
  border-radius: 0.8rem;
}

.website-domain-available,
.website-domain-alert,
.website-domain-operation {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
}

.website-domain-available {
  color: #11683e;
  background: #edfbf3;
  border: 1px solid #bce8ce;
}

.website-domain-alert {
  color: #7c3333;
  background: #fff4f3;
  border: 1px solid #efcfcb;
}

.website-domain-operation {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: #f4f6ff;
  border: 1px solid #d9ddf8;
}

.website-domain-operation p {
  grid-column: 1 / -1;
  margin: 0;
}

.website-domain-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(125deg, #173b45, #315776 58%, #62558d);
  border-radius: 1rem;
  box-shadow: 0 0.9rem 2.2rem rgba(31, 61, 81, 0.18);
}

.website-domain-hero.is-live {
  background: linear-gradient(125deg, #123f40, #176661 55%, #315776);
}

.website-domain-hero h4 {
  margin-top: 0.25rem;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  overflow-wrap: anywhere;
}

.website-domain-hero p {
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

.website-domain-hero-copy {
  min-width: 0;
}

.website-domain-hero-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
}

.website-domain-open-button {
  white-space: nowrap;
}

.website-domain-hero .website-domain-eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.website-domain-panel {
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dce6e8;
  border-radius: 0.9rem;
}

.website-domain-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.website-domain-step {
  display: block;
  margin-bottom: 0.2rem;
  color: #557087;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.website-domain-complete-label {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  color: #11683e;
  background: #edfbf3;
  border: 1px solid #bce8ce;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.website-domain-records {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.website-domain-record {
  display: grid;
  grid-template-columns: 2.75rem minmax(100px, 0.65fr) minmax(180px, 1.35fr) auto auto;
  gap: 0.55rem 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.65rem 0.7rem;
  background: #f5f8f8;
  border: 1px solid #e5ecee;
  border-radius: 0.65rem;
}

.website-domain-record-type {
  display: grid;
  place-items: center;
  min-height: 2.25rem;
  color: #fff;
  background: #315776;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 850;
}

.website-domain-record-field {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.website-domain-record-field > span {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.website-domain-record-field strong,
.website-domain-record-field code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.website-domain-record-field code {
  color: #263b50;
  font-size: 0.78rem;
  font-weight: 750;
}

.website-domain-copy-button {
  min-height: 2.25rem;
  padding-inline: 0.65rem;
  white-space: nowrap;
}

.website-domain-record-complete {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  color: #11683e;
  background: #dcf7e8;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 900;
}

.website-domain-hint {
  padding-left: 0.75rem;
  border-left: 3px solid #6577f5;
  color: #53657a;
  font-size: 0.86rem;
}

.website-domain-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: #f4f6ff;
  border: 1px solid #d9ddf8;
  border-radius: 0.9rem;
}

.website-domain-next-step p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.website-domain-next-step > button {
  flex: 0 0 auto;
}

.website-domain-details {
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #dce6e8;
  border-radius: 0.75rem;
}

.website-domain-details summary {
  color: #53657a;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
}

.website-domain-details .website-domain-operation {
  margin-top: 0.65rem;
}

.website-domain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.website-domain-offers {
  margin: 0;
  line-height: 1.5;
}

@keyframes native-website-progress-color {
  to { filter: hue-rotate(360deg); }
}

@keyframes native-website-progress-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes native-website-working-icon {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .native-website-progress.is-working .native-website-progress-ring,
  .native-website-progress.is-working .native-website-progress-icon {
    animation: none;
  }
}

.resource-row-main {
  display: grid;
  justify-items: start;
  justify-content: stretch;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
  flex: 1;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  text-align: left;
}

.resource-row-main:hover {
  filter: none;
  transform: none;
}

.resource-row-main strong,
.resource-row-detail {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-number-resource-detail {
  display: grid;
  gap: 0.16rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.phone-number-detail-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-number-status {
  font-weight: 700;
}

.phone-number-status.is-ok {
  color: #17643a;
}

.phone-number-status.is-warning {
  color: #a36108;
}

.phone-number-status.is-danger {
  color: #a2342c;
}

.phone-number-status.is-muted {
  color: #526578;
}

.phone-number-status-icon {
  margin-right: 0.18rem;
  font-size: 0.72em;
}

.resource-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.74rem;
  background: #fcfeff;
  align-content: start;
}

.resource-editor.empty {
  min-height: 120px;
  align-content: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  border: 1px solid #c6d8e2;
  background: #f5fafc;
  color: #405240;
}

.status-pill.is-ok {
  border-color: #98caaa;
  background: #eaf8ef;
  color: #17643a;
}

.status-pill.is-warning {
  border-color: #dfc57f;
  background: #fff8df;
  color: #815710;
}

.status-pill.is-danger {
  border-color: #e0a8a8;
  background: #fdf0f0;
  color: #9a3b3b;
}

.status-pill.is-muted {
  color: var(--muted);
}

.scheduling-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
}

.scheduling-editor-head h4 {
  overflow-wrap: anywhere;
}

.scheduling-editor #scheduling-oauth-client-fields {
  display: grid;
  gap: 0.68rem;
}

.modal-card.modal-xlarge.simple-calendar-card {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1180px, calc(100vw - 2rem));
  max-height: min(900px, calc(100dvh - 2rem));
}

.simple-calendar-subtitle {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.simple-calendar-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  background: #f7fafc;
}

.simple-calendar-toolbar h4 {
  margin: 0;
  text-align: center;
  text-transform: capitalize;
}

.simple-calendar-toolbar > button:last-child {
  justify-self: end;
}

.simple-calendar-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.45fr);
  gap: 1rem;
  align-items: stretch;
  overflow: hidden;
  padding: 1rem;
}

.simple-calendar-month-view {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.simple-calendar-weekdays,
.simple-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.simple-calendar-grid {
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
}

.simple-calendar-weekdays {
  border-bottom: 1px solid var(--border);
  background: #f4f7f9;
}

.simple-calendar-weekdays span {
  padding: 0.55rem 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.simple-calendar-day {
  min-height: 0;
  min-width: 0;
  padding: 0.35rem;
  border-right: 1px solid #e4eaee;
  border-bottom: 1px solid #e4eaee;
  background: #fff;
}

.simple-calendar-day:nth-child(7n) {
  border-right: 0;
}

.simple-calendar-day.is-outside {
  background: #f8fafb;
}

.simple-calendar-day.is-selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.simple-calendar-day-number {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0 0 0.25rem auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
}

.simple-calendar-day.is-today .simple-calendar-day-number {
  background: var(--accent);
  color: #fff;
}

.simple-calendar-day-entries {
  display: grid;
  gap: 0.22rem;
}

.simple-calendar-entry-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.28rem;
  width: 100%;
  min-height: 0;
  padding: 0.3rem 0.38rem;
  border: 1px solid #b9d6c1;
  border-radius: 0.42rem;
  background: #edf8f0;
  color: #174f2c;
  font-size: 0.7rem;
  line-height: 1.15;
  text-align: left;
}

.simple-calendar-entry-chip:hover,
.simple-calendar-entry-chip.is-selected {
  border-color: var(--accent);
  background: #dff1e4;
}

.simple-calendar-entry-chip time {
  font-weight: 800;
}

.simple-calendar-entry-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-calendar-more {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.simple-calendar-editor {
  min-width: 0;
  max-height: 100%;
  align-self: start;
  overflow-y: auto;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #f7fafc;
}

.simple-calendar-editor-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.7rem;
}

.simple-calendar-entry-source {
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.simple-calendar-editor-head h4 {
  margin-top: 0.15rem;
}

.simple-calendar-editor .inline-grid-2 > label,
.simple-calendar-editor input {
  min-width: 0;
}

.simple-calendar-attendee {
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.simple-calendar-attendee summary {
  cursor: pointer;
  font-weight: 700;
}

.simple-calendar-attendee[open] summary {
  margin-bottom: 0.65rem;
}

@media (max-width: 860px) {
  .simple-calendar-toolbar {
    grid-template-columns: 1fr auto;
  }

  .simple-calendar-toolbar h4 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .simple-calendar-toolbar > .row,
  .simple-calendar-toolbar > button:last-child {
    grid-row: 2;
  }

  .simple-calendar-body {
    grid-template-columns: 1fr;
    align-items: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .simple-calendar-month-view {
    min-height: auto;
    grid-template-rows: auto auto;
  }

  .simple-calendar-grid {
    grid-auto-rows: auto;
  }

  .simple-calendar-day {
    min-height: 82px;
    padding: 0.2rem;
  }

  .simple-calendar-entry-chip {
    grid-template-columns: 1fr;
  }

  .simple-calendar-editor {
    max-height: none;
    overflow: visible;
  }
}

.resource-facts {
  display: grid;
  gap: 0.35rem;
  border: 1px solid #dce6ed;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0.58rem 0.65rem;
  font-size: 0.83rem;
}

.resource-facts span {
  display: block;
  overflow-wrap: anywhere;
}

.appointment-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
  padding: 0.6rem 0.65rem;
  border: 1px solid #d9e4ec;
  border-radius: var(--radius-sm);
  background: #fbfdfe;
}

.appointment-summary p {
  line-height: 1.35;
  font-size: 0.86rem;
}

.appointment-summary > button {
  align-self: center;
  justify-self: end;
}

.appointment-test-panel {
  border-style: solid;
}

.appointment-test-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
}

.appointment-test-actions {
  align-self: end;
  display: flex;
  justify-content: flex-end;
}

.appointment-test-result {
  min-height: 1.3rem;
  line-height: 1.4;
}

.appointment-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.appointment-slot-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.2rem;
  border: 1px solid #b9cfdb;
  border-radius: 999px;
  padding: 0.24rem 0.48rem;
  background: #fff;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.number-search-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.68rem;
}

.number-search-results-wrap {
  border: 1px solid #d9e4ec;
  border-radius: var(--radius-md);
  background: #fcfeff;
  overflow: auto;
  max-height: min(56vh, 620px);
}

.number-search-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.number-search-table th,
.number-search-table td {
  padding: 0.62rem 0.68rem;
  border-bottom: 1px solid #e7eef3;
  text-align: left;
  vertical-align: top;
  font-size: 0.86rem;
}

.number-search-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f8ef;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.number-search-table tbody tr:hover {
  background: #f7fbfd;
}

.number-search-empty {
  text-align: center !important;
  color: var(--muted);
  padding: 1rem 0.75rem !important;
}

.number-search-number {
  font-family: var(--font-mono);
  font-weight: 600;
}

.phone-registration-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #d9e4ec;
}

.phone-reg-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.85rem;
}

.phone-reg-header h4,
.phone-reg-section h5 {
  margin: 0 0 0.35rem;
}

.phone-reg-badge {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  border: 1px solid #b9cfdb;
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  background: #f5fafc;
  white-space: nowrap;
}

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

.sticky-panel-actions {
  position: sticky;
  bottom: -0.86rem;
  z-index: 1;
  margin: 0 -0.86rem -0.86rem;
  padding: 0.74rem 0.86rem 0.86rem;
  border-top: 1px solid #dce6ed;
  background: #fff;
}

.resource-editor .sticky-panel-actions {
  bottom: -0.74rem;
  margin: 0 -0.74rem -0.74rem;
  padding-inline: 0.74rem;
  padding-bottom: 0.74rem;
  background: #fcfeff;
}

.phone-reg-section {
  display: grid;
  gap: 0.65rem;
}

.phone-reg-requirement {
  display: grid;
  gap: 0.35rem;
  border-left: 3px solid #b9cfdb;
  padding-left: 0.7rem;
}

.phone-reg-requirement legend {
  font-weight: 700;
  padding: 0;
}

.phone-reg-requirement.phone-reg-address {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  margin: 0;
  min-inline-size: 0;
}

.phone-reg-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.75rem;
}

.phone-reg-address-grid label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.phone-reg-address-grid .span-2 {
  grid-column: 1 / -1;
}

.phone-reg-requirement input[type="file"] {
  padding: 0.45rem;
  border: 1px solid #c6d8e2;
  border-radius: var(--radius-sm);
  background: #fff;
}

.phone-reg-callout {
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #b9cfdb;
  border-radius: var(--radius-sm);
  background: #f5fafc;
}

.phone-reg-callout h5 {
  margin: 0;
}

.phone-reg-callout ol,
.phone-reg-callout ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.3rem;
}

.phone-reg-callout.is-info {
  border-color: #a7c4d8;
  background: #f1f8fd;
}

.phone-reg-callout.is-success {
  border-color: #a8d3a0;
  background: #f0faee;
}

.phone-reg-callout.is-warning {
  border-color: #e0c98a;
  background: #fdf8ec;
}

.phone-reg-callout.is-danger {
  border-color: #e0a8a8;
  background: #fdf0f0;
}

.phone-reg-summary {
  display: grid;
  gap: 0.5rem;
}

.phone-reg-summary-item {
  display: grid;
  gap: 0.15rem;
  border-left: 3px solid #b9cfdb;
  padding-left: 0.7rem;
}

.phone-reg-reject {
  margin: 0;
  color: #9a3b3b;
  font-size: 0.85rem;
}

.toast-region {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 40;
  width: min(90vw, 680px);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: none;
}

dialog .toast-region {
  top: 4.75rem;
  right: 1rem;
  bottom: auto;
  left: auto;
  width: min(calc(100vw - 2rem), 420px);
  transform: none;
}

.toast-notification {
  --toast-accent: #5f7b87;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.68rem;
  width: 100%;
  max-width: min(90vw, 680px);
  margin: 0;
  padding: 0.7rem 0.75rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 55%, white);
  border-left: 4px solid var(--toast-accent);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 12px 36px rgba(9, 18, 11, 0.24);
  pointer-events: none;
}

.toast-notification.toast-error { --toast-accent: #b42318; background: #fff7f6; }
.toast-notification.toast-warning { --toast-accent: #b76e00; background: #fffaed; }
.toast-notification.toast-success { --toast-accent: #16734b; background: #f3fbf7; }
.toast-notification.toast-info { --toast-accent: #176b82; background: #f4fafc; }

.toast-icon {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--toast-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.toast-content {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.toast-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.toast-severity {
  color: var(--toast-accent);
  font-size: 0.75rem;
  line-height: 1.2;
}

.toast-repeat-count {
  display: inline-flex;
  padding: 0.06rem 0.38rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--toast-accent) 14%, white);
  color: var(--toast-accent);
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.toast-message,
.toast-detail {
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.toast-message {
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
}

.toast-detail {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.toast-occurrence {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.toast-action {
  width: fit-content;
  margin-top: 0.28rem;
  padding: 0.3rem 0.55rem;
  border-color: color-mix(in srgb, var(--toast-accent) 45%, white);
  background: #fff;
  color: var(--toast-accent);
  font-size: 0.76rem;
  pointer-events: auto;
}

.toast-dismiss {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: auto;
}

.toast-action:hover,
.toast-dismiss:hover {
  transform: none;
}

.toast-notification.is-arriving {
  animation: toast-arrive 220ms ease-out both;
}

.toast-notification.is-repeated {
  animation: toast-repeat 420ms ease-out both;
}

.toast-notification.is-leaving {
  animation: toast-leave 180ms ease-in both;
  pointer-events: none;
}

@keyframes toast-arrive {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-repeat {
  0%, 100% { transform: translateY(0); box-shadow: 0 12px 36px rgba(9, 18, 11, 0.24); }
  42% { transform: translateY(-3px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--toast-accent) 22%, transparent), 0 14px 38px rgba(9, 18, 11, 0.28); }
}

@keyframes toast-leave {
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .toast-notification.is-arriving,
  .toast-notification.is-leaving {
    animation: none;
  }

  .toast-notification.is-repeated {
    animation: toast-repeat-reduced 300ms ease-out both;
  }
}

@keyframes toast-repeat-reduced {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--toast-accent) 22%, transparent), 0 12px 36px rgba(9, 18, 11, 0.24); }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1480px) {
  .portal-header {
    grid-template-areas:
      "brand account"
      "commands commands";
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
  }

  .portal-header > .toolbar-group:not(.portal-actions) {
    grid-column: 1 / -1;
  }

  .portal-command-row {
    width: 100%;
    justify-content: flex-start;
  }

  .portal-actions,
  .portal-mode-nav {
    justify-content: flex-start;
  }

  .portal-account {
    justify-content: flex-end;
  }

}

@media (max-width: 720px) {
  .portal-shell {
    padding: 0;
  }

  .portal-header {
    grid-template-areas: "brand commands account";
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.58rem 0.75rem;
    padding: 0.68rem 0.72rem 0.72rem;
  }

  .portal-command-menu {
    grid-area: commands;
    position: relative;
    display: block;
    justify-self: end;
  }

  .portal-command-menu-toggle {
    display: inline-flex;
    min-height: 2.45rem;
    border-radius: 999px;
  }

  .portal-command-menu:not(.is-open) .portal-command-row {
    display: none;
  }

  .portal-command-row {
    position: absolute;
    top: calc(100% + 0.48rem);
    right: 0;
    z-index: 45;
    width: min(20rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 5rem);
    display: grid;
    gap: 0.55rem;
    align-items: stretch;
    padding: 0.55rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 18px 42px rgba(11, 23, 13, 0.24);
  }

  .portal-mode-nav,
  .studio-mode-switcher,
  .portal-actions {
    width: 100%;
  }

  .studio-mode-switcher button {
    flex: 1 1 0;
  }

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

  .activate-workspace-control {
    flex-direction: column;
  }

  .activate-workspace-disabled-reason {
    position: static;
    display: none;
    width: 100%;
    max-width: none;
    margin-top: 0.35rem;
    opacity: 1;
    transform: none;
  }

  .activate-workspace-control[data-disabled-reason="true"]:hover .activate-workspace-disabled-reason,
  .activate-workspace-control[data-disabled-reason="true"]:focus-visible .activate-workspace-disabled-reason,
  .activate-workspace-control[data-disabled-reason="true"]:focus-within .activate-workspace-disabled-reason {
    display: block;
  }

  .portal-header .portal-actions > button,
  .portal-header .portal-actions > .activate-workspace-control,
  .portal-header .portal-actions > .activate-workspace-control > button,
  .portal-header .portal-actions > .icon-only {
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
  }

  .mobile-button-label {
    display: inline;
  }

  .trial-status {
    justify-content: center;
    white-space: normal;
  }

  .portal-status-message {
    padding: 0.2rem 0.72rem;
    font-size: 0.82rem;
  }

  .portal-brand-mark {
    width: 34px;
  }

  .portal-brand-copy {
    display: none;
  }

  .flow-node {
    width: 230px;
  }

  .whatsapp-template-manager-body {
    overflow-y: auto;
  }

  .whatsapp-template-manager-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .whatsapp-template-create-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .whatsapp-template-library {
    border-right: 0;
    border-bottom: 1px solid #d9e4ec;
  }

  .whatsapp-template-list,
  .whatsapp-template-editor {
    max-height: none;
    overflow: visible;
  }

  .manager-modal .whatsapp-template-list {
    max-height: min(38dvh, 20rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .manager-modal .whatsapp-template-library-heading,
  .manager-modal .whatsapp-template-detail-heading {
    flex-direction: column;
  }

  .manager-modal .whatsapp-template-library-heading > .row,
  .manager-modal .whatsapp-template-detail > .row,
  .manager-modal .whatsapp-template-create-form > .row {
    width: 100%;
    justify-content: stretch;
  }

  .manager-modal .whatsapp-template-library-heading > .row > button,
  .manager-modal .whatsapp-template-detail > .row > button,
  .manager-modal .whatsapp-template-create-form > .row > button {
    flex: 1 1 8rem;
    min-height: 2.75rem;
  }

  .whatsapp-template-field-actions {
    flex-wrap: wrap;
  }

  .toolbar-group > label {
    min-width: 100%;
  }

  .profile-menu {
    left: auto;
    right: 0;
  }

  .account-address-tabs,
  .account-address-fields {
    grid-template-columns: 1fr;
  }

  .node-editor-body {
    overflow-y: auto;
  }

  .component-dialog-layout {
    min-height: 100%;
  }

  .component-dialog-section-toggle {
    min-height: 2.75rem;
  }

  .component-dialog-content {
    overflow: visible;
    padding: 0.65rem;
  }

  .node-editor-knowledge-usage {
    width: min(16rem, 58vw);
  }

  .node-editor-top-row,
  .field-action-row,
  .inline-grid-2,
  .widget-color-grid {
    grid-template-columns: 1fr;
  }

  .infodesk-pronunciation-heading,
  .infodesk-pronunciation-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.55rem 2.1rem;
    gap: 0.4rem;
  }

  .appointment-summary {
    grid-template-columns: 1fr;
  }

  .switch-inline,
  .field-action-row > button {
    justify-self: start;
  }

  .component-publish-setting {
    justify-items: start;
  }

  .infodesk-crawl-actions {
    flex-wrap: wrap;
  }

  .infodesk-crawl-header {
    flex-wrap: wrap;
  }

  .pricing-knowledge-import-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-knowledge-import-actions {
    width: 100%;
    margin-left: 0;
  }

  .pricing-knowledge-import-actions button {
    flex: 1 1 0;
    white-space: normal;
  }

  .infodesk-live-state-auth {
    grid-template-columns: 1fr;
  }

  .infodesk-radio-row {
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
  }

  .number-search-grid {
    grid-template-columns: 1fr;
  }

  .phone-reg-address-grid {
    grid-template-columns: 1fr;
  }

  .resource-manager-grid {
    grid-template-columns: 1fr;
  }

  .manager-modal .resource-manager-grid > .resource-list {
    max-height: min(34dvh, 18rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .manager-modal .manage-resource-toolbar {
    align-items: stretch;
  }

  .manager-modal .manage-resource-toolbar > button {
    flex: 1 1 11rem;
    min-height: 2.75rem;
  }

  .manager-modal .manage-resource-toolbar > .muted {
    flex-basis: 100%;
    overflow-wrap: anywhere;
  }

  .manager-modal .resource-manager-grid .resource-row:not(.native-website-resource-row) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .manager-modal .resource-manager-grid .resource-row-main {
    grid-column: 1 / -1;
  }

  .manager-modal .resource-manager-grid .resource-row > .row {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .manager-modal .resource-manager-grid .resource-row > .row > button,
  .manager-modal .resource-manager-grid .resource-row > button {
    min-height: 2.75rem;
  }

  .manager-modal .resource-editor,
  .manager-modal .transfer-agent-panel {
    min-width: 0;
  }

  .manager-modal .resource-editor .sticky-panel-actions,
  .manager-modal .transfer-agent-form-actions {
    justify-content: stretch;
  }

  .manager-modal .resource-editor .sticky-panel-actions > button,
  .manager-modal .transfer-agent-form-actions > button {
    flex: 1 1 11rem;
    min-height: 2.75rem;
  }

  .transfer-agent-manager-grid {
    grid-template-columns: 1fr;
  }

  .transfer-agent-list-panel > .resource-list {
    max-height: min(34dvh, 18rem);
  }

  .manager-modal .transfer-agent-card-actions {
    justify-content: stretch;
  }

  .manager-modal .transfer-agent-card-actions > button {
    flex: 1 1 8rem;
    min-height: 2.75rem;
  }

  .manager-modal .transfer-agent-card-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .website-domain-choices,
  .website-domain-fields,
  .website-domain-order-summary,
  .website-domain-facts,
  .website-domain-search {
    grid-template-columns: 1fr;
  }

  .website-domain-choices > button {
    min-height: 145px;
  }

  .website-domain-choice-head,
  .website-domain-hero {
    align-items: flex-start;
  }

  .website-domain-hero,
  .website-domain-next-step {
    flex-direction: column;
  }

  .website-domain-hero-actions {
    width: 100%;
    justify-content: space-between;
  }

  .website-domain-next-step > button {
    width: 100%;
  }

  .website-domain-record {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  }

  .website-domain-record-type {
    grid-row: 1 / span 2;
  }

  .website-domain-record-field {
    grid-column: 2 / -1;
  }

  .website-domain-record-value {
    grid-column: 2;
  }

  .website-domain-copy-button {
    grid-column: 3;
  }

  .website-domain-record-complete {
    display: none;
  }

  .security-banner,
  .account-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .security-detail-row,
  .session-row {
    grid-template-columns: 1fr;
  }

  .security-code-list,
  .security-qr-wrap {
    grid-template-columns: 1fr;
  }
}
.knowledge-sections { display: grid; gap: 8px; min-width: 0; }
.knowledge-section { border-top: 1px solid var(--border); min-width: 0; }
.knowledge-section > summary { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .7rem .35rem; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; list-style: none; }
.knowledge-section > summary::-webkit-details-marker { display: none; }
.knowledge-section > summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); flex: 0 0 auto; margin-left: auto; margin-right: .35rem; }
.knowledge-section[open] > summary::after { transform: rotate(45deg); }
.knowledge-section > summary:hover { background: #f1f5f7; }
.knowledge-section > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.knowledge-section-body { display: grid; gap: .45rem; padding: .25rem .35rem .65rem; }
.knowledge-section-body label { row-gap: .25rem; }
.knowledge-section-body > :is(p, .helper-text) { margin: 0; }
.knowledge-section-body > button { justify-self: start; }
.knowledge-summary-title { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.knowledge-summary-title small { font-weight: 400; }
.knowledge-badge, .knowledge-count { display: inline-block; border-radius: 6px; background: #eef2f5; color: #42515c; padding: .2rem .5rem; font-size: .8rem; font-weight: 500; }
.knowledge-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.knowledge-section > summary:has(.knowledge-count)::after { margin-left: 0; }
.knowledge-badge[data-placement="everyday"], .knowledge-badge-new { background: #e4f2e9; color: #286441; }
.knowledge-badge[data-placement="detailed"], .knowledge-badge-changed { background: #e8eefb; color: #35578a; }
.knowledge-badge-missing { background: #fff0db; color: #83521f; }
.knowledge-section.is-selected > summary { background: #eaf3f7; }
.knowledge-section textarea { min-height: 140px; resize: vertical; }
.knowledge-source-url { display: block; overflow-wrap: anywhere; font-size: 12px; }
.knowledge-capacity.is-error { color: var(--danger); }

.knowledge-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-block: .5rem; }
.knowledge-toolbar[hidden] { display: none; }
.knowledge-bulk-toolbar { background: #eaf3f7; border-radius: 6px; padding: .65rem; }
.knowledge-selection-count { margin-right: auto; }
.knowledge-category-group:not(:has([data-knowledge-section])) { display: none; }
.knowledge-category-group h3 { margin-block: .65rem .35rem; font-size: .95rem; color: var(--muted); }
.knowledge-dialog .modal-scroll-body { scrollbar-gutter: stable; overflow-anchor: none; }
.knowledge-dialog .modal-header h3 { margin: 0; }
.knowledge-dialog label { display: grid; gap: .35rem; margin: 0; min-width: 0; }
.knowledge-dialog label[hidden] { display: none; }
.knowledge-dialog input:not([type=checkbox]), .knowledge-dialog select, .knowledge-dialog textarea { box-sizing: border-box; width: 100%; max-width: 100%; }
.knowledge-dialog textarea { min-height: 6rem; }
.knowledge-dialog fieldset { display: grid; gap: .85rem; border: 0; border-top: 1px solid var(--border); padding: 1rem 0; min-width: 0; }
.knowledge-dialog label.knowledge-check { display: flex; align-items: center; gap: .75rem; }
.knowledge-section input[type=checkbox] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.knowledge-dialog summary, .knowledge-dialog legend, .knowledge-dialog p { overflow-wrap: anywhere; }
.knowledge-field-grid, .knowledge-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .85rem; min-width: 0; }
.knowledge-field-grid { row-gap: .4rem; }
.knowledge-comparison textarea { height: 100%; }
.knowledge-dialog .modal-medium .modal-scroll-body { gap: .85rem; }
.knowledge-category-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; gap: 1rem; min-width: 0; }
.knowledge-category-card { --category-ink: #0b6579; --category-tint: #e6f2f5; min-width: 0; border: 1px solid color-mix(in srgb, var(--category-ink) 28%, white); border-top: 4px solid var(--category-ink); border-radius: 10px; background: #f8fafc; overflow: hidden; }
.knowledge-category-card[data-color="1"] { --category-ink: #4f6096; --category-tint: #edf0fa; }
.knowledge-category-card[data-color="2"] { --category-ink: #7b548b; --category-tint: #f3edf7; }
.knowledge-category-card[data-color="3"] { --category-ink: #8b6527; --category-tint: #faf3e4; }
.knowledge-category-card[data-color="4"] { --category-ink: #3e7167; --category-tint: #eaf4ee; }
.knowledge-card-header { display: flex; align-items: center; gap: .5rem; padding: .85rem .75rem; background: var(--category-tint); color: var(--category-ink); }
.knowledge-card-header h4 { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.knowledge-card-impact { margin: .65rem .75rem 0; }
.knowledge-card-sections { display: grid; gap: .55rem; min-height: 4rem; margin: 0; padding: .75rem; list-style: none; }
.knowledge-section-block { display: flex; align-items: center; gap: .35rem; padding: .65rem .5rem; border: 1px solid #d9e2e8; border-radius: 7px; background: #fff; cursor: grab; box-shadow: 0 1px 2px #13202908; }
.knowledge-section-block:hover { border-color: var(--category-ink); }
.knowledge-section-block.is-dragging { opacity: .45; }
.knowledge-dialog .knowledge-drag-handle, .knowledge-board .knowledge-drag-handle { flex: 0 0 auto; width: 1.75rem; min-height: 2rem; padding: .2rem; border: 0; background: transparent; color: var(--category-ink); cursor: grab; user-select: none; touch-action: none; box-shadow: none; }
.knowledge-dialog .knowledge-drag-handle:hover, .knowledge-board .knowledge-drag-handle:hover { background: var(--category-tint); transform: none; }
.knowledge-dialog .knowledge-drag-handle[aria-pressed="true"], .knowledge-board .knowledge-drag-handle[aria-pressed="true"] { cursor: grabbing; background: var(--category-tint); outline: 2px solid var(--category-ink); }
.knowledge-board .knowledge-card-action { flex: 0 0 auto; width: 2rem; min-height: 2rem; padding: 0; border: 0; background: #ffffffb3; color: var(--category-ink); box-shadow: none; }
.knowledge-card-action:hover { background: white; transform: none; }
.knowledge-category-delete:hover { color: var(--danger); }
.knowledge-board select.knowledge-card-placement { display: block; width: calc(100% - 1.5rem); margin: .75rem .75rem 0; padding-block: .4rem; color: var(--category-ink); }
.knowledge-category-card.is-reordering { opacity: .5; }
.knowledge-board .knowledge-category-add { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; padding: 0; border-radius: 50%; position: relative; box-shadow: 0 3px 8px #13202926; }
.knowledge-category-add::before, .knowledge-category-add::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.1rem; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.knowledge-category-add::after { transform: translate(-50%, -50%) rotate(90deg); }
.knowledge-category-dialog .modal-footer .row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
@media (pointer: coarse) { .knowledge-dialog .knowledge-drag-handle, .knowledge-board .knowledge-drag-handle { width: 2.75rem; min-height: 2.75rem; } }
.knowledge-block-content { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.knowledge-block-content strong { font-weight: 600; }
.knowledge-category-card.is-drop-target { outline: 3px solid var(--category-ink); outline-offset: -2px; background: var(--category-tint); }
.knowledge-empty-category { align-self: center; padding: .75rem; text-align: center; color: var(--muted); border: 1px dashed #cad5dc; border-radius: 7px; }
@media (max-width: 720px) {
  .knowledge-field-grid, .knowledge-comparison { grid-template-columns: minmax(0, 1fr); }
  .knowledge-section > summary { flex-wrap: wrap; }
  .knowledge-summary-title { flex-basis: 50%; }
  .knowledge-badge { max-width: 100%; }
  .knowledge-dialog .modal-footer .row { flex-wrap: wrap; }
  .knowledge-dialog .knowledge-selection-count { flex-basis: 100%; }
  .knowledge-category-dialog .knowledge-selection-count { flex-basis: auto; }
}

/* The knowledge board is one authoring surface, mounted in the component
   dialog and, for cross-source organization, in its own dialog. */
.knowledge-board { display: grid; gap: .5rem; min-width: 0; }
.knowledge-board-body { display: grid; gap: .75rem; min-width: 0; }
.knowledge-board-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.knowledge-board-summary > .muted { margin-right: auto; font-variant-numeric: tabular-nums; }
.knowledge-board-scope { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: #f1f5f7; }
.knowledge-board .knowledge-board-scope button { min-height: 2rem; padding: .2rem .8rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); box-shadow: none; }
.knowledge-board .knowledge-board-scope button:hover { background: #ffffffb3; transform: none; }
.knowledge-board .knowledge-board-scope button.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 2px #13202914; }
.knowledge-board-actions { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--border); background: #fff; }
.knowledge-board-actions .knowledge-selection-count { margin-right: auto; }
.knowledge-board > .is-error:empty { display: none; }
.knowledge-board .knowledge-category-add { width: 2.5rem; height: 2.5rem; }
.knowledge-block-content small { font-variant-numeric: tabular-nums; }
.knowledge-board .knowledge-block-action { flex: 0 0 auto; width: 2rem; min-height: 2rem; padding: 0; border: 0; background: transparent; color: var(--category-ink); box-shadow: none; }
.knowledge-board .knowledge-block-action:hover { background: var(--category-tint); transform: none; }
.knowledge-section-block:has(.knowledge-block-content:hover) { border-color: var(--category-ink); }
.knowledge-block-content { cursor: pointer; }

/* Section content is authored in its own dialog: a formatted surface by
   default, with the markdown behind it one click away. */
.knowledge-markdown-field { display: grid; gap: .5rem; min-width: 0; }
.knowledge-markdown-field > label[hidden] { display: none; }
.knowledge-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .3rem; border: 1px solid var(--border); border-radius: 9px; background: #f5f8fa; }
.knowledge-editor-group { display: flex; align-items: center; gap: .15rem; }
.knowledge-editor-group + .knowledge-editor-group { margin-left: .2rem; padding-left: .45rem; border-left: 1px solid #d6e0e6; }
.knowledge-dialog .knowledge-editor-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; min-height: 0; padding: 0;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text); box-shadow: none;
}
.knowledge-dialog .knowledge-editor-button:hover:not(:disabled) { border-color: #cfdbe2; background: #fff; transform: none; }
.knowledge-dialog .knowledge-editor-button[aria-pressed="true"] { border-color: var(--accent); background: #fff; color: var(--accent); }
.knowledge-dialog .knowledge-editor-button:disabled { opacity: .45; }
.knowledge-editor-button svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.knowledge-editor-modes { display: inline-flex; margin-left: auto; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: #eaf0f3; }
.knowledge-dialog .knowledge-editor-modes button { min-height: 1.8rem; padding: .15rem .75rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); box-shadow: none; }
.knowledge-dialog .knowledge-editor-modes button:hover { background: #ffffffb3; transform: none; }
.knowledge-dialog .knowledge-editor-modes button.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 2px #13202914; }
.knowledge-link-bar { display: flex; align-items: center; gap: .4rem; }
.knowledge-link-bar[hidden] { display: none; }
.knowledge-link-bar input { flex: 1; min-width: 0; }
.knowledge-rich-editor {
  min-height: 18rem; max-height: 60vh; padding: .75rem .85rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  overflow-wrap: anywhere; resize: vertical;
}
.knowledge-rich-editor[hidden] { display: none; }
.knowledge-rich-editor:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.knowledge-rich-editor[contenteditable="false"] { background: #f7fafb; color: var(--muted); }
.knowledge-content-dialog .knowledge-markdown-editor { min-height: 18rem; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); resize: vertical; }
/* The dialog body owns scrolling; both authoring modes expand with content. */
.knowledge-content-dialog :is(.knowledge-rich-editor, .knowledge-markdown-editor) {
  max-height: none;
  overflow-y: hidden;
  resize: none;
}
.knowledge-markdown-preview { min-height: 18rem; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; background: #fbfdfe; overflow-wrap: anywhere; }
.knowledge-markdown-preview[hidden] { display: none; }
:is(.knowledge-markdown-preview, .knowledge-rich-editor) :is(h1, h2, h3, h4, h5, h6) { margin: .75rem 0 .35rem; }
:is(.knowledge-markdown-preview, .knowledge-rich-editor) > :first-child { margin-top: 0; }
:is(.knowledge-markdown-preview, .knowledge-rich-editor) p { margin: 0 0 .6rem; }
:is(.knowledge-markdown-preview, .knowledge-rich-editor) :is(ul, ol) { margin: 0 0 .6rem; padding-left: 1.4rem; }
:is(.knowledge-markdown-preview, .knowledge-rich-editor) blockquote { margin: 0 0 .6rem; padding-left: .75rem; border-left: 3px solid var(--accent); color: var(--muted); }
:is(.knowledge-markdown-preview, .knowledge-rich-editor) code { padding: .05rem .3rem; border-radius: 4px; background: #eef2f5; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.knowledge-content-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.knowledge-content-meta > .muted { margin-right: auto; font-variant-numeric: tabular-nums; }
.knowledge-save-status { margin-right: auto; }
.knowledge-content-dialog .knowledge-content-delete { margin-right: auto; color: var(--danger); }
@media (max-width: 720px) {
  .knowledge-board-scope { width: 100%; }
  .knowledge-board .knowledge-board-scope button { flex: 1; }
}

/* Inside the board each category is its own tinted panel, so a column of them
   reads as separate containers rather than one continuous list. */
.knowledge-board { container: knowledge-board / inline-size; }
.knowledge-board .knowledge-category-board { position: relative; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
/* The insertion line states where a dragged category lands, which an outline
   around the card it passes over cannot say. */
.knowledge-insertion-line { position: absolute; z-index: 2; height: 3px; margin-top: -1px; border-radius: 3px; background: var(--accent); pointer-events: none; }
.knowledge-insertion-line::before { content: ""; position: absolute; top: 50%; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); }
.knowledge-insertion-line[hidden] { display: none; }
.knowledge-board .knowledge-category-card { border: 1px solid color-mix(in srgb, var(--category-ink) 32%, white); border-radius: 12px; background: var(--category-tint); }
/* Grip and name on the first line, the knowledge-type choice under them, so a
   long category name keeps the whole panel width. */
.knowledge-board .knowledge-card-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: .35rem; row-gap: .1rem; padding: .55rem .7rem .25rem; background: transparent; }
/* A category name is a phrase, not a code, so it wraps between words and keeps
   the whole panel width to itself. */
.knowledge-board .knowledge-card-header h4 { font-size: .92rem; letter-spacing: .01em; overflow-wrap: break-word; }
.knowledge-board select.knowledge-card-placement { grid-column: 2 / -1; grid-row: 2; justify-self: start; width: auto; min-width: 9.5rem; margin: 0; padding-block: .25rem; border-color: transparent; background: transparent; }
.knowledge-board select.knowledge-card-placement:hover { border-color: var(--border); background: #fff; }
.knowledge-board .knowledge-card-sections { gap: 0; min-height: 0; padding: 0 .7rem .5rem; }
.knowledge-board .knowledge-section-block { gap: .5rem; padding: .3rem .35rem; border: 0; border-radius: 6px; background: transparent; box-shadow: none; }
.knowledge-board .knowledge-section-block:hover { background: #ffffffa6; }
.knowledge-board .knowledge-section-block .knowledge-block-content { display: flex; align-items: baseline; gap: .5rem; }
.knowledge-board .knowledge-drag-handle, .knowledge-board .knowledge-block-action { opacity: 0; transition: opacity .12s; }
.knowledge-board .knowledge-section-block:hover .knowledge-drag-handle,
.knowledge-board .knowledge-section-block:hover .knowledge-block-action,
.knowledge-board .knowledge-drag-handle:focus-visible, .knowledge-board .knowledge-block-action:focus-visible { opacity: 1; }
.knowledge-board .knowledge-card-header .knowledge-drag-handle, .knowledge-board .knowledge-card-action { opacity: 1; }
.knowledge-board .knowledge-empty-category { padding: .35rem; border: 0; text-align: left; }
.knowledge-board .knowledge-card-header .knowledge-card-action { opacity: 0; transition: opacity .12s; }
.knowledge-board .knowledge-category-card:hover .knowledge-card-action,
.knowledge-board .knowledge-card-action:focus-visible { opacity: 1; }
.knowledge-board .knowledge-card-sections { padding-left: 2.2rem; }
.knowledge-board .knowledge-card-impact { margin: 0 .7rem; }

/* Given the room of a large dialog the same list flows into columns, so many
   categories can be arranged and compared without scrolling. Each column starts
   a new run of categories, so every card keeps its separating rule. */
@container knowledge-board (min-width: 720px) {
  .knowledge-board .knowledge-category-board { display: block; columns: 24rem; column-gap: 1rem; }
  .knowledge-board .knowledge-category-card { break-inside: avoid; margin-bottom: .6rem; }
}

/* Guided knowledge review favors reading; editing and organization are optional. */
.guided-knowledge-review .knowledge-markdown-preview,
.guided-knowledge-content .knowledge-markdown-preview { min-height: 0; }
.guided-knowledge-review .knowledge-section-body { gap: .65rem; }
.guided-knowledge-review .knowledge-section .knowledge-section { margin-top: .6rem; }
.guided-knowledge-review .knowledge-section .knowledge-section summary { font-size: .85rem; padding: .55rem .75rem; }
.guided-knowledge-review .knowledge-source-url { margin: .25rem 0; font-size: .75rem; }
.guided-manual-knowledge textarea { height: 9rem; max-height: 24rem; }
.guided-knowledge-settings { margin-top: .6rem; }
.guided-knowledge-settings summary { cursor: pointer; color: var(--muted); margin-bottom: .5rem; }
.guided-greeting { margin: .5rem 0; padding: .6rem .9rem; border-left: 3px solid var(--accent); }
.guided-inline-actions[hidden] { display: none; }

button[data-crawl-cancel] {
  display: flex;
  width: fit-content;
  justify-self: center;
  margin-inline: auto;
}

[data-crawl-cancel][hidden],
[data-a1-cancel-crawl][hidden] {
  display: none !important;
}

body.wait-cursor [data-crawl-cancel]:enabled,
.guided-phone-guide.is-crawling [data-a1-cancel-crawl]:enabled {
  cursor: pointer;
}