:root {
  color-scheme: light;
  --bg: #e9eef3;
  --panel: #ffffff;
  --panel-2: #f7f9fb;
  --panel-3: #eef2f5;
  --line: #d5dde6;
  --text: #182434;
  --muted: #687789;
  --blue: #2864dc;
  --blue-quiet: #eaf1ff;
  --green: #158269;
  --red: #c43c4b;
  --amber: #ad691b;
  --violet: #6750a4;
  --teal: #0d7c88;
  --ink: #172536;
  --shadow: 0 14px 34px rgba(24, 36, 52, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  min-height: 38px;
  border-radius: 6px;
  padding: 0 14px;
  font-weight: 700;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

button:hover:not(:disabled) {
  box-shadow: 0 5px 14px rgba(40, 100, 220, 0.16);
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  outline: none;
}

input {
  height: 38px;
  padding: 0 10px;
}

select {
  height: 38px;
  padding: 0 10px;
}

textarea {
  resize: none;
  padding: 10px 12px;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.app-shell {
  display: grid;
  grid-template-columns: 348px minmax(380px, 430px) minmax(540px, 1fr);
  gap: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.accounts-panel,
.inbox-panel,
.chat-panel {
  min-width: 0;
  min-height: 0;
  background: var(--panel);
}

.accounts-panel {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  gap: 12px;
  background: #f5f7f9;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 8px;
}

.brand-identity,
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--teal);
  font-size: 17px;
  font-weight: 850;
}

.brand-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.brand-block h1,
.inbox-toolbar h2,
.chat-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.brand-block p,
.inbox-toolbar p,
.chat-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.brand-block p {
  font-size: 12px;
}

.icon-button {
  background: #e9eef6;
  color: #24415f;
  border: 1px solid transparent;
  min-width: 54px;
  height: 34px;
  padding: 0 10px;
}

.danger-button {
  background: rgba(211, 63, 73, 0.1);
  color: #992630;
  min-width: 70px;
  height: 34px;
  padding: 0 10px;
}

.config-alert {
  border: 1px solid rgba(211, 63, 73, 0.28);
  background: rgba(211, 63, 73, 0.08);
  color: #992630;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.hidden {
  display: none !important;
}

.login-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.login-box summary {
  color: #334155;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.login-form,
.verify-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.login-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.remember-second-password-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.remember-second-password-line input {
  width: 15px;
  height: 15px;
}

.verify-form {
  border-top: 1px solid #edf1f5;
  padding-top: 14px;
}

.verify-form.waiting {
  opacity: 0.72;
}

.verify-form.active {
  border-top-color: rgba(37, 99, 235, 0.3);
  background: #f5f8ff;
  padding: 10px;
}

.verify-form.sending {
  border-top-color: rgba(178, 106, 0, 0.3);
  background: #fffaf0;
}

.verify-form.error {
  border-top-color: rgba(181, 50, 65, 0.32);
  background: #fff7f8;
}

.login-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.login-status.working {
  color: #8a5b12;
}

.login-status.success {
  color: #14705e;
}

.login-status.error {
  color: #ae3341;
  font-weight: 700;
}

.verify-form.waiting input,
.verify-form.waiting button[type="submit"] {
  cursor: not-allowed;
}

.verify-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.verify-step-head > div {
  min-width: 0;
}

.verify-step-head .verify-title {
  color: #26364a;
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
}

.verify-phone-text {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verify-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  height: 32px;
  border: 1px solid #d3dce6;
  background: #f7f9fb;
  color: #405570;
  padding: 0 9px;
  font-size: 12px;
}

.verify-back-button svg {
  width: 14px;
  height: 14px;
}

.verify-title,
.tool-title,
.panel-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.batch-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.batch-box summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.batch-box textarea {
  margin-top: 10px;
}

.batch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.batch-actions span {
  min-width: 26px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.delete-box {
  border-color: rgba(211, 63, 73, 0.28);
}

.delete-note {
  margin-top: 10px;
  color: #992630;
  font-size: 13px;
  line-height: 1.4;
}

#deleteList {
  margin-top: 8px;
  color: #992630;
  background: rgba(211, 63, 73, 0.04);
  border-color: rgba(211, 63, 73, 0.22);
}

.delete-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.delete-actions button {
  background: rgba(211, 63, 73, 0.1);
  color: #992630;
}

.delete-count {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

.group-ops-box {
  border-color: rgba(31, 94, 255, 0.22);
}

.group-ops-box[open] {
  flex: 0 0 auto;
  min-height: 0;
}

.group-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.group-actions button {
  background: #e9eef6;
  color: #24415f;
}

.group-select-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group-select-actions button:first-child {
  background: #dbeafe;
  color: #1d4ed8;
}

.group-select-actions button:last-child {
  background: #f1f5f9;
  color: #475569;
}

#groupTargetSearchInput,
#adDraftInput {
  margin-top: 8px;
}

.ad-library-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.ad-draft-count {
  min-width: 42px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.ad-draft-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manual-send-actions {
  grid-template-columns: 1.3fr 1fr;
}

.manual-send-actions .group-send-action {
  background: #2563eb;
  color: #fff;
  border-color: #1d4ed8;
  font-weight: 800;
}

.manual-send-actions .group-send-action:disabled {
  background: #cbd5e1;
  color: #64748b;
  border-color: #cbd5e1;
}

.group-business-select {
  margin-top: 8px;
  border-color: rgba(31, 94, 255, 0.28);
  background: #fbfdff;
  font-weight: 700;
}

.group-target-list {
  display: grid;
  gap: 8px;
  min-height: 220px;
  max-height: clamp(240px, 36vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  margin-top: 8px;
  padding-right: 4px;
}

.group-target-list::-webkit-scrollbar {
  width: 8px;
}

.group-target-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
}

.group-target-list::-webkit-scrollbar-track {
  background: transparent;
}

.group-target-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}

.group-target-row {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  cursor: pointer;
  padding: 9px;
}

.group-target-row:focus-visible {
  outline: 2px solid rgba(40, 100, 220, 0.5);
  outline-offset: 2px;
}

.group-target-row.allowed {
  border-color: rgba(8, 127, 91, 0.28);
  background: rgba(8, 127, 91, 0.04);
}

.group-target-row.selected {
  border-color: #2864dc;
  background: #eef4ff;
  box-shadow: inset 3px 0 0 #2864dc;
}

.group-target-main {
  min-width: 0;
}

.group-target-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.group-target-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-target-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.group-target-actions {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 6px;
}

.group-send-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #24415f;
  font-size: 12px;
  font-weight: 700;
}

.group-send-check input {
  width: 14px;
  height: 14px;
}

.group-target-actions button {
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 6px;
  background: #e9eef6;
  color: #24415f;
  font-size: 12px;
}

.group-target-actions .compose-group-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #2563eb;
  color: #fff;
}

.group-target-actions .compose-group-target.active {
  background: #14705e;
}

.group-target-actions .compose-group-target svg {
  width: 13px;
  height: 13px;
}

.group-target-actions .compose-group-target:disabled {
  background: #e2e8f0;
  color: #94a3b8;
}

.manual-forward-status {
  margin-top: 8px;
  border: 1px solid rgba(31, 94, 255, 0.16);
  border-radius: 8px;
  background: rgba(31, 94, 255, 0.055);
  color: #24415f;
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 9px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  padding-top: 2px;
}

.accounts-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  min-height: 0;
}

.account-pool-filter {
  height: 34px;
  border-color: rgba(31, 94, 255, 0.22);
  background: #fbfdff;
  font-weight: 700;
}

.account-batch-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 34px;
  min-height: 34px;
  border: 1px solid rgba(31, 94, 255, 0.24);
  border-radius: 7px;
  background: #edf4ff;
  color: #2459ad;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.account-batch-export:hover:not(:disabled) {
  border-color: rgba(31, 94, 255, 0.42);
  background: #e2edff;
}

.account-batch-export:disabled {
  border-color: #dbe2ea;
  background: #f1f4f7;
  color: #9aa7b6;
}

.account-batch-export svg {
  width: 14px;
  height: 14px;
}

.account-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  min-height: 48px;
  padding: 9px 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.account-copy {
  min-width: 0;
}

.account-row:hover {
  background: #f3f7ff;
}

.account-row.active {
  border-color: rgba(37, 99, 235, 0.35);
  background: var(--blue-quiet);
}

.account-row.unlisted {
  opacity: 0.72;
  background: #f3f5f8;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--muted);
  margin-top: 6px;
}

.status-online {
  background: var(--green);
}

.status-syncing,
.status-connecting,
.status-sending_code {
  background: var(--amber);
}

.status-error,
.status-code_error,
.status-login_required,
.status-password_required {
  background: var(--red);
}

.account-name {
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-stats,
.account-note,
.account-password-status {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-stats {
  color: #24415f;
}

.account-note {
  color: #6d5d31;
}

.account-password-status {
  color: var(--muted);
}

.account-password-status.saved {
  color: var(--green);
}

.account-actions {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  gap: 6px;
}

.copy-account,
.edit-account,
.second-password-account,
.shelf-account,
.remove-account {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  min-width: 48px;
  width: 48px;
  height: 32px;
  padding: 0;
  font-size: 12px;
}

.shelf-account {
  color: var(--blue);
  border-color: rgba(31, 94, 255, 0.22);
}

.second-password-account {
  color: #5b3aa8;
  border-color: rgba(91, 58, 168, 0.25);
}

.inbox-panel {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.inbox-toolbar {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kpi-card {
  display: grid;
  gap: 4px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.kpi-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.kpi-card strong {
  font-size: 22px;
  line-height: 1;
}

.kpi-card.active {
  border-color: rgba(31, 94, 255, 0.35);
  background: var(--blue-quiet);
}

.kpi-card.warning strong {
  color: var(--red);
}

.kpi-card.good strong {
  color: var(--green);
}

.filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-3);
  padding: 4px;
}

.filter-tab {
  min-height: 32px;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  padding: 0 8px;
}

.filter-tab.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 4px rgba(25, 41, 61, 0.08);
}

.filter-reset-button {
  min-height: 32px;
  border-radius: 4px;
  background: #e9eef6;
  color: #24415f;
  padding: 0 8px;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.filter-row.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.checkline input {
  width: 16px;
  height: 16px;
}

.numberline {
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr) auto;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.numberline input {
  height: 32px;
  padding: 0 8px;
}

.conversation-list {
  overflow: auto;
  padding: 10px;
  background: #f6f8fb;
}

.conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
  padding: 9px 10px;
  min-height: 72px;
  border-left: 4px solid transparent;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  cursor: pointer;
}

.conversation-open-target:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 1px;
}

.conversation-open-target {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.conversation-main {
  min-width: 0;
}

.conversation-item.done {
  opacity: 0.78;
}

.conversation-item.overdue {
  border-color: rgba(211, 63, 73, 0.34);
  border-left-color: var(--red);
  background: rgba(211, 63, 73, 0.055);
}

.conversation-item.priority-urgent {
  border-left-color: var(--red);
}

.conversation-item.priority-high {
  border-left-color: var(--amber);
}

.conversation-item.priority-low {
  border-left-color: #94a3b8;
}

.conversation-item:hover {
  background: #f8fbff;
}

.conversation-item.active {
  background: var(--blue-quiet);
  border-color: rgba(37, 99, 235, 0.25);
  border-left-color: var(--blue);
}

.conversation-title {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 800;
}

.conversation-title span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  padding: 0 6px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 20px;
  border-radius: 999px;
  background: rgba(22, 138, 95, 0.1);
  color: var(--green);
  font-size: 12px;
  padding: 0 7px;
  white-space: nowrap;
}

.priority-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  border-radius: 999px;
  background: #edf2f7;
  color: #334155;
  font-size: 12px;
  padding: 0 7px;
  white-space: nowrap;
}

.priority-pill.priority-urgent,
.customer-status.priority-urgent {
  background: rgba(201, 42, 58, 0.1);
  color: var(--red);
}

.priority-pill.priority-high,
.customer-status.priority-high {
  background: rgba(178, 106, 0, 0.12);
  color: var(--amber);
}

.priority-pill.priority-normal,
.customer-status.priority-normal {
  background: rgba(31, 94, 255, 0.1);
  color: var(--blue);
}

.priority-pill.priority-low,
.customer-status.priority-low {
  background: rgba(100, 116, 139, 0.12);
  color: var(--muted);
}

.status-pill.open {
  background: rgba(211, 63, 73, 0.1);
  color: var(--red);
}

.pin-mark {
  color: var(--amber);
  font-size: 12px;
  white-space: nowrap;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  border-radius: 999px;
  background: #edf2f7;
  color: #24415f;
  font-size: 12px;
  padding: 0 7px;
}

.tag-chip.source {
  background: rgba(31, 94, 255, 0.1);
  color: var(--blue);
}

.tag-chip.blocked {
  background: rgba(211, 63, 73, 0.1);
  color: var(--red);
}

.tag-chip.muted {
  background: rgba(183, 121, 31, 0.1);
  color: var(--amber);
}

.tag-chip.overdue {
  background: rgba(211, 63, 73, 0.14);
  color: var(--red);
}

.tag-chip.assignee {
  background: rgba(21, 130, 105, 0.1);
  color: #126954;
}

.conversation-snippet,
.conversation-account {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-account-line {
  color: #c92a3a !important;
  font-weight: 800;
}

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

.conversation-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 4px;
}

.conversation-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 22px);
  gap: 3px;
}

.conversation-quick-action {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d8e0e8;
  border-radius: 5px;
  background: #f8fafc;
  color: #718096;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.conversation-quick-action svg {
  width: 12px;
  height: 12px;
}

.conversation-quick-action:hover:not(:disabled),
.conversation-quick-action:focus-visible {
  border-color: #9fb2c6;
  background: #fff;
  color: #20364d;
  outline: none;
}

.conversation-quick-action.handled.active {
  border-color: rgba(22, 138, 95, 0.36);
  background: rgba(22, 138, 95, 0.12);
  color: var(--green);
}

.conversation-quick-action.blocked.active {
  border-color: rgba(211, 63, 73, 0.36);
  background: rgba(211, 63, 73, 0.12);
  color: var(--red);
}

.conversation-quick-action.muted.active {
  border-color: rgba(183, 121, 31, 0.4);
  background: rgba(183, 121, 31, 0.12);
  color: var(--amber);
}

.conversation-quick-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.conversation-quick-action.updating svg {
  animation: spin 800ms linear infinite;
}

.conversation-priority {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #f6f8fb;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.chat-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chat-actions button {
  background: #e9eef6;
  color: #24415f;
  border: 1px solid transparent;
}

.chat-actions .active-danger {
  background: rgba(211, 63, 73, 0.12);
  color: var(--red);
}

.chat-actions .active-warning {
  background: rgba(183, 121, 31, 0.12);
  color: var(--amber);
}

.chat-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) 248px;
}

.messages-list {
  overflow: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.empty-state {
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.message-row {
  display: flex;
}

.message-row.outgoing {
  justify-content: flex-end;
}

.message-bubble {
  max-width: min(760px, 88%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.055);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.42;
}

.message-text,
.message-translation {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-media {
  min-width: min(300px, 70vw);
  display: grid;
  gap: 7px;
  margin-bottom: 6px;
}

.message-media-preview {
  display: block;
  width: auto;
  max-width: min(440px, 68vw);
  max-height: 420px;
  border-radius: 7px;
  background: #eef2f6;
  object-fit: contain;
}

.message-media-preview.video {
  width: min(520px, 68vw);
  max-height: 360px;
  background: #101820;
}

.message-media-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.message-media-meta a {
  flex: 0 0 auto;
  color: var(--blue);
  font-weight: 750;
  text-decoration: none;
}

.message-media-status {
  min-height: 54px;
  display: flex;
  align-items: center;
  border: 1px dashed #c8d3df;
  border-radius: 7px;
  background: #f5f8fb;
  color: #607286;
  padding: 10px 12px;
  font-size: 12px;
}

.message-media-status.expired,
.message-media-status.too_large,
.message-media-status.error {
  color: #8a5960;
  background: #fff7f7;
  border-color: #e5c9cc;
}

.message-translation {
  margin-top: 6px;
  border-top: 1px solid rgba(220, 227, 234, 0.8);
  padding-top: 5px;
  color: #24415f;
  font-size: 13px;
}

.message-source {
  margin-bottom: 4px;
  color: #c92a3a;
  font-size: 12px;
  font-weight: 800;
}

.message-row.outgoing .message-bubble {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.message-time {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.message-row.outgoing .message-time {
  color: rgba(255, 255, 255, 0.75);
}

.customer-panel {
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
}

.customer-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
  margin-bottom: 16px;
}

.customer-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #172033;
  color: #fff;
  font-weight: 800;
}

.customer-main {
  min-width: 0;
}

.customer-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.customer-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  margin-top: 8px;
  padding: 0 8px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.customer-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.customer-actions button {
  background: #e9eef6;
  color: #24415f;
}

.tool-section {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(216, 224, 234, 0.65);
  padding-bottom: 16px;
}

.tool-section button,
.quick-reply-form button,
.quick-reply-item button {
  background: #e8eef8;
  color: #24415f;
}

.assignment-section {
  gap: 7px;
}

.assignee-readout {
  color: #31506b;
  font-size: 12px;
}

.assignment-section select {
  border-color: rgba(21, 130, 105, 0.34);
  background: #f7fcfa;
}

.quick-reply-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.quick-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}

.quick-reply-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: start;
}

.quick-category {
  display: inline-flex;
  height: 18px;
  margin-bottom: 5px;
  border-radius: 999px;
  background: rgba(22, 138, 95, 0.1);
  color: var(--green);
  font-size: 11px;
  padding: 0 6px;
  align-items: center;
}

.quick-reply-item .reply-chip {
  width: 100%;
  min-height: 34px;
  height: auto;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 8px 10px;
}

.quick-reply-item .delete-reply {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
}

.quick-reply-form {
  display: grid;
  gap: 8px;
}

.reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.reply-form button {
  height: 64px;
}

.reply-composer {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.reply-composer textarea {
  border: 0;
  border-radius: 0;
  min-height: 66px;
}

.reply-composer textarea:focus {
  box-shadow: none;
}

.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  border-top: 1px solid var(--line);
  padding: 0 8px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.composer-bar button {
  min-height: 26px;
  height: 26px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 0 10px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  min-width: 260px;
  max-width: 520px;
  border-radius: 6px;
  background: #142033;
  color: #fff;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  text-align: center;
  z-index: 10;
}

.second-password-dialog {
  position: fixed;
  inset: 0;
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 18px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24);
}

.second-password-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
}

.credential-close-form {
  margin: 0;
}

.credential-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.credential-dialog-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.credential-dialog-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.credential-close-button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.credential-field {
  display: grid;
  gap: 7px;
  margin-top: 20px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.credential-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
}

.credential-input-row button {
  min-height: 38px;
  background: #e9eef6;
  color: #24415f;
  padding: 0 10px;
}

.credential-status {
  min-height: 38px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.credential-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.credential-dialog-actions button {
  min-width: 0;
  padding: 0 10px;
}

.credential-dialog-actions .credential-delete-button {
  border: 1px solid rgba(201, 42, 58, 0.25);
  background: rgba(201, 42, 58, 0.08);
  color: #992630;
}

.credential-dialog-actions .credential-save-button {
  background: var(--blue);
  color: #fff;
}

body.auth-pending .app-shell {
  visibility: hidden;
}

body.auth-required .app-shell {
  display: none;
}

body.role-agent .admin-only {
  display: none !important;
}

body.cap-admin-center #adminCenterButton,
body.cap-team-manage #operatorAdminButton,
body.cap-accounts-manage #openAccountManagerButton,
body.cap-accounts-manage .account-management.admin-only {
  display: flex !important;
}

body.cap-accounts-manage .account-management.admin-only {
  display: block !important;
}

body:not(.cap-conversations-assign) .assignment-capable {
  display: none !important;
}

body:not(.role-owner) .owner-only {
  display: none !important;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #e9eef3;
  padding: 24px;
}

.auth-card {
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(24, 36, 52, 0.18);
  padding: 28px;
}

.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #eef2f5;
  padding: 3px;
}

.auth-mode-tabs button {
  min-height: 36px;
  border-radius: 5px;
  background: transparent;
  color: #657487;
  box-shadow: none;
}

.auth-mode-tabs button.active {
  background: #fff;
  color: #1c4f9f;
  box-shadow: 0 2px 7px rgba(24, 36, 52, 0.08);
}

.auth-mode-tabs button:hover:not(:disabled) {
  transform: none;
}

.billing-gate {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #e8edf2;
  padding: 28px;
}

.billing-gate-shell {
  width: min(900px, 100%);
  border: 1px solid #cbd5df;
  border-top: 4px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 26px 72px rgba(24, 36, 52, 0.18);
  padding: 26px;
}

.billing-gate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.billing-gate-head h1 {
  margin: 5px 0 0;
  font-size: 24px;
  letter-spacing: 0;
}

.billing-gate-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.billing-logout-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #f7f9fb;
  color: #43556b;
}

.billing-logout-button svg,
.billing-trust-row svg,
.billing-plan-capacity svg {
  width: 16px;
  height: 16px;
}

.billing-notice {
  margin: 16px 0;
  border-left: 3px solid var(--blue);
  background: #f2f6fd;
  color: #365575;
  padding: 10px 12px;
  font-size: 13px;
}

.shop-payment-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid #d9e2ee;
  border-radius: 7px;
  background: #f8fafc;
}

.shop-payment-toolbar > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-payment-toolbar svg {
  width: 19px;
  height: 19px;
  color: #2463d4;
}

.shop-payment-toolbar span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.shop-payment-toolbar strong {
  color: #172033;
  font-size: 13px;
}

.shop-payment-toolbar small {
  color: var(--muted);
  font-size: 11px;
}

.shop-payment-toolbar select {
  width: 164px;
  min-height: 38px;
  flex: 0 0 auto;
  border-color: #c9d6e7;
  background: #fff;
  color: #213b59;
  font-weight: 700;
}

.shop-payment-toolbar select:disabled {
  opacity: 1;
  color: #213b59;
  cursor: default;
}

