:root {
  color-scheme: light;
  --brand: #6d3bea;
  --brand-deep: #5124bd;
  --brand-soft: #f2eeff;
  --ink: #172033;
  --muted: #667085;
  --line: #e7eaf0;
  --line-strong: #d6dbe5;
  --canvas: #f5f7fb;
  --panel: #ffffff;
  --panel-warm: #f8fafc;
  --green: #177a55;
  --green-soft: #e8f7f0;
  --amber: #a55d07;
  --amber-soft: #fff4da;
  --blue: #2b68a0;
  --blue-soft: #eaf3fb;
  --violet: #7c3aed;
  --chat-canvas: #efeae2;
  --chat-incoming: #ffffff;
  --chat-outgoing: #d9fdd3;
  --chat-text: #111b21;
  --chat-meta: #667781;
  --chat-incoming-border: #dedad3;
  --chat-reply-incoming: #f0f2f5;
  --chat-reply-outgoing: #cde9c8;
  --chat-attachment-incoming: #f1f3f4;
  --chat-attachment-outgoing: #cbe8c7;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 5px 16px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 70px rgba(16, 24, 40, .16);
  --radius-sm: 9px;
  --radius: 14px;
  --sidebar-width: 226px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-sans);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

.auth-gate {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background: #eef1ed;
  padding: 32px 18px 62px;
}
.auth-backdrop { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: radial-gradient(circle at 15% 10%, #fff 0, transparent 35%), linear-gradient(145deg, #f5f6f2, #e9ede7); }
.auth-backdrop::after { content: ""; position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(circle at 1px 1px, rgba(55,72,68,.16) 1px, transparent 0); background-size: 25px 25px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.auth-backdrop i { position: absolute; border-radius: 50%; filter: blur(1px); }
.auth-backdrop i:nth-child(1) { width: 420px; height: 420px; right: -150px; top: -130px; background: rgba(109,59,234,.14); }
.auth-backdrop i:nth-child(2) { width: 330px; height: 330px; left: -120px; bottom: -110px; background: rgba(28,116,88,.1); }
.auth-backdrop i:nth-child(3) { width: 180px; height: 180px; left: 18%; top: 4%; border: 1px solid rgba(109,59,234,.12); }
.session-splash { position: fixed; z-index: 1000; inset: 0; display: grid; place-content: center; justify-items: center; gap: 17px; background: #f5f6f2; }
.session-splash img { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; box-shadow: 0 9px 24px rgba(70,22,126,.16); }
.auth-card { width: min(450px, 100%); border: 1px solid rgba(255,255,255,.8); border-radius: 25px; background: rgba(255,255,255,.93); box-shadow: 0 28px 90px rgba(36,49,45,.15); backdrop-filter: blur(18px); padding: clamp(24px, 5vw, 42px); }
.auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; color: var(--ink); font-size: 18px; letter-spacing: -.35px; }
.auth-brand strong { color: var(--brand); }
.auth-brand-logo { display: block; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 16px; object-fit: cover; box-shadow: 0 9px 24px rgba(70,22,126,.2); }
.auth-signed-out { text-align: center; }
.auth-signed-out h1 { margin: 17px 0 8px; font: 720 clamp(31px, 7vw, 42px)/1.05 var(--font-sans); letter-spacing: -1.25px; }
.auth-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid #e4ddd8; border-top-color: var(--brand); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-alert { border: 1px solid #f1c3b8; border-radius: 10px; background: #fff1ec; color: #963723; margin: 18px 0 0; padding: 9px 11px; text-align: left; font-size: 11px; }
.auth-alert.is-success { border-color: #b7d7c4; background: #eef8f1; color: #1f6b45; }
.auth-form { display: grid; gap: 12px; margin-top: 18px; text-align: left; }
.auth-form .field-label { margin: 0; }
.auth-form .text-field { margin-top: 6px; }
.auth-submit { width: 100%; min-height: 48px; margin-top: 4px; }
.auth-text-link { display: inline-flex; justify-content: center; width: 100%; margin-top: 2px; border: 0; background: transparent; color: var(--brand); font-size: 12px; font-weight: 650; text-decoration: none; }
.auth-text-link:hover { text-decoration: underline; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 18px 0 0; color: #8a94a6; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: #e1e6e2; }
.google-signin { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border: 1px solid #d9ddda; border-radius: 12px; background: #fff; color: #26312f; box-shadow: var(--shadow-sm); margin-top: 14px; text-decoration: none; font-size: 13px; font-weight: 750; transition: border .15s ease, transform .15s ease, box-shadow .15s ease; }
.google-signin:hover { border-color: #bfc6c2; box-shadow: 0 7px 20px rgba(34,44,40,.09); transform: translateY(-1px); }
.google-signin svg { width: 21px; height: 21px; stroke: none; }
.google-signin svg path:nth-child(1) { fill: #4285f4; }
.google-signin svg path:nth-child(2) { fill: #34a853; }
.google-signin svg path:nth-child(3) { fill: #fbbc05; }
.google-signin svg path:nth-child(4) { fill: #ea4335; }
.auth-footer { position: absolute; bottom: 22px; color: #8490a3; font-size: 11px; letter-spacing: .03em; }

.inline-field { display: flex; align-items: stretch; gap: 7px; }
.inline-field .text-field { min-width: 0; }
.inline-field .secondary-button { flex: 0 0 auto; }

button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid rgba(109, 59, 234, .24); outline-offset: 2px; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 1000;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  padding: 10px 14px;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

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

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  background: #171827;
  color: #dce4e2;
  padding: 20px 13px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin: 0 7px 28px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  letter-spacing: -.3px;
}
.brand strong { color: #c4b5fd; font-weight: 750; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px 10px 10px 4px;
  overflow: hidden;
  background: #6413d9;
  box-shadow: 0 6px 18px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.25);
  font: 750 17px/1 var(--font-sans);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-copy { white-space: nowrap; }

.primary-nav { display: grid; gap: 4px; }
.nav-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #aebcba;
  padding: 8px 10px;
  text-align: left;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-button:hover { background: rgba(255,255,255,.06); color: white; }
.nav-button.is-active { background: rgba(124,92,255,.18); color: white; box-shadow: inset 3px 0 #a78bfa; }
.nav-icon { display: grid; place-items: center; }
.nav-icon svg { width: 19px; height: 19px; }
.nav-group { display: grid; gap: 3px; }
.nav-group-toggle.is-active { color: white; }
.nav-caret { width: 16px; height: 16px; transition: transform .16s ease; }
.nav-group-toggle[aria-expanded="true"] .nav-caret, .nav-section-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 2px; border-left: 1px solid rgba(255,255,255,.11); margin: 1px 0 3px 19px; padding-left: 8px; }
.nav-submenu-nested { margin: 1px 0 2px 13px; }
.nav-subitem { min-height: 36px; border-radius: 9px; padding-block: 5px; font-size: 11px; }
.nav-subitem .nav-icon svg { width: 16px; height: 16px; }
.nav-provider-icon img { display: block; width: 17px; height: 17px; object-fit: contain; }
.nav-section-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 30px; border: 0; border-radius: 8px; background: transparent; color: #7f918f; padding: 5px 8px 4px 13px; text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.nav-section-toggle:hover { background: rgba(255,255,255,.045); color: #cbd5d3; }
.nav-count {
  min-width: 23px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  padding: 2px 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}
.nav-count:empty { display: none; }

.sidebar-bottom { display: grid; gap: 10px; margin-top: auto; }
.workspace-card {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  padding: 11px;
}
.workspace-card div { min-width: 0; }
.workspace-card strong, .workspace-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card strong { color: #f2f5f4; font-size: 12px; }
.workspace-card div > span { margin-top: 2px; color: #91a09e; font-size: 11px; }
.presence-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #50c995; box-shadow: 0 0 0 4px rgba(80,201,149,.12); }

.main { display: grid; grid-template-rows: 50px minmax(0, 1fr); width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.91);
  backdrop-filter: blur(14px);
  padding: 0 22px;
}
.topbar-title { min-width: 0; }
.eyebrow { margin: 0 0 1px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar .eyebrow { font-size: 9px; }
.topbar h1 { margin: 0; font-family: var(--font-sans); font-size: 18px; font-weight: 720; letter-spacing: -.35px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }

.user-menu-wrap { position: relative; }
.user-menu-button { display: flex; align-items: center; gap: 9px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; padding: 3px 5px 3px 3px; text-align: left; }
.user-menu-button:hover, .user-menu-button[aria-expanded="true"] { background: #f4f5f2; }
.user-menu-button .avatar { overflow: hidden; }
.user-menu-button .avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-compact { display: grid; min-width: 0; max-width: 120px; }
.user-compact strong, .user-compact small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-compact strong { font-size: 11px; }
.user-compact small { color: var(--muted); font-size: 9px; text-transform: capitalize; }
.user-chevron { width: 14px; height: 14px; color: #788380; }
.user-menu { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; width: 225px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 18px 48px rgba(25,34,31,.17); padding: 7px; }
.user-menu-identity { display: grid; border-bottom: 1px solid var(--line); margin: 0 5px 5px; padding: 8px 5px 11px; }
.user-menu-identity strong { font-size: 12px; }
.user-menu-identity span { overflow: hidden; color: var(--muted); margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.user-menu-identity em { justify-self: start; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); margin-top: 7px; padding: 3px 8px; font-size: 9px; font-style: normal; font-weight: 750; text-transform: capitalize; }
.user-menu > button { display: block; width: 100%; border: 0; border-radius: 8px; background: transparent; padding: 9px 10px; text-align: left; font-size: 11px; color: var(--ink); }
.user-menu > button:hover { background: #f4f5f2; }
.user-menu .logout-button { color: #a63e2d; }
.phone-fields { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.phone-country-code { text-align: center; }
.profile-save-state { flex: 1; color: var(--muted); font-size: 11px; align-self: center; }

.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 650;
}
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa4a1; box-shadow: 0 0 0 3px rgba(154,164,161,.12); }
.connection-pill.is-online .connection-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(23,122,85,.12); }
.connection-pill.is-error .connection-dot { background: #c43d2e; box-shadow: 0 0 0 3px rgba(196,61,46,.12); }

.icon-button, .composer-icon, .send-button, .avatar-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: transparent;
}
.icon-button { width: 36px; height: 36px; border-radius: 10px; color: #53605f; }
.icon-button:hover { border-color: var(--line); background: #f7f8f6; color: var(--ink); }
.icon-button.elevated { border-color: var(--line); background: white; box-shadow: var(--shadow-sm); color: var(--brand); }
.mobile-menu, .mobile-back { display: none; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: #e7e9e5;
  color: #4c5857;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.avatar-button { border-color: #e3d7d2; background: var(--brand-soft); color: var(--brand-deep); }

.route { height: 100%; min-height: 0; overflow: hidden; }
.inbox-grid { display: grid; grid-template-columns: minmax(290px, 355px) minmax(0, 1fr); height: 100%; min-height: 0; overflow: hidden; }
.inbox-grid.has-details { grid-template-columns: minmax(285px, 330px) minmax(360px, 1fr) minmax(245px, 285px); }

.conversation-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 18px 13px; }
.panel-toolbar h2, .details-head h2 { margin: 0 0 2px; font-family: var(--font-sans); font-size: 19px; font-weight: 720; letter-spacing: -.35px; }
.subtle { color: var(--muted); font-size: 12px; }

.inbox-search-row,
.contact-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 12px;
}
.inbox-search-row .search-wrap,
.contact-search-row .search-wrap { flex: 1; min-width: 0; margin: 0; }
.contact-search-row { margin: 0; width: min(420px, 100%); }
.contact-search-row .compact-search { width: auto; flex: 1; }
.select-mode-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border-color: #d7dcd9;
  background: white;
  color: #53605f;
}
.select-mode-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.select-mode-toggle[aria-pressed="true"] {
  border-color: #c4b3f5;
  background: #f4efff;
  color: var(--brand);
}
.bulk-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 14px 10px;
  padding: 8px 10px;
  border: 1px solid #e7ebe8;
  border-radius: 12px;
  background: #fafbf9;
}
.contact-bulk-bar { margin: 0 16px 10px; }
.bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.bulk-select-all input {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  cursor: pointer;
  flex: 0 0 auto;
}
.bulk-select-all input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.bulk-select-all:has(input:disabled) {
  cursor: not-allowed;
  color: #8a9491;
}
.bulk-action-buttons { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.conversation-item.is-select-mode {
  grid-template-columns: 22px 42px minmax(0, 1fr) auto;
  cursor: pointer;
}
.conversation-item.is-select-mode.is-checked { background: #f7f4ff; }
.conversation-select-check {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand);
  align-self: center;
}
.contact-select-col { width: 36px; text-align: center; }
.contact-table tbody tr.is-checked { background: #f7f4ff; }
.contact-row-check { width: 15px; height: 15px; accent-color: var(--brand); }
.search-wrap { position: relative; display: flex; align-items: center; margin: 0 14px 12px; }
.search-wrap svg { position: absolute; left: 12px; width: 17px; height: 17px; color: #84908e; pointer-events: none; }
.search-wrap input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7f8f6;
  color: var(--ink);
  padding: 8px 40px 8px 37px;
  outline: 0;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}
.search-wrap input:focus { border-color: #b8a5f3; background: white; box-shadow: 0 0 0 3px rgba(109,59,234,.09); }
.search-shortcut { position: absolute; right: 11px; border: 1px solid var(--line-strong); border-radius: 5px; background: white; color: #77817f; padding: 1px 6px; font-size: 10px; }

.conversation-filter-desktop { position: relative; border-bottom: 1px solid var(--line); padding: 0 14px 12px; }
.conversation-filter-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #f9faf8; color: #53605d; padding: 7px 10px; text-align: left; }
.conversation-filter-trigger:hover, .conversation-filter-trigger[aria-expanded="true"] { border-color: #cec3f6; background: #faf8ff; color: var(--brand-deep); }
.conversation-filter-trigger > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.conversation-filter-trigger svg { width: 15px; height: 15px; flex: 0 0 auto; }
.conversation-filter-trigger strong { color: var(--ink); font-size: 11px; }
.conversation-filter-trigger em { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-style: normal; font-weight: 600; }
.conversation-filter-trigger b { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 999px; background: var(--brand); color: white; padding: 0 5px; font-size: 9px; }
.conversation-filter-trigger[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
.conversation-filter-menu { position: absolute; z-index: 30; top: calc(100% - 6px); right: 14px; left: 14px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 16px 42px rgba(20,29,26,.16); padding: 8px; }
.conversation-filter-option { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 8px; border-radius: 8px; color: #4f5b58; padding: 8px 7px; cursor: pointer; font-size: 11px; font-weight: 650; }
.conversation-filter-option:hover { background: #f7f5ff; }
.conversation-filter-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.conversation-filter-option small { color: #909a97; font-size: 9px; }
.conversation-filter-clear { border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--brand-deep); margin-top: 5px; padding: 9px 7px 3px; text-align: left; font-size: 10px; font-weight: 750; }
.filter-row { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); padding: 0 14px 12px; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 1px solid var(--line); border-radius: 999px; background: white; color: #687270; padding: 4px 10px; white-space: nowrap; font-size: 11px; font-weight: 650; }
.filter-chip span { min-width: 17px; border-radius: 999px; background: #eef0ed; padding: 1px 5px; font-size: 10px; }
.filter-chip:hover, .filter-chip.is-active { border-color: #d7ccfb; background: var(--brand-soft); color: var(--brand-deep); }
.filter-chip.is-active span { background: #e4dcff; }

.conversation-list {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #d8dcda transparent;
}
.conversation-load-more {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 12px 12px;
}
.conversation-load-more:has(> .conversation-load-sentinel:only-child) {
  padding: 0;
  min-height: 0;
}
.conversation-load-sentinel { width: 100%; height: 1px; }
.conversation-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 72px;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #eef0ed;
  background: white;
  padding: 15px 14px;
  text-align: left;
  transition: background .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.conversation-item:hover { background: #fafbf9; }
.conversation-item:active { background: #edf0ed; }
.conversation-item.is-selected { background: linear-gradient(90deg, var(--brand-soft), #faf9ff); box-shadow: inset 3px 0 var(--brand); }
.conversation-avatar { position: relative; }
.conversation-avatar .avatar { width: 42px; height: 42px; border-radius: 14px; background: var(--avatar-bg, #e7e9e5); color: var(--avatar-fg, #42504e); }
.channel-mini {
  position: absolute;
  right: -3px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-radius: 50%;
  background: white;
  object-fit: contain;
  font-size: 9px;
  font-weight: 800;
}
.provider-logo-fallback { background: var(--channel-color, #64706f); color: white; }
.conversation-copy {
  display: grid;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  align-self: center;
}
.conversation-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; overflow: hidden; }
.conversation-name-row strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.priority-mark { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #d08a21; }
.conversation-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.conversation-preview-logo {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
  border-radius: 3px;
}
.conversation-preview-logo.provider-logo-fallback {
  display: grid;
  place-items: center;
  background: #e7ebe8;
  color: #5f6c69;
  font-size: 6px;
  font-weight: 800;
}
.conversation-preview-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-side { display: grid; justify-items: end; align-content: space-between; gap: 6px; min-width: 0; padding-top: 1px; }
.conversation-time { color: #8a94a6; font-size: 11px; white-space: nowrap; }
.unread-badge { display: grid; place-items: center; width: 20px; min-width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: white; padding: 0; text-align: center; font-size: 9px; font-weight: 750; }

.empty-list { display: grid; place-items: center; min-height: 200px; color: var(--muted); padding: 28px; text-align: center; }
.skeleton { animation: pulse 1.25s ease-in-out infinite alternate; }
.conversation-skeleton { display: flex; gap: 12px; border-bottom: 1px solid #eef0ed; padding: 15px; }
.conversation-skeleton > span { width: 42px; height: 42px; border-radius: 14px; background: #eceeeb; }
.conversation-skeleton div { display: grid; align-content: center; gap: 8px; flex: 1; }
.conversation-skeleton i { display: block; width: 58%; height: 8px; border-radius: 5px; background: #eceeeb; }
.conversation-skeleton i:last-child { width: 86%; }
@keyframes pulse { to { opacity: .48; } }

.chat-panel { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: var(--chat-canvas); }
.chat-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: none;
}
.empty-state { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; height: 100%; padding: 30px; text-align: center; }
.empty-state h2 { max-width: 390px; margin: 20px 0 8px; font-family: var(--font-sans); font-size: clamp(23px, 3vw, 32px); font-weight: 720; line-height: 1.1; letter-spacing: -.8px; }
.empty-state p { max-width: 430px; margin: 0; color: var(--muted); }
.empty-illustration { position: relative; width: 95px; height: 75px; }
.empty-illustration span { position: absolute; display: block; border: 1px solid #d4d8d2; border-radius: 18px 18px 18px 5px; background: white; box-shadow: var(--shadow-sm); }
.empty-illustration span:nth-child(1) { inset: 22px 24px 0 0; transform: rotate(-5deg); }
.empty-illustration span:nth-child(2) { inset: 2px 0 20px 30px; border-color: #d7ccfb; background: var(--brand-soft); transform: rotate(5deg); }
.empty-illustration span:nth-child(3) { width: 8px; height: 8px; top: 28px; left: 56px; border: 0; border-radius: 50%; background: var(--brand); box-shadow: 13px 0 var(--brand), 26px 0 var(--brand); }

.chat-content { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.chat-header { position: relative; z-index: 30; display: flex; align-items: center; min-height: 52px; gap: 9px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(12px); padding: 5px 12px; }
.chat-contact-card { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; gap: 9px; overflow: hidden; border: 0; border-radius: 11px; outline: 0; background: transparent; color: inherit; padding: 3px; text-align: left; font: inherit; cursor: pointer; }
.chat-contact-card:hover { background: #f7f8f6; }
.chat-contact-card:focus-visible { box-shadow: 0 0 0 3px rgba(109,59,234,.18); }
.contact-avatar { background: var(--brand-soft); color: var(--brand-deep); }
.chat-person { min-width: 0; flex: 1 1 auto; }
.chat-person-title-row { display: flex; align-items: baseline; min-width: 0; gap: 8px; margin-bottom: 2px; }
.chat-title { min-width: 0; overflow: hidden; flex: 0 1 auto; text-overflow: ellipsis; white-space: nowrap; font: 720 14px/1.2 var(--font-sans); letter-spacing: -.15px; }
.chat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; min-width: 0; color: var(--muted); font-size: 10px; }
.channel-badge { border-radius: 999px; background: var(--blue-soft); color: var(--blue); padding: 2px 7px; font-size: 10px; font-weight: 750; }
.chat-channel-badge { display: inline-flex; align-items: center; gap: 5px; min-width: 0; border-radius: 999px; background: #f2f4f1; color: #53605d; padding: 2px 7px 2px 3px; font-size: 9px; font-weight: 750; }
.chat-channel-badge img { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; border-radius: 4px; }
.chat-channel-badge span { overflow: hidden; max-width: 190px; text-overflow: ellipsis; white-space: nowrap; }
.chat-profile-id { min-width: 0; overflow: hidden; max-width: 210px; flex: 0 1 auto; color: #526075; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; font-variant-numeric: tabular-nums; }
.chat-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.whatsapp-reply-countdown { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 101px; height: 31px; border: 1px solid #bfe4d3; border-radius: 999px; background: #eef9f4; color: #247153; padding: 0 9px; white-space: nowrap; font: 750 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.whatsapp-reply-countdown img { width: 19px; height: 19px; flex: 0 0 19px; object-fit: contain; }
.whatsapp-reply-countdown[hidden] { display: none; }
.whatsapp-reply-countdown[data-expired="true"] { border-color: var(--line); background: #f3f5f3; color: var(--muted); }
.conversation-menu-wrap { position: relative; flex: 0 0 auto; }
.conversation-more-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #697572; padding: 0; }
.conversation-more-button:hover, .conversation-more-button[aria-expanded="true"] { border-color: var(--line); background: #f6f7f5; color: var(--ink); }
.conversation-more-button svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.conversation-action-menu { position: absolute; z-index: 35; top: calc(100% + 6px); right: 0; min-width: 180px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 16px 42px rgba(20,29,26,.18); padding: 6px; }
.conversation-action-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 8px; background: transparent; color: #a33f2d; padding: 9px 10px; text-align: left; font-size: 11px; font-weight: 720; }
.conversation-action-menu button:hover, .conversation-action-menu button:focus-visible { background: #fff1ed; outline: 0; }
.conversation-action-menu svg { width: 16px; height: 16px; flex: 0 0 auto; }
.compact-select { height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; color: #475467; padding: 0 30px 0 11px; font-size: 12px; font-weight: 650; }
.assignee-select { max-width: 145px; }
.conversation-status-wrap { position: relative; flex: 0 0 auto; }
.conversation-status-toast {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  background: #1d292a;
  color: white;
  box-shadow: 0 14px 34px rgba(22,28,27,.22);
  padding: 13px 16px;
  pointer-events: none;
  animation: toast-in .2s ease;
}
.conversation-status-toast[hidden] { display: none; }
.conversation-status-toast strong { display: block; font-size: 14px; font-weight: 750; }
.conversation-status-toast span { display: block; color: #c5cfcd; font-size: 12px; line-height: 1.4; }
.conversation-status-toast.is-error { border-color: rgba(255,138,117,.35); }
.conversation-status-toast.is-error::before,
.conversation-status-toast::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  background: #1d292a;
  transform: rotate(45deg);
}
.conversation-status-toast.is-error::before { border-color: rgba(255,138,117,.35); }

.message-thread { position: relative; z-index: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; padding: 16px clamp(16px, 3vw, 38px) 12px; scrollbar-color: #d1d5d2 transparent; }
.message-jump-button { position: absolute; z-index: 18; right: clamp(18px, 3vw, 38px); bottom: 108px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(102,113,109,.18); border-radius: 50%; background: var(--chat-incoming); box-shadow: 0 5px 16px rgba(20,29,26,.18); color: #52605d; padding: 0; cursor: pointer; }
.message-jump-button[hidden] { display: none; }
.message-jump-button:hover { border-color: rgba(109,59,234,.35); color: var(--brand); }
.message-jump-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.message-jump-count { position: absolute; top: -7px; right: -4px; display: grid; place-items: center; min-width: 21px; height: 21px; border: 2px solid var(--chat-canvas); border-radius: 999px; background: var(--brand); color: white; padding: 0 5px; font-size: 9px; font-weight: 850; line-height: 1; }
.message-jump-count[hidden] { display: none; }
.unread-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.unread-divider::before, .unread-divider::after { content: ""; flex: 1; height: 1px; background: rgba(109,59,234,.28); }
.message-event {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: #667781;
  text-align: center;
}
.message-event::before,
.message-event::after {
  content: "";
  flex: 1;
  min-width: 24px;
  border-top: 1px solid rgba(102, 119, 129, .38);
}
.message-event-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 6px;
  max-width: min(78%, 420px);
  line-height: 1.35;
}
.message-event-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
}
.message-event-time {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .85;
  white-space: nowrap;
}
.message-row { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0; }
.message-row.is-outbound { justify-content: flex-end; }
.message-stack { display: grid; justify-items: start; min-width: 0; max-width: min(72%, 610px); }
.message-row.is-outbound .message-stack { justify-items: end; }
.message-row[data-replyable="true"] { position: relative; touch-action: pan-y; }
.message-row[data-replyable="true"]::before { content: ""; position: absolute; top: 50%; left: 4px; z-index: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d3bea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3Cpath d='M4 12h9a7 7 0 0 1 7 7'/%3E%3C/svg%3E") center/16px no-repeat; opacity: 0; transform: translateY(-50%) scale(.75); transition: opacity .15s ease, transform .15s ease; }
.message-row[data-replyable="true"].is-swipe-ready::before { opacity: 1; transform: translateY(-50%) scale(1); }
.message-bubble { position: relative; min-width: 68px; max-width: 100%; border: 1px solid var(--chat-incoming-border); border-radius: 18px 18px 18px 5px; background: var(--chat-incoming); color: var(--chat-text); box-shadow: none; padding: 10px 14px; }
.message-row .message-bubble { transform: translateX(var(--reply-swipe, 0)); }
.message-reply-button { align-self: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #8a9491; opacity: 0; font-size: 16px; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.message-row:hover .message-reply-button, .message-reply-button:focus-visible { opacity: 1; }
.message-reply-button:hover { border-color: var(--line); background: white; color: var(--brand); }
.message-row.is-located .message-bubble { animation: located-message 4.5s ease; }
@keyframes located-message { 5%, 85% { box-shadow: 0 0 0 4px rgba(109,59,234,.2), 0 8px 24px rgba(16,24,40,.1); } }
.message-row.is-outbound .message-bubble { border-color: transparent; border-radius: 18px 18px 5px 18px; background: var(--chat-outgoing); }
.message-route-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
.message-route-meta { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; color: var(--chat-meta); font-size: 9px; font-weight: 400; line-height: 1.25; text-align: left; }
.message-route-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--chat-meta); font-weight: 400; }
.message-route-channel { min-width: 0; }
.message-route-dot { flex: 0 0 auto; overflow: visible; }
.message-route-logo { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 4px; object-fit: contain; }
.message-route-meta .provider-logo-fallback { display: grid; place-items: center; background: #e6eae7; color: #56625f; font-size: 5px; font-weight: 700; }
.message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.message-text strong { font-weight: 780; }
.message-text code { border-radius: 4px; background: rgba(75,85,99,.1); padding: 1px 4px; font: .92em/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.message-template-actions { display: grid; border-top: 1px solid rgba(109,59,234,.16); margin: 8px -14px -4px; }
.message-template-action { display: flex; align-items: center; justify-content: center; min-height: 35px; color: var(--brand-deep); padding: 7px 12px; text-align: center; font-size: 12px; font-weight: 760; line-height: 1.3; text-decoration: none; }
.message-template-action + .message-template-action { border-top: 1px solid rgba(109,59,234,.12); }
.message-template-action[aria-disabled="true"] { cursor: default; }
a.message-template-action.is-link { cursor: pointer; }
a.message-template-action.is-link:hover,
a.message-template-action.is-link:focus-visible { background: rgba(109,59,234,.07); outline: none; }
.message-foot { display: block; min-width: 65px; margin-top: 5px; color: var(--chat-meta); font-size: 10px; }
.message-foot-main { display: grid; justify-items: stretch; gap: 2px; width: 100%; min-width: 0; }
.message-foot-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; margin-left: auto; flex: 0 0 auto; }
.message-foot-main > time { display: block; font-size: 9px; color: var(--chat-meta); font-weight: 400; line-height: 1.25; text-align: left; }
.message-status-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.message-status-info:hover,
.message-status-info[aria-expanded="true"] { color: var(--blue); background: rgba(37, 99, 235, 0.08); }
.message-status-info:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.42); outline-offset: 1px; }
.message-status-menu {
  position: fixed;
  z-index: 95;
  display: grid;
  gap: 6px;
  min-width: 200px;
  border: 1px solid #d9dfdb;
  border-radius: 12px;
  background: white;
  padding: 9px 11px;
  box-shadow: 0 14px 36px rgba(27, 37, 33, 0.18), 0 2px 8px rgba(27, 37, 33, 0.08);
}
.message-status-menu-title {
  color: #66716e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.message-status-menu-list { display: grid; gap: 5px; }
.message-status-menu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em;
  line-height: 1.35;
}
.message-status-menu-label {
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
}
.message-status-menu-time {
  color: #66716e;
  font-size: 10px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delivery-status { font-size: 10px; font-weight: 750; white-space: nowrap; }
.delivery-status.is-sent, .delivery-status.is-pending { color: #7b8582; }
.delivery-status.is-delivered { color: #397468; }
.delivery-status.is-read { color: var(--blue); }
.message-route-meta .message-sender.is-outbound-sender {
  margin: 0;
  color: var(--chat-meta);
  font-size: 9px;
  font-weight: 400;
  text-align: left;
  line-height: 1.25;
}
.message-failed { color: #b33326; }
.message-error {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(179, 51, 38, 0.1);
  color: #8f2a20;
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.message-attachment { display: grid; gap: 8px; min-width: min(260px, 58vw); margin: -4px -6px 8px; overflow: hidden; border: 1px solid rgba(102,113,109,.12); border-radius: 11px; background: var(--chat-attachment-incoming); }
.message-row.is-outbound .message-attachment { background: var(--chat-attachment-outgoing); }
.message-media-link { display: block; width: 100%; border: 0; background: transparent; padding: 0; text-align: inherit; line-height: 0; cursor: zoom-in; }
.message-media-preview { display: block; width: 100%; max-width: 420px; max-height: 320px; object-fit: cover; background: #e9edeb; }
.message-media-frame { position: relative; display: grid; width: 100%; min-height: 148px; background: #e9edeb; }
.message-media-frame > .message-media-link,
.message-media-frame > .message-media-preview { grid-area: 1 / 1; }
.message-media-loading { display: grid; place-items: center; width: 100%; min-height: 148px; background: rgba(233, 237, 235, .92); }
.message-media-frame > .message-media-loading { grid-area: 1 / 1; z-index: 1; }
.message-row.is-outbound .message-media-loading { background: rgba(210, 232, 220, .95); }
.message-media-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid rgba(47, 107, 95, .2); border-top-color: #1f574c; border-radius: 50%; animation: spin .7s linear infinite; }
.message-row.is-outbound .message-media-spinner { border-color: rgba(31, 87, 76, .25); border-top-color: #18473e; }
.message-attachment audio { width: min(330px, 62vw); margin: 10px 10px 0; }
.message-attachment-info { display: grid; gap: 2px; min-width: 0; padding: 9px 10px 10px; }
.message-attachment-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.message-attachment-info > span { color: var(--muted); font-size: 9px; }
.message-attachment-actions { display: flex; gap: 12px; margin-top: 5px; }
.message-attachment-action { border: 0; background: transparent; color: var(--brand); padding: 0; font-size: 10px; font-weight: 800; text-decoration: none; cursor: pointer; }
.message-attachment-action:hover { text-decoration: underline; }
.message-attachment-unavailable { line-height: 1.45; }
.message-quote { display: grid; width: 100%; min-width: 0; overflow: hidden; border: 0; border-left: 3px solid var(--brand); border-radius: 10px; background: var(--chat-reply-incoming); margin: 0 0 8px; padding: 6px 8px; color: inherit; text-align: left; cursor: pointer; }
.message-row.is-outbound .message-quote { background: var(--chat-reply-outgoing); }
.message-quote.is-inbound { border-left-color: var(--green); }
.message-quote:disabled { cursor: default; }
.message-quote strong { color: var(--brand-deep); font-size: 10px; }
.message-quote.is-inbound strong { color: var(--green); }
.message-quote span { overflow: hidden; color: #66716e; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }

.read-only-field[readonly] { cursor: default; background: #f2f4f1; color: #3f4a47; }

.typing-row { display: flex; align-items: center; gap: 4px; background: var(--chat-canvas); color: var(--muted); padding: 2px 24px 8px; }
.typing-row span { width: 5px; height: 5px; border-radius: 50%; background: #9da6a3; animation: type-dot 1s infinite alternate; }
.typing-row span:nth-child(2) { animation-delay: .18s; }
.typing-row span:nth-child(3) { animation-delay: .36s; }
.typing-row em { margin-left: 5px; font-size: 10px; }
@keyframes type-dot { to { transform: translateY(-3px); opacity: .5; } }

.composer { background: rgba(247,248,252,.96); padding: 6px clamp(14px, 2.5vw, 30px) max(10px, env(safe-area-inset-bottom)); }
.composer-box { border: 1px solid var(--line-strong); border-radius: 13px; background: white; box-shadow: 0 8px 24px rgba(16,24,40,.06); padding: 9px 10px 8px 13px; transition: border .15s ease, box-shadow .15s ease; }
.composer-box:focus-within { border-color: #b8a5f3; box-shadow: 0 0 0 3px rgba(109,59,234,.09), 0 8px 24px rgba(16,24,40,.06); }
.composer-reply { display: grid; grid-template-columns: minmax(0,1fr) 28px; align-items: center; gap: 8px; border-bottom: 1px solid #edf0ed; border-left: 3px solid var(--brand); margin: -1px -1px 8px; padding: 6px 5px 8px 9px; }
.composer-reply[hidden] { display: none; }
.composer-reply > div { display: grid; min-width: 0; }
.composer-reply strong { color: var(--brand-deep); font-size: 10px; }
.composer-reply span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.composer-reply-close { width: 28px; height: 28px; border-radius: 8px; color: #76817e; font-size: 18px; }
.composer-reply-close:hover { background: #f1f3f0; color: var(--ink); }
.composer textarea { display: block; width: 100%; min-height: 36px; max-height: 150px; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); padding: 4px 2px 8px; line-height: 1.5; }
.composer textarea::placeholder { color: #98a19f; }
.attachment-queue { display: flex; gap: 8px; overflow-x: auto; border-top: 1px solid #edf0ed; margin: 2px -2px 8px; padding: 9px 2px 1px; }
.attachment-queue-item { position: relative; display: grid; grid-template-columns: 42px minmax(90px, 1fr) 24px; align-items: center; gap: 7px; flex: 0 0 min(240px, 75vw); border: 1px solid var(--line); border-radius: 10px; background: #fafbf9; padding: 6px; }
.attachment-queue-item img, .attachment-queue-icon { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; }
.attachment-queue-icon { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 850; }
.attachment-queue-copy { display: grid; min-width: 0; }
.attachment-queue-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.attachment-queue-copy small { color: var(--muted); font-size: 9px; }
.attachment-queue-remove { width: 24px; height: 24px; border-radius: 7px; color: #7c8582; font-size: 18px; }
.attachment-queue-remove:hover { background: #f4e9e5; color: #a13f2f; }
.composer-tools { display: flex; justify-content: space-between; align-items: center; }
.composer-tools > div { display: flex; align-items: center; gap: 3px; }
.composer-icon { width: 31px; height: 31px; border-radius: 8px; color: #77827f; }
.composer-icon:hover { background: #f2f4f1; color: var(--ink); }
.composer-icon:disabled { cursor: not-allowed; opacity: .42; }
.composer-icon svg { width: 18px; height: 18px; }
.template-button { height: 34px; min-height: 34px; border: 1px solid #cce2d7; border-radius: 10px; background: #eff9f4; color: var(--green); padding: 0 10px; font-size: 10px; font-weight: 800; }
.template-button:hover { border-color: #9fcbb6; background: #e4f5ec; }
.attachment-status { border-top: 1px solid #edf0ed; color: var(--green); margin-top: 7px; padding: 8px 2px 1px; font-size: 10px; font-weight: 650; overflow-wrap: anywhere; }
.attachment-status.is-error { color: #a33d2b; }
.composer.is-window-closed .composer-box,
.composer.is-window-closed .composer-box:focus-within { border-color: #e7b67c; background: #f3f4f6; box-shadow: none; }
.composer.is-window-closed textarea { background: #f3f4f6; color: #9a4f12; -webkit-text-fill-color: #9a4f12; opacity: 1; }
.composer.is-window-closed textarea::placeholder { color: #9a4f12; opacity: 1; }
dialog.attachment-preview-dialog { width: min(940px, calc(100vw - 20px)); max-width: none; overflow: hidden; padding: 18px; }
.attachment-preview-card { display: flex; width: min(900px, calc(100vw - 36px)); max-height: calc(100dvh - 36px); flex-direction: column; }
.attachment-preview-body { display: grid; place-items: center; min-height: min(420px, 58dvh); overflow: auto; border-radius: 12px; background: #101513; }
.attachment-preview-media { display: block; max-width: 100%; max-height: 68dvh; object-fit: contain; }
.attachment-preview-body audio { width: min(560px, calc(100vw - 86px)); margin: 30px; }
.attachment-document-preview { display: grid; justify-items: center; gap: 8px; color: white; padding: 38px; text-align: center; }
.attachment-document-icon { display: grid; place-items: center; width: 72px; height: 82px; border-radius: 9px; background: white; color: var(--brand-deep); font-size: 13px; font-weight: 850; }
.attachment-document-preview small { color: #aeb9b5; }
.attachment-preview-actions { justify-content: flex-end; }
.send-group { gap: 10px !important; }
.composer-route-wrap { position: relative; }
.composer-route-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: min(220px, 32vw); height: 34px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; color: #66716e; padding: 0 8px; }
.composer-route-button:hover, .composer-route-button[aria-expanded="true"] { border-color: #b9ade4; background: #f9f7ff; }
.composer-route-button:disabled { cursor: not-allowed; opacity: .58; }
.composer-route-button > svg { width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: currentColor; stroke-width: 2; }
#composerRouteLogo { display: inline-flex; flex: 0 0 20px; align-items: center; }
.composer-route-logo { width: 20px; height: 20px; object-fit: contain; }
.composer-route-name { min-width: 0; flex: 0 1 auto; overflow: hidden; color: #4f5b58; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 750; }
.composer-route-button .provider-logo-fallback { display: grid; place-items: center; border-radius: 50%; background: #edf0ed; color: #52605d; font-size: 6px; font-weight: 850; }
.composer-route-menu { position: absolute; z-index: 55; right: 0; bottom: calc(100% + 7px); display: grid; gap: 3px; width: min(285px, calc(100vw - 28px)); max-height: min(330px, 48dvh); overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 16px 44px rgba(20,29,26,.2); padding: 6px; }
.composer-route-menu[hidden] { display: none; }
.composer-route-option { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 9px; background: transparent; color: var(--ink); padding: 8px; text-align: left; }
.composer-route-option:hover, .composer-route-option:focus-visible, .composer-route-option.is-selected { background: #f5f2ff; outline: 0; }
.composer-route-option:disabled { opacity: .45; }
.composer-route-option-logo { width: 24px; height: 24px; object-fit: contain; }
.composer-route-option .provider-logo-fallback { display: grid; place-items: center; border-radius: 50%; background: #edf0ed; color: #52605d; font-size: 7px; font-weight: 850; }
.composer-route-option-copy { display: grid; min-width: 0; }
.composer-route-option-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-route-option-copy strong { font-size: 10px; }
.send-hint { color: #9aa3a1; font-size: 9px; }
.send-button { width: 38px; height: 36px; border-radius: 10px; background: var(--brand); color: white; box-shadow: 0 5px 14px rgba(81,36,189,.2); transition: transform .15s ease, background .15s ease; }
.send-button:hover { background: var(--brand-deep); transform: translateY(-1px); }
.send-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.send-button svg { width: 18px; height: 18px; }

.details-panel { min-width: 0; overflow-y: auto; border-left: 1px solid var(--line); background: white; padding: 16px; }
.details-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.profile-card { display: grid; justify-items: center; border-bottom: 1px solid var(--line); padding: 24px 8px 22px; text-align: center; }
.profile-avatar { width: 58px; height: 58px; border-radius: 18px; background: var(--brand-soft); color: var(--brand-deep); font-size: 16px; }
.profile-card h3 { margin: 11px 0 2px; font-size: 15px; }
.details-list { margin: 17px 0; }
.details-list div { border-bottom: 1px solid #eff1ee; padding: 10px 1px; }
.details-list dt { color: var(--muted); font-size: 10px; }
.details-list dd { overflow-wrap: anywhere; margin: 3px 0 0; font-size: 12px; font-weight: 600; }
.details-section { padding-top: 4px; }
.details-section h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { border: 1px solid #dfdfd7; border-radius: 999px; background: #f7f6f1; color: #626d6a; padding: 4px 8px; font-size: 10px; font-weight: 650; }
.details-edit-contact { margin-top: 14px; }
.tag-input { position: relative; display: grid; gap: 6px; margin-top: 6px; }
.tag-input-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: white;
  padding: 7px 9px;
}
.tag-input-shell:focus-within { border-color: #b8a5f3; box-shadow: 0 0 0 3px rgba(109,59,234,.09); }
.tag-input-chips { display: contents; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid #ddd5fb;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
}
.tag-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #7a6aa8;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.tag-chip-remove:hover { background: #ebe4ff; color: var(--brand-deep); }
.tag-input-field {
  flex: 1 1 120px;
  min-width: 120px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 4px 2px;
  font: inherit;
  font-size: 12px;
}
.tag-input-field::placeholder { color: #98a19f; }
.tag-input-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #d9ddd9;
  border-radius: 11px;
  background: white;
  box-shadow: 0 16px 38px rgba(24,32,29,.15);
  padding: 5px;
}
.tag-input-menu[hidden] { display: none; }
.tag-input-option {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #34413e;
  padding: 9px 10px;
  text-align: left;
  font: 700 11px/1.35 var(--font-sans);
  cursor: pointer;
}
.tag-input-option:hover,
.tag-input-option:focus-visible,
.tag-input-option.is-active { outline: 0; background: var(--brand-soft); color: var(--brand-deep); }
.tag-input-option.is-create { color: var(--brand-deep); }
.tag-input-empty { color: var(--muted); padding: 10px; font-size: 10px; font-weight: 650; }

.content-route { overflow-y: auto; padding: clamp(22px, 4vw, 46px); }
.contacts-route { padding-top: 12px; }
.route-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; max-width: 1180px; margin: 0 auto 24px; }
.contacts-heading { align-items: center; margin-bottom: 12px; }
.route-heading h2 { margin: 0; font-family: var(--font-sans); font-size: clamp(28px, 4vw, 36px); font-weight: 730; line-height: 1.05; letter-spacing: -1px; }
.contacts-heading h2 { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; letter-spacing: -.4px; }
.route-heading p:last-child { margin: 7px 0 0; color: var(--muted); }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 700; }
.primary-button { border: 1px solid var(--brand); background: var(--brand); color: white; box-shadow: 0 5px 14px rgba(81,36,189,.16); }
.primary-button:hover { border-color: var(--brand-deep); background: var(--brand-deep); }
.primary-button:disabled { cursor: not-allowed; opacity: .55; }
.secondary-button { border: 1px solid var(--line-strong); background: white; color: #596461; }
.secondary-button:hover { background: #f7f8f6; color: var(--ink); }
.primary-button svg, .secondary-button svg { width: 17px; height: 17px; }

.surface { max-width: 1180px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); }
.surface-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 13px 16px; }
.compact-search { width: min(360px, 75%); margin: 0; }
.contact-toolbar-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px; }
.contact-pagination {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px;
}
.contact-pagination[hidden] { display: none; }
#contactPageLabel { white-space: nowrap; }
.contact-table-wrap { overflow-x: auto; }
.contact-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.contact-table th { color: var(--muted); padding: 8px 14px; text-align: left; font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.contact-table td { border-top: 1px solid #eff1ee; padding: 7px 14px; color: #56605e; font-size: 12px; }
.contact-table tbody tr { cursor: pointer; outline: 0; transition: background .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.contact-table tbody tr:hover { background: #fafbf9; }
.contact-table tbody tr:active { background: #edf0ed; }
.contact-table tbody tr:focus-visible { box-shadow: inset 0 0 0 2px rgba(109,59,234,.32); }
.contact-table tbody tr.is-selected { background: #f7f4ff; box-shadow: inset 3px 0 var(--brand); }
.contact-cell { display: grid; gap: 4px; color: var(--ink); min-width: 0; }
.contact-cell strong, .contact-cell span { display: block; }
.contact-cell strong { font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-cell span { color: var(--muted); font-size: 10px; }
.contact-platforms-col {
  white-space: nowrap;
}
.contact-platform-logos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
  vertical-align: middle;
}
.contact-list-platform-logo {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
  border-radius: 4px;
}
.contact-list-platform-logo.provider-logo-fallback {
  display: grid;
  place-items: center;
  background: #e7ebe8;
  color: #5f6c69;
  font-size: 6px;
  font-weight: 800;
}
.status-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--green-soft); color: var(--green); padding: 2px 7px; font-size: 10px; font-weight: 750; }
.status-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-chip.is-inactive { background: #f0f1ef; color: #737d7a; }

.contacts-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 1180px; margin: 0 auto; }
.contacts-workspace.has-editor { grid-template-columns: minmax(0, 1fr) minmax(360px, 450px); }
.contact-list-surface, .contact-editor-panel { width: 100%; margin: 0; }
.contact-editor-panel { align-self: start; max-height: calc(100dvh - 150px); overflow-y: auto; padding: 18px; }
.contact-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.contact-editor-head h3 { margin: 1px 0 0; font: 720 20px/1.2 var(--font-sans); letter-spacing: -.35px; }
.contact-editor-status { color: var(--muted); padding: 28px 8px; text-align: center; font-size: 11px; line-height: 1.5; }
.contact-editor-fields { display: grid; gap: 13px; padding: 17px 0 4px; }
.contact-editor-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.contact-delete-button { margin-right: auto; }
.contact-identities { display: grid; gap: 10px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.contact-create-identities { margin-top: 18px; }
.contact-identities-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-identities-head > div { min-width: 0; }
.contact-identities-head strong, .contact-identities-head span { display: block; }
.contact-identities-head strong { color: var(--ink); font-size: 12px; }
.contact-identities-head span { color: var(--muted); margin-top: 2px; font-size: 9px; line-height: 1.4; }
.contact-platform-add { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.contact-platform-add .compact-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; white-space: nowrap; }
.contact-platform-add .compact-button svg { width: 14px; height: 14px; }
.route-heading-actions { display: flex; align-items: center; gap: 8px; }
.contact-platform-id-list { display: grid; gap: 8px; }
.contact-platform-id-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: #fafbf9; padding: 9px; }
.contact-platform-id-field { min-width: 0; }
.contact-platform-id-field .text-field { margin-top: 5px; }
.contact-platform-id-field .field-help { display: block; margin-top: 4px; }
.contact-platform-id-action-spacer { width: 0; }
.contact-identity-list { display: grid; gap: 10px; }
.contact-identities-empty { border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); padding: 15px; text-align: center; font-size: 10px; }
.contact-identity-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fafbf9; }
.contact-identity-card.is-primary { border-color: #cfc2f7; box-shadow: inset 3px 0 var(--brand); }
.contact-identity-card.is-expanded { background: white; }
.contact-identity-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 58px; padding: 9px 10px 9px 12px; }
.contact-identity-platform-badge { min-width: 72px; border-radius: 999px; background: var(--identity-soft, var(--brand-soft)); color: var(--identity-color, var(--brand-deep)); padding: 6px 9px; text-align: center; font-size: 9px; font-weight: 800; }
.contact-identity-platform-badge[data-platform="whatsapp"] { --identity-color: #168f66; --identity-soft: #e7f6ef; }
.contact-identity-platform-badge[data-platform="telegram"] { --identity-color: #2d8bc0; --identity-soft: #e8f4fa; }
.contact-identity-platform-badge[data-platform="instagram"] { --identity-color: #e1306c; --identity-soft: #fceef4; }
.contact-identity-platform-badge[data-platform="facebook"] { --identity-color: #2768b2; --identity-soft: #eaf2fb; }
.contact-identity-platform-badge[data-platform="email"] { --identity-color: #7b5ba9; --identity-soft: #f0ebf8; }
.contact-identity-summary-copy { min-width: 0; }
.contact-identity-summary-copy strong, .contact-identity-summary-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-identity-summary-copy .contact-identity-profile-label { color: var(--muted); font-size: 8px; font-weight: 700; }
.contact-identity-summary-copy .contact-identity-profile-value { color: var(--ink); margin-top: 2px; font-size: 11px; }
.identity-message-split { display: inline-flex; overflow: hidden; border: 1px solid #b8d7c9; border-radius: 9px; background: white; }
.identity-message-main, .identity-message-menu { min-height: 32px; border: 0; background: transparent; color: #24704f; font-size: 9px; font-weight: 800; }
.identity-message-main { padding: 6px 10px; }
.identity-message-menu { width: 30px; border-left: 1px solid #d3e6dd; padding: 0; font-size: 13px; }
.identity-message-main:hover, .identity-message-menu:hover { background: #eef8f3; }
.identity-message-menu[aria-expanded="true"] { background: #e4f4eb; color: #18583d; }
.identity-message-main:disabled, .identity-message-menu:disabled { cursor: not-allowed; opacity: .48; }
.identity-expand-button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #64716e; padding: 0; font-size: 13px; }
.identity-expand-button:hover { border-color: #b8a5f3; color: var(--brand-deep); }
.contact-identity-details { display: grid; gap: 11px; border-top: 1px solid var(--line); padding: 12px; }
.contact-identity-details[hidden] { display: none; }
.contact-identity-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.identity-platform-options { display: flex; flex-wrap: wrap; gap: 5px; }
.identity-platform-button { min-height: 29px; border: 1px solid var(--line-strong); border-radius: 999px; background: white; color: #596461; padding: 5px 9px; font-size: 9px; font-weight: 750; }
.identity-platform-button:hover { border-color: #b8a5f3; color: var(--ink); }
.identity-platform-button.is-selected { border-color: var(--identity-color, var(--brand)); background: var(--identity-soft, var(--brand-soft)); color: var(--identity-color, var(--brand-deep)); }
.identity-platform-button[data-platform="whatsapp"] { --identity-color: #168f66; --identity-soft: #e7f6ef; }
.identity-platform-button[data-platform="telegram"] { --identity-color: #2d8bc0; --identity-soft: #e8f4fa; }
.identity-platform-button[data-platform="instagram"] { --identity-color: #e1306c; --identity-soft: #fceef4; }
.identity-platform-button[data-platform="facebook"] { --identity-color: #2768b2; --identity-soft: #eaf2fb; }
.identity-platform-button[data-platform="email"] { --identity-color: #7b5ba9; --identity-soft: #f0ebf8; }
.identity-remove-button { width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid #ebc9c1; border-radius: 8px; background: #fff8f6; color: #a43f2b; padding: 0; font-size: 16px; line-height: 1; }
.identity-remove-button:disabled { cursor: not-allowed; opacity: .5; }
.contact-identity-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.contact-identity-fields .form-span { grid-column: 1 / -1; }
.identity-route-fieldset { grid-column: 1 / -1; min-width: 0; border: 0; margin: 0; padding: 0; }
.identity-route-fieldset legend { color: #3f4b49; margin-bottom: 6px; padding: 0; font-size: 10px; font-weight: 700; }
.identity-route-options { display: grid; gap: 6px; }
.identity-route-option-row { display: grid; grid-template-columns: minmax(140px, auto) minmax(150px, 1fr); align-items: center; gap: 7px; }
.identity-route-option { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; background: white; color: #596461; padding: 6px 8px; font-size: 9px; cursor: pointer; }
.identity-route-option input { width: 13px; height: 13px; accent-color: var(--brand); margin: 0; }
.identity-route-profile { min-height: 31px; padding: 6px 8px; font-size: 9px; }
.identity-route-empty { color: var(--muted); font-size: 9px; }
.identity-primary-control { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.identity-primary-control input { accent-color: var(--brand); margin: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; max-width: 1180px; margin: 0 auto 16px; }
.stat-card { border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); padding: 15px 16px; }
.stat-card span { color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; overflow-wrap: anywhere; margin-top: 3px; font-family: var(--font-sans); font-size: 25px; font-weight: 730; letter-spacing: -.5px; }
.channel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 1180px; margin: 0 auto; }
.channel-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); padding: 18px; }
.connection-card { display: block; }
.channel-expanded-content { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(410px, 1.28fr); gap: 24px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.channel-expanded-content > .connection-setup { border-top: 0; border-left: 1px solid var(--line); margin-top: 0; padding-top: 0; padding-left: 24px; }
.channel-overview { align-self: start; min-width: 0; }
.whatsapp-card { grid-column: 1 / -1; }
.channel-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.channel-card-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.channel-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.meta-console-link { flex: 0 0 auto; text-decoration: none; }
.channel-logo { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: var(--channel-soft, #eff1ee); color: var(--channel-color, #586360); object-fit: contain; padding: 7px; font-size: 13px; font-weight: 850; }
.channel-logo.provider-logo-fallback { padding: 0; }
.channel-card-head div { min-width: 0; }
.channel-card h3 { margin: 0 0 2px; font-size: 14px; }
.channel-card p { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.provider-label { display: block; overflow: hidden; color: var(--muted); margin-bottom: 1px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.channel-identity-line { display: flex; min-width: 0; align-items: baseline; gap: 6px; }
.channel-identity-field-label { flex: 0 0 auto; color: #8490a3; font-size: 10px; font-weight: 700; }
.channel-identity-field-value { overflow: hidden; color: #475467; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 650; }
.channel-connection-name h3 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.channel-provider-display-name { margin: 2px 0 3px; }
.connection-card-body { min-height: 49px; }
.channel-card .channel-description { margin-top: 14px; }
.channel-card .verified-identity { display: inline-flex; max-width: 100%; overflow: hidden; border-radius: 999px; background: var(--green-soft); color: var(--green); margin-top: 8px; padding: 4px 8px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.health-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 10px; font-weight: 750; }
.health-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.health-dot.is-disconnected { color: #8a9491; }
.health-dot.is-warning { color: #b26a16; }
.health-dot.is-warning::before { background: #d69038; }
.health-dot.is-error { color: #a33d2b; }
.channel-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.channel-metrics div { border-radius: 10px; background: #f6f7f4; padding: 9px; }
.channel-metrics span, .channel-metrics strong { display: block; }
.channel-metrics span { color: var(--muted); font-size: 10px; }
.channel-metrics strong { overflow: hidden; margin-top: 2px; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.channel-callback { display: block; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 9px; background: #f6f7f4; color: #3d4946; padding: 10px 11px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.channel-card .channel-setup-note { margin-top: 0; }
.connection-setup { display: grid; gap: 11px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.connection-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connection-setup-head strong { font-size: 12px; }
.readiness-list { display: flex; flex-wrap: wrap; gap: 6px; }
.readiness-item { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; background: #f7f8fb; color: #667085; padding: 5px 8px; font-size: 10px; font-weight: 750; }
.readiness-item i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #dfe3e0; color: white; font-style: normal; font-size: 8px; }
.readiness-item.is-ready { border-color: #cee5d9; background: #eff9f4; color: var(--green); }
.readiness-item.is-ready i { background: var(--green); }
.callback-block { display: grid; gap: 6px; }
.callback-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.channel-id-block { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 11px; }
.callback-token-block { display: grid; gap: 6px; border-top: 1px solid #e8eae7; margin-top: 5px; padding-top: 11px; }
.callback-token-row { display: flex; align-items: stretch; gap: 7px; }
.callback-token-display-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.callback-token-display { height: 100%; min-height: 36px; padding-right: 112px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.saved-secret-status { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); border-radius: 999px; background: #eef1ef; color: #6d7774; padding: 4px 7px; font-size: 8px; font-weight: 800; letter-spacing: 0; white-space: nowrap; }
.saved-secret-status.is-saved { background: var(--green-soft); color: var(--green); }
.callback-token-help { color: var(--muted); font-size: 10px; line-height: 1.45; }
.channel-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.channel-card-actions .primary-button, .channel-card-actions .secondary-button { min-height: 36px; }
.channel-card-actions button:disabled { cursor: not-allowed; opacity: .48; }

.template-library-route { overflow-y: auto; }
.template-library-surface { overflow: visible; }
.template-library-toolbar { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 14px 16px; }
.template-library-search { display: flex; align-items: center; min-width: 210px; flex: 1 1 320px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; background: #f8fafc; color: #8490a3; padding: 0 11px; }
.template-library-search:focus-within { border-color: #b8a5f3; background: white; box-shadow: 0 0 0 3px rgba(109,59,234,.09); }
.template-library-search svg { width: 17px; height: 17px; flex: 0 0 17px; }
.template-library-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); padding: 8px 8px; font: inherit; }
.template-library-search input::placeholder { color: #98a2b3; }
.template-filter-bar { display: flex; flex: 0 1 auto; align-items: center; gap: 7px; }
.template-filter { position: relative; }
.template-filter-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; color: #475467; padding: 7px 9px 7px 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.template-filter-trigger:hover, .template-filter-trigger[aria-expanded="true"] { border-color: #cfc3f8; background: #faf9ff; color: var(--brand-deep); }
.template-filter-trigger strong { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--brand); color: white; padding: 0 5px; font-size: 9px; }
.template-filter-trigger svg { width: 14px; height: 14px; }
.template-filter-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.template-filter-menu { position: absolute; z-index: 50; top: calc(100% + 7px); right: 0; width: 250px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 48px rgba(16,24,40,.15); padding: 9px; }
.template-filter-search { display: block; margin-bottom: 7px; }
.template-filter-search input { width: 100%; min-height: 34px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #f8fafc; padding: 7px 9px; font: inherit; font-size: 11px; }
.template-filter-search input:focus { border-color: #b8a5f3; background: white; box-shadow: 0 0 0 3px rgba(109,59,234,.08); }
.template-filter-options { display: grid; max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
.template-filter-option { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 7px; border-radius: 7px; color: #475467; padding: 7px 6px; cursor: pointer; font-size: 11px; }
.template-filter-option:hover { background: #f7f5ff; }
.template-filter-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.template-filter-option small { color: #98a2b3; font-size: 9px; }
.template-filter-empty { margin: 0; color: var(--muted); padding: 12px 7px; text-align: center; font-size: 10px; }
.template-filter-clear { width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--brand-deep); margin-top: 6px; padding: 9px 6px 3px; text-align: left; font-size: 10px; font-weight: 750; }
.template-library-active-row { display: flex; align-items: center; gap: 7px; min-height: 50px; border-bottom: 1px solid var(--line); padding: 9px 16px; }
.template-active-filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
.template-filter-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ddd5fb; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); padding: 4px 8px; font-size: 10px; font-weight: 700; }
.template-filter-chip span { font-size: 14px; font-weight: 500; line-height: 1; }
.template-clear-all { border: 0; background: transparent; color: var(--brand-deep); padding: 5px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.template-result-count { color: var(--muted); margin-left: auto; font-size: 10px; white-space: nowrap; }
.template-library-notice { border-bottom: 1px solid #ecd9aa; background: #fff8e8; color: #77551e; padding: 11px 16px; font-size: 11px; line-height: 1.5; }
.template-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.whatsapp-template-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fbfcff; box-shadow: 0 3px 12px rgba(16,24,40,.04); padding: 13px; }
.whatsapp-template-card.is-channel-disabled { background: #f8f9fb; opacity: .78; }
.whatsapp-template-card-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.template-channel-identity { display: flex; min-width: 0; align-items: center; gap: 8px; }
.template-channel-identity img { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: #eaf8f0; padding: 4px; }
.template-channel-identity div { min-width: 0; }
.template-channel-identity strong, .template-channel-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-channel-identity strong { color: #344054; font-size: 10px; }
.template-channel-identity span { color: #98a2b3; margin-top: 1px; font-size: 9px; }
.template-status-badge { flex: 0 0 auto; border-radius: 999px; background: #eef1f5; color: #667085; padding: 4px 7px; font-size: 8px; font-weight: 850; letter-spacing: .03em; }
.template-status-badge.is-approved { background: var(--green-soft); color: var(--green); }
.template-status-badge.is-pending, .template-status-badge.is-in-appeal { background: var(--amber-soft); color: var(--amber); }
.template-status-badge.is-rejected, .template-status-badge.is-disabled, .template-status-badge.is-paused { background: #fff0ed; color: #a63b2a; }
.whatsapp-template-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 13px; }
.whatsapp-template-title h3 { overflow: hidden; margin: 0; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 14px; letter-spacing: -.2px; }
.whatsapp-template-title code { color: #667085; font-size: 9px; }
.whatsapp-template-meta { display: flex; gap: 6px; margin: 5px 0 11px; }
.whatsapp-template-meta span { border-radius: 999px; background: #f0f2f5; color: #667085; padding: 3px 7px; font-size: 8px; font-weight: 750; }
.whatsapp-template-preview { overflow: hidden; border: 1px solid #dce9e1; border-radius: 12px 12px 12px 4px; background: #edf8f2; box-shadow: 0 2px 5px rgba(17,78,55,.05); }
.template-preview-media { display: grid; place-items: center; min-height: 92px; background: linear-gradient(145deg,#d7eadf,#edf5f0); color: #597166; }
.template-preview-media span { font-size: 24px; }
.template-preview-media small { margin-top: 3px; font-size: 9px; font-weight: 700; }
.template-preview-header { display: block; color: #263c33; padding: 11px 12px 0; font-size: 11px; }
.template-preview-body { margin: 0; color: #31473d; padding: 11px 12px 7px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.55; }
.template-preview-footer { display: block; color: #809087; padding: 0 12px 10px; font-size: 8px; }
.template-preview-buttons { display: grid; border-top: 1px solid rgba(74,113,93,.13); background: rgba(255,255,255,.55); }
.template-preview-buttons span { color: #176b4c; padding: 8px 10px; text-align: center; font-size: 9px; font-weight: 750; }
.template-preview-buttons span + span { border-top: 1px solid rgba(74,113,93,.11); }
.template-library-empty { grid-column: 1 / -1; display: grid; justify-items: center; min-height: 260px; align-content: center; color: var(--muted); padding: 28px; text-align: center; }
.template-library-empty strong { color: var(--ink); font-size: 15px; }
.template-library-empty span { max-width: 440px; margin: 5px 0 14px; font-size: 11px; line-height: 1.55; }
.template-library-skeleton { min-height: 330px; background: linear-gradient(100deg,#f2f4f7 30%,#fafbfc 45%,#f2f4f7 60%); background-size: 220% 100%; animation: template-shimmer 1.25s ease-in-out infinite; }
@keyframes template-shimmer { to { background-position-x: -220%; } }

.import-chat-surface { max-width: 820px; }
.import-chat-form { display: grid; gap: 18px; padding: 18px 20px 20px; }
.import-chat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.import-chat-grid .form-span { grid-column: 1 / -1; }
.import-chat-file { padding-top: 9px; padding-bottom: 9px; }
.import-chat-preview, .import-chat-result, .import-chat-mapping {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf9;
  padding: 14px 16px;
}
.import-chat-preview-title { margin: 0 0 10px; font-size: 12px; font-weight: 750; }
.import-chat-mapping-head { margin-bottom: 12px; }
.import-chat-mapping-head .subtle { margin: 0; line-height: 1.5; }
.import-chat-mapping-list { display: grid; gap: 10px; }
.import-chat-mapping-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid #e7ebe8;
}
.import-chat-mapping-row:last-of-type { border-bottom: 0; }
.import-chat-mapping-row strong { font-size: 12px; word-break: break-word; }
.import-chat-mapping-row .subtle { display: block; margin-top: 2px; font-size: 10px; }
.import-chat-mapping-example {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 7px;
  min-width: 0;
}
.import-chat-mapping-example > span {
  flex: 0 0 auto;
  color: #84908d;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.import-chat-mapping-example > code {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2ef;
  color: var(--ink);
  padding: 4px 8px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-chat-mapping-row select { width: 100%; margin-top: 2px; }
.import-chat-mapping-meta { color: var(--muted); font-size: 10px; margin: 4px 0 0; }
.import-chat-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.import-chat-stats div { display: grid; gap: 2px; }
.import-chat-stats dt { color: var(--muted); font-size: 10px; font-weight: 650; }
.import-chat-stats dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 760; }
.import-chat-progress { display: grid; gap: 8px; }
.import-chat-progress-bar {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e7ebe8;
}
.import-chat-progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--brand);
  transition: width .2s ease;
}
.import-chat-result strong { display: block; margin-bottom: 6px; font-size: 13px; }
.import-chat-result-status {
  margin: 0 0 12px;
  color: #2f6b4f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}
.import-chat-result-status.is-cancelled {
  color: #9a5b12;
}
.import-chat-result-status.is-warning {
  color: #a43f2b;
}
.import-chat-result .import-chat-stats { margin-top: 4px; }
.import-chat-issues {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid #eadad4;
  padding-top: 12px;
}
.import-chat-issues-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.import-chat-issues-head h3 {
  margin: 0;
  color: #8a3a2c;
  font-size: 12px;
  font-weight: 750;
}
.import-chat-issues-list {
  display: grid;
  gap: 8px;
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 0;
  list-style: none;
}
.import-chat-issues-list li {
  display: grid;
  gap: 3px;
  border: 1px solid #f0e2dd;
  border-radius: 10px;
  background: #fffaf8;
  padding: 9px 11px;
}
.import-chat-issues-list strong {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.import-chat-issues-list span {
  color: #8a4a3c;
  font-size: 11px;
  line-height: 1.45;
  word-break: break-word;
}
.import-chat-action-buttons { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-chat-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.import-chat-actions .subtle { margin: 0; max-width: 420px; line-height: 1.5; }
@media (max-width: 720px) {
  .import-chat-grid, .import-chat-stats, .import-chat-mapping-row { grid-template-columns: 1fr; }
  .import-chat-actions { align-items: stretch; flex-direction: column-reverse; }
  .import-chat-action-buttons { width: 100%; }
  .import-chat-action-buttons .primary-button,
  .import-chat-action-buttons .secondary-button { flex: 1 1 auto; }
}

.campaigns-route {
  display: grid; gap: 14px; align-content: start;
  padding-top: 12px;
}
.campaigns-route .route-heading,
.campaigns-route .campaign-panel {
  max-width: none;
  width: 100%;
  margin: 0;
}
.campaigns-heading {
  align-items: center;
  margin-bottom: 0;
}
.campaigns-heading h2 {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  letter-spacing: -.4px;
}
.campaign-create-panel .campaign-panel-toolbar {
  padding-bottom: 8px;
}
.campaign-panel {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.campaign-panel-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 12px;
}
.campaign-panel-toolbar strong { display: block; font-size: 15px; font-weight: 720; }
.campaign-panel-toolbar .subtle { display: block; margin-top: 3px; }
.campaign-history-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) repeat(2, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
  position: relative;
  z-index: 5;
}
.campaign-history-filters .campaign-multi-filter { min-width: 0; }
.campaign-history-filters .campaign-multi-filter-trigger {
  min-height: 34px; height: 34px; padding: 0 10px; font-size: 12px;
}
.campaign-history-filter { display: grid; gap: 4px; margin: 0; min-width: 0; }
.campaign-history-filter .text-field { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.campaign-table-wrap {
  position: relative;
  overflow-x: auto; padding: 4px 0 8px;
  border: 1px solid #e4e7e4; border-radius: 14px; background: #fff;
  min-height: 120px;
}
.campaign-table-wrap.is-loading .campaign-table { opacity: .45; pointer-events: none; }
.campaign-history-loading {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  background: rgba(255, 255, 255, .72);
  color: #40514f; font-size: 12px; font-weight: 650;
}
.campaign-history-loading[hidden] { display: none; }
.campaign-history-loading .auth-spinner { width: 22px; height: 22px; border-width: 2px; }
.campaign-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.campaign-table th, .campaign-table td { padding: 9px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.campaign-table th { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.campaign-expand-col { width: 108px; text-align: right; }
.campaign-table th.campaign-expand-col,
.campaign-table td.campaign-expand-col { text-align: right; padding-right: 14px; }
.campaign-expand-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 92px; height: 32px; border: 1px solid #cfd6d2; border-radius: 10px;
  background: #f4f7f5; color: #24302c; padding: 0 10px; font-size: 11px; font-weight: 750;
  cursor: pointer;
}
.campaign-expand-button:hover { background: #e8efeb; border-color: #b7c2bc; color: var(--ink); }
.campaign-row.is-open .campaign-expand-button {
  background: #24302c; border-color: #24302c; color: #fff;
}
.campaign-expand-button svg { width: 14px; height: 14px; transition: transform .16s ease; flex: 0 0 auto; }
.campaign-row.is-open .campaign-expand-button svg { transform: rotate(180deg); }
.campaign-expand-label { line-height: 1; }
.campaign-name-cell strong { display: block; font-size: 13px; }
.campaign-name-cell span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.campaign-history-channel {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
}
.campaign-history-channel-logo,
.campaign-history-channel .provider-logo-fallback {
  width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; border-radius: 4px;
}
.campaign-history-channel .provider-logo-fallback {
  display: grid; place-items: center; background: #e9edeb; color: #5e6c69;
  font-size: 7px; font-weight: 850;
}
.campaign-history-channel-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font-size: 12px; font-weight: 650;
}
.campaign-history-channel-cell { max-width: 260px; }
.campaign-history-channel-option {
  align-items: flex-start;
}
.campaign-history-channel-option .campaign-history-channel {
  flex: 1 1 auto;
}
.campaign-multi-filter-menu:has(.campaign-history-channel-option) {
  min-width: min(320px, 80vw);
}
.campaign-status-pill {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px;
  background: #eef2f1; color: #40514f; font-size: 10px; font-weight: 750;
}
.campaign-status-pill.is-sending { background: #eef0ff; color: #4338ca; }
.campaign-status-pill.is-completed { background: #e7f6ef; color: #176b4a; }
.campaign-status-pill.is-failed, .campaign-status-pill.is-completed_with_errors { background: #fdecec; color: #a43f2b; }
.campaign-detail-row td { background: #fafbfb; padding: 0; }
.campaign-recipient-panel { display: grid; gap: 0; }
.campaign-recipient-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.campaign-recipient-table th, .campaign-recipient-table td { padding: 8px 10px; border-bottom: 1px solid #ebe7e2; }
.campaign-recipient-table th { color: var(--muted); font-size: 10px; font-weight: 700; }
.campaign-recipient-loading,
.campaign-recipient-empty {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px; color: var(--muted); font-size: 12px;
}
.campaign-recipient-loading .auth-spinner { width: 18px; height: 18px; border-width: 2px; }
.campaign-recipient-footer,
.campaign-history-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px 4px;
}
.campaign-history-footer { padding: 12px 2px 0; }
.campaign-history-meta,
.campaign-recipient-meta { margin: 0; font-size: 11px; }
.campaign-history-pagination {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.campaign-page-size { display: inline-flex; align-items: center; margin: 0; }
.campaign-page-size .compact-select { min-width: 78px; height: 32px; padding: 0 28px 0 10px; font-size: 11px; }
.campaign-empty { padding: 8px 0 4px; }
@media (max-width: 960px) {
  .campaign-history-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .campaign-history-filters {
    grid-template-columns: 1fr;
  }
  .campaign-expand-col { width: 84px; }
  .campaign-expand-button { min-width: 0; width: 100%; padding: 0 8px; }
  .campaign-expand-label { display: none; }
}
.campaign-create-form { display: grid; gap: 12px; padding: 0; }
.campaign-create-form .field-label { font-size: 11px; }
.campaign-create-form .text-field,
.campaign-create-form .campaign-channel-trigger,
.campaign-create-form .campaign-multi-filter-trigger {
  min-height: 34px; padding: 6px 10px; font-size: 12px;
}
.campaign-create-form .subtle { font-size: 11px; }
.campaign-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.campaign-fieldset {
  margin: 0; border: 1px solid #e2e6e3; border-radius: 12px; padding: 12px 14px 14px; display: grid; gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
}
.campaign-fieldset.campaign-card { box-shadow: 0 1px 0 rgba(24, 32, 29, .03); }
.campaign-fieldset legend {
  padding: 0 6px; margin-left: -2px; color: var(--ink); font-size: 11px; font-weight: 760;
  background: transparent;
}
.campaign-choice-row { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.campaign-choice { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 11px; }
.campaign-channel-picker { position: relative; margin-top: 4px; }
.campaign-channel-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  height: 34px; min-height: 34px; max-height: 34px; text-align: left; cursor: pointer; overflow: hidden;
}
.campaign-channel-trigger-empty { color: var(--muted); font-size: 12px; font-weight: 650; }
.campaign-channel-trigger-value {
  display: flex; align-items: center; min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.campaign-channel-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 6px;
  border: 1px solid #d9ddd9; border-radius: 12px; background: #fff;
  box-shadow: 0 18px 40px rgba(24, 32, 29, .14); padding: 8px;
}
.campaign-channel-menu[hidden] { display: none; }
.campaign-channel-search { margin: 0; }
.campaign-channel-options {
  display: grid; gap: 4px; max-height: 240px; overflow: auto;
}
.campaign-channel-option {
  display: block; width: 100%; border: 0; border-radius: 10px; background: transparent;
  color: inherit; padding: 8px 10px; text-align: left; cursor: pointer;
}
.campaign-channel-option:hover, .campaign-channel-option.is-selected { background: #eef4f1; }
.campaign-channel-option-content { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.campaign-channel-logo, .campaign-channel-option-content .provider-logo-fallback {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; object-fit: contain;
}
.campaign-channel-option-copy { display: grid; gap: 1px; min-width: 0; }
.campaign-channel-option-copy strong { font-size: 12px; font-weight: 750; }
.campaign-channel-option-copy span { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-channel-option-copy.is-inline {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden;
}
.campaign-channel-option-copy.is-inline strong {
  flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campaign-channel-option-copy.is-inline span {
  flex: 0 1 auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campaign-channel-trigger .campaign-channel-logo,
.campaign-channel-trigger .provider-logo-fallback {
  width: 18px; height: 18px;
}
.campaign-filter-toolbar {
  display: flex; align-items: end; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.campaign-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) minmax(150px, 200px);
  gap: 8px; align-items: end; flex: 1 1 auto; min-width: 0;
}
.campaign-multi-filter,
.campaign-filter-search { position: relative; display: grid; gap: 4px; min-width: 0; }
.campaign-multi-filter-label { color: var(--ink); font-size: 10px; font-weight: 720; }
.campaign-multi-filter-trigger {
  display: flex; align-items: center; justify-content: space-between; height: 34px; min-height: 34px; width: 100%;
  text-align: left; cursor: pointer; font-size: 12px; font-weight: 650; padding: 0 10px;
}
.campaign-multi-filter-trigger.has-selection { border-color: #b9cdc3; background: #f3f8f5; color: var(--brand-deep); }
.campaign-multi-filter-menu {
  position: absolute; z-index: 35; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 4px;
  max-height: 260px; overflow: auto; border: 1px solid #d9ddd9; border-radius: 12px; background: #fff;
  box-shadow: 0 16px 36px rgba(24, 32, 29, .14); padding: 8px; min-width: 180px;
}
.campaign-multi-filter-menu[hidden] { display: none; }
.campaign-multi-filter-search { margin-bottom: 4px; }
.campaign-multi-filter-option {
  display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 7px 8px;
  color: var(--ink); font-size: 12px; cursor: pointer;
}
.campaign-multi-filter-option:hover { background: #f3f5f4; }
.campaign-multi-filter-empty { color: var(--muted); padding: 8px; font-size: 11px; }
.campaign-filter-search-wrap {
  width: 100%; height: 34px; min-height: 34px; margin: 0; box-sizing: border-box;
}
.campaign-filter-search-wrap input {
  height: 34px; min-height: 34px; border-radius: 10px; padding-top: 0; padding-bottom: 0; box-sizing: border-box;
}
.campaign-contact-table,
.campaign-audience-table {
  position: relative;
  overflow: auto; border: 1px solid #dce2de; border-radius: 8px; background: #fff;
  min-height: 120px;
}
.campaign-contact-table.is-loading .campaign-contact-head,
.campaign-contact-table.is-loading .campaign-contact-list {
  opacity: .45; pointer-events: none;
}
.campaign-contact-loading {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  background: rgba(255, 255, 255, .78);
  color: #40514f; font-size: 12px; font-weight: 650;
}
.campaign-contact-loading[hidden] { display: none; }
.campaign-contact-loading .auth-spinner { width: 22px; height: 22px; border-width: 2px; }
.campaign-contact-head,
.campaign-contact-item,
.campaign-audience-head,
.campaign-audience-row {
  display: grid;
  grid-template-columns: 24px minmax(120px, 1.2fr) minmax(84px, 0.7fr) minmax(120px, 1.1fr) minmax(110px, 1fr) minmax(90px, 0.85fr);
  gap: 6px; align-items: center; min-width: 760px;
}
.campaign-audience-head,
.campaign-audience-row {
  grid-template-columns: minmax(120px, 1.2fr) minmax(84px, 0.7fr) minmax(120px, 1.1fr) minmax(110px, 1fr) minmax(90px, 0.85fr) 64px;
  min-width: 720px;
}
.campaign-contact-head,
.campaign-audience-head {
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid #e2e7e4; background: #f4f7f5; padding: 6px 10px;
  color: #5b6a65; font-size: 10px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase;
}
.campaign-audience-action-head { text-align: right; }
.campaign-contact-list,
.campaign-audience-rows {
  max-height: 260px; overflow: auto;
}
.campaign-upload-count {
  margin: 0; padding: 8px 0 0; font-size: 12px; font-weight: 650; color: var(--ink);
}
.campaign-contact-item, .campaign-selected-item, .campaign-upload-row, .campaign-audience-row {
  padding: 5px 10px; border-bottom: 1px solid #eef1ef;
}
.campaign-contact-item:last-child, .campaign-selected-item:last-child, .campaign-upload-row:last-child,
.campaign-audience-row:last-child { border-bottom: 0; }
.campaign-contact-item:hover, .campaign-audience-row:hover { background: #f7faf8; }
.campaign-contact-item:has(input:checked) { background: #f1f7f3; }
.campaign-contact-check { display: grid; place-items: center; }
.campaign-contact-check input { width: 14px; height: 14px; margin: 0; cursor: pointer; }
.campaign-contact-name { color: var(--ink); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-contact-id,
.campaign-contact-platform,
.campaign-contact-company,
.campaign-contact-tags {
  color: #66746e; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campaign-contact-platform { font-weight: 650; color: #53605d; }
.campaign-empty-state { color: var(--muted); padding: 16px 12px; font-size: 11px; text-align: center; }
.campaign-contact-footer {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr) minmax(148px, 1fr);
  align-items: center; gap: 10px; min-height: 34px;
  margin-top: 14px; padding-top: 2px;
}
.campaign-contact-footer .subtle,
.campaign-contact-meta {
  grid-column: 2;
  margin: 0; font-size: 11px; text-align: center;
}
.campaign-contact-footer #campaignAddSelected {
  grid-column: 3;
  justify-self: end; min-width: 148px; justify-content: center;
}
.campaign-contact-pagination {
  grid-column: 1;
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
}
/* Keep the Add button pinned right when pagination is hidden (display:none removes the grid item). */
.campaign-contact-pagination[hidden] {
  display: inline-flex !important;
  visibility: hidden;
  pointer-events: none;
}
.campaign-page-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 84px;
  border: 1px solid #e0e5e2; border-radius: 999px; background: #f7f9f8;
  color: #4f5d58; padding: 4px 10px; font-size: 10px; font-weight: 700;
}
.campaign-sending-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px;
}
.campaign-sending-list-head .field-label-text { color: var(--ink); font-size: 11px; font-weight: 740; }
.campaign-sending-list-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
}
.campaign-sending-search-wrap {
  width: min(280px, 100%); height: 32px; min-height: 32px; margin: 0; box-sizing: border-box;
}
.campaign-sending-search-wrap input { height: 100%; min-height: 0; box-sizing: border-box; }
.campaign-sending-list-tools #campaignClearAudience { flex: 0 0 auto; margin-left: auto; }
.campaign-audience-remove {
  justify-self: end; border: 0; border-radius: 6px; background: transparent; color: #7a8782;
  padding: 3px 6px; font-size: 10px; font-weight: 700; cursor: pointer;
}
.campaign-audience-remove:hover { background: #f2f4f3; color: var(--ink); }
.campaign-mapping { display: grid; gap: 8px; }
.campaign-mapping-table {
  width: 100%; border-collapse: collapse; overflow: hidden;
  border: 1px solid #e2e7e4; border-radius: 8px; background: #fff;
}
.campaign-mapping-table th,
.campaign-mapping-table td {
  padding: 8px 10px; border-bottom: 1px solid #eef1ef; text-align: left; vertical-align: middle;
}
.campaign-mapping-table th {
  background: #f4f7f5; color: #5b6a65; font-size: 10px; font-weight: 760;
  letter-spacing: .04em; text-transform: uppercase;
}
.campaign-mapping-table tr:last-child td { border-bottom: 0; }
.campaign-mapping-table td strong { display: block; font-size: 12px; }
.campaign-mapping-table td .subtle { display: block; margin-top: 2px; font-size: 10px; }
.campaign-mapping-table select { width: 100%; min-height: 34px; }
.campaign-mapping-note { margin: 0; font-size: 11px; }
.campaign-mapping-note.is-warning { color: #a43f2b; font-weight: 650; }
.campaign-message-layout {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.85fr); gap: 12px; align-items: start;
}
.campaign-message-main { display: grid; gap: 10px; min-width: 0; }
.campaign-variable-fields { display: grid; gap: 8px; }
.campaign-variable-row {
  display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 8px; align-items: end;
}
.campaign-variable-value.is-readonly,
.campaign-text-value.is-readonly {
  border-color: #e0e4e1; background: #f7f8f6; color: #68736f; cursor: default;
}
.campaign-message-text { min-height: 96px; resize: vertical; }
.campaign-message-preview {
  display: grid; gap: 8px; position: sticky; top: 12px;
  border: 1px solid #e2e8e4; border-radius: 12px; background: #f5f8f6; padding: 12px;
}
.campaign-message-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.campaign-message-preview-head strong { font-size: 12px; font-weight: 750; }
.campaign-message-preview-phone { border-radius: 14px; background: linear-gradient(180deg, #e8f0eb, #dfe8e3); padding: 16px; }
.campaign-message-preview-bubble { max-width: 100%; }
.campaign-preview-card, .campaign-text-preview-card {
  overflow: hidden; border: 1px solid #dce9e1; border-radius: 12px 12px 12px 4px; background: #edf8f2;
  box-shadow: 0 2px 5px rgba(17, 78, 55, .05);
}
.campaign-message-preview-empty { margin: 0; color: var(--muted); font-size: 12px; }
.campaign-create-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid #e2e6e3; border-radius: 14px; background: #fff; padding: 14px 16px;
}
.campaign-create-action-buttons { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campaign-create-actions .subtle { margin: 0; max-width: 460px; line-height: 1.5; }
@media (max-width: 980px) {
  .campaign-filter-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .campaign-filter-search { grid-column: 1 / -1; max-width: 280px; }
  .campaign-contact-footer { grid-template-columns: 1fr; justify-items: stretch; }
  .campaign-contact-pagination,
  .campaign-contact-footer .subtle,
  .campaign-contact-meta,
  .campaign-contact-footer #campaignAddSelected { grid-column: 1; }
  .campaign-contact-footer .subtle,
  .campaign-contact-meta { text-align: left; }
  .campaign-contact-footer #campaignAddSelected { justify-self: stretch; width: 100%; }
  .campaign-contact-pagination[hidden] { display: none !important; }
  .campaign-message-layout { grid-template-columns: 1fr; }
  .campaign-message-preview { position: static; }
}
@media (max-width: 720px) {
  .campaign-create-grid, .campaign-variable-row, .campaign-filter-grid { grid-template-columns: 1fr; }
  .campaign-filter-search { max-width: none; }
  .campaign-create-actions { align-items: stretch; flex-direction: column-reverse; }
  .campaign-create-action-buttons { width: 100%; }
  .campaign-create-action-buttons .primary-button,
  .campaign-create-action-buttons .secondary-button { flex: 1 1 auto; }
  .campaign-sending-search-wrap { width: min(100%, 280px); }
}

.settings-surface { margin-top: 0; }
.single-workspace-badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; border: 1px solid #d9d0f7; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); padding: 6px 10px; font-size: 10px; font-weight: 750; }
.single-workspace-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.workspace-profile-surface { max-width: 980px; }
.workspace-profile-toolbar > div { display: grid; gap: 2px; }
.workspace-profile-toolbar strong { font-size: 13px; }
.workspace-profile-toolbar .subtle { line-height: 1.45; }
.workspace-save-state { min-height: 16px; color: var(--green); font-size: 10px; font-weight: 750; }
.workspace-profile-form { display: grid; gap: 0; padding: 0 22px 20px; }
.workspace-form-section { min-width: 0; border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 21px 0; }
.workspace-form-section:last-of-type { border-bottom: 0; }
.workspace-form-section legend { color: var(--ink); padding: 0; font-size: 12px; font-weight: 760; }
.workspace-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 13px; }
.workspace-form-grid .form-span { grid-column: 1 / -1; }
.workspace-id-row { display: flex; min-width: 0; align-items: stretch; gap: 8px; }
.workspace-id-row .text-field { min-width: 0; flex: 1 1 auto; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.workspace-id-row .secondary-button { flex: 0 0 auto; }
.workspace-textarea { min-height: 88px; resize: vertical; font: inherit; line-height: 1.5; }
.field-optional { display: inline; color: var(--muted); margin-left: 3px; font-size: 9px; font-weight: 600; }
.text-uppercase { text-transform: uppercase; }
.workspace-profile-form .text-field[readonly] { border-color: #e0e4e1; background: #f7f8f6; color: #68736f; cursor: default; }
.workspace-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.workspace-readonly-note { flex: 1; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; }
.setting-copy { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.setting-copy > div { display: grid; gap: 3px; }
.setting-copy strong { font-size: 13px; }
.setting-copy span { color: var(--muted); line-height: 1.55; }
.setting-copy small { color: #84908d; font-size: 10px; }
.setting-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: var(--brand-soft); color: var(--brand); }
.setting-icon svg { width: 20px; height: 20px; }
.switch-control { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; cursor: pointer; }
.switch-control input { position: absolute; opacity: 0; pointer-events: none; }
.switch-control > span { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #cdd2ce; transition: background .18s ease; }
.switch-control > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(20,29,26,.2); transition: transform .18s ease; }
.switch-control input:checked + span { background: var(--green); }
.switch-control input:checked + span::after { transform: translateX(18px); }
.switch-control input:focus-visible + span { outline: 3px solid rgba(109,59,234,.24); outline-offset: 2px; }
.switch-control input:disabled + span { opacity: .5; }
.switch-control em { color: #53605d; font-size: 11px; font-style: normal; font-weight: 750; }
#templateDialog { width: min(1120px, calc(100vw - 28px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.searchable-combobox { position: relative; display: block; margin-top: 6px; }
.field-label > .searchable-combobox .text-field { margin-top: 0; }
.searchable-combobox.is-clickable { cursor: pointer; }
.searchable-combobox::after { content: ""; position: absolute; z-index: 1; top: 50%; right: 16px; width: 7px; height: 7px; border-right: 2px solid #65716e; border-bottom: 2px solid #65716e; pointer-events: none; transform: translateY(-55%) rotate(45deg); }
.searchable-combobox:focus-within::after { border-color: var(--brand); }
.searchable-combobox-toggle {
  position: absolute; z-index: 2; top: 0; right: 0; width: 42px; height: 100%;
  border: 0; background: transparent; cursor: pointer;
}
.searchable-combobox-input { width: 100%; padding-right: 42px; }
.searchable-combobox-input[type="search"]::-webkit-search-cancel-button,
.searchable-combobox-input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; appearance: none; display: none;
}
#campaignTemplateCombobox .searchable-combobox-input {
  padding-right: 42px;
}
.searchable-combobox-menu { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; left: 0; display: grid; max-height: 230px; overflow-y: auto; border: 1px solid #d9ddd9; border-radius: 11px; background: white; box-shadow: 0 16px 38px rgba(24,32,29,.15); padding: 5px; }
.searchable-combobox-menu[hidden] { display: none; }
.searchable-combobox-option { border: 0; border-radius: 8px; background: transparent; color: #34413e; padding: 9px 10px; text-align: left; font: 700 11px/1.35 var(--font-sans); cursor: pointer; }
.searchable-combobox-option:hover, .searchable-combobox-option:focus-visible, .searchable-combobox-option.is-active { outline: 0; background: var(--brand-soft); color: var(--brand-deep); }
.searchable-combobox-empty { color: var(--muted); padding: 10px; font-size: 10px; font-weight: 650; }
.template-load-state { border-radius: 9px; background: #f4f6f3; color: var(--muted); padding: 9px 11px; font-size: 10px; line-height: 1.5; }
.template-load-state.is-error { border: 1px solid #ecc9c0; background: #fff3ef; color: #913b2b; }
.inline-retry { border: 0; background: transparent; color: var(--brand); padding: 0; text-decoration: underline; font: inherit; font-weight: 800; }
.template-summary { border-left: 3px solid var(--green); background: #f2f8f4; color: #4f6960; padding: 9px 11px; font-size: 10px; font-weight: 700; }
.template-composer-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start; gap: 16px; }
.template-variable-fields { display: grid; gap: 10px; }
.template-variable-row { display: grid; grid-template-columns: minmax(170px, .85fr) minmax(220px, 1.15fr); align-items: end; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf9; padding: 11px; }
.template-variable-row .field-label { display: block; grid-column: 1 / -1; }
.template-variable-row .searchable-combobox { margin-top: 6px; }
.template-source-preview { align-self: center; overflow-wrap: anywhere; border: 1px solid #dfe4df; border-radius: 9px; background: white; color: #4d5b57; padding: 10px 11px; font-size: 11px; }
.template-source-preview.is-missing { border-color: #ead3cc; color: #9b4a39; }
.template-no-variables { margin: 0; border-radius: 9px; background: #f5f7f4; color: var(--muted); padding: 10px 11px; font-size: 10px; }
.template-composer-preview { position: sticky; top: 0; display: grid; gap: 7px; min-width: 0; }
.template-preview-phone { border-radius: 14px; background: #e7eee9; padding: 18px; }
.template-preview-message { display: grid; overflow: hidden; max-width: 390px; margin-left: auto; border-radius: 12px 12px 3px 12px; background: #e9e2ff; box-shadow: 0 2px 7px rgba(34,42,38,.12); }
.template-preview-media { width: 100%; max-height: 240px; object-fit: cover; background: #dfe5e1; }
.template-preview-document { margin: 10px 10px 3px; border-radius: 8px; background: rgba(255,255,255,.7); padding: 10px; font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.template-preview-location { margin: 10px 10px 3px; border-radius: 8px; background: rgba(255,255,255,.72); padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10px; font-weight: 700; }
.template-preview-header, .template-preview-body, .template-preview-footer { margin: 0; padding-inline: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.template-preview-header { padding-top: 11px; font-size: 12px; }
.template-preview-body { padding-top: 8px; font-size: 12px; line-height: 1.55; }
.template-preview-footer { padding-block: 6px 9px; color: #68736f; font-size: 9px; }
.template-preview-action { display: grid; gap: 2px; border-top: 1px solid rgba(109,59,234,.14); color: var(--brand); padding: 8px 12px; text-align: center; font-size: 10px; font-weight: 800; }
.template-preview-action small { overflow: hidden; color: #746b8d; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-weight: 600; }
.channel-empty-state { grid-column: 1 / -1; display: grid; justify-items: center; border: 1px dashed #cfd5d1; border-radius: var(--radius); background: rgba(255,255,255,.72); padding: clamp(34px, 7vw, 72px) 20px; text-align: center; }
.channel-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--brand-soft); color: var(--brand); font-size: 24px; font-weight: 500; }
.channel-empty-state h3 { margin: 13px 0 3px; font: 720 20px/1.2 var(--font-sans); letter-spacing: -.35px; }
.channel-empty-state p { max-width: 440px; margin: 0 0 17px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.meta-setup-panel { display: grid; gap: 13px; border-top: 1px solid var(--line); margin-top: 17px; padding-top: 17px; }
.meta-setup-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.meta-setup-head > div { display: grid; gap: 2px; }
.meta-setup-head strong { font-size: 13px; }
.meta-setup-kicker { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.meta-progress { flex: 0 0 auto; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); padding: 5px 9px; font-size: 9px; font-weight: 800; }
.meta-step-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.meta-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfa; padding: 12px; }
.meta-step.is-current { border-color: #d8cdfb; background: #f8f6ff; box-shadow: inset 3px 0 0 var(--brand); }
.meta-step.is-complete { border-color: #cfe3d8; background: #f5fbf7; }
.meta-step-marker { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #edf0ed; color: #65706d; font-size: 10px; font-weight: 850; }
.meta-step.is-current .meta-step-marker { background: var(--brand); color: white; }
.meta-step.is-complete .meta-step-marker { background: var(--green); color: white; }
.meta-step-content { min-width: 0; }
.meta-step-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta-step-heading strong { font-size: 11px; }
.meta-step-status { color: #7b8582; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.meta-step.is-current .meta-step-status { color: var(--brand-deep); }
.meta-step.is-complete .meta-step-status { color: var(--green); }
.channel-card .meta-step-content p { margin: 3px 0 0; }
.meta-step-content > .secondary-button { margin-top: 10px; }
.meta-callback-row { display: flex; align-items: stretch; gap: 7px; margin-top: 10px; }
.meta-callback-row .channel-callback { flex: 1 1 auto; min-width: 0; }
.compact-button { flex: 0 0 auto; min-height: 36px; padding-inline: 11px; font-size: 10px; }
.meta-webhook-warning { display: grid; gap: 2px; border: 1px solid #efd8ad; border-radius: 10px; background: #fff8e8; color: #80551f; padding: 10px 12px; font-size: 10px; line-height: 1.5; }
.meta-webhook-warning span { color: #8a6b43; }

.modal { width: min(520px, calc(100vw - 28px)); max-width: none; overflow: visible; border: 0; border-radius: 18px; background: transparent; padding: 0; box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgba(17,25,25,.54); backdrop-filter: blur(3px); }
.modal-card { border: 1px solid rgba(255,255,255,.45); border-radius: 18px; background: white; padding: 21px; }
.contact-modal { width: min(780px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal.profile-modal {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal.profile-modal .modal-card,
.modal.profile-modal .profile-modal-card { width: auto; }
.modal.profile-modal .profile-details-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 16px;
  margin-inline: -21px;
  border-top: 1px solid var(--line);
  background: white;
  padding: 14px 21px;
}
.profile-password-section {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.profile-password-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.profile-password-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}
.profile-password-actions {
  margin-top: 14px;
  margin-inline: -21px;
  margin-bottom: -21px;
  border-top: 1px solid var(--line);
  background: white;
  padding: 14px 21px 21px;
}
.contact-route-menu { position: fixed; z-index: 90; display: grid; gap: 3px; max-height: min(380px, calc(100dvh - 16px)); overflow-y: auto; border: 1px solid #d9dfdb; border-radius: 13px; background: white; padding: 6px; box-shadow: 0 16px 44px rgba(27,37,33,.2), 0 2px 8px rgba(27,37,33,.1); }
.contact-route-menu-title { color: #66716e; padding: 6px 8px 5px; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.contact-route-menu-option { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 52px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); padding: 7px 8px; text-align: left; }
.contact-route-menu-option:hover { background: #f3f7f4; }
.contact-route-menu-option:focus-visible { outline: 2px solid rgba(109,59,234,.42); outline-offset: -2px; background: #f7f4ff; }
.contact-route-menu-option:disabled { cursor: not-allowed; opacity: .52; }
.contact-route-menu-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f1f4f2; }
.contact-route-provider-logo { width: 22px; height: 22px; object-fit: contain; }
.contact-route-menu-logo .provider-logo-fallback { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #e9edeb; color: #5e6c69; font-size: 7px; font-weight: 850; }
.contact-route-menu-copy { display: block; min-width: 0; }
.contact-route-menu-copy strong, .contact-route-menu-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-route-menu-copy strong { color: var(--ink); font-size: 10px; }
.contact-route-menu-profile { color: #64706d; margin-top: 2px; font-size: 9px; }
.contact-route-menu-used { color: var(--muted); margin-top: 2px; font-size: 8px; }
.contact-route-state { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; background: #edf0ed; color: #65706d; padding: 4px 7px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.contact-route-state.is-default, .contact-route-state.is-last-used { background: var(--green-soft); color: var(--green); }
.contact-platform-menu-add { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--brand-soft); color: var(--brand-deep); font-size: 15px; font-weight: 700; }
.channel-modal { width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.channel-modal .modal-card { min-height: 100%; }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.modal-head h2 { margin: 0; font-family: var(--font-sans); font-size: 24px; font-weight: 730; letter-spacing: -.55px; }
.modal-copy { color: var(--muted); line-height: 1.6; }
.field-label { display: grid; gap: 6px; color: #3f4b49; font-size: 11px; font-weight: 700; }
.field-hint { display: block; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.35; }
.optional-label { display: inline; color: var(--muted); margin-left: 3px; font-size: 10px; font-weight: 600; }
.team-note { display: flex; align-items: center; gap: 10px; max-width: 1180px; border: 1px solid #d7e4dc; border-radius: 12px; background: #eef8f2; color: #356b54; margin: 0 auto 14px; padding: 11px 14px; font-size: 11px; }
.team-note strong { white-space: nowrap; }
.team-note span { color: #5f776c; }
.team-surface .surface-toolbar > div, .invitation-surface .surface-toolbar > div { display: flex; align-items: baseline; gap: 9px; }
.role-legend { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.role-dot { width: 6px; height: 6px; border-radius: 50%; background: #9aa4a1; margin-left: 5px; }
.role-dot.owner { background: var(--brand); }
.role-dot.admin { background: var(--violet); }
.role-dot.agent { background: var(--green); }

.roles-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.roles-list-surface, .roles-editor-surface { overflow: hidden; }
.roles-list { display: grid; gap: 6px; padding: 10px; max-height: min(70vh, 720px); overflow: auto; }
.role-list-item {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
}
.role-list-item:hover { background: var(--panel-warm); }
.role-list-item.is-active {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  background: var(--brand-soft);
}
.role-list-item strong { font-size: 13px; letter-spacing: -.1px; }
.role-list-item span { color: var(--muted); font-size: 11px; }
.role-list-item em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
}
.roles-editor-toolbar { align-items: flex-start; }
.roles-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.roles-editor-form { display: grid; gap: 18px; padding: 16px; }
.roles-editor-identity {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
}
.role-locked-note {
  border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--line));
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber);
  padding: 10px 12px;
  font-size: 12px;
}
.roles-permission-matrix { display: grid; gap: 14px; }
.role-permission-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.role-permission-group header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-warm);
  padding: 11px 14px;
}
.role-permission-group header strong { font-size: 13px; }
.role-permission-group header span { color: var(--muted); font-size: 11px; }
.role-permission-rows { display: grid; }
.role-permission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.role-permission-row:first-child { border-top: 0; }
.role-permission-row label { display: grid; gap: 2px; }
.role-permission-row label strong { font-size: 13px; font-weight: 600; }
.role-permission-row label span { color: var(--muted); font-size: 11px; }
.role-permission-control { justify-self: end; }
.role-permission-control .compact-select,
.role-permission-control .text-field { min-width: 180px; }
.roles-empty-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.member-cell { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.member-cell .avatar { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; }
.member-cell div { min-width: 0; }
.member-cell strong, .member-cell span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-cell span { color: var(--muted); font-size: 10px; }
.role-select { min-width: 95px; }
.member-action { border: 1px solid var(--line); border-radius: 8px; background: white; color: #55615e; padding: 6px 9px; font-size: 10px; font-weight: 700; }
.member-action:hover { background: #f4f5f2; }
.member-action.is-danger { border-color: #ebc9c1; color: #9b3a28; }
.member-action:disabled { cursor: not-allowed; opacity: .5; }
.member-actions { display: flex; align-items: center; gap: 6px; }
.invitation-surface { margin-top: 14px; }
.invitation-list { display: grid; }
.invitation-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; border-top: 1px solid #eff1ee; padding: 12px 16px; }
.invitation-item:first-child { border-top: 0; }
.invitation-item strong, .invitation-item span { display: block; }
.invitation-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.invitation-item span { color: var(--muted); font-size: 10px; text-transform: capitalize; }
.developer-api-surface { margin-top: 0; }
.developer-api-toolbar > div { display: grid; gap: 2px; }
.developer-api-toolbar > div strong { font-size: 13px; }
.developer-api-toolbar > div span { max-width: 660px; line-height: 1.45; }
.developer-api-summary { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(240px, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); background: #fafbf9; padding: 15px 16px; }
.api-summary-label { display: block; color: var(--muted); margin-bottom: 5px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.api-base-row { display: flex; align-items: stretch; gap: 7px; }
.api-base-row code { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: white; color: #33413e; padding: 8px 10px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.api-security-note { display: grid; gap: 2px; border-left: 3px solid var(--green); padding-left: 11px; }
.api-security-note strong { color: #356b54; font-size: 11px; }
.api-security-note span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.api-docs-link { text-decoration: none; white-space: nowrap; }
.api-key-table { min-width: 760px; }
.api-key-identity strong, .api-key-identity code { display: block; }
.api-key-identity strong { color: var(--ink); }
.api-key-identity code { color: var(--muted); margin-top: 3px; font-size: 9px; }
.api-key-result { display: grid; justify-items: center; margin-top: 15px; text-align: center; }
.api-key-result .success-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--green-soft); color: var(--green); font-size: 21px; font-weight: 800; }
.api-key-result h3 { margin: 11px 0 3px; font-family: var(--font-sans); font-size: 20px; font-weight: 720; }
.api-key-result > p { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.api-key-result .field-label, .api-key-result .inline-field { justify-self: stretch; width: 100%; text-align: left; }
.api-key-result .secret-field { font-size: 10px; letter-spacing: 0; }
.api-key-warning { justify-self: stretch; border: 1px solid #efd8ad; border-radius: 9px; background: #fff8e8; color: #80551f; margin-top: 10px; padding: 9px 10px; text-align: left; font-size: 9px; line-height: 1.45; }
.invite-result { display: grid; justify-items: center; margin-top: 15px; text-align: center; }
.invite-result .success-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--green-soft); color: var(--green); font-size: 21px; font-weight: 800; }
.invite-result h3 { margin: 11px 0 3px; font-family: var(--font-sans); font-size: 20px; font-weight: 720; }
.invite-result p { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.invite-result .field-label { justify-self: stretch; text-align: left; }
.invite-result .inline-field { justify-self: stretch; width: 100%; }
.role-explainer { border-radius: 10px; background: #f5f6f3; color: var(--muted); margin-top: 12px; padding: 10px 11px; font-size: 10px; line-height: 1.5; }
.invite-channel-access { margin-top: 14px; }
.invite-channel-access-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.invite-channel-access-head strong { display: block; color: #24302e; font-size: 11px; }
.invite-channel-access-head .subtle { display: block; margin-top: 3px; font-size: 10px; line-height: 1.45; }
.invite-channel-select-all { flex: 0 0 auto; min-height: 30px; padding: 0 10px; font-size: 10px; }
.invite-channel-options { display: grid; gap: 6px; max-height: 180px; overflow: auto; padding-right: 2px; }
.invite-channel-option { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; color: #3f4b49; padding: 8px 10px; font-size: 10px; cursor: pointer; }
.invite-channel-option:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.invite-channel-option input { width: 14px; height: 14px; accent-color: var(--brand); margin: 0; flex: 0 0 auto; }
.invite-channel-option span { min-width: 0; }
.invite-channel-option small { display: block; color: var(--muted); margin-top: 2px; font-size: 9px; }
.invite-channel-access .field-hint { margin-top: 8px; }
.text-field { width: 100%; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; color: var(--ink); padding: 9px 11px; outline: 0; }
.text-field:focus { border-color: #b8a5f3; box-shadow: 0 0 0 3px rgba(109,59,234,.09); }
.field-help { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 15px; }
.danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid #e7b7ac; border-radius: 9px; background: #fff5f2; color: #a43f2b; padding: 8px 13px; font-size: 11px; font-weight: 760; }
.danger-button:hover { border-color: #d88d7c; background: #ffebe6; }
.danger-button:disabled { cursor: not-allowed; opacity: .55; }
.modal-danger-action { margin-right: auto; }
.confirmation-modal { width: min(450px, calc(100vw - 28px)); }
.confirmation-card { text-align: left; }
.confirmation-card h2 { margin: 7px 0 0; font-family: var(--font-sans); font-size: 24px; letter-spacing: -.5px; }
.confirmation-card > .modal-copy { margin: 10px 0 0; }
.confirmation-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff0ec; color: #b54731; }
.confirmation-symbol svg { width: 21px; height: 21px; }
.confirmation-note {
  border: 1px solid #f0d2c9; border-radius: 10px; background: #fff7f4; color: #854333;
  margin: 13px 0 0; padding: 10px 11px; font-size: 10px; font-weight: 650; line-height: 1.55; white-space: pre-line;
}
.confirmation-note.is-info {
  border-color: #d7e2dc; background: #f4f8f6; color: #35554a;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 18px; }
.form-span { grid-column: 1 / -1; }
.channel-form-grid { margin-top: 15px; }
.provider-fields { border: 1px solid var(--line); border-radius: 14px; background: #fafbf9; margin-top: 16px; padding: 15px; }
.provider-form-head { display: flex; align-items: center; gap: 10px; }
.provider-form-head > div { min-width: 0; }
.provider-form-head strong, .provider-form-head span { display: block; }
.provider-form-head strong { font-size: 12px; }
.provider-form-head div span { color: var(--muted); margin-top: 1px; font-size: 10px; }
.provider-setup-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.provider-setup-option {
  min-height: 36px;
  padding: 0 14px;
}
.provider-setup-option.is-active {
  border-color: #b9a4ef;
  background: #f4efff;
  color: #4b2f9b;
}
.provider-setup-option:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.provider-manual-fields { margin-top: 4px; }
.google-oauth-connect { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line, #d9dfdb); border-radius: 16px; background: linear-gradient(180deg, #f7fafc, #eef4fb); }
.google-oauth-connect .primary-button { justify-self: start; }
.google-location-list { display: grid; gap: 8px; max-height: min(42vh, 360px); overflow: auto; margin: 12px 0 4px; }
.google-location-option { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line, #d9dfdb); border-radius: 14px; background: #fff; cursor: pointer; }
.google-location-option:has(input:checked) { border-color: #4285f4; box-shadow: inset 0 0 0 1px #4285f4; }
.google-location-option strong, .google-location-option small { display: block; }
.google-location-option small { color: var(--muted); margin-top: 2px; }
.provider-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; object-fit: contain; padding: 6px; font-size: 10px; font-weight: 850; }
.provider-mark.whatsapp { background: #e7f6ef; color: #168f66; }
.provider-mark.telegram { background: #e8f4fa; color: #2d8bc0; }
.provider-mark.instagram { background: #fceef4; color: #e1306c; }
.provider-mark.facebook { background: #eaf2fb; color: #1877f2; }
.secret-field { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; }
.secret-field.is-saved { border-color: #bcdcca; background: #f1faf5; color: #317058; letter-spacing: .08em; }
.secret-help { color: #697b75; }
.generate-button { min-width: 82px; }
.channel-enabled { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #d9e5dd; border-radius: 12px; background: #f2f9f5; margin-top: 16px; padding: 11px 12px; color: #385b4c; cursor: pointer; }
.channel-enabled input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--green); margin: 2px 0 0; }
.channel-enabled strong, .channel-enabled small { display: block; }
.channel-enabled strong { font-size: 11px; }
.channel-enabled small { color: #667c72; margin-top: 1px; font-size: 9px; font-weight: 500; }

.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: grid; gap: 8px; pointer-events: none; }
.toast-region.is-modal-toast { position: sticky; z-index: 10; top: 0; right: auto; bottom: auto; width: 100%; margin-bottom: 12px; }
.toast-region.is-modal-toast .toast { width: 100%; }
.toast { display: flex; align-items: flex-start; gap: 9px; width: min(360px, calc(100vw - 36px)); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #1d292a; color: white; box-shadow: 0 15px 40px rgba(22,28,27,.2); padding: 11px 13px; animation: toast-in .22s ease; }
.toast::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #6bd5a7; margin-top: 5px; }
.toast.is-error::before { background: #ff8a75; }
.toast strong { display: block; margin-bottom: 2px; font-size: 12px; }
.toast span { display: block; color: #c5cfcd; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.mobile-scrim { position: fixed; z-index: 25; inset: 0; background: rgba(12,19,19,.48); }

@media (max-width: 1120px) {
  :root { --sidebar-width: 74px; }
  .brand { justify-content: center; margin-inline: 0; }
  .brand-copy, .nav-button > span:not(.nav-icon):not(.nav-count), .workspace-card div { display: none; }
  .nav-button { grid-template-columns: 1fr; justify-items: center; padding-inline: 6px; }
  .nav-group-toggle, .nav-section-toggle { display: none; }
  .nav-submenu, .nav-submenu-nested { border-left: 0; margin: 0; padding-left: 0; }
  .nav-count { position: absolute; margin: -24px 0 0 24px; padding-inline: 5px; }
  .workspace-card { justify-content: center; padding: 13px 8px; }
  .inbox-grid.has-details { grid-template-columns: minmax(275px, 310px) minmax(340px, 1fr) 250px; }
  .channel-grid { grid-template-columns: minmax(0, 1fr); }
  .template-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-library-toolbar { align-items: stretch; flex-direction: column; }
  .template-library-search { flex-basis: auto; width: 100%; }
  .template-filter-bar { flex-wrap: wrap; }
}

@media (max-width: 830px) {
  body { overflow: hidden; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 18px 0 50px rgba(11,18,18,.2); }
  .app-shell.menu-open .sidebar { transform: translateX(0); }
  .brand { justify-content: flex-start; margin-inline: 7px; }
  .brand-copy, .nav-button > span:not(.nav-icon):not(.nav-count), .workspace-card div { display: initial; }
  .nav-button { grid-template-columns: 30px minmax(0,1fr) auto; justify-items: initial; padding-inline: 10px; }
  .nav-group-toggle { display: grid; }
  .nav-section-toggle { display: flex; }
  .nav-submenu { border-left: 1px solid rgba(255,255,255,.11); margin: 1px 0 3px 19px; padding-left: 8px; }
  .nav-submenu-nested { margin: 1px 0 2px 13px; }
  .nav-count { position: static; margin: 0; }
  .workspace-card { justify-content: flex-start; }
  .mobile-menu { display: inline-grid; }
  .topbar { padding-inline: 13px; }
  .connection-pill { max-width: 118px; }
  .connection-pill span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inbox-grid, .inbox-grid.has-details { grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); }
  .details-panel { position: absolute; z-index: 8; inset: 0 0 0 auto; width: min(310px, 88%); box-shadow: -15px 0 40px rgba(35,42,39,.15); }
  .user-compact { display: none; }
  .channel-expanded-content { display: block; }
  .channel-expanded-content > .connection-setup { border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; padding-left: 0; }
  .contacts-workspace.has-editor { grid-template-columns: minmax(0, 1fr) minmax(265px, 310px); }
  .template-composer-layout { grid-template-columns: 1fr; }
  .template-composer-preview { position: static; }
}

@media (max-width: 640px) {
  .conversation-filter-desktop { display: none; }
  .filter-row { display: flex; }
  .main { grid-template-rows: 56px minmax(0, 1fr); }
  .topbar-title .eyebrow { display: none; }
  .topbar h1 { font-size: 19px; }
  .topbar-actions { gap: 3px; }
  .connection-pill { display: none; }
  .avatar-button { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .inbox-grid, .inbox-grid.has-details { display: block; position: relative; }
  .conversation-panel, .chat-panel { position: absolute; inset: 0; }
  .chat-panel { transform: translateX(105%); transition: transform .2s ease; }
  .inbox-grid.chat-open .chat-panel { transform: translateX(0); }
  .mobile-back { display: inline-grid; }
  .chat-header { min-height: 56px; padding: 5px 8px; }
  .chat-contact-card { gap: 7px; padding-inline: 2px; }
  .chat-person-title-row { gap: 6px; }
  .chat-title { font-size: 16px; }
  .chat-meta, .chat-profile-id { font-size: 11px; }
  .chat-channel-badge { font-size: 10px; }
  .chat-channel-badge img { width: 16px; height: 16px; flex-basis: 16px; }
  .chat-profile-id { max-width: min(30vw, 140px); }
  #chatPresence { display: none; }
  .chat-actions .icon-button { display: none; }
  .whatsapp-reply-countdown { min-width: 96px; height: 30px; gap: 5px; padding-inline: 7px; font-size: 11px; }
  .whatsapp-reply-countdown img { width: 18px; height: 18px; flex-basis: 18px; }
  .compact-select { max-width: 92px; }
  .assignee-select { display: none; }
  .message-stack { max-width: 86%; }
  .message-bubble { max-width: 100%; }
  .message-reply-button { opacity: .75; }
  .message-thread { padding: 12px 12px 10px; }
  .composer { padding: 5px 8px max(8px, env(safe-area-inset-bottom)); }
  dialog.attachment-preview-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 0; }
  .attachment-preview-card { width: 100%; max-width: 100%; max-height: 100dvh; min-height: 100dvh; border-radius: 0; }
  .attachment-preview-body { min-height: 0; flex: 1; }
  .send-hint { display: none; }
  .details-panel { position: fixed; z-index: 45; top: 0; bottom: 0; width: min(330px, 92vw); }
  .content-route { padding: 22px 14px; }
  .contacts-route { padding-top: 10px; }
  .route-heading { align-items: flex-start; }
  .contact-toolbar-meta { width: 100%; justify-content: space-between; }
  .route-heading-actions { align-items: stretch; flex-direction: column-reverse; }
  .route-heading-actions > * { width: 100%; }
  .route-heading .primary-button { padding-inline: 10px; }
  .route-heading .primary-button svg { display: none; }
  .stats-grid { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
  .stat-card strong { margin: 0; font-size: 20px; }
  .channel-grid { grid-template-columns: 1fr; }
  .channel-card-head { align-items: flex-start; flex-direction: column; }
  .channel-head-actions { width: 100%; }
  .channel-head-actions > * { flex: 1 1 0; }
  .meta-console-link { align-self: flex-start; padding-inline: 10px; }
  .channel-metrics { grid-template-columns: 1fr; }
  .channel-card-actions { align-items: stretch; flex-direction: column-reverse; }
  .channel-card-actions > * { width: 100%; }
  .meta-setup-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .meta-step-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .meta-callback-row { flex-direction: column; }
  .meta-callback-row .compact-button { align-self: flex-start; }
  .callback-token-row { align-items: stretch; flex-direction: column; }
  .callback-token-row .compact-button { width: 100%; }
  .reply-window-notice { align-items: stretch; flex-direction: column; }
  .reply-window-notice .secondary-button { width: 100%; }
  .setting-row { align-items: flex-start; flex-direction: column; }
  .switch-control { justify-content: space-between; width: 100%; }
  .single-workspace-badge { align-self: flex-start; }
  .workspace-profile-toolbar { align-items: flex-start; flex-direction: column; }
  .workspace-profile-form { padding: 0 15px 17px; }
  .workspace-form-grid { grid-template-columns: 1fr; }
  .workspace-form-grid .form-span { grid-column: auto; }
  .workspace-id-row { align-items: stretch; }
  .workspace-form-actions { align-items: stretch; flex-direction: column; }
  .workspace-form-actions .primary-button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-span { grid-column: auto; }
  .template-variable-row { grid-template-columns: 1fr; }
  .contacts-workspace.has-editor { display: block; }
  .contact-editor-panel { position: fixed; z-index: 45; top: 8px; right: 8px; bottom: 8px; width: min(360px, calc(100vw - 16px)); overflow-y: auto; box-shadow: -15px 0 40px rgba(35,42,39,.2); }
  .contact-editor-actions { flex-wrap: wrap; }
  .contact-delete-button { width: 100%; margin-right: 0; }
  .contact-identity-fields { grid-template-columns: 1fr; }
  .contact-identity-fields .form-span, .identity-route-fieldset { grid-column: auto; }
  .identity-route-option-row { grid-template-columns: 1fr; }
  .contact-identities-head { align-items: flex-start; }
  .contact-platform-add { align-items: stretch; }
  .contact-platform-id-row { grid-template-columns: 68px minmax(0, 1fr); }
  .contact-platform-id-row .identity-message-split { grid-column: 2; justify-self: start; }
  .contact-modal { max-height: calc(100dvh - 16px); }
  .contact-modal .modal-card { padding: 18px 15px; }
  .modal.profile-modal { max-height: calc(100dvh - 16px); }
  .modal.profile-modal .modal-card,
  .modal.profile-modal .profile-modal-card { padding: 18px 15px; }
  .modal.profile-modal .profile-details-actions { margin-inline: -15px; padding: 14px 15px; }
  .modal.profile-modal .profile-password-actions { margin-inline: -15px; margin-bottom: -18px; padding: 14px 15px 18px; }
  .channel-modal { max-height: calc(100dvh - 16px); }
  .channel-modal .modal-card { padding: 18px 15px; }
  .channel-modal .modal-actions { flex-wrap: wrap; }
  .channel-modal .modal-danger-action { width: 100%; margin-right: 0; }
  .provider-fields { padding: 13px; }
  .channel-enabled { align-items: flex-start; }
  .auth-card { padding: 25px 20px; border-radius: 20px; }
  .auth-brand { margin-bottom: 28px; }
  .inline-field { display: grid; }
  .team-note { align-items: flex-start; flex-direction: column; gap: 2px; }
  .role-legend { display: none; }
  .roles-layout { grid-template-columns: 1fr; }
  .roles-list { max-height: none; }
  .roles-editor-identity { grid-template-columns: 1fr; }
  .role-permission-row { grid-template-columns: 1fr; }
  .role-permission-control { justify-self: stretch; }
  .role-permission-control .compact-select,
  .role-permission-control .text-field { width: 100%; min-width: 0; }
  .invitation-item { grid-template-columns: minmax(0, 1fr) auto; }
  .invitation-item time { display: none; }
  .developer-api-toolbar { align-items: stretch; flex-direction: column; }
  .developer-api-summary { grid-template-columns: 1fr; }
  .api-docs-link { justify-self: start; }
  .template-filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .template-filter-trigger { justify-content: space-between; width: 100%; }
  .template-filter-menu { right: auto; left: 0; width: min(270px, calc(100vw - 46px)); }
  .template-filter:nth-child(even) .template-filter-menu { right: 0; left: auto; }
  .template-library-active-row { align-items: flex-start; flex-wrap: wrap; }
  .template-result-count { width: 100%; margin-left: 0; }
  .template-library-grid { grid-template-columns: 1fr; padding: 12px; }
}

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

.campaign-full-details-card { width: min(760px, 92vw); max-height: 85vh; overflow: auto; }
.campaign-full-details-list { margin: 20px 0 0; }
.campaign-full-details-list > div { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line, #e3e8e6); }
.campaign-full-details-list dt { font-weight: 700; }
.campaign-full-details-list dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.campaign-expand-col > button { display: block; width: 100%; margin: 0; }
.campaign-expand-col > .campaign-full-details-button { margin-top: 8px; }

.campaign-recipient-detail { width: 320px; max-width: 320px; }
.campaign-recipient-detail-text { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.campaign-recipient-updated { white-space: nowrap; }

.campaign-selection-cell { width: 36px; text-align: center; }
.campaign-bulk-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.campaign-bulk-controls[hidden], .campaign-bulk-menu[hidden] { display: none; }
.campaign-bulk-menu-wrap { position: relative; }
.campaign-bulk-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 150px; background: white; border: 1px solid #ddd; border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px #0002; }
.campaign-bulk-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 14px; border-radius: 6px; cursor: pointer; }
.campaign-bulk-menu button:hover { background: #f1ecff; }
.campaign-bulk-menu button:disabled { opacity: .4; cursor: default; }
.campaign-status-pill.is-paused { background: #fff1d5; color: #8b5d00; }
.campaign-status-pill.is-cancelled { background: #eee; color: #666; }
/* Campaign workspace redesign */
.campaigns-route { gap: 24px; color: #202239; }
.campaigns-heading { gap: 20px; padding: 4px 0 0; }
.campaigns-heading h2 { font-size: 28px; font-weight: 760; letter-spacing: -.8px; }
.campaigns-heading .eyebrow { margin: 0 0 7px; font-size: 10px; letter-spacing: .12em; }
.campaign-page-description { margin: 7px 0 0; color: #7a8096; font-size: 13px; }
.campaign-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0 0 26px; }
.campaign-overview-card { display: flex; align-items: center; gap: 14px; padding: 21px; background: linear-gradient(140deg,#fff,#faf9ff); border: 1px solid #e5e5f0; border-radius: 14px; box-shadow: 0 3px 12px #25234703; }
.campaign-overview-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: #efe9ff; color: #713cf1; font-size: 25px; font-weight: 700; }
.campaign-overview-card.is-active .campaign-overview-icon { background: #eaf0ff; color: #4b73ea; }
.campaign-overview-card.is-paused .campaign-overview-icon { background: #fff2e2; color: #c37b17; }
.campaign-overview-card.is-complete .campaign-overview-icon { background: #e8f8ed; color: #229557; }
.campaign-overview-card > div > span { display: block; color: #777d93; font-size: 12px; }
.campaign-overview-card strong { display: block; margin-top: 4px; font-size: 27px; line-height: 1.15; letter-spacing: -.7px; }
.campaign-history-panel > .campaign-panel-toolbar { padding: 0 0 18px; gap: 16px; }
.campaign-panel-toolbar strong { font-size: 16px; }
.campaign-history-filters { grid-template-columns: minmax(180px,1.3fr) repeat(4,minmax(120px,1fr)) auto; gap: 12px; padding: 18px; background: white; border: 1px solid #e6e6f0; border-radius: 14px; margin-bottom: 18px; align-items: end; }
.campaign-history-search { min-width: 0; }
.campaign-history-filters .text-field { min-height: 39px; border-radius: 9px; font-size: 12px; }
.campaigns-route .campaign-bulk-controls { padding: 7px 10px 7px 14px; border: 1px solid #e7defd; border-radius: 10px; background: #f6f2ff; }
.campaigns-route .campaign-selected-count { font-weight: 650; }
.campaign-table-wrap { border: 1px solid #e4e5ee; border-radius: 14px; background: white; box-shadow: 0 3px 12px #23243f03; overflow-x: auto; }
.campaign-table { min-width: 1050px; }
.campaign-table th { background: #fafafe; font-size: 9px; white-space: nowrap; padding: 14px 9px; color: #84899f; }
.campaign-table > tbody > .campaign-row > td { padding: 17px 9px; vertical-align: middle; }
.campaign-table .campaign-name-cell strong { font-size: 12px; font-weight: 720; color: #25243a; }
.campaign-table .campaign-name-cell > span { margin-top: 5px; font-size: 10px; color: #9296aa; }
.campaign-table .campaign-row.is-open { background: #fdfcff; }
.campaign-table .campaign-status-pill { font-size: 10px; padding: 5px 9px; border-radius: 7px; }
.campaigns-route .campaign-recipient-panel { margin: 4px 8px 16px; border: 1px solid #e8e7f1; border-radius: 12px; background: #fbfbfe; overflow-x: auto; }
.campaign-recipient-heading { display: flex; justify-content: space-between; gap: 12px; padding: 16px 14px; align-items: center; }
.campaign-recipient-heading strong { font-size: 12px; }
.campaign-recipient-heading .subtle { font-size: 10px; }
.campaign-recipient-table { min-width: 650px; }
.campaign-recipient-table th { background: #f4f3fa; }
.campaigns-route .campaign-history-footer { padding-top: 18px; }
.campaign-steps { display: flex; gap: 10px; align-items: center; margin: 8px 0 22px; padding: 14px 18px; background: white; border: 1px solid #e6e5f0; border-radius: 12px; }
.campaign-steps button { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1; padding: 7px; border: 0; background: transparent; color: #5d6279; font-size: 12px; font-weight: 650; cursor: pointer; border-radius: 8px; }
.campaign-steps button:hover, .campaign-steps button:focus-visible { background: #f3eeff; color: #6b35ef; }
.campaign-steps span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #efedf6; color: #5a586f; font-size: 11px; }
.campaign-steps button:first-child span { background: #713cf1; color: white; }
.campaign-create-form { grid-template-columns: minmax(0,1.5fr) minmax(320px,1fr); gap: 20px; align-items: start; }
#campaignSettingsSection { grid-column: 1; grid-row: 1; }
#campaignAudienceSection { grid-column: 1; grid-row: 2; }
#campaignMessageFieldset { grid-column: 2; grid-row: 1 / span 2; position: static; }
.campaign-create-form .campaign-fieldset { border: 1px solid #e4e4ef; border-radius: 14px; background: white; padding: 22px 18px 18px; box-shadow: 0 3px 12px #24213e03; scroll-margin-top: 20px; }
.campaign-create-form .campaign-fieldset legend { font-size: 14px; font-weight: 750; padding: 0 7px; color: #25243e; }
.campaign-create-form .field-label { font-size: 11px; color: #4e526b; }
.campaign-create-form .text-field, .campaign-create-form .campaign-channel-trigger { border-radius: 9px; font-size: 12px; }
.campaign-create-form .campaign-create-grid { gap: 14px; }
.campaign-create-form .campaign-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.campaign-create-form .campaign-contact-table, .campaign-create-form .campaign-selected-table { overflow-x: auto; }
.campaign-create-form .campaign-contact-head, .campaign-create-form .campaign-contact-item, .campaign-create-form .campaign-audience-head, .campaign-create-form .campaign-audience-row { min-width: 560px; }
.campaign-create-form .campaign-contact-footer { gap: 12px; margin-top: 16px; }
.campaign-create-form .campaign-message-layout { display: grid; grid-template-columns: 1fr; gap: 22px; }
.campaign-create-form .campaign-message-preview { position: static; border-top: 1px solid #eeedf4; padding-top: 18px; }
.campaign-create-form .campaign-message-preview-phone { background: #eff2eb; padding: 20px; min-height: 170px; }
.campaign-create-form .campaign-variable-row { grid-template-columns: 1fr; padding: 12px; border: 1px solid #eeedf6; background: #fcfbff; border-radius: 10px; }
.campaign-create-actions { grid-column: 1 / -1; padding: 18px 22px; background: white; border: 1px solid #e6e5ef; border-radius: 12px; scroll-margin-top: 20px; }
.campaign-create-action-buttons { display: flex; gap: 10px; }
.campaign-create-panel .primary-button, .campaign-history-panel .primary-button { border-radius: 10px; }
.campaign-full-details-card { width: min(820px,92vw); border-radius: 18px; }
.campaign-detail-hero { padding: 14px 0 22px; }
.campaign-detail-hero h3 { margin: 7px 0 15px; font-size: 23px; letter-spacing: -.5px; }
.campaign-detail-hero > div { display: flex; gap: 12px; align-items: center; }
.campaign-detail-hero > div > span:first-child { font-size: 12px; font-weight: 650; background: #f0ebff; color: #713cf1; padding: 6px 10px; border-radius: 7px; }
.campaign-detail-metrics { display: grid; grid-template-columns: repeat(6,1fr); border: 1px solid #e6e5f1; border-radius: 12px; background: #faf9ff; padding: 16px 8px; }
.campaign-detail-metrics > div { text-align: center; border-right: 1px solid #e7e5f1; }
.campaign-detail-metrics > div:last-child { border-right: 0; }
.campaign-detail-metrics span { display: block; color: #89869c; text-transform: uppercase; font-size: 9px; letter-spacing: .05em; }
.campaign-detail-metrics strong { display: block; font-size: 22px; margin-top: 6px; }
.campaign-full-details-list > div { padding: 14px 0; font-size: 12px; grid-template-columns: minmax(130px,1fr) minmax(0,2fr); }
.campaign-full-details-list dt { color: #79768e; font-weight: 600; }
@media (max-width: 1200px) {
  .campaign-history-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .campaign-create-form { grid-template-columns: minmax(0,1.2fr) minmax(300px,1fr); }
}
@media (max-width: 960px) {
  .campaign-create-form { grid-template-columns: 1fr; }
  #campaignSettingsSection, #campaignAudienceSection, #campaignMessageFieldset { grid-column: 1; grid-row: auto; position: static; }
  .campaign-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-create-form .campaign-message-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .campaigns-heading h2 { font-size: 24px; }
  .campaign-overview { gap: 10px; margin-bottom: 18px; }
  .campaign-overview-card { padding: 14px 10px; gap: 9px; }
  .campaign-overview-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 20px; border-radius: 10px; }
  .campaign-overview-card strong { font-size: 23px; }
  .campaign-overview-card > div > span { font-size: 10px; }
  .campaign-history-filters { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; }
  .campaign-history-search { grid-column: 1 / -1; }
  .campaign-history-panel > .campaign-panel-toolbar { flex-wrap: wrap; }
  .campaign-steps { padding: 8px; gap: 2px; }
  .campaign-steps button { gap: 5px; font-size: 10px; padding: 4px; }
  .campaign-steps span { width: 20px; height: 20px; }
  .campaign-create-form .campaign-message-layout { grid-template-columns: 1fr; }
  .campaign-create-form .campaign-fieldset { padding: 18px 12px; }
  .campaign-create-actions { padding: 14px; }
  .campaign-detail-metrics { grid-template-columns: repeat(3,1fr); gap: 18px 0; }
  .campaign-detail-metrics > div:nth-child(3) { border-right: 0; }
  .campaign-full-details-list > div { grid-template-columns: 1fr; gap: 5px; }
}
.campaign-steps button:first-child:not([aria-current]) span { background: #efedf6; color: #5a586f; }
.campaign-steps button[aria-current] { color: #713cf1; }
.campaign-steps button[aria-current] span { background: #713cf1; color: white; }
.campaign-message-empty { padding: 24px 18px; margin: 4px 0; border: 1px dashed #dfd9ee; border-radius: 12px; background: #faf8ff; color: #817b98; font-size: 12px; line-height: 1.7; }
.campaign-create-form > *, .campaign-create-form .campaign-fieldset, .campaign-create-form .campaign-create-grid > * { min-width: 0; }
.campaign-create-form .campaign-audience-table { min-width: 0; overflow-x: auto; }
.campaign-create-form .campaign-fieldset { grid-template-columns: minmax(0,1fr); }
.campaign-create-form .campaign-fieldset > * { min-width: 0; max-width: 100%; }
#campaignContactsAudience, #campaignUploadAudience { min-width: 0; width: 100%; }
/* Keep the review controls visible without floating content over them. */
.campaigns-route.is-creating .campaigns-heading { display: none; }
.campaigns-route.is-creating .campaign-create-panel > .campaign-panel-toolbar { padding: 0 0 12px; }
.campaigns-route.is-creating .campaign-create-panel > .campaign-panel-toolbar strong { font-size: 23px; letter-spacing: -.5px; }
.campaigns-route.is-creating .campaign-steps { margin: 0 0 16px; padding: 9px 14px; }
.campaign-create-form { gap: 16px; isolation: isolate; padding-bottom: 4px; }
.campaign-create-form .campaign-fieldset { padding: 16px 16px 14px; }
.campaign-create-form .campaign-variable-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 10px; }
.campaign-create-form .campaign-message-layout { gap: 14px; }
.campaign-create-form .campaign-message-preview { padding: 12px; }
.campaign-create-form .campaign-message-preview-phone { min-height: 110px; padding: 14px; }
.campaign-create-actions { position: sticky; bottom: 0; z-index: 12; grid-row: 3; margin-top: 4px; box-shadow: 0 -8px 24px #2520390b; padding: 14px 18px; }
.campaign-create-action-buttons { flex-wrap: nowrap; flex-shrink: 0; }
.campaign-create-action-buttons button { min-height: 40px; white-space: nowrap; }
.campaign-create-form .campaign-filter-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; }
.campaign-create-form .campaign-filter-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.campaign-create-form .campaign-filter-search { grid-column: 1 / -1; max-width: none; }
.campaign-create-form .campaign-contact-table, .campaign-create-form .campaign-audience-table { min-height: 90px; }
.campaign-create-form .campaign-contact-list, .campaign-create-form .campaign-audience-rows { max-height: 210px; }
@media (max-width: 1100px) { .campaign-create-form .campaign-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 960px) { .campaign-create-actions { grid-row: auto; } }
@media (max-width: 640px) {
  .campaign-create-form .campaign-variable-row { grid-template-columns: 1fr; }
  .campaign-create-actions { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .campaign-create-action-buttons { justify-content: flex-end; }
  .campaign-create-actions .subtle { font-size: 10px; }
  .campaign-create-form .campaign-filter-toolbar { grid-template-columns: 1fr; }
}
.campaign-create-form .campaign-contact-head, .campaign-create-form .campaign-contact-item,
.campaign-create-form .campaign-audience-head, .campaign-create-form .campaign-audience-row { min-width: 640px; }
.campaign-create-form .campaign-contact-list, .campaign-create-form .campaign-audience-rows { min-width: 640px; overflow-x: hidden; }
/* Independent columns prevent long template mappings from stretching audience spacing. */
.campaign-audience-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; grid-column: 1; grid-row: 1; }
#campaignMessageFieldset { grid-column: 2; grid-row: 1; }
.campaign-create-actions { grid-row: 2; }
@media (max-width: 960px) {
  .campaign-audience-column, #campaignMessageFieldset { grid-column: 1; grid-row: auto; }
  .campaign-create-actions { grid-row: auto; }
}
/* Separate flex sections: no shared grid rows or row-height redistribution. */
.campaign-create-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.campaign-audience-column { flex: 1.5 1 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; align-self: flex-start; }
.campaign-message-column { flex: 1 1 0; min-width: 0; align-self: flex-start; }
.campaign-message-column > #campaignMessageFieldset { width: 100%; min-width: 0; margin: 0; position: static; }
.campaign-create-form > .campaign-create-actions { flex: 0 0 100%; width: 100%; box-sizing: border-box; }
@media (max-width: 960px) {
  .campaign-audience-column, .campaign-message-column { flex: 0 0 100%; width: 100%; }
}
/* Compact history leaves room for the actual campaign rows. */
.campaigns-route { gap: 12px; padding-top: 4px; }
.campaigns-heading .eyebrow, .campaigns-heading .campaign-page-description { display: none; }
.campaigns-heading h2 { font-size: 24px; }
.campaign-overview { gap: 10px; margin-bottom: 14px; }
.campaign-overview-card { padding: 12px 16px; gap: 10px; border-radius: 11px; }
.campaign-overview-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 20px; }
.campaign-overview-card strong { font-size: 22px; margin-top: 2px; }
.campaign-overview-card > div > span { font-size: 11px; }
.campaign-history-panel > .campaign-panel-toolbar { padding-bottom: 10px; gap: 10px; }
.campaign-history-panel .campaign-panel-toolbar strong { font-size: 14px; }
.campaign-history-panel .campaign-panel-toolbar .subtle { font-size: 11px; }
.campaigns-route .campaign-bulk-controls { padding: 3px 8px; }
.campaign-history-filters { padding: 10px 12px; gap: 10px; margin-bottom: 10px; }
.campaign-history-filters .text-field { min-height: 34px; height: 34px; }
.campaign-table th { padding: 11px 8px; }
.campaign-table > tbody > .campaign-row > td { padding: 12px 8px; }
@media (max-width: 640px) {
  .campaign-overview-card { padding: 10px; }
  .campaign-history-filters { padding: 10px; }
}

.campaign-recipient-message-preview { display: flex; align-items: center; gap: 8px; max-width: 320px; }
.campaign-recipient-message-preview .campaign-recipient-detail-text { flex: 1; min-width: 0; }
.campaign-recipient-info { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 1px solid #d8d2ec; border-radius: 50%; background: #fff; color: #713aff; font: 600 14px Georgia, serif; cursor: pointer; }
.campaign-recipient-info:hover { background: #f0eaff; }
.campaign-recipient-info:focus-visible { outline: 2px solid #713aff; outline-offset: 2px; }
.campaign-recipient-heading .campaign-full-details-button { margin: 0; min-height: 32px; white-space: nowrap; }
.campaign-recipient-message-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; max-height: 60vh; overflow-y: auto; }

.campaign-recipient-message-tooltip { position: fixed; inset: auto; margin: 0; width: 420px; max-width: calc(100vw - 24px); max-height: min(420px, calc(100vh - 24px)); overflow-y: auto; box-sizing: border-box; border: 1px solid #dfdaed; border-radius: 10px; padding: 14px 16px; background: #fff; color: #17213b; box-shadow: 0 8px 30px #21164129; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.campaign-recipient-heading-actions { display: flex; align-items: center; gap: 8px; }

.contact-list-filters { display:flex; flex-wrap:wrap; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); align-items:center; }
.contact-list-filter { position:relative; flex:1 1 160px; min-width:140px; }
.contact-list-filter summary { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border:1px solid #d8ddeb; border-radius:10px; cursor:pointer; font-size:12px; font-weight:600; list-style:none; }
.contact-list-filter summary::-webkit-details-marker { display:none; }
.contact-list-filter summary span { color:#64748b; font-weight:400; }
.contact-list-filter[open] summary { border-color:#713aff; }
.contact-filter-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:30; width:max(100%,240px); max-width:calc(100vw - 60px); padding:10px; border:1px solid #d8ddeb; border-radius:12px; background:white; box-shadow:0 8px 30px #21164122; }
.contact-filter-options { max-height:240px; overflow-y:auto; margin-top:8px; font-size:12px; }
.contact-filter-options label { display:flex; gap:8px; align-items:center; padding:8px 6px; cursor:pointer; overflow-wrap:anywhere; }
.contact-filter-options label:hover { background:#f4f0ff; }
.contact-filter-options input { flex-shrink:0; accent-color:#713aff; }
.contact-list-surface:has(.contact-list-filter[open]) { overflow:visible; }

.contact-filter-channel-logo { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }

.company-picker { position:relative; }
.company-picker-options { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; max-height:240px; overflow:auto; padding:6px; border:1px solid #d8ddeb; border-radius:10px; background:#fff; box-shadow:0 8px 24px #21164122; }
.company-picker-options button { display:block; width:100%; padding:10px; border:0; border-radius:6px; background:white; color:var(--ink); font:inherit; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.company-picker-options button:hover, .company-picker-options button[aria-selected="true"] { background:#f1ebff; color:#6132cf; }
.company-picker-options p { margin:8px; font-size:12px; color:#64748b; }

#contactForm .field-label, #contactEditForm .field-label { align-content: start; }
#contactForm input[name="displayName"], #contactEditName, #contactCreateCompany, #contactEditCompany { height: 46px; min-height: 46px; box-sizing: border-box; margin-top: 0; }
.company-picker-options { padding:4px; border-radius:6px; box-shadow:0 3px 10px #21164114; max-height:180px; }
.company-picker-options button { padding:7px 10px; font-size:12px; font-weight:400; }

dialog.attachment-preview-dialog.is-pdf-preview { width: min(1500px, calc(100vw - 24px)); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); padding: 0; }
.is-pdf-preview .attachment-preview-card { width: 100%; max-width: none; height: 100%; max-height: 100%; min-height: 0; padding: 18px; box-sizing: border-box; }
.is-pdf-preview .modal-head { flex: 0 0 auto; min-width: 0; }
.is-pdf-preview .modal-head > div { min-width: 0; }
.is-pdf-preview #attachmentPreviewTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.is-pdf-preview .attachment-preview-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; border-radius: 8px; background: #525659; }
.attachment-pdf-viewer { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; border: 0; background: #525659; }
.pdf-preview-status { padding: 24px; color: white; text-align: center; line-height: 1.5; }
.is-pdf-preview .attachment-preview-actions { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; }
.message-pdf-open { cursor: pointer; }
.message-pdf-open:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 640px) { dialog.attachment-preview-dialog.is-pdf-preview { width: 100vw; height: 100dvh; max-height: 100dvh; } .is-pdf-preview .attachment-preview-card { padding: 10px; } .is-pdf-preview #attachmentPreviewTitle { font-size: 15px; } }

/* Roles workspace */
.roles-route .route-heading { max-width: 1440px; margin-bottom: 18px; align-items: center; }
.roles-route .route-heading h2 { font-size: 28px; letter-spacing: -.8px; margin: 0 0 7px; }
.roles-route .route-heading p:not(.eyebrow) { font-size: 13px; margin: 0; }
.roles-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-width: 1440px; margin: 0 auto 20px; }
.roles-overview > div { display:flex; align-items:center; gap:13px; padding:16px 20px; background:#fff; border:1px solid #e5e6ef; border-radius:14px; }
.roles-stat-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#713aff; background:#f0eaff; font-size:24px; }
.roles-stat-icon.is-system { color:#3384cf; background:#eaf4ff; }
.roles-stat-icon.is-custom { color:#249b76; background:#e8f7f0; }
.roles-overview strong { display:block; font-size:23px; line-height:1.2; color:var(--ink); }
.roles-overview small { display:block; margin-top:4px; color:#778399; font-size:11px; }
.roles-route .roles-layout { max-width:1440px; margin:0 auto; grid-template-columns:280px minmax(0,1fr); gap:20px; }
.roles-route .surface { width:100%; max-width:none; margin:0; border-color:#e3e5ef; box-shadow:0 3px 16px #26335204; border-radius:16px; }
.roles-list-surface { position:sticky; top:16px; }
.roles-list-surface .surface-toolbar { padding:18px 16px 12px; border-bottom:0; }
.roles-list-surface .surface-toolbar > div { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; }
.roles-list-surface .surface-toolbar strong { font-size:13px; }
.roles-search { padding:0 12px 10px; }
.roles-search .text-field { min-height:38px; background:#f8f9fc; font-size:12px; }
.roles-route .roles-list { padding:0 10px 12px; gap:6px; max-height:calc(100dvh - 310px); min-height:100px; }
.roles-route .role-list-item { display:flex; align-items:flex-start; gap:11px; padding:13px 10px; border-radius:11px; transition:background .15s,border-color .15s; }
.roles-route .role-list-item.is-active { background:#f5f1ff; border-color:#cdbbff; box-shadow:inset 3px 0 #713aff; }
.role-list-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border:1px solid #e7e5ee; border-radius:10px; background:#f5f5fa; color:#7b8193; font-size:10px; font-weight:750; }
.role-list-item.is-active .role-list-icon { background:#e8dfff; color:#713aff; border-color:#ded1fc; }
.role-list-copy { display:grid; gap:5px; min-width:0; flex:1; }
.role-list-copy > strong { color:#17213b; line-height:1.25; }
.roles-route .role-list-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#7d8798; line-height:1.45; font-size:11px; }
.roles-route .role-list-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:2px 0 0; }
.roles-route .role-kind-badge { display:inline-flex; width:fit-content; align-items:center; padding:3px 7px; border:1px solid #e6e0f3; border-radius:6px; background:#f8f5ff; color:#7655ae; font-size:9px; line-height:1.2; font-weight:650; white-space:nowrap; }
.roles-route .role-kind-badge.is-system { color:#6d7b8e; background:#f6f8fb; border-color:#e5e9ef; }
.roles-route .role-member-count { font-size:10px; color:#8a93a4; }
.roles-route .roles-editor-surface { overflow:visible; }
.roles-editor-toolbar { position:sticky; top:0; z-index:5; background:#fff; border-radius:16px 16px 0 0; padding:18px 22px; gap:16px; align-items:center; box-shadow:0 1px #e9eaf2; }
.roles-editor-toolbar > div:first-child { display:grid; gap:5px; min-width:0; }
.role-editor-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.roles-editor-toolbar #roleEditorTitle { font-size:18px; letter-spacing:-.4px; }
.roles-editor-toolbar #roleEditorMeta { font-size:11px; line-height:1.5; }
.roles-editor-actions { align-items:center; gap:8px; flex-shrink:0; }
.roles-editor-actions button { min-height:36px; }
.roles-save-state { color:#7c8799; font-size:10px; }
.roles-save-state.is-dirty { color:#b37b2c; }
.roles-route .roles-editor-form { padding:22px; gap:20px; }
.roles-editor-identity { grid-template-columns:minmax(140px,1fr) minmax(0,1.7fr); padding-bottom:20px; border-bottom:1px solid #ececf3; }
.roles-editor-identity .text-field { min-height:42px; font-size:12px; }
.roles-permissions-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.roles-permissions-head h3 { margin:0 0 5px; font-size:15px; letter-spacing:-.25px; }
.roles-permissions-head p { margin:0; color:#8891a2; font-size:11px; }
.roles-permissions-head .text-field { max-width:230px; min-height:36px; background:#f9f9fc; font-size:11px; }
.roles-route .roles-permission-matrix { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.roles-route .role-permission-group { border-color:#e6e8f1; border-radius:12px; background:#fff; }
.roles-route .role-permission-group > header { padding:12px 14px; background:#fafbfe; align-items:center; border-color:#eceef5; }
.role-permission-group-title { display:flex; align-items:center; gap:9px; }
.role-section-icon { display:grid; place-items:center; width:27px; height:27px; border:1px solid #e7e1f4; border-radius:8px; background:#f3effa; color:#8b6bbe; font-size:17px; }
.role-settings-count { white-space:nowrap; }
.roles-route .role-permission-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:13px 14px; border-color:#f0f1f6; min-height:56px; }
.roles-route .role-permission-row label strong { font-size:11px; font-weight:550; line-height:1.5; }
.roles-route .role-permission-control .compact-select { min-width:0; width:154px; max-width:100%; height:34px; font-size:10px; padding-left:9px; padding-right:24px; border-radius:8px; }
.roles-route .role-permission-control .switch-control em { font-size:10px; color:#8a94a5; }
.roles-route .role-locked-note { padding:12px 14px; font-size:11px; line-height:1.6; border-color:#f1e5be; background:#fffaf0; color:#9a7b35; }
.roles-search-empty { padding:12px; color:#8a94a5; font-size:12px; text-align:center; }
@media (max-width:1200px) { .roles-route .roles-layout { grid-template-columns:240px minmax(0,1fr); gap:16px; } .roles-route .roles-permission-matrix { grid-template-columns:1fr; } }
@media (max-width:800px) { .roles-route .roles-layout { grid-template-columns:1fr; } .roles-list-surface { position:static; } .roles-route .roles-list { max-height:230px; } .roles-overview > div { padding:12px; gap:9px; } .roles-stat-icon { width:32px; height:32px; font-size:20px; } .roles-overview strong { font-size:19px; } .roles-editor-toolbar { flex-wrap:wrap; } }
@media (max-width:540px) { .roles-overview { gap:7px; } .roles-overview > div { padding:11px 8px; gap:7px; } .roles-stat-icon { display:none; } .roles-overview small { font-size:10px; } .roles-route .roles-editor-form { padding:15px; } .roles-editor-toolbar { padding:15px; } .roles-editor-actions { width:100%; justify-content:flex-end; } .roles-save-state { margin-right:auto; } .roles-editor-identity { grid-template-columns:1fr; gap:12px; } .roles-permissions-head { align-items:stretch; flex-direction:column; gap:10px; } .roles-permissions-head .text-field { max-width:none; } .roles-route .role-permission-row { gap:8px; } .roles-route .role-permission-control .compact-select { width:136px; } }

.roles-route .roles-editor-identity .form-span { grid-column: auto; }