/* Flow design system */

[x-cloak] { display: none !important; }

.nav-subitem .fa-whatsapp,
.nav-subitem.active .fa-whatsapp { color: #25D366; }
.nav-subitem .fa-google,
.nav-subitem.active .fa-google { color: #ea4335; }
.page-header h1 i {
  margin-right: 0.35em;
}
.page-header h1 .fa-whatsapp { color: #25D366; }
.page-header h1 .fa-google { color: #ea4335; }

:root {
  /* Brand (overridden by BrandingSetting::cssVariables) — light gradient default */
  --primary: #2F8F7B;
  --secondary: #6BB8A8;
  --sky: #8EC8FF;
  --sky-deep: #4F7CFF;
  --atmosphere-a: color-mix(in srgb, #F5EDE3 70%, transparent);
  --atmosphere-b: color-mix(in srgb, #E8F2F0 55%, transparent);
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 14px 36px rgba(90, 80, 60, 0.08);

  /* Text */
  --text-dark: #1C1F24;
  --text-muted: #6B7280;
  --text-sidebar: #3F4654;

  /* Surfaces — light warm gradient */
  --bg-color: #F7F4F0;
  --card-bg: #ffffff;
  --card-border: #E8E4DE;
  --border-light: #E8E4DE;
  --shadow: 0 8px 22px rgba(70, 60, 45, 0.06);
  --shadow-lg: 0 18px 42px rgba(70, 60, 45, 0.10);

  /* Chat */
  --chat-paper: #F0EBE3;
  --chat-out: #D9FDD3;
  --chat-wallpaper: url('/images/wa-chat-bg.svg');
  /* WhatsApp Web light doodle tint (SVG uses currentColor; we paint via mask). */
  --chat-doodle: rgba(11, 20, 26, 0.10);

  /* Shape */
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Type */
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --base-font-size: 14px;
  --ui-scale: 1;

  /* Status */
  --success: #31A24C;
  --warning: #d97706;
  --danger: #dc2626;
  --indigo: #5B6CFF;

  /* Scrollbar */
  --scrollbar-size: 5px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(107, 114, 128, 0.28);
}

/* Soft indigo dashboard surfaces */
html[data-theme="soft"] {
  --atmosphere-a: color-mix(in srgb, var(--primary) 18%, transparent);
  --atmosphere-b: color-mix(in srgb, #A78BFA 14%, transparent);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 16px 40px rgba(80, 96, 160, 0.10);
  --text-dark: #1A1F36;
  --text-muted: #6B728E;
  --text-sidebar: #4A5168;
  --bg-color: #F3F5FB;
  --card-border: #E6EAF3;
  --border-light: #E6EAF3;
  --shadow: 0 8px 24px rgba(80, 96, 160, 0.07);
  --shadow-lg: 0 18px 44px rgba(80, 96, 160, 0.12);
}

/* Classic cool neutral surfaces */
html[data-theme="classic"] {
  --atmosphere-a: color-mix(in srgb, var(--primary) 16%, transparent);
  --atmosphere-b: color-mix(in srgb, var(--secondary) 12%, transparent);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 14px 36px rgba(18, 40, 80, 0.08);
  --text-dark: #12151A;
  --text-muted: #5C6570;
  --text-sidebar: #3D4654;
  --bg-color: #F0F2F5;
  --card-border: #D8DEE6;
  --border-light: #D8DEE6;
  --shadow: 0 4px 18px rgba(18, 21, 26, 0.06);
  --shadow-lg: 0 12px 36px rgba(18, 21, 26, 0.10);
}

/* ---- Base ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
}

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

body {
  background: var(--bg-color);
  color: var(--text-dark);
  font-size: calc(var(--base-font-size) * var(--ui-scale));
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 101, 112, 0.45);
}
*::-webkit-scrollbar-corner { background: transparent; }

.bg-mesh, #blob { display: none !important; }

.app-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-color);
  background-image:
    radial-gradient(980px 560px at 8% -12%, var(--atmosphere-a), transparent 58%),
    radial-gradient(860px 480px at 96% 0%, var(--atmosphere-b), transparent 56%),
    radial-gradient(720px 420px at 50% 110%, color-mix(in srgb, var(--secondary) 12%, transparent), transparent 52%),
    linear-gradient(165deg, #fbf8f4 0%, #f3f0ea 48%, #eef5f3 100%);
}

html[data-theme="soft"] .app-atmosphere {
  background-image:
    radial-gradient(980px 560px at 8% -12%, color-mix(in srgb, #A78BFA 22%, transparent), transparent 58%),
    radial-gradient(860px 480px at 96% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 56%),
    radial-gradient(720px 420px at 70% 110%, color-mix(in srgb, #7DD3FC 16%, transparent), transparent 52%),
    linear-gradient(165deg, #f0f2fb 0%, #e9eef9 46%, #eef3fa 100%);
}

html[data-theme="classic"] .app-atmosphere {
  background-image:
    radial-gradient(900px 520px at 6% -8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 58%),
    radial-gradient(820px 460px at 96% 4%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 55%),
    linear-gradient(165deg, #eef4fb 0%, #eef2f6 50%, #f3f5f8 100%);
}

.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes floatUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- Brand mark ---- */
.sidebar-brand,
.brand-mark,
.brand-word {
  text-decoration: none;
  color: inherit;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
  margin-bottom: 4px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  line-height: 1;
}

/* ---- Buttons ---- */
.btn {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: none;
}
.btn:hover { background: #096652; }
.btn:disabled,
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.is-loading {
  position: relative;
  pointer-events: none;
}
.btn.is-loading > * {
  visibility: hidden;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-right-color: transparent;
  border-radius: 50%;
  animation: flowBtnSpin .65s linear infinite;
}
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after {
  border-color: rgba(17, 24, 39, 0.55);
  border-right-color: transparent;
}
@keyframes flowBtnSpin {
  to { transform: rotate(360deg); }
}
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 7px; }
.btn-secondary {
  background: #fff;
  color: var(--text-sidebar);
  border: 1px solid var(--border-light);
}
.btn-secondary:hover { background: #f4f6f8; border-color: #c5ccd4; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: var(--secondary); border-color: var(--secondary); }
.btn-success:hover { background: var(--primary); }
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  display: inline-flex;
  align-items: center;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- Metrics ---- */
.sd-metric {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background: #fff;
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
.sd-metric:hover { border-color: #bcc5ce; }
.sd-metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 18px;
  background: rgba(24, 119, 242, 0.10);
}
.sd-metric.blue .sd-metric-icon {
  background: rgba(14, 165, 233, 0.12);
  color: var(--sky-deep);
}
.sd-metric.green .sd-metric-icon {
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
}
.sd-metric.amber .sd-metric-icon {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warning);
}
.sd-metric.slate .sd-metric-icon {
  background: rgba(92, 101, 112, 0.12);
  color: var(--text-muted);
}
.sd-metric .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.sd-metric .value {
  font-size: 26px;
  font-weight: 750;
  line-height: 1.1;
  margin-top: 2px;
  color: var(--text-dark);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.sd-metric .sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}

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

.sd-welcome {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #4B9BF8 0%, #1877F2 55%, #0D65D9 100%);
  box-shadow: var(--shadow);
  color: #fff;
  animation: floatUp .5s ease both;
}
.sd-welcome::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
}
.sd-welcome h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
}
.sd-welcome-kicker {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 10px !important;
  position: relative;
  z-index: 1;
}
.sd-welcome p {
  font-size: 14px;
  opacity: .92;
  max-width: 520px;
  position: relative;
  z-index: 1;
}
.sd-welcome .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
.sd-welcome .actions .btn {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
}
.sd-welcome .actions .btn:hover { background: #f0faf6; }

/* ---- Dashboard (calm workspace) ---- */
.dash {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-hero {
  position: relative;
  overflow: hidden;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--atmosphere-a) 85%, var(--card-bg)) 0%,
      color-mix(in srgb, var(--atmosphere-b) 70%, var(--card-bg)) 55%,
      var(--card-bg) 100%
    );
  box-shadow: var(--shadow);
  animation: floatUp .55s ease both;
}
.dash-hero::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -56px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary) 16%, transparent),
    transparent 72%
  );
  pointer-events: none;
}
.dash-hero-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}
.dash-hero-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
  line-height: 1.12;
}
.dash-hero-lede {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0;
  position: relative;
  z-index: 1;
  line-height: 1.45;
}
.dash-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.dash-hero-actions .btn {
  font-size: 14px;
  padding: 10px 18px;
}
.dash-hero .btn-ghost {
  background: transparent;
  color: var(--text-sidebar);
  border: 1px solid var(--border-light);
}
.dash-hero .btn-ghost:hover {
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border-light));
  color: var(--text-dark);
}

.dash-platform {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: floatUp .55s ease .06s both;
}

.dash-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  animation: floatUp .55s ease .1s both;
}
.dash-pulse--platform {
  animation-delay: 0s;
}
.dash-pulse--platform-ops {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  animation-delay: 0s;
}
.dash-pulse--system {
  margin-top: 12px;
  animation-delay: .04s;
}
.dash-stat-value--status {
  font-size: 22px;
  text-transform: capitalize;
}
.dash-hero--platform .dash-hero-actions {
  flex-wrap: wrap;
}
.dash-stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.dash-stat-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.dash-stat-icon--chat {
  color: color-mix(in srgb, var(--primary) 70%, #0ea5e9);
  background: color-mix(in srgb, #0ea5e9 12%, transparent);
}
.dash-stat-icon--unread {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}
.dash-stat-icon--danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.dash-stat-icon--users {
  color: color-mix(in srgb, var(--primary) 55%, #6366f1);
  background: color-mix(in srgb, #6366f1 12%, transparent);
}
.dash-stat-icon--security {
  color: var(--text-sidebar);
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
}
.dash-stat-body {
  min-width: 0;
  flex: 1;
}
.dash-stat--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.dash-stat--link:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 4%, var(--card-bg));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}
.dash-stat--link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
}
.dash-stat-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.dash-stat-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-dark);
  margin-top: 4px;
}
.dash-stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.35;
}

.dash-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
  animation: floatUp .55s ease .16s both;
}

.dash-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  animation: floatUp .55s ease .22s both;
}

.dash-platform-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dash-alerts {
  animation: floatUp .55s ease .26s both;
}

.dash-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dash-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px 0;
}
.dash-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dash-panel-title > i {
  color: var(--primary);
  font-size: 15px;
  opacity: 0.9;
}
.dash-icon-warn { color: var(--warning) !important; }
.dash-icon-danger { color: var(--danger) !important; }
.dash-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
  flex: 1;
}
.dash-panel--chart .dash-panel-header {
  margin-bottom: 2px;
}
.dash-panel--rail .dash-panel-body {
  max-height: 360px;
  overflow-y: auto;
}

.dash-chart {
  position: relative;
  height: 320px;
  padding: 6px 14px 14px;
}

.dash-range {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-color) 80%, #fff);
  border: 1px solid var(--border-light);
}
.dash-range-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s, color .15s;
}
.dash-range-btn:hover {
  color: var(--text-dark);
}
.dash-range-btn.is-active {
  background: var(--card-bg);
  color: var(--text-dark);
  box-shadow: 0 1px 3px rgba(70, 60, 45, 0.08);
}

.dash-row--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.dash-row--link:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-light));
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-color));
}
.dash-row--link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 1px;
}
.toast-clickable {
  cursor: pointer;
}
.toast-clickable:hover {
  filter: brightness(0.99);
}
.toast-action {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 750;
  color: var(--toast-accent, var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg-color) 55%, transparent);
  transition: border-color .15s, background .15s;
}
.dash-row:hover {
  border-color: var(--border-light);
  background: color-mix(in srgb, var(--bg-color) 75%, #fff);
}
.dash-row-main {
  min-width: 0;
}
.dash-row-main--grow {
  flex: 1;
  min-width: 0;
}
.dash-row-main--clip {
  min-width: 0;
}
.dash-row-main strong {
  display: block;
  font-size: 16px;
  font-weight: 650;
  color: var(--text-dark);
  line-height: 1.3;
}
.dash-row-main small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 13px;
}
.dash-row-wrap {
  white-space: normal;
}
.dash-muted {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.45;
}
.dash-progress {
  margin-top: 8px;
  max-width: 220px;
}
.dash-empty-compact {
  padding: 18px 10px;
}
.dash-empty-compact.dash-empty-compact--soft {
  text-align: center;
}
.dash-empty-compact.dash-empty-compact--soft > i {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.7;
}
.dash-empty-compact.dash-empty-compact--soft p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.45;
}
.dash .empty-state h3 {
  font-size: 17px;
}
.dash .empty-state p {
  font-size: 14px;
}

/* ---- Drawer / modal ---- */
.ui-drawer-backdrop,
.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 21, 26, 0.42);
  z-index: 80;
}
.ui-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--drawer-width, 420px), 100vw);
  background: #fff;
  z-index: 90;
  border-left: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.ui-drawer-header,
.ui-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--card-border);
}
.ui-drawer-header h3,
.ui-modal-header h3 {
  font-size: 16px;
  font-weight: 750;
  margin: 0;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ui-drawer-header p { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.ui-drawer-body,
.ui-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.ui-drawer-footer,
.ui-modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--card-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: #f7f8fa;
}
.ui-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 24px));
  background: #fff;
  z-index: 91;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}
.drawer-enter { transition: transform .2s ease, opacity .2s ease; }
.drawer-enter-start { transform: translateX(16px); opacity: 0; }
.drawer-enter-end { transform: translateX(0); opacity: 1; }
.drawer-leave { transition: transform .18s ease, opacity .18s ease; }
.drawer-leave-start { transform: translateX(0); opacity: 1; }
.drawer-leave-end { transform: translateX(20px); opacity: 0; }

.ui-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.ui-toolbar-title { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.ui-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Contacts unified table header — single-line toolbar */
.contacts-table-bar {
  --contacts-bar-h: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--card-border);
  min-width: 0;
}
.contacts-table-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 420px;
  height: var(--contacts-bar-h);
  margin: 0;
}
.contacts-table-search-wrap > i {
  position: absolute;
  left: 12px;
  font-size: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.contacts-table-search {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 12px 0 34px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.contacts-table-search::placeholder { color: var(--text-muted); font-weight: 500; }
.contacts-table-search:focus {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--card-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.contacts-table-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 148px;
  height: var(--contacts-bar-h);
  margin: 0;
  padding: 0 28px 0 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a93a0' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.contacts-table-select:focus {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--card-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.contacts-table-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.contacts-selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--contacts-bar-h);
  padding: 0 6px 0 10px;
  border-radius: 10px;
  background: rgba(24, 119, 242, 0.10);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.contacts-selection-chip em {
  font-style: normal;
  opacity: 0.75;
  font-weight: 600;
}
.contacts-selection-chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contacts-selection-chip button:hover {
  background: rgba(24, 119, 242, 0.16);
}
.contacts-bar-add {
  height: var(--contacts-bar-h);
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.contacts-bar-add span { font-size: 13px; }
.contacts-options-menu { position: relative; }
.contacts-bar-more {
  width: var(--contacts-bar-h);
  height: var(--contacts-bar-h);
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.contacts-bar-more:hover,
.contacts-bar-more[aria-expanded="true"] {
  background: rgba(24, 119, 242, 0.08);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--card-border));
}
.contacts-options-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 200px;
  max-width: 240px;
  padding: 4px;
  gap: 1px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
}
.contacts-options-panel > button {
  border: none;
  background: transparent;
  color: var(--text-sidebar);
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  font-size: 12.5px;
  font-weight: 600;
  gap: 8px;
  border-radius: 7px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.contacts-options-panel > button:hover {
  background: rgba(24, 119, 242, 0.08);
  color: var(--primary);
}
.contacts-options-panel > button i:first-child {
  width: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0.85;
}
.contacts-options-divider {
  height: 1px;
  margin: 3px 6px;
  background: var(--card-border);
}
.contacts-options-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--text-sidebar);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.contacts-options-toggle:hover,
.contacts-options-toggle.is-open {
  background: rgba(24, 119, 242, 0.08);
  color: var(--primary);
}
.contacts-options-chevron {
  font-size: 9px;
  opacity: 0.7;
  transition: transform .14s ease;
}
.contacts-options-toggle.is-open .contacts-options-chevron {
  transform: rotate(90deg);
}
.contacts-options-picker {
  margin: 0 4px 4px;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #f8fafc;
}
.contacts-options-search {
  width: 100%;
  height: 30px;
  margin: 0 0 4px;
  padding: 0 8px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  outline: none;
}
.contacts-options-search:focus {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--card-border));
}
.contacts-options-results {
  max-height: 140px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.contacts-options-results button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.contacts-options-results button:hover {
  background: rgba(24, 119, 242, 0.10);
  color: var(--primary);
}
.contacts-options-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.contacts-options-empty {
  margin: 0;
  padding: 8px 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.contacts-options-panel button.is-danger {
  color: #b91c1c;
}
.contacts-options-panel button.is-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
}

@media (max-width: 900px) {
  .contacts-table-bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .contacts-table-search-wrap {
    flex: 1 1 100%;
    max-width: none;
  }
  .contacts-table-bar-actions {
    margin-left: 0;
  }
}
@media (max-width: 560px) {
  .contacts-bar-add span { display: none; }
  .contacts-bar-add { padding: 0; width: var(--contacts-bar-h); justify-content: center; }
  .contacts-table-select { max-width: 120px; flex: 1 1 auto; }
}

/* List pages (contacts / labels / team / admin tables): one panel height, scroll inside */
.data-page,
.contacts-page,
.settings-page {
  flex: 1;
  min-height: 0;
  height: 100%;
  gap: 8px;
  overflow: hidden;
}
.data-page > .page-header,
.contacts-page > .page-header,
.settings-page > .page-header,
.data-page > .seg-tabs,
.contacts-page > .seg-tabs,
.settings-page > .seg-tabs,
.data-page > .seg-tabs-row,
.contacts-page > .seg-tabs-row,
.settings-page > .seg-tabs-row,
.settings-page > .sd-metrics,
.contacts-page > .sd-metrics {
  flex-shrink: 0;
}
.data-page > .page-header .titles h1,
.contacts-page > .page-header .titles h1,
.settings-page > .page-header .titles h1 {
  font-size: 20px;
}
.data-page > .seg-tabs,
.contacts-page > .seg-tabs,
.settings-page > .seg-tabs {
  width: fit-content;
  max-width: 100%;
}
.data-page > .seg-tabs-row,
.contacts-page > .seg-tabs-row,
.settings-page > .seg-tabs-row {
  flex-shrink: 0;
  width: 100%;
}
.data-panel,
.contacts-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 15px;
  overflow: hidden;
}
.section-card.contacts-panel {
  margin-bottom: 3px;
}

/* AI agent tables use the same full-height table shell as Webhooks and HTTP API. */
.ai-agent-page {
  min-height: 0;
}
.ai-fallback-inline,
.ai-table-heading {
  display: flex;
  align-items: center;
}
.ai-fallback-inline {
  gap: 7px;
  min-height: 34px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card);
  white-space: nowrap;
}
.ai-fallback-inline > i {
  color: var(--primary);
  font-size: 12px;
}
.ai-fallback-inline strong {
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
}
.ai-fallback-inline .toggle-switch {
  margin-left: 1px;
}
.ai-table-heading > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-table-heading strong {
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 700;
}
.ai-table-heading small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.ai-fallback-status {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.ai-table-heading {
  gap: 9px;
  min-width: 0;
}
.ai-table-heading > i {
  color: var(--primary);
  font-size: 14px;
}
.ai-agent-name {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-knowledge-panel {
  min-height: 0;
}
.ai-knowledge-panel .admin-table-wrapper {
  min-height: 0;
}
.ai-knowledge-config {
  min-height: 0;
}
.ai-knowledge-config .wh-config-bar {
  padding-top: 2px;
  padding-bottom: 16px;
}
.ai-knowledge-config-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.ai-knowledge-config-title strong {
  white-space: nowrap;
}
.ai-knowledge-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  min-width: 0;
}
.ai-knowledge-details,
.ai-knowledge-entries {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 16px;
}
.ai-knowledge-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-knowledge-details .form-control {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.ai-knowledge-textarea {
  min-height: 360px;
  line-height: 1.45;
  resize: vertical;
}
.ai-knowledge-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}
.ai-knowledge-card-heading > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-knowledge-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-knowledge-card-heading strong {
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 750;
}
.ai-knowledge-card-heading small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.ai-knowledge-card-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, #fff);
}
.ai-knowledge-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}
.ai-knowledge-save-row > span {
  color: var(--text-muted);
  font-size: 11px;
}
.ai-knowledge-entries {
  background: color-mix(in srgb, var(--bg-color) 55%, #fff);
}
.ai-knowledge-entries-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ai-knowledge-add-btn {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
.ai-provider-keys-panel {
  min-height: 0;
}
.ai-provider-key-form-card {
  max-width: 760px;
  padding: 16px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
}
.ai-knowledge-entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-knowledge-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  background: var(--card-bg);
}
.ai-knowledge-entry-copy,
.ai-knowledge-entry-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.ai-knowledge-entry-copy > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-knowledge-entry-copy strong {
  overflow: hidden;
  color: var(--text-dark);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-knowledge-entry-copy small {
  color: var(--text-muted);
  font-size: 11px;
}
.ai-knowledge-entry-icon,
.ai-knowledge-empty-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, #fff);
}
.ai-knowledge-entry-actions {
  flex: 0 0 auto;
}
.ai-knowledge-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  padding: 30px 16px 24px;
  text-align: center;
}
.ai-knowledge-empty strong {
  color: var(--text-dark);
  font-size: 13px;
}
.ai-knowledge-empty p {
  max-width: 340px;
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.ai-knowledge-empty.is-locked {
  opacity: 0.75;
}
.ai-table-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.ai-agent-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-agent-form-section {
  --section-accent: var(--primary);
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 68%, var(--card-border));
  border-radius: var(--radius-md);
  background: var(--card-bg);
}
.ai-agent-form-section--setup {
  --section-accent: #2f8f7b;
}
.ai-agent-form-section--response {
  --section-accent: #5b6cff;
}
.ai-agent-form-section--prompt {
  --section-accent: #4f7cff;
}
.ai-agent-form-section--handoff {
  --section-accent: #d97706;
}
.ai-agent-form-section--knowledge {
  --section-accent: #0e9f6e;
}
.ai-agent-form-section--capabilities {
  --section-accent: #7c3aed;
}
.ai-agent-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 520px);
  max-width: 100%;
  padding: 0 8px 0 0;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 750;
}
.ai-agent-section-heading > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.ai-agent-section-heading strong {
  font-size: 13px;
  line-height: 1.3;
}
.ai-agent-section-heading small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}
.ai-agent-section-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 10%, #fff);
}
.ai-agent-form-grid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.ai-agent-form-grid--primary,
.ai-agent-form-grid--handoff {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-agent-form-grid--primary > .form-group:last-child {
  grid-column: 1 / -1;
}
.ai-agent-form-grid--metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-agent-form-section .form-group {
  min-width: 0;
  margin-bottom: 0;
}
.ai-agent-form-section .form-control {
  min-width: 0;
}
.ai-agent-form-section--prompt .form-group {
  margin-top: 14px;
}
.ai-agent-form-section--prompt textarea {
  min-height: 116px;
  resize: vertical;
}
.ai-agent-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ai-agent-field-label > label {
  margin-bottom: 6px;
}
.ai-agent-value-pill {
  min-width: 38px;
  margin-bottom: 6px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--card-border));
  border-radius: var(--radius-pill);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
.ai-agent-range {
  display: block;
  width: 100%;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.ai-agent-range:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
  outline-offset: 3px;
}
.ai-agent-range-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.ai-agent-knowledge-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-agent-picker-label {
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
}
.ai-agent-capability-group + .ai-agent-capability-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}
.ai-agent-subsection-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.ai-agent-subsection-heading strong {
  color: var(--text-dark);
  font-size: 12px;
}
.ai-agent-subsection-heading span {
  color: var(--text-muted);
  font-size: 11px;
}
.ai-agent-capability-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.ai-agent-capability-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-color) 30%, #fff);
}
.ai-agent-capability-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ai-agent-capability-card-title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 9px;
}
.ai-agent-capability-card-title > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.ai-agent-capability-card-title strong {
  color: var(--text-dark);
  font-size: 12px;
  line-height: 1.35;
}
.ai-agent-capability-icon {
  display: inline-flex;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, #fff);
  font-size: 11px;
}
.ai-agent-add-rule {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ai-agent-capability-info {
  display: inline-flex;
  width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  background: transparent;
  font-size: 11px;
  vertical-align: -1px;
  cursor: help;
}
.ai-agent-capability-info:hover,
.ai-agent-capability-info:focus-visible {
  color: var(--primary);
  outline: 0;
}
.ai-agent-rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 11px;
}
.ai-agent-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .72fr) auto;
  align-items: end;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
}
.ai-agent-rule-row.is-image-upload {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 205px) auto;
}
.ai-agent-rule-row.is-reason-only {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ai-agent-rule-field {
  min-width: 0;
}
.ai-agent-rule-field label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-sidebar);
  font-size: 11px;
  font-weight: 650;
}
.ai-agent-rule-field .form-control {
  padding: 9px 11px;
  font-size: 13px;
}
.ai-agent-image-file-input {
  max-width: 205px;
  padding: 7px 8px !important;
  font-size: 11px !important;
}
.ai-agent-remove-rule {
  width: 34px;
  height: 36px;
  flex: 0 0 34px;
  padding: 0;
}
.ai-agent-check-grid {
  display: grid;
  gap: 8px;
}
.ai-agent-check-grid--tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-agent-check-grid--media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-agent-form .check-row {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-sidebar);
  background: color-mix(in srgb, var(--bg-color) 38%, #fff);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ai-agent-form .check-row:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 4%, #fff);
}
.ai-agent-form .check-row:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--card-border));
  color: var(--text-dark);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.ai-agent-form .check-row:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 1px;
}
.ai-agent-form .check-row input {
  flex: 0 0 auto;
  accent-color: var(--primary);
}
.ai-agent-knowledge-picker {
  gap: 10px;
}
.ai-agent-knowledge-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ai-agent-knowledge-picker-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ai-agent-knowledge-picker-head .form-hint {
  margin: 0;
}
.ai-agent-knowledge-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--card-border));
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  font-size: 11px;
  font-weight: 700;
}
.ai-agent-knowledge-search {
  position: relative;
  width: min(100%, 320px);
}
.ai-agent-knowledge-search > i {
  position: absolute;
  top: 50%;
  left: 11px;
  color: var(--text-muted);
  font-size: 12px;
  transform: translateY(-50%);
  pointer-events: none;
}
.ai-agent-knowledge-search input {
  width: 100%;
  padding-left: 31px;
}
.ai-agent-knowledge-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 220px;
  padding: 2px;
  overflow-y: auto;
}
.ai-agent-knowledge-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.ai-agent-knowledge-option:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 3%, #fff);
}
.ai-agent-knowledge-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.ai-agent-knowledge-option input {
  flex: 0 0 auto;
  accent-color: var(--primary);
}
.ai-agent-knowledge-option-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-agent-knowledge-option-copy strong {
  overflow: hidden;
  color: var(--text-dark);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-agent-knowledge-option-copy small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-agent-knowledge-option-check {
  display: flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: transparent;
  background: var(--card-border);
  font-size: 10px;
}
.ai-agent-knowledge-option:has(input:checked) .ai-agent-knowledge-option-check {
  color: #fff;
  background: var(--primary);
}
.ai-agent-knowledge-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 16px;
  border: 1px dashed var(--card-border);
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.ai-agent-knowledge-empty > i {
  color: var(--primary);
}
@media (max-width: 560px) {
  .ai-fallback-inline {
    gap: 5px;
    padding-left: 6px;
  }
  .ai-table-heading small {
    max-width: 52vw;
  }
  .ai-fallback-status {
    display: none;
  }
  .ai-knowledge-entries-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ai-knowledge-config-grid {
    grid-template-columns: 1fr;
  }
  .ai-knowledge-entry-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .ai-knowledge-entry-actions {
    width: 100%;
  }
  .ai-agent-knowledge-picker-head {
    flex-direction: column;
  }
  .ai-agent-form-grid--primary,
  .ai-agent-form-grid--handoff,
  .ai-agent-form-grid--metrics,
  .ai-agent-check-grid--tools,
  .ai-agent-check-grid--media {
    grid-template-columns: 1fr;
  }
  .ai-agent-form-grid--primary > .form-group:last-child {
    grid-column: auto;
  }
  .ai-agent-subsection-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .ai-agent-capability-card-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .ai-agent-add-rule {
    align-self: flex-start;
  }
  .ai-agent-rule-row,
  .ai-agent-rule-row.is-reason-only {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ai-agent-rule-row:not(.is-reason-only) .ai-agent-rule-field:first-child {
    grid-column: 1 / -1;
  }
}

/* Open create/edit forms live outside the table wrapper — allow the panel to scroll. */
.data-panel:has(> form),
.contacts-panel:has(> form) {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.data-panel:has(> form) > form,
.contacts-panel:has(> form) > form {
  flex: 0 0 auto;
}
.data-panel:has(> form) .admin-table-wrapper,
.contacts-panel:has(> form) .admin-table-wrapper {
  flex: 0 1 auto;
  min-height: 180px;
  max-height: min(42vh, 420px);
}
.data-panel-toolbar,
.contacts-panel .contacts-table-bar,
.data-panel > .btn-row,
.contacts-panel > .btn-row,
.data-panel > h3,
.contacts-panel > h3 {
  flex-shrink: 0;
  margin: 0 0 8px;
  padding: 0 0 8px;
}
.variables-search-toolbar {
  flex: 0 0 auto;
}
.variables-search-field,
.labels-search-field {
  position: relative;
  display: block;
  width: min(100%, 420px);
}
.variables-search-field > i,
.labels-search-field > i {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.variables-search-field .form-control,
.labels-search-field .form-control {
  width: 100%;
  height: var(--contacts-bar-h);
  padding-left: 34px;
}

.data-panel .admin-table-wrapper,
.contacts-panel .admin-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.data-panel .admin-table thead th,
.contacts-panel .admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f8fa;
  box-shadow: 0 1px 0 var(--card-border);
}

.data-panel:has(> form) .variables-table-wrapper,
.data-panel:has(> form) .labels-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Settings form pages: body scrolls; form cards hug. Table cards use contacts-panel. */
.settings-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}
.settings-body:has(.contacts-panel),
.settings-body:has(.data-panel) {
  overflow: hidden;
}
.settings-body > .section-card:not(.contacts-panel):not(.data-panel),
.settings-page > .section-card:not(.contacts-panel):not(.data-panel),
.settings-panel:not(.contacts-panel) {
  flex: 0 0 auto;
  height: auto;
}
.settings-body > .contacts-panel,
.settings-body > .data-panel,
.settings-page > .contacts-panel,
.settings-page > .data-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.settings-page > .ui-drawer,
.contacts-page > .ui-drawer,
.data-page > .ui-drawer {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.usage-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.usage-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.usage-row-head strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sidebar);
}
.usage-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.usage-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .2s ease;
}
.data-table-footer,
.contacts-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 0;
}
.per-page-control {
  align-items: center;
  gap: 8px;
}
.per-page-control > span {
  font-size: 13px;
  color: var(--text-muted);
}
.per-page-select {
  width: auto;
  min-width: 56px;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  outline: none;
  cursor: pointer;
}
.per-page-select:focus {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--card-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

/* ---- Shell ---- */
.app-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  background: transparent;
  position: relative;
  transition: grid-template-columns .32s cubic-bezier(.4, 0, .2, 1);
}

.sidebar {
  --sidebar-pad-x: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  height: 100%;
  padding: 12px var(--sidebar-pad-x) 10px;
  background: #fff;
  border-inline-end: 1px solid color-mix(in srgb, var(--card-border) 85%, transparent);
  box-shadow: 4px 0 24px rgba(80, 96, 160, 0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  z-index: 2;
  transition: padding .32s cubic-bezier(.4, 0, .2, 1);
}

[dir="rtl"] .sidebar {
  box-shadow: -4px 0 24px rgba(80, 96, 160, 0.04);
}

.sidebar-brand-toggle {
  display: flex;
  width: auto;
  align-self: stretch;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid var(--card-border);
  background: transparent;
  color: var(--text-dark, #111b21);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 calc(-1 * var(--sidebar-pad-x)) 6px;
  padding: 4px var(--sidebar-pad-x) 12px;
  min-width: 0;
  transition: gap .32s cubic-bezier(.4, 0, .2, 1), padding .32s cubic-bezier(.4, 0, .2, 1), margin .32s cubic-bezier(.4, 0, .2, 1), background .15s ease;
}

.sidebar-brand-toggle:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.sidebar-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
  transition: margin .22s ease, transform .22s ease;
}

.sidebar-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 28%, transparent);
  transition: margin .22s ease, transform .22s ease, border-radius .22s ease;
}

.sidebar-brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark, #111b21);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 11rem;
  opacity: 1;
  transform: translateX(0);
  flex: 0 1 auto;
  transition: opacity .22s ease, max-width .32s cubic-bezier(.4, 0, .2, 1), transform .32s cubic-bezier(.4, 0, .2, 1);
}