.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.billing-plan-card {
  display: grid;
  gap: 16px;
  border: 1px solid #d3dce5;
  border-top: 3px solid #8495a8;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 18px;
}

.billing-plan-card.current {
  border-color: #78b6aa;
  border-top-color: var(--green);
  background: #f7fbfa;
}

.billing-plan-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.billing-plan-card-head > div {
  display: grid;
  gap: 5px;
}

.billing-plan-name {
  color: #47586b;
  font-size: 13px;
  font-weight: 750;
}

.billing-plan-price {
  font-size: 30px;
  line-height: 1;
}

.billing-current-badge {
  border: 1px solid #cbd5df;
  border-radius: 999px;
  background: #fff;
  color: #607186;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 750;
}

.billing-plan-card.current .billing-current-badge {
  border-color: #9bc9bf;
  background: #e9f6f2;
  color: #176f5d;
}

.billing-plan-capacity {
  display: grid;
  gap: 9px;
  color: #536579;
  font-size: 13px;
}

.billing-plan-capacity span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.billing-plan-capacity svg {
  color: var(--teal);
}

.billing-buy-button {
  width: 100%;
}

.billing-plan-card.current .billing-buy-button {
  background: var(--green);
}

.billing-trust-row {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 18px;
  color: #69798b;
  font-size: 12px;
}

.billing-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.billing-required .global-topbar,
body.billing-required .app-shell {
  display: none;
}

.auth-brand {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.auth-brand h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.auth-brand p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.operator-login-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.operator-login-form label {
  display: grid;
  gap: 7px;
  color: #344256;
  font-size: 13px;
  font-weight: 700;
}

.operator-login-form input {
  height: 42px;
}

.operator-login-form button {
  height: 42px;
  margin-top: 2px;
}

.login-error {
  border: 1px solid rgba(196, 60, 75, 0.22);
  border-radius: 6px;
  background: rgba(196, 60, 75, 0.07);
  color: #9f2736;
  padding: 9px 10px;
  font-size: 12px;
}

.operator-bar {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 9px 2px;
}

.operator-avatar,
.operator-row-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: #dff3ef;
  color: #0e6d5b;
  font-size: 13px;
  font-weight: 850;
}

.operator-copy {
  display: grid;
  min-width: 0;
}

.operator-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-copy span {
  color: var(--muted);
  font-size: 11px;
}

.operator-manage-button,
.operator-exit-button {
  min-width: 42px;
  width: 42px;
  height: 30px;
  min-height: 30px;
  border: 1px solid var(--line);
  background: #fff;
  color: #3a4a5f;
  padding: 0;
  font-size: 12px;
}

.operator-exit-button {
  color: #9f2736;
}

.login-box,
.batch-box {
  box-shadow: 0 1px 2px rgba(24, 36, 52, 0.025);
}

.login-box summary,
.batch-box summary {
  display: flex;
  align-items: center;
  min-height: 22px;
  color: #344256;
}

.login-box[open],
.batch-box[open] {
  border-color: #bcc9d7;
  box-shadow: 0 8px 22px rgba(24, 36, 52, 0.07);
}

.panel-head {
  color: #405068;
  font-size: 11px;
}

.account-pool-filter {
  border-color: #cbd5df;
  background: #fff;
}

.account-row {
  border-left: 3px solid #cbd5df;
  box-shadow: 0 2px 7px rgba(24, 36, 52, 0.035);
}

.account-row:hover {
  border-color: #b7c6d7;
  border-left-color: var(--teal);
  background: #fff;
  box-shadow: 0 8px 20px rgba(24, 36, 52, 0.08);
}

.account-row.active {
  border-color: #9fb7e7;
  border-left-color: var(--blue);
  background: #f2f6ff;
}

.account-actions button {
  background: #f8fafc;
}

.inbox-toolbar {
  gap: 10px;
  padding: 16px 14px 13px;
  box-shadow: 0 2px 10px rgba(24, 36, 52, 0.035);
  z-index: 1;
}

.kpi-card {
  border-top: 3px solid #a9b5c4;
  background: #fff;
  box-shadow: 0 2px 8px rgba(24, 36, 52, 0.04);
}

.kpi-card:nth-child(1) {
  border-top-color: var(--red);
}

.kpi-card:nth-child(2) {
  border-top-color: var(--blue);
}

.kpi-card:nth-child(3) {
  border-top-color: var(--amber);
}

.kpi-card:nth-child(4) {
  border-top-color: var(--green);
}

.kpi-card:hover:not(:disabled) {
  border-color: #afbdcb;
}

.filter-tabs {
  border-color: #d6dde5;
  background: #edf1f5;
}

.filter-tab.active {
  color: #174fae;
}

.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #edf1f5;
  padding: 10px;
}

.conversation-item {
  box-shadow: 0 2px 8px rgba(24, 36, 52, 0.045);
}

.conversation-item:hover {
  border-color: #c7d3df;
  background: #fff;
  box-shadow: 0 8px 20px rgba(24, 36, 52, 0.08);
}

.conversation-item.active {
  background: #f0f5ff;
  box-shadow: 0 7px 18px rgba(40, 100, 220, 0.1);
}

.chat-panel {
  background: #f1f4f7;
}

.chat-header {
  min-height: 74px;
  box-shadow: 0 2px 10px rgba(24, 36, 52, 0.035);
  z-index: 1;
}

.chat-actions button {
  border-color: #dde4eb;
  background: #f5f7fa;
}

.messages-list {
  background: #f1f4f7;
}

.message-bubble {
  box-shadow: 0 5px 16px rgba(24, 36, 52, 0.07);
}

.message-row.outgoing .message-bubble {
  background: #285cc4;
  border-color: #285cc4;
}

.customer-panel {
  background: #fafbfc;
}

.customer-card {
  background: #fff;
  box-shadow: 0 4px 14px rgba(24, 36, 52, 0.05);
}

.customer-avatar {
  background: var(--ink);
  box-shadow: inset 0 -3px 0 var(--teal);
}

.reply-form {
  box-shadow: 0 -3px 14px rgba(24, 36, 52, 0.04);
}

.reply-composer {
  box-shadow: inset 0 1px 2px rgba(24, 36, 52, 0.035);
}

.operator-dialog {
  width: min(780px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 20px;
  box-shadow: 0 24px 70px rgba(24, 36, 52, 0.22);
}

.operator-dialog::backdrop {
  background: rgba(19, 31, 45, 0.5);
}

.operator-dialog .credential-dialog-head form {
  margin: 0;
}

.operator-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.operator-summary div {
  display: grid;
  gap: 3px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
}

.operator-summary div:last-child {
  border-right: 0;
}

.operator-summary strong {
  font-size: 22px;
}

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

.operator-create-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 0.8fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.operator-create-form button {
  white-space: nowrap;
}

.operator-permission-preview {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-left: 3px solid var(--teal);
  background: #f4f8f8;
  padding: 11px 12px;
}

.operator-permission-preview > div:first-child,
.operator-permission-summary-copy {
  display: grid;
  gap: 3px;
}

.operator-permission-preview strong,
.operator-permission-summary strong {
  color: #1b2938;
  font-size: 13px;
}

.operator-permission-preview span,
.operator-permission-summary > span {
  color: var(--muted);
  font-size: 12px;
}

.operator-permission-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.permission-tag {
  border: 1px solid #c9dbe0;
  border-radius: 999px;
  background: #fff;
  color: #35606a !important;
  padding: 3px 7px;
  font-size: 11px !important;
  line-height: 1.25;
}

.permission-tag.muted {
  color: var(--muted) !important;
}

.operator-custom-permissions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px;
}

.operator-custom-permissions.hidden {
  display: none;
}

.operator-custom-permissions label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #405068;
  font-size: 12px;
}

.operator-custom-permissions label[data-protected="true"] span::after {
  content: " 所有者授权";
  color: #9b6b16;
  font-size: 10px;
}

.operator-custom-permissions input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.operator-permission-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 28px));
  overflow: hidden;
  border: 1px solid #cbd6df;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 0;
  box-shadow: 0 24px 70px rgba(20, 35, 51, 0.24);
}

.operator-permission-dialog:not([open]) {
  display: none;
}

.operator-permission-dialog::backdrop {
  background: rgba(15, 25, 38, 0.58);
  backdrop-filter: blur(1.5px);
}

.operator-permission-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(720px, calc(100vh - 28px));
  padding: 0;
}

.operator-permission-dialog header,
.operator-permission-dialog footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.operator-permission-dialog header {
  border-bottom: 1px solid #e1e7ed;
  background: #fbfcfd;
  padding: 18px 20px 16px;
}

.operator-permission-dialog header > div {
  display: grid;
  gap: 3px;
}

.operator-permission-dialog header small {
  color: var(--teal);
  font-size: 10px;
  font-weight: 700;
}

.operator-permission-dialog header h3,
.operator-permission-dialog header p {
  margin: 0;
}

.operator-permission-dialog header p {
  color: var(--muted);
  font-size: 12px;
}

.operator-permission-dialog header > button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: #44556a;
}

.operator-permission-dialog header > button svg,
.operator-permission-dialog footer button svg {
  width: 16px;
  height: 16px;
}

.operator-permission-profile-field {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #405068;
  font-size: 12px;
}

.operator-permission-profile-field > span {
  font-weight: 750;
}

.operator-permission-profile-field select {
  min-height: 40px;
}

.operator-permission-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 18px;
}

.operator-permission-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  align-items: start;
  gap: 14px;
  border: 1px solid #dbe6e8;
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  background: #f4f8f8;
  padding: 12px;
}

.operator-permission-summary:empty {
  display: none;
}

.operator-permission-summary .operator-permission-tags {
  justify-content: flex-end;
}

.operator-permission-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid #e1e7ed;
  background: #f8fafc;
  padding: 14px 20px;
}

.operator-permission-dialog footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 108px;
}

.operator-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.operator-panel-card {
  min-height: 260px;
}

.operator-panel-card .operator-summary {
  margin-top: 0;
}

.operator-handover-section {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
  padding: 16px 0;
}

.operator-handover-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.operator-handover-heading > div {
  display: grid;
  gap: 3px;
}

.operator-handover-heading span,
.handover-preview {
  color: var(--muted);
  font-size: 12px;
}

.operator-handover-heading > svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
}

.operator-handover-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 24px minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.operator-handover-form label {
  display: grid;
  gap: 5px;
  color: #47586b;
  font-size: 12px;
}

.operator-handover-form select {
  background: #fff;
}

.operator-handover-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  background: #a62e3b;
}

.operator-handover-form button svg {
  width: 16px;
  height: 16px;
}

.handover-arrow {
  align-self: center;
  width: 18px;
  height: 18px;
  margin-top: 18px;
  color: #6b7c8e;
}

.handover-preview {
  min-height: 18px;
  margin-top: 9px;
  color: #31506b;
}

.handover-history-heading {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5df;
  font-size: 12px;
}

.handover-history {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  max-height: 132px;
  overflow: auto;
}

.handover-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-left: 3px solid var(--teal);
  background: #fff;
  padding: 7px 9px;
}

.handover-history-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.handover-history-row strong,
.handover-history-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handover-history-row span,
.handover-history-row time,
.handover-history-empty {
  color: var(--muted);
  font-size: 11px;
}

.handover-history-empty {
  padding: 4px 0;
}

.admin-tool-card .login-form.hidden + .verify-form {
  margin-top: 0;
  border-top: 0;
  padding: 12px;
}

.verify-form.sending input,
.verify-form.active input {
  border-color: #7fa1d8;
  background: #fff;
  cursor: text;
}

.operator-empty {
  border: 1px dashed #bcc8d4;
  border-radius: 8px;
  color: var(--muted);
  padding: 20px;
  text-align: center;
}

.operator-row {
  display: grid;
  grid-template-columns: 36px minmax(140px, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.operator-row.inactive {
  opacity: 0.62;
  background: #f2f4f6;
}

.operator-row-copy {
  display: grid;
  min-width: 0;
}

.operator-row-copy strong,
.operator-row-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-row-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.operator-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.operator-row-actions button {
  min-height: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: #fff;
  color: #405068;
  padding: 0 9px;
  font-size: 12px;
}

.operator-row-actions .operator-active {
  color: #9f2736;
}

.operator-row-actions .operator-handover {
  color: #a62e3b;
}

.operator-row-actions .operator-delete {
  border-color: #efc5cb;
  background: #fff7f8;
  color: #b42335;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 300px minmax(320px, 360px) minmax(0, 1fr);
  }

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

  .brand-block {
    flex-wrap: wrap;
  }

  .brand-identity {
    width: 100%;
  }

  .brand-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .brand-actions button {
    width: 100%;
  }

  .chat-header {
    align-items: stretch;
    flex-direction: column;
  }

  .chat-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .chat-actions button {
    min-width: 0;
    padding: 0 6px;
  }

  .chat-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, 1fr) minmax(200px, 42%);
  }

  .customer-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .operator-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operator-handover-form {
    grid-template-columns: 1fr 24px 1fr;
  }

  .operator-handover-form button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .app-shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 380px minmax(540px, 1fr);
    overflow: auto;
  }

  .accounts-panel,
  .inbox-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .accounts-list {
    max-height: 220px;
  }

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

  .reply-form {
    grid-template-columns: 1fr;
  }

  .reply-form button {
    height: 44px;
  }

  .operator-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .operator-row-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .operator-row-actions button {
    flex: 1 1 120px;
  }

  .operator-permission-preview {
    display: grid;
  }

  .operator-permission-tags {
    justify-content: flex-start;
  }

  .operator-custom-permissions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .operator-custom-permissions {
    grid-template-columns: 1fr;
  }

  .operator-permission-profile-field {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .operator-permission-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .operator-permission-dialog form {
    max-height: calc(100dvh - 20px);
  }

  .operator-permission-dialog header,
  .operator-permission-body,
  .operator-permission-dialog footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .operator-permission-summary {
    grid-template-columns: 1fr;
  }

  .operator-permission-summary .operator-permission-tags {
    justify-content: flex-start;
  }
}

/* Commercial workspace layout */
.global-topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto auto minmax(170px, 0.8fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid #263244;
  background: #101827;
  color: #f8fafc;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.15);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.global-topbar .brand-mark {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1d2a3b;
  box-shadow: inset 0 -3px 0 #19a58e;
}

.global-topbar .brand-mark svg {
  width: 19px;
  height: 19px;
}

.topbar-brand-copy,
.workspace-identity {
  display: grid;
  min-width: 0;
}

.topbar-brand-copy strong {
  font-size: 16px;
  line-height: 1.1;
}

.topbar-brand-copy span,
.workspace-label {
  margin-top: 3px;
  color: #8fa0b6;
  font-size: 11px;
}

.workspace-identity {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 34px;
  border-left: 1px solid #314055;
  padding-left: 20px;
}

.workspace-label {
  grid-column: 1 / -1;
}

.workspace-identity strong {
  margin-top: 3px;
  overflow: hidden;
  color: #dce4ee;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-plan {
  align-self: center;
  margin-left: 8px;
  border: 1px solid #3a516d;
  border-radius: 999px;
  background: #1d2a3b;
  color: #83d5c2;
  padding: 2px 7px;
  font-size: 10px;
  white-space: nowrap;
}

.topbar-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.topbar-metric {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid #2b394d;
  border-radius: 6px;
  background: #172234;
  color: #b6c2d1;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.topbar-metric strong {
  color: #fff;
}

.topbar-metric svg {
  width: 15px;
  height: 15px;
  color: #6f8db8;
}

.metric-live-dot {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2bc394;
  box-shadow: 0 0 0 3px rgba(43, 195, 148, 0.12);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.topbar-primary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
}

.topbar-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid #33435a;
  background: #1a2638;
  color: #d5deea;
  padding: 0 10px;
  font-size: 12px;
}

.topbar-action-button:hover:not(:disabled),
.operator-manage-button:hover:not(:disabled),
.operator-exit-button:hover:not(:disabled) {
  border-color: #49617f;
  background: #223149;
  box-shadow: none;
}

.topbar-action-button svg,
.operator-manage-button svg,
.operator-exit-button svg {
  width: 15px;
  height: 15px;
}

.global-topbar .operator-bar {
  display: grid;
  grid-template-columns: 30px minmax(90px, 1fr) 30px 30px;
  gap: 7px;
  min-width: 210px;
  border: 0;
  border-left: 1px solid #314055;
  padding: 0 0 0 12px;
}

.global-topbar .operator-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(43, 195, 148, 0.18);
  background: #183c3b;
  color: #71e1bf;
}

.global-topbar .operator-copy strong {
  color: #f4f7fb;
}

.global-topbar .operator-copy span {
  color: #8fa0b6;
}

.global-topbar .operator-manage-button,
.global-topbar .operator-exit-button {
  display: grid;
  place-items: center;
  min-width: 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-color: #33435a;
  background: transparent;
  color: #b9c5d4;
}

.global-topbar .operator-exit-button {
  color: #f0a4ac;
}

.app-shell {
  grid-template-columns: 324px minmax(380px, 420px) minmax(0, 1fr);
  height: calc(100vh - 64px);
  background: #e7ecf1;
}

.accounts-panel {
  gap: 10px;
  overflow: hidden;
  background: #f6f8fa;
  padding: 18px 14px 14px;
}

.sidebar-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 2px 14px;
  border-bottom: 1px solid var(--line);
}

.section-eyebrow {
  display: block;
  color: #7a899a;
  font-size: 10px;
  font-weight: 800;
}

.sidebar-section-head h2 {
  margin: 5px 0 0;
  font-size: 17px;
  line-height: 1.2;
}

.sidebar-section-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border: 1px solid #ccd6e1;
  background: #fff;
  color: #2c5fab;
  padding: 0;
}

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

.account-pool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  color: #4d5e73;
  font-size: 12px;
  font-weight: 800;
}

.account-list-tools {
  display: flex;
  align-items: center;
  gap: 5px;
}

.account-list-tools button {
  display: grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  border: 1px solid #ccd6e1;
  background: #fff;
  color: #405570;
  padding: 0;
}

.account-list-tools button:disabled {
  background: #edf1f5;
  color: #a3afbd;
}

.account-list-tools svg {
  width: 14px;
  height: 14px;
}

.account-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 6px;
  background: #e8edf3;
  color: #3c4d63;
  padding: 0 7px;
  font-size: 11px;
}

.account-pool-filter {
  flex: 0 0 36px;
  height: 36px;
}

.accounts-list {
  gap: 4px;
  overflow-y: scroll;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 0 5px 4px 0;
}

.accounts-list::-webkit-scrollbar,
.conversation-list::-webkit-scrollbar,
.customer-panel::-webkit-scrollbar,
.admin-center-panel::-webkit-scrollbar {
  width: 8px;
}

.accounts-list::-webkit-scrollbar-thumb,
.conversation-list::-webkit-scrollbar-thumb,
.customer-panel::-webkit-scrollbar-thumb,
.admin-center-panel::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #b9c4d0;
  background-clip: padding-box;
}

.account-row {
  grid-template-columns: 7px minmax(0, 1fr) 26px;
  column-gap: 5px;
  row-gap: 2px;
  border-left-width: 1px;
  border-radius: 6px;
  background: #fff;
  padding: 5px 6px;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(24, 36, 52, 0.05);
}

.account-row:hover {
  border-left-color: #9fb0c3;
  box-shadow: 0 7px 18px rgba(24, 36, 52, 0.08);
}

.account-row.active {
  border-left-width: 3px;
  border-left-color: var(--blue);
  padding-left: 4px;
}

.account-row .status-dot {
  width: 7px;
  height: 7px;
  margin-top: 4px;
}

.account-name-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.account-name-line .account-name {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.15;
}

.account-shelf-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 16px;
  border-radius: 4px;
  background: #e8f6f1;
  color: #11715d;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 800;
}

.account-row.unlisted .account-shelf-pill {
  background: #e9edf2;
  color: #6b7786;
}

.account-meta {
  margin-top: 1px;
}

.account-stats {
  margin-top: 2px;
  color: #405570;
}

.account-note,
.account-password-status {
  margin-top: 1px;
}

.account-meta,
.account-stats,
.account-note {
  font-size: 11px;
  line-height: 1.15;
}

.account-actions {
  display: block;
}

.copy-account {
  display: grid;
  place-items: center;
  min-width: 26px;
  width: 26px;
  height: 25px;
  min-height: 25px;
  border: 1px solid #d6dfe8;
  background: #f8fafc;
  color: #53657a;
  padding: 0;
}

.copy-account svg {
  width: 13px;
  height: 13px;
}

.account-management {
  grid-column: 2 / -1;
  min-width: 0;
  border-top: 1px solid #edf1f5;
  margin-top: 0;
  padding-top: 2px;
}

.account-management summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  color: #66768a;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  list-style: none;
}

.account-management summary::-webkit-details-marker {
  display: none;
}

.account-management summary::after {
  content: "+";
  color: #8090a2;
  font-size: 14px;
  font-weight: 500;
}

.account-management[open] summary::after {
  content: "−";
}

.account-management-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px 0 1px;
}

.account-management-actions .account-password-status {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 5px;
  background: #f2f5f8;
  padding: 4px 6px;
  font-size: 10px;
}

.account-management-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  width: auto;
  height: 27px;
  min-height: 27px;
  border: 1px solid #d6dfe8;
  background: #f8fafc;
  color: #4c6078;
  padding: 0 6px;
  font-size: 10px;
}

.account-management-actions button svg {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}

.account-management-actions .shelf-account {
  color: #285fbb;
}

.account-management-actions .export-account {
  color: #14705e;
}

.account-management-actions .remove-account {
  color: #a3333f;
}

.inbox-toolbar {
  padding: 17px 15px 14px;
}

.conversation-list {
  background: #edf1f5;
}

.chat-header {
  min-height: 72px;
}

