.dt-wrapper {
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  background: var(--surface, #ffffff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  box-shadow: var(--soft-shadow, 0 2px 8px rgba(0,0,0,0.04));
}

.dt-scroll {
  overflow-x: auto;
  overflow-y: auto;
}

.dt-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 870px;
  width: 100%;
}

.dt-thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.dt-thead tr {
  background: #f2f7fb;
  background: var(--surface-mute, #f2f7fb);
}

.dt-th {
  color: #70839a;
  cursor: default;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  padding: 13px 14px;
  text-align: left;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.dt-th--sortable {
  cursor: pointer;
}

.dt-th--sortable:hover {
  color: #21354d;
  color: var(--ink, #21354d);
}

.dt-th--sorted::after {
  content: '\25B2';
  font-size: 9px;
  margin-left: 4px;
}

.dt-th--sorted-desc::after {
  content: '\25BC';
  font-size: 9px;
  margin-left: 4px;
}

.dt-filter-row {
  background: #f2f7fb;
  background: var(--surface-mute, #f2f7fb);
}

.dt-filter-cell {
  padding: 4px 8px;
}

.dt-filter-input {
  background: #ffffff;
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 8px;
  color: #21354d;
  color: var(--ink, #21354d);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 4px 8px;
  text-transform: none;
  width: 100%;
  box-sizing: border-box;
}

.dt-filter-input:focus {
  border-color: rgba(25, 179, 159, 0.42);
  outline: none;
}

.dt-tbody tr {
  cursor: default;
}

.dt-tbody tr:hover td {
  background: rgba(25, 179, 159, 0.06);
}

.dt-row--clickable {
  cursor: pointer;
}

.dt-row--striped:nth-child(even) td {
  background: rgba(241, 246, 250, 0.5);
}

.dt-td {
  border-bottom: 1px solid #ebf1f6;
  color: #21354d;
  color: var(--ink, #21354d);
  font-size: 13px;
  padding: 13px 14px;
  vertical-align: middle;
}

.dt-footer {
  background: #ffffff;
  border-top: 1px solid #dce7f1;
  border-top: 1px solid var(--line, #dce7f1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 10px 14px;
}

.dt-footer-info {
  color: #6d8299;
  color: var(--ink-muted, #6d8299);
  font-size: 12px;
}

.dt-pagination {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
}

.dt-page-btn {
  background: #ffffff;
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 8px;
  color: #3b546f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 30px;
  min-width: 30px;
  padding: 0 8px;
}

.dt-page-btn:hover:not(:disabled) {
  background: #f2f7fb;
  background: var(--surface-mute, #f2f7fb);
}

.dt-page-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.dt-page-btn--active {
  background-image: linear-gradient(138deg, #1bc0ab 0%, #1491a6 100%);
  border-color: transparent;
  color: #ffffff;
}

.dt-page-ellipsis {
  color: #8aa0b5;
  color: var(--ink-soft, #8aa0b5);
  padding: 0 4px;
}

.dt-page-size-select {
  background: #ffffff;
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 8px;
  color: #21354d;
  color: var(--ink, #21354d);
  font-size: 12px;
  font-weight: 700;
  margin-right: 10px;
  padding: 4px 8px;
}

.dt-empty {
  color: #6d8299;
  color: var(--ink-muted, #6d8299);
  padding: 24px;
  text-align: center;
}
@keyframes skeleton-shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

@keyframes skeleton-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.skeleton-shimmer {
  animation: skeleton-shimmer 1.2s infinite linear;
  background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
  background-size: 800px 100%;
  border-radius: 3px;
}

.skeleton-fade-in {
  animation: skeleton-fade-in 0.3s ease-in;
}

/* Table skeleton */

.skeleton-table-wrap {
  min-width: 870px;
}

.skeleton-table-wrap > div {
  border-radius: 5px;
}

/* Card skeleton */

.skeleton-card-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.skeleton-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* List skeleton */

.skeleton-list-container {
  padding: 0;
}

.skeleton-list-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  gap: 12px;
}

.skeleton-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.skeleton-list-content {
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
}
.inbound-inbox {
  padding: var(--space-5);
  padding: var(--space-5);
}

.inbound-inbox__count {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ── Tabs ────────────────────────────────────── */

.inbound-inbox__tabs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.inbound-inbox__tabs button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 42px;
  padding: 0 18px 10px;
  position: relative;
  text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease,
    background-color 180ms ease;
}

.inbound-inbox__tabs button:hover {
  color: var(--brand-deep);
  color: var(--brand-deep);
}

.inbound-inbox__tabs button.active {
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  border: 0;
  border-radius: 10px;
  border-bottom: 3px solid transparent;
  box-shadow: 0 14px 24px rgba(20, 145, 166, 0.24);
  color: var(--surface);
  color: var(--surface);
  padding: var(--space-2) 18px;
  padding: var(--space-2) 18px;
  transition: background-image 200ms ease, box-shadow 200ms ease,
    color 200ms ease;
}

/* ── Filter bar ──────────────────────────────── */

.inbound-inbox__filters {
  -ms-flex-align: end;
      align-items: end;
  background: var(--surface-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  box-shadow: var(--soft-shadow);
  display: -ms-grid;
  display: grid;
  gap: var(--space-3);
  gap: var(--space-3);
  -ms-grid-columns: (minmax(170px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 18px;
  padding: var(--space-4);
  padding: var(--space-4);
}

.inbound-inbox__filters label {
  color: var(--ink-muted);
  color: var(--ink-muted);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inbound-inbox__search-input {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  color: var(--ink);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  min-height: 38px;
  outline: none;
  padding: 0 var(--space-3);
  padding: 0 var(--space-3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.inbound-inbox__search-input:focus {
  border-color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(25, 179, 159, 0.16);
}

.inbound-inbox__search-input:-ms-input-placeholder {
  color: var(--ink-soft);
  color: var(--ink-soft);
}

.inbound-inbox__search-input::placeholder {
  color: var(--ink-soft);
  color: var(--ink-soft);
}

.inbound-inbox__filters .secondary {
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 38px;
  text-transform: uppercase;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.inbound-inbox__filters .secondary:hover {
  border-color: var(--brand);
  border-color: var(--brand);
  color: var(--brand-deep);
  color: var(--brand-deep);
}

/* ── Table ──────────────────────────────────── */

.inbound-inbox__table-wrap {
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  box-shadow: var(--soft-shadow);
  overflow: auto;
}

.inbound-inbox__table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
  width: 100%;
}

.inbound-inbox__table thead tr {
  background: var(--surface-mute);
  background: var(--surface-mute);
}

.inbound-inbox__table th, .inbound-inbox__table td {
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  padding: 14px var(--space-3);
  padding: 14px var(--space-3);
  text-align: left;
  vertical-align: top;
}

.inbound-inbox__table th {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inbound-inbox__table tbody tr {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.inbound-inbox__table tbody tr:hover td {
  background: rgba(25, 179, 159, 0.06);
}

.inbound-inbox__table tbody tr.selected td {
  background: rgba(25, 179, 159, 0.11);
}

.inbound-inbox__table .preview {
  max-width: 280px;
  white-space: pre-wrap;
  word-break: break-word;
}

.inbound-inbox__table .empty {
  color: var(--ink-soft);
  color: var(--ink-soft);
  padding: var(--space-5);
  padding: var(--space-5);
  text-align: center;
}

/* ── Assignment cell ─────────────────────────── */

.assignment-cell {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-2);
  gap: var(--space-2);
}

.assignment-cell__select {
  min-width: 140px;
}

.assignment-cell__save {
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(20, 145, 166, 0.20);
  color: var(--surface);
  color: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 34px;
  padding: 0 14px;
  text-transform: uppercase;
  transition: box-shadow 160ms ease, opacity 160ms ease;
}

.assignment-cell__save:hover {
  box-shadow: 0 12px 24px rgba(20, 145, 166, 0.30);
}

.assignment-cell__save:active {
  opacity: 0.85;
}

/* ── Pagination ─────────────────────────────── */

.inbound-inbox__pagination {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin-top: var(--space-4);
  margin-top: var(--space-4);
}

.inbound-inbox__pagination button {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 36px;
  padding: 0 var(--space-4);
  padding: 0 var(--space-4);
  transition: border-color 140ms ease, color 140ms ease,
    background-color 140ms ease, box-shadow 140ms ease;
}

.inbound-inbox__pagination button:not(:disabled):hover {
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(20, 145, 166, 0.22);
  color: var(--surface);
  color: var(--surface);
}

.inbound-inbox__pagination button:disabled {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-color: var(--line);
  border-color: var(--line);
  color: var(--ink-soft);
  color: var(--ink-soft);
  cursor: default;
  opacity: 0.55;
}

.inbound-inbox__pagination span {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 0 var(--space-1);
  padding: 0 var(--space-1);
}

/* ── Thread timeline ─────────────────────────── */

.inbound-inbox__events {
  border-top: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: var(--space-4);
  padding-top: var(--space-4);
}

.inbound-inbox__events h3 {
  color: var(--ink);
  color: var(--ink);
  font-size: var(--text-lg);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  margin: 0 0 var(--space-2);
}

.inbound-inbox__events p {
  color: var(--ink-muted);
  color: var(--ink-muted);
}

.inbound-inbox__events ul {
  margin: var(--space-2) 0 0;
  margin: var(--space-2) 0 0;
  padding-left: 18px;
}

.inbound-inbox__events li {
  color: var(--ink);
  color: var(--ink);
  margin-bottom: 6px;
}

.inbound-inbox__empty-cell {
  padding: 0;
}

.inbound-inbox__loading {
  color: var(--ink-soft);
  color: var(--ink-soft);
  padding: 48px 24px;
  text-align: center;
}

.inbound-inbox__no-events {
  color: var(--ink-soft);
  color: var(--ink-soft);
  padding: var(--space-6);
  padding: var(--space-6);
  text-align: center;
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 960px) {
  .inbound-inbox {
    padding: 14px;
  }

  .inbound-inbox__filters {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }

  .inbound-inbox__pagination {
    -ms-flex-pack: center;
        justify-content: center;
  }
}
.no-plans {
  color: #607892;
  font-size: 15px;
  font-weight: 600;
  padding: 36px 0;
  text-align: center;
}

.pricing-plans {
  display: -ms-grid;
  display: grid;
  gap: var(--space-4);
  gap: var(--space-4);
  -ms-grid-columns: (minmax(260px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: var(--space-5);
  padding: var(--space-5);
}

.pricing-plan {
  background: #ffffff;
  border: 1px solid #dbe6f0;
  border-radius: var(--radius-lg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 42px rgba(15, 33, 56, 0.12);
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: 26px 18px var(--space-6);
  padding: 26px 18px var(--space-6);
  position: relative;
  text-align: center;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px rgba(15, 33, 56, 0.18);
}

.pricing-plan.popular {
  border: 2px solid #1ac0aa;
  box-shadow: 0 24px 56px rgba(19, 133, 155, 0.22);
}

.plan-popular-badge {
  background-image: linear-gradient(135deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 12px rgba(19, 133, 155, 0.3);
  color: #ffffff;
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.1em;
  padding: 6px 18px;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
}

.plan-current-badge {
  background: #1ac0aa;
  border-radius: 6px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: var(--space-1) 10px;
  padding: var(--space-1) 10px;
  position: absolute;
  right: 12px;
  text-transform: uppercase;
  top: 12px;
  z-index: 1;
}

.plan-title {
  color: #1f334e;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.plan-monthly {
  color: #7288a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-per-user-wrapper {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(19, 133, 155, 0.28);
  color: #ffffff;
  margin: 1.4rem auto;
  max-width: 260px;
  padding: 1.1rem var(--space-4);
  padding: 1.1rem var(--space-4);
}

.plan-per-user-price {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.plan-per-user-desc {
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-per-local-number-price, .plan-per-thousand-minutes-price {
  color: #516983;
  font-size: var(--text-base);
  font-size: var(--text-base);
  font-weight: 600;
}

.plan-per-local-number-price {
  margin-bottom: var(--space-3);
  margin-bottom: var(--space-3);
}

.plan-per-thousand-minutes-price {
  margin-bottom: 2.2rem;
}

.plan-select-btn {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
  border: none;
  border-radius: var(--radius-sm);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(19, 133, 155, 0.25);
  color: #ffffff;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-8);
  padding: var(--space-3) var(--space-8);
  text-transform: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.plan-select-btn:hover {
  box-shadow: 0 10px 26px rgba(19, 133, 155, 0.35);
  opacity: 0.92;
}

.plan-select-btn:active {
  opacity: 0.85;
}

.plan-select-btn.current, .plan-select-btn:disabled {
  background: #d0d8e0;
  box-shadow: none;
  color: #7288a0;
  cursor: default;
}

.plan-select-btn.current:hover, .plan-select-btn:disabled:hover {
  box-shadow: none;
  opacity: 1;
}

/* Feature Comparison Matrix */

.feature-comparison {
  margin: 0 var(--space-5) 28px;
  margin: 0 var(--space-5) 28px;
  overflow-x: auto;
}

.feature-comparison table {
  border-collapse: collapse;
  width: 100%;
}

.feature-comparison thead tr {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
}

.feature-comparison th {
  color: #ffffff;
  font-size: var(--text-base);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 14px 18px;
  text-align: center;
}

.feature-comparison th:first-child {
  text-align: left;
}

.feature-comparison tbody tr:nth-child(even) {
  background: #f4f8fb;
}

.feature-comparison tbody tr:hover {
  background: #e8f4f7;
}

.feature-comparison td {
  border-bottom: 1px solid #e0e8ef;
  color: #516983;
  font-size: var(--text-base);
  font-size: var(--text-base);
  font-weight: 500;
  padding: var(--space-3) 18px;
  padding: var(--space-3) 18px;
  text-align: center;
}

.feature-comparison td:first-child {
  color: #1f334e;
  font-weight: 600;
  text-align: left;
}

.feature-comparison .feature-check {
  color: #1ac0aa;
  font-size: 18px;
  font-weight: 700;
}

.feature-comparison .feature-dash {
  color: #b0bcc8;
  font-size: 18px;
}

.feature-comparison .feature-value {
  color: #1f334e;
  font-weight: 600;
}

@media (max-width: 600px) {
  .pricing-plans {
    gap: var(--space-3);
    gap: var(--space-3);
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    padding: var(--space-3);
    padding: var(--space-3);
  }

  .feature-comparison {
    margin: 0 var(--space-3) var(--space-5);
    margin: 0 var(--space-3) var(--space-5);
  }

  .feature-comparison th, .feature-comparison td {
    padding: 10px 10px;
    font-size: var(--text-sm);
    font-size: var(--text-sm);
  }
}
.thread-list {
  overflow-y: auto;
  overflow-x: hidden;
  background: #fbfdff;
}

/* A row is a <button> so the keyboard reaches it without hand-rolling
   role/tabIndex/onKeyPress, which is also what jsx-a11y asks for. */

.thread-row {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid #edf2f7;
  border-left: 3px solid transparent;
  padding: 0.7rem 14px;
  cursor: pointer;
  transition: background-color 0.15s ease
}

.thread-row:hover {
  background-color: rgba(25, 143, 150, 0.05);
}

.thread-row:focus {
  outline: none;
  background-color: rgba(25, 143, 150, 0.05);
}

.thread-row.active {
  background-color: rgba(25, 143, 150, 0.08);
  border-left-color: #198f96;
}

.thread-row__top {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--space-2);
  gap: var(--space-2);
}

.thread-row__name {
  color: #253d58;
  font-size: 15px;
  font-weight: 600;
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-row.active .thread-row__name {
  color: #198f96;
  font-weight: 700;
}

.thread-row__time {
  color: #9aabc0;
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.thread-row__bottom {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--space-2);
  gap: var(--space-2);
  margin-top: 3px;
}

.thread-row__preview {
  color: #7f93ab;
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  line-height: 1.3;
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.thread-row__preview.unread {
  color: #253d58;
  font-weight: 600;
}

.thread-row__unread-pill {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 18px;
  padding: 0 5px;
  height: 18px;
  border-radius: 9px;
  background: #198f96;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.thread-row__flags {
  margin-top: 5px;
}

/* Amber, and deliberately not a channel: `channel-badge/` renders SMS and
   WhatsApp only, and the mockups show this marker alongside one of them. */

.thread-row__unidentified {
  display: inline-block;
  background: #fff3e0;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.thread-row .channel-badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}
.thread-search-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid #e1eaf3;
  background: #ffffff;
  padding: 0.3rem 14px;
}

.thread-search {
  -ms-flex-positive: 1;
      flex-grow: 1;
  border-radius: 8px;
  border: 1px solid #d4e2ef;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.thread-search:focus-within {
  border-color: #198f96;
}

.thread-list-filters {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space-2);
  gap: var(--space-2);
  border-bottom: 1px solid #e1eaf3;
  background: #ffffff;
  padding: 0.5rem 14px;
}

.thread-list-filters .chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #597088;
  background: #ffffff;
  border: 1px solid #dfe3ee;
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease
}

.thread-list-filters .chip:hover {
  border-color: #198f96;
}

.thread-list-filters .chip:focus {
  outline: none;
  border-color: #198f96;
}

.thread-list-filters .chip.on {
  background: rgba(25, 143, 150, 0.1);
  border-color: #198f96;
  color: #198f96;
}
.thread-info {
  position: relative;
  background: #ffffff;
  border-bottom: 1px solid #e6e9f2;
}

.thread-info__header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--space-2);
  gap: var(--space-2);
  padding: 12px 20px;
}

.thread-info__back {
  display: none;
  background: transparent;
  border: none;
  padding: 8px 12px 0;
  cursor: pointer;
}

.thread-info__avatar {
  width: 36px;
  height: 36px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 50%;
  background: rgba(25, 143, 150, 0.12);
  color: #198f96;
  font-size: 13px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

.thread-info__identity {
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
}

.thread-info__name {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--space-2);
  gap: var(--space-2);
  color: #253d58;
  font-size: 15px;
  font-weight: 700;
}

.thread-info__name-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-info__subtitle {
  color: #7f93ab;
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis

  /* A shut window is the reason a send will be refused, so it is not just
     more grey metadata. */
}

.thread-info__subtitle.closed {
  color: #b45309;
  font-weight: 600;
}

/* Same amber marker as the sidebar rows, and for the same reason it is not a
   channel: `channel-badge/` renders SMS and WhatsApp only. */

.thread-info__unidentified {
  background: #fff3e0;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.thread-info .channel-badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}

.thread-info__action {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: 1px solid #dfe3ee;
  border-radius: 7px;
  background: #ffffff;
  color: #4b5570;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer
}

.thread-info__action:hover {
  background: rgba(25, 143, 150, 0.06);
}

.thread-info__action.primary {
  background: #198f96;
  border-color: #198f96;
  color: #ffffff;
}

.thread-info__action.primary:hover {
  background: #157a80;
}

.thread-info__action[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* The picker drops out of the header rather than opening a modal: linking has
   to happen without leaving the conversation. */

.thread-info__picker {
  position: absolute;
  right: 20px;
  top: 100%;
  z-index: 20;
  width: 280px;
  background: #ffffff;
  border: 1px solid #e6e9f2;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(37, 61, 88, 0.14);
  padding: 8px;
}

.thread-info__picker-search {
  width: 100%;
  border: 1px solid #dfe3ee;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 9px
}

.thread-info__picker-search:focus {
  outline: none;
  border-color: #198f96;
}

.thread-info__picker-list {
  max-height: 240px;
  overflow-y: auto;
  margin-top: 6px;
}

.thread-info__picker-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  padding: 6px 8px;
  cursor: pointer
}

.thread-info__picker-item:hover, .thread-info__picker-item:focus {
  outline: none;
  background: rgba(25, 143, 150, 0.08);
}

.thread-info__picker-name {
  display: block;
  color: #253d58;
  font-size: 13px;
  font-weight: 600;
}

.thread-info__picker-number {
  display: block;
  color: #9aabc0;
  font-size: 11px;
}

.thread-info__picker-empty {
  color: #9aabc0;
  font-size: 12px;
  padding: 10px 8px;
  text-align: center;
}

.thread-info__error {
  background: #fdecea;
  color: #b3261e;
  font-size: 12px;
  padding: 7px 20px;
}

@media (max-width: 767px) {
  .thread-info__back {
    display: block;
  }
}
.messages-message-history-wrapper {
  position: relative;
  -ms-flex: 1;
      flex: 1;
  min-height: 0;
  display: -ms-flexbox;
  display: flex;
}

.messages-message-history {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 2px;
  background: #f0f5fa;
  -ms-flex: 1;
      flex: 1;
  -webkit-overflow-scrolling: touch;
  scroll-beacon: smooth;
}

/* ===== Message bubbles ===== */

.message-history-item {
  max-width: 68%;
  padding: 10px 14px;
  margin-bottom: 0;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: message-pop 0.2s ease-out
}

.message-history-item.incoming {
  -ms-flex-item-align: start;
      align-self: flex-start;
  background: #ffffff;
  color: #253d58;
  border-radius: 16px 16px 16px 4px;
  border: 1px solid #e1eaf3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.message-history-item:not(.incoming) {
  -ms-flex-item-align: end;
      align-self: flex-end;

  /* Darkened from #198f96, which only reached 3.9:1 against white text.
       This is 4.96:1, clearing WCAG AA for body text. */
  background: #157c82;
  color: #ffffff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 1px 3px rgba(21, 124, 130, 0.28);
}

@keyframes message-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.history-item-body {
  line-height: 1.45;
  font-size: var(--text-base);
  font-size: var(--text-base);
}

.history-item-time {
  font-size: 10px;
  margin-top: 3px;
  opacity: 0.75;
}

.message-history-item.incoming .history-item-time {
  color: #7e92aa;
  text-align: left;
}

.message-history-item:not(.incoming) .history-item-time {
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
}

/* ===== Date separators ===== */

.history-date-item {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  color: #8da3b8;
  font-size: 11px;
  font-weight: 600;
  background: rgba(141, 163, 184, 0.14);
  border-radius: 999px;
  padding: 4px 14px;
  margin: 0.75rem 0 0.75rem;
}

/* ===== Typing indicator ===== */

.typing-indicator {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-1);
  gap: var(--space-1);
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e1eaf3;
  border-radius: 16px 16px 16px 4px;
  margin-top: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.typing-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b0c4d8;
  animation: typing-bounce 1.2s infinite ease-in-out
}

.typing-indicator__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ===== Scroll-to-bottom button ===== */

.scroll-to-bottom-button {
  position: absolute;
  bottom: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d4e2ef;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  z-index: 10
}

.scroll-to-bottom-button:hover {
  background: #f5f9fc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* ===== Channel badge + delivery status ===== */

.history-item-meta {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.message-history-item.incoming .history-item-meta {
  -ms-flex-pack: start;
      justify-content: flex-start;
}

.message-history-item:not(.incoming) .history-item-meta {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

/* The badge carries its own background, so it stays legible on both the white
   incoming bubble and the teal outgoing one without a per-bubble override. */

.channel-badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: inline-block;
  white-space: nowrap;
}

.message-status {
  font-size: 11px;
  white-space: nowrap;
}

/* On the white incoming bubble, status keeps its semantic palette. */

.message-status--pending, .message-status--sending, .message-status--sent, .message-status--delivered {
  color: #9e9e9e;
}

.message-status--read {
  color: #1565c0;
}

.message-status--failed, .message-status--undelivered {
  color: #c62828;
}

.message-status--send_outcome_unknown {
  color: #ef6c00;
}

/* Outgoing bubbles are #157c82. The semantic colours above sit at roughly
   1.5:1 against that, so they are lifted to tints that stay readable while
   still reading as neutral / positive / error. */

.message-history-item:not(.incoming) .message-status {
  color: rgba(255, 255, 255, 0.85);
}

.message-history-item:not(.incoming) .message-status--read {
  color: #ffffff;
}

.message-history-item:not(.incoming) .message-status--failed, .message-history-item:not(.incoming) .message-status--undelivered {
  color: #ffd6d6;
}

.message-history-item:not(.incoming) .message-status--send_outcome_unknown {
  color: #ffe0b2;
}
/* Mockup F. Accent is the app's teal #198f96, not the mockups' indigo --
   same call tasks 13, 14 and 15 made. */

.template-picker {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 12px 14px 14px;
  background: #ffffff;
  border-top: 1px solid #e1eaf3;
  overflow-y: auto;
}

.template-picker__notice {
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff8e6;
  border: 1px solid #f0dcae;
  color: #6b5417;
  font-size: 13px;
  line-height: 1.45;
}

.template-picker__notice-icon {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.35;
}

.template-picker__notice-text b {
  font-weight: 600;
}

.template-picker__label {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c8ea0;
}

.template-picker__window {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.template-picker__empty {
  margin-top: 8px;
  padding: 14px;
  border: 1px dashed #d4e2ef;
  border-radius: 8px;
  color: #7c8ea0;
  font-size: 13px;
  text-align: center;
}

.template-picker__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.template-picker__tpl {
  border: 1px solid #d4e2ef;
  border-radius: 8px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.template-picker__tpl.selected {
  border-color: #198f96;
  box-shadow: 0 0 0 1px rgba(25, 143, 150, 0.25);
  background: #f4fbfb;
}

.template-picker__tpl-head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: start;
      align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.template-picker__tpl-head:disabled {
  cursor: default;
}

.template-picker__tpl-name {
  font-size: 13px;
  font-weight: 600;
  color: #2b3a4a;
}

.template-picker__lang {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #e6f3f4;
  color: #198f96;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.template-picker__tpl-body {
  font-size: 13px;
  line-height: 1.45;
  color: #566878;
}

.template-picker__vars {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 11px;
}

.template-picker__var {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 3px;
  -ms-flex: 1 1 160px;
      flex: 1 1 160px;
  min-width: 0;
}

.template-picker__var-label {
  font-size: 11px;
  color: #7c8ea0;
}

.template-picker__var input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #d4e2ef;
  border-radius: 6px;
  font-size: 13px;
  color: #2b3a4a;
  background: #ffffff;
  box-sizing: border-box;
}

.template-picker__var input:focus {
  outline: none;
  border-color: #198f96;
}

/* UI-E2E-010: an empty variable is marked, and SEND TEMPLATE stays dead. */

.template-picker__var.missing input {
  border-color: #e3b7b7;
  background: #fffafa;
}

.template-picker__preview {
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: 6px;
  background: #f2f6fa;
  color: #2b3a4a;
  font-size: 13px;
  line-height: 1.5;
}

.template-picker__foot {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  gap: 8px;
  margin-top: 11px;
}

.template-picker__button {
  padding: 8px 15px;
  border: 1px solid #d4e2ef;
  border-radius: 6px;
  background: #ffffff;
  color: #566878;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.template-picker__button:hover:not(:disabled) {
  border-color: #b9cfe2;
}

.template-picker__button.primary {
  border-color: #198f96;
  background: #198f96;
  color: #ffffff;
}

.template-picker__button.primary:hover:not(:disabled) {
  background: #157a80;
  border-color: #157a80;
}

.template-picker__button:disabled {
  opacity: 0.5;
  cursor: default;
}
.messages-new {
  border-top: 1px solid #e1eaf3;
  background: #ffffff;
  padding: 0.5rem 14px;
}

.messages-new-form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--space-2);
  gap: var(--space-2);
}

.messages-new-form .input-text {
  -ms-flex: 1;
      flex: 1;
  border-radius: 22px;
  border: 1px solid #d4e2ef;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.messages-new-form .input-text:focus-within {
  border-color: #198f96;
}

/* Mockup G: the composer once the 24-hour WhatsApp window has closed. The box
   is visibly dead rather than merely unresponsive, and "Choose template"
   expands mockup F in its place (test-plan GAP-U2). */

.messages-new--picker {
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
}

.messages-new__blocked-notice {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #f2f6fa;
  color: #566878;
  font-size: 13px;
  line-height: 1.45;
}

.messages-new__blocked-input {
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border: 1px solid #e1eaf3;
  border-radius: 22px;
  background: #f7fafc;
  color: #9aa9b8;
  font-size: 14px;
  cursor: not-allowed;
}

.messages-new__choose-template {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid #198f96;
  border-radius: 6px;
  background: #ffffff;
  color: #198f96;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.messages-new__choose-template:hover {
  background: #f0f9fa;
}

.messages-new__error {
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 6px;
  background: #fdecea;
  color: #a3372c;
  font-size: 13px;
}
/* Mockup B. The accent is the app's teal, not the mockups' indigo -- the
   mockups inherited #4f46e5 from the premium-redesign palette, which does not
   exist on this branch (same call as tasks 13 and 14). */
.new-conversation {
  width: 430px;
  max-width: 92vw;
  border-radius: 14px;
}
.new-conversation__head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #eef0f6;
}
.new-conversation__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f2a44;
}
.new-conversation__head p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #8d96ae;
}
.new-conversation__body {
  padding: 16px 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 14px;
}
.new-conversation__group {
  position: relative;
}
.new-conversation__label {
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7492;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.new-conversation__field, .new-conversation__input {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  color: #26304a;
}
.new-conversation__input:-ms-input-placeholder {
  color: #b3bacb;
}
.new-conversation__input::placeholder {
  color: #b3bacb;
}
.new-conversation__input:focus {
  border-color: #198f96;
  outline: none;
}
.new-conversation__recipient-name {
  font-weight: 600;
}
.new-conversation__recipient-number {
  color: #a3abc2;
}
.new-conversation__clear {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #198f96;
  font-size: 12px;
  cursor: pointer;
}
.new-conversation__suggestions {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  max-height: 190px;
  overflow-y: auto;
  margin-top: 4px;
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(20, 25, 45, 0.14);
}
.new-conversation__suggestion {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
      align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.new-conversation__suggestion:hover {
  background: rgba(25, 143, 150, 0.08);
}
.new-conversation__suggestion-name {
  font-size: 12.5px;
  color: #26304a;
}
.new-conversation__suggestion-number {
  margin-left: auto;
  font-size: 11px;
  color: #8d96ae;
}
.new-conversation__channels {
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.new-conversation__channel {
  -ms-flex: 1;
      flex: 1;
  padding: 11px;
  border: 1.5px solid #dfe3ee;
  border-radius: 10px;
  background: #ffffff;
  text-align: center;
  cursor: pointer;
}
.new-conversation__channel.selected {
  border-color: #198f96;
  background: rgba(25, 143, 150, 0.08);
}
.new-conversation__channel[disabled] {
  background: #f7f8fc;
  opacity: 0.62;
  cursor: not-allowed;
}
.new-conversation__channel-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #26304a;
}
.new-conversation__channel-sub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: #8d96ae;
}
.new-conversation__tip {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #fde9ae;
  border-radius: 8px;
  background: #fff8e6;
  font-size: 11.5px;
  line-height: 1.5;
  color: #92610b;
}
.new-conversation__error {
  padding: 8px 10px;
  border: 1px solid #f3c2c2;
  border-radius: 8px;
  background: #fdf0f0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #b3261e;
}
.new-conversation__foot {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  gap: 9px;
  padding: 12px 20px 16px;
  border-top: 1px solid #eef0f6;
}
.new-conversation__button {
  padding: 7px 14px;
  border: 1px solid #dfe3ee;
  border-radius: 7px;
  background: #ffffff;
  font-size: 12.5px;
  color: #26304a;
  cursor: pointer;
}
.new-conversation__button.primary {
  border-color: #198f96;
  background: #198f96;
  color: #ffffff;
}
.new-conversation__button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
/* ===== Messages page layout ===== */
.messages {
  height: calc(100vh - 206px);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 340px minmax(0, 1fr);
      grid-template-columns: 340px minmax(0, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* ===== Sidebar (left column) ===== */
.messages__sidebar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  border-right: 1px solid #e1eaf3;
  background: #fbfdff;
}
.messages__sidebar > .thread-search-wrapper, .messages__sidebar > .thread-list-filters {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
/* The rows are the only thing that scrolls: search, "+ New conversation" and
   the filter chips stay put while the rep scrolls the inbox. */
.messages__sidebar > .thread-list {
  -ms-flex: 1;
      flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.messages__new-conversation {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin: 0 12px 8px;
  padding: 9px 12px;
  border: 1px dashed #198f96;
  border-radius: 8px;
  background: transparent;
  color: #198f96;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.messages__new-conversation:hover {
  background: #e8f4f5;
}
/* ===== Chat pane (right column) ===== */
.messages__chat {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  background: #f0f5fa;
}
.messages__chat > .thread-info {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.messages__chat > .messages-message-history {
  -ms-flex: 1;
      flex: 1;
  min-height: 0;
}
/* No conversation open yet: the empty-state panel takes the whole pane. */
.messages__chat > .empty-state {
  -ms-flex: 1;
      flex: 1;
  min-height: 0;
}
.messages__chat > .messages-new {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
/* ===== Mobile: drill-down navigation ===== */
@media (max-width: 767px) {
  .messages {
    height: calc(100vh - 140px);
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    border-radius: 0;
    position: relative;
    overflow: hidden;
  }

  .messages__sidebar, .messages__chat {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* Sidebar starts visible, chat is off-screen right */
  .messages--mobile-view-list .messages__sidebar {
    transform: translateX(0);
  }
  .messages--mobile-view-list .messages__chat {
    transform: translateX(100%);
  }

  /* Chat slides in, sidebar slides out left */
  .messages--mobile-view-chat .messages__sidebar {
    transform: translateX(-100%);
  }
  .messages--mobile-view-chat .messages__chat {
    transform: translateX(0);
  }
}
/* Conversations page — revamp design system */

.conversations {
  height: calc(100vh - 206px);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 320px minmax(0, 1fr);
      grid-template-columns: 320px minmax(0, 1fr);
  overflow: hidden;
}

.conversations-panel-header {
  -ms-flex-align: center;
      align-items: center;
  background: var(--surface);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  color: var(--ink);
  display: -ms-flexbox;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Contact list panel */

.conversations-contact-list-panel {
  border-right: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.conversations-contact-list {
  background: var(--surface-mute);
  background: var(--surface-mute);
  -ms-flex: 1;
      flex: 1;
  overflow-y: auto;
}

.conversations-search {
  background: var(--surface);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.conversations-search input {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  color: var(--ink);
  font-size: 13px;
  height: 38px;
  outline: none;
  padding: 0 14px;
  transition: border-color 120ms ease, background-color 120ms ease;
  width: 100%;
}

.conversations-search input:focus {
  background: var(--surface);
  background: var(--surface);
  border-color: rgba(25, 179, 159, 0.42);
}

.conversations-contact {
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.conversations-contact:hover {
  background: rgba(25, 179, 159, 0.06);
}

.conversations-contact.active {
  background: rgba(25, 179, 159, 0.1);
  border-left-color: var(--brand);
  border-left-color: var(--brand);
}

.conversations-contact-avatar {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
  border-radius: 999px;
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  height: 36px;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 36px;
}

.conversations-contact-info {
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
}

.conversations-contact-name {
  color: var(--ink);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversations-contact-number {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 2px;
}

/* Timeline panel */

.conversations-timeline-panel {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.conversations-timeline-header {
  -ms-flex-align: center;
      align-items: center;
  background: var(--surface);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.conversations-timeline-header-name {
  color: var(--ink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.conversations-timeline-header-number {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
}

.conversations-back {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  display: none;
  font-size: 13px;
  font-weight: 600;
  gap: 4px;
  padding: 4px 0;
}

.conversations-timeline {
  background: var(--surface-soft);
  background: var(--surface-soft);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex: 1;
      flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* Message timeline items (chat bubbles) */

.conversations-timeline-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-bottom: 8px;
}

.conversations-timeline-item.incoming {
  -ms-flex-align: start;
      align-items: flex-start;
}

.conversations-timeline-item.outgoing {
  -ms-flex-align: end;
      align-items: flex-end;
}

.conversations-timeline-bubble {
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 72%;
  padding: 8px 14px;
}

.conversations-timeline-item.incoming .conversations-timeline-bubble {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  color: var(--ink);
  color: var(--ink);
}

.conversations-timeline-item.outgoing .conversations-timeline-bubble {
  background: #eaf2fb;
  color: var(--ink);
  color: var(--ink);
}

.conversations-timeline-meta {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 11px;
  color: var(--ink-soft);
  color: var(--ink-soft);
  gap: 6px;
  margin-top: 4px;
}

.conversations-timeline-item.outgoing .conversations-timeline-meta {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

/* Call timeline items */

.conversations-timeline-call {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
}

.conversations-timeline-call-header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  color: var(--ink);
  gap: 8px;
}

.conversations-timeline-call-meta {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 12px;
  margin-left: auto;
}

.conversations-timeline-call audio {
  margin-top: 8px;
  width: 100%;
}

.conversations-timeline-call-transcript {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: 13px;
  font-style: italic;
  margin: 8px 0 0;
}

/* Empty states */

.conversations-empty {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 40px;
  padding: 32px;
  text-align: center;
}

/* Loading skeletons */

.conversations-skeleton {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  padding: 16px;
}

.conversations-skeleton-avatar {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-radius: 999px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 36px;
  width: 36px;
}

.conversations-skeleton-lines {
  -ms-flex: 1;
      flex: 1;
}

.conversations-skeleton-line {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-radius: 6px;
  height: 12px;
  margin-bottom: 6px;
}

.conversations-skeleton-line:nth-child(1) { width: 60%; }

.conversations-skeleton-line:nth-child(2) { width: 40%; }

.conversations-skeleton-bubble {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-radius: 12px;
  height: 48px;
  margin-bottom: 8px;
  max-width: 60%;
}

.conversations-skeleton-bubble:nth-child(1) { width: 50%; }

.conversations-skeleton-bubble:nth-child(2) { width: 65%; }

.conversations-skeleton-bubble:nth-child(3) { width: 80%; }

.conversations-skeleton-bubble:nth-child(4) { width: 50%; }

.conversations-skeleton-bubble:nth-child(5) { width: 65%; }

.conversations-skeleton-timeline {
  padding: 16px;
}

/* Mobile: drill-down between contact list and timeline */

@media (max-width: 960px) {
  .conversations {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: auto;
        grid-template-rows: auto;
    height: auto;
    min-height: calc(100vh - 180px);
  }

  .conversations-contact-list-panel.hidden, .conversations-timeline-panel.hidden {
    display: none;
  }

  .conversations-contact-list-panel {
    border-right: none;
  }

  .conversations-back {
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}
/* SMS Templates — extracted from inline styles, using revamp.css custom properties */

.sms-templates {
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh - 64px);
  overflow: hidden;
}

.sms-templates__panel {
  border-radius: 0;
  border-right: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-width: 300px;
  overflow-y: auto;
  width: 300px;
}

.sms-templates__panel-header {
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.sms-templates__title {
  font-size: var(--text-lg);
  font-size: var(--text-lg);
  font-weight: 600;
}

.sms-templates__form-panel {
  -ms-flex: 1;
      flex: 1;
  overflow-y: auto;
}

/* Template list */

.sms-template-list {
  padding: 0;
}

.sms-template-list__item {
  border-left: 3px solid transparent;
}

.sms-template-list__item--selected {
  background-color: var(--surface-mute) !important;
  background-color: var(--surface-mute) !important;
  border-left: 3px solid var(--brand-deep);
  border-left: 3px solid var(--brand-deep);
}

/* Template form */

.sms-template-form__actions {
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-2);
  gap: var(--space-2);
}
/* Tasks page — extracted from inline styles, using revamp.css custom properties */

.tasks-page {
  padding: var(--space-4);
  padding: var(--space-4);
}

.tasks-page__header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.tasks-page__title {
  margin: 0;
}

/* Table column widths */

.tasks-page__col-status {
  width: 110px;
}

.tasks-page__col-priority {
  width: 100px;
}

.tasks-page__col-due {
  width: 150px;
}

.tasks-page__col-assigned {
  width: 160px;
}

.tasks-page__col-actions {
  width: 60px;
}

/* KanbanBoard */

.tasks-kanban__drop-hint {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  padding: 24px 0;
  text-align: center;
}

/* TaskCard */

.tasks-card__row {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.tasks-card__body {
  -ms-flex: 1;
      flex: 1;
  padding-right: var(--space-2);
  padding-right: var(--space-2);
}

.tasks-card__title {
  font-weight: 500;
  margin-bottom: var(--space-1);
  margin-bottom: var(--space-1);
}

.tasks-card__assignee {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
  margin-bottom: var(--space-1);
}

.tasks-card__priority {
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  text-transform: capitalize;
}

/* FilterBar */

.tasks-filterbar {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space-4);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.tasks-filterbar__chips {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-2);
  gap: var(--space-2);
}

.tasks-filterbar__view-toggle {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}
:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Border-radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Typography scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 32px;

  /* Brand colors */
  --brand: #19b39f;
  --brand-deep: #117f89;
  --brand-soft: #daf4ef;
  --ink: #1f2f46;
  --ink-muted: #5f738c;
  --ink-soft: #8194aa;
  --surface: #ffffff;
  --surface-soft: #f5f9fc;
  --surface-mute: #f1f6fa;
  --line: #dce6ef;
  --line-strong: #c7d6e5;
  --sidebar: #14233a;
  --sidebar-line: #24344f;
  --card-shadow: 0 22px 48px rgba(19, 37, 59, 0.12);
  --soft-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
}

* {
  box-sizing: border-box;
}

/* Form controls do not inherit font-family from their ancestors — browsers
   substitute the system UI font. Without this, every button, input, select and
   textarea in the app rendered in Arial while the surrounding text used
   Manrope, which is visible wherever a label sits next to its input or a
   button sits beside a heading. */

button, input, optgroup, select, textarea {
  font-family: inherit;
}

html, body, #root {
  min-height: 100%;
}

html, body {
  background: radial-gradient(circle at 20% 10%, #ddf8f4 0%, transparent 36%),
    radial-gradient(circle at 90% 0%, #e4ebff 0%, transparent 34%),
    linear-gradient(160deg, #f6fbfd 0%, #f3f8fc 45%, #edf5fb 100%);
  color: #1f2f46;
  color: var(--ink);
  font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-size: var(--text-base);
  line-height: 1.45;
  margin: 0;
  padding: 0;
}

h2 {
  color: #1f2f46;
  color: var(--ink);
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

a {
  color: inherit;
}

/* --- Merged from index.css: reset & utilities --- */

input:invalid {
  box-shadow: none;
}

.hide {
  display: none !important;
}

.bolder {
  font-weight: 500;
}

.flag-icon {
  width: 1.33333333em;
  height: 1em;
}

.private-layout {
  background: transparent;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  min-height: 100vh;
}

.private-main {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
}

.layout-wrapper {
  -ms-flex: 1;
      flex: 1;
  margin-top: 0 !important;
  overflow-y: auto;
  padding: 24px 30px 30px;
  padding: var(--space-6) 30px 30px;
}

.page-frame {
  min-width: 0;
}

.app-sidebar {
  background: linear-gradient(196deg, #1a2c46 0%, #14233a 44%, #111d30 100%);
  border-right: 1px solid #24344f;
  border-right: 1px solid var(--sidebar-line);
  box-shadow: 26px 0 60px rgba(8, 16, 30, 0.26);
  color: #d5e1f0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 100vh;
  /* The nav + account + plan card can be taller than the viewport (the manager
     role has nine nav items). Without this the plan card rendered past the
     bottom of the dark panel, onto the light page background, and stretched
     the document. The nav list scrolls instead (see
     .app-sidebar-section--scroll) so the plan card stays pinned and visible. */
  overflow: hidden;
  padding: 24px 18px 20px;
  padding: var(--space-6) 18px var(--space-5);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 276px;
  z-index: 5;
}

.app-sidebar-section--scroll {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-sidebar-section--scroll::-webkit-scrollbar {
  width: 8px;
}

.app-sidebar-section--scroll::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar-section--scroll::-webkit-scrollbar-thumb {
  background: rgba(213, 225, 240, 0.16);
  border-radius: 4px;
}

.app-sidebar-section--scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(213, 225, 240, 0.28);
}

.app-brand {
  -ms-flex-align: center;
      align-items: center;
  border: 1px solid rgba(154, 181, 214, 0.22);
  border-radius: 18px;
  border-radius: var(--radius-lg);
  color: #ffffff;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  gap: var(--space-3);
  margin-bottom: 22px;
  padding: 12px 12px;
  padding: var(--space-3) var(--space-3);
  text-decoration: none;
}

.app-brand-mark {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
  border-radius: 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 22px rgba(24, 190, 168, 0.36);
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 38px;
  -ms-flex-pack: center;
      justify-content: center;
  width: 38px;
}

.app-brand-mark svg {
  height: 17px;
  width: 17px;
}

.app-brand-mark svg path {
  fill: #ffffff !important;
}

.app-brand-name {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-brand-caption {
  color: #8ea6c3;
  font-size: 11px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-top: 4px;
  margin-top: var(--space-1);
  text-transform: uppercase;
}

.app-sidebar-section {
  margin-top: 8px;
  margin-top: var(--space-2);
}

.app-sidebar-section-title {
  color: #7f95b3;
  font-size: 11px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  padding: 0 10px;
  text-transform: uppercase;
}

.app-sidebar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 6px;
}

.sidebar-link {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  border-radius: var(--radius-md);
  color: #cadaef;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-size: var(--text-base);
  font-weight: 600;
  gap: 12px;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 12px;
  padding: 0 var(--space-3);
  text-decoration: none;
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease,
    color 140ms ease;
  width: 100%;
}

.sidebar-link:hover {
  background: rgba(145, 169, 198, 0.18);
  border-color: rgba(145, 169, 198, 0.22);
  color: #ffffff;
}

.sidebar-link.active {
  background-image: linear-gradient(
    135deg,
    rgba(24, 190, 168, 0.36) 0%,
    rgba(20, 131, 164, 0.4) 100%
  );
  border-color: rgba(85, 209, 193, 0.44);
  box-shadow: 0 14px 24px rgba(11, 31, 58, 0.22);
  color: #ffffff;
}

.sidebar-link-icon {
  height: 15px;
  width: 15px;
}

.sidebar-link-icon path {
  fill: currentColor !important;
}

.sidebar-link-badge {
  -ms-flex-align: center;
      align-items: center;
  background: #ffffff;
  border-radius: 999px;
  color: #0f6f80;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 11px;
  font-size: var(--text-xs);
  font-weight: 700;
  height: 22px;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left: auto;
  min-width: 22px;
  padding: 0 6px;
}

.sidebar-link--ghost {
  border-top: 1px dashed rgba(154, 181, 214, 0.3);
  border-radius: 0;
  margin-top: 8px;
  margin-top: var(--space-2);
  padding-top: 12px;
  padding-top: var(--space-3);
}

.app-plan-card {
  background: linear-gradient(
    135deg,
    rgba(24, 190, 168, 0.08) 0%,
    rgba(20, 131, 164, 0.05) 50%,
    rgba(10, 20, 34, 0.38) 100%
  );
  border: 1px solid rgba(24, 190, 168, 0.22);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(24, 190, 168, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  margin-top: auto;
  padding: 14px 14px 16px;
  padding: 14px 14px var(--space-4);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.app-plan-card:hover {
  border-color: rgba(24, 190, 168, 0.38);
  box-shadow: 0 0 28px rgba(24, 190, 168, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-plan-card-header {
  margin-bottom: 10px;
}

.app-plan-card-label {
  color: #87a0bd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.app-plan-card-name {
  color: #f1f7ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.app-plan-card-meta {
  color: #9eb2cc;
  font-size: 12px;
  margin-top: 6px;
}

.app-plan-card-usage {
  margin: 12px 0 14px;
}

.app-plan-card-usage-label {
  -ms-flex-align: center;
      align-items: center;
  color: #9eb2cc;
  display: -ms-flexbox;
  display: flex;
  font-size: 11px;
  font-weight: 600;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 6px;
}

.app-plan-card-usage-bar {
  background: rgba(10, 20, 34, 0.6);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.app-plan-card-usage-fill {
  background: linear-gradient(90deg, #18bea8 0%, #1691a5 100%);
  border-radius: 999px;
  height: 100%;
  min-width: 2px;
  transition: width 400ms ease;
}

.app-plan-card-actions {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.app-plan-card-cta {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(24, 190, 168, 0.28);
  color: #ffffff;
  display: -ms-flexbox;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.02em;
  min-height: 36px;
  padding: 0 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

.app-plan-card-cta:hover {
  box-shadow: 0 8px 22px rgba(24, 190, 168, 0.4);
  transform: translateY(-1px);
}

.app-plan-card-link {
  color: #9eb2cc;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 140ms ease;
}

.app-plan-card-link:hover {
  color: #d5e1f0;
  text-decoration: underline;
}

.header {
  -ms-flex-align: center;
      align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  margin: 18px 26px 0;
  min-height: 74px;
  padding: 12px 16px;
  padding: var(--space-3) var(--space-4);
}

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

.header-search {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  gap: 6px;
  min-width: 120px;
  position: relative;
}

.header-search-icon {
  height: 15px;
  left: 14px;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  z-index: 1;
}

.header-search-icon path {
  fill: #60758e !important;
}

.header-search-input-wrapper {
  -ms-flex: 1;
      flex: 1;
  position: relative;
}

.header-search-target {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  color: #1f2f46;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  height: 46px;
  outline: none;
  padding: 0 8px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.header-search-target:hover {
  background: #ffffff;
  border-color: #dce6ef;
  border-color: var(--line);
}

.header-search input {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  color: #1f2f46;
  color: var(--ink);
  -ms-flex: 1;
      flex: 1;
  font-size: 14px;
  font-size: var(--text-base);
  height: 46px;
  outline: none;
  /* Left padding clears .header-search-icon, which is absolutely positioned at
     left:14px and is ~15px wide. At the previous 16px the placeholder started
     underneath the magnifying glass. */
  padding: 0 16px 0 40px;
  padding: 0 var(--space-4) 0 40px;
  transition: border-color 120ms ease, background-color 120ms ease;
  width: 100%;
}

.header-search input:focus {
  background: #ffffff;
  border-color: rgba(25, 179, 159, 0.42);
}

.header-actions {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  gap: var(--space-2);
}

.header-icon-button {
  -ms-flex-align: center;
      align-items: center;
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 12px;
  border-radius: var(--radius-md);
  color: #6f829b;
  cursor: pointer;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 40px;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
  transition: all 120ms ease;
  width: 40px;
}

.header-icon-button:hover {
  background: #ffffff;
  border-color: #dce6ef;
  border-color: var(--line);
  color: #425870;
}

.header-icon-badge {
  -ms-flex-align: center;
      align-items: center;
  background: #ff5e3a;
  border-radius: 50%;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  -ms-flex-pack: center;
      justify-content: center;
  min-width: 16px;
  padding: 0 3px;
  position: absolute;
  right: -4px;
  top: -2px;
}

.header-account {
  -ms-flex-align: center;
      align-items: center;
  border-left: 1px solid #dce6ef;
  border-left: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  gap: var(--space-3);
  margin-left: 4px;
  margin-left: var(--space-1);
  padding-left: 12px;
  padding-left: var(--space-3);
}

.header-account-copy {
  line-height: 1.2;
}

.header-account-name {
  color: #1e2d45;
  font-size: 15px;
  font-weight: 700;
}

.header-account-role {
  color: #7488a0;
  font-size: 12px;
  margin-top: 2px;
}

.header-avatar {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(140deg, #23c4ad 0%, #1394a7 100%);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(18, 145, 167, 0.24);
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 40px;
}

.header-main-menu {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.main-menu-trigger {
  border-radius: 12px !important;
  border-radius: var(--radius-md) !important;
  height: 40px !important;
  margin: 0 !important;
  width: 40px !important;
}

.main-menu-trigger > span > span {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-pack: center;
      justify-content: center;
}

.main-menu-trigger svg path {
  fill: #3f556f;
}

.search-form {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
  width: 340px;
}

.search-form input {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  font-size: 14px;
  font-size: var(--text-base);
  height: 44px;
  padding: 0 40px 0 14px;
}

.search-form__icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.55;
}

.main-dashboard {
  /* Single column by default. Pages that genuinely have a side rail opt in
     below; the rest (Managers, Reps, Admins, Pricing) just stack. */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
      grid-template-columns: minmax(0, 1fr);
  grid-row-gap: 16px;
  grid-row-gap: var(--space-4);
}

/* Call Logs and Contacts put the Make a Call panel in a 318px rail beside the
   table. Full-width rows declare their span explicitly instead of relying on
   auto-placement — that is what previously dealt the table itself into the
   rail and left the header stranded in the wide column. */

.main-dashboard--with-rail {
  -ms-flex-align: start;
      align-items: start;
  grid-column-gap: 24px;
  grid-column-gap: var(--space-6);
  -ms-grid-columns: minmax(0, 1fr) 318px;
      grid-template-columns: minmax(0, 1fr) 318px;
}

.main-dashboard--with-rail > .page-header, .main-dashboard--with-rail > .main-dashboard__full {
  grid-column: 1 / -1;
}

/* Heading for a panel nested inside a page (see components/section-header). */

.section-header {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  gap: var(--space-4);
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 16px;
  margin-bottom: var(--space-4);
}

.section-header__titles {
  min-width: 0;
}

.section-header__title {
  color: #1f2f46;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.section-header__subtitle {
  color: #8194aa;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
  max-width: 62ch;
}

.section-header__actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 8px;
  gap: var(--space-2);
}

/* Popover menu rows (header + account menus). */

.ui-menu-item {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #223046;
  color: #1f2f46;
  color: var(--ink, #223046);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  font-family: inherit;
  font-size: 13px;
  font-size: 13px;
  font-size: var(--text-sm, 13px);
  gap: 10px;
  line-height: 1.3;
  margin: 0 4px;
  padding: 9px 12px;
  text-align: left;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
  width: calc(100% - 8px);
}

.ui-menu-item:hover, .ui-menu-item:focus-visible {
  background: #f1f6fa;
  background: #f1f6fa;
  background: var(--surface-mute, #f1f6fa);
  color: #19b39f;
  color: #19b39f;
  color: var(--brand, #19b39f);
  outline: none;
}

.ui-menu-item__icon {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  height: 16px;
  -ms-flex-pack: center;
      justify-content: center;
  opacity: 0.75;
  width: 16px;
}

.ui-menu-item:hover .ui-menu-item__icon {
  opacity: 1;
}

.ui-menu-item__text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
}

.ui-menu-item__primary {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-menu-item__secondary {
  color: #8ca0b6;
  color: #8194aa;
  color: var(--ink-soft, #8ca0b6);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-menu-item--disabled {
  color: #8ca0b6;
  color: #8194aa;
  color: var(--ink-soft, #8ca0b6);
  cursor: default;
  pointer-events: none;
}

.shadow, .rounded-card {
  background: #ffffff;
  background: var(--surface);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 48px rgba(19, 37, 59, 0.12);
  box-shadow: var(--card-shadow);
}

/* .rounded-card wraps the form pages (Make a Call, Add Rep, Change Password …).
   It had no padding, so the page header and the form sat flush against the
   card border. .shadow is deliberately excluded — it wraps tables, which
   supply their own edge spacing. */

.rounded-card {
  padding: 24px;
  padding: var(--space-6);
}

/* ===== Form fields =====
   Match the header search input: 46px tall, 14px radius, muted fill. These
   were previously inline styles on ui-text-field (37px tall, 8px radius),
   which both looked out of place next to the rest of the UI and could not be
   overridden from CSS. */

.ui-field-label {
  color: #8194aa;
  color: var(--ink-soft);
  display: block;
  font-size: 13px;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 6px;
}

.ui-field {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  box-sizing: border-box;
  color: #1f2f46;
  color: var(--ink);
  font-size: 14px;
  font-size: var(--text-base);
  height: 46px;
  outline: none;
  padding: 0 16px;
  transition: border-color 120ms ease, background-color 120ms ease;
  width: 100%;
}

.ui-field:-ms-input-placeholder {
  color: #5f738c;
  color: var(--ink-muted);
}

.ui-field::placeholder {
  color: #5f738c;
  color: var(--ink-muted);
}

.ui-field:focus {
  background: #ffffff;
  background: var(--surface);
  border-color: #19b39f;
  border-color: var(--brand);
}

.ui-field:disabled {
  color: #5f738c;
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.ui-field--textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  resize: vertical;
}

.ui-field--select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238196aa' d='M6 8L0 0h12z'/></svg>");
  background-position: right 16px center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding-right: 38px;
}

.ui-field-wrapper {
  display: block;
  margin-bottom: 16px;
  margin-bottom: var(--space-4);
}

.shadow {
  overflow: hidden;
}

.rounded-card {
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
}

.my-numbers-content {
  padding: 18px 24px 24px;
  padding: 18px var(--space-6) var(--space-6);
}

.my-purchased-numbers-location-number {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.my-purchased-numbers-location-number > div {
    width: 50%;
    overflow: hidden;
  }

.my-numbers-header-help {
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.billing-section-header {
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  color: #1f2f46;
  color: var(--ink);
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 26px;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 22px 28px;
}

.billing-section-help {
  padding: 0 28px 8px;
}

.go-back-button {
  background: #ffffff !important;
  border: 1px solid #dce6ef !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  height: 44px !important;
}

.go-back-button svg path {
  fill: #6b7f97;
}

.addWidget {
  background: #ffffff;
  background: var(--surface);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  padding: 22px 24px 24px;
  padding: 22px var(--space-6) var(--space-6);
}

.addWidget h2 {
  font-size: 24px;
}

.mui-text-field-underline, .mui-text-field-focus-underline {
  display: none !important;
}

.mui-flat-button, .mui-raised-button {
  border-radius: 12px !important;
  border-radius: var(--radius-md) !important;
}

.mui-flat-button-label, .mui-raised-button-label {
  font-family: inherit !important;
  font-size: 13px !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.mui-raised-button:not(.mui-disabled) {
  box-shadow: 0 14px 26px rgba(18, 134, 154, 0.22) !important;
}

.mui-raised-button-primary .mui-raised-button-container {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 48%, #1387a2 100%);
}

.submenu {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.submenu__link {
  -ms-flex-align: center;
      align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 12px;
  border-radius: var(--radius-md);
  color: #5f738c;
  color: var(--ink-muted);
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 13px;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: 8px;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 14px;
  text-decoration: none;
  transition: all 120ms ease;
}

.submenu__link:hover {
  background: #ffffff;
  border-color: #c7d6e5;
  border-color: var(--line-strong);
  color: #1f2f46;
  color: var(--ink);
}

.submenu__link.active {
  background: #ffffff;
  border-color: rgba(25, 179, 159, 0.35);
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  color: #1a8f96;
}

.submenu__icon {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 14px;
  width: 14px;
}

.submenu__icon svg path {
  fill: currentColor !important;
}

.submenu__badge {
  -ms-flex-align: center;
      align-items: center;
  background: linear-gradient(135deg, #1bc0ab 0%, #1493a6 100%);
  border-radius: 999px;
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 20px;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left: 2px;
  min-width: 20px;
  padding: 0 6px;
}

/* --- Merged from index.css: table helpers --- */

.first-row-padding tr:first-child td {
  padding-top: 16px;
}

table > tfoot > tr > td {
  vertical-align: middle;
}

.call-logs-table table, .manager-call-logs-table table, .contacts-table table, .sales-reps-table table, .managers-table table, .admins-table table, .conferences-table table, .manager-usage-table table, .pricings-table table {
  border-collapse: separate !important;
  width: 100%;
}

.call-logs-table table thead tr, .manager-call-logs-table table thead tr, .contacts-table table thead tr, .sales-reps-table table thead tr, .managers-table table thead tr, .admins-table table thead tr, .conferences-table table thead tr, .manager-usage-table table thead tr, .pricings-table table thead tr {
  background: #f1f6fa;
  background: var(--surface-mute);
}

.call-logs-table table thead th, .manager-call-logs-table table thead th, .contacts-table table thead th, .sales-reps-table table thead th, .managers-table table thead th, .admins-table table thead th, .conferences-table table thead th, .manager-usage-table table thead th, .pricings-table table thead th {
  color: #70839a !important;
  font-size: 11px !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase;
}

.call-logs-table table td, .call-logs-table table th, .manager-call-logs-table table td, .manager-call-logs-table table th, .contacts-table table td, .contacts-table table th, .sales-reps-table table td, .sales-reps-table table th, .managers-table table td, .managers-table table th, .admins-table table td, .admins-table table th, .conferences-table table td, .conferences-table table th, .manager-usage-table table td, .manager-usage-table table th, .pricings-table table td, .pricings-table table th {
  border-bottom: 1px solid #ebf1f6 !important;
  color: #1f2f46 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-size: var(--text-sm) !important;
  padding: 13px 14px !important;
  vertical-align: middle !important;
}

.call-logs-table table tbody tr:hover td, .manager-call-logs-table table tbody tr:hover td, .contacts-table table tbody tr:hover td, .sales-reps-table table tbody tr:hover td, .managers-table table tbody tr:hover td, .admins-table table tbody tr:hover td, .conferences-table table tbody tr:hover td, .manager-usage-table table tbody tr:hover td, .pricings-table table tbody tr:hover td {
  background: rgba(25, 179, 159, 0.06);
}

.handset-on-green {
  height: 20px;
  width: 22px;
}

.handset-on-green path:first-of-type {
  fill: #76cd1a !important;
}

.handset-on-green path:last-of-type {
  fill: #ffffff !important;
}

/* --- Merged from index.css: modals --- */

.call-modal-title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  margin: 0px;
  padding: 24px 41px 20px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  height: 110px;
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  border-color: #dce6ef;
  border-color: var(--line);
}

.call-modal-title .number {
    font-weight: 300;
    display: inline-block;
    margin-left: 15px;
  }

.call-modal-title .call-timer {
    text-align: right;
    color: #a1a1a1;
    font-size: 13px;
    font-weight: 300;
  }

.call-modal-title .call-timer .timer {
      font-size: 23px;
      color: #555759;
    }

.call-info-modal-body {
  padding: 2rem 41px;
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
  border-color: #dce6ef;
  border-color: var(--line);
}

.call-modal-actions-container {
  padding: 0 !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.messages, .inbound-inbox, .pricing-plans {
  color: #1f2f46;
  color: var(--ink);
}

.five-px-modal-border-radius > div:first-of-type > div:first-of-type > div:first-of-type {
  border-radius: 16px !important;
}

.dial-pad-dialog {
  padding-top: 120px;
}

/* The contact-list / contact-info overrides that used to sit here went with
   those components in the thread cutover; the thread sidebar styles itself. */

.messages-new-form {
  border-color: #e6eef5 !important;
}

/* ── Spacing utility classes (for replacing inline styles) ─── */

.pad-1 { padding: 4px; padding: var(--space-1); }

.pad-2 { padding: 8px; padding: var(--space-2); }

.pad-3 { padding: 12px; padding: var(--space-3); }

.pad-4 { padding: 16px; padding: var(--space-4); }

.pad-5 { padding: 20px; padding: var(--space-5); }

.pad-6 { padding: 24px; padding: var(--space-6); }

.pad-8 { padding: 32px; padding: var(--space-8); }

.pad-10 { padding: 40px; padding: var(--space-10); }

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: 4px; margin-top: var(--space-1); }

.mt-2 { margin-top: 8px; margin-top: var(--space-2); }

.mt-3 { margin-top: 12px; margin-top: var(--space-3); }

.mt-4 { margin-top: 16px; margin-top: var(--space-4); }

.mt-5 { margin-top: 20px; margin-top: var(--space-5); }

.mt-6 { margin-top: 24px; margin-top: var(--space-6); }

.mt-8 { margin-top: 32px; margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: 4px; margin-bottom: var(--space-1); }

.mb-2 { margin-bottom: 8px; margin-bottom: var(--space-2); }

.mb-3 { margin-bottom: 12px; margin-bottom: var(--space-3); }

.mb-4 { margin-bottom: 16px; margin-bottom: var(--space-4); }

.mb-5 { margin-bottom: 20px; margin-bottom: var(--space-5); }

.mb-6 { margin-bottom: 24px; margin-bottom: var(--space-6); }

.mb-8 { margin-bottom: 32px; margin-bottom: var(--space-8); }

.ml-0 { margin-left: 0; }

.ml-1 { margin-left: 4px; margin-left: var(--space-1); }

.ml-2 { margin-left: 8px; margin-left: var(--space-2); }

.ml-3 { margin-left: 12px; margin-left: var(--space-3); }

.ml-4 { margin-left: 16px; margin-left: var(--space-4); }

.ml-6 { margin-left: 24px; margin-left: var(--space-6); }

.ml-8 { margin-left: 32px; margin-left: var(--space-8); }

.mr-0 { margin-right: 0; }

.mr-2 { margin-right: 8px; margin-right: var(--space-2); }

.mr-4 { margin-right: 16px; margin-right: var(--space-4); }

.pad-3-4 { padding: 12px 16px; padding: var(--space-3) var(--space-4); }

.pad-1-2 { padding: 4px 8px; padding: var(--space-1) var(--space-2); }

.pad-2-0 { padding: 8px 0; padding: var(--space-2) 0; }

.pad-3-0 { padding: 12px 0; padding: var(--space-3) 0; }

.pl-2 { padding-left: 8px; padding-left: var(--space-2); }

@media (min-width: 960px) {
  .private-layout .submenu {
    display: none;
  }
  .header-hamburger {
    display: none;
  }

  /* Mobile nav drawer is mobile-only. Every .mobile-nav-* rule lives inside the
     max-width:960px block, so without this the drawer markup renders unstyled
     in the document flow on desktop. */
  .mobile-nav-root {
    display: none;
  }

  /* --- Merged from desktop.css --- */
  .hide-on-desktop {
    display: none !important;
  }

  .my-numbers-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
  }

  .my-purchased-numbers {
    height: calc(100vh - 280px);
    overflow: auto;
  }

  .call-modal-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 1rem;
  }
    .call-modal-content > div {
      padding-bottom: 8px;
    }
    .call-modal-content > div.notes-form {
      -ms-grid-column: 1;
          grid-column-start: 1;
      grid-column-end: 4;
    }
    .call-modal-content > div.purchase-button {
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
      justify-self: center;
    }
    .call-modal-content > div.call-runtime-settings {
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
    }

  .call-info-modal-content {
      margin: 0 29px 0 !important;
  }

  .call-info-rep-logs .call-info-modal-content {
    width: calc(100% - 402px) !important;
    max-width: calc(100% - 402px) !important;
  }

  .call-info-manager-logs .call-info-modal-content {
    width: calc(100% - 58px) !important;
    max-width: calc(100% - 58px) !important;
  }
}

@media (max-width: 1090px) {
  .app-sidebar {
    width: 252px;
  }

  .header-account-copy {
    display: none;
  }

  .search-form {
    width: 290px;
  }
}

@media (max-width: 960px) {
  html, body {
    background: linear-gradient(160deg, #f7fbfe 0%, #eef6fc 100%);
  }

  .private-layout {
    display: block;
    min-height: 0;
  }

  .app-sidebar {
    display: none !important;
  }

  .header {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    border-top: 0;
    margin: 0;
    min-height: 62px;
    padding: 10px 12px;
    padding: 10px var(--space-3);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .header-mobile-brand {
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  .header-mobile-brand svg {
    height: 25px;
    width: 108px;
  }

  .header-search {
    -ms-flex: 1;
        flex: 1;
  }

  .header-search input {
    border-radius: 12px;
    border-radius: var(--radius-md);
    height: 40px;
    padding-left: 38px;
  }

  .header-search-target {
    display: none;
  }

  .header-icon-button {
    display: none;
  }

  .header-account {
    border-left: 0;
    gap: 6px;
    margin-left: 0;
    padding-left: 0;
  }

  .header-avatar {
    height: 34px;
    width: 34px;
  }

  .layout-wrapper {
    padding: 14px 10px 18px;
  }

  .search-form {
    width: 100%;
  }

  .main-dashboard {
    display: block;
  }

  .main-dashboard > div {
    margin-bottom: 12px;
    margin-bottom: var(--space-3);
  }

  .rounded-card {
    margin: 0;
  }

  .my-numbers-content {
    padding: 16px;
    padding: var(--space-4);
  }

  .addWidget {
    padding: 18px 14px 18px;
  }

  .private-layout .submenu {
    display: none;
  }

  .submenu__link {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
  }

  /* --- Merged from mobile.css --- */
  .hide-on-mobile {
    display: none;
  }

  dl.mobile-table-dl, dl.my-numbers-dl {
    overflow: hidden;
  }
    dl.mobile-table-dl > div, dl.my-numbers-dl > div {
      padding: .3rem 0
    }
    dl.mobile-table-dl > div:last-child, dl.my-numbers-dl > div:last-child {
    padding-bottom: 0;
  }
    dl.mobile-table-dl > div:first-child, dl.my-numbers-dl > div:first-child {
    padding-top: 0;
  }
    dl.mobile-table-dl dt {
      font-weight: 300;
    }
    dl.mobile-table-dl dd, dl.mobile-table-dl dt {
      display: inline-block;
      padding: 0;
      margin: 0;
      width: 50%;
    }

  dl.mobile-table-dl.stats dt { width: 70%;
  }

  dl.mobile-table-dl.stats dd { width: 30%;
  }

  dl.mobile-table-dl.webhook dt { width: 20%;
  }

  dl.mobile-table-dl.webhook dd { width: 80%;
  }

  dl.mobile-table-dl.add-ons dt { width: 30%;
  }

  dl.mobile-table-dl.add-ons dd { width: 70%;
  }
    dl.my-numbers-dl dd, dl.my-numbers-dl dt {
      padding: 0;
      margin: 0;
    }
    dl.my-numbers-dl dt {
      font-weight: normal;
      font-size: 12px;
      color: rgb(158, 158, 158);
      margin-bottom: .6rem;
    }
      dl.my-numbers-dl dt svg {
        position: relative;
        top: 2px;
        margin-right: 5px;
      }
    dl.my-numbers-dl dd {
      font-size: 16px;
      letter-spacing: 0.8;
      color: #5cbece;
    }

  .my-account .rounded-card {
    min-height: calc(100vh - 110px);
  }

  .my-purchased-numbers-location-number {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
    .my-purchased-numbers-location-number > div {
      width: 100%;
    }

  .call-modal-actions-container > button:nth-child(2) {
    display: none !important;
  }

  .call-modal-title {
    padding: 1rem 16px !important;
    height: auto !important;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
    .call-modal-title .call-timer, .call-modal-title .client-number {
      width: 100%;
      text-align: center;
    }

  .call-modal-content {
    padding: 1rem 16px !important;
  }
    .call-modal-content > div:not(.notes-form):not(.call-from-number-form) {
      text-align: center;
      padding-bottom: 1rem;
    }
      .call-modal-content > div.call-runtime-settings > div {
        width: 140px !important;
        margin: 0 auto;
      }
    .call-modal-content > div.call-from-number-form {
      width: 75% !important;
      margin: 0 auto;
    }

  .call-info-modal-body {
    padding: 1rem 16px;
  }

  /* Hamburger button — mobile only */
  .header-hamburger {
    -ms-flex-align: center;
        align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 4px;
    height: 40px;
    -ms-flex-pack: center;
        justify-content: center;
    width: 40px;
    padding: 0;
  }

  .header-hamburger-bar {
    background: #3f556f;
    border-radius: 2px;
    display: block;
    height: 3px;
    transition: transform 160ms ease, opacity 160ms ease;
    width: 20px;
  }

  /* Mobile nav drawer */
  .mobile-nav-root {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
  }

  .mobile-nav-backdrop {
    background: rgba(8, 16, 30, 0.5);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 200ms ease;
  }

  .mobile-nav-drawer {
    background: linear-gradient(196deg, #1a2c46 0%, #14233a 44%, #111d30 100%);
    border-right: 1px solid #24344f;
    box-shadow: 26px 0 60px rgba(8, 16, 30, 0.4);
    color: #d5e1f0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    height: 100%;
    max-width: 320px;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 82%;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 101;
  }

  .mobile-nav-root.mobile-nav--open {
    pointer-events: auto;
  }

  .mobile-nav--open .mobile-nav-backdrop {
    opacity: 1;
  }

  .mobile-nav--open .mobile-nav-drawer {
    transform: translateX(0);
  }

  .mobile-nav-header {
    -ms-flex-align: center;
        align-items: center;
    border-bottom: 1px solid rgba(154, 181, 214, 0.18);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    min-height: 56px;
    padding: 12px 16px;
  }

  .mobile-nav-title {
    color: #ffffff;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
  }

  .mobile-nav-close {
    -ms-flex-align: center;
        align-items: center;
    background: rgba(145, 169, 198, 0.18);
    border: 1px solid transparent;
    border-radius: 10px;
    color: #cadaef;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 36px;
    -ms-flex-pack: center;
        justify-content: center;
    width: 36px;
  }

  .mobile-nav-close:hover {
    background: rgba(145, 169, 198, 0.28);
  }

  .mobile-nav-close svg {
    height: 16px;
    width: 16px;
  }

  .mobile-nav-close svg path {
    fill: currentColor !important;
  }

  .mobile-nav-body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    padding: 16px 14px;
  }

  .mobile-nav-section {
    margin-bottom: 8px;
  }

  .mobile-nav-section-title {
    color: #7f95b3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
    padding: 0 10px;
    text-transform: uppercase;
  }

  .mobile-nav-links {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 4px;
  }

  .mobile-nav-link {
    -ms-flex-align: center;
        align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #cadaef;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    text-decoration: none;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
    width: 100%;
  }

  .mobile-nav-link:hover {
    background: rgba(145, 169, 198, 0.18);
    color: #ffffff;
  }

  .mobile-nav-link.active {
    background-image: linear-gradient(
      135deg,
      rgba(24, 190, 168, 0.36) 0%,
      rgba(20, 131, 164, 0.4) 100%
    );
    border-color: rgba(85, 209, 193, 0.44);
    color: #ffffff;
  }

  .mobile-nav-link-icon {
    height: 15px;
    width: 15px;
  }

  .mobile-nav-link-icon path {
    fill: currentColor !important;
  }

  .mobile-nav-link-badge {
    -ms-flex-align: center;
        align-items: center;
    background: #ffffff;
    border-radius: 999px;
    color: #0f6f80;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 22px;
    -ms-flex-pack: center;
        justify-content: center;
    margin-left: auto;
    min-width: 22px;
    padding: 0 6px;
  }

  .mobile-nav-link--ghost {
    border-top: 1px dashed rgba(154, 181, 214, 0.3);
    border-radius: 0;
    margin-top: 8px;
    padding-top: 12px;
  }

  .mobile-nav-plan-card {
    background: linear-gradient(
      135deg,
      rgba(24, 190, 168, 0.08) 0%,
      rgba(20, 131, 164, 0.05) 50%,
      rgba(10, 20, 34, 0.38) 100%
    );
    border: 1px solid rgba(24, 190, 168, 0.22);
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(24, 190, 168, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-top: auto;
    padding: 14px 14px 16px;
  }

  .mobile-nav-plan-card-label {
    color: #87a0bd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .mobile-nav-plan-card-name {
    color: #f1f7ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  .mobile-nav-plan-card-meta {
    color: #9eb2cc;
    font-size: 12px;
    margin-top: 6px;
  }

  .mobile-nav-plan-card-usage {
    margin: 10px 0 12px;
  }

  .mobile-nav-plan-card-usage-label {
    -ms-flex-align: center;
        align-items: center;
    color: #9eb2cc;
    display: -ms-flexbox;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin-bottom: 6px;
  }

  .mobile-nav-plan-card-usage-bar {
    background: rgba(10, 20, 34, 0.6);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
  }

  .mobile-nav-plan-card-usage-fill {
    background: linear-gradient(90deg, #18bea8 0%, #1691a5 100%);
    border-radius: 999px;
    height: 100%;
    min-width: 2px;
    transition: width 400ms ease;
  }

  .mobile-nav-plan-card-actions {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    gap: 12px;
    margin-top: 12px;
  }

  .mobile-nav-plan-card-cta {
    -ms-flex-align: center;
        align-items: center;
    background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(24, 190, 168, 0.24);
    color: #ffffff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    font-size: 12px;
    font-weight: 700;
    -ms-flex-pack: center;
        justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-nav-plan-card-link {
    color: #9eb2cc;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
}

/* === My Account Page === */

.my-account-page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 20px;
  padding: 24px 44px 32px;
}

.my-account-card {
  background: #f5f9fc;
  background: var(--surface-soft);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
}

.my-account-card-title {
  color: #1f2f46;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

.my-account-card-hint {
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 13px;
  margin: 0 0 16px;
}

/* Profile section */

.my-account-profile {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
}

.my-account-avatar {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(140deg, #23c4ad 0%, #1394a7 100%);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(18, 145, 167, 0.24);
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 22px;
  font-weight: 700;
  height: 72px;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 72px;
}

.my-account-profile-info {
  min-width: 0;
}

.my-account-profile-name {
  color: #1f2f46;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-account-profile-email {
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 14px;
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Field rows */

.my-account-fields {
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
}

.my-account-field {
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  padding: 14px 0;
}

.my-account-field-label {
  color: #5f738c;
  color: var(--ink-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  width: 120px;
}

.my-account-field-value {
  color: #1f2f46;
  color: var(--ink);
  font-size: 14px;
}

.my-account-field-link {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
  transition: color 140ms ease;
}

.my-account-field-link:hover {
  color: #19b39f;
  color: var(--brand);
}

.my-account-field-link svg {
  height: 14px;
  opacity: 0;
  transition: opacity 140ms ease;
  width: 14px;
}

.my-account-field-link:hover svg {
  opacity: 1;
}

/* Metadata grid */

.my-account-meta {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-top: 20px;
}

.my-account-meta-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 4px;
}

.my-account-meta-label {
  color: #8194aa;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.my-account-meta-value {
  color: #1f2f46;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* Custom toggle */

.my-account-toggle-row {
  -ms-flex-align: center;
      align-items: center;
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.my-account-toggle-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.my-account-toggle-label {
  color: #1f2f46;
  color: var(--ink);
  -ms-flex: 1;
      flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.my-account-toggle {
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
}

.my-account-toggle input {
  cursor: pointer;
  height: 24px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 44px;
  z-index: 1;
}

.my-account-toggle-track {
  background: #c7d6e5;
  background: var(--line-strong);
  border-radius: 999px;
  display: block;
  height: 24px;
  position: relative;
  transition: background-color 200ms ease;
  width: 44px;
}

.my-account-toggle-track::after {
  background: #ffffff;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(19, 37, 59, 0.2);
  content: '';
  display: block;
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 200ms ease, background-color 200ms ease;
  width: 18px;
}

.my-account-toggle input:checked ~ .my-account-toggle-track {
  background: #19b39f;
  background: var(--brand);
}

.my-account-toggle input:checked ~ .my-account-toggle-track::after {
  transform: translateX(20px);
}

/* Auth token */

.my-account-token-row {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.my-account-token-input {
  background: #ffffff;
  background: var(--surface);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #5f738c;
  color: var(--ink-muted);
  -ms-flex: 1;
      flex: 1;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  padding: 12px 14px;
  -webkit-text-fill-color: #5f738c;
  -webkit-text-fill-color: var(--ink-muted);
}

.my-account-token-input:focus {
  border-color: #19b39f;
  border-color: var(--brand);
  outline: none;
}

.my-account-copy-btn {
  background: #19b39f;
  background: var(--brand);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  transition: background-color 140ms ease;
}

.my-account-copy-btn:hover {
  background: #117f89;
  background: var(--brand-deep);
}

/* Body wrapper replaces styled-components Container/Content */

.my-account-body {
  padding: 0;
}

/* My Account responsive */

@media only screen and (max-width: 600px) {
  .my-account-page {
    padding: 16px;
  }

  .my-account-card {
    padding: 18px 16px;
  }

  .my-account-field {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
    gap: 4px;
  }

  .my-account-field-label {
    width: auto;
  }

  .my-account-meta {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }

  .my-account-avatar {
    height: 56px;
    width: 56px;
    font-size: 18px;
  }

  .my-account-token-row {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .my-account-copy-btn {
    width: 100%;
  }
}

/* --- Merged from index.css: Stripe --- */

.StripeElement {
  display: block;
  margin: 10px 0 20px 0;
  max-width: 500px;
  padding: 10px 14px;
  font-size: 1em;
  font-family: 'Source Code Pro', monospace;
  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  background: white;
}

.StripeElement--focus {
  box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
  transition: all 150ms ease;
}

.StripeElement.IdealBankElement, .StripeElement.PaymentRequestButton {
  padding: 0;
}

/* --- Merged from index.css: billing --- */

.billing-overview > div {
  max-width: 600px;
  margin: 0 auto;
}

/* ─── Billing page redesign ─── */

.billing-page {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.billing-no-card {
  max-width: 480px;
  margin: 2rem auto;
  padding: 3rem 2rem;
  text-align: center;
}

.billing-no-card-icon {
  font-size: 48px;
  margin-bottom: 1rem;
}

.billing-no-card-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f2f46;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.billing-no-card-help {
  margin-bottom: 1.5rem;
}

.billing-no-card-form {
  max-width: 400px;
  margin: 0 auto;
}

/* Current plan summary card */

.billing-current-plan {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.billing-current-plan-info {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 4px;
}

.billing-current-plan-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-plan-name {
  font-size: 24px;
  font-weight: 600;
  color: #1f2f46;
  color: var(--ink);
}

.billing-plan-price {
  font-size: 18px;
  font-weight: 400;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-current-plan-renewal {
  text-align: right;
}

.billing-plan-renewal-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-plan-renewal-date {
  font-size: 18px;
  font-weight: 500;
  color: #1f2f46;
  color: var(--ink);
}

/* Update card form wrapper */

.billing-update-card-form {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
}

/* Invoice total banner */

.billing-invoice-total {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
}

.billing-invoice-total-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-invoice-total-amount {
  font-size: 20px;
  font-weight: 600;
  color: #1f2f46;
  color: var(--ink);
}

/* Invoice & history tables */

.billing-invoice-table, .billing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.billing-invoice-table th, .billing-history-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5f738c;
  color: var(--ink-muted);
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
}

.billing-invoice-table td, .billing-history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  color: #1f2f46;
  color: var(--ink);
}

.billing-invoice-table tbody tr:last-child td, .billing-history-table tbody tr:last-child td {
  border-bottom: none;
}

/* Status badge */

.billing-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.billing-status-paid {
  background: #daf4ef;
  background: var(--brand-soft);
  color: #117f89;
  color: var(--brand-deep);
}

.billing-status-unpaid {
  background: #fff3cd;
  color: #8a6d00;
}

/* Invoice link */

.billing-invoice-link {
  color: #117f89;
  color: var(--brand-deep);
  text-decoration: none;
  font-weight: 500;
}

.billing-invoice-link:hover {
  text-decoration: underline;
}

/* Empty state */

.billing-empty-state {
  padding: 2rem;
  text-align: center;
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 14px;
}
/* ── Page Transition ────────────────────────────────────────── */

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-frame {
  animation: page-enter 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  will-change: opacity, transform;
}

/* ── Button Micro-Interactions ─────────────────────────────── */

.button {
  transition: transform 150ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
}

.button:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(25, 179, 159, 0.25);
}

.button:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

.mui-raised-button:not(.mui-disabled) {
  transition: transform 150ms ease-out, box-shadow 200ms ease-out !important;
  will-change: transform;
}

.mui-raised-button:not(.mui-disabled):hover {
  transform: scale(1.02);
}

.mui-raised-button:not(.mui-disabled):active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

.mui-flat-button:not(.mui-disabled) {
  transition: transform 150ms ease-out, opacity 150ms ease-out !important;
  will-change: transform;
}

.mui-flat-button:not(.mui-disabled):hover {
  transform: scale(1.02);
}

.mui-flat-button:not(.mui-disabled):active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

/* ── Card Hover Lift ───────────────────────────────────────── */

.shadow, .rounded-card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.shadow:hover, .rounded-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px rgba(19, 37, 59, 0.18);
  will-change: transform;
}

/* ── Toggle Switch Animations ──────────────────────────────── */

.mui-toggle-thumb {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mui-toggle-track {
  transition: background-color 200ms ease-out !important;
}

/* ── Skeleton / Shimmer ───────────────────────────────────── */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.skeleton {
  background: linear-gradient(90deg, #f5f9fc 0%, #f1f6fa 50%, #f5f9fc 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: inline-block;
  min-height: 1em;
  width: 100%;
}

.skeleton--line { height: 14px; margin-bottom: 8px; }

.skeleton--circle { border-radius: 50%; height: 40px; width: 40px; }

.skeleton--card { height: 120px; border-radius: 18px; }

.content-fade-in {
  animation: content-fade-in 300ms ease-out both;
}

/* ── Stagger Animation ────────────────────────────────────── */

@keyframes stagger-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-item {
  animation: stagger-fade-in 300ms ease-out both;
}

/* ── Ripple Effect ────────────────────────────────────────── */

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.35; }
  100% { transform: scale(4); opacity: 0; }
}

.button {
  position: relative;
  overflow: hidden;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,179,159,0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.button:active:not(:disabled)::after {
  animation: ripple 400ms ease-out;
}

.mui-raised-button:not(.mui-disabled), .mui-flat-button:not(.mui-disabled) {
  position: relative;
  overflow: hidden;
}

.mui-raised-button:not(.mui-disabled)::after, .mui-flat-button:not(.mui-disabled)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,179,159,0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.mui-raised-button:not(.mui-disabled):active::after, .mui-flat-button:not(.mui-disabled):active::after {
  animation: ripple 400ms ease-out;
}

/* ── prefers-reduced-motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .page-frame { animation: none !important; }
  .stagger-item { animation: none !important; opacity: 1 !important; transform: none !important; }
  .skeleton { animation: none !important; background: #f1f6fa !important; }
  .content-fade-in { animation: none !important; opacity: 1 !important; }

  .button, .mui-raised-button:not(.mui-disabled), .mui-flat-button:not(.mui-disabled) { transition: none !important; }

  .shadow, .rounded-card { transition: none !important; }

  .button::after, .mui-raised-button:not(.mui-disabled)::after, .mui-flat-button:not(.mui-disabled)::after { display: none !important; }
}
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}

.toast {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  padding: 12px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  animation: toast-slide-in 0.3s ease-out;
}

.toast--success { background-color: #43a047; }

.toast--error   { background-color: #d85663; }

.toast--warning { background-color: #ffa000; }

.toast--info    { background-color: #2196f3; }

.toast__icon {
  margin-right: 8px;
  font-size: 16px;
  line-height: 1.4;
}

.toast__message {
  -ms-flex: 1;
      flex: 1;
}

.toast__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0 0 0 8px;
  margin: -2px 0 0 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.toast__close:hover {
  opacity: 1;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}