.nav-label,
.nav-item-label {
  overflow: hidden;
  white-space: nowrap;
  max-width: 14rem;
  opacity: 1;
  transition: opacity .2s ease, max-width .32s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .sidebar,
  .sidebar-brand-toggle,
  .sidebar-brand-name,
  .sidebar-brand-mark,
  .sidebar-brand-logo,
  .nav-label,
  .nav-item-label,
  .nav-item,
  .user-menu,
  .user-menu-trigger-row {
    transition: none;
  }
}

/* Inbox + Automation: icon rail by default (desktop) */
@media (min-width: 769px) {
  .app-shell.sidebar-rail {
    grid-template-columns: 64px minmax(0, 1fr);
    background: #F6ECE5;
  }
  .app-shell.sidebar-rail.sidebar-expanded {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  /* Compact only: inset rail + facing radii for automation / settings / contacts / accounts / dashboard. */
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.auto-shell),
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.sub-layout),
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.dash) {
    padding-block: 5px;
    padding-inline: 0 5px;
    gap: 10px;
    align-items: stretch;
  }
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.auto-shell) .sidebar,
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.sub-layout) .sidebar,
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.dash) .sidebar {
    height: auto;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
    /* Flat on the outer (inline-start) edge; round toward the content. */
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.auto-shell) .main-content,
  html[data-layout="compact"] .app-shell.sidebar-rail:has(.sub-layout) .main-content {
    padding: 0;
    gap: 0;
    min-height: 0;
  }

  .app-shell.sidebar-rail:not(.sidebar-expanded) .sidebar {
    --sidebar-pad-x: 8px;
    padding: 12px var(--sidebar-pad-x);
    align-items: stretch;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .sidebar-brand-toggle {
    justify-content: center;
    gap: 0;
    padding: 4px var(--sidebar-pad-x) 12px;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .sidebar-brand-name,
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-item-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-label {
    display: none;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-chevron,
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-submenu {
    display: none !important;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-item.active::before,
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-submenu::before {
    display: none;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .nav-item-toggle.is-open {
    background: color-mix(in srgb, var(--primary) 12%, #fff);
    color: var(--primary);
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu {
    padding-top: 8px;
    border-top-color: var(--card-border);
    overflow: visible;
    flex-shrink: 0;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu-trigger-row {
    display: flex;
    max-height: none;
    min-height: 42px;
    opacity: 1;
    padding: 2px;
    margin: 0;
    overflow: visible;
    pointer-events: auto;
    justify-content: center;
    background: transparent;
    border-color: transparent;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu-trigger {
    justify-content: center;
    padding: 4px;
    width: auto;
    flex: 0 0 auto;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu-trigger .user-menu-avatar {
    width: 34px;
    height: 34px;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu-meta,
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu-logout-icon-form {
    display: none;
  }

  /* Fly out beside the icon rail — escape sidebar stacking (backdrop-filter + z-index:2)
     so the panel paints above inbox-pane-body. */
  .app-shell.sidebar-rail:not(.sidebar-expanded):has(.user-menu.is-open) .sidebar {
    z-index: 10080;
    overflow: visible;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu-panel {
    position: absolute;
    inset-inline-start: calc(100% + 10px);
    inset-inline-end: auto;
    bottom: 0;
    width: 280px;
    min-width: 260px;
    z-index: 10081;
    overflow: visible;
  }
  .app-shell.sidebar-rail:not(.sidebar-expanded) .user-menu-panel .user-menu-meta {
    display: block !important;
  }
}

.sidebar-nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}

.main-content {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: transparent;
}

/* Automation shell: Classic keeps normal page padding; Compact uses shell inset. */
.main-content:has(.auto-shell) {
  padding: 16px 18px;
  gap: 14px;
}
html[data-layout="compact"] .main-content:has(.auto-shell) {
  padding: 10px 12px;
  gap: 6px;
}
.main-content:has(.auto-shell) > .auto-shell,
.main-content:has(.auto-shell) > div:has(.auto-shell) {
  flex: 1;
  min-height: 0;
}

.main-content:has(.inbox-shell) {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.main-content:has(.inbox-shell) > .header { display: none; }
.main-content:has(.inbox-shell) > .inbox-shell,
.main-content:has(.inbox-shell) > div:has(.inbox-shell) {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.hamburger-btn {
  display: none;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--primary);
  cursor: pointer;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.close-sidebar-btn {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-sidebar);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(18, 21, 26, 0.42);
}
.sidebar-backdrop.show { display: block; }
body.sidebar-open { overflow: hidden; touch-action: none; }

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 4px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  flex-shrink: 0;
}
.user-info h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 3px;
}
.user-info p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Bottom user account menu ---- */
.user-menu {
  position: relative;
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
  transition: padding .32s cubic-bezier(.4, 0, .2, 1), border-color .32s ease;
}

.user-menu-trigger-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  max-height: 72px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, padding .32s ease, border-width .32s ease;
}

.user-menu-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.user-menu-trigger:hover {
  background: rgba(255, 255, 255, .7);
}

.user-menu-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.user-menu-meta {
  min-width: 0;
  flex: 1;
}

.user-menu-meta strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.user-menu-meta span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-upgrade {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(18, 21, 26, .06);
}

.user-menu-upgrade:hover {
  border-color: rgba(24, 119, 242, .35);
  color: var(--primary);
}
.user-menu-logout-icon-form {
  margin: 0;
  flex-shrink: 0;
}
.user-menu-logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border-light);
  color: #B42318;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 21, 26, .06);
}
.user-menu-logout-icon:hover {
  border-color: rgba(180, 35, 24, .35);
  background: #fff5f5;
}

.user-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(18, 21, 26, .14);
  padding: 6px;
  overflow: hidden;
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.user-menu-header:hover {
  background: #F5F6F7;
}

.user-menu-chevron {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
}

.user-menu-section {
  padding: 4px 0;
  border-top: 1px solid var(--card-border);
}

.user-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--text-sidebar);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.user-menu-item i:first-child {
  width: 18px;
  text-align: center;
  color: var(--text-muted);
}

.user-menu-item:hover {
  background: #F5F6F7;
}

.user-menu-item.danger {
  color: #B42318;
}

.user-menu-item.danger i:first-child {
  color: #B42318;
}

.user-menu-logout-form {
  margin: 0;
}

.user-menu-sheet-backdrop {
  display: none;
}

.user-menu-sheet-handle {
  display: none;
}

body.user-menu-sheet-open {
  overflow: hidden;
  touch-action: none;
}

.nav-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #8B93A1;
  letter-spacing: 0.1em;
  font-weight: 750;
  margin: 4px 10px 8px;
  display: block;
}
.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-footer-nav {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text-sidebar);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, padding .32s cubic-bezier(.4, 0, .2, 1), gap .32s cubic-bezier(.4, 0, .2, 1);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
}
.nav-item i { width: 20px; font-size: 20px; text-align: center; flex-shrink: 0; }
.nav-item-label { min-width: 0; }
.nav-item:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}
.nav-item.active {
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-weight: 700;
}
.nav-item.active::before {
  content: "";
  display: block;
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: var(--primary);
}
.nav-dropdown {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-item-toggle {
  justify-content: flex-start;
}
.nav-item-toggle.is-open {
  color: var(--primary);
  background: transparent;
}
.nav-item-toggle.is-open:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.nav-chevron {
  margin-inline-start: auto;
  width: 12px !important;
  font-size: 10px;
  opacity: 0.55;
  transition: transform .18s ease;
}
.nav-chevron.is-open {
  transform: rotate(180deg);
}
.nav-submenu {
  list-style: none;
  position: relative;
  margin-block: 1px 4px;
  margin-inline: 18px 0;
  padding-block: 2px;
  padding-inline: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-submenu::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: color-mix(in srgb, var(--card-border) 85%, var(--primary) 15%);
}
.nav-subitem {
  padding: 8px 10px;
  font-weight: 600;
  font-size: 15px;
}

.header {
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.header-actions { margin-inline-start: auto; }

/* ---- Cards ---- */
.glass-card {
  background: color-mix(in srgb, #fff 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  border-radius: var(--radius-md);
  padding: 15px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.split-tabs { display: flex; flex-direction: column; gap: 6px; }
.tab-btn {
  width: auto;
  justify-content: flex-start;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 650;
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}
.tab-btn:hover { background: #f4f6f8; color: var(--text-dark); }
.tab-btn.active {
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
}
.tab-btn.active::before { display: none; }
.tab-btn i { width: 16px; text-align: center; }

/* ---- Forms ---- */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sidebar);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-group label.form-label-with-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-group > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: #fff;
  outline: none;
  font-size: 14px;
  color: var(--text-dark);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.14);
}
.form-control::placeholder { color: #9aa3ad; }
.form-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger);
  font-weight: 600;
}
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-sidebar);
}

/* ---- Badges / alerts / tables ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}
.badge.success { background: rgba(24, 119, 242, 0.12); color: #0D65D9; }
.badge.warning { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.badge.danger { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.badge.info { background: rgba(24, 119, 242, 0.10); color: var(--primary); }

.alert {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
.alert.success {
  background: rgba(24, 119, 242, 0.10);
  color: #0D65D9;
  border-color: rgba(24, 119, 242, 0.22);
}
.alert.info {
  background: rgba(24, 119, 242, 0.06);
  color: var(--text);
  border-color: rgba(24, 119, 242, 0.16);
}
.alert.error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.elog-json {
  margin: 6px 0 0;
  max-height: 280px;
  overflow: auto;
  background: #0f172a;
  color: #e2e8f0;
  padding: 14px;
  border-radius: 12px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Incoming webhook: JSON schema + wider mapping table */
.wh-config-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.wh-config-bar strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.wh-config-bar p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.wh-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 10px;
  align-items: stretch;
  margin-top: 6px;
}
.wh-map-layout.has-preview {
  grid-template-columns: minmax(0, 0.30fr) minmax(0, 0.42fr) minmax(160px, 0.28fr);
}
@media (max-width: 1100px) {
  .wh-map-layout.has-preview {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  }
  .wh-map-layout.has-preview .wh-map-preview {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .wh-map-layout,
  .wh-map-layout.has-preview {
    grid-template-columns: 1fr;
  }
}

.wh-map-input,
.wh-map-table-wrap,
.wh-map-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: min(75vh, 420px);
  max-height: min(75vh, 420px);
}

.wh-schema {
  margin-top: 0;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wh-schema-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--card-border);
  background: #f7f8fa;
  flex-shrink: 0;
}
.wh-schema-head strong {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.wh-schema-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wh-schema-views {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--card-border);
}
.wh-schema-view {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.wh-schema-view.active {
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
}
.wh-schema-body {
  flex: 1;
  max-height: none;
  overflow: auto;
  padding: 4px 0 6px;
  min-height: 0;
}
.wh-schema .elog-json {
  flex: 1;
  max-height: none !important;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  font-size: 12px;
}
.wh-schema .empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wh-schema-root {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-dark);
}
.wh-schema-root em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.wh-schema-root-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #ffe8e4;
  color: #e24b3b;
  font-size: 10px;
}
.wh-schema-node {
  padding-left: calc(8px + (var(--wh-depth, 0) * 12px));
}
.wh-schema-branch {
  border: none;
}
.wh-schema-branch > summary {
  list-style: none;
  cursor: pointer;
}
.wh-schema-branch > summary::-webkit-details-marker { display: none; }
.wh-schema-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  padding: 5px 10px 5px 0;
  color: var(--text-dark);
  border-radius: 6px;
}
.wh-schema-leaf {
  cursor: grab;
}
.wh-schema-leaf:active { cursor: grabbing; }
.wh-schema-leaf:hover,
.wh-schema-branch > summary:hover {
  background: #f4f6f8;
}
.wh-schema-leaf.is-dragging {
  opacity: 0.55;
  background: rgba(24, 169, 153, 0.1);
  box-shadow: 0 0 0 2px rgba(24, 169, 153, 0.28);
  transform: scale(1.01);
}
.wh-schema-type {
  width: 16px;
  text-align: center;
  font-size: 12px;
  color: #8a93a0;
  flex-shrink: 0;
}
.wh-schema-key {
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  min-width: 0;
}
.wh-schema-preview {
  margin-left: auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
.wh-map-table-scroll {
  flex: 1;
  max-height: none;
  min-height: 0;
  overflow: auto;
}
.wh-map-table.admin-table th,
.wh-map-table.admin-table td {
  padding: 4px 6px;
  font-size: 12px;
}
.wh-map-table .form-control {
  padding: 4px 6px;
  font-size: 12px;
  min-height: 0;
}
.wh-map-preview > label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted);
  margin: 0 0 6px;
  flex-shrink: 0;
}
.wh-tpl-preview {
  width: 100%;
  max-width: none;
  margin: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(7, 94, 84, 0.08), transparent 28%),
    #efeae2;
  overflow: auto;
}
.wh-tpl-preview .tpl-wa-chat {
  flex: 0 0 auto;
}
.wh-tpl-preview .tpl-wa-bubble {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  width: 100%;
  max-width: none;
}
.wh-tpl-preview .tpl-wa-body {
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-line;
  word-break: break-word;
}

.wh-endpoint-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.wh-endpoint-cell code {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wh-insights-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.wh-insights-metrics .sd-metric {
  margin: 0;
  padding: 12px;
}
.wh-insights-metrics .sd-metric .value {
  font-size: 22px;
}
.wh-insights-hits {
  margin: 0;
  font-size: 12px;
}
.wh-insights-heading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
}
.wh-insights-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.wh-insights-heading-row .wh-insights-heading {
  margin: 0;
}
.wh-insights-pagination {
  justify-content: space-between;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.wh-insights-pagination-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.wh-insights-chart {
  position: relative;
  height: 220px;
}
.wh-insights-table-wrap.admin-table-wrapper {
  overflow: visible;
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.wh-insights-table {
  margin: 0;
}
.wh-insights-table th,
.wh-insights-table td {
  font-size: 16px;
  white-space: nowrap;
}
.wh-insights-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.wh-insights-reason {
  width: 48px;
  text-align: center;
}
.wh-insights-reason .help-tip {
  justify-content: center;
}

/* Confirm modal must sit above the insights drawer */
.contacts-page > .ui-modal-backdrop {
  z-index: 100;
}
.contacts-page > .ui-modal {
  z-index: 101;
}
.wh-tpl-preview .tpl-wa-header,
.wh-tpl-preview .tpl-wa-footer {
  font-size: 11px;
  margin: 0 0 4px;
  white-space: pre-line;
}
.wh-tpl-preview .tpl-wa-media {
  height: 72px;
  margin-bottom: 6px;
}
.wh-tpl-preview .tpl-wa-time {
  margin-top: 4px;
  font-size: 10px;
}
.wh-drop-key.is-drop-target,
.wh-drop-message.is-drop-target {
  border-color: #18a999 !important;
  box-shadow: 0 0 0 2px rgba(24, 169, 153, 0.22);
  background: rgba(24, 169, 153, 0.06);
}

.admin-table-wrapper {
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--card-border);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--card-border);
  font-size: 16px;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-table thead th[style*="width:72px"],
.admin-table th.col-id,
.admin-table td.col-id,
.admin-table td:has(> code) {
  width: 1%;
  min-width: 6.5rem;
  overflow: visible;
  text-overflow: unset;
}
.admin-table td > code,
.admin-table td code {
  display: inline;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
  white-space: nowrap;
}
.admin-table td .badge {
  display: inline-block;
  vertical-align: middle;
}
.admin-table td .stack-tight {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.3;
}
.admin-table td .stack-tight strong {
  font-size: 16px;
  font-weight: 650;
  color: var(--text-dark);
}
.admin-table td .stack-tight small {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}
.admin-table td.col-url {
  color: var(--text-muted);
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-table td:has(.empty-state) {
  overflow: visible;
  white-space: normal;
  text-overflow: unset;
  text-align: center;
}
.admin-table.wh-map-table th,
.admin-table.wh-map-table td {
  overflow: visible;
  text-overflow: unset;
}
.admin-table td .btn-row {
  flex-wrap: nowrap;
  gap: 4px;
}
.admin-table td > .toggle-switch {
  display: inline-flex;
  vertical-align: middle;
}
.admin-table td .btn-sm {
  padding: 5px 8px;
  min-width: 30px;
  justify-content: center;
}
.admin-table td .flow-actions .btn-icon,
.admin-table td.col-actions .btn-icon {
  width: 30px;
  height: 30px;
}
.flow-id-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--primary) 6%, #f5f7fa);
  border-radius: 6px;
  padding: 3px 7px;
}
.admin-table th {
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.05em;
  background: #f7f8fa;
  padding-top: 9px;
  padding-bottom: 9px;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table code {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.progress-bar {
  height: 8px;
  background: rgba(92, 101, 112, 0.16);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar > div {
  height: 100%;
  width: 62%;
  background: var(--primary);
  border-radius: var(--radius-pill);
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color .15s;
}
.list-row:hover { border-color: #bcc5ce; }
.list-row strong { display: block; font-size: 15px; }
.list-row small { color: var(--text-muted); font-size: 12px; }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.swatch {
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 88px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 700;
}
.swatch span { opacity: .9; font-weight: 600; font-size: 11px; }

.token-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.token-table th,
.token-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
}
.token-table code {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
}

/* ---- Toast (bottom-right, high-contrast over light UI) ---- */
.toast-container {
  position: fixed;
  right: 20px;
  bottom: 22px;
  left: auto;
  top: auto;
  transform: none;
  z-index: 10050;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  --toast-accent: #1877F2;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  width: auto;
  min-width: 220px;
  max-width: 320px;
  background: #111b21;
  color: #f7f8fa;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--toast-accent);
  box-shadow:
    0 16px 40px rgba(11, 20, 26, 0.32),
    0 2px 8px rgba(11, 20, 26, 0.18);
  border-radius: 12px;
  padding: 12px 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: toastSlideIn .34s cubic-bezier(.2, .9, .2, 1) both;
}
.toast.is-leaving {
  animation: toastSlideOut .22s ease forwards;
}
.toast.toast-success { --toast-accent: #00a884; }
.toast.toast-error { --toast-accent: #ef4444; }
.toast.toast-warning { --toast-accent: #f59e0b; }
.toast.toast-info { --toast-accent: #53bdeb; }

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(28px) translateY(10px) scale(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toastSlideOut {
  to {
    opacity: 0;
    transform: translateX(18px) translateY(6px) scale(.97);
  }
}
.toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--toast-accent) 22%, transparent);
  color: var(--toast-accent);
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 1px;
}
.toast-title {
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 2px;
}
.toast-msg {
  font-size: 12.5px;
  color: rgba(247, 248, 250, 0.88);
  line-height: 1.35;
  font-weight: 500;
}
.toast-body { min-width: 0; flex: 1; padding-top: 2px; }
.toast-close {
  margin-left: 2px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  color: rgba(247, 248, 250, 0.65);
  font-size: 15px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.toast-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--toast-accent);
  animation: toastProgress linear forwards;
  animation-duration: var(--toast-life, 3.6s);
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.nc-wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--shadow-lg);
  transition: background .15s;
}
.nc-wa-fab:hover { background: #096652; }
.nc-wa-fab i { font-size: 26px; }

.kit-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(24, 119, 242, 0.06);
  border: 1px solid rgba(24, 119, 242, 0.16);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
}
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---- Auth (simple centered) ---- */
body.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-color);
  background-image:
    radial-gradient(720px 420px at 50% -10%, var(--atmosphere-a, color-mix(in srgb, var(--primary) 18%, transparent)), transparent 60%),
    radial-gradient(560px 360px at 90% 100%, var(--atmosphere-b, color-mix(in srgb, var(--secondary) 14%, transparent)), transparent 55%);
}

.auth-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: color-mix(in srgb, #fff 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(18, 21, 26, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 28px 26px 24px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.auth-brand .mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.auth-brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.auth-card-head {
  margin-bottom: 18px;
}
.auth-card-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 550;
  color: var(--text-muted);
}

.auth-form .form-group { margin-bottom: 14px; }
.auth-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
  font-size: 13px;
}
.auth-form-meta a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 550;
  white-space: nowrap;
}
.auth-form-meta a:hover { text-decoration: underline; }
.auth-submit {
  width: 100%;
  justify-content: center;
}

.auth-footer {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.auth-footer a {
  color: var(--primary);
  font-weight: 550;
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* ---- Page header / help / empty ---- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.page-header .titles h1 {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
.page-header .titles p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 560px;
}
.page-header .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-tip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.help-tip .help-tip-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
  flex-shrink: 0;
  padding: 0;
}
.help-tip .help-tip-btn:hover,
.help-tip:hover .help-tip-btn,
.help-tip:has(.help-tip-body.is-open) .help-tip-btn {
  background: var(--primary);
  color: #fff;
}
.help-tip .help-tip-body {
  position: fixed;
  z-index: 400;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  background: var(--text-dark);
  color: #e8ebef;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: normal;
  text-align: left;
  transform: translateX(-50%);
  transition: opacity .15s, visibility .15s;
}
.help-tip .help-tip-body.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
}
.help-tip .help-tip-body.is-open.is-above {
  transform: translate(-50%, -100%);
}
.help-tip .help-tip-body::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--text-dark);
}
.help-tip .help-tip-body.is-above::before {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: var(--text-dark);
}
.form-group label.form-label-with-tip .help-tip {
  margin-left: 2px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state > i,
.empty-state .wa-list-empty-icon i {
  font-size: 34px;
  color: #c5ccd4;
  margin: 0 auto 12px;
  display: block;
  width: fit-content;
  text-align: center;
}
.empty-state-illustration {
  display: block;
  width: min(280px, 70%);
  height: auto;
  margin: 0 auto 16px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.empty-state h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.empty-state p {
  font-size: 13px;
  max-width: 380px;
  margin: 0 auto 14px;
}
.empty-state .btn i {
  font-size: inherit;
  color: inherit;
  margin: 0;
  display: inline;
}

.skeleton {
  background: linear-gradient(90deg, #e4e8ec 25%, #f4f6f8 37%, #e4e8ec 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: skeletonShimmer 1.3s ease infinite;
}
@keyframes skeletonShimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* ---- Inbox ---- */
.inbox-shell {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.inbox-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 305px;
  gap: 0;
  flex: 1;
  height: 100%;
  min-height: 0;
  background: #fff;
  overflow: hidden;
}
.inbox-layout.no-details,
.inbox-layout.empty-thread {
  grid-template-columns: 300px 1fr;
}
.inbox-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.inbox-pane.list-pane {
  border-right: 1px solid var(--card-border);
  background: #f7f8fa;
}
.inbox-pane.thread-pane { background: var(--chat-paper); }
.inbox-pane.contact-pane {
  border-left: 1px solid var(--card-border);
  background: #fff;
}
.inbox-pane-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: #fff;
}
.inbox-list-header {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.inbox-brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.inbox-brand-actions { display: flex; gap: 6px; }
.inbox-counts {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}
.inbox-counts .dot { margin: 0 4px; }
.inbox-pane-header h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  font-family: var(--font-display);
}
.inbox-pane-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.inbox-search,
.inbox-channel,
.thread-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: #eef1f4;
  font-size: 13px;
  outline: none;
}
.inbox-search:focus,
.thread-search:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}
.inbox-channel { padding: 8px 12px; }
.thread-search { max-width: 160px; padding: 7px 10px; }
.inbox-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.inbox-filter {
  border: none;
  background: #e8ebef;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.inbox-filter.active {
  background: var(--primary);
  color: #fff;
}
.thread-header { flex-wrap: wrap; }
.thread-header .thread-title { flex: 1; min-width: 140px; }
.thread-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.thread-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.thread-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.window-open { color: var(--primary); font-weight: 700; }
.window-closed { color: #b45309; font-weight: 700; }

.inbox-empty-thread {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.inbox-empty-thread > i,
.inbox-empty-thread .wa-empty-illustration i {
  font-size: 48px;
  color: var(--secondary);
  margin-bottom: 4px;
}
.inbox-empty-thread .btn i {
  font-size: 12px;
  line-height: 1;
  margin: 0;
  color: inherit;
}
.inbox-empty-thread h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  font-family: var(--font-display);
}

.contact-hero { text-align: center; }
.contact-hero .conv-avatar.lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
  margin: 0 auto 10px;
}
.contact-hero strong { display: block; font-size: 16px; }
.muted { font-size: 13px; color: var(--text-muted); }

.conv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.conv-tags .tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: #e8ebef;
  color: #5C6570;
}
.conv-priority { font-size: 10px; margin-right: 3px; color: var(--warning); }
.conv-priority.urgent { color: var(--danger); }
.conv-item.has-unread .name { font-weight: 800; }

.inbox-menu { position: relative; }
.inbox-menu-panel {
  position: absolute;
  inset-inline-end: 0;
  right: auto;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.inbox-menu-panel.conv-more-panel,
.conv-more-panel.inbox-menu-panel {
  /* Teleported fixed panels use inline left/top — never pin to right. */
  position: fixed;
  inset-inline-end: auto;
  right: auto;
}
.inbox-menu-panel button {
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sidebar);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-menu-panel button:hover {
  background: rgba(24, 119, 242, 0.08);
  color: var(--primary);
}

.quick-replies { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-reply {
  border: 1px solid var(--card-border);
  background: #f7f8fa;
  color: var(--text-sidebar);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.quick-reply:hover {
  border-color: rgba(24, 119, 242, 0.35);
  color: var(--primary);
  background: rgba(24, 119, 242, 0.06);
}

.template-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #f7f8fa;
  border: 1px solid var(--card-border);
}
.template-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Inbox: send-template composer panel */
.tpl-send-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  height: min(420px, calc(100dvh - 160px));
  max-height: min(420px, calc(100dvh - 160px));
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(17, 27, 33, 0.1);
  box-shadow: 0 8px 22px rgba(17, 27, 33, 0.08);
}
.tpl-send-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(17, 27, 33, 0.08);
  background: rgba(18, 140, 126, 0.06);
  flex-shrink: 0;
  min-height: 36px;
}
.tpl-send-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tpl-send-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(18, 140, 126, 0.14);
  color: #0b6b5f;
  font-size: 14px;
}
.tpl-send-head strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-send-head .tpl-send-title span:last-child,
.tpl-send-head .tpl-send-title > div > span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}
.tpl-send-body {
  display: grid;
  grid-template-columns: minmax(200px, 1.15fr) minmax(220px, 1.15fr) minmax(200px, 0.72fr);
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.tpl-send-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid rgba(17, 27, 33, 0.08);
}
.tpl-send-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1;
  padding: 8px 8px 0;
  border-right: 1px solid rgba(17, 27, 33, 0.08);
  overflow: hidden;
}
.tpl-send-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 34px;
  border-radius: 9px;
  background: #f0f2f5;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.tpl-send-search:focus-within {
  background: #fff;
  border-color: rgba(18, 140, 126, 0.35);
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.1);
}
.tpl-send-search i {
  color: #8696a0;
  font-size: 12px;
}
.tpl-send-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: var(--text-dark);
}
.tpl-send-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0 2px 8px 0;
  overflow: auto;
  min-height: 0;
  flex: 1;
  max-height: none;
}
.tpl-send-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 10px;
  padding: 8px 9px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background .12s, border-color .12s;
}
.tpl-send-item:hover {
  background: #f7f8fa;
}
.tpl-send-item.is-active {
  background: rgba(18, 140, 126, 0.1);
  border-color: rgba(18, 140, 126, 0.28);
}
.tpl-send-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tpl-send-item-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-send-item-lang {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #8696a0;
}
.tpl-send-item-snip {
  font-size: 12px;
  color: #667781;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpl-send-item-meta {
  font-size: 11px;
  color: #8696a0;
}
.tpl-send-list-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.tpl-send-fill {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1;
  padding: 8px 10px;
  border-right: 1px solid rgba(17, 27, 33, 0.08);
  background: #fafbfc;
  overflow: auto;
  max-height: none;
}
.tpl-send-fill.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  max-height: none;
  text-align: center;
}
.tpl-send-fill.is-empty i {
  color: #128c7e;
  opacity: 0.7;
}
.tpl-send-fill.is-empty p { margin: 0; }
.tpl-send-fill-head {
  margin-bottom: 8px;
}
.tpl-send-fill-head strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.tpl-send-fill-head span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #8696a0;
}
.tpl-send-vars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tpl-send-var label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.tpl-send-var label code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #0b6b5f;
  background: rgba(18, 140, 126, 0.12);
  border-radius: 999px;
  padding: 2px 7px;
}
.tpl-send-var .form-control {
  height: 34px;
  border-radius: 9px;
  font-size: 13px;
}
.tpl-send-empty-vars {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.tpl-send-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.tpl-send-media-head strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.tpl-send-media-head span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #8696a0;
}
.tpl-send-media-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  padding: 16px 12px;
  border-radius: 12px;
  border: 1.5px dashed rgba(18, 140, 126, 0.35);
  background: rgba(18, 140, 126, 0.04);
  cursor: pointer;
  text-align: center;
  color: #667781;
  transition: border-color .12s, background .12s;
}
.tpl-send-media-drop:hover {
  border-color: rgba(18, 140, 126, 0.55);
  background: rgba(18, 140, 126, 0.08);
}
.tpl-send-media-drop i {
  font-size: 22px;
  color: #128c7e;
  margin-bottom: 4px;
}
.tpl-send-media-drop strong {
  font-size: 13px;
  color: var(--text-dark);
}
.tpl-send-media-drop span {
  font-size: 11px;
}
.tpl-send-media-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(17, 27, 33, 0.1);
}
.tpl-send-media-file img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.tpl-send-media-glyph {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(18, 140, 126, 0.12);
  color: #0b6b5f;
  font-size: 18px;
}
.tpl-send-media-meta {
  flex: 1;
  min-width: 0;
}
.tpl-send-media-meta strong {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-send-media-meta span {
  font-size: 11px;
  color: #8696a0;
}
.tpl-send-media-loading {
  font-size: 11px;
  color: #128c7e;
}
.tpl-send-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(17, 27, 33, 0.08);
  background: #fff;
  flex-shrink: 0;
}
.tpl-send-btn {
  min-width: 110px;
  justify-content: center;
  background: #128c7e;
  border-color: #128c7e;
}
.tpl-send-btn:hover:not(:disabled) {
  background: #0f7a6e;
  border-color: #0f7a6e;
}
.tpl-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tpl-send-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(7, 94, 84, 0.08), transparent 30%),
    #efeae2;
  overflow: auto;
}
.tpl-send-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #667781;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.tpl-send-preview .tpl-wa-phone,
.tpl-wa-phone-compact {
  width: 100%;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.tpl-send-preview .tpl-wa-bubble,
.tpl-send-preview .tpl-wa-buttons,
.tpl-wa-phone-compact .tpl-wa-bubble,
.tpl-wa-phone-compact .tpl-wa-buttons {
  width: 100%;
  max-width: none;
  align-self: stretch;
}
.tpl-send-preview-empty {
  flex: 1;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: #667781;
  font-size: 12px;
  line-height: 1.4;
  border: 1px dashed rgba(17, 27, 33, 0.12);
}
.tpl-send-preview-empty i {
  font-size: 28px;
  color: #25d366;
}
.tpl-send-preview-empty p { margin: 0; max-width: 16em; }
@media (max-width: 900px) {
  .tpl-send-panel {
    height: min(70dvh, 520px);
    max-height: min(70dvh, 520px);
  }
  .tpl-send-body {
    grid-template-columns: 1fr;
  }
  .tpl-send-picker,
  .tpl-send-fill {
    border-right: 0;
    border-bottom: 1px solid rgba(17, 27, 33, 0.08);
  }
  .tpl-send-picker { max-height: 160px; }
  .tpl-send-fill { max-height: 180px; }
  .tpl-send-list { max-height: 120px; }
  .tpl-send-preview {
    max-height: 220px;
  }
}

.flow-name-cell {
  max-width: 28rem;
}
.flow-name-cell > strong,
.flow-name-cell .stack-tight strong,
.flow-name-cell .stack-tight small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.admin-table th.col-actions,
.admin-table td.col-actions {
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}
.admin-table td.col-actions .table-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
}
.window-banner .linkish {
  border: none;
  background: none;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 6px;
  font-size: inherit;
}
.composer-hint {
  margin-left: auto;
  font-size: 11px;
  color: #8a939e;
  font-weight: 600;
}
.composer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.priority-row { display: flex; flex-wrap: wrap; gap: 6px; }
.priority-chip {
  border: 1px solid var(--card-border);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
}
.priority-chip.active.low {
  background: #f1f3f5;
  color: #3D4654;
  border-color: #c5ccd4;
}
.priority-chip.active.normal {
  background: rgba(24, 119, 242, 0.10);
  color: var(--primary);
  border-color: rgba(24, 119, 242, 0.30);
}
.priority-chip.active.high {
  background: #fffbeb;
  color: #d97706;
  border-color: #fcd34d;
}
.priority-chip.active.urgent {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

.inbox-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(18, 21, 26, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.inbox-modal {
  width: min(440px, 100%);
  max-height: min(560px, 90%);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.inbox-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
}
.inbox-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font-display);
}
.inbox-modal .inbox-search {
  margin: 12px 16px;
  width: auto;
}
.inbox-modal-list {
  overflow-y: auto;
  padding: 0 8px 12px;
}
.inbox-modal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}
.inbox-modal-item:hover { background: #f1f3f5; }
.inbox-modal-item strong { display: block; font-size: 14px; }

.conv-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #eef1f4;
  transition: background .15s;
  position: relative;
}
.conv-item:hover { background: #f0faf6; }
.conv-item.active { background: rgba(24, 119, 242, 0.08); }
.conv-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
}
.conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.conv-meta { flex: 1; min-width: 0; }
.conv-meta .top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.conv-meta .name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-meta .time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.conv-meta .preview {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-thread {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #e4f0ec;
  background-image:
    radial-gradient(480px 280px at 10% 0%, rgba(20, 184, 166, 0.14), transparent 60%),
    radial-gradient(420px 260px at 100% 10%, rgba(56, 189, 248, 0.12), transparent 55%),
    linear-gradient(180deg, #eaf4f1, #e8eef5);
}
.chat-thread:not(.is-ready) {
  visibility: hidden;
}
.chat-date {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(92, 101, 112, 0.14);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.chat-bubble {
  max-width: 68%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: var(--shadow);
  position: relative;
  word-wrap: break-word;
}
.chat-bubble.incoming {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--card-border);
  border-bottom-left-radius: 4px;
}
.chat-bubble.outgoing {
  align-self: flex-end;
  color: var(--text-dark);
  border-bottom-right-radius: 4px;
  background: var(--chat-out);
  border: 1px solid rgba(24, 119, 242, 0.12);
}
.chat-bubble.note {
  align-self: center;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  max-width: 80%;
}
.chat-bubble .bubble-meta {
  font-size: 10px;
  margin-top: 5px;
  opacity: .75;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}
.chat-bubble .message-source-ai {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-bubble.incoming .bubble-meta { color: var(--text-muted); }
.chat-bubble .tick.read { color: var(--secondary); }
.chat-media {
  border-radius: var(--radius-md);
  max-width: 100%;
  display: block;
  margin-bottom: 6px;
}

.chat-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--card-border);
  padding: 12px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-composer .composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-composer textarea {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 300px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.chat-composer textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}
.composer-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef1f4;
  color: var(--text-sidebar);
  font-size: 16px;
  transition: background .15s, color .15s;
}
.composer-btn:hover {
  background: #e2e6ea;
  color: var(--primary);
}
.composer-btn.send {
  background: var(--primary);
  color: #fff;
}
.composer-btn.send:hover { background: #096652; }
.composer-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.window-banner {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.28);
}
.window-banner.open {
  background: rgba(24, 119, 242, 0.12);
  color: #0D65D9;
  border-color: rgba(24, 119, 242, 0.28);
}

.contact-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-panel .panel-block h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(24, 119, 242, 0.10);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}
.chip button {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font-size: 11px;
}