.chat-actions button {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.message-bubble {
  border-color: #d6dee7;
  box-shadow: 0 3px 12px rgba(24, 36, 52, 0.055);
}

.customer-card {
  border-color: #d8e0e8;
  box-shadow: none;
}

.chat-body {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.customer-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.customer-panel-toggle svg {
  width: 15px;
  height: 15px;
}

.customer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 6;
  display: none;
  width: min(330px, 100%);
  border-top: 0;
  border-left: 1px solid var(--line);
  background: #fafbfc;
  box-shadow: -14px 0 34px rgba(24, 36, 52, 0.14);
}

.customer-panel.open {
  display: block;
}

.customer-panel-head {
  position: sticky;
  top: -14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: -14px -14px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 12px 0 14px;
  color: #34465c;
  font-size: 13px;
}

.customer-panel-head button {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border: 1px solid #d6dfe8;
  background: #f8fafc;
  color: #5c6d82;
  padding: 0;
}

.customer-panel-head button svg {
  width: 15px;
  height: 15px;
}

.reply-form {
  padding: 10px 14px 12px;
}

.admin-center-dialog {
  width: min(1120px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f4f6f8;
  color: var(--text);
  padding: 0;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.admin-center-dialog[open] {
  display: flex;
  flex-direction: column;
}

.admin-center-dialog::backdrop {
  background: rgba(10, 17, 28, 0.6);
  backdrop-filter: blur(2px);
}

.admin-center-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
  border-bottom: 1px solid #27354a;
  background: #111b2b;
  color: #f8fafc;
  padding: 18px 20px;
}

.admin-center-head h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.admin-center-head p {
  margin: 5px 0 0;
  color: #9dacbe;
  font-size: 12px;
}

.admin-center-head .section-eyebrow {
  color: #6fd4bc;
}

.admin-center-head form {
  margin: 0;
}

.admin-center-head .credential-close-button {
  border-color: #36465d;
  background: #1b283b;
  color: #c9d3df;
}

.admin-center-head .credential-close-button svg {
  width: 17px;
  height: 17px;
}

.admin-center-dialog.group-focus .admin-center-head {
  align-items: center;
  padding: 8px 14px;
}

.admin-center-dialog.group-focus .admin-center-head .section-eyebrow,
.admin-center-dialog.group-focus .admin-center-head p {
  display: none;
}

.admin-center-dialog.group-focus .admin-center-head h2 {
  margin: 0;
  font-size: 16px;
}

.admin-center-dialog.group-focus .admin-command-bar {
  display: none;
}

.admin-center-dialog.group-focus .admin-tabs {
  padding: 0 12px;
}

.admin-center-dialog.group-focus .admin-tab {
  min-height: 38px;
  padding: 0 11px;
}

.admin-command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 10px 18px;
}

.admin-command-copy,
.admin-command-actions,
.secondary-command,
.danger-command,
.wide-secondary-button,
.login-form button,
.verify-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.admin-command-copy {
  justify-content: flex-start;
  color: #586a7e;
  font-size: 12px;
}

.admin-command-actions {
  gap: 8px;
}

.secondary-command,
.wide-secondary-button {
  border: 1px solid #d3dce6;
  background: #f7f9fb;
  color: #405570;
}

.danger-command {
  border: 1px solid rgba(196, 60, 75, 0.26);
  background: rgba(196, 60, 75, 0.07);
  color: #a42f3c;
}

.secondary-command svg,
.danger-command svg,
.wide-secondary-button svg,
.login-form button svg,
.verify-form button svg,
.group-send-action svg {
  width: 15px;
  height: 15px;
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 18px;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #66768a;
  padding: 0 14px;
  font-size: 12px;
}

.admin-tab:hover:not(:disabled) {
  background: #f6f8fa;
  box-shadow: none;
  transform: none;
}

.admin-tab.active {
  border-bottom-color: #2864dc;
  color: #1e55b3;
}

.admin-tab svg {
  width: 15px;
  height: 15px;
}

.admin-center-panel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.admin-center-panel.active {
  display: block;
}

.billing-overview {
  display: grid;
  gap: 20px;
}

.billing-overview-main {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.2fr);
  gap: 18px;
  align-items: stretch;
}

.shop-payment-toolbar.compact {
  min-height: 52px;
  margin-bottom: 0;
  padding: 7px 0 11px;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.billing-overview-main > div:first-child {
  display: grid;
  align-content: center;
  gap: 5px;
  border-left: 4px solid var(--teal);
  background: #f5f8fa;
  padding: 16px;
}

.billing-overview-main > div:first-child span,
.billing-overview-main small,
.billing-usage-grid span {
  color: var(--muted);
  font-size: 12px;
}

.billing-overview-main > div:first-child strong {
  font-size: 22px;
}

.billing-usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.billing-usage-grid > div {
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 14px;
}

.billing-usage-grid strong {
  font-size: 20px;
}

.billing-plan-grid.compact .billing-plan-card {
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.1fr) minmax(130px, 0.55fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.billing-plan-grid.compact {
  grid-template-columns: 1fr;
}

.billing-plan-grid.compact .billing-plan-price {
  font-size: 23px;
}

.billing-plan-grid.compact .billing-plan-capacity {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.billing-plan-grid.compact .billing-plan-capacity span {
  align-items: flex-start;
  font-size: 11px;
}

.billing-orders-section {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.billing-orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.billing-orders-head span,
.billing-order-row span,
.billing-order-empty {
  color: var(--muted);
  font-size: 12px;
}

.billing-order-list {
  display: grid;
  max-height: 230px;
  overflow: auto;
}

.billing-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f4;
  padding: 11px 14px;
}

.billing-order-row:last-child {
  border-bottom: 0;
}

.billing-order-row > div {
  display: grid;
  gap: 3px;
}

.billing-order-status {
  border-radius: 999px;
  background: #eef2f5;
  padding: 4px 8px;
  font-weight: 750;
}

.billing-order-status.paid {
  background: #e6f5f0;
  color: #16705d;
}

.billing-order-status.failed {
  background: #fae9eb;
  color: #a42f3c;
}

.billing-order-empty {
  padding: 28px;
  text-align: center;
}

.admin-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.admin-panel-heading h3 {
  margin: 0;
  font-size: 17px;
}

.admin-panel-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.account-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tdata-import-card {
  margin-bottom: 14px;
  border: 1px solid #cdd8e5;
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px;
  box-shadow: 0 3px 12px rgba(24, 36, 52, 0.045);
}

.secondary-import-card {
  margin-top: 14px;
  margin-bottom: 0;
}

.tdata-import-title {
  border-bottom: 0;
  padding-bottom: 12px;
}

.tdata-import-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(190px, 0.8fr) auto auto;
  gap: 8px;
  align-items: center;
}

.tdata-file-picker {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 40px;
  border: 1px dashed #9fb1c6;
  border-radius: 6px;
  background: #f8fafc;
  color: #405570;
  cursor: pointer;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.tdata-file-picker:hover {
  border-color: #4777c8;
  background: #f1f6ff;
}

.tdata-file-picker svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  color: #2864b8;
}

.tdata-file-picker span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tdata-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tdata-import-layout > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  white-space: nowrap;
}

.tdata-import-layout > button svg {
  width: 15px;
  height: 15px;
}

.tdata-import-status {
  min-height: 30px;
  margin-top: 10px;
  border-top: 1px solid #edf1f5;
  color: #69798d;
  padding-top: 10px;
  font-size: 12px;
}

.tdata-import-status.working {
  color: #285fbb;
}

.tdata-import-status.success {
  color: #11715d;
}

.tdata-import-status.error {
  color: #a3333f;
}

.tdata-preview-list {
  margin-top: 4px;
  border: 1px solid #d9e1e9;
  border-radius: 6px;
  background: #fbfcfd;
}

.tdata-preview-row {
  display: grid;
  grid-template-columns: 20px minmax(150px, 1fr) minmax(110px, auto) minmax(100px, auto);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid #e7ecf1;
  padding: 6px 10px;
  color: #5d6e81;
  font-size: 11px;
}

.tdata-preview-row:last-child {
  border-bottom: 0;
}

.tdata-preview-row > svg {
  width: 15px;
  height: 15px;
  color: #1a8b70;
}

.tdata-preview-row strong {
  overflow: hidden;
  color: #2b3d52;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tdata-preview-row.failed > svg,
.tdata-preview-row.failed .tdata-result-state {
  color: #b33745;
}

.tdata-preview-row.existing > svg,
.tdata-preview-row.existing .tdata-result-state {
  color: #9a641f;
}

.tdata-result-state {
  color: #11715d;
  font-weight: 800;
  text-align: right;
}

.admin-tool-card {
  border: 1px solid #d3dce6;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 3px 12px rgba(24, 36, 52, 0.045);
}

.admin-tool-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-bottom: 1px solid #edf1f5;
  padding-bottom: 12px;
}

.admin-tool-title > div {
  display: grid;
  min-width: 0;
}

.admin-tool-title strong {
  color: #26364a;
  font-size: 13px;
}

.admin-tool-title div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.admin-tool-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: #e7f4f0;
  color: #15725f;
}

.admin-tool-icon.soft-blue {
  background: #eaf1ff;
  color: #285fbb;
}

.admin-tool-icon.soft-red {
  background: #fbecef;
  color: #ae3341;
}

.admin-tool-icon svg {
  width: 17px;
  height: 17px;
}

.admin-tool-card .login-form,
.admin-tool-card .verify-form {
  margin-top: 14px;
}

.admin-center-panel[data-admin-panel="accounts"] {
  padding: 12px 20px;
}

.admin-center-panel[data-admin-panel="accounts"] .admin-panel-heading {
  margin-bottom: 8px;
}

.admin-center-panel[data-admin-panel="accounts"] .login-form {
  gap: 7px;
}

.admin-center-panel[data-admin-panel="accounts"] .login-form label {
  gap: 4px;
}

.admin-center-panel[data-admin-panel="accounts"] .login-form input {
  min-height: 35px;
  height: 35px;
}

.admin-center-panel[data-admin-panel="accounts"] .login-form button,
.admin-center-panel[data-admin-panel="accounts"] .verify-form button[type="submit"] {
  min-height: 36px;
  height: 36px;
}

.admin-center-panel[data-admin-panel="accounts"] .verify-form {
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
}

.admin-center-panel[data-admin-panel="accounts"] .verify-form.active {
  padding: 10px;
}

.admin-center-panel[data-admin-panel="accounts"] .verify-form input {
  min-height: 36px;
  height: 36px;
}

.admin-tool-card .batch-actions button,
.admin-tool-card .group-actions button,
.admin-tool-card .delete-actions button {
  min-height: 36px;
}

.group-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
}

.admin-center-panel[data-admin-panel="groups"].active {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 10px 16px;
}

.admin-center-panel[data-admin-panel="groups"] .admin-panel-heading {
  display: none;
}

.group-workspace-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: #f9fafb;
  padding: 8px 12px;
}

.group-workspace-toolbar .group-business-select {
  margin: 0;
}

.group-workspace-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(240px, 270px) minmax(460px, 1fr);
  min-height: 0;
}

.group-workspace.group-chat-active .group-workspace-grid {
  grid-template-columns: minmax(0, 1fr);
}

.group-workspace.group-chat-active .ad-draft-pane {
  display: none;
}

.ad-draft-pane,
.group-target-pane {
  min-height: 0;
  min-width: 0;
  padding: 10px 12px;
}

.ad-draft-pane {
  border-right: 1px solid var(--line);
  background: #fbfcfd;
  overflow-y: auto;
}

.compact-title {
  padding-bottom: 10px;
}

.wide-secondary-button {
  width: 100%;
  margin-top: 8px;
}

.group-target-pane {
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.group-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.group-list-heading > div {
  display: grid;
  min-width: 0;
}

.group-list-heading strong {
  color: #26364a;
  font-size: 14px;
}

.group-list-heading div span {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-account-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 24px;
  border-radius: 6px;
  background: #e9f6f1;
  color: #14705e;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
}

.group-account-lock svg {
  width: 13px;
  height: 13px;
}

.group-target-filterbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  gap: 8px;
}

.group-target-filterbar button,
.group-export-actions button {
  min-height: 34px;
  border: 1px solid #d5dee7;
  background: #f7f9fb;
  color: #405570;
  padding: 0 8px;
  font-size: 12px;
}

.group-target-filterbar button:first-of-type {
  border-color: rgba(40, 100, 220, 0.25);
  background: #edf3ff;
  color: #285fbb;
}

.group-target-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  border-bottom: 1px solid #edf1f5;
}

.group-export-actions {
  display: flex;
  gap: 6px;
}

.group-export-actions button {
  min-height: 28px;
  height: 28px;
}

.group-workspace .group-target-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 6px;
  gap: 6px;
}

.group-workspace .group-target-row {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 8px;
}

.group-workspace .group-target-tags {
  flex-wrap: nowrap;
  max-height: 20px;
  margin-top: 4px;
  overflow: hidden;
}

.group-workspace .group-target-actions {
  grid-template-columns: 58px 64px 48px 48px;
  width: 236px;
}

.group-workspace .group-send-check,
.group-workspace .group-target-actions button {
  height: 28px;
  min-height: 28px;
}

.group-message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  flex: 0 0 auto;
  margin: 8px -12px -10px;
  border-top: 1px solid #dbe3ec;
  background: #f8fafc;
  padding: 9px 12px 10px;
}

.group-message-composer:not(.active) {
  display: none;
}

.group-message-composer.active {
  border-top-color: rgba(40, 100, 220, 0.35);
  background: #f5f8ff;
}

.group-target-pane.chat-active {
  padding: 0;
}

.group-target-pane.chat-active > :not(.group-message-composer) {
  display: none;
}

.group-target-pane.chat-active .group-message-composer.active {
  flex: 1 1 auto;
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
  min-height: 0;
  margin: 0;
  border-top: 0;
  padding: 12px 14px;
}

.group-target-pane.chat-active .group-message-history {
  height: auto;
  min-height: 220px;
  max-height: none;
}

.group-message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 10px;
}

.group-message-head > div {
  display: grid;
  min-width: 0;
}

.group-message-head strong,
.group-message-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-message-head strong {
  color: #26364a;
  font-size: 13px;
}

.group-message-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.group-message-head-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.group-message-head-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 1px solid #cbd8e6;
  background: #fff;
  color: #315879;
  padding: 0;
}

.group-message-head-actions > button svg {
  width: 14px;
  height: 14px;
}

.group-message-head-actions > svg {
  width: 18px;
  height: 18px;
  color: #2864dc;
}

.group-message-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  min-height: 28px;
  color: #405570;
  font-size: 11px;
  font-weight: 800;
}

.group-message-history-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 1px solid #d5dee7;
  background: #fff;
  color: #405570;
  padding: 0;
}

.group-message-history-head button svg {
  width: 14px;
  height: 14px;
}

.group-message-history-head button.loading svg {
  animation: spin 0.8s linear infinite;
}

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

.group-message-history {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: 6px;
  min-height: 130px;
  max-height: clamp(150px, 18vh, 200px);
  overflow-y: auto;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  background: #fff;
  padding: 8px;
}

.group-message-empty {
  margin: auto;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.group-history-row {
  align-self: flex-start;
  width: fit-content;
  max-width: 88%;
  border: 1px solid #e0e7ef;
  border-radius: 7px;
  background: #f6f8fa;
  padding: 6px 8px;
}

.group-history-row.outgoing {
  align-self: flex-end;
  border-color: #cddcff;
  background: #eaf1ff;
}

.group-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 3px;
  color: #718096;
  font-size: 10px;
}

.group-history-sender {
  overflow: hidden;
  color: #2f5275;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-history-text {
  color: #1f2937;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.group-message-composer textarea {
  grid-column: 1;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  resize: none;
}

.group-message-actions {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
}

.group-message-actions > span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.group-message-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 124px;
  min-height: 38px;
  background: #2864dc;
  color: #fff;
}

.group-message-actions button svg {
  width: 15px;
  height: 15px;
}

.security-tool-card {
  max-width: 760px;
}

.security-tool-card .delete-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.auth-pending .global-topbar {
  visibility: hidden;
}

body.auth-required .global-topbar {
  display: none;
}

@media (max-width: 1240px) {
  .global-topbar {
    grid-template-columns: auto auto minmax(150px, 0.7fr) minmax(100px, 0.6fr) auto;
    gap: 12px;
  }

  .topbar-metric:nth-child(2) {
    display: none;
  }

  .app-shell {
    grid-template-columns: 300px minmax(350px, 390px) minmax(0, 1fr);
  }
}

@media (max-width: 1500px) and (min-width: 901px) {
  .chat-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .chat-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .chat-actions button {
    flex: 0 0 auto;
  }
}