/* Role permission checklist */
.perm-group {
  padding: 12px 0;
  border-bottom: 1px solid var(--card-border);
}
.perm-group:last-child { border-bottom: none; }
.perm-group-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sidebar);
  text-transform: none;
  letter-spacing: 0;
}
.perm-group-head input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
}
.perm-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.perm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-sidebar);
  text-transform: none;
  letter-spacing: 0;
}
.perm-check input {
  margin-top: 2px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  accent-color: var(--primary);
}
@media (max-width: 560px) {
  .perm-check-grid { grid-template-columns: 1fr; }
}

/* Contact create/edit drawer — scalable labels & variables */
.contact-drawer-form { display: flex; flex-direction: column; gap: 4px; }
.contact-drawer-section {
  margin: 10px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2, rgba(15, 23, 42, 0.02));
  overflow: hidden;
}
.contact-drawer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
}
.contact-drawer-section-head strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.contact-drawer-count {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.contact-drawer-filter {
  margin: 0 12px 10px;
  width: calc(100% - 24px);
}
.contact-picker-list,
.contact-var-list {
  max-height: 220px;
  overflow: auto;
  border-top: 1px solid var(--border);
  padding: 4px 0;
}
.contact-picker-row {
  display: grid;
  grid-template-columns: 18px 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 12px;
  cursor: pointer;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
}
.contact-picker-row:hover { background: rgba(24, 119, 242, 0.06); }
.contact-picker-row input { margin: 0; }
.contact-picker-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.contact-picker-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-picker-id {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.contact-var-row {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
}
.contact-var-row + .contact-var-row { border-top: 1px solid rgba(15, 23, 42, 0.05); }
.contact-var-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  text-transform: none;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.contact-var-label code {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-var-row .form-control { margin: 0; }
.contact-drawer-empty {
  margin: 0;
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 560px) {
  .contact-var-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---- Sub-layouts ---- */
.sub-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 20px;
  min-height: 0;
  flex: 1;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
}
.sub-layout-dense { gap: 12px; }

html[data-layout="compact"] .sub-layout {
  gap: 0;
  background: color-mix(in srgb, #fff 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-layout="compact"] .sub-layout .sub-sidebar {
  margin-right: 0;
  padding: 10px 10px 12px;
}
html[data-layout="compact"] .sub-layout .sub-body {
  padding: 10px 14px 12px;
}
html[data-layout="compact"] .sub-layout .contacts-page .contacts-panel:not(.is-expanded),
html[data-layout="compact"] .sub-layout .data-page .contacts-panel,
html[data-layout="compact"] .sub-layout .data-page .data-panel,
html[data-layout="compact"] .sub-layout .contacts-page > .section-card.contacts-panel,
html[data-layout="compact"] .sub-layout .settings-page > .section-card.contacts-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* Form settings pages must scroll (Account details, branding, etc.). */
.settings-page:not(:has(.contacts-panel)):not(:has(.data-panel)):not(:has(.settings-body)),
.contacts-page:not(:has(.contacts-panel)):not(:has(.data-panel)) {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sub-body:has(.settings-page) > .settings-page:not(:has(.contacts-panel)):not(:has(.data-panel)),
.sub-body:has(.contacts-page) > .contacts-page:not(:has(.contacts-panel)):not(:has(.data-panel)) {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Keep the directory rail fixed; only the page body scrolls */
.main-content:has(.sub-layout) {
  overflow: hidden;
}
.main-content:has(.sub-layout) > .sub-layout {
  flex: 1;
  min-height: 0;
}

/* Automation 2-column shell: one workspace, tools | config */
.auto-shell {
  display: grid;
  grid-template-columns: minmax(210px, 236px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  overflow: hidden;
  background: color-mix(in srgb, #fff 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auto-shell-dense {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Classic: Automation matches Settings/Contacts — full sidebar page, no floating shell card. */
html[data-layout="classic"] .auto-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 20px;
  overflow: hidden;
}
html[data-layout="classic"] .auto-col-tools {
  padding: 0 14px 8px 0;
  border-right: 1px solid var(--card-border);
  background: transparent;
}
html[data-layout="classic"] .auto-number-picker {
  margin: 0 0 10px;
}
html[data-layout="classic"] .auto-col-config {
  padding: 2px 0 0;
  overflow: hidden;
}
html[data-layout="classic"] .auto-col-config .contacts-page .contacts-panel:not(.is-expanded),
html[data-layout="classic"] .auto-col-config .data-page .contacts-panel,
html[data-layout="classic"] .auto-col-config .data-page .data-panel,
html[data-layout="classic"] .auto-col-config .contacts-page > .section-card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: 15px;
  margin: 0;
}
html[data-layout="classic"] .auto-col-config .contacts-page:not(:has(.contacts-panel)):not(:has(.data-panel)),
html[data-layout="classic"] .auto-col-config .settings-page:not(:has(.contacts-panel)):not(:has(.data-panel)) {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.auto-col {
  min-width: 0;
}
.auto-col-tools {
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 10px 12px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--card-border);
  border-radius: 0;
  box-shadow: none;
}
.auto-tools-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.auto-number-picker {
  position: relative;
  flex-shrink: 0;
  z-index: 4;
  margin: 0 0 8px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, #25D366 16%, var(--card-border));
  border-radius: 8px;
  background: color-mix(in srgb, #25D366 8%, #f8fbf9);
}
.auto-number-trigger {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font: inherit;
  color: inherit;
  padding: 4px;
  border-radius: 6px;
}
.auto-number-trigger:hover,
.auto-number-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, #25D366 8%, #fff);
  border-color: transparent;
  box-shadow: none;
  color: var(--text-dark);
}
.auto-number-trigger .auto-number-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 15px;
}
.auto-number-trigger .auto-number-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.auto-number-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .18s ease;
}
.auto-number-chevron.is-open {
  transform: rotate(180deg);
}
.auto-number-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 5;
}
.auto-col-head {
  padding: 2px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--card-border);
}
.auto-col-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  color: var(--text-dark);
  letter-spacing: -0.015em;
}
.auto-col-head span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.auto-col-empty {
  padding: 8px 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.auto-col-empty .btn { margin-top: 6px; }

.auto-number-list,
.auto-tool-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.auto-tool-group { margin-top: 0; }
.auto-tool-group:first-of-type { margin-top: 0; }
.auto-tool-label {
  display: none;
}
.auto-number-label {
  display: block;
  margin: 0 4px 2px;
}

.auto-number-link,
.auto-tool-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-sidebar);
  border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.auto-number-link {
  gap: 6px;
  padding: 5px 6px;
}
.auto-tool-link {
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
}
.auto-number-link:hover,
.auto-tool-link:hover {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text-dark);
  border-color: rgba(210, 216, 222, 0.85);
}
.auto-number-link.is-active {
  background: #fff;
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--card-border));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 10%, transparent);
}
.auto-tool-link.is-active {
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: none;
}
.auto-number-mark,
.auto-tool-ico {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef1f4;
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.auto-number-mark {
  width: 24px;
  height: 24px;
  font-size: 13px;
  border-radius: 7px;
}
.auto-tool-ico {
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-radius: 8px;
}
.auto-number-link.is-active .auto-number-mark {
  background: rgba(37, 211, 102, 0.16);
  color: #128C7E;
}
.auto-tool-link.is-active .auto-tool-ico {
  background: color-mix(in srgb, var(--primary) 16%, #fff);
  color: var(--primary);
}
.auto-tool-link.is-active .auto-tool-title,
.auto-tool-link.is-active .auto-tool-hint {
  color: var(--primary);
}
.auto-tool-link.is-disabled,
.ao-stat.is-disabled,
.ao-shortcut.is-disabled {
  opacity: 0.55;
  cursor: pointer;
  user-select: none;
}
.auto-tool-link.is-disabled {
  width: 100%;
  background: transparent;
  font: inherit;
  text-align: left;
}
.ao-stat.is-disabled,
.ao-shortcut.is-disabled {
  font: inherit;
  text-align: left;
  width: 100%;
}
.auto-number-copy,
.auto-tool-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.auto-tool-copy {
  gap: 0;
}
.auto-number-title,
.auto-tool-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto-tool-title {
  font-size: 15px;
  line-height: 1.25;
}
.auto-number-hint,
.auto-tool-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
}
.auto-number-hint {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.auto-number-badge {
  font-size: 11px;
  font-weight: 650;
  color: var(--primary);
  background: rgba(24, 119, 242, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.auto-col-config {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 12px;
  overflow: hidden;
}
.auto-col-config.sub-body {
  font-size: 15px;
  padding-top: 10px;
  gap: 10px;
}
.auto-col-config .contacts-page .contacts-panel:not(.is-expanded),
.auto-col-config .data-page .contacts-panel,
.auto-col-config .data-page .data-panel,
.auto-col-config .contacts-page > .section-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.auto-col-config .contacts-page:not(:has(.contacts-panel)):not(:has(.data-panel)),
.auto-col-config .settings-page:not(:has(.contacts-panel)):not(:has(.data-panel)),
.auto-col-config > .stack:not(:has(.contacts-panel)):not(:has(.data-panel)) {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.auto-col-config.sub-body .form-control,
.auto-col-config.sub-body select,
.auto-col-config.sub-body textarea {
  font-size: 15px;
}
.auto-col-config.sub-body .form-group label,
.auto-col-config.sub-body label {
  font-size: 13px;
}
.auto-col-config.sub-body .btn-sm {
  font-size: 14px;
}
.auto-col-config.sub-body .seg-tab {
  font-size: 15px;
}
.auto-col-config.sub-body .wh-schema-head strong,
.auto-col-config.sub-body .wh-map-preview > label {
  font-size: 14px;
}
.auto-col-config.sub-body .wh-schema-key {
  font-size: 15px;
}
.auto-col-config.sub-body .wh-map-table.admin-table th,
.auto-col-config.sub-body .wh-map-table.admin-table td,
.auto-col-config.sub-body .wh-map-table .form-control {
  font-size: 14px;
}

.auto-overview-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Automation Overview (config column) */
.auto-overview { gap: 18px; }
.ao-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #25D366 12%, #fff), #fff 55%),
    #fff;
  border: 1px solid color-mix(in srgb, #25D366 18%, var(--card-border));
  box-shadow: var(--shadow);
}
.ao-hero-mark {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(145deg, #25D366, #128C7E);
  color: #fff;
  font-size: 30px;
  box-shadow: 0 10px 22px rgba(37, 211, 102, 0.28);
}
.ao-hero-copy { min-width: 0; flex: 1; }
.ao-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ao-hero-top h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.ao-hero-phone {
  margin: 6px 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.ao-hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.ao-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.ao-hero-meta span + span::before {
  content: "·";
  margin: 0 8px;
  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
}
.ao-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--text-muted);
}
.ao-pill-green { background: rgba(37, 211, 102, 0.14); color: #0f766e; }
.ao-pill-yellow, .ao-pill-orange { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.ao-pill-red { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.ao-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}
.ao-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .14s ease;
  min-width: 0;
}
.ao-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--card-border));
}
.ao-stat-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
  font-size: 14px;
  margin-bottom: 4px;
}
.ao-stat strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  line-height: 1.1;
}
.ao-stat span:last-child {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.ao-ids { padding: 18px 20px; }
.ao-section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ao-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 12px;
  align-items: stretch;
}
.ao-id-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ao-id {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 4%, #f7f9fb);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.ao-id span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.ao-id-value {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ao-id code {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-dark);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ao-id-copy {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ao-id-copy:hover {
  background: #fff;
  color: var(--primary);
}
.ao-shortcuts { padding: 18px 20px; }
.ao-shortcut-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ao-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: #fff;
  text-decoration: none;
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 600;
}
.ao-shortcut:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--card-border));
  color: var(--primary);
}
.ao-shortcut .ao-stat-ico {
  width: 30px;
  height: 30px;
  margin-bottom: 0;
  font-size: 13px;
}
.ao-hint {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .ao-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ao-split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ao-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ao-hero { padding: 16px; }
  .ao-shortcut-list { grid-template-columns: 1fr; }
}

.sub-sidebar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 4px 8px 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  top: auto;
  align-self: stretch;
  height: 100%;
  max-height: none !important;
  min-height: 0;
  border-right: 1px solid var(--card-border);
  padding-right: 14px;
  margin-right: 2px;
}

.sub-sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--card-border);
}
.sub-sidebar-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
  font-size: 16px;
  flex-shrink: 0;
}
.sub-sidebar-head strong {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sub-sidebar-head span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.sub-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.sub-nav-group:first-of-type { margin-top: 8px; }

.sub-sidebar .nav-label {
  margin: 0 8px 6px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a93a0;
}

.sub-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-sidebar);
  transition: background .14s, color .14s;
  border: 1px solid transparent;
}
.sub-nav-item:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-dark);
  border-color: rgba(210, 216, 222, 0.7);
}
.sub-nav-item.active {
  background: #fff;
  color: var(--primary);
  border-color: var(--card-border);
  box-shadow: var(--shadow);
}
.sub-nav-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef1f4;
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
}
.sub-nav-item.active .sub-nav-ico {
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
}
.sub-nav-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sub-nav-title {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-nav-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Settings: larger sidebar options + page seg tabs */
.settings-layout .sub-nav-item {
  gap: 12px;
  padding: 10px 10px;
}
.settings-layout .sub-nav-ico {
  width: 36px;
  height: 36px;
  font-size: 15px;
  border-radius: 9px;
}
.settings-layout .sub-nav-title {
  font-size: 15px;
}
.settings-layout .sub-nav-hint {
  font-size: 12.5px;
}
.settings-layout .seg-tab {
  font-size: 15px;
  padding: 10px 16px;
  gap: 9px;
}
.settings-layout .seg-tab i {
  font-size: 14px;
}

/* Legacy class kept for any leftover markup */
.sub-sidebar .nav-item {
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.sub-body {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sub-body:has(.contacts-page),
.sub-body:has(.data-page),
.sub-body:has(.settings-page) {
  overflow: hidden;
  gap: 0;
}
.sub-body:has(.contacts-page) > *,
.sub-body:has(.data-page) > *,
.sub-body:has(.settings-page) > * {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.seg-tabs-row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}
.seg-tabs-row > .seg-tabs {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
}
.seg-tabs-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.seg-tabs-actions .btn {
  height: 95%;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 12px;
}

/* Horizontal segment tabs (Settings account config, etc.) */
.seg-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
}
.seg-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.seg-tab:hover { color: var(--text-dark); background: #f4f6f8; }
.seg-tab.active {
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
}
.seg-tab i { font-size: 12px; }

.settings-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
.settings-panel-title i { color: var(--primary); }

.google-cloud-card {
  padding: 10px 12px;
}
.google-cloud-card .settings-panel-title {
  margin: 0 0 10px;
  font-size: 14px;
  gap: 8px;
}
.google-cloud-fields .grid-2 {
  gap: 10px 12px;
}
.google-cloud-fields .form-group {
  margin-bottom: 0;
}
.google-cloud-fields .form-group label {
  margin-bottom: 4px;
  font-size: 12px;
}
.google-cloud-fields .form-control {
  padding: 7px 10px;
  font-size: 13px;
  min-height: 36px;
  height: 36px;
}
.google-cloud-secret-field.wa-meta-value .form-control,
.google-cloud-secret-field.wa-meta-value input {
  min-height: 36px;
  height: 36px;
  padding: 7px 36px 7px 10px;
  font-size: 13px;
  line-height: 1.3;
}
.google-cloud-secret-field .wa-meta-icon {
  width: 26px;
  height: 26px;
}
.google-cloud-hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
}
.google-cloud-force {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sidebar);
  cursor: pointer;
  line-height: 1.35;
  text-align: left;
}
.google-cloud-force input {
  flex-shrink: 0;
  margin: 0;
}

.i18n-action-muted {
  color: var(--text-muted);
  font-size: 13px;
}
.i18n-section {
  overflow: hidden;
  padding: 10px 12px;
}
.i18n-section:has(.i18n-editor) {
  padding: 8px 10px;
}
.i18n-section .i18n-editor {
  margin: 0;
  height: min(72vh, 740px);
  max-height: min(72vh, 740px);
  overflow: hidden;
}
.i18n-editor {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.i18n-editor-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0;
  flex-shrink: 0;
  min-width: 0;
}
.i18n-back-btn {
  margin-bottom: 0;
  flex-shrink: 0;
  padding: 4px 8px;
  min-height: 30px;
  height: 30px;
  line-height: 1;
}
.i18n-back-btn span {
  margin-left: 2px;
}
.i18n-generate-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 4px 10px;
  min-height: 30px;
  height: 30px;
  line-height: 1;
}
.i18n-editor-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1.2;
  flex-shrink: 0;
  white-space: nowrap;
}
.i18n-editor-code {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: lowercase;
}
.i18n-editor-bar > .badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
  line-height: 1.2;
}
.i18n-editor-meta {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.i18n-dirty-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, #fff);
  color: var(--primary);
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.i18n-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 140px;
  max-width: none;
}
.i18n-search > i {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
}
.i18n-search .form-control {
  padding-left: 28px;
  padding-right: 28px;
  min-height: 30px;
  height: 30px;
  font-size: 12px;
  width: 100%;
}
.i18n-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.i18n-search-clear:hover {
  background: color-mix(in srgb, var(--bg-color) 70%, #fff);
  color: var(--text-dark);
}
.i18n-filter-chips {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.i18n-chip {
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  min-height: 30px;
  line-height: 1;
}
.i18n-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-light));
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary);
}
.i18n-editor-list {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 0;
  -webkit-overflow-scrolling: touch;
}
.i18n-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid transparent;
}
.i18n-editor-row.is-dirty {
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 4%, #fff);
}
.i18n-editor-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.i18n-editor-en p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-sidebar);
}
.i18n-edited-badge {
  display: inline-flex;
  margin-top: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
}
.i18n-editor-tr .form-control {
  min-height: 56px;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;
}
.i18n-editor-empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.i18n-editor-empty p { margin: 0 0 10px; }
.i18n-editor-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.i18n-editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-light);
  margin-top: 0;
  background: transparent;
  flex-shrink: 0;
  position: static;
  z-index: 2;
}
.i18n-save-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .i18n-editor-row {
    grid-template-columns: 1fr;
  }
}

.automation-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 20px;
  min-height: 0;
}
.automation-nav {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  align-self: start;
  max-height: calc(100vh - 72px);
  position: sticky;
  top: 0;
}
.automation-nav .nav-item {
  font-size: 13px;
  padding: 10px 12px;
}
.automation-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.automation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.automation-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: border-color .15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.automation-card:hover {
  border-color: rgba(24, 119, 242, 0.35);
}
.automation-card .card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
}
.automation-card h3 { font-size: 15px; font-weight: 700; }
.automation-card p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
}
.toggle-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: #c5ccd4;
  transition: .2s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
  box-shadow: var(--shadow);
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch:has(input:disabled) {
  opacity: 0.4;
}

.step-list { display: flex; flex-direction: column; gap: 10px; }
.step-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.step-index {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(24, 119, 242, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-item .step-body { flex: 1; min-width: 0; }

/* ---- Flow builder (legacy, workable) ---- */
.flow-builder-page {
  margin: 0;
  background: var(--bg-color);
  min-height: 100vh;
}
.flow-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 130px);
}
.flow-workspace-full {
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
}
.flow-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.flow-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.flow-topbar-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  font-family: var(--font-display);
}
.flow-topbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.flow-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.flow-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef1f4;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.flow-builder {
  display: grid;
  grid-template-columns: 210px 1fr 300px;
  gap: 12px;
  flex: 1;
  min-height: 560px;
}
.flow-builder-v2 {
  grid-template-columns: 210px 1fr;
  min-height: calc(100vh - 90px);
}
.flow-palette,
.flow-inspector {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 190px);
}
.flow-builder-v2 .flow-canvas {
  min-height: calc(100vh - 100px);
  height: calc(100vh - 100px);
}
.flow-palette h4,
.flow-inspector h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin: 4px 0 2px;
}
.flow-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 6px;
}
.palette-group {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a939e;
  margin: 10px 2px 4px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: #f7f8fa;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sidebar);
  cursor: grab;
  transition: border-color .15s, background .15s;
  width: 100%;
  text-align: left;
}
.palette-item:hover {
  border-color: rgba(24, 119, 242, 0.35);
  color: var(--primary);
  background: rgba(24, 119, 242, 0.06);
}
.palette-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
}

.flow-canvas {
  position: relative;
  overflow: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  background-color: var(--bg-color);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(24, 119, 242, 0.16) 1px, transparent 0);
  background-size: 22px 22px;
  min-height: 560px;
}
.flow-canvas-inner {
  position: relative;
  transform-origin: 0 0;
}
.flow-edges {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.flow-edges path {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 2.25;
  marker-end: url(#flow-arrow);
  transition: stroke .15s;
}
.flow-edges path.selected {
  stroke: var(--primary);
  stroke-width: 3;
}
.flow-edges path.temp-edge {
  stroke: #8a939e;
  stroke-dasharray: 6 4;
  marker-end: none;
}
.flow-edges path.flow-edge-path {
  pointer-events: stroke;
  cursor: pointer;
}

.flow-node-picker {
  position: absolute;
  z-index: 40;
  width: 220px;
  max-height: min(360px, 70vh);
  overflow-y: auto;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lg);
}
.flow-node-picker-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a939e;
  margin: 2px 4px 8px;
}
.flow-node-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-sidebar);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.flow-node-picker-item:hover {
  background: rgba(24, 119, 242, 0.08);
  color: var(--primary);
}
.flow-node-picker-item i {
  width: 18px;
  text-align: center;
  color: var(--primary);
}

.flow-node {
  position: absolute;
  width: 220px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 2px solid var(--card-border);
  box-shadow: var(--shadow);
  font-size: 13px;
  cursor: grab;
  user-select: none;
  transition: border-color .15s;
}
.flow-node:active { cursor: grabbing; }
.flow-node.selected {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}
.flow-node.entry {
  outline: 2px dashed rgba(24, 119, 242, 0.45);
  outline-offset: 3px;
}
.flow-node .node-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px 8px 0 0;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.flow-node .node-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-node .node-body {
  padding: 10px 12px 14px;
  color: var(--text-sidebar);
}
.flow-node .node-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a939e;
  margin-bottom: 4px;
}
.flow-node .node-preview {
  font-size: 12px;
  line-height: 1.45;
  color: #3D4654;
  min-height: 34px;
}
.flow-node .node-entry {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.flow-node.trigger .node-head,
.flow-node.action .node-head { background: var(--primary); }
.flow-node.condition .node-head { background: #d97706; }
.flow-node.delay .node-head { background: #5C6570; }

.node-port {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--primary);
  cursor: crosshair;
  z-index: 2;
}
.node-port.in {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
}
.node-port.out {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
}
.node-port:hover {
  background: var(--primary);
  transform: translateY(-50%) scale(1.15);
}
.node-port.in:hover { transform: translateY(-50%) scale(1.15); }

.flow-empty {
  position: absolute;
  left: 50%;
  top: 180px;
  transform: translateX(-50%);
  text-align: center;
  color: var(--text-muted);
  pointer-events: none;
}
.flow-empty i {
  font-size: 36px;
  color: var(--secondary);
  margin-bottom: 10px;
}
.flow-empty h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.flow-empty p { font-size: 13px; }

.flow-minimap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  width: 160px;
  height: 100px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: crosshair;
}
.flow-minimap-label {
  position: absolute;
  left: 8px;
  top: 4px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a939e;
}
.flow-minimap-node {
  position: absolute;
  background: #9ad4c4;
  border-radius: 3px;
  opacity: .85;
}
.flow-minimap-node.active { background: var(--primary); }
.flow-minimap-viewport {
  position: absolute;
  border: 1.5px solid var(--primary);
  background: rgba(24, 119, 242, 0.08);
  border-radius: 3px;
  pointer-events: none;
}

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #eef1f4;
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 6px;
}
.inspector-tabs button {
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.inspector-tabs button.active {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow);
}

.flow-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}
.flow-toolbar .spacer { flex: 1; }
.zoom-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #eef1f4;
}


/* ---- HTTP API workspace ---- */
.http-api-workspace {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  min-height: calc(100vh - 160px);
  align-items: stretch;
}
.http-api-list {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.http-api-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border);
  font-size: 13px;
}
.http-api-list-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px;
}
.http-api-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 10px;
  cursor: pointer;
  margin-bottom: 4px;
}
.http-api-item:hover { background: #f7f8fa; }
.http-api-item.active {
  background: rgba(24, 119, 242, 0.08);
  border-color: rgba(24, 119, 242, 0.25);
}
.http-api-item-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.http-api-item-meta strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.http-api-item-meta small {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.http-method {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 6px;
  border-radius: 6px;
  background: #e2e6ea;
  color: #3D4654;
  flex-shrink: 0;
}
.http-method-get { background: #d1fae5; color: #065f46; }
.http-method-post { background: #dbeafe; color: #1d4ed8; }
.http-method-put,
.http-method-patch { background: #ffedd5; color: #c2410c; }
.http-method-delete { background: #fee2e2; color: #b91c1c; }

.http-api-main {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.http-api-urlbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.http-api-name { width: 160px; flex: 0 1 160px; }
.http-api-method { width: 110px; flex: 0 0 110px; font-weight: 700; }
.http-api-url { flex: 1; min-width: 180px; }
.http-api-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  background: #eef1f4;
  border-radius: var(--radius-md);
  padding: 4px;
}
.http-api-tabs > button {
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.http-api-tabs > button.active {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow);
}
.http-api-timeout {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
}
.http-api-timeout label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0;
  text-transform: none;
}
.http-api-editor { min-height: 180px; }
.http-kv { display: flex; flex-direction: column; gap: 8px; }
.http-kv-head,
.http-kv-row {
  display: grid;
  grid-template-columns: 28px 1fr 1.4fr 36px;
  gap: 8px;
  align-items: center;
}
.http-kv-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 2px;
}
.http-api-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.http-api-main .http-api-response {
  padding-top: 0;
  margin-top: 0;
}
.http-api-response-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.http-api-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.http-api-headers summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.http-api-headers pre,
.http-api-body {
  background: var(--text-dark);
  color: #e8ebef;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  overflow: auto;
  max-height: 280px;
  font-size: 12px;
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .auto-shell {
    grid-template-columns: minmax(180px, 200px) minmax(0, 1fr);
    gap: 0;
  }
  .sd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-stage { grid-template-columns: 1fr; }
  .dash-boards { grid-template-columns: 1fr 1fr; }
  .dash-platform-boards { grid-template-columns: 1fr; }
  .dash-panel--rail .dash-panel-body { max-height: none; }
  .inbox-layout,
  .inbox-layout.no-details,
  .inbox-layout.empty-thread { grid-template-columns: 300px 1fr; }
  .inbox-layout .contact-pane { display: none; }
  .flow-builder { grid-template-columns: 180px 1fr; }
  .flow-builder-v2 { grid-template-columns: 180px 1fr; }
  .flow-inspector { display: none; }
  .sub-layout,
  .automation-layout { grid-template-columns: 200px 1fr; }
}

@media (max-width: 900px) {
  .http-api-workspace { grid-template-columns: 1fr; }
  .http-api-list { max-height: 220px; }
}

@media (max-width: 768px) {
  .app-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hamburger-btn { display: inline-flex; }
  .close-sidebar-btn { display: inline-flex; }
  .header.header-mobile-only {
    display: flex;
    margin: 0 0 8px;
    min-height: 40px;
  }
  .main-content:has(.inbox-shell) > .header.header-mobile-only { display: none; }

  .sidebar {
    --sidebar-pad-x: 16px;
    position: fixed !important;
    top: 0;
    inset-inline-start: 0;
    bottom: 0;
    width: min(300px, 88vw);
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh;
    margin: 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-lg);
    z-index: 10050;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-105%);
    transition: transform 0.28s ease;
  }
  [dir="rtl"] .sidebar {
    transform: translateX(105%);
  }
  .sidebar.show { transform: translateX(0); }
  .sidebar .user-profile { padding-inline-end: 44px; }

  .user-menu-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: rgba(18, 21, 26, .45);
  }

  .user-menu-panel.is-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 10070;
    border-radius: 18px 18px 0 0;
    border: none;
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: min(78dvh, 560px);
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(18, 21, 26, .18);
  }

  .user-menu-sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #D0D5DD;
    margin: 4px auto 10px;
  }

  .main-content {
    overflow: visible;
    height: auto;
    gap: 12px;
    padding: 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .main-content:has(.inbox-shell) {
    padding: 0;
    height: 100dvh;
  }

  .sd-welcome { padding: 18px; border-radius: var(--radius-lg); }
  .sd-welcome h1 { font-size: 20px; }
  .sd-welcome p { font-size: 13px; }

  .dash { gap: 14px; }
  .dash-hero { padding: 18px 20px; }
  .dash-hero-title { font-size: 26px; }
  .dash-hero-lede { font-size: 15px; }
  .dash-stat { padding: 14px; gap: 12px; }
  .dash-stat-icon { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
  .dash-stat-value { font-size: 26px; }
  .dash-stat-label { font-size: 12px; }
  .dash-boards { grid-template-columns: 1fr; }
  .dash-chart { height: 260px; }
  .dash-panel-title { font-size: 16px; }
  .dash-row-main strong { font-size: 15px; }

  .sd-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sd-metric { padding: 14px; gap: 12px; }
  .sd-metric-icon { width: 44px; height: 44px; font-size: 18px; }
  .sd-metric .value { font-size: 24px; }
  .sd-metric .label { font-size: 13px; }

  .grid-2 { grid-template-columns: 1fr; }

  .nc-wa-fab {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 12px;
    border-radius: 50%;
  }
  .nc-wa-fab span { display: none; }
  .nc-wa-fab i { font-size: 28px; }

  .toast-container {
    left: auto;
    right: 12px;
    bottom: 14px;
    top: auto;
    transform: none;
    width: min(300px, calc(100vw - 24px));
    align-items: flex-end;
  }
  .toast { max-width: 300px; width: auto; }

  .inbox-shell { height: 100%; min-height: 0; }
  .inbox-layout,
  .inbox-layout.no-details,
  .inbox-layout.empty-thread {
    grid-template-columns: 1fr;
    height: 100%;
  }
  .inbox-layout .list-pane { max-height: 38vh; }
  .inbox-layout .contact-pane { display: none; }
  .thread-search { max-width: 110px; }
  .quick-replies { display: none; }

  .sub-layout,
  .automation-layout { grid-template-columns: 1fr; }
  .main-content:has(.sub-layout) {
    overflow-y: auto;
  }
  .sub-layout {
    height: auto;
    flex: none;
    overflow: visible;
  }
  .sub-body {
    height: auto;
    overflow: visible;
  }
  .auto-shell {
    grid-template-columns: 1fr;
    gap: 0;
    height: auto;
    overflow: visible;
  }
  .auto-col-tools {
    position: static;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--card-border);
    padding: 10px 12px;
    overflow: visible;
  }
  .auto-col-config {
    height: auto;
    overflow: visible;
    padding: 12px 14px 14px;
  }
  .auto-tools-scroll {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .auto-number-picker {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .auto-number-menu {
    position: absolute;
  }
  .auto-tool-group {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 0;
  }
  .auto-col-head,
  .auto-tool-label { display: none; }
  .auto-number-label { display: block; }
  .auto-number-trigger {
    max-width: none;
  }
  .auto-number-link,
  .auto-tool-link {
    flex-shrink: 0;
    max-width: 200px;
  }
  .sub-sidebar,
  .automation-nav {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0 12px;
    margin: 0;
    border-right: none;
    border-bottom: 1px solid var(--card-border);
    gap: 6px;
    align-items: stretch;
  }
  .sub-sidebar-head { display: none; }
  .sub-nav-group {
    display: contents;
  }
  .sub-sidebar .nav-label,
  .automation-nav .nav-label { display: none; }
  .sub-nav-item {
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
    padding: 8px 10px;
  }
  .sub-nav-hint { display: none; }
  .sub-nav-copy { flex-direction: row; align-items: center; }
  .sub-sidebar .nav-item,
  .automation-nav .nav-item {
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
  }
  .seg-tabs { width: 100%; }

  .flow-builder {
    grid-template-columns: 1fr;
    height: auto;
  }
  .flow-palette {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: none;
  }
  .flow-palette .palette-group { display: none; }
  .flow-palette .palette-item { width: auto; flex-shrink: 0; }
  .flow-canvas { height: 55vh; min-height: 360px; }
  .chat-bubble { max-width: 85%; }
  .page-header .page-actions { width: 100%; }
}

@media (max-width: 480px) {
  .sd-metrics { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .sd-welcome .actions { width: 100%; }
  .sd-welcome .actions .btn { flex: 1; }
  .list-row { flex-direction: column; align-items: stretch; }
  .list-row .btn { width: 100%; justify-content: center; }

  .dash-pulse { grid-template-columns: 1fr; gap: 10px; }
  .dash-hero-actions { width: 100%; }
  .dash-hero-actions .btn { flex: 1; justify-content: center; }
  .dash-row { flex-direction: column; align-items: stretch; }
  .dash-range { width: 100%; }
  .dash-range-btn { flex: 1; text-align: center; }
}

/* ============================================================
   WhatsApp Web inbox ? slim / slick (scoped to .inbox-shell.wa-inbox)
   ============================================================ */
.inbox-shell.wa-inbox {
  --wa-teal: #008069;
  --wa-green: #25D366;
  --wa-green-dark: #00A884;
  --wa-out: #D9FDD3;
  --wa-paper: #EFEAE2;
  --chat-doodle: rgba(11, 20, 26, 0.06);
  --wa-panel: #F0F2F5;
  --wa-header: #F0F2F5;
  --wa-border: #E9EDEF;
  --wa-active: #F0F2F5;
  --wa-unread: #25D366;
  --wa-composer: #F0F2F5;
  --wa-icon: #54656F;
  --wa-text: #111B21;
  --wa-muted: #667781;
  --wa-send: #00A884;
  --chat-paper: var(--wa-paper);
  --chat-out: var(--wa-out);
  font-size: 14px;
  zoom: 1.1;
}

.inbox-shell.wa-inbox .inbox-layout {
  grid-template-columns: 300px minmax(0, 1fr) 305px;
  background: #fff;
  border-radius: 0;
}

.inbox-shell.wa-inbox .inbox-layout.no-details,
.inbox-shell.wa-inbox .inbox-layout.empty-thread {
  grid-template-columns: 300px 1fr;
}

.inbox-shell.wa-inbox .inbox-pane {
  background: #fff;
}

.inbox-shell.wa-inbox .inbox-pane.list-pane {
  background: #fff;
  border-right: 1px solid var(--wa-border);
}

.inbox-shell.wa-inbox .inbox-pane.thread-pane {
  background-color: var(--wa-paper);
  background-image: none;
  position: relative;
}

.inbox-shell.wa-inbox .wa-thread-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.inbox-shell.wa-inbox .wa-drop-overlay {
  position: absolute;
  inset: 8px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 2px dashed #128c7e;
  background: rgba(18, 140, 126, 0.16);
  backdrop-filter: blur(1px);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.inbox-shell.wa-inbox .wa-drop-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 22px;
  border-radius: 14px;
  background: #fff;
  color: #0b6b5f;
  box-shadow: 0 12px 32px rgba(11, 20, 26, 0.18);
  text-align: center;
}

.inbox-shell.wa-inbox .wa-drop-overlay-card i {
  font-size: 22px;
  margin-bottom: 2px;
}

.inbox-shell.wa-inbox .wa-drop-overlay-card strong {
  font-size: 14px;
  font-weight: 700;
}

.inbox-shell.wa-inbox .wa-drop-overlay-card span {
  font-size: 12px;
  color: #667781;
  font-weight: 500;
}

.inbox-shell.wa-inbox .wa-thread-drop.is-file-drag {
  /* class hook for debugging / future styles */
}

.inbox-shell.wa-inbox .inbox-pane.contact-pane {
  background: #fff;
  border-left: 1px solid var(--wa-border);
  position: relative;
}

.inbox-shell.wa-inbox .inbox-pane-loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: rgba(240, 242, 245, 0.72);
  backdrop-filter: blur(1px);
  pointer-events: all;
}

.inbox-shell.wa-inbox .inbox-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 168, 132, 0.22);
  border-top-color: #00a884;
  border-radius: 50%;
  animation: inbox-spin .7s linear infinite;
}

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

.inbox-shell.wa-inbox .conv-list-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 0 14px;
}

.inbox-shell.wa-inbox .conv-list-loading {
  color: var(--wa-muted);
  font-size: 14px;
}

/* ---- List header ---- */
.inbox-shell.wa-inbox .inbox-list-header {
  background: #fff;
  border-bottom: 1px solid var(--wa-border);
  padding: 8px 12px 8px;
  gap: 8px;
}

.inbox-shell.wa-inbox .wa-list-top {
  align-items: center;
  min-height: 32px;
}

.inbox-shell.wa-inbox .wa-chats-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wa-text);
  letter-spacing: -0.02em;
  font-family: var(--font-body) !important;
  line-height: 1.2;
}

.inbox-shell.wa-inbox .inbox-brand-actions {
  gap: 2px;
}

.inbox-shell.wa-inbox .wa-newchat-btn {
  color: var(--wa-teal);
  background: rgba(0, 128, 105, 0.08);
}

.inbox-shell.wa-inbox .wa-newchat-btn:hover {
  background: rgba(0, 128, 105, 0.16);
  color: #006d5b;
}

.inbox-shell.wa-inbox .wa-icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--wa-icon);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s, color .15s, transform .15s;
  flex-shrink: 0;
}

.inbox-shell.wa-inbox .wa-icon-btn:hover {
  background: rgba(11, 20, 26, 0.06);
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-icon-btn:active {
  transform: scale(.94);
}

/* ---- Search ---- */
.inbox-shell.wa-inbox .wa-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.inbox-shell.wa-inbox .wa-search-ico {
  position: absolute;
  inset-inline-start: 10px;
  color: var(--wa-muted);
  font-size: 11px;
  pointer-events: none;
  z-index: 1;
}

.inbox-shell.wa-inbox .wa-search-wrap .inbox-search {
  padding-inline-start: 30px;
  border-radius: 6px;
  background: var(--wa-panel);
  border: none;
  height: 30px;
  font-size: 12.5px;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-search-wrap .inbox-search:focus {
  background: #fff;
  box-shadow: 0 0 0 1px var(--wa-border);
  outline: none;
}

.inbox-shell.wa-inbox .wa-search-wrap .inbox-search::placeholder {
  color: var(--wa-muted);
  font-size: 12.5px;
}

.inbox-shell.wa-inbox .inbox-channel {
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: var(--wa-panel);
  font-size: 12px;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-channel-empty {
  min-height: 100%;
  padding: 36px 20px;
  text-align: center;
  color: var(--wa-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  animation: waFadeIn .2s ease both;
}

.inbox-shell.wa-inbox .wa-channel-empty-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #E9EDEF;
  color: var(--wa-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.inbox-shell.wa-inbox .wa-channel-empty h3 {
  margin: 0 0 4px;
  color: var(--wa-text);
  font-size: 14px;
  font-weight: 600;
}

.inbox-shell.wa-inbox .wa-channel-empty p {
  max-width: 220px;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
}

.inbox-shell.wa-inbox .wa-sms-thread-empty {
  border-bottom-color: #1877F2;
}

.inbox-shell.wa-inbox .wa-sms-thread-empty .wa-empty-illustration i {
  color: #AEBAC1;
  font-size: 48px;
}

/* ---- Filters / chips (WhatsApp-style slim pills, scroll row) ---- */
.inbox-shell.wa-inbox .inbox-filters,
.inbox-shell.wa-inbox .wa-filter-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 2px 0 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #B8BEC3 transparent;
  -ms-overflow-style: auto;
}

/* Ultra-thin custom horizontal scrollbar (saves vertical space) */
.inbox-shell.wa-inbox .inbox-filters::-webkit-scrollbar,
.inbox-shell.wa-inbox .wa-filter-chips::-webkit-scrollbar {
  width: 0;
  height: 3px;
}

.inbox-shell.wa-inbox .inbox-filters::-webkit-scrollbar-track,
.inbox-shell.wa-inbox .wa-filter-chips::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 4px;
}

.inbox-shell.wa-inbox .inbox-filters::-webkit-scrollbar-thumb,
.inbox-shell.wa-inbox .wa-filter-chips::-webkit-scrollbar-thumb {
  background: #C5CAD0;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.inbox-shell.wa-inbox .inbox-filters::-webkit-scrollbar-thumb:hover,
.inbox-shell.wa-inbox .wa-filter-chips::-webkit-scrollbar-thumb:hover {
  background: #AEB4B8;
  background-clip: padding-box;
}

.inbox-shell.wa-inbox .inbox-filters::-webkit-scrollbar-button,
.inbox-shell.wa-inbox .wa-filter-chips::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.inbox-shell.wa-inbox .inbox-filter,
.inbox-shell.wa-inbox .filter-chip {
  flex-shrink: 0;
  height: 26px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--wa-border);
  color: var(--wa-muted);
  line-height: 24px;
}

.inbox-shell.wa-inbox .inbox-filter.active,
.inbox-shell.wa-inbox .filter-chip.active {
  background: #E7FCE3;
  border-color: #E7FCE3;
  color: var(--wa-teal);
}

/* ---- Conversation list ---- */
.inbox-shell.wa-inbox .conv-list {
  background: #fff;
}

.inbox-shell.wa-inbox .conv-item {
  height: 72px;
  padding-block: 8px;
  padding-inline: 10px 36px;
  gap: 10px;
  border-bottom: 1px solid #D1D7DB;
  transition: background-color .14s ease;
  position: relative;
  align-items: center;
  box-sizing: border-box;
  overflow: visible;
  z-index: 1;
}

.inbox-shell.wa-inbox .conv-item:has(.conv-more.is-open),
.inbox-shell.wa-inbox .conv-item:has(.conv-info.is-open) {
  z-index: 50;
}

.inbox-shell.wa-inbox .conv-item:hover {
  background: #F5F6F6;
}

.inbox-shell.wa-inbox .conv-item.active {
  background: #E7E8EA;
}

.inbox-shell.wa-inbox .conv-item.active::before {
  display: none;
}

.inbox-shell.wa-inbox .conv-item.has-unread .name,
.inbox-shell.wa-inbox .conv-item.has-unread .conv-name-text {
  font-weight: 650;
}

.inbox-shell.wa-inbox .conv-item.has-unread .preview-text {
  color: #3B4A54;
  font-weight: 500;
}

.inbox-shell.wa-inbox .conv-avatar {
  width: 40px;
  height: 40px;
  font-size: 12.5px;
  background: hsl(var(--av-h, 200) 28% 88%);
  color: hsl(var(--av-h, 200) 32% 30%);
  font-weight: 650;
  flex-shrink: 0;
  margin-top: 0;
  letter-spacing: -0.02em;
}

.inbox-shell.wa-inbox .thread-header .conv-avatar,
.inbox-shell.wa-inbox .wa-thread-contact .conv-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
  background: #DFE5E7;
  color: #54656F;
}

.inbox-shell.wa-inbox .conv-meta {
  padding-top: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.inbox-shell.wa-inbox .conv-meta .top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  min-width: 0;
}

.inbox-shell.wa-inbox .conv-meta .name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--wa-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  line-height: 1.2;
}

.inbox-shell.wa-inbox .conv-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.inbox-shell.wa-inbox .conv-unread-slot {
  width: 22px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.inbox-shell.wa-inbox .conv-meta .name .conv-unread {
  flex: none;
}

.inbox-shell.wa-inbox .conv-priority {
  font-size: 11px;
  color: #DC6B19;
  flex: none;
}

.inbox-shell.wa-inbox .conv-priority.urgent {
  color: #D92D20;
}

.inbox-shell.wa-inbox .conv-meta .time {
  font-size: 11.5px;
  color: var(--wa-muted);
  flex-shrink: 0;
  line-height: 1.2;
  transition: opacity .12s ease;
}

.inbox-shell.wa-inbox .conv-meta .time.unread-time {
  color: var(--wa-unread);
  font-weight: 600;
}

.inbox-shell.wa-inbox .preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}

.inbox-shell.wa-inbox .conv-meta .preview {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--wa-muted);
  min-width: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}

.inbox-shell.wa-inbox .preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.inbox-shell.wa-inbox .conv-src {
  flex: none;
  font-size: 11px;
  opacity: .85;
}

.inbox-shell.wa-inbox .conv-src.is-bot {
  color: #7C3AED;
}

.inbox-shell.wa-inbox .conv-src.is-agent {
  color: #8696A0;
}

.inbox-shell.wa-inbox .conv-src.is-agent.is-read {
  color: #53BDEB;
}

.inbox-shell.wa-inbox .conv-src.is-failed {
  color: #EA0038;
  opacity: 1;
}