@media (max-width: 1180px) {
  .chat-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  .chat-actions button {
    min-width: 0;
    width: 100%;
  }

  .chat-body {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  .messages-list {
    min-height: 0;
  }

  .customer-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .customer-panel-toggle svg {
    width: 15px;
    height: 15px;
  }

  .customer-panel {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 6;
    display: none;
    width: min(330px, 100%);
    border-top: 0;
    border-left: 1px solid var(--line);
    background: #fafbfc;
    box-shadow: -14px 0 34px rgba(24, 36, 52, 0.14);
  }

  .customer-panel.open {
    display: block;
  }

  .customer-panel-head {
    position: sticky;
    top: -14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin: -14px -14px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    padding: 0 12px 0 14px;
    color: #34465c;
    font-size: 13px;
  }

  .customer-panel-head button {
    display: grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    border: 1px solid #d6dfe8;
    background: #f8fafc;
    color: #5c6d82;
    padding: 0;
  }

  .customer-panel-head button svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 1080px) {
  .global-topbar {
    grid-template-columns: auto auto 1fr auto;
  }

  .workspace-identity {
    display: none;
  }

  .topbar-metrics {
    justify-content: flex-start;
  }

  .topbar-action-button span {
    display: none;
  }

  .topbar-action-button {
    width: 34px;
    padding: 0;
  }

  .global-topbar .operator-bar {
    min-width: 182px;
  }

  .app-shell {
    grid-template-columns: 280px minmax(330px, 360px) minmax(0, 1fr);
  }

  .account-onboarding-grid,
  .group-workspace-grid {
    grid-template-columns: 1fr;
  }

  .admin-center-panel[data-admin-panel="groups"].active {
    display: block;
    overflow: auto;
  }

  .group-workspace {
    display: block;
  }

  .group-workspace-grid {
    min-height: 0;
  }

  .group-target-pane {
    min-height: 620px;
    overflow: hidden;
  }

  .tdata-import-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ad-draft-pane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .global-topbar {
    position: sticky;
    top: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: 60px;
    padding: 0 12px;
  }

  .topbar-metrics {
    display: none;
  }

  .topbar-actions {
    min-width: 0;
  }

  .topbar-primary-actions {
    overflow-x: auto;
  }

  .global-topbar .operator-copy {
    display: none;
  }

  .global-topbar .operator-bar {
    grid-template-columns: 30px 30px 30px;
    min-width: 0;
  }

  .app-shell {
    min-height: calc(100vh - 60px);
    height: auto;
  }

  .accounts-panel {
    overflow: visible;
  }

  .admin-center-dialog {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }

  .admin-command-bar,
  .group-workspace-toolbar {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .admin-command-bar {
    flex-direction: column;
  }

  .admin-command-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .admin-tabs {
    overflow-x: auto;
    padding: 0 8px;
  }

  .admin-tab {
    flex: 1 0 auto;
    padding: 0 10px;
  }

  .admin-center-panel {
    padding: 14px;
  }

  .security-tool-card .delete-actions {
    grid-template-columns: 1fr;
  }

  .tdata-import-layout,
  .tdata-preview-row {
    grid-template-columns: 1fr;
  }

  .tdata-preview-row > svg {
    display: none;
  }

  .tdata-result-state {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .billing-gate {
    place-items: start center;
    padding: 12px;
  }

  .billing-gate-shell {
    padding: 18px;
  }

  .billing-gate-head h1 {
    font-size: 21px;
  }

  .billing-logout-button {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .billing-logout-button span {
    display: none;
  }

  .billing-plan-grid,
  .billing-overview-main,
  .billing-usage-grid,
  .billing-plan-grid.compact .billing-plan-card {
    grid-template-columns: 1fr;
  }

  .shop-payment-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .shop-payment-toolbar select {
    width: 100%;
  }

  .billing-plan-grid.compact .billing-plan-capacity {
    grid-template-columns: 1fr;
  }

  .billing-trust-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .group-workspace .group-target-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .group-workspace .group-target-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .group-target-pane.chat-active .group-message-composer.active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(220px, 1fr) auto auto;
  }

  .group-target-pane.chat-active .group-message-composer textarea,
  .group-target-pane.chat-active .group-message-actions {
    grid-column: 1;
  }

  .group-target-pane.chat-active .group-message-actions {
    align-items: flex-end;
  }
}

.marketing-account-pool {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #cfdcf0;
  background: #f8fbff;
}

.marketing-account-pool-head,
.marketing-account-pool-head > div,
.marketing-account-pool-grid,
.marketing-account-login-form,
.marketing-account-verify-form,
.marketing-tdata-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.marketing-account-pool-head {
  justify-content: space-between;
  margin-bottom: 10px;
}

.marketing-account-pool-head > div {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.marketing-account-pool-head span,
.marketing-account-pool-head em,
.marketing-login-status {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.marketing-account-pool-grid {
  align-items: stretch;
}

.marketing-account-login-form,
.marketing-account-verify-form,
.marketing-tdata-row {
  flex: 1;
}

.marketing-account-login-form input,
.marketing-account-verify-form input,
.marketing-tdata-row > input {
  min-width: 0;
  flex: 1;
}

.marketing-account-login-form button,
.marketing-account-verify-form button,
.marketing-tdata-row button {
  white-space: nowrap;
}

.marketing-login-status {
  min-height: 20px;
  padding: 6px 2px;
}

.marketing-login-status[data-tone="error"] { color: #c03643; }
.marketing-login-status[data-tone="success"] { color: #087a64; }
.marketing-login-status[data-tone="working"] { color: #245fd4; }

.marketing-tdata-row {
  border-top: 1px solid #dfe8f4;
  padding-top: 10px;
}

.marketing-account-pool-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #f7f9fc;
}

.marketing-pool-search {
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 180px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #cedaea;
  border-radius: 6px;
  background: #fff;
  color: #71839a;
}

.marketing-pool-search svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.marketing-pool-search input {
  width: 100%;
  min-width: 0;
  height: 30px;
  border: 0;
  background: transparent;
  padding: 0 6px;
  box-shadow: none;
}

.marketing-account-pool-toolbar select,
.marketing-account-pool-toolbar button {
  height: 32px;
  min-height: 32px;
  padding: 0 9px;
  font-size: 11px;
  white-space: nowrap;
}

.marketing-pool-select-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #41536a;
  font-size: 11px;
  white-space: nowrap;
}

.marketing-pool-select-all input,
.marketing-pool-account-select {
  width: 15px;
  height: 15px;
  accent-color: #2867df;
}

.marketing-selected-count {
  color: #50647c;
  font-size: 11px;
  white-space: nowrap;
}

.marketing-account-pool-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 3px;
}

.marketing-pool-account {
  display: grid;
  grid-template-columns: 22px minmax(190px, 1.2fr) 68px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 47px;
  padding: 6px 8px;
  border: 1px solid #d5dfed;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.marketing-pool-identity {
  min-width: 0;
}

.marketing-pool-identity strong,
.marketing-pool-identity span,
.marketing-pool-error {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-pool-identity span {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}

.marketing-pool-account[data-online="true"] { border-left: 3px solid #159477; }
.marketing-pool-account[data-rate-limited="true"] {
  border-color: rgba(199, 50, 65, 0.55);
  border-left: 3px solid #cf3345;
  background: #fff4f5;
}

.marketing-pool-account[data-spam-restricted="true"] {
  border-color: rgba(175, 86, 21, 0.55);
  border-left-color: #b66a22;
  background: #fff8eb;
}

.marketing-pool-account[data-unlisted="true"] { opacity: 0.76; }

.marketing-pool-status {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf2f7;
  color: #53657a;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.marketing-pool-status[data-tone="online"] {
  background: #e5f6f0;
  color: #08765e;
}

.marketing-pool-status[data-tone="rate-limited"] {
  background: #ffdfe3;
  color: #ad2433;
}

.marketing-pool-status[data-tone="unlisted"] {
  background: #edf0f4;
  color: #68768a;
}

.marketing-pool-error {
  min-width: 0;
  color: #68798e;
  font-size: 10px;
}

.marketing-pool-account[data-rate-limited="true"] .marketing-pool-error {
  color: #b02737;
  font-weight: 600;
}

.marketing-pool-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.marketing-pool-toggle,
.marketing-pool-remove,
.marketing-pool-appeal {
  border: 0;
  padding: 5px 7px;
  font-size: 10px;
  white-space: nowrap;
}

.marketing-pool-toggle {
  background: #edf3fb;
  color: #365c88;
}

.marketing-pool-remove {
  background: #fdebed;
  color: #a52c3b;
}

.marketing-pool-appeal {
  border-radius: 5px;
  background: #fff0ce;
  color: #8a5515;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .marketing-account-pool-grid,
  .marketing-account-login-form,
  .marketing-account-verify-form,
  .marketing-tdata-row { flex-wrap: wrap; }
  .marketing-account-pool-toolbar { flex-wrap: wrap; }
  .marketing-pool-account {
    grid-template-columns: 22px minmax(160px, 1fr) 68px auto;
  }
  .marketing-pool-error {
    grid-column: 2 / -1;
    grid-row: 2;
  }
}

@media (max-width: 600px) {
  .marketing-account-pool-list { grid-template-columns: minmax(0, 1fr); }
}

/* Single-recipient, audited Telegram marketing outreach. */
.admin-center-panel[data-admin-panel="marketing"].active {
  overflow-y: auto;
  padding: 16px 18px 18px;
}

.marketing-heading {
  align-items: center;
  margin-bottom: 10px;
}

.marketing-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1px solid #b8d8ce;
  border-radius: 999px;
  background: #eef8f5;
  color: #18715f;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 800;
}

.marketing-mode-badge svg,
.marketing-safety-notice svg {
  width: 14px;
  height: 14px;
}

.marketing-safety-notice {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #ead7a7;
  border-radius: 7px;
  background: #fffaf0;
  color: #74591f;
  padding: 8px 11px;
  font-size: 10px;
  line-height: 1.45;
}

.marketing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  gap: 12px;
  margin-top: 12px;
}

.marketing-compose-card,
.marketing-preview-card {
  min-width: 0;
  border: 1px solid #d4dde6;
  border-radius: 8px;
  background: #fff;
}

.marketing-compose-card {
  padding: 14px;
}

.marketing-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.marketing-section-title > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  background: #eaf2ff;
  color: #255fc2;
}

.marketing-section-title > span svg {
  width: 15px;
  height: 15px;
}

.marketing-section-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.marketing-section-title strong {
  color: #293f56;
  font-size: 12px;
}

.marketing-section-title small {
  color: #7c8b9b;
  font-size: 9px;
}

.marketing-section-title.content-title {
  margin-top: 15px;
  border-top: 1px solid #e7ebef;
  padding-top: 14px;
}

.marketing-section-title.content-title > span {
  background: #e9f7f2;
  color: #18715f;
}

.marketing-dispatch-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid #d9e2eb;
  border-radius: 7px;
  background: #f7f9fb;
  padding: 5px;
}

.marketing-dispatch-buttons {
  display: flex;
  gap: 4px;
}

.marketing-dispatch-buttons button {
  min-width: 88px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #d0dbe6;
  border-radius: 5px;
  background: #fff;
  color: #65788c;
  padding: 0 8px;
  cursor: pointer;
}

.marketing-dispatch-buttons button[aria-pressed="true"] {
  border-color: #3970dc;
  background: #edf3ff;
  color: #2459bb;
  box-shadow: 0 0 0 1px rgba(57, 112, 220, 0.08);
}

.marketing-dispatch-buttons button:disabled {
  opacity: 0.55;
  cursor: default;
}

.marketing-dispatch-buttons strong {
  font-size: 9px;
}

.marketing-dispatch-buttons span {
  font-size: 8px;
}

.marketing-dispatch-status {
  min-width: 0;
  color: #607389;
  font-size: 8px;
  line-height: 1.4;
}

.marketing-target-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 9px;
  margin-top: 12px;
}

.marketing-target-controls label,
.marketing-target-field,
.marketing-message-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.marketing-target-controls label > span,
.marketing-target-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #66798e;
  font-size: 9px;
  font-weight: 750;
}

.marketing-target-controls label > span small,
.marketing-target-field > span small {
  color: #8b99a8;
  font-size: 8px;
  font-weight: 650;
}

.marketing-target-controls select,
.marketing-account-search {
  min-width: 0;
  height: 36px;
}

.marketing-target-controls select {
  width: 100%;
  padding: 6px 9px;
  font-size: 11px;
}

.marketing-account-search {
  width: 100%;
  height: 30px;
  padding: 5px 9px;
  border: 1px solid #d4dee8;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 10px;
}

.marketing-account-search-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 4px;
}

.marketing-account-search-row > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d4dee8;
  border-radius: 6px;
  background: #f8fafc;
  color: #718096;
  font-size: 15px;
  cursor: pointer;
}

.marketing-account-search-row > button:hover {
  border-color: #9fb2c6;
  background: #fff;
  color: #20364d;
}

.marketing-account-search:focus {
  border-color: #3970dc;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(57, 112, 220, 0.1);
}

.marketing-username-batch {
  display: grid;
  overflow: hidden;
  border: 1px solid #cbd7e3;
  border-radius: 6px;
  background: #fff;
}

.marketing-username-batch:focus-within {
  border-color: #3970dc;
  box-shadow: 0 0 0 2px rgba(57, 112, 220, 0.1);
}

.marketing-username-batch textarea {
  width: 100%;
  min-height: 58px;
  max-height: 112px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 7px 9px 5px;
  color: #24384d;
  font-size: 10px;
  line-height: 1.45;
}

.marketing-username-queue-bar {
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border-top: 1px solid #e5ebf0;
  background: #f7f9fb;
  padding: 3px 5px 3px 8px;
}

.marketing-username-queue-bar > span {
  min-width: 0;
  overflow: hidden;
  color: #7a8999;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-username-queue-bar > span[data-tone="error"] {
  color: #b23d4a;
}

.marketing-username-queue-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
}

.marketing-username-queue-actions button {
  min-width: 23px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid #d1dce7;
  border-radius: 4px;
  background: #fff;
  color: #4f6479;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.marketing-username-queue-actions button.clear {
  font-size: 8px;
}

.marketing-username-queue-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}

.marketing-username-queue-actions b {
  min-width: 37px;
  color: #53687e;
  font-size: 8px;
  text-align: center;
}

.marketing-lookup-status,
.marketing-send-status {
  min-height: 30px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: #f5f7f9;
  color: #6b7c8e;
  margin-top: 8px;
  padding: 6px 9px;
  font-size: 9px;
}

.marketing-lookup-status[data-tone="working"],
.marketing-send-status[data-tone="working"] {
  background: #eef4ff;
  color: #2c5eae;
}

.marketing-lookup-status[data-tone="success"],
.marketing-send-status[data-tone="success"] {
  background: #eaf7f2;
  color: #18715f;
}

.marketing-lookup-status[data-tone="error"],
.marketing-send-status[data-tone="error"] {
  background: #fff0f1;
  color: #a73846;
}

.marketing-target-card {
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #bad9d0;
  border-radius: 7px;
  background: #f3faf8;
  margin-top: 8px;
  padding: 8px 10px;
}

.marketing-target-avatar,
.marketing-preview-chat-head > span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dfeaff;
  color: #255dbd;
  font-weight: 850;
}

.marketing-target-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.marketing-target-card > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.marketing-target-card strong,
.marketing-target-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-target-card strong {
  color: #29465a;
  font-size: 11px;
}

.marketing-target-card small {
  color: #6d8294;
  font-size: 9px;
}

.marketing-target-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.marketing-target-badge {
  border-radius: 999px;
  background: #e2f2ed;
  color: #196f60;
  padding: 3px 6px;
  font-size: 7px;
  font-weight: 800;
}

.marketing-target-badge.verified {
  background: #e4edff;
  color: #285cae;
}

.marketing-target-badge.premium {
  background: #f1e9ff;
  color: #7241b5;
}

.marketing-message-field {
  position: relative;
  margin-top: 10px;
}

.marketing-message-field textarea {
  min-height: 132px;
  resize: vertical;
  padding: 10px 10px 25px;
  font-size: 11px;
  line-height: 1.55;
}

.marketing-message-field > span {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: #8a96a4;
  font-size: 8px;
}

.marketing-message-field > span em {
  font-style: normal;
}

.marketing-template-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.marketing-template-actions button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 9px;
}

.marketing-one-click-note {
  display: flex;
  align-items: center;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
  background: #f8fafb;
  color: #53677c;
  margin-top: 12px;
  padding: 9px 10px;
  font-size: 9px;
  line-height: 1.45;
}

.marketing-cooldown-status {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #edd5a4;
  border-radius: 6px;
  background: #fff8e9;
  color: #9a6616;
  margin-top: 7px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 700;
}

.marketing-send-button {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  background: #2864d7;
  color: #fff;
}

.marketing-send-button svg {
  width: 15px;
  height: 15px;
}

.marketing-send-button:disabled {
  background: #aebbc9;
  color: #eef2f6;
}

.marketing-send-status {
  margin-top: 7px;
}

.marketing-preview-card {
  overflow: hidden;
}

.marketing-preview-card > header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e1e7ed;
  background: #f8fafb;
  padding: 9px 12px;
}

.marketing-preview-card > header > div {
  display: grid;
  gap: 2px;
}

.marketing-preview-card > header strong {
  color: #30465d;
  font-size: 11px;
}

.marketing-preview-card > header span {
  color: #8290a0;
  font-size: 8px;
}

.marketing-preview-card > header svg {
  width: 17px;
  height: 17px;
  color: #56708b;
}

.marketing-preview-phone {
  overflow: hidden;
  border: 1px solid #cfd9e3;
  border-radius: 10px;
  background: #edf2f6;
  margin: 13px;
}

.marketing-preview-chat-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #dbe3ea;
  background: #fff;
  padding: 8px 10px;
}

.marketing-preview-chat-head > span {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  font-size: 10px;
}

.marketing-preview-chat-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.marketing-preview-chat-head strong,
.marketing-preview-chat-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-preview-chat-head strong {
  color: #30455b;
  font-size: 10px;
}

.marketing-preview-chat-head small {
  color: #8391a0;
  font-size: 8px;
}

.marketing-preview-body {
  min-height: 235px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
}

.marketing-preview-bubble {
  max-width: 88%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 9px 9px 2px 9px;
  background: #3168ce;
  color: #fff;
  padding: 8px 10px;
  font-size: 9px;
  line-height: 1.5;
}

.marketing-guard-list {
  display: grid;
  border-top: 1px solid #e5eaf0;
}

.marketing-guard-list > div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #edf0f3;
  padding: 8px 12px;
}

.marketing-guard-list > div:last-child {
  border-bottom: 0;
}

.marketing-guard-list svg {
  width: 15px;
  height: 15px;
  color: #58718a;
}

.marketing-guard-list span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.marketing-guard-list strong {
  color: #41576d;
  font-size: 9px;
}

.marketing-guard-list small {
  color: #8693a1;
  font-size: 8px;
}

@media (max-width: 900px) {
  .marketing-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-preview-body {
    min-height: 180px;
  }
}

@media (max-width: 600px) {
  .marketing-dispatch-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-dispatch-buttons button {
    flex: 1 1 0;
  }

  .marketing-target-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-target-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .marketing-target-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .marketing-template-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Transparent, owner-only anti-fraud monitoring workspace. */
.admin-center-panel[data-admin-panel="monitor"].active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 16px 16px;
}

.monitor-heading {
  flex: 0 0 auto;
  align-items: center;
  margin-bottom: 9px;
}

.monitor-heading h3 {
  font-size: 16px;
}

.monitor-heading p {
  margin-top: 3px;
  font-size: 10px;
}

.monitor-audit-badge,
.monitor-notice,
.monitor-column > header,
.monitor-item-title,
.monitor-conversation-tags {
  display: flex;
  align-items: center;
}

.monitor-audit-badge {
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid #a9d8ce;
  border-radius: 999px;
  background: #edf8f5;
  color: #176f63;
  padding: 5px 9px;
  font-size: 9px;
  font-weight: 800;
}

.monitor-audit-badge svg,
.monitor-notice svg {
  width: 14px;
  height: 14px;
}

.monitor-notice {
  gap: 8px;
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid #ecd8aa;
  border-radius: 6px;
  background: #fffaf0;
  color: #765a21;
  padding: 7px 10px;
  font-size: 10px;
}

.monitor-toolbar {
  display: grid;
  grid-template-columns: minmax(145px, 0.9fr) minmax(135px, 0.85fr) minmax(125px, 0.8fr) minmax(170px, 1.15fr) auto;
  gap: 8px;
  flex: 0 0 auto;
  align-items: end;
  padding: 9px 0;
}

.monitor-toolbar label {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.monitor-toolbar label > span {
  color: #6c7d90;
  font-size: 8px;
  font-weight: 750;
}

.monitor-toolbar select,
.monitor-toolbar input,
.monitor-toolbar button {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 8px;
  font-size: 10px;
}

.monitor-toolbar button {
  width: auto;
  min-width: 70px;
}

.monitor-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  flex: 0 0 auto;
  margin-bottom: 9px;
}

.monitor-metrics article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label value" "hint value";
  align-items: center;
  gap: 2px 8px;
  min-height: 52px;
  border: 1px solid #d6dfe8;
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
}

.monitor-metrics article > span {
  grid-area: label;
  color: #65768a;
  font-size: 9px;
}

.monitor-metrics article > strong {
  grid-area: value;
  max-width: 150px;
  overflow: hidden;
  color: #20364f;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-metrics article:last-child > strong {
  font-size: 12px;
}

.monitor-metrics article > small {
  grid-area: hint;
  color: #8794a3;
  font-size: 8px;
}

.monitor-workspace-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 225px 300px minmax(0, 1fr);
  gap: 8px;
  flex: 1 1 auto;
}

.monitor-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d5dee7;
  border-radius: 7px;
  background: #fff;
}

.monitor-column > header {
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 38px;
  border-bottom: 1px solid #e2e7ec;
  background: #f8fafb;
  padding: 7px 10px;
}

.monitor-column > header strong {
  color: #31475e;
  font-size: 11px;
}

.monitor-column > header span,
.monitor-column > header em {
  color: #8090a2;
  font-size: 8px;
  font-style: normal;
}

.monitor-chat-column > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.monitor-chat-column > header strong,
.monitor-chat-column > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-chat-column > header em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e9f6f2;
  color: #197263;
  padding: 4px 7px;
  font-weight: 800;
}

.monitor-list,
.monitor-message-list {
  min-height: 0;
  overflow: auto;
  flex: 1 1 auto;
}

.monitor-account-item,
.monitor-conversation-item {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 0;
  border-bottom: 1px solid #edf0f3;
  border-radius: 0;
  background: #fff;
  color: #4d6176;
  padding: 9px 10px;
  text-align: left;
}

.monitor-account-item:hover,
.monitor-conversation-item:hover {
  background: #f6f9fc;
  box-shadow: none;
  transform: none;
}

.monitor-account-item.active,
.monitor-conversation-item.active {
  background: #edf4ff;
  box-shadow: inset 3px 0 #2c66da;
}

.monitor-item-title {
  min-width: 0;
  gap: 6px;
}

.monitor-item-title strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #253a51;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-item-title em,
.monitor-item-title time {
  flex: 0 0 auto;
  color: #8593a2;
  font-size: 8px;
  font-style: normal;
}

.monitor-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9aa7b5;
}

.monitor-account-item.is-online .monitor-status-dot {
  background: #139477;
}

.monitor-item-meta,
.monitor-item-stats,
.monitor-conversation-snippet,
.monitor-conversation-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-item-meta,
.monitor-conversation-snippet {
  color: #5d7186;
  font-size: 9px;
}

.monitor-item-stats,
.monitor-conversation-source {
  color: #8794a2;
  font-size: 8px;
}

.monitor-conversation-tags {
  gap: 4px;
  overflow: hidden;
  min-height: 18px;
}

.monitor-conversation-tags .tag-chip,
.monitor-conversation-tags .status-pill {
  flex: 0 0 auto;
  padding: 2px 5px;
  font-size: 7px;
}

.monitor-message-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #f3f6f9;
  padding: 10px;
}

.monitor-message {
  display: flex;
  justify-content: flex-start;
}

.monitor-message.outgoing {
  justify-content: flex-end;
}

.monitor-message-bubble {
  max-width: 86%;
  display: grid;
  gap: 4px;
  border: 1px solid #d9e1e9;
  border-radius: 8px 8px 8px 2px;
  background: #fff;
  color: #33495f;
  padding: 7px 9px;
  font-size: 10px;
  line-height: 1.45;
}

.monitor-message.outgoing .monitor-message-bubble {
  border-color: #2d63c7;
  border-radius: 8px 8px 2px 8px;
  background: #3268ce;
  color: #fff;
}

.monitor-message-author,
.monitor-message time {
  color: #8491a0;
  font-size: 7px;
}

.monitor-message.outgoing .monitor-message-author,
.monitor-message.outgoing time {
  color: rgba(255, 255, 255, 0.72);
}

.monitor-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.monitor-message .message-media {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.monitor-message .message-media-preview,
.monitor-message .message-media-preview.video {
  width: auto;
  max-width: 100%;
  max-height: 260px;
}

.monitor-message.outgoing .message-media-meta,
.monitor-message.outgoing .message-media-meta a {
  color: rgba(255, 255, 255, 0.82);
}

.monitor-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8290a0;
  padding: 20px;
  text-align: center;
}

.monitor-empty svg {
  width: 24px;
  height: 24px;
  color: #a1adba;
}

.monitor-empty strong {
  color: #5c6e81;
  font-size: 10px;
}

.monitor-empty span {
  font-size: 8px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .admin-center-panel[data-admin-panel="monitor"].active {
    overflow-y: auto;
  }

  .monitor-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-toolbar button {
    width: 100%;
  }

  .monitor-workspace-grid {
    min-height: 760px;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .monitor-column {
    min-height: 230px;
  }
}

@media (max-width: 600px) {
  .monitor-metrics,
  .monitor-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep queue controls dense so conversations remain visible on laptop-height screens. */
.inbox-toolbar.queue-compact {
  gap: 6px;
  padding: 10px 12px 9px;
}

.queue-compact .inbox-toolbar-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.queue-compact .inbox-toolbar-heading h2 {
  flex: 0 0 auto;
  font-size: 16px;
}

.queue-compact .inbox-toolbar-heading p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-compact .kpi-grid {
  gap: 6px;
}

.queue-compact .kpi-card {
  min-height: 44px;
  gap: 2px;
  border-top-width: 2px;
  padding: 5px 8px;
}

.queue-compact .kpi-card span {
  font-size: 11px;
}

.queue-compact .kpi-card strong {
  font-size: 18px;
}

.queue-compact .filter-tabs {
  gap: 3px;
  padding: 3px;
}

.queue-compact .filter-tab,
.queue-compact .filter-reset-button {
  min-height: 28px;
  padding: 0 6px;
  font-size: 12px;
}

.queue-compact .filter-row {
  gap: 6px;
}

.queue-compact .filter-row select,
.queue-compact #searchInput {
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.queue-compact .filter-row.compact {
  min-height: 24px;
}

.queue-compact .checkline,
.queue-compact .numberline {
  gap: 5px;
  font-size: 12px;
}

.queue-compact .checkline input {
  width: 14px;
  height: 14px;
}

.queue-compact .numberline {
  grid-template-columns: auto minmax(46px, 1fr) auto;
}

.queue-compact .numberline input {
  height: 26px;
  padding: 0 7px;
}

/* Role-aware management overview and customer next action. */
.customer-next-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid #cbd9e7;
  border-left: 4px solid #0d7c88;
  border-radius: 7px;
  background: #f7fafc;
  padding: 14px 16px;
}

.customer-next-icon,
.admin-overview-lead-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: #e5f3f1;
  color: #0b756c;
}

.customer-next-icon svg,
.admin-overview-lead-icon svg {
  width: 18px;
  height: 18px;
}

.customer-next-action > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.customer-next-action small {
  color: #0b756c;
  font-size: 10px;
  font-weight: 850;
}

.customer-next-action strong {
  color: #203249;
  font-size: 14px;
}

.customer-next-action p {
  margin: 0;
  color: #68798d;
  font-size: 11px;
  line-height: 1.5;
}

.customer-next-action button,
.admin-overview-lead button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  white-space: nowrap;
}

.customer-next-action button svg,
.admin-overview-lead button svg {
  width: 15px;
  height: 15px;
}

.admin-overview-heading {
  margin-bottom: 12px;
}

.admin-overview-lead {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 94px;
  border: 1px solid #cbd8e5;
  border-left: 4px solid #0d7c88;
  border-radius: 7px;
  background: #fff;
  padding: 15px 16px;
}

.admin-overview-lead > div {
  min-width: 0;
}

.admin-overview-lead small {
  color: #0b756c;
  font-size: 10px;
  font-weight: 850;
}

.admin-overview-lead h4 {
  margin: 4px 0 3px;
  color: #1d2d42;
  font-size: 17px;
}

.admin-overview-lead p {
  margin: 0;
  color: #6b7b8e;
  font-size: 11px;
  line-height: 1.5;
}

.admin-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.admin-overview-metrics article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 82px;
  border: 1px solid #d4dde6;
  border-radius: 7px;
  background: #fff;
  padding: 12px;
}

.admin-overview-metrics article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #eaf1fb;
  color: #285fae;
}

.admin-overview-metrics article:nth-child(2) > span {
  background: #e7f4ef;
  color: #16725e;
}

.admin-overview-metrics article:nth-child(3) > span {
  background: #fff2df;
  color: #9b641d;
}

.admin-overview-metrics article:nth-child(4) > span {
  background: #f0ebfa;
  color: #6541a0;
}

.admin-overview-metrics svg {
  width: 16px;
  height: 16px;
}

.admin-overview-metrics article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-overview-metrics small,
.admin-overview-metrics em {
  overflow: hidden;
  color: #718096;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-overview-metrics strong {
  overflow-wrap: anywhere;
  color: #1b2b40;
  font-size: 22px;
  line-height: 1.1;
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 12px;
  margin-top: 12px;
}

.admin-overview-section {
  min-width: 0;
  border: 1px solid #d4dde6;
  border-radius: 7px;
  background: #fff;
}

.admin-overview-section > header {
  min-height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5eaf0;
  padding: 10px 13px;
}

.admin-overview-section > header > div {
  display: grid;
  gap: 2px;
}

.admin-overview-section > header strong {
  color: #27384c;
  font-size: 13px;
}

.admin-overview-section > header span {
  color: #7a899a;
  font-size: 10px;
}

.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #e7ebf0;
}

.admin-quick-actions button {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  gap: 9px;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #50637a;
  padding: 10px 12px;
  text-align: left;
}

.admin-quick-actions button:hover:not(:disabled) {
  background: #f5f8fc;
  box-shadow: none;
  transform: none;
}

.admin-quick-actions button > svg:first-child {
  width: 18px;
  height: 18px;
  color: #2461b7;
}

.admin-quick-actions button > svg:last-child {
  width: 14px;
  height: 14px;
  color: #9aa7b6;
}

.admin-quick-actions button > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-quick-actions strong,
.admin-quick-actions small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-quick-actions strong {
  color: #26384e;
  font-size: 12px;
}

.admin-quick-actions small {
  color: #79889a;
  font-size: 9px;
}

.admin-health-list {
  display: grid;
}

.admin-health-list > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 67px;
  border-bottom: 1px solid #e8edf1;
  padding: 10px 13px;
}

.admin-health-list > div:last-child {
  border-bottom: 0;
}

.admin-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa7b4;
}

.admin-health-list > div[data-tone="good"] .admin-health-dot {
  background: #16866d;
}

.admin-health-list > div[data-tone="warning"] .admin-health-dot {
  background: #cf7a22;
}

.admin-health-list > div > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-health-list strong,
.admin-health-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-health-list strong {
  color: #2a3a4e;
  font-size: 12px;
}

.admin-health-list small {
  color: #788799;
  font-size: 9px;
}

.admin-health-list em {
  border-radius: 5px;
  background: #edf1f5;
  color: #627286;
  padding: 4px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.admin-health-list > div[data-tone="good"] em {
  background: #e7f4ef;
  color: #16715e;
}

.admin-health-list > div[data-tone="warning"] em {
  background: #fff1df;
  color: #98601b;
}

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

  .admin-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .customer-next-action,
  .admin-overview-lead {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .customer-next-action button,
  .admin-overview-lead button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-overview-metrics,
  .admin-quick-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Public product showcase and customer entry */
body.auth-required {
  overflow: hidden;
}

.auth-gate {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f2f5f8;
  padding: 0;
}

.public-page {
  width: min(1320px, 100%);
  min-height: 100%;
  margin: 0 auto;
  background: #fff;
  border-right: 1px solid #dce3ea;
  border-left: 1px solid #dce3ea;
}

.public-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #dde4eb;
  background: rgba(255, 255, 255, 0.96);
  padding: 0 34px;
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.public-brand > div:last-child {
  display: grid;
  gap: 1px;
}

.public-brand strong {
  color: #142133;
  font-size: 16px;
}

.public-brand span {
  color: #738194;
  font-size: 11px;
}

.public-nav-actions,
.public-hero-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.public-text-button,
.public-outline-button,
.public-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.public-text-button {
  background: transparent;
  color: #516174;
  box-shadow: none;
}

.public-outline-button {
  border: 1px solid #cbd6e1;
  background: #fff;
  color: #293d55;
}

.public-primary-button {
  background: #1f5fd1;
  color: #fff;
}

.public-text-button:hover:not(:disabled),
.public-outline-button:hover:not(:disabled) {
  border-color: #94abc3;
  background: #f4f7fa;
  box-shadow: none;
  transform: none;
}

.public-nav-actions svg,
.public-hero-actions svg,
.public-primary-button svg,
.public-outline-button svg {
  width: 16px;
  height: 16px;
}

.public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 70px;
  align-items: center;
  border-bottom: 1px solid #dce3ea;
  padding: 54px 52px 48px;
}

.public-hero-copy {
  min-width: 0;
  max-width: 690px;
}

.public-kicker,
.public-section-heading .section-eyebrow {
  color: #0b7480;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

.public-hero-copy h1 {
  max-width: 650px;
  margin: 14px 0 18px;
  color: #142133;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: 0;
}

.public-hero-copy > p {
  max-width: 640px;
  margin: 0;
  color: #556579;
  font-size: 17px;
  line-height: 1.75;
}

.public-hero-actions {
  margin-top: 28px;
}

.public-hero-actions button {
  min-height: 44px;
}

.public-proof-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 30px;
  color: #6c7a8c;
  font-size: 12px;
}

.public-proof-line span {
  padding-left: 11px;
  border-left: 2px solid #b7c6d5;
}

.public-proof-line strong {
  color: #1c334e;
}

.public-page .auth-card {
  width: 100%;
  border: 1px solid #cdd8e3;
  border-top: 4px solid #0d7c88;
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(23, 37, 54, 0.13);
  padding: 24px;
}

.public-page .auth-brand {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
}

.public-page .auth-brand h2 {
  margin: 5px 0 0;
  font-size: 21px;
  letter-spacing: 0;
}

.public-page .auth-brand p {
  max-width: 300px;
  margin: 5px 0 0;
  line-height: 1.5;
}

.auth-brand-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: #0d7c88;
}

.public-page .auth-mode-tabs {
  margin-top: 16px;
}

.public-page .operator-login-form {
  gap: 12px;
  margin-top: 17px;
}

.public-page .operator-login-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.public-page .operator-login-form button svg {
  width: 16px;
  height: 16px;
}

.public-selected-plan {
  margin-top: 14px;
  border-left: 3px solid #1f5fd1;
  background: #edf3ff;
  color: #2b4e7b;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.auth-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 0;
  color: #7b8898;
  font-size: 11px;
}

.auth-footnote svg {
  width: 13px;
  height: 13px;
}

.auth-legal-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid #d8e1ec;
  border-radius: 9px;
  background: #f7f9fc;
  color: #66758a;
  font-size: 11px;
  line-height: 1.55;
}

.auth-legal-note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: #2770c8;
}

.public-demo-section,
.public-pricing-section {
  padding: 46px 52px;
}

.public-pricing-section {
  border-top: 1px solid #dce3ea;
  background: #f5f7fa;
}

.public-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 22px;
}

.public-section-heading h2 {
  margin: 6px 0 0;
  color: #172536;
  font-size: 27px;
  letter-spacing: 0;
}

.public-section-heading > p {
  width: min(460px, 45%);
  margin: 0;
  color: #667587;
  line-height: 1.6;
  text-align: right;
}

.public-workbench-demo {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #cbd5df;
  border-radius: 7px;
  background: #eef2f6;
  box-shadow: 0 18px 44px rgba(28, 44, 62, 0.11);
}

.demo-topbar,
.demo-body {
  min-width: 900px;
}

.demo-topbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #d6dee7;
  background: #fff;
  padding: 0 16px;
}

.demo-topbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-topbar small {
  border-left: 1px solid #d6dee7;
  color: #748296;
  padding-left: 9px;
}

.demo-logo,
.demo-operator {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #172536;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.demo-operator {
  border-radius: 50%;
  background: #eaf1ff;
  color: #245bbb;
}

.demo-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #596a7d;
  font-size: 11px;
}

.demo-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.demo-metrics b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a9273;
}

.demo-metrics svg {
  width: 13px;
  height: 13px;
}

.demo-body {
  height: 390px;
  display: grid;
  grid-template-columns: 245px 310px minmax(345px, 1fr);
}

.demo-accounts,
.demo-inbox,
.demo-chat {
  min-width: 0;
  overflow: hidden;
  background: #fff;
}

.demo-accounts,
.demo-inbox {
  border-right: 1px solid #d7dfe8;
}

.demo-accounts {
  background: #f7f9fb;
  padding: 12px;
}

.demo-inbox {
  padding: 12px;
}

.demo-pane-head {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #2c3d51;
  font-size: 12px;
}

.demo-pane-head > span {
  color: #77869a;
  font-size: 10px;
}

.demo-account {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 8px;
}

.demo-account.active {
  border-color: #b9cceb;
  background: #edf3fd;
}

.demo-account > b {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: #16886d;
}

.demo-account > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.demo-account strong,
.demo-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-account strong {
  color: #27384c;
  font-size: 11px;
}

.demo-account span {
  color: #6f7f92;
  font-size: 9px;
}

.demo-account em {
  color: #14755f;
  font-size: 9px;
  font-style: normal;
}

.demo-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 9px;
}

.demo-kpis span {
  display: grid;
  gap: 2px;
  border-bottom: 2px solid #c9d5e2;
  color: #738195;
  padding: 6px 5px;
  font-size: 9px;
}

.demo-kpis b {
  color: #24374e;
  font-size: 15px;
}

.demo-conversation {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
  padding: 10px 7px;
}

.demo-conversation.active {
  border-left-color: #2864dc;
  background: #edf3ff;
}

.demo-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e6f4f0;
  color: #14705e;
  font-size: 10px;
  font-weight: 800;
}

.demo-avatar.blue {
  background: #e8effd;
  color: #285bb4;
}

.demo-avatar.amber {
  background: #fff1df;
  color: #9a5e16;
}

.demo-conversation > div {
  min-width: 0;
}

.demo-conversation strong,
.demo-conversation p,
.demo-conversation small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-conversation strong {
  color: #27384c;
  font-size: 11px;
}

.demo-conversation p {
  margin: 4px 0;
  color: #536477;
  font-size: 10px;
}

.demo-conversation small {
  color: #c43c4b;
  font-size: 8px;
}

.demo-conversation time {
  color: #8290a1;
  font-size: 8px;
}

.demo-chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.demo-chat-head {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #d7dfe8;
  padding: 10px 13px;
}

.demo-chat-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.demo-chat-head strong {
  font-size: 12px;
}

.demo-chat-head span {
  overflow: hidden;
  color: #c43c4b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-chat-head em {
  border: 1px solid #edcad0;
  border-radius: 999px;
  background: #fff1f3;
  color: #a52f3e;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
}

.demo-message-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f2f5f8;
  padding: 18px 13px;
}

.demo-message {
  max-width: 76%;
  border: 1px solid #d5dee7;
  border-radius: 7px;
  background: #fff;
  color: #35465a;
  padding: 9px 10px;
  font-size: 10px;
  line-height: 1.45;
}

.demo-message.outgoing {
  align-self: flex-end;
  border-color: #2d62c0;
  background: #2f66c8;
  color: #fff;
}

.demo-message time {
  display: block;
  margin-top: 5px;
  color: inherit;
  font-size: 8px;
  opacity: 0.7;
  text-align: right;
}

.demo-composer {
  min-height: 53px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  border-top: 1px solid #d7dfe8;
  padding: 8px 10px;
}

.demo-composer > span {
  border: 1px solid #d3dce5;
  border-radius: 5px;
  color: #9aa5b2;
  padding: 9px;
  font-size: 9px;
}

.demo-composer button {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  pointer-events: none;
}

.demo-composer svg {
  width: 14px;
  height: 14px;
}

.public-capability-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 26px;
  border-top: 1px solid #dce3ea;
  border-bottom: 1px solid #dce3ea;
}

.public-capability-row article {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 10px;
  border-right: 1px solid #dce3ea;
  padding: 21px 20px;
}

.public-capability-row article:first-child {
  padding-left: 0;
}

.public-capability-row article:last-child {
  border-right: 0;
  padding-right: 0;
}

.public-capability-row svg {
  width: 21px;
  height: 21px;
  color: #0d7c88;
}

.public-capability-row strong {
  color: #25374d;
  font-size: 13px;
}

.public-capability-row p {
  margin: 6px 0 0;
  color: #718094;
  font-size: 11px;
  line-height: 1.6;
}

.public-plan-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.public-plan-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  border: 1px solid #cfd9e3;
  border-top: 3px solid #8395aa;
  border-radius: 8px;
  background: #fff;
  padding: 22px;
}

.public-plan-card.featured {
  border-top-color: #0d7c88;
}

.public-plan-main {
  min-width: 0;
}

.public-plan-name {
  color: #4d5f73;
  font-size: 13px;
  font-weight: 800;
}

.public-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 8px 0 14px;
  color: #172536;
}

.public-plan-price strong {
  font-size: 34px;
  line-height: 1;
}

.public-plan-price span {
  color: #7a8899;
  font-size: 11px;
}

.public-plan-limits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #607185;
  font-size: 11px;
}

.public-plan-limits span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.public-plan-limits svg {
  width: 13px;
  height: 13px;
  color: #0d7c88;
}

.public-plan-card button {
  min-width: 126px;
}

.public-trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 22px;
  color: #6c7b8d;
  font-size: 11px;
}

.public-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.public-trust-row svg {
  width: 14px;
  height: 14px;
}

.public-footer {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #172536;
  color: #fff;
  padding: 22px 52px;
}

.public-footer > div {
  display: grid;
  gap: 4px;
}

.public-footer strong {
  font-size: 16px;
}

.public-footer span {
  color: #afbbc8;
  font-size: 11px;
}

.public-footer-copy {
  min-width: 0;
  max-width: 920px;
}

.public-footer-legal {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.public-footer-legal small {
  color: #91a0b2;
  font-size: 10px;
  line-height: 1.55;
}

.public-footer > button {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .public-hero {
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 34px;
    padding: 42px 30px;
  }

  .public-hero-copy h1 {
    font-size: 37px;
  }

  .public-hero-copy > p {
    font-size: 15px;
  }

  .public-demo-section,
  .public-pricing-section {
    padding: 38px 30px;
  }

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

  .public-capability-row article,
  .public-capability-row article:first-child,
  .public-capability-row article:last-child {
    border-right: 1px solid #dce3ea;
    border-bottom: 1px solid #dce3ea;
    padding: 18px;
  }

  .public-capability-row article:nth-child(2n) {
    border-right: 0;
  }

  .public-capability-row article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .public-plan-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .public-plan-card button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .public-page {
    display: flex;
    flex-direction: column;
  }

  .public-nav {
    order: 0;
    min-height: 62px;
    padding: 0 16px;
  }

  .public-nav-actions .public-text-button,
  .public-nav-actions .public-register-action {
    display: none;
  }

  .public-nav-actions .public-outline-button {
    min-width: 40px;
    padding: 0 11px;
  }

  .public-hero {
    display: contents;
  }

  .public-hero-copy {
    order: 1;
    max-width: none;
    border-bottom: 1px solid #dce3ea;
    padding: 34px 18px 30px;
  }

  .public-demo-section {
    order: 2;
  }

  .public-page .auth-card {
    order: 3;
    width: calc(100% - 36px);
    margin: 4px 18px 34px;
  }

  .public-pricing-section {
    order: 4;
  }

  .public-footer {
    order: 5;
  }

  .public-hero-copy h1 {
    font-size: 34px;
  }

  .public-hero-copy h1 span {
    display: block;
  }

  .public-page .auth-card {
    padding: 20px;
  }

  .public-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .public-section-heading > p {
    width: 100%;
    text-align: left;
  }

  .public-demo-section,
  .public-pricing-section {
    padding: 34px 18px;
  }

  .public-plan-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 24px 18px;
  }

  .public-footer > button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .public-brand span {
    display: none;
  }

  .public-hero-copy h1 {
    font-size: 30px;
  }

  .public-hero-copy > p {
    font-size: 14px;
  }

  .public-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .public-hero-actions button {
    width: 100%;
  }

  .public-proof-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .public-capability-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-capability-row article,
  .public-capability-row article:first-child,
  .public-capability-row article:last-child,
  .public-capability-row article:nth-child(2n),
  .public-capability-row article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid #dce3ea;
    padding: 17px 0;
  }

  .public-capability-row article:last-child {
    border-bottom: 0;
  }

  .public-plan-card {
    padding: 18px;
  }
}

.public-control-section {
  overflow: hidden;
  background: #101b2a;
  color: #eaf2f8;
  padding: 52px;
}

.public-control-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.76fr) minmax(560px, 1.24fr);
  gap: 44px;
  align-items: center;
}

.public-control-copy {
  min-width: 0;
}

.public-live-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #90a5b9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.public-live-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #43c6a4;
  box-shadow: 0 0 0 4px rgba(67, 198, 164, 0.12);
}

.public-live-status em {
  margin-left: auto;
  color: #4fc0ce;
  font-style: normal;
}

.public-control-kicker {
  display: block;
  margin-top: 42px;
  color: #4fc0ce;
  font-size: 11px;
  font-weight: 850;
}

.public-control-copy h2 {
  margin: 10px 0 15px;
  color: #f5f8fb;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0;
}

.public-control-copy > p {
  margin: 0;
  color: #aebdca;
  line-height: 1.75;
}

.public-tech-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 28px;
  border: 1px solid #2b3d50;
  border-radius: 6px;
  background: #152334;
  padding: 4px;
}

.public-tech-tabs button {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 4px;
  background: transparent;
  color: #91a4b6;
  padding: 0 7px;
  font-size: 11px;
  box-shadow: none;
}

.public-tech-tabs button:hover:not(:disabled) {
  background: #1b2d40;
  box-shadow: none;
  transform: none;
}

.public-tech-tabs button.active {
  background: #e9f3f7;
  color: #173a4c;
}

.public-tech-tabs svg {
  width: 14px;
  height: 14px;
}

.public-tech-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  border-top: 1px solid #2c3e50;
  border-bottom: 1px solid #2c3e50;
}

.public-tech-metrics > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  border-right: 1px solid #2c3e50;
  padding: 15px 13px;
}

.public-tech-metrics > div:first-child {
  padding-left: 0;
}

.public-tech-metrics > div:last-child {
  border-right: 0;
}

.public-tech-metrics span {
  overflow: hidden;
  color: #8fa2b4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-tech-metrics strong {
  color: #f3f8fb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 25px;
}

.public-tech-metrics small {
  color: #4fc0ce;
  font-size: 8px;
}

.public-topology {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #32475b;
  border-radius: 7px;
  background: #0c1623;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.topology-system-head,
.topology-canvas,
.topology-log {
  min-width: 720px;
}

.topology-system-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #2b3e51;
  background: #142334;
  color: #8297aa;
  padding: 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.topology-system-head span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #66cfad;
}

.topology-system-head b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43c6a4;
}

.topology-canvas {
  position: relative;
  height: 390px;
  background: #0f1b29;
}

.topology-canvas::before,
.topology-canvas::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.topology-canvas::before {
  inset: 26px;
  border: 1px solid rgba(108, 145, 172, 0.09);
}

.topology-canvas::after {
  top: 50%;
  right: 26px;
  left: 26px;
  border-top: 1px solid rgba(108, 145, 172, 0.08);
}

.topology-node {
  position: absolute;
  z-index: 2;
  min-height: 78px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #31485c;
  border-radius: 6px;
  background: #142334;
  padding: 12px;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.topology-node.source {
  top: 58px;
  left: 30px;
  width: 190px;
}

.topology-node.router {
  top: 58px;
  left: calc(50% - 95px);
  width: 190px;
}

.topology-node.queue {
  top: 58px;
  right: 30px;
  width: 190px;
}

.topology-destinations {
  position: absolute;
  right: 88px;
  bottom: 43px;
  left: 88px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px;
}

.topology-destinations .topology-node {
  position: relative;
  min-width: 0;
}

.topology-node-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #38546b;
  border-radius: 5px;
  background: #192c3e;
  color: #55beca;
}

.topology-node-icon svg {
  width: 17px;
  height: 17px;
}

.topology-node > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.topology-node small,
.topology-node strong,
.topology-node em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topology-node small {
  color: #698095;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.topology-node strong {
  color: #dbe7ee;
  font-size: 11px;
}

.topology-node em {
  color: #5dbea9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 7px;
  font-style: normal;
}