.inbox-shell.wa-inbox .conv-unread {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  background: var(--wa-unread);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.inbox-shell.wa-inbox .conv-snooze {
  flex: none;
  font-size: 11px;
  color: var(--wa-muted);
}

.inbox-shell.wa-inbox .conv-agent-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  height: 14px;
  max-width: 100%;
  font-size: 11px;
  font-weight: 500;
  color: var(--wa-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-shell.wa-inbox .conv-agent-line i {
  font-size: 9px;
  opacity: .8;
}

.inbox-shell.wa-inbox .conv-agent-line .conv-channel-icon {
  color: var(--wa-teal);
  opacity: 1;
  flex: none;
}

.inbox-shell.wa-inbox .conv-channel-text,
.inbox-shell.wa-inbox .conv-assignee-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-shell.wa-inbox .conv-channel-text {
  flex: 1 1 auto;
}

.inbox-shell.wa-inbox .conv-agent-separator {
  flex: none;
  color: #AEBAC1;
}

.inbox-shell.wa-inbox .conv-side {
  position: absolute;
  top: 6px;
  inset-inline-end: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 3;
}

.inbox-shell.wa-inbox .conv-info,
.inbox-shell.wa-inbox .conv-more {
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.inbox-shell.wa-inbox .conv-item:hover .conv-info,
.inbox-shell.wa-inbox .conv-item:hover .conv-more,
.inbox-shell.wa-inbox .conv-item.active .conv-info,
.inbox-shell.wa-inbox .conv-item.active .conv-more,
.inbox-shell.wa-inbox .conv-info.is-open,
.inbox-shell.wa-inbox .conv-info:focus-within,
.inbox-shell.wa-inbox .conv-more.is-open,
.inbox-shell.wa-inbox .conv-more:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.inbox-shell.wa-inbox .conv-item:hover .conv-meta .time,
.inbox-shell.wa-inbox .conv-item.active .conv-meta .time {
  opacity: 0;
}

.inbox-shell.wa-inbox .conv-info-btn,
.inbox-shell.wa-inbox .conv-more .wa-icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--wa-icon);
  background: transparent;
  box-shadow: none;
}

.inbox-shell.wa-inbox .conv-info-btn:hover,
.inbox-shell.wa-inbox .conv-more .wa-icon-btn:hover {
  color: var(--wa-teal);
  background: transparent;
}

.inbox-shell.wa-inbox .conv-more-panel,
.conv-more-panel.inbox-menu-panel,
.conv-more-panel {
  box-sizing: border-box;
  width: max-content;
  min-width: 200px;
  max-width: min(240px, calc(100vw - 16px));
  z-index: 1300;
  background: #fff;
  border-radius: 4px;
  border: none;
  box-shadow: 0 2px 8px rgba(11, 20, 26, 0.18), 0 0 0 1px rgba(11, 20, 26, 0.04);
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.inbox-shell.wa-inbox .conv-more-panel > button,
.conv-more-panel > button {
  width: 100%;
  white-space: nowrap;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: 0;
  padding: 8px 14px;
  font-weight: 400;
  font-size: 14px;
  color: var(--wa-text, #111b21);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-shell.wa-inbox .conv-more-panel > button:hover,
.conv-more-panel > button:hover {
  background: var(--wa-panel, #f0f2f5);
}

.inbox-shell.wa-inbox .conv-more-panel > button i,
.conv-more-panel > button i {
  width: 15px;
  color: var(--wa-icon, #54656f);
  font-size: 13px;
  flex-shrink: 0;
}

.inbox-shell.wa-inbox .conv-more-panel > button.danger,
.conv-more-panel > button.danger {
  color: var(--danger, #dc2626);
}

/* Teleported to body — glance card, not clipped by the list pane. */
.conv-info-panel {
  width: 260px;
  max-width: min(280px, calc(100vw - 16px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(11, 20, 26, .18);
  border: 1px solid var(--wa-border, #e9edef);
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.conv-info-panel .conv-info-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.conv-info-panel .conv-info-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--wa-text, #111b21);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-info-panel .conv-info-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--wa-muted, #667781);
  line-height: 1.3;
}

.conv-info-panel .conv-info-account i {
  color: #25D366;
  font-size: 13px;
  flex-shrink: 0;
}

.conv-info-panel .conv-info-account span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-info-panel .conv-info-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.conv-info-panel .conv-info-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.conv-info-panel .conv-info-label {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--label-color, #008069);
  background: color-mix(in srgb, var(--label-color, #008069) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--label-color, #008069) 28%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-info-panel .conv-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  background: #F0F2F5;
  color: #54656F;
}

.conv-info-panel .conv-info-chip i {
  font-size: 10px;
}

.conv-info-panel .conv-info-chip.is-bot-on {
  background: color-mix(in srgb, #7C3AED 12%, #fff);
  color: #6D28D9;
}

.conv-info-panel .conv-info-chip.is-bot-off {
  background: #F0F2F5;
  color: #667781;
}

.conv-info-panel .conv-info-chip.is-agent {
  background: color-mix(in srgb, #008069 10%, #fff);
  color: #006d5b;
}

.conv-info-panel .conv-info-chip.is-agent.is-muted {
  background: #F0F2F5;
  color: #667781;
}

.conv-info-panel .conv-info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: #F0F2F5;
  color: var(--wa-text, #111b21);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.conv-info-panel .conv-info-footer:hover {
  background: color-mix(in srgb, #008069 10%, #F0F2F5);
  color: #006d5b;
}

.conv-info-panel .conv-info-footer i {
  font-size: 11px;
  opacity: .75;
}

/* ---- Thread header ---- */
.inbox-shell.wa-inbox .thread-header {
  background: var(--wa-header);
  border-bottom: 1px solid var(--wa-border);
  padding: 7px 12px;
  min-height: 50px;
  flex-wrap: nowrap;
}

.inbox-shell.wa-inbox .wa-thread-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 8px;
  color: inherit;
}

.inbox-shell.wa-inbox .wa-thread-contact:hover {
  background: rgba(11, 20, 26, 0.04);
}

.inbox-shell.wa-inbox .wa-thread-contact:hover .thread-title h3 {
  text-decoration: none;
}

.inbox-shell.wa-inbox .thread-title h3 {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--wa-text);
  font-family: var(--font-body);
  line-height: 1.25;
}

.inbox-shell.wa-inbox .thread-sub {
  font-size: 12px;
  color: var(--wa-muted);
}

.inbox-shell.wa-inbox .thread-actions {
  gap: 2px;
}

.inbox-shell.wa-inbox .thread-search {
  max-width: 120px;
  background: #fff;
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  height: 30px;
  font-size: 12px;
}

.inbox-shell.wa-inbox .thread-search:focus {
  border-color: var(--wa-green-dark);
  box-shadow: none;
}

.inbox-shell.wa-inbox .window-open {
  color: var(--wa-teal);
}

.inbox-shell.wa-inbox .window-closed {
  color: #B54708;
}

/* ---- Chat thread / bubbles ----
   Wallpaper lives on the non-scrolling shell so the doodle stays put while messages scroll. */
.inbox-shell.wa-inbox .chat-thread-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background-color: var(--wa-paper, #EFEAE2);
  overflow: hidden;
}

.inbox-shell.wa-inbox .chat-thread-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Official WA tile SVG (374×666). Black strokes + opacity for visible doodle. */
  background-image: var(--chat-wallpaper);
  background-repeat: repeat;
  background-size: 374px 666px;
  background-position: 0 0;
  opacity: 0.10;
}

.inbox-shell.wa-inbox .chat-thread {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  /* Keep bubble sides WhatsApp-like (inbound left / outbound right) even when html[dir=rtl]. */
  direction: ltr;
  background-color: transparent;
  background-image: none;
  padding: 12px 16px 14px;
  gap: 8px;
  scrollbar-gutter: stable;
  overflow-anchor: none;
}

.inbox-shell.wa-inbox .chat-thread-load-older {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 0 10px;
}

.inbox-shell.wa-inbox .chat-thread-load-older-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--wa-muted, #667781);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.08);
  cursor: pointer;
}

.inbox-shell.wa-inbox .chat-thread-load-older-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.inbox-shell.wa-inbox .chat-thread-loading {
  color: var(--wa-muted, #667781);
  font-size: 13px;
}

.inbox-shell.wa-inbox .wa-new-messages {
  position: absolute;
  bottom: 12px;
  right: 16px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #00a884;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(11, 20, 26, 0.18);
  cursor: pointer;
}

.inbox-shell.wa-inbox .wa-new-messages:hover {
  background: #008f72;
}

.inbox-shell.wa-inbox .wa-new-messages i {
  font-size: 12px;
}

.inbox-shell.wa-inbox .chat-date {
  background: rgba(255, 255, 255, .92);
  color: var(--wa-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 7px;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
  margin: 10px 0 6px;
  align-self: center;
}

.inbox-shell.wa-inbox {
  --wa-out: #D9FDD3;
}

.inbox-shell.wa-inbox .wa-msg-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.inbox-shell.wa-inbox .wa-msg-row:has(.is-menu-open) {
  z-index: 40;
}
.inbox-shell.wa-inbox .chat-bubble.is-menu-open {
  z-index: 40;
}
.inbox-shell.wa-inbox .wa-msg-row + .wa-msg-row {
  margin-top: 4px;
}
.inbox-shell.wa-inbox .wa-msg-row.is-in {
  align-items: stretch;
}
.inbox-shell.wa-inbox .wa-msg-row.is-out {
  align-items: stretch;
}
.inbox-shell.wa-inbox .wa-msg-row .chat-bubble {
  align-self: auto;
}
.inbox-shell.wa-inbox .wa-msg-row:has(.chat-media),
.inbox-shell.wa-inbox .wa-msg-row:has(.chat-media-link),
.inbox-shell.wa-inbox .wa-msg-row:has(.chat-audio),
.inbox-shell.wa-inbox .wa-msg-row:has(.wa-voice),
.inbox-shell.wa-inbox .wa-msg-row:has(.chat-doc),
.inbox-shell.wa-inbox .wa-msg-row:has(.wa-vcard) {
  margin-top: 6px;
  margin-bottom: 6px;
}
.inbox-shell.wa-inbox .wa-sent-by {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--wa-muted, #667781);
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.inbox-shell.wa-inbox .wa-msg-row.is-out .wa-sent-by {
  text-align: right;
  margin-left: auto;
  margin-right: 10px;
}
.inbox-shell.wa-inbox .wa-msg-footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 1px 8px 6px;
  max-width: none;
  overflow: visible;
}
.inbox-shell.wa-inbox .wa-msg-row.is-out .wa-msg-footer {
  margin-left: auto;
  margin-right: 10px;
  flex-direction: row-reverse;
}
.inbox-shell.wa-inbox .wa-fail-icon {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: #EA0038;
  font-size: 16px;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inbox-shell.wa-inbox .wa-fail-icon:hover,
.inbox-shell.wa-inbox .wa-fail-icon:focus-visible {
  color: #c4002f;
}
.inbox-shell.wa-inbox .wa-trace-copy {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #667781;
  cursor: pointer;
  font: inherit;
}
.inbox-shell.wa-inbox .wa-trace-copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
}
.inbox-shell.wa-inbox .wa-trace-copy:hover,
.inbox-shell.wa-inbox .wa-trace-copy:focus-visible {
  color: #111b21;
}

.wa-fail-tip-float {
  position: fixed;
  z-index: 10060;
  min-width: 160px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #111b21;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
}
.wa-fail-tip-float.is-on {
  opacity: 1;
  transform: none;
}

.inbox-shell.wa-inbox .chat-bubble {
  max-width: min(78%, 640px);
  padding: 6px 9px 6px 9px;
  border-radius: 7.5px;
  font-size: 14.2px;
  line-height: 1.4;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  border: none;
  position: relative;
  transform-origin: left bottom;
  animation: waMessageIn .18s cubic-bezier(.2, .75, .35, 1) both;
  word-wrap: break-word;
  overflow: visible;
}

.inbox-shell.wa-inbox .chat-bubble.incoming {
  background: #fff;
  align-self: auto;
  border-top-left-radius: 0;
  /* Physical sides — ignore html[dir=rtl] so inbound stays left. */
  margin-left: 10px;
  margin-right: auto;
}

.inbox-shell.wa-inbox .chat-bubble.incoming::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background: #fff;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.inbox-shell.wa-inbox .chat-bubble.outgoing {
  background: var(--wa-out);
  color: var(--wa-text);
  align-self: auto;
  border-top-right-radius: 0;
  /* Physical sides — outbound stays right even under RTL chrome. */
  margin-left: auto;
  margin-right: 10px;
  transform-origin: right bottom;
}

.inbox-shell.wa-inbox .chat-bubble.outgoing::before {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 8px;
  height: 13px;
  background: var(--wa-out);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.inbox-shell.wa-inbox .chat-bubble.note {
  background: #FFF7D1;
  border: none;
  color: #5C4B1F;
  align-self: center;
  max-width: 72%;
  border-radius: 7.5px;
  margin: 4px 0;
}

.inbox-shell.wa-inbox .wa-thread-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.inbox-shell.wa-inbox .wa-thread-note {
  padding: 9px 10px 8px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #FFF9E0 0%, #FFF3C4 100%);
  border: 1px solid color-mix(in srgb, #D97706 20%, transparent);
  box-shadow: 0 1px 2px rgba(92, 75, 31, 0.05);
}

.inbox-shell.wa-inbox .wa-thread-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #5C4B1F;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.inbox-shell.wa-inbox .wa-thread-note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 10.5px;
  color: color-mix(in srgb, #5C4B1F 68%, transparent);
}

.inbox-shell.wa-inbox .wa-thread-note-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.inbox-shell.wa-inbox .wa-note-ico {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: color-mix(in srgb, #5C4B1F 78%, transparent);
  cursor: pointer;
  padding: 0;
  transition: background .12s, color .12s;
}

.inbox-shell.wa-inbox .wa-note-ico i {
  font-size: 11px;
  pointer-events: none;
}

.inbox-shell.wa-inbox .wa-note-dismiss i {
  pointer-events: none;
}

.inbox-shell.wa-inbox .wa-note-ico:hover {
  background: color-mix(in srgb, #D97706 14%, #fff);
  color: #8A5A10;
}

.inbox-shell.wa-inbox .wa-note-ico.danger:hover {
  background: color-mix(in srgb, var(--danger, #dc2626) 12%, #fff);
  color: var(--danger, #dc2626);
}

.inbox-shell.wa-inbox .wa-panel-empty {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.inbox-shell.wa-inbox .chat-bubble.note::before,
.inbox-shell.wa-inbox .chat-bubble.note .wa-bubble-caret {
  display: none;
}

.inbox-shell.wa-inbox .chat-bubble .bubble-text {
  white-space: pre-wrap;
}

.inbox-shell.wa-inbox .chat-bubble .bubble-text.wa-fmt,
.inbox-shell.wa-inbox .chat-caption.wa-fmt {
  white-space: normal;
  word-break: break-word;
}

.inbox-shell.wa-inbox .wa-fmt a {
  color: var(--primary, #128c7e);
  font-weight: 700;
  text-decoration: underline;
  word-break: break-word;
}
.inbox-shell.wa-inbox .chat-bubble.outgoing .wa-fmt a {
  color: inherit;
}

.inbox-shell.wa-inbox .wa-fmt em {
  font-style: italic;
}

.inbox-shell.wa-inbox .wa-fmt del {
  text-decoration: line-through;
  opacity: 0.88;
}

.inbox-shell.wa-inbox .wa-fmt .wa-fmt-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(11, 20, 26, 0.06);
  border-radius: 4px;
  padding: 0 4px;
  white-space: pre-wrap;
}

.inbox-shell.wa-inbox .chat-bubble.outgoing .wa-fmt .wa-fmt-mono {
  background: rgba(0, 0, 0, 0.06);
}

.inbox-shell.wa-inbox .wa-fmt .wa-fmt-quote {
  display: block;
  margin: 2px 0 4px;
  padding: 2px 0 2px 8px;
  border-left: 3px solid rgba(0, 128, 105, 0.55);
  color: inherit;
  opacity: 0.92;
}

.inbox-shell.wa-inbox .chat-bubble.incoming .wa-fmt .wa-fmt-quote {
  border-left-color: rgba(17, 27, 33, 0.28);
}

.inbox-shell.wa-inbox .wa-fmt .wa-fmt-list {
  margin: 2px 0 4px;
  padding-left: 1.15em;
}

.inbox-shell.wa-inbox .wa-fmt .wa-fmt-list li {
  margin: 0 0 2px;
}

.inbox-shell.wa-inbox .chat-bubble .bubble-meta {
  float: right;
  margin: 2px 0 0 10px;
  padding: 0;
  font-size: 11px;
  opacity: 1;
  color: var(--wa-muted);
  gap: 3px;
  line-height: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0;
}

/* Media / docs: keep timestamp inside the bubble (no float hang). */
.inbox-shell.wa-inbox .chat-bubble:has(.chat-media) .bubble-meta,
.inbox-shell.wa-inbox .chat-bubble:has(.chat-media-link) .bubble-meta,
.inbox-shell.wa-inbox .chat-bubble:has(.chat-doc) .bubble-meta,
.inbox-shell.wa-inbox .chat-bubble:has(.wa-voice) .bubble-meta,
.inbox-shell.wa-inbox .chat-bubble:has(.wa-vcard) .bubble-meta,
.inbox-shell.wa-inbox .chat-bubble:has(.chat-caption) .bubble-meta {
  float: none;
  clear: both;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 4px 0 0;
  top: 0;
  position: static;
}

.inbox-shell.wa-inbox .wa-ticks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  line-height: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
.inbox-shell.wa-inbox .wa-ticks .wa-tick-svg {
  display: block;
  width: 16px;
  height: 15px;
  flex-shrink: 0;
}
.inbox-shell.wa-inbox .wa-ticks i {
  font-size: 11px;
  line-height: 1;
}
.inbox-shell.wa-inbox .wa-ticks.tick-queued { color: #8696A0; }
.inbox-shell.wa-inbox .wa-ticks.tick-sent { color: #667781; }
.inbox-shell.wa-inbox .wa-ticks.tick-delivered { color: #667781; }
.inbox-shell.wa-inbox .wa-ticks.tick-read { color: #53BDEB; }
.inbox-shell.wa-inbox .wa-ticks.tick-failed { color: #EA0038; }

.inbox-shell.wa-inbox .chat-media-link {
  display: block;
  width: 260px;
  max-width: 100%;
  margin: 0 0 2px;
  border-radius: 8px;
  overflow: hidden;
}
.inbox-shell.wa-inbox img.chat-media:not(.chat-sticker) {
  display: block;
  width: 260px;
  height: 260px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  margin: 0;
  background: #dfe5e7;
}
.inbox-shell.wa-inbox video.chat-media {
  display: block;
  width: 260px;
  height: 260px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 0 2px;
  background: #000;
}
.inbox-shell.wa-inbox .chat-sticker {
  width: 140px;
  height: 140px;
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  margin: 2px 0 4px;
}
.inbox-shell.wa-inbox .chat-audio {
  display: block;
  width: 260px;
  max-width: 100%;
  margin: 4px 0;
}
.inbox-shell.wa-inbox .chat-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0;
  border-radius: 8px;
  background: rgba(11, 20, 26, .04);
  color: inherit;
  text-decoration: none;
  width: 260px;
  max-width: 100%;
  box-sizing: border-box;
}
.inbox-shell.wa-inbox .chat-doc i { color: var(--wa-teal); font-size: 20px; }
.inbox-shell.wa-inbox .chat-doc strong { display: block; font-size: 13px; }
.inbox-shell.wa-inbox .chat-doc small { color: var(--wa-muted); font-size: 11px; }
.inbox-shell.wa-inbox .chat-caption {
  margin-top: 4px;
  white-space: pre-wrap;
  font-size: 14px;
}

.inbox-shell.wa-inbox .wa-vcard {
  width: 260px;
  max-width: 100%;
  margin: 0 0 2px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(11, 20, 26, .04);
  box-sizing: border-box;
}
.inbox-shell.wa-inbox .chat-bubble.outgoing .wa-vcard {
  background: rgba(11, 20, 26, .06);
}
.inbox-shell.wa-inbox .wa-vcard-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 10px;
}
.inbox-shell.wa-inbox .wa-vcard-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #dfe5e7;
  color: #54656f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.inbox-shell.wa-inbox .wa-vcard-avatar i { font-size: 18px; }
.inbox-shell.wa-inbox .wa-vcard-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inbox-shell.wa-inbox .wa-vcard-meta strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--wa-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-shell.wa-inbox .wa-vcard-meta span {
  font-size: 12.5px;
  color: var(--wa-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-shell.wa-inbox .wa-vcard-company {
  font-size: 12px !important;
}
.inbox-shell.wa-inbox .wa-vcard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(11, 20, 26, .08);
}
.inbox-shell.wa-inbox .wa-vcard-actions button,
.inbox-shell.wa-inbox .wa-vcard-actions a {
  border: none;
  background: transparent;
  color: #027eb5;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.inbox-shell.wa-inbox .wa-vcard-actions button + button,
.inbox-shell.wa-inbox .wa-vcard-actions button + a,
.inbox-shell.wa-inbox .wa-vcard-actions a + button {
  border-left: 1px solid rgba(11, 20, 26, .08);
}
.inbox-shell.wa-inbox .wa-vcard-actions button:hover,
.inbox-shell.wa-inbox .wa-vcard-actions a:hover {
  background: rgba(11, 20, 26, .04);
}
.inbox-shell.wa-inbox .wa-vcard-empty .wa-vcard-actions { display: none; }
.inbox-shell.wa-inbox .wa-location {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(11, 20, 26, .04);
  color: inherit;
  text-decoration: none;
  width: 260px;
  max-width: 100%;
  box-sizing: border-box;
}
.inbox-shell.wa-inbox .wa-location i { color: #ea4335; font-size: 18px; }
.inbox-shell.wa-inbox .wa-location strong { display: block; font-size: 13px; }
.inbox-shell.wa-inbox .wa-location small { color: var(--wa-muted); font-size: 11px; }

@media (max-width: 480px) {
  .inbox-shell.wa-inbox .chat-media-link,
  .inbox-shell.wa-inbox img.chat-media:not(.chat-sticker),
  .inbox-shell.wa-inbox video.chat-media,
  .inbox-shell.wa-inbox .chat-audio,
  .inbox-shell.wa-inbox .chat-doc,
  .inbox-shell.wa-inbox .wa-vcard,
  .inbox-shell.wa-inbox .wa-location {
    width: 220px;
  }
  .inbox-shell.wa-inbox img.chat-media:not(.chat-sticker),
  .inbox-shell.wa-inbox video.chat-media {
    height: 220px;
  }
}

.inbox-shell.wa-inbox .wa-bubble-caret {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--wa-muted);
  opacity: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: opacity .12s ease, background .12s ease;
  z-index: 2;
}

.inbox-shell.wa-inbox .chat-bubble.incoming .wa-bubble-caret { right: 4px; left: auto; }
.inbox-shell.wa-inbox .chat-bubble:hover .wa-bubble-caret,
.inbox-shell.wa-inbox .chat-bubble:focus-within .wa-bubble-caret { opacity: 1; }
.inbox-shell.wa-inbox .wa-bubble-caret:hover { background: rgba(11, 20, 26, .06); }

.inbox-shell.wa-inbox .wa-bubble-flag {
  font-size: 10px;
  color: var(--wa-muted);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.inbox-shell.wa-inbox .wa-bubble-flag.star { color: #F7C948; }

.inbox-shell.wa-inbox .wa-reply-quote {
  display: block;
  width: 100%;
  border: none;
  border-left: 3px solid var(--wa-teal);
  background: rgba(11, 20, 26, .04);
  border-radius: 4px;
  padding: 4px 7px;
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--wa-muted);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}
.inbox-shell.wa-inbox .wa-reply-quote strong {
  display: block;
  color: var(--wa-teal);
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-shell.wa-inbox .wa-reply-quote span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-shell.wa-inbox .wa-reply-quote:hover {
  background: rgba(11, 20, 26, .07);
}
.inbox-shell.wa-inbox .wa-msg-row.is-flash .chat-bubble {
  animation: waReplyFlash .9s ease;
}
@keyframes waReplyFlash {
  0%, 100% { box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
  35% { box-shadow: 0 0 0 3px rgba(0, 168, 132, .35); }
}

.inbox-shell.wa-inbox .wa-reaction-chip {
  position: absolute;
  left: 8px;
  bottom: -12px;
  background: #fff;
  border: 1px solid var(--wa-border);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(11, 20, 26, .08);
  z-index: 2;
  pointer-events: none;
  line-height: 1.3;
}

.inbox-shell.wa-inbox .chat-bubble.outgoing .wa-reaction-chip {
  left: 8px;
  right: auto;
}

.inbox-shell.wa-inbox .wa-msg-row:has(.wa-reaction-chip) {
  margin-bottom: 14px;
}

.wa-msg-menu {
  position: fixed;
  z-index: 10055;
  min-width: 210px;
  max-width: 240px;
  right: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(11, 20, 26, .28);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--wa-text, #111b21);
}

.wa-msg-menu .wa-react-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 4px 6px 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--wa-border, #e9edef);
}

.wa-msg-menu .wa-react-bar button {
  border: none;
  background: transparent;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.wa-msg-menu .wa-react-bar button:hover {
  background: var(--wa-panel, #f0f2f5);
  transform: scale(1.12);
}

.wa-msg-menu > button {
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--wa-text, #111b21);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
}

.wa-msg-menu > button i {
  width: 16px;
  color: var(--wa-icon, #54656f);
  text-align: center;
}

.wa-msg-menu > button:hover {
  background: var(--wa-panel, #f0f2f5);
}

.wa-msg-menu > button.danger {
  color: #EA0038;
}

.wa-msg-menu > button.danger i {
  color: #EA0038;
}

.wa-msg-menu .wa-menu-sep {
  height: 1px;
  background: var(--wa-border, #e9edef);
  margin: 4px 0;
}

.inbox-shell.wa-inbox .wa-reply-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border-radius: 16px;
  border-left: 4px solid var(--wa-teal);
}

.inbox-shell.wa-inbox .wa-reply-preview strong {
  display: block;
  font-size: 12px;
  color: var(--wa-teal);
  margin-bottom: 1px;
}

.inbox-shell.wa-inbox .wa-reply-preview span {
  display: block;
  font-size: 12.5px;
  color: var(--wa-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.inbox-shell.wa-inbox .wa-reply-preview > div {
  flex: 1;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-note-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #FFF7D1;
  border-radius: 16px;
  border-left: 4px solid #D97706;
}

.inbox-shell.wa-inbox .wa-note-preview strong {
  display: block;
  font-size: 12px;
  color: #B45309;
  margin-bottom: 1px;
}

.inbox-shell.wa-inbox .wa-note-preview span {
  display: block;
  font-size: 12.5px;
  color: #92400E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.inbox-shell.wa-inbox .wa-note-preview > div {
  flex: 1;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-note-dismiss {
  flex-shrink: 0;
  align-self: flex-end;
  width: 36px;
  height: 36px;
  color: #B45309;
}

.inbox-shell.wa-inbox .wa-note-dismiss:hover {
  background: rgba(180, 83, 9, 0.12);
}

/* ---- Composer ---- */
.inbox-shell.wa-inbox .chat-composer {
  background: var(--wa-composer);
  border-top: none;
  padding: 8px;
  gap: 8px;
  position: relative;
}
.inbox-shell.wa-inbox .chat-composer.is-tpl-open {
  padding: 6px 8px 8px;
  gap: 0;
}

.inbox-shell.wa-inbox .window-banner {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
}

.inbox-shell.wa-inbox .window-banner.open {
  background: rgba(0, 128, 105, 0.1);
  color: var(--wa-teal);
  border-color: rgba(0, 128, 105, 0.22);
}

.inbox-shell.wa-inbox .window-banner .linkish {
  color: var(--wa-teal);
}

.inbox-shell.wa-inbox .template-picker {
  background: #fff;
  border-radius: 8px;
  border-color: var(--wa-border);
}

.inbox-shell.wa-inbox .composer-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

.inbox-shell.wa-inbox .composer-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: #fff;
  border-radius: 24px;
  padding: 6px 10px 6px 4px;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
  min-height: 52px;
  max-height: 200px;
  overflow: visible;
}

.inbox-shell.wa-inbox .composer-shell.is-tall {
  /* Height follows textarea; do not force ~7-line shell for short drafts. */
  align-items: flex-end;
}

.inbox-shell.wa-inbox .composer-shell.as-note {
  background: #FFF7D1;
}

.inbox-shell.wa-inbox .wa-attach {
  position: relative;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0;
}

.inbox-shell.wa-inbox .wa-attach-btn {
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: var(--wa-icon);
  border-radius: 50%;
}

.inbox-shell.wa-inbox .wa-attach-btn.note-on {
  color: #B45309;
  background: rgba(217, 119, 6, 0.12);
}

.inbox-shell.wa-inbox .wa-attach-menu {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  min-width: 210px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(11, 20, 26, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform-origin: bottom left;
  animation: waMenuIn .14s ease-out both;
}

[dir="rtl"] .inbox-shell.wa-inbox .wa-attach-menu {
  transform-origin: bottom right;
}

.inbox-shell.wa-inbox .wa-attach-item {
  border: none;
  background: transparent;
  text-align: start;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wa-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.inbox-shell.wa-inbox .wa-attach-item:hover {
  background: var(--wa-panel);
}

.inbox-shell.wa-inbox .wa-attach-item.is-disabled,
.inbox-shell.wa-inbox .wa-attach-item:disabled {
  opacity: 0.55;
  cursor: pointer;
}

.inbox-shell.wa-inbox .wa-attach-glyph {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}

.inbox-shell.wa-inbox .wa-attach-glyph.photos { background: #007BF7; }
.inbox-shell.wa-inbox .wa-attach-glyph.docs { background: #7F66FF; }
.inbox-shell.wa-inbox .wa-attach-glyph.files { background: #02A698; }
.inbox-shell.wa-inbox .wa-attach-glyph.audio { background: #F26522; }
.inbox-shell.wa-inbox .wa-attach-glyph.contact { background: #00A884; }
.inbox-shell.wa-inbox .wa-attach-glyph.templates { background: #009DE2; }
.inbox-shell.wa-inbox .wa-attach-glyph.note { background: #D9A441; }

.inbox-shell.wa-inbox .composer-input-wrap {
  flex: 1;
  min-width: 0;
  display: block;
  position: relative;
  align-self: flex-end;
}

.wa-fmt-popup {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid rgba(11, 20, 26, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(11, 20, 26, 0.16);
}

.wa-fmt-popup .wa-fmt-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #54656f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}

.wa-fmt-popup .wa-fmt-btn:hover {
  background: rgba(11, 20, 26, 0.06);
  color: #111b21;
}

.wa-fmt-popup .wa-fmt-sep {
  width: 1px;
  height: 16px;
  background: rgba(11, 20, 26, 0.12);
  margin: 0 3px;
}

.inbox-shell.wa-inbox .chat-composer textarea {
  /* Override generic .chat-composer textarea { flex:1 } — that caps scrollHeight. */
  flex: 0 0 auto !important;
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 40px;
  max-height: 168px; /* ~7 lines, then scroll */
  padding: 10px 6px 10px 4px;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: none;
  color: var(--wa-text);
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  field-sizing: content;
}

.inbox-shell.wa-inbox .chat-composer textarea:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.inbox-shell.wa-inbox .chat-composer textarea.as-note {
  background: transparent;
}

.inbox-shell.wa-inbox .composer-btn.send.wa-send-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wa-send);
  color: #fff;
  font-size: 16px;
  box-shadow: none;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 0;
  transition: transform .14s ease, background-color .14s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.inbox-shell.wa-inbox .composer-btn.send.wa-send-btn:hover {
  background: #008069;
  transform: scale(1.04);
}

.inbox-shell.wa-inbox .composer-btn.send.wa-send-btn:active {
  transform: scale(.94);
}

.inbox-shell.wa-inbox .wa-mic-btn {
  background: var(--wa-send);
}
.inbox-shell.wa-inbox .wa-mic-btn i {
  font-size: 18px;
}

.inbox-shell.wa-inbox .wa-file-input {
  display: none !important;
}

.inbox-shell.wa-inbox .wa-upload-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--wa-border);
}

.inbox-shell.wa-inbox .wa-upload-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 128, 105, .1);
  color: var(--wa-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inbox-shell.wa-inbox .wa-upload-meta {
  flex: 1;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-upload-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--wa-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-shell.wa-inbox .wa-upload-meta small {
  color: var(--wa-muted);
  font-size: 11px;
}

.inbox-shell.wa-inbox .wa-recording-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 8px 6px 10px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--wa-border);
  box-shadow: 0 1px 2px rgba(11, 20, 26, .06);
  color: var(--wa-text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.inbox-shell.wa-inbox .wa-rec-trash,
.inbox-shell.wa-inbox .wa-rec-pause {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #111b21;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.inbox-shell.wa-inbox .wa-rec-trash:hover,
.inbox-shell.wa-inbox .wa-rec-pause:hover {
  background: rgba(11, 20, 26, .06);
}

.inbox-shell.wa-inbox .wa-rec-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 58px;
  color: #667781;
  font-weight: 500;
}

.inbox-shell.wa-inbox .wa-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EA0038;
  box-shadow: 0 0 0 0 rgba(234, 0, 56, .45);
  animation: waRecPulse 1.2s ease infinite;
}

.inbox-shell.wa-inbox .wa-rec-wave {
  flex: 1;
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.inbox-shell.wa-inbox .wa-rec-wave span {
  width: 3px;
  border-radius: 2px;
  background: #8696a0;
  display: block;
  min-height: 4px;
}

.inbox-shell.wa-inbox .wa-rec-send {
  width: 44px;
  height: 44px;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: #111b21;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(17, 27, 33, .25);
}
.inbox-shell.wa-inbox .wa-rec-send:hover {
  background: #000;
}

.inbox-shell.wa-inbox .wa-voice {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 0;
  min-height: 0;
  position: relative;
  padding: 0;
  vertical-align: top;
}
.inbox-shell.wa-inbox .chat-bubble:has(.wa-voice) {
  display: inline-block;
  width: fit-content;
  max-width: min(78%, 300px);
  padding: 4px 6px 2px 5px;
  min-width: 0;
  align-self: flex-end;
}
.inbox-shell.wa-inbox .chat-bubble.incoming:has(.wa-voice) {
  align-self: flex-start;
}
.inbox-shell.wa-inbox .chat-bubble:has(.wa-voice) .bubble-meta {
  float: none;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 2px 0 0;
  top: 0;
  clear: both;
  position: static;
}
.inbox-shell.wa-inbox .wa-voice audio { display: none !important; }

.inbox-shell.wa-inbox .wa-voice-face {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.inbox-shell.wa-inbox .wa-voice-face-av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #6ec9ff, #53bdeb);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.inbox-shell.wa-inbox .wa-voice-face-mic {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00a884;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 7px;
  border: 1.5px solid var(--wa-out, #d9fdd3);
}

.inbox-shell.wa-inbox .wa-voice-play {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #54656f;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}
.inbox-shell.wa-inbox .wa-voice-play:hover { color: #111b21; }
.inbox-shell.wa-inbox .wa-voice-play .fa-play { transform: translateX(1px); }

.inbox-shell.wa-inbox .wa-voice-track {
  width: 150px;
  flex: 0 0 150px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 2px;
  padding-top: 1px;
}

.inbox-shell.wa-inbox .wa-voice-wave {
  position: relative;
  height: 18px;
  width: 100%;
  display: block;
  cursor: pointer;
  touch-action: none;
}

/* Slim waveform via CSS mask — no bar spam */
.inbox-shell.wa-inbox .wa-voice-rail,
.inbox-shell.wa-inbox .wa-voice-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 18px;
  margin-top: -9px;
  border-radius: 2px;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='18' viewBox='0 0 220 18'%3E%3Cpath fill='%23000' d='M0 8h2v2H0zm4 3h2V7H4zm4-5h2v12H8zm4 2h2v8h-2zm4-3h2v14h-2zm4 4h2V6h-2zm4-2h2v12h-2zm4 3h2V7h-2zm4-4h2v14h-2zm4 2h2v10h-2zm4-1h2v12h-2zm4 3h2V7h-2zm4-2h2v12h-2zm4 1h2v10h-2zm4-3h2v14h-2zm4 5h2V6h-2zm4-2h2v12h-2zm4 2h2v8h-2zm4-1h2v10h-2zm4 3h2V7h-2zm4-4h2v14h-2zm4 2h2v10h-2zm4-1h2v12h-2zm4 4h2V6h-2zm4-2h2v12h-2zm4 1h2v10h-2zm4-3h2v14h-2zm4 5h2V6h-2zm4-1h2v10h-2zm4 2h2V8h-2zm4-1h2v8h-2zm4 0h2v6h-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='18' viewBox='0 0 220 18'%3E%3Cpath fill='%23000' d='M0 8h2v2H0zm4 3h2V7H4zm4-5h2v12H8zm4 2h2v8h-2zm4-3h2v14h-2zm4 4h2V6h-2zm4-2h2v12h-2zm4 3h2V7h-2zm4-4h2v14h-2zm4 2h2v10h-2zm4-1h2v12h-2zm4 3h2V7h-2zm4-2h2v12h-2zm4 1h2v10h-2zm4-3h2v14h-2zm4 5h2V6h-2zm4-2h2v12h-2zm4 2h2v8h-2zm4-1h2v10h-2zm4 3h2V7h-2zm4-4h2v14h-2zm4 2h2v10h-2zm4-1h2v12h-2zm4 4h2V6h-2zm4-2h2v12h-2zm4 1h2v10h-2zm4-3h2v14h-2zm4 5h2V6h-2zm4-1h2v10h-2zm4 2h2V8h-2zm4-1h2v8h-2zm4 0h2v6h-2z'/%3E%3C/svg%3E");
  -webkit-mask-size: 220px 18px;
  mask-size: 220px 18px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}
.inbox-shell.wa-inbox .wa-voice-rail {
  color: rgba(17, 27, 33, .28);
  width: 100% !important;
}
.inbox-shell.wa-inbox .wa-voice-fill {
  color: rgba(17, 27, 33, .62);
  width: 0;
  overflow: hidden;
}
.inbox-shell.wa-inbox .chat-bubble.incoming .wa-voice-rail { color: rgba(17, 27, 33, .22); }
.inbox-shell.wa-inbox .chat-bubble.incoming .wa-voice-fill { color: rgba(17, 27, 33, .55); }

.inbox-shell.wa-inbox .wa-voice-knob {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: #53bdeb;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  pointer-events: none;
  z-index: 1;
}
.inbox-shell.wa-inbox .wa-voice-dur {
  font-size: 11px;
  color: #667781;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-height: 11px;
}

.inbox-shell.wa-inbox .wa-msg-footer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 12px 4px;
  max-width: none;
}
.inbox-shell.wa-inbox .wa-msg-row.is-out .wa-msg-footer {
  margin-left: auto;
  margin-right: 10px;
  flex-direction: row-reverse;
}
.inbox-shell.wa-inbox .wa-sent-by {
  font-size: 11px;
  font-weight: 500;
  color: #667781;
  white-space: nowrap;
  overflow: visible;
  max-width: none;
}

@keyframes waRecPulse {
  0% { box-shadow: 0 0 0 0 rgba(234, 0, 56, .45); }
  70% { box-shadow: 0 0 0 8px rgba(234, 0, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 0, 56, 0); }
}

.inbox-shell.wa-inbox .wa-rec-cancel {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--wa-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.inbox-shell.wa-inbox .wa-rec-stop {
  border: none;
  border-radius: 999px;
  background: var(--wa-send);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inbox-shell.wa-inbox .chat-audio {
  width: 260px;
  max-width: 100%;
  margin: 2px 0 4px;
  height: 36px;
}

.inbox-shell.wa-inbox .chat-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 0 4px;
  border-radius: 8px;
  background: rgba(11, 20, 26, .04);
  color: var(--wa-text);
  text-decoration: none;
  width: 260px;
  max-width: 100%;
  box-sizing: border-box;
}

.inbox-shell.wa-inbox .chat-doc i {
  color: var(--wa-teal);
  font-size: 18px;
}

.inbox-shell.wa-inbox .chat-doc span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.inbox-shell.wa-inbox .chat-doc strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-shell.wa-inbox .chat-doc small {
  color: var(--wa-muted);
  font-size: 11px;
}

.inbox-shell.wa-inbox .chat-caption {
  margin-top: 2px;
}

.inbox-shell.wa-inbox .composer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  min-height: 0;
}

.inbox-shell.wa-inbox .composer-tools:empty {
  display: none;
}

.inbox-shell.wa-inbox .composer-hint,
.inbox-shell.wa-inbox .wa-upload-status {
  font-size: 10px;
  color: var(--wa-muted);
  font-weight: 400;
}

.inbox-shell.wa-inbox .wa-upload-status {
  position: absolute;
  left: 22px;
  bottom: 4px;
  pointer-events: none;
  z-index: 1;
}

.inbox-shell.wa-inbox .wa-note-badge {
  font-size: 11px;
  font-weight: 600;
  color: #B45309;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---- Empty thread ---- */
.inbox-shell.wa-inbox .wa-empty-thread {
  background: #F0F2F5;
  width: 100%;
  height: 100%;
  margin: 0;
  justify-content: center;
  gap: 10px;
  padding: 28px 40px;
  border-bottom: 6px solid var(--wa-green);
}

.inbox-shell.wa-inbox .wa-empty-illustration {
  width: 120px;
  max-width: 40%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  opacity: 0.9;
}

.inbox-shell.wa-inbox .wa-empty-illustration i {
  font-size: 56px;
  color: #D1D7DB;
}

.inbox-shell.wa-inbox .wa-empty-thread h3 {
  font-size: 28px;
  font-weight: 300;
  color: #41525D;
  font-family: var(--font-body);
  letter-spacing: -0.02em;
  margin: 0;
}

.inbox-shell.wa-inbox .wa-empty-thread p {
  font-size: 13px;
  color: var(--wa-muted);
  max-width: 420px;
  line-height: 1.55;
  margin: 0;
  text-align: center;
}

/* ---- Contact info panel ---- */
.inbox-shell.wa-inbox .wa-contact-header {
  background: var(--wa-header);
  border-bottom: 1px solid var(--wa-border);
  gap: 10px;
  min-height: 46px;
  padding: 6px 12px;
}

.inbox-shell.wa-inbox .wa-contact-header h3 {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wa-text);
  font-family: var(--font-body);
}

.inbox-shell.wa-inbox .contact-pane .inbox-pane-body {
  background: var(--wa-panel);
}

.inbox-shell.wa-inbox .contact-panel {
  padding: 8px;
  gap: 8px;
  animation: waPanelIn .2s cubic-bezier(.2, .75, .35, 1) both;
}

.inbox-shell.wa-inbox .contact-panel .panel-block {
  background: #fff;
  padding: 12px 14px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(233, 237, 239, .9);
  box-shadow: 0 1px 0 rgba(11, 20, 26, .02);
}

.inbox-shell.wa-inbox .wa-contact-identity {
  padding: 8px 10px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.inbox-shell.wa-inbox .wa-contact-identity .conv-avatar {
  width: 40px;
  height: 40px;
  margin: 0;
  font-size: 14.5px;
  flex-shrink: 0;
}

.inbox-shell.wa-inbox .wa-identity-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.inbox-shell.wa-inbox .wa-contact-identity strong {
  display: block;
  margin: 0;
  color: var(--wa-text);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-shell.wa-inbox .wa-contact-identity .muted {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--wa-muted);
}

.inbox-shell.wa-inbox .wa-contact-identity .wa-id-sep {
  opacity: .55;
}

.inbox-shell.wa-inbox .contact-panel .panel-block h4 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.inbox-shell.wa-inbox .contact-panel .panel-block h4 i {
  color: var(--wa-teal);
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.inbox-shell.wa-inbox .wa-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.inbox-shell.wa-inbox .wa-link-btn {
  border: none;
  background: transparent;
  color: var(--wa-teal);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.inbox-shell.wa-inbox .wa-link-btn:hover {
  text-decoration: underline;
}

.inbox-shell.wa-inbox .wa-panel-help {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--wa-muted);
  line-height: 1.4;
}

.inbox-shell.wa-inbox .wa-panel-empty {
  display: block;
  font-size: 11.5px;
  margin: 2px 0 4px;
}

.inbox-shell.wa-inbox .wa-panel-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.inbox-shell.wa-inbox .wa-panel-actions .btn {
  width: 100%;
  justify-content: center;
  font-size: 12px;
  padding: 6px 10px;
}

.inbox-shell.wa-inbox .wa-panel-textarea {
  min-height: 54px;
  resize: vertical;
  font-size: 12.5px;
}

.inbox-shell.wa-inbox .wa-mini-label {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-muted);
}

.inbox-shell.wa-inbox .wa-inline-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inbox-shell.wa-inbox .wa-inline-field .form-control {
  flex: 1;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-inline-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inbox-shell.wa-inbox .wa-applied-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.inbox-shell.wa-inbox .wa-label-pill {
  border: 1px solid color-mix(in srgb, var(--label-color) 35%, #E9EDEF);
  background: color-mix(in srgb, var(--label-color) 12%, #fff);
  color: var(--label-color);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
}

.inbox-shell.wa-inbox .wa-label-pill.applied {
  background: color-mix(in srgb, var(--label-color) 16%, #fff);
}

.inbox-shell.wa-inbox .wa-label-pill i {
  font-size: 9px;
}

.inbox-shell.wa-inbox .wa-label-pill:hover {
  filter: brightness(0.97);
}

.inbox-shell.wa-inbox .wa-label-composer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inbox-shell.wa-inbox .wa-label-suggest {
  position: relative;
  z-index: 1;
}

.inbox-shell.wa-inbox .wa-label-suggest:focus-within {
  z-index: 60;
}

.inbox-shell.wa-inbox .wa-label-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-label-suggest .label-menu {
  display: none;
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 4px);
  top: auto;
  width: min(200px, 100%);
  z-index: 40;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid #E9EDEF;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(17, 27, 33, .12);
}

.inbox-shell.wa-inbox .wa-label-suggest:focus-within .label-menu {
  display: block;
}

.inbox-shell.wa-inbox .wa-label-suggest .label-menu-empty {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wa-muted, #667781);
}

.inbox-shell.wa-inbox .wa-label-suggest .label-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-label-suggest .label-menu-item:hover,
.inbox-shell.wa-inbox .wa-label-suggest .label-menu-item.is-active {
  background: #f0f2f5;
}

.inbox-shell.wa-inbox .wa-label-suggest .label-menu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.inbox-shell.wa-inbox .wa-label-input-wrap .form-control {
  width: 100%;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-label-save {
  flex-shrink: 0;
  min-width: 58px;
  background: var(--wa-teal);
  border-color: var(--wa-teal);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
}

.inbox-shell.wa-inbox .wa-label-save:hover {
  background: #006d5b;
  border-color: #006d5b;
}

.inbox-shell.wa-inbox .wa-vars-block .wa-section-head {
  margin-bottom: 6px;
}

.inbox-shell.wa-inbox .wa-var-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.inbox-shell.wa-inbox .wa-var-ico-btn {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wa-teal);
  cursor: pointer;
  padding: 0;
}

.inbox-shell.wa-inbox .wa-var-ico-btn i {
  font-size: 12px;
}

.inbox-shell.wa-inbox .wa-var-ico-btn:hover {
  background: color-mix(in srgb, var(--wa-teal) 10%, #fff);
}

.inbox-shell.wa-inbox .wa-var-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}

.inbox-shell.wa-inbox .wa-var-line {
  display: grid;
  grid-template-columns: minmax(72px, 0.9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 6px;
}

.inbox-shell.wa-inbox .wa-var-line > label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wa-text);
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-shell.wa-inbox .wa-var-line-field {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-var-line-field .form-control,
.inbox-shell.wa-inbox .wa-var-picker > .form-control,
.inbox-shell.wa-inbox .wa-var-add-inline .form-control {
  height: 30px;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 7px;
}

.inbox-shell.wa-inbox .wa-var-line-field .form-control {
  height: 26px;
  min-height: 26px;
  padding: 2px 6px;
  font-size: 11.5px;
  border-radius: 6px;
  flex: 1;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-var-remove {
  width: 22px;
  height: 22px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--wa-muted);
  cursor: pointer;
  padding: 0;
}

.inbox-shell.wa-inbox .wa-var-remove i {
  font-size: 10px;
}

.inbox-shell.wa-inbox .wa-var-remove:hover {
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, #fff);
  color: var(--danger, #dc2626);
}

.inbox-shell.wa-inbox .wa-var-picker {
  position: relative;
}

.inbox-shell.wa-inbox .wa-var-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  z-index: 30;
  max-height: 180px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(11, 20, 26, 0.12);
  padding: 3px;
}

.inbox-shell.wa-inbox .wa-var-picker-item {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
}

.inbox-shell.wa-inbox .wa-var-picker-item:hover,
.inbox-shell.wa-inbox .wa-var-picker-item.is-active {
  background: color-mix(in srgb, var(--wa-teal) 9%, #fff);
}

.inbox-shell.wa-inbox .wa-var-picker-item strong {
  font-size: 12px;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-var-picker-item span {
  font-size: 10.5px;
  color: var(--wa-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.inbox-shell.wa-inbox .wa-var-picker-empty {
  padding: 8px;
  font-size: 11.5px;
  color: var(--wa-muted);
  text-align: center;
}

.inbox-shell.wa-inbox .wa-var-add-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 26px 22px;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.inbox-shell.wa-inbox .wa-var-add-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--wa-text);
  max-width: 64px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-shell.wa-inbox .wa-var-add-go {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--wa-teal);
  color: #fff;
  cursor: pointer;
  padding: 0;
}

.inbox-shell.wa-inbox .wa-var-add-go:hover {
  filter: brightness(0.95);
}

.inbox-shell.wa-inbox .wa-var-add-go i {
  font-size: 11px;
}

.inbox-shell.wa-inbox .wa-vars-block .wa-panel-empty {
  margin: 0 0 6px;
  font-size: 11.5px;
}

.inbox-shell.wa-inbox .wa-vars-block .wa-sys-badge {
  font-size: 8px;
  padding: 0 4px;
}

.inbox-shell.wa-inbox .wa-var-create-modal-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inbox-shell.wa-inbox .wa-sys-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wa-teal);
  background: rgba(0, 128, 105, .1);
  border-radius: 999px;
  padding: 1px 6px;
}

.inbox-shell.wa-inbox .wa-enrollment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.inbox-shell.wa-inbox .wa-enrollment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--wa-panel);
}

.inbox-shell.wa-inbox .wa-enrollment-row strong {
  display: block;
  font-size: 12.5px;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-enrollment-row small {
  display: block;
  font-size: 11px;
  color: var(--wa-muted);
}

.inbox-shell.wa-inbox .wa-enrollment-row .btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 4px 8px;
}

.inbox-shell.wa-inbox .wa-panel-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inbox-shell.wa-inbox .wa-bot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wa-border);
}

.inbox-shell.wa-inbox .wa-bot-row strong {
  display: block;
  font-size: 12.5px;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-bot-row small {
  display: block;
  font-size: 11px;
  color: var(--wa-muted);
}

.inbox-shell.wa-inbox .wa-activity-grid {
  display: grid;
  gap: 8px;
}

.inbox-shell.wa-inbox .wa-activity-grid > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.inbox-shell.wa-inbox .wa-activity-grid span {
  color: var(--wa-muted);
}

.inbox-shell.wa-inbox .wa-activity-grid strong {
  color: var(--wa-text);
  font-weight: 500;
  text-align: right;
}

.inbox-shell.wa-inbox .contact-panel .form-control {
  font-size: 12.5px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  border-color: #E9EDEF;
  background: #F7F8FA;
}

.inbox-shell.wa-inbox .contact-panel .form-control:focus {
  background: #fff;
  border-color: rgba(0, 128, 105, .45);
  box-shadow: 0 0 0 2px rgba(0, 128, 105, .1);
}

.inbox-shell.wa-inbox .contact-panel .wa-var-line-field .form-control {
  height: 26px;
  min-height: 26px;
  padding: 2px 6px;
  font-size: 11.5px;
  border-radius: 6px;
}

.inbox-shell.wa-inbox .contact-panel .priority-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inbox-shell.wa-inbox .contact-panel .priority-chip {
  height: 26px;
  padding: 0 9px;
  font-size: 11px;
  border-radius: 999px;
}

.inbox-shell.wa-inbox .wa-window-card {
  padding: 8px 10px !important;
}

.inbox-shell.wa-inbox .wa-window-card.is-disabled {
  opacity: 0.55;
  cursor: pointer;
  user-select: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  display: block;
}

.inbox-shell.wa-inbox .wa-window-card.is-disabled .wa-window-icon {
  color: var(--muted, #667781);
  background: rgba(102, 119, 129, .12);
}

.inbox-shell.wa-inbox .wa-window-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inbox-shell.wa-inbox .wa-window-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--wa-teal);
  background: rgba(0, 128, 105, .11);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}

.inbox-shell.wa-inbox .wa-window-icon.closed {
  color: #B54708;
  background: rgba(181, 71, 8, .1);
}

.inbox-shell.wa-inbox .wa-window-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}

.inbox-shell.wa-inbox .wa-window-copy strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-window-copy span {
  font-size: 12px;
  color: var(--wa-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-shell.wa-inbox .wa-window-meta {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--wa-teal);
  line-height: 1;
}

.inbox-shell.wa-inbox .wa-window-template {
  width: 28px;
  height: 28px;
  flex: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: var(--wa-teal);
  color: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.inbox-shell.wa-inbox .wa-window-template i {
  font-size: 12px;
}

.inbox-shell.wa-inbox .wa-window-template:hover {
  filter: brightness(0.96);
}

.inbox-shell.wa-inbox .wa-danger-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
}

.inbox-shell.wa-inbox .wa-action-btn {
  width: 100%;
  border: none;
  background: #fff;
  text-align: left;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--wa-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--wa-border);
}

.inbox-shell.wa-inbox .wa-action-btn:last-child {
  border-bottom: none;
}

.inbox-shell.wa-inbox .wa-action-btn:hover {
  background: #F5F6F6;
}

.inbox-shell.wa-inbox .wa-action-btn.danger {
  color: #EA0038;
}

.inbox-shell.wa-inbox .wa-action-btn.danger i,
.inbox-shell.wa-inbox .wa-action-btn i {
  width: 16px;
  text-align: center;
  font-size: 12px;
}

.inbox-shell.wa-inbox .wa-action-btn.danger i {
  color: #EA0038;
}

.inbox-shell.wa-inbox .wa-action-btn i {
  color: var(--wa-icon);
}

.inbox-shell.wa-inbox .priority-chip {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.inbox-shell.wa-inbox .priority-chip.active.normal {
  background: rgba(0, 128, 105, 0.1);
  color: var(--wa-teal);
  border-color: rgba(0, 128, 105, 0.28);
}

.inbox-shell.wa-inbox .toggle-switch input:checked + .toggle-slider {
  background: var(--wa-green-dark);
}

/* ---- Menus & modal ---- */
.inbox-shell.wa-inbox .inbox-menu-panel {
  border-radius: 4px;
  border: none;
  box-shadow: 0 2px 8px rgba(11, 20, 26, 0.18), 0 0 0 1px rgba(11, 20, 26, 0.04);
  min-width: 180px;
  padding: 4px 0;
  transform-origin: top right;
  animation: waMenuIn .14s ease-out both;
}

.inbox-shell.wa-inbox .inbox-menu-panel button {
  border-radius: 0;
  padding: 7px 14px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .inbox-menu-panel button:hover {
  background: var(--wa-panel);
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .inbox-menu-panel button i {
  width: 14px;
  color: var(--wa-icon);
  font-size: 12px;
}

.inbox-shell.wa-inbox .inbox-modal {
  border-radius: 4px;
  border: none;
  box-shadow: 0 6px 24px rgba(11, 20, 26, 0.2);
}

.inbox-shell.wa-inbox .inbox-modal-head {
  background: var(--wa-teal);
  border-bottom: none;
  padding: 10px 14px;
  color: #fff;
}

.inbox-shell.wa-inbox .inbox-modal-head h3 {
  color: #fff;
  font-weight: 500;
  font-family: var(--font-body);
  font-size: 14px;
}

.inbox-shell.wa-inbox .inbox-modal-head .wa-icon-btn {
  color: #fff;
}

.inbox-shell.wa-inbox .inbox-modal-head .wa-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.inbox-shell.wa-inbox .inbox-modal .wa-search-wrap {
  margin-top: 8px !important;
}

.inbox-shell.wa-inbox .inbox-modal-item {
  padding: 8px 12px;
  font-size: 12.5px;
}

.inbox-shell.wa-inbox .inbox-modal-item:hover {
  background: var(--wa-panel);
}

.inbox-shell.wa-inbox .wa-newchat-create {
  margin: 4px 8px 12px;
  padding: 12px;
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  background: #f8faf9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inbox-shell.wa-inbox .wa-newchat-create-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inbox-shell.wa-inbox .wa-newchat-create-head > i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 128, 105, 0.12);
  color: var(--wa-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.inbox-shell.wa-inbox .wa-newchat-create-head strong {
  display: block;
  font-size: 13px;
  color: var(--wa-text);
}

.inbox-shell.wa-inbox .wa-newchat-create .btn {
  width: 100%;
  justify-content: center;
}

.inbox-shell.wa-inbox .wa-newchat-welcome {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inbox-shell.wa-inbox .wa-newchat-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FFF8E8;
  border: 1px solid #F5E1B3;
}

.inbox-shell.wa-inbox .wa-newchat-notice > i {
  color: #B45309;
  margin-top: 2px;
}

.inbox-shell.wa-inbox .wa-newchat-notice strong {
  display: block;
  font-size: 13px;
  color: #7C2D12;
  margin-bottom: 2px;
}

.inbox-shell.wa-inbox .wa-newchat-notice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #92400E;
}

.inbox-shell.wa-inbox .wa-newchat-target {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--wa-panel);
}

.inbox-shell.wa-inbox .wa-newchat-target strong {
  display: block;
  font-size: 13px;
}

.inbox-shell.wa-inbox .wa-newchat-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbox-shell.wa-inbox .wa-newchat-actions .btn {
  width: 100%;
  justify-content: center;
}

.inbox-shell.wa-inbox .empty-state.wa-list-empty {
  padding: 48px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.inbox-shell.wa-inbox .wa-list-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EEF0F2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.inbox-shell.wa-inbox .wa-list-empty-icon i {
  font-size: 22px;
  color: #A0AAB4;
  margin: 0;
  display: inline;
}

.inbox-shell.wa-inbox .empty-state.wa-list-empty h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--wa-text);
  margin: 0;
}

.inbox-shell.wa-inbox .empty-state.wa-list-empty p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wa-muted);
  margin: 0;
  max-width: 220px;
}

.inbox-shell.wa-inbox .empty-state.wa-list-empty p i {
  font-size: 11px;
  color: var(--wa-teal);
  display: inline;
  margin: 0 1px;
}

.inbox-shell.wa-inbox .template-picker {
  transform-origin: top right;
  animation: waMenuIn .14s ease-out both;
}

/* ---- Motion ---- */
@keyframes waFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes waMessageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes waPanelIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes waMenuIn {
  from { opacity: 0; transform: translateY(-3px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .inbox-shell.wa-inbox *,
  .inbox-shell.wa-inbox *::before,
  .inbox-shell.wa-inbox *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .inbox-shell.wa-inbox .inbox-layout,
  .inbox-shell.wa-inbox .inbox-layout.no-details,
  .inbox-shell.wa-inbox .inbox-layout.empty-thread {
    grid-template-columns: 290px 1fr;
  }
  .inbox-shell.wa-inbox .inbox-layout .contact-pane {
    display: none;
  }
}

@media (max-width: 900px) {
  .inbox-shell.wa-inbox .chat-thread {
    padding: 10px 12px 8px;
    background-size: auto;
  }
}

@media (max-width: 768px) {
  .inbox-shell.wa-inbox .inbox-layout,
  .inbox-shell.wa-inbox .inbox-layout.no-details,
  .inbox-shell.wa-inbox .inbox-layout.empty-thread {
    grid-template-columns: 1fr;
  }
  .inbox-shell.wa-inbox .inbox-layout .list-pane {
    max-height: 38vh;
  }
  .inbox-shell.wa-inbox .wa-chats-title {
    font-size: 15px !important;
  }
  .inbox-shell.wa-inbox .chat-bubble {
    max-width: 82%;
  }
  .inbox-shell.wa-inbox .wa-empty-thread h3 {
    font-size: 16px;
  }
  .inbox-shell.wa-inbox .thread-search {
    display: none;
  }
}

/* Flow alert modal */
.flow-alert {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
}
.flow-alert[hidden] { display: none !important; }
.flow-alert-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.flow-alert-card {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  padding: 28px 24px 22px;
  text-align: center;
  animation: flowAlertIn .18s ease both;
}
.flow-alert-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.flow-alert[data-type="success"] .flow-alert-icon {
  background: rgba(49, 162, 76, 0.12);
  color: #31A24C;
}
.flow-alert[data-type="error"] .flow-alert-icon {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.flow-alert[data-type="warning"] .flow-alert-icon {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.flow-alert[data-type="info"] .flow-alert-icon {
  background: rgba(24, 119, 242, 0.12);
  color: #1877F2;
}
.flow-alert-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.flow-alert-card p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
}
.flow-alert-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.flow-alert-ok,
.flow-alert-cancel {
  min-width: 112px;
  justify-content: center;
}
body.flow-alert-open { overflow: hidden; }
@keyframes flowAlertIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}


/* ---- WhatsApp accounts (calm) ---- */
.wa-accounts {
  gap: 12px;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wa-connect-chooser {
  margin: 0;
}
.wa-connect-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.wa-connect-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 18px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.wa-connect-card.is-disabled {
  opacity: 0.72;
}
.wa-connect-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wa-connect-card-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.wa-connect-card-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}
.wa-connect-card-chip {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-color) 70%, var(--card-bg));
}
.wa-connect-card-chip--rec {
  color: #0b6b3a;
  border-color: color-mix(in srgb, #25D366 35%, var(--border-light));
  background: color-mix(in srgb, #25D366 14%, #fff);
}
.wa-connect-card-chip--alt {
  color: var(--text-dark);
}
.wa-connect-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.wa-connect-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-dark);
}
.wa-connect-card-list .fa-check {
  margin-top: 2px;
  color: #25D366;
  font-size: 12px;
}
.wa-connect-card-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}
.wa-connect-card-btn {
  width: 100%;
  justify-content: center;
  gap: 8px;
}
.wa-connect-card-btn--alt {
  background: transparent;
  color: var(--text-dark);
  border: 1px solid var(--card-border);
  box-shadow: none;
}
.wa-connect-card-btn--alt:hover {
  background: color-mix(in srgb, var(--bg-color) 55%, var(--card-bg));
}

@media (max-width: 860px) {
  .wa-connect-cards {
    grid-template-columns: 1fr;
  }
}

.wa-panel {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
  overflow: hidden;
}
.wa-accounts > .wa-panel,
.wa-accounts > .wa-connect-chooser {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}
.wa-accounts > .wa-panel.wa-connect {
  overflow: visible;
}
.wa-panel.is-secondary {
  background: color-mix(in srgb, var(--glass-bg) 90%, var(--card-bg));
}
.wa-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.wa-panel-title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-panel-title .fa-whatsapp { color: #25D366; }
.wa-panel-sub {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.35;
}

.wa-business-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wa-business {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-business-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
}
.wa-business-copy {
  min-width: 0;
}
.wa-business-name {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-dark);
}
.wa-business-id {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.wa-business-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--text-dark);
  background: color-mix(in srgb, var(--bg-color) 80%, #fff);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 3px 9px;
  word-break: break-all;
}
.wa-business-count {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-muted);
}

.wa-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wa-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  position: relative;
  overflow: visible;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--bg-color) 45%, var(--card-bg));
  transition: border-color .15s, box-shadow .15s;
}
.wa-card:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--card-border));
  box-shadow: var(--shadow);
}
.wa-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding-right: 28px;
}
.wa-card-top > .fa-whatsapp {
  color: #25D366;
  font-size: 24px;
  line-height: 1;
}
.wa-card-menu {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 5;
}
.wa-card-menu > .wa-icon-btn {
  width: 26px;
  height: 26px;
  color: var(--text-muted);
}
.wa-card-menu-panel {
  top: calc(100% + 4px);
  right: 0;
  min-width: 170px;
  z-index: 20;
}
.wa-card-menu-panel button,
.wa-card-menu-panel a {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.wa-card-menu-panel button:hover,
.wa-card-menu-panel a:hover {
  background: rgba(24, 119, 242, 0.08);
}
.wa-card-menu-panel button i,
.wa-card-menu-panel a i {
  width: 14px;
  color: var(--text-muted);
  text-align: center;
}
.wa-card-menu-panel button.danger {
  color: var(--danger);
}
.wa-card-menu-panel button.danger i {
  color: var(--danger);
}
.wa-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
  max-width: 100%;
}
.wa-card .badge {
  font-size: 12px;
  padding: 4px 8px;
  font-weight: 650;
}
.wa-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  background: color-mix(in srgb, var(--bg-color) 70%, #fff);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.wa-chip-default {
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border-light));
}
.wa-chip-limit {
  color: var(--text-dark);
  max-width: 100%;
}
.wa-chip-limit i {
  font-size: 12px;
  opacity: 0.75;
}
.wa-quality-green {
  background: color-mix(in srgb, var(--success) 14%, #fff);
  color: #166534;
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-light));
}
.wa-quality-yellow {
  background: color-mix(in srgb, var(--warning) 14%, #fff);
  color: #92400e;
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border-light));
}
.wa-quality-red {
  background: color-mix(in srgb, var(--danger) 12%, #fff);
  color: #991b1b;
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border-light));
}

.wa-card-phone {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-dark);
}
.wa-card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.wa-card-meta {
  margin: 0;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #fff 70%, transparent);
  border: 1px solid var(--border-light);
}
.wa-card-meta > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}
.wa-card-meta dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.wa-card-meta dt::after {
  content: " :";
}
.wa-card-meta dd {
  margin: 0;
  color: var(--text-dark);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 13px;
  text-align: right;
  min-width: 0;
}

.wa-connect-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wa-fields {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 10px;
  align-items: end;
}
.wa-fields .form-group { margin: 0; }
.wa-fields .form-group label {
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 6px;
}
.wa-fields .form-control {
  font-size: 15px;
  padding: 10px 12px;
}
.wa-connect-submit { padding-bottom: 1px; }
.wa-connect-submit .btn {
  white-space: nowrap;
  font-size: 15px;
  padding: 11px 18px;
  font-weight: 650;
}

.wa-meta {
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  padding-bottom: 2px;
}
.wa-meta-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wa-meta-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.wa-meta-row {
  min-width: 0;
  flex: none;
}
.wa-meta-row label {
  display: block;
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 5px;
  color: var(--text-dark);
}
.wa-meta-value {
  position: relative;
  display: block;
  min-width: 0;
}
.wa-meta-value .form-control,
.wa-meta-value input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 40px 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, var(--bg-color) 55%, #fff);
  color: var(--text-dark);
  box-sizing: border-box;
}
.wa-meta-value:has(.wa-meta-actions :nth-child(2)) .form-control,
.wa-meta-value:has(.wa-meta-actions :nth-child(2)) input {
  padding-right: 68px;
}
.wa-meta-actions {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}
.wa-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.wa-meta-icon:hover {
  color: var(--text-dark);
  background: color-mix(in srgb, var(--bg-color) 70%, #fff);
}
.wa-meta-icon i {
  font-size: 13px;
}

.wa-picker {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-color) 50%, #fff);
}
.wa-picker-label {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text-dark);
}
.wa-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.wa-picker-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--card-bg);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wa-picker-option input {
  margin-top: 3px;
}
.wa-picker-option strong {
  display: block;
  font-size: 15px;
  color: var(--text-dark);
}
.wa-picker-option small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-muted);
}
.wa-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border-light));
  background: color-mix(in srgb, var(--primary) 6%, #fff);
}
.wa-picker-actions {
  margin-top: 10px;
}

.wa-empty-hint {
  margin-top: 12px;
  padding: 14px 14px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border-light));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-color) 55%, #fff);
  color: var(--text-muted);
}
.wa-empty-hint > i {
  display: block;
  font-size: 26px;
  color: #25D366;
  margin-bottom: 6px;
}
.wa-empty-hint p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

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

@media (max-width: 1100px) {
  .wa-fields { grid-template-columns: 1fr 1fr; }
  .wa-connect-submit { grid-column: 1 / -1; }
  .wa-meta-rows { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .wa-panel { padding: 14px; }
  .wa-card-grid { grid-template-columns: 1fr; }
  .wa-card-phone { font-size: 24px; }
  .wa-fields { grid-template-columns: 1fr; }
  .wa-connect-submit .btn { width: 100%; justify-content: center; }
}

/* Channels page — glass (Google + legacy) */
.channels-page {
  gap: 18px;
  position: relative;
}
.ch-section.ch-glass,
.ch-glass-tile {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.ch-section {
  border-radius: 20px;
  padding: 20px 22px 22px;
}
.ch-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.ch-section-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-section-head h2 .fa-whatsapp { color: #25D366; }
.ch-section-head h2 .fa-google { color: #ea4335; }
.ch-section-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.ch-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, #fff 55%, transparent);
}
.ch-business-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ch-business {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ch-business-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 2px 2px;
}
.ch-business-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}
.ch-business-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ch-business-name {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.ch-business-id {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.ch-business-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-dark);
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 8px;
  padding: 2px 8px;
  word-break: break-all;
}
.ch-business-count {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.ch-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ch-number {
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ch-number:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(24, 40, 80, 0.14);
}
.ch-number-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.ch-number-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, #25D366, #128C7E);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 10px 22px rgba(37, 211, 102, 0.28);
}
.ch-number-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}
.ch-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--text-muted);
}
.ch-pill-ok {
  background: color-mix(in srgb, #25D366 16%, #fff);
  color: #0f766e;
}
.ch-pill-quiet {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.ch-pill-limit {
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--text-dark);
  gap: 5px;
  max-width: 100%;
}
.ch-pill-limit i {
  font-size: 10px;
  opacity: 0.75;
}
.ch-number-name {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ch-number-phone {
  margin: 0;
  font-size: 20px;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.ch-number-meta {
  margin: 4px 0 0;
  display: grid;
  gap: 6px;
}
.ch-number-meta > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.4;
}
.ch-number-meta dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}
.ch-number-meta dd {
  margin: 0;
  color: var(--text-dark);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.ch-number-ids,
.ch-number-sync {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  word-break: break-all;
}
.ch-number-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.ch-connect .ch-connect-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ch-fields {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 12px;
  align-items: end;
}
.ch-fields .form-group { margin: 0; }
.ch-connect-submit { padding-bottom: 1px; }
.ch-btn-accent {
  white-space: nowrap;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 35%, transparent);
}
.ch-btn-accent:hover {
  filter: brightness(1.04);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.ch-meta-block {
  border-top: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  padding-top: 14px;
}
.ch-meta-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 550;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ch-meta-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.ch-meta-row label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  margin-bottom: 5px;
  color: var(--text);
}
.ch-meta-row label em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}
.ch-meta-value {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.ch-meta-value input {
  flex: 1;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, #fff 72%, transparent);
  color: var(--text);
}
.ch-google-form {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.ch-google-form .form-group { margin: 0; }
.ch-google-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ch-google-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #fff 55%, transparent);
  border: 1px solid var(--glass-border);
}
.ch-google-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ch-google-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #dadce0;
}
.ch-google-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ch-google-list strong { display: block; font-size: 13px; }
.ch-google-list span { font-size: 12px; color: var(--text-muted); }
.google-logo {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.google-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.google-connect-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.google-accounts-page .google-connect-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 220px;
  padding: 28px 16px;
  box-sizing: border-box;
}
.google-connect-btn-lg {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 550;
  border-radius: 999px;
}
.google-accounts-page .page-actions .google-connect-btn {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13.5px;
  border-radius: 999px;
}
.google-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #dadce0;
  background: #fff;
}
.google-card-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.google-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.google-card-identity {
  flex: 1;
  min-width: 0;
}
.google-card-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.google-card-email {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.google-accounts-page .wa-card-badges .wa-chip i {
  font-size: 11px;
  opacity: 0.85;
}
.nav-google-logo {
  width: 16px;
  height: 16px;
  margin-inline: 2px;
}
.google-setup-checklist {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
}
.google-setup-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-dark);
}
.google-setup-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
.google-setup-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dark);
}
.google-setup-checklist li i {
  color: #0f766e;
  font-size: 11px;
}
.google-connect-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, #fff 70%, transparent);
}
.google-connect-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.google-connect-copy strong {
  font-size: 14px;
}
.google-connect-copy span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.google-connect-btn {
  flex-shrink: 0;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}
.google-connect-btn:hover {
  background: #f8f9fa;
  color: #202124;
}
@media (max-width: 720px) {
  .google-setup-checklist ul { grid-template-columns: 1fr; }
  .google-connect-card {
    flex-direction: column;
    align-items: stretch;
  }
  .google-connect-btn { width: 100%; justify-content: center; }
}
.phone-picker-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.form-label-plain {
  display: block;
  font-size: 13px;
  font-weight: 550;
  margin-bottom: 8px;
}
.phone-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-picker-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  margin: 0;
}
.phone-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, transparent);
}
.phone-picker-option strong {
  display: block;
  font-size: 13px;
}
.phone-picker-option small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.google-channels-block {
  opacity: 0.98;
}

/* Automation ? numbers */
.auto-numbers-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px;
  align-items: start;
}
.auto-numbers-list {
  padding: 14px;
}
.auto-numbers-list-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
}
.auto-numbers-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auto-number-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--border) 18%, transparent);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  color: inherit;
}
.auto-number-item.is-active {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.auto-number-item-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--success) 16%, #fff);
  color: var(--success);
  flex-shrink: 0;
}
.auto-number-item-copy {
  min-width: 0;
  flex: 1;
}
.auto-number-item-copy strong,
.auto-number-item-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-number-item-copy small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.auto-numbers-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.auto-numbers-detail-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.auto-numbers-detail-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.auto-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.auto-config-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, #fff 90%, transparent);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.auto-config-card:hover {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--border));
  transform: translateY(-1px);
}
.auto-config-card i {
  font-size: 16px;
  color: var(--text-muted);
}
.auto-config-card strong {
  font-size: 14px;
}
.auto-config-card span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .ch-number-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .ch-fields,
  .ch-google-form,
  .ch-meta-rows {
    grid-template-columns: 1fr;
  }
  .ch-connect-submit .btn {
    width: 100%;
    justify-content: center;
  }
  .auto-numbers-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .ch-number-grid {
    grid-template-columns: 1fr;
  }
}

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