.public-topology[data-active-view="accounts"] [data-tech-node="accounts"],
.public-topology[data-active-view="inbox"] [data-tech-node="inbox"],
.public-topology[data-active-view="groups"] [data-tech-node="groups"],
.public-topology[data-active-view="team"] [data-tech-node="team"] {
  border-color: #4fc0ce;
  background: #172d3d;
  box-shadow: 0 0 0 3px rgba(79, 192, 206, 0.1);
}

.topology-link {
  position: absolute;
  z-index: 1;
  height: 2px;
  overflow: hidden;
  background: #365066;
}

.topology-link.first {
  top: 96px;
  left: 220px;
  width: calc(50% - 315px);
}

.topology-link.second {
  top: 96px;
  right: 220px;
  width: calc(50% - 315px);
}

.topology-link span {
  position: absolute;
  top: -2px;
  left: -12px;
  width: 12px;
  height: 6px;
  background: #55c7d0;
  animation: topologyPulseX 2.4s linear infinite;
}

.topology-branch {
  position: absolute;
  top: 136px;
  right: 50%;
  z-index: 1;
  width: 2px;
  height: 98px;
  background: #365066;
}

.topology-branch::after {
  position: absolute;
  right: -225px;
  bottom: 0;
  width: 450px;
  border-top: 2px solid #365066;
  content: "";
}

.topology-branch span {
  position: absolute;
  top: 0;
  left: -2px;
  width: 6px;
  height: 12px;
  background: #55c7d0;
  animation: topologyPulseY 2.1s linear infinite;
}

.topology-log {
  display: grid;
  grid-template-columns: 60px 66px 130px minmax(0, 1fr);
  row-gap: 6px;
  border-top: 1px solid #2b3e51;
  background: #0b141f;
  color: #70859a;
  padding: 11px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.topology-log strong {
  color: #54bfca;
}

.topology-log em {
  color: #91a5b7;
  font-style: normal;
}

.topology-log b {
  color: #5fc9a6;
  font-weight: 500;
}

@keyframes topologyPulseX {
  from { transform: translateX(0); }
  to { transform: translateX(170px); }
}

@keyframes topologyPulseY {
  from { transform: translateY(0); }
  to { transform: translateY(86px); }
}

.public-suite-section {
  padding: 48px 52px;
}

.public-feature-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #d6dfe8;
  border-left: 1px solid #d6dfe8;
}

.public-feature-index article {
  position: relative;
  min-width: 0;
  min-height: 230px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 15px 12px;
  border-right: 1px solid #d6dfe8;
  border-bottom: 1px solid #d6dfe8;
  background: #fff;
  padding: 22px;
}

.public-feature-index article:hover {
  background: #f7fafb;
}

.feature-index-number {
  color: #91a0b0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.public-feature-index article > svg {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 21px;
  height: 21px;
  color: #0d7c88;
}

.public-feature-index article > div {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

.public-feature-index small {
  display: block;
  margin-bottom: 8px;
  color: #0d7c88;
  font-size: 9px;
  font-weight: 850;
}

.public-feature-index strong {
  display: block;
  color: #1f3045;
  font-size: 15px;
}

.public-feature-index p {
  margin: 9px 0 0;
  color: #6c7c8f;
  font-size: 11px;
  line-height: 1.7;
}

.public-feature-index article > em {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  border-top: 1px solid #e1e6ec;
  color: #8a98a8;
  padding-top: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-style: normal;
}

@media (max-width: 1080px) {
  .public-control-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-control-copy {
    max-width: 760px;
  }

  .public-control-kicker {
    margin-top: 28px;
  }

  .public-feature-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .public-control-section,
  .public-suite-section {
    order: 2;
  }

  .public-control-section {
    padding: 38px 18px;
  }

  .public-control-grid {
    gap: 30px;
  }

  .public-control-copy h2 {
    font-size: 26px;
  }

  .public-tech-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-tech-metrics > div {
    padding: 13px 8px;
  }

  .public-tech-metrics > div:first-child {
    padding-left: 0;
  }

  .public-tech-metrics strong {
    font-size: 21px;
  }

  .public-suite-section {
    padding: 38px 18px;
  }
}

@media (max-width: 560px) {
  .public-live-status em {
    display: none;
  }

  .public-feature-index {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-feature-index article {
    min-height: 205px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topology-link span,
  .topology-branch span {
    animation: none;
  }
}

/* Customer Service Agent personal workspace */
body:not(.role-agent) .agent-only {
  display: none !important;
}

body.agent-home-open {
  overflow: hidden;
}

body.agent-home-open .global-topbar,
body.agent-home-open .app-shell {
  display: none;
}

.agent-home {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  background: #edf1f5;
}

.agent-home-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, auto) minmax(360px, 1fr);
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid #d5dee7;
  background: rgba(255, 255, 255, 0.97);
  padding: 0 28px;
}

.agent-home-workspace {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}

.agent-home-workspace span {
  color: #7b8999;
  font-size: 9px;
}

.agent-home-workspace strong {
  overflow: hidden;
  color: #2d3f53;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-home-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.agent-home-top-actions button,
.agent-secondary-button,
.agent-demo-cta,
.agent-demo-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.agent-home-top-actions svg,
.agent-secondary-button svg,
.agent-demo-footer button svg {
  width: 15px;
  height: 15px;
}

.agent-home-demo-button,
.agent-secondary-button {
  border: 1px solid #cbd6e1;
  background: #fff;
  color: #354a62;
}

.agent-home-icon-button {
  min-width: 38px;
  width: 38px;
  padding: 0;
  border: 1px solid #cbd6e1;
  background: #fff;
  color: #53657a;
}

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

.agent-home-shell {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.agent-home-intro {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid #ced8e2;
  padding: 0 2px 22px;
}

.agent-home-intro h1 {
  margin: 6px 0 7px;
  color: #172536;
  font-size: 27px;
  letter-spacing: 0;
}

.agent-home-intro h1 strong {
  color: #1f5fc7;
}

.agent-home-intro p {
  margin: 0;
  color: #657589;
  font-size: 13px;
}

.agent-home-status {
  display: grid;
  gap: 6px;
  justify-items: end;
  color: #516477;
  font-size: 11px;
}

.agent-home-status > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.agent-home-status b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16886d;
  box-shadow: 0 0 0 4px rgba(22, 136, 109, 0.1);
}

.agent-home-status small {
  color: #8995a3;
  font-size: 10px;
}

.agent-home-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.agent-home-kpis article {
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid #d1dae4;
  border-radius: 7px;
  background: #fff;
  padding: 17px;
}

.agent-kpi-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: #edf3ff;
  color: #2d63bd;
}

.agent-kpi-icon.unread {
  background: #e8f5f1;
  color: #14755f;
}

.agent-kpi-icon.overdue {
  background: #fff0e1;
  color: #9d5c15;
}

.agent-kpi-icon.assigned {
  background: #f0edf9;
  color: #6750a4;
}

.agent-kpi-icon svg {
  width: 18px;
  height: 18px;
}

.agent-home-kpis article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-home-kpis small {
  color: #647589;
  font-size: 11px;
  font-weight: 750;
}

.agent-home-kpis strong {
  color: #172536;
  font-size: 25px;
  line-height: 1.2;
}

.agent-home-kpis em {
  overflow: hidden;
  color: #8a97a6;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-home-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 14px;
  margin-top: 14px;
}

.agent-priority-panel,
.agent-readiness-panel,
.agent-rhythm-section {
  border: 1px solid #d1dae4;
  border-radius: 7px;
  background: #fff;
}

.agent-priority-panel,
.agent-readiness-panel {
  min-height: 365px;
  padding: 20px;
}

.agent-panel-head {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #dde4eb;
  padding-bottom: 13px;
}

.agent-panel-head h2 {
  margin: 4px 0 0;
  color: #23364c;
  font-size: 17px;
  letter-spacing: 0;
}

.agent-panel-head .section-eyebrow {
  font-size: 9px;
}

.agent-secondary-button {
  min-height: 34px;
  font-size: 11px;
}

.agent-priority-list {
  min-height: 260px;
  display: grid;
  align-content: start;
}

.agent-priority-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e1e7ed;
  border-radius: 0;
  background: transparent;
  color: #26394e;
  padding: 8px 2px;
  text-align: left;
  box-shadow: none;
}

.agent-priority-row:hover:not(:disabled) {
  background: #f6f8fa;
  box-shadow: none;
  transform: none;
}

.agent-priority-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8f1ff;
  color: #285db4;
  font-size: 11px;
  font-weight: 800;
}

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

.agent-priority-row strong,
.agent-priority-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-priority-row strong {
  font-size: 12px;
}

.agent-priority-row span {
  color: #697a8e;
  font-size: 10px;
}

.agent-priority-row small {
  color: #c43c4b;
  font-size: 9px;
}

.agent-priority-row > em {
  color: #8492a2;
  font-size: 9px;
  font-style: normal;
}

.agent-priority-empty {
  min-height: 250px;
  display: grid;
  place-items: center;
  color: #8190a1;
  text-align: center;
}

.agent-priority-empty > div {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.agent-priority-empty svg {
  width: 28px;
  height: 28px;
  color: #8ca2b9;
}

.agent-priority-empty strong {
  color: #4b5f76;
  font-size: 13px;
}

.agent-priority-empty span {
  font-size: 10px;
}

.agent-readiness-list {
  display: grid;
}

.agent-readiness-list > div {
  min-height: 67px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e1e7ed;
}

.readiness-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 5px;
  background: #edf4f6;
  color: #0d7c88;
}

.readiness-icon svg {
  width: 15px;
  height: 15px;
}

.agent-readiness-list > div > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agent-readiness-list strong {
  color: #31445a;
  font-size: 11px;
}

.agent-readiness-list small {
  overflow: hidden;
  color: #7a8999;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-readiness-list em {
  border: 1px solid #cbd9e0;
  border-radius: 999px;
  background: #f4f8f9;
  color: #557080;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
}

.agent-readiness-list em.good {
  border-color: #abd3c7;
  background: #ecf7f3;
  color: #14755f;
}

.agent-readiness-list em.warning {
  border-color: #ebd1ad;
  background: #fff6e9;
  color: #94601f;
}

.agent-demo-cta {
  width: 100%;
  min-height: 66px;
  justify-content: flex-start;
  margin-top: 17px;
  border: 1px solid #b8cce0;
  background: #eef5fb;
  color: #2c4c6f;
  padding: 10px 12px;
  text-align: left;
}

.agent-demo-cta > svg:first-child {
  width: 20px;
  height: 20px;
  color: #2360c7;
}

.agent-demo-cta > svg:last-child {
  width: 15px;
  height: 15px;
  margin-left: auto;
}

.agent-demo-cta > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agent-demo-cta strong,
.agent-demo-cta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-demo-cta strong {
  font-size: 11px;
}

.agent-demo-cta small {
  color: #70849a;
  font-size: 9px;
}

.agent-rhythm-section {
  margin-top: 14px;
  padding: 20px;
}

.agent-flow-status {
  border: 1px solid #bad7ce;
  border-radius: 999px;
  background: #eef8f5;
  color: #19725f;
  padding: 5px 9px;
  font-size: 9px;
}

.agent-rhythm-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.agent-rhythm-track > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-right: 1px solid #dce3ea;
  padding: 8px 20px;
}

.agent-rhythm-track > div:first-child {
  padding-left: 0;
}

.agent-rhythm-track > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.agent-rhythm-track > div > span {
  color: #96a3b0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.agent-rhythm-track > div > svg {
  width: 18px;
  height: 18px;
  color: #0d7c88;
}

.agent-rhythm-track > div > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agent-rhythm-track strong {
  color: #34475d;
  font-size: 11px;
}

.agent-rhythm-track small {
  overflow: hidden;
  color: #7c8b9c;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-demo-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-width: none;
  height: min(720px, calc(100vh - 36px));
  max-height: none;
  overflow: hidden;
  border: 1px solid #bdc9d5;
  border-radius: 8px;
  background: #fff;
  padding: 0;
  box-shadow: 0 28px 80px rgba(19, 34, 51, 0.28);
}

.agent-demo-dialog::backdrop {
  background: rgba(18, 31, 46, 0.58);
}

.agent-demo-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.agent-demo-head {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #d7e0e8;
  padding: 14px 18px;
}

.agent-demo-head > div {
  min-width: 0;
}

.agent-demo-head h2 {
  margin: 5px 0 3px;
  color: #1f3146;
  font-size: 19px;
  letter-spacing: 0;
}

.agent-demo-head p {
  margin: 0;
  color: #718195;
  font-size: 10px;
}

.agent-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0d7c88;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
}

.agent-demo-badge b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #23a688;
}

.agent-demo-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
}

.agent-demo-queue {
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid #d7e0e8;
  background: #f5f7fa;
  padding: 14px;
}

.agent-demo-queue-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #34475b;
  font-size: 11px;
}

.agent-demo-queue-head span {
  color: #8391a0;
  font-size: 9px;
}

.agent-demo-conversation-list {
  display: grid;
  gap: 7px;
}

.agent-demo-conversation {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  border: 1px solid #d2dce5;
  border-radius: 6px;
  background: #fff;
  color: #2a3d52;
  padding: 10px;
  text-align: left;
  box-shadow: none;
}

.agent-demo-conversation:hover:not(:disabled) {
  box-shadow: none;
  transform: none;
}

.agent-demo-conversation.active {
  border-color: #6ba0df;
  background: #edf4ff;
}

.agent-demo-conversation > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agent-demo-conversation strong,
.agent-demo-conversation span,
.agent-demo-conversation small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-demo-conversation strong {
  font-size: 11px;
}

.agent-demo-conversation span {
  color: #63758a;
  font-size: 9px;
}

.agent-demo-conversation small {
  color: #c43c4b;
  font-size: 8px;
}

.agent-demo-conversation em {
  color: #8290a0;
  font-size: 8px;
  font-style: normal;
}

.agent-demo-chat {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.agent-demo-chat-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #d7e0e8;
  padding: 12px 16px;
}

.agent-demo-chat-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.agent-demo-chat-head strong {
  color: #26394e;
  font-size: 13px;
}

.agent-demo-chat-head span {
  overflow: hidden;
  color: #c43c4b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-demo-status {
  flex: 0 0 auto;
  border: 1px solid #ebc6cc;
  border-radius: 999px;
  background: #fff1f3;
  color: #a42d3d;
  padding: 5px 8px;
  font-size: 9px;
}

.agent-demo-status.done {
  border-color: #afd4c8;
  background: #edf8f4;
  color: #14735e;
}

.agent-demo-messages {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #eef2f6;
  padding: 18px;
}

.agent-demo-message {
  max-width: min(74%, 520px);
  border: 1px solid #d3dce5;
  border-radius: 7px;
  background: #fff;
  color: #35475b;
  padding: 10px 11px;
  font-size: 11px;
  line-height: 1.55;
}

.agent-demo-message.outgoing {
  align-self: flex-end;
  border-color: #2d64c4;
  background: #2f67ca;
  color: #fff;
}

.agent-demo-message time {
  display: block;
  margin-top: 6px;
  color: inherit;
  font-size: 8px;
  opacity: 0.7;
  text-align: right;
}

.agent-demo-composer {
  border-top: 1px solid #d7e0e8;
  padding: 10px 12px;
}

.agent-demo-composer textarea {
  height: 70px;
}

.agent-demo-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
}

.agent-demo-composer > div > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #728397;
  font-size: 9px;
}

.agent-demo-composer > div > span svg {
  width: 13px;
  height: 13px;
  color: #14806a;
}

.agent-demo-composer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agent-demo-composer button svg {
  width: 14px;
  height: 14px;
}

.agent-demo-footer {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #d7e0e8;
  background: #fff;
  padding: 10px 16px;
}

.agent-demo-footer > div:last-child {
  display: flex;
  gap: 8px;
}

#agentDemoProgress {
  display: grid;
  grid-template-columns: 22px 36px 22px 36px 22px minmax(140px, 1fr);
  align-items: center;
}

#agentDemoProgress > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #bdc9d5;
  border-radius: 50%;
  color: #79899b;
  font-size: 9px;
}

#agentDemoProgress > span.done {
  border-color: #2c6acd;
  background: #2c6acd;
  color: #fff;
}

#agentDemoProgress > b {
  border-top: 1px solid #bdc9d5;
}

#agentDemoProgress > b.done {
  border-color: #2c6acd;
}

#agentDemoProgress > em {
  margin-left: 10px;
  color: #758598;
  font-size: 9px;
  font-style: normal;
}

@media (max-width: 980px) {
  .agent-home-topbar {
    grid-template-columns: minmax(180px, 1fr) minmax(330px, auto);
  }

  .agent-home-workspace {
    display: none;
  }

  .agent-home-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-home-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-priority-panel,
  .agent-readiness-panel {
    min-height: 0;
  }

  .agent-demo-body {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .agent-home-topbar {
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 0 12px;
  }

  .agent-home-top-actions .agent-home-demo-button {
    display: none;
  }

  .agent-home-top-actions > button:nth-child(2) span {
    display: none;
  }

  .agent-home-top-actions > button:nth-child(2) {
    min-width: 38px;
    width: 38px;
    padding: 0;
  }

  .agent-home-shell {
    width: calc(100% - 24px);
    padding: 20px 0 30px;
  }

  .agent-home-intro {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 17px;
  }

  .agent-home-intro h1 {
    font-size: 23px;
  }

  .agent-home-status {
    justify-items: start;
  }

  .agent-home-kpis {
    gap: 8px;
  }

  .agent-home-kpis article {
    min-height: 105px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    padding: 13px;
  }

  .agent-kpi-icon {
    width: 32px;
    height: 32px;
  }

  .agent-home-kpis strong {
    font-size: 21px;
  }

  .agent-priority-panel,
  .agent-readiness-panel,
  .agent-rhythm-section {
    padding: 15px;
  }

  .agent-rhythm-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-rhythm-track > div,
  .agent-rhythm-track > div:first-child,
  .agent-rhythm-track > div:last-child {
    border-right: 0;
    border-bottom: 1px solid #dce3ea;
    padding: 12px 0;
  }

  .agent-rhythm-track > div:last-child {
    border-bottom: 0;
  }

  .agent-demo-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .agent-demo-head {
    min-height: 74px;
    padding: 10px 12px;
  }

  .agent-demo-head p {
    max-width: 270px;
  }

  .agent-demo-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 170px minmax(0, 1fr);
  }

  .agent-demo-queue {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid #d7e0e8;
    padding: 8px 10px;
  }

  .agent-demo-conversation-list {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .agent-demo-conversation {
    min-height: 90px;
  }

  .agent-demo-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
  }

  #agentDemoProgress {
    display: none;
  }

  .agent-demo-footer > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .agent-home-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-home-kpis article {
    min-height: 82px;
  }

  .agent-home-kpis em {
    white-space: normal;
  }
}

/* Registered customer portal shown before a workspace subscription is active. */
.billing-gate {
  display: block;
  overflow: auto;
  background: #edf1f5;
  padding: 0;
}

.billing-gate-shell {
  width: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: #edf1f5;
  box-shadow: none;
  padding: 0;
}

.customer-portal-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(420px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #d5dde6;
  background: rgba(255, 255, 255, 0.97);
  padding: 0 30px;
}

.customer-portal-nav {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
}

.customer-portal-nav button {
  min-width: 92px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #617286;
  padding: 0 13px;
  box-shadow: none;
}

.customer-portal-nav button:hover:not(:disabled) {
  background: #f5f8fb;
  color: #263d56;
  transform: none;
  box-shadow: none;
}

.customer-portal-nav button.active {
  border-bottom-color: #176f79;
  background: #f3f8f8;
  color: #145f68;
}

.customer-portal-nav svg,
.customer-secondary-button svg,
.customer-onboarding-actions svg,
.customer-store-security svg,
.customer-demo-composer svg {
  width: 16px;
  height: 16px;
}

.customer-portal-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.customer-portal-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #e2eef0;
  color: #145f68;
  font-size: 13px;
  font-weight: 800;
}

.customer-portal-account > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.customer-portal-account strong,
.customer-portal-account span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-portal-account strong {
  color: #25384d;
  font-size: 12px;
}

.customer-portal-account > div span {
  color: #8491a1;
  font-size: 9px;
}

.customer-portal-topbar .billing-logout-button {
  min-width: 38px;
  min-height: 38px;
  justify-content: center;
  padding: 0 12px;
}

.customer-portal-main {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 34px 0 48px;
}

.customer-portal-panel {
  display: none;
}

.customer-portal-panel.active {
  display: block;
}

.customer-overview-head,
.customer-panel-heading {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #d6dee7;
  padding: 0 2px 22px;
}

.customer-overview-head h1,
.customer-panel-heading h1 {
  margin: 7px 0 0;
  color: #1c2c40;
  font-size: 26px;
  letter-spacing: 0;
}

.customer-overview-head h1 strong {
  color: #176f79;
}

.customer-overview-head p,
.customer-panel-heading p {
  margin: 7px 0 0;
  color: #6d7c8e;
  font-size: 12px;
}

.customer-service-state {
  min-width: 150px;
  display: grid;
  justify-items: end;
  gap: 7px;
  border-left: 1px solid #d5dee7;
  padding: 9px 0 9px 24px;
}

.customer-service-state span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7a899a;
  font-size: 10px;
}

.customer-service-state b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d39a38;
  box-shadow: 0 0 0 4px rgba(211, 154, 56, 0.12);
}

.customer-service-state strong {
  color: #9b6720;
  font-size: 15px;
}

.customer-service-state.active b {
  background: #1b8c72;
  box-shadow: 0 0 0 4px rgba(27, 140, 114, 0.12);
}

.customer-service-state.active strong {
  color: #15705d;
}

.customer-portal-panel > .billing-notice {
  margin: 18px 0;
}

.customer-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.customer-overview-metrics article {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  border: 1px solid #d3dce5;
  border-radius: 7px;
  background: #fff;
  padding: 16px;
}

.customer-overview-metrics article > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e8f2f2;
  color: #176f79;
}

.customer-overview-metrics article:nth-child(2) > span {
  background: #edf2fd;
  color: #315fa9;
}