.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.theme-picker-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.theme-option:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--card-border));
  transform: translateY(-1px);
}

.theme-option.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--card-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.theme-swatch {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
}

.theme-swatch span { display: block; min-width: 0; }

.theme-option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-option-copy strong {
  font-size: 13px;
  color: var(--text-dark);
}

.theme-option-copy small {
  font-size: 12px;
  color: var(--text-muted);
}

.layout-swatch {
  display: flex;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  background: #F6ECE5;
}
.layout-swatch span { display: block; min-width: 0; }
.layout-swatch-compact .layout-swatch-rail {
  width: 10px;
  background: #fff;
  border-right: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
}
.layout-swatch-compact .layout-swatch-work {
  flex: 1;
  margin: 4px 4px 4px 3px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(70, 60, 45, 0.08);
}
.layout-swatch-classic {
  background: #fff;
}
.layout-swatch-classic .layout-swatch-side {
  width: 18px;
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  border-right: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
}
.layout-swatch-classic .layout-swatch-work {
  flex: 1;
  background: #f7f4f0;
}

/* Workspace layout picker (Theme / Branding) */
.layout-chrome-panel .layout-chrome-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.layout-chrome-panel .layout-chrome-title i {
  color: var(--primary);
}
.layout-chrome-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.layout-chrome-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, #fff 88%, var(--bg-color));
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.layout-chrome-option:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--card-border));
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(70, 60, 45, 0.07);
}
.layout-chrome-option.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--card-border));
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent),
    0 12px 28px rgba(70, 60, 45, 0.08);
}
.layout-preview {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-border) 85%, transparent);
}
.layout-preview-back {
  display: flex;
  height: 92px;
  gap: 0;
}
.layout-preview-compact .layout-preview-back {
  background: #F6ECE5;
  padding: 6px 6px 6px 0;
  gap: 6px;
}
.layout-preview-compact .layout-preview-rail {
  width: 14px;
  border-radius: 0 10px 10px 0;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  border-left: 0;
  box-shadow: var(--shadow);
}
.layout-preview-compact .layout-preview-card {
  flex: 1;
  display: flex;
  min-width: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.layout-preview-compact .layout-preview-tools {
  width: 28%;
  border-right: 1px solid var(--card-border);
  background: linear-gradient(180deg, #f8faf9, #fff);
}
.layout-preview-compact .layout-preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}
.layout-preview-compact .layout-preview-body span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, #eceff3);
}
.layout-preview-compact .layout-preview-body span:nth-child(1) { width: 72%; }
.layout-preview-compact .layout-preview-body span:nth-child(2) { width: 88%; }
.layout-preview-compact .layout-preview-body span:nth-child(3) { width: 54%; }

.layout-preview-classic .layout-preview-back {
  background: color-mix(in srgb, var(--bg-color) 70%, #fff);
}
.layout-preview-classic .layout-preview-side {
  width: 34%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 8px;
  background: #fff;
  border-right: 1px solid var(--card-border);
}
.layout-preview-classic .layout-preview-side span {
  display: block;
  height: 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, #eef1f4);
}
.layout-preview-classic .layout-preview-side span:first-child {
  width: 42%;
  height: 10px;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--primary) 22%, #e8edf2);
}
.layout-preview-classic .layout-preview-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
}
.layout-preview-classic .layout-preview-page span {
  display: block;
  height: 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--card-border);
}
.layout-preview-classic .layout-preview-page span:nth-child(1) { height: 16px; width: 46%; }
.layout-preview-classic .layout-preview-page span:nth-child(2) { flex: 1; }
.layout-preview-classic .layout-preview-page span:nth-child(3) { height: 12px; width: 64%; }

.layout-chrome-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.layout-chrome-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.layout-chrome-name strong {
  font-size: 14px;
  font-weight: 750;
  color: var(--text-dark);
}
.layout-chrome-meta small {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}
.layout-chrome-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: 11px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .15s ease, transform .15s ease;
}
.layout-chrome-option.is-active .layout-chrome-check {
  opacity: 1;
  transform: scale(1);
  background: var(--primary);
  color: #fff;
}

@media (max-width: 720px) {
  .layout-chrome-picker { grid-template-columns: 1fr; }
}

/* Round brand colour pickers (Account → Branding) */
input[type="color"].color-swatch-input {
  width: 40px;
  height: 40px;
  max-width: 40px;
  padding: 0;
  border: 2px solid var(--card-border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
input[type="color"].color-swatch-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"].color-swatch-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
input[type="color"].color-swatch-input::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

@media (max-width: 720px) {
  .theme-picker,
  .theme-picker-2 { grid-template-columns: 1fr; }
}

/* —— Templates: WhatsApp preview + create layout —— */
.tpl-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tpl-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.tpl-wa-stage {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.tpl-wa-phone {
  width: min(100%, 320px);
  border-radius: 22px;
  padding: 14px 12px 16px;
  background:
    linear-gradient(180deg, rgba(7, 94, 84, 0.12), transparent 28%),
    #e5ddd5;
  border: 1px solid color-mix(in srgb, #075e54 18%, var(--card-border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.tpl-wa-chat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tpl-wa-bubble {
  align-self: flex-end;
  width: min(100%, 270px);
  background: #dcf8c6;
  border-radius: 8px 8px 2px 8px;
  padding: 8px 10px 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  color: #111b21;
}
.tpl-wa-header {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.35;
}
.tpl-wa-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 110px;
  margin: -2px -4px 8px;
  border-radius: 6px;
  background: #128c7e;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.tpl-wa-media i { font-size: 22px; opacity: 0.92; }
.tpl-wa-media-image { background: linear-gradient(145deg, #0e9f6e, #128c7e); }
.tpl-wa-media-video { background: linear-gradient(145deg, #1a6b5a, #0f766e); }
.tpl-wa-media-document { background: linear-gradient(145deg, #334155, #475569); }
.tpl-wa-media.has-preview {
  padding: 0;
  overflow: hidden;
  background: #111b21;
}
.tpl-wa-media.has-preview img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.tpl-wa-media.has-file span {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-wa-body {
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.tpl-wa-var {
  display: inline;
  margin: 0 1px;
  padding: 0 4px;
  border-radius: 4px;
  background: #ffe08a;
  color: #111b21;
  font-weight: 650;
  font-style: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tpl-wa-var.is-empty {
  background: rgba(17, 27, 33, 0.08);
  color: #54656f;
  font-weight: 600;
}
.tpl-wa-footer {
  margin-top: 6px;
  font-size: 12px;
  color: #667781;
}
.tpl-wa-time {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: #667781;
}
.tpl-wa-time i {
  font-size: 11px;
  color: #53bdeb;
}
.tpl-wa-buttons {
  align-self: flex-end;
  width: min(100%, 270px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.tpl-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #00a884;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.tpl-wa-btn i { font-size: 12px; }

.tpl-map-block {
  border-top: 1px solid var(--card-border);
  padding-top: 14px;
}
.tpl-map-block h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text-dark);
}
.tpl-map-block > p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.tpl-map-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tpl-map-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.tpl-map-slot {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
  border-radius: 6px;
  padding: 6px 8px;
}
.tpl-map-arrow {
  color: #9aa3af;
  font-size: 12px;
}

.tpl-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 300px);
  gap: 20px;
  align-items: start;
}
.tpl-create-form { min-width: 0; }
.tpl-create-preview {
  position: sticky;
  top: 0;
}
.tpl-create-preview-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a93a0;
  margin-bottom: 10px;
}
.tpl-wa-phone-live { width: 100%; }
.tpl-buttons-block {
  margin-top: 4px;
}
.tpl-buttons-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.tpl-buttons-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tpl-buttons-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.tpl-buttons-add {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tpl-add-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tpl-add-chip i {
  font-size: 12px;
  color: var(--text-muted);
}
.tpl-add-chip:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 6%, var(--card-bg, #fff));
}
.tpl-add-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tpl-buttons-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--card-border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.tpl-button-editor {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--card-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tpl-button-fields {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: end;
}
.tpl-button-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--card-border) 35%, var(--card-bg, #fff));
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  align-self: end;
}
.tpl-button-type-badge i {
  font-size: 12px;
  color: var(--text-muted);
}
.tpl-button-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tpl-button-field label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tpl-button-field .form-control {
  width: 100%;
  min-width: 0;
}
.tpl-button-remove {
  align-self: end;
  height: 38px;
  width: 36px;
  flex: none;
}

@media (max-width: 640px) {
  .tpl-buttons-add {
    grid-template-columns: 1fr;
  }
  .tpl-button-fields {
    grid-template-columns: 1fr 36px;
  }
  .tpl-button-type-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .tpl-button-field-grow {
    grid-column: 1;
  }
  .tpl-button-remove {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .tpl-create-layout {
    grid-template-columns: 1fr;
  }
  .tpl-create-preview {
    position: static;
    order: -1;
  }
  .tpl-wa-phone-live { max-width: 320px; margin: 0 auto; }
  .tpl-map-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .tpl-map-arrow { display: none; }
}

/* ---- Broadcast composer ---- */
.bc-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 320px);
  gap: 22px;
  align-items: start;
}
.bc-create-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bc-template-picker {
  position: relative;
}
.bc-template-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.bc-template-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-template-placeholder {
  color: var(--text-muted);
}
.bc-template-trigger > i {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
}
.bc-template-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.bc-template-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dark);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.bc-template-option:hover,
.bc-template-option.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.bc-section {
  padding: 16px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card-bg, #fff) 92%, var(--primary) 4%);
}
.bc-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.bc-section-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  flex: none;
}
.bc-section-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.bc-section-head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bc-text-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.bc-text-head label { margin: 0; }
.bc-text-vars {
  width: auto;
  max-width: 240px;
}
.bc-variable-editor {
  position: relative;
}
.bc-variable-popup {
  position: absolute;
  z-index: 20;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.bc-variable-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.bc-variable-option:hover,
.bc-variable-option:focus-visible {
  background: var(--surface-2, #f3f4f6);
  outline: none;
}
.bc-variable-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-variable-option code {
  flex: none;
  color: var(--text-muted);
  font-size: 11px;
}
.bc-map-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bc-map-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg, #fff);
}
.bc-map-row .tpl-map-slot {
  margin-top: 22px;
}
.bc-map-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.bc-map-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bc-map-col > label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bc-map-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.bc-map-toggle button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-border) 28%, var(--card-bg, #fff));
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.bc-map-toggle button.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff));
  color: var(--primary);
}
.bc-map-placeholder {
  margin: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px dashed var(--card-border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.bc-map-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.bc-optin {
  text-transform: none;
  margin: 4px 0 12px;
}
.bc-pace {
  padding: 14px;
  border-radius: 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border);
}
.bc-pace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.bc-pace-head label {
  margin: 0;
}
.bc-pace-head strong {
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.bc-pace-range {
  width: 100%;
  accent-color: var(--primary);
}
.bc-pace-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.bc-pace-input {
  width: 88px;
  text-align: center;
}
.bc-pace-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.bc-pace-rec {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}
.bc-create-preview {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.bc-create-preview .tpl-create-preview-label {
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a93a0;
}
.bc-preview-stage {
  width: 100%;
  min-width: 0;
}
.bc-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 168px;
  padding: 28px 22px;
  border-radius: 14px;
  background: #f0eeea;
  border: 1px solid color-mix(in srgb, #c9c4bb 55%, transparent);
  box-shadow: 0 1px 2px rgba(60, 50, 40, 0.04);
  color: #667781;
  text-align: center;
}
.bc-preview-empty i {
  font-size: 26px;
  color: #25d366;
  line-height: 1;
}
.bc-preview-empty p {
  margin: 0;
  max-width: 22ch;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #667781;
}
.bc-preview-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bc-preview-chat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: #f0eeea;
  border: 1px solid color-mix(in srgb, #c9c4bb 55%, transparent);
  box-shadow: 0 1px 2px rgba(60, 50, 40, 0.04);
}
.bc-preview-chat .tpl-wa-bubble {
  align-self: stretch;
  width: 100%;
  max-width: none;
  padding: 8px 10px 5px;
  border-radius: 8px 8px 2px 8px;
  background: #dcf8c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.bc-preview-chat .tpl-wa-body {
  font-size: 13.5px;
  line-height: 1.45;
  color: #111b21;
}
.bc-preview-chat .tpl-wa-time {
  margin-top: 2px;
  font-size: 11px;
}
.bc-preview-chat .tpl-wa-header {
  font-size: 13.5px;
  margin-bottom: 4px;
}
.bc-preview-chat .tpl-wa-footer {
  margin-top: 4px;
  font-size: 11.5px;
}
.bc-preview-chat .tpl-wa-media {
  min-height: 96px;
  margin: -2px -4px 8px;
}
.bc-preview-chat .tpl-wa-media.has-preview img {
  height: 120px;
}
.bc-preview-chat .tpl-wa-buttons {
  width: 100%;
}

@media (max-width: 900px) {
  .bc-create-layout {
    grid-template-columns: 1fr;
  }
  .bc-create-preview {
    position: static;
    order: -1;
  }
  .bc-map-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bc-map-row .tpl-map-slot {
    margin-top: 0;
    justify-self: start;
  }
  .bc-map-cols {
    grid-template-columns: 1fr;
  }
}

/* ---- Automation error logs ---- */
.elog {
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}
.elog .page-header { margin-bottom: 0; }
.elog .contacts-panel {
  padding-top: 12px;
  min-width: 0;
  max-width: 100%;
}
.elog-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
}
.btn-secondary .elog-count {
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
}
.elog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--card-border, rgba(17, 27, 33, 0.08));
}
.elog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.elog-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(17, 27, 33, 0.1);
  background: #f7f8fa;
  color: #54656f;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.elog-chip-n {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.72;
}
.elog-chip:hover { background: #eef0f3; }
.elog-chip.is-active {
  background: rgba(18, 140, 126, 0.12);
  border-color: rgba(18, 140, 126, 0.35);
  color: #0b6b5f;
}
.elog-chip.is-active .elog-chip-n { opacity: 1; }
.elog-chip.level-critical.is-active {
  background: rgba(185, 28, 28, 0.1);
  border-color: rgba(185, 28, 28, 0.28);
  color: #b91c1c;
}
.elog-chip.level-error.is-active {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.25);
  color: #b91c1c;
}
.elog-chip.level-warning.is-active {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.28);
  color: #b45309;
}
.elog-chip.level-info.is-active {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.25);
  color: #1d4ed8;
}
.elog-toolbar-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.elog-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 320px;
}
.elog-search i {
  position: absolute;
  left: 10px;
  color: var(--text-muted, #667781);
  font-size: 12px;
  pointer-events: none;
}
.elog-search .form-control {
  padding-left: 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.elog-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  background: rgba(17, 27, 33, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
}
.elog-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.elog-match {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 27, 33, 0.08);
  border-radius: 10px;
  background: #f7f8fa;
}
.elog-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.elog-match-head strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.elog-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.elog-toolbar-actions .btn {
  height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}
.elog-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #667781;
}
.elog .elog-select .form-control,
.auto-col-config.sub-body .elog-select .form-control {
  width: auto;
  min-width: 10.5rem;
  height: 34px;
  padding: 0 1.75rem 0 10px;
  line-height: 32px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a93a0' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
.elog-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(17, 27, 33, 0.1);
  background: #f7f8fa;
  font-size: 12px;
  font-weight: 650;
  color: #54656f;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.elog-toggle.is-on {
  background: rgba(18, 140, 126, 0.1);
  border-color: rgba(18, 140, 126, 0.28);
  color: #0b6b5f;
}
.elog-toggle input { accent-color: #128c7e; }

.elog .admin-table-wrapper {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.elog-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.elog-table th,
.elog-table td {
  overflow: hidden;
}
.elog-table th:first-child,
.elog-table td.elog-issue {
  width: auto;
  max-width: 0;
}
.elog-table td:has(.elog-empty) {
  white-space: normal;
  overflow: visible;
}
.elog-issue-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.elog-level-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
  background: #f1f5f9;
  color: #64748b;
}
.elog-level-dot.level-critical { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.elog-level-dot.level-error { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.elog-level-dot.level-warning { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.elog-level-dot.level-info { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.elog-issue-title {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 650;
}
.elog-issue-row .stack-tight {
  min-width: 0;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
}
.elog-issue-row .stack-tight small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elog-issue-row .stack-tight small i { font-size: 11px; opacity: 0.85; margin-right: 2px; }
.elog-when {
  width: 9.5rem;
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.elog-table tr.is-resolved td { opacity: 0.72; }
.elog-table tr.is-open td { background: rgba(18, 140, 126, 0.05); }
.elog-table th.col-actions,
.elog-table td.col-actions {
  width: 8.75rem;
  min-width: 8.75rem;
  overflow: visible;
}

.elog-fix {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(18, 140, 126, 0.08);
  border: 1px solid rgba(18, 140, 126, 0.18);
}
.elog-fix strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0b6b5f;
}
.elog-fix p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dark);
}
.elog-detail-lead {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--text-dark);
}
.elog-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}
.elog-dl div { min-width: 0; }
.elog-dl dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8696a0;
}
.elog-dl dd {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--text-dark);
}
.elog-detail-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8696a0;
  margin-bottom: 6px;
}
.elog-raw {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dark);
  white-space: pre-wrap;
  word-break: break-word;
}
.elog-url {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #667781;
  word-break: break-all;
}