.customer-overview-metrics article:nth-child(3) > span {
  background: #fff2e2;
  color: #a66a19;
}

.customer-overview-metrics article:nth-child(4) > span {
  background: #f0edf8;
  color: #6d5795;
}

.customer-overview-metrics svg {
  width: 18px;
  height: 18px;
}

.customer-overview-metrics article > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.customer-overview-metrics small,
.customer-overview-metrics em {
  overflow: hidden;
  color: #7c8999;
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-overview-metrics strong {
  overflow: hidden;
  color: #24364b;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(310px, 0.8fr);
  gap: 14px;
  margin-top: 14px;
}

.customer-onboarding-panel,
.customer-capability-panel,
.customer-order-section {
  border: 1px solid #d3dce5;
  border-radius: 7px;
  background: #fff;
  padding: 20px;
}

.customer-onboarding-panel > header,
.customer-capability-panel > header,
.customer-order-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e0e6ec;
  padding-bottom: 14px;
}

.customer-onboarding-panel h2,
.customer-capability-panel h2 {
  margin: 5px 0 0;
  color: #26384d;
  font-size: 17px;
  letter-spacing: 0;
}

#customerPortalProgressText {
  border: 1px solid #bdd1d3;
  border-radius: 999px;
  background: #eef7f7;
  color: #176f79;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
}

.customer-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 21px 0;
}

.customer-onboarding-steps > div {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 9px;
  padding-right: 14px;
}

.customer-onboarding-steps > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 31px;
  right: 0;
  border-top: 1px solid #d5dde5;
}

.customer-onboarding-steps > div > span {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5df;
  border-radius: 50%;
  background: #fff;
  color: #778697;
  font-size: 10px;
  font-weight: 800;
}

.customer-onboarding-steps > div.done > span,
.customer-onboarding-steps > div.current > span {
  border-color: #1b8379;
  background: #1b8379;
  color: #fff;
}

.customer-onboarding-steps > div.done:not(:last-child)::after {
  border-color: #6eafa8;
}

.customer-onboarding-steps > div > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding-top: 2px;
}

.customer-onboarding-steps strong,
.customer-onboarding-steps small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-onboarding-steps strong {
  color: #33475d;
  font-size: 10px;
  white-space: nowrap;
}

.customer-onboarding-steps small {
  color: #8793a1;
  font-size: 8px;
  line-height: 1.45;
}

.customer-onboarding-actions {
  display: flex;
  gap: 9px;
  border-top: 1px solid #e0e6ec;
  padding-top: 15px;
}

.customer-onboarding-actions button,
.customer-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.customer-secondary-button {
  border: 1px solid #ccd7e2;
  background: #fff;
  color: #40566d;
}

.customer-capability-list {
  display: grid;
}

.customer-capability-list > div {
  min-height: 62px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e3e8ee;
}

.customer-capability-list > div:last-child {
  border-bottom: 0;
}

.customer-capability-list svg {
  width: 18px;
  height: 18px;
  color: #176f79;
}

.customer-capability-list span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.customer-capability-list strong {
  color: #33475d;
  font-size: 11px;
}

.customer-capability-list small {
  color: #8491a1;
  font-size: 9px;
}

.customer-panel-heading {
  align-items: center;
  margin-bottom: 18px;
}

.customer-store-security {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #bcd6cf;
  border-radius: 999px;
  background: #eff8f5;
  color: #176f5d;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 750;
}

.customer-portal-panel[data-customer-panel="store"] .shop-payment-toolbar {
  margin-top: 0;
}

.customer-demo-workbench {
  height: min(620px, calc(100vh - 225px));
  min-height: 510px;
  display: grid;
  grid-template-columns: 220px 300px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #cbd5df;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(37, 52, 70, 0.1);
}

.customer-demo-sidebar,
.customer-demo-queue,
.customer-demo-chat {
  min-width: 0;
  min-height: 0;
}

.customer-demo-sidebar {
  border-right: 1px solid #d8e0e8;
  background: #f5f7fa;
  padding: 15px 12px;
}

.customer-demo-sidebar > header,
.customer-demo-queue > header {
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: #33475d;
  font-size: 11px;
}

.customer-demo-sidebar > header span,
.customer-demo-queue > header span,
.customer-demo-queue > header small {
  color: #8491a1;
  font-size: 8px;
}

.customer-demo-sidebar > div {
  min-height: 70px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #dce3ea;
}

.customer-demo-account-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1c9b76;
}

.customer-demo-sidebar > div > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.customer-demo-sidebar strong,
.customer-demo-sidebar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-demo-sidebar strong {
  color: #33475d;
  font-size: 10px;
}

.customer-demo-sidebar small {
  color: #7f8d9d;
  font-size: 8px;
}

.customer-demo-sidebar em {
  color: #19705d;
  font-size: 8px;
  font-style: normal;
}

.customer-demo-queue {
  overflow-y: auto;
  border-right: 1px solid #d8e0e8;
  padding: 15px 11px;
}

.customer-demo-queue > header > div {
  display: grid;
  gap: 4px;
}

#customerDemoConversationList {
  display: grid;
  gap: 7px;
}

.customer-demo-conversation {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  border: 1px solid #d6dfe8;
  border-radius: 6px;
  background: #fff;
  color: #2e4258;
  padding: 11px;
  text-align: left;
  box-shadow: none;
}

.customer-demo-conversation:hover:not(:disabled) {
  background: #f7fafd;
  transform: none;
  box-shadow: none;
}

.customer-demo-conversation.active {
  border-color: #5e91d5;
  background: #edf4ff;
}

.customer-demo-conversation > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.customer-demo-conversation strong,
.customer-demo-conversation span,
.customer-demo-conversation small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-demo-conversation strong {
  font-size: 11px;
}

.customer-demo-conversation span {
  color: #617388;
  font-size: 9px;
}

.customer-demo-conversation small {
  color: #c43848;
  font-size: 8px;
}

.customer-demo-conversation em {
  border-radius: 999px;
  background: #eef2f7;
  color: #68798d;
  padding: 4px 6px;
  font-size: 8px;
  font-style: normal;
}

.customer-demo-chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.customer-demo-chat > header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #d8e0e8;
  padding: 12px 16px;
}

.customer-demo-chat > header > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.customer-demo-chat > header strong {
  color: #26394e;
  font-size: 13px;
}

.customer-demo-chat > header span {
  overflow: hidden;
  color: #c43848;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-demo-chat > header em {
  border: 1px solid #b9d7d2;
  border-radius: 999px;
  background: #edf8f5;
  color: #17705d;
  padding: 5px 8px;
  font-size: 8px;
  font-style: normal;
}

.customer-demo-messages {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #eef2f6;
  padding: 18px;
}

.customer-demo-message {
  max-width: min(76%, 520px);
  border: 1px solid #d2dce5;
  border-radius: 7px;
  background: #fff;
  color: #33475c;
  padding: 10px 11px;
  font-size: 11px;
  line-height: 1.55;
}

.customer-demo-message.outgoing {
  align-self: flex-end;
  border-color: #2f63bd;
  background: #3167c5;
  color: #fff;
}

.customer-demo-message time {
  display: block;
  margin-top: 5px;
  color: inherit;
  font-size: 8px;
  opacity: 0.72;
  text-align: right;
}

.customer-demo-composer {
  border-top: 1px solid #d8e0e8;
  padding: 10px 12px;
}

.customer-demo-composer textarea {
  height: 72px;
  min-height: 72px;
  resize: none;
}

.customer-demo-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.customer-demo-composer > div > span,
.customer-demo-composer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.customer-demo-composer > div > span {
  color: #748498;
  font-size: 9px;
}

.customer-demo-composer > div > span svg {
  color: #19816b;
}

.customer-service-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #d3dce5;
  border-radius: 7px;
  background: #fff;
}

.customer-service-summary > div {
  min-width: 0;
  display: grid;
  gap: 7px;
  border-right: 1px solid #dce3ea;
  padding: 18px;
}

.customer-service-summary > div:last-child {
  border-right: 0;
}

.customer-service-summary span {
  color: #7f8d9d;
  font-size: 9px;
}

.customer-service-summary strong {
  overflow: hidden;
  color: #2c4056;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-order-section {
  margin-top: 14px;
}

.customer-order-section > header strong {
  color: #2d4157;
  font-size: 13px;
}

.customer-order-section > header span {
  color: #8290a0;
  font-size: 9px;
}

.customer-order-section .billing-order-list {
  margin-top: 8px;
}

@media (max-width: 1050px) {
  .customer-portal-topbar {
    grid-template-columns: auto minmax(380px, 1fr) auto;
    gap: 14px;
    padding: 0 18px;
  }

  .customer-portal-account {
    display: none;
  }

  .customer-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-demo-workbench {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .customer-demo-sidebar {
    display: none;
  }
}

@media (max-width: 720px) {
  .customer-portal-topbar {
    min-height: 62px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 10px;
  }

  .customer-portal-topbar .public-brand span {
    display: none;
  }

  .customer-portal-nav {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .customer-portal-nav button {
    min-width: 46px;
    padding: 0 10px;
  }

  .customer-portal-nav button span {
    display: none;
  }

  .customer-portal-topbar .billing-logout-button {
    width: 38px;
    padding: 0;
  }

  .customer-portal-main {
    width: calc(100% - 24px);
    padding: 22px 0 34px;
  }

  .customer-overview-head,
  .customer-panel-heading {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .customer-overview-head h1,
  .customer-panel-heading h1 {
    font-size: 22px;
  }

  .customer-service-state {
    min-width: 0;
    justify-items: start;
    border-left: 0;
    padding: 0;
  }

  .customer-overview-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-overview-metrics article {
    min-height: 88px;
  }

  .customer-onboarding-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .customer-onboarding-steps > div {
    min-height: 44px;
    padding-right: 0;
  }

  .customer-onboarding-steps > div:not(:last-child)::after {
    top: 29px;
    bottom: -13px;
    left: 14px;
    right: auto;
    border-top: 0;
    border-left: 1px solid #d5dde5;
  }

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

  .customer-onboarding-actions button {
    min-width: 0;
  }

  .customer-demo-workbench {
    height: 690px;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 190px minmax(0, 1fr);
  }

  .customer-demo-queue {
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid #d8e0e8;
  }

  #customerDemoConversationList {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .customer-demo-conversation {
    min-height: 112px;
  }

  .customer-service-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-service-summary > div:nth-child(2) {
    border-right: 0;
  }

  .customer-service-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #dce3ea;
  }
}

@media (max-width: 430px) {
  .customer-portal-topbar .public-brand {
    width: 38px;
    gap: 0;
  }

  .customer-portal-topbar .public-brand > div:last-child {
    display: none;
  }

  .customer-portal-nav {
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
  }

  .customer-portal-nav button {
    min-width: 38px;
    padding: 0 8px;
  }

  .customer-onboarding-actions,
  .customer-service-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-service-summary > div,
  .customer-service-summary > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #dce3ea;
  }

  .customer-service-summary > div:last-child {
    border-bottom: 0;
  }
}

/* Platform customer operations, visible only to the local workspace owner. */
body:not(.role-platform-admin) .platform-admin-only {
  display: none !important;
}

body.role-platform-admin .merchant-handover-only,
body.role-platform-admin .merchant-team-quick-action {
  display: none !important;
}

.admin-center-panel[data-admin-panel="internal"].active {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.internal-employee-heading {
  margin-bottom: 0;
}

.internal-employee-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #bcded9;
  border-radius: 8px;
  background: #edf8f6;
  color: #4e6c70;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.55;
}

.internal-employee-notice svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #187b73;
}

.internal-employee-notice strong {
  color: #1c5c58;
}

.internal-login-create-card {
  border: 1px solid #cfdce7;
  border-radius: 9px;
  background: #fff;
  padding: 12px;
}

.internal-login-create-card > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.internal-login-create-card > header > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #e7f4f1;
  color: #14756b;
}

.internal-login-create-card > header svg {
  width: 17px;
  height: 17px;
}

.internal-login-create-card > header > div {
  display: grid;
  gap: 2px;
}

.internal-login-create-card > header strong {
  color: #24384d;
  font-size: 12px;
}

.internal-login-create-card > header small,
.internal-login-create-card > p {
  color: #708093;
  font-size: 9px;
  line-height: 1.5;
}

#internalEmployeeCreateForm {
  display: grid;
  grid-template-columns: minmax(140px, 0.85fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 9px;
}

#internalEmployeeCreateForm label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #526579;
  font-size: 9px;
}

#internalEmployeeCreateForm input {
  width: 100%;
  height: 36px;
  border: 1px solid #ccd8e3;
  border-radius: 7px;
  background: #fbfcfd;
  color: #23364a;
  padding: 0 10px;
}

#internalEmployeeCreateForm input:focus {
  outline: 2px solid rgba(31, 103, 218, 0.12);
  border-color: #3c78d6;
}

#internalEmployeeCreateForm button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 7px;
  background: #2764d7;
  color: #fff;
  padding: 0 14px;
  font-weight: 700;
  white-space: nowrap;
}

#internalEmployeeCreateForm button svg {
  width: 15px;
  height: 15px;
}

.internal-create-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  border: 1px solid #efc4ca;
  border-radius: 7px;
  background: #fff5f6;
  color: #a72f40;
  padding: 8px 10px;
  font-size: 9px;
  line-height: 1.5;
}

.internal-create-status[data-tone="success"] {
  border-color: #b8ddd3;
  background: #eef9f5;
  color: #176a5c;
}

.internal-create-status[data-tone="info"] {
  border-color: #bed2ed;
  background: #f0f6fd;
  color: #315f99;
}

.internal-create-status button {
  min-height: 28px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  padding: 4px 9px;
  font-size: 9px;
  font-weight: 700;
}

#internalEmployeeUsername[aria-invalid="true"] {
  border-color: #cf4d5b;
  background: #fff8f8;
}

.internal-login-create-card > p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
}

.internal-login-create-card > p svg {
  width: 14px;
  height: 14px;
  color: #25776f;
}

.platform-team-routing {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #bcded9;
  border-radius: 8px;
  background: #edf8f6;
  color: #496a70;
  padding: 10px 12px;
}

.platform-team-routing > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #14756b;
}

.platform-team-routing > div {
  display: grid;
  gap: 2px;
}

.platform-team-routing strong {
  color: #1c5c58;
  font-size: 11px;
}

.platform-team-routing span {
  font-size: 9px;
  line-height: 1.5;
}

.merchant-employee-boundary {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c8d8ea;
  border-radius: 8px;
  background: #f2f7fd;
  color: #49647f;
  padding: 10px 12px;
}

.merchant-employee-boundary > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #2f67bd;
}

.merchant-employee-boundary > div {
  display: grid;
  gap: 2px;
}

.merchant-employee-boundary strong {
  color: #2e527b;
  font-size: 11px;
}

.merchant-employee-boundary span {
  font-size: 9px;
  line-height: 1.5;
}

.internal-employee-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.internal-employee-kpis article {
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #d5dee7;
  border-radius: 8px;
  background: #fff;
  padding: 11px 12px;
}

.internal-employee-kpis article > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e7f4f1;
  color: #14756b;
}

.internal-employee-kpis article:nth-child(3) > span {
  background: #e9f3ff;
  color: #2f67bd;
}

.internal-employee-kpis article:nth-child(4) > span {
  background: #fff0e4;
  color: #aa621e;
}

.internal-employee-kpis svg {
  width: 17px;
  height: 17px;
}

.internal-employee-kpis article > div {
  display: grid;
  gap: 3px;
}

.internal-employee-kpis small {
  color: #7b8998;
  font-size: 9px;
}

.internal-employee-kpis strong {
  color: #253a50;
  font-size: 19px;
}

.internal-employee-list {
  display: grid;
  gap: 10px;
  padding-bottom: 4px;
}

.internal-employee-card {
  overflow: hidden;
  border: 1px solid #cedae4;
  border-left: 3px solid #1b8b7d;
  border-radius: 9px;
  background: #fff;
}

.internal-employee-card.attention {
  border-left-color: #d07a24;
}

.internal-employee-card.departed {
  border-left-color: #98a5b2;
  background: #f8fafb;
}

.internal-employee-card > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e1e7ed;
  padding: 11px 13px;
}

.internal-employee-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #dff1ed;
  color: #176d65;
  font-size: 14px;
  font-weight: 800;
}

.internal-employee-card > header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.internal-employee-card > header strong,
.internal-employee-card > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.internal-employee-card > header strong {
  color: #263a50;
  font-size: 12px;
}

.internal-employee-card > header small {
  color: #718195;
  font-size: 9px;
}

.internal-employee-status {
  border-radius: 999px;
  background: #e7f5ef;
  color: #18724f;
  padding: 5px 8px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.internal-employee-status[data-tone="warning"] {
  background: #fff0df;
  color: #9a5c19;
}

.internal-employee-status[data-tone="muted"] {
  background: #e9edf1;
  color: #687889;
}

.internal-employee-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.internal-employee-stats > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  border-right: 1px solid #e1e7ed;
  padding: 11px 14px;
}

.internal-employee-stats > div:last-child {
  border-right: 0;
}

.internal-employee-stats span,
.internal-employee-stats small {
  overflow: hidden;
  color: #778698;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.internal-employee-stats strong {
  color: #2a4057;
  font-size: 16px;
}

.internal-employee-card > footer {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e1e7ed;
  background: #f8fafc;
  padding: 8px 12px;
}

.internal-employee-activity {
  overflow: hidden;
  color: #718195;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.internal-employee-card > footer > div {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.internal-handover-target {
  min-width: 150px;
  display: grid;
  gap: 2px;
}

.internal-handover-target > span {
  color: #778698;
  font-size: 8px;
}

.internal-handover-target select {
  width: 100%;
  height: 32px;
  border: 1px solid #c9d6e2;
  border-radius: 6px;
  background: #fff;
  color: #38526e;
  padding: 0 26px 0 8px;
  font-size: 9px;
}

.internal-employee-card > footer button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #c9d6e2;
  border-radius: 6px;
  background: #fff;
  color: #38526e;
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 700;
}

.internal-employee-card > footer button svg {
  width: 14px;
  height: 14px;
}

.internal-employee-card > footer button.danger-command {
  border-color: #efc4ca;
  background: #fff5f6;
  color: #b33343;
}

.internal-employee-card > footer button.internal-delete-command {
  border-color: #e6b7bd;
  background: #fff;
  color: #b62f40;
}

.internal-employee-card > footer button.mobile-alert-command {
  border-color: #b8d5f6;
  background: #f2f8ff;
  color: #1764b8;
}

.mobile-alert-enrollment-dialog {
  width: min(680px, calc(100vw - 28px));
  max-width: 680px;
  border: 0;
  border-radius: 14px;
  padding: 0;
  color: #23384f;
  box-shadow: 0 28px 80px rgba(25, 42, 62, 0.28);
}

.mobile-alert-enrollment-dialog::backdrop {
  background: rgba(19, 34, 51, 0.54);
  backdrop-filter: blur(2px);
}

.mobile-alert-enrollment-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #dce6ef;
  padding: 17px 19px;
}

.mobile-alert-enrollment-dialog > header small {
  color: #08706b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.mobile-alert-enrollment-dialog > header h3 {
  margin: 4px 0 2px;
  font-size: 18px;
}

.mobile-alert-enrollment-dialog > header p {
  margin: 0;
  color: #6f8092;
  font-size: 10px;
}

.mobile-alert-enrollment-dialog > header button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd7e3;
  border-radius: 7px;
  background: #fff;
  color: #50667c;
}

.mobile-alert-enrollment-dialog > header button svg {
  width: 16px;
  height: 16px;
}

.mobile-alert-enrollment-body {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 18px;
  padding: 19px;
}

.mobile-alert-qr-shell {
  display: grid;
  place-items: center;
  min-height: 210px;
  border: 1px solid #d9e5f0;
  border-radius: 12px;
  background: #f5f9fd;
  padding: 12px;
}

.mobile-alert-qr-shell img {
  width: 184px;
  height: 184px;
  display: block;
}

.mobile-alert-enrollment-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 11px;
}

.mobile-alert-enrollment-copy > span {
  color: #2f526f;
  font-size: 11px;
  line-height: 1.55;
}

.mobile-alert-enrollment-copy label,
.mobile-alert-enrollment-copy label small {
  display: block;
}

.mobile-alert-enrollment-copy label small {
  margin-bottom: 5px;
  color: #718396;
  font-size: 9px;
}

.mobile-alert-enrollment-copy input {
  width: 100%;
  height: 40px;
  border: 1px solid #cbd9e6;
  border-radius: 8px;
  background: #f8fafc;
  color: #3d566f;
  padding: 0 10px;
  font-size: 10px;
}

.mobile-alert-enrollment-copy > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-alert-enrollment-copy button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #176bd1;
  border-radius: 8px;
  background: #176bd1;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.mobile-alert-enrollment-copy button.secondary-command {
  border-color: #c8d6e3;
  background: #fff;
  color: #3e5871;
}

.mobile-alert-enrollment-copy button svg,
.mobile-alert-enrollment-copy p svg {
  width: 14px;
  height: 14px;
}

.mobile-alert-enrollment-copy > p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: #728498;
  font-size: 9px;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .mobile-alert-enrollment-body {
    grid-template-columns: 1fr;
  }

  .mobile-alert-qr-shell {
    min-height: 190px;
  }

  .mobile-alert-qr-shell img {
    width: 170px;
    height: 170px;
  }
}

.internal-employee-card > footer button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.internal-employee-empty {
  min-height: 180px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border: 1px dashed #cbd6e0;
  border-radius: 9px;
  color: #8291a1;
  text-align: center;
}

.internal-employee-empty svg {
  width: 26px;
  height: 26px;
}

.internal-employee-empty strong {
  color: #4d6277;
  font-size: 12px;
}

.internal-employee-empty span {
  font-size: 9px;
}

.admin-center-panel[data-admin-panel="customers"].active {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.platform-customer-heading {
  flex: 0 0 auto;
}

.platform-customer-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.platform-customer-kpis article {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #d5dde6;
  border-radius: 6px;
  background: #fff;
  padding: 12px;
}

.platform-customer-kpis article > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e9f3f2;
  color: #19716e;
}