.elog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 20px;
}
.elog-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(18, 140, 126, 0.1);
  color: #128c7e;
  font-size: 22px;
  margin-bottom: 4px;
}
.elog-empty h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.elog-empty p {
  margin: 0 0 6px;
  max-width: 36em;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.elog-pager { padding: 10px 0 2px; }

@media (max-width: 900px) {
  .elog-toolbar-aside { width: 100%; }
  .elog-select { flex: 1; }
  .elog .elog-select .form-control,
  .auto-col-config.sub-body .elog-select .form-control { flex: 1; width: 100%; }
  .elog-dl { grid-template-columns: 1fr; }
  .elog-table thead th:nth-child(2),
  .elog-table td.elog-when { display: none; }
}

/* —— Public marketing site —— */
.site-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  position: relative;
  z-index: 2;
}
.site-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 650;
}
.site-nav-logo { max-height: 32px; width: auto; }
.site-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.site-nav-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-nav-links a:hover { color: var(--text-dark); }
.site-main {
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 24px 28px 64px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
.site-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 8px 0 12px;
  color: var(--text-dark);
}
.site-eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: var(--primary);
  font-weight: 650;
  margin: 0;
}
.site-lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 42rem;
  margin: 0 0 22px;
}
.site-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.site-body.prose {
  color: var(--text-dark);
  line-height: 1.65;
  max-width: 42rem;
}
.site-body.prose p { margin: 0 0 1em; }
.site-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.site-plan-card {
  padding: 18px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: color-mix(in srgb, #fff 88%, transparent);
}
.site-plan-card h2 { margin: 0 0 6px; font-size: 1.15rem; }
.site-plan-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 10px;
}
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.site-footer-links { display: flex; gap: 14px; }
.site-footer-links a { color: var(--text-muted); text-decoration: none; }
.site-footer-links a:hover { color: var(--text-dark); }
@media (max-width: 720px) {
  .site-nav, .site-main, .site-footer { padding-left: 16px; padding-right: 16px; }
  .site-nav { flex-direction: column; align-items: flex-start; }
}

/* Admin plan drawer */
.plan-form { display: flex; flex-direction: column; gap: 14px; }
.plan-section {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #fafbfc;
  padding: 14px 14px 6px;
}
.plan-section-head {
  margin: 0 0 12px;
}
.plan-section-head strong {
  display: block;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
}
.plan-section-head span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.plan-section .form-group { margin-bottom: 12px; }
.plan-section-fair { background: #f3faf7; border-color: color-mix(in srgb, var(--primary) 22%, var(--card-border)); }
.plan-fair-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.plan-fair-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-fair-card i { color: var(--primary); font-size: 14px; margin-bottom: 4px; }
.plan-fair-card strong { font-size: 12px; font-weight: 700; }
.plan-fair-card em {
  font-style: normal;
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1.1;
}
.plan-fair-card small { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.plan-perm-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.plan-perm-row { cursor: pointer; margin: 0; }
.plan-perm-row .toggle-switch { flex-shrink: 0; }
@media (max-width: 640px) {
  .plan-fair-grid { grid-template-columns: 1fr; }
}

.tpl-var-menu {
  position: absolute;
  z-index: 40;
  width: min(260px, calc(100% - 16px));
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.tpl-var-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.3;
}
.tpl-var-item:hover,
.tpl-var-item:focus { background: #f3f4f6; }
.tpl-var-item code {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text, #111827);
}
.tpl-var-item span {
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkout-page {
  background:
    radial-gradient(1200px 480px at 50% -80px, color-mix(in srgb, var(--primary, #2F8F7B) 18%, transparent), transparent),
    #f3f4f6;
  min-height: 100vh;
  color: #111827;
}
.checkout-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 112px;
}
.checkout-card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px 24px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .08);
}
.checkout-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.checkout-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: #f8fafc;
}
.checkout-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary, #2F8F7B) 14%, #fff);
  color: var(--primary, #2F8F7B);
}
.checkout-brand strong { display: block; font-size: 14px; }
.checkout-brand small { color: var(--text-muted); font-size: 12px; }
.checkout-head h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.checkout-head p { margin: 0 0 18px; color: var(--text-muted); }
.checkout-section { margin: 0 0 22px; }
.checkout-section h2 { margin: 0 0 10px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.checkout-items { list-style: none; margin: 0; padding: 0; }
.checkout-items li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.checkout-items img,
.checkout-item-ph {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: #f8fafc;
}
.checkout-item-ph {
  display: grid;
  place-items: center;
  color: #94a3b8;
}
.checkout-item-meta strong { display: block; font-size: 14px; }
.checkout-item-meta small { color: var(--text-muted); font-size: 12px; }
.checkout-item-price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.checkout-totals { margin: 12px 0 0; }
.checkout-totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.checkout-totals .is-total { font-weight: 800; font-size: 16px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #e5e7eb; }
.checkout-coupon { display: flex; gap: 8px; }
.checkout-intro { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.checkout-instructions { background: #f8fafc; border-radius: 10px; padding: 12px 14px; font-size: 14px; white-space: pre-wrap; }
.checkout-pay-btn { width: 100%; justify-content: center; min-height: 46px; }
.checkout-paybar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 8px -20px -24px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #eef2f7;
  border-radius: 0 0 20px 20px;
}
.checkout-paybar > div { margin-right: auto; }
.checkout-paybar small { display: block; font-size: 11px; color: var(--text-muted); }
.checkout-paybar strong { font-size: 16px; }
.checkout-paybar .checkout-pay-btn { width: auto; min-width: 140px; }
@media (max-width: 640px) {
  .checkout-shell { padding: 12px 12px 24px; }
  .checkout-card { border-radius: 16px; padding: 18px 16px 20px; }
  .checkout-paybar { margin: 8px -16px -20px; padding-inline: 16px; }
  .checkout-form .grid-2 { grid-template-columns: 1fr; }
}
.pay-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.pay-option.is-on { border-color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 8%, #fff); }
.pay-option small { display: block; color: var(--text-muted); font-size: 12px; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pay-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pay-card-icon { font-size: 22px; color: var(--primary, #2563eb); }
.wa-order-card { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.wa-order-card strong { font-size: 13px; }
.wa-order-id { font-size: 12px; color: var(--text-muted); }
.wa-order-item { display: flex; align-items: center; gap: 8px; }
.wa-order-item img,
.wa-order-ph {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1f5f9;
  flex-shrink: 0;
}
.wa-order-ph { display: grid; place-items: center; color: #94a3b8; font-size: 12px; }
.wa-order-item span { display: block; font-size: 13px; color: inherit; }
.wa-order-item small { display: block; font-size: 11px; color: var(--text-muted); }
.wa-order-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-order-card a {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #128c7e);
}
.wa-catalog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  max-width: 320px;
  overflow: hidden;
  border: 1px solid rgba(17, 27, 33, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
}
.wa-catalog-card-icon {
  display: grid;
  place-items: center;
  min-height: 92px;
  color: #fff;
  background: linear-gradient(135deg, #0b8f83, #22b9a7);
  font-size: 32px;
}
.wa-catalog-card-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 12px;
}
.wa-catalog-card-content strong { font-size: 13px; }
.wa-catalog-card-content span,
.wa-catalog-card-content p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}
.wa-catalog-card-content p {
  margin-top: 5px;
  color: inherit;
}
.wa-catalog-card-action {
  padding: 9px 12px;
  border-top: 1px solid rgba(17, 27, 33, .1);
  color: var(--primary, #128c7e);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Catalog commerce page: +2px type on header, tabs, and tab bodies */
.contacts-page:has(> .catalog-body) > .page-header .titles h1 {
  font-size: 22px;
}
.contacts-page:has(> .catalog-body) > .page-header .titles p {
  font-size: 15px;
}
.contacts-page:has(> .catalog-body) .seg-tab {
  font-size: 15px;
}
.contacts-page:has(> .catalog-body) .seg-tab i {
  font-size: 14px;
}
.auto-col-config.sub-body .contacts-page:has(> .catalog-body) .seg-tab {
  font-size: 17px;
}
.contacts-page > .catalog-body .form-control,
.contacts-page > .catalog-body label,
.contacts-page > .catalog-body .btn:not(.btn-sm),
.contacts-page > .catalog-body .badge,
.contacts-page > .catalog-body .empty-state p,
.contacts-page > .catalog-body .contacts-table-select,
.contacts-page > .catalog-body .pay-card,
.contacts-page > .catalog-body .checkout-item-meta,
.contacts-page > .catalog-body .checkout-totals {
  font-size: 15px;
}
/* Catalog Settings / forms: beat auto-col label rules so fields read larger */
.auto-col-config.sub-body .contacts-page > .catalog-body .form-group label,
.auto-col-config.sub-body .contacts-page > .catalog-body label,
.contacts-page > .catalog-body .form-group label,
.contacts-page > .catalog-body .form-control,
.contacts-page > .catalog-body textarea.form-control,
.contacts-page > .catalog-body .catalog-subhead strong,
.contacts-page > .catalog-body .catalog-field-head strong,
.contacts-page > .catalog-body .catalog-field-head label {
  font-size: 15px;
}
.auto-col-config.sub-body .contacts-page > .catalog-body .form-group label,
.contacts-page > .catalog-body .form-group label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.contacts-page > .catalog-body .catalog-subhead small,
.contacts-page > .catalog-body .catalog-field-head small {
  font-size: 14px;
}
.contacts-page > .catalog-body .empty-state h3 {
  font-size: 18px;
}
.contacts-page > .catalog-body .admin-table th,
.contacts-page > .catalog-body .admin-table td {
  font-size: 17px;
}
.contacts-page > .catalog-body .admin-table thead th {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}
.contacts-page > .catalog-body .admin-table td div[style*="font-size:12px"] {
  font-size: 13px !important;
}
.contacts-page > .catalog-body .btn-sm {
  font-size: 14px;
}
.contacts-page > .catalog-body .catalog-back strong {
  font-size: 17px;
}
.contacts-page > .catalog-body .catalog-back small {
  font-size: 14px;
}
.contacts-page > .catalog-body .catalog-detail-address {
  font-size: 15px;
}

/* Catalog tabs: header + tabs stay put. Table cards fill leftover height like Contacts. */
.contacts-page > .catalog-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}
.contacts-page > .catalog-body > .section-card:not(.contacts-panel),
.contacts-page > .catalog-body > .pay-grid {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}
.contacts-page > .catalog-body > .contacts-panel {
  flex: 1 1 auto;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.contacts-page > .catalog-body .admin-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.catalog-back {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 0 0 14px;
  margin: 0 0 4px;
  border-bottom: 1px solid #e5e7eb;
}
.catalog-back-title { flex: 1; min-width: 0; }
.catalog-back-expand { margin-left: auto; flex-shrink: 0; }
.catalog-back strong { display: block; font-size: 15px; font-weight: 800; }
.catalog-back small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.catalog-detail {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-top: 12px;
}
.catalog-detail .checkout-items { margin: 0 0 12px; }
.catalog-detail-address {
  color: var(--text-muted);
  font-size: 13px;
  margin: 12px 0 0;
}
.catalog-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.catalog-subhead strong { display: block; font-size: 14px; font-weight: 800; }
.catalog-subhead small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.catalog-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.catalog-field-head label { margin-bottom: 0; }
.catalog-field-head strong { display: block; font-size: 13px; font-weight: 700; }
.catalog-field-head small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.contacts-page > .catalog-body .catalog-embedded-table.admin-table-wrapper {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.office-hours { display: flex; flex-direction: column; gap: 3px; margin-bottom: 0; }
.office-hours-row {
  display: grid;
  grid-template-columns: 32px 88px minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
  min-height: 34px;
  padding: 2px 6px;
  border-radius: var(--radius-md, 10px);
  transition: background .15s ease;
}
.office-hours-row .toggle-switch {
  width: 32px;
  height: 18px;
}
.office-hours-row .toggle-slider::before {
  height: 12px;
  width: 12px;
  left: 3px;
  top: 3px;
}
.office-hours-row .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(14px);
}
.office-hours-row.is-open {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.office-hours-row.is-closed {
  opacity: .72;
}
.office-hours-row strong { font-size: 12px; font-weight: 700; }
.office-hours-times {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.office-hours-times .form-control {
  padding-block: 4px;
  padding-inline: 8px;
  min-width: 0;
  flex: 1 1 0;
  font-size: 13px;
}
.office-hours-sep { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.office-hours-closed {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.office-hours-master {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.office-hours-schedule.is-disabled {
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.office-hours-away {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  flex: 0 0 auto;
}
.office-hours-away-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.office-hours-away-label label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.office-hours-away textarea.form-control {
  min-height: 52px;
  resize: vertical;
  font-size: 13px;
}
.office-hours-away-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.office-hours-after {
  margin-top: 8px;
}
.office-hours-after .list-row {
  gap: 8px;
}

/* Automation settings: equal-width / equal-height paired cards */
.auto-settings-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.auto-settings-pair > .auto-settings-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px 14px;
}
.auto-settings-pair .list-row {
  padding: 8px 10px;
  gap: 8px;
}
.auto-settings-pair .list-row strong {
  font-size: 13px;
  line-height: 1.3;
}
.auto-settings-pair .form-group {
  margin-top: 10px;
}
.auto-settings-pair .form-group.auto-settings-field {
  margin-top: 10px;
  max-width: 220px;
}
.auto-settings-pair .form-group label {
  margin-bottom: 4px;
  font-size: 12px;
}
.auto-settings-pair .form-control {
  padding-block: 6px;
  font-size: 13px;
}
.auto-settings-pair .stack {
  gap: 8px;
}
.auto-settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.auto-settings-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auto-settings-tz {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface, #f8fafc) 88%, #fff);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
}
.auto-settings-tz i { color: var(--primary); font-size: 10px; }
.auto-settings-tz span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-settings-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.auto-settings-card-body .office-hours {
  flex: 1 1 auto;
  margin-bottom: 0;
}
.auto-settings-inset {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface, #f8fafc) 70%, #fff);
}
.auto-settings-inset h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auto-settings-inset .stack {
  gap: 8px;
}
.auto-settings-inset .form-group {
  margin: 0;
}
@media (max-width: 900px) {
  .auto-settings-pair { grid-template-columns: 1fr; }
}
.contacts-page > .catalog-body > .http-api-expand-shell {
  flex: 1 1 auto;
  min-height: 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.contacts-page > .catalog-body > .http-api-expand-shell > .http-api-config-panel,
.contacts-page > .catalog-body > .http-api-config-panel,
.http-api-config-panel:has(> form) {
  overflow: hidden;
  padding: 10px 12px;
}
.contacts-page > .catalog-body .http-api-config-panel:has(> form) > form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.http-api-expand-shell > .http-api-config-panel {
  flex: 1 1 auto;
  min-height: 0;
}
.http-api-expand-placeholder {
  flex: 1 1 auto;
  min-height: 280px;
}
.http-api-config-panel > .catalog-back {
  padding: 0 0 3px;
  margin: 0;
  gap: 6px;
}
.http-api-config-panel > .catalog-back strong {
  font-size: 15px;
}
.http-api-expand-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 21, 26, 0.42);
  z-index: 109;
  opacity: 0;
  animation: http-api-fade-in 220ms ease forwards;
}
.http-api-config-panel.is-expanded {
  position: fixed;
  inset: 16px;
  z-index: 110;
  margin: 0;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  box-shadow: var(--shadow-lg);
  transform: none;
  animation: http-api-panel-in 220ms ease;
}
body:has(.http-api-config-panel.is-expanded) {
  overflow: hidden;
}
@keyframes http-api-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes http-api-panel-in {
  from {
    opacity: 0.96;
    transform: translateY(8px) scale(0.985);
    box-shadow: none;
  }
  to {
    opacity: 1;
    transform: none;
    box-shadow: var(--shadow-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .http-api-expand-backdrop,
  .http-api-config-panel.is-expanded {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.http-api-empty { padding: 28px 12px; }
.http-api-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
  padding: 0;
  overflow: hidden;
}
.http-api-editor .form-group { margin: 0; }
.http-api-editor .form-group label {
  margin-bottom: 3px;
  font-size: 13px;
  letter-spacing: 0.03em;
}
.http-api-editor .form-control {
  padding: 7px 10px;
  font-size: 15px;
}
.http-api-editor .wh-map-table .form-control {
  padding: 5px 7px;
  font-size: 14px;
}
.http-api-identity {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 1.1fr) auto;
  gap: 8px;
  align-items: end;
  flex-shrink: 0;
}
.http-api-identity-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-bottom: 1px;
}
.http-api-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.38fr) minmax(0, 0.31fr) minmax(0, 0.31fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}
.http-api-layout.has-outcome {
  grid-template-columns: minmax(250px, 0.30fr) minmax(0, 0.23fr) minmax(0, 0.25fr) minmax(160px, 0.22fr);
}
.http-api-layout > section {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.http-api-layout .wh-map-input,
.http-api-layout .wh-map-table-wrap,
.http-api-layout .wh-map-preview,
.http-api-layout .wh-schema {
  height: 100%;
  max-height: none;
  flex: 1 1 0;
  min-height: 0;
}
.http-api-layout .wh-map-input { margin: 0; }
.http-api-layout > .http-api-response {
  border: none;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.http-api-request .http-api-node {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}
.http-api-mapping,
.http-api-outcome {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  overflow: hidden;
}
.http-api-outcome {
  gap: 8px;
}
.http-api-outcome-field { flex-shrink: 0; }
.http-api-mobile-next { display: none; margin-top: 8px; }
.http-api-node {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fbfcfd;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.http-api-node-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--card-border);
  background: #fff;
  flex-shrink: 0;
}
.http-api-node-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  min-height: 40px;
}
.http-api-node-tabs {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.http-api-node-tab {
  border: none;
  background: none;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  line-height: 1.2;
}
.http-api-node-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.http-api-node-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.http-api-node-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
  background: color-mix(in srgb, var(--primary) 4%, #fff);
}
.http-api-node-contact-label {
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.http-api-contact-id {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
  padding: 5px 8px;
  font-size: 13px;
}
.http-api-node-body {
  padding: 8px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.http-api-urlbar {
  display: flex;
  gap: 4px;
  align-items: stretch;
  flex-wrap: nowrap;
}
.http-api-node .http-api-method {
  width: 86px;
  flex: 0 0 86px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.http-api-node .http-api-url {
  flex: 1;
  min-width: 0;
}
.http-api-auth {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.http-api-auth-type,
.http-api-node .http-api-auth-type {
  width: 100px;
  flex: 0 0 100px;
  max-width: 100%;
}
.http-api-auth .form-control:not(.http-api-auth-type) {
  flex: 1 1 140px;
  min-width: 0;
}
.http-api-curl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  background: #fff;
}
.http-api-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--card-border);
}
.http-api-toggle strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}
.http-api-toggle small {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.3;
  margin-top: 1px;
}
.http-api-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.http-api-kv-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.http-api-kv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.http-api-kv-toggle > span:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.http-api-kv-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.http-api-kv-toggle:has(input:checked) > span:first-child {
  color: var(--primary);
}
.http-api-kv-toggle .toggle-switch {
  width: 36px;
  height: 20px;
}
.http-api-kv-toggle .toggle-slider::before {
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
}
.http-api-kv-toggle .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}
.http-api-kv-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.http-api-kv-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.http-api-kv-block-title {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--text-dark);
}
.http-api-kv-tabs {
  display: none;
}
.http-api-kv-tab {
  display: none;
}
.http-api-kv-off {
  display: none;
}
.http-api-kv {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #fff;
}
.http-api-kv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.http-api-kv-modes {
  display: inline-flex;
  gap: 4px;
}
.http-api-kv-modes .btn,
.http-api-kv-head > .btn {
  width: auto;
  height: 28px;
  padding: 0 8px;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
}
.http-api-kv-insert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.http-api-kv-insert > span {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.http-api-kv-insert .form-control {
  width: 150px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}
.http-api-kv-cols,
.http-api-kv-row {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) minmax(0, 1fr) 26px;
  gap: 6px;
  align-items: center;
}
.http-api-kv-cols {
  padding: 0 0 2px;
}
.http-api-kv-cols span {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
}
.http-api-kv .btn-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 11px;
}
.http-api-kv-source {
  width: 100%;
  height: 28px;
  min-width: 0;
  padding: 0 2px;
  gap: 0;
  justify-content: center;
  font-size: 11px;
  font-weight: 650;
}
.http-api-kv-source-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
}
.http-api-kv-source-mark.is-pi {
  font-family: 'Times New Roman', 'Noto Serif', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.http-api-kv-json {
  min-height: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.http-api-kv-hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.http-api-kv-hint code {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-dark);
}
.http-api-kv-example {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f7f8fa;
  border: 1px dashed var(--card-border);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.http-api-kv-add { align-self: flex-start; }
.http-api-run-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 0 12px;
}
.http-api-run-detail .elog-json {
  max-height: 280px;
  margin: 6px 0 0;
}
@media (max-width: 1100px) {
  .http-api-identity { grid-template-columns: 1fr 1fr; }
  .http-api-identity-actions { grid-column: 1 / -1; }
  .http-api-layout,
  .http-api-layout.has-outcome {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 0;
  }
  .http-api-layout > section { display: none; height: 100%; }
  .http-api-layout[data-pane="request"] .http-api-request { display: flex; }
  .http-api-layout[data-pane="map"] .http-api-response,
  .http-api-layout[data-pane="map"] .http-api-mapping,
  .http-api-layout[data-pane="map"] .http-api-outcome { display: flex; }
  .http-api-mobile-next { display: flex; }
  .http-api-run-detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .http-api-identity { grid-template-columns: 1fr; }
  .http-api-auth-type,
  .http-api-node .http-api-auth-type,
  .http-api-auth .form-control:not(.http-api-auth-type) { flex: 1 1 100%; width: auto; }
  .http-api-settings-grid { grid-template-columns: 1fr; }
  .http-api-kv-cols { display: none; }
  .http-api-kv-row { grid-template-columns: 29px minmax(0, 1fr) 26px; }
  .http-api-kv-row .form-control:nth-child(3),
  .http-api-kv-row select { grid-column: 2; }
  .http-api-urlbar { flex-wrap: wrap; }
  .http-api-node .http-api-method,
  .http-api-node .http-api-auth-type { flex: 0 0 100%; width: 100%; }
  .http-api-node-contact {
    flex-wrap: wrap;
  }
  .http-api-contact-id {
    max-width: none;
    width: 100%;
    flex: 1 1 100%;
  }
}

/* Admin Pricing Table matrix */
.pricing-table-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  margin-bottom: 14px;
}
.pricing-discount-fields {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: nowrap;
  min-width: 0;
}
.pricing-discount-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pricing-discount-fields label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 0;
  color: var(--text-muted);
  white-space: nowrap;
}
.pricing-discount-field .form-control {
  width: 100px;
}
.pricing-discount-fields .help-tip {
  align-self: center;
  margin-bottom: 6px;
}
.pricing-table-toolbar > .btn {
  flex-shrink: 0;
  margin-left: auto;
}
.pricing-table-scroll {
  overflow: auto;
  max-height: min(72vh, 900px);
}
.pricing-matrix-table {
  min-width: 1400px;
  border-collapse: separate;
  border-spacing: 0;
}
.pricing-matrix-table th,
.pricing-matrix-table td {
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
}
.pricing-matrix-table .pricing-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-bg, #fff);
  min-width: 200px;
  max-width: 240px;
  box-shadow: 1px 0 0 var(--card-border, #e5e7eb);
}
.pricing-matrix-table thead .pricing-sticky-col {
  z-index: 3;
}
.pricing-plan-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pricing-plan-cell .form-control {
  width: 100%;
}
.pricing-plan-meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pricing-matrix-table .pricing-num {
  width: 88px;
  min-width: 72px;
}

/* Follow-up report tab */
.fu-report {
  gap: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fu-report-top {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--card-border);
}
.fu-report-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin: -1px -1px 0;
  border-bottom: 1px solid var(--card-border);
  background: linear-gradient(135deg, rgba(47, 143, 123, 0.08) 0%, rgba(255, 255, 255, 0.9) 48%, #fff 100%);
}
.fu-report-hero--compact {
  padding: 12px 16px;
  margin: 0;
  border-bottom: 0;
  background: linear-gradient(135deg, rgba(47, 143, 123, 0.06) 0%, #fff 72%);
}
.fu-report-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 320px;
}
.fu-report-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  background: rgba(47, 143, 123, 0.12);
  font-size: 20px;
}
.fu-report-hero--compact .fu-report-hero-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 15px;
}
.fu-report-hero-copy {
  min-width: 0;
}
.fu-report-hero-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.fu-report-hero-title h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}
.fu-report-hero--compact .fu-report-hero-title h4 {
  font-size: 16px;
}
.fu-report-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.fu-report-hero--compact .fu-report-hero-meta {
  margin-top: 5px;
  gap: 6px;
}
.fu-report-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.fu-report-hero--compact .fu-report-chip {
  padding: 2px 8px;
  font-size: 11px;
}
.fu-report-chip i {
  color: var(--primary);
  font-size: 11px;
}
.fu-report-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  background: #fafbfc;
}
.fu-report-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  text-align: center;
  border-right: 1px solid var(--card-border);
}
.fu-report-stat:last-child {
  border-right: 0;
}
.fu-report-stat strong {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  color: var(--text-dark);
  font-family: var(--font-display);
}
.fu-report-stat span {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fu-report-funnel-toggle {
  border-bottom: 1px solid var(--card-border);
}
.fu-report-funnel-toggle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fu-report-funnel-toggle summary::-webkit-details-marker {
  display: none;
}
.fu-report-funnel-toggle summary::before {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
  color: var(--text-muted);
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.fu-report-funnel-toggle[open] summary::before {
  transform: rotate(90deg);
}
.fu-report-funnel-toggle summary .muted {
  font-size: 11px;
  font-weight: 600;
}
.fu-funnel--compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--card-border);
  background: #fff;
}
.fu-funnel-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 7px 16px;
  font-size: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.fu-funnel-row:last-child {
  border-bottom: 0;
}
.fu-funnel-row-index {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  background: rgba(47, 143, 123, 0.10);
  flex-shrink: 0;
}
.fu-funnel-row-title {
  font-weight: 700;
  min-width: 80px;
}
.fu-funnel-row-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.fu-funnel-row-stat {
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}
.fu-funnel-row-stat strong {
  color: var(--text-dark);
}
.fu-report-metrics {
  padding: 18px 20px;
  border-bottom: 1px solid var(--card-border);
}
.fu-report-block {
  padding: 18px 20px 20px;
  border-bottom: 1px solid var(--card-border);
}
.fu-report-enrollments {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  border-bottom: 0;
}
.fu-report-block:last-child {
  border-bottom: 0;
}
.fu-report-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.fu-report-enrollments .fu-report-block-head {
  margin-bottom: 10px;
}
.fu-report-block-head--toolbar {
  align-items: center;
  flex-wrap: wrap;
}
.fu-report-block-head h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.fu-report-enrollments .fu-report-block-head h5 {
  font-size: 16px;
}
.fu-report-block-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.fu-funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fu-funnel-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
}
.fu-funnel-step-index {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  background: rgba(47, 143, 123, 0.10);
}
.fu-funnel-step-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fu-funnel-step-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.fu-funnel-step-title strong {
  font-size: 14px;
}
.fu-funnel-step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.fu-funnel-step-bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(47, 143, 123, 0.10);
  overflow: hidden;
}
.fu-funnel-step-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.fu-funnel-step-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.fu-funnel-step-stats strong {
  color: var(--text-dark);
}
.fu-report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fu-report-filter .contacts-table-select,
.fu-report-filters .contacts-table-select {
  min-width: 148px;
}
.fu-report-table-wrap {
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
}
.fu-report-table th,
.fu-report-table td {
  vertical-align: middle;
  padding-top: 12px;
  padding-bottom: 12px;
}
.fu-report-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f7f8fa;
  box-shadow: 0 1px 0 var(--card-border);
  font-size: 12px;
}
.fu-report-table tbody td {
  font-size: 14px;
}
.fu-report-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fu-report-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(47, 143, 123, 0.12);
}
.fu-report-contact-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fu-report-contact-meta strong {
  font-size: 15px;
  line-height: 1.2;
}
.fu-report-contact-meta small {
  font-size: 12px;
  color: var(--text-muted);
}
.fu-report-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.fu-report-source i {
  color: var(--text-muted);
  font-size: 12px;
}
.fu-report-muted-cell {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.fu-report-error-cell {
  max-width: 280px;
}
.fu-report-error {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--danger);
  line-height: 1.35;
}
.fu-report-error i {
  margin-top: 2px;
  flex-shrink: 0;
}
.fu-report-empty-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.fu-report-empty-inline i {
  opacity: 0.7;
}
@media (max-width: 900px) {
  .fu-report-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fu-report-stat:nth-child(2) {
    border-right: 0;
  }
  .fu-report-stat:nth-child(1),
  .fu-report-stat:nth-child(2) {
    border-bottom: 1px solid var(--card-border);
  }
}
@media (max-width: 560px) {
  .fu-report-hero--compact,
  .fu-report-enrollments,
  .fu-report-funnel-toggle summary,
  .fu-funnel-row {
    padding-left: 12px;
    padding-right: 12px;
  }
  .fu-report-stats-bar {
    grid-template-columns: 1fr 1fr;
  }
  .fu-funnel-row-stat {
    margin-left: 0;
  }
}
.pricing-matrix-table .form-control-sm {
  padding: 4px 8px;
  font-size: 13px;
}

/* ---- Appointment list publish attention pulse ---- */
@keyframes appt-publish-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, #0d9488) 55%, transparent);
    transform: scale(1);
  }
  55% {
    box-shadow: 0 0 0 10px transparent;
    transform: scale(1.06);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1);
  }
}
.appt-publish-pulse {
  animation: appt-publish-pulse 1.25s ease-out infinite;
  border-color: var(--primary, #0d9488) !important;
  color: var(--primary, #0d9488) !important;
  z-index: 1;
}

/* ---- Appointment follow-up card (wireframe panels) ---- */
.appt-fu-card {
  min-width: 0;
  overflow: visible;
}
.appt-fu-card .grid-2 > * {
  min-width: 0;
}
.appt-fu-card select.form-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.appt-fu-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}
.appt-fu-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 520px;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg, #fff) 94%, var(--primary) 3%);
  overflow: visible;
}
.appt-fu-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.appt-fu-panel-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(160px, 0.85fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  min-height: 420px;
  flex: 1;
  transition: opacity 0.12s ease;
}
.appt-fu-panel-split.appt-fu-panel-split-busy {
  opacity: 0.55;
  pointer-events: none;
}
.appt-fu-panel-split > * {
  min-width: 0;
  min-height: 420px;
}

.appt-fu-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 420px;
}
.appt-fu-editor-toolbar {
  position: relative;
  display: flex;
  justify-content: flex-end;
  z-index: 6;
  flex: none;
}
.appt-fu-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.appt-fu-insert-btn > i {
  font-size: 10px;
  opacity: 0.7;
}
.appt-fu-editor textarea,
.appt-fu-editor .appt-fu-body {
  width: 100% !important;
  min-height: 400px !important;
  height: 400px !important;
  flex: 1 1 auto;
  resize: vertical;
  box-sizing: border-box;
}