.platform-customer-kpis article:nth-child(2) > span {
  background: #ebf5ef;
  color: #19744f;
}

.platform-customer-kpis article:nth-child(3) > span {
  background: #faecee;
  color: #a93846;
}

.platform-customer-kpis article:nth-child(4) > span {
  background: #fff2e2;
  color: #9a651e;
}

.platform-customer-kpis svg {
  width: 17px;
  height: 17px;
}

.platform-customer-kpis article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.platform-customer-kpis small {
  color: #7c8998;
  font-size: 9px;
}

.platform-customer-kpis strong {
  overflow: hidden;
  color: #263a50;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-customer-create-card {
  flex: 0 0 auto;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid #cfd9e4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(33, 54, 77, 0.07);
}

.platform-customer-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  border-bottom: 1px solid #dce4ec;
  background: linear-gradient(105deg, #f4fbfa 0%, #f7faff 58%, #fff 100%);
  padding: 11px 14px;
}

.platform-create-head-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.platform-create-head-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #bfe0d8;
  border-radius: 9px;
  background: #e4f5f1;
  color: #14705e;
}

.platform-create-head-icon svg {
  width: 18px;
  height: 18px;
}

.platform-create-head-main > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-create-head-main strong {
  color: #233b52;
  font-size: 14px;
}

.platform-create-head-main > div > span {
  color: #708196;
  font-size: 10px;
}

.platform-customer-create-head > em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 26px;
  border: 1px solid #cbd9e8;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #557087;
  padding: 0 9px;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.platform-customer-create-head > em svg {
  width: 13px;
  height: 13px;
  color: #178269;
}

#platformCustomerCreateForm {
  display: block;
  padding: 12px 14px 0;
}

.platform-create-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.platform-create-group {
  min-width: 0;
  border: 1px solid #dbe3eb;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.platform-create-group > header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-bottom: 8px;
}

.platform-create-group > header > span {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #e4edf8;
  color: #2c5fa6;
  font-size: 9px;
  font-weight: 850;
}

.platform-create-group > header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.platform-create-group > header strong {
  color: #30475e;
  font-size: 11px;
}

.platform-create-group > header small {
  color: #8390a0;
  font-size: 8px;
}

.platform-create-fields,
.platform-create-service-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.platform-create-service {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(320px, 1fr) minmax(220px, 0.75fr);
  align-items: center;
  gap: 10px;
}

.platform-create-service > header {
  margin: 0;
}

.platform-create-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.platform-create-field > span {
  color: #65768a;
  font-size: 9px;
  font-weight: 700;
}

.platform-create-field > span em {
  color: #bf3344;
  font-style: normal;
}

.platform-create-control {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 38px;
  overflow: hidden;
  border: 1px solid #cfd9e4;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.platform-create-control:focus-within {
  border-color: #4f7fd1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 102, 197, 0.11);
}

.platform-create-control > svg {
  justify-self: center;
  width: 14px;
  height: 14px;
  color: #8a98a8;
}

.platform-create-control input,
.platform-create-control select {
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 8px 0 0;
  font-size: 11px;
  box-shadow: none;
}

.platform-create-control input:focus,
.platform-create-control select:focus {
  box-shadow: none;
}

.platform-new-duration {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
}

.platform-new-duration input {
  border: 0;
  box-shadow: none;
}

.platform-new-duration b {
  color: #738397;
  font-size: 9px;
  font-weight: 700;
}

.platform-new-duration:has(input:disabled) {
  background: #eef2f6;
  opacity: 0.68;
}

#platformCreateServiceHint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 20px 0 0;
  color: #6f8092;
  font-size: 9px;
  line-height: 1.45;
}

#platformCreateServiceHint svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: #2c6db9;
}

.platform-create-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin-top: 11px;
  border-top: 1px solid #e2e8ef;
}

.platform-create-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7a899a;
  font-size: 9px;
}

.platform-create-footer > span svg {
  width: 13px;
  height: 13px;
  color: #7d8da0;
}

#platformCustomerSubmitButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 132px;
  height: 38px;
  border: 1px solid #245ac0;
  border-radius: 6px;
  background: linear-gradient(180deg, #3270df 0%, #275fc8 100%);
  color: #fff;
  padding: 0 15px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(42, 98, 202, 0.2);
}

#platformCustomerSubmitButton svg {
  width: 14px;
  height: 14px;
}

.platform-customer-toolbar {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px 112px auto;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  border: 1px solid #d5dde6;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #fff;
  padding: 7px 9px;
}

.platform-customer-toolbar > button {
  min-height: 34px;
  justify-content: center;
  padding: 7px 10px;
  white-space: nowrap;
}

.platform-customer-toolbar > button svg {
  width: 14px;
  height: 14px;
}

.platform-customer-search {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #d4dde7;
  border-radius: 5px;
  background: #f8fafc;
  padding: 0 9px;
}

.platform-customer-search svg {
  width: 14px;
  height: 14px;
  color: #8290a1;
}

.platform-customer-search input {
  min-width: 0;
  border: 0;
  background: transparent;
  padding-left: 3px;
  box-shadow: none;
}

.platform-customer-toolbar > span {
  color: #758497;
  font-size: 10px;
  text-align: right;
}

.platform-customer-workspace {
  min-height: 360px;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d5dde6;
  border-radius: 0 0 7px 7px;
  background: #fff;
}

.platform-customer-list {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid #d7dfe7;
  background: #f5f7f9;
  padding: 8px;
}

.platform-customer-row {
  width: 100%;
  min-height: 104px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #2f4359;
  padding: 11px 9px;
  text-align: left;
  box-shadow: none;
}

.platform-customer-row:hover:not(:disabled) {
  border-color: #d4dde6;
  background: #fff;
  transform: none;
  box-shadow: none;
}

.platform-customer-row.active {
  border-color: #78a2d9;
  background: #edf4ff;
}

.platform-customer-row-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #dfeaec;
  color: #17656b;
  font-size: 12px;
  font-weight: 800;
}

.platform-customer-row-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.platform-customer-row strong,
.platform-customer-row span,
.platform-customer-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-customer-row-activity,
.platform-detail-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.platform-customer-row-activity b,
.platform-detail-activity span {
  overflow: visible;
  border-radius: 999px;
  background: #e9f5ef;
  color: #217157;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.platform-customer-row-activity .offline-days,
.platform-detail-activity span:last-child {
  background: #edf2f8;
  color: #5d6f83;
}

.platform-customer-row strong {
  font-size: 11px;
}

.platform-customer-row span,
.platform-customer-row small {
  color: #748397;
  font-size: 9px;
}

.platform-status-chip {
  border-radius: 999px;
  background: #e9f5ef;
  color: #197350;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.platform-status-chip.suspended,
.platform-status-chip.deleted {
  background: #fae9ec;
  color: #a83240;
}

.platform-status-chip.pending,
.platform-status-chip.expired {
  background: #fff1df;
  color: #96601a;
}

.platform-customer-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.platform-customer-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #8492a2;
  text-align: center;
}

.platform-customer-empty svg {
  width: 24px;
  height: 24px;
}

.platform-customer-empty strong {
  color: #4c5f74;
  font-size: 13px;
}

.platform-customer-empty span {
  font-size: 10px;
}

.platform-customer-empty button {
  margin-top: 4px;
  border-color: #a9bee0;
  background: #edf4ff;
  color: #255bb7;
  padding: 7px 13px;
  font-size: 11px;
}

.platform-detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #dbe2e9;
  background: rgba(255, 255, 255, 0.97);
  padding: 13px 18px;
}

.platform-detail-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.platform-detail-head h4 {
  overflow: hidden;
  margin: 0;
  color: #273c52;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-detail-head p {
  overflow: hidden;
  margin: 0;
  color: #7b899a;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-detail-activity {
  margin-top: 2px;
}

.platform-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #dce3ea;
  background: #f8fafc;
}

.platform-detail-summary > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  border-right: 1px solid #dce3ea;
  padding: 12px 14px;
}

.platform-detail-summary > div:last-child {
  border-right: 0;
}

.platform-detail-summary span {
  color: #8290a0;
  font-size: 8px;
}

.platform-detail-summary strong {
  overflow: hidden;
  color: #33485e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-config-section {
  border-bottom: 1px solid #dce3ea;
  padding: 16px 18px;
}

.platform-config-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.platform-config-section > header > div {
  display: grid;
  gap: 4px;
}

.platform-config-section > header strong {
  color: #30455b;
  font-size: 12px;
}

.platform-config-section > header span {
  color: #8290a0;
  font-size: 9px;
}

.platform-config-section > header > strong {
  color: #176a69;
  font-size: 14px;
}

.platform-inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
}

.platform-inline-form.two-fields {
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.4fr) auto;
}

.platform-profile-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.4fr) auto;
  gap: 8px;
}

.platform-inline-form input,
.platform-inline-form select,
.platform-profile-form input {
  min-width: 0;
}

.platform-inline-form button,
.platform-profile-form button {
  white-space: nowrap;
}

.platform-danger-zone {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.platform-danger-zone .danger-command {
  white-space: nowrap;
}

.platform-danger-zone .restore-command {
  border-color: #afd1c6;
  background: #eef8f5;
  color: #176f5d;
}

.platform-history-list {
  display: grid;
  gap: 6px;
}

.platform-history-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #edf0f3;
  padding: 8px 0;
  color: #5b6d80;
  font-size: 9px;
}

.platform-history-row:last-child {
  border-bottom: 0;
}

.platform-history-row strong,
.platform-history-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-history-row strong {
  color: #3b5066;
}

@media (max-width: 900px) {
  #internalEmployeeCreateForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #internalEmployeeCreateForm button {
    min-width: 0;
  }

  .internal-employee-kpis,
  .internal-employee-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .internal-employee-stats > div:nth-child(2) {
    border-right: 0;
  }

  .internal-employee-stats > div:nth-child(-n + 2) {
    border-bottom: 1px solid #e1e7ed;
  }

  .admin-center-panel[data-admin-panel="customers"].active {
    overflow-y: auto;
  }

  .platform-customer-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-create-service {
    grid-template-columns: minmax(160px, 0.45fr) minmax(300px, 1fr);
  }

  #platformCreateServiceHint {
    grid-column: 1 / -1;
    margin: 0 0 2px 33px;
  }

  .platform-customer-toolbar {
    grid-template-columns: minmax(0, 1fr) 130px 112px;
  }

  .platform-customer-toolbar > span {
    display: none;
  }

  .platform-customer-workspace {
    min-height: 760px;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 230px minmax(0, 1fr);
    overflow: visible;
  }

  .platform-customer-list {
    border-right: 0;
    border-bottom: 1px solid #d7dfe7;
  }

  .platform-customer-detail {
    overflow: visible;
  }

  .platform-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-detail-summary > div:nth-child(2) {
    border-right: 0;
  }

  .platform-detail-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #dce3ea;
  }

  .platform-inline-form,
  .platform-inline-form.two-fields,
  .platform-profile-form,
  .platform-danger-zone {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .internal-create-status {
    align-items: stretch;
    flex-direction: column;
  }

  .internal-create-status button {
    width: 100%;
  }

  #internalEmployeeCreateForm {
    grid-template-columns: minmax(0, 1fr);
  }

  #internalEmployeeCreateForm button {
    width: 100%;
  }

  .internal-employee-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .internal-employee-card > header {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .internal-employee-avatar {
    width: 34px;
    height: 34px;
  }

  .internal-employee-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .internal-employee-card > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .internal-employee-card > footer > div,
  .internal-employee-card > footer button {
    width: 100%;
  }

  .internal-employee-card > footer > div {
    align-items: stretch;
    flex-direction: column;
  }

  .internal-handover-target {
    width: 100%;
  }

  .internal-employee-card > footer button {
    justify-content: center;
  }

  .platform-customer-kpis,
  .platform-customer-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-customer-create-head {
    padding: 10px;
  }

  .platform-customer-create-head > em {
    display: none;
  }

  #platformCustomerCreateForm {
    padding: 9px 9px 0;
  }

  .platform-create-groups,
  .platform-create-fields,
  .platform-create-service-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-create-service {
    display: block;
    grid-column: auto;
  }

  .platform-create-service > header {
    margin-bottom: 8px;
  }

  #platformCreateServiceHint {
    margin: 8px 0 0;
  }

  .platform-create-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 10px 0;
  }

  #platformCustomerSubmitButton {
    width: 100%;
    min-height: 42px;
  }

  .platform-customer-status-filter {
    width: 100%;
  }

  .platform-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

body.role-platform-admin .customer-commerce-only {
  display: none !important;
}

.platform-plan-manager {
  overflow: hidden;
  border: 1px solid #d3dce5;
  border-radius: 7px;
  background: #fff;
}

.platform-plan-manager-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #dce3ea;
  padding: 12px 15px;
}

.platform-plan-manager-head > div {
  display: grid;
  gap: 5px;
}

.platform-plan-manager-head strong {
  color: #2e4359;
  font-size: 13px;
}

.platform-plan-manager-head span {
  color: #7d8b9b;
  font-size: 9px;
}

#platformPlanCount {
  border-radius: 999px;
  background: #edf4f4;
  color: #176a6b;
  padding: 5px 8px;
  font-weight: 750;
  white-space: nowrap;
}

.platform-plan-create-form {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(6, minmax(76px, 0.6fr)) auto;
  gap: 8px;
  align-items: end;
  border-bottom: 1px solid #dce3ea;
  background: #f7f9fb;
  padding: 12px 15px;
}

.platform-plan-create-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.platform-plan-create-form label span {
  color: #718094;
  font-size: 8px;
}

.platform-plan-create-form input {
  min-width: 0;
}

.platform-plan-create-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.platform-plan-create-form button svg {
  width: 14px;
  height: 14px;
}

.platform-plan-table-head,
.platform-plan-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.3fr) minmax(75px, 0.6fr) repeat(2, minmax(58px, 0.45fr)) minmax(66px, 0.5fr) minmax(64px, 0.5fr) repeat(2, minmax(58px, 0.45fr)) minmax(135px, auto);
  gap: 8px;
  align-items: center;
}

.platform-plan-table-head {
  min-height: 34px;
  border-bottom: 1px solid #e1e6ec;
  background: #fff;
  color: #7a899a;
  padding: 0 15px;
  font-size: 8px;
  font-weight: 750;
}

.platform-plan-list {
  display: grid;
}

.platform-plan-row {
  min-height: 58px;
  border-bottom: 1px solid #e8ecf0;
  padding: 9px 15px;
}

.platform-plan-row:last-child {
  border-bottom: 0;
}

.platform-plan-row.inactive {
  background: #f7f8fa;
  opacity: 0.72;
}

.platform-plan-name-field {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.platform-plan-name-field small {
  overflow: hidden;
  color: #8996a5;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-plan-row input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 7px 8px;
}

.platform-plan-marketing-toggle,
.plan-marketing-enabled {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.platform-plan-marketing-toggle input,
.plan-marketing-enabled input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.plan-marketing-enabled span {
  color: #64748b;
  font-size: 10px;
}

.platform-plan-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(68px, 1fr));
  gap: 6px;
}

.platform-plan-row-actions button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  white-space: nowrap;
}

.platform-plan-row-actions .plan-toggle-button.is-active {
  border-color: rgba(178, 54, 68, 0.25);
  background: rgba(178, 54, 68, 0.07);
  color: #9d303d;
}

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

  .platform-plan-create-form > input,
  .platform-plan-create-form > button {
    grid-column: 1 / -1;
  }

  .platform-plan-table-head {
    display: none;
  }

  .platform-plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
  }

  .platform-plan-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid #dce3ea;
    border-radius: 6px;
    padding: 10px;
  }

  .platform-plan-name-field,
  .platform-plan-row-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .platform-plan-list,
  .platform-plan-create-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-plan-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-plan-name-field,
  .platform-plan-row-actions,
  .platform-plan-create-form > input,
  .platform-plan-create-form > button {
    grid-column: auto;
  }
}

/* Mobile workspace: one focused pane at a time, with thumb-friendly navigation. */
.mobile-workspace-nav,
.mobile-filter-toggle,
.mobile-back-button {
  display: none;
}

.mobile-chat-title-row {
  min-width: 0;
}

@media (max-width: 760px) {
  body.role-admin,
  body.role-agent,
  body.role-owner,
  body.role-platform-admin,
  body.role-finance {
    overflow: hidden;
  }

  .global-topbar {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    height: 56px;
    padding: 0 8px;
  }

  .global-topbar .brand-mark {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .topbar-brand-copy,
  .global-topbar .operator-copy,
  .global-topbar .operator-avatar,
  body .global-topbar #operatorAdminButton {
    display: none !important;
  }

  .topbar-primary-actions {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar-primary-actions::-webkit-scrollbar {
    display: none;
  }

  .topbar-action-button {
    flex: 0 0 34px;
    width: 34px;
    min-height: 34px;
    padding: 0;
  }

  .global-topbar .operator-bar {
    display: block;
    min-width: 34px;
    border-left: 1px solid #314055;
    padding-left: 4px;
  }

  .global-topbar .operator-exit-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .app-shell {
    display: block;
    width: 100%;
    height: calc(100dvh - 116px);
    min-height: 0;
    overflow: hidden;
  }

  .app-shell > .accounts-panel,
  .app-shell > .inbox-panel,
  .app-shell > .chat-panel {
    display: none !important;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
  }

  .app-shell[data-mobile-pane="accounts"] .accounts-panel {
    display: flex !important;
  }

  .app-shell[data-mobile-pane="inbox"] .inbox-panel {
    display: flex !important;
  }

  .app-shell[data-mobile-pane="chat"] .chat-panel {
    display: grid !important;
  }

  .accounts-panel {
    gap: 8px;
    overflow: hidden;
    padding: 12px 10px 8px;
  }

  .sidebar-section-head {
    align-items: center;
    padding: 0 2px 9px;
  }

  .sidebar-section-head .section-eyebrow,
  .sidebar-section-head p {
    display: none;
  }

  .sidebar-section-head h2 {
    margin: 0;
    font-size: 16px;
  }

  .account-batch-export {
    min-height: 38px;
  }

  .accounts-list {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    padding-right: 2px;
  }

  .account-row {
    min-height: 78px;
    padding: 7px 8px;
  }

  .inbox-toolbar {
    flex: 0 0 auto;
    gap: 8px;
    padding: 10px;
  }

  .inbox-toolbar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .inbox-toolbar-heading h2 {
    margin: 0;
    font-size: 16px;
  }

  .inbox-toolbar-heading p {
    max-width: 230px;
    margin-top: 2px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #41536a;
    padding: 0 10px;
    font-size: 12px;
  }

  .mobile-filter-toggle svg {
    width: 14px;
    height: 14px;
  }

  .inbox-toolbar:not(.mobile-filters-open) .filter-row {
    display: none;
  }

  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .kpi-card {
    min-height: 49px;
    padding: 5px 6px;
  }

  .kpi-card span {
    font-size: 10px;
  }

  .kpi-card strong {
    font-size: 18px;
  }

  .filter-tabs {
    min-height: 36px;
  }

  .filter-tab,
  .filter-reset-button {
    min-width: 0;
    min-height: 36px;
    padding: 0 5px;
    font-size: 11px;
  }

  .inbox-toolbar #searchInput {
    height: 36px;
  }

  .conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
    overflow-y: auto;
    padding: 8px;
  }

  .conversation-item {
    min-height: 86px;
  }

  .chat-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .chat-header {
    display: block;
    min-height: 0;
    padding: 9px 10px 8px;
  }

  .mobile-chat-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .mobile-back-button {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    border: 1px solid #d6dfe8;
    background: #f8fafc;
    color: #405570;
    padding: 0;
  }

  .mobile-back-button svg {
    width: 16px;
    height: 16px;
  }

  #chatTitleBlock h2 {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #chatSubtitle {
    margin: 3px 0 0 41px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 7px;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .chat-actions::-webkit-scrollbar {
    display: none;
  }

  .chat-actions button {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    height: 34px;
    padding: 0 9px;
    font-size: 11px;
  }

  .chat-body {
    min-height: 0;
    padding: 0;
  }

  .messages-list {
    min-height: 0;
    padding: 12px 9px;
  }

  .message-bubble {
    max-width: 88%;
  }

  .reply-form {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 7px;
    padding: 8px 9px calc(8px + env(safe-area-inset-bottom));
  }

  .reply-composer textarea {
    min-height: 54px;
  }

  .reply-form > button {
    width: 64px;
    height: auto;
    min-height: 76px;
  }

  .customer-panel {
    width: 100%;
  }

  .mobile-workspace-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: calc(60px + env(safe-area-inset-bottom));
    border-top: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, 0.98);
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    box-shadow: 0 -5px 18px rgba(15, 23, 42, 0.1);
  }

  .mobile-workspace-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 48px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #66768a;
    padding: 0 6px;
    font-size: 12px;
  }

  .mobile-workspace-nav button.active {
    background: #eaf1ff;
    color: #245cc3;
    font-weight: 800;
  }

  .mobile-workspace-nav svg {
    width: 18px;
    height: 18px;
  }

  body.auth-pending .mobile-workspace-nav,
  body.auth-required .mobile-workspace-nav,
  body.billing-required .mobile-workspace-nav,
  body.agent-home-open .mobile-workspace-nav {
    display: none;
  }

  .admin-center-dialog {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .admin-center-head {
    align-items: center;
    padding: 11px 12px;
  }

  .admin-center-head .section-eyebrow,
  .admin-center-head p,
  .admin-command-copy {
    display: none;
  }

  .admin-center-head h2 {
    margin: 0;
    font-size: 17px;
  }

  .admin-command-bar {
    display: block;
    padding: 7px 9px;
  }

  .admin-command-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .admin-command-actions button {
    min-width: 0;
    min-height: 38px;
    padding: 0 7px;
    font-size: 11px;
  }

  .admin-tabs {
    flex: 0 0 auto;
    min-height: 46px;
    overflow-x: auto;
    padding: 0 6px;
  }

  .admin-tab {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 10px;
  }

  .admin-center-panel {
    min-height: 0;
    overflow-x: hidden;
    padding: 10px;
  }
}