.appt-fu-preview {
  min-width: 0;
  min-height: 420px !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.appt-fu-preview .wh-map-preview {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 400px !important;
  height: 400px !important;
  max-height: none !important;
}
.appt-fu-preview .wh-tpl-preview,
.appt-fu-preview .tpl-wa-phone {
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 340px !important;
  height: auto !important;
}
.appt-fu-preview .tpl-wa-chat {
  flex: 1 1 auto;
  min-height: 300px;
}
.appt-fu-preview-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 400px !important;
  height: 100%;
}
.appt-fu-preview-empty > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.appt-fu-preview-empty .bc-map-placeholder {
  flex: 1;
  min-height: 340px !important;
  align-items: flex-start;
  padding-top: 12px;
}

.appt-fu-var-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 420px !important;
  overflow: visible;
}
.appt-fu-var-config > .bc-map-placeholder {
  flex: 1;
  min-height: 360px !important;
  align-items: flex-start;
  padding-top: 12px;
}

.appt-fu-template-picker {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 8;
  overflow: visible;
}
.appt-fu-template-menu {
  top: calc(100% + 4px);
  bottom: auto;
  max-height: min(240px, 40vh);
  z-index: 90;
}

.appt-fu-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(240px, 40vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}
.appt-fu-editor-toolbar .appt-fu-menu {
  left: auto;
  right: 0;
  min-width: 320px;
  width: max(320px, 100%);
}
.appt-fu-menu-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-border) 18%, var(--card-bg, #fff));
}
.appt-fu-menu-search > i {
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
}
.appt-fu-menu-search > input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.appt-fu-menu-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dark);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.appt-fu-menu-option:hover,
.appt-fu-menu-option.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.appt-fu-menu-option strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.appt-fu-menu-option code {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.appt-fu-var-head {
  font-size: 12px;
  font-weight: 750;
  color: var(--text-muted);
}
.appt-fu-var-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.appt-fu-var-table-head,
.appt-fu-var-row {
  display: grid;
  grid-template-columns: 52px 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.appt-fu-var-table-head {
  padding: 0 2px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.appt-fu-var-row {
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  overflow: visible;
}
.appt-fu-var-row .tpl-map-slot {
  margin: 0;
  font-size: 12px;
}
.appt-fu-type-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.appt-fu-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 32px;
  padding: 0 4px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-border) 28%, var(--card-bg, #fff));
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.appt-fu-type-btn.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 12%, var(--card-bg, #fff));
  color: var(--primary);
}
.appt-fu-type-btn .http-api-kv-source-mark {
  color: inherit;
}
.appt-fu-type-btn .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.appt-fu-preview .tpl-wa-body {
  white-space: normal;
  line-height: 1.4;
}
.appt-fu-var-value {
  position: relative;
  min-width: 0;
  overflow: visible;
}
.appt-fu-var-empty {
  min-height: 32px;
  font-size: 11px;
}
.appt-fu-dyn-picker {
  position: relative;
  min-width: 0;
  z-index: 4;
}
.appt-fu-dyn-picker:focus-within,
.appt-fu-var-row:has(.appt-fu-dyn-picker [aria-expanded="true"]) {
  z-index: 20;
}
.appt-fu-editor-toolbar:has([aria-expanded="true"]),
.appt-fu-template-picker:has([aria-expanded="true"]) {
  z-index: 30;
}
.appt-fu-dyn-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.appt-fu-dyn-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appt-fu-dyn-trigger > i {
  flex: none;
  font-size: 10px;
  color: var(--text-muted);
}
.appt-fu-dyn-picker .appt-fu-menu {
  left: auto;
  right: 0;
  min-width: 320px;
  width: max(320px, 100%);
}

@media (max-width: 1100px) {
  .appt-fu-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .appt-fu-panel-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .appt-fu-var-table-head,
  .appt-fu-var-row {
    grid-template-columns: 48px 40px minmax(0, 1fr);
  }
  .appt-fu-dyn-picker .appt-fu-menu {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }
}

/* ---- Appointment availability slots (single-row editor) ---- */
.appt-slot-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}
.appt-slot-head,
.appt-slot-row {
  display: grid;
  grid-template-columns:
    minmax(118px, 1.1fr)
    minmax(128px, 1.2fr)
    minmax(96px, 0.85fr)
    minmax(96px, 0.85fr)
    minmax(88px, 0.75fr)
    minmax(88px, 0.75fr)
    minmax(72px, 0.65fr)
    76px;
  gap: 8px;
  align-items: end;
  min-width: 820px;
}
.appt-slot-head {
  padding: 0 2px 2px;
}
.appt-slot-head > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}
.appt-slot-actions-head {
  width: 76px;
}
.appt-slot-row {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 94%, var(--primary) 3%);
}
.appt-slot-cell {
  min-width: 0;
}
.appt-slot-table .form-control,
.appt-slot-table .form-control-sm {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 9px;
}
.appt-slot-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 0;
  min-height: 36px;
}
.appt-slot-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.appt-slot-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.appt-slot-action-add {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.appt-slot-action-add:hover {
  background: color-mix(in srgb, var(--primary) 16%, #fff);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--card-border));
}
.appt-slot-action-remove {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--card-border));
  background: color-mix(in srgb, var(--danger) 8%, #fff);
}
.appt-slot-action-remove:hover {
  background: color-mix(in srgb, var(--danger) 16%, #fff);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--card-border));
}
.appt-slot-empty {
  margin: 0;
  padding: 14px 4px;
  font-size: 13px;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .appt-slot-head {
    display: none;
  }
  .appt-slot-head,
  .appt-slot-row {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    align-items: stretch;
  }
  .appt-slot-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .appt-slot-cell::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .appt-slot-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-bottom: 0;
  }
  .appt-slot-actions::before {
    content: none;
  }
}

.appt-slot-action-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.appt-slot-action-btn.is-loading {
  position: relative;
  pointer-events: none;
}
.appt-slot-action-btn.is-loading > * {
  visibility: hidden;
}
.appt-slot-action-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: flowBtnSpin .65s linear infinite;
}
.appt-action-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: flowBtnSpin .65s linear infinite;
  vertical-align: middle;
}

.appt-catalog-body {
  position: relative;
  min-height: 240px;
}
.appt-tab-loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg, #fff) 72%, transparent);
  backdrop-filter: blur(2px);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 650;
}
.appt-tab-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--primary) 25%, var(--card-border));
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: flowBtnSpin .65s linear infinite;
}

/* ---- Appointment questionnaire fields ---- */
.appt-field-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.appt-field-head,
.appt-field-row {
  display: grid;
  grid-template-columns:
    36px
    minmax(160px, 1.6fr)
    minmax(150px, 1.3fr)
    minmax(110px, 0.9fr)
    72px
    76px;
  gap: 8px;
  align-items: center;
  min-width: 740px;
}
.appt-field-head {
  padding: 0 2px 2px;
}
.appt-field-actions-head {
  width: 76px;
}
.appt-field-head > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}
.appt-field-block {
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #fff 94%, var(--primary) 3%);
  padding: 10px;
  transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease, transform .12s ease;
}
.appt-field-block.is-dragging {
  opacity: 0.72;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--card-border));
  transform: scale(1.01);
  z-index: 2;
  position: relative;
}
.appt-field-table.is-reordering .appt-field-block:not(.is-dragging) {
  transition: transform .12s ease;
}
.appt-field-table.is-reordering .appt-field-block > * {
  pointer-events: none;
}
.appt-field-table.is-reordering .appt-field-drag-handle {
  pointer-events: auto;
}
.appt-field-cell {
  min-width: 0;
}
.appt-field-table .form-control,
.appt-field-table .form-control-sm {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 9px;
}
.appt-field-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: element;
}
.appt-field-drag-handle:active {
  cursor: grabbing;
}
.appt-field-drag-handle:hover {
  background: color-mix(in srgb, var(--primary) 8%, #fff);
  color: var(--text-sidebar);
}
.appt-field-drag-handle .fa-grip-vertical {
  pointer-events: none;
}
.appt-field-required {
  display: flex;
  align-items: center;
  justify-content: center;
}
.appt-field-required-check {
  margin: 0;
}
.appt-field-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 36px;
}
.appt-field-options {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--card-border) 85%, transparent);
}
.appt-field-options-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.appt-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.appt-field-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--card-border));
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sidebar);
}
.appt-field-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 10px;
}
.appt-field-chip-remove:hover {
  background: color-mix(in srgb, var(--danger) 12%, #fff);
  color: var(--danger);
}
.appt-field-chip-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: min(260px, 100%);
}
.appt-field-chip-add .form-control {
  min-width: 140px;
}
.appt-field-options-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.appt-inline-loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: flowBtnSpin .65s linear infinite;
  vertical-align: -1px;
  color: var(--primary);
}
@media (max-width: 900px) {
  .appt-field-head {
    display: none;
  }
  .appt-field-head,
  .appt-field-row {
    grid-template-columns: 36px 1fr;
    min-width: 0;
    align-items: stretch;
  }
  .appt-field-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .appt-field-drag-cell {
    grid-row: 1 / span 4;
    align-items: flex-start;
    padding-top: 4px;
  }
  .appt-field-cell::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .appt-field-drag-cell::before,
  .appt-field-actions::before {
    content: none;
  }
  .appt-field-required,
  .appt-field-actions {
    grid-column: 2;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* ---- Appointment booking rules + blackout picker ---- */
.appt-booking-rules {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: start;
}
.appt-blackout-picker {
  position: relative;
}
.appt-blackout-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  cursor: pointer;
}
.appt-blackout-trigger-body {
  flex: 1;
  min-width: 0;
}
.appt-blackout-placeholder {
  color: var(--text-muted);
  line-height: 24px;
}
.appt-blackout-trigger > i {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 5px;
  flex-shrink: 0;
}
.appt-blackout-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}
.appt-blackout-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
}
.appt-blackout-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.appt-blackout-chip button:hover {
  color: var(--danger);
}
.appt-blackout-menu {
  position: fixed;
  z-index: 80;
  width: min(300px, calc(100vw - 16px));
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg, #fff);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
}
.appt-blackout-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.appt-blackout-nav strong {
  font-size: 13px;
  font-weight: 700;
}
.appt-blackout-weekdays,
.appt-blackout-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.appt-blackout-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 4px;
}
.appt-blackout-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.appt-blackout-day:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.appt-blackout-day.is-muted,
.appt-blackout-day:disabled {
  opacity: 0;
  pointer-events: none;
}
.appt-blackout-day.is-today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}
.appt-blackout-day.is-selected {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}
.appt-blackout-day.is-selected.is-today {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 70%, transparent);
}
.appt-blackout-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .appt-booking-rules {
    grid-template-columns: 1fr;
  }
}

/* ---- Appointment intro messages: form + live preview ---- */
.section-card.appt-intro-card,
.section-card.appt-ss-card {
  overflow: visible;
}
.appt-intro-layout,
.appt-ss-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important;
  gap: 16px;
  align-items: start;
  width: 100%;
}
.appt-intro-form,
.appt-ss-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.appt-intro-form .form-group,
.appt-ss-form .form-group {
  margin-bottom: 12px;
}
.appt-intro-reply-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 0;
}
.appt-intro-hint,
.appt-ss-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.appt-intro-preview,
.appt-ss-preview {
  position: sticky;
  top: 16px;
  width: 100%;
  max-width: 300px;
  min-width: 0;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.appt-intro-preview-label,
.appt-ss-preview-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.appt-wa-phone {
  width: 100%;
  max-width: 300px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #075e54 22%, var(--card-border));
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: #efeae2;
}
.appt-wa-phone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #075e54, #128c7e);
  color: #fff;
}
.appt-wa-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  font-size: 11px;
}
.appt-wa-phone-bar strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}
.appt-wa-phone-bar small {
  display: block;
  font-size: 9px;
  opacity: 0.85;
  margin-top: 0;
}
.appt-wa-chat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 10px 14px;
  min-height: 320px;
  max-height: min(68vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.35), transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(7, 94, 84, 0.06), transparent 32%),
    #efeae2;
}
.appt-wa-msg {
  position: relative;
  max-width: 88%;
  padding: 7px 9px 5px;
  border-radius: 10px;
  box-shadow: 0 1px 1.5px rgba(11, 20, 26, 0.12);
  color: #111b21;
  font-size: 12.5px;
  line-height: 1.4;
  word-break: break-word;
}
.appt-wa-msg--in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 2px;
}
.appt-wa-msg--in::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  width: 8px;
  height: 10px;
  background: #fff;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.appt-wa-msg--out {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 2px;
}
.appt-wa-msg--out::before {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 8px;
  height: 10px;
  background: #d9fdd3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.appt-token-field {
  position: relative;
  width: 100%;
}
.appt-token-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  white-space: pre;
  color: var(--text-dark);
  pointer-events: none;
  border-color: transparent;
  box-shadow: none;
  background: #fff;
}
.appt-token-input {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: transparent;
  caret-color: var(--text-dark);
}
.appt-token-input::placeholder {
  color: #9aa3ad;
  opacity: 1;
}
.appt-token-input:placeholder-shown {
  color: #9aa3ad;
}
.appt-token-field:has(.appt-token-input:placeholder-shown) .appt-token-backdrop {
  opacity: 0;
}
.appt-token-input::selection {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  color: transparent;
}
.appt-token-chip {
  display: inline;
  margin: 0;
  padding: 0;
  border-radius: 2px;
  background: #c8e6c9;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.appt-wa-msg-text {
  white-space: pre-wrap;
}
.appt-wa-msg-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1;
  color: #667781;
}
.appt-wa-msg--out .appt-wa-msg-meta i {
  color: #53bdeb;
  font-size: 10px;
}
.appt-wa-options {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #3b4a54;
}
.appt-wa-options span {
  display: block;
}
.appt-wa-options-foot {
  margin-top: 4px;
  color: #667781;
  font-size: 11px;
}
.appt-wa-empty {
  align-self: center;
  max-width: 90%;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(17, 27, 33, 0.12);
  color: #667781;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  line-height: 1.35;
}
.appt-wa-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
}
.appt-intro-muted {
  color: #667781;
  font-style: italic;
}
.appt-ss-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}
.appt-ss-toggles label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
@media (max-width: 720px) {
  .appt-intro-layout,
  .appt-ss-layout {
    grid-template-columns: 1fr !important;
  }
  .appt-intro-preview,
  .appt-ss-preview {
    position: static;
    max-width: 320px;
    justify-self: start;
  }
  .appt-intro-reply-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Appointment basics + timezone searchable picker ---- */
.appt-basics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: start;
}
.appt-timezone-picker {
  position: relative;
}
.appt-timezone-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.appt-timezone-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appt-timezone-trigger > i {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
}
.appt-timezone-menu {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
  overflow: hidden;
}
.appt-timezone-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 90%, transparent);
}
.appt-timezone-search > i {
  color: var(--text-muted);
  font-size: 12px;
}
.appt-timezone-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text-dark);
}
.appt-timezone-list {
  overflow-y: auto;
  max-height: 220px;
  padding: 5px;
}
.appt-timezone-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dark);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.appt-timezone-option:hover,
.appt-timezone-option.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.appt-timezone-empty {
  margin: 0;
  padding: 12px 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 900px) {
  .appt-basics-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Appointments calendar (Google-like month grid) ---- */
.appt-cal {
  padding: 16px;
}
.appt-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}
.appt-cal-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.appt-cal-filter {
  margin: 0;
  min-width: 160px;
}
.appt-cal-filter label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
  line-height: 1.2;
}
.appt-cal-filter .form-control,
.appt-cal-filter .form-control-sm {
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 7px;
}
.appt-cal-toolbar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 32px;
}
.appt-cal-toolbar-nav .btn {
  height: 32px;
  box-sizing: border-box;
}
.appt-cal-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 32px;
}
.appt-cal-month-label {
  margin: 0;
  padding: 0;
  width: 10.5rem;
  min-width: 10.5rem;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 32px;
  height: 32px;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appt-cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-sidebar);
  cursor: pointer;
}
.appt-cal-nav-btn:hover {
  background: #f4f6f8;
}
.appt-cal-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  min-height: 32px;
}
.appt-cal-toolbar-actions .btn {
  height: 32px;
  box-sizing: border-box;
}
.appt-cal-create {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--card-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 5%, #fff);
}
.appt-cal-google-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: #fafbfc;
  font-size: 13px;
  color: var(--text-muted);
}
.appt-cal-google-hint p {
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.appt-cal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 14px;
  align-items: stretch;
  min-height: 520px;
}
.appt-cal-main {
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.appt-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--card-border);
  background: #fafbfc;
}
.appt-cal-weekdays > span {
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.appt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 1fr);
}
.appt-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 96px;
  padding: 6px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--card-border) 85%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 85%, transparent);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background .12s ease;
}
.appt-cal-cell:nth-child(7n) {
  border-right: 0;
}
.appt-cal-cell:hover {
  background: color-mix(in srgb, var(--primary) 4%, #fff);
}
.appt-cal-cell.is-outside {
  background: #fafbfc;
  color: var(--text-muted);
}
.appt-cal-cell.is-selected {
  background: color-mix(in srgb, var(--primary) 8%, #fff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
}
.appt-cal-cell-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.appt-cal-cell.is-today .appt-cal-cell-day {
  background: var(--primary);
  color: #fff;
}
.appt-cal-cell-pills {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.appt-cal-pill {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 2px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 14%, #fff);
  color: color-mix(in srgb, var(--primary) 70%, #0f172a);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
}
.appt-cal-pill-time {
  flex-shrink: 0;
  opacity: 0.85;
}
.appt-cal-pill-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appt-cal-more {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 4px;
}
.appt-cal-agenda {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.appt-cal-agenda-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border);
  background: #fafbfc;
}
.appt-cal-agenda-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.appt-cal-agenda-head-title {
  margin: 0;
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
}
.appt-cal-agenda-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}
.appt-cal-agenda-list {
  flex: 1;
  overflow: auto;
  padding: 8px;
  min-height: 0;
}
.appt-booking-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 2px 2px 8px;
}
.appt-booking-detail-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.appt-booking-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.appt-booking-detail-back i {
  font-size: 11px;
}
.appt-booking-detail-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.contacts-panel .appt-booking-detail {
  padding: 16px 18px 20px;
  max-width: 560px;
}
.appt-cal-agenda-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 14px;
  gap: 8px;
  align-items: start;
  width: 100%;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--card-border) 55%, transparent);
}
.appt-cal-agenda-item:hover,
.appt-cal-agenda-item.is-active {
  background: color-mix(in srgb, var(--primary) 6%, #fff);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--card-border));
}
.appt-cal-agenda-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding-top: 1px;
}
.appt-cal-agenda-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.appt-cal-agenda-title {
  font-size: 13px;
  font-weight: 750;
  color: var(--text-dark);
}
.appt-cal-agenda-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.appt-cal-agenda-chevron {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}
.appt-cal-agenda-empty {
  margin: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.appt-booking-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--card-border));
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 8%, #fff) 0%,
      #fff 55%
    );
}
.appt-booking-detail-hero-main {
  min-width: 0;
  flex: 1;
}
.appt-booking-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.appt-cal-detail-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.25;
  word-break: break-word;
}
.appt-booking-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  color: color-mix(in srgb, var(--primary) 70%, #334155);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  line-height: 1.3;
  flex-shrink: 0;
}
.appt-booking-detail-when-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 96px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #fff;
}
.appt-booking-detail-when-day {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.03em;
}
.appt-booking-detail-when-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.appt-booking-detail-when-month {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.appt-booking-detail-when-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}
.appt-booking-detail-facts {
  margin: 0;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.appt-cal-detail-row {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 11px 12px;
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
}
.appt-booking-detail-facts > .appt-cal-detail-row:last-child {
  border-bottom: 0;
}
.appt-cal-detail-row dd {
  margin: 0;
  min-width: 0;
}
.appt-cal-detail-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 1px;
}
.appt-cal-detail-label i {
  width: 12px;
  text-align: center;
  font-size: 11px;
  opacity: 0.85;
}
.appt-booking-detail-value {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-dark);
  line-height: 1.35;
  word-break: break-word;
}
.appt-booking-detail-subvalue {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.appt-booking-detail-notes {
  white-space: pre-wrap;
}
.appt-booking-meet-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--card-border));
  background: color-mix(in srgb, var(--primary) 8%, #fff);
  color: color-mix(in srgb, var(--primary) 75%, #0f172a);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
.appt-booking-meet-link:hover {
  background: color-mix(in srgb, var(--primary) 14%, #fff);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--card-border));
}
.appt-booking-meet-link i {
  font-size: 10px;
}
.appt-booking-detail-answers-block {
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fafbfc;
}
.appt-booking-detail-answers-heading {
  margin: 0 0 10px;
  display: inline-flex;
}
.appt-cal-detail-answers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.appt-cal-detail-answers li {
  display: grid;
  grid-template-columns: minmax(72px, 34%) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  background: #fff;
  font-size: 13px;
}
.appt-booking-answer-key {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  word-break: break-word;
}
.appt-booking-answer-value {
  font-weight: 650;
  color: var(--text-dark);
  word-break: break-word;
}
.appt-booking-detail-actions {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
}
@media (max-width: 520px) {
  .appt-booking-detail-hero {
    flex-direction: column;
  }
  .appt-booking-detail-when-card {
    width: 100%;
  }
  .appt-cal-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .appt-cal-detail-answers li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
@media (max-width: 980px) {
  .appt-cal-body {
    grid-template-columns: 1fr;
  }
  .appt-cal-agenda {
    min-height: 240px;
  }
  .appt-cal-grid {
    grid-auto-rows: minmax(72px, auto);
  }
  .appt-cal-cell {
    min-height: 72px;
  }
  .appt-cal-pill-time {
    display: none;
  }
}

/* ---- Platform settings (Operations → Platform) ---- */
.platform-settings {
  gap: 14px;
}
.platform-settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.platform-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: start;
}
.platform-settings-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.platform-card {
  margin: 0;
}
.platform-card-head {
  margin-bottom: 14px;
}
.platform-card-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.platform-card-title i {
  color: var(--primary);
  width: 1.1em;
  text-align: center;
}
.platform-card-title .fa-meta {
  color: #1877F2;
}
.platform-card-title .fa-whatsapp {
  color: #25D366;
}
.platform-card-title .fa-flag {
  color: var(--warning);
}
.platform-card-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}
.platform-card-fields {
  margin-top: 4px;
}
.platform-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.platform-subsection {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.platform-subsection-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.platform-field-narrow {
  max-width: 240px;
  margin: 0;
}
.wa-meta--platform {
  border-top: 0;
  padding-top: 0;
}
.platform-meta-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.platform-settings-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.platform-flags-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.platform-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-color) 45%, var(--card-bg));
}
.platform-flag strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--text-dark);
}
.platform-flag small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .platform-settings-grid {
    grid-template-columns: 1fr;
  }
  .platform-flags-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- CMS app shell (sidebar + TipTap) ---- */
.cms-body-root {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-color, #f6f7fb);
}
.cms-app {
  min-height: 100vh;
}
.cms-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}
.cms-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  border-right: 1px solid var(--border-light, #e5e7eb);
  background: #fff;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow: hidden;
}
.cms-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}
.cms-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 14px;
}
.cms-sidebar-brand i { color: var(--primary, #128C7E); }
.cms-sidebar-toggle { display: none; }
.cms-sidebar-primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--border-light);
}
.cms-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #4b5563;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}
.cms-sidebar-link:hover { background: color-mix(in srgb, var(--bg-color) 55%, #fff); color: var(--text-dark); }
.cms-sidebar-link.is-active {
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary, #128C7E);
}
.cms-sidebar-tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.cms-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cms-tree-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
.cms-tree-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text-dark);
  text-decoration: none;
  font: inherit;
}
.cms-tree-item:hover { background: color-mix(in srgb, var(--bg-color) 55%, #fff); }
.cms-tree-item.is-active {
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  font-weight: 650;
}
.cms-tree-label {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
.cms-tree-empty {
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.cms-sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-top: 1px solid var(--border-light);
}
.cms-sidebar-foot-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.cms-sidebar-foot-link:hover { background: color-mix(in srgb, var(--bg-color) 55%, #fff); color: var(--text-dark); }

.cms-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  background: var(--bg-color, #f6f7fb);
}
.cms-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px 8px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg-color) 92%, #fff);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
}
.cms-main-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cms-main-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  text-transform: capitalize;
}
.cms-main-publish {
  margin: 0;
  min-width: 160px;
}
.cms-main-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 20px 88px;
  flex: 1;
}

.cms-docs-group { border-bottom: 1px solid var(--border-light); }
.cms-docs-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}
.cms-docs-cat:hover,
.cms-docs-cat.is-active { color: var(--primary); }
.cms-docs-article { padding-left: 22px; }

/* TipTap */
.cms-rich-editor {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.cms-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--bg-color) 40%, #fff);
}
.cms-rich-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.cms-rich-btn:hover { background: #fff; color: var(--text-dark); }
.cms-rich-btn.is-active {
  background: color-mix(in srgb, var(--primary) 14%, #fff);
  color: var(--primary, #128C7E);
}
.cms-rich-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--border-light);
}
.cms-rich-surface {
  min-height: 280px;
}
.cms-rich-editor-prose {
  min-height: 280px;
  padding: 16px 18px;
  outline: none;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dark);
}
.cms-rich-editor-prose p { margin: 0 0 0.85em; }
.cms-rich-editor-prose h2,
.cms-rich-editor-prose h3,
.cms-rich-editor-prose h4 {
  margin: 1.2em 0 0.5em;
  line-height: 1.25;
  font-weight: 750;
}
.cms-rich-editor-prose ul,
.cms-rich-editor-prose ol { padding-left: 1.35em; margin: 0 0 0.85em; }
.cms-rich-editor-prose blockquote {
  margin: 0 0 0.85em;
  padding: 0.35em 0 0.35em 0.9em;
  border-left: 3px solid var(--primary, #128C7E);
  color: var(--text-muted);
}
.cms-rich-editor-prose pre {
  margin: 0 0 0.85em;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  overflow-x: auto;
  font-size: 13px;
}
.cms-rich-editor-prose img.cms-editor-image,
.cms-rich-editor-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.cms-rich-editor-prose a { color: var(--primary, #128C7E); }
.cms-rich-editor-prose p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #9ca3af;
  pointer-events: none;
  height: 0;
}

.cms-panel { margin: 0; }
.cms-panel-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 750;
  color: var(--text-dark);
}
.cms-card-editor {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.cms-media-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.cms-media-thumb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 112px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-color) 50%, #fff);
  cursor: pointer;
  text-align: left;
}
.cms-media-thumb img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: #e5e7eb;
}
.cms-media-thumb span {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cms-media-empty {
  width: 100%;
  padding: 16px;
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.cms-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--card-bg, #fff) 92%, #fff);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(8px);
  margin-top: auto;
}

@media (max-width: 960px) {
  .cms-workspace { grid-template-columns: 1fr; }
  .cms-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 88vw);
    z-index: 40;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0);
  }
  .cms-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.35);
  }
  .cms-sidebar-toggle { display: inline-flex; }
  .cms-main-head { padding-left: 56px; }
  .cms-sidebar-top { position: relative; }
  .cms-sidebar-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 45;
  }
}

/* legacy aliases kept for any remaining partials */
.cms-website { display: contents; }
.cms-website-main { display: contents; }
.cms-website-head { display: contents; }
.cms-website-title { display: contents; }
.cms-page-rail { display: none; }

/* System ops panel */
.system-page .section-card { padding: 18px 20px; }
.system-page .section-card + .section-card { margin-top: 14px; }
.system-page .section-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.system-page .section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
}
.system-status-strip { margin-bottom: 4px; }
.system-status-strip .dash-pulse--system { margin-top: 0; }
.system-health-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.system-schedule-hint {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 13px;
}
.system-schedule-hint code {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(92, 101, 112, 0.1);
  font-size: 12px;
}
.system-page .progress-bar > div { width: 0; max-width: 100%; transition: width .2s ease; }

/* Fixed layout so long artisan commands cannot paint over RSS / actions */
.system-page .system-table-wrap {
  overflow-x: auto;
}
.system-page .system-table {
  table-layout: fixed;
  width: 100%;
}
.system-page .system-table th,
.system-page .system-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.system-page .system-table .col-pid { width: 5.5rem; }
.system-page .system-table .col-role { width: 7.5rem; }
.system-page .system-table .col-rss { width: 7rem; }
.system-page .system-table .col-actions { width: 6.5rem; }
.system-page .system-table .col-cmd {
  width: auto;
  max-width: 0; /* force ellipsis inside fixed table */
}
.system-page .system-table td.col-cmd,
.system-page .system-table td.col-cmd code,
.system-page .system-table code.system-cmd {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.system-page .system-table td:has(> code),
.system-page .system-table td code {
  width: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.system-page .admin-table-wrapper .admin-table {
  table-layout: fixed;
}
.system-page .admin-table td.flow-name-cell,
.system-page .admin-table td.flow-name-cell code {